A responsive COVID-19 quiz where the user has to classify 10 statements as either a myth or a fact. Visit the quiz here.
- Select a fixed set of questions to be displayed on the website. There must be a minimum of 10 questions with appropriate options.
- Come up with a good way of storing these questions and options. You could use arrays and objects. Make sure the code is neat and optimized.
- Make the website look attractive with a good color scheme. Try including images as well.
- The questions must appear one after another on the screen. There must be only one question on the screen at a time.
- There must be buttons to navigate to the next and previous questions.
- Upon answering a question, the user must be notified if the selected options are right or wrong. Be as creative as possible in notifying the user. Few examples include, changing the color of the selected option to red or green or changing the background color with some pop up message.
- At the end of the quiz, the score obtained must be displayed.
- Add an input field where the user can enter his/her name before taking the test. Make sure to display this name at the end of the test along with the score obtained.
- Display the questions in random order each time.
- Create a side navbar that will help to navigate to any random question in the quiz. Make sure the question numbers in the nav bar are appropriately colored based on whether they have been answered or not.
- Design a good scoring algorithm. You may use factors like time, number of correct questions, correct to wrong ratio, time taken per question etc. Store the high score, the name of the examinee who got the high score, date and time in local storage and display the high score details along with the score at the end of the quiz.
- Add a countdown timer that automatically submits the test once it reaches the zero mark.