Skip to content
This repository has been archived by the owner on May 11, 2021. It is now read-only.

Cool Exercise Secrets

Jump to bottom
beneater edited this page Sep 25, 2012 · 9 revisions

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 sub-hints

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.

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. 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.

Clone this wiki locally