This repository has been archived by the owner on May 11, 2021. It is now read-only.
/
recognizing_fractions.html
48 lines (46 loc) · 2.13 KB
/
recognizing_fractions.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
<!DOCTYPE html>
<html data-require="math graphie graphie-helpers">
<head>
<meta charset="UTF-8" />
<title>Recognizing fractions</title>
<script src="../khan-exercise.js"></script>
</head>
<body>
<div class="exercise">
<div class="vars" data-ensure="NUMERATOR < DENOMINATOR">
<var id="NUMERATOR">randRange( 1, 11 )</var>
<var id="DENOMINATOR">randRange( 2, 12 )</var>
</div>
<div class="problems">
<div id="original">
<p class="question">Given <code>\dfrac{<var>NUMERATOR</var>}{<var>DENOMINATOR</var>}</code>, what is the fraction's numerator?</p>
<p class="solution" data-forms="integer"><var>NUMERATOR</var></p>
<div class="hints">
<p>Fractions help represent parts of a whole.</p>
<div>
<p>The fraction <code>\dfrac{<var>NUMERATOR</var>}{<var>DENOMINATOR</var>}</code> could represent <var>NUMERATOR</var> out of <var>DENOMINATOR</var> slices of pie. In other words, the pie has been cut into <var>DENOMINATOR</var> slices, and we are only considering <var>NUMERATOR</var> of those slices.</p>
<div class="graphie">
init({
range: [ [-2, 10], [-2, 2] ],
scale: 25
});
piechart( [NUMERATOR, DENOMINATOR - NUMERATOR], ["#6495ED", "#FFA500"], 2 );
label( [2, 0], "=\\dfrac{\\color{#6495ED}{" + NUMERATOR + "}}{" + DENOMINATOR + "}"
+ "=\\dfrac{\\color{#6495ED}{\\text{numerator}}}{\\text{denominator}}", "right");
</div>
</div>
<p>The numerator is the number of slices we consider, and it is written above the fraction line. The denominator is the total number of slices, and it is written below the line.</p>
<p id="answer_hint">Thus, the numerator is <code><var>NUMERATOR</var></code>.</p>
</div>
</div>
<div data-type="original">
<p class="question">Given <code>\dfrac{<var>NUMERATOR</var>}{<var>DENOMINATOR</var>}</code>, what is the fraction's denominator?</p>
<p class="solution" data-forms="integer"><var>DENOMINATOR</var></p>
<div class="hints" data-apply="appendContents">
<p id="answer_hint">Thus, the denominator is <code><var>DENOMINATOR</var></code>.</p>
</div>
</div>
</div>
</div>
</body>
</html>