Cool Exercise Secrets

Setting multiple variables at once (destructuring assignment)

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.

data-weight

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.

Running Javascript

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.

Adding definitions for terms

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.

Example:

<p>
   This
   <a href="#" class="show-definition" data-definition="hyper-toroidal">hyper-toroidal</a>
   circle is very 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.