374 lines
13 KiB
XML
374 lines
13 KiB
XML
<problem display_name="Drag and drop demos: drag and drop icons or labels
|
|
to proper positions." >
|
|
|
|
<customresponse>
|
|
<text>
|
|
<h4>[Draggable is reusable example]</h4>
|
|
<br/>
|
|
<h4>Please label all hydrogen atoms.</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" can_reuse='true' />
|
|
|
|
<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'],
|
|
'targets': ['t2', 't3', 't4', 't7', 't8', 't10'],
|
|
'rule': 'exact'
|
|
}]
|
|
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" can_reuse="true" />
|
|
|
|
<!-- up bond -->
|
|
<draggable id="7" icon="/static/images/images_list/lcao-mo/up.png" can_reuse="true" />
|
|
|
|
<!-- sigma -->
|
|
<draggable id="11" icon="/static/images/images_list/lcao-mo/sigma.png" can_reuse="true" />
|
|
|
|
<!-- sigma* -->
|
|
<draggable id="13" icon="/static/images/images_list/lcao-mo/sigma_s.png" can_reuse="true" />
|
|
|
|
<!-- pi -->
|
|
<draggable id="15" icon="/static/images/images_list/lcao-mo/pi.png" can_reuse="true" />
|
|
|
|
<!-- pi* -->
|
|
<draggable id="16" icon="/static/images/images_list/lcao-mo/pi_s.png" can_reuse="true" />
|
|
|
|
<!-- images that should not be dragged -->
|
|
<draggable id="17" icon="/static/images/images_list/lcao-mo/d.png" can_reuse="true" />
|
|
|
|
<!-- 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'],
|
|
'targets': [
|
|
's_left', 's_right', 's_sigma', 's_sigma_star', 'p_pi_1', 'p_pi_2'
|
|
],
|
|
'rule': 'exact'
|
|
}, {
|
|
'draggables': ['7'],
|
|
'targets': ['p_left_1', 'p_left_2', 'p_right_1','p_right_2'],
|
|
'rule': 'exact'
|
|
}, {
|
|
'draggables': ['11'],
|
|
'targets': ['s_sigma_name', 'p_sigma_name'],
|
|
'rule': 'exact'
|
|
}, {
|
|
'draggables': ['13'],
|
|
'targets': ['s_sigma_star_name', 'p_sigma_star_name'],
|
|
'rule': 'exact'
|
|
}, {
|
|
'draggables': ['15'],
|
|
'targets': ['p_pi_name'],
|
|
'rule': 'exact'
|
|
}, {
|
|
'draggables': ['16'],
|
|
'targets': ['p_pi_star_name'],
|
|
'rule': 'exact'
|
|
}]
|
|
|
|
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 two Stars and three Ants to most left target
|
|
and one Label3 and four 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" can_reuse="true" />
|
|
<draggable id="name_with_icon" label="Ant" icon="/static/images/images_list/ant.jpg" can_reuse="true" />
|
|
<draggable id="with_icon" label="Cloud" icon="/static/images/images_list/cloud.jpg" can_reuse="true" />
|
|
<draggable id="5" label="Label2" can_reuse="true" />
|
|
<draggable id="2" label="Drop" icon="/static/images/images_list/drop.jpg" can_reuse="true" />
|
|
<draggable id="name_label_icon3" label="Grass" icon="/static/images/images_list/grass.jpg" can_reuse="true" />
|
|
<draggable id="name4" label="Star" icon="/static/images/images_list/star.png" can_reuse="true" />
|
|
<draggable id="7" label="Label3" can_reuse="true" />
|
|
|
|
<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 = [
|
|
{
|
|
'draggables': ['name4'],
|
|
'targets': [
|
|
't1', 't1'
|
|
],
|
|
'rule': 'exact'
|
|
},
|
|
{
|
|
'draggables': ['name_with_icon'],
|
|
'targets': [
|
|
't1', 't1', 't1'
|
|
],
|
|
'rule': 'exact'
|
|
},
|
|
{
|
|
'draggables': ['5'],
|
|
'targets': [
|
|
't2', 't2', 't2', 't2'
|
|
],
|
|
'rule': 'exact'
|
|
},
|
|
{
|
|
'draggables': ['7'],
|
|
'targets': [
|
|
't2'
|
|
],
|
|
'rule': 'exact'
|
|
}
|
|
]
|
|
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" can_reuse="true" />
|
|
<draggable id="ant" label="Ant" icon="/static/images/images_list/ant.jpg" can_reuse="true" />
|
|
<draggable id="with_icon" label="Cloud" icon="/static/images/images_list/cloud.jpg" can_reuse="true" />
|
|
<draggable id="5" label="Label2" can_reuse="true" />
|
|
<draggable id="2" label="Drop" icon="/static/images/images_list/drop.jpg" can_reuse="true" />
|
|
<draggable id="grass" label="Grass" icon="/static/images/images_list/grass.jpg" can_reuse="true" />
|
|
<draggable id="name4" label="Star" icon="/static/images/images_list/star.png" can_reuse="true" />
|
|
<draggable id="7" label="Label3" can_reuse="true" />
|
|
|
|
</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" can_reuse="true" />
|
|
<draggable id="l2" label="Methane" can_reuse="true" />
|
|
<draggable id="l3_o" label="Oxygen" can_reuse="true" />
|
|
<draggable id="l4" label="Calcium" can_reuse="true" />
|
|
<draggable id="l7" label="Hydrogen" can_reuse="true" />
|
|
|
|
<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'],
|
|
'targets': ['t1_o', 't9_o'],
|
|
'rule': 'exact'
|
|
},
|
|
{
|
|
'draggables': ['l1_c'],
|
|
'targets': ['t5_c', 't6_c'],
|
|
'rule': 'exact'
|
|
}
|
|
]
|
|
if draganddrop.grade(submission[0], correct_answer):
|
|
correct = ['correct']
|
|
else:
|
|
correct = ['incorrect']
|
|
]]></answer>
|
|
</customresponse>
|
|
|
|
<customresponse>
|
|
<text>
|
|
<h4>[Exact number of draggables for a set of targets.]</h4><br/>
|
|
<h4>Drag two Grass and one Star to first or second positions, and three Cloud to any of the three positions.</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" can_reuse="true" />
|
|
<draggable id="name_with_icon" label="Ant" icon="/static/images/images_list/ant.jpg" can_reuse="true" />
|
|
<draggable id="with_icon" label="Cloud" icon="/static/images/images_list/cloud.jpg" can_reuse="true" />
|
|
<draggable id="5" label="Label2" can_reuse="true" />
|
|
<draggable id="2" label="Drop" icon="/static/images/images_list/drop.jpg" can_reuse="true" />
|
|
<draggable id="name_label_icon3" label="Grass" icon="/static/images/images_list/grass.jpg" can_reuse="true" />
|
|
<draggable id="name4" label="Star" icon="/static/images/images_list/star.png" can_reuse="true" />
|
|
<draggable id="7" label="Label3" can_reuse="true" />
|
|
|
|
<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 = [
|
|
{
|
|
'draggables': ['name_label_icon3', 'name_label_icon3'],
|
|
'targets': ['t1', 't3'],
|
|
'rule': 'unordered_equal+number'
|
|
},
|
|
{
|
|
'draggables': ['name4'],
|
|
'targets': ['t1', 't3'],
|
|
'rule': 'anyof+number'
|
|
},
|
|
{
|
|
'draggables': ['with_icon', 'with_icon', 'with_icon'],
|
|
'targets': ['t1', 't2', 't3'],
|
|
'rule': 'anyof+number'
|
|
}
|
|
]
|
|
if draganddrop.grade(submission[0], correct_answer):
|
|
correct = ['correct']
|
|
else:
|
|
correct = ['incorrect']
|
|
]]></answer>
|
|
</customresponse>
|
|
|
|
<customresponse>
|
|
<text>
|
|
<h4>[As many as you like draggables for a set of targets.]</h4><br/>
|
|
<h4>Drag some Grass to any of the targets, and some Stars to either first or last 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" can_reuse="true" />
|
|
<draggable id="name_with_icon" label="Ant" icon="/static/images/images_list/ant.jpg" can_reuse="true" />
|
|
<draggable id="with_icon" label="Cloud" icon="/static/images/images_list/cloud.jpg" can_reuse="true" />
|
|
<draggable id="5" label="Label2" can_reuse="true" />
|
|
<draggable id="2" label="Drop" icon="/static/images/images_list/drop.jpg" can_reuse="true" />
|
|
<draggable id="name_label_icon3" label="Grass" icon="/static/images/images_list/grass.jpg" can_reuse="true" />
|
|
<draggable id="name4" label="Star" icon="/static/images/images_list/star.png" can_reuse="true" />
|
|
<draggable id="7" label="Label3" can_reuse="true" />
|
|
|
|
<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 = [
|
|
{
|
|
'draggables': ['name_label_icon3'],
|
|
'targets': ['t1', 't2', 't3'],
|
|
'rule': 'anyof'
|
|
},
|
|
{
|
|
'draggables': ['name4'],
|
|
'targets': ['t1', 't2'],
|
|
'rule': 'anyof'
|
|
}
|
|
]
|
|
if draganddrop.grade(submission[0], correct_answer):
|
|
correct = ['correct']
|
|
else:
|
|
correct = ['incorrect']
|
|
]]></answer>
|
|
</customresponse>
|
|
|
|
</problem>
|