@khanacademy/perseus 5.0.0 → 6.0.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.
Files changed (113) hide show
  1. package/CHANGELOG.md +42 -0
  2. package/dist/components/fixed-to-responsive.d.ts +27 -1
  3. package/dist/components/fixed-to-responsive.js.flow +27 -1
  4. package/dist/components/graph.d.ts +42 -26
  5. package/dist/components/graph.js.flow +42 -28
  6. package/dist/components/graphie.d.ts +34 -22
  7. package/dist/components/graphie.js.flow +37 -24
  8. package/dist/components/hud.d.ts +8 -14
  9. package/dist/components/hud.js.flow +7 -14
  10. package/dist/components/inline-icon.d.ts +9 -19
  11. package/dist/components/inline-icon.js.flow +26 -13
  12. package/dist/components/lint.d.ts +41 -13
  13. package/dist/components/lint.js.flow +42 -13
  14. package/dist/components/math-output.d.ts +15 -11
  15. package/dist/components/math-output.js.flow +15 -11
  16. package/dist/components/sortable.d.ts +17 -9
  17. package/dist/components/sortable.js.flow +22 -9
  18. package/dist/components/svg-image.d.ts +5 -3
  19. package/dist/components/svg-image.js.flow +5 -3
  20. package/dist/components/tooltip.d.ts +45 -4
  21. package/dist/components/tooltip.js.flow +44 -31
  22. package/dist/es/index.css +0 -3
  23. package/dist/es/index.js +477 -648
  24. package/dist/es/index.js.map +1 -1
  25. package/dist/index.css +0 -3
  26. package/dist/index.js +481 -645
  27. package/dist/index.js.map +1 -1
  28. package/dist/perseus-types.d.ts +11 -9
  29. package/dist/perseus-types.js.flow +11 -9
  30. package/dist/renderer.d.ts +2 -2
  31. package/dist/renderer.js.flow +1 -3
  32. package/dist/styles/shared.d.ts +0 -1
  33. package/dist/styles/shared.js.flow +0 -1
  34. package/dist/types.d.ts +0 -10
  35. package/dist/types.js.flow +0 -13
  36. package/dist/util/a11y.d.ts +0 -1
  37. package/dist/util/a11y.js.flow +0 -1
  38. package/dist/util/interactive.d.ts +2 -0
  39. package/dist/util/interactive.js.flow +2 -0
  40. package/dist/util.d.ts +3 -3
  41. package/dist/util.js.flow +4 -3
  42. package/dist/widgets/grapher.d.ts +1 -1
  43. package/dist/widgets/grapher.js.flow +12 -3
  44. package/dist/widgets/matcher.d.ts +7 -3
  45. package/dist/widgets/matcher.js.flow +7 -3
  46. package/dist/widgets/number-line.d.ts +1 -1
  47. package/dist/widgets/number-line.js.flow +1 -1
  48. package/package.json +2 -2
  49. package/src/__tests__/__snapshots__/item-renderer.test.tsx.snap +151 -159
  50. package/src/__tests__/__snapshots__/renderer.test.tsx.snap +358 -394
  51. package/src/__tests__/__snapshots__/server-item-renderer.test.tsx.snap +169 -189
  52. package/src/components/__stories__/lint.stories.tsx +56 -21
  53. package/src/components/__stories__/sortable.stories.tsx +5 -5
  54. package/src/components/__stories__/tooltip.stories.tsx +52 -0
  55. package/src/components/__tests__/__snapshots__/sortable.test.tsx.snap +114 -30
  56. package/src/components/__tests__/__snapshots__/sorter.test.tsx.snap +172 -204
  57. package/src/components/__tests__/sortable.test.tsx +54 -16
  58. package/src/components/__tests__/sorter.test.tsx +12 -9
  59. package/src/components/fixed-to-responsive.tsx +43 -38
  60. package/src/components/graph.tsx +95 -81
  61. package/src/components/graphie.tsx +62 -32
  62. package/src/components/hud.tsx +104 -115
  63. package/src/components/inline-icon.tsx +15 -32
  64. package/src/components/input-with-examples.tsx +4 -4
  65. package/src/components/lint.tsx +47 -41
  66. package/src/components/math-output.tsx +17 -11
  67. package/src/components/simple-keypad-input.tsx +2 -2
  68. package/src/components/sortable.tsx +134 -94
  69. package/src/components/svg-image.tsx +10 -11
  70. package/src/components/tooltip.tsx +189 -171
  71. package/src/interactive2/types.ts +2 -2
  72. package/src/multi-items/__tests__/__snapshots__/multi-renderer.test.tsx.snap +708 -764
  73. package/src/perseus-types.ts +13 -9
  74. package/src/renderer.tsx +11 -22
  75. package/src/types.ts +0 -18
  76. package/src/util/interactive.ts +18 -5
  77. package/src/util/tex.ts +13 -77
  78. package/src/util.ts +3 -4
  79. package/src/widgets/__tests__/__snapshots__/categorizer.test.ts.snap +717 -773
  80. package/src/widgets/__tests__/__snapshots__/cs-program.test.ts.snap +28 -36
  81. package/src/widgets/__tests__/__snapshots__/definition.test.ts.snap +52 -60
  82. package/src/widgets/__tests__/__snapshots__/dropdown.test.ts.snap +100 -108
  83. package/src/widgets/__tests__/__snapshots__/explanation.test.ts.snap +212 -260
  84. package/src/widgets/__tests__/__snapshots__/graded-group-set-jipt.test.ts.snap +613 -641
  85. package/src/widgets/__tests__/__snapshots__/graded-group-set.test.ts.snap +249 -261
  86. package/src/widgets/__tests__/__snapshots__/graded-group.test.ts.snap +671 -735
  87. package/src/widgets/__tests__/__snapshots__/grapher.test.ts.snap +2676 -2684
  88. package/src/widgets/__tests__/__snapshots__/group.test.tsx.snap +938 -1002
  89. package/src/widgets/__tests__/__snapshots__/iframe.test.ts.snap +28 -36
  90. package/src/widgets/__tests__/__snapshots__/image.test.ts.snap +227 -255
  91. package/src/widgets/__tests__/__snapshots__/input-number.test.ts.snap +353 -357
  92. package/src/widgets/__tests__/__snapshots__/interaction.test.ts.snap +255 -259
  93. package/src/widgets/__tests__/__snapshots__/interactive-graph.test.ts.snap +2401 -2433
  94. package/src/widgets/__tests__/__snapshots__/matcher.test.tsx.snap +600 -756
  95. package/src/widgets/__tests__/__snapshots__/matrix.test.ts.snap +420 -428
  96. package/src/widgets/__tests__/__snapshots__/number-line.test.ts.snap +762 -770
  97. package/src/widgets/__tests__/__snapshots__/numeric-input.test.ts.snap +373 -393
  98. package/src/widgets/__tests__/__snapshots__/orderer.test.ts.snap +116 -148
  99. package/src/widgets/__tests__/__snapshots__/passage-ref.test.ts.snap +289 -301
  100. package/src/widgets/__tests__/__snapshots__/passage.test.tsx.snap +1679 -1711
  101. package/src/widgets/__tests__/__snapshots__/radio.test.ts.snap +2692 -2960
  102. package/src/widgets/__tests__/__snapshots__/video.test.ts.snap +90 -98
  103. package/src/widgets/__tests__/matcher.test.tsx +33 -9
  104. package/src/widgets/expression.tsx +9 -6
  105. package/src/widgets/grapher.tsx +3 -3
  106. package/src/widgets/image.tsx +2 -2
  107. package/src/widgets/interactive-graph.tsx +5 -5
  108. package/src/widgets/matcher.tsx +43 -24
  109. package/src/widgets/number-line.tsx +1 -1
  110. package/src/widgets/simulator.tsx +4 -6
  111. package/{tsconfig.json → tsconfig-build.json} +6 -6
  112. package/tsconfig-build.tsbuildinfo +1 -0
  113. package/tsconfig.tsbuildinfo +0 -1
