Skip to content

E
edx-platform
Commit e273bb12 by Valera Rozuvan Committed by Alexander Kryklia
Options

Updated DOCS with sample XML for DnD.

parent b25d4224
Showing with 498 additions and 129 deletions
docs/source/drag-n-drop-demo.xml
<problem display_name="Drag and drop demo" > <problem display_name="Drag and drop demos: drag and drop icons or labels
to proper positions." >
<customresponse> <customresponse>
<text> <text>
<h3>Please set hydrogen atoms to LEFT carbon atom</h3> <h4>[Anyof rule example]</h4><br/>
<br /> <h4>Please label hydrogen atoms connected with left carbon atom.</h4>
<br/>
</text> </text>
<drag_and_drop_input img="images_list/ethglycol.jpg" target_outline="true" <drag_and_drop_input img="/static/images/images_list/ethglycol.jpg" target_outline="true"
one_per_target="true" no_labels="true"> one_per_target="true" no_labels="true" label_bg_color="rgb(222, 139, 238)">
<draggable id="1" label="Hydrogen" /> <draggable id="1" label="Hydrogen" />
<draggable id="2" label="Hydrogen" /> <draggable id="2" label="Hydrogen" />
...@@ -39,43 +41,44 @@ else: ...@@ -39,43 +41,44 @@ else:
<customresponse> <customresponse>
<text> <text>
<h3>Describe carbon molecule in LCAO-MO</h3> <h4>[Complex grading example]</h4><br/>
<br /> <h4>Describe carbon molecule in LCAO-MO.</h4>
<br/>
</text> </text>
<drag_and_drop_input img="images_list/lcao-mo/lcao-mo.jpg" target_outline="true" > <drag_and_drop_input img="/static/images/images_list/lcao-mo/lcao-mo.jpg" target_outline="true" >
<!-- filled bond --> <!-- filled bond -->
<draggable id="1" icon="images_list/lcao-mo/u_d.png" /> <draggable id="1" icon="/static/images/images_list/lcao-mo/u_d.png" />
<draggable id="2" icon="images_list/lcao-mo/u_d.png" /> <draggable id="2" icon="/static/images/images_list/lcao-mo/u_d.png" />
<draggable id="3" icon="images_list/lcao-mo/u_d.png" /> <draggable id="3" icon="/static/images/images_list/lcao-mo/u_d.png" />
<draggable id="4" icon="images_list/lcao-mo/u_d.png" /> <draggable id="4" icon="/static/images/images_list/lcao-mo/u_d.png" />
<draggable id="5" icon="images_list/lcao-mo/u_d.png" /> <draggable id="5" icon="/static/images/images_list/lcao-mo/u_d.png" />
<draggable id="6" icon="images_list/lcao-mo/u_d.png" /> <draggable id="6" icon="/static/images/images_list/lcao-mo/u_d.png" />
<!-- up bond --> <!-- up bond -->
<draggable id="7" icon="images_list/lcao-mo/up.png"/> <draggable id="7" icon="/static/images/images_list/lcao-mo/up.png"/>
<draggable id="8" icon="images_list/lcao-mo/up.png"/> <draggable id="8" icon="/static/images/images_list/lcao-mo/up.png"/>
<draggable id="9" icon="images_list/lcao-mo/up.png"/> <draggable id="9" icon="/static/images/images_list/lcao-mo/up.png"/>
<draggable id="10" icon="images_list/lcao-mo/up.png"/> <draggable id="10" icon="/static/images/images_list/lcao-mo/up.png"/>
<!-- sigma --> <!-- sigma -->
<draggable id="11" icon="images_list/lcao-mo/sigma.png"/> <draggable id="11" icon="/static/images/images_list/lcao-mo/sigma.png"/>
<draggable id="12" icon="images_list/lcao-mo/sigma.png"/> <draggable id="12" icon="/static/images/images_list/lcao-mo/sigma.png"/>
<!-- sigma* --> <!-- sigma* -->
<draggable id="13" icon="images_list/lcao-mo/sigma_s.png"/> <draggable id="13" icon="/static/images/images_list/lcao-mo/sigma_s.png"/>
<draggable id="14" icon="images_list/lcao-mo/sigma_s.png"/> <draggable id="14" icon="/static/images/images_list/lcao-mo/sigma_s.png"/>
<!-- pi --> <!-- pi -->
<draggable id="15" icon="images_list/lcao-mo/pi.png" /> <draggable id="15" icon="/static/images/images_list/lcao-mo/pi.png" />
<!-- pi* --> <!-- pi* -->
<draggable id="16" icon="images_list/lcao-mo/pi_s.png" /> <draggable id="16" icon="/static/images/images_list/lcao-mo/pi_s.png" />
<!-- images that should not be dragged --> <!-- images that should not be dragged -->
<draggable id="17" icon="images_list/lcao-mo/d.png" /> <draggable id="17" icon="/static/images/images_list/lcao-mo/d.png" />
<draggable id="18" icon="images_list/lcao-mo/d.png" /> <draggable id="18" icon="/static/images/images_list/lcao-mo/d.png" />
<!-- positions of electrons and electron pairs --> <!-- positions of electrons and electron pairs -->
<target id="s_left" x="130" y="360" w="32" h="32"/> <target id="s_left" x="130" y="360" w="32" h="32"/>
...@@ -112,27 +115,27 @@ correct_answer = [ ...@@ -112,27 +115,27 @@ correct_answer = [
'targets': [ 'targets': [
's_left', 's_right', 's_sigma', 's_sigma_star', 'p_pi_1', 'p_pi_2' 's_left', 's_right', 's_sigma', 's_sigma_star', 'p_pi_1', 'p_pi_2'
], ],
'rule': 'anyof' 'rule': 'unordered_equal'
}, { }, {
'draggables': ['7','8', '9', '10'], 'draggables': ['7','8', '9', '10'],
'targets': ['p_left_1', 'p_left_2', 'p_right_1','p_right_2'], 'targets': ['p_left_1', 'p_left_2', 'p_right_1','p_right_2'],
'rule': 'anyof' 'rule': 'unordered_equal'
}, { }, {
'draggables': ['11', '12'], 'draggables': ['11', '12'],
'targets': ['s_sigma_name', 'p_sigma_name'], 'targets': ['s_sigma_name', 'p_sigma_name'],
'rule': 'anyof' 'rule': 'unordered_equal'
}, { }, {
'draggables': ['13', '14'], 'draggables': ['13', '14'],
'targets': ['s_sigma_star_name', 'p_sigma_star_name'], 'targets': ['s_sigma_star_name', 'p_sigma_star_name'],
'rule': 'anyof' 'rule': 'unordered_equal'
}, { }, {
'draggables': ['15'], 'draggables': ['15'],
'targets': ['p_pi_name'], 'targets': ['p_pi_name'],
'rule': 'anyof' 'rule': 'unordered_equal'
}, { }, {
'draggables': ['16'], 'draggables': ['16'],
'targets': ['p_pi_star_name'], 'targets': ['p_pi_star_name'],
'rule': 'anyof' 'rule': 'unordered_equal'
}] }]
if draganddrop.grade(submission[0], correct_answer): if draganddrop.grade(submission[0], correct_answer):
...@@ -144,47 +147,48 @@ else: ...@@ -144,47 +147,48 @@ else:
<customresponse> <customresponse>
<text> <text>
<h3>Describe oxygen molecule in LCAO-MO</h3> <h4>[Another complex grading example]</h4><br/>
<br /> <h4>Describe oxygen molecule in LCAO-MO</h4>
<br/>
</text> </text>
<drag_and_drop_input img="images_list/lcao-mo/lcao-mo.jpg" target_outline="true" one_per_target="true"> <drag_and_drop_input img="/static/images/images_list/lcao-mo/lcao-mo.jpg" target_outline="true" one_per_target="true">
<!-- filled bond --> <!-- filled bond -->
<draggable id="1" icon="images_list/lcao-mo/u_d.png" /> <draggable id="1" icon="/static/images/images_list/lcao-mo/u_d.png" />
<draggable id="2" icon="images_list/lcao-mo/u_d.png" /> <draggable id="2" icon="/static/images/images_list/lcao-mo/u_d.png" />
<draggable id="3" icon="images_list/lcao-mo/u_d.png" /> <draggable id="3" icon="/static/images/images_list/lcao-mo/u_d.png" />
<draggable id="4" icon="images_list/lcao-mo/u_d.png" /> <draggable id="4" icon="/static/images/images_list/lcao-mo/u_d.png" />
<draggable id="5" icon="images_list/lcao-mo/u_d.png" /> <draggable id="5" icon="/static/images/images_list/lcao-mo/u_d.png" />
<draggable id="6" icon="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="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="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="images_list/lcao-mo/u_d.png" /> <draggable id="v_fb_3" icon="/static/images/images_list/lcao-mo/u_d.png" />
<!-- up bond --> <!-- up bond -->
<draggable id="7" icon="images_list/lcao-mo/up.png"/> <draggable id="7" icon="/static/images/images_list/lcao-mo/up.png"/>
<draggable id="8" icon="images_list/lcao-mo/up.png"/> <draggable id="8" icon="/static/images/images_list/lcao-mo/up.png"/>
<draggable id="9" icon="images_list/lcao-mo/up.png"/> <draggable id="9" icon="/static/images/images_list/lcao-mo/up.png"/>
<draggable id="10" icon="images_list/lcao-mo/up.png"/> <draggable id="10" icon="/static/images/images_list/lcao-mo/up.png"/>
<draggable id="v_ub_1" icon="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="images_list/lcao-mo/up.png"/> <draggable id="v_ub_2" icon="/static/images/images_list/lcao-mo/up.png"/>
<!-- sigma --> <!-- sigma -->
<draggable id="11" icon="images_list/lcao-mo/sigma.png"/> <draggable id="11" icon="/static/images/images_list/lcao-mo/sigma.png"/>
<draggable id="12" icon="images_list/lcao-mo/sigma.png"/> <draggable id="12" icon="/static/images/images_list/lcao-mo/sigma.png"/>
<!-- sigma* --> <!-- sigma* -->
<draggable id="13" icon="images_list/lcao-mo/sigma_s.png"/> <draggable id="13" icon="/static/images/images_list/lcao-mo/sigma_s.png"/>
<draggable id="14" icon="images_list/lcao-mo/sigma_s.png"/> <draggable id="14" icon="/static/images/images_list/lcao-mo/sigma_s.png"/>
<!-- pi --> <!-- pi -->
<draggable id="15" icon="images_list/lcao-mo/pi.png" /> <draggable id="15" icon="/static/images/images_list/lcao-mo/pi.png" />
<!-- pi* --> <!-- pi* -->
<draggable id="16" icon="images_list/lcao-mo/pi_s.png" /> <draggable id="16" icon="/static/images/images_list/lcao-mo/pi_s.png" />
<!-- images that should not be dragged --> <!-- images that should not be dragged -->
<draggable id="17" icon="images_list/lcao-mo/d.png" /> <draggable id="17" icon="/static/images/images_list/lcao-mo/d.png" />
<draggable id="18" icon="images_list/lcao-mo/d.png" /> <draggable id="18" icon="/static/images/images_list/lcao-mo/d.png" />
<!-- positions of electrons and electron pairs --> <!-- positions of electrons and electron pairs -->
<target id="s_left" x="130" y="360" w="32" h="32"/> <target id="s_left" x="130" y="360" w="32" h="32"/>
...@@ -255,30 +259,21 @@ else: ...@@ -255,30 +259,21 @@ else:
]]></answer> ]]></answer>
</customresponse> </customresponse>
<text>
<p>
Drag and drop pictures to proper positions.
</p>
<p>
Drag images to the cow)).
</p>
</text>
<customresponse> <customresponse>
<text> <text>
<h3>Individual targets with outlines. One draggable per target.</h3> <h4>[Individual targets with outlines, One draggable per target]</h4><br/>
<p> Drag ant to first and star to 3rd. </p> <h4>
<br /> Drag -Ant- to first position and -Star- to third position </h4><br/>
</text> </text>
<drag_and_drop_input img="cow.png" target_outline="true"> <drag_and_drop_input img="/static/images/cow.png" target_outline="true">
<draggable id="1" label="Label 1"/> <draggable id="1" label="Label 1"/>
<draggable id="name_with_icon" label="Ant" icon="images_list/ant.jpg"/> <draggable id="name_with_icon" label="Ant" icon="/static/images/images_list/ant.jpg"/>
<draggable id="with_icon" label="Cloud" icon="images_list/cloud.jpg" /> <draggable id="with_icon" label="Cloud" icon="/static/images/images_list/cloud.jpg" />
<draggable id="5" label="Label2" /> <draggable id="5" label="Label2" />
<draggable id="2" label="Drop" icon="images_list/drop.jpg" /> <draggable id="2" label="Drop" icon="/static/images/images_list/drop.jpg" />
<draggable id="name_label_icon3" label="Grass" icon="images_list/grass.jpg" /> <draggable id="name_label_icon3" label="Grass" icon="/static/images/images_list/grass.jpg" />
<draggable id="name4" label="Star" icon="images_list/star.png" /> <draggable id="name4" label="Star" icon="/static/images/images_list/star.png" />
<draggable id="7" label="Label3" /> <draggable id="7" label="Label3" />
<target id="t1" x="20" y="20" w="90" h="90"/> <target id="t1" x="20" y="20" w="90" h="90"/>
...@@ -298,22 +293,22 @@ else: ...@@ -298,22 +293,22 @@ else:
<customresponse> <customresponse>
<text> <text>
<h3> <h4>[SMALL IMAGE, Individual targets WITHOUT outlines, One draggable
SMALL IMAGE. Individual targets WITHOUT outlines. Move Star to the per target]</h4><br/>
volcano opening, and Label3 on to the right ear of the cow. <h4>
One draggable per target. Move -Star- to the volcano opening, and -Label3- on to
</h3> the right ear of the cow.
<br /> </h4><br/>
</text> </text>
<drag_and_drop_input img="cow3.png" target_outline="false"> <drag_and_drop_input img="/static/images/cow3.png" target_outline="false">
<draggable id="1" label="Label 1"/> <draggable id="1" label="Label 1"/>
<draggable id="name_with_icon" label="Ant" icon="images_list/ant.jpg"/> <draggable id="name_with_icon" label="Ant" icon="/static/images/images_list/ant.jpg"/>
<draggable id="with_icon" label="Cloud" icon="images_list/cloud.jpg" /> <draggable id="with_icon" label="Cloud" icon="/static/images/images_list/cloud.jpg" />
<draggable id="5" label="Label2" /> <draggable id="5" label="Label2" />
<draggable id="2" label="Drop" icon="images_list/drop.jpg" /> <draggable id="2" label="Drop" icon="/static/images/images_list/drop.jpg" />
<draggable id="name_label_icon3" label="Grass" icon="images_list/grass.jpg" /> <draggable id="name_label_icon3" label="Grass" icon="/static/images/images_list/grass.jpg" />
<draggable id="name4" label="Star" icon="images_list/star.png" /> <draggable id="name4" label="Star" icon="/static/images/images_list/star.png" />
<draggable id="7" label="Label3" /> <draggable id="7" label="Label3" />
<target id="t1" x="111" y="58" w="90" h="90"/> <target id="t1" x="111" y="58" w="90" h="90"/>
...@@ -333,19 +328,19 @@ else: ...@@ -333,19 +328,19 @@ else:
<customresponse> <customresponse>
<text> <text>
<h3>Many draggable per target. Move star and ant to most left target <h4>[Many draggables per target]</h4><br/>
and lable 3 and label 2 to most right target.</h3> <h4>Move -Star- and -Ant- to most left target
<br /> and -Label3- and -Label2- to most right target.</h4><br/>
</text> </text>
<drag_and_drop_input img="cow.png" target_outline="true" one_per_target="false"> <drag_and_drop_input img="/static/images/cow.png" target_outline="true" one_per_target="false">
<draggable id="1" label="Label 1"/> <draggable id="1" label="Label 1"/>
<draggable id="name_with_icon" label="Ant" icon="images_list/ant.jpg"/> <draggable id="name_with_icon" label="Ant" icon="/static/images/images_list/ant.jpg"/>
<draggable id="with_icon" label="Cloud" icon="images_list/cloud.jpg" /> <draggable id="with_icon" label="Cloud" icon="/static/images/images_list/cloud.jpg" />
<draggable id="5" label="Label2" /> <draggable id="5" label="Label2" />
<draggable id="2" label="Drop" icon="images_list/drop.jpg" /> <draggable id="2" label="Drop" icon="/static/images/images_list/drop.jpg" />
<draggable id="name_label_icon3" label="Grass" icon="images_list/grass.jpg" /> <draggable id="name_label_icon3" label="Grass" icon="/static/images/images_list/grass.jpg" />
<draggable id="name4" label="Star" icon="images_list/star.png" /> <draggable id="name4" label="Star" icon="/static/images/images_list/star.png" />
<draggable id="7" label="Label3" /> <draggable id="7" label="Label3" />
<target id="t1" x="20" y="20" w="90" h="90"/> <target id="t1" x="20" y="20" w="90" h="90"/>
...@@ -368,20 +363,20 @@ else: ...@@ -368,20 +363,20 @@ else:
<customresponse> <customresponse>
<text> <text>
<h3>Draggables can be places anywhere on base image. <h4>[Draggables can be placed anywhere on base image]</h4><br/>
Place grass in the middle of the image and ant in the <h4>
right upper corner.</h3> Place -Grass- in the middle of the image and -Ant- in the
<br /> right upper corner.</h4><br/>
</text> </text>
<drag_and_drop_input img="cow.png" > <drag_and_drop_input img="/static/images/cow.png" >
<draggable id="1" label="Label 1"/> <draggable id="1" label="Label 1"/>
<draggable id="ant" label="Ant" icon="images_list/ant.jpg"/> <draggable id="ant" label="Ant" icon="/static/images/images_list/ant.jpg"/>
<draggable id="with_icon" label="Cloud" icon="images_list/cloud.jpg" /> <draggable id="with_icon" label="Cloud" icon="/static/images/images_list/cloud.jpg" />
<draggable id="5" label="Label2" /> <draggable id="5" label="Label2" />
<draggable id="2" label="Drop" icon="images_list/drop.jpg" /> <draggable id="2" label="Drop" icon="/static/images/images_list/drop.jpg" />
<draggable id="grass" label="Grass" icon="images_list/grass.jpg" /> <draggable id="grass" label="Grass" icon="/static/images/images_list/grass.jpg" />
<draggable id="name4" label="Star" icon="images_list/star.png" /> <draggable id="name4" label="Star" icon="/static/images/images_list/star.png" />
<draggable id="7" label="Label3" /> <draggable id="7" label="Label3" />
</drag_and_drop_input> </drag_and_drop_input>
...@@ -398,11 +393,11 @@ else: ...@@ -398,11 +393,11 @@ else:
<customresponse> <customresponse>
<text> <text>
<h3>Please identify the Carbon and Oxygen atoms in the molecule.</h3> <h4>[Another anyof example]</h4><br/>
<br /> <h4>Please identify the Carbon and Oxygen atoms in the molecule.</h4><br/>
</text> </text>
<drag_and_drop_input img="images_list/ethglycol.jpg" target_outline="true" one_per_target="true"> <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="l1_c" label="Carbon" />
<draggable id="l2" label="Methane"/> <draggable id="l2" label="Methane"/>
<draggable id="l3_o" label="Oxygen" /> <draggable id="l3_o" label="Oxygen" />
...@@ -449,13 +444,13 @@ else: ...@@ -449,13 +444,13 @@ else:
<customresponse> <customresponse>
<text> <text>
<h3>If the element appears in this molecule, <h4>[Again another anyof example]</h4><br/>
drag the label onto it</h3> <h4>If the element appears in this molecule, drag the label onto it</h4>
<br /> <br/>
</text> </text>
<drag_and_drop_input img="images_list/ethglycol.jpg" target_outline="true" <drag_and_drop_input img="/static/images/images_list/ethglycol.jpg" target_outline="true"
one_per_target="true" no_labels="true"> one_per_target="true" no_labels="true" label_bg_color="rgb(222, 139, 238)">
<draggable id="1" label="Hydrogen" /> <draggable id="1" label="Hydrogen" />
<draggable id="2" label="Hydrogen" /> <draggable id="2" label="Hydrogen" />
<draggable id="3" label="Nytrogen" /> <draggable id="3" label="Nytrogen" />
...@@ -499,22 +494,18 @@ else: ...@@ -499,22 +494,18 @@ else:
<customresponse> <customresponse>
<text> <text>
<h3> <h4>[Wrong base image url example]
SMALL IMAGE. Individual targets WITHOUT outlines. Move Star to the </h4><br/>
volcano opening, and Label3 on to the right ear of the cow.
One draggable per target.
</h3>
<br />
</text> </text>
<drag_and_drop_input img="cow3_bad.png" target_outline="false"> <drag_and_drop_input img="/static/images/cow3_bad.png" target_outline="false">
<draggable id="1" label="Label 1"/> <draggable id="1" label="Label 1"/>
<draggable id="name_with_icon" label="Ant" icon="images_list/ant.jpg"/> <draggable id="name_with_icon" label="Ant" icon="/static/images/images_list/ant.jpg"/>
<draggable id="with_icon" label="Cloud" icon="images_list/cloud.jpg" /> <draggable id="with_icon" label="Cloud" icon="/static/images/images_list/cloud.jpg" />
<draggable id="5" label="Label2" /> <draggable id="5" label="Label2" />
<draggable id="2" label="Drop" icon="images_list/drop.jpg" /> <draggable id="2" label="Drop" icon="/static/images/images_list/drop.jpg" />
<draggable id="name_label_icon3" label="Grass" icon="images_list/grass.jpg" /> <draggable id="name_label_icon3" label="Grass" icon="/static/images/images_list/grass.jpg" />
<draggable id="name4" label="Star" icon="images_list/star.png" /> <draggable id="name4" label="Star" icon="/static/images/images_list/star.png" />
<draggable id="7" label="Label3" /> <draggable id="7" label="Label3" />
<target id="t1" x="111" y="58" w="90" h="90"/> <target id="t1" x="111" y="58" w="90" h="90"/>
......
docs/source/drag-n-drop-demo2.xml 0 → 100644
<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>
docs/source/drag_and_drop_input.rst
...@@ -312,7 +312,12 @@ Logic flow ...@@ -312,7 +312,12 @@ Logic flow
Example Example
======= =======
Various configuration of DnD on one page Examples of draggables that can't be reused
---------------------------------------- -------------------------------------------
.. literalinclude:: drag-n-drop-demo.xml .. literalinclude:: drag-n-drop-demo.xml
Draggables can be reused
------------------------
.. literalinclude:: drag-n-drop-demo2.xml
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment