@khanacademy/perseus 1.1.0 → 1.1.2

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 (45) hide show
  1. package/CHANGELOG.md +16 -0
  2. package/dist/es/index.css +3 -0
  3. package/dist/es/index.js +15385 -15345
  4. package/dist/es/index.js.map +1 -1
  5. package/dist/index.css +3 -0
  6. package/dist/index.js +15309 -15269
  7. package/dist/index.js.map +1 -1
  8. package/dist/strings.js +1 -0
  9. package/package.json +1 -1
  10. package/src/__stories__/hints-renderer.stories.jsx +52 -0
  11. package/src/components/__stories__/input-with-examples.stories.jsx +1 -0
  12. package/src/components/input-with-examples.jsx +41 -24
  13. package/src/components/text-input.jsx +5 -3
  14. package/src/hints-renderer.jsx +13 -4
  15. package/src/mixins/__tests__/widget-prop-blacklist_test.js +23 -0
  16. package/src/mixins/widget-prop-blacklist.js +15 -1
  17. package/src/multi-items/__tests__/__snapshots__/multi-renderer_test.js.snap +30 -10
  18. package/src/styles/widgets/matrix.less +2 -0
  19. package/src/styles/widgets/passage.less +1 -0
  20. package/src/types.js +1 -1
  21. package/src/widgets/__stories__/numeric-input.stories.jsx +53 -7
  22. package/src/widgets/__tests__/__snapshots__/graded-group-set-jipt_test.jsx.snap +18 -9
  23. package/src/widgets/__tests__/__snapshots__/graded-group-set_test.jsx.snap +12 -3
  24. package/src/widgets/__tests__/__snapshots__/graded-group_test.jsx.snap +6 -3
  25. package/src/widgets/__tests__/__snapshots__/group_test.jsx.snap +32 -12
  26. package/src/widgets/__tests__/__snapshots__/matrix_test.jsx.snap +24 -24
  27. package/src/widgets/__tests__/__snapshots__/numeric-input_test.jsx.snap +4 -4
  28. package/src/widgets/__tests__/__snapshots__/passage-ref_test.jsx.snap +3 -3
  29. package/src/widgets/__tests__/__snapshots__/passage_test.jsx.snap +6 -6
  30. package/src/widgets/__tests__/__snapshots__/radio_test.jsx.snap +300 -218
  31. package/src/widgets/__tests__/radio/base-radio_test.jsx +90 -6
  32. package/src/widgets/__tests__/radio/choice-icon_test.jsx +74 -0
  33. package/src/widgets/__tests__/radio/choice_test.jsx +39 -30
  34. package/src/widgets/__tests__/radio_test.jsx +228 -22
  35. package/src/widgets/graded-group-set.jsx +8 -1
  36. package/src/widgets/graded-group.jsx +7 -2
  37. package/src/widgets/matrix.jsx +17 -1
  38. package/src/widgets/numeric-input.jsx +12 -6
  39. package/src/widgets/passage-ref.jsx +21 -5
  40. package/src/widgets/passage.jsx +3 -1
  41. package/src/widgets/radio/__stories__/base-radio.stories.jsx +7 -3
  42. package/src/widgets/radio/base-radio.jsx +3 -1
  43. package/src/widgets/radio/choice-icon/cross-out-line.jsx +3 -2
  44. package/src/widgets/radio/choice-icon/library-choice-icon.jsx +17 -6
  45. package/src/widgets/radio/choice.jsx +2 -1
