This is a simple quiz app built with React. The app allows users to participate in a quiz by answering a series of questions and provides instant results upon completion.
- Languages: HTML and Module CSS
- Libraries/Frameworks: React.js, react-icons, classnames, material-ui-tooltip, react-circular-progressbar, react-visibility-sensor
- Version Control: Git
- Package Managers: NPM
The quiz app is designed with the following flow:
-
Landing Page: Upon launching the app, the user is presented with the initial landing page. The page prompts the user to click a button to enter the quiz.
-
Instructions Page: After the user clicks the "Enter Quiz" button, the quiz timer starts. The app transitions to the instructions page, where the user is provided with clear instructions for the quiz. After a brief delay of 3 seconds, the app automatically proceeds to the quiz component.
-
Quiz Component: The quiz component is where the main quiz interaction takes place. It presents a series of questions, each question accompanied by four answer options. The app retrieves the questions, options, and correct answers from an array stored in its data source.
-
User Interaction: As the user progresses through the quiz, they can select one answer option for each question. The app uses React state to capture and store the user's selected answers for later evaluation.
-
Submitting the Quiz: Once the user has answered all the questions, they can submit the quiz by clicking the "Finish" button. At this point, the app calculates the user's final score by comparing their selected answers with the correct answers stored in the data source.
-
Results Component: After submitting the quiz, the app transitions to the results component. This component displays the user's score, indicating how many questions they answered correctly out of the total. Additionally, the results component presents two buttons: one for reviewing the quiz to see correct answers and their responses, and another button to retake the quiz if desired.
The quiz app employs React for its user interface, using state management to handle user selections and keep track of the quiz progress. The data source contains an array of questions, options, and correct answers, facilitating the dynamic presentation of the quiz content. Overall, the app aims to provide users with an engaging quiz experience, complete with clear instructions and informative results.
To clone and run this application, you'll need Git and Node.js (which comes with npm) installed on your computer. From your command line:
# Clone this repository
$ git clone https://github.com/gayathri1462/ReactQuizApp
# Install dependencies
$ npm install
# Run the app
$ npm start- React - A JavaScript library for building user interfaces.
- React Router - A popular routing library for React applications.