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

Writing Exercises: Answer Types

Jump to bottom
smenks13 edited this page Nov 18, 2011 · 29 revisions

Answer Types

There are a few answer types available. You can specify what type of answer is expected by using the data-type attribute on the .solution element.

  • text

    It compares the answer strings literally; no numerical interpretation is done at all (e.g., 1.0 would not be marked correct if the answer was 1, even though they're numerically equal). The only text transformation is to strip leading and trailing whitespace before comparison.

    <p class="solution" data-type="text"><var>ANSWER</var></p>

  • radio (default if ul.choices present)

    If you want the user to pick an answer from a list, you can provide the possible choices that you want the user to select from, using an un-ordered list. You'll need to add an UL with a class of choices inside of your main problem container.

    <p class="solution"><code><var>A</var>x <var>BP + B</var></code></p>
<ul class="choices">
    <li><code><var>-1 * A</var>x <var>BP + B</var></code></li>
    <li><code><var>A</var>x <var>BN + (-1 * B)</var></code></li>
    <li><code><var>B</var>x <var>AP + A</var></code></li>
    <li><code><var>-1 * B</var>x <var>AN + (-1 * A)</var></code></li>
</ul>

    The above markup will generate a problem that has 5 possible choices to choose from, one of which is the valid solution. Note that when you use multiple choice formatting you can let the user pick from more-complicated answers (such as formulas).

    The framework also gives you the ability to provide more possible choices than what may actually be displayed. For example you could provide a total of 5 choices (1 solution + 4 other choices) but only show 3 of them (1 of which will always be the valid answer).

    <ul class="choices" data-show="3"> ... </ul>

    Additionally the framework provides a mechanism for supplying a "None of the above" choice as a viable option. All you would need to do is supply a data-none="true" attribute on your choices UL to enable it, like so:

    <ul class="choices" data-show="5" data-none="true"> ... </ul>

    In this example, 5 possible choices will be displayed - one of which will be the "None of the above" choice. It's possible that the valid solution will be hidden and that "None of the above" will be the correct answer.

  • list If your exercise involves asking the user something like an inequality, where you want the answer or part of the answer to be one of a list of options, you can have the answer come from a drop down menu.

    Here is an example of how this works:

        <p class="solution" data-type="multiple">
        <code>x</code>
        <span class="sol" data-type="list" data-choices="['', '&lt;', '&gt;', '&le;', '&ge;']">
        </span>
        <span class="sol" data-type="rational"><var>( D - B ) / ( A - C )</var></span></p>

    This produces drop down menu in the answer area with <, >, <= and >= options and then a free answer box with type rational. Thus, the list answer type takes in an array and outputs a drop down menu.

  • category (a type of radio)

    If your exercise involves asking the user to choose from the same set of choices displayed in the same order every time, supply a data-category="true" attribute. Note that you should supply the solution in the unordered list as well (Normal radio answers only have wrong answers in the unordered list.).

    <div class="solution">Acute</div>
<ul class="choices" data-category="true">
    <li>Acute</li>
    <li>Right</li>
    <li>Obtuse</li>
</ul>

  • decimal(decimal)

    Just like text except it compares numerical equality. With decimal, 1.0 is the same as 1 is the same as 1, but no other evaluation is done so fractions and the like don't work.

    <p class="solution" data-type="decimal">1.0</p>

  • rational

    Compares two fractions for equality. Under the hood, it converts both to decimals so the contents of p.solution should actually be a decimal version of the correct answer. You can accomplish this using var:

    <p class="solution" data-type="rational"><var>2/3</var></p>

    By default, answers must be reduced to be considered correct. (4/6 would not be a correct answer.) If you want to specifically allow unsimplified answers, add data-simplify="optional" to the element containing the solution.

  • radical

    Use this type if your answer involves a radical, like in the Simplifying Radicals exercise. Specify the coefficient and the part under the radical in separate span tags.

    <div class="solution" data-type="radical">
    <span><var>COEFFICIENT</var></span><span><var>RADICAL</var></span>
</div>

  • line

    Use this if the answer is a function, like 2(3x + 7)/5. Currently being developed, see the equation of a hyperbola for an example of use.

  • regex

    Just what it sounds like. Omit the delimiting slashes but include ^ and $ if appropriate. To match the four smilies :), ;), :P, ;P:

    <p class="solution" data-type="regex">^[:;][\)P]$</p>

  • multiple

    This special type allows you to have a composite of other answer forms as an answer. The "Equation of a line" exercise uses this to ask the user for the slope m and y-intercept b of a line:

    <div class="solution" data-type="multiple">
    <p><code>m</code> = <span class="sol" data-type="rational"><var>M</var></span></p>
    <p><code>b</code> = <span class="sol" data-type="rational"><var>B</var></span></p>
