Andal.LND/edx-platform
6
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

remove old xml docs, add rake buildpubdocs, showpubdocs, pubdoc

Browse Source
This commit is contained in:
Vasyl Nakvasiuk
2013-03-18 15:53:07 +02:00
parent f172405c9a
commit 911c384527
13 changed files with 32 additions and 2067 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
doc/public/Makefile
View File

@@ -5,7 +5,7 @@
SPHINXOPTS =
SPHINXBUILD = sphinx-build
PAPER =
BUILDDIR = _build
BUILDDIR = build
# Internal variables.
PAPEROPT_a4 = -D latex_paper_size=a4

526
docs/source/drag-n-drop-demo.xml
View File

@@ -1,526 +0,0 @@
<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>

373
docs/source/drag-n-drop-demo2.xml
View File

@@ -1,373 +0,0 @@
<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>

323
docs/source/drag_and_drop_input.rst
View File

@@ -1,323 +0,0 @@
**********************************************
Xml format of drag and drop input [inputtypes]
**********************************************
.. module:: drag_and_drop_input
Format description
==================
The main tag of Drag and Drop (DnD) input is::
<drag_and_drop_input> ... </drag_and_drop_input>
``drag_and_drop_input`` can include any number of the following 2 tags:
``draggable`` and ``target``.
drag_and_drop_input tag
-----------------------
The main container for a single instance of DnD. The following attributes can
be specified for this tag::
img - Relative path to an image that will be the base image. All draggables
can be dragged onto it.
target_outline - Specify whether an outline (gray dashed line) should be
drawn around targets (if they are specified). It can be either
'true' or 'false'. If not specified, the default value is
'false'.
one_per_target - Specify whether to allow more than one draggable to be
placed onto a single target. It can be either 'true' or 'false'. If
not specified, the default value is 'true'.
no_labels - default is false, in default behaviour if label is not set, label
is obtained from id. If no_labels is true, labels are not automatically
populated from id, and one can not set labels and obtain only icons.
draggable tag
-------------
Draggable tag specifies a single draggable object which has the following
attributes::
id - Unique identifier of the draggable object.
label - Human readable label that will be shown to the user.
icon - Relative path to an image that will be shown to the user.
can_reuse - true or false, default is false. If true, same draggable can be
used multiple times.
A draggable is what the user must drag out of the slider and place onto the
base image. After a drag operation, if the center of the draggable ends up
outside the rectangular dimensions of the image, it will be returned back
to the slider.
In order for the grader to work, it is essential that a unique ID
is provided. Otherwise, there will be no way to tell which draggable is at what
coordinate, or over what target. Label and icon attributes are optional. If
they are provided they will be used, otherwise, you can have an empty
draggable. The path is relative to 'course_folder' folder, for example,
/static/images/img1.png.
target tag
----------
Target tag specifies a single target object which has the following required
attributes::
id - Unique identifier of the target object.
x - X-coordinate on the base image where the top left corner of the target
will be positioned.
y - Y-coordinate on the base image where the top left corner of the target
will be positioned.
w - Width of the target.
h - Height of the target.
A target specifies a place on the base image where a draggable can be
positioned. By design, if the center of a draggable lies within the target
(i.e. in the rectangle defined by [[x, y], [x + w, y + h]], then it is within
the target. Otherwise, it is outside.
If at lest one target is provided, the behavior of the client side logic
changes. If a draggable is not dragged on to a target, it is returned back to
the slider.
If no targets are provided, then a draggable can be dragged and placed anywhere
on the base image.
correct answer format
---------------------
There are two correct answer formats: short and long
If short from correct answer is mapping of 'draggable_id' to 'target_id'::
correct_answer = {'grass': [[300, 200], 200], 'ant': [[500, 0], 200]}
correct_answer = {'name4': 't1', '7': 't2'}
In long form correct answer is list of dicts. Every dict has 3 keys:
draggables, targets and rule. For example::
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'
}]
Draggables is list of draggables id. Target is list of targets id, draggables
must be dragged to with considering rule. Rule is string.
Draggables in dicts inside correct_answer list must not intersect!!!
Wrong (for draggable id 7)::
correct_answer = [
{
'draggables': ['7', '8'],
'targets': ['t5_c', 't6_c'],
'rule': 'anyof'
},
{
'draggables': ['7', '2'],
'targets': ['t2_h', 't3_h', 't4_h', 't7_h', 't8_h', 't10_h'],
'rule': 'anyof'
}]
Rules are: exact, anyof, unordered_equal, anyof+number, unordered_equal+number
.. such long lines are needed for sphinx to display lists correctly
- Exact rule means that targets for draggable id's in user_answer are the same that targets from correct answer. For example, for draggables 7 and 8 user must drag 7 to target1 and 8 to target2 if correct_answer is::
correct_answer = [
{
'draggables': ['7', '8'],
'targets': ['tartget1', 'target2'],
'rule': 'exact'
}]
- unordered_equal rule allows draggables be dragged to targets unordered. If one want to allow for student to drag 7 to target1 or target2 and 8 to target2 or target 1 and 7 and 8 must be in different targets, then correct answer must be::
correct_answer = [
{
'draggables': ['7', '8'],
'targets': ['tartget1', 'target2'],
'rule': 'unordered_equal'
}]
- Anyof rule allows draggables to be dragged to any of targets. If one want to allow for student to drag 7 and 8 to target1 or target2, which means that if 7 is on target1 and 8 is on target1 or 7 on target2 and 8 on target2 or 7 on target1 and 8 on target2. Any of theese are correct which anyof rule::
correct_answer = [
{
'draggables': ['7', '8'],
'targets': ['tartget1', 'target2'],
'rule': 'anyof'
}]
- If you have can_reuse true, then you, for example, have draggables a,b,c and 10 targets. These will allow you to drag 4 'a' draggables to ['target1', 'target4', 'target7', 'target10'] , you do not need to write 'a' four times. Also this will allow you to drag 'b' draggable to target2 or target5 for target5 and target2 etc..::
correct_answer = [
{
'draggables': ['a'],
'targets': ['target1', 'target4', 'target7', 'target10'],
'rule': 'unordered_equal'
},
{
'draggables': ['b'],
'targets': ['target2', 'target5', 'target8'],
'rule': 'anyof'
},
{
'draggables': ['c'],
'targets': ['target3', 'target6', 'target9'],
'rule': 'unordered_equal'
}]
- And sometimes you want to allow drag only two 'b' draggables, in these case you sould use 'anyof+number' of 'unordered_equal+number' rule::
correct_answer = [
{
'draggables': ['a', 'a', 'a'],
'targets': ['target1', 'target4', 'target7'],
'rule': 'unordered_equal+numbers'
},
{
'draggables': ['b', 'b'],
'targets': ['target2', 'target5', 'target8'],
'rule': 'anyof+numbers'
},
{
'draggables': ['c'],
'targets': ['target3', 'target6', 'target9'],
'rule': 'unordered_equal'
}]
In case if we have no multiple draggables per targets (one_per_target="true"),
for same number of draggables, anyof is equal to unordered_equal
If we have can_reuse=true, than one must use only long form of correct answer.
Grading logic
-------------
1. User answer (that comes from browser) and correct answer (from xml) are parsed to the same format::
group_id: group_draggables, group_targets, group_rule
Group_id is ordinal number, for every dict in correct answer incremental
group_id is assigned: 0, 1, 2, ...
Draggables from user answer are added to same group_id where identical draggables
from correct answer are, for example::
If correct_draggables[group_0] = [t1, t2] then
user_draggables[group_0] are all draggables t1 and t2 from user answer:
[t1] or [t1, t2] or [t1, t2, t2] etc..
2. For every group from user answer, for that group draggables, if 'number' is in group rule, set() is applied,
if 'number' is not in rule, set is not applied::
set() : [t1, t2, t3, t3] -> [t1, t2, ,t3]
For every group, at this step, draggables lists are equal.
3. For every group, lists of targets are compared using rule for that group.
Set and '+number' cases
.......................
Set() and '+number' are needed only for case of reusable draggables,
for other cases there are no equal draggables in list, so set() does nothing.
.. such long lines needed for sphinx to display nicely
* Usage of set() operation allows easily create rule for case of "any number of same draggable can be dragged to some targets"::
{
'draggables': ['draggable_1'],
'targets': ['target3', 'target6', 'target9'],
'rule': 'anyof'
}
* 'number' rule is used for the case of reusable draggables, when one want to fix number of draggable to drag. In this example only two instances of draggables_1 are allowed to be dragged::
{
'draggables': ['draggable_1', 'draggable_1'],
'targets': ['target3', 'target6', 'target9'],
'rule': 'anyof+number'
}
* Note, that in using rule 'exact', one does not need 'number', because you can't recognize from user interface which reusable draggable is on which target. Absurd example::
{
'draggables': ['draggable_1', 'draggable_1', 'draggable_2'],
'targets': ['target3', 'target6', 'target9'],
'rule': 'exact'
}
Correct handling of this example is to create different rules for draggable_1 and
draggable_2
* For 'unordered_equal' (or 'exact' too) we don't need 'number' if you have only same draggable in group, as targets length will provide constraint for the number of draggables::
{
'draggables': ['draggable_1'],
'targets': ['target3', 'target6', 'target9'],
'rule': 'unordered_equal'
}
This means that only three draggaggables 'draggable_1' can be dragged.
* But if you have more that one different reusable draggable in list, you may use 'number' rule::
{
'draggables': ['draggable_1', 'draggable_1', 'draggable_2'],
'targets': ['target3', 'target6', 'target9'],
'rule': 'unordered_equal+number'
}
If not use number, draggables list will be setted to ['draggable_1', 'draggable_2']
Logic flow
----------
(Click on image to see full size version.)
.. image:: draganddrop_logic_flow.png
:width: 100%
:target: _images/draganddrop_logic_flow.png
Example
=======
Examples of draggables that can't be reused
-------------------------------------------
.. literalinclude:: drag-n-drop-demo.xml
Draggables can be reused
------------------------
.. literalinclude:: drag-n-drop-demo2.xml

