You're not logged in
Working with MUMIE as author
Working with MUMIE as teacher
Using MUMIE via plugin in local LMS
FAQ
CindyJS is a framework to create interactive content.
MUMIE offers to embed CindyJS in your content, or create standalone CindyJS content in a simplified manner.
If you created a visualisation with the program Cinderella, it is straight forward to incorporate the corresponding HTML into your tex-file in webMiau.
Example (in WebMiau):
\begin{cindyJS}[default]{CSCanvas} \cindyObject[width: 500, height: 500, axes: false]{{geometry: [ {name: "A", type: "Free", pos: [4, -2,1], color: [1.0, 0.0, 0.0], labeled: true}, {name: "B", type: "Free", pos: [4, 2,1], color: [1.0, 0.0, 0.0], labeled: true}, {name: "C", type: "Free", pos: [0, 0.5, 1], color: [1.0, 0.0, 0.0], labeled: true}, {name: "S", type: "Free", pos: [1,1 , 1], color: [1.0, 1.0, 0.0], labeled: true} ]}} \begin{cindyscript}{csinit} S.xy=(A.xy+B.xy+C.xy)/3; \end{cindyscript} \begin{cindyscript}{csmove} S.xy=(A.xy+B.xy+C.xy)/3; \end{cindyscript} \end{cindyJS}
The whole component is placed in an environment \begin{cindyJS}[<templateName>]{<canvasId>} ... \end{cindyJS}.
The first parameter <templateName> is optional and defaults to the template default which consists of an empty canvas with a grey background. The second parameter is the ID of the canvas. If you use several Cindy-visualizations in one document, their IDs have to be distinct.
Within the cindyJS-environment, the following command and environment are available (more details are below):
\cindyObject: Here you can add content to your visualization.cindyscript: Each environment contains a cindyscript for your visualization.
Currently, there is only the template default available, which sets the following attributes:
defaultAppearance: { dimDependent: 0.7, fontFamily: 'sans-serif', lineSize: 1, pointSize: 5.0, textsize: 12.0,},angleUnit: '°',csconsole: false,
Furthermore, it sets width and height to 500px, and the minimally visible ranges for x- and y-coordinates to the range from -10 to 10.
The command \cindyObject[<canvasOptions>]{<content>} allows to add content to your visualization like geometric objects. With the optional argument <canvasOptions>, you can change the appearance of the canvas (like width, height, or background, showing/hiding the axes).
The mandatory argument <content> is mainly for providing the geometric objects for your visualization.
The cindyscript-environments replace the cindyscripts that you usually would put inside your HTML-document.
The syntax is \begin{cindyscript}{<scriptID>} ... \end{cindyscript} where <scriptID> is the ID of the script, like csinit, csdraw etc. (see CindyJS documentation).
Within the environment you write your cindyscript commands as you would do in HTML.
When you create visualizations with Cinderella, and export it as HTML, you can easily transform this HTML to a cindy component in your MUMIE-article.
Assume the following HTML-output:
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869 <!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>Construction.cdy</title> <style type="text/css"> * { margin: 0px; padding: 0px; } #CSConsole { background-color: #FAFAFA; border-top: 1px solid #333333; bottom: 0px; height: 200px; overflow-y: scroll; position: fixed; width: 100%; } </style> <link rel="stylesheet" href="https://cindyjs.org/dist/v0.8/CindyJS.css"> <script type="text/javascript" src="https://cindyjs.org/dist/v0.8/Cindy.js"></script><script id="csinit" type="text/x-cindyscript">//Script (CindyScript)S.xy = (A.xy+B.xy+C.xy)/3;; </script><script id="csmove" type="text/x-cindyscript">//Script (CindyScript)S.xy = (A.xy+B.xy+C.xy)/3;; </script> <script type="text/javascript">var cdy = CindyJS({ scripts: "cs*", defaultAppearance: { dimDependent: 0.7, fontFamily: "sans-serif", lineSize: 1, pointSize: 5.0, textsize: 12.0 }, angleUnit: "°", geometry: [ {name: "A", type: "Free", pos: [2.08, -2.72, 4.0], color: [1.0, 0.0, 0.0], labeled: true}, {name: "B", type: "Free", pos: [4.0, -3.5, 0.76], color: [1.0, 0.0, 0.0], labeled: true}, {name: "C", type: "Free", pos: [4.0, 0.7, 0.5], color: [1.0, 0.0, 0.0], labeled: true}, {name: "S", type: "Free", pos: [4.0, -1.1, 0.88], color: [1.0, 1.0, 0.0], labeled: true} ], ports: [{ id: "CSCanvas", width: 600, height: 560, transform: [{visibleRect: [-9.06, 9.34, 10.06, -10.02]}], background: "rgb(168,176,192)" }], csconsole: false, cinderella: {build: 2039, version: [3, 0, 2039]}}); </script></head><body> <div id="CSCanvas"></div></body></html>
This shows three movable red points A,B and C, as well as a yellow point S which always marks the center of gravity of the three points.
For having this applet inside MUMIE, start by writing the following snippet in your MUMIE article in WebMiau:
12345 \begin{cindyJS}{CSCanvas}\cindyObject[..]{..} \end{cindyJS}
Copy the part width: 600, height: 560, transform: [{visibleRect: [-9.06, 9.34, 10.06, -10.02]}],
background: "rgb(168,176,192)"
into the optional argument of the command \cindyObject, and copy the part geometry: [.....] into the mandatory argument of the command \cindyObject. As our default template contains axes, add axes: false to the optional argument.
Finally, for the two cindyScript-environments of the HTML write two environments \begin{cindyscript}{<scriptID>}...\end{cindyscript}, copy the ids csinit and csmove, respectively, for the argument <scriptID>, and copy the content of the scripts into the body of the two environments.
Your Cindy component inside MUMIE is ready!
Your result should read something like the following:
123456789101112131415161718 \begin{cindyJS}{CSCanvas} \cindyObject[width: 600, height: 560, transform: [{visibleRect: [-9.06, 9.34, 10.06, -10.02]}], background: "rgb(168,176,192), axes: false]{geometry: [ {name: "A", type: "Free", pos: [2.08, -2.72, 4.0], color: [1.0, 0.0, 0.0], labeled: true}, {name: "B", type: "Free", pos: [4.0, -3.5, 0.76], color: [1.0, 0.0, 0.0], labeled: true}, {name: "C", type: "Free", pos: [4.0, 0.7, 0.5], color: [1.0, 0.0, 0.0], labeled: true}, {name: "S", type: "Free", pos: [4.0, -1.1, 0.88], color: [1.0, 1.0, 0.0], labeled: true} ]} \begin{cindyscript}{csinit} S.xy = (A.xy+B.xy+C.xy)/3; \end{cindyscript} \begin{cindyscript}{csmove} S.xy = (A.xy+B.xy+C.xy)/3; \end{cindyscript} \end{cindyJS}
Similar to JSX-visualizations, you can also use Cindy in combination with MUMIE problems to enhance your exercise graphically, or to create graphical exercises.
The syntax of the Cindy component is the same as when used in articles.
However, there are some additional commands so that the component can interact with the problem.
Contrary to JSX visualizations, Cindy components can not be displayed inside the problem.
In addition to the commands and environments above, there is also the environment \begin{initialAssignments}...\end{initialAssignments}.
This environment allows for assignment of Cindy variables, and you can us values of variables from the problem there. E.g.
\begin{initialAssignments}a=problem{x0};b=a+question{1}{t0};\end{initialAssignments}
would assign to a variable a in Cindy the value of the variable x0 that is defined in the problem environment. The variable b gets as value the sum of a and the value of the variable t0 that is defined in the first question of the problem.
First question here refers to the first question environment in your tex-document, regardless whether you are using randomquestionpools or not.
Also assignments of the form A.x=question{1}{t0} (or similar) are allowed, where A is a point in Cindy.
Take into account that the assignments within that environment will be executed before the csinit-script.
For passing a value as answer to the problem, one uses the command \answer{expression}{questionnr,answernr} (see example below). expression has to be an expression that can be evaluated by Cindy's evalcs-function.
In the problem, the answer-type of the specific answer has to be set to graphics.number or graphics.function.
The correction of answers of type graphics.number is done in the same way as for input.number, and the correction of answers of type graphics.function is done in the same way as for input.function. The only difference is that the student's solution is not given by input, but is passed to the problem from the Cindy component.
As in the \question-command, the value of questionnr in \answer{expression}{questionnr,answernr} is the number of the question in your tex-document, regardless whether you are using randomquestionpools or not.
When used with problems, on pressing the Save button, also the state of the Cindy components is stored, so that it can be reloaded with the same appearance as before.
For this, the last values of the geometric components are saved, and restored before initialization.
Furthermore, in your assignments listed in \begin{initialAssignments}...\end{initialAssignments}, the last values of the objects on the left hand side of the assignments will be restored instead of using the given assignments.
You should keep that logic in mind, when creating your graphical exercises.
We illustrate the above with a simple example (complete tex-document):
1234567891011121314151617181920212223242526272829303132333435363738 \begin{cindyJS}{CSCanvas} \cindyObject[axes: true]{{geometry: [ {name: "A", type: "Free", pos: [4, -2,1], color: [1.0, 0.0, 0.0], labeled: true}, ]}} \begin{initialAssignments} A.x=question{1}{rand}; \end{initialAssignments} \begin{cindyscript}{csinit} sign(x):= if(x>0, 1,if(x<0,-1,0)); \end{cindyscript}{csinit} \answer{sign(A.x)}{1,1} % value of expression will be passed to question 1, answer 1 of the problem. \answer{sign(A.y)}{1,2} % value of expression will be passed to question 1, answer 2 of the problem. \end{cindyJS} \begin{problem} \begin{question} \begin{variables} \randint{rand}{1}{5} \function{sol}{1} \end{variables} \text{Move the point $A$ to the first quadrant.} \field{real} \begin{answer} % what is the sign of the x-coordinate of A? \type{graphics.number} % answer will be passed from Cindy \solution{sol} \end{answer} \begin{answer} % what is the sign of the y-coordinate of A? \type{graphics.number} % answer will be passed from Cindy \solution{sol} \end{answer} \explanation<a class="internal" href="/wiki/ans_1--0%5D-AND-%5Bans_2--0">ans_1 < 0] AND [ans_2 > 0</a>{Your point is in the second quadrant.} \explanation<a class="internal" href="/wiki/ans_1--0%5D-AND-%5Bans_2--0">ans_1 < 0] AND [ans_2 < 0</a>{Your point is in the third quadrant.} \explanation<a class="internal" href="/wiki/ans_1--0%5D-AND-%5Bans_2--0">ans_1 > 0] AND [ans_2 < 0</a>{Your point is in the forth quadrant.} \end{question}\end{problem}
\answer{sign(A.x)}{1,1} and \answer{sign(A.y)}{1,2}.A.x=...; inside the environment initialAssignments, the current value of A.x is stored in addition.A.x is set to its stored value, instead of the value of question{1}{rand}. Thirdly, the csinit-script is executed as it is.As a warning, assume that in the above example you change the lines
1234567 \begin{initialAssignments} A.x=question{1}{rand}; \end{initialAssignments} \begin{cindyscript}{csinit} sign(x):= if(x>0, 1,if(x<0,-1,0)); \end{cindyscript}{csinit}
to
12345678 \begin{initialAssignments} a=question{1}{rand}; \end{initialAssignments} \begin{cindyscript}{csinit} A.x=a; sign(x):= if(x>0, 1,if(x<0,-1,0)); \end{cindyscript}{csinit}
Initially, there is no difference to the original version. However, when pressing Save, apart from the properties of _A_ the value of _a_ is stored. But, the value of _a_ never changes, so when the page is reloaded, first the properties of _A_ are restored, then _a_ is set to its stored value (=initial value), and finally the csinit-script is executed and sets the x-coordinate of _A_ to this value of _a_.
So in this case, you would not obtain the geometric state that you had when the Save button was pressed.
Updated by andreas.maurischat@integral-learning.de, 12 days ago – 748bac1