package/src/widgets/__tests__/__snapshots__/radio_test.jsx.snap CHANGED
@@ -76,12 +76,12 @@ exports[`multi-choice question should snapshot the same when invalid: invalid st
76
76
  class="perseus-sr-only"
77
77
  >
78
78
  <input
79
- id="choice-476"
79
+ id="choice-564"
80
80
  tabindex="-1"
81
81
  type="checkbox"
82
82
  />
83
83
  <label
84
- for="choice-476"
84
+ for="choice-564"
85
85
  >
86
86
  (Choice A, Checked)
87
87
   
@@ -123,7 +123,7 @@ exports[`multi-choice question should snapshot the same when invalid: invalid st
123
123
  type="button"
124
124
  >
125
125
  <div
126
- style="display: flex; flex-direction: row; justify-content: center; align-content: center; padding-top: 8px; padding-bottom: 8px;"
126
+ style="display: flex; flex-direction: row; justify-content: center; align-content: center; padding-top: 8px; padding-bottom: 8px; padding-left: 8px;"
127
127
  >
128
128
  <div
129
129
  class="iconWrapper_17y0hv9"
@@ -139,7 +139,11 @@ exports[`multi-choice question should snapshot the same when invalid: invalid st
139
139
  data-test-id="choice-icon__library-choice-icon"
140
140
  style="border-color: #1865f2; color: rgb(255, 255, 255); border-radius: 3px; background-color: rgb(24, 101, 242);"
141
141
  >
142
- A
142
+ <div
143
+ class="innerWrapper_177sg8x"
144
+ >
145
+ A
146
+ </div>
143
147
  </div>
144
148
  </span>
145
149
  </div>
@@ -195,12 +199,12 @@ exports[`multi-choice question should snapshot the same when invalid: invalid st
195
199
  class="perseus-sr-only"
196
200
  >
197
201
  <input
198
- id="choice-477"
202
+ id="choice-565"
199
203
  tabindex="-1"
200
204
  type="checkbox"
201
205
  />
202
206
  <label
203
- for="choice-477"
207
+ for="choice-565"
204
208
  >
205
209
  (Choice B)
206
210
   
@@ -242,7 +246,7 @@ exports[`multi-choice question should snapshot the same when invalid: invalid st
242
246
  type="button"
243
247
  >
244
248
  <div
245
- style="display: flex; flex-direction: row; justify-content: center; align-content: center; padding-top: 8px; padding-bottom: 8px;"
249
+ style="display: flex; flex-direction: row; justify-content: center; align-content: center; padding-top: 8px; padding-bottom: 8px; padding-left: 8px;"
246
250
  >
247
251
  <div
248
252
  class="iconWrapper_17y0hv9"
@@ -258,7 +262,11 @@ exports[`multi-choice question should snapshot the same when invalid: invalid st
258
262
  data-test-id="choice-icon__library-choice-icon"
259
263
  style="border-color: rgba(33,36,44,0.64); color: rgba(33, 36, 44, 0.64); border-radius: 3px;"
260
264
  >
261
- B
265
+ <div
266
+ class="innerWrapper_177sg8x"
267
+ >
268
+ B
269
+ </div>
262
270
  </div>
263
271
  </span>
264
272
  </div>
@@ -314,12 +322,12 @@ exports[`multi-choice question should snapshot the same when invalid: invalid st
314
322
  class="perseus-sr-only"
315
323
  >
316
324
  <input
317
- id="choice-478"
325
+ id="choice-566"
318
326
  tabindex="-1"
319
327
  type="checkbox"
320
328
  />
321
329
  <label
322
- for="choice-478"
330
+ for="choice-566"
323
331
  >
324
332
  (Choice C)
325
333
   
@@ -361,7 +369,7 @@ exports[`multi-choice question should snapshot the same when invalid: invalid st
361
369
  type="button"
362
370
  >
363
371
  <div
364
- style="display: flex; flex-direction: row; justify-content: center; align-content: center; padding-top: 8px; padding-bottom: 8px;"
372
+ style="display: flex; flex-direction: row; justify-content: center; align-content: center; padding-top: 8px; padding-bottom: 8px; padding-left: 8px;"
365
373
  >
366
374
  <div
367
375
  class="iconWrapper_17y0hv9"
@@ -377,7 +385,11 @@ exports[`multi-choice question should snapshot the same when invalid: invalid st
377
385
  data-test-id="choice-icon__library-choice-icon"
378
386
  style="border-color: rgba(33,36,44,0.64); color: rgba(33, 36, 44, 0.64); border-radius: 3px;"
379
387
  >
380
- C
388
+ <div
389
+ class="innerWrapper_177sg8x"
390
+ >
391
+ C
392
+ </div>
381
393
  </div>
382
394
  </span>
383
395
  </div>
@@ -433,12 +445,12 @@ exports[`multi-choice question should snapshot the same when invalid: invalid st
433
445
  class="perseus-sr-only"
434
446
  >
435
447
  <input
436
- id="choice-479"
448
+ id="choice-567"
437
449
  tabindex="-1"
438
450
  type="checkbox"
439
451
  />
440
452
  <label
441
- for="choice-479"
453
+ for="choice-567"
442
454
  >
443
455
  (Choice D)
444
456
   
@@ -471,7 +483,7 @@ exports[`multi-choice question should snapshot the same when invalid: invalid st
471
483
  type="button"
472
484
  >
473
485
  <div
474
- style="display: flex; flex-direction: row; justify-content: center; align-content: center; padding-top: 8px; padding-bottom: 8px;"
486
+ style="display: flex; flex-direction: row; justify-content: center; align-content: center; padding-top: 8px; padding-bottom: 8px; padding-left: 8px;"
475
487
  >
476
488
  <div
477
489
  class="iconWrapper_17y0hv9"
@@ -487,7 +499,11 @@ exports[`multi-choice question should snapshot the same when invalid: invalid st
487
499
  data-test-id="choice-icon__library-choice-icon"
488
500
  style="border-color: rgba(33,36,44,0.64); color: rgba(33, 36, 44, 0.64); border-radius: 3px;"
489
501
  >
490
- D
502
+ <div
503
+ class="innerWrapper_177sg8x"
504
+ >
505
+ D
506
+ </div>
491
507
  </div>
492
508
  </span>
493
509
  </div>
@@ -656,12 +672,12 @@ exports[`single-choice question satStyling: false reviewMode: false should snaps
656
672
  class="perseus-sr-only"
657
673
  >
658
674
  <input
659
- id="choice-310"
675
+ id="choice-330"
660
676
  tabindex="-1"
661
677
  type="radio"
662
678
  />
663
679
  <label
664
- for="choice-310"
680
+ for="choice-330"
665
681
  >
666
682
  (Choice A)
667
683
   
@@ -716,7 +732,7 @@ exports[`single-choice question satStyling: false reviewMode: false should snaps
716
732
  type="button"
717
733
  >
718
734
  <div
719
- style="display: flex; flex-direction: row; justify-content: center; align-content: center; padding-top: 8px; padding-bottom: 8px;"
735
+ style="display: flex; flex-direction: row; justify-content: center; align-content: center; padding-top: 8px; padding-bottom: 8px; padding-left: 8px;"
720
736
  >
721
737
  <div
722
738
  class="iconWrapper_17y0hv9"
@@ -732,7 +748,11 @@ exports[`single-choice question satStyling: false reviewMode: false should snaps
732
748
  data-test-id="choice-icon__library-choice-icon"
733
749
  style="border-color: rgba(33,36,44,0.64); color: rgba(33, 36, 44, 0.64); border-radius: 24px;"
734
750
  >
735
- A
751
+ <div
752
+ class="innerWrapper_177sg8x"
753
+ >
754
+ A
755
+ </div>
736
756
  </div>
737
757
  </span>
738
758
  </div>
@@ -801,12 +821,12 @@ exports[`single-choice question satStyling: false reviewMode: false should snaps
801
821
  class="perseus-sr-only"
802
822
  >
803
823
  <input
804
- id="choice-311"
824
+ id="choice-331"
805
825
  tabindex="-1"
806
826
  type="radio"
807
827
  />
808
828
  <label
809
- for="choice-311"
829
+ for="choice-331"
810
830
  >
811
831
  (Choice B)
812
832
   
@@ -848,7 +868,7 @@ exports[`single-choice question satStyling: false reviewMode: false should snaps
848
868
  type="button"
849
869
  >
850
870
  <div
851
- style="display: flex; flex-direction: row; justify-content: center; align-content: center; padding-top: 8px; padding-bottom: 8px;"
871
+ style="display: flex; flex-direction: row; justify-content: center; align-content: center; padding-top: 8px; padding-bottom: 8px; padding-left: 8px;"
852
872
  >
853
873
  <div
854
874
  class="iconWrapper_17y0hv9"
@@ -864,7 +884,11 @@ exports[`single-choice question satStyling: false reviewMode: false should snaps
864
884
  data-test-id="choice-icon__library-choice-icon"
865
885
  style="border-color: rgba(33,36,44,0.64); color: rgba(33, 36, 44, 0.64); border-radius: 24px;"
866
886
  >
867
- B
887
+ <div
888
+ class="innerWrapper_177sg8x"
889
+ >
890
+ B
891
+ </div>
868
892
  </div>
869
893
  </span>
870
894
  </div>
@@ -920,12 +944,12 @@ exports[`single-choice question satStyling: false reviewMode: false should snaps
920
944
  class="perseus-sr-only"
921
945
  >
922
946
  <input
923
- id="choice-312"
947
+ id="choice-332"
924
948
  tabindex="-1"
925
949
  type="radio"
926
950
  />
927
951
  <label
928
- for="choice-312"
952
+ for="choice-332"
929
953
  >
930
954
  (Choice C, Checked)
931
955
   
@@ -967,7 +991,7 @@ exports[`single-choice question satStyling: false reviewMode: false should snaps
967
991
  type="button"
968
992
  >
969
993
  <div
970
- style="display: flex; flex-direction: row; justify-content: center; align-content: center; padding-top: 8px; padding-bottom: 8px;"
994
+ style="display: flex; flex-direction: row; justify-content: center; align-content: center; padding-top: 8px; padding-bottom: 8px; padding-left: 8px;"
971
995
  >
972
996
  <div
973
997
  class="iconWrapper_17y0hv9"
@@ -983,7 +1007,11 @@ exports[`single-choice question satStyling: false reviewMode: false should snaps
983
1007
  data-test-id="choice-icon__library-choice-icon"
984
1008
  style="border-color: #1865f2; color: rgb(255, 255, 255); border-radius: 24px; background-color: rgb(24, 101, 242);"
985
1009
  >
986
- C
1010
+ <div
1011
+ class="innerWrapper_177sg8x"
1012
+ >
1013
+ C
1014
+ </div>
987
1015
  </div>
988
1016
  </span>
989
1017
  </div>
@@ -1039,12 +1067,12 @@ exports[`single-choice question satStyling: false reviewMode: false should snaps
1039
1067
  class="perseus-sr-only"
1040
1068
  >
1041
1069
  <input
1042
- id="choice-313"
1070
+ id="choice-333"
1043
1071
  tabindex="-1"
1044
1072
  type="radio"
1045
1073
  />
1046
1074
  <label
1047
- for="choice-313"
1075
+ for="choice-333"
1048
1076
  >
1049
1077
  (Choice D)
1050
1078
   
@@ -1089,7 +1117,7 @@ exports[`single-choice question satStyling: false reviewMode: false should snaps
1089
1117
  type="button"
1090
1118
  >
1091
1119
  <div
1092
- style="display: flex; flex-direction: row; justify-content: center; align-content: center; padding-top: 8px; padding-bottom: 8px;"
1120
+ style="display: flex; flex-direction: row; justify-content: center; align-content: center; padding-top: 8px; padding-bottom: 8px; padding-left: 8px;"
1093
1121
  >
1094
1122
  <div
1095
1123
  class="iconWrapper_17y0hv9"
@@ -1105,7 +1133,11 @@ exports[`single-choice question satStyling: false reviewMode: false should snaps
1105
1133
  data-test-id="choice-icon__library-choice-icon"
1106
1134
  style="border-color: rgba(33,36,44,0.64); color: rgba(33, 36, 44, 0.64); border-radius: 24px;"
1107
1135
  >
1108
- D
1136
+ <div
1137
+ class="innerWrapper_177sg8x"
1138
+ >
1139
+ D
1140
+ </div>
1109
1141
  </div>
1110
1142
  </span>
1111
1143
  </div>
@@ -1248,12 +1280,12 @@ exports[`single-choice question satStyling: false reviewMode: false should snaps
1248
1280
  class="perseus-sr-only"
1249
1281
  >
1250
1282
  <input
1251
- id="choice-318"
1283
+ id="choice-338"
1252
1284
  tabindex="-1"
1253
1285
  type="radio"
1254
1286
  />
1255
1287
  <label
1256
- for="choice-318"
1288
+ for="choice-338"
1257
1289
  >
1258
1290
  (Choice A, Checked)
1259
1291
   
@@ -1308,7 +1340,7 @@ exports[`single-choice question satStyling: false reviewMode: false should snaps
1308
1340
  type="button"
1309
1341
  >
1310
1342
  <div
1311
- style="display: flex; flex-direction: row; justify-content: center; align-content: center; padding-top: 8px; padding-bottom: 8px;"
1343
+ style="display: flex; flex-direction: row; justify-content: center; align-content: center; padding-top: 8px; padding-bottom: 8px; padding-left: 8px;"
1312
1344
  >
1313
1345
  <div
1314
1346
  class="iconWrapper_17y0hv9"
@@ -1324,7 +1356,11 @@ exports[`single-choice question satStyling: false reviewMode: false should snaps
1324
1356
  data-test-id="choice-icon__library-choice-icon"
1325
1357
  style="border-color: #1865f2; color: rgb(255, 255, 255); border-radius: 24px; background-color: rgb(24, 101, 242);"
1326
1358
  >
1327
- A
1359
+ <div
1360
+ class="innerWrapper_177sg8x"
1361
+ >
1362
+ A
1363
+ </div>
1328
1364
  </div>
1329
1365
  </span>
1330
1366
  </div>
@@ -1393,12 +1429,12 @@ exports[`single-choice question satStyling: false reviewMode: false should snaps
1393
1429
  class="perseus-sr-only"
1394
1430
  >
1395
1431
  <input
1396
- id="choice-319"
1432
+ id="choice-339"
1397
1433
  tabindex="-1"
1398
1434
  type="radio"
1399
1435
  />
1400
1436
  <label
1401
- for="choice-319"
1437
+ for="choice-339"
1402
1438
  >
1403
1439
  (Choice B)
1404
1440
   
@@ -1440,7 +1476,7 @@ exports[`single-choice question satStyling: false reviewMode: false should snaps
1440
1476
  type="button"
1441
1477
  >
1442
1478
  <div
1443
- style="display: flex; flex-direction: row; justify-content: center; align-content: center; padding-top: 8px; padding-bottom: 8px;"
1479
+ style="display: flex; flex-direction: row; justify-content: center; align-content: center; padding-top: 8px; padding-bottom: 8px; padding-left: 8px;"
1444
1480
  >
1445
1481
  <div
1446
1482
  class="iconWrapper_17y0hv9"
@@ -1456,7 +1492,11 @@ exports[`single-choice question satStyling: false reviewMode: false should snaps
1456
1492
  data-test-id="choice-icon__library-choice-icon"
1457
1493
  style="border-color: rgba(33,36,44,0.64); color: rgba(33, 36, 44, 0.64); border-radius: 24px;"
1458
1494
  >
1459
- B
1495
+ <div
1496
+ class="innerWrapper_177sg8x"
1497
+ >
1498
+ B
1499
+ </div>
1460
1500
  </div>
1461
1501
  </span>
1462
1502
  </div>
@@ -1512,12 +1552,12 @@ exports[`single-choice question satStyling: false reviewMode: false should snaps
1512
1552
  class="perseus-sr-only"
1513
1553
  >
1514
1554
  <input
1515
- id="choice-320"
1555
+ id="choice-340"
1516
1556
  tabindex="-1"
1517
1557
  type="radio"
1518
1558
  />
1519
1559
  <label
1520
- for="choice-320"
1560
+ for="choice-340"
1521
1561
  >
1522
1562
  (Choice C)
1523
1563
   
@@ -1559,7 +1599,7 @@ exports[`single-choice question satStyling: false reviewMode: false should snaps
1559
1599
  type="button"
1560
1600
  >
1561
1601
  <div
1562
- style="display: flex; flex-direction: row; justify-content: center; align-content: center; padding-top: 8px; padding-bottom: 8px;"
1602
+ style="display: flex; flex-direction: row; justify-content: center; align-content: center; padding-top: 8px; padding-bottom: 8px; padding-left: 8px;"
1563
1603
  >
1564
1604
  <div
1565
1605
  class="iconWrapper_17y0hv9"
@@ -1575,7 +1615,11 @@ exports[`single-choice question satStyling: false reviewMode: false should snaps
1575
1615
  data-test-id="choice-icon__library-choice-icon"
1576
1616
  style="border-color: rgba(33,36,44,0.64); color: rgba(33, 36, 44, 0.64); border-radius: 24px;"
1577
1617
  >
1578
- C
1618
+ <div
1619
+ class="innerWrapper_177sg8x"
1620
+ >
1621
+ C
1622
+ </div>
1579
1623
  </div>
1580
1624
  </span>
1581
1625
  </div>
@@ -1631,12 +1675,12 @@ exports[`single-choice question satStyling: false reviewMode: false should snaps
1631
1675
  class="perseus-sr-only"
1632
1676
  >
1633
1677
  <input
1634
- id="choice-321"
1678
+ id="choice-341"
1635
1679
  tabindex="-1"
1636
1680
  type="radio"
1637
1681
  />
1638
1682
  <label
1639
- for="choice-321"
1683
+ for="choice-341"
1640
1684
  >
1641
1685
  (Choice D)
1642
1686
   
@@ -1681,7 +1725,7 @@ exports[`single-choice question satStyling: false reviewMode: false should snaps
1681
1725
  type="button"
1682
1726
  >
1683
1727
  <div
1684
- style="display: flex; flex-direction: row; justify-content: center; align-content: center; padding-top: 8px; padding-bottom: 8px;"
1728
+ style="display: flex; flex-direction: row; justify-content: center; align-content: center; padding-top: 8px; padding-bottom: 8px; padding-left: 8px;"
1685
1729
  >
1686
1730
  <div
1687
1731
  class="iconWrapper_17y0hv9"
@@ -1697,7 +1741,11 @@ exports[`single-choice question satStyling: false reviewMode: false should snaps
1697
1741
  data-test-id="choice-icon__library-choice-icon"
1698
1742
  style="border-color: rgba(33,36,44,0.64); color: rgba(33, 36, 44, 0.64); border-radius: 24px;"
1699
1743
  >
1700
- D
1744
+ <div
1745
+ class="innerWrapper_177sg8x"
1746
+ >
1747
+ D
1748
+ </div>
1701
1749
  </div>
1702
1750
  </span>
1703
1751
  </div>
@@ -1840,12 +1888,12 @@ exports[`single-choice question satStyling: false reviewMode: false should snaps
1840
1888
  class="perseus-sr-only"
1841
1889
  >
1842
1890
  <input
1843
- id="choice-302"
1891
+ id="choice-322"
1844
1892
  tabindex="-1"
1845
1893
  type="radio"
1846
1894
  />
1847
1895
  <label
1848
- for="choice-302"
1896
+ for="choice-322"
1849
1897
  >
1850
1898
  (Choice A)
1851
1899
   
@@ -1900,7 +1948,7 @@ exports[`single-choice question satStyling: false reviewMode: false should snaps
1900
1948
  type="button"
1901
1949
  >
1902
1950
  <div
1903
- style="display: flex; flex-direction: row; justify-content: center; align-content: center; padding-top: 8px; padding-bottom: 8px;"
1951
+ style="display: flex; flex-direction: row; justify-content: center; align-content: center; padding-top: 8px; padding-bottom: 8px; padding-left: 8px;"
1904
1952
  >
1905
1953
  <div
1906
1954
  class="iconWrapper_17y0hv9"
@@ -1916,7 +1964,11 @@ exports[`single-choice question satStyling: false reviewMode: false should snaps
1916
1964
  data-test-id="choice-icon__library-choice-icon"
1917
1965
  style="border-color: rgba(33,36,44,0.64); color: rgba(33, 36, 44, 0.64); border-radius: 24px;"
1918
1966
  >
1919
- A
1967
+ <div
1968
+ class="innerWrapper_177sg8x"
1969
+ >
1970
+ A
1971
+ </div>
1920
1972
  </div>
1921
1973
  </span>
1922
1974
  </div>
@@ -1985,12 +2037,12 @@ exports[`single-choice question satStyling: false reviewMode: false should snaps
1985
2037
  class="perseus-sr-only"
1986
2038
  >
1987
2039
  <input
1988
- id="choice-303"
2040
+ id="choice-323"
1989
2041
  tabindex="-1"
1990
2042
  type="radio"
1991
2043
  />
1992
2044
  <label
1993
- for="choice-303"
2045
+ for="choice-323"
1994
2046
  >
1995
2047
  (Choice B)
1996
2048
   
@@ -2032,7 +2084,7 @@ exports[`single-choice question satStyling: false reviewMode: false should snaps
2032
2084
  type="button"
2033
2085
  >
2034
2086
  <div
2035
- style="display: flex; flex-direction: row; justify-content: center; align-content: center; padding-top: 8px; padding-bottom: 8px;"
2087
+ style="display: flex; flex-direction: row; justify-content: center; align-content: center; padding-top: 8px; padding-bottom: 8px; padding-left: 8px;"
2036
2088
  >
2037
2089
  <div
2038
2090
  class="iconWrapper_17y0hv9"
@@ -2048,7 +2100,11 @@ exports[`single-choice question satStyling: false reviewMode: false should snaps
2048
2100
  data-test-id="choice-icon__library-choice-icon"
2049
2101
  style="border-color: rgba(33,36,44,0.64); color: rgba(33, 36, 44, 0.64); border-radius: 24px;"
2050
2102
  >
2051
- B
2103
+ <div
2104
+ class="innerWrapper_177sg8x"
2105
+ >
2106
+ B
2107
+ </div>
2052
2108
  </div>
2053
2109
  </span>
2054
2110
  </div>
@@ -2104,12 +2160,12 @@ exports[`single-choice question satStyling: false reviewMode: false should snaps
2104
2160
  class="perseus-sr-only"
2105
2161
  >
2106
2162
  <input
2107
- id="choice-304"
2163
+ id="choice-324"
2108
2164
  tabindex="-1"
2109
2165
  type="radio"
2110
2166
  />
2111
2167
  <label
2112
- for="choice-304"
2168
+ for="choice-324"
2113
2169
  >
2114
2170
  (Choice C)
2115
2171
   
@@ -2151,7 +2207,7 @@ exports[`single-choice question satStyling: false reviewMode: false should snaps
2151
2207
  type="button"
2152
2208
  >
2153
2209
  <div
2154
- style="display: flex; flex-direction: row; justify-content: center; align-content: center; padding-top: 8px; padding-bottom: 8px;"
2210
+ style="display: flex; flex-direction: row; justify-content: center; align-content: center; padding-top: 8px; padding-bottom: 8px; padding-left: 8px;"
2155
2211
  >
2156
2212
  <div
2157
2213
  class="iconWrapper_17y0hv9"
@@ -2167,7 +2223,11 @@ exports[`single-choice question satStyling: false reviewMode: false should snaps
2167
2223
  data-test-id="choice-icon__library-choice-icon"
2168
2224
  style="border-color: rgba(33,36,44,0.64); color: rgba(33, 36, 44, 0.64); border-radius: 24px;"
2169
2225
  >
2170
- C
2226
+ <div
2227
+ class="innerWrapper_177sg8x"
2228
+ >
2229
+ C
2230
+ </div>
2171
2231
  </div>
2172
2232
  </span>
2173
2233
  </div>
@@ -2223,12 +2283,12 @@ exports[`single-choice question satStyling: false reviewMode: false should snaps
2223
2283
  class="perseus-sr-only"
2224
2284
  >
2225
2285
  <input
2226
- id="choice-305"
2286
+ id="choice-325"
2227
2287
  tabindex="-1"
2228
2288
  type="radio"
2229
2289
  />
2230
2290
  <label
2231
- for="choice-305"
2291
+ for="choice-325"
2232
2292
  >
2233
2293
  (Choice D)
2234
2294
   
@@ -2273,7 +2333,7 @@ exports[`single-choice question satStyling: false reviewMode: false should snaps
2273
2333
  type="button"
2274
2334
  >
2275
2335
  <div
2276
- style="display: flex; flex-direction: row; justify-content: center; align-content: center; padding-top: 8px; padding-bottom: 8px;"
2336
+ style="display: flex; flex-direction: row; justify-content: center; align-content: center; padding-top: 8px; padding-bottom: 8px; padding-left: 8px;"
2277
2337
  >
2278
2338
  <div
2279
2339
  class="iconWrapper_17y0hv9"
@@ -2289,7 +2349,11 @@ exports[`single-choice question satStyling: false reviewMode: false should snaps
2289
2349
  data-test-id="choice-icon__library-choice-icon"
2290
2350
  style="border-color: rgba(33,36,44,0.64); color: rgba(33, 36, 44, 0.64); border-radius: 24px;"
2291
2351
  >
2292
- D
2352
+ <div
2353
+ class="innerWrapper_177sg8x"
2354
+ >
2355
+ D
2356
+ </div>
2293
2357
  </div>
2294
2358
  </span>
2295
2359
  </div>
@@ -2432,12 +2496,12 @@ exports[`single-choice question satStyling: false reviewMode: true should snapsh
2432
2496
  class="perseus-sr-only"
2433
2497
  >
2434
2498
  <input
2435
- id="choice-230"
2499
+ id="choice-250"
2436
2500
  tabindex="-1"
2437
2501
  type="radio"
2438
2502
  />
2439
2503
  <label
2440
- for="choice-230"
2504
+ for="choice-250"
2441
2505
  >
2442
2506
  (Choice A)
2443
2507
   
@@ -2492,7 +2556,7 @@ exports[`single-choice question satStyling: false reviewMode: true should snapsh
2492
2556
  type="button"
2493
2557
  >
2494
2558
  <div
2495
- style="display: flex; flex-direction: row; justify-content: center; align-content: center; padding-top: 8px; padding-bottom: 8px;"
2559
+ style="display: flex; flex-direction: row; justify-content: center; align-content: center; padding-top: 8px; padding-bottom: 8px; padding-left: 8px;"
2496
2560
  >
2497
2561
  <div
2498
2562
  class="iconWrapper_17y0hv9"
@@ -2508,7 +2572,11 @@ exports[`single-choice question satStyling: false reviewMode: true should snapsh
2508
2572
  data-test-id="choice-icon__library-choice-icon"
2509
2573
  style="border-color: rgba(33,36,44,0.64); color: rgba(33, 36, 44, 0.64); border-radius: 24px;"
2510
2574
  >
2511
- A
2575
+ <div
2576
+ class="innerWrapper_177sg8x"
2577
+ >
2578
+ A
2579
+ </div>
2512
2580
  </div>
2513
2581
  </span>
2514
2582
  </div>
@@ -2577,12 +2645,12 @@ exports[`single-choice question satStyling: false reviewMode: true should snapsh
2577
2645
  class="perseus-sr-only"
2578
2646
  >
2579
2647
  <input
2580
- id="choice-231"
2648
+ id="choice-251"
2581
2649
  tabindex="-1"
2582
2650
  type="radio"
2583
2651
  />
2584
2652
  <label
2585
- for="choice-231"
2653
+ for="choice-251"
2586
2654
  >
2587
2655
  (Choice B)
2588
2656
   
@@ -2624,7 +2692,7 @@ exports[`single-choice question satStyling: false reviewMode: true should snapsh
2624
2692
  type="button"
2625
2693
  >
2626
2694
  <div
2627
- style="display: flex; flex-direction: row; justify-content: center; align-content: center; padding-top: 8px; padding-bottom: 8px;"
2695
+ style="display: flex; flex-direction: row; justify-content: center; align-content: center; padding-top: 8px; padding-bottom: 8px; padding-left: 8px;"
2628
2696
  >
2629
2697
  <div
2630
2698
  class="iconWrapper_17y0hv9"
@@ -2640,7 +2708,11 @@ exports[`single-choice question satStyling: false reviewMode: true should snapsh
2640
2708
  data-test-id="choice-icon__library-choice-icon"
2641
2709
  style="border-color: rgba(33,36,44,0.64); color: rgba(33, 36, 44, 0.64); border-radius: 24px;"
2642
2710
  >
2643
- B
2711
+ <div
2712
+ class="innerWrapper_177sg8x"
2713
+ >
2714
+ B
2715
+ </div>
2644
2716
  </div>
2645
2717
  </span>
2646
2718
  </div>
@@ -2696,12 +2768,12 @@ exports[`single-choice question satStyling: false reviewMode: true should snapsh
2696
2768
  class="perseus-sr-only"
2697
2769
  >
2698
2770
  <input
2699
- id="choice-232"
2771
+ id="choice-252"
2700
2772
  tabindex="-1"
2701
2773
  type="radio"
2702
2774
  />
2703
2775
  <label
2704
- for="choice-232"
2776
+ for="choice-252"
2705
2777
  >
2706
2778
  (Choice C, Checked)
2707
2779
   
@@ -2743,7 +2815,7 @@ exports[`single-choice question satStyling: false reviewMode: true should snapsh
2743
2815
  type="button"
2744
2816
  >
2745
2817
  <div
2746
- style="display: flex; flex-direction: row; justify-content: center; align-content: center; padding-top: 8px; padding-bottom: 8px;"
2818
+ style="display: flex; flex-direction: row; justify-content: center; align-content: center; padding-top: 8px; padding-bottom: 8px; padding-left: 8px;"
2747
2819
  >
2748
2820
  <div
2749
2821
  class="iconWrapper_17y0hv9"
@@ -2759,7 +2831,11 @@ exports[`single-choice question satStyling: false reviewMode: true should snapsh
2759
2831
  data-test-id="choice-icon__library-choice-icon"
2760
2832
  style="border-color: #1865f2; color: rgb(255, 255, 255); border-radius: 24px; background-color: rgb(24, 101, 242);"
2761
2833
  >
2762
- C
2834
+ <div
2835
+ class="innerWrapper_177sg8x"
2836
+ >
2837
+ C
2838
+ </div>
2763
2839
  </div>
2764
2840
  </span>
2765
2841
  </div>
@@ -2815,12 +2891,12 @@ exports[`single-choice question satStyling: false reviewMode: true should snapsh
2815
2891
  class="perseus-sr-only"
2816
2892
  >
2817
2893
  <input
2818
- id="choice-233"
2894
+ id="choice-253"
2819
2895
  tabindex="-1"
2820
2896
  type="radio"
2821
2897
  />
2822
2898
  <label
2823
- for="choice-233"
2899
+ for="choice-253"
2824
2900
  >
2825
2901
  (Choice D)
2826
2902
   
@@ -2865,7 +2941,7 @@ exports[`single-choice question satStyling: false reviewMode: true should snapsh
2865
2941
  type="button"
2866
2942
  >
2867
2943
  <div
2868
- style="display: flex; flex-direction: row; justify-content: center; align-content: center; padding-top: 8px; padding-bottom: 8px;"
2944
+ style="display: flex; flex-direction: row; justify-content: center; align-content: center; padding-top: 8px; padding-bottom: 8px; padding-left: 8px;"
2869
2945
  >
2870
2946
  <div
2871
2947
  class="iconWrapper_17y0hv9"
@@ -2881,7 +2957,11 @@ exports[`single-choice question satStyling: false reviewMode: true should snapsh
2881
2957
  data-test-id="choice-icon__library-choice-icon"
2882
2958
  style="border-color: rgba(33,36,44,0.64); color: rgba(33, 36, 44, 0.64); border-radius: 24px;"
2883
2959
  >
2884
- D
2960
+ <div
2961
+ class="innerWrapper_177sg8x"
2962
+ >
2963
+ D
2964
+ </div>
2885
2965
  </div>
2886
2966
  </span>
2887
2967
  </div>
@@ -3024,12 +3104,12 @@ exports[`single-choice question satStyling: false reviewMode: true should snapsh
3024
3104
  class="perseus-sr-only"
3025
3105
  >
3026
3106
  <input
3027
- id="choice-238"
3107
+ id="choice-258"
3028
3108
  tabindex="-1"
3029
3109
  type="radio"
3030
3110
  />
3031
3111
  <label
3032
- for="choice-238"
3112
+ for="choice-258"
3033
3113
  >
3034
3114
  (Choice A, Checked)
3035
3115
   
@@ -3084,7 +3164,7 @@ exports[`single-choice question satStyling: false reviewMode: true should snapsh
3084
3164
  type="button"
3085
3165
  >
3086
3166
  <div
3087
- style="display: flex; flex-direction: row; justify-content: center; align-content: center; padding-top: 8px; padding-bottom: 8px;"
3167
+ style="display: flex; flex-direction: row; justify-content: center; align-content: center; padding-top: 8px; padding-bottom: 8px; padding-left: 8px;"
3088
3168
  >
3089
3169
  <div
3090
3170
  class="iconWrapper_17y0hv9"
@@ -3100,7 +3180,11 @@ exports[`single-choice question satStyling: false reviewMode: true should snapsh
3100
3180
  data-test-id="choice-icon__library-choice-icon"
3101
3181
  style="border-color: #1865f2; color: rgb(255, 255, 255); border-radius: 24px; background-color: rgb(24, 101, 242);"
3102
3182
  >
3103
- A
3183
+ <div
3184
+ class="innerWrapper_177sg8x"
3185
+ >
3186
+ A
3187
+ </div>
3104
3188
  </div>
3105
3189
  </span>
3106
3190
  </div>
@@ -3169,12 +3253,12 @@ exports[`single-choice question satStyling: false reviewMode: true should snapsh
3169
3253
  class="perseus-sr-only"
3170
3254
  >
3171
3255
  <input
3172
- id="choice-239"
3256
+ id="choice-259"
3173
3257
  tabindex="-1"
3174
3258
  type="radio"
3175
3259
  />
3176
3260
  <label
3177
- for="choice-239"
3261
+ for="choice-259"
3178
3262
  >
3179
3263
  (Choice B)
3180
3264
   
@@ -3216,7 +3300,7 @@ exports[`single-choice question satStyling: false reviewMode: true should snapsh
3216
3300
  type="button"
3217
3301
  >
3218
3302
  <div
3219
- style="display: flex; flex-direction: row; justify-content: center; align-content: center; padding-top: 8px; padding-bottom: 8px;"
3303
+ style="display: flex; flex-direction: row; justify-content: center; align-content: center; padding-top: 8px; padding-bottom: 8px; padding-left: 8px;"
3220
3304
  >
3221
3305
  <div
3222
3306
  class="iconWrapper_17y0hv9"
@@ -3232,7 +3316,11 @@ exports[`single-choice question satStyling: false reviewMode: true should snapsh
3232
3316
  data-test-id="choice-icon__library-choice-icon"
3233
3317
  style="border-color: rgba(33,36,44,0.64); color: rgba(33, 36, 44, 0.64); border-radius: 24px;"
3234
3318
  >
3235
- B
3319
+ <div
3320
+ class="innerWrapper_177sg8x"
3321
+ >
3322
+ B
3323
+ </div>
3236
3324
  </div>
3237
3325
  </span>
3238
3326
  </div>
@@ -3288,12 +3376,12 @@ exports[`single-choice question satStyling: false reviewMode: true should snapsh
3288
3376
  class="perseus-sr-only"
3289
3377
  >
3290
3378
  <input
3291
- id="choice-240"
3379
+ id="choice-260"
3292
3380
  tabindex="-1"
3293
3381
  type="radio"
3294
3382
  />
3295
3383
  <label
3296
- for="choice-240"
3384
+ for="choice-260"
3297
3385
  >
3298
3386
  (Choice C)
3299
3387
   
@@ -3335,7 +3423,7 @@ exports[`single-choice question satStyling: false reviewMode: true should snapsh
3335
3423
  type="button"
3336
3424
  >
3337
3425
  <div
3338
- style="display: flex; flex-direction: row; justify-content: center; align-content: center; padding-top: 8px; padding-bottom: 8px;"
3426
+ style="display: flex; flex-direction: row; justify-content: center; align-content: center; padding-top: 8px; padding-bottom: 8px; padding-left: 8px;"
3339
3427
  >
3340
3428
  <div
3341
3429
  class="iconWrapper_17y0hv9"
@@ -3351,7 +3439,11 @@ exports[`single-choice question satStyling: false reviewMode: true should snapsh
3351
3439
  data-test-id="choice-icon__library-choice-icon"
3352
3440
  style="border-color: rgba(33,36,44,0.64); color: rgba(33, 36, 44, 0.64); border-radius: 24px;"
3353
3441
  >
3354
- C
3442
+ <div
3443
+ class="innerWrapper_177sg8x"
3444
+ >
3445
+ C
3446
+ </div>
3355
3447
  </div>
3356
3448
  </span>
3357
3449
  </div>
@@ -3407,12 +3499,12 @@ exports[`single-choice question satStyling: false reviewMode: true should snapsh
3407
3499
  class="perseus-sr-only"
3408
3500
  >
3409
3501
  <input
3410
- id="choice-241"
3502
+ id="choice-261"
3411
3503
  tabindex="-1"
3412
3504
  type="radio"
3413
3505
  />
3414
3506
  <label
3415
- for="choice-241"
3507
+ for="choice-261"
3416
3508
  >
3417
3509
  (Choice D)
3418
3510
   
@@ -3457,7 +3549,7 @@ exports[`single-choice question satStyling: false reviewMode: true should snapsh
3457
3549
  type="button"
3458
3550
  >
3459
3551
  <div
3460
- style="display: flex; flex-direction: row; justify-content: center; align-content: center; padding-top: 8px; padding-bottom: 8px;"
3552
+ style="display: flex; flex-direction: row; justify-content: center; align-content: center; padding-top: 8px; padding-bottom: 8px; padding-left: 8px;"
3461
3553
  >
3462
3554
  <div
3463
3555
  class="iconWrapper_17y0hv9"
@@ -3473,7 +3565,11 @@ exports[`single-choice question satStyling: false reviewMode: true should snapsh
3473
3565
  data-test-id="choice-icon__library-choice-icon"
3474
3566
  style="border-color: rgba(33,36,44,0.64); color: rgba(33, 36, 44, 0.64); border-radius: 24px;"
3475
3567
  >
3476
- D
3568
+ <div
3569
+ class="innerWrapper_177sg8x"
3570
+ >
3571
+ D
3572
+ </div>
3477
3573
  </div>
3478
3574
  </span>
3479
3575
  </div>
@@ -3616,12 +3712,12 @@ exports[`single-choice question satStyling: false reviewMode: true should snapsh
3616
3712
  class="perseus-sr-only"
3617
3713
  >
3618
3714
  <input
3619
- id="choice-222"
3715
+ id="choice-242"
3620
3716
  tabindex="-1"
3621
3717
  type="radio"
3622
3718
  />
3623
3719
  <label
3624
- for="choice-222"
3720
+ for="choice-242"
3625
3721
  >
3626
3722
  (Choice A, Incorrect)
3627
3723
   
@@ -3676,7 +3772,7 @@ exports[`single-choice question satStyling: false reviewMode: true should snapsh
3676
3772
  type="button"
3677
3773
  >
3678
3774
  <div
3679
- style="display: flex; flex-direction: row; justify-content: center; align-content: center; padding-top: 8px; padding-bottom: 8px;"
3775
+ style="display: flex; flex-direction: row; justify-content: center; align-content: center; padding-top: 8px; padding-bottom: 8px; padding-left: 8px;"
3680
3776
  >
3681
3777
  <div
3682
3778
  class="iconWrapper_17y0hv9"
@@ -3692,19 +3788,23 @@ exports[`single-choice question satStyling: false reviewMode: true should snapsh
3692
3788
  data-test-id="choice-icon__library-choice-icon"
3693
3789
  style="border-color: rgba(33,36,44,0.64); color: rgba(33, 36, 44, 0.64); border-radius: 24px;"
3694
3790
  >
3695
- <svg
3696
- aria-hidden="true"
3697
- height="1em"
3698
- role="img"
3699
- style="vertical-align: middle;"
3700
- viewBox="0 0 24 24"
3701
- width="1em"
3702
- >
3703
- <path
3704
- d="M8,13 L16,13 C16.5522847,13 17,12.5522847 17,12 C17,11.4477153 16.5522847,11 16,11 L8,11 C7.44771525,11 7,11.4477153 7,12 C7,12.5522847 7.44771525,13 8,13 Z"
3705
- fill="currentColor"
3706
- />
3707
- </svg>
3791
+ <div
3792
+ class="innerWrapper_177sg8x"
3793
+ >
3794
+ <svg
3795
+ aria-hidden="true"
3796
+ height="1em"
3797
+ role="img"
3798
+ style="vertical-align: middle;"
3799
+ viewBox="0 0 24 24"
3800
+ width="1em"
3801
+ >
3802
+ <path
3803
+ d="M8,13 L16,13 C16.5522847,13 17,12.5522847 17,12 C17,11.4477153 16.5522847,11 16,11 L8,11 C7.44771525,11 7,11.4477153 7,12 C7,12.5522847 7.44771525,13 8,13 Z"
3804
+ fill="currentColor"
3805
+ />
3806
+ </svg>
3807
+ </div>
3708
3808
  </div>
3709
3809
  </span>
3710
3810
  </div>
@@ -3765,7 +3865,7 @@ exports[`single-choice question satStyling: false reviewMode: true should snapsh
3765
3865
  </button>
3766
3866
  </div>
3767
3867
  <div
3768
- class="perseus-radio-rationale-content rationale_uhlm2-o_O-nonSatRationale_b3d4vx"
3868
+ class="perseus-radio-rationale-content rationale_uhlm2-o_O-nonSatRationale_10l5hr0"
3769
3869
  data-test-id="perseus-radio-rationale-content-0"
3770
3870
  >
3771
3871
  <span
@@ -3846,12 +3946,12 @@ exports[`single-choice question satStyling: false reviewMode: true should snapsh
3846
3946
  class="perseus-sr-only"
3847
3947
  >
3848
3948
  <input
3849
- id="choice-223"
3949
+ id="choice-243"
3850
3950
  tabindex="-1"
3851
3951
  type="radio"
3852
3952
  />
3853
3953
  <label
3854
- for="choice-223"
3954
+ for="choice-243"
3855
3955
  >
3856
3956
  (Choice B, Incorrect)
3857
3957
   
@@ -3893,7 +3993,7 @@ exports[`single-choice question satStyling: false reviewMode: true should snapsh
3893
3993
  type="button"
3894
3994
  >
3895
3995
  <div
3896
- style="display: flex; flex-direction: row; justify-content: center; align-content: center; padding-top: 8px; padding-bottom: 8px;"
3996
+ style="display: flex; flex-direction: row; justify-content: center; align-content: center; padding-top: 8px; padding-bottom: 8px; padding-left: 8px;"
3897
3997
  >
3898
3998
  <div
3899
3999
  class="iconWrapper_17y0hv9"
@@ -3909,19 +4009,23 @@ exports[`single-choice question satStyling: false reviewMode: true should snapsh
3909
4009
  data-test-id="choice-icon__library-choice-icon"
3910
4010
  style="border-color: rgba(33,36,44,0.64); color: rgba(33, 36, 44, 0.64); border-radius: 24px;"
3911
4011
  >
3912
- <svg
3913
- aria-hidden="true"
3914
- height="1em"
3915
- role="img"
3916
- style="vertical-align: middle;"
3917
- viewBox="0 0 24 24"
3918
- width="1em"
3919
- >
3920
- <path
3921
- d="M8,13 L16,13 C16.5522847,13 17,12.5522847 17,12 C17,11.4477153 16.5522847,11 16,11 L8,11 C7.44771525,11 7,11.4477153 7,12 C7,12.5522847 7.44771525,13 8,13 Z"
3922
- fill="currentColor"
3923
- />
3924
- </svg>
4012
+ <div
4013
+ class="innerWrapper_177sg8x"
4014
+ >
4015
+ <svg
4016
+ aria-hidden="true"
4017
+ height="1em"
4018
+ role="img"
4019
+ style="vertical-align: middle;"
4020
+ viewBox="0 0 24 24"
4021
+ width="1em"
4022
+ >
4023
+ <path
4024
+ d="M8,13 L16,13 C16.5522847,13 17,12.5522847 17,12 C17,11.4477153 16.5522847,11 16,11 L8,11 C7.44771525,11 7,11.4477153 7,12 C7,12.5522847 7.44771525,13 8,13 Z"
4025
+ fill="currentColor"
4026
+ />
4027
+ </svg>
4028
+ </div>
3925
4029
  </div>
3926
4030
  </span>
3927
4031
  </div>
@@ -3969,7 +4073,7 @@ exports[`single-choice question satStyling: false reviewMode: true should snapsh
3969
4073
  </button>
3970
4074
  </div>
3971
4075
  <div
3972
- class="perseus-radio-rationale-content rationale_uhlm2-o_O-nonSatRationale_b3d4vx"
4076
+ class="perseus-radio-rationale-content rationale_uhlm2-o_O-nonSatRationale_10l5hr0"
3973
4077
  data-test-id="perseus-radio-rationale-content-1"
3974
4078
  >
3975
4079
  <span
@@ -4034,12 +4138,12 @@ exports[`single-choice question satStyling: false reviewMode: true should snapsh
4034
4138
  class="perseus-sr-only"
4035
4139
  >
4036
4140
  <input
4037
- id="choice-224"
4141
+ id="choice-244"
4038
4142
  tabindex="-1"
4039
4143
  type="radio"
4040
4144
  />
4041
4145
  <label
4042
- for="choice-224"
4146
+ for="choice-244"
4043
4147
  >
4044
4148
  (Choice C, Correct)
4045
4149
   
@@ -4081,7 +4185,7 @@ exports[`single-choice question satStyling: false reviewMode: true should snapsh
4081
4185
  type="button"
4082
4186
  >
4083
4187
  <div
4084
- style="display: flex; flex-direction: row; justify-content: center; align-content: center; padding-top: 8px; padding-bottom: 8px;"
4188
+ style="display: flex; flex-direction: row; justify-content: center; align-content: center; padding-top: 8px; padding-bottom: 8px; padding-left: 8px;"
4085
4189
  >
4086
4190
  <div
4087
4191
  class="iconWrapper_17y0hv9"
@@ -4097,19 +4201,23 @@ exports[`single-choice question satStyling: false reviewMode: true should snapsh
4097
4201
  data-test-id="choice-icon__library-choice-icon"
4098
4202
  style="border-color: rgba(33,36,44,0.64); color: rgba(33, 36, 44, 0.64); border-radius: 24px;"
4099
4203
  >
4100
- <svg
4101
- aria-hidden="true"
4102
- height="1em"
4103
- role="img"
4104
- style="vertical-align: middle; position: relative; top: -1px;"
4105
- viewBox="0 0 24 24"
4106
- width="1em"
4107
- >
4108
- <path
4109
- d="M8.70710678,12.2928932 C8.31658249,11.9023689 7.68341751,11.9023689 7.29289322,12.2928932 C6.90236893,12.6834175 6.90236893,13.3165825 7.29289322,13.7071068 L9.82842712,16.2426407 C10.2207367,16.6349502 10.8574274,16.6328935 11.2471942,16.2380576 L16.7116603,10.7025237 C17.0996535,10.3094846 17.0955629,9.67633279 16.7025237,9.28833966 C16.3094846,8.90034653 15.6763328,8.90443714 15.2883397,9.29747629 L10.5309507,14.1167372 L8.70710678,12.2928932 Z"
4110
- fill="currentColor"
4111
- />
4112
- </svg>
4204
+ <div
4205
+ class="innerWrapper_177sg8x"
4206
+ >
4207
+ <svg
4208
+ aria-hidden="true"
4209
+ height="1em"
4210
+ role="img"
4211
+ style="vertical-align: middle; position: relative; top: -1px;"
4212
+ viewBox="0 0 24 24"
4213
+ width="1em"
4214
+ >
4215
+ <path
4216
+ d="M8.70710678,12.2928932 C8.31658249,11.9023689 7.68341751,11.9023689 7.29289322,12.2928932 C6.90236893,12.6834175 6.90236893,13.3165825 7.29289322,13.7071068 L9.82842712,16.2426407 C10.2207367,16.6349502 10.8574274,16.6328935 11.2471942,16.2380576 L16.7116603,10.7025237 C17.0996535,10.3094846 17.0955629,9.67633279 16.7025237,9.28833966 C16.3094846,8.90034653 15.6763328,8.90443714 15.2883397,9.29747629 L10.5309507,14.1167372 L8.70710678,12.2928932 Z"
4217
+ fill="currentColor"
4218
+ />
4219
+ </svg>
4220
+ </div>
4113
4221
  </div>
4114
4222
  </span>
4115
4223
  </div>
@@ -4157,7 +4265,7 @@ exports[`single-choice question satStyling: false reviewMode: true should snapsh
4157
4265
  </button>
4158
4266
  </div>
4159
4267
  <div
4160
- class="perseus-radio-rationale-content rationale_uhlm2-o_O-nonSatRationale_b3d4vx"
4268
+ class="perseus-radio-rationale-content rationale_uhlm2-o_O-nonSatRationale_10l5hr0"
4161
4269
  data-test-id="perseus-radio-rationale-content-2"
4162
4270
  >
4163
4271
  <span
@@ -4217,12 +4325,12 @@ exports[`single-choice question satStyling: false reviewMode: true should snapsh
4217
4325
  class="perseus-sr-only"
4218
4326
  >
4219
4327
  <input
4220
- id="choice-225"
4328
+ id="choice-245"
4221
4329
  tabindex="-1"
4222
4330
  type="radio"
4223
4331
  />
4224
4332
  <label
4225
- for="choice-225"
4333
+ for="choice-245"
4226
4334
  >
4227
4335
  (Choice D, Incorrect)
4228
4336
   
@@ -4267,7 +4375,7 @@ exports[`single-choice question satStyling: false reviewMode: true should snapsh
4267
4375
  type="button"
4268
4376
  >
4269
4377
  <div
4270
- style="display: flex; flex-direction: row; justify-content: center; align-content: center; padding-top: 8px; padding-bottom: 8px;"
4378
+ style="display: flex; flex-direction: row; justify-content: center; align-content: center; padding-top: 8px; padding-bottom: 8px; padding-left: 8px;"
4271
4379
  >
4272
4380
  <div
4273
4381
  class="iconWrapper_17y0hv9"
@@ -4283,19 +4391,23 @@ exports[`single-choice question satStyling: false reviewMode: true should snapsh
4283
4391
  data-test-id="choice-icon__library-choice-icon"
4284
4392
  style="border-color: rgba(33,36,44,0.64); color: rgba(33, 36, 44, 0.64); border-radius: 24px;"
4285
4393
  >
4286
- <svg
4287
- aria-hidden="true"
4288
- height="1em"
4289
- role="img"
4290
- style="vertical-align: middle;"
4291
- viewBox="0 0 24 24"
4292
- width="1em"
4293
- >
4294
- <path
4295
- d="M8,13 L16,13 C16.5522847,13 17,12.5522847 17,12 C17,11.4477153 16.5522847,11 16,11 L8,11 C7.44771525,11 7,11.4477153 7,12 C7,12.5522847 7.44771525,13 8,13 Z"
4296
- fill="currentColor"
4297
- />
4298
- </svg>
4394
+ <div
4395
+ class="innerWrapper_177sg8x"
4396
+ >
4397
+ <svg
4398
+ aria-hidden="true"
4399
+ height="1em"
4400
+ role="img"
4401
+ style="vertical-align: middle;"
4402
+ viewBox="0 0 24 24"
4403
+ width="1em"
4404
+ >
4405
+ <path
4406
+ d="M8,13 L16,13 C16.5522847,13 17,12.5522847 17,12 C17,11.4477153 16.5522847,11 16,11 L8,11 C7.44771525,11 7,11.4477153 7,12 C7,12.5522847 7.44771525,13 8,13 Z"
4407
+ fill="currentColor"
4408
+ />
4409
+ </svg>
4410
+ </div>
4299
4411
  </div>
4300
4412
  </span>
4301
4413
  </div>
@@ -4346,7 +4458,7 @@ exports[`single-choice question satStyling: false reviewMode: true should snapsh
4346
4458
  </button>
4347
4459
  </div>
4348
4460
  <div
4349
- class="perseus-radio-rationale-content rationale_uhlm2-o_O-nonSatRationale_b3d4vx"
4461
+ class="perseus-radio-rationale-content rationale_uhlm2-o_O-nonSatRationale_10l5hr0"
4350
4462
  data-test-id="perseus-radio-rationale-content-3"
4351
4463
  >
4352
4464
  <span
@@ -4450,11 +4562,6 @@ exports[`single-choice question satStyling: true reviewMode: false should snapsh
4450
4562
  <fieldset
4451
4563
  class="perseus-widget-radio-fieldset responsiveFieldset_c0l5kf"
4452
4564
  >
4453
- <legend
4454
- class="perseus-sr-only"
4455
- >
4456
- Choose 1 answer:
4457
- </legend>
4458
4565
  <ul
4459
4566
  class="perseus-widget-radio perseus-rendered-radio radio_zdxht7-o_O-satRadio_1m9l1iz"
4460
4567
  style="list-style: none;"
@@ -4532,7 +4639,7 @@ exports[`single-choice question satStyling: true reviewMode: false should snapsh
4532
4639
  type="button"
4533
4640
  >
4534
4641
  <div
4535
- style="display: flex; flex-direction: row; justify-content: center; align-content: center; padding-top: 8px; padding-bottom: 8px;"
4642
+ style="display: flex; flex-direction: row; justify-content: center; align-content: center; padding-top: 8px; padding-bottom: 8px; padding-left: 8px;"
4536
4643
  >
4537
4644
  <div
4538
4645
  class="iconWrapper_17y0hv9"
@@ -4663,7 +4770,7 @@ exports[`single-choice question satStyling: true reviewMode: false should snapsh
4663
4770
  type="button"
4664
4771
  >
4665
4772
  <div
4666
- style="display: flex; flex-direction: row; justify-content: center; align-content: center; padding-top: 8px; padding-bottom: 8px;"
4773
+ style="display: flex; flex-direction: row; justify-content: center; align-content: center; padding-top: 8px; padding-bottom: 8px; padding-left: 8px;"
4667
4774
  >
4668
4775
  <div
4669
4776
  class="iconWrapper_17y0hv9"
@@ -4781,7 +4888,7 @@ exports[`single-choice question satStyling: true reviewMode: false should snapsh
4781
4888
  type="button"
4782
4889
  >
4783
4890
  <div
4784
- style="display: flex; flex-direction: row; justify-content: center; align-content: center; padding-top: 8px; padding-bottom: 8px;"
4891
+ style="display: flex; flex-direction: row; justify-content: center; align-content: center; padding-top: 8px; padding-bottom: 8px; padding-left: 8px;"
4785
4892
  >
4786
4893
  <div
4787
4894
  class="iconWrapper_17y0hv9"
@@ -4902,7 +5009,7 @@ exports[`single-choice question satStyling: true reviewMode: false should snapsh
4902
5009
  type="button"
4903
5010
  >
4904
5011
  <div
4905
- style="display: flex; flex-direction: row; justify-content: center; align-content: center; padding-top: 8px; padding-bottom: 8px;"
5012
+ style="display: flex; flex-direction: row; justify-content: center; align-content: center; padding-top: 8px; padding-bottom: 8px; padding-left: 8px;"
4906
5013
  >
4907
5014
  <div
4908
5015
  class="iconWrapper_17y0hv9"
@@ -5032,11 +5139,6 @@ exports[`single-choice question satStyling: true reviewMode: false should snapsh
5032
5139
  <fieldset
5033
5140
  class="perseus-widget-radio-fieldset responsiveFieldset_c0l5kf"
5034
5141
  >
5035
- <legend
5036
- class="perseus-sr-only"
5037
- >
5038
- Choose 1 answer:
5039
- </legend>
5040
5142
  <ul
5041
5143
  class="perseus-widget-radio perseus-rendered-radio radio_zdxht7-o_O-satRadio_1m9l1iz"
5042
5144
  style="list-style: none;"
@@ -5114,7 +5216,7 @@ exports[`single-choice question satStyling: true reviewMode: false should snapsh
5114
5216
  type="button"
5115
5217
  >
5116
5218
  <div
5117
- style="display: flex; flex-direction: row; justify-content: center; align-content: center; padding-top: 8px; padding-bottom: 8px;"
5219
+ style="display: flex; flex-direction: row; justify-content: center; align-content: center; padding-top: 8px; padding-bottom: 8px; padding-left: 8px;"
5118
5220
  >
5119
5221
  <div
5120
5222
  class="iconWrapper_17y0hv9"
@@ -5245,7 +5347,7 @@ exports[`single-choice question satStyling: true reviewMode: false should snapsh
5245
5347
  type="button"
5246
5348
  >
5247
5349
  <div
5248
- style="display: flex; flex-direction: row; justify-content: center; align-content: center; padding-top: 8px; padding-bottom: 8px;"
5350
+ style="display: flex; flex-direction: row; justify-content: center; align-content: center; padding-top: 8px; padding-bottom: 8px; padding-left: 8px;"
5249
5351
  >
5250
5352
  <div
5251
5353
  class="iconWrapper_17y0hv9"
@@ -5363,7 +5465,7 @@ exports[`single-choice question satStyling: true reviewMode: false should snapsh
5363
5465
  type="button"
5364
5466
  >
5365
5467
  <div
5366
- style="display: flex; flex-direction: row; justify-content: center; align-content: center; padding-top: 8px; padding-bottom: 8px;"
5468
+ style="display: flex; flex-direction: row; justify-content: center; align-content: center; padding-top: 8px; padding-bottom: 8px; padding-left: 8px;"
5367
5469
  >
5368
5470
  <div
5369
5471
  class="iconWrapper_17y0hv9"
@@ -5484,7 +5586,7 @@ exports[`single-choice question satStyling: true reviewMode: false should snapsh
5484
5586
  type="button"
5485
5587
  >
5486
5588
  <div
5487
- style="display: flex; flex-direction: row; justify-content: center; align-content: center; padding-top: 8px; padding-bottom: 8px;"
5589
+ style="display: flex; flex-direction: row; justify-content: center; align-content: center; padding-top: 8px; padding-bottom: 8px; padding-left: 8px;"
5488
5590
  >
5489
5591
  <div
5490
5592
  class="iconWrapper_17y0hv9"
@@ -5614,11 +5716,6 @@ exports[`single-choice question satStyling: true reviewMode: false should snapsh
5614
5716
  <fieldset
5615
5717
  class="perseus-widget-radio-fieldset responsiveFieldset_c0l5kf"
5616
5718
  >
5617
- <legend
5618
- class="perseus-sr-only"
5619
- >
5620
- Choose 1 answer:
5621
- </legend>
5622
5719
  <ul
5623
5720
  class="perseus-widget-radio perseus-rendered-radio radio_zdxht7-o_O-satRadio_1m9l1iz"
5624
5721
  style="list-style: none;"
@@ -5696,7 +5793,7 @@ exports[`single-choice question satStyling: true reviewMode: false should snapsh
5696
5793
  type="button"
5697
5794
  >
5698
5795
  <div
5699
- style="display: flex; flex-direction: row; justify-content: center; align-content: center; padding-top: 8px; padding-bottom: 8px;"
5796
+ style="display: flex; flex-direction: row; justify-content: center; align-content: center; padding-top: 8px; padding-bottom: 8px; padding-left: 8px;"
5700
5797
  >
5701
5798
  <div
5702
5799
  class="iconWrapper_17y0hv9"
@@ -5827,7 +5924,7 @@ exports[`single-choice question satStyling: true reviewMode: false should snapsh
5827
5924
  type="button"
5828
5925
  >
5829
5926
  <div
5830
- style="display: flex; flex-direction: row; justify-content: center; align-content: center; padding-top: 8px; padding-bottom: 8px;"
5927
+ style="display: flex; flex-direction: row; justify-content: center; align-content: center; padding-top: 8px; padding-bottom: 8px; padding-left: 8px;"
5831
5928
  >
5832
5929
  <div
5833
5930
  class="iconWrapper_17y0hv9"
@@ -5945,7 +6042,7 @@ exports[`single-choice question satStyling: true reviewMode: false should snapsh
5945
6042
  type="button"
5946
6043
  >
5947
6044
  <div
5948
- style="display: flex; flex-direction: row; justify-content: center; align-content: center; padding-top: 8px; padding-bottom: 8px;"
6045
+ style="display: flex; flex-direction: row; justify-content: center; align-content: center; padding-top: 8px; padding-bottom: 8px; padding-left: 8px;"
5949
6046
  >
5950
6047
  <div
5951
6048
  class="iconWrapper_17y0hv9"
@@ -6066,7 +6163,7 @@ exports[`single-choice question satStyling: true reviewMode: false should snapsh
6066
6163
  type="button"
6067
6164
  >
6068
6165
  <div
6069
- style="display: flex; flex-direction: row; justify-content: center; align-content: center; padding-top: 8px; padding-bottom: 8px;"
6166
+ style="display: flex; flex-direction: row; justify-content: center; align-content: center; padding-top: 8px; padding-bottom: 8px; padding-left: 8px;"
6070
6167
  >
6071
6168
  <div
6072
6169
  class="iconWrapper_17y0hv9"
@@ -6196,11 +6293,6 @@ exports[`single-choice question satStyling: true reviewMode: true should snapsho
6196
6293
  <fieldset
6197
6294
  class="perseus-widget-radio-fieldset responsiveFieldset_c0l5kf"
6198
6295
  >
6199
- <legend
6200
- class="perseus-sr-only"
6201
- >
6202
- Choose 1 answer:
6203
- </legend>
6204
6296
  <ul
6205
6297
  class="perseus-widget-radio perseus-rendered-radio radio_zdxht7-o_O-satRadio_1m9l1iz"
6206
6298
  style="list-style: none;"
@@ -6278,7 +6370,7 @@ exports[`single-choice question satStyling: true reviewMode: true should snapsho
6278
6370
  type="button"
6279
6371
  >
6280
6372
  <div
6281
- style="display: flex; flex-direction: row; justify-content: center; align-content: center; padding-top: 8px; padding-bottom: 8px;"
6373
+ style="display: flex; flex-direction: row; justify-content: center; align-content: center; padding-top: 8px; padding-bottom: 8px; padding-left: 8px;"
6282
6374
  >
6283
6375
  <div
6284
6376
  class="iconWrapper_17y0hv9"
@@ -6409,7 +6501,7 @@ exports[`single-choice question satStyling: true reviewMode: true should snapsho
6409
6501
  type="button"
6410
6502
  >
6411
6503
  <div
6412
- style="display: flex; flex-direction: row; justify-content: center; align-content: center; padding-top: 8px; padding-bottom: 8px;"
6504
+ style="display: flex; flex-direction: row; justify-content: center; align-content: center; padding-top: 8px; padding-bottom: 8px; padding-left: 8px;"
6413
6505
  >
6414
6506
  <div
6415
6507
  class="iconWrapper_17y0hv9"
@@ -6527,7 +6619,7 @@ exports[`single-choice question satStyling: true reviewMode: true should snapsho
6527
6619
  type="button"
6528
6620
  >
6529
6621
  <div
6530
- style="display: flex; flex-direction: row; justify-content: center; align-content: center; padding-top: 8px; padding-bottom: 8px;"
6622
+ style="display: flex; flex-direction: row; justify-content: center; align-content: center; padding-top: 8px; padding-bottom: 8px; padding-left: 8px;"
6531
6623
  >
6532
6624
  <div
6533
6625
  class="iconWrapper_17y0hv9"
@@ -6648,7 +6740,7 @@ exports[`single-choice question satStyling: true reviewMode: true should snapsho
6648
6740
  type="button"
6649
6741
  >
6650
6742
  <div
6651
- style="display: flex; flex-direction: row; justify-content: center; align-content: center; padding-top: 8px; padding-bottom: 8px;"
6743
+ style="display: flex; flex-direction: row; justify-content: center; align-content: center; padding-top: 8px; padding-bottom: 8px; padding-left: 8px;"
6652
6744
  >
6653
6745
  <div
6654
6746
  class="iconWrapper_17y0hv9"
@@ -6778,11 +6870,6 @@ exports[`single-choice question satStyling: true reviewMode: true should snapsho
6778
6870
  <fieldset
6779
6871
  class="perseus-widget-radio-fieldset responsiveFieldset_c0l5kf"
6780
6872
  >
6781
- <legend
6782
- class="perseus-sr-only"
6783
- >
6784
- Choose 1 answer:
6785
- </legend>
6786
6873
  <ul
6787
6874
  class="perseus-widget-radio perseus-rendered-radio radio_zdxht7-o_O-satRadio_1m9l1iz"
6788
6875
  style="list-style: none;"
@@ -6860,7 +6947,7 @@ exports[`single-choice question satStyling: true reviewMode: true should snapsho
6860
6947
  type="button"
6861
6948
  >
6862
6949
  <div
6863
- style="display: flex; flex-direction: row; justify-content: center; align-content: center; padding-top: 8px; padding-bottom: 8px;"
6950
+ style="display: flex; flex-direction: row; justify-content: center; align-content: center; padding-top: 8px; padding-bottom: 8px; padding-left: 8px;"
6864
6951
  >
6865
6952
  <div
6866
6953
  class="iconWrapper_17y0hv9"
@@ -6991,7 +7078,7 @@ exports[`single-choice question satStyling: true reviewMode: true should snapsho
6991
7078
  type="button"
6992
7079
  >
6993
7080
  <div
6994
- style="display: flex; flex-direction: row; justify-content: center; align-content: center; padding-top: 8px; padding-bottom: 8px;"
7081
+ style="display: flex; flex-direction: row; justify-content: center; align-content: center; padding-top: 8px; padding-bottom: 8px; padding-left: 8px;"
6995
7082
  >
6996
7083
  <div
6997
7084
  class="iconWrapper_17y0hv9"
@@ -7109,7 +7196,7 @@ exports[`single-choice question satStyling: true reviewMode: true should snapsho
7109
7196
  type="button"
7110
7197
  >
7111
7198
  <div
7112
- style="display: flex; flex-direction: row; justify-content: center; align-content: center; padding-top: 8px; padding-bottom: 8px;"
7199
+ style="display: flex; flex-direction: row; justify-content: center; align-content: center; padding-top: 8px; padding-bottom: 8px; padding-left: 8px;"
7113
7200
  >
7114
7201
  <div
7115
7202
  class="iconWrapper_17y0hv9"
@@ -7230,7 +7317,7 @@ exports[`single-choice question satStyling: true reviewMode: true should snapsho
7230
7317
  type="button"
7231
7318
  >
7232
7319
  <div
7233
- style="display: flex; flex-direction: row; justify-content: center; align-content: center; padding-top: 8px; padding-bottom: 8px;"
7320
+ style="display: flex; flex-direction: row; justify-content: center; align-content: center; padding-top: 8px; padding-bottom: 8px; padding-left: 8px;"
7234
7321
  >
7235
7322
  <div
7236
7323
  class="iconWrapper_17y0hv9"
@@ -7360,11 +7447,6 @@ exports[`single-choice question satStyling: true reviewMode: true should snapsho
7360
7447
  <fieldset
7361
7448
  class="perseus-widget-radio-fieldset responsiveFieldset_c0l5kf"
7362
7449
  >
7363
- <legend
7364
- class="perseus-sr-only"
7365
- >
7366
- Choose 1 answer:
7367
- </legend>
7368
7450
  <ul
7369
7451
  class="perseus-widget-radio perseus-rendered-radio radio_zdxht7-o_O-satRadio_1m9l1iz"
7370
7452
  style="list-style: none;"
@@ -7442,7 +7524,7 @@ exports[`single-choice question satStyling: true reviewMode: true should snapsho
7442
7524
  type="button"
7443
7525
  >
7444
7526
  <div
7445
- style="display: flex; flex-direction: row; justify-content: center; align-content: center; padding-top: 8px; padding-bottom: 8px;"
7527
+ style="display: flex; flex-direction: row; justify-content: center; align-content: center; padding-top: 8px; padding-bottom: 8px; padding-left: 8px;"
7446
7528
  >
7447
7529
  <div
7448
7530
  class="iconWrapper_17y0hv9"
@@ -7640,7 +7722,7 @@ exports[`single-choice question satStyling: true reviewMode: true should snapsho
7640
7722
  type="button"
7641
7723
  >
7642
7724
  <div
7643
- style="display: flex; flex-direction: row; justify-content: center; align-content: center; padding-top: 8px; padding-bottom: 8px;"
7725
+ style="display: flex; flex-direction: row; justify-content: center; align-content: center; padding-top: 8px; padding-bottom: 8px; padding-left: 8px;"
7644
7726
  >
7645
7727
  <div
7646
7728
  class="iconWrapper_17y0hv9"
@@ -7809,7 +7891,7 @@ exports[`single-choice question satStyling: true reviewMode: true should snapsho
7809
7891
  type="button"
7810
7892
  >
7811
7893
  <div
7812
- style="display: flex; flex-direction: row; justify-content: center; align-content: center; padding-top: 8px; padding-bottom: 8px;"
7894
+ style="display: flex; flex-direction: row; justify-content: center; align-content: center; padding-top: 8px; padding-bottom: 8px; padding-left: 8px;"
7813
7895
  >
7814
7896
  <div
7815
7897
  class="iconWrapper_17y0hv9"
@@ -7976,7 +8058,7 @@ exports[`single-choice question satStyling: true reviewMode: true should snapsho
7976
8058
  type="button"
7977
8059
  >
7978
8060
  <div
7979
- style="display: flex; flex-direction: row; justify-content: center; align-content: center; padding-top: 8px; padding-bottom: 8px;"
8061
+ style="display: flex; flex-direction: row; justify-content: center; align-content: center; padding-top: 8px; padding-bottom: 8px; padding-left: 8px;"
7980
8062
  >
7981
8063
  <div
7982
8064
  class="iconWrapper_17y0hv9"