BIN
docs/source/draganddrop_logic_flow.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 298 KiB

563
docs/source/graphical_slider_tool.rst
View File

@@ -1,563 +0,0 @@
*********************************************
Xml format of graphical slider tool [xmodule]
*********************************************
.. module:: xml_format_gst
Format description
==================
Graphical slider tool (GST) main tag is::
<graphical_slider_tool> BODY </graphical_slider_tool>
``graphical_slider_tool`` tag must have two children tags: ``render``
and ``configuration``.
Render tag
----------
Render tag can contain usual html tags mixed with some GST specific tags::
<slider/> - represents jQuery slider for changing a parameter's value
<textbox/> - represents a text input field for changing a parameter's value
<plot/> - represents Flot JS plot element
Also GST will track all elements inside ``<render></render>`` where ``id``
attribute is set, and a corresponding parameter referencing that ``id`` is present
in the configuration section below. These will be referred to as dynamic elements.
The contents of the <render> section will be shown to the user after
all occurrences of::
<slider var="{parameter name}" [style="{CSS statements}"] />
<textbox var="{parameter name}" [style="{CSS statements}"] />
<plot [style="{CSS statements}"] />
have been converted to actual sliders, text inputs, and a plot graph.
Everything in square brackets is optional. After initialization, all
text input fields, sliders, and dynamic elements will be set to the initial
values of the parameters that they are assigned to.
``{parameter name}`` specifies the parameter to which the slider or text
input will be attached to.
[style="{CSS statements}"] specifies valid CSS styling. It will be passed
directly to the browser without any parsing.
There is a one-to-one relationship between a slider and a parameter.
I.e. for one parameter you can put only one ``<slider>`` in the
``<render>`` section. However, you don't have to specify a slider - they
are optional.
There is a many-to-one relationship between text inputs and a
parameter. I.e. for one parameter you can put many '<textbox>' elements in
the ``<render>`` section. However, you don't have to specify a text
input - they are optional.
You can put only one ``<plot>`` in the ``<render>`` section. It is not
required.
Slider tag
..........
Slider tag must have ``var`` attribute and optional ``style`` attribute::
<slider var='a' style="width:400px;float:left;" />
After processing, slider tags will be replaced by jQuery UI sliders with applied
``style`` attribute.
``var`` attribute must correspond to a parameter. Parameters can be used in any
of the ``function`` tags in ``functions`` tag. By moving slider, value of
parameter ``a`` will change, and so result of function, that depends on parameter
``a``, will also change.
Textbox tag
...........
Texbox tag must have ``var`` attribute and optional ``style`` attribute::
<textbox var="b" style="width:50px; float:left; margin-left:10px;" />
After processing, textbox tags will be replaced by html text inputs with applied
``style`` attribute. If you want a readonly text input, then you should use a
dynamic element instead (see section below "HTML tagsd with ID").
``var`` attribute must correspond to a parameter. Parameters can be used in any
of the ``function`` tags in ``functions`` tag. By changing the value on the text input,
value of parameter ``a`` will change, and so result of function, that depends on
parameter ``a``, will also change.
Plot tag
........
Plot tag may have optional ``style`` attribute::
<plot style="width:50px; float:left; margin-left:10px;" />
After processing plot tags will be replaced by Flot JS plot with applied
``style`` attribute.
HTML tags with ID (dynamic elements)
....................................
Any HTML tag with ID, e.g. ``<span id="answer_span_1">`` can be used as a
place where result of function can be inserted. To insert function result to
an element, element ID must be included in ``function`` tag as ``el_id`` attribute
and ``output`` value must be ``"element"``::
<function output="element" el_id="answer_span_1">
function add(a, b, precision) {
var x = Math.pow(10, precision || 2);
return (Math.round(a * x) + Math.round(b * x)) / x;
}
return add(a, b, 5);
</function>
Configuration tag
-----------------
The configuration tag contains parameter settings, graph
settings, and function definitions which are to be plotted on the
graph and that use specified parameters.
Configuration tag contains two mandatory tag ``functions`` and ``parameters`` and
may contain another ``plot`` tag.
Parameters tag
..............
``Parameters`` tag contains ``parameter`` tags. Each ``parameter`` tag must have
``var``, ``max``, ``min``, ``step`` and ``initial`` attributes::
<parameters>
<param var="a" min="-10.0" max="10.0" step="0.1" initial="0" />
<param var="b" min="-10.0" max="10.0" step="0.1" initial="0" />
</parameters>
``var`` attribute links min, max, step and initial values to parameter name.
``min`` attribute is the minimal value that a parameter can take. Slider and input
values can not go below it.
``max`` attribute is the maximal value that a parameter can take. Slider and input
values can not go over it.
``step`` attribute is value of slider step. When a slider increase or decreases
the specified parameter, it will do so by the amount specified with 'step'
``initial`` attribute is the initial value that the specified parameter should be
set to. Sliders and inputs will initially show this value.
The parameter's name is specified by the ``var`` property. All occurrences
of sliders and/or text inputs that specify a ``var`` property, will be
connected to this parameter - i.e. they will reflect the current
value of the parameter, and will be updated when the parameter
changes.
If at lest one of these attributes is not set, then the parameter
will not be used, slider's and/or text input elements that specify
this parameter will not be activated, and the specified functions
which use this parameter will not return a numeric value. This means
that neglecting to specify at least one of the attributes for some
parameter will have the result of the whole GST instance not working
properly.
Functions tag
.............
For the GST to do something, you must defined at least one
function, which can use any of the specified parameter values. The
function expects to take the ``x`` value, do some calculations, and
return the ``y`` value. I.e. this is a 2D plot in Cartesian
coordinates. This is how the default function is meant to be used for
the graph.
There are other special cases of functions. They are used mainly for
outputting to elements, plot labels, or for custom output. Because
the return a single value, and that value is meant for a single element,
these function are invoked only with the set of all of the parameters.
I.e. no ``x`` value is available inside them. They are useful for
showing the current value of a parameter, showing complex static
formulas where some parameter's value must change, and other useful
things.
The different style of function is specified by the ``output`` attribute.
Each function must be defined inside ``function`` tag in ``functions`` tag::
<functions>
<function output="element" el_id="answer_span_1">
function add(a, b, precision) {
var x = Math.pow(10, precision || 2);
return (Math.round(a * x) + Math.round(b * x)) / x;
}
return add(a, b, 5);
</function>
</functions>
The parameter names (along with their values, as provided from text
inputs and/or sliders), will be available inside all defined
functions. A defined function body string will be parsed internally
by the browser's JavaScript engine and converted to a true JS
function.
The function's parameter list will automatically be created and
populated, and will include the ``x`` (when ``output`` is not specified or
is set to ``"graph"``), and all of the specified parameter values (from sliders
and text inputs). This means that each of the defined functions will have
access to all of the parameter values. You don't have to use them, but
they will be there.
Examples::
<function>
return x;
</function>
<function dot="true" label="\(y_2\)">
return (x + a) * Math.sin(x * b);
</function>
<function color="green">
function helperFunc(c1) {
return c1 * c1 - a;
}
return helperFunc(x + 10 * a * b) + Math.sin(a - x);
</function>
Required parameters::
function body:
A string composing a normal JavaScript function
except that there is no function declaration
(along with parameters), and no closing bracket.
So if you normally would have written your
JavaScript function like this:
function myFunc(x, a, b) {
return x * a + b;
}
here you must specify just the function body
(everything that goes between '{' and '}'). So,
you would specify the above function like so (the
bare-bone minimum):
<function>return x * a + b;</function>
VERY IMPORTANT: Because the function will be passed
to the browser as a single string, depending on implementation
specifics, the end-of-line characters can be stripped. This
means that single line JavaScript comments (starting with "//")
can lead to the effect that everything after the first such comment
will be treated as a comment. Therefore, it is absolutely
necessary that such single line comments are not used when
defining functions for GST. You can safely use the alternative
multiple line JavaScript comments (such comments start with "/*"
and end with "*/).
VERY IMPORTANT: If you have a large function body, and decide to
split it into several lines, than you must wrap it in "CDATA" like
so:
<function>
<![CDATA[
var dNew;
dNew = 0.3;
return x * a + b - dNew;
]]>
</function>
Optional parameters::
color: Color name ('red', 'green', etc.) or in the form of
'#FFFF00'. If not specified, a default color (different
one for each graphed function) will be given by Flot JS.
line: A string - 'true' or 'false'. Should the data points be
connected by a line on the graph? Default is 'true'.
dot: A string - 'true' or 'false'. Should points be shown for
each data point on the graph? Default is 'false'.
bar: A string - 'true' or 'false'. When set to 'true', points
will be plotted as bars.
label: A string. If provided, will be shown in the legend, along
with the color that was used to plot the function.
output: 'element', 'none', 'plot_label', or 'graph'. If not defined,
function will be plotted (same as setting 'output' to 'graph').
If defined, and other than 'graph', function will not be
plotted, but it's output will be inserted into the element
with ID specified by 'el_id' attribute.
el_id: Id of HTML element, defined in '<render>' section. Value of
function will be inserted as content of this element.
disable_auto_return: By default, if JavaScript function string is written
without a "return" statement, the "return" will be
prepended to it. Set to "true" to disable this
functionality. This is done so that simple functions
can be defined in an easy fashion (for example, "a",
which will be translated into "return a").
update_on: A string - 'change', or 'slide'. Default (if not set) is
'slide'. This defines the event on which a given function is
called, and its result is inserted into an element. This
setting is relevant only when "output" is other than "graph".
When specifying ``el_id``, it is essential to set "output" to one of
element - GST will invoke the function, and the return of it will be
inserted into a HTML element with id specified by ``el_id``.
none - GST will simply inoke the function. It is left to the instructor
who writes the JavaScript function body to update all necesary
HTML elements inside the function, before it exits. This is done
so that extra steps can be preformed after an HTML element has
been updated with a value. Note, that because the return value
from this function is not actually used, it will be tempting to
omit the "return" statement. However, in this case, the attribute
"disable_auto_return" must be set to "true" in order to prevent
GST from inserting a "return" statement automatically.
plot_label - GST will process all plot labels (which are strings), and
will replace the all instances of substrings specified by
``el_id`` with the returned value of the function. This is
necessary if you want a label in the graph to have some changing
number. Because of the nature of Flot JS, it is impossible to
achieve the same effect by setting the "output" attribute
to "element", and including a HTML element in the label.
The above values for "output" will tell GST that the function is meant for an
HTML element (not for graph), and that it should not get an 'x' parameter (along
with some value).
[Note on MathJax and labels]
............................
Independently of this module, will render all TeX code
within the ``<render>`` section into nice mathematical formulas. Just
remember to wrap it in one of::
\( and \) - for inline formulas (formulas surrounded by
standard text)
\[ and \] - if you want the formula to be a separate line
It is possible to define a label in standard TeX notation. The JS
library MathJax will work on these labels also because they are
inserted on top of the plot as standard HTML (text within a DIV).
If the label is dynamic, i.e. it will contain some text (numeric, or other)
that has to be updated on a parameter's change, then one can define
a special function to handle this. The "output" of such a function must be
set to "none", and the JavaScript code inside this function must update the
MathJax element by itself. Before exiting, MathJax typeset function should
be called so that the new text will be re-rendered by MathJax. For example,
<render>
...
<span id="dynamic_mathjax"></span>
</render>
...
<function output="none" el_id="dynamic_mathjax">
<![CDATA[
var out_text;
out_text = "\\[\\mathrm{Percent \\space of \\space treated \\space with \\space YSS=\\frac{"
+(treated_men*10)+"\\space men *"
+(your_m_tx_yss/100)+"\\space prev. +\\space "
+((100-treated_men)*10)+"\\space women *"
+(your_f_tx_yss/100)+"\\space prev.}"
+"{1000\\space total\\space treated\\space patients}"
+"="+drummond_combined[0][1]+"\\%}\\]";
mathjax_for_prevalence_calcs+="\\[\\mathrm{Percent \\space of \\space untreated \\space with \\space YSS=\\frac{"
+(untreated_men*10)+"\\space men *"
+(your_m_utx_yss/100)+"\\space prev. +\\space "
+((100-untreated_men)*10)+"\\space women *"
+(your_f_utx_yss/100)+"\\space prev.}"
+"{1000\\space total\\space untreated\\space patients}"
+"="+drummond_combined[1][1]+"\\%}\\]";
$("#dynamic_mathjax").html(out_text);
MathJax.Hub.Queue(["Typeset",MathJax.Hub,"dynamic_mathjax"]);
]]>
</function>
...
Plot tag
........
``Plot`` tag inside ``configuration`` tag defines settings for plot output.
Required parameters::
xrange: 2 functions that must return value. Value is constant (3.1415)
or depend on parameter from parameters section:
<xrange>
<min>return 0;</min>
<max>return 30;</max>
</xrange>
or
<xrange>
<min>return -a;</min>
<max>return a;</max>
</xrange>
All functions will be calculated over domain between xrange:min
and xrange:max. Xrange depending on parameter is extremely
useful when domain(s) of your function(s) depends on parameter
(like circle, when parameter is radius and you want to allow
to change it).
Optional parameters::
num_points: Number of data points to generated for the plot. If
this is not set, the number of points will be
calculated as width / 5.
bar_width: If functions are present which are to be plotted as bars,
then this parameter specifies the width of the bars. A
numeric value for this parameter is expected.
bar_align: If functions are present which are to be plotted as bars,
then this parameter specifies how to align the bars relative
to the tick. Available values are "left" and "center".
xticks,
yticks: 3 floating point numbers separated by commas. This
specifies how many ticks are created, what number they
start at, and what number they end at. This is different
from the 'xrange' setting in that it has nothing to do
with the data points - it control what area of the
Cartesian space you will see. The first number is the
first tick's value, the second number is the step
between each tick, the third number is the value of the
last tick. If these configurations are not specified,
Flot will chose them for you based on the data points
set that he is currently plotting. Usually, this results
in a nice graph, however, sometimes you need to fine
grain the controls. For example, when you want to show
a fixed area of the Cartesian space, even when the data
set changes. On it's own, Flot will recalculate the
ticks, which will result in a different graph each time.
By specifying the xticks, yticks configurations, only
the plotted data will change - the axes (ticks) will
remain as you have defined them.
xticks_names, yticks_names:
A JSON string which represents a mapping of xticks, yticks
values to some defined strings. If specified, the graph will
not have any xticks, yticks except those for which a string
value has been defined in the JSON string. Note that the
matching will be string-based and not numeric. I.e. if a tick
value was "3.70" before, then inside the JSON there should be
a mapping like {..., "3.70": "Some string", ...}. Example:
<xticks_names>
<![CDATA[
{
"1": "Treated", "2": "Not Treated",
"4": "Treated", "5": "Not Treated",
"7": "Treated", "8": "Not Treated"
}
]]>
</xticks_names>
<yticks_names>
<![CDATA[
{"0": "0%", "10": "10%", "20": "20%", "30": "30%", "40": "40%", "50": "50%"}
]]>
</yticks_names>
xunits,
yunits: Units values to be set on axes. Use MathJax. Example:
<xunits>\(cm\)</xunits>
<yunits>\(m\)</yunits>
moving_label:
A way to specify a label that should be positioned dynamically,
based on the values of some parameters, or some other factors.
It is similar to a <function>, but it is only valid for a plot
because it is drawn relative to the plot coordinate system.
Multiple "moving_label" configurations can be provided, each one
with a unique text and a unique set of functions that determine
it's dynamic positioning.
Each "moving_label" can have a "color" attribute (CSS color notation),
and a "weight" attribute. "weight" can be one of "normal" or "bold",
and determines the styling of moving label's text.
Each "moving_label" function should return an object with a 'x'
and 'y properties. Within those functions, all of the parameter
names along with their value are available.
Example (note that "return" statement is missing; it will be automatically
inserted by GST):
<moving_label text="Co" weight="bold" color="red>
<![CDATA[ {'x': -50, 'y': c0};]]>
</moving_label>
asymptote:
Add a vertical or horizontal asymptote to the graph which will
be dynamically repositioned based on the specified function.
It is similar to the function in that it provides a JavaScript body function
string. This function will be used to calculate the position of the asymptote
relative to the axis specified by the "type" parameter.
Required parameters:
type:
Which axis should the asymptote be plotted against. Available values
are "x" and "y".
Optional parameters:
color:
The color of the line. A valid CSS color string is expected.
Example
=======
Plotting, sliders and inputs
----------------------------
.. literalinclude:: gst_example_with_documentation.xml
Update of html elements, no plotting
------------------------------------
.. literalinclude:: gst_example_html_element_output.xml
Circle with dynamic radius
--------------------------
.. literalinclude:: gst_example_dynamic_range.xml
Example of a bar graph
----------------------
.. literalinclude:: gst_example_bars.xml
Example of moving labels of graph
---------------------------------
.. literalinclude:: gst_example_dynamic_labels.xml

64
docs/source/gst_example_bars.xml
View File

@@ -1,64 +0,0 @@
<vertical>
<graphical_slider_tool>
<render>
<h2>Graphic slider tool: Bar graph example.</h2>
<p>We can request the API to plot us a bar graph.</p>
<div style="clear:both">
<p style="width:60px;float:left;">a</p>
<slider var='a' style="width:400px;float:left;"/>
<textbox var='a' style="width:50px;float:left;margin-left:15px;"/>
<br /><br /><br />
<p style="width:60px;float:left;">b</p>
<slider var='b' style="width:400px;float:left;"/>
<textbox var='b' style="width:50px;float:left;margin-left:15px;"/>
</div>
<plot style="clear:left;"/>
</render>
<configuration>
<parameters>
<param var="a" min="-100" max="100" step="5" initial="25" />
<param var="b" min="-100" max="100" step="5" initial="50" />
</parameters>
<functions>
<function bar="true" color="blue" label="Men">
<![CDATA[if (((x>0.9) && (x<1.1)) || ((x>4.9) && (x<5.1))) { return Math.sin(a * 0.01 * Math.PI + 2.952 * x); }
else {return undefined;}]]>
</function>
<function bar="true" color="red" label="Women">
<![CDATA[if (((x>1.9) && (x<2.1)) || ((x>3.9) && (x<4.1))) { return Math.cos(b * 0.01 * Math.PI + 3.432 * x); }
else {return undefined;}]]>
</function>
<function bar="true" color="green" label="Other 1">
<![CDATA[if (((x>1.9) && (x<2.1)) || ((x>3.9) && (x<4.1))) { return Math.cos((b - 10 * a) * 0.01 * Math.PI + 3.432 * x); }
else {return undefined;}]]>
</function>
<function bar="true" color="yellow" label="Other 2">
<![CDATA[if (((x>1.9) && (x<2.1)) || ((x>3.9) && (x<4.1))) { return Math.cos((b + 7 * a) * 0.01 * Math.PI + 3.432 * x); }
else {return undefined;}]]>
</function>
</functions>
<plot>
<xrange><min>1</min><max>5</max></xrange>
<num_points>5</num_points>
<xticks>0, 0.5, 6</xticks>
<yticks>-1.5, 0.1, 1.5</yticks>
<xticks_names>
<![CDATA[
{
"1.5": "Single", "4.5": "Married"
}
]]>
</xticks_names>
<yticks_names>
<![CDATA[
{
"-1.0": "-100%", "-0.5": "-50%", "0.0": "0%", "0.5": "50%", "1.0": "100%"
}
]]>
</yticks_names>
<bar_width>0.4</bar_width>
</plot>
</configuration>
</graphical_slider_tool>
</vertical>

40
docs/source/gst_example_dynamic_labels.xml
View File

@@ -1,40 +0,0 @@
<vertical>
<graphical_slider_tool>
<render>
<h1>Graphic slider tool: Dynamic labels.</h1>
<p>There are two kinds of dynamic lables.
1) Dynamic changing values in graph legends.
2) Dynamic labels, which coordinates depend on parameters </p>
<p>a: <slider var="a"/></p>
<br/>
<p>b: <slider var="b"/></p>
<br/><br/>
<plot style="width:400px; height:400px;"/>
</render>
<configuration>
<parameters>
<param var="a" min="-10" max="10" step="1" initial="0" />
<param var="b" min="0" max="10" step="0.5" initial="5" />
</parameters>
<functions>
<function label="Value of a is: dyn_val_1">a * x + b</function>
<!-- dynamic values in legend -->
<function output="plot_label" el_id="dyn_val_1">a</function>
</functions>
<plot>
<xrange><min>0</min><max>30</max></xrange>
<num_points>10</num_points>
<xticks>0, 6, 30</xticks>
<yticks>-9, 1, 9</yticks>
<!-- custom labels with coordinates as any function of parameter -->
<moving_label text="Dynam_lbl 1" weight="bold">
<![CDATA[ {'x': 10, 'y': a};]]>
</moving_label>
<moving_label text="Dynam lbl 2" weight="bold">
<![CDATA[ {'x': -6, 'y': b};]]>
</moving_label>
</plot>
</configuration>
</graphical_slider_tool>
</vertical>