package/src/widgets/__tests__/__snapshots__/numeric-input.test.ts.snap CHANGED
@@ -2,487 +2,467 @@
2
2
 
3
3
  exports[`Numeric input widget styles differently on mobile: mobile render 1`] = `
4
4
  <div>
5
- <span
6
- class="mock-KatexProvider"
5
+ <div
6
+ class="perseus-renderer perseus-renderer-responsive"
7
7
  >
8
8
  <div
9
- class="perseus-renderer perseus-renderer-responsive"
9
+ class="paragraph"
10
+ data-perseus-paragraph-index="0"
10
11
  >
11
12
  <div
12
13
  class="paragraph"
13
- data-perseus-paragraph-index="0"
14
14
  >
15
- <div
16
- class="paragraph"
15
+ <span
16
+ style="white-space: nowrap;"
17
17
  >
18
+ <span />
18
19
  <span
19
- style="white-space: nowrap;"
20
+ class="mock-TeX"
20
21
  >
21
- <span />
22
- <span
23
- class="mock-TeX"
24
- >
25
- 5008 \\div 4 =
26
- </span>
27
- <span />
22
+ 5008 \\div 4 =
28
23
  </span>
29
-
24
+ <span />
25
+ </span>
26
+
27
+ <div
28
+ class="perseus-widget-container widget-nohighlight widget-inline-block"
29
+ >
30
30
  <div
31
- class="perseus-widget-container widget-nohighlight widget-inline-block"
31
+ aria-label="Math input box Tap with one or two fingers to open keyboard"
32
+ class="initial_4qg14c-o_O-input_1n1c032"
33
+ role="textbox"
32
34
  >
33
35
  <div
34
- aria-label="Math input box Tap with one or two fingers to open keyboard"
35
- class="initial_4qg14c-o_O-input_1n1c032"
36
- role="textbox"
36
+ class="keypad-input"
37
+ tabindex="0"
37
38
  >
38
39
  <div
39
- class="keypad-input"
40
- tabindex="0"
40
+ class="mq-editable-field mq-math-mode"
41
+ style="background-color: white; min-height: 44px; min-width: 64px; max-width: 128px; box-sizing: border-box; position: relative; border-style: solid; border-color: rgba(33,36,44,0.50); border-radius: 4px; color: rgb(33, 36, 44); border-width: 1px;"
41
42
  >
42
- <div
43
- class="mq-editable-field mq-math-mode"
44
- style="background-color: white; min-height: 44px; min-width: 64px; max-width: 128px; box-sizing: border-box; position: relative; border-style: solid; border-color: rgba(33,36,44,0.50); border-radius: 4px; color: rgb(33, 36, 44); border-width: 1px;"
43
+ <span
44
+ class="mq-textarea"
45
45
  >
46
- <span
47
- class="mq-textarea"
48
- >
49
- <span />
50
- </span>
51
- <span
52
- class="mq-root-block mq-empty"
53
- mathquill-block-id="1"
54
- style="padding: 10px 11px 8px 11px; font-size: 18pt;"
55
- />
56
- </div>
46
+ <span />
47
+ </span>
48
+ <span
49
+ class="mq-root-block mq-empty"
50
+ mathquill-block-id="1"
51
+ style="padding: 10px 11px 8px 11px; font-size: 18pt;"
52
+ />
57
53
  </div>
58
54
  </div>
59
55
  </div>
60
-
61
56
  </div>
57
+
62
58
  </div>
63
59
  </div>
64
- </span>
60
+ </div>
65
61
  </div>
66
62
  `;
