-
Notifications
You must be signed in to change notification settings - Fork 1
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.
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.
<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