@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.
Files changed (115) hide show
  1. package/CHANGELOG.md +62 -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 +478 -649
  24. package/dist/es/index.js.map +1 -1
  25. package/dist/index.css +0 -3
  26. package/dist/index.js +482 -646
  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/mixins/provide-keypad.tsx +2 -2
  73. package/src/multi-items/__tests__/__snapshots__/multi-renderer.test.tsx.snap +708 -764
  74. package/src/perseus-types.ts +13 -9
  75. package/src/renderer.tsx +11 -22
  76. package/src/types.ts +0 -18
  77. package/src/util/interactive.ts +18 -5
  78. package/src/util/tex.ts +13 -77
  79. package/src/util.ts +3 -4
  80. package/src/widgets/__stories__/test-keypad-context-wrapper.tsx +2 -2
  81. package/src/widgets/__tests__/__snapshots__/categorizer.test.ts.snap +717 -773
  82. package/src/widgets/__tests__/__snapshots__/cs-program.test.ts.snap +28 -36
  83. package/src/widgets/__tests__/__snapshots__/definition.test.ts.snap +52 -60
  84. package/src/widgets/__tests__/__snapshots__/dropdown.test.ts.snap +100 -108
  85. package/src/widgets/__tests__/__snapshots__/explanation.test.ts.snap +212 -260
  86. package/src/widgets/__tests__/__snapshots__/graded-group-set-jipt.test.ts.snap +613 -641
  87. package/src/widgets/__tests__/__snapshots__/graded-group-set.test.ts.snap +249 -261
  88. package/src/widgets/__tests__/__snapshots__/graded-group.test.ts.snap +671 -735
  89. package/src/widgets/__tests__/__snapshots__/grapher.test.ts.snap +2676 -2684
  90. package/src/widgets/__tests__/__snapshots__/group.test.tsx.snap +938 -1002
  91. package/src/widgets/__tests__/__snapshots__/iframe.test.ts.snap +28 -36
  92. package/src/widgets/__tests__/__snapshots__/image.test.ts.snap +227 -255
  93. package/src/widgets/__tests__/__snapshots__/input-number.test.ts.snap +353 -357
  94. package/src/widgets/__tests__/__snapshots__/interaction.test.ts.snap +255 -259
  95. package/src/widgets/__tests__/__snapshots__/interactive-graph.test.ts.snap +2401 -2433
  96. package/src/widgets/__tests__/__snapshots__/matcher.test.tsx.snap +600 -756
  97. package/src/widgets/__tests__/__snapshots__/matrix.test.ts.snap +420 -428
  98. package/src/widgets/__tests__/__snapshots__/number-line.test.ts.snap +762 -770
  99. package/src/widgets/__tests__/__snapshots__/numeric-input.test.ts.snap +373 -393
  100. package/src/widgets/__tests__/__snapshots__/orderer.test.ts.snap +116 -148
  101. package/src/widgets/__tests__/__snapshots__/passage-ref.test.ts.snap +289 -301
  102. package/src/widgets/__tests__/__snapshots__/passage.test.tsx.snap +1679 -1711
  103. package/src/widgets/__tests__/__snapshots__/radio.test.ts.snap +2692 -2960
  104. package/src/widgets/__tests__/__snapshots__/video.test.ts.snap +90 -98
  105. package/src/widgets/__tests__/matcher.test.tsx +33 -9
  106. package/src/widgets/expression.tsx +9 -6
  107. package/src/widgets/grapher.tsx +3 -3
  108. package/src/widgets/image.tsx +2 -2
  109. package/src/widgets/interactive-graph.tsx +5 -5
  110. package/src/widgets/matcher.tsx +43 -24
  111. package/src/widgets/number-line.tsx +1 -1
  112. package/src/widgets/simulator.tsx +4 -6
  113. package/{tsconfig.json → tsconfig-build.json} +6 -6
  114. package/tsconfig-build.tsbuildinfo +1 -0
  115. package/tsconfig.tsbuildinfo +0 -1
package/src/widgets/__tests__/__snapshots__/categorizer.test.ts.snap CHANGED
@@ -2,995 +2,939 @@
2
2
 
