drag-n-drop-demo.xml

<problem display_name="Drag and drop demos: drag and drop icons or labels
    to proper positions." >

<customresponse>
    <text>
        <h4>[Anyof rule example]</h4><br/>
        <h4>Please label hydrogen  atoms connected with left carbon atom.</h4>
        <br/>
    </text>

    <drag_and_drop_input img="/static/images/images_list/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"><![CDATA[
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>

<customresponse>
    <text>
        <h4>[Complex grading example]</h4><br/>
        <h4>Describe carbon molecule in LCAO-MO.</h4>
        <br/>
    </text>

    <drag_and_drop_input img="/static/images/images_list/lcao-mo/lcao-mo.jpg" target_outline="true" >

        <!-- filled bond -->
        <draggable id="1" icon="/static/images/images_list/lcao-mo/u_d.png" />
        <draggable id="2" icon="/static/images/images_list/lcao-mo/u_d.png" />
        <draggable id="3" icon="/static/images/images_list/lcao-mo/u_d.png" />
        <draggable id="4" icon="/static/images/images_list/lcao-mo/u_d.png" />
        <draggable id="5" icon="/static/images/images_list/lcao-mo/u_d.png" />
        <draggable id="6" icon="/static/images/images_list/lcao-mo/u_d.png" />

        <!-- up bond -->
        <draggable id="7"  icon="/static/images/images_list/lcao-mo/up.png"/>
        <draggable id="8"  icon="/static/images/images_list/lcao-mo/up.png"/>
        <draggable id="9"  icon="/static/images/images_list/lcao-mo/up.png"/>
        <draggable id="10" icon="/static/images/images_list/lcao-mo/up.png"/>

        <!-- sigma -->
        <draggable id="11" icon="/static/images/images_list/lcao-mo/sigma.png"/>
        <draggable id="12" icon="/static/images/images_list/lcao-mo/sigma.png"/>

        <!-- sigma* -->
        <draggable id="13" icon="/static/images/images_list/lcao-mo/sigma_s.png"/>
        <draggable id="14" icon="/static/images/images_list/lcao-mo/sigma_s.png"/>

        <!-- pi -->
        <draggable id="15" icon="/static/images/images_list/lcao-mo/pi.png" />

        <!-- pi* -->
        <draggable id="16" icon="/static/images/images_list/lcao-mo/pi_s.png" />

        <!-- images that should not be dragged -->
        <draggable id="17" icon="/static/images/images_list/lcao-mo/d.png" />
        <draggable id="18" icon="/static/images/images_list/lcao-mo/d.png" />

        <!-- positions of electrons and electron pairs -->
        <target id="s_left"       x="130" y="360"    w="32" h="32"/>
        <target id="s_right"      x="505" y="360"    w="32" h="32"/>
        <target id="s_sigma"      x="320" y="425"    w="32" h="32"/>
        <target id="s_sigma_star" x="320" y="290"    w="32" h="32"/>
        <target id="p_left_1"     x="80"  y="100"    w="32" h="32"/>
        <target id="p_left_2"     x="125" y="100"    w="32" h="32"/>
        <target id="p_left_3"     x="175" y="100"    w="32" h="32"/>
        <target id="p_right_1"    x="465" y="100"    w="32" h="32"/>
        <target id="p_right_2"    x="515" y="100"    w="32" h="32"/>
        <target id="p_right_3"    x="560" y="100"    w="32" h="32"/>
        <target id="p_pi_1"       x="290" y="220"    w="32" h="32"/>
        <target id="p_pi_2"       x="335" y="220"    w="32" h="32"/>
        <target id="p_sigma"      x="315" y="170"    w="32" h="32"/>
        <target id="p_pi_star_1"  x="290" y="40"     w="32" h="32"/>
        <target id="p_pi_star_2"  x="340" y="40"     w="32" h="32"/>
        <target id="p_sigma_star" x="315" y="0"      w="32" h="32"/>

        <!-- positions of names of energy levels -->
        <target id="s_sigma_name"      x="400" y="425"  w="32" h="32"/>
        <target id="s_sigma_star_name" x="400" y="290"  w="32" h="32"/>
        <target id="p_pi_name"         x="400" y="220"  w="32" h="32"/>
        <target id="p_sigma_name"      x="400" y="170"  w="32" h="32"/>
        <target id="p_pi_star_name"    x="400" y="40"   w="32" h="32"/>
        <target id="p_sigma_star_name" x="400" y="0"    w="32" h="32"/>

  </drag_and_drop_input>

    <answer type="loncapa/python"><![CDATA[
correct_answer = [
{
  'draggables': ['1', '2', '3', '4', '5', '6'],
  'targets': [
    's_left', 's_right', 's_sigma', 's_sigma_star', 'p_pi_1', 'p_pi_2'
  ],
  'rule': 'unordered_equal'
}, {
  'draggables': ['7','8', '9', '10'],
  'targets': ['p_left_1', 'p_left_2', 'p_right_1','p_right_2'],
  'rule': 'unordered_equal'
}, {
  'draggables': ['11', '12'],
  'targets': ['s_sigma_name', 'p_sigma_name'],
  'rule': 'unordered_equal'
}, {
  'draggables': ['13', '14'],
  'targets': ['s_sigma_star_name', 'p_sigma_star_name'],
  'rule': 'unordered_equal'
}, {
  'draggables': ['15'],
  'targets': ['p_pi_name'],
  'rule': 'unordered_equal'
}, {
  'draggables': ['16'],
  'targets': ['p_pi_star_name'],
  'rule': 'unordered_equal'
}]

if draganddrop.grade(submission[0], correct_answer):
    correct = ['correct']
else:
    correct = ['incorrect']
]]></answer>
</customresponse>

<customresponse>
    <text>
        <h4>[Another complex grading example]</h4><br/>
        <h4>Describe oxygen molecule in LCAO-MO</h4>
        <br/>
    </text>

    <drag_and_drop_input img="/static/images/images_list/lcao-mo/lcao-mo.jpg" target_outline="true" one_per_target="true">
        <!-- filled bond -->
        <draggable id="1" icon="/static/images/images_list/lcao-mo/u_d.png" />
        <draggable id="2" icon="/static/images/images_list/lcao-mo/u_d.png" />
        <draggable id="3" icon="/static/images/images_list/lcao-mo/u_d.png" />
        <draggable id="4" icon="/static/images/images_list/lcao-mo/u_d.png" />
        <draggable id="5" icon="/static/images/images_list/lcao-mo/u_d.png" />
        <draggable id="6" icon="/static/images/images_list/lcao-mo/u_d.png" />
        <draggable id="v_fb_1" icon="/static/images/images_list/lcao-mo/u_d.png" />
        <draggable id="v_fb_2" icon="/static/images/images_list/lcao-mo/u_d.png" />
        <draggable id="v_fb_3" icon="/static/images/images_list/lcao-mo/u_d.png" />

        <!-- up bond -->
        <draggable id="7"  icon="/static/images/images_list/lcao-mo/up.png"/>
        <draggable id="8"  icon="/static/images/images_list/lcao-mo/up.png"/>
        <draggable id="9"  icon="/static/images/images_list/lcao-mo/up.png"/>
        <draggable id="10" icon="/static/images/images_list/lcao-mo/up.png"/>
        <draggable id="v_ub_1" icon="/static/images/images_list/lcao-mo/up.png"/>
        <draggable id="v_ub_2" icon="/static/images/images_list/lcao-mo/up.png"/>

        <!-- sigma -->
        <draggable id="11" icon="/static/images/images_list/lcao-mo/sigma.png"/>
        <draggable id="12" icon="/static/images/images_list/lcao-mo/sigma.png"/>

        <!-- sigma* -->
        <draggable id="13" icon="/static/images/images_list/lcao-mo/sigma_s.png"/>
        <draggable id="14" icon="/static/images/images_list/lcao-mo/sigma_s.png"/>

        <!-- pi -->
        <draggable id="15" icon="/static/images/images_list/lcao-mo/pi.png" />

        <!-- pi* -->
        <draggable id="16" icon="/static/images/images_list/lcao-mo/pi_s.png" />

        <!-- images that should not be dragged -->
        <draggable id="17" icon="/static/images/images_list/lcao-mo/d.png" />
        <draggable id="18" icon="/static/images/images_list/lcao-mo/d.png" />

        <!-- positions of electrons and electron pairs -->
        <target id="s_left"       x="130" y="360"    w="32" h="32"/>
        <target id="s_right"      x="505" y="360"    w="32" h="32"/>
        <target id="s_sigma"      x="320" y="425"    w="32" h="32"/>
        <target id="s_sigma_star" x="320" y="290"   w="32" h="32"/>
        <target id="p_left_1"     x="80"  y="100"   w="32" h="32"/>
        <target id="p_left_2"     x="125" y="100"   w="32" h="32"/>
        <target id="p_left_3"     x="175" y="100"   w="32" h="32"/>
        <target id="p_right_1"    x="465" y="100"   w="32" h="32"/>
        <target id="p_right_2"    x="515" y="100"   w="32" h="32"/>
        <target id="p_right_3"    x="560" y="100"   w="32" h="32"/>
        <target id="p_pi_1"       x="290" y="220"  w="32" h="32"/>
        <target id="p_pi_2"       x="335" y="220"  w="32" h="32"/>
        <target id="p_sigma"      x="315" y="170"  w="32" h="32"/>
        <target id="p_pi_star_1"  x="290" y="40"  w="32" h="32"/>
        <target id="p_pi_star_2"  x="340" y="40"  w="32" h="32"/>
        <target id="p_sigma_star" x="315" y="0"  w="32" h="32"/>

        <!-- positions of names of energy levels -->
        <target id="s_sigma_name" x="400" y="425"  w="32" h="32"/>
        <target id="s_sigma_star_name" x="400" y="290"  w="32" h="32"/>
        <target id="p_pi_name" x="400" y="220"  w="32" h="32"/>
        <target id="p_pi_star_name" x="400" y="40"  w="32" h="32"/>
        <target id="p_sigma_name" x="400" y="170"  w="32" h="32"/>
        <target id="p_sigma_star_name" x="400" y="0"  w="32" h="32"/>

    </drag_and_drop_input>

    <answer type="loncapa/python"><![CDATA[
correct_answer = [{
  'draggables': ['1', '2', '3', '4', '5', '6', 'v_fb_1', 'v_fb_2', 'v_fb_3'],
  'targets': [
    's_left', 's_right', 's_sigma', 's_sigma_star', 'p_pi_1', 'p_pi_2',
    'p_sigma', 'p_left_1', 'p_right_3'
  ],
  'rule': 'anyof'
}, {
  'draggables': ['7', '8', '9', '10', 'v_ub_1', 'v_ub_2'],
  'targets': [
    'p_left_2', 'p_left_3', 'p_right_1', 'p_right_2', 'p_pi_star_1',
    'p_pi_star_2'
  ],
  'rule': 'anyof'
}, {
  'draggables': ['11', '12'],
  'targets': ['s_sigma_name', 'p_sigma_name'],
  'rule': 'anyof'
}, {
  'draggables': ['13', '14'],
  'targets': ['s_sigma_star_name', 'p_sigma_star_name'],
  'rule': 'anyof'
}, {
  'draggables': ['15'],
  'targets': ['p_pi_name'],
  'rule': 'anyof'
}, {
  'draggables': ['16'],
  'targets': ['p_pi_star_name'],
  'rule': 'anyof'
}]

if draganddrop.grade(submission[0], correct_answer):
    correct = ['correct']
else:
    correct = ['incorrect']

]]></answer>
</customresponse>

<customresponse>
    <text>
        <h4>[Individual targets with outlines, One draggable per target]</h4><br/>
        <h4>
        Drag -Ant- to first position and -Star- to third position </h4><br/>
    </text>

    <drag_and_drop_input img="/static/images/cow.png" target_outline="true">
        <draggable id="1" label="Label 1"/>
        <draggable id="name_with_icon" label="Ant" icon="/static/images/images_list/ant.jpg"/>
        <draggable id="with_icon" label="Cloud" icon="/static/images/images_list/cloud.jpg" />
        <draggable id="5" label="Label2" />
        <draggable id="2" label="Drop" icon="/static/images/images_list/drop.jpg" />
        <draggable id="name_label_icon3" label="Grass" icon="/static/images/images_list/grass.jpg" />
        <draggable id="name4" label="Star" icon="/static/images/images_list/star.png" />
        <draggable id="7" label="Label3" />

        <target id="t1" x="20" y="20" w="90" h="90"/>
        <target id="t2" x="300" y="100" w="90" h="90"/>
        <target id="t3" x="150" y="40" w="50" h="50"/>

    </drag_and_drop_input>

    <answer type="loncapa/python"><![CDATA[
correct_answer = {'name_with_icon': 't1', 'name4': 't2'}
if draganddrop.grade(submission[0], correct_answer):
    correct = ['correct']
else:
    correct = ['incorrect']
]]></answer>
</customresponse>

<customresponse>
    <text>
        <h4>[SMALL IMAGE,  Individual targets WITHOUT outlines, One draggable
            per target]</h4><br/>
        <h4>
            Move -Star- to the volcano opening, and -Label3- on to
            the right ear of the cow.
        </h4><br/>
    </text>

    <drag_and_drop_input img="/static/images/cow3.png" target_outline="false">
        <draggable id="1" label="Label 1"/>
        <draggable id="name_with_icon" label="Ant" icon="/static/images/images_list/ant.jpg"/>
        <draggable id="with_icon" label="Cloud" icon="/static/images/images_list/cloud.jpg" />
        <draggable id="5" label="Label2" />
        <draggable id="2" label="Drop" icon="/static/images/images_list/drop.jpg" />
        <draggable id="name_label_icon3" label="Grass" icon="/static/images/images_list/grass.jpg" />
        <draggable id="name4" label="Star" icon="/static/images/images_list/star.png" />
        <draggable id="7" label="Label3" />

        <target id="t1" x="111" y="58" w="90" h="90"/>
        <target id="t2" x="212" y="90" w="90" h="90"/>

    </drag_and_drop_input>

    <answer type="loncapa/python"><![CDATA[
correct_answer = {'name4': 't1',
                '7': 't2'}
if draganddrop.grade(submission[0], correct_answer):
    correct = ['correct']
else:
    correct = ['incorrect']
]]></answer>
</customresponse>

<customresponse>
    <text>
        <h4>[Many draggables per target]</h4><br/>
        <h4>Move -Star- and -Ant- to most left target
            and -Label3- and -Label2- to most right target.</h4><br/>
    </text>

    <drag_and_drop_input img="/static/images/cow.png" target_outline="true" one_per_target="false">
        <draggable id="1" label="Label 1"/>
        <draggable id="name_with_icon" label="Ant" icon="/static/images/images_list/ant.jpg"/>
        <draggable id="with_icon" label="Cloud" icon="/static/images/images_list/cloud.jpg" />
        <draggable id="5" label="Label2" />
        <draggable id="2" label="Drop" icon="/static/images/images_list/drop.jpg" />
        <draggable id="name_label_icon3" label="Grass" icon="/static/images/images_list/grass.jpg" />
        <draggable id="name4" label="Star" icon="/static/images/images_list/star.png" />
        <draggable id="7" label="Label3" />

        <target id="t1" x="20" y="20" w="90" h="90"/>
        <target id="t2" x="300" y="100" w="90" h="90"/>
        <target id="t3" x="150" y="40" w="50" h="50"/>

    </drag_and_drop_input>

    <answer type="loncapa/python"><![CDATA[
correct_answer = {'name4': 't1',
                'name_with_icon': 't1',
                '5': 't2',
                '7':'t2'}
if draganddrop.grade(submission[0], correct_answer):
    correct = ['correct']
else:
    correct = ['incorrect']
]]></answer>
</customresponse>

<customresponse>
    <text>
        <h4>[Draggables can be placed anywhere on base image]</h4><br/>
        <h4>
            Place -Grass- in the middle of the image and -Ant- in the
            right upper corner.</h4><br/>
    </text>

    <drag_and_drop_input img="/static/images/cow.png" >
        <draggable id="1" label="Label 1"/>
        <draggable id="ant" label="Ant" icon="/static/images/images_list/ant.jpg"/>
        <draggable id="with_icon" label="Cloud" icon="/static/images/images_list/cloud.jpg" />
        <draggable id="5" label="Label2" />
        <draggable id="2" label="Drop" icon="/static/images/images_list/drop.jpg" />
        <draggable id="grass" label="Grass" icon="/static/images/images_list/grass.jpg" />
        <draggable id="name4" label="Star" icon="/static/images/images_list/star.png" />
        <draggable id="7" label="Label3" />

    </drag_and_drop_input>

    <answer type="loncapa/python"><![CDATA[
correct_answer = {'grass':     [[300, 200], 200],
                  'ant': [[500, 0], 200]}
if draganddrop.grade(submission[0], correct_answer):
    correct = ['correct']
else:
    correct = ['incorrect']
]]></answer>
</customresponse>

<customresponse>
    <text>
        <h4>[Another anyof example]</h4><br/>
        <h4>Please identify the Carbon and Oxygen atoms in the molecule.</h4><br/>
    </text>

    <drag_and_drop_input img="/static/images/images_list/ethglycol.jpg" target_outline="true" one_per_target="true">
        <draggable id="l1_c" label="Carbon" />
        <draggable id="l2" label="Methane"/>
        <draggable id="l3_o" label="Oxygen" />
        <draggable id="l4" label="Calcium" />
        <draggable id="l5" label="Methane"/>
        <draggable id="l6" label="Calcium" />
        <draggable id="l7" label="Hydrogen" />
        <draggable id="l8_c" label="Carbon" />
        <draggable id="l9" label="Hydrogen" />
        <draggable id="l10_o" label="Oxygen" />

        <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"><![CDATA[
correct_answer = [
{
    'draggables':  ['l3_o', 'l10_o'],
    'targets':  ['t1_o', 't9_o'],
    'rule': 'anyof'
},
{
    'draggables': ['l1_c','l8_c'],
    'targets': ['t5_c','t6_c'],
    'rule': 'anyof'
}
]
if draganddrop.grade(submission[0], correct_answer):
    correct = ['correct']
else:
    correct = ['incorrect']
]]></answer>
</customresponse>

