├── README.md └── Version 1 ├── .gitignore ├── package-lock.json ├── package.json ├── public ├── favicon.ico └── index.html └── src ├── App.css ├── App.js ├── Data └── QuizData.js ├── components ├── Quiz.js └── QuizResult.js └── index.js /README.md: -------------------------------------------------------------------------------- 1 | # React-Quiz-App 2 | A repo for quiz Application using react js and CSS 3 | 4 |

Quiz App Version 1

5 |

Video tutorial in Hindi

6 |

7 |

8 |

9 |

10 | 11 | -------------------------------------------------------------------------------- /Version 1/.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # production 12 | /build 13 | 14 | # misc 15 | .DS_Store 16 | .env.local 17 | .env.development.local 18 | .env.test.local 19 | .env.production.local 20 | 21 | npm-debug.log* 22 | yarn-debug.log* 23 | yarn-error.log* 24 | -------------------------------------------------------------------------------- /Version 1/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "todoapp", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "@testing-library/jest-dom": "^5.16.5", 7 | "@testing-library/react": "^13.4.0", 8 | "@testing-library/user-event": "^13.5.0", 9 | "react": "^18.2.0", 10 | "react-dom": "^18.2.0", 11 | "react-scripts": "5.0.1", 12 | "web-vitals": "^2.1.4" 13 | }, 14 | "scripts": { 15 | "start": "react-scripts start", 16 | "build": "react-scripts build", 17 | "test": "react-scripts test", 18 | "eject": "react-scripts eject" 19 | }, 20 | "eslintConfig": { 21 | "extends": [ 22 | "react-app", 23 | "react-app/jest" 24 | ] 25 | }, 26 | "browserslist": { 27 | "production": [ 28 | ">0.2%", 29 | "not dead", 30 | "not op_mini all" 31 | ], 32 | "development": [ 33 | "last 1 chrome version", 34 | "last 1 firefox version", 35 | "last 1 safari version" 36 | ] 37 | } 38 | } 39 | -------------------------------------------------------------------------------- /Version 1/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sachinsaini4278/React-Quiz-App/cebda3fcbfe72a0c78bc9cd836cdd6e40ca3206f/Version 1/public/favicon.ico -------------------------------------------------------------------------------- /Version 1/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 12 | 13 | 17 | 18 | 19 | 28 | React App 29 | 30 | 31 | 32 |