3
3
  exports[`categorizer widget should snapshot on mobile: first 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"
17
- >
18
- <strong>
19
- Classify each graph according to the kind of relationship it suggests.
20
- </strong>
21
- </div>
15
+ <strong>
16
+ Classify each graph according to the kind of relationship it suggests.
17
+ </strong>
22
18
  </div>
19
+ </div>
20
+ <div
21
+ class="paragraph perseus-paragraph-centered"
22
+ data-perseus-paragraph-index="1"
23
+ >
23
24
  <div
24
- class="paragraph perseus-paragraph-centered"
25
- data-perseus-paragraph-index="1"
25
+ class="perseus-block-math"
26
+ style="margin-left: -16px; margin-right: -16px;"
26
27
  >
27
28
  <div
28
- class="perseus-block-math"
29
- style="margin-left: -16px; margin-right: -16px;"
29
+ class="perseus-block-math-inner"
30
+ style="overflow-x: auto; overflow-y: hidden; margin-top: -10px; margin-bottom: -10px; transform: translate3d(0,0,0); padding: 10px 16px 10px 16px;"
30
31
  >
31
- <div
32
- class="perseus-block-math-inner"
33
- style="overflow-x: auto; overflow-y: hidden; margin-top: -10px; margin-bottom: -10px; transform: translate3d(0,0,0); padding: 10px 16px 10px 16px;"
32
+ <span
33
+ style="display: block; width: 100%; transform: scale(1, 1) translate(0, 8px); transform-origin: 0 0; opacity: 0;"
34
34
  >
35
35
  <span
36
- style="display: block; width: 100%; transform: scale(1, 1) translate(0, 8px); transform-origin: 0 0; opacity: 0;"
36
+ class="mock-TeX"
37
37
  >
38
- <span
39
- class="mock-TeX"
40
- >
41
- \\qquad\\qquad\\quad\\text{Graph 1}\\qquad\\qquad\\quad\\qquad\\qquad\\quad\\text{Graph 2}
42
- </span>
38
+ \\qquad\\qquad\\quad\\text{Graph 1}\\qquad\\qquad\\quad\\qquad\\qquad\\quad\\text{Graph 2}
43
39
  </span>
44
- </div>
40
+ </span>
45
41
  </div>
46
42
  </div>
43
+ </div>
44
+ <div
45
+ class="paragraph"
46
+ data-perseus-paragraph-index="2"
47
+ >
47
48
  <div
48
49
  class="paragraph"
49
- data-perseus-paragraph-index="2"
50
50
  >
51
51
  <div
52
- class="paragraph"
52
+ class="perseus-widget-container widget-nohighlight widget-block"
53
53
  >
54
54
  <div
55
- class="perseus-widget-container widget-nohighlight widget-block"
55
+ class="categorizer-container fullBleedContainer_8ybp6"
56
56
  >
57
- <div
58
- class="categorizer-container fullBleedContainer_8ybp6"
57
+ <table
58
+ class="categorizer-table mobileTable_1wmcwov"
59
59
  >
60
- <table
61
- class="categorizer-table mobileTable_1wmcwov"
62
- >
63
- <thead>
64
- <tr>
65
- <td
66
- class="emptyHeaderCell_1mttrgd"
67
- />
68
- <th
69
- class="header_whrfk4"
60
+ <thead>
61
+ <tr>
62
+ <td
63
+ class="emptyHeaderCell_1mttrgd"
64
+ />
65
+ <th
66
+ class="header_whrfk4"
67
+ >
68
+ <div
69
+ class="perseus-renderer perseus-renderer-responsive"
70
70
  >
71
- <span
72
- class="mock-KatexProvider"
71
+ <div
72
+ class="paragraph"
73
+ data-perseus-paragraph-index="0"
73
74
  >
74
75
  <div
75
- class="perseus-renderer perseus-renderer-responsive"
76
+ class="paragraph"
76
77
  >
77
- <div
78
- class="paragraph"
79
- data-perseus-paragraph-index="0"
80
- >
81
- <div
82
- class="paragraph"
83
- >
84
- No relationship
85
- </div>
86
- </div>
78
+ No relationship
87
79
  </div>
88
- </span>
89
- </th>
90
- <th
91
- class="header_whrfk4"
80
+ </div>
81
+ </div>
82
+ </th>
83
+ <th
84
+ class="header_whrfk4"
85
+ >
86
+ <div
87
+ class="perseus-renderer perseus-renderer-responsive"
92
88
  >
93
- <span
94
- class="mock-KatexProvider"
89
+ <div
90
+ class="paragraph"
91
+ data-perseus-paragraph-index="0"
95
92
  >
96
93
  <div
97
- class="perseus-renderer perseus-renderer-responsive"
94
+ class="paragraph"
98
95
  >
99
- <div
100
- class="paragraph"
101
- data-perseus-paragraph-index="0"
102
- >
103
- <div
104
- class="paragraph"
105
- >
106
- Positive linear relationship
107
- </div>
108
- </div>
96
+ Positive linear relationship
109
97
  </div>
110
- </span>
111
- </th>
112
- <th
113
- class="header_whrfk4"
98
+ </div>
99
+ </div>
100
+ </th>
101
+ <th
102
+ class="header_whrfk4"
103
+ >
104
+ <div
105
+ class="perseus-renderer perseus-renderer-responsive"
114
106
  >
115
- <span
116
- class="mock-KatexProvider"
107
+ <div
108
+ class="paragraph"
109
+ data-perseus-paragraph-index="0"
117
110
  >
118
111
  <div
119
- class="perseus-renderer perseus-renderer-responsive"
112
+ class="paragraph"
120
113
  >
121
- <div
122
- class="paragraph"
123
- data-perseus-paragraph-index="0"
124
- >
125
- <div
126
- class="paragraph"
127
- >
128
- Negative linear relationship
129
- </div>
130
- </div>
114
+ Negative linear relationship
131
115
  </div>
132
- </span>
133
- </th>
134
- <th
135
- class="header_whrfk4"
116
+ </div>
117
+ </div>
118
+ </th>
119
+ <th
120
+ class="header_whrfk4"
121
+ >
122
+ <div
123
+ class="perseus-renderer perseus-renderer-responsive"
136
124
  >
137
- <span
138
- class="mock-KatexProvider"
125
+ <div
126
+ class="paragraph"
127
+ data-perseus-paragraph-index="0"
139
128
  >
140
129
  <div
141
- class="perseus-renderer perseus-renderer-responsive"
130
+ class="paragraph"
142
131
  >
143
- <div
144
- class="paragraph"
145
- data-perseus-paragraph-index="0"
146
- >
147
- <div
148
- class="paragraph"
149
- >
150
- Nonlinear relationship
151
- </div>
152
- </div>
132
+ Nonlinear relationship
153
133
  </div>
154
- </span>
155
- </th>
156
- </tr>
157
- </thead>
158
- <tbody>
159
- <tr>
160
- <td>
161
- <span
162
- class="mock-KatexProvider"
134
+ </div>
135
+ </div>
136
+ </th>
137
+ </tr>
138
+ </thead>
139
+ <tbody>
140
+ <tr>
141
+ <td>
142
+ <div
143
+ class="perseus-renderer perseus-renderer-responsive"
144
+ >
145
+ <div
146
+ class="paragraph"
147
+ data-perseus-paragraph-index="0"
163
148
  >
164
149
  <div
165
- class="perseus-renderer perseus-renderer-responsive"
150
+ class="paragraph"
166
151
  >
167
- <div
168
- class="paragraph"
169
- data-perseus-paragraph-index="0"
152
+ Graph
153
+ <span
154
+ style="white-space: nowrap;"
170
155
  >
171
- <div
172
- class="paragraph"
156
+ <span />
157
+ <span
158
+ class="mock-TeX"
173
159
  >
174
- Graph
175
- <span
176
- style="white-space: nowrap;"
177
- >
178
- <span />
179
- <span
180
- class="mock-TeX"
181
- >
182
- 1
183
- </span>
184
- <span />
185
- </span>
186
- </div>
187
- </div>
160
+ 1
161
+ </span>
162
+ <span />
163
+ </span>
188
164
  </div>
189
- </span>
190
- </td>
191
- <td
192
- class="category cell_13aakpm"
193
- >
194
- <div
195
- aria-label="No relationship"
196
- class="perseus-interactive"
197
- role="button"
198
- >
199
- <input
200
- class="responsiveInput_1q2zj3l-o_O-responsiveRadioInput_17um91a"
201
- name="perseus_radio_10_0"
202
- type="radio"
203
- />
204
165
  </div>
205
- </td>
206
- <td
207
- class="category cell_13aakpm"
166
+ </div>
167
+ </td>
168
+ <td
169
+ class="category cell_13aakpm"
170
+ >
171
+ <div
172
+ aria-label="No relationship"
173
+ class="perseus-interactive"
174
+ role="button"
208
175
  >
209
- <div
210
- aria-label="Positive linear relationship"
211
- class="perseus-interactive"
212
- role="button"
213
- >
214
- <input
215
- class="responsiveInput_1q2zj3l-o_O-responsiveRadioInput_17um91a"
216
- name="perseus_radio_10_0"
217
- type="radio"
218
- />
219
- </div>
220
- </td>
221
- <td
222
- class="category cell_13aakpm"
176
+ <input
177
+ class="responsiveInput_1q2zj3l-o_O-responsiveRadioInput_17um91a"
178
+ name="perseus_radio_10_0"
179
+ type="radio"
180
+ />
181
+ </div>
182
+ </td>
183
+ <td
184
+ class="category cell_13aakpm"
185
+ >
186
+ <div
187
+ aria-label="Positive linear relationship"
188
+ class="perseus-interactive"
189
+ role="button"
223
190
  >
224
- <div
225
- aria-label="Negative linear relationship"
226
- class="perseus-interactive"
227
- role="button"
228
- >
229
- <input
230
- class="responsiveInput_1q2zj3l-o_O-responsiveRadioInput_17um91a"
231
- name="perseus_radio_10_0"
232
- type="radio"
233
- />
234
- </div>
235
- </td>
236
- <td
237
- class="category cell_13aakpm"
191
+ <input
192
+ class="responsiveInput_1q2zj3l-o_O-responsiveRadioInput_17um91a"
193
+ name="perseus_radio_10_0"
194
+ type="radio"
195
+ />
196
+ </div>
197
+ </td>
198
+ <td
199
+ class="category cell_13aakpm"
200
+ >
201
+ <div
202
+ aria-label="Negative linear relationship"
203
+ class="perseus-interactive"
204
+ role="button"
205
+ >
206
+ <input
207
+ class="responsiveInput_1q2zj3l-o_O-responsiveRadioInput_17um91a"
208
+ name="perseus_radio_10_0"
209
+ type="radio"
210
+ />
211
+ </div>
212
+ </td>
213
+ <td
214
+ class="category cell_13aakpm"
215
+ >
216
+ <div
217
+ aria-label="Nonlinear relationship"
218
+ class="perseus-interactive"
219
+ role="button"
220
+ >
221
+ <input
222
+ class="responsiveInput_1q2zj3l-o_O-responsiveRadioInput_17um91a"
223
+ name="perseus_radio_10_0"
224
+ type="radio"
225
+ />
226
+ </div>
227
+ </td>
228
+ </tr>
229
+ <tr>
230
+ <td>
231
+ <div
232
+ class="perseus-renderer perseus-renderer-responsive"
238
233
  >
239
234
  <div
240
- aria-label="Nonlinear relationship"
241
- class="perseus-interactive"
242
- role="button"
243
- >
244
- <input
245
- class="responsiveInput_1q2zj3l-o_O-responsiveRadioInput_17um91a"
246
- name="perseus_radio_10_0"
247
- type="radio"
248
- />
249
- </div>
250
- </td>
251
- </tr>
252
- <tr>
253
- <td>
254
- <span
255
- class="mock-KatexProvider"
235
+ class="paragraph"
236
+ data-perseus-paragraph-index="0"
256
237
  >
257
238
  <div
258
- class="perseus-renderer perseus-renderer-responsive"
239
+ class="paragraph"
259
240
  >
260
- <div
261
- class="paragraph"
262
- data-perseus-paragraph-index="0"
241
+ Graph
242
+ <span
243
+ style="white-space: nowrap;"
263
244
  >
264
- <div
265
- class="paragraph"
245
+ <span />
246
+ <span
247
+ class="mock-TeX"
266
248
  >
267
- Graph
268
- <span
269
- style="white-space: nowrap;"
270
- >
271
- <span />
272
- <span
273
- class="mock-TeX"
274
- >
275
- 2
276
- </span>
277
- <span />
278
- </span>
279
- </div>
280
- </div>
249
+ 2
250
+ </span>
251
+ <span />
252
+ </span>
281
253
  </div>
282
- </span>
283
- </td>
284
- <td
285
- class="category cell_13aakpm"
286
- >
287
- <div
288
- aria-label="No relationship"
289
- class="perseus-interactive"
290
- role="button"
291
- >
292
- <input
293
- class="responsiveInput_1q2zj3l-o_O-responsiveRadioInput_17um91a"
294
- name="perseus_radio_10_1"
295
- type="radio"
296
- />
297
254
  </div>
298
- </td>
299
- <td
300
- class="category cell_13aakpm"
255
+ </div>
256
+ </td>
257
+ <td
258
+ class="category cell_13aakpm"
259
+ >
260
+ <div
261
+ aria-label="No relationship"
262
+ class="perseus-interactive"
263
+ role="button"
301
264
  >
302
- <div
303
- aria-label="Positive linear relationship"
304
- class="perseus-interactive"
305
- role="button"
306
- >
307
- <input
308
- class="responsiveInput_1q2zj3l-o_O-responsiveRadioInput_17um91a"
309
- name="perseus_radio_10_1"
310
- type="radio"
311
- />
312
- </div>
313
- </td>
314
- <td
315
- class="category cell_13aakpm"
265
+ <input
266
+ class="responsiveInput_1q2zj3l-o_O-responsiveRadioInput_17um91a"
267
+ name="perseus_radio_10_1"
268
+ type="radio"
269
+ />
270
+ </div>
271
+ </td>
272
+ <td
273
+ class="category cell_13aakpm"
274
+ >
275
+ <div
276
+ aria-label="Positive linear relationship"
277
+ class="perseus-interactive"
278
+ role="button"
316
279
  >
317
- <div
318
- aria-label="Negative linear relationship"
319
- class="perseus-interactive"
320
- role="button"
321
- >
322
- <input
323
- class="responsiveInput_1q2zj3l-o_O-responsiveRadioInput_17um91a"
324
- name="perseus_radio_10_1"
325
- type="radio"
326
- />
327
- </div>
328
- </td>
329
- <td
330
- class="category cell_13aakpm"
280
+ <input
281
+ class="responsiveInput_1q2zj3l-o_O-responsiveRadioInput_17um91a"
282
+ name="perseus_radio_10_1"
283
+ type="radio"
284
+ />
285
+ </div>
286
+ </td>
287
+ <td
288
+ class="category cell_13aakpm"
289
+ >
290
+ <div
291
+ aria-label="Negative linear relationship"
292
+ class="perseus-interactive"
293
+ role="button"
331
294
  >
332
- <div
333
- aria-label="Nonlinear relationship"
334
- class="perseus-interactive"
335
- role="button"
336
- >
337
- <input
338
- class="responsiveInput_1q2zj3l-o_O-responsiveRadioInput_17um91a"
339
- name="perseus_radio_10_1"
340
- type="radio"
341
- />
342
- </div>
343
- </td>
344
- </tr>
345
- </tbody>
346
- </table>
347
- </div>
295
+ <input
296
+ class="responsiveInput_1q2zj3l-o_O-responsiveRadioInput_17um91a"
297
+ name="perseus_radio_10_1"
298
+ type="radio"
299
+ />
300
+ </div>
301
+ </td>
302
+ <td
303
+ class="category cell_13aakpm"
304
+ >
305
+ <div
306
+ aria-label="Nonlinear relationship"
307
+ class="perseus-interactive"
308
+ role="button"
309
+ >
310
+ <input
311
+ class="responsiveInput_1q2zj3l-o_O-responsiveRadioInput_17um91a"
312
+ name="perseus_radio_10_1"
313
+ type="radio"
314
+ />
315
+ </div>
316
+ </td>
317
+ </tr>
318
+ </tbody>
319
+ </table>
348
320
  </div>
349
321
  </div>
350
322
  </div>
323
+ </div>
324
+ <div
325
+ class="paragraph"
326
+ data-perseus-paragraph-index="3"
327
+ >
351
328
  <div
352
329
  class="paragraph"
353
- data-perseus-paragraph-index="3"
354
330
  >
355
- <div
356
- class="paragraph"
357
- >
358
- <strong>
359
- Graph 1.
360
- </strong>
361
- </div>
331
+ <strong>
332
+ Graph 1.
333
+ </strong>
362
334
  </div>
335
+ </div>
336
+ <div
337
+ class="paragraph perseus-paragraph-centered"
338
+ data-perseus-paragraph-index="4"
339
+ >
363
340
  <div
364
- class="paragraph perseus-paragraph-centered"
365
- data-perseus-paragraph-index="4"
341
+ class="paragraph"
366
342
  >
367
343
  <div
368
- class="paragraph"
344
+ class="fixed-to-responsive svg-image"
345
+ style="max-width: 220px; max-height: 223px;"
369
346
  >
370
347
  <div
371
- class="fixed-to-responsive svg-image"
372
- style="max-width: 220px; max-height: 223px;"
348
+ style="padding-bottom: 101.36%;"
349
+ />
350
+ <span
351
+ style="top: 0px; left: 0px; width: 100%; height: 100%; position: absolute; min-width: 20px; display: flex; justify-content: center; align-content: center;"
373
352
  >
374
353
  <div
375
- style="padding-bottom: 101.36%;"
376
- />
377
- <span
378
- style="top: 0px; left: 0px; width: 100%; height: 100%; position: absolute; min-width: 20px; display: flex; justify-content: center; align-content: center;"
354
+ class="default_xu2jcg-o_O-spinnerContainer_agrn11"
379
355
  >
380
- <div
381
- class="default_xu2jcg-o_O-spinnerContainer_agrn11"
356
+ <svg
357
+ height="48"
358
+ viewBox="0 0 48 48"
359
+ width="48"
360
+ xmlns="http://www.w3.org/2000/svg"
382
361
  >
383
- <svg
384
- height="48"
385
- viewBox="0 0 48 48"
386
- width="48"
387
- xmlns="http://www.w3.org/2000/svg"
388
- >
389
- <path
390
- class="loadingSpinner_1dvgeb3-o_O-inlineStyles_1kzk0y9"
391
- 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"
392
- fill-rule="nonzero"
393
- />
394
- </svg>
395
- </div>
396
- </span>
397
- </div>
362
+ <path
363
+ class="loadingSpinner_1dvgeb3-o_O-inlineStyles_1kzk0y9"
364
+ 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"
365
+ fill-rule="nonzero"
366
+ />
367
+ </svg>
368
+ </div>
369
+ </span>
398
370
  </div>
399
371
  </div>
372
+ </div>
373
+ <div
374
+ class="paragraph"
375
+ data-perseus-paragraph-index="5"
376
+ >
400
377
  <div
401
378
  class="paragraph"
402
- data-perseus-paragraph-index="5"
403
379
  >
404
- <div
405
- class="paragraph"
406
- >
407
- <strong>
408
- Graph 2.
409
- </strong>
410
- </div>
380
+ <strong>
381
+ Graph 2.
382
+ </strong>
411
383
  </div>
384
+ </div>
385
+ <div
386
+ class="paragraph perseus-paragraph-centered"
387
+ data-perseus-paragraph-index="6"
388
+ >
412
389
  <div
413
- class="paragraph perseus-paragraph-centered"
414
- data-perseus-paragraph-index="6"
390
+ class="paragraph"
415
391
  >
416
392
  <div
417
- class="paragraph"
393
+ class="fixed-to-responsive svg-image"
394
+ style="max-width: 244px; max-height: 223px;"
418
395
  >
419
396
  <div
420
- class="fixed-to-responsive svg-image"
421
- style="max-width: 244px; max-height: 223px;"
397
+ style="padding-bottom: 91.39%;"
398
+ />
399
+ <span
400
+ style="top: 0px; left: 0px; width: 100%; height: 100%; position: absolute; min-width: 20px; display: flex; justify-content: center; align-content: center;"
422
401
  >
423
402
  <div
424
- style="padding-bottom: 91.39%;"
425
- />
426
- <span
427
- style="top: 0px; left: 0px; width: 100%; height: 100%; position: absolute; min-width: 20px; display: flex; justify-content: center; align-content: center;"
403
+ class="default_xu2jcg-o_O-spinnerContainer_agrn11"
428
404
  >
429
- <div
430
- class="default_xu2jcg-o_O-spinnerContainer_agrn11"
405
+ <svg
406
+ height="48"
407
+ viewBox="0 0 48 48"
408
+ width="48"
409
+ xmlns="http://www.w3.org/2000/svg"
431
410
  >
432
- <svg
433
- height="48"
434
- viewBox="0 0 48 48"
435
- width="48"
436
- xmlns="http://www.w3.org/2000/svg"
437
- >
438
- <path
439
- class="loadingSpinner_1dvgeb3-o_O-inlineStyles_1kzk0y9"
440
- 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"
441
- fill-rule="nonzero"
442
- />
443
- </svg>
444
- </div>
445
- </span>
446
- </div>
447
-
411
+ <path
412
+ class="loadingSpinner_1dvgeb3-o_O-inlineStyles_1kzk0y9"
413
+ 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"
414
+ fill-rule="nonzero"
415
+ />
416
+ </svg>
417
+ </div>
418
+ </span>
448
419
  </div>
420
+
449
421
  </div>
450
422
  </div>
451
- </span>
423
+ </div>
452
424
  </div>
453
425
  `;
454
426
 
455
427
  exports[`categorizer widget should snapshot: first render 1`] = `
456
428
  <div>
457
- <span
458
- class="mock-KatexProvider"
429
+ <div
430
+ class="perseus-renderer perseus-renderer-responsive"
459
431
  >
460
432
  <div
461
- class="perseus-renderer perseus-renderer-responsive"
433
+ class="paragraph"
434
+ data-perseus-paragraph-index="0"
462
435
  >
463
436
  <div
464
437
  class="paragraph"
465
- data-perseus-paragraph-index="0"
466
438
  >
467
- <div
468
- class="paragraph"
469
- >
470
- <strong>
471
- Classify each graph according to the kind of relationship it suggests.
472
- </strong>
473
- </div>
439
+ <strong>
440
+ Classify each graph according to the kind of relationship it suggests.
441
+ </strong>
474
442
  </div>
443
+ </div>
444
+ <div
445
+ class="paragraph perseus-paragraph-centered"
446
+ data-perseus-paragraph-index="1"
447
+ >
475
448
  <div
476
- class="paragraph perseus-paragraph-centered"
477
- data-perseus-paragraph-index="1"
449
+ class="perseus-block-math"
478
450
  >
479
451
  <div
480
- class="perseus-block-math"
452
+ class="perseus-block-math-inner"
453
+ style="overflow-x: auto; overflow-y: hidden; padding-top: 10px; padding-bottom: 10px; margin-top: -10px; margin-bottom: -10px;"
481
454
  >
482
- <div
483
- class="perseus-block-math-inner"
484
- style="overflow-x: auto; overflow-y: hidden; padding-top: 10px; padding-bottom: 10px; margin-top: -10px; margin-bottom: -10px;"
455
+ <span
456
+ class="mock-TeX"
485
457
  >
486
- <span
487
- class="mock-TeX"
488
- >
489
- \\qquad\\qquad\\quad\\text{Graph 1}\\qquad\\qquad\\quad\\qquad\\qquad\\quad\\text{Graph 2}
490
- </span>
491
- </div>
458
+ \\qquad\\qquad\\quad\\text{Graph 1}\\qquad\\qquad\\quad\\qquad\\qquad\\quad\\text{Graph 2}
459
+ </span>
492
460
  </div>
493
461
  </div>
462
+ </div>
463
+ <div
464
+ class="paragraph"
465
+ data-perseus-paragraph-index="2"
466
+ >
494
467
  <div
495
468
  class="paragraph"
496
- data-perseus-paragraph-index="2"
497
469
  >
498
470
  <div
499
- class="paragraph"
471
+ class="perseus-widget-container widget-nohighlight widget-block"
500
472
  >
501
473
  <div
502
- class="perseus-widget-container widget-nohighlight widget-block"
474
+ class="categorizer-container "
503
475
  >
504
- <div
505
- class="categorizer-container "
476
+ <table
477
+ class="categorizer-table mobileTable_1wmcwov"
506
478
  >
507
- <table
508
- class="categorizer-table mobileTable_1wmcwov"
509
- >
510
- <thead>
511
- <tr>
512
- <td
513
- class="emptyHeaderCell_1mttrgd"
514
- />
515
- <th
516
- class="header_whrfk4"
479
+ <thead>
480
+ <tr>
481
+ <td
482
+ class="emptyHeaderCell_1mttrgd"
483
+ />
484
+ <th
485
+ class="header_whrfk4"
486
+ >
487
+ <div
488
+ class="perseus-renderer perseus-renderer-responsive"
517
489
  >
518
- <span
519
- class="mock-KatexProvider"
490
+ <div
491
+ class="paragraph"
492
+ data-perseus-paragraph-index="0"
520
493
  >
521
494
  <div
522
- class="perseus-renderer perseus-renderer-responsive"
495
+ class="paragraph"
523
496
  >
524
- <div
525
- class="paragraph"
526
- data-perseus-paragraph-index="0"
527
- >
528
- <div
529
- class="paragraph"
530
- >
531
- No relationship
532
- </div>
533
- </div>
497
+ No relationship
534
498
  </div>
535
- </span>
536
- </th>
537
- <th
538
- class="header_whrfk4"
499
+ </div>
500
+ </div>
501
+ </th>
502
+ <th
503
+ class="header_whrfk4"
504
+ >
505
+ <div
506
+ class="perseus-renderer perseus-renderer-responsive"
539
507
  >
540
- <span
541
- class="mock-KatexProvider"
508
+ <div
509
+ class="paragraph"
510
+ data-perseus-paragraph-index="0"
542
511
  >
543
512
  <div
544
- class="perseus-renderer perseus-renderer-responsive"
513
+ class="paragraph"
545
514
  >
546
- <div
547
- class="paragraph"
548
- data-perseus-paragraph-index="0"
549
- >
550
- <div
551
- class="paragraph"
552
- >
553
- Positive linear relationship
554
- </div>
555
- </div>
515
+ Positive linear relationship
556
516
  </div>
557
- </span>
558
- </th>
559
- <th
560
- class="header_whrfk4"
517
+ </div>
518
+ </div>
519
+ </th>
520
+ <th
521
+ class="header_whrfk4"
522
+ >
523
+ <div
524
+ class="perseus-renderer perseus-renderer-responsive"
561
525
  >
562
- <span
563
- class="mock-KatexProvider"
526
+ <div
527
+ class="paragraph"
528
+ data-perseus-paragraph-index="0"
564
529
  >
565
530
  <div
566
- class="perseus-renderer perseus-renderer-responsive"
531
+ class="paragraph"
567
532
  >
568
- <div
569
- class="paragraph"
570
- data-perseus-paragraph-index="0"
571
- >
572
- <div
573
- class="paragraph"
574
- >
575
- Negative linear relationship
576
- </div>
577
- </div>
533
+ Negative linear relationship
578
534
  </div>
579
- </span>
580
- </th>
581
- <th
582
- class="header_whrfk4"
535
+ </div>
536
+ </div>
537
+ </th>
538
+ <th
539
+ class="header_whrfk4"
540
+ >
541
+ <div
542
+ class="perseus-renderer perseus-renderer-responsive"
583
543
  >
584
- <span
585
- class="mock-KatexProvider"
544
+ <div
545
+ class="paragraph"
546
+ data-perseus-paragraph-index="0"
586
547
  >
587
548
  <div
588
- class="perseus-renderer perseus-renderer-responsive"
549
+ class="paragraph"
589
550
  >
590
- <div
591
- class="paragraph"
592
- data-perseus-paragraph-index="0"
593
- >
594
- <div
595
- class="paragraph"
596
- >
597
- Nonlinear relationship
598
- </div>
599
- </div>
551
+ Nonlinear relationship
600
552
  </div>
601
- </span>
602
- </th>
603
- </tr>
604
- </thead>
605
- <tbody>
606
- <tr>
607
- <td>
608
- <span
609
- class="mock-KatexProvider"
553
+ </div>
554
+ </div>
555
+ </th>
556
+ </tr>
557
+ </thead>
558
+ <tbody>
559
+ <tr>
560
+ <td>
561
+ <div
562
+ class="perseus-renderer perseus-renderer-responsive"
563
+ >
564
+ <div
565
+ class="paragraph"
566
+ data-perseus-paragraph-index="0"
610
567
  >
611
568
  <div
612
- class="perseus-renderer perseus-renderer-responsive"
569
+ class="paragraph"
613
570
  >
614
- <div
615
- class="paragraph"
616
- data-perseus-paragraph-index="0"
571
+ Graph
572
+ <span
573
+ style="white-space: nowrap;"
617
574
  >
618
- <div
619
- class="paragraph"
575
+ <span />
576
+ <span
577
+ class="mock-TeX"
620
578
  >
621
- Graph
622
- <span
623
- style="white-space: nowrap;"
624
- >
625
- <span />
626
- <span
627
- class="mock-TeX"
628
- >
629
- 1
630
- </span>
631
- <span />
632
- </span>
633
- </div>
634
- </div>
579
+ 1
580
+ </span>
581
+ <span />
582
+ </span>
635
583
  </div>
636
- </span>
637
- </td>
638
- <td
639
- class="category cell_13aakpm"
584
+ </div>
585
+ </div>
586
+ </td>
587
+ <td
588
+ class="category cell_13aakpm"
589
+ >
590
+ <div
591
+ aria-label="No relationship"
592
+ class="perseus-interactive"
593
+ role="button"
640
594
  >
641
- <div
642
- aria-label="No relationship"
643
- class="perseus-interactive"
644
- role="button"
595
+ <span
596
+ class="radioSpan_1mq3xs9"
645
597
  >
646
- <span
647
- class="radioSpan_1mq3xs9"
598
+ <svg
599
+ aria-hidden="true"
600
+ height="1em"
601
+ role="img"
602
+ style="vertical-align: middle;"
603
+ viewBox="0 0 100 99.944"
604
+ width="1.0005603137757144em"
648
605
  >
649
- <svg
650
- aria-hidden="true"
651
- height="1em"
652
- role="img"
653
- style="vertical-align: middle;"
654
- viewBox="0 0 100 99.944"
655
- width="1.0005603137757144em"
656
- >
657
- <path
658
- d="M50.046 8.322q-8.493 0-16.188 3.306-15.561 6.669-22.173 22.23-3.363 7.695-3.363 16.188t3.306 16.188 8.949 13.281q5.586 5.586 13.281 8.892t16.188 3.306 16.188-3.306 13.281-8.892 8.892-13.281 3.306-16.188-3.306-16.188-8.892-13.281-13.281-8.949q-7.695-3.306-16.188-3.306zm0 91.713q-13.623 0-25.137-6.726t-18.183-18.183q-6.726-11.571-6.726-25.137t6.726-25.08 18.24-18.24 25.08-6.669q13.566 0 25.08 6.726 11.514 6.669 18.24 18.183t6.726 25.137-6.726 25.137-18.24 18.126q-11.514 6.726-25.08 6.726z"
659
- fill="currentColor"
660
- />
661
- </svg>
662
- </span>
663
- </div>
664
- </td>
665
- <td
666
- class="category cell_13aakpm"
606
+ <path
607
+ d="M50.046 8.322q-8.493 0-16.188 3.306-15.561 6.669-22.173 22.23-3.363 7.695-3.363 16.188t3.306 16.188 8.949 13.281q5.586 5.586 13.281 8.892t16.188 3.306 16.188-3.306 13.281-8.892 8.892-13.281 3.306-16.188-3.306-16.188-8.892-13.281-13.281-8.949q-7.695-3.306-16.188-3.306zm0 91.713q-13.623 0-25.137-6.726t-18.183-18.183q-6.726-11.571-6.726-25.137t6.726-25.08 18.24-18.24 25.08-6.669q13.566 0 25.08 6.726 11.514 6.669 18.24 18.183t6.726 25.137-6.726 25.137-18.24 18.126q-11.514 6.726-25.08 6.726z"
608
+ fill="currentColor"
609
+ />
610
+ </svg>
611
+ </span>
612
+ </div>
613
+ </td>
614
+ <td
615
+ class="category cell_13aakpm"
616
+ >
617
+ <div
618
+ aria-label="Positive linear relationship"
619
+ class="perseus-interactive"
620
+ role="button"
667
621
  >
668
- <div
669
- aria-label="Positive linear relationship"
670
- class="perseus-interactive"
671
- role="button"
622
+ <span
623
+ class="radioSpan_1mq3xs9"
672
624
  >
673
- <span
674
- class="radioSpan_1mq3xs9"
625
+ <svg
626
+ aria-hidden="true"
627
+ height="1em"
628
+ role="img"
629
+ style="vertical-align: middle;"
630
+ viewBox="0 0 100 99.944"
631
+ width="1.0005603137757144em"
675
632
  >
676
- <svg
677
- aria-hidden="true"
678
- height="1em"
679
- role="img"
680
- style="vertical-align: middle;"
681
- viewBox="0 0 100 99.944"
682
- width="1.0005603137757144em"
683
- >
684
- <path
685
- d="M50.046 8.322q-8.493 0-16.188 3.306-15.561 6.669-22.173 22.23-3.363 7.695-3.363 16.188t3.306 16.188 8.949 13.281q5.586 5.586 13.281 8.892t16.188 3.306 16.188-3.306 13.281-8.892 8.892-13.281 3.306-16.188-3.306-16.188-8.892-13.281-13.281-8.949q-7.695-3.306-16.188-3.306zm0 91.713q-13.623 0-25.137-6.726t-18.183-18.183q-6.726-11.571-6.726-25.137t6.726-25.08 18.24-18.24 25.08-6.669q13.566 0 25.08 6.726 11.514 6.669 18.24 18.183t6.726 25.137-6.726 25.137-18.24 18.126q-11.514 6.726-25.08 6.726z"
686
- fill="currentColor"
687
- />
688
- </svg>
689
- </span>
690
- </div>
691
- </td>
692
- <td
693
- class="category cell_13aakpm"
633
+ <path
634
+ d="M50.046 8.322q-8.493 0-16.188 3.306-15.561 6.669-22.173 22.23-3.363 7.695-3.363 16.188t3.306 16.188 8.949 13.281q5.586 5.586 13.281 8.892t16.188 3.306 16.188-3.306 13.281-8.892 8.892-13.281 3.306-16.188-3.306-16.188-8.892-13.281-13.281-8.949q-7.695-3.306-16.188-3.306zm0 91.713q-13.623 0-25.137-6.726t-18.183-18.183q-6.726-11.571-6.726-25.137t6.726-25.08 18.24-18.24 25.08-6.669q13.566 0 25.08 6.726 11.514 6.669 18.24 18.183t6.726 25.137-6.726 25.137-18.24 18.126q-11.514 6.726-25.08 6.726z"
635
+ fill="currentColor"
636
+ />
637
+ </svg>
638
+ </span>
639
+ </div>
640
+ </td>
641
+ <td
642
+ class="category cell_13aakpm"
643
+ >
644
+ <div
645
+ aria-label="Negative linear relationship"
646
+ class="perseus-interactive"
647
+ role="button"
694
648
  >
695
- <div
696
- aria-label="Negative linear relationship"
697
- class="perseus-interactive"
698
- role="button"
649
+ <span
650
+ class="radioSpan_1mq3xs9"
699
651
  >
700
- <span
701
- class="radioSpan_1mq3xs9"
652
+ <svg
653
+ aria-hidden="true"
654
+ height="1em"
655
+ role="img"
656
+ style="vertical-align: middle;"
657
+ viewBox="0 0 100 99.944"
658
+ width="1.0005603137757144em"
702
659
  >
703
- <svg
704
- aria-hidden="true"
705
- height="1em"
706
- role="img"
707
- style="vertical-align: middle;"
708
- viewBox="0 0 100 99.944"
709
- width="1.0005603137757144em"
710
- >
711
- <path
712
- d="M50.046 8.322q-8.493 0-16.188 3.306-15.561 6.669-22.173 22.23-3.363 7.695-3.363 16.188t3.306 16.188 8.949 13.281q5.586 5.586 13.281 8.892t16.188 3.306 16.188-3.306 13.281-8.892 8.892-13.281 3.306-16.188-3.306-16.188-8.892-13.281-13.281-8.949q-7.695-3.306-16.188-3.306zm0 91.713q-13.623 0-25.137-6.726t-18.183-18.183q-6.726-11.571-6.726-25.137t6.726-25.08 18.24-18.24 25.08-6.669q13.566 0 25.08 6.726 11.514 6.669 18.24 18.183t6.726 25.137-6.726 25.137-18.24 18.126q-11.514 6.726-25.08 6.726z"
713
- fill="currentColor"
714
- />
715
- </svg>
716
- </span>
717
- </div>
718
- </td>
719
- <td
720
- class="category cell_13aakpm"
660
+ <path
661
+ d="M50.046 8.322q-8.493 0-16.188 3.306-15.561 6.669-22.173 22.23-3.363 7.695-3.363 16.188t3.306 16.188 8.949 13.281q5.586 5.586 13.281 8.892t16.188 3.306 16.188-3.306 13.281-8.892 8.892-13.281 3.306-16.188-3.306-16.188-8.892-13.281-13.281-8.949q-7.695-3.306-16.188-3.306zm0 91.713q-13.623 0-25.137-6.726t-18.183-18.183q-6.726-11.571-6.726-25.137t6.726-25.08 18.24-18.24 25.08-6.669q13.566 0 25.08 6.726 11.514 6.669 18.24 18.183t6.726 25.137-6.726 25.137-18.24 18.126q-11.514 6.726-25.08 6.726z"
662
+ fill="currentColor"
663
+ />
664
+ </svg>
665
+ </span>
666
+ </div>
667
+ </td>
668
+ <td
669
+ class="category cell_13aakpm"
670
+ >
671
+ <div
672
+ aria-label="Nonlinear relationship"
673
+ class="perseus-interactive"
674
+ role="button"
721
675
  >
722
- <div
723
- aria-label="Nonlinear relationship"
724
- class="perseus-interactive"
725
- role="button"
676
+ <span
677
+ class="radioSpan_1mq3xs9"
726
678
  >
727
- <span
728
- class="radioSpan_1mq3xs9"
679
+ <svg
680
+ aria-hidden="true"
681
+ height="1em"
682
+ role="img"
683
+ style="vertical-align: middle;"
684
+ viewBox="0 0 100 99.944"
685
+ width="1.0005603137757144em"
729
686
  >
730
- <svg
731
- aria-hidden="true"
732
- height="1em"
733
- role="img"
734
- style="vertical-align: middle;"
735
- viewBox="0 0 100 99.944"
736
- width="1.0005603137757144em"
737
- >
738
- <path
739
- d="M50.046 8.322q-8.493 0-16.188 3.306-15.561 6.669-22.173 22.23-3.363 7.695-3.363 16.188t3.306 16.188 8.949 13.281q5.586 5.586 13.281 8.892t16.188 3.306 16.188-3.306 13.281-8.892 8.892-13.281 3.306-16.188-3.306-16.188-8.892-13.281-13.281-8.949q-7.695-3.306-16.188-3.306zm0 91.713q-13.623 0-25.137-6.726t-18.183-18.183q-6.726-11.571-6.726-25.137t6.726-25.08 18.24-18.24 25.08-6.669q13.566 0 25.08 6.726 11.514 6.669 18.24 18.183t6.726 25.137-6.726 25.137-18.24 18.126q-11.514 6.726-25.08 6.726z"
740
- fill="currentColor"
741
- />
742
- </svg>
743
- </span>
744
- </div>
745
- </td>
746
- </tr>
747
- <tr>
748
- <td>
749
- <span
750
- class="mock-KatexProvider"
687
+ <path
688
+ d="M50.046 8.322q-8.493 0-16.188 3.306-15.561 6.669-22.173 22.23-3.363 7.695-3.363 16.188t3.306 16.188 8.949 13.281q5.586 5.586 13.281 8.892t16.188 3.306 16.188-3.306 13.281-8.892 8.892-13.281 3.306-16.188-3.306-16.188-8.892-13.281-13.281-8.949q-7.695-3.306-16.188-3.306zm0 91.713q-13.623 0-25.137-6.726t-18.183-18.183q-6.726-11.571-6.726-25.137t6.726-25.08 18.24-18.24 25.08-6.669q13.566 0 25.08 6.726 11.514 6.669 18.24 18.183t6.726 25.137-6.726 25.137-18.24 18.126q-11.514 6.726-25.08 6.726z"
689
+ fill="currentColor"
690
+ />
691
+ </svg>
692
+ </span>
693
+ </div>
694
+ </td>
695
+ </tr>
696
+ <tr>
697
+ <td>
698
+ <div
699
+ class="perseus-renderer perseus-renderer-responsive"
700
+ >
701
+ <div
702
+ class="paragraph"
703
+ data-perseus-paragraph-index="0"
751
704
  >
752
705
  <div
753
- class="perseus-renderer perseus-renderer-responsive"
706
+ class="paragraph"
754
707
  >
755
- <div
756
- class="paragraph"
757
- data-perseus-paragraph-index="0"
708
+ Graph
709
+ <span
710
+ style="white-space: nowrap;"
758
711
  >
759
- <div
760
- class="paragraph"
712
+ <span />
713
+ <span
714
+ class="mock-TeX"
761
715
  >
762
- Graph
763
- <span
764
- style="white-space: nowrap;"
765
- >
766
- <span />
767
- <span
768
- class="mock-TeX"
769
- >
770
- 2
771
- </span>
772
- <span />
773
- </span>
774
- </div>
775
- </div>
716
+ 2
717
+ </span>
718
+ <span />
719
+ </span>
776
720
  </div>
777
- </span>
778
- </td>
779
- <td
780
- class="category cell_13aakpm"
721
+ </div>
722
+ </div>
723
+ </td>
724
+ <td
725
+ class="category cell_13aakpm"
726
+ >
727
+ <div
728
+ aria-label="No relationship"
729
+ class="perseus-interactive"
730
+ role="button"
781
731
  >
782
- <div
783
- aria-label="No relationship"
784
- class="perseus-interactive"
785
- role="button"
732
+ <span
733
+ class="radioSpan_1mq3xs9"
786
734
  >
787
- <span
788
- class="radioSpan_1mq3xs9"
735
+ <svg
736
+ aria-hidden="true"
737
+ height="1em"
738
+ role="img"
739
+ style="vertical-align: middle;"
740
+ viewBox="0 0 100 99.944"
741
+ width="1.0005603137757144em"
789
742
  >
790
- <svg
791
- aria-hidden="true"
792
- height="1em"
793
- role="img"
794
- style="vertical-align: middle;"
795
- viewBox="0 0 100 99.944"
796
- width="1.0005603137757144em"
797
- >
798
- <path
799
- d="M50.046 8.322q-8.493 0-16.188 3.306-15.561 6.669-22.173 22.23-3.363 7.695-3.363 16.188t3.306 16.188 8.949 13.281q5.586 5.586 13.281 8.892t16.188 3.306 16.188-3.306 13.281-8.892 8.892-13.281 3.306-16.188-3.306-16.188-8.892-13.281-13.281-8.949q-7.695-3.306-16.188-3.306zm0 91.713q-13.623 0-25.137-6.726t-18.183-18.183q-6.726-11.571-6.726-25.137t6.726-25.08 18.24-18.24 25.08-6.669q13.566 0 25.08 6.726 11.514 6.669 18.24 18.183t6.726 25.137-6.726 25.137-18.24 18.126q-11.514 6.726-25.08 6.726z"
800
- fill="currentColor"
801
- />
802
- </svg>
803
- </span>
804
- </div>
805
- </td>
806
- <td
807
- class="category cell_13aakpm"
743
+ <path
744
+ d="M50.046 8.322q-8.493 0-16.188 3.306-15.561 6.669-22.173 22.23-3.363 7.695-3.363 16.188t3.306 16.188 8.949 13.281q5.586 5.586 13.281 8.892t16.188 3.306 16.188-3.306 13.281-8.892 8.892-13.281 3.306-16.188-3.306-16.188-8.892-13.281-13.281-8.949q-7.695-3.306-16.188-3.306zm0 91.713q-13.623 0-25.137-6.726t-18.183-18.183q-6.726-11.571-6.726-25.137t6.726-25.08 18.24-18.24 25.08-6.669q13.566 0 25.08 6.726 11.514 6.669 18.24 18.183t6.726 25.137-6.726 25.137-18.24 18.126q-11.514 6.726-25.08 6.726z"
745
+ fill="currentColor"
746
+ />
747
+ </svg>
748
+ </span>
749
+ </div>
750
+ </td>
751
+ <td
752
+ class="category cell_13aakpm"
753
+ >
754
+ <div
755
+ aria-label="Positive linear relationship"
756
+ class="perseus-interactive"
757
+ role="button"
808
758
  >
809
- <div
810
- aria-label="Positive linear relationship"
811
- class="perseus-interactive"
812
- role="button"
759
+ <span
760
+ class="radioSpan_1mq3xs9"
813
761
  >
814
- <span
815
- class="radioSpan_1mq3xs9"
762
+ <svg
763
+ aria-hidden="true"
764
+ height="1em"
765
+ role="img"
766
+ style="vertical-align: middle;"
767
+ viewBox="0 0 100 99.944"
768
+ width="1.0005603137757144em"
816
769
  >
817
- <svg
818
- aria-hidden="true"
819
- height="1em"
820
- role="img"
821
- style="vertical-align: middle;"
822
- viewBox="0 0 100 99.944"
823
- width="1.0005603137757144em"
824
- >
825
- <path
826
- d="M50.046 8.322q-8.493 0-16.188 3.306-15.561 6.669-22.173 22.23-3.363 7.695-3.363 16.188t3.306 16.188 8.949 13.281q5.586 5.586 13.281 8.892t16.188 3.306 16.188-3.306 13.281-8.892 8.892-13.281 3.306-16.188-3.306-16.188-8.892-13.281-13.281-8.949q-7.695-3.306-16.188-3.306zm0 91.713q-13.623 0-25.137-6.726t-18.183-18.183q-6.726-11.571-6.726-25.137t6.726-25.08 18.24-18.24 25.08-6.669q13.566 0 25.08 6.726 11.514 6.669 18.24 18.183t6.726 25.137-6.726 25.137-18.24 18.126q-11.514 6.726-25.08 6.726z"
827
- fill="currentColor"
828
- />
829
- </svg>
830
- </span>
831
- </div>
832
- </td>
833
- <td
834
- class="category cell_13aakpm"
770
+ <path
771
+ d="M50.046 8.322q-8.493 0-16.188 3.306-15.561 6.669-22.173 22.23-3.363 7.695-3.363 16.188t3.306 16.188 8.949 13.281q5.586 5.586 13.281 8.892t16.188 3.306 16.188-3.306 13.281-8.892 8.892-13.281 3.306-16.188-3.306-16.188-8.892-13.281-13.281-8.949q-7.695-3.306-16.188-3.306zm0 91.713q-13.623 0-25.137-6.726t-18.183-18.183q-6.726-11.571-6.726-25.137t6.726-25.08 18.24-18.24 25.08-6.669q13.566 0 25.08 6.726 11.514 6.669 18.24 18.183t6.726 25.137-6.726 25.137-18.24 18.126q-11.514 6.726-25.08 6.726z"
772
+ fill="currentColor"
773
+ />
774
+ </svg>
775
+ </span>
776
+ </div>
777
+ </td>
778
+ <td
779
+ class="category cell_13aakpm"
780
+ >
781
+ <div
782
+ aria-label="Negative linear relationship"
783
+ class="perseus-interactive"
784
+ role="button"
835
785
  >
836
- <div
837
- aria-label="Negative linear relationship"
838
- class="perseus-interactive"
839
- role="button"
786
+ <span
787
+ class="radioSpan_1mq3xs9"
840
788
  >
841
- <span
842
- class="radioSpan_1mq3xs9"
789
+ <svg
790
+ aria-hidden="true"
791
+ height="1em"
792
+ role="img"
793
+ style="vertical-align: middle;"
794
+ viewBox="0 0 100 99.944"
795
+ width="1.0005603137757144em"
843
796
  >
844
- <svg
845
- aria-hidden="true"
846
- height="1em"
847
- role="img"
848
- style="vertical-align: middle;"
849
- viewBox="0 0 100 99.944"
850
- width="1.0005603137757144em"
851
- >
852
- <path
853
- d="M50.046 8.322q-8.493 0-16.188 3.306-15.561 6.669-22.173 22.23-3.363 7.695-3.363 16.188t3.306 16.188 8.949 13.281q5.586 5.586 13.281 8.892t16.188 3.306 16.188-3.306 13.281-8.892 8.892-13.281 3.306-16.188-3.306-16.188-8.892-13.281-13.281-8.949q-7.695-3.306-16.188-3.306zm0 91.713q-13.623 0-25.137-6.726t-18.183-18.183q-6.726-11.571-6.726-25.137t6.726-25.08 18.24-18.24 25.08-6.669q13.566 0 25.08 6.726 11.514 6.669 18.24 18.183t6.726 25.137-6.726 25.137-18.24 18.126q-11.514 6.726-25.08 6.726z"
854
- fill="currentColor"
855
- />
856
- </svg>
857
- </span>
858
- </div>
859
- </td>
860
- <td
861
- class="category cell_13aakpm"
797
+ <path
798
+ d="M50.046 8.322q-8.493 0-16.188 3.306-15.561 6.669-22.173 22.23-3.363 7.695-3.363 16.188t3.306 16.188 8.949 13.281q5.586 5.586 13.281 8.892t16.188 3.306 16.188-3.306 13.281-8.892 8.892-13.281 3.306-16.188-3.306-16.188-8.892-13.281-13.281-8.949q-7.695-3.306-16.188-3.306zm0 91.713q-13.623 0-25.137-6.726t-18.183-18.183q-6.726-11.571-6.726-25.137t6.726-25.08 18.24-18.24 25.08-6.669q13.566 0 25.08 6.726 11.514 6.669 18.24 18.183t6.726 25.137-6.726 25.137-18.24 18.126q-11.514 6.726-25.08 6.726z"
799
+ fill="currentColor"
800
+ />
801
+ </svg>
802
+ </span>
803
+ </div>
804
+ </td>
805
+ <td
806
+ class="category cell_13aakpm"
807
+ >
808
+ <div
809
+ aria-label="Nonlinear relationship"
810
+ class="perseus-interactive"
811
+ role="button"
862
812
  >
863
- <div
864
- aria-label="Nonlinear relationship"
865
- class="perseus-interactive"
866
- role="button"
813
+ <span
814
+ class="radioSpan_1mq3xs9"
867
815
  >
868
- <span
869
- class="radioSpan_1mq3xs9"
816
+ <svg
817
+ aria-hidden="true"
818
+ height="1em"
819
+ role="img"
820
+ style="vertical-align: middle;"
821
+ viewBox="0 0 100 99.944"
822
+ width="1.0005603137757144em"
870
823
  >
871
- <svg
872
- aria-hidden="true"
873
- height="1em"
874
- role="img"
875
- style="vertical-align: middle;"
876
- viewBox="0 0 100 99.944"
877
- width="1.0005603137757144em"
878
- >
879
- <path
880
- d="M50.046 8.322q-8.493 0-16.188 3.306-15.561 6.669-22.173 22.23-3.363 7.695-3.363 16.188t3.306 16.188 8.949 13.281q5.586 5.586 13.281 8.892t16.188 3.306 16.188-3.306 13.281-8.892 8.892-13.281 3.306-16.188-3.306-16.188-8.892-13.281-13.281-8.949q-7.695-3.306-16.188-3.306zm0 91.713q-13.623 0-25.137-6.726t-18.183-18.183q-6.726-11.571-6.726-25.137t6.726-25.08 18.24-18.24 25.08-6.669q13.566 0 25.08 6.726 11.514 6.669 18.24 18.183t6.726 25.137-6.726 25.137-18.24 18.126q-11.514 6.726-25.08 6.726z"
881
- fill="currentColor"
882
- />
883
- </svg>
884
- </span>
885
- </div>
886
- </td>
887
- </tr>
888
- </tbody>
889
- </table>
890
- </div>
824
+ <path
825
+ d="M50.046 8.322q-8.493 0-16.188 3.306-15.561 6.669-22.173 22.23-3.363 7.695-3.363 16.188t3.306 16.188 8.949 13.281q5.586 5.586 13.281 8.892t16.188 3.306 16.188-3.306 13.281-8.892 8.892-13.281 3.306-16.188-3.306-16.188-8.892-13.281-13.281-8.949q-7.695-3.306-16.188-3.306zm0 91.713q-13.623 0-25.137-6.726t-18.183-18.183q-6.726-11.571-6.726-25.137t6.726-25.08 18.24-18.24 25.08-6.669q13.566 0 25.08 6.726 11.514 6.669 18.24 18.183t6.726 25.137-6.726 25.137-18.24 18.126q-11.514 6.726-25.08 6.726z"
826
+ fill="currentColor"
827
+ />
828
+ </svg>
829
+ </span>
830
+ </div>
831
+ </td>
832
+ </tr>
833
+ </tbody>
834
+ </table>
891
835
  </div>
892
836
  </div>
893
837
  </div>
838
+ </div>
839
+ <div
840
+ class="paragraph"
841
+ data-perseus-paragraph-index="3"
842
+ >
894
843
  <div
895
844
  class="paragraph"
896
- data-perseus-paragraph-index="3"
897
845
  >
898
- <div
899
- class="paragraph"
900
- >
901
- <strong>
902
- Graph 1.
903
- </strong>
904
- </div>
846
+ <strong>
847
+ Graph 1.
848
+ </strong>
905
849
  </div>
850
+ </div>
851
+ <div
852
+ class="paragraph perseus-paragraph-centered"
853
+ data-perseus-paragraph-index="4"
854
+ >
906
855
  <div
907
- class="paragraph perseus-paragraph-centered"
908
- data-perseus-paragraph-index="4"
856
+ class="paragraph"
909
857
  >
910
858
  <div
911
- class="paragraph"
859
+ class="fixed-to-responsive svg-image"
860
+ style="max-width: 220px; max-height: 223px;"
912
861
  >
913
862
  <div
914
- class="fixed-to-responsive svg-image"
915
- style="max-width: 220px; max-height: 223px;"
863
+ style="padding-bottom: 101.36%;"
864
+ />
865
+ <span
866
+ style="top: 0px; left: 0px; width: 100%; height: 100%; position: absolute; min-width: 20px; display: flex; justify-content: center; align-content: center;"
916
867
  >
917
868
  <div
918
- style="padding-bottom: 101.36%;"
919
- />
920
- <span
921
- style="top: 0px; left: 0px; width: 100%; height: 100%; position: absolute; min-width: 20px; display: flex; justify-content: center; align-content: center;"
869
+ class="default_xu2jcg-o_O-spinnerContainer_agrn11"
922
870
  >
923
- <div
924
- class="default_xu2jcg-o_O-spinnerContainer_agrn11"
871
+ <svg
872
+ height="48"
873
+ viewBox="0 0 48 48"
874
+ width="48"
875
+ xmlns="http://www.w3.org/2000/svg"
925
876
  >
926
- <svg
927
- height="48"
928
- viewBox="0 0 48 48"
929
- width="48"
930
- xmlns="http://www.w3.org/2000/svg"
931
- >
932
- <path
933
- class="loadingSpinner_1dvgeb3-o_O-inlineStyles_1kzk0y9"
934
- 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"
935
- fill-rule="nonzero"
936
- />
937
- </svg>
938
- </div>
939
- </span>
940
- </div>
877
+ <path
878
+ class="loadingSpinner_1dvgeb3-o_O-inlineStyles_1kzk0y9"
879
+ 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"
880
+ fill-rule="nonzero"
881
+ />
882
+ </svg>
883
+ </div>
884
+ </span>
941
885
  </div>
942
886
  </div>
887
+ </div>
888
+ <div
889
+ class="paragraph"
890
+ data-perseus-paragraph-index="5"
891
+ >
943
892
  <div
944
893
  class="paragraph"
945
- data-perseus-paragraph-index="5"
946
894
  >
947
- <div
948
- class="paragraph"
949
- >
950
- <strong>
951
- Graph 2.
952
- </strong>
953
- </div>
895
+ <strong>
896
+ Graph 2.
897
+ </strong>
954
898
  </div>
899
+ </div>
900
+ <div
901
+ class="paragraph perseus-paragraph-centered"
902
+ data-perseus-paragraph-index="6"
903
+ >
955
904
  <div
956
- class="paragraph perseus-paragraph-centered"
957
- data-perseus-paragraph-index="6"
905
+ class="paragraph"
958
906
  >
959
907
  <div
960
- class="paragraph"
908
+ class="fixed-to-responsive svg-image"
909
+ style="max-width: 244px; max-height: 223px;"
961
910
  >
962
911
  <div
963
- class="fixed-to-responsive svg-image"
964
- style="max-width: 244px; max-height: 223px;"
912
+ style="padding-bottom: 91.39%;"
913
+ />
914
+ <span
915
+ style="top: 0px; left: 0px; width: 100%; height: 100%; position: absolute; min-width: 20px; display: flex; justify-content: center; align-content: center;"
965
916
  >
966
917
  <div
967
- style="padding-bottom: 91.39%;"
968
- />
969
- <span
970
- style="top: 0px; left: 0px; width: 100%; height: 100%; position: absolute; min-width: 20px; display: flex; justify-content: center; align-content: center;"
918
+ class="default_xu2jcg-o_O-spinnerContainer_agrn11"
971
919
  >
972
- <div
973
- class="default_xu2jcg-o_O-spinnerContainer_agrn11"
920
+ <svg
921
+ height="48"
922
+ viewBox="0 0 48 48"
923
+ width="48"
924
+ xmlns="http://www.w3.org/2000/svg"
974
925
  >
975
- <svg
976
- height="48"
977
- viewBox="0 0 48 48"
978
- width="48"
979
- xmlns="http://www.w3.org/2000/svg"
980
- >
981
- <path
982
- class="loadingSpinner_1dvgeb3-o_O-inlineStyles_1kzk0y9"
983
- 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"
984
- fill-rule="nonzero"
985
- />
986
- </svg>
987
- </div>
988
- </span>
989
- </div>
990
-
926
+ <path
927
+ class="loadingSpinner_1dvgeb3-o_O-inlineStyles_1kzk0y9"
928
+ 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"
929
+ fill-rule="nonzero"
930
+ />
931
+ </svg>
932
+ </div>
933
+ </span>
991
934
  </div>
935
+
992
936
  </div>
993
937
  </div>
994
- </span>
938
+ </div>
995
939
  </div>
996
940
  `;