67
63
 
68
64
  exports[`numeric-input widget Should render predictably: after interaction 1`] = `
69
65
  <div>
70
- <span
71
- class="mock-KatexProvider"
66
+ <div
67
+ class="perseus-renderer perseus-renderer-responsive"
72
68
  >
73
69
  <div
74
- class="perseus-renderer perseus-renderer-responsive"
70
+ class="paragraph"
71
+ data-perseus-paragraph-index="0"
75
72
  >
76
73
  <div
77
74
  class="paragraph"
78
- data-perseus-paragraph-index="0"
79
75
  >
80
- <div
81
- class="paragraph"
76
+ <span
77
+ style="white-space: nowrap;"
82
78
  >
79
+ <span />
83
80
  <span
84
- style="white-space: nowrap;"
81
+ class="mock-TeX"
85
82
  >
86
- <span />
87
- <span
88
- class="mock-TeX"
89
- >
90
- 5008 \\div 4 =
91
- </span>
92
- <span />
83
+ 5008 \\div 4 =
93
84
  </span>
94
-
95
- <div
96
- class="perseus-widget-container widget-nohighlight widget-inline-block"
97
- >
98
- <div>
99
- <span>
100
- <div>
101
- <input
102
- aria-label="Your answer:"
103
- autocapitalize="off"
104
- autocomplete="off"
105
- autocorrect="off"
106
- class="input_1t4b01j-o_O-LabelMedium_1rew30o-o_O-default_1r2dwp3-o_O-focused_1z0d9ul-o_O-input_19vw1dn"
107
- id="input-with-examples-bnVtZXJpYy1pbnB1dCAx"
108
- type="text"
109
- value="1252"
110
- />
111
- </div>
85
+ <span />
86
+ </span>
87
+
88
+ <div
89
+ class="perseus-widget-container widget-nohighlight widget-inline-block"
90
+ >
91
+ <div>
92
+ <span>
93
+ <div>
94
+ <input
95
+ aria-label="Your answer:"
96
+ autocapitalize="off"
97
+ autocomplete="off"
98
+ autocorrect="off"
99
+ class="input_1t4b01j-o_O-LabelMedium_1rew30o-o_O-default_1r2dwp3-o_O-focused_1z0d9ul-o_O-input_19vw1dn"
100
+ id="input-with-examples-bnVtZXJpYy1pbnB1dCAx"
101
+ type="text"
102
+ value="1252"
103
+ />
104
+ </div>
105
+ <div
106
+ style="position: relative; height: 0px; display: none;"
107
+ >
112
108
  <div
113
- style="position: relative; height: 0px; display: none;"
109
+ class="tooltipContainer"
110
+ style="position: absolute; left: 0px;"
114
111
  >
115
112
  <div
116
- class="tooltipContainer"
117
- style="position: absolute; left: 0px;"
113
+ style="display: block; position: relative; visibility: visible; left: 0px; top: -1px; width: 12px; height: 11px; margin-top: -1px; margin-bottom: -2px; z-index: 10;"
118
114
  >
119
115
  <div
120
- style="display: block; position: relative; visibility: visible; left: 0px; top: -1px; width: 12px; height: 11px; margin-top: -1px; margin-bottom: -2px; z-index: 10;"
121
- >
122
- <div
123
- style="display: block; height: 0px; width: 0px; position: absolute; left: 0px; top: -1px; border-right: 12px solid transparent; border-bottom: 12px solid #ccc;"
124
- />
125
- <div
126
- style="display: block; height: 0px; width: 0px; position: absolute; left: 1px; top: 1px; border-right: 10px solid transparent; border-bottom: 10px solid white;"
127
- />
128
- </div>
116
+ style="display: block; height: 0px; width: 0px; position: absolute; left: 0px; top: -1px; border-right: 12px solid transparent; border-bottom: 12px solid #ccc;"
117
+ />
118
+ <div
119
+ style="display: block; height: 0px; width: 0px; position: absolute; left: 1px; top: 1px; border-right: 10px solid transparent; border-bottom: 10px solid white;"
120
+ />
121
+ </div>
122
+ <div
123
+ class="perseus-formats-tooltip preview-measure"
124
+ style="position: relative; top: 0px; left: 0px; border: 1px solid #ccc; box-shadow: 0 1px 3px #ccc; z-index: 9;"
125
+ >
129
126
  <div
130
- class="perseus-formats-tooltip preview-measure"
131
- style="position: relative; top: 0px; left: 0px; border: 1px solid #ccc; box-shadow: 0 1px 3px #ccc; z-index: 9;"
127
+ id="input-with-examples-bnVtZXJpYy1pbnB1dCAx"
132
128
  >
133
129
  <div
134
- id="input-with-examples-bnVtZXJpYy1pbnB1dCAx"
130
+ class="perseus-renderer perseus-renderer-responsive"
135
131
  >
136
- <span
137
- class="mock-KatexProvider"
132
+ <div
133
+ class="paragraph"
134
+ data-perseus-paragraph-index="0"
138
135
  >
139
- <div
140
- class="perseus-renderer perseus-renderer-responsive"
141
- >
142
- <div
143
- class="paragraph"
144
- data-perseus-paragraph-index="0"
145
- >
146
- <ul>
147
- <li>
148
- <strong>
149
- Your answer should be
150
- </strong>
151
- </li>
152
- <li>
153
- an integer, like
154
- <span
155
- style="white-space: nowrap;"
156
- >
157
- <span />
158
- <span
159
- class="mock-TeX"
160
- >
161
- 6
162
- </span>
163
- <span />
164
- </span>
165
- </li>
166
- <li>
167
- a
168
- <em>
169
- simplified proper
170
- </em>
171
- fraction, like
172
- <span
173
- style="white-space: nowrap;"
174
- >
175
- <span />
176
- <span
177
- class="mock-TeX"
178
- >
179
- 3/5
180
- </span>
181
- <span />
182
- </span>
183
- </li>
184
- <li>
185
- a
186
- <em>
187
- simplified improper
188
- </em>
189
- fraction, like
190
- <span
191
- style="white-space: nowrap;"
192
- >
193
- <span />
194
- <span
195
- class="mock-TeX"
196
- >
197
- 7/4
198
- </span>
199
- <span />
200
- </span>
201
- </li>
202
- <li>
203
- a mixed number, like
204
- <span
205
- style="white-space: nowrap;"
206
- >
207
- <span />
208
- <span
209
- class="mock-TeX"
210
- >
211
- 1\\ 3/4
212
- </span>
213
- <span />
214
- </span>
215
- </li>
216
- <li>
217
- an
218
- <em>
219
- exact
220
- </em>
221
- decimal, like
222
- <span
223
- style="white-space: nowrap;"
224
- >
225
- <span />
226
- <span
227
- class="mock-TeX"
228
- >
229
- 0.75
230
- </span>
231
- <span />
232
- </span>
233
- </li>
234
- <li>
235
- a multiple of pi, like
236
- <span
237
- style="white-space: nowrap;"
238
- >
239
- <span />
240
- <span
241
- class="mock-TeX"
242
- >
243
- 12\\ \\text{pi}
244
- </span>
245
- <span />
246
- </span>
247
- or
248
- <span
249
- style="white-space: nowrap;"
250
- >
251
- <span />
252
- <span
253
- class="mock-TeX"
254
- >
255
- 2/3\\ \\text{pi}
256
- </span>
257
- <span />
258
- </span>
259
- </li>
260
- </ul>
261
- </div>
262
- </div>
263
- </span>
136
+ <ul>
137
+ <li>
138
+ <strong>
139
+ Your answer should be
140
+ </strong>
141
+ </li>
142
+ <li>
143
+ an integer, like
144
+ <span
145
+ style="white-space: nowrap;"
146
+ >
147
+ <span />
148
+ <span
149
+ class="mock-TeX"
150
+ >
151
+ 6
152
+ </span>
153
+ <span />
154
+ </span>
155
+ </li>
156
+ <li>
157
+ a
158
+ <em>
159
+ simplified proper
160
+ </em>
161
+ fraction, like
162
+ <span
163
+ style="white-space: nowrap;"
164
+ >
165
+ <span />
166
+ <span
167
+ class="mock-TeX"
168
+ >
169
+ 3/5
170
+ </span>
171
+ <span />
172
+ </span>
173
+ </li>
174
+ <li>
175
+ a
176
+ <em>
177
+ simplified improper
178
+ </em>
179
+ fraction, like
180
+ <span
181
+ style="white-space: nowrap;"
182
+ >
183
+ <span />
184
+ <span
185
+ class="mock-TeX"
186
+ >
187
+ 7/4
188
+ </span>
189
+ <span />
190
+ </span>
191
+ </li>
192
+ <li>
193
+ a mixed number, like
194
+ <span
195
+ style="white-space: nowrap;"
196
+ >
197
+ <span />
198
+ <span
199
+ class="mock-TeX"
200
+ >
201
+ 1\\ 3/4
202
+ </span>
203
+ <span />
204
+ </span>
205
+ </li>
206
+ <li>
207
+ an
208
+ <em>
209
+ exact
210
+ </em>
211
+ decimal, like
212
+ <span
213
+ style="white-space: nowrap;"
214
+ >
215
+ <span />
216
+ <span
217
+ class="mock-TeX"
218
+ >
219
+ 0.75
220
+ </span>
221
+ <span />
222
+ </span>
223
+ </li>
224
+ <li>
225
+ a multiple of pi, like
226
+ <span
227
+ style="white-space: nowrap;"
228
+ >
229
+ <span />
230
+ <span
231
+ class="mock-TeX"
232
+ >
233
+ 12\\ \\text{pi}
234
+ </span>
235
+ <span />
236
+ </span>
237
+ or
238
+ <span
239
+ style="white-space: nowrap;"
240
+ >
241
+ <span />
242
+ <span
243
+ class="mock-TeX"
244
+ >
245
+ 2/3\\ \\text{pi}
246
+ </span>
247
+ <span />
248
+ </span>
249
+ </li>
250
+ </ul>
251
+ </div>
264
252
  </div>
265
253
  </div>
266
254
  </div>
267
255
  </div>
268
- </span>
269
- </div>
256
+ </div>
257
+ </span>
270
258
  </div>
271
-
272
259
  </div>
260
+
273
261
  </div>
274
262
  </div>
275
- </span>
263
+ </div>
276
264
  </div>
277
265
  `;
