Skip to content

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

Added initial docs for Drag and Drop.

parent f1f3b2ea
Showing with 188 additions and 0 deletions
docs/source/drag-n-drop-demo.xml 0 → 100644
<problem display_name="Drag and drop demo" >
<text>
<p>
Drag and drop pictures to proper positions.
</p>
<p>
Drag images to the cow)).
</p>
</text>
<customresponse>
<text>
<h3>Individual targets with outlines. One draggable per target.</h3>
<p> Drag ant to first and star to 3rd. </p>
<br />
</text>
<drag_and_drop_input img="cow.png" target_outline="true">
<draggable id="1" label="Label 1"/>
<draggable id="name_with_icon" label="Ant" icon="images_list/ant.jpg"/>
<draggable id="with_icon" label="Cloud" icon="images_list/cloud.jpg" />
<draggable id="5" label="Label2" />
<draggable id="2" label="Drop" icon="images_list/drop.jpg" />
<draggable id="name_label_icon3" label="Grass" icon="images_list/grass.jpg" />
<draggable id="name4" label="Star" icon="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>
<h3>
Individual targets WITHOUT outlines. Move Star to the
volcano opening, and Label3 on to the right ear of the cow.
One draggable per target.
</h3>
<br />
</text>
<drag_and_drop_input img="cow.png" target_outline="false">
<draggable id="1" label="Label 1"/>
<draggable id="name_with_icon" label="Ant" icon="images_list/ant.jpg"/>
<draggable id="with_icon" label="Cloud" icon="images_list/cloud.jpg" />
<draggable id="5" label="Label2" />
<draggable id="2" label="Drop" icon="images_list/drop.jpg" />
<draggable id="name_label_icon3" label="Grass" icon="images_list/grass.jpg" />
<draggable id="name4" label="Star" icon="images_list/star.png" />
<draggable id="7" label="Label3" />
<target id="t1" x="210" y="90" w="90" h="90"/>
<target id="t2" x="400" y="190" 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>
<h3>Many draggable per target. Move star and ant to most left target
and lable 3 and label 2 to most right target.</h3>
<br />
</text>
<drag_and_drop_input img="cow.png" target_outline="true" one_per_target="false">
<draggable id="1" label="Label 1"/>
<draggable id="name_with_icon" label="Ant" icon="images_list/ant.jpg"/>
<draggable id="with_icon" label="Cloud" icon="images_list/cloud.jpg" />
<draggable id="5" label="Label2" />
<draggable id="2" label="Drop" icon="images_list/drop.jpg" />
<draggable id="name_label_icon3" label="Grass" icon="images_list/grass.jpg" />
<draggable id="name4" label="Star" icon="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>
<h3>Draggables can be places anywhere on base image.
Place grass in the middle of the image and ant in the
right upper corner.</h3>
<br />
</text>
<drag_and_drop_input img="cow.png" >
<draggable id="1" label="Label 1"/>
<draggable id="ant" label="Ant" icon="images_list/ant.jpg"/>
<draggable id="with_icon" label="Cloud" icon="images_list/cloud.jpg" />
<draggable id="5" label="Label2" />
<draggable id="2" label="Drop" icon="images_list/drop.jpg" />
<draggable id="grass" label="Grass" icon="images_list/grass.jpg" />
<draggable id="name4" label="Star" icon="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>
<h3>Please identify the Carbon and Oxygen atoms in the molecule.</h3>
<br />
</text>
<drag_and_drop_input img="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 = {'l3_o': 't1_o',
'l10_o': 't9_o',
'l1_c': 't5_c',
'l8_c': 't6_c'}
if draganddrop.grade(submission[0], correct_answer):
correct = ['correct']
else:
correct = ['incorrect']
]]></answer>
</customresponse>
</problem>
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