@khanacademy/perseus 0.4.2 → 1.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (50) hide show
  1. package/.eslintrc.js +11 -0
  2. package/CHANGELOG.md +47 -0
  3. package/dist/es/index.js +1078 -1299
  4. package/dist/es/index.js.map +1 -1
  5. package/dist/index.js +1077 -1304
  6. package/dist/index.js.map +1 -1
  7. package/dist/strings.js +0 -4
  8. package/package.json +9 -8
  9. package/src/multi-items/__tests__/__snapshots__/multi-renderer_test.js.snap +110 -110
  10. package/src/perseus-api.jsx +10 -36
  11. package/src/perseus-types.js +0 -138
  12. package/src/styles/constants.js +0 -2
  13. package/src/styles/variables.less +0 -2
  14. package/src/types.js +18 -35
  15. package/src/util.js +0 -6
  16. package/src/version.js +1 -1
  17. package/src/widgets/__testdata__/base-radio_testdata.js +22 -0
  18. package/src/widgets/__tests__/__snapshots__/group_test.jsx.snap +110 -110
  19. package/src/widgets/__tests__/__snapshots__/radio_test.jsx.snap +1136 -1160
  20. package/src/widgets/__tests__/radio/base-radio_test.jsx +243 -41
  21. package/src/widgets/__tests__/radio/choice-icon_test.jsx +67 -0
  22. package/src/widgets/__tests__/radio/choice_test.jsx +201 -0
  23. package/src/widgets/__tests__/radio/focus-ring_test.jsx +23 -0
  24. package/src/widgets/__tests__/radio/option-status_test.jsx +65 -0
  25. package/src/widgets/passage/__tests__/passage-markdown_test.jsx +0 -9
  26. package/src/widgets/passage/get-line-height-for-node.js +4 -5
  27. package/src/widgets/passage/passage-markdown.jsx +176 -120
  28. package/src/widgets/passage.jsx +48 -46
  29. package/src/widgets/radio/__stories__/base-radio.stories.jsx +164 -17
  30. package/src/widgets/radio/__stories__/choice-icon.stories.jsx +202 -111
  31. package/src/widgets/radio/__stories__/choice-none-above.stories.jsx +21 -6
  32. package/src/widgets/radio/__stories__/choice.stories.jsx +138 -0
  33. package/src/widgets/radio/__stories__/focus-ring.stories.jsx +29 -23
  34. package/src/widgets/radio/__stories__/option-status.stories.jsx +93 -99
  35. package/src/widgets/radio/base-radio.jsx +483 -556
  36. package/src/widgets/radio/choice-icon/choice-icon.jsx +155 -0
  37. package/src/widgets/radio/choice-icon/cross-out-line.jsx +55 -0
  38. package/src/widgets/radio/choice-icon/library-choice-icon.jsx +219 -0
  39. package/src/widgets/radio/choice-icon/sat-choice-icon.jsx +129 -0
  40. package/src/widgets/radio/choice-icon/shared-styles.js +17 -0
  41. package/src/widgets/radio/choice-none-above.jsx +49 -40
  42. package/src/widgets/radio/choice.jsx +282 -353
  43. package/src/widgets/radio/choice.jsx.fixture.js +0 -18
  44. package/src/widgets/radio/focus-ring.jsx +29 -22
  45. package/src/widgets/radio/option-status.jsx +58 -36
  46. package/src/widgets/radio/widget.jsx +181 -136
  47. package/src/widgets/radio.jsx +16 -17
  48. package/src/widgets/radio/__stories__/cross-out-button.stories.jsx +0 -64
  49. package/src/widgets/radio/choice-icon.jsx +0 -469
  50. package/src/widgets/radio/cross-out-button.jsx +0 -134
@@ -4,9 +4,6 @@
4
4
 
5
5
  import type {Coord} from "./interactive2/types.js";
6
6
 
