Meclib tutorial: Interactive graphical input

Back to My first Meclib question

Objective: Let the student specify the center of gravity in the sketch and give feedback on how close it is.

Setup of Interactive Graphics

So far we have used the non-interactive version of Meclib graphics. Now we are going to change that. The required steps are:

• Modify the JSXGraph block
• Add and configure the hidden input fields for communication between Meclib/JSXGraph and STACK
• Add a "crosshair" object for interactive indication of a point on the sketch
• Add instructions to the question text
• Add feedback

Question variables

• Add the "crosshair" interactive object, which the student can use to specify the location of the CG.
• Store the object number of the crosshair (index of the definition in the list) for later reference in ic.
• Provide the reference value for the CG position (variable CG).

initdata: [
  [ "grid", "","", -1,aa+1,-1,bb+1, 40 ],
  [ "crosshair", "", [0, bb], [0,0], [1,1], [2,2] ],
  [ "polygon", "", pA, pB, pC ],
  [ "label", "\\(a\\)", (pB+pC)/2 +[ 0,-0.4] ],
  [ "label", "\\(b\\)", (pA+pC)/2 +[0.2,0] ],
  [ "label", "\\(c\\)", (pA+pB)/2 +[-0.4,0.4] ]
];
init: stackjson_stringify(initdata);
ic: 2;
CG: [2/3*aa, 1/3*bb];

Question text

• Replace the JSXGraph block with the interactive version found in Meclib Question Setup. This defines two hidden input fields.

<p hidden>[[input:objects]] [[validation:objects]]</p>
<p hidden>[[input:names]] [[validation:names]] </p>
<div style="float:right">
[[jsxgraph width='500px' height='400px' input-ref-objects="stateRef" input-ref-names="fbd_names" ]]
var mode  = "STACK";
const initstring = {#init#};
const centeredLabelStyle = {size:0, showInfobox:false, label:{offset:[-6,0], 
  anchorX:'left', anchorY:'middle'}};
// End of STACK header
[[include src="https://raw.githubusercontent.com/mkraska/meclib/main/imeclib.js" /]]
[[/jsxgraph]]</div>

• Add the instructions for graphical input and request a feedback tree at the end of the question text:

<p>Indicate the center of gravity using the blue crosshair.</p>
<p>[[feedback:CG]]</p>

• Press Verify the question text and update the form

Input objects (Stores the state of the graphics, is initialized using init and is modified by interactive input)

• Input type: String
• Model answer: tans
• Students must verify: No
• Show validation: No

Input names (conveys algebraic data for feedback generation)

• Input type: algebraic
• Model answer: []
• Forbid floats: No
• Students must verify: No
• Show validation: No

Potential response tree CG

• PRT feedback style: Compact
• Feedback variables: Here we extract the position of the crosshair and compute the distance between position and correct CG.

S_CG: names[ic];
vec: CG-S_CG;
dist: sqrt(vec[1]^2+vec[2]^2);

• Node 1:
  • Answer test: NumAbsolute
  • SAns: dist
  • TAns: 0
  • Test options: 0.05 (half of the grid snap distance, which defaults to 0.1 in grid units)
  • true feedback: Set format to HTML. Add text: The distance to the actual CG is {@dispdp(dist,2)@} grid units.
  • false feedback: Set format to HTML. Add text: The distance to the actual CG is {@dispdp(dist,2)@} grid units. Must be smaller than 0.05.

Preview

• Press Save changes and continue editing
• Press Preview

• Drag the crosshair around with the mouse and see the point coordinates.

• Press Check

Note that we did not define the model answer for objects yet. Therefore, pressing Fill in the correct responses will fail. We are going to add this now.

Model Answer for Graphical Input

The model answer is just the same as the init variable, just with the crosshair at the correct position.

Question variables

• Add the definition of tans by copying the list of objects, replacing the coordinate entry in the crosshair definition list and convert to string format.

tansdata: initdata;
tansdata[ic][3]: CG;
tans: stackjson_stringify(tansdata);

Here we show the complete contents of the question variables:

Ha: sqrt(a^2+b^2);

[aa,bb]: rand([ [1,4], [1,3], [2,4], [2,3], [2,2], [3,3], [3,2], [3,1], [4,2], [4,1] ]); 
H: sqrt(aa^2+bb^2)*L; Hnum: float(sqrt(aa^2+bb^2));
pB: [0,0]; pC: [aa,0]; pA: [aa,bb];
initdata: [
  [ "grid", "","", -1,aa+1,-1,bb+1, 40 ],
  [ "crosshair", "", [0, bb], [0,0], [1,1], [2,2] ],
  [ "polygon", "", pA, pB, pC ],
  [ "label", "\\(a\\)", (pB+pC)/2 +[ 0,-0.4] ],
  [ "label", "\\(b\\)", (pA+pC)/2 +[0.2,0] ],
  [ "label", "\\(c\\)", (pA+pB)/2 +[-0.4,0.4] ]
];
init: stackjson_stringify(initdata);
ic: 2;
CG: [2/3*aa, 1/3*bb];

tansdata: initdata;
tansdata[ic][3]: CG;
tans: stackjson_stringify(tansdata);

stack_include("https://raw.githubusercontent.com/mkraska/meclib/main/Maxima/fb_value_EN.mac");

Preview

• Press Save changes and continue editing
• Press Preview
• Press Fill in the correct responses
• Press Check

Back to My first Meclib question