Creating a Multiple Choice Quiz in HTML5

In this article, we’ll look at how you can create a multiple choice quiz app that will play back directly in any modern browser. No plugins required, no App Stores required – the result is pure HTML5. You can see the result of this example at http://www.appcobra.com/x/KS2/thesimpsons.

We’ll be using AppCobra to illustrate how easy this is. It requires at least version 10.9.40 – which was uploaded on 2nd March, 2013. You can download a trial at http://www.appcobra.com/ipaddownloads.htm.

AppCobra is the world’s premier HTML5 editing tool for mobile and HTML5 browser apps. After this article, you’ll see why. And is this article, we only scratch the surface of its power.

Features

This document covers the multiple choice quiz features of AppCobra,
including:

  • Opening a Quiz Template
  • Modifying the Quiz Template
  • Changing Title
  • Selecting a Quiz File
  • Editing a Quiz File
  • Setting Quiz Options
  • Running the Quiz

This script uses an Australian Birds Multiple Choice Quiz as its basis. In this demonstration, we open an existing multiple choice quiz template, and edit and add to this template. We then select a quiz data file, add a new question, set some quiz options, and run the quiz.

Open AppCobra. Bypass the introductory dialog boxes so you are looking at a blank screen.

mcq003

Use the Apps / Open a Template / Open iPhone Template command to open a template.

A range of templates are provided to give you a head start on creating multiple choice quizzes. Each template can be used, edited, added to – you can even create your own. Select the template called iPhoneAppMCQ. Click on Open.

The template you open should look something like the image below:

mcq004

By this stage, you should be aware of general AppCobra screen areas, like the canvas, the objects list, and the timeline.

This quiz template has been designed to be fully ready to go. You can of course change anything about the appearance of this template you like – background colors, button colors and styles, fonts – even load a logo or other object.

While you can create your own quiz screen or template from scratch, you’ll find it much easier to start with a template and modify that template if necessary.

In this case, we are going to leave the template much as it already is – except for one thing – we are going to change the title of the lesson. To do this, select the App Settings / App Title command.

From the dialog box that then appears, enter the name The Simpsons, and click on OK.

mcq005

The canvas should now look something like this.

mcq006

Even though this is a quiz template, in general, it can be edited like any other AppCobra app. You can insert steps before or after the first step, load movies, other images – whatever you like. The only caveat when editing a multiple choice quiz template is that scoring for any other events will be ignored – scores are only tabulated based on multiple choice questions presented.

This means, for example, that you could insert a step before step 1, insert a movie, and then allow the user to move onto the next step where they answer questions that may be based on the movie they just watched.

Move to Step 3 by clicking in the Step 3 area in the timeline. Your screen should appear as below:

mcq007

When the last quiz question is answered, the user is automatically sent to the next step – which appears here. In this template, we let users view their results. If you click on Step 4 in the timeline, you’ll see this:

mcq008

In this case, we have a number of text objects defined using variables to display such things as the user score, and a summary or quiz results.

Move back to Step 1 by clicking in the Step 1 area in the timeline.

Assuming we are now happy with the appearance of our template, we are now going to edit the quiz data and options. To do this, select the Assessment / Multiple Choice Quiz Setup command. The following dialog box will appear:

mcq009

In the first tab of this tabbed dialog box (Quiz Setup, as seen above), you determine what quiz file to use with this template. A quiz file exists separately to the AppCobra template itself.

The first option in the Quiz Data File section is to load a quiz data file. Quiz data files are actually separate files to a standard AppCobra file or template. This allows you to easily move a series of
questions from one template to another in seconds.

As a part of this template, a quiz data file has already been selected, but you can select the Browse button to select a new one.

Now, however, we are going to use the current quiz file loaded with this template. Select the Edit / Create New command to view and edit the current quiz data file. When you select this command, you will see the following dialog box:

mcq010

In this quiz dialog box, you can already see some questions and possible answers that have been inserted. The following details explain what each section in this dialog box can be used for.

Question:

Question: In this text box, you enter a question – whatever you like. This is a question that will be presented to the user.

Question Image: To the right of the Question Text Box is a picture box. It will either contain a picture or the text No Image. You can right-click on this picture box to load a picture that will be presented as a part of the question. This picture will be displayed with the quiz question. This is optional.

Question Type

In this list box, you can select from Only One Answer May Be Selected, Multiple Answers May Be Selected, Multiple Answers May be Selected, but only one is correct, or True/False. This determines whether the user may have to select multiple answers as a part of the current question.

Time Limit

If you want to limit the user to a specific time to answer this question, you can select it here. This is optional.

Question Group:

This section is optional, but allows you to group questions within a quiz file, so that when you export the quiz, you can select a number of questions from each group to include in the quiz. The Create New Group button next to this listbox allows you to create a new group.

Comments:

Correct Comment: In this text box, you can enter some text that should appear should the user get this answer correct. This is optional.

Correct Comment Picture: To the right of the Correct Comment text box, you can load an image that may also appear if the user gets this answer correct. This is optional.

Possible Answers:

Answer X: In each of the Answer Text boxes, you can enter a possible answer for this question. Only Answer A and Answer B are mandatory. Whether you enter more possible answers is up to you. It is possible to have, in the same quiz, two possible answers for one question, three for another, and four for another. KP automatically hides the other possible answer buttons when necessary.

Correct / Incorrect List Box: In the top list box next to each answer, you can select whether this possible answer is the correct, or incorrect answer. Multiple correct answers may be set only if Multiple Answers May Be Selected is selected from the Question Type list box.

Points: Below the Correct/Incorrect List Box for each question, you can set how many points this correct answer is worth. The default is one.

