Get an Animal

Using this Block

This is an assessment and game block that is very popular with young players. For each correct math question, the player gets another animal or item for their animal. Math questions can be multiplication, division, addition or subtraction. Division problems will all have a whole number quotient, with no remainder. Division can also include converting fractions to a whole number, as shown in the example below.

Example uses

• Players solve multiplication problems to get a dog and then earn food, water, a bone and a dog house.
• Players solve division problems to get a horse, then earn food, water and exercise time for their horse.
• Players solve addition problems to get different animals for their farm.

Making it your own

What’s in the block

Like every block, the get_animal block has two files in the folder:

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

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 and the “animals”.

There is also an audio folder that has the sounds to play when you get a new animal or object for your animal.

The config file

Page options

In the get_animal_config.js file you’ll see three sections. As with all blocks, there is an options object. The options include the number of problems to askm and where to go after you have won the game.

const options = {
    num_problems  : 5 ,  // Number of problems to show ;
    backgroundImage: "images/background.jpg",
 initialQuestion: "<em>To play with your dog, answer the question and click on the <strong>ANSWER</strong> button.</em>",
    completionURL: "../next_block/next_block.html",
};

num_problems: As you might guess, this is the number of problems you will ask the player.

backgroundImage – This image will be the background of each screen in the get_animal block. We recommend an image that is not too busy.

initialQuestion – This text shows up at the first problem. As can be seen from the example above, HTML tags can be used to style the question. You can also just type plain text.

completionURL – You’ll see this in every block. It is the URL where you want to go on the completion of this assessment.

Math problems

const mathProblem =
    {operator: "/", minValue1: 4, maxValue1: 361, minValue2: 2, maxValue2: 19, template:  "What is the fraction {1} / {2} written as a whole number?"};

The math problem takes six values. Five are required and one is optional.

operator – Options for operator are
+ for addition
– for subtraction
* for multiplication
/ for division

NOTE: using other symbols, like x for multiplication or ÷ for division will not work and instead of a math problem, the screen will show “undefined”.

minValue1 – This is the minimum for the first value. For multiplication and addition, the order is irrelevant. For subtraction, this is the number from which the second number will be subtracted. We bet you don’t remember from second grade that this is called the minuend. For division, this is the number which is divided by the second number (the dividend)

maxValue1 – This is the maximum for the first value. For example, if you want students to be multiplying a whole number of up to four digits by a one-digit whole number, the maximum value might be 9999. Do not use a comma separator.

minValue2 – This is the minimum for the second value. For example, if you want students to be multiplying a whole number of up to four digits by a one-digit whole number, the minValue1 might be 1 or 2.

maxValue2 – This is the maximum for the second value. Continuing with our example, if you want students to be multiplying a whole number of up to four digits by a one-digit whole number, the maxValue2 would be 9.

template: This is optional. If you do not include a template, problems will be presented in the format – “What is 100 + 10?” , using the operator you specified. For division, the default problem will show in the form “What is 100 ÷ 10 ?” and for multiplication, “What is 10 x 10?” The image below shows a different template than the default, specified in the config file. If you want to use the default, simply delete the template.

Sources

const sources =
    [
        ["I am your dog. Name me!","images/dog-wag-blink.gif",""] ,
        ["I'm hungry.","images/dog-wag-blink.gif",""],
        ["Thanks for the food.", "images/dog-eating.gif", "audio/dogbark.mp3"],
        ["Food makes me grow.","images/dog-assess-grow.gif", "audio/dogbark.mp3"]  ,
        ["Sorry but I have to go.","images/dog-assess-shrink.gif", "audio/dogbark.mp3"]
    ];

This is where you specify the text, image and, optionally, audio, when a player answers a question correctly. NOTE: The source for answering the first question is naming the animal. You can change the text or image, and after the first question is answered, the player will enter a name. We’ve included it because we have found that young players REALLY like this option. Subsequent images can be gif files like in our example, or png.

For each source, in quotes, enter:

1. The text to display after the correct answer
2. The image to display after the correct answer
3. Audio to play after the correct answer. If there is no audio, simply enter empty quotes, as shown in the first source above.

FAQ

Instead of a question, I see “undefined”. ANSWER: The most likely problem is that you used some symbol other than the four allowed for operator. You need to use either +, – , * or /