37
docs/source/gst_example_dynamic_range.xml
View File

@@ -1,37 +0,0 @@
<vertical>
<graphical_slider_tool>
<render>
<h2>Graphic slider tool: Dynamic range and implicit functions.</h2>
<p>You can make x range (not ticks of x axis) of functions to depend on
parameter value. This can be useful when function domain depends
on parameter.</p>
<p>Also implicit functons like circle can be plotted as 2 separate
functions of same color.</p>
<div style="height:50px;">
<slider var='a' style="width:400px;float:left;"/>
<textbox var='a' style="float:left;width:60px;margin-left:15px;"/>
</div>
<plot style="margin-top:15px;margin-bottom:15px;"/>
</render>
<configuration>
<parameters>
<param var="a" min="5" max="25" step="0.5" initial="12.5" />
</parameters>
<functions>
<function color="red">Math.sqrt(a * a - x * x)</function>
<function color="red">-Math.sqrt(a * a - x * x)</function>
</functions>
<plot>
<xrange>
<!-- dynamic range -->
<min>-a</min>
<max>a</max>
</xrange>
<num_points>1000</num_points>
<xticks>-30, 6, 30</xticks>
<yticks>-30, 6, 30</yticks>
</plot>
</configuration>
</graphical_slider_tool>
</vertical>