33 | 43 | 44 | 45 | -------------------------------------------------------------------------------- /Version 1/src/App.css: -------------------------------------------------------------------------------- 1 | *{ 2 | margin:0; 3 | padding:0; 4 | box-sizing: border-box; 5 | } 6 | body{ 7 | display: flex; 8 | align-items: center; 9 | justify-content: center; 10 | /* background-image: linear-gradient(purple,rgb(238, 48, 238)); */ 11 | background-color: #3aaccb; 12 | min-height: 100vh; 13 | width: 100%; 14 | } 15 | 16 | .container { 17 | display: flex; 18 | align-items: center; 19 | flex-direction: column; 20 | min-height: 400px; 21 | width: 400px; 22 | background-color: white; 23 | border-radius: 15px; 24 | /* box-shadow: 2px 2px 10px 1px rgb(102, 3, 102); */ 25 | box-shadow: 2px 2px 10px 1px #333; 26 | overflow: hidden; 27 | padding: 10px; 28 | position: relative; 29 | } 30 | .heading-txt{ 31 | color:white; 32 | /* color:#276272; */ 33 | font-size: 30px; 34 | font-weight: bold; 35 | margin: 10px; 36 | text-align: center; 37 | text-transform: uppercase; 38 | } 39 | .question{ 40 | margin:8px; 41 | box-shadow: 0px 0px 10px 1px #a2a3a3; 42 | border-radius: 5px; 43 | padding:5px; 44 | font-size: large; 45 | font-weight: 600; 46 | font-family: 'Times New Roman', Times, serif; 47 | min-width: 100%; 48 | min-height: 90px; 49 | display: flex; 50 | justify-content: center; 51 | align-items: center; 52 | } 53 | #question-number{ 54 | margin-right: 5px; 55 | } 56 | .option-container{ 57 | display: flex; 58 | flex-direction: column; 59 | margin:6px 4px; 60 | width: 100%; 61 | padding: 10px; 62 | } 63 | /* .option-container input{ 64 | visibility: hidden; 65 | } */ 66 | .option-btn{ 67 | box-shadow: 0px 0px 4px 1px rgb(128, 123, 123); 68 | padding: 5px; 69 | border-radius: 3px; 70 | border:none; 71 | outline: none; 72 | transition: 0.3s; 73 | margin: 5px; 74 | min-height: 30px; 75 | background-color: white; 76 | } 77 | 78 | .checked{ 79 | background-color: rgb(179, 83, 179); 80 | color:white; 81 | box-shadow: 3px 3px 4px 1px rgb(78, 69, 78); 82 | } 83 | .option-btn:hover{ 84 | background-color: rgb(212, 118, 212); 85 | color:white; 86 | } 87 | #next-button{ 88 | padding:10px; 89 | border:none; 90 | background-color: purple; 91 | background-color: #276272; 92 | color:white; 93 | border-radius: 5px; 94 | box-shadow: 3px 3px 2px 1px rgb(127, 109, 109); 95 | font-size: larger; 96 | font-weight: bold; 97 | font-family:Cambria, Cochin, Georgia, Times, 'Times New Roman', serif; 98 | transition: 0.2s; 99 | width:100px; 100 | position: absolute; 101 | bottom: 15px; 102 | } 103 | #next-button:active{ 104 | box-shadow:none; 105 | } 106 | .show-score{ 107 | position: absolute; 108 | top:30%; 109 | font-size: 40px; 110 | text-align: center; 111 | } -------------------------------------------------------------------------------- /Version 1/src/App.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import Quiz from './components/Quiz' 3 | import "./App.css" 4 | function App() { 5 | return ( 6 | <> 7 | 8 | 9 | ) 10 | } 11 | 12 | export default App -------------------------------------------------------------------------------- /Version 1/src/Data/QuizData.js: -------------------------------------------------------------------------------- 1 | export const QuizData = [ 2 | { 3 | question: "Which language runs in a web browser?", 4 | options:[ "Java", "C", "Python", "JavaScript"], 5 | answer: 4 6 | }, 7 | { 8 | question: "What does CSS stand for?", 9 | options:["Central Style Sheets", "Cascading Style Sheets", "Cascading Simple Sheets", "Cars SUVs Sailboats"], 10 | answer: 2 11 | }, 12 | { 13 | question: "What does HTML stand for?", 14 | options: ["Hypertext Markup Language", "Hypertext Markdown Language", "Hyperloop Machine Language", "Helicopters Terminals Motorboats Lamborginis"], 15 | answer: 1 16 | }, 17 | { 18 | question: "What year was JavaScript launched?", 19 | options: ["1996", "1995", "1994", "none of the above"], 20 | answer:2 21 | }, 22 | ]; -------------------------------------------------------------------------------- /Version 1/src/components/Quiz.js: -------------------------------------------------------------------------------- 1 | import React, { useState } from 'react' 2 | import { QuizData } from '../Data/QuizData' 3 | import QuizResult from './QuizResult'; 4 | function Quiz() { 5 | const [currentQuestion,setCurrentQuestion]=useState(0); 6 | const [score,setScore] = useState(0); 7 | const [clickedOption,setClickedOption]=useState(0); 8 | const [showResult,setShowResult]=useState(false); 9 | 10 | const changeQuestion = ()=>{ 11 | updateScore(); 12 | if(currentQuestion< QuizData.length-1){ 13 | setCurrentQuestion(currentQuestion+1); 14 | setClickedOption(0); 15 | }else{ 16 | setShowResult(true) 17 | } 18 | } 19 | const updateScore=()=>{ 20 | if(clickedOption===QuizData[currentQuestion].answer){ 21 | setScore(score+1); 22 | } 23 | } 24 | const resetAll=()=>{ 25 | setShowResult(false); 26 | setCurrentQuestion(0); 27 | setClickedOption(0); 28 | setScore(0); 29 | } 30 | return ( 31 |

32 |

Quiz APP

33 |

34 | {showResult ? ( 35 | 36 | ):( 37 | <> 38 |

39 | {currentQuestion+1}. 40 | {QuizData[currentQuestion].question} 41 |

42 |

43 | {QuizData[currentQuestion].options.map((option,i)=>{ 44 | return( 45 | 55 | ) 56 | })} 57 |

58 | 59 | )} 60 |

61 |

62 | ) 63 | } 64 | 65 | export default Quiz -------------------------------------------------------------------------------- /Version 1/src/components/QuizResult.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | 3 | function QuizResult(props) { 4 | return ( 5 | <> 6 |

7 | Your Score:{props.score}
8 | Total Score:{props.totalScore} 9 |

10 | 11 | 12 | ) 13 | } 14 | 15 | export default QuizResult -------------------------------------------------------------------------------- /Version 1/src/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom/client'; 3 | import App from './App'; 4 | 5 | const root = ReactDOM.createRoot(document.getElementById('root')); 6 | root.render( 7 | 8 | 9 | 10 | ); 11 | 12 | // If you want to start measuring performance in your app, pass a function 13 | // to log results (for example: reportWebVitals(console.log)) 14 | // or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals --------------------------------------------------------------------------------