Ask Again

About the project

Let's create a quiz app.
Our app should be able to dynamically display questions with answer options one by one, and store the results after the user has picked an option to be displayed at the end of the quiz. We should be able to go back to the previous question, handle errors and be easily maintainable so that we could add more question, more answer options without having to change the original code.

Problem

The quiz app should be able to retrieve questions and answer and dynamically show them to the users has they respond. It should be able to tell if they answer is correct or not, prevent the user from advancing to the next question if no answer was picked, give the option to go back to the previous question if possible or needed. Our app should also be able to show the results of the quiz and give the option to restart the quiz for a complete user-experience.

Solution

We created a simple quiz app called "Ask Again". The app displays questions and answers using JSON and Javascript by retrieving them in a local database. The users can the number of questions they still have to answer and they are prevented from skipping the current question without answering it. An error message is displayed when they try. If the user decides to go back to the previous question, then the answer to the current and previous question are erased from the database to ensure the results are always correct. After answering all the question, the users are congratulated and can view their score, and have the option to retake the quiz.

Let's take a look at the results

I went for a simple design for the overall app interface. On the first question there is no option to go back and the option appears only after we answered to this question. Here we have only 3 questions and 4 asnwers options but we can easily add more without having to modify the code and everything will be dynamically updated.

The user has to choose one answer to go to the next question. The app asks to choose one option to be able to move forward. We cannot leave a question unanswered.

After successfully completing the quiz, the app displays the results and gives the option to retake the test. No matter what the score is, we decided to always congratulate the user to get them motivated to try again.