@khanacademy/perseus 0.3.3 → 0.4.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 (60) hide show
  1. package/CHANGELOG.md +31 -0
  2. package/dist/es/index.js +8247 -5609
  3. package/dist/es/index.js.map +1 -1
  4. package/dist/index.js +17900 -15265
  5. package/dist/index.js.map +1 -1
  6. package/dist/strings.js +0 -1
  7. package/package.json +9 -8
  8. package/src/__tests__/__snapshots__/item-renderer_test.jsx.snap +2 -3
  9. package/src/__tests__/__snapshots__/server-item-renderer_test.jsx.snap +2 -3
  10. package/src/__tests__/renderer-api_test.jsx +3 -27
  11. package/src/components/__stories__/svg-image.stories.jsx +11 -0
  12. package/src/components/fixed-to-responsive.jsx +1 -0
  13. package/src/components/highlighting/ui/util.js +2 -2
  14. package/src/components/input-with-examples.jsx +3 -1
  15. package/src/components/svg-image.jsx +10 -7
  16. package/src/components/text-input.jsx +65 -16
  17. package/src/definition-context.js +59 -0
  18. package/src/index.js +5 -1
  19. package/src/interaction-tracker.js +2 -2
  20. package/src/item-renderer.jsx +1 -1
  21. package/src/mixins/provide-keypad.jsx +1 -1
  22. package/src/multi-items/__tests__/__snapshots__/multi-renderer_test.js.snap +438 -523
  23. package/src/multi-items/__tests__/multi-renderer_test.js +9 -9
  24. package/src/renderer.jsx +15 -8
  25. package/src/server-item-renderer.jsx +1 -1
  26. package/src/types.js +3 -4
  27. package/src/util/scroll-utils.js +2 -2
  28. package/src/widgets/__stories__/definition.stories.jsx +44 -0
  29. package/src/widgets/__tests__/__snapshots__/categorizer_test.jsx.snap +76 -8
  30. package/src/widgets/__tests__/__snapshots__/graded-group-set-jipt_test.jsx.snap +6 -9
  31. package/src/widgets/__tests__/__snapshots__/graded-group-set_test.jsx.snap +2 -3
  32. package/src/widgets/__tests__/__snapshots__/grapher_test.jsx.snap +19 -2
  33. package/src/widgets/__tests__/__snapshots__/group_test.jsx.snap +338 -390
  34. package/src/widgets/__tests__/__snapshots__/image_test.jsx.snap +38 -4
  35. package/src/widgets/__tests__/__snapshots__/interactive-graph_test.jsx.snap +114 -12
  36. package/src/widgets/__tests__/__snapshots__/matrix_test.jsx.snap +120 -48
  37. package/src/widgets/__tests__/__snapshots__/numeric-input_test.jsx.snap +8 -12
  38. package/src/widgets/__tests__/__snapshots__/radio_test.jsx.snap +3615 -4517
  39. package/src/widgets/__tests__/graded-group-set-jipt_test.jsx +0 -1
  40. package/src/widgets/__tests__/grapher.cypress.jsx +236 -176
  41. package/src/widgets/__tests__/group_test.jsx +4 -4
  42. package/src/widgets/__tests__/interactive-graph.cypress.jsx +371 -291
  43. package/src/widgets/__tests__/radio_test.jsx +73 -114
  44. package/src/widgets/definition.jsx +34 -32
  45. package/src/widgets/interactive-graph.jsx +4 -4
  46. package/src/widgets/label-image/answer-choices.jsx +1 -1
  47. package/src/widgets/label-image.jsx +1 -1
  48. package/src/widgets/molecule/molecule-drawing.jsx +1 -1
  49. package/src/widgets/numeric-input.jsx +2 -15
  50. package/src/widgets/radio/base-radio.jsx +1 -1
  51. package/src/widgets/radio/choice-icon.jsx +11 -10
  52. package/src/widgets/radio/choice.jsx +164 -396
  53. package/src/widgets/radio/cross-out-button.jsx +3 -5
  54. package/src/widgets/radio/option-status.jsx +4 -5
  55. package/src/widgets/radio/__stories__/cross-out-menu.stories.jsx +0 -59
  56. package/src/widgets/radio/__stories__/cross-out-tooltip.stories.jsx +0 -59
  57. package/src/widgets/radio/__stories__/toggleable-radio-button.stories.jsx +0 -28
  58. package/src/widgets/radio/cross-out-menu-wrapper.jsx +0 -492
  59. package/src/widgets/radio/cross-out-tooltip.jsx +0 -129
  60. package/src/widgets/radio/toggleable-radio-button.jsx +0 -133