Answer X Comment: To the right of each possible answer there is a text box where you can enter a comment. This is the comment you want to appear should the user select this option. Any text in this text box
will override the Correct Comment and/or Incorrect Comment text boxes, explained above. This is optional.

Answer X Comment Picture: At the far right of each possible answer is a picture box, where you can load a picture that should also be displayed should the user select this answer. This is optional.

Randomize Distractors. Enabled this option to ensure that the possible answers are randomized each time the lesson is run.

Navigation:

mcq001 allows you to move from one question to another. You can also add, remove and duplicate questions using the buttons on the right of the top toolbar.

Click on the Next button in the top toolbar mcq002 to view Question 2. Your screen should look something like this.

mcq011

In this case, the question itself is similar, but the possible answers, images and comments are all different.

Click on the Previous button in the top toolbar to view Question 1 again. Your screen should look something like this.

mcq010

We are going to insert a new question into this quiz. Click on the Insert Question button in the top toolbar. You will see the following message.

mcq012

Click on Yes to insert the new question before the current question. You will now have a blank screen.

Enter the following questions, possible answers, and images:

Question: The oldest son in the Simpsons is called:

Question Image: Leave blank.

Your screen should now look like this:

mcq014

For Question Type, ensure that Only one answer may be selected is selected. For Time Limit, select 30 seconds.

Leave the Correct comment and Incorrect comment text boxes empty.

Enter Bart for Answer A. Ensure that correct is selected, and that this is worth 1 point. For the Answer A comment, enter Yes, Bart is the oldest son.

Your screen should now look like this:

mcq015

Enter the following details for the other possible answers.

Enter Lisa for Answer B. Ensure that incorrect is selected. For the Answer B comment, enter No, Lisa is the oldest daughter.

Enter Maggie for Answer C. Ensure that incorrect is selected. For the Answer C comment, enter No, Maggie is the youngest daughter.

Enter Marge for Answer D. Ensure that incorrect is selected. For the Answer D comment, enter No, Marge is the mother.

Your screen should now look like the following:

mcq016

We are not going to use the Answer E possible answer or Answer F possible answer for this quiz.

We are now going to save this quiz file. Use the Save As button in the top toolbar. Select a folder somewhere on your local hard drive to save this quiz file to.

mcq017

Once you’ve done this, click on the Load button.

You’ll then be returned to the Quiz Options Screen.

mcq018

In the Quiz Options section, you can now select options that will either add to quiz functionality, or override some settings set in the quiz data file that has been loaded.

Use All Questions in Quiz: Use this option to present the user with all questions in the quiz file, in the order that that appear in the quiz file.

Use All Questions in Quiz Randomly: Use this option to present all questions in the quiz in a random fashion.

Use a Subset of Questions in Quiz: If your quiz data file has, for example, 60 questions, you can select a maximum number of questions to present in any one attempt by a user.

Use Questions From These Groups: If your quiz data file contains groups, you can select here how many questions to ask from the groups defined in the quiz file.

Now click on the Advanced Quiz Options tab. You’ll see the following options:

mcq019

Use Feedback as Defined in Quiz Data File: If this option is selected, the various comments inserted in the quiz data file will be used when the user selects an answer (correct or incorrect) and will override any settings you made in the Display this feedback for all Correct Answers or Display this feedback for all Correct Answers options below. If this option is not selected, all comments in the quiz data file will be ignored, and not displayed at all.

Display this feedback for all Correct Answers: This option allows you to override any comments for correct answers set in the quiz data file with a global message should the user get the answer correct.

Display this feedback for all Correct Answers: This option allows you to override any comments for incorrect answers set in the quiz data file with a global message should the user get the answer incorrect.

In the Timed Questions section, you can override any quiz question timing settings made in the quiz data file with global settings, or cancel any timing at all. A Message When Time Limit Reached can be
set to display should the user not answer a question in time – if nothing is inserted in this text box, the next question will immediately appear when a user times out.

The Skipping Questions options relate to the feature where you can allow a user to skip a question, and come back to it later in the quiz (when all other questions are complete). To use this option, a button must be defined on the canvas with the event Skip Quiz Question – otherwise Skip options are ignored.

Finally, you can set a Selected answer color. This is a color that an answer selected by a user will turn when it is selected, to indicate that is has been selected. To use this feature, a button must be defined on the canvas with the event Submit Quiz Answer – otherwise when a user selects an answer, it is submitted immediately, and does not change color.

When you have selected all the answers you want to select here, click on Preview to see how the quiz works. The following screen should appear.

mcq020

Click on the Begin option to view the quiz.

mcq021

The first question, randomly selected, appears.

Based on the data we entered for this quiz, and the options selected in the Quiz Options dialog box, a comment and an image appears when you select an answer. Once you click on OK, you move onto the next question.

mcq022

mcq023

mcq024

At the end of this quiz, a results summary is displayed. This is totally optional, and just happens to be have been set to display in the template we loaded. This is similar to the information that would be sent back to a Learning Management System.

mcq025

Now close this preview window down. You should then return to the AppCobra screen.

We are going to load a new quiz data file, and leave this template alone except for one thing – the project title. Select the App Settings / App Title command.

From the dialog box that appears, enter the text Famous Bands, and click on OK.

mcq026

Your screen should now look like the one below.

mcq027

Once again, select the Assessment / Multiple Choice Quiz Setup command.

We are going to leave all the same options set, except we are going to load a new quiz file. To do this, select the Browse… button next to the Quiz Data File text box.

From the AppCobra / Quiz Data Files directory, select the quiz data file Famous Bands, and click on Import.

Technical Note: If you wanted to now edit the quiz data file you just loaded, you would select the Edit/Create New button from the Quiz Options dialog box.

When you return to the Quiz Options dialog box, click on the Preview button. The quiz data file and the template will be combined, and the result will be previewed in a browser window.

mcq028

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s