@khanacademy/perseus 5.0.0 → 6.1.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +62 -0
- package/dist/components/fixed-to-responsive.d.ts +27 -1
- package/dist/components/fixed-to-responsive.js.flow +27 -1
- package/dist/components/graph.d.ts +42 -26
- package/dist/components/graph.js.flow +42 -28
- package/dist/components/graphie.d.ts +34 -22
- package/dist/components/graphie.js.flow +37 -24
- package/dist/components/hud.d.ts +8 -14
- package/dist/components/hud.js.flow +7 -14
- package/dist/components/inline-icon.d.ts +9 -19
- package/dist/components/inline-icon.js.flow +26 -13
- package/dist/components/lint.d.ts +41 -13
- package/dist/components/lint.js.flow +42 -13
- package/dist/components/math-output.d.ts +15 -11
- package/dist/components/math-output.js.flow +15 -11
- package/dist/components/sortable.d.ts +17 -9
- package/dist/components/sortable.js.flow +22 -9
- package/dist/components/svg-image.d.ts +5 -3
- package/dist/components/svg-image.js.flow +5 -3
- package/dist/components/tooltip.d.ts +45 -4
- package/dist/components/tooltip.js.flow +44 -31
- package/dist/es/index.css +0 -3
- package/dist/es/index.js +478 -649
- package/dist/es/index.js.map +1 -1
- package/dist/index.css +0 -3
- package/dist/index.js +482 -646
- package/dist/index.js.map +1 -1
- package/dist/perseus-types.d.ts +11 -9
- package/dist/perseus-types.js.flow +11 -9
- package/dist/renderer.d.ts +2 -2
- package/dist/renderer.js.flow +1 -3
- package/dist/styles/shared.d.ts +0 -1
- package/dist/styles/shared.js.flow +0 -1
- package/dist/types.d.ts +0 -10
- package/dist/types.js.flow +0 -13
- package/dist/util/a11y.d.ts +0 -1
- package/dist/util/a11y.js.flow +0 -1
- package/dist/util/interactive.d.ts +2 -0
- package/dist/util/interactive.js.flow +2 -0
- package/dist/util.d.ts +3 -3
- package/dist/util.js.flow +4 -3
- package/dist/widgets/grapher.d.ts +1 -1
- package/dist/widgets/grapher.js.flow +12 -3
- package/dist/widgets/matcher.d.ts +7 -3
- package/dist/widgets/matcher.js.flow +7 -3
- package/dist/widgets/number-line.d.ts +1 -1
- package/dist/widgets/number-line.js.flow +1 -1
- package/package.json +2 -2
- package/src/__tests__/__snapshots__/item-renderer.test.tsx.snap +151 -159
- package/src/__tests__/__snapshots__/renderer.test.tsx.snap +358 -394
- package/src/__tests__/__snapshots__/server-item-renderer.test.tsx.snap +169 -189
- package/src/components/__stories__/lint.stories.tsx +56 -21
- package/src/components/__stories__/sortable.stories.tsx +5 -5
- package/src/components/__stories__/tooltip.stories.tsx +52 -0
- package/src/components/__tests__/__snapshots__/sortable.test.tsx.snap +114 -30
- package/src/components/__tests__/__snapshots__/sorter.test.tsx.snap +172 -204
- package/src/components/__tests__/sortable.test.tsx +54 -16
- package/src/components/__tests__/sorter.test.tsx +12 -9
- package/src/components/fixed-to-responsive.tsx +43 -38
- package/src/components/graph.tsx +95 -81
- package/src/components/graphie.tsx +62 -32
- package/src/components/hud.tsx +104 -115
- package/src/components/inline-icon.tsx +15 -32
- package/src/components/input-with-examples.tsx +4 -4
- package/src/components/lint.tsx +47 -41
- package/src/components/math-output.tsx +17 -11
- package/src/components/simple-keypad-input.tsx +2 -2
- package/src/components/sortable.tsx +134 -94
- package/src/components/svg-image.tsx +10 -11
- package/src/components/tooltip.tsx +189 -171
- package/src/interactive2/types.ts +2 -2
- package/src/mixins/provide-keypad.tsx +2 -2
- package/src/multi-items/__tests__/__snapshots__/multi-renderer.test.tsx.snap +708 -764
- package/src/perseus-types.ts +13 -9
- package/src/renderer.tsx +11 -22
- package/src/types.ts +0 -18
- package/src/util/interactive.ts +18 -5
- package/src/util/tex.ts +13 -77
- package/src/util.ts +3 -4
- package/src/widgets/__stories__/test-keypad-context-wrapper.tsx +2 -2
- package/src/widgets/__tests__/__snapshots__/categorizer.test.ts.snap +717 -773
- package/src/widgets/__tests__/__snapshots__/cs-program.test.ts.snap +28 -36
- package/src/widgets/__tests__/__snapshots__/definition.test.ts.snap +52 -60
- package/src/widgets/__tests__/__snapshots__/dropdown.test.ts.snap +100 -108
- package/src/widgets/__tests__/__snapshots__/explanation.test.ts.snap +212 -260
- package/src/widgets/__tests__/__snapshots__/graded-group-set-jipt.test.ts.snap +613 -641
- package/src/widgets/__tests__/__snapshots__/graded-group-set.test.ts.snap +249 -261
- package/src/widgets/__tests__/__snapshots__/graded-group.test.ts.snap +671 -735
- package/src/widgets/__tests__/__snapshots__/grapher.test.ts.snap +2676 -2684
- package/src/widgets/__tests__/__snapshots__/group.test.tsx.snap +938 -1002
- package/src/widgets/__tests__/__snapshots__/iframe.test.ts.snap +28 -36
- package/src/widgets/__tests__/__snapshots__/image.test.ts.snap +227 -255
- package/src/widgets/__tests__/__snapshots__/input-number.test.ts.snap +353 -357
- package/src/widgets/__tests__/__snapshots__/interaction.test.ts.snap +255 -259
- package/src/widgets/__tests__/__snapshots__/interactive-graph.test.ts.snap +2401 -2433
- package/src/widgets/__tests__/__snapshots__/matcher.test.tsx.snap +600 -756
- package/src/widgets/__tests__/__snapshots__/matrix.test.ts.snap +420 -428
- package/src/widgets/__tests__/__snapshots__/number-line.test.ts.snap +762 -770
- package/src/widgets/__tests__/__snapshots__/numeric-input.test.ts.snap +373 -393
- package/src/widgets/__tests__/__snapshots__/orderer.test.ts.snap +116 -148
- package/src/widgets/__tests__/__snapshots__/passage-ref.test.ts.snap +289 -301
- package/src/widgets/__tests__/__snapshots__/passage.test.tsx.snap +1679 -1711
- package/src/widgets/__tests__/__snapshots__/radio.test.ts.snap +2692 -2960
- package/src/widgets/__tests__/__snapshots__/video.test.ts.snap +90 -98
- package/src/widgets/__tests__/matcher.test.tsx +33 -9
- package/src/widgets/expression.tsx +9 -6
- package/src/widgets/grapher.tsx +3 -3
- package/src/widgets/image.tsx +2 -2
- package/src/widgets/interactive-graph.tsx +5 -5
- package/src/widgets/matcher.tsx +43 -24
- package/src/widgets/number-line.tsx +1 -1
- package/src/widgets/simulator.tsx +4 -6
- package/{tsconfig.json → tsconfig-build.json} +6 -6
- package/tsconfig-build.tsbuildinfo +1 -0
- package/tsconfig.tsbuildinfo +0 -1
|
@@ -2,111 +2,99 @@
|
|
|
2
2
|
|
|
3
3
|
exports[`image widget - isMobile %b should snapshot: first render 1`] = `
|
|
4
4
|
<div>
|
|
5
|
-
<
|
|
6
|
-
class="
|
|
5
|
+
<div
|
|
6
|
+
class="perseus-renderer perseus-renderer-responsive perseus-renderer-two-columns"
|
|
7
7
|
>
|
|
8
8
|
<div
|
|
9
|
-
class="
|
|
9
|
+
class="paragraph"
|
|
10
|
+
data-perseus-paragraph-index="0"
|
|
10
11
|
>
|
|
11
12
|
<div
|
|
12
|
-
class="
|
|
13
|
-
data-perseus-paragraph-index="0"
|
|
13
|
+
class="perseus-two-columns"
|
|
14
14
|
>
|
|
15
15
|
<div
|
|
16
|
-
class="perseus-
|
|
16
|
+
class="perseus-column"
|
|
17
17
|
>
|
|
18
18
|
<div
|
|
19
|
-
class="perseus-column"
|
|
19
|
+
class="perseus-column-content"
|
|
20
20
|
>
|
|
21
21
|
<div
|
|
22
|
-
class="
|
|
22
|
+
class="paragraph"
|
|
23
23
|
>
|
|
24
24
|
<div
|
|
25
|
-
class="
|
|
25
|
+
class="perseus-widget-container widget-nohighlight widget-block"
|
|
26
26
|
>
|
|
27
27
|
<div
|
|
28
|
-
class="perseus-
|
|
28
|
+
class="perseus-image-widget"
|
|
29
29
|
>
|
|
30
30
|
<div
|
|
31
|
-
class="
|
|
31
|
+
class="fixed-to-responsive svg-image"
|
|
32
|
+
style="max-width: 420px; max-height: 345px;"
|
|
32
33
|
>
|
|
33
34
|
<div
|
|
34
|
-
|
|
35
|
-
|
|
35
|
+
style="padding-bottom: 82.14%;"
|
|
36
|
+
/>
|
|
37
|
+
<span
|
|
38
|
+
style="top: 0px; left: 0px; width: 100%; height: 100%; position: absolute; min-width: 20px; display: flex; justify-content: center; align-content: center;"
|
|
36
39
|
>
|
|
37
40
|
<div
|
|
38
|
-
|
|
39
|
-
/>
|
|
40
|
-
<span
|
|
41
|
-
style="top: 0px; left: 0px; width: 100%; height: 100%; position: absolute; min-width: 20px; display: flex; justify-content: center; align-content: center;"
|
|
41
|
+
class="default_xu2jcg-o_O-spinnerContainer_agrn11"
|
|
42
42
|
>
|
|
43
|
-
<
|
|
44
|
-
|
|
43
|
+
<svg
|
|
44
|
+
height="48"
|
|
45
|
+
viewBox="0 0 48 48"
|
|
46
|
+
width="48"
|
|
47
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
45
48
|
>
|
|
46
|
-
<
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
</div>
|
|
61
|
-
<span
|
|
62
|
-
class="perseus-sr-only"
|
|
49
|
+
<path
|
|
50
|
+
class="loadingSpinner_1dvgeb3-o_O-inlineStyles_1kzk0y9"
|
|
51
|
+
d="M44.19 23.455a1.91 1.91 0 1 1 3.801 0h.003c.004.18.006.363.006.545 0 13.255-10.745 24-24 24S0 37.255 0 24 10.745 0 24 0c.182 0 .364.002.545.006V.01a1.91 1.91 0 1 1 0 3.801v.015A20.564 20.564 0 0 0 24 3.818C12.854 3.818 3.818 12.854 3.818 24c0 11.146 9.036 20.182 20.182 20.182 11.146 0 20.182-9.036 20.182-20.182 0-.182-.003-.364-.007-.545h.015z"
|
|
52
|
+
fill-rule="nonzero"
|
|
53
|
+
/>
|
|
54
|
+
</svg>
|
|
55
|
+
</div>
|
|
56
|
+
</span>
|
|
57
|
+
</div>
|
|
58
|
+
<span
|
|
59
|
+
class="perseus-sr-only"
|
|
60
|
+
>
|
|
61
|
+
<div
|
|
62
|
+
class="perseus-renderer perseus-renderer-responsive"
|
|
63
63
|
>
|
|
64
|
-
<
|
|
65
|
-
class="
|
|
64
|
+
<div
|
|
65
|
+
class="paragraph"
|
|
66
|
+
data-perseus-paragraph-index="0"
|
|
66
67
|
>
|
|
67
68
|
<div
|
|
68
|
-
class="
|
|
69
|
+
class="paragraph"
|
|
69
70
|
>
|
|
70
|
-
|
|
71
|
-
class="paragraph"
|
|
72
|
-
data-perseus-paragraph-index="0"
|
|
73
|
-
>
|
|
74
|
-
<div
|
|
75
|
-
class="paragraph"
|
|
76
|
-
>
|
|
77
|
-
An array of isosceles triangles. A triangle has height A. Two smaller triangle, one with height B and one with height C, have approximately the same combined height as A.
|
|
78
|
-
</div>
|
|
79
|
-
</div>
|
|
71
|
+
An array of isosceles triangles. A triangle has height A. Two smaller triangle, one with height B and one with height C, have approximately the same combined height as A.
|
|
80
72
|
</div>
|
|
81
|
-
</
|
|
82
|
-
</
|
|
73
|
+
</div>
|
|
74
|
+
</div>
|
|
75
|
+
</span>
|
|
76
|
+
<div
|
|
77
|
+
class="perseus-image-caption has-title"
|
|
78
|
+
>
|
|
83
79
|
<div
|
|
84
|
-
class="
|
|
80
|
+
class="caption_4bstk7"
|
|
85
81
|
>
|
|
86
82
|
<div
|
|
87
|
-
class="
|
|
83
|
+
class="perseus-renderer perseus-renderer-responsive"
|
|
88
84
|
>
|
|
89
|
-
<
|
|
90
|
-
class="
|
|
85
|
+
<div
|
|
86
|
+
class="paragraph"
|
|
87
|
+
data-perseus-paragraph-index="0"
|
|
91
88
|
>
|
|
92
89
|
<div
|
|
93
|
-
class="
|
|
90
|
+
class="paragraph"
|
|
94
91
|
>
|
|
95
|
-
<
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
<div
|
|
100
|
-
class="paragraph"
|
|
101
|
-
>
|
|
102
|
-
<strong>
|
|
103
|
-
Image Title.
|
|
104
|
-
</strong>
|
|
105
|
-
Image Caption
|
|
106
|
-
</div>
|
|
107
|
-
</div>
|
|
92
|
+
<strong>
|
|
93
|
+
Image Title.
|
|
94
|
+
</strong>
|
|
95
|
+
Image Caption
|
|
108
96
|
</div>
|
|
109
|
-
</
|
|
97
|
+
</div>
|
|
110
98
|
</div>
|
|
111
99
|
</div>
|
|
112
100
|
</div>
|
|
@@ -114,291 +102,275 @@ exports[`image widget - isMobile %b should snapshot: first render 1`] = `
|
|
|
114
102
|
</div>
|
|
115
103
|
</div>
|
|
116
104
|
</div>
|
|
105
|
+
</div>
|
|
106
|
+
<div
|
|
107
|
+
class="perseus-column"
|
|
108
|
+
>
|
|
117
109
|
<div
|
|
118
|
-
class="perseus-column"
|
|
110
|
+
class="perseus-column-content"
|
|
119
111
|
>
|
|
120
112
|
<div
|
|
121
|
-
class="
|
|
113
|
+
class="paragraph"
|
|
122
114
|
>
|
|
123
|
-
|
|
124
|
-
|
|
115
|
+
A quilter wants to make the design shown at left using the Golden Ratio. Specifically, he wants the ratio of the triangle heights
|
|
116
|
+
<span
|
|
117
|
+
style="white-space: nowrap;"
|
|
125
118
|
>
|
|
126
|
-
|
|
119
|
+
<span />
|
|
127
120
|
<span
|
|
128
|
-
|
|
121
|
+
class="mock-TeX"
|
|
129
122
|
>
|
|
130
|
-
|
|
131
|
-
<span
|
|
132
|
-
class="mock-TeX"
|
|
133
|
-
>
|
|
134
|
-
A:B
|
|
135
|
-
</span>
|
|
136
|
-
<span />
|
|
123
|
+
A:B
|
|
137
124
|
</span>
|
|
138
|
-
|
|
125
|
+
<span />
|
|
126
|
+
</span>
|
|
127
|
+
and
|
|
128
|
+
<span
|
|
129
|
+
style="white-space: nowrap;"
|
|
130
|
+
>
|
|
131
|
+
<span />
|
|
139
132
|
<span
|
|
140
|
-
|
|
133
|
+
class="mock-TeX"
|
|
141
134
|
>
|
|
142
|
-
|
|
143
|
-
<span
|
|
144
|
-
class="mock-TeX"
|
|
145
|
-
>
|
|
146
|
-
B:C
|
|
147
|
-
</span>
|
|
148
|
-
<span />
|
|
135
|
+
B:C
|
|
149
136
|
</span>
|
|
150
|
-
|
|
137
|
+
<span />
|
|
138
|
+
</span>
|
|
139
|
+
to each equal
|
|
140
|
+
<span
|
|
141
|
+
style="white-space: nowrap;"
|
|
142
|
+
>
|
|
143
|
+
<span />
|
|
151
144
|
<span
|
|
152
|
-
|
|
145
|
+
class="mock-TeX"
|
|
153
146
|
>
|
|
154
|
-
|
|
155
|
-
<span
|
|
156
|
-
class="mock-TeX"
|
|
157
|
-
>
|
|
158
|
-
1.62
|
|
159
|
-
</span>
|
|
160
|
-
<span />
|
|
147
|
+
1.62
|
|
161
148
|
</span>
|
|
162
|
-
|
|
149
|
+
<span />
|
|
150
|
+
</span>
|
|
151
|
+
. If the quilter makes the triangle height
|
|
152
|
+
<span
|
|
153
|
+
style="white-space: nowrap;"
|
|
154
|
+
>
|
|
155
|
+
<span />
|
|
163
156
|
<span
|
|
164
|
-
|
|
157
|
+
class="mock-TeX"
|
|
165
158
|
>
|
|
166
|
-
|
|
167
|
-
<span
|
|
168
|
-
class="mock-TeX"
|
|
169
|
-
>
|
|
170
|
-
A=8\\ \\text{in}
|
|
171
|
-
</span>
|
|
172
|
-
<span />
|
|
159
|
+
A=8\\ \\text{in}
|
|
173
160
|
</span>
|
|
174
|
-
|
|
161
|
+
<span />
|
|
162
|
+
</span>
|
|
163
|
+
, approximately how tall should he make triangle height
|
|
164
|
+
<span
|
|
165
|
+
style="white-space: nowrap;"
|
|
166
|
+
>
|
|
167
|
+
<span />
|
|
175
168
|
<span
|
|
176
|
-
|
|
169
|
+
class="mock-TeX"
|
|
177
170
|
>
|
|
178
|
-
|
|
179
|
-
<span
|
|
180
|
-
class="mock-TeX"
|
|
181
|
-
>
|
|
182
|
-
C
|
|
183
|
-
</span>
|
|
184
|
-
<span />
|
|
171
|
+
C
|
|
185
172
|
</span>
|
|
186
|
-
|
|
187
|
-
</
|
|
173
|
+
<span />
|
|
174
|
+
</span>
|
|
175
|
+
?
|
|
188
176
|
</div>
|
|
189
177
|
</div>
|
|
190
178
|
</div>
|
|
191
179
|
</div>
|
|
192
180
|
</div>
|
|
193
|
-
</
|
|
181
|
+
</div>
|
|
194
182
|
</div>
|
|
195
183
|
`;
|
|
196
184
|
|
|
197
185
|
exports[`image widget - isMobile %b should snapshot: first render 2`] = `
|
|
198
186
|
<div>
|
|
199
|
-
<
|
|
200
|
-
class="
|
|
187
|
+
<div
|
|
188
|
+
class="perseus-renderer perseus-renderer-responsive perseus-renderer-two-columns"
|
|
201
189
|
>
|
|
202
190
|
<div
|
|
203
|
-
class="
|
|
191
|
+
class="paragraph"
|
|
192
|
+
data-perseus-paragraph-index="0"
|
|
204
193
|
>
|
|
205
194
|
<div
|
|
206
|
-
class="
|
|
207
|
-
data-perseus-paragraph-index="0"
|
|
195
|
+
class="perseus-two-columns"
|
|
208
196
|
>
|
|
209
197
|
<div
|
|
210
|
-
class="perseus-
|
|
198
|
+
class="perseus-column"
|
|
211
199
|
>
|
|
212
200
|
<div
|
|
213
|
-
class="perseus-column"
|
|
201
|
+
class="perseus-column-content"
|
|
214
202
|
>
|
|
215
203
|
<div
|
|
216
|
-
class="
|
|
204
|
+
class="paragraph"
|
|
217
205
|
>
|
|
218
206
|
<div
|
|
219
|
-
class="
|
|
207
|
+
class="perseus-widget-container widget-nohighlight widget-block"
|
|
220
208
|
>
|
|
221
209
|
<div
|
|
222
|
-
class="perseus-
|
|
210
|
+
class="perseus-image-widget"
|
|
223
211
|
>
|
|
224
212
|
<div
|
|
225
|
-
class="perseus-image-
|
|
213
|
+
class="perseus-image-title"
|
|
226
214
|
>
|
|
227
215
|
<div
|
|
228
|
-
class="perseus-
|
|
216
|
+
class="perseus-renderer perseus-renderer-responsive"
|
|
229
217
|
>
|
|
230
|
-
<
|
|
231
|
-
class="
|
|
218
|
+
<div
|
|
219
|
+
class="paragraph"
|
|
220
|
+
data-perseus-paragraph-index="0"
|
|
232
221
|
>
|
|
233
222
|
<div
|
|
234
|
-
class="
|
|
223
|
+
class="paragraph"
|
|
235
224
|
>
|
|
236
|
-
|
|
237
|
-
class="paragraph"
|
|
238
|
-
data-perseus-paragraph-index="0"
|
|
239
|
-
>
|
|
240
|
-
<div
|
|
241
|
-
class="paragraph"
|
|
242
|
-
>
|
|
243
|
-
Image Title
|
|
244
|
-
</div>
|
|
245
|
-
</div>
|
|
225
|
+
Image Title
|
|
246
226
|
</div>
|
|
247
|
-
</
|
|
227
|
+
</div>
|
|
248
228
|
</div>
|
|
229
|
+
</div>
|
|
230
|
+
<div
|
|
231
|
+
class="fixed-to-responsive svg-image"
|
|
232
|
+
style="max-width: 420px; max-height: 345px;"
|
|
233
|
+
>
|
|
249
234
|
<div
|
|
250
|
-
|
|
251
|
-
|
|
235
|
+
style="padding-bottom: 82.14%;"
|
|
236
|
+
/>
|
|
237
|
+
<span
|
|
238
|
+
style="top: 0px; left: 0px; width: 100%; height: 100%; position: absolute; min-width: 20px; display: flex; justify-content: center; align-content: center;"
|
|
252
239
|
>
|
|
253
240
|
<div
|
|
254
|
-
|
|
255
|
-
/>
|
|
256
|
-
<span
|
|
257
|
-
style="top: 0px; left: 0px; width: 100%; height: 100%; position: absolute; min-width: 20px; display: flex; justify-content: center; align-content: center;"
|
|
241
|
+
class="default_xu2jcg-o_O-spinnerContainer_agrn11"
|
|
258
242
|
>
|
|
259
|
-
<
|
|
260
|
-
|
|
243
|
+
<svg
|
|
244
|
+
height="48"
|
|
245
|
+
viewBox="0 0 48 48"
|
|
246
|
+
width="48"
|
|
247
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
261
248
|
>
|
|
262
|
-
<
|
|
263
|
-
|
|
264
|
-
|
|
265
|
-
|
|
266
|
-
|
|
267
|
-
|
|
268
|
-
|
|
269
|
-
|
|
270
|
-
|
|
271
|
-
|
|
272
|
-
|
|
273
|
-
|
|
274
|
-
|
|
275
|
-
|
|
276
|
-
</div>
|
|
277
|
-
<span
|
|
278
|
-
class="perseus-sr-only"
|
|
249
|
+
<path
|
|
250
|
+
class="loadingSpinner_1dvgeb3-o_O-inlineStyles_1kzk0y9"
|
|
251
|
+
d="M44.19 23.455a1.91 1.91 0 1 1 3.801 0h.003c.004.18.006.363.006.545 0 13.255-10.745 24-24 24S0 37.255 0 24 10.745 0 24 0c.182 0 .364.002.545.006V.01a1.91 1.91 0 1 1 0 3.801v.015A20.564 20.564 0 0 0 24 3.818C12.854 3.818 3.818 12.854 3.818 24c0 11.146 9.036 20.182 20.182 20.182 11.146 0 20.182-9.036 20.182-20.182 0-.182-.003-.364-.007-.545h.015z"
|
|
252
|
+
fill-rule="nonzero"
|
|
253
|
+
/>
|
|
254
|
+
</svg>
|
|
255
|
+
</div>
|
|
256
|
+
</span>
|
|
257
|
+
</div>
|
|
258
|
+
<span
|
|
259
|
+
class="perseus-sr-only"
|
|
260
|
+
>
|
|
261
|
+
<div
|
|
262
|
+
class="perseus-renderer perseus-renderer-responsive"
|
|
279
263
|
>
|
|
280
|
-
<
|
|
281
|
-
class="
|
|
264
|
+
<div
|
|
265
|
+
class="paragraph"
|
|
266
|
+
data-perseus-paragraph-index="0"
|
|
282
267
|
>
|
|
283
268
|
<div
|
|
284
|
-
class="
|
|
269
|
+
class="paragraph"
|
|
285
270
|
>
|
|
286
|
-
|
|
287
|
-
class="paragraph"
|
|
288
|
-
data-perseus-paragraph-index="0"
|
|
289
|
-
>
|
|
290
|
-
<div
|
|
291
|
-
class="paragraph"
|
|
292
|
-
>
|
|
293
|
-
An array of isosceles triangles. A triangle has height A. Two smaller triangle, one with height B and one with height C, have approximately the same combined height as A.
|
|
294
|
-
</div>
|
|
295
|
-
</div>
|
|
271
|
+
An array of isosceles triangles. A triangle has height A. Two smaller triangle, one with height B and one with height C, have approximately the same combined height as A.
|
|
296
272
|
</div>
|
|
297
|
-
</
|
|
298
|
-
</
|
|
273
|
+
</div>
|
|
274
|
+
</div>
|
|
275
|
+
</span>
|
|
276
|
+
<div
|
|
277
|
+
class="perseus-image-caption"
|
|
278
|
+
>
|
|
299
279
|
<div
|
|
300
|
-
class="perseus-
|
|
280
|
+
class="perseus-renderer perseus-renderer-responsive"
|
|
301
281
|
>
|
|
302
|
-
<
|
|
303
|
-
class="
|
|
282
|
+
<div
|
|
283
|
+
class="paragraph"
|
|
284
|
+
data-perseus-paragraph-index="0"
|
|
304
285
|
>
|
|
305
286
|
<div
|
|
306
|
-
class="
|
|
287
|
+
class="paragraph"
|
|
307
288
|
>
|
|
308
|
-
|
|
309
|
-
class="paragraph"
|
|
310
|
-
data-perseus-paragraph-index="0"
|
|
311
|
-
>
|
|
312
|
-
<div
|
|
313
|
-
class="paragraph"
|
|
314
|
-
>
|
|
315
|
-
Image Caption
|
|
316
|
-
</div>
|
|
317
|
-
</div>
|
|
289
|
+
Image Caption
|
|
318
290
|
</div>
|
|
319
|
-
</
|
|
291
|
+
</div>
|
|
320
292
|
</div>
|
|
321
293
|
</div>
|
|
322
294
|
</div>
|
|
323
295
|
</div>
|
|
324
296
|
</div>
|
|
325
297
|
</div>
|
|
298
|
+
</div>
|
|
299
|
+
<div
|
|
300
|
+
class="perseus-column"
|
|
301
|
+
>
|
|
326
302
|
<div
|
|
327
|
-
class="perseus-column"
|
|
303
|
+
class="perseus-column-content"
|
|
328
304
|
>
|
|
329
305
|
<div
|
|
330
|
-
class="
|
|
306
|
+
class="paragraph"
|
|
331
307
|
>
|
|
332
|
-
|
|
333
|
-
|
|
308
|
+
A quilter wants to make the design shown at left using the Golden Ratio. Specifically, he wants the ratio of the triangle heights
|
|
309
|
+
<span
|
|
310
|
+
style="white-space: nowrap;"
|
|
334
311
|
>
|
|
335
|
-
|
|
312
|
+
<span />
|
|
336
313
|
<span
|
|
337
|
-
|
|
314
|
+
class="mock-TeX"
|
|
338
315
|
>
|
|
339
|
-
|
|
340
|
-
<span
|
|
341
|
-
class="mock-TeX"
|
|
342
|
-
>
|
|
343
|
-
A:B
|
|
344
|
-
</span>
|
|
345
|
-
<span />
|
|
316
|
+
A:B
|
|
346
317
|
</span>
|
|
347
|
-
|
|
318
|
+
<span />
|
|
319
|
+
</span>
|
|
320
|
+
and
|
|
321
|
+
<span
|
|
322
|
+
style="white-space: nowrap;"
|
|
323
|
+
>
|
|
324
|
+
<span />
|
|
348
325
|
<span
|
|
349
|
-
|
|
326
|
+
class="mock-TeX"
|
|
350
327
|
>
|
|
351
|
-
|
|
352
|
-
<span
|
|
353
|
-
class="mock-TeX"
|
|
354
|
-
>
|
|
355
|
-
B:C
|
|
356
|
-
</span>
|
|
357
|
-
<span />
|
|
328
|
+
B:C
|
|
358
329
|
</span>
|
|
359
|
-
|
|
330
|
+
<span />
|
|
331
|
+
</span>
|
|
332
|
+
to each equal
|
|
333
|
+
<span
|
|
334
|
+
style="white-space: nowrap;"
|
|
335
|
+
>
|
|
336
|
+
<span />
|
|
360
337
|
<span
|
|
361
|
-
|
|
338
|
+
class="mock-TeX"
|
|
362
339
|
>
|
|
363
|
-
|
|
364
|
-
<span
|
|
365
|
-
class="mock-TeX"
|
|
366
|
-
>
|
|
367
|
-
1.62
|
|
368
|
-
</span>
|
|
369
|
-
<span />
|
|
340
|
+
1.62
|
|
370
341
|
</span>
|
|
371
|
-
|
|
342
|
+
<span />
|
|
343
|
+
</span>
|
|
344
|
+
. If the quilter makes the triangle height
|
|
345
|
+
<span
|
|
346
|
+
style="white-space: nowrap;"
|
|
347
|
+
>
|
|
348
|
+
<span />
|
|
372
349
|
<span
|
|
373
|
-
|
|
350
|
+
class="mock-TeX"
|
|
374
351
|
>
|
|
375
|
-
|
|
376
|
-
<span
|
|
377
|
-
class="mock-TeX"
|
|
378
|
-
>
|
|
379
|
-
A=8\\ \\text{in}
|
|
380
|
-
</span>
|
|
381
|
-
<span />
|
|
352
|
+
A=8\\ \\text{in}
|
|
382
353
|
</span>
|
|
383
|
-
|
|
354
|
+
<span />
|
|
355
|
+
</span>
|
|
356
|
+
, approximately how tall should he make triangle height
|
|
357
|
+
<span
|
|
358
|
+
style="white-space: nowrap;"
|
|
359
|
+
>
|
|
360
|
+
<span />
|
|
384
361
|
<span
|
|
385
|
-
|
|
362
|
+
class="mock-TeX"
|
|
386
363
|
>
|
|
387
|
-
|
|
388
|
-
<span
|
|
389
|
-
class="mock-TeX"
|
|
390
|
-
>
|
|
391
|
-
C
|
|
392
|
-
</span>
|
|
393
|
-
<span />
|
|
364
|
+
C
|
|
394
365
|
</span>
|
|
395
|
-
|
|
396
|
-
</
|
|
366
|
+
<span />
|
|
367
|
+
</span>
|
|
368
|
+
?
|
|
397
369
|
</div>
|
|
398
370
|
</div>
|
|
399
371
|
</div>
|
|
400
372
|
</div>
|
|
401
373
|
</div>
|
|
402
|
-
</
|
|
374
|
+
</div>
|
|
403
375
|
</div>
|
|
404
376
|
`;
|