Adding Images to Questions in HTML 5 Games

By on June 25, 2012

This tutorial shows you how to add images to questions in the HTML 5 games.

Images can be added to the Introduction, Question, and Conclusion areas.

Each game is a bit different on where the images is placed and how it is sized. The game will try to auto size your image but you may need to do some additional sizing. Insert your image and preview it. Then you can get a feel for any additional sizing that’s needed.

To add an image you must use the <img src> html tag. The image tag will need to specify where your image is located. There is a questions folder in each game. You can use that folder to store images and audio if desired. The following examples show you the path to find an image in the questions folder.

Here are some image source tags:

<img src=”questions/YourImageFile.jpg”/>
<img src=”questions/YourImageFile.jpg” align=”left”/>
<img src=”questions/YourImageFile.jpg” align=”right”/>
<img src=”questions/YourImageFile.jpg” align=”top”/>
<img src=”questions/YourImageFile.jpg” align=”bottom”/>
Note: Change the alignment to match the layout of your game. A top/bottom alignment might not look visually appealing in some games.

IMPORTANT: Don’t ever end your line with a “\” backslash. Bad things will happen :)

Examples of adding images

Example 1
This example adds an image to a question area. The image is aligned to the left of the text. There is a “questions” folder in each game. You can store your images there and then pull them into your game. (If you want to use a different folder you can. You just need to know the path to get to it.)

q1_text=<img src=”questions/orange.png” align=”left”/>\ (You can see that we are pulling in an image named orange.png from the questions folder. We are then aligning it to the left of the text.)
<b>Question 1 title</b>\
Question text here…

Example 2
There are times when your image and text will go beyond the graphic that is used for the question area. That’s OK. You can hide that graphic.
#q1_removeBackground=true (Uncomment this line and set it to True. That will hide the question background image for the game.)

 

Additional HTML 5 Tutorials
Getting Started with HTML 5 Games
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