Drag and Drop

Using this Block

This block, in the drag_and_drop folder, has two areas. The top area consists of two images. The bottom area shows four items, which may be images or text. The object is to drag and drop all of the items to the correct area before time runs out.

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

The number of answers required per category is specified in the config file named dndConfig.js

Once an item has been dragged, it disappears from the screen and is replaced by a new item. When 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 and drop (dnd) block has two files in the folder:

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

As explained below, this block is a little different in that it has two extra files to show the option of using only images.

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

As with most blocks, it also has an images folder.

In both the dndConfig.js and dndConfig2.js files you’ll see two sections. The first sets page options and the second section sets categories and items. The Options section is the same in the two files except for the background_img URL.

Page options

const options = {
  background_img: "images/salmon.jpg", //Optional add the path to the image
  correctSound: "../../audio/applause.mp3",
  incorrectSound: "../../audio/fail_sound.mp3",
  instructions: "Drag the correct answer to the box on the left and the incorrect answer to the box on the right. If it's the correct spot the border will turn green, if not the border will turn red.",
  question: "Drag the correct answer to the box on the left and the incorrect answer to the box on the right.",
  timeLimitInSeconds: 60, // A timer is used only if this is set, otherwise unlimited time
  completionURL: "../next_block/next_block.html",
};

background_img: This is optional. If you include a URL, this will be the background image for the screen. If not, the default background for assessment pages for this theme will be use.

correctSound: This is the audio file that plays when the item is dragged to the correct area. You can leave it as is or replace with your own audio file.

incorrectSound: This is the audio file that plays when the item is dragged to the incorrect area. You can leave it as is or replace with your own audio file.

Instructions: can be either html or just plain text. You can leave the instructions as written or type in your own. For plain text, simply paste the instructions text you want between the quotation marks after instructions. To make the instructions a header, or any other tag, type the HTML between the quotation marks.

timeLimitInseconds: If this is set, a timer is shown at the top of the screen and, when the time is up, a dialogue box is shown asking if the player would like to try again or continue to the next block. If this line is deleted, unlimited time is given, which may be more appropriate for students with mental or physical limitations.

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.

Cards object

const cards = {
  true_ans: ["The Chinooks are known for their advances in trading and construction.",
    "Fish hatcheries exist to make sure there is an adequate supply of salmon.",
    "The Wascos are descended from the Chinookan people. ",
    "There are laws to keep people from over-fishing."
  ],
  false_ans: ["Over-harvesting of salmon caused salmon numbers to rise.",
    "Aquaculture is not considered part of agriculture.",
    "Anthropologists study the rocks and the earth. ",
    "It's not the government’s responsibility to make sure there are salmon."
  ],
  numberOfPairs:   4, // Equal number of true and false cards are displayed; this is the number of true/false pairs
  numberToDisplay: 4, // This is the total number of cards to show on the screen at one time.
                      // If this is less than total number of cards to show (determined by numberOfPairs)
                      // then cards removed will be replaced by new cards until the total number is reached.
  drop_img: { //Both true and false images are required
    true:"images/basket_true.png",//path to image
    false: "images/basket_false.png"//path to image
  },
};

Editing Cards as Text

The left image is “true” and the right image is “false”. As you will see below, these two images can be anything, but, as the most common options are true and false, the arrays of items that correspond to each are named true_ans and false_ans. These are arrays so the list of statements begins with [ and ends with ] as shown above.

true_ans: These items when dragged to the image on the LEFT of the page, will be counted as correct. Type each true statement between quotation marks and end with a comma, as shown above.

false_ans: These items when dragged to the image on the RIGHT of the page, will be counted as correct. Type each false statement between quotation marks and end with a comma, as shown above.

numberOfPairs : An equal number of true and false items are required. This is the number of pairs that must be dragged and dropped to end the block.

numberToDisplay: This is the number of items to show on the screen at one time. We recommend a maximum of four. Must be at least double the number of pairs. You can require showing more cards than you have provided. If the number is larger, cards will be selected at random and when a card is dragged and dropped a new card will be show until all cards have been used.

drop_img: The link for the image labeled ‘true’ will be on the left and the image labeled ‘false’ will be shown on the right. Do NOT change the labels from ‘true’ and ‘false’ even if your actual images are something like fruits and vegetables. The labels are not shown in the screen but are used by the code. Note: These are images. Text can be embedded in the images, as in the TRUE/ FALSE example.

Editing Cards as Images

As you can see below, everything is the same as the example with text except that instead of text for the statements, an image tag is used. This example is included in the block as dndConfig2.js and is used in dnd2.html. This is the config file which is used creating the screen below. This example also shows the target images without text, in this case, a recycling bin and green, organic bin.

const cards = {
  true_ans: ["<img src='images/bottle1.png' alt='blue bottle'>",
    "<img src='images/orange_bottle.png' alt='orange bottle'>",
    "<img src='images/soda_bottle.png' alt='soda bottle'>",
    "<img src='images/plastic_bag_lg.png' alt='plastic bag'>",
  ],
  false_ans: [ "<img src='images/apple_core.png' alt='apple core'>",
    "<img src='images/banana.png' alt='banana'>",
    "<img src='images/leaves.png' alt='leaves'>",
    "<img src='images/raspberry.png' alt='raspberry'>",
    "<img src='images/peas.png' alt='peas'>",
  ],
  numberOfPairs:   4, // Equal number of true and false cards are displayed; this is the number of true/false pairs
  numberToDisplay: 4, // This is the total number of cards to show on the screen at one timm.
                      // If this is less than total number of cards to show (determined by numberOfPairs)
                      // then cards removed will be replaced by new cards until the total number is reached.
  drop_img: { //optional field, if used both true and false images are required
    true:"images/blue_bin.png",//path to image
    false: "images/green_bin.png"//path to image
  },
};

FAQ:

1. I just want to drag statements to true or false block. Is there a simple way to do this without using images? ANSWER: Yes, you want the Drag True or False block. It’s very similar to the Drag and Drop block but does not include images.
2. Can I change the category labels from “True” and “False” ? ANSWER: The labels in the config file are not shown on the screen. Don’t change those. The images shown on the screen can be anything, as the examples above show, including baskets that say “True” and “False”, different colored bins for trash, or anything else.
3. I just see a blank screen and my code says “Uncaught SyntaxError: Unexpected string”. ANSWER: Most often this occurs because you either accidentally deleted one of the brackets around the array or omitted a comma after a statement. Look at the examples for the true_ans and false_ans. Does each begin with [ and end with ] ? Is there a comma after each statement or image?