-
Notifications
You must be signed in to change notification settings - Fork 1
Cool Exercise Secrets
Inside <var> tags, you can set more than one variable at once, by putting commas between them, and having an array inside the tag. For example:
<var id="A,B,C">[1, 2, 3]</var>
will set A to 1, B to 2, and C to 3.
If you add a data-weight variable inside your problem types, you can choose how often a certain problem type is chosen.
Example:
<div class="problems">
<div id="cool-problem" data-weight="14.7">
...
<div id="not-as-cool-problem" data-weight="1">
...
</div>
Here, cool-problem will be chosen 14.7 times as often as not-as-cool-problem will.
If you need to run some arbitrary javascript inside hints, just enclose it in a graphie div! Make sure you include graphie for your exercise, though.
Example:
<div class="graphie">
alert("Hello, user!");
</div>
This would open an alert when the user reaches that hint. Don't actually use alerts though.
Hints should generally be as concise as necessary to communicate the key concept. Sometimes, however it's nice to provide a little more detail to curious students. In this case, you can add a "subhint" that's not normally shown, but if the student is interested or needs more help, he/she can expand the subhint to get more detail. To see what it looks like, check out the second hint in Graphing parabolas 2.
To add a subhint, first make sure you include the subhints module in the data-require attribute of the html element of the exercise html file.
Example:
<html data-require="math subhints">
.
.
.
<p>
Next, determine if the program will terminate
[<a href="#" class="show-subhint" data-subhint="halting">Show me how</a>]
</p>
<div class="subhint" id="halting">
Here you'd explain how to solve the halting problem.
</div>
Now when users see this hint, there will be a "Show me how" link they can click on to expand a more detailed explanation. They will also be able to click again to hide the explanation.
If there is a term in an exercise that the user might not know, but you don't want to add an entire hint or paragraph for explaining it, you can use a definition tag. You must first put the subhints module in the data-require attribute of the html element of the page for definitions to work.
Example:
<html data-require="math subhints">
.
.
.
<p>
This
<a href="#" class="show-definition" data-definition="hyper-toroidal">hyper-toroidal</a>
circle is unique
</p>
<div class="definition" id="hyper-toroidal">
I don't actually know what this means, but it sounds pretty cool!
</div>
Here, if the user hovers over the word hyper-toroidal, they will see a definition pop up.