Matching Terms

Using this Block

This block has terms and descriptions or definitions. The player clicks on the term and its match. If correct, the term will be moved from the left of the screen to the right, and both the term and its match shown in green. The scoreboard will show the answer is “Right” and the score will be incremented by one. A player must get all the terms correct to move ahead in the game.

Making it Your Own

Like every block, the matching terms block has two files in the folder:

An HTML file: matching_terms.html . You should not have to change anything in this file.
A config file: matching_terms_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. There is also an audio folder with audio used in the block. As of 2023, this only includes audio for instructions. There is no correct/ incorrect sound in this assessment, although we may add that in the future.

In the matching_terms_config.js file you’ll see two sections. The first sets page options and the second section provides the terms and their matches.

Page options

const options = {
    instructionsPage1: "    <h2>Test your knowledge! </h2> <h4>Click on the term and then click on its meaning. Get them all correct to continue.</h4> <p>Boxes will stay <span class=\"correct\">green</span> if you are correct.</p>" ,
    instructionsPage1_audio: "audio/instructionsPage1.mp3" , // Optional - include audio file here if you want the instructions read
    correctMsg: "    <h1>Good work! You got them all right.</h1><h1>It's time to move along.</h1>" ,
    instructions: "<h2 class='text-center p-2 white mt-2'>Click on the term and then click on its meaning.</h2>" ,
    instructions_audio: "audio/instructions.mp3" , // Optional - include audio file here if you want the instructions read
    incorrectMsg: "<h1>Try to get all four correct in one try.</h1>" ,
    pageBackground: "images/homestead_background.jpeg" , // Optional - background image for page ;
    hintMessage: "If a hint message is given, a question mark will be in the top left, and show the hint when clicked" ,
    numberOfQuestions: 4,
    completionURL: "../menu/menu.html"
}

InstructionsPage1 These are the instructions that show up on the first page (shown at the top of this page), before the player clicks the “play” button. You can just leave the instructions in the block as is, or change these. Just paste html or plain text in between the quotes.

OPTIONAL: If you would like to include an audio recording of the instructions on the first page
instructionsPage1_audio: If you would like instructions to be read to students when they click on a speaker button, put the audio file link here.

Instructions: These are the instructions which show up on the page with the terms.

OPTIONAL: If you would like to include an audio recording of the instructions on the first page
instructions_audio: If an audio file link is given here, the file will play when a user clicks on a speaker button. Normally, this would just be the sentence(s) given for instructions, but the names of the categories and/or items could also be spoken.

incorrectMsg – Message that shows at the end if player did not get all answers correct. Then, they are presented another set of terms for matching.

pageBackground – (optional) If you want a background image for this page, provide the link here.

hintMessage – (optional) If you want a message to show up when you click on a ? in the top right corner, enter the message here and the hint icon will be shown. If you have no message, just leave the space between the quotes empty – “”

numberOfQuestions – the default is 4 but you can change it to any number. JUST BE SURE THAT YOU HAVE AT LEAST THAT MANY TERMS. So, you should not require 6 terms if you only have 4 in the terms section below.

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

Terms

const terms = [
    ["Prove Up", "Under the Homestead Act, any American citizen can claim 160 acres at very little cost as long as that person can show they made their land productive within 5 years."],
    ["Deeded title", "This document is legal proof you are the owner of a particular piece of land, or private property."],
    ["Commodities", "Raw material or primary agricultural product that can be bought and sold, such as wheat, corn, cotton, copper"],
    ["Ranching", "Raising and grazing animals to sell for meat"],
    ["Farming", "Growing crops to sell as food for people or animals"],
    ["Start-up costs", "Initial money, funds or financing needed to start a business, farm or ranch"]
];

This is a simple two-dimensional array. Inside the first set of [] put the following for each term

[“term”, “description, definition or fact to match” ] ,

As in the example above:

The terms array begins and ends within a pair of brackets []
Each term/ definition pair begins and ends within a pair of brackets.
Each term/ definition pair is separated by a comma, which comes after the closing bracket
For each term/ definition pair, first give the term, in quotation marks, followed by a comma, then give the definition, in quotation marks.

FAQ

How long can my definitions be?

The default is a maximum of 10 lines of text total will fit on the screen. So, you can have two definitions that are two lines of text and two that are three lines of text. If you really, really want more lines and you know a little bit of CSS, you can go into the theme.css file and changed the font-size value for the ansItem class to make the text smaller. I wouldn’t advise it because I think an assessment item that is very long can be confusing to students and often ends up testing literacy as well as whatever concept or fact is the focus, but, hey, you do you.

Using this Block