---
metadata:
    display_name: Drag and Drop
    markdown: !!null
data: |
    <problem>
        Here's an example of a "Drag and Drop" question set. Click and drag each word in the scrollbar below, up to the numbered bucket which matches the number of letters in the word. 
       <customresponse>
            <drag_and_drop_input img="https://studio.edx.org/c4x/edX/DemoX/asset/L9_buckets.png">
                <draggable id="1" label="a"/>
                <draggable id="2" label="cat"/>
                <draggable id="3" label="there"/>
                <draggable id="4" label="pear"/>
                <draggable id="5" label="kitty"/>
                <draggable id="6" label="in"/>
                <draggable id="7" label="them"/>
                <draggable id="8" label="za"/>
                <draggable id="9" label="dog"/>
                <draggable id="10" label="slate"/>
                <draggable id="11" label="few"/>
            </drag_and_drop_input>
            <answer type="loncapa/python">
    correct_answer = {
            '1':      [[70, 150], 121],
            '6':      [[190, 150], 121],
            '8':      [[190, 150], 121],
            '2':      [[310, 150], 121],
            '9':      [[310, 150], 121],
            '11':     [[310, 150], 121],
            '4':      [[420, 150], 121],
            '7':      [[420, 150], 121],
            '3':      [[550, 150], 121],
            '5':      [[550, 150], 121],
            '10':     [[550, 150], 121]}
    if draganddrop.grade(submission[0], correct_answer):
        correct = ['correct']
    else:
        correct = ['incorrect']
            </answer>
        </customresponse>
    </problem>
