Drag-and-Drop Template



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

    STEP 1)  Prepare your image.

    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


    STEP 3)  Upload your images.
    -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


Log in to reply