<customresponse>
    <text>
        <h4>[Again another anyof example]</h4><br/>
        <h4>If the element appears in this molecule, drag the label onto it</h4>
        <br/>
    </text>

    <drag_and_drop_input img="/static/images/images_list/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" />
        <draggable id="3" label="Nytrogen" />
        <draggable id="4" label="Nytrogen" />
        <draggable id="5" label="Boron" />
        <draggable id="6" label="Boron" />
        <draggable id="7" label="Carbon" />
        <draggable id="8" label="Carbon" />

        <target id="t1_o" x="10" y="67" w="100" h="100"/>
        <target id="t2_h" x="133" y="3" w="70" h="70"/>
        <target id="t3_h" x="2" y="384" w="70" h="70"/>
        <target id="t4_h" 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_h" x="393" y="463" w="70" h="70"/>
        <target id="t8_h" x="344" y="214" w="70" h="70"/>
        <target id="t9_o" x="445" y="162" w="100" h="100"/>
        <target id="t10_h" x="591" y="132" w="70" h="70"/>

    </drag_and_drop_input>

    <answer type="loncapa/python"><![CDATA[
correct_answer = [
{
    'draggables':   ['7', '8'],
    'targets':  ['t5_c', 't6_c'],
    'rule': 'anyof'
},
{
    'draggables': ['1', '2'],
    'targets': ['t2_h', 't3_h', 't4_h', 't7_h', 't8_h', 't10_h'],
    'rule': 'anyof'
}]
if draganddrop.grade(submission[0], correct_answer):
    correct = ['correct']
else:
    correct = ['incorrect']
]]></answer>
</customresponse>

<customresponse>
    <text>
        <h4>[Wrong base image url example]
        </h4><br/>
    </text>

    <drag_and_drop_input img="/static/images/cow3_bad.png" target_outline="false">
        <draggable id="1" label="Label 1"/>
        <draggable id="name_with_icon" label="Ant" icon="/static/images/images_list/ant.jpg"/>
        <draggable id="with_icon" label="Cloud" icon="/static/images/images_list/cloud.jpg" />
        <draggable id="5" label="Label2" />
        <draggable id="2" label="Drop" icon="/static/images/images_list/drop.jpg" />
        <draggable id="name_label_icon3" label="Grass" icon="/static/images/images_list/grass.jpg" />
        <draggable id="name4" label="Star" icon="/static/images/images_list/star.png" />
        <draggable id="7" label="Label3" />

        <target id="t1" x="111" y="58" w="90" h="90"/>
        <target id="t2" x="212" y="90" w="90" h="90"/>

    </drag_and_drop_input>

    <answer type="loncapa/python"><![CDATA[
correct_answer = {'name4': 't1',
                '7': 't2'}
if draganddrop.grade(submission[0], correct_answer):
    correct = ['correct']
else:
    correct = ['incorrect']
]]></answer>
</customresponse>

</problem>