Search the Knowledge Base/Activities Tutorials/HTML 5 Games and Interactions

Getting Started with HTML 5 Games

Sue H
posted this on April 24, 2013 09:40

This tutorial will help you get started with our HTML 5 Games. The video covers the basics on how to use the games. View the other tutorial videos for more detailed information.

Make sure that you make a copy of the game files so that you always have an original to go back to.

 

Important: You must use a modern browser to edit and view these games. For example only IE9 and newer will work.

Two Editing Methods

Method 1: Edit on a Server (Preferred Method)
Upload all of the files that you downloaded with your purchase to a web-server. (Game folder and Core folder) You can then use a browser to launch the config.html file in the game folder. That will launch an online editor.

Online Editor (config.html)

  • Questions tab – This tab is used to make text edits to the game. It has all of the settings for the questions and answers. (This tab is editing the questions.ini file in your game files on the server.)
  • Design tab – This tab is used to control the colors and graphics in the game. (This tab is editing the design.ini file in your game files on the server.)
  • Sounds tab – This tab has the information for the sounds in the game. (Not audio added to questions though. That’s controlled in the Questions tab.) (This tab is editing the sounds.ini file in your game files on the server.)
  • Save button – This button saves you changes. (Anyone that pulls up the URL to the editor will see your changes.)
  • Reload game button – Use this button to see your changes after you save them.
  • Load defaults button – This button will reset all of the tabs back to the original information that came with the game. All of your changes will be over-written. You should go to the server and make a copy of your files if you want to keep the changes you’ve made.

Method 2: Edit on your Computer
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, it must be placed on a server. (There is an easy way to create a webserver on your computer if you’d like to try. XAMPP)

Launching your Final Game
Ok, let’s say that you’ve done all of your game edits and are ready to go live. Notice in the game folder that there is a game.html file. You can simply open your browser and point to that file and the game will launch (if files are on a server). Then later on you can point back to the config.html file and make any edits that are needed. When you hit save the game will be updated and anyone using that game.html link will see your edits.

However you may also want to copy all of the final game files and place them on a different server (i.e. on your LMS or into your course files). Just copy the files wherever you’d like and then point to the game.html file.

 

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

 
Topic is closed for comments