40
docs/source/gst_example_html_element_output.xml
View File

@@ -1,40 +0,0 @@
<vertical>
<graphical_slider_tool>
<render>
<h2>Graphic slider tool: Output to DOM element.</h2>
<p>a + b = <span id="answer_span_1"></span></p>
<div style="clear:both">
<p style="float:left;margin-right:10px;">a</p>
<slider var='a' style="width:400px;float:left;"/>
<textbox var='a' style="width:50px;float:left;margin-left:15px;"/>
</div>
<div style="clear:both">
<p style="float:left;margin-right:10px;">b</p>
<slider var='b' style="width:400px;float:left;"/>
<textbox var='b' style="width:50px;float:left;margin-left:15px;"/>
</div>
<br/><br/><br/>
<plot/>
</render>
<configuration>
<parameters>
<param var="a" min="-10.0" max="10.0" step="0.1" initial="0" />
<param var="b" min="-10.0" max="10.0" step="0.1" initial="0" />
</parameters>
<functions>
<function output="element" el_id="answer_span_1">
function add(a, b, precision) {
var x = Math.pow(10, precision || 2);
return (Math.round(a * x) + Math.round(b * x)) / x;
}
return add(a, b, 5);
</function>
</functions>
</configuration>
</graphical_slider_tool>
</vertical>

91
docs/source/gst_example_with_documentation.xml
View File

@@ -1,91 +0,0 @@
<vertical>
<graphical_slider_tool>
<render>
<h2>Graphic slider tool: full example.</h2>
<p>
A simple equation
\(
y_1 = 10 \times b \times \frac{sin(a \times x) \times sin(b \times x)}{cos(b \times x) + 10}
\)
can be plotted.
</p>
<!-- make text and input or slider at the same line -->
<div>
<p style="float:left;"> Currently \(a\) is</p>
<!-- readonly input for a -->
<span id="a_readonly" style="width:50px; float:left; margin-left:10px;"/>
</div>
<!-- clear:left will make next text to begin from new line -->
<p style="clear:left"> This one
\(
y_2 = sin(a \times x)
\)
will be overlayed on top.
</p>
<div>
<p style="float:left;">Currently \(b\) is </p>
<textbox var="b" style="width:50px; float:left; margin-left:10px;"/>
</div>
<div style="clear:left;">
<p style="float:left;">To change \(a\) use:</p>
<slider var="a" style="width:400px;float:left;margin-left:10px;"/>
</div>
<div style="clear:left;">
<p style="float:left;">To change \(b\) use:</p>
<slider var="b" style="width:400px;float:left;margin-left:10px;"/>
</div>
<plot style='clear:left;width:600px;padding-top:15px;padding-bottom:20px;'/>
<div style="clear:left;height:50px;">
<p style="float:left;">Second input for b:</p>
<!-- editable input for b -->
<textbox var="b" style="color:red;width:60px;float:left;margin-left:10px;"/>
</div >
</render>
<configuration>
<parameters>
<param var="a" min="90" max="120" step="10" initial="100" />
<param var="b" min="120" max="200" step="2.3" initial="120" />
</parameters>
<functions>
<function color="#0000FF" line="false" dot="true" label="\(y_1\)">
return 10.0 * b * Math.sin(a * x) * Math.sin(b * x) / (Math.cos(b * x) + 10);
</function>
<function color="red" line="true" dot="false" label="\(y_2\)">
<!-- works w/o return, if function is single line -->
Math.sin(a * x);
</function>
<function color="#FFFF00" line="false" dot="false" label="unknown">
function helperFunc(c1) {
return c1 * c1 - a;
}
return helperFunc(x + 10 * a * b) + Math.sin(a - x);
</function>
<function output="element" el_id="a_readonly">a</function>
</functions>
<plot>
<xrange>
<min>return 0;</min>
<!-- works w/o return -->
<max>30</max>
</xrange>
<num_points>120</num_points>
<xticks>0, 3, 30</xticks>
<yticks>-1.5, 1.5, 13.5</yticks>
<xunits>\(cm\)</xunits>
<yunits>\(m\)</yunits>
</plot>
</configuration>
</graphical_slider_tool>
</vertical>

9
docs/source/xml_formats.rst
View File

@@ -1,9 +0,0 @@
XML formats of Inputtypes and Xmodule
=====================================
Contents:
.. toctree::
:maxdepth: 2
graphical_slider_tool.rst
drag_and_drop_input.rst

31
rakefile
View File

@@ -487,6 +487,7 @@ task :autodeploy_properties do
end
end
# --- Develop documentation ---
desc "Invoke sphinx 'make build' to generate docs."
task :builddocs do
Dir.chdir('docs') do
@@ -513,3 +514,33 @@ desc "Build docs and show them in browser"
task :doc => :builddocs do
Rake::Task["showdocs"].invoke
end
# --- Develop documentation ---
# --- Public documentation ---
desc "Invoke sphinx 'make build' to generate docs."
task :buildpubdocs do
Dir.chdir('doc/public') do
sh('make html')
end
end
desc "Show docs in browser (mac and ubuntu)."
task :showpubdocs do
Dir.chdir('doc/public/build/html') do
if RUBY_PLATFORM.include? 'darwin' # mac os
sh('open index.html')
elsif RUBY_PLATFORM.include? 'linux' # make more ubuntu specific?
sh('sensible-browser index.html') # ubuntu
else
raise "\nUndefined how to run browser on your machine.
Please use 'rake showpubdocs' and then manually open
'mitx/doc/public/build/html/index.html."
end
end
end
desc "Build docs and show them in browser"
task :pubdoc => :buildpubdocs do
Rake::Task["showpubdocs"].invoke
end
# --- Public documentation ---