Instructions for Creating a Game of Picture Puzzle

click here to view an example of this game

  1. Download the picture_puzzle.zip file
  2. Open the questions.js file using a text editor like WordPad
  3. You will need to type in the following information:

    The letter which corresponds to the correct option
    The question
    The four possible options. These will correspond to options a, b, c and d.

Here is an example:

new question("c","The plane LEFT on time but landed twenty minutes late.", "took up", "went up", "took off", "went off"),

Each of these elements should be written within quotation marks and separated by commas. If you use and apostrophe, it should be preceded by a backslash, for example It\'s five o\'clock.

The entire question should be on ONE line and there should be a comma at the end of each of the questions except the last.

You can add as many questions as you like. The program will select 12 questions at random each time the game is loaded.

Save the file in text format. If this adds the extension .txt to your document, you will need to change it to .js. If you change the name to something other than questions.js, you will have to edit the following line at the top of the picture_puzzle.htm page:

<SCRIPT LANGUAGE="JavaScript1.1" SRC="questions.js" ></SCRIPT>

If you would like to translate the game into a different language or change the text in the instructions and/or pop-up messages, you will need to edit the corresponding variables. To make this easier to do, I have put all the editable variables together at the top of the picture_puzzle.htm page. To see the source code, open the page with a text editor like WordPad or click on HTML (FrontPage) or View/Code (Dreamweaver).

If you like, you can use a different picture for your puzzle. This is what you need to do:

  1. Download ShoeString's PictureDicer.
  2. PictureDicer will chop the image into 12 80x80 squares so you may need to modify the dimensions of your image so they are 320x240 pixels.
  3. Save your image with the name quad.jpg and put it in the subfolder called images (this will overwrite the existing quad.jpg file).
  4. Open PictureDicer, go to File/Load Image and select quad.jpg.
  5. Go to File/Load Grid and select quad.grd (which is included in the images subfolder of the picture_puzzle.zip file you downloaded).
  6. Now select File/Process Image. PictureDicer will create 12 separate images called quad000.jpg - quad011.jpg.

If you decide to post this activity, remember that you will need to upload all the necessary files and respect the path to the images, which should be in a subfolder called images. You will also need to upload the .js file into the same folder as the picture_puzzle.htm page.

If you would like to have 3 options instead of 4, download this zip file with an alternative version of the picture_puzzle.html and questions.js files. 

If you have any problems using this script, you can contact me at birgit@cybernetic-meadows.net. Please send the URL of the page that is not working properly.

If you would like to share the activities you have created with other teachers, please send me an email with the URL of your activity and I will link to them from this site.

The same questions.js file can be used to create a game of Tic-Tac-Toe (for 2 players) or a game of Snakes and Ladders (for 1-4 players) by adding an additional variable to the array in which to store the feedback students get when they do not answer correctly.