This project has three main api endpoints that drive this application.

• /api/quiz/quizzes: retrieve all avaliable quizzes
• /api/quiz/questions: retrieve all questions for a given quiz_id
• /api/quiz/answer: submit an answer for a given question_id

You can view the spec for these api endpoints and query them yourself via our scalar docs here

Here is the actual api endpoint code as well.

Once a user selects Start Quiz we take the quiz_id and query the questions api endpoint to get all of the questions for the quiz. An object for the active quiz is created and managed via a client's localStorage which allows a user to continue an active quiz regardless of the page's state. This also allows a user to have many active quizzes at once!

Once a user selects an answer we send a POST to our answer api endpoint to grade. We display the answer to the user and store the answer and its details inside of the active quiz object attached to the question. This helps keep track of what questions have been answered and we also use this to display the final grade of the quiz at the end.

I implemented a shuffle options setting to allow users to retake quizzes with the options being shuffled around. This was a real challenge because my api has the options defined to specific letters so we can match the correct one when you hit our answer endpoint.

So I implemented a system where we keep an optionOrder array attached to the quiz data. If the setting for shuffle is on, we shuffle around that order when starting a quiz. The javascript will put each input element in the form corresponding to the optionOrder but will always keep the correct value of the option on the input element even if we shuffle around the order. And we also have to do the inverse when displaying the correct option back to the user. We lookup the displayed letter next to the correct input option and present that in our answer span element to the user.

Later on in development I implemented some client side settings to allow a user to customize their quizzes. At the time of writing there are two settings implemented to the user.

• Max questions: limits the max number of questions per quiz
• Hide answers: will hide answers till the end of the quiz

Max questions was easy to implement because I thought of it when setting up the api. Our questions endpoint accepts a limit paramater which limits the amount of questions in the api response.

Hide answers wasn't too difficult. When a user selects an answer for a question and we check it against our answer api endpoint, we just check the hide answsers setting to determine if we display the answer to the user.

The database schema setup is pretty simple. We have a quizzes table and a questions table. Each question has a foreign key relationship to a quiz_id in the quizzes table which we use to fetch all questions for a given quiz_id in our questions api endpoint. The questions table also has a ON UPDATE/DELETE CASCADE foreign key referential action attached to them, which will delete or update any records in the questions table if their matching quiz_id in the quizzes table is deleted or updated.

I wanted to make adding quizzes to this application really easy. So what I did was add a simple python script that loads questions from a CSV file into our database. The secret sauce of this process is that my flask application has the db models defined within it, and I've added checks/rollback in case there are any issues with loading a question. By doing all of this I ensure that only valid quiz questions get loaded into my database and the process is really simple to add new quizzes in the future.

Here is the python script to load the quiz questions and here is the database models definied in my flask app.