Editing Questions and Answers in HTML 5 Games

By on June 25, 2012

This tutorial shows you how to edit questions and answers in the HTML 5 game templates. (Note: Most of the games have all of the features below but not all of them. At times a certain feature doesn’t make sense with the structure of the game.)

Two editing methods for the games:

  • Edit on a server: Upload all of the files that you downloaded with your purchase to a web-server. You can then point a browser to the config.html file in the game folder. That will launch an online editor. You can make design and text edits and click the Save button. You can then reload the game and view your edits.
  • Edit on your local machine: You can open the questions, design, and sounds ini files in Dreamweaver or a text editing program. After you make your changes you’ll need to upload the files to a server to view the games. You can not run the game locally.

 

Working with Questions/Answers

  • Make sure that you make a copy of the game files so that you always have an original to go back to.
  • Upload your game files to a server and point your browser to the config.html file. That will launch on online editor.
  • Use the Questions tab on the editor to edit the text. (The green text in the editor represents the text in the game.)

 

Setting the Number of Questions in a Game

(Not applicable to GameShow or Bootcamp) Your game automatically comes with a bunch of questions that are ready to use. Most games have question code for 15-20 questions.
You can indicate how many of the questions will be used in your game by changing the value of the question_count.

Example
question_count=10 (The game will grab the first 10 questions that you have in the game. It will ignore any questions that you have after #10.)

You need to make sure that you have question code for each of the questions being used in the question_count. For example, if your question_count is 22, then you must have question code for 22 questions.

What if you want to add more questions than what came default in the game?
Example: Adding questions to a game

To add a question to a game just copy/paste the lines of code for a question and change the numbers. For example notice the code below, I just copied question 1o code and pasted it. Then I changed the “10s” to “11″.
[-----------------------Question 10-----------------------]
q10_text=<h1>Question 10 title</h1> Question text here…
q10_type=default
q10_answer_1=Correct answer 1
q10_answer_2=Incorrect answer 1
q10_answer_3=Incorrect answer 2
q10_answer_4=Incorrect answer 3
q10_correct_answer=1
q10_correct_feedback_text=<h1>This is correct</h1> Correct feedback text here…
q10_incorrect_feedback_text=<h1>That is incorrect</h1> Incorrect feedback text here…

[-----------------------Question 11-----------------------]
q11_text=<h1>Question 11 title</h1> Question text here…
q11_type=default
q11_answer_1=Correct answer 1
q11_answer_2=Incorrect answer 1
q11_answer_3=Incorrect answer 2
q11_answer_4=Incorrect answer 3
q11_correct_answer=1
q11_correct_feedback_text=<h1>This is correct</h1> Correct feedback text here…
q11_incorrect_feedback_text=<h1>That is incorrect</h1> Incorrect feedback text here…


Setting up a Question Pool

(Not applicable to GameShow or Bootcamp) You can have the game pull from a “pool” of questions. You use questions_displayed_from_count to do this. Un-comment that line and then indicate the number of questions that should be pulled from the question_count. (Basically question_count becomes your “question pool”.)
Example: 5 questions being pulled from a pool of 10
question_count=10¬† (This is the number of available questions in the “pool”.)
questions_displayed_from_count=5 (This is the number of questions that will randomly be pulled from the question count above.)

 

Working with Question Types

There are 3 question types available in each game. You control the type by editing the question type tag in the game (q1_type).

    • ¬†Multiple Choice – Leave the question type as default. This will show all of your possible answers and allow you to indicate 1 correct answer.
    • T/F – This is the same as a multiple choice but you just comment out or delete some of the possible answers.
    • Multiple Answer – Change the question type to multiple. This will allow you to indicate that more than one answer is correct. A Confirm Selection button will appear for the user to click.

Example 1: Multiple choice question with 4 answer buttons.

q1_text=<b>Question 1 title</b> Question text here… (This is where you put your question text. You can use basic HTML tags also like <b>, <i>, <a href>, etc.)
q1_type=default (Indicate the question type here.)
q1_answer_1=Correct answer (This is the text on the answer 1 button.)
q1_answer_2=Incorrect answer 1 (This is the text on the answer 2 button.)
q1_answer_3=Incorrect answer 2 (This is the text on the answer 3 button.)
q1_answer_4=Incorrect answer 3 (This is the text on the answer 4 button.)
q1_correct_answer=1 (Indicate which of the answers above are correct. Since this is a default question type then you can only have 1 correct answer.)
q3_correct_feedback_text=<h1>This is correct</h1> Correct feedback text here… (This is your correct feedback text. The <h1> tag is automatically green text.)
q3_incorrect_feedback_text=<h1>That is incorrect</h1> Incorrect feedback text here… (This is your incorrect feedback text. The <h1> tag is automatically red text.)

Example 2: Multiple answer question with 4 answer buttons.

q1_text=<b>Question 1 title</b> Question text here… (This is where you put your question text. You can use basic HTML tags also like <b>, <i>, <a href>, etc.)
q1_type=multiple (Indicate the question type here. I put multiple so that the user will need to select more than one answer.)
q1_answer_1=Correct answer 1 (This is the text on the answer 1 button.)
q1_answer_2=Correct answer 2 (This is the text on the answer 2 button.)
q1_answer_3=Incorrect answer 2 (This is the text on the answer 3 button.)
q1_answer_4=Incorrect answer 3 (This is the text on the answer 4 button.)
q1_correct_answer=1,2 (Indicate which of the answers above are correct. Since this is a multiple question type then you can have multiple correct answers. I’ve indicated that 1 and 2 are correct. The user must select both of those answers to get this question correct.)
q3_correct_feedback_text=<h1>This is correct</h1> Correct feedback text here… (This is your correct feedback text. The <h1> tag is automatically green text.)
q3_incorrect_feedback_text=<h1>That is incorrect</h1> Incorrect feedback text here… (This is your incorrect feedback text. The <h1> tag is automatically red text.)

Example 3: T/F question with 2 answer buttons.

q1_text=<b>Question 1 title</b> Question text here… (This is where you put your question text. You can use basic HTML tags also like <b>, <i>, <a href>, etc.)
q1_type=default (Indicate the question type here.)
q1_answer_1=Correct answer (This is the text on the answer 1 button.)
q1_answer_2=Incorrect answer 1 (This is the text on the answer 2 button.)
#q1_answer_3=Incorrect answer 2 (Since this is a T/F question we only need to have 2 possible answers. Notice that I put a pound sign in front of this line. That will “comment it out” and hide this button. You could also delete this line if you’d prefer.)
#q1_answer_4=Incorrect answer 3 (The pound sign at the beginning of this line will hide this answer button.)
q1_correct_answer=1 (Indicate which of the answers above are correct. Since this is a default question type then you can only have 1 correct answer.)
q3_correct_feedback_text=<h1>This is correct</h1> Correct feedback text here… (This is your correct feedback text. The <h1> tag is automatically green text.)
q3_incorrect_feedback_text=<h1>That is incorrect</h1> Incorrect feedback text here… (This is your incorrect feedback text. The <h1> tag is automatically red text.)

Example 4: Adding additional answer buttons to a question.

You can copy/paste an answer’s line of code to create another answer button.
q1_answer_1=Correct answer 1 (This is the text on the answer 1 button.)
q1_answer_2=Correct answer 2 (This is the text on the answer 2 button.)
q1_answer_3=Incorrect answer 2 (This is the text on the answer 3 button.)
q1_answer_4=Incorrect answer 3 (This is the text on the answer 4 button.)
q1_answer_5=Incorrect answer 4 (Games only have 4 answers by default. However some games have room for additional answers. I added a 5th answer button here by copying answer 4 and changing the 4 to a 5.)
q1_answer_6=Incorrect answer 5 (This is another answer button that I added by copying the code of another answer button and pasting it here. I then changed the answer number to 6.)

 

Centering Text on Questions and Answers

You can center text in the questions and answer by using this code in the text area:
<div style=text-align:center>Line 1 of text here\Another line of text here</div>

Example:
Here is an example of how to center text on an answer button:
q1_answer_1=<div style=text-align:center>Correct answer 1\More text</div>

 

Additional HTML 5 Tutorials
Getting Started with HTML 5 Games

Changing Visual Elements, Backgrounds, and Colors in HTML 5 Games
Working with Audio in HTML 5 Games
Adding Images to Questions in HTML 5 Games