Caves and Trees: Multiple Choice

Using this Block

This is a combination game and assessment block. You might also consider it practice or instruction. The player rolls a die to advance through the game. Caves send the player back, trees can be climbed to the next row. If a player lands on one type of square, they must answer a multiple choice question to advance. A second type of square asks a harder question but the player advances twice as far.

There is quite a bit in the config file , but the good news is that you can leave most of this block exactly the way it is, if you like. In fact, if you aren’t very into coding or are in a hurry, you can probably just change the image and audio links, the next block link and enter your own problems and answers, and have a completely new game.

Making it your own

What’s in the block

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

• An HTML file: caves_and_trees_multiple_choice.html . You should not have to change anything in this file.
• A config file: caves_and_trees_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, player character and the obstacles.

There is also an audio folder that has the sounds to play when you encounter an object.

The config file

In the caves_and_trees_config.js file you’ll see five sections. Most people will probably never touch anything but the first two or three sections, but you have the ability to make changes if you would like.

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.

There are a few options here, and you can keep most of them the same if they suit you.

const options = {
    title: "Caves and Trees",
    background_image: "images/mountain_background.jpg",
    win_image: "", //OPTIONAl . use ""  if no win image.
    blank_image: "images/smalls/blank.png",
    dice_roll_sound: "audio/diceroll.mp3",
    correct_answer_text: "CORRECT!",
    incorrect_answer_text: "WRONG!",
    rightAnswerFlag: "*",
    randomizeQuestions: true,  
    completionURL: "../next_block/next_block.html" 
};

title – This is the title that will show up when they start the game. You can leave it as Caves and Trees or change it to fit your game.

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

win_image: If you want a different image to show up when the player wins the caves and trees game, put the link here. Otherwise, just use “” and it will show the same background image.

blank_image: This is the image that shows up in squares where nothing happens, that is, they don’t go up or down or answer a question. The default is this image that is just a blank square. Personally, I’d just leave it as is.

dice_roll_sound: This is the sound of a dice rolling. Again, I’m not sure why you’d want to change it, but you can replace it with another sound if you like.

correct_answer_text: This is shown in the message box at the bottom of the screen when the player answers correctly.

incorrect_answer_text: This is shown in the message box at the bottom of the screen when the player answers incorrectly.

rightAnswerFlag: This is the symbol that denotes the correct answer in your list of choices. It’s currently set as an asterisk but if your

randomizeQuestions – by default, this is set to true, so questions will be selected in random order. If you change it to false, the first easy question will always be shown when the player lands on easy square, the second question will be shown second, and so on.

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 do want to change to whatever is the next block in your game.

Questions Object

There are two arrays in the questions object, easy and hard. Each question object has a question, and answers. The right answer should start with an “*” unless you set the rightAnswerFlag above to be some other symbol. You can have as many or as few questions as you want. If the player lands on more “easy” or “hard” squares than you have questions, then some of the questions will be repeated. Personally, I’d recommend 7-9 questions of each type and you probably won’t see repeats unless the player is particularly unlucky.

// Notes for "questions" config structure.
// There is an "easy" group of questions and a "hard" group of questions.
// Each group is an array of items. Each item is a question and a list (array of answers).
//
// The correct answer should be prefaced by an asterisk (*). If you need to use a different character
// to mark the right answer, you can set it in options.rightAnswerFlag

const questions = {
    easy: [
        {
            question: "What is the name of Homer's wife?",
            answers: ["Jane", "Blanche", "Maude", "*Marge"]
        },
        {
            question: "What grade is Bart in?",
            answers: ["First", "Third", "*Fourth", "Eighth"]
        },
        {
            question: "What is the name of the Simpsons' dog?",
            answers: ["Spot", "Frank", "The Great Gatsby", "*Santa's Little Helper"]
        },
        {
            question: "What is the name of the school bus driver on the Simpsons?",
            answers: ["*Otto Mann", "Seymour Skinner", "Otto Krabappel", "Ned Flanders"]
        },
        {
            question: "Who is the mayor of Springfield?",
            answers: ["Kent Brockman", "*Joe Quimby", "Robert Terwilliger", "Ned Flanders"]
        },
        {
            question: "Who is Bart's favorite comic book character?",
            answers: ["The Scoutmaster", "Fallout Boy", "*Radioactive Man", "Batman"]
        },
        {
            question: "Which character is obsessed with getting revenge on Bart?",
            answers: ["Krusty the Clown", "Seymour Skinner", "Sideshow Mel", "*Sideshow Bob"]
        },
        {
            question: "Which character’s catchphrase is “Ha-Ha!”?",
            answers: ["Jimbo Jones", "*Nelson Muntz", "Kearney Zzyzwicz", "Dolph Starbeam"]
        },
        {
            question: "Which voice actor provides the voice of Homer Simpson",
            answers: ["*Dan Castellaneta", "Hank Azaria", "Harry Shearer", "Maurice LaMarche"]
        },
    ],
    hard:[
        {
            question: "What does Homer J. Simpsons middle initial stand for?",
            answers: ["Jerry", "*Jay", "John", "Joseph"]
        },
        {
            question: "Who shot Mr. Burns?",
            answers: ["Smithers", "Chief Wiggum", "*Maggie Simpson", "Bart Simpson"]
        },
        {
            question: "What is the secret ingredient in the Flaming Moe cocktail?",
            answers: ["Hops", "Triple Sec", "*Cough Syrup", "Lighter Fluid"]
        },
        {
            question: "What is the full name of Comic Book Guy?",
            answers: ["*Jeff Albertson", "Hugh Jass", "Bengt R. Holmstrom", "Nelson Muntz"]
        },
        {
            question: "In what year was ‘The Simpsons Movie’ released??",
            answers: ["2015", "*2007", "1989", "1998"]
        },
        {
            question: "Which voice actor provides the voice of Groundskeeper Willie",
            answers: ["Hank Azaria", "Harry Shearer", "*Dan Castellaneta", "Yeardly Smith"]
        },
        {
            question: "Which voice actor provided the voice of Bart's girlfriend Jessica",
            answers: ["Nancy Cartright", "*Meryl Streep", "Helen Mirren", "Scarlett Johansson"]
        },
    ],
}