</div>

    The code inside the solution will be copied into the solution area and each .sol element will be interpreted as if it was its own answer. In this case, you'll get a form that asks for m and b and gives two separate text entry boxes. Since data-type="rational" was specified on each .sol element, each text box acts like a single rational answer.

    Answers are marked correct only if all of the parts are correct. Having a radio input as a part of an answer has not been tested. (You probably don't need more than one radio input, anyway.)

    Since multiple-type answers can vary wildly in what they expect from the user, the framework won't show the predefined "acceptable answers," unlike with most of the default answer types. Instead, you should define your own examples inside the solution block to help the user answer properly:

    <div class="solution" data-type="multiple">
    <p><code>m</code> = <span class="sol" data-type="rational"><var>M</var></span></p>
    <p><code>b</code> = <span class="sol" data-type="rational"><var>B</var></span></p>
    <p class="example"><code>m</code> = a <em>simplified proper</em> fraction, like <code>3/5</code></p>
    <p class="example"><code>b</code> = a <em>simplified proper</em> fraction, like <code>2/5</code></p>
</div>

  • set

    This special type permits one or more correct answers to be entered in any order. You provide a list of correct answers and indicate how many of them you want. If you provide more answers than inputs, the student can enter any subset. If you provide more inputs than answers, the student must leave some boxes blank.

    This example allows the user to provide two answers that can be entered in either order. In this case, the solutions to a quadratic equation:

    <div class="solution" data-type="set">
    <div class="set-sol"><var>A</var></div>
    <div class="set-sol"><var>B</var></div>
    <div class="input-format">
        <p><code>x = </code><span class="entry"></span> or</p>
        <p><code>x = </code><span class="entry"></span></p>
    </div>
    <p class="example">two integers like <code>6</code>
</div>

    The code consists of three sections: the set-sol elements, the input-format element, and the example elements. The set-sol elements list the correct answers to the question. In the example above, it's the values of the variables A and B. The input-format section defines what the solution area looks like to the student. Within the input-format element, you also provide one or more entry elements to create blanks where the student will enter his or her answer. In the example above, there are two entry elements, so the student would be expected to provide two answers (A and B, but in either order). The example elements function in the same way as described in multiple above.

    The next example provides two right answers, and the user may enter either one of them:

    <div class="solution" data-type="set">
    <div class="set-sol"><var>X1</var></div>
    <div class="set-sol"><var>X2</var></div>
    <div class="input-format">
        <p><code>x = \quad</code><span class="entry"></span><code></p>
    </div>
    <p class="example">an integer, like <code>6</code>
</div>

    Because there is only one entry element in the input-format, there will only be a single text box to enter an answer. Because there are fewer entry elements (one) than correct answers (two set-sol elements), the user is allowed to enter either answer. You can extend this by providing any number of inputs and/or correct answers.

    The next example is like the previous in that there are two correct answers and the user may enter either one of them, but in this case the answers are themselves multiple answers. In other words this requires the student to provide (X1 and Y1 and SLOPE) or (X and Y and SLOPE):

    <div class="solution" data-type="set">
    <div class="set-sol" data-type="multiple">
        <span class="sol"><var>X1</var></span>
        <span class="sol"><var>Y1</var></span>
        <span class="sol"><var>SLOPE</var></span>
    </div>
    <div class="set-sol" data-type="multiple">
        <span class="sol"><var>X</var></span>
        <span class="sol"><var>Y</var></span>
        <span class="sol"><var>SLOPE</var></span>
    </div>

    <div class="input-format">
        <p class="entry" data-type="multiple">
            <code>\text{x1 = }</code><span class="sol"></span><br />
            <code>\text{y1 = }</code><span class="sol"></span><br />
            <code>\text{m = }</code><span class="sol"></span>
        </p>
    </div>
</div>

Back to Writing Exercises: Home

Clone this wiki locally