Dynamic Quiz Application

The Challenge

For the final project for’s Front End Development certification program, I created a client-side JavaScript-based application that reads REST JSON data from Google’s Firebase. Instead of creating a standard quiz application where the questions are hard-coded into the HTML, I wanted to create an application where all the questions, answers, and HTML form fields are stored in the database. This way, the core patterns are defined in the code, and the quiz could be fully automated and related to any topic.

The Data Structure

The first step was to architect the data structure with Google Firebase. I set up each question to be an object in an array called “questions.” Then, inside each question, I defined the main properties as “question,” “answer,” “options,” and “tag.”

The “question” property is a simple string that renders the quiz question into the user interface.

The “answer” property is a string in the majority of the use cases, except in the case of a textarea. When the field is a textarea, I made the answer an array of keywords and phrases to use for parsing the user’s written answer. Over the longer term, the answer would need to be validated on the server side, so it is hidden from the user, but that was beyond the requirements of this specific project. My initial goal for this project was to get a working prototype.

Then, there is a “tag” property, which has a data type of object. This object stores all the data for the HTML form field used for the answer input. I set it up this way so changing the type of questions is straightforward.

Last, there is the “options” property, which is an array data type used for answer options with multiple-choice questions.

Quiz Functionality

The Functionality

When the application first runs, it initiates the “Quiz” object, which acts as the control center of the application. The Quiz object uses the JQuery AJAX method to get the data from Google Firebase. Once the data is loaded, I loop through each “question,” initiate the question, and tag objects to bind the appropriate methods to the data. I also load the scoreboard and user interface.

After the application has fully loaded, hooking up the rest of the pieces becomes very simple. I can now use “questions[index].get()” to get the HTML for each question. Or, you can run “questions[index].validate()” to see if the user input is correct. Or, if you want to see how many times the user tried to answer a specific question, you can run “questions[index].get(“attempts”).”

The Result

The start of a working prototype for a flexible and fully dynamic quiz-based application has lots of opportunity for growth. The same basic design pattern can also be easily re-authored in other languages such as PHP or C#.

If you would like to experiment with my code or see a demo version choose one of the buttons below!

Demo Application GitHub Project