Characters Object

The characters object gives the images and alt text for the characters. You can leave as is to use the characters provided or use your own by change the images

const characters = [
    {
        id: "character1",
        image: "images/angie_med.png",
        alt: "girl",
        piece_image: "images/smalls/blank_girl.png"
    },
    {
        id: "character2",
        image: "images/sam_med.png",
        alt: "boy",
        piece_image: "images/smalls/blank_boy.png"
    },
];

id: Leave this. It just specifies an ID for selecting a character.

image: This is the image that will show up on the screen where players select a character (see above). You can just use the characters provided but , in a larger game where you have a narrative involving certain characters, you might want to include them here.

alt: This is the alt text for the image.

piece_image: This is a much smaller image that will show up on the game board as the character you chose. Again, you can just use the characters provided if you want.

Squares Object

// In the following, the possible values for "action" are:
//    "roll" (roll dice again)
//    "move-up" (move one row up)
//    "move-back" (move one row back)
//    "problem-1" (get a problem)
//    "problem-2" (get more advanced problem)
const squares = [
    {
        id: "blank",
        // instruction_text: There is no instruction text for a blank square
        landing_text: "You have landed on nothing. Roll again!",
        image: "images/smalls/blank.png",
        alt: "Empty square",
        square_type: 0, // obstacle 0 (do nothing)
        action: "roll"
    },
    {
        id: "rock",
        instruction_text: "Answer a question to continue.",
        landing_text: "You have tripped on a rock. Take a break and answer a question to continue!",
        image: "images/smalls/rock2.png",
        alt: "rock",
        square_type: 1, // obstacle 1 (do a problem to proceed),
        action: "problem-1"
    },
    {
        id: "tree",
        instruction_text: "Your character advances to the next row.",
        landing_text: "You have landed on a tree. You get to climb up to the next row!",
        image: "images/smalls/tree.png",
        alt: "tree",
        square_type: 2, // ladder (go up one row)
        sound: "audio/go_up.mp3",
        action: "move-up"
    },
    {
        id: "fire",
        instruction_text: "Answer a harder question. If you get it right you will move double on the next roll.",
        landing_text: "You have landed on a campsite. Answer a harder question to advance double on the next roll!",
        image: "images/smalls/fire.png",
        alt: "Image of a fire",
        square_type: 3, // obstacle 2 (do a harder problem to proceed)
        sound: "audio/fire.mp3",
        action: "problem-2"
    },
    {
        id: "cave",
        instruction_text: "Your character gets sent back to the previous row.",
        landing_text: "You fell in a cave. Sorry, you fell back down to the previous row!",
        image: "images/smalls/hole.png",
        alt: "cave",
        square_type: 4, // hole (go down one row)
        sound: "audio/falling.mp3",
        action: "move-back"
    },
];

The good news here is that each square has the exact same fields.

HINT: You probably want to leave the first square, ‘blank’ as is. That will just be an empty square.

id: unique name for this type of square. You can change this or leave it as suits you but it needs to be a valid ID, that is no spaces, can include letters, numbers, _ or $ but cannot start with a number.

instruction_text – the text that will show on the instruction page. (See above for example)

landing text – This is the text shown below the screen when a player lands on this type of square (see below for example).

image – The link to the image for that type of square. If you like trees, caves, rocks and fires, you can just leave these or you can swap in your own.

alt text – The alt text for the image

square_type: The type of square (0=blank, 1=math problem , 2= go up a row, 3= harder problem, 4= go down a row). These numbers will match up to the map below.

sound – The link to the audio file that plays when they land on that square. If you like the sounds we have, you can just leave these, or you can swap your own.

action – What action to take on this square. You should probably just leave this. The action is either “roll”, which means after this square they will roll again, “problem-1”, which is an easier problem, “move-up” which means to go up a row, “problem-2” , which is a harder problem or “move-back” which means to go down a row.

Maps Object

You can just leave this as is, but you can change it if you want. As the comments say, each number matches up with a square type that is defined above in the squares object. The game starts in the bottom left square and ends at the top right (see below). A 0 will have a blank square, 1 will be an obstacle (up above I made this an image of a rock, but you can change it if you want. To change the map, just change the numbers. For example, to have a cave in the second square, just change the number in that square from 0 to 4.

// Square types
// 0: blank (nothing on this square)
// 1: obstacle 1 (do a problem to proceed)
// 2: tree (go up one row)
// 3: obstacle 2 (do a harder problem to proceed)
// 4: cave (go down one row)

const map = [
    [0, 4, 2, 0, 3, 1, 0, 0, 1, 0, 0, 2, 1, 0, 1],
    [2, 0, 0, 1, 0, 0, 2, 0, 1, 0, 0, 1, 4, 0, 1],
    [0, 1, 0, 5, 2, 0, 0, 3, 0, 0, 0, 0, 1, 0, 0],
    [2, 0, 0, 4, 1, 0, 3, 4, 1, 2, 0, 1, 0, 0, 0],
    [0, 0, 1, 0, 3, 4, 0, 0, 2, 0, 0, 2, 1, 0, 0],
    [3, 1, 4, 0, 1, 0, 0, 3, 1, 0, 1, 0, 1, 0, 1],
    [0, 3, 0, 1, 3, 0, 0, 1, 2, 0, 0, 2, 0, 0, 0]
];