package/src/multi-items/__tests__/__snapshots__/multi-renderer_test.js.snap CHANGED
@@ -129,654 +129,570 @@ exports[`multi-item renderer should snapshot: initial render 1`] = `
129
129
  </div>
130
130
  <ul
131
131
  class="perseus-widget-radio perseus-rendered-radio radio_zdxht7-o_O-responsiveRadioContainer_1ybwre2"
132
+ style="list-style: none;"
132
133
  >
133
134
  <li
134
135
  class="aboveScratchpad_1x0jb4k-o_O-item_dswvvi-o_O-responsiveItem_85oyrd perseus-radio-option"
135
136
  >
136
- <div>
137
+ <div
138
+ style="flex-direction: column;"
139
+ >
137
140
  <div
138
- class="wrapper_e7hn5"
141
+ style="display: flex; flex-direction: row; width: 100%; opacity: 1;"
139
142
  >
140
- <div
141
- class="slidingContent_1b7d4h4"
143
+ <button
144
+ aria-checked="false"
145
+ aria-disabled="false"
146
+ aria-label="Select Choice A"
147
+ class="button_vr44p2-o_O-reset_152ygtm-o_O-link_13xlah4-o_O-inlineStyles_bc4egv description description_psmgei"
148
+ role="checkbox"
149
+ tabindex="0"
150
+ type="button"
142
151
  >
143
152
  <div
144
- class="content_1rmtpuj"
153
+ style="display: flex; flex-direction: row; justify-content: center; align-content: center; padding-top: 8px; padding-bottom: 8px;"
145
154
  >
146
- <label
147
- class="checkbox-label label_1ekb3l0-o_O-responsiveLabel_19cgmwo"
148
- for="perseus_radio_9-choice-0"
149
- style="opacity: 1;"
150
- >
155
+ <span>
151
156
  <div
152
- class="description description_psmgei"
157
+ class="iconWrapper_17y0hv9"
153
158
  >
154
- <div
155
- class="checkbox-and-option intermediateResponsiveCheckbox_tqugjn"
159
+ <span
160
+ class="ring_en36io"
161
+ style="border-color: transparent;"
156
162
  >
157
- <span
158
- class="checkbox perseusInteractive_18kcvhx-o_O-choiceIconWrapper_1htut3f"
163
+ <div
164
+ class="libraryCircle_1ytyy5d"
165
+ data-is-radio-icon="true"
166
+ style="border-color: rgba(33,36,44,0.64); color: rgba(33, 36, 44, 0.64);"
159
167
  >
160
- <input
161
- class="perseusSrOnly_19bpjuy"
162
- id="perseus_radio_9-choice-0"
163
- name="perseus_radio_9"
164
- type="radio"
165
- />
166
168
  <div
167
- class="iconWrapper_17y0hv9"
169
+ class="perseus-sr-only"
168
170
  >
169
- <span
170
- class="ring_en36io"
171
- style="border-color: transparent;"
172
- >
173
- <div
174
- class="libraryCircle_1ytyy5d"
175
- data-is-radio-icon="true"
176
- style="border-color: #888d93; color: rgb(136, 141, 147);"
177
- >
178
- <div
179
- class="perseus-sr-only"
180
- >
181
- (Choice A)
182
- </div>
183
- <div
184
- aria-hidden="true"
185
- >
186
- A
187
- </div>
188
- </div>
189
- </span>
171
+ (Choice A)
190
172
  </div>
191
- </span>
192
- <span
193
- class="perseus-radio-option-content perseus-interactive"
194
- style="cursor: default;"
173
+ <div
174
+ aria-hidden="true"
175
+ >
176
+ A
177
+ </div>
178
+ </div>
179
+ </span>
180
+ </div>
181
+ </span>
182
+ <span
183
+ style="padding-left: 12px; text-align: left; flex: 1; padding-top: 4px;"
184
+ >
185
+ <div />
186
+ <div>
187
+ <span
188
+ class="mock-KatexProvider"
189
+ >
190
+ <div
191
+ class="perseus-renderer perseus-renderer-responsive"
195
192
  >
196
193
  <div
197
- class="optionStatusContainer_uhlm2"
198
- />
199
- <div>
200
- <span
201
- class="mock-KatexProvider"
194
+ class="paragraph"
195
+ data-perseus-paragraph-index="0"
196
+ >
197
+ <div
198
+ class="paragraph"
202
199
  >
203
- <div
204
- class="perseus-renderer perseus-renderer-responsive"
200
+ A triangle with side lengths of
201
+ <span
202
+ style="white-space: nowrap;"
203
+ >
204
+ <span />
205
+ <span
206
+ class="mock-TeX"
207
+ >
208
+ 3
209
+ </span>
210
+ <span />
211
+ </span>
212
+ ,
213
+ <span
214
+ style="white-space: nowrap;"
205
215
  >
206
- <div
207
- class="paragraph"
208
- data-perseus-paragraph-index="0"
216
+ <span />
217
+ <span
218
+ class="mock-TeX"
209
219
  >
210
- <div
211
- class="paragraph"
212
- >
213
- A triangle with side lengths of
214
- <span
215
- style="white-space: nowrap;"
216
- >
217
- <span />
218
- <span
219
- class="mock-TeX"
220
- >
221
- 3
222
- </span>
223
- <span />
224
- </span>
225
- ,
226
- <span
227
- style="white-space: nowrap;"
228
- >
229
- <span />
230
- <span
231
- class="mock-TeX"
232
- >
233
- 4
234
- </span>
235
- <span />
236
- </span>
237
- , and
238
- <span
239
- style="white-space: nowrap;"
240
- >
241
- <span />
242
- <span
243
- class="mock-TeX"
244
- >
245
- 5
246
- </span>
247
- <span />
248
- </span>
249
- </div>
250
- </div>
251
- </div>
252
- </span>
220
+ 4
221
+ </span>
222
+ <span />
223
+ </span>
224
+ , and
225
+ <span
226
+ style="white-space: nowrap;"
227
+ >
228
+ <span />
229
+ <span
230
+ class="mock-TeX"
231
+ >
232
+ 5
233
+ </span>
234
+ <span />
235
+ </span>
236
+ </div>
253
237
  </div>
254
- </span>
255
- </div>
238
+ </div>
239
+ </span>
256
240
  </div>
257
- </label>
241
+ </span>
258
242
  </div>
259
- </div>
243
+ </button>
260
244
  </div>
261
245
  </div>
262
246
  </li>
263
247
  <li
264
248
  class="aboveScratchpad_1x0jb4k-o_O-item_dswvvi-o_O-responsiveItem_85oyrd perseus-radio-option"
265
249
  >
266
- <div>
250
+ <div
251
+ style="flex-direction: column;"
252
+ >
267
253
  <div
268
- class="wrapper_e7hn5"
254
+ style="display: flex; flex-direction: row; width: 100%; opacity: 1;"
269
255
  >
270
- <div
271
- class="slidingContent_1b7d4h4"
256
+ <button
257
+ aria-checked="false"
258
+ aria-disabled="false"
259
+ aria-label="Select Choice B"
260
+ class="button_vr44p2-o_O-reset_152ygtm-o_O-link_13xlah4-o_O-inlineStyles_bc4egv description description_psmgei"
261
+ role="checkbox"
262
+ tabindex="0"
263
+ type="button"
272
264
  >
273
265
  <div
274
- class="content_1rmtpuj"
266
+ style="display: flex; flex-direction: row; justify-content: center; align-content: center; padding-top: 8px; padding-bottom: 8px;"
275
267
  >
276
- <label
277
- class="checkbox-label label_1ekb3l0-o_O-responsiveLabel_19cgmwo"
278
- for="perseus_radio_9-choice-1"
279
- style="opacity: 1;"
280
- >
268
+ <span>
281
269
  <div
282
- class="description description_psmgei"
270
+ class="iconWrapper_17y0hv9"
283
271
  >
284
- <div
285
- class="checkbox-and-option intermediateResponsiveCheckbox_tqugjn"
272
+ <span
273
+ class="ring_en36io"
274
+ style="border-color: transparent;"
286
275
  >
287
- <span
288
- class="checkbox perseusInteractive_18kcvhx-o_O-choiceIconWrapper_1htut3f"
276
+ <div
277
+ class="libraryCircle_1ytyy5d"
278
+ data-is-radio-icon="true"
279
+ style="border-color: rgba(33,36,44,0.64); color: rgba(33, 36, 44, 0.64);"
289
280
  >
290
- <input
291
- class="perseusSrOnly_19bpjuy"
292
- id="perseus_radio_9-choice-1"
293
- name="perseus_radio_9"
294
- type="radio"
295
- />
296
281
  <div
297
- class="iconWrapper_17y0hv9"
282
+ class="perseus-sr-only"
298
283
  >
299
- <span
300
- class="ring_en36io"
301
- style="border-color: transparent;"
302
- >
303
- <div
304
- class="libraryCircle_1ytyy5d"
305
- data-is-radio-icon="true"
306
- style="border-color: #888d93; color: rgb(136, 141, 147);"
307
- >
308
- <div
309
- class="perseus-sr-only"
310
- >
311
- (Choice B)
312
- </div>
313
- <div
314
- aria-hidden="true"
315
- >
316
- B
317
- </div>
318
- </div>
319
- </span>
284
+ (Choice B)
320
285
  </div>
321
- </span>
322
- <span
323
- class="perseus-radio-option-content perseus-interactive"
324
- style="cursor: default;"
286
+ <div
287
+ aria-hidden="true"
288
+ >
289
+ B
290
+ </div>
291
+ </div>
292
+ </span>
293
+ </div>
294
+ </span>
295
+ <span
296
+ style="padding-left: 12px; text-align: left; flex: 1; padding-top: 4px;"
297
+ >
298
+ <div />
299
+ <div>
300
+ <span
301
+ class="mock-KatexProvider"
302
+ >
303
+ <div
304
+ class="perseus-renderer perseus-renderer-responsive"
325
305
  >
326
306
  <div
327
- class="optionStatusContainer_uhlm2"
328
- />
329
- <div>
330
- <span
331
- class="mock-KatexProvider"
307
+ class="paragraph"
308
+ data-perseus-paragraph-index="0"
309
+ >
310
+ <div
311
+ class="paragraph"
332
312
  >
333
- <div
334
- class="perseus-renderer perseus-renderer-responsive"
313
+ A triangle with side lengths of
314
+ <span
315
+ style="white-space: nowrap;"
316
+ >
317
+ <span />
318
+ <span
319
+ class="mock-TeX"
320
+ >
321
+ 6
322
+ </span>
323
+ <span />
324
+ </span>
325
+ ,
326
+ <span
327
+ style="white-space: nowrap;"
328
+ >
329
+ <span />
330
+ <span
331
+ class="mock-TeX"
332
+ >
333
+ 7
334
+ </span>
335
+ <span />
336
+ </span>
337
+ , and
338
+ <span
339
+ style="white-space: nowrap;"
335
340
  >
336
- <div
337
- class="paragraph"
338
- data-perseus-paragraph-index="0"
341
+ <span />
342
+ <span
343
+ class="mock-TeX"
339
344
  >
340
- <div
341
- class="paragraph"
342
- >
343
- A triangle with side lengths of
344
- <span
345
- style="white-space: nowrap;"
346
- >
347
- <span />
348
- <span
349
- class="mock-TeX"
350
- >
351
- 6
352
- </span>
353
- <span />
354
- </span>
355
- ,
356
- <span
357
- style="white-space: nowrap;"
358
- >
359
- <span />
360
- <span
361
- class="mock-TeX"
362
- >
363
- 7
364
- </span>
365
- <span />
366
- </span>
367
- , and
368
- <span
369
- style="white-space: nowrap;"
370
- >
371
- <span />
372
- <span
373
- class="mock-TeX"
374
- >
375
- 10
376
- </span>
377
- <span />
378
- </span>
379
- </div>
380
- </div>
381
- </div>
382
- </span>
345
+ 10
346
+ </span>
347
+ <span />
348
+ </span>
349
+ </div>
383
350
  </div>
384
- </span>
385
- </div>
351
+ </div>
352
+ </span>
386
353
  </div>
387
- </label>
354
+ </span>
388
355
  </div>
389
- </div>
356
+ </button>
390
357
  </div>
391
358
  </div>
392
359
  </li>
393
360
  <li
394
361
  class="aboveScratchpad_1x0jb4k-o_O-item_dswvvi-o_O-responsiveItem_85oyrd perseus-radio-option"
395
362
  >
396
- <div>
363
+ <div
364
+ style="flex-direction: column;"
365
+ >
397
366
  <div
398
- class="wrapper_e7hn5"
367
+ style="display: flex; flex-direction: row; width: 100%; opacity: 1;"
399
368
  >
400
- <div
401
- class="slidingContent_1b7d4h4"
369
+ <button
370
+ aria-checked="false"
371
+ aria-disabled="false"
372
+ aria-label="Select Choice C"
373
+ class="button_vr44p2-o_O-reset_152ygtm-o_O-link_13xlah4-o_O-inlineStyles_bc4egv description description_psmgei"
374
+ role="checkbox"
375
+ tabindex="0"
376
+ type="button"
402
377
  >
403
378
  <div
404
- class="content_1rmtpuj"
379
+ style="display: flex; flex-direction: row; justify-content: center; align-content: center; padding-top: 8px; padding-bottom: 8px;"
405
380
  >
406
- <label
407
- class="checkbox-label label_1ekb3l0-o_O-responsiveLabel_19cgmwo"
408
- for="perseus_radio_9-choice-2"
409
- style="opacity: 1;"
410
- >
381
+ <span>
411
382
  <div
412
- class="description description_psmgei"
383
+ class="iconWrapper_17y0hv9"
413
384
  >
414
- <div
415
- class="checkbox-and-option intermediateResponsiveCheckbox_tqugjn"
385
+ <span
386
+ class="ring_en36io"
387
+ style="border-color: transparent;"
416
388
  >
417
- <span
418
- class="checkbox perseusInteractive_18kcvhx-o_O-choiceIconWrapper_1htut3f"
389
+ <div
390
+ class="libraryCircle_1ytyy5d"
391
+ data-is-radio-icon="true"
392
+ style="border-color: rgba(33,36,44,0.64); color: rgba(33, 36, 44, 0.64);"
419
393
  >
420
- <input
421
- class="perseusSrOnly_19bpjuy"
422
- id="perseus_radio_9-choice-2"
423
- name="perseus_radio_9"
424
- type="radio"
425
- />
426
394
  <div
427
- class="iconWrapper_17y0hv9"
395
+ class="perseus-sr-only"
428
396
  >
429
- <span
430
- class="ring_en36io"
431
- style="border-color: transparent;"
432
- >
433
- <div
434
- class="libraryCircle_1ytyy5d"
435
- data-is-radio-icon="true"
436
- style="border-color: #888d93; color: rgb(136, 141, 147);"
437
- >
438
- <div
439
- class="perseus-sr-only"
440
- >
441
- (Choice C)
442
- </div>
443
- <div
444
- aria-hidden="true"
445
- >
446
- C
447
- </div>
448
- </div>
449
- </span>
397
+ (Choice C)
450
398
  </div>
451
- </span>
452
- <span
453
- class="perseus-radio-option-content perseus-interactive"
454
- style="cursor: default;"
399
+ <div
400
+ aria-hidden="true"
401
+ >
402
+ C
403
+ </div>
404
+ </div>
405
+ </span>
406
+ </div>
407
+ </span>
408
+ <span
409
+ style="padding-left: 12px; text-align: left; flex: 1; padding-top: 4px;"
410
+ >
411
+ <div />
412
+ <div>
413
+ <span
414
+ class="mock-KatexProvider"
415
+ >
416
+ <div
417
+ class="perseus-renderer perseus-renderer-responsive"
455
418
  >
456
419
  <div
457
- class="optionStatusContainer_uhlm2"
458
- />
459
- <div>
460
- <span
461
- class="mock-KatexProvider"
420
+ class="paragraph"
421
+ data-perseus-paragraph-index="0"
422
+ >
423
+ <div
424
+ class="paragraph"
462
425
  >
463
- <div
464
- class="perseus-renderer perseus-renderer-responsive"
426
+ A triangle with side lengths of
427
+ <span
428
+ style="white-space: nowrap;"
429
+ >
430
+ <span />
431
+ <span
432
+ class="mock-TeX"
433
+ >
434
+ 10
435
+ </span>
436
+ <span />
437
+ </span>
438
+ ,
439
+ <span
440
+ style="white-space: nowrap;"
465
441
  >
466
- <div
467
- class="paragraph"
468
- data-perseus-paragraph-index="0"
442
+ <span />
443
+ <span
444
+ class="mock-TeX"
469
445
  >
470
- <div
471
- class="paragraph"
472
- >
473
- A triangle with side lengths of
474
- <span
475
- style="white-space: nowrap;"
476
- >
477
- <span />
478
- <span
479
- class="mock-TeX"
480
- >
481
- 10
482
- </span>
483
- <span />
484
- </span>
485
- ,
486
- <span
487
- style="white-space: nowrap;"
488
- >
489
- <span />
490
- <span
491
- class="mock-TeX"
492
- >
493
- 12
494
- </span>
495
- <span />
496
- </span>
497
- , and
498
- <span
499
- style="white-space: nowrap;"
500
- >
501
- <span />
502
- <span
503
- class="mock-TeX"
504
- >
505
- 18
506
- </span>
507
- <span />
508
- </span>
509
- </div>
510
- </div>
511
- </div>
512
- </span>
446
+ 12
447
+ </span>
448
+ <span />
449
+ </span>
450
+ , and
451
+ <span
452
+ style="white-space: nowrap;"
453
+ >
454
+ <span />
455
+ <span
456
+ class="mock-TeX"
457
+ >
458
+ 18
459
+ </span>
460
+ <span />
461
+ </span>
462
+ </div>
513
463
  </div>
514
- </span>
515
- </div>
464
+ </div>
465
+ </span>
516
466
  </div>
517
- </label>
467
+ </span>
518
468
  </div>
519
- </div>
469
+ </button>
520
470
  </div>
521
471
  </div>
522
472
  </li>
523
473
  <li
524
474
  class="aboveScratchpad_1x0jb4k-o_O-item_dswvvi-o_O-responsiveItem_85oyrd perseus-radio-option"
525
475
  >
526
- <div>
476
+ <div
477
+ style="flex-direction: column;"
478
+ >
527
479
  <div
528
- class="wrapper_e7hn5"
480
+ style="display: flex; flex-direction: row; width: 100%; opacity: 1;"
529
481
  >
530
- <div
531
- class="slidingContent_1b7d4h4"
482
+ <button
483
+ aria-checked="false"
484
+ aria-disabled="false"
485
+ aria-label="Select Choice D"
486
+ class="button_vr44p2-o_O-reset_152ygtm-o_O-link_13xlah4-o_O-inlineStyles_bc4egv description description_psmgei"
487
+ role="checkbox"
488
+ tabindex="0"
489
+ type="button"
532
490
  >
533
491
  <div
534
- class="content_1rmtpuj"
492
+ style="display: flex; flex-direction: row; justify-content: center; align-content: center; padding-top: 8px; padding-bottom: 8px;"
535
493
  >
536
- <label
537
- class="checkbox-label label_1ekb3l0-o_O-responsiveLabel_19cgmwo"
538
- for="perseus_radio_9-choice-3"
539
- style="opacity: 1;"
540
- >
494
+ <span>
541
495
  <div
542
- class="description description_psmgei"
496
+ class="iconWrapper_17y0hv9"
543
497
  >
544
- <div
545
- class="checkbox-and-option intermediateResponsiveCheckbox_tqugjn"
498
+ <span
499
+ class="ring_en36io"
500
+ style="border-color: transparent;"
546
501
  >
547
- <span
548
- class="checkbox perseusInteractive_18kcvhx-o_O-choiceIconWrapper_1htut3f"
502
+ <div
503
+ class="libraryCircle_1ytyy5d"
504
+ data-is-radio-icon="true"
505
+ style="border-color: rgba(33,36,44,0.64); color: rgba(33, 36, 44, 0.64);"
549
506
  >
550
- <input
551
- class="perseusSrOnly_19bpjuy"
552
- id="perseus_radio_9-choice-3"
553
- name="perseus_radio_9"
554
- type="radio"
555
- />
556
507
  <div
557
- class="iconWrapper_17y0hv9"
508
+ class="perseus-sr-only"
558
509
  >
559
- <span
560
- class="ring_en36io"
561
- style="border-color: transparent;"
562
- >
563
- <div
564
- class="libraryCircle_1ytyy5d"
565
- data-is-radio-icon="true"
566
- style="border-color: #888d93; color: rgb(136, 141, 147);"
567
- >
568
- <div
569
- class="perseus-sr-only"
570
- >
571
- (Choice D)
572
- </div>
573
- <div
574
- aria-hidden="true"
575
- >
576
- D
577
- </div>
578
- </div>
579
- </span>
510
+ (Choice D)
580
511
  </div>
581
- </span>
582
- <span
583
- class="perseus-radio-option-content perseus-interactive"
584
- style="cursor: default;"
512
+ <div
513
+ aria-hidden="true"
514
+ >
515
+ D
516
+ </div>
517
+ </div>
518
+ </span>
519
+ </div>
520
+ </span>
521
+ <span
522
+ style="padding-left: 12px; text-align: left; flex: 1; padding-top: 4px;"
523
+ >
524
+ <div />
525
+ <div>
526
+ <span
527
+ class="mock-KatexProvider"
528
+ >
529
+ <div
530
+ class="perseus-renderer perseus-renderer-responsive"
585
531
  >
586
532
  <div
587
- class="optionStatusContainer_uhlm2"
588
- />
589
- <div>
590
- <span
591
- class="mock-KatexProvider"
533
+ class="paragraph"
534
+ data-perseus-paragraph-index="0"
535
+ >
536
+ <div
537
+ class="paragraph"
592
538
  >
593
- <div
594
- class="perseus-renderer perseus-renderer-responsive"
539
+ A triangle with side lengths of
540
+ <span
541
+ style="white-space: nowrap;"
595
542
  >
596
- <div
597
- class="paragraph"
598
- data-perseus-paragraph-index="0"
543
+ <span />
544
+ <span
545
+ class="mock-TeX"
599
546
  >
600
- <div
601
- class="paragraph"
602
- >
603
- A triangle with side lengths of
604
- <span
605
- style="white-space: nowrap;"
606
- >
607
- <span />
608
- <span
609
- class="mock-TeX"
610
- >
611
- 12
612
- </span>
613
- <span />
614
- </span>
615
- ,
616
- <span
617
- style="white-space: nowrap;"
618
- >
619
- <span />
620
- <span
621
- class="mock-TeX"
622
- >
623
- 14
624
- </span>
625
- <span />
626
- </span>
627
- , and
628
- <span
629
- style="white-space: nowrap;"
630
- >
631
- <span />
632
- <span
633
- class="mock-TeX"
634
- >
635
- 20
636
- </span>
637
- <span />
638
- </span>
639
- </div>
640
- </div>
641
- </div>
642
- </span>
547
+ 12
548
+ </span>
549
+ <span />
550
+ </span>
551
+ ,
552
+ <span
553
+ style="white-space: nowrap;"
554
+ >
555
+ <span />
556
+ <span
557
+ class="mock-TeX"
558
+ >
559
+ 14
560
+ </span>
561
+ <span />
562
+ </span>
563
+ , and
564
+ <span
565
+ style="white-space: nowrap;"
566
+ >
567
+ <span />
568
+ <span
569
+ class="mock-TeX"
570
+ >
571
+ 20
572
+ </span>
573
+ <span />
574
+ </span>
575
+ </div>
643
576
  </div>
644
- </span>
645
- </div>
577
+ </div>
578
+ </span>
646
579
  </div>
647
- </label>
580
+ </span>
648
581
  </div>
649
- </div>
582
+ </button>
650
583
  </div>
651
584
  </div>
652
585
  </li>
653
586
  <li
654
587
  class="aboveScratchpad_1x0jb4k-o_O-item_dswvvi-o_O-responsiveItem_85oyrd perseus-radio-option"
655
588
  >
656
- <div>
589
+ <div
590
+ style="flex-direction: column;"
591
+ >
657
592
  <div
658
- class="wrapper_e7hn5"
593
+ style="display: flex; flex-direction: row; width: 100%; opacity: 1;"
659
594
  >
660
- <div
661
- class="slidingContent_1b7d4h4"
595
+ <button
596
+ aria-checked="false"
597
+ aria-disabled="false"
598
+ aria-label="Select Choice E"
599
+ class="button_vr44p2-o_O-reset_152ygtm-o_O-link_13xlah4-o_O-inlineStyles_bc4egv description description_psmgei"
600
+ role="checkbox"
601
+ tabindex="0"
602
+ type="button"
662
603
  >
663
604
  <div
664
- class="content_1rmtpuj"
605
+ style="display: flex; flex-direction: row; justify-content: center; align-content: center; padding-top: 8px; padding-bottom: 8px;"
665
606
  >
666
- <label
667
- class="checkbox-label label_1ekb3l0-o_O-responsiveLabel_19cgmwo"
668
- for="perseus_radio_9-choice-4"
669
- style="opacity: 1;"
670
- >
607
+ <span>
671
608
  <div
672
- class="description description_psmgei"
609
+ class="iconWrapper_17y0hv9"
673
610
  >
674
- <div
675
- class="checkbox-and-option intermediateResponsiveCheckbox_tqugjn"
611
+ <span
612
+ class="ring_en36io"
613
+ style="border-color: transparent;"
676
614
  >
677
- <span
678
- class="checkbox perseusInteractive_18kcvhx-o_O-choiceIconWrapper_1htut3f"
615
+ <div
616
+ class="libraryCircle_1ytyy5d"
617
+ data-is-radio-icon="true"
618
+ style="border-color: rgba(33,36,44,0.64); color: rgba(33, 36, 44, 0.64);"
679
619
  >
680
- <input
681
- class="perseusSrOnly_19bpjuy"
682
- id="perseus_radio_9-choice-4"
683
- name="perseus_radio_9"
684
- type="radio"
685
- />
686
620
  <div
687
- class="iconWrapper_17y0hv9"
621
+ class="perseus-sr-only"
688
622
  >
689
- <span
690
- class="ring_en36io"
691
- style="border-color: transparent;"
692
- >
693
- <div
694
- class="libraryCircle_1ytyy5d"
695
- data-is-radio-icon="true"
696
- style="border-color: #888d93; color: rgb(136, 141, 147);"
697
- >
698
- <div
699
- class="perseus-sr-only"
700
- >
701
- (Choice E)
702
- </div>
703
- <div
704
- aria-hidden="true"
705
- >
706
- E
707
- </div>
708
- </div>
709
- </span>
623
+ (Choice E)
710
624
  </div>
711
- </span>
712
- <span
713
- class="perseus-radio-option-content perseus-interactive"
714
- style="cursor: default;"
625
+ <div
626
+ aria-hidden="true"
627
+ >
628
+ E
629
+ </div>
630
+ </div>
631
+ </span>
632
+ </div>
633
+ </span>
634
+ <span
635
+ style="padding-left: 12px; text-align: left; flex: 1; padding-top: 4px;"
636
+ >
637
+ <div />
638
+ <div>
639
+ <span
640
+ class="mock-KatexProvider"
641
+ >
642
+ <div
643
+ class="perseus-renderer perseus-renderer-responsive"
715
644
  >
716
645
  <div
717
- class="optionStatusContainer_uhlm2"
718
- />
719
- <div>
720
- <span
721
- class="mock-KatexProvider"
646
+ class="paragraph"
647
+ data-perseus-paragraph-index="0"
648
+ >
649
+ <div
650
+ class="paragraph"
722
651
  >
723
- <div
724
- class="perseus-renderer perseus-renderer-responsive"
652
+ A triangle with side lengths of
653
+ <span
654
+ style="white-space: nowrap;"
655
+ >
656
+ <span />
657
+ <span
658
+ class="mock-TeX"
659
+ >
660
+ 24
661
+ </span>
662
+ <span />
663
+ </span>
664
+ ,
665
+ <span
666
+ style="white-space: nowrap;"
667
+ >
668
+ <span />
669
+ <span
670
+ class="mock-TeX"
671
+ >
672
+ 28
673
+ </span>
674
+ <span />
675
+ </span>
676
+ , and
677
+ <span
678
+ style="white-space: nowrap;"
725
679
  >
726
- <div
727
- class="paragraph"
728
- data-perseus-paragraph-index="0"
680
+ <span />
681
+ <span
682
+ class="mock-TeX"
729
683
  >
730
- <div
731
- class="paragraph"
732
- >
733
- A triangle with side lengths of
734
- <span
735
- style="white-space: nowrap;"
736
- >
737
- <span />
738
- <span
739
- class="mock-TeX"
740
- >
741
- 24
742
- </span>
743
- <span />
744
- </span>
745
- ,
746
- <span
747
- style="white-space: nowrap;"
748
- >
749
- <span />
750
- <span
751
- class="mock-TeX"
752
- >
753
- 28
754
- </span>
755
- <span />
756
- </span>
757
- , and
758
- <span
759
- style="white-space: nowrap;"
760
- >
761
- <span />
762
- <span
763
- class="mock-TeX"
764
- >
765
- 40
766
- </span>
767
- <span />
768
- </span>
769
- </div>
770
- </div>
771
- </div>
772
- </span>
684
+ 40
685
+ </span>
686
+ <span />
687
+ </span>
688
+ </div>
773
689
  </div>
774
- </span>
775
- </div>
690
+ </div>
691
+ </span>
776
692
  </div>
777
- </label>
693
+ </span>
778
694
  </div>
779
- </div>
695
+ </button>
780
696
  </div>
781
697
  </div>
782
698
  </li>
@@ -800,12 +716,11 @@ exports[`multi-item renderer should snapshot: initial render 1`] = `
800
716
  <span>
801
717
  <div>
802
718
  <input
803
- aria-describedby="input-with-examples-aW5wdXQtbnVtYmVyIDE"
804
719
  autocapitalize="off"
805
720
  autocomplete="off"
806
721
  autocorrect="off"
807
- class="perseus-input perseus-interactive perseus-input-size-normal"
808
- spellcheck="false"
722
+ class="input_1t4b01j-o_O-LabelMedium_1rew30o-o_O-default_1r2dwp3"
723
+ id="input-with-examples-aW5wdXQtbnVtYmVyIDE"
809
724
  type="text"
810
725
  value=""
811
726
  />