You need to create a Single Page Application for a quiz which will have multiple choice questions and only one of the options can be correct for each question. You need to build a demo test portal which runs completely on browser without any dependency on fetching data from server. Here are the features that are required to build:
- User is asked for credentials - username & password
- If username and password are correctly entered, countdown timer starts for the test and it displays total number of questions. You can take total time for the test to be 3 minutes and you can set a total of 3 questions. [You can use some questions from this Question set or put some questions on your own]
- You need to display the question text and provide all the options in text. For selection of option, you need to create a button in rectangular shape which the user can click to express the answer. Whichever option the user selects, a ripple bubble should show up filling with yellow color. The ripple should trigger from point where user has clicked and cover the button.
- If user selects the right option, you need to show a success message and if user clicks on incorrect option, you need to show ‘Incorrect Answer’ message. You can put some animations in the buttons along with message.
- Once the timer is over or all the questions have been answered, you need to display the result summary where you should show the list of questions showcasing what was entered as the answer and the actual answer for each question. You need to display a chart (bar or pie) for the number of correct and incorrect responses. This assignment is to test your CSS skills to make an awesome UI. Please make the page aesthetically appealing and ensure to follow the styling which has been clearly mentioned in the problem statement.
P.S. You can use any SPA framework but the preferred one is AngularJS.