7
- // sync-start:perseus-data-format 445282759 services/content-editing/perseus/perseus_data.go
8
-
9
- // sync-start:perseus-data-format-perseus-item 1142141354 services/content-editing/perseus/perseus_data.go
10
7
  export type PerseusItem = {|
11
8
  // The details of the question being asked to the user.
12
9
  question: PerseusRenderer,
@@ -21,22 +18,16 @@ export type PerseusItem = {|
21
18
  // Deprecated field
22
19
  answer: *,
23
20
  |};
24
- // sync-end:perseus-data-format-perseus-item
25
21
 
26
- // sync-start:perseus-data-format-perseus-article 702711982 services/content-editing/perseus/perseus_data.go
27
22
  export type PerseusArticle = $ReadOnlyArray<PerseusRenderer>;
28
- // sync-end:perseus-data-format-perseus-article
29
23
 
30
- // sync-start:perseus-data-format-perseus-version 402776191 services/content-editing/perseus/perseus_data.go
31
24
  export type Version = {|
32
25
  // The major part of the version
33
26
  major: number,
34
27
  // The minor part of the version
35
28
  minor: number,
36
29
  |};
37
- // sync-end:perseus-data-format-perseus-version
38
30
 
39
- // sync-start:perseus-data-format-perseus-renderer 43032456 services/content-editing/perseus/perseus_data.go
40
31
  export type PerseusRenderer = {|
41
32
  // Translatable Markdown content to be rendered. May include references to
42
33
  // widgets (as [[☃ widgetName]]) or images (as ![image text](imageUrl)).
@@ -54,18 +45,14 @@ export type PerseusRenderer = {|
54
45
  // A dictionary of {[imageUrl]: PerseusImageDetail}.
55
46
  images: {|[string]: PerseusImageDetail|},
56
47
  |};
57
- // sync-end:perseus-data-format-perseus-renderer
58
48
 
59
- // sync-start:perseus-data-format-image-size 1357702236 services/content-editing/perseus/translation/types.go
60
49
  export type PerseusImageDetail = {|
61
50
  // The width of the image
62
51
  width: number,
63
52
  // the height of the image
64
53
  height: number,
65
54
  |};
66
- // sync-end:perseus-data-format-image-size
67
55
 
68
- // sync-start:perseus-data-format-answer-area 2042787453 services/content-editing/perseus/perseus_data.go
69
56
  export type PerseusAnswerArea = {|
70
57
  // The user might benefit from using a statistics Z Table like https://www.ztable.net/
71
58
  zTable: boolean,
@@ -78,9 +65,7 @@ export type PerseusAnswerArea = {|
78
65
  // The user might benefit from using a Periodic Table of Elements. Provided on Khan Academy when true
79
66
  periodicTable: boolean,
80
67
  |};
81
- // sync-end:perseus-data-format-answer-area
82
68
 
83
- // sync-start:perseus-data-format-perseus-header 444775300 services/content-editing/perseus/perseus_data.go
84
69
  type Widget<Type: string, Options> = {|
85
70
  // The "type" of widget which will define what the Options field looks like
86
71
  type: Type,
@@ -102,7 +87,6 @@ type Widget<Type: string, Options> = {|
102
87
  // NOTE: perseus_data.go says this is required even though it isn't necessary.
103
88
  version?: Version,
104
89
  |};
105
- // sync-end:perseus-data-format-perseus-header
106
90
 
107
91
  // prettier-ignore
108
92
  export type CategorizerWidget = Widget<"categorizer", PerseusCategorizerWidgetOptions>;
@@ -228,7 +212,6 @@ export type PerseusWidget =
228
212
  | UnitInputWidget
229
213
  | VideoWidget;
230
214
 
231
- // sync-start:perseus-data-format-image-background 705138305 services/content-editing/perseus/perseus_data.go
232
215
  export type PerseusImageBackground = {|
233
216
  // The URL of the image
234
217
  url: ?string,
@@ -254,9 +237,7 @@ export type PerseusImageBackground = {|
254
237
  // it isn't necessary at all.
255
238
  bottom?: number,
256
239
  |};
257
- // sync-end:perseus-data-format-image-background
258
240
 
259
- // sync-start:perseus-data-format-categorizer 196107932 services/content-editing/perseus/perseus_data.go
260
241
  export type PerseusCategorizerWidgetOptions = {|
261
242
  // Translatable text; a list of items to categorize. e.g. ["banana", "yellow", "apple", "purple", "shirt"]
262
243
  items: $ReadOnlyArray<string>,
@@ -273,7 +254,6 @@ export type PerseusCategorizerWidgetOptions = {|
273
254
  // Internal editor configuration. Can be ignored by consumers.
274
255
  linterContext?: PerseusLinterContext,
275
256
  |};
276
- // sync-end:perseus-data-format-categorizer
277
257
 
278
258
  export type PerseusLinterContext = {|
279
259
  contentType: string,
@@ -281,7 +261,6 @@ export type PerseusLinterContext = {|
281
261
  stack: $ReadOnlyArray<string>,
282
262
  |};
283
263
 
284
- // sync-start:perseus-data-format-definition 1136634440 services/content-editing/perseus/perseus_data.go
285
264
  export type PerseusDefinitionWidgetOptions = {|
286
265
  // Translatable text; the word to define. e.g. "vertex"
287
266
  togglePrompt: string,
@@ -290,9 +269,7 @@ export type PerseusDefinitionWidgetOptions = {|
290
269
  // Always false. Not used for this widget
291
270
  static: boolean,
292
271
  |};
293
- // sync-end:perseus-data-format-definition
294
272
 
295
- // sync-start:perseus-data-format-dropdown 680573227 services/content-editing/perseus/perseus_data.go
296
273
  export type PerseusDropdownWidgetOptions = {|
297
274
  // A list of choices for the dropdown
298
275
  choices: $ReadOnlyArray<PerseusDropdownChoice>,
@@ -301,18 +278,14 @@ export type PerseusDropdownWidgetOptions = {|
301
278
  // Always false. Not used for this widget
302
279
  static: boolean,
303
280
  |};
304
- // sync-end:perseus-data-format-dropdown
305
281
 
306
- // sync-start:perseus-data-format-dropdown-choice 1551360173 services/content-editing/perseus/perseus_data.go
307
282
  export type PerseusDropdownChoice = {|
308
283
  // Translatable text; The text for the option. e.g. "Banana" or "Orange"
309
284
  content: string,
310
285
  // Whether this is the correct option or not
311
286
  correct: boolean,
312
287
  |};
313
- // sync-end:perseus-data-format-dropdown-choice
314
288
 
315
- // sync-start:perseus-data-format-explanation 1697542234 services/content-editing/perseus/perseus_data.go
316
289
  export type PerseusExplanationWidgetOptions = {|
317
290
  // Translatable Text; The clickable text to expand an explanation. e.g. "What is an apple?"
318
291
  showPrompt: string,
@@ -325,9 +298,7 @@ export type PerseusExplanationWidgetOptions = {|
325
298
  // Always false. Not used for this widget
326
299
  static: boolean,
327
300
  |};
328
- // sync-end:perseus-data-format-explanation
329
301
 
330
- // sync-start:perseus-data-format-expression 786922927 services/content-editing/perseus/perseus_data.go
331
302
  export type PerseusExpressionWidgetOptions = {|
332
303
  // The expression forms the answer may come in
333
304
  answerForms: $ReadOnlyArray<PerseusExpressionAnswerForm>,
@@ -343,9 +314,7 @@ export type PerseusExpressionWidgetOptions = {|
343
314
  // appears in item data in the datastore.
344
315
  buttonsVisible?: "always" | "never" | "focused",
345
316
  |};
346
- // sync-end:perseus-data-format-expression
347
317
 
348
- // sync-start:perseus-data-format-expression-answer-form 786922927 services/content-editing/perseus/perseus_data.go
349
318
  export type PerseusExpressionAnswerForm = {|
350
319
  // The Katex form of the expression. e.g. "x\\cdot3=y"
351
320
  value: string,
@@ -359,9 +328,7 @@ export type PerseusExpressionAnswerForm = {|
359
328
  // NOTE: perseus-format.js says this is required even though it isn't necessary.
360
329
  key?: string,
361
330
  |};
362
- // sync-end:perseus-data-format-expression-answer-form
363
331
 
364
- // sync-start:perseus-data-format-graded-group 1776015670 services/content-editing/perseus/perseus_data.go
365
332
  export type PerseusGradedGroupWidgetOptions = {|
366
333
  // Translatable Text; A title to be displayed for the group.
367
334
  title: string,
@@ -380,16 +347,12 @@ export type PerseusGradedGroupWidgetOptions = {|
380
347
  // See PerseusRenderer.images
381
348
  images: {|[string]: PerseusImageDetail|},
382
349
  |};
383
- // sync-end:perseus-data-format-graded-group
384
350
 
385
- // sync-start:perseus-data-format-graded-group-set 692073834 services/content-editing/perseus/perseus_data.go
386
351
  export type PerseusGradedGroupSetWidgetOptions = {|
387
352
  // A list of Widget Groups
388
353
  gradedGroups: $ReadOnlyArray<PerseusGradedGroupWidgetOptions>,
389
354
  |};
390
- // sync-end:perseus-data-format-graded-group-set
391
355
 
392
- // sync-start:perseus-data-format-grapher 666534562 services/content-editing/perseus/perseus_data.go
393
356
  export type PerseusGrapherWidgetOptions = {|
394
357
  availableTypes: $ReadOnlyArray<
395
358
  | "absolute_value"
@@ -479,15 +442,11 @@ export type PerseusGrapherWidgetOptions = {|
479
442
  valid?: boolean | string,
480
443
  |},
481
444
  |};
482
- // sync-end:perseus-data-format-grapher
483
445
 
484
- // sync-start:perseus-data-format-group 683548434 services/content-editing/perseus/perseus_data.go
485
446
  export type PerseusGroupWidgetOptions = {|
486
447
  ...PerseusRenderer,
487
448
  |};
488
- // sync-end:perseus-data-format-group
489
449
 
490
- // sync-start:perseus-data-format-image 1902443006 services/content-editing/perseus/perseus_data.go
491
450
  export type PerseusImageWidgetOptions = {|
492
451
  // Translatable Markdown; Text to be shown for the title of the image
493
452
  // NOTE: perseus_data.go says this is required even though it isn't necessary.
@@ -513,9 +472,7 @@ export type PerseusImageWidgetOptions = {|
513
472
  // NOTE: perseus_data.go says this is required even though it isn't necessary.
514
473
  box?: $ReadOnlyArray<number>,
515
474
  |};
516
- // sync-end:perseus-data-format-image
517
475
 
518
- // sync-start:perseus-data-format-image-label 1815359548 services/content-editing/perseus/perseus_data.go
519
476
  export type PerseusImageLabel = {|
520
477
  // Translatable Text; The content of the label to display
521
478
  content: string,
@@ -524,9 +481,7 @@ export type PerseusImageLabel = {|
524
481
  // The point on the image to display the label
525
482
  coordinates: $ReadOnlyArray<number>,
526
483
  |};
527
- // sync-end:perseus-data-format-image-label
528
484
 
529
- // sync-start:perseus-data-format-interactive-graph 1553046458 services/content-editing/perseus/perseus_data.go
530
485
  export type PerseusInteractiveGraphWidgetOptions = {|
531
486
  // The tick steps. default [1, 1]
532
487
  // NOTE(kevinb): perseus_data.go defines this as Array<number>
@@ -563,9 +518,6 @@ export type PerseusInteractiveGraphWidgetOptions = {|
563
518
  // The correct kind of graph, if being used to select function type
564
519
  correct: PerseusGraphType,
565
520
  |};
566
- // sync-end:perseus-data-format-interactive-graph
567
-
568
- // sync-start:perseus-data-format-graph-type 1191842797 services/content-editing/perseus/perseus_data.go
569
521
 
570
522
  export type PerseusGraphType =
571
523
  | PerseusGraphTypeAngle
@@ -673,9 +625,6 @@ export type PerseusGraphTypeRay = {|
673
625
  ...PerseusGraphTypeCommon,
674
626
  |};
675
627
 
676
- // sync-end:perseus-data-format-graph-type
677
-
678
- // sync-start:perseus-data-format-label-image 2032676206 services/content-editing/perseus/perseus_data.go
679
628
  export type PerseusLabelImageWidgetOptions = {|
680
629
  // Translatable Text; Katex representation of choices
681
630
  choices: $ReadOnlyArray<string>,
@@ -696,9 +645,7 @@ export type PerseusLabelImageWidgetOptions = {|
696
645
  // Always false. Not used for this widget
697
646
  static: boolean,
698
647
  |};
699
- // sync-end:perseus-data-format-label-image
700
648
 
701
- // sync-start:perseus-data-format-label-image-marker 1027558334 services/content-editing/perseus/perseus_data.go
702
649
  export type PerseusLabelImageMarker = {|
703
650
  // A list of correct answers for this marker. Often only one but can have multiple
704
651
  answers: $ReadOnlyArray<string>,
@@ -709,9 +656,7 @@ export type PerseusLabelImageMarker = {|
709
656
  // Y Coordinate location of the marker on the image
710
657
  y: number,
711
658
  |};
712
- // sync-end:perseus-data-format-label-image-marker
713
659
 
714
- // sync-start:perseus-data-format-matcher 601321477 services/content-editing/perseus/perseus_data.go
715
660
  export type PerseusMatcherWidgetOptions = {|
716
661
  // Translatable Text; Labels to adorn the headings for the columns. Only 2 values [left, right]. e.g. ["Concepts", "Things"]
717
662
  labels: $ReadOnlyArray<string>,
@@ -724,9 +669,7 @@ export type PerseusMatcherWidgetOptions = {|
724
669
  // Adds padding to the rows. Padding is good for text, but not needed for images.
725
670
  padding: boolean,
726
671
  |};
727
- // sync-end:perseus-data-format-matcher
728
672
 
729
- // sync-start:perseus-data-format-matrix 1000243376 services/content-editing/perseus/perseus_data.go
730
673
  export type PerseusMatrixWidgetOptions = {|
731
674
  // Translatable Text; Shown before the matrix
732
675
  prefix: string,
@@ -741,9 +684,7 @@ export type PerseusMatrixWidgetOptions = {|
741
684
  // Whether this is meant to statically display the answers (true) or be used as an input field, graded against the answers
742
685
  static: boolean,
743
686
  |};
744
- // sync-end:perseus-data-format-matrix
745
687
 
746
- // sync-start:perseus-data-format-measurer 150148873 services/content-editing/perseus/perseus_data.go
747
688
  export type PerseusMeasurerWidgetOptions = {|
748
689
  // The image that the user is meant to measure
749
690
  image: PerseusImageBackground,
@@ -764,9 +705,7 @@ export type PerseusMeasurerWidgetOptions = {|
764
705
  // Always false. Not used for this widget
765
706
  static: boolean,
766
707
  |};
767
- // sync-end:perseus-data-format-measurer
768
708
 
769
- // sync-start:perseus-data-format-numeric-input 1220587654 services/content-editing/perseus/perseus_data.go
770
709
  export type PerseusNumericInputWidgetOptions = {|
771
710
  // A list of all the possible correct and incorrect answers
772
711
  answers: $ReadOnlyArray<PerseusNumericInputAnswer>,
@@ -792,9 +731,7 @@ export type PerseusNumericInputWidgetOptions = {|
792
731
  name: "integer" | "decimal" | "proper" | "improper" | "mixed" | "pi",
793
732
  |}>,
794
733
  |};
795
- // sync-end:perseus-data-format-numeric-input
796
734
 
797
- // sync-start:perseus-data-format-numeric-input-answer 2103478468 services/content-editing/perseus/perseus_data.go
798
735
  export type PerseusNumericInputAnswer = {|
799
736
  // Translatable Display; A description for why this answer is correct, wrong, or ungraded
800
737
  message: string,
@@ -813,9 +750,7 @@ export type PerseusNumericInputAnswer = {|
813
750
  // Unsimplified answers are Ungraded, Accepted, or Wrong. Options: "required", "correct", or "enforced"
814
751
  simplify: ?string,
815
752
  |};
816
- // sync-end:perseus-data-format-numeric-input-answer
817
753
 
818
- // sync-start:perseus-data-format-number-line 786922927 services/content-editing/perseus/perseus_data.go
819
754
  export type PerseusNumberLineWidgetOptions = {|
820
755
  // The position of the endpoints of the number line. Setting the range constrains the position of the answer and the labels.
821
756
  range: $ReadOnlyArray<number>,
@@ -846,9 +781,7 @@ export type PerseusNumberLineWidgetOptions = {|
846
781
  // When true, the answer is displayed and is immutable
847
782
  static: boolean,
848
783
  |};
849
- // sync-end:perseus-data-format-number-line
850
784
 
851
- // sync-start:perseus-data-format-orderer 42703989 services/content-editing/perseus/perseus_data.go
852
785
  export type PerseusOrdererWidgetOptions = {|
853
786
  // All of the options available to the user. Place the cards in the correct order. The same card can be used more than once in the answer but will only be displayed once at the top of a stack of identical cards.
854
787
  options: $ReadOnlyArray<PerseusRenderer>,
@@ -861,9 +794,7 @@ export type PerseusOrdererWidgetOptions = {|
861
794
  // Use the "horizontal" layout for short text and small images. The "vertical" layout is best for longer text (e.g. proofs).
862
795
  layout: string,
863
796
  |};
864
- // sync-end:perseus-data-format-orderer
865
797
 
866
- // sync-start:perseus-data-format-passage 1782937597 services/content-editing/perseus/perseus_data.go
867
798
  export type PerseusPassageWidgetOptions = {|
868
799
  // Translatable Text; To add footnotes, add ^ characters where they belong in the passage. Then, add ^ in the footnotes area to reference the footnotes in the passage.
869
800
  footnotes: string,
@@ -876,9 +807,7 @@ export type PerseusPassageWidgetOptions = {|
876
807
  // Always false. Not used for this widget
877
808
  static: boolean,
878
809
  |};
879
- // sync-end:perseus-data-format-passage
880
810
 
881
- // sync-start:perseus-data-format-passage-ref 786922927 services/content-editing/perseus/perseus_data.go
882
811
  export type PerseusPassageRefWidgetOptions = {|
883
812
  // The passage number
884
813
  passageNumber: number,
@@ -887,9 +816,7 @@ export type PerseusPassageRefWidgetOptions = {|
887
816
  // Short summary of the referenced section. This will be included in parentheses and quotes automatically.
888
817
  summaryText: string,
889
818
  |};
890
- // sync-end:perseus-data-format-passage-ref
891
819
 
892
- // sync-start:perseus-data-format-plotter 1511242700 services/content-editing/perseus/perseus_data.go
893
820
  export type PerseusPlotterWidgetOptions = {|
894
821
  // Translatable Text; The Axis labels. e.g. ["X Label", "Y Label"]
895
822
  labels: $ReadOnlyArray<string>,
@@ -918,9 +845,7 @@ export type PerseusPlotterWidgetOptions = {|
918
845
  // deprecated
919
846
  plotDimensions: $ReadOnlyArray<number>,
920
847
  |};
921
- // sync-end:perseus-data-format-plotter
922
848
 
923
- // sync-start:perseus-data-format-radio 1165510766 services/content-editing/perseus/perseus_data.go
924
849
  export type PerseusRadioWidgetOptions = {|
925
850
  // The choices provided to the user.
926
851
  choices: $ReadOnlyArray<PerseusRadioChoice>,
@@ -950,9 +875,7 @@ export type PerseusRadioWidgetOptions = {|
950
875
  // `noneOfTheAbove` is still in use (but only set to `false`).
951
876
  noneOfTheAbove?: false,
952
877
  |};
953
- // sync-end:perseus-data-format-radio
954
878
 
955
- // sync-start:perseus-data-format-radio-choice 1184662431 services/content-editing/perseus/perseus_data.go
956
879
  export type PerseusRadioChoice = {|
957
880
  // Translatable Markdown; The label for this choice
958
881
  content: string,
@@ -969,16 +892,12 @@ export type PerseusRadioChoice = {|
969
892
  // NOTE: perseus_data.go says this is required even though it isn't necessary.
970
893
  widgets?: {|[string]: PerseusWidget|},
971
894
  |};
972
- // sync-end:perseus-data-format-radio-choice
973
895
 
974
- // sync-start:perseus-data-format-sequence 1719933825 services/content-editing/perseus/perseus_data.go
975
896
  export type PerseusSequenceWidgetOptions = {|
976
897
  // A list of Renderers to display in sequence
977
898
  json: $ReadOnlyArray<PerseusRenderer>,
978
899
  |};
979
- // sync-end:perseus-data-format-sequence
980
900
 
981
- // sync-start:perseus-data-format-simulator 235177664 services/content-editing/perseus/perseus_data.go
982
901
  export type PerseusSimulatorWidgetOptions = {|
983
902
  // Translatable Text; The X Axis
984
903
  xAxisLabel: string,
@@ -991,9 +910,7 @@ export type PerseusSimulatorWidgetOptions = {|
991
910
  // The number of times to run the simulation
992
911
  numTrials: number,
993
912
  |};
994
- // sync-end:perseus-data-format-simulator
995
913
 
996
- // sync-start:perseus-data-format-sorter 1524711769 services/content-editing/perseus/perseus_data.go
997
914
  export type PerseusSorterWidgetOptions = {|
998
915
  // Translatable Text; The correct answer (in the correct order). The user will see the cards in a randomized order.
999
916
  correct: $ReadOnlyArray<string>,
@@ -1002,9 +919,7 @@ export type PerseusSorterWidgetOptions = {|
1002
919
  // Use the "horizontal" layout for short text and small images. The "vertical" layout is best for longer text and larger images.
1003
920
  layout: string,
1004
921
  |};
1005
- // sync-end:perseus-data-format-sorter
1006
922
 
1007
- // sync-start:perseus-data-format-table 1956164389 services/content-editing/perseus/perseus_data.go
1008
923
  export type PerseusTableWidgetOptions = {|
1009
924
  // Translatable Text; A list of column headers
1010
925
  headers: $ReadOnlyArray<string>,
@@ -1015,9 +930,7 @@ export type PerseusTableWidgetOptions = {|
1015
930
  // Translatable Text; A 2-dimensional array of text to populate the table with
1016
931
  answers: $ReadOnlyArray<$ReadOnlyArray<string>>,
1017
932
  |};
1018
- // sync-end:perseus-data-format-table
1019
933
 
1020
- // sync-start:perseus-data-format-transformer 28164718 services/content-editing/perseus/perseus_data.go
1021
934
  export type PerseusTransformerWidgetOptions = {|
1022
935
  correct: {|
1023
936
  shape: {|
@@ -1197,9 +1110,6 @@ export type PerseusTransformerToolConstraints = {|
1197
1110
  fixed: boolean,
1198
1111
  |};
1199
1112
 
1200
- // sync-end:perseus-data-format-transformer
1201
-
1202
- // sync-start:perseus-data-format-interaction 1099589221 services/content-editing/perseus/perseus_data.go
1203
1113
  export type PerseusInteractionWidgetOptions = {|
1204
1114
  // The definition of the graph
1205
1115
  graph: PerseusInteractionGraph,
@@ -1208,9 +1118,7 @@ export type PerseusInteractionWidgetOptions = {|
1208
1118
  // Always false. Not used for this widget
1209
1119
  static: boolean,
1210
1120
  |};
1211
- // sync-end:perseus-data-format-interaction
1212
1121
 
1213
- // sync-start:perseus-data-format-interaction-graph 174409695 services/content-editing/perseus/perseus_data.go
1214
1122
  export type PerseusInteractionGraph = {|
1215
1123
  // "canvas", "graph"
1216
1124
  editableSettings?: $ReadOnlyArray<"canvas" | "graph">,
@@ -1245,9 +1153,7 @@ export type PerseusInteractionGraph = {|
1245
1153
  // This controls the number (and position) of the tick marks for the X and Y axis. e.g. [1, 1]
1246
1154
  tickStep: $ReadOnlyArray<number>,
1247
1155
  |};
1248
- // sync-end:perseus-data-format-interaction-graph
1249
1156
 
1250
- // sync-start:perseus-data-format-interaction-element 865922566 services/content-editing/perseus/perseus_data.go
1251
1157
  export type PerseusInteractionElement =
1252
1158
  | {|
1253
1159
  type: "function",
@@ -1298,9 +1204,6 @@ export type PerseusInteractionElement =
1298
1204
  options: PerseusInteractionRectangleElementOptions,
1299
1205
  |};
1300
1206
 
1301
- // sync-end:perseus-data-format-interaction-element
1302
-
1303
- // sync-start:perseus-data-format-interaction-function 81160594 services/content-editing/perseus/perseus_data.go
1304
1207
  export type PerseusInteractionFunctionElementOptions = {|
1305
1208
  // The definition of the function to draw on the graph. e.g "x^2 + 1"
1306
1209
  value: string,
@@ -1317,9 +1220,7 @@ export type PerseusInteractionFunctionElementOptions = {|
1317
1220
  // The thickness of the stroke
1318
1221
  strokeWidth: number,
1319
1222
  |};
1320
- // sync-end:perseus-data-format-interaction-function
1321
1223
 
1322
- // sync-start:perseus-data-format-interaction-label 1111537285 services/content-editing/perseus/perseus_data.go
1323
1224
  export type PerseusInteractionLabelElementOptions = {|
1324
1225
  // Translatable Text; the content of the label
1325
1226
  label: string,
@@ -1330,9 +1231,7 @@ export type PerseusInteractionLabelElementOptions = {|
1330
1231
  // The Y location of the label
1331
1232
  coordY: string,
1332
1233
  |};
1333
- // sync-end:perseus-data-format-interaction-label
1334
1234
 
1335
- // sync-start:perseus-data-format-interaction-line 1331716694 services/content-editing/perseus/perseus_data.go
1336
1235
  export type PerseusInteractionLineElementOptions = {|
1337
1236
  // A color code for the line segment. e.g. "#FFOOAF"
1338
1237
  color: string,
@@ -1351,9 +1250,7 @@ export type PerseusInteractionLineElementOptions = {|
1351
1250
  // Does the line have an arrow point to it? options: "", "->"
1352
1251
  arrows: string,
1353
1252
  |};
1354
- // sync-end:perseus-data-format-interaction-line
1355
1253
 
1356
- // sync-start:perseus-data-format-interaction-movable-line 1201996829 services/content-editing/perseus/perseus_data.go
1357
1254
  export type PerseusInteractionMovableLineElementOptions = {|
1358
1255
  // The start of the line segment (X)
1359
1256
  startX: string,
@@ -1382,9 +1279,7 @@ export type PerseusInteractionMovableLineElementOptions = {|
1382
1279
  // The highest possible Y value
1383
1280
  constraintYMax: string,
1384
1281
  |};
1385
- // sync-end:perseus-data-format-interaction-movable-line
1386
1282
 
1387
- // sync-start:perseus-data-format-interaction-movable-point 993274163 services/content-editing/perseus/perseus_data.go
1388
1283
  export type PerseusInteractionMovablePointElementOptions = {|
1389
1284
  // The X position of the point
1390
1285
  startX: string,
@@ -1407,9 +1302,7 @@ export type PerseusInteractionMovablePointElementOptions = {|
1407
1302
  // The highest possible Y value
1408
1303
  constraintYMax: string,
1409
1304
  |};
1410
- // sync-end:perseus-data-format-interaction-movable-point
1411
1305
 
1412
- // sync-start:perseus-data-format-interaction-parametric 2038394914 services/content-editing/perseus/perseus_data.go
1413
1306
  export type PerseusInteractionParametricElementOptions = {|
1414
1307
  // The function for the X coordinate. e.g. "\\cos(t)"
1415
1308
  x: string,
@@ -1426,9 +1319,7 @@ export type PerseusInteractionParametricElementOptions = {|
1426
1319
  // The thickness of the stroke
1427
1320
  strokeWidth: number,
1428
1321
  |};
1429
- // sync-end:perseus-data-format-interaction-parametric
1430
1322
 
1431
- // sync-start:perseus-data-format-interaction-point 489666139 services/content-editing/perseus/perseus_data.go
1432
1323
  export type PerseusInteractionPointElementOptions = {|
1433
1324
  // The color of the point. e.g. "black"
1434
1325
  color: string,
@@ -1437,9 +1328,7 @@ export type PerseusInteractionPointElementOptions = {|
1437
1328
  // The Y coordinate of the point
1438
1329
  coordY: string,
1439
1330
  |};
1440
- // sync-end:perseus-data-format-interaction-point
1441
1331
 
1442
- // sync-start:perseus-data-format-interaction-rectangle 999004794 services/content-editing/perseus/perseus_data.go
1443
1332
  export type PerseusInteractionRectangleElementOptions = {|
1444
1333
  // The fill color. e.g. "#EDD19B"
1445
1334
  color: string,
@@ -1452,9 +1341,7 @@ export type PerseusInteractionRectangleElementOptions = {|
1452
1341
  // The height of the rectangle
1453
1342
  height: string,
1454
1343
  |};
1455
- // sync-end:perseus-data-format-interaction-rectangle
1456
1344
 
1457
- // sync-start:perseus-data-format-cs-program 786922927 services/content-editing/perseus/perseus_data.go
1458
1345
  export type PerseusCSProgramWidgetOptions = {|
1459
1346
  // The ID of the CS program to embed
1460
1347
  programID: string,
@@ -1480,9 +1367,7 @@ export type PerseusCSProgramSetting = {|
1480
1367
  // The value of the setting
1481
1368
  value: string,
1482
1369
  |};
1483
- // sync-end:perseus-data-format-cs-program
1484
1370
 
1485
- // sync-start:perseus-data-format-iframe 786922927 services/content-editing/perseus/perseus_data.go
1486
1371
  export type PerseusIFrameWidgetOptions = {|
1487
1372
  // A URL to display OR a CS Program ID
1488
1373
  url: string,
@@ -1499,16 +1384,12 @@ export type PerseusIFrameWidgetOptions = {|
1499
1384
  // Always false
1500
1385
  static: boolean,
1501
1386
  |};
1502
- // sync-end:perseus-data-format-iframe
1503
1387
 
1504
- // sync-start:perseus-data-format-video 786922927 services/content-editing/perseus/perseus_data.go
1505
1388
  export type PerseusVideoWidgetOptions = {|
1506
1389
  location: string,
1507
1390
  static?: boolean,
1508
1391
  |};
1509
- // sync-end:perseus-data-format-video
1510
1392
 
1511
- // sync-start:perseus-data-format-input-number 786922927 services/content-editing/perseus/perseus_data.go
1512
1393
  export type PerseusInputNumberWidgetOptions = {|
1513
1394
  answerType?:
1514
1395
  | "number"
@@ -1526,33 +1407,16 @@ export type PerseusInputNumberWidgetOptions = {|
1526
1407
  value: string | number | boolean,
1527
1408
  customKeypad?: boolean,
1528
1409
  |};
1529
- // sync-end:perseus-data-format-input-number
1530
1410
 
1531
1411
  // TODO(FEI-3983): Create proper flow types for these.
1532
- // sync-start:perseus-data-format-example-graphie 786922927 services/content-editing/perseus/perseus_data.go
1533
1412
  export type PerseusExampleGraphieWidgetOptions = $FlowFixMe;
1534
- // sync-end:perseus-data-format-example-graphie
1535
- // sync-start:perseus-data-format-example 786922927 services/content-editing/perseus/perseus_data.go
1536
1413
  export type PerseusExampleWidgetOptions = $FlowFixMe;
1537
- // sync-end:perseus-data-format-example
1538
- // sync-start:perseus-data-format-lights-puzzle 786922927 services/content-editing/perseus/perseus_data.go
1539
1414
  export type PerseusLightsPuzzleWidgetOptions = $FlowFixMe;
1540
- // sync-end:perseus-data-format-lights-puzzle
1541
- // sync-start:perseus-data-format-molecule-renderer 786922927 services/content-editing/perseus/perseus_data.go
1542
1415
  export type PerseusMoleculeRendererWidgetOptions = $FlowFixMe;
1543
- // sync-end:perseus-data-format-molecule-renderer
1544
- // sync-start:perseus-data-format-passage-ref-target 786922927 services/content-editing/perseus/perseus_data.go
1545
1416
  export type PerseusPassageRefTargetWidgetOptions = $FlowFixMe;
1546
- // sync-end:perseus-data-format-passage-ref-target
1547
- // sync-start:perseus-data-format-reaction-diagram 786922927 services/content-editing/perseus/perseus_data.go
1548
1417
  export type PerseusReactionDiagramWidgetOptions = $FlowFixMe;
1549
- // sync-end:perseus-data-format-reaction-diagram
1550
- // sync-start:perseus-data-format-simple-markdown-tester 786922927 services/content-editing/perseus/perseus_data.go
1551
1418
  export type PerseusSimpleMarkdownTesterWidgetOptions = $FlowFixMe;
1552
- // sync-end:perseus-data-format-simple-markdown-tester
1553
- // sync-start:perseus-data-format-unit-input 786922927 services/content-editing/perseus/perseus_data.go
1554
1419
  export type PerseusUnitInputWidgetOptions = $FlowFixMe;
1555
- // sync-end:perseus-data-format-unit-input
1556
1420
 
1557
1421
  export type PerseusWidgetOptions =
1558
1422
  | PerseusCategorizerWidgetOptions
@@ -1593,5 +1457,3 @@ export type PerseusWidgetOptions =
1593
1457
  | PerseusTransformerWidgetOptions
1594
1458
  | PerseusUnitInputWidgetOptions
1595
1459
  | PerseusVideoWidgetOptions;
1596
-
1597
- // sync-end:perseus-data-format
@@ -113,7 +113,5 @@ export const publishBlockingErrorColor = "#be2612";
113
113
  export const radioBorderColor = "#BABEC2";
114
114
  export const checkedColor = "#71B307";
115
115
 
116
- // sync-start:article-max-width 986452807 services/static/javascript/perseus-all-package/styles/variables.less
117
116
  export const articleMaxWidthInPx = 688;
118
117
  export const articleMaxWidthTableInPx = 512;
119
- // sync-end:article-max-width
@@ -62,7 +62,5 @@
62
62
  // Responsive variables
63
63
  @phoneMargin: 16px;
64
64
 
65
- // sync-start:article-max-width 1144921561 services/static/javascript/perseus-all-package/styles/constants.js
66
65
  @articleMaxWidth: 688px;
67
66
  @articleMaxWidthTablet: 512px;
68
- // sync-end:article-max-width
package/src/types.js CHANGED
@@ -9,7 +9,7 @@ import * as React from "react";
9
9
  import type {SerializedHighlightSet} from "./components/highlighting/types.js";
10
10
  import type {ILogger} from "./logging/log.js";
11
11
  import type {Item} from "./multi-items/item-types.js";
12
- import type {PerseusWidget} from "./perseus-types.js";
12
+ import type {PerseusWidget, PerseusRadioChoice} from "./perseus-types.js";
13
13
  import type {SizeClass} from "./util/sizing-utils.js";
14
14
  import type {Result} from "@khanacademy/wonder-blocks-data";
15
15
 
@@ -75,6 +75,22 @@ export type Version = {|
75
75
 
76
76
  export type EditorMode = "edit" | "preview" | "json";
77
77
 
78
+ export type ChoiceState = {|
79
+ selected: boolean,
80
+ crossedOut: boolean,
81
+ highlighted: boolean,
82
+ rationaleShown: boolean,
83
+ correctnessShown: boolean,
84
+ previouslyAnswered: boolean,
85
+ readOnly: boolean,
86
+ |};
87
+
88
+ export type RadioChoiceWithMetadata = {|
89
+ ...PerseusRadioChoice,
90
+ originalIndex: number,
91
+ correct: boolean,
92
+ |};
93
+
78
94
  export type ChangeHandler = (
79
95
  {|
80
96
  hints?: $ReadOnlyArray<Hint>,
@@ -97,7 +113,7 @@ export type ChangeHandler = (
97
113
  value?: $FlowFixMe,
98
114
 
99
115
  // widgets/radio/widget.jsx
100
- choiceStates?: $ReadOnlyArray<$FlowFixMe>,
116
+ choiceStates?: $ReadOnlyArray<ChoiceState>,
101
117
 
102
118
  // widgets/numeric-input.jsx
103
119
  currentValue?: string,
@@ -230,39 +246,6 @@ export type APIOptions = $ReadOnly<{|
230
246
  // values. For now, though, you must either specify all fields
231
247
  // of `styling`, or omit the `styling` option entirely.
232
248
  styling?: {|
233
- // Which version of radio widget styles to use in non-SAT
234
- // contexts.
235
- //
236
- // "legacy" was the version of the widget display after XOM but
237
- // before we started adding MCR styles. It doesn't have support
238
- // for rationales. It has since been removed.
239
- //
240
- // "intermediate" is a design which adds several new additions
241
- // to the "legacy" styles such as:
242
- // 1. Using the XOM "desktop" styles (with a visible check icon
243
- // and lines in between choices) on mobile devices.
244
- // 2. Designs for rationales
245
- // 3. Using the single-select styles for multi-select styles
246
- //
247
- // "final" is a design which will build off of the
248
- // "intermediate" designs and adds some improved designs as well
249
- // as:
250
- // 1. a/b/c/d/etc. letters inside of the prompt check box
251
- // 2. New iconography and styles to indicate choice correctness
252
- //
253
- // The "legacy" and "intermediate" designs will be A/B tested
254
- // against each other to ensure that its changes don't cause
255
- // problems due to the new designs. Once the "intermediate"
256
- // designs are finished, they will be A/B tested against the
257
- // "final" designs.
258
- //
259
- // If no flag is provided, "legacy" styles will be shown.
260
- //
261
- // TODO(emily): Remove this by Aug 1, 2017, at which point all
262
- // callsites should have been switched to using the "final"
263
- // designs.
264
- radioStyleVersion?: "intermediate" | "final",
265
-
266
249
  // TODO(Nicole): Remove this after landing wonderblock-ifying
267
250
  // the radio widget
268
251
  primaryProductColor?: string,