Exercise 1 Pop Quiz

Exercise 1 - Pup Quiz

Description

Write an angular application that presents a multiple choice question. The application should present a question (for example, 'how much is 6 * 7') and 4 possible answers. The user should select an answer and then get an indication that tells if the answer is correct.

Steps

Step 1 - Basic App

Present the user with the answers and show a response "correct" or "wrong" depending on the selected answer.

Step 2 - Game Over

Once the user has selected an answer, show a response and block the user from re-selecting.

• Make the answers "half transparent" so that it will be clear that they are disabled
• Make sure the view model does not change the selected answer once it has already been selected

Step 3 - Colors

Paint the feedback green if the answer is correct, and red if it is wrong.

Step 4 - Present the correct answer

If the answer is wrong, show the correct answer is green. Of course, you should only paint it green AFTER the user has already answered.

Step 5 - Special Design

Use Flex and Grid to arrange the answers neatly on the screen. Instead of writing out "Correct" and "Wrong" use colors:

• Paint the selected answer in some way
• If it is correct mark it in green
• if it is wrong, mark it red, and then mark the correct one in green