Tic Tac Toe

Using this Block

You’ve probably played tic-tac-toe before – get three X’s or O’s in a row to win. This is a combination assessment and game block that is very popular with young players. It’s also 100% accessible for visually-impaired players. For each correct math question, an item is earned, which can be a rabbit, a key or anything else you can imagine. Incorrect answers get a different item – an empty snare or a lock, for example. Math questions can be multiplication, division, addition or subtraction.

Example uses

• In Making Camp Ojibwe, players learn about the importance of rabbit meat when the Ojibwe were confined to the reservation with limited options to hunt. Then, in a tic tac toe game, they answer multiplication problems to either get a rabbit for a correct answer or empty snare for incorrect.
• In Follow the Bubbles , a character distracts the door man playing a tic tac toe game with multiplication. Correct answers earn a key. Winning tic tac toe gets the character into the hotel to continue seeking the stolen primary sources.

Making it your own

What’s in the block

Like every block, the Tic Tac Toe block has HTML and config files in the folder.

• An HTML file: tic_tac_toe_math.html . You should not have to change anything in this file.
• A config file: ttt_math_config.js – This is where you will make any changes to create your unique game.

It also has two additional files that will be explained below:

• An HTML file : tic_tac_toe_division.html – You should not have to change anything in this file.
• A config file : ttt_division.config

As with most blocks, it also has an images folder. Any images used specifically in this block will be saved here. This will include the game background, image for correct answers, image for incorrect answers, image for a win screen and image for a lose screen.

The block also contains an audio folder for sounds when the player gets a right or wrong answer.

The config file

In both the ttt_math_config.js and ttt_config_division files you’ll see three sections.

Options object

As with all blocks, there is an options object. The options include instructions on how to play the game and where to go after you have won the game. This is identical for both the ttt_math_config and ttt_division_config files

const options = {
    backgroundImage: {
        src: "images/grass_background.jpg",
        alt: "grass background"
    },
    winGameImage: {
        src: "images/rabbit_and_tree.jpg",
        alt: "rabbit and tree"
    }, // OPTIONAL - image shown when game is won ;
    loseGameImage: {
        src: "images/rabbit_snares_bkg.jpg",
        alt: "snares"
    }, // OPTIONAL - image shown when game is lost ;
    completionURL: "../next_block/next_block.html",
    incorrectURL: "../next_block/incorrect.html", // URL to proceed to if not all items are answered correctly ,
    successText: "Great job! You win!",
    goodSound: "audio/ping.mp3", // Change if you want a different sound when they collect the object ,
    badSound: "audio/wrong_buzzer_sound.mp3" // Change if you want a different sound when they hit an obstacle
};

background_image: The background image for your game. This will also show up as the background image on the title screen.

winGameImage: If you want a different image to show up when the player wins the tic-tac-toe game, put the link here. Otherwise, just use delete this and it will show the same background image. NOTE: By ‘delete this’ I mean delete all of this:
winGameImage: {
src: “images/rabbit_and_tree.jpg”,
alt: “rabbit and tree”
},

loseGameImage: If you want a different image to show up when the player wins the tic-tac-toe game, put the link here. Otherwise, just use delete this and it will show the same background image.

completionURL – you’ll see this in every block. It is the URL where you want to go on the completion of this game. This, you want to change to the path to your next block.

incorrectURL – If you want the player to go to a different URL, say, to re-teach multiplication, if they get too many answers wrong, enter the path to that block here. Otherwise, you can enter the same as the completionURL if you want the player to go to the same next block, corrector not.

successText – is the text shown when they win the game. You can leave it as is or enter other text that you prefer.

goodSound – is the audio played when they answer a problem correctly. This file is in the audio folder, so you can leave it as is or upload your own file and change the file name to whatever you uploaded.

badSound – is the audio played when they answer a problem wrong. This file is in the audio folder, so, again, you can leave it as is or upload your own file and change the file name to whatever you uploaded.

The mathProblem object

Math problems can be addition, subtraction, multiplication or division without remainders.

THIS IS WHERE THE ttt_math_config and ttt_division_config DIFFER.

The mathProblem object in ttt_math_config.js

const mathProblem  = {
    operator: "*",  // Valid operations are +, -, *, /
    minValue: 2,    // Could also specify as minValue1, maxValue1, minValue2, maxValue2
    maxValue: 12,   // if you want to specify bounds for each side separately
};

operator – use + for addition, – for subtraction, * for multiplication and / for division

minValue – The minimum value for the problems. For subtraction, the minimum will always be subtracted from the maxValue. For division, the minValue will always be divided into the maxValue.

maxValue – The maximum value for the problems.

In the example above, the tic-tac-toe game will have multiplication problems in the range from 2 x 2 to 12 x 12.

The mathProblem object in ttt_division_config.js

Why two config files? Because sometimes you want to set ranges for the two numbers in an equation differently. For example, you want to assess players’ ability to divide a three-digit number by a one-digit divisor. Simply enter the minimum value for the first number, maximum value for the first number, minimum for the second and maximum for the second number, as shown below.

This is called ttt_division_config because it is generally used for division but you can use this config file and html file for addition, subtraction or multiplication, too.

const mathProblem  = {
    operator: "/",  // Valid operations are +, -, *, /
    minValue1: 100,
    maxValue1: 999,
    minValue2: 1,
    maxValue2: 9,
};

operator – use + for addition, – for subtraction, * for multiplication and / for division

minValue1 – The minimum value for one number.

maxValue1 – The maximum value for one number.

minValue2 – The minimum value for a second number

maxValue2 – the maximum value for a second number

For division, the smaller number will always be divided into the larger number. Division problems will not have a remainder. For subtraction, the smaller number will always be subtracted from the larger. All of this is done automatically, you don’t need to code anything.

In the example above, the tic-tac-toe game will have division problems in the range from 100 ÷ 1 to 999 ÷ 9 .

The displayItems object

This is identical for both the ttt_math_config and ttt_division_config files

const displayItems = [
    {
        itemID: "rabbit",
        itemImage: "images/rabbit_fat.gif",
        itemType: "correct",
        itemAltText: "rabbit"
    },
    {
        itemID: "snare",
        itemImage: "images/snare.png",
        itemType: "wrong" ,
        itemAltText: "snare"
    },
];

itemID : You can leave this as is or give it any name you want

itemImage: This is the path to an item shown when the player answers.

itemType: If itemType is ‘correct’, this image will be shown when a player answers correctly. If itemType is ‘wrong’, this image will be shown when the player gives the wrong answer.

itemAltText : alt text for the image