Interactive Quiz Using Dropdowns

 

Creating the Form

Let's create the form that will contain our quiz. For this, we will be using a text field and a series of dropdowns. The text field will ask for the user's name, so it can be used in the response. For each question, we want to have a unique id for the select statement.

The correct answer will receive a value of 25, and an incorrect answer will receive a value of 0. You can, of course, set this up any way you want, depending on how you'd like to weight answers. For example, you might be creating a quiz that doesn't assess correct answers, but it provides different values in assessing something - like a quiz that determines what Game of Thrones character you are or what your knowledge of the '80s says about you.

In your document, replace the series of questions with the form script to the right. You will open the form tag, giving it an id of form1, so that can be used with the onsubmit event. The last two lines contain the DOM element to hold the score.

Adding Interactivity

So far, we have created a nice HTML page with a form in it with several questions and answers. But now we need to add the functionality to the form with JavaScript, so that something happens when the form is submitted.

The result is calculated as the total of the four scores, and then that amount is passed via getElementById into the id "grade" in the HTML.

Save your document, refresh the page in the browser and take the quiz. Does it calculate a score? If so, you have a working quiz. If it doesn't work, check to see if there are errors in the console and troubleshoot your problem. We'll add some additional functionality in the next section.

 

Adding Functionality

We also have a #grade2 id in the html. This is meant to hold a comment that changes based on the grade. Add the code to the right at end of your script, but before the return false; statement. This will look at the result, and depending on the value, will provide a message that will be passed into the element in the HTML with the "result2" id.

A Little Fun

You can grab some images or gifs, if you want to add additional content to the result. If you want to use the images I used in this tutorial, you can find them here, but feel free to use any images you want in creating your own projects. Be creative! For your own Interactive Quiz Project, you will be developing the quiz in a Bootstrap-enabled page. In this example, the images are named none.jpg, poor.jpg, avg.jpg, above.jpg and excellent.jpg. If your images have other names, just make sure they correspond with what is in the code. And, it is helpful if you take some time to size the images consistently. Just add the img element to the statement for "result2".

Your quiz should look something like this when completed!

Add a Question

Did you miss something? If your code isn't working, compare it to the final code to the right.

Once you get everything working, try adding another question. How does your script have to change to accomodate another question in the form, the values for correct answer, a way to evaluate the score in the script, the totals and the result messages and images?

Basic Validation

What happens when someone doesn't include their name or skips one of the questions? Coders often have to figure out validation rules for users making mistakes, so the code does not break. In our code, because we have included a 0 for the Choose One option, we have basically initialized each at 0 points. However, if you did not have a value for that option, you would need to initialize the variables with a value before the submit. If you wanted to make sure someone submitted a name, a way to handle that is to use an if statement to execute a prompt for the name, if the name was not calculated. Put the line to the right below the line where the name variable gets the value from the form.