# Drag-and-Drop Template browsing

• Hi all,

I constructed a template to easily create Drag-and-Drop questions.

The steps below illustrate how to take the template file (labeling the Canadian Provinces) and adapt it to become a labeling of a velocity VS time graph (or whatever else you desire).

If you want to follow along, you can use the following image:  forceTimeGraphAnswers.jpg

-locate, create or modify an image that contains proper labels (this will be used to show students what the correct labeling was).

-Open the image in MS Paint.
-Be sure to size your image to less than 800px X 800px.
-Save the original labeled copy, for example “forceTimeGraphAnswers.jpg”.
-Use the eraser tool to scrub the answers from the image.

-Save your “scrubbed” image with a different filename, for example "forceTimeGraphBlank.jpg"

STEP 2)  Open the Drag-and-Drop Temple.
-The file can be found shared on the Maple Cloud OR
-Here: Drag-and-Drop Template

-Upload both images at the bottom of the question designer.

STEP 4)  Copy the image URL.
-Double click on each image and copy the image URL from the Image Properties page.

STEP 5)  Refer to the algorithm section of the question and modify Step 1 and Step 2.
-Paste each image URL into the appropriate place in the algorithm section of the question designer (Step 1 and 2 in the algorithm).

STEP 6)  Remove the images from the question text.
-Remove the images from the question text.  They were only placed into the question temporarily in order to attain a valid URL.

STEP 7)  Open one of the images in MS-PAINT.

STEP 8)  Refer to the Algorithm section of the question and modify Step 3 of the algorithm.
-The image size can be found at the bottom of the MS-PAINT window.

If you are following along, the image size should be 478px x 257 px

STEP 9)  Record the positions of each label on the image.
-From within MS-Paint place your cursor over each are you want to drop answers onto and record the (x,y) pair from the bottom of the MS-PAINT window.
RECOMMENDED:  Print a copy of your image so you can easily record the locations onto the paper.

STEP 10)  Refer to the algorithm section of the question and modify Step 4 of the algorithm.

-record the (x,y) pairing and the name being dropped onto your image, for each and every response area.
*IMPORTANT:  You must have at least 1 response area and no more than 10 total.

If you are following along, you should have values close to the following (notice values are approximate)
$answer1="Accelerate Quickly";$answer1x=105;
$answer1y=21;$answer2="No Acceleration";
$answer2x=208;$answer2y=70;
$answer3="Slows down";$answer3x=318;
$answer3y=41;$answer4="Stopped";
$answer4x=347;$answer4y=96;
$answer5="Speed Up (opposite direction)";$answer5x=297;
$answer5y=206;$answer6="Accelerate Slowly";
$answer6x=143;$answer6y=172;

STEP 11)  Delete any response areas and locations from the template that are not required .

If you are following along, you should delete the rest of the algorithm up to the start of Step 5.

STEP 12)  This part is optional, refer to Step 5 of the algorithm.

-You can customize the amount of white space above your image (this is the blank space above your image where the answers are initially placed).

-You can customize the height and width of the drop-areas that appear on your image.

With enough practice you should be able to simply follow the 4-steps outlined within the comments on the template's algorithm.

ENJOY :)

Mark