Drag True or False

Using this Block

As you might guess, this block has two categories labeled “true” or “false” and the player drags items to the correct category. When an item is dragged on the category, the player receives a message whether this is the correct or incorrect category. The dialog box gives a message in text, visually (red vs green background and box border color. Box border is either solid for correct or dashed for incorrect and a correct or incorrect sound plays.) The correct/ incorrect score box on the page has the number of correct or incorrect increased.

Note: There are three other “drag into categories” blocks. One is for dragging into more than two categories, one for dragging only one item into each category and one is for dragging items into a sequence.

Each category can have as many items dragged as you want.

Once an item has been dragged, it disappears from the screen and is replaced by a new item. The number of answers required per category is specified in the config file named drag_true_or_false_config.js

Once the player has dragged the number of items specified into each category, the player is shown a box in the center of the screen with the number of correct and incorrect answers.

Making it Your Own

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

• An HTML file: drag_true_or_false.html . You should not have to change anything in this file.
• A config file: drag_true_or_false_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. The only image would be, optionally, a background image for the page. If you don’t specify an image, the default for this theme will be used.

In the drag_true_or_false_config.js file you’ll see two sections. The first sets page options and the second section sets categories and items.

Page options

const options = {
    itemsClass: "item",
    instructionsPage1: "Drag the facts that are true into to box labeled TRUE. Drag the false items into the box labeled FALSE." ,
    instructions: "<h3 >Choose which facts are true or false by dragging them to the correct box.</h3>",
 // URL to proceed to after the last screen,
    completionURL: "../level_up/level_up.html",
 // URL to proceed to if not all items are answered correctly ,
    incorrectURL: "../next_block/incorrect.html",
    randomizeItems: true,
// How may items are shown on the screen at once
    numberOfItemsOnScreen: 4, 
// The game stops after this number of items are dragged to a category
    numberOfAnswersRequired: 6, 
// Page background image. Optional.
    page_background_image: "../../images/backgrounds/assess_background.jpg", 

};

InstructionsPage1 can be either html or just plain text. If you want it to be centered, with a little padding and slightly larger text, paste it between the h3 tags. That, is just delete the – “Drag the facts that are true into to box labeled TRUE. Drag the false items into the box labeled FALSE.” – and type whatever you want instead. For plain text, simply paste the instructions text you want between the quotation marks after the :

Instructions: can be either html or just plain text. If you want it to be centered, with a little padding and slightly larger text, paste it between the h3 tags. That, is just delete the – Drag each item to its correct category. – and type whatever you want instead. For plain text, simply paste the instructions text you want between the quotation marks after instructions.

completionURL – you’ll see this in every block. It is the URL where you want to go on the completion of this assessment if the player gets all the questions correct. This can be the same as the incorrectURL if you want players to always go to a specific page regardless.

incorrectURL – This is optional. If want players to go to a different URL if they don’t get all the answers right, enter that URL here. If you always want players to proceed to the same next page, you can enter the same URL as the completionURL or leave this line out altogether.

randomizeItems – by default, this is set to true, so items will be placed on the screen in random order. If you change it to false, the first item you list below will always be shown first, the second item will be shown second, and so on.

numberOfItemsOnScreen – This is the number of boxes that can be dragged into categories that are shown on the screen at one time. The default in the block is to show 4 but you can change it to any number. In the example above, I changed it to 3.

numberOfAnswersRequired – the default is 6 but you can change it to any number. JUST BE SURE THAT YOU HAVE AT LEAST THAT MANY ITEMS. So, you should not require 6 answers if you only have 4 items.

Items

Editing Items

For each item, simply type text in between the quotes after itemTitle. Remember that three or four items will be shown on the screen at a time, so it’s best not to make these titles really long. True items should have a categoryID of “true” and false items have a categoryID of “false”, as shown below.

The block you copy into your game comes with nine items but you can add more by just copying and pasting after the last item. You can also have fewer items as long as your number of items is greater than or equal to the numberOfAnswersRequired that you specified in the options above.

In the config file that comes with blocks, the items are alternating in order, with “true” then “false”. That was just for convenience. The items can be in any order and, if you left randomizeItems in the options as “true”, the items will be pulled from the list randomly.

const items = [
    {
        itemTitle: "11*11 = 121",
        categoryID: "true",
    },
    {
        itemTitle: "100/5 = 25",
        categoryID: "false",
    },
    {
        itemTitle: "3*6 = 18",
        categoryID: "true",
    },
    {
        itemTitle: "9*8 = 64" ,
        categoryID: "false",
    },
    {
        itemTitle: "9*8 = 72" ,
        categoryID: "true",
    },
    {
        itemTitle: "6*2 + 8 = 22" ,
        categoryID: "false",
    },
    {
        itemTitle: "20/4 = 5" ,
        categoryID: "true",
    },
    {
        itemTitle: "31 + 41 = 82" ,
        categoryID: "false",
    },
    {
        itemTitle: "13 + 14 = 27" ,
        categoryID: "true",
    },
];

FAQ: Can I change the category names from True and False?

No. If you want an option other than True and False, check out the Drag and Drop block. It’s pretty cool.