-
Notifications
You must be signed in to change notification settings - Fork 865
Writing exercises: Multiple Problem Structure
While it's totally possible that you might create an exercise with a single type of problem, it's very likely that you'll want to provide students with multiple styles of problems to challenge them.
You will recall that the problem section of an exercise looks like this:
<div class="problems">
<div id="problem-type-or-description">
<p class="problem"><!-- An overview of the problem including all needed info. --></p>
<p class="question"><!-- The question to ask the student. --></p>
<p class="solution"><!-- The correct answer expected of the student. --></p>
</div>
</div>When building an exercise with multiple problems, the problems part of the code will look like:
<div class="problems">
<div id="problem-type-or-description-ONE">
<p class="problem"><!-- An overview of the problem including all needed info. --></p>
<p class="question"><!-- The question to ask the student. --></p>
<p class="solution"><!-- The correct answer expected of the student. --></p>
</div>
<div id="problem-type-or-description-TWO">
<p class="problem"><!-- An overview of the problem including all needed info. --></p>
<p class="question"><!-- The question to ask the student. --></p>
<p class="solution"><!-- The correct answer expected of the student. --></p>
</div>
</div>So all the problems exist between the <div class="problems"> wrapper and each different type of problem should have its own unique ID (examples below). Thankfully, you won't have to re-write the entire problem from scratch. You'll only have to write the new portions of the problem that differ from the original.
OR: If you are doing word problems and you do have similar problems that have completely different structures (e.g. multiplication word problems involving money and multiplication word problems involving objects), then this structure also allows you to change everything within unique problem ID: variables, overview, question, solution, hints, everything.
Let's go through each of these two examples of create multiple problem.
For expanding and extending an existing problem, the way you do it is by adding a unique ID to one of your problems and then referencing it from subsequent problems using a data-type="ID" attribute.
For example one problem could ask for total distance travelled, another could ask for how long it took the travel the distance, etc. In the following markup we create two types of problems. One is the base or core problem (with the ID of "original") and the other is the problem that inherits from the original.
<div id="original">
<div class="problem">
<p>Ben traveled by <var>CAR1</var> at an avg speed of <var>SPEED1</var> mph.</p>
<p>He also traveled by <var>CAR2</var> at an avg speed of <var>SPEED2</var> mph.</p>
<p>The total distance covered was <var>DIST</var> miles for <var>TIME</var> hours.</p>
</div>
<p class="question">How many miles did Ben go by <var>VEHICLE1</var>? (Round to the nearest mile.)</p>
<p class="solution"><var>round(DIST1)</var></p>
</div>
<div id="vehicle-2-distance" data-type="original">
<p class="question">How many miles did Ben go by <var>VEHICLE2</var>? (Round to the nearest mile.)</p>
<p class="solution"><var>round(DIST2)</var></p>
</div>Note how the second problem doesn't provide a problem definition. This problem definition is inherited directly from the original problem when we put in data-type="original" next to "vehicle-2-distance." Any markup provided by a subsequent problem will override the original. For example providing a "question" in a follow-up problem will override the "question" coming from the original.
Using this technique you can easily generate many different styles of problems with only minimal amounts of typing.
In general, we would like exercises to be as modular as possible, so consider creating multiple separate exercises unless the problems you are considering are fundamentally very similar.
There are times where you will want two types of problems in the same exercise that share nothing in common, not even variables. The following is the basic layout for a 2 problem, 2 structure exercise:
<!DOCTYPE html>
<html data-require="math">
<head>
<title>Name of Your Exercise</title>
<script src="../khan-exercise.js"></script>
</head>
<body>
<div class="exercise">
<div class="vars">
<!-- Variables here apply to all problems... -->
</div>
<div class="problems">
<div id="problem-type-or-description">
<p class="problem"><!-- An overview of the problem including all needed info. --></p>
<p class="question"><!-- The question to ask the student. --></p>
<p class="solution"><!-- The correct answer expected of the student. --></p>
</div>
</div>
<div class="hints">
<!-- Any hints to show to the student. -->
</div>
</div>
</body>
</html>If you want to have one problem come up more frequently than another, add a data-weight attribute to its containing <div>:
<div id="original" data-weight="3">
...
</div>
<div data-type="original">
...
</div>In this example, the first problem will appear 3 times as often as the second.
If the different problems you are considering have different variables, then you can declare variables individually for each problem. You can also declare any shared variables globally, and only define the ones that differ in each problem. For example, an exercise using word problems will probably require very different variables for each problem type. Here is the structure that would be used to define problem-specific variables:
<div class="vars">
<!-- global variables used by all problem types -->
<!-- this div is OPTIONAL -->
</div>
<div class="problems">
<div id="original">
<div class="vars">
<!-- variables specific to problem "original" -->
</div>
...
</div>
<div id="second">
<div class="vars">
<!-- variables specific to problem "second" -->
</div>
...
</div>
</div>You could also attach a data-apply="original" attribute to the second problem, and then all the variables declared in the first problem would be accessible in the second problem.
If you wish to provide hints that are specific to the problem that the user is working on (rather than generic to the overall problem). You can do this by providing hints within a problem itself. These hints will override hints in the base "hints" block.
If you would like separate hints for each problem, you can leave out any generic/base "hints" block, and define all your hints in the individual problems.
If there are both generic and problem-specific hints, the class-based inheritance system kicks in. For example, in this particular exercise there is a hint block that contains two placeholders: "hint1" and "hint2". These placeholders do not contain any hints and will be populated later by specific problems.
<div class="hints">
<p>Let's break this problem into smaller and easier pieces.</p>
<p class="hint1"></p>
<p><code><var>A</var> * x = </code><code class="hint_orange"><var>A</var>x</code></p>
<p class="hint2"></p>
<p><code class="hint_orange"><var>A</var>x</code><code class="hint_blue"> + <var>B</var></code></p>
<p>So, the original phrase can be written as <code><var>A</var>x + <var>B</var></code></p>
</div>Inside a problem the author may write something like the following:
<div data-type="original">
...
<div class="hints">
<p class="hint1">What is <span class="hint_orange">the product of <var>A</var> and x</span>?</p>
<p class="hint2">What is <span class="hint_blue">the sum of <var>B</var></span> and <code class="hint_orange"><var>A</var>x</code>?</p>
</div>
</div>The framework will take the above markup contained within the <div class="hints"> ... </div>, go through each of the child elements (in this case, the paragraphs), and replace the associated paragraphs in the main "hints" block (thus "hint1" will replace "hint1", "hint2" will replace "hint2" and so on). What class names you wish to use can be completely at your discretion.
Back to Writing Exercises: Home