---
metadata:
    display_name: Drag and Drop (Deprecated Version)
    markdown: !!null
    showanswer: never
data: |
    <problem>
      <p>In drag and drop problems, students respond to a question by dragging text or objects to a specific location on an image.</p>
      <p>
          For more information, see
          <a href="https://edx.readthedocs.io/projects/edx-partner-course-staff/en/latest/exercises_tools/drag_and_drop_deprecated.html" target="_blank">
          Drag and Drop Problem (Deprecated)</a> in <i>Building and Running an edX Course</i>.
      </p>
      <p>
          When you add the problem, be sure to select <strong>Settings</strong>
          to specify a <strong>Display Name</strong> and other values that apply.
      </p>
      <p>You can use the following example problems as models.</p>
      <hr/>
      <customresponse>
          <h3>Simple Drag and Drop</h3>
          <p>Drag each word in the scrollbar to the bucket that matches the number of letters in the word.</p>
              <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="bog"/>
                  <draggable id="3" label="droll"/>
                  <draggable id="4" label="oboe"/>
                  <draggable id="5" label="swain"/>
                  <draggable id="6" label="in"/>
                  <draggable id="7" label="onyx"/>
                  <draggable id="8" label="of"/>
                  <draggable id="9" label="tap"/>
                  <draggable id="10" label="strop"/>
                  <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>

        <customresponse>
            <h3>Drag and Drop with Outline</h3>
            <p>Label the hydrogen atoms connected with the left carbon atom.</p>
            <drag_and_drop_input img="https://studio.edx.org/c4x/edX/DemoX/asset/ethglycol.jpg" target_outline="true" one_per_target="true" no_labels="true" label_bg_color="rgb(222, 139, 238)">
                <draggable id="1" label="Hydrogen" />
                <draggable id="2" label="Hydrogen" />
                <target id="t1_o" x="10" y="67" w="100" h="100"/>
                <target id="t2" x="133" y="3" w="70" h="70"/>
                <target id="t3" x="2" y="384" w="70" h="70"/>
                <target id="t4" x="95" y="386" w="70" h="70"/>
                <target id="t5_c" x="94" y="293" w="91" h="91"/>
                <target id="t6_c" x="328" y="294" w="91" h="91"/>
                <target id="t7" x="393" y="463" w="70" h="70"/>
                <target id="t8" x="344" y="214" w="70" h="70"/>
                <target id="t9_o" x="445" y="162" w="100" h="100"/>
                <target id="t10" x="591" y="132" w="70" h="70"/>
            </drag_and_drop_input>
          <answer type="loncapa/python">
    correct_answer = [{
        'draggables': ['1', '2'],
        'targets': ['t2', 't3', 't4' ],
        'rule':'anyof'
    }]
    if draganddrop.grade(submission[0], correct_answer):
        correct = ['correct']
    else:
        correct = ['incorrect']
            </answer>
        </customresponse>
    </problem>