Skip to content
This repository
Newer
Older
100644 128 lines (112 sloc) 5.615 kb
a46a295d » osnr
2012-06-27 Add new exercise: area of parallelograms.
1 <!DOCTYPE html>
2 <html data-require="math graphie word-problems">
3 <head>
4 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
5 <title>Area of parallelograms</title>
6 <script src="../khan-exercise.js"></script>
7
8 <script type="text/javascript">
9 KhanUtil.parallelogram = function(B, H, UNIT, SH) {
10 var graph = KhanUtil.currentGraph;
11
12 graph.init({
13 range: [[-4, B + 4], [-1, H + 1]],
14 scale: [30, 30]
15 });
16
17 var par = graph.path([[0, 0], [B, 0], [B + SH, H], [SH, H], [0, 0]]),
18 base, baseL, height, heightL, slice;
19
20 return {
21 drawBase: function() {
b41affcf » osnr
2012-07-05 Add new exercise: areas of trapezoids, rhombi, and kites. Also teensy…
22 base = graph.path([[0, 0], [B, 0]], { stroke: KhanUtil.ORANGE });
a46a295d » osnr
2012-06-27 Add new exercise: area of parallelograms.
23 baseL = graph.label([B/2, 0], "\\color{" + KhanUtil.ORANGE + "}{b = " + B + "\\text{ " + UNIT + "}}", "below");
24 },
25 drawHeight: function() {
b41affcf » osnr
2012-07-05 Add new exercise: areas of trapezoids, rhombi, and kites. Also teensy…
26 height = graph.path([[B, 0], [B, H]], { stroke: KhanUtil.BLUE, strokeDasharray: "." });
a46a295d » osnr
2012-06-27 Add new exercise: area of parallelograms.
27 heightL = graph.label([B, H/2], "\\color{" + KhanUtil.BLUE + "}{h = " + H + "\\text{ " + UNIT + "}}", "right");
28 },
29 drawArea: function() {
30 if (SH > 0) {
31 graph.path([[0, 0], [B, 0], [B, H], [0, H], [0, 0]], { "opacity": 0.5, "fill": KhanUtil.RED });
32 graph.label([B/2, H/2], B * H);
33 } else {
34 graph.path([[SH, 0], [B + SH, 0], [B + SH, H], [SH, H], [SH, 0]], { "opacity": 0.5, "fill": KhanUtil.RED });
35 graph.label([B/2 + SH, H/2], B * H);
36 }
37 },
38 sliceHint: function() {
39 if (SH > 0) {
40 graph.path([[0, 0], [B, 0], [B, H], [SH, H], [0, 0]]).insertBefore(par);
41 par.hide();
42
43 slice = graph.path([[B, 0], [B, H], [B + SH, H], [B, 0]]).insertAfter(par);
44 } else {
45 graph.path([[0, 0], [SH, H], [B + SH, H], [B + SH, 0], [0, 0]]).insertBefore(par);
46 par.hide();
47
48 slice = graph.path([[B, 0], [B + SH, H], [B + SH, 0], [B, 0]]).insertAfter(par);
49 }
50 },
51 animHint: function() {
30f7605c » osnr
2012-07-10 Use translation animation for area of parallelograms hint to be compa…
52 slice.animate({ translation: (-B * 30) + ",0" }, 1000, "easeOut");
a46a295d » osnr
2012-06-27 Add new exercise: area of parallelograms.
53
54 if (SH < 0) {
55 var st = graph.raphael.set();
56 st.push(base, height);
57
58 $(baseL).fadeOut();
59 $(heightL).fadeOut();
60
30f7605c » osnr
2012-07-10 Use translation animation for area of parallelograms hint to be compa…
61 st.animate({ translation: (SH * 30) + ",0" }, 1000, "easeOut", function() {
a46a295d » osnr
2012-06-27 Add new exercise: area of parallelograms.
62 baseL = graph.label([B/2 + SH, 0], "\\color{" + KhanUtil.ORANGE + "}{b = " + B + "\\text{ " + UNIT + "}}", "below");
63 heightL = graph.label([B + SH, H/2], "\\color{" + KhanUtil.BLUE + "}{h = " + H + "\\text{ " + UNIT + "}}", "right");
64 $(baseL).hide().fadeIn();
65 $(heightL).hide().fadeIn();
66 });
67 }
68 }
69 };
70 }
71 </script>
72 </head>
73 <body>
74 <div class="exercise">
75 <div class="vars" data-ensure="Math.abs(SH) &lt;= B">
76 <var id="UNIT,UNIT_TEXT">randFromArray([
77 ["in", "inch"],
78 ["ft", "foot"],
79 ["m", "meter"],
80 ["cm", "centimeter"],
81 ["", "unit"]
82 ])</var>
83
84 <var id="B">randRange(1, 8)</var>
85 <var id="H">randRange(1, 8)</var>
86
87 <var id="SH">randRangeNonZero(-2, 2)</var>
88
89 <var id="K">B * H</var>
90 </div>
91
92 <div class="problems">
93 <div id="par-bh-to-K">
94 <div class="problem">Suppose a parallelogram has base length <code class="hint_orange"><var>B</var> \text{ <var>UNIT</var>}</code> and height <code class="hint_blue"><var>H</var> \text{ <var>UNIT</var>}</code>.</div>
95 <div class="question">What is the parallelogram's area?</div>
96
97 <div class="solution" data-type="multiple">
98 <span class="sol"><var>K</var></span>
99 square <var>plural(UNIT_TEXT)</var>
100 </div>
101
102 <div class="hints">
103 <div class="graphie" id="parallelogram">
104 graph.p = parallelogram(B, H, UNIT, SH);
105
106 graph.p.drawBase();
107 graph.p.drawHeight();
108 </div>
109 <div>
110 <p>By moving a slice of the parallelogram, we can see that its area is equal to that of a rectangle with the same base and height.</p>
111 <div class="graphie" data-update="parallelogram">
112 graph.p.sliceHint();
113 graph.p.animHint();
114 </div>
115 </div>
116 <p>area of rectangle <code> = b \times h</code></p>
117 <div>
118 <div class="graphie" data-update="parallelogram">
119 graph.p.drawArea();
120 </div>
121 <p><code>A = <var>B</var> \times <var>H</var> = <var>K</var></code></p>
122 </div>
123 </div>
124 </div>
125 </div>
126 </div>
127 </body>
128 </html>
Something went wrong with that request. Please try again.