In this module, I have fulfilled the below User stories :-
User story 1: Design a Quiz page that keeps track of scores.
User story 2: Create an Array of objects named questions.
User story 3: Interface of the object must contain the question title, array of options, correct answer and score.
User story 4: Display questions along with options one by one to user and give a button to go to next question.
User story 5: In case user gives correct answer, increment scores by the score of the question and also show a correct text on screen, else move the user to next question.
User story 6: After all the questions are attempted by the user, show user their score and display the correct answers to them.
User story 7: Also give ability to restart the quiz to the user.
User story 8: Add atleast 10 questions to quiz along with 4 options.
User story 9: Initially show a submit button to user to submit the answer
User story 10: If user clicks the submit button without selecting an option show a prompt saying 'Please select an option'.
User story 11: After the user successfully submits a question, show him correct or incorrect status and hide the display button and show the next button to go to next question, also disable the input fields before going to next question.
1) Click on start button to start the quiz-
.png)
-
Select an option
.png)
-
If user clicks the submit button without selecting an option it show a prompt saying 'Please select an option'.
.png)
.png)
-
If user gives correct answer, increment scores by the score of the question and also show a correct text on screen, else show a incorrect text on screen move the user to next question. If user gives correct answer->
.png)
If user gives incorrect answer->
.png)
-
After all the questions are attempted by the user, user's score and correct answers are displayed
.png)
.png)
.png)
.png)
You can view the live project here-> Basic quiz module