278
266
 
279
267
  exports[`numeric-input widget Should render predictably: first render 1`] = `
280
268
  <div>
281
- <span
282
- class="mock-KatexProvider"
269
+ <div
270
+ class="perseus-renderer perseus-renderer-responsive"
283
271
  >
284
272
  <div
285
- class="perseus-renderer perseus-renderer-responsive"
273
+ class="paragraph"
274
+ data-perseus-paragraph-index="0"
286
275
  >
287
276
  <div
288
277
  class="paragraph"
289
- data-perseus-paragraph-index="0"
290
278
  >
291
- <div
292
- class="paragraph"
279
+ <span
280
+ style="white-space: nowrap;"
293
281
  >
282
+ <span />
294
283
  <span
295
- style="white-space: nowrap;"
284
+ class="mock-TeX"
296
285
  >
297
- <span />
298
- <span
299
- class="mock-TeX"
300
- >
301
- 5008 \\div 4 =
302
- </span>
303
- <span />
286
+ 5008 \\div 4 =
304
287
  </span>
305
-
306
- <div
307
- class="perseus-widget-container widget-nohighlight widget-inline-block"
308
- >
309
- <div>
310
- <span>
311
- <div>
312
- <input
313
- aria-label="Your answer:"
314
- autocapitalize="off"
315
- autocomplete="off"
316
- autocorrect="off"
317
- class="input_1t4b01j-o_O-LabelMedium_1rew30o-o_O-default_1r2dwp3-o_O-input_19vw1dn"
318
- id="input-with-examples-bnVtZXJpYy1pbnB1dCAx"
319
- type="text"
320
- value=""
321
- />
322
- </div>
288
+ <span />
289
+ </span>
290
+
291
+ <div
292
+ class="perseus-widget-container widget-nohighlight widget-inline-block"
293
+ >
294
+ <div>
295
+ <span>
296
+ <div>
297
+ <input
298
+ aria-label="Your answer:"
299
+ autocapitalize="off"
300
+ autocomplete="off"
301
+ autocorrect="off"
302
+ class="input_1t4b01j-o_O-LabelMedium_1rew30o-o_O-default_1r2dwp3-o_O-input_19vw1dn"
303
+ id="input-with-examples-bnVtZXJpYy1pbnB1dCAx"
304
+ type="text"
305
+ value=""
306
+ />
307
+ </div>
308
+ <div
309
+ style="position: relative; height: 0px; display: none;"
310
+ >
323
311
  <div
324
- style="position: relative; height: 0px; display: none;"
312
+ class="tooltipContainer"
313
+ style="position: absolute; left: 0px;"
325
314
  >
326
315
  <div
327
- class="tooltipContainer"
328
- style="position: absolute; left: 0px;"
316
+ style="display: block; position: relative; visibility: visible; left: 0px; top: -1px; width: 12px; height: 11px; margin-top: -1px; margin-bottom: -2px; z-index: 10;"
329
317
  >
330
318
  <div
331
- style="display: block; position: relative; visibility: visible; left: 0px; top: -1px; width: 12px; height: 11px; margin-top: -1px; margin-bottom: -2px; z-index: 10;"
332
- >
333
- <div
334
- style="display: block; height: 0px; width: 0px; position: absolute; left: 0px; top: -1px; border-right: 12px solid transparent; border-bottom: 12px solid #ccc;"
335
- />
336
- <div
337
- style="display: block; height: 0px; width: 0px; position: absolute; left: 1px; top: 1px; border-right: 10px solid transparent; border-bottom: 10px solid white;"
338
- />
339
- </div>
319
+ style="display: block; height: 0px; width: 0px; position: absolute; left: 0px; top: -1px; border-right: 12px solid transparent; border-bottom: 12px solid #ccc;"
320
+ />
340
321
  <div
341
- class="perseus-formats-tooltip preview-measure"
342
- style="position: relative; top: 0px; left: 0px; border: 1px solid #ccc; box-shadow: 0 1px 3px #ccc; z-index: 9;"
322
+ style="display: block; height: 0px; width: 0px; position: absolute; left: 1px; top: 1px; border-right: 10px solid transparent; border-bottom: 10px solid white;"
323
+ />
324
+ </div>
325
+ <div
326
+ class="perseus-formats-tooltip preview-measure"
327
+ style="position: relative; top: 0px; left: 0px; border: 1px solid #ccc; box-shadow: 0 1px 3px #ccc; z-index: 9;"
328
+ >
329
+ <div
330
+ id="input-with-examples-bnVtZXJpYy1pbnB1dCAx"
343
331
  >
344
332
  <div
345
- id="input-with-examples-bnVtZXJpYy1pbnB1dCAx"
333
+ class="perseus-renderer perseus-renderer-responsive"
346
334
  >
347
- <span
348
- class="mock-KatexProvider"
335
+ <div
336
+ class="paragraph"
337
+ data-perseus-paragraph-index="0"
349
338
  >
350
- <div
351
- class="perseus-renderer perseus-renderer-responsive"
352
- >
353
- <div
354
- class="paragraph"
355
- data-perseus-paragraph-index="0"
356
- >
357
- <ul>
358
- <li>
359
- <strong>
360
- Your answer should be
361
- </strong>
362
- </li>
363
- <li>
364
- an integer, like
365
- <span
366
- style="white-space: nowrap;"
367
- >
368
- <span />
369
- <span
370
- class="mock-TeX"
371
- >
372
- 6
373
- </span>
374
- <span />
375
- </span>
376
- </li>
377
- <li>
378
- a
379
- <em>
380
- simplified proper
381
- </em>
382
- fraction, like
383
- <span
384
- style="white-space: nowrap;"
385
- >
386
- <span />
387
- <span
388
- class="mock-TeX"
389
- >
390
- 3/5
391
- </span>
392
- <span />
393
- </span>
394
- </li>
395
- <li>
396
- a
397
- <em>
398
- simplified improper
399
- </em>
400
- fraction, like
401
- <span
402
- style="white-space: nowrap;"
403
- >
404
- <span />
405
- <span
406
- class="mock-TeX"
407
- >
408
- 7/4
409
- </span>
410
- <span />
411
- </span>
412
- </li>
413
- <li>
414
- a mixed number, like
415
- <span
416
- style="white-space: nowrap;"
417
- >
418
- <span />
419
- <span
420
- class="mock-TeX"
421
- >
422
- 1\\ 3/4
423
- </span>
424
- <span />
425
- </span>
426
- </li>
427
- <li>
428
- an
429
- <em>
430
- exact
431
- </em>
432
- decimal, like
433
- <span
434
- style="white-space: nowrap;"
435
- >
436
- <span />
437
- <span
438
- class="mock-TeX"
439
- >
440
- 0.75
441
- </span>
442
- <span />
443
- </span>
444
- </li>
445
- <li>
446
- a multiple of pi, like
447
- <span
448
- style="white-space: nowrap;"
449
- >
450
- <span />
451
- <span
452
- class="mock-TeX"
453
- >
454
- 12\\ \\text{pi}
455
- </span>
456
- <span />
457
- </span>
458
- or
459
- <span
460
- style="white-space: nowrap;"
461
- >
462
- <span />
463
- <span
464
- class="mock-TeX"
465
- >
466
- 2/3\\ \\text{pi}
467
- </span>
468
- <span />
469
- </span>
470
- </li>
471
- </ul>
472
- </div>
473
- </div>
474
- </span>
339
+ <ul>
340
+ <li>
341
+ <strong>
342
+ Your answer should be
343
+ </strong>
344
+ </li>
345
+ <li>
346
+ an integer, like
347
+ <span
348
+ style="white-space: nowrap;"
349
+ >
350
+ <span />
351
+ <span
352
+ class="mock-TeX"
353
+ >
354
+ 6
355
+ </span>
356
+ <span />
357
+ </span>
358
+ </li>
359
+ <li>
360
+ a
361
+ <em>
362
+ simplified proper
363
+ </em>
364
+ fraction, like
365
+ <span
366
+ style="white-space: nowrap;"
367
+ >
368
+ <span />
369
+ <span
370
+ class="mock-TeX"
371
+ >
372
+ 3/5
373
+ </span>
374
+ <span />
375
+ </span>
376
+ </li>
377
+ <li>
378
+ a
379
+ <em>
380
+ simplified improper
381
+ </em>
382
+ fraction, like
383
+ <span
384
+ style="white-space: nowrap;"
385
+ >
386
+ <span />
387
+ <span
388
+ class="mock-TeX"
389
+ >
390
+ 7/4
391
+ </span>
392
+ <span />
393
+ </span>
394
+ </li>
395
+ <li>
396
+ a mixed number, like
397
+ <span
398
+ style="white-space: nowrap;"
399
+ >
400
+ <span />
401
+ <span
402
+ class="mock-TeX"
403
+ >
404
+ 1\\ 3/4
405
+ </span>
406
+ <span />
407
+ </span>
408
+ </li>
409
+ <li>
410
+ an
411
+ <em>
412
+ exact
413
+ </em>
414
+ decimal, like
415
+ <span
416
+ style="white-space: nowrap;"
417
+ >
418
+ <span />
419
+ <span
420
+ class="mock-TeX"
421
+ >
422
+ 0.75
423
+ </span>
424
+ <span />
425
+ </span>
426
+ </li>
427
+ <li>
428
+ a multiple of pi, like
429
+ <span
430
+ style="white-space: nowrap;"
431
+ >
432
+ <span />
433
+ <span
434
+ class="mock-TeX"
435
+ >
436
+ 12\\ \\text{pi}
437
+ </span>
438
+ <span />
439
+ </span>
440
+ or
441
+ <span
442
+ style="white-space: nowrap;"
443
+ >
444
+ <span />
445
+ <span
446
+ class="mock-TeX"
447
+ >
448
+ 2/3\\ \\text{pi}
449
+ </span>
450
+ <span />
451
+ </span>
452
+ </li>
453
+ </ul>
454
+ </div>
475
455
  </div>
476
456
  </div>
477
457
  </div>
478
458
  </div>
479
- </span>
480
- </div>
459
+ </div>
460
+ </span>
481
461
  </div>
482
-
483
462
  </div>
463
+
484
464
  </div>
485
465
  </div>
486
- </span>
466
+ </div>
487
467
  </div>
488
468
  `;