-
Notifications
You must be signed in to change notification settings - Fork 865
Writing Exercises: Formatting
At any point in your problem intros, questions, solutions, or hints you can reference any variable that you've previously defined using the same syntax as before. Within a .vars block, the <var>...</var> tag is used to define variables; outside of a .vars block, the tag is used to refer to previously-defined variables. For example, if you wanted to mention a vehicle and speed in your problem you can do:
<p>Alice traveled by <var>VEHICLE1</var> at an average speed of <var>SPEED1</var> miles per hour.</p>And the variables will be substituted as you would expect them to be.
While displaying single variables can be useful, it's often that you'll want to display entire formulas using mathematical notation. You can define your mathematical notation using LaTeX. The full list of available commands can be found here:
A full book explaining all the commands and how to write Math using LaTeX can be found here:
Inside the Khan Exercise markup we use a <code>...</code> block to delineate where a formula will go. For example the following code block will be hidden and replaced with a MathJax-rendered formula.
<code>x^2</code>Naturally you can place <var>...</var> blocks inside of code blocks, giving you a nicely-rendered final result, for example:
<code><var>A</var>x + <var>B</var></code>Additionally you can feel free to provide class names on the code block itself. Those classes will be moved to a span and will be wrapped around the final MathJax-generated formula. For example:
<code class="hint_orange"><var>A</var>x</code> <code class="hint_blue">+ <var>B</var></code>You can feel free to put formulas in your problems, questions, hints, solution, and even multiple choices.
In addition to simply changing numbers or names between repeated iterations of the same word problems, it is also good practice to change words, phrases, sentences, or even paragraphs. Using spin allows you to denote alternate text for any of these using a very simple syntax.
Simply enclose the text you want to denote alternate text for in curly brackets, {...}, and separate alternate text with the | character. Note that you can have more than one alternate version using multiple |, like so:
<div class="spin">I {am going|will go|want to go} to the store.</div>The above will randomly output one of the following sentences:
I am going to the store.
I will go to the store.
I want to go to the store.
You can even specify alternate text inside your alternate text, ad infinitum:
<p class="spin">Julian really likes {playing {chess|{ping pong|table tennis} in his basement}|dancing}.</p>Which would choose between the following sentences:
Julian really likes playing chess.
Julian really likes playing ping pong in his basement.
Julian really likes playing table tennis in his basement.
Julian really likes dancing.
You can add irrelevant information which will only be shown some of the time like so {irrelevent information|}.
Note that you are able to use <var>...</var> blocks alongside spin as you would do so normally.
Finally, if you want to assign the value of a "spin" to a variable you can do it with the spin() function like this:
<var id="VAR_NAME">spin( "Marc{ia|os} is awesome!" )</var>We are currently transitioning to the new "graphie" library, which has some documentation on the Graphing API page.
For those who are curious, info about the old "graph" library is here.
The exercise framework also includes some basic templating support as well.
To use conditional templating, attach appropriate data-if, data-else-if, and/or data-else attributes to your blocks like so:
<p data-if="NUM === 2">The number is 2!</p>
<p data-else-if="NUM === 1">The number is 1!</p>
<p data-else>The number isn't 1 or 2!</p>If the condition included with a data-if tag evaluates to true, then the element will be included in the DOM; otherwise, the element will be removed before the page is rendered.
Elements with data-else-if or data-else attributes must have older (ie, preceding) siblings with data-if or data-else-if attributes; basically, a data-else-if or data-else needs to be be preceeded immediately by a data-if or a data-else-if for the construct to make any sense.
You can also nest data-if blocks and do more interesting things.
<div data-if="NUM1 === 2">
<div data-if="NUM2 === 2">Both numbers are 2!</div>
<div data-else>The first number is 2, but the second is not.</div>
</div>Looping over arrays and objects is possible with the templating system, the syntax you would use is:
<div data-each="someArray" style="width: 10px; height: 10px; margin: 2px; background: blue;"></div>The above will create a number of squares on the page equal to the number of items in the array named someArray.
If you want more information about the contents of an array you can use:
<div data-each="someArray as value"><var>value</var></div><div data-each="someArray as key, value"><var>key</var>: <var>value</var></div>This will create a number of divs that hold object values and key value pairs, respectively.
If you just want to loop a certain number of times without iterating over some array, you can use something like this to print "Hi!" N times:
<div data-each="N times">Hi!</div>If you need a counter, you'd use something like this:
<div data-each="N times as I">
I = <var>I</var>
</div><div data-unwrap>
<p>If this unwrapped div were in a hints block, then this paragraph would appear as the first hint.</p>
<p>This would be the second hint.</p>
<p>Unwrapping is handy in conjunction with data-if. For example, you might have a conditional to decide which hints to show, but you don't want to add a data-if to every single hint.</p>
</div>Back to Writing Exercises: Home