This repository has been archived by the owner on May 11, 2021. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 863
/
reading_pictographs_1.html
130 lines (118 loc) · 5.72 KB
/
reading_pictographs_1.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
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
<!DOCTYPE html>
<html data-require="math math-format word-problems graphie">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Reading pictographs 1</title>
<script src="../khan-exercise.js"></script>
<style>
.fake_header span, .fake_row span {
width: 40px;
height: 40px;
vertical-align: top;
line-height: 40px;
}
.fake_row span:first-child {
width: 80px;
}
.fake_header span:first-child {
width: 480px;
}
</style>
</head>
<body>
<div class="exercise">
<div class="vars">
<var id="DATA">randRangeUnique( 1, 8, 5 )</var>
<var id="BADGE">randFromArray([ "meteorite", "moon", "earth" ])</var>
<var id="FULL_IMAGE">"<img src='" + Khan.urlBase + "images/" + BADGE + "-small.png'>"</var>
<var id="VALUE_PER_IMG">1</var>
</div>
<div class="problem">
<p>Use the pictograph to answer the question below:</p>
<div class="fake_header">
<span><span style="text-transform:capitalize"><var>BADGE</var></span> badges earned by each student</span>
</div>
<div class="fake_row" data-each="5 times as n">
<span><var>person( n + 1 )</var></span><span data-each="DATA[n] times"><var>FULL_IMAGE</var>
</span><span data-each="(8 - DATA[n]) times"> </span>
</div>
<span style="height: 50px; vertical-align: top; line-height: 50px;">
<var>FULL_IMAGE</var> = <var>VALUE_PER_IMG</var> <var>BADGE</var>
<var>plural( "badge", VALUE_PER_IMG )</var>
</span>
</div>
<div class="problems">
<div id="most" data-weight="1">
<div class="vars">
<var id="MOST">_.indexOf( DATA, Math.max.apply( Math, DATA ) )</var>
</div>
<p class="question">Who earned the most <var>BADGE</var> badges?</p>
<div class="solution"><var>person( MOST + 1 )</var></div>
<ul class="choices" data-category="true">
<li><var>person( 1 )</var></li>
<li><var>person( 2 )</var></li>
<li><var>person( 3 )</var></li>
<li><var>person( 4 )</var></li>
<li><var>person( 5 )</var></li>
</ul>
<div class="hints">
<p>Who has the largest number of <var>BADGE</var> symbols next to <var>his( MOST + 1 )</var> name in the chart?</p>
<p><var>person( MOST + 1 )</var> has the largest number of symbols next to <var>his( MOST + 1)</var> name.</p>
<p><var>person( MOST + 1 )</var> earned the most <var>BADGE</var> badges.</p>
</div>
</div>
<div id="least" data-weight="1">
<div class="vars">
<var id="LEAST">_.indexOf( DATA, Math.min.apply( Math, DATA ) )</var>
</div>
<p class="question">Who earned the fewest <var>BADGE</var> badges?</p>
<div class="solution"><var>person( LEAST + 1 )</var></div>
<ul class="choices" data-category="true">
<li><var>person( 1 )</var></li>
<li><var>person( 2 )</var></li>
<li><var>person( 3 )</var></li>
<li><var>person( 4 )</var></li>
<li><var>person( 5 )</var></li>
</ul>
<div class="hints">
<p>Who has the smallest number of <var>BADGE</var> symbols next to <var>his( LEAST + 1 )</var> name in the chart?</p>
<p><var>person( LEAST + 1 )</var> has the smallest number of symbols next to <var>his( LEAST + 1)</var> name.</p>
<p><var>person( LEAST + 1 )</var> earned the fewest <var>BADGE</var> badges.</p>
</div>
</div>
<div id="read-chart" data-weight="3">
<div class="vars">
<var id="PERSON">rand( 5 )</var>
<var id="ANSWER">DATA[ PERSON ] * VALUE_PER_IMG</var>
</div>
<p class="question">How many <var>BADGE</var> badges did <var>person( PERSON + 1 )</var> earn?</p>
<div class="solution" data-type="multiple">
<p><span style="padding-right: 5px" class="sol" data-forms="integer"><var>ANSWER</var></span> <var>BADGE</var> badge(s)</p>
</div>
<div class="hints">
<p>The key at the bottom of the pictograph shows that each symbol represents <var>plural( VALUE_PER_IMG, "badge" )</var>.</p>
<div>
Find <var>person( PERSON + 1 )</var>'s row in the table:
<div class="fake_row">
<span><var>person( PERSON + 1 )</var></span><span data-each="DATA[ PERSON ] times"><var>FULL_IMAGE</var>
</span><span data-each="(8 - DATA[ PERSON ]) times"> </span>
</div>
</div>
<p>
There <var>plural( "is", DATA[PERSON] )</var> <var>plural( DATA[ PERSON ], "symbol" )</var>.
</p>
<div>
<div>
<code><var>DATA[ PERSON ]</var></code> <var>plural( "symbol", DATA[ PERSON ] )</var>
<code> \times </code> <code><var>VALUE_PER_IMG</var></code> <var>plural( "badge", VALUE_PER_IMG )</var> per symbol
<code> = <var>DATA[ PERSON ] * VALUE_PER_IMG</var></code>
<var>plural( "badge", DATA[ PERSON ] * VALUE_PER_IMG )</var>.
</div>
</div>
<p><var>person( PERSON + 1 )</var> earned <code><var>ANSWER</var></code> <var>BADGE</var> <var>plural( "badge", ANSWER )</var>.</p>
</div>
</div>
</div>
</div>
</body>
</html>