Reveal ITEMS

Using this Block

Any time you want to click an image – whether a cardboard box or an ear of corn – and have something else shown in its place – whether text or a pile of garbage – the reveal cards block can do it. This block can be used for players to find a specific item (think back to the boardwalk game where you have to guess which cup the ball is under). It can also be used as an instructional block, where every image flips over to provide some new information.

Example Uses

In the Follow the Bubbles game, this block is used for players to decide which box has a picture of a primary source and click on the correct box to get a clue. In the You are Here: On the Lewis and Clark Trail game, it is used to teach about trading between tribal nations, the player clicks on an item, like an ear of corn, and it is replaced with what that item might be traded for, like a buffalo robe.

Making it Your Own

What’s in the block

Like most blocks, the reveal items block has an images folder. Any images used specifically in this block will be saved here. There is also an audio folder that has the sounds to play when a card is turned over. Sounds are optional.

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

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

Page options

const options = {
    instructionsPage1: "<h3>Click on the box with a picture of a primary source on its side.</h3>" ,
    completionURL: "../next_block/next_block.html", // URL to proceed to after the block ends
    bkImage: "images/laundry_room.jpg", 
    bkImageAlt: "a laundry room with washers and dryers",
    numberToDisplay: 5,
     absolutePosition: {
         height: "180px", // When absolute positioning is used, the size of the cards must be set explicitly
        width: "150px"
     },
    randomizeCards: true,
}

• InstructionsPage1 can be either html or just plain text. For plain text, simply paste the instructions text you want between the quotation marks after the colon. These instructions will show on a screen before the screen with your cards.
• completionURL – you’ll see this in every block. It is the URL where you want to go on the completion of this assessment.
• bkImage – put the URL for the background image here, be sure it is in quotes.
• bkImageAlt – alt text for the background image
• absolutePosition: If you will be positioning the items
• numberToDisplay: The number of cards to show on the screen. Make sure you have at least this number of cards defined in the cards object below.
• absolutePosition: If you are going to specify the location of the items (recommended), you need to set the height and width of the items here. If you do not use absolute positioning, the items will be shown in a row across the screen.
• randomizeCards: if set to true, items will be selected at random from your list. If false, the first item will be placed first and so on. If the numberToDisplay is less than the number of items in your list and you set randomizeCards to false, then the later items will never be used.

Items List

The items to reveal are defined in an array named card_array. The example below only shows two in the interest of saving space, but the block example you download will have eight. You can have as many or as few as you want.

An audio file that plays when the item is clicked is optional. You can have audio for some items, all items or no items.

const cards_config = {
    card_array: [
        {
            front: {
                image: "images/garbage1.png",
                alt: "can of stinking garbage",

            },
            back: {
                image: "images/box_robot.png",
                alt: "box with picture of robot"
            },
            position: {
                left: "10px",
                bottom: "0"
            },
            clickSound: "audio/ooh.mp3",
            clickMessage: "<h1>Yuck! Garbage!</h1>",
        },
        {
            front: {
                image: "images/clark_map.png",
                alt: "Clark's original map"
            },
            back: {
                image: "images/box_with_letter.png",
                alt: "box with letter on label"
            },
            distinguishedItem: {
                text: "Great! You found Clark's map!"
            },
            position: {
                left: "300px",
                bottom: "230px"
            },
            clickSound: "audio/correct.wav"
        },
    ]
}

Note: While I call these “cards” below, the images on the back can be anything. In the example provided with blocks, they are cardboard boxes. In the You are Here: On the Lewis and Clark Trail game, they are different items, including a dog, that were traded among tribes.

For each item, you need to enter the following:

• A link to an image or text for the front of the “card”. If the front of the card is text, change image to text and type your text in quotes. If this is not an image, delete the alt property.
• A link to an image for the back of the card. This must be an image. Alt text for the back of the card image.
• Position – Enter the left and bottom location on the screen in pixels.
• clickSound – This is optional. If you enter an audio file here, it will play when the item is clicked. If you have no audio file, delete this line.
• clickMessage – This message will show when the box is clicked.
• distinguishedItem – This is optional. If there is a specific item the player should find, include this distinguishedItem property and give the text to show in the dialogue box when it is clicked.

If there is a distinguishedItem, that is, a specific item the player is supposed to choose, the game will go on to the next block given in the completionURL in the options as soon as the dialogue box is closed. If there is NOT a distinguishedItem, the player will need to click all of the items, in any order. Once the last item is clicked, when the dialogue box closes, the game will go on to the next block given in the completionURL in the options

FAQ

QUESTION: How do I know what to put for top and bottom position?
ANSWER: Figure out where you want the image to be on the screen in percentage, say 10% from the left and 20% from the bottom, then multiply those percentages by screen width and height. The screen size is set in the theme.css file in the game_theme folder. The default is a width of 1024 by 576, so my left value would be “102px” and my bottom value “116px” .