<?xml version="1.0" encoding="UTF-8"?>
<quiz>
  <question type="stack">
    <name>
      <text><![CDATA[2. "Binding", what does it mean?]]></text>
    </name>
    <questiontext format="html">
      <text><![CDATA[<p>"Binding", in the context of STACK + JSXGraph integration, means connecting the value of a STACK input field to some element in the graph. If the element gets moved the input field's value is also changed. In the simplest example if you drag a slider from value 1 to value 2 the bound input will be set to 2. This is obviously important when you wish to use that part of the graph as an input.  Also, as the VLE in the background stores the values of the input fields we can start remembering state. E.g. f you dragged the slider to value 2 and left the page then the binding logic should be able to ensure that the slider gets placed back to that same value if you return to the page.</p><p>As an simplified example of this we now build a graph with a line segment which has two draggable end points one of which is bound and one which is not. Drag the two points around and then press 'Check'.  When the checking process reloads the page you should see the bound one staying where you dragged it to and the other to return into its initial position. You should also see that the STACK logic side received the position of the bound point.</p><pre style="line-height:0.9;">[[escape value="[[jsxgraph input-ref-ans1='ans1Ref']]"/]]
var board = JXG.JSXGraph.initBoard(divid, {boundingbox: [-5, 5, 5, -5],showNavigation:false});
var p1 = board.create('point', [-3,3], {name:'Bound',size:4});
var p2 = board.create('point', [3,-3], {name:'Free',size:4});
var line = board.create('line', [p1,p2], {straightFirst:false, straightLast:false});

/* There exists a simple convenience method for binding inputs to points
    It just needs an input reference, defined as a parameter of the jsxgraph-block
    and a primitive object of the type of the binding, in this case a point. */
stack_jxg.bind_point(ans1Ref, p1);

/* Always call board.update() at the end if you have bindings. */
board.update();

/* In this example we hide the input as we are not yet ready to talk about two-way binding. */
document.getElementById(ans1Ref).style.display = 'none';
[[escape value="[[/jsxgraph]]"/]]</pre>

[[jsxgraph input-ref-ans1='ans1Ref']]
var board = JXG.JSXGraph.initBoard(divid, {boundingbox: [-5, 5, 5, -5], showNavigation:false});
var p1 = board.create('point', [-3,3], {name:'Bound',size:4});
var p2 = board.create('point', [3,-3], {name:'Free',size:4});
var line = board.create('line', [p1,p2], {straightFirst:false, straightLast:false});

/* There exists a simple convenience method for binding inputs to points
   It just needs an input reference, defined as a parameter of the jsxgraph-block
   and a primitive object of the type of the binding, in this case a point. */
stack_jxg.bind_point(ans1Ref, p1);

/* Always call board.update() at the end if you have bindings, as they may move things around. */
board.update();

/* In this example we hide the input as we are not yet ready to talk about two-way binding. */
document.getElementById(ans1Ref).style.display = 'none';
[[/jsxgraph]]

<p><i>As a special test case here, try moving the bound one out of the box. For that to work the binding needs to track not only direct actions affecting the point but also changes caused by other actions. Those needing to build their own binding logic for more complex things should note this. Simply tracking the point may not be enough.</i></p><p>[[input:ans1]] [[validation:ans1]]</p>]]></text>
    </questiontext>
    <generalfeedback format="moodle_auto_format">
      <text/>
    </generalfeedback>
    <defaultgrade>1</defaultgrade>
    <penalty>0.1</penalty>
    <hidden>0</hidden>
    <idnumber/>
    <stackversion>
      <text>2020040300</text>
    </stackversion>
    <questionvariables>
      <text/>
    </questionvariables>
    <specificfeedback format="html">
      <text>[[feedback:prt1]]</text>
    </specificfeedback>
    <questionnote format="html">
      <text/>
    </questionnote>
    <questiondescription format="html">
      <text/>
    </questiondescription>
    <questionsimplify>1</questionsimplify>
    <assumepositive>0</assumepositive>
    <assumereal>0</assumereal>
    <prtcorrect format="html">
      <text><![CDATA[<span style="font-size: 1.5em; color:green;"><i class="fa fa-check"></i></span> Correct answer, well done.]]></text>
    </prtcorrect>
    <prtpartiallycorrect format="html">
      <text><![CDATA[<span style="font-size: 1.5em; color:orange;"><i class="fa fa-adjust"></i></span> Your answer is partially correct.]]></text>
    </prtpartiallycorrect>
    <prtincorrect format="html">
      <text><![CDATA[<span style="font-size: 1.5em; color:red;"><i class="fa fa-times"></i></span> Incorrect answer.]]></text>
    </prtincorrect>
    <decimals>.</decimals>
    <scientificnotation>*10</scientificnotation>
    <multiplicationsign>dot</multiplicationsign>
    <sqrtsign>1</sqrtsign>
    <complexno>i</complexno>
    <inversetrig>cos-1</inversetrig>
    <logicsymbol>lang</logicsymbol>
    <matrixparens>[</matrixparens>
    <isbroken>0</isbroken>
    <variantsselectionseed/>
    <input>
      <name>ans1</name>
      <type>algebraic</type>
      <tans>[1,1]</tans>
      <boxsize>15</boxsize>
      <strictsyntax>1</strictsyntax>
      <insertstars>0</insertstars>
      <syntaxhint/>
      <syntaxattribute>0</syntaxattribute>
      <forbidwords/>
      <allowwords/>
      <forbidfloat>0</forbidfloat>
      <requirelowestterms>0</requirelowestterms>
      <checkanswertype>0</checkanswertype>
      <mustverify>0</mustverify>
      <showvalidation>0</showvalidation>
      <options/>
    </input>
    <prt>
      <name>prt1</name>
      <value>1.0000000</value>
      <autosimplify>1</autosimplify>
      <feedbackstyle>1</feedbackstyle>
      <feedbackvariables>
        <text/>
      </feedbackvariables>
      <node>
        <name>0</name>
        <description/>
        <answertest>AlgEquiv</answertest>
        <sans>ans1</sans>
        <tans>ans1</tans>
        <testoptions/>
        <quiet>0</quiet>
        <truescoremode>=</truescoremode>
        <truescore>1.0000000</truescore>
        <truepenalty/>
        <truenextnode>-1</truenextnode>
        <trueanswernote>prt1-1-T</trueanswernote>
        <truefeedback format="html">
          <text>The value of the input is {#ans1#}</text>
        </truefeedback>
        <falsescoremode>=</falsescoremode>
        <falsescore>0.0000000</falsescore>
        <falsepenalty/>
        <falsenextnode>-1</falsenextnode>
        <falseanswernote>prt1-1-F</falseanswernote>
        <falsefeedback format="html">
          <text/>
        </falsefeedback>
      </node>
    </prt>
  </question>
</quiz>
