Drag one item per category

Using this Block

As the name implies, the drag one item per category block has categories and the player drags items on to the category that fits. EACH CATEGORY CAN ONLY BE USED ONCE. If you want to use a category more than once, choose the Drag N Items into Categories block.

All of the blocks that require dragging an item on to an answer work the same way. When an item is dragged on the category, the dragged item is removed from the screen.

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.

Each category can have ONE item that matches.

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_one_item_per_category.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 d drag_one_item_per_category block has two files in the folder:

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

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

As with most blocks, it also has an images folder. Categories can have an image, a title or both an image and a title, as in the example above. Any images used specifically in this block will be saved here. If you only use titles for the blocks, then this folder will be empty.

In the drag_one_item_per_category_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 each box to the group whose view it represents, Northern Arapaho, Eastern Shoshone or the U.S. Government." ,
    instructionsPage1_audio: "" , // Optional - include audio file here if you want the instructions read
    instructions: "<h3 class='text-center p-2'>Match the views with the party in this situation whose perspective it represents. </h3>",
    instructions_audio: "" , // Optional - include audio here if you want
    completionURL: "../menu/menu.html", // URL to proceed to after the last screen,
    randomizeItems: true, // A random selection of 3 ITEMS will be shown on the screen.
};

Drag each box to the group whose view it represents, Northern Arapaho, Eastern Shoshone or the U.S. Government.

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 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.

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. In the example above, there is no audio and the speaker is not shown.

instructions: These are the instructions shown on the page above the categories. This can be either html or just plain text. (See the example in the first image above.)

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.

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

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.

Categories and Items

Editing Categories

The categories are the “targets” to which you will drag something and the items are the boxes that you drag. Categories can have an image, a title- which is text that shows up in the box- or both. In the example below, it will have both an image and a title. If you don’t want a title, just delete that whole line or delete the text between the quotation marks so it looks like

categoryTitle: ” “,

You need either a categoryTitle or an image because otherwise you’ll just have an empty box.

DO NOT CHANGE THE CATEGORYID.

const categories = [
{
categoryID: “category1”,
categoryTitle: “N. Arapaho “,
image: “images/arapaho_perspective.png”
},
{
categoryID: “category2”,
categoryTitle: “E. Shoshone “,
image: “images/shoshone_perspective.png”,
},
{
categoryID: “category3”,
categoryTitle: “U.S. Government”,
image: “images/us_gov_perspective.png”,
},
];

Editing Items

The most important thing to realize here is that the categoryID value for the item must match the categoryID for the correct category. This is how the program registers that the item has been dragged to the correct place.

For each item, simply type text in between the quotes after itemTitle. Remember that three items will be shown on the screen at a time, so it’s best not to make these titles really long.

The block you copy into your game comes with six items. You just need to change the itemTitle. You can also have fewer items as long as your number of items is greater than or equal to one per category. In the config file that comes with blocks, the items are in order of all category1, the category2, then category3. 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: "Had no reservation lands since U.S. Citizens committed the 1864 Sand Creek Massacre.",
        categoryID: "category1",
    },
    {
        itemTitle: "Had to rely on an adversary to share their lands with them.",
        categoryID: "category1",
    },
    {
        itemTitle: "Trusted the U.S. to uphold their treaty agreement." ,
        categoryID: "category2",
    },
    {
        itemTitle: "Wanted to keep their people safe on lands promised through the 1868 Fort Bridger Treaty." ,
        categoryID: "category2",
    },
    {
        itemTitle: "Often stood by and even supported their citizens when they broke treaties to invade other nations’ lands that held precious metals, like gold and silver." ,
        categoryID: "category3",
    },
    {
        itemTitle: "Consistently revised treaties, often unilaterally, when they didn’t want to follow them." ,
        categoryID: "category3",
    }
  
];

FAQ: How is this different from the drag in sequence block?

It’s not very different at all, but we had some confusion where users would say “I don’t want items dragged into a sequence, I just want to allow one per category.” So, here we are. Honestly, it isn’t necessarily immediately obvious that the drag into sequence block is the same, so we obligingly created a block with this name.

Drag one item per category

Using this Block

Each category can have ONE item that matches.