@khanacademy/perseus 13.2.0 → 15.0.0

package/src/widgets/__testdata__/interactive-graph-random.testdata.ts

@@ -0,0 +1,269 @@
+import {
+    arrayOfLength,
+    randomBoolean,
+    randomElement,
+    randomInteger,
+    randomLetter,
+    randomWord,
+} from "./randomizers";
+
+import type {Coord} from "../../interactive2/types";
+import type {
+    PerseusGraphType,
+    PerseusGraphTypeAngle,
+    PerseusGraphTypeCircle,
+    PerseusGraphTypeLinear,
+    PerseusGraphTypeLinearSystem,
+    PerseusGraphTypePoint,
+    PerseusGraphTypePolygon,
+    PerseusGraphTypeQuadratic,
+    PerseusGraphTypeRay,
+    PerseusGraphTypeSegment,
+    PerseusGraphTypeSinusoid,
+    PerseusImageBackground,
+    PerseusRenderer,
+} from "../../perseus-types";
+
+const randomCoord = (): Coord => {
+    return [randomInteger(1, 100), randomInteger(1, 100)];
+};
+
+const randomGraphTypeAngle = (): PerseusGraphTypeAngle => {
+    return {
+        type: "angle",
+        showAngles: randomBoolean(),
+        allowReflexAngles: randomBoolean(),
+        angleOffsetDeg: randomInteger(1, 90),
+        snapDegrees: randomInteger(1, 90),
+        match: "congruent",
+        // must be 3 coords for an angle graph
+        coords: arrayOfLength(3).map(randomCoord),
+    };
+};
+
+const randomGraphTypeCircle = (): PerseusGraphTypeCircle => {
+    return {
+        type: "circle",
+        center: randomCoord(),
+        radius: randomInteger(1, 20),
+    };
+};
+
+const randomGraphTypeLinear = (): PerseusGraphTypeLinear => {
+    return {
+        type: "linear",
+        coords: arrayOfLength(2).map(randomCoord),
+    };
+};
+
+const randomGraphTypeLinearSystem = (): PerseusGraphTypeLinearSystem => {
+    return {
+        type: "linear-system",
+        coords: arrayOfLength(2).map(() => arrayOfLength(2).map(randomCoord)),
+    };
+};
+
+const randomGraphTypePoint = (): PerseusGraphTypePoint => {
+    let minCoords = 1;
+    const numPoints = randomElement(["unlimited", randomInteger(1, 10)]);
+    if (typeof numPoints === "number") {
+        minCoords = numPoints;
+    }
+    return {
+        type: "point",
+        numPoints: typeof numPoints === "number" ? numPoints : "unlimited",
+        coords: arrayOfLength(randomInteger(minCoords, 10)).map(randomCoord),
+    };
+};
+
+const randomGraphTypePolygon = (): PerseusGraphTypePolygon => {
+    // Note Jhead - I saw this create at least one broken graph but didn't figure out why
+    return {
+        type: "polygon",
+        numSides: randomElement([
+            "unlimited",
+            undefined,
+            randomInteger(3, 30),
+            randomInteger(3, 30),
+        ]),
+        showAngles: randomBoolean(),
+        showSides: randomBoolean(),
+        snapTo: randomElement(["grid", "angles", "sides"]),
+        match: randomElement(["similar", "congruent", "approx", undefined]),
+        coords: arrayOfLength(randomInteger(3, 20)).map(randomCoord),
+    };
+};
+
+const randomGraphTypeQuadratic = (): PerseusGraphTypeQuadratic => {
+    return {
+        type: "quadratic",
+        coords: arrayOfLength(3).map(randomCoord),
+    };
+};
+
+const randomGraphTypeRay = (): PerseusGraphTypeRay => {
+    return {
+        type: "ray",
+        coords: arrayOfLength(2).map(randomCoord),
+    };
+};
+
+const randomGraphTypeSegment = (): PerseusGraphTypeSegment => {
+    const numSegments = randomInteger(1, 6);
+    return {
+        type: "segment",
+        numSegments,
+        coords: arrayOfLength(numSegments).map(() => [
+            randomCoord(),
+            randomCoord(),
+        ]),
+    };
+};
+
+const randomGraphTypeSinusoid = (): PerseusGraphTypeSinusoid => {
+    return {
+        type: "sinusoid",
+        coords: arrayOfLength(2).map(randomCoord),
+    };
+};
+
+export const randomBackgroundImage = (): PerseusImageBackground => {
+    const height = randomInteger(200, 500);
+    const width = randomInteger(200, 500);
+    const graphieUrl =
+        "web+graphie://ka-perseus-graphie.s3.amazonaws.com/a1b7a05c177742523250b64a3995c9b37aac3399";
+    const placeKittenUrl = `https://placekitten.com/g/${width}/${height}`;
+
+    return {
+        scale: randomInteger(8, 12) / 10,
+        bottom: randomInteger(0, 10) - 5,
+        url: randomElement([graphieUrl, placeKittenUrl, null]),
+        height,
+        width,
+        left: randomInteger(0, 10) - 5,
+    };
+};
+
+export const randomInteractiveGraphGenerator = (
+    type?: string,
+): PerseusRenderer => {
+    const randomRange = (): [number, number] => {
+        const val1 = randomInteger(0, 400) - 200;
+        const val2 = randomInteger(0, 400) - 200;
+        if (val1 < val2) {
+            return [val1, val2];
+        }
+        return [val2, val1];
+    };
+
+    const graphType =
+        type ||
+        randomElement([
+            "angle",
+            "circle",
+            "linear",
+            "linear-system",
+            "point",
+            "polygon",
+            "quadratic",
+            "ray",
+            "segment",
+            "sinusoid",
+        ]);
+
+    let graph: PerseusGraphType;
+    let correct: PerseusGraphType;
+
+    switch (graphType) {
+        case "angle": {
+            graph = randomGraphTypeAngle();
+            correct = randomGraphTypeAngle();
+            break;
+        }
+        case "circle": {
+            graph = randomGraphTypeCircle();
+            correct = randomGraphTypeCircle();
+            break;
+        }
+        case "linear": {
+            graph = randomGraphTypeLinear();
+            correct = randomGraphTypeLinear();
+            break;
+        }
+        case "linear-system": {
+            graph = randomGraphTypeLinearSystem();
+            correct = randomGraphTypeLinearSystem();
+            break;
+        }
+        case "point": {
+            graph = randomGraphTypePoint();
+            correct = randomGraphTypePoint();
+            break;
+        }
+        case "polygon": {
+            graph = randomGraphTypePolygon();
+            correct = randomGraphTypePolygon();
+            break;
+        }
+        case "quadratic": {
+            graph = randomGraphTypeQuadratic();
+            correct = randomGraphTypeQuadratic();
+            break;
+        }
+        case "ray": {
+            graph = randomGraphTypeRay();
+            correct = randomGraphTypeRay();
+            break;
+        }
+        case "segment": {
+            graph = randomGraphTypeSegment();
+            correct = randomGraphTypeSegment();
+            break;
+        }
+        case "sinusoid": {
+            graph = randomGraphTypeSinusoid();
+            correct = randomGraphTypeSinusoid();
+            break;
+        }
+        default: {
+            graph = randomGraphTypeAngle();
+            correct = randomGraphTypeAngle();
+        }
+    }
+
+    return {
+        content: `[[\u2603 interactive-graph 1]]`,
+        images: {},
+        widgets: {
+            "interactive-graph 1": {
+                graded: randomBoolean(),
+                version: {
+                    major: 0,
+                    minor: 0,
+                },
+                static: false, //always false for this widget
+                type: "interactive-graph",
+                options: {
+                    rulerTicks: randomInteger(1, 100),
+                    showProtractor: randomBoolean(0.2),
+                    graph,
+                    snapStep: [
+                        randomInteger(1, 10) / 10,
+                        randomInteger(1, 10) / 10,
+                    ],
+                    labels: [randomLetter() || "x", randomLetter() || "y"],
+                    step: [randomInteger(1, 10), randomInteger(1, 10)],
+                    gridStep: [randomInteger(1, 10), randomInteger(1, 10)],
+                    backgroundImage: randomBackgroundImage(),
+                    range: [randomRange(), randomRange()],
+                    showRuler: randomBoolean(0.2),
+                    markings:
+                        randomElement(["none", "graph", "grid"]) || "none",
+                    rulerLabel: randomElement(["", randomWord()]) || "",
+                    correct,
+                },
+                alignment: "default",
+            },
+        },
+    };
+};

package/src/widgets/__testdata__/radio.testdata.ts

@@ -1,7 +1,15 @@
+import {
+    arrayOfLength,
+    randomBoolean,
+    randomInteger,
+    randomSentence,
+} from "./randomizers";
+
 import type {
     PerseusRenderer,
     RadioWidget,
     PassageWidget,
+    PerseusRadioChoice,
 } from "../../perseus-types";
 
 export const question: PerseusRenderer = {
@@ -259,3 +267,58 @@ export const multiChoiceQuestionAndAnswer: [
         [0, 1, 2, 3],
     ],
 ];
+
+export const randomRadioGenerator = (): PerseusRenderer => {
+    const randomChoice = (
+        isMultiSelect: boolean,
+        isCorrect: boolean,
+        isNoneOfTheAbove: boolean,
+    ): PerseusRadioChoice => {
+        return {
+            content: randomSentence(12),
+            isNoneOfTheAbove: isNoneOfTheAbove,
+            correct: isMultiSelect ? randomBoolean() : isCorrect,
+        };
+    };
+    const numberOfChoices = randomInteger(2, 6);
+
+    const isMultiSelect = randomBoolean();
+    // only used if not multi select
+    const correctIndex = randomInteger(0, numberOfChoices);
+
+    const containsNoneOfTheAbove = randomBoolean();
+    // only used if containsNoneOfTheAbove
+    const noneOfTheAboveIndex = randomInteger(0, numberOfChoices);
+
+    return {
+        content: `${randomSentence(30)}\n\n[[\u2603 radio 1]]`,
+        images: {},
+        widgets: {
+            "radio 1": {
+                graded: randomBoolean(),
+                version: {
+                    major: 1,
+                    minor: 0,
+                },
+                static: randomBoolean(0.05),
+                type: "radio",
+                options: {
+                    onePerLine: randomBoolean(),
+                    displayCount: null,
+                    choices: arrayOfLength(numberOfChoices).map((_, i) =>
+                        randomChoice(
+                            isMultiSelect,
+                            correctIndex === i,
+                            containsNoneOfTheAbove && noneOfTheAboveIndex === i,
+                        ),
+                    ),
+                    hasNoneOfTheAbove: randomBoolean(),
+                    multipleSelect: isMultiSelect,
+                    randomize: randomBoolean(),
+                    deselectEnabled: randomBoolean(),
+                },
+                alignment: "default",
+            } as RadioWidget,
+        },
+    };
+};

package/src/widgets/__testdata__/randomizers.ts

@@ -0,0 +1,51 @@
+// Helpers to generate random test data for widgets
+
+// Returns a random letter inclusive of emoji and japanese characters
+export const randomLetter = (): string => {
+    const alphabet = "abcdefghijklmnopqrstuvwxyz".split("");
+    const emojis = ["🍇", "🍈", "🍌"];
+    const japaneseCharacters = ["ツ", "デ", "ト", "ド", "ナ", "ぁ", "あ"];
+    const characters = alphabet.concat(emojis).concat(japaneseCharacters);
+    const letter = randomInteger(0, characters.length - 1);
+    return characters[letter];
+};
+
+// Returns a random word 3-20 characters long composed of the random letter function
+export const randomWord = (): string => {
+    // words are 3 - 20 characters
+    const numLetters = randomInteger(3, 11);
+    return arrayOfLength(numLetters).map(randomLetter).join("");
+};
+
+// Returns a random sentence of a specified number of words, using the random word function
+export const randomSentence = (maxWords: number): string => {
+    const numWords = randomInteger(5, Math.max(maxWords, 5));
+    return arrayOfLength(numWords).map(randomWord).join(" ");
+};
+
+// generates a boolean. 50/50 unless rateTrue is specified
+export const randomBoolean = (rateTrue?: number): boolean => {
+    let threshold = rateTrue;
+    if (threshold == null) {
+        threshold = 0.5;
+    }
+    return Math.random() < threshold;
+};
+
+// generates an integer inclusive of the specified min and max
+export const randomInteger = (min: number, max: number): number => {
+    return Math.floor(Math.random() * (max + 1 - min)) + min;
+};
+
+// A helper to create an array of a certain length.
+export const arrayOfLength = (length: number): number[] => {
+    return Array.from(Array(length).keys());
+};
+
+// Returns a random element from a provided list
+export function randomElement<T>(items: Array<T>): T | undefined {
+    if (items.length > 0) {
+        return items[randomInteger(0, items.length - 1)];
+    }
+    return undefined;
+}

package/src/widgets/__tests__/expression-mobile.test.tsx

@@ -37,7 +37,6 @@ function RendererWithContext({item}) {
                         apiOptions={{
                             isMobile: true,
                             customKeypad: true,
-                            useV2Keypad: true,
                         }}
                         item={item}
                         problemNum={0}
@@ -60,7 +59,6 @@ function KeypadWithContext() {
                         onElementMounted={setKeypadElement}
                         onDismiss={() => {}}
                         onAnalyticsEvent={async () => {}}
-                        useV2Keypad
                     />
                 );
             }}

package/src/widgets/__tests__/expression.test.tsx

@@ -42,7 +42,7 @@ const assertCorrect = (itemData: PerseusItem, input: string) => {
         type: "perseus:expression-evaluated",
         payload: {
             result: "correct",
-            virtualKeypadVersion: "PERSEUS_MATH_INPUT",
+            virtualKeypadVersion: "MATH_INPUT_KEYPAD_V2",
         },
     });
 };
@@ -54,7 +54,7 @@ const assertIncorrect = (itemData: PerseusItem, input: string) => {
         type: "perseus:expression-evaluated",
         payload: {
             result: "incorrect",
-            virtualKeypadVersion: "PERSEUS_MATH_INPUT",
+            virtualKeypadVersion: "MATH_INPUT_KEYPAD_V2",
         },
     });
 };
@@ -224,19 +224,8 @@ describe("Expression Widget", function () {
             );
         });
 
-        it("should set the virtual keypad version to MATH_INPUT_KEYPAD_V1 when customKeypad is set and useV2Keypad is unset", () => {
-            assertKeypadVersion({customKeypad: true}, "MATH_INPUT_KEYPAD_V1");
-        });
-
-        it("should set the virtual keypad version to MATH_INPUT_KEYPAD_V2 when customKeypad is set and useV2Keypad is true", () => {
-            assertKeypadVersion(
-                {customKeypad: true, useV2Keypad: true},
-                "MATH_INPUT_KEYPAD_V2",
-            );
-        });
-
-        it("should default the virtual keypad version to PERSEUS_MATH_INPUT", () => {
-            assertKeypadVersion(Object.freeze({}), "PERSEUS_MATH_INPUT");
+        it("should default the virtual keypad version to MATH_INPUT_KEYPAD_V2", () => {
+            assertKeypadVersion(Object.freeze({}), "MATH_INPUT_KEYPAD_V2");
         });
     });
 });

package/src/widgets/__tests__/randomizers.test.ts

@@ -0,0 +1,53 @@
+import {
+    arrayOfLength,
+    randomBoolean,
+    randomElement,
+    randomLetter,
+    randomSentence,
+    randomWord,
+} from "../__testdata__/randomizers";
+
+describe("randomizers", () => {
+    describe("randomLetter", () => {
+        it("returns one letter", () => {
+            // can't check for just one character because some non english chars are longer than 1 char
+            expect(typeof randomLetter()).toBe("string");
+        });
+    });
+
+    describe("randomWord", () => {
+        it("returns a word of at least 3 letters", () => {
+            expect(randomWord().length).toBeGreaterThanOrEqual(3);
+        });
+    });
+
+    describe("randomSentence", () => {
+        it("returns a sentence of at least 5 words", () => {
+            expect(randomSentence(10).split(" ").length).toBeGreaterThanOrEqual(
+                5,
+            );
+        });
+    });
+
+    describe("randomBoolean", () => {
+        it("is true when rateTrue is 1", () => {
+            expect(randomBoolean(1)).toEqual(true);
+        });
+        it("is false when rateTrue is 0", () => {
+            expect(randomBoolean(0)).toEqual(false);
+        });
+    });
+
+    describe("arrayOfLength", () => {
+        it("returns an array of the specified length", () => {
+            expect(arrayOfLength(3).length).toEqual(3);
+            expect(arrayOfLength(12).length).toEqual(12);
+        });
+    });
+
+    describe("randomElement", () => {
+        it("returns one of the input array elements", () => {
+            expect([1, 2, 3]).toContain(randomElement([1, 2, 3]));
+        });
+    });
+});

package/src/widgets/expression.tsx

@@ -64,11 +64,7 @@ const deriveKeypadVersion = (apiOptions: APIOptions) => {
     // can remove this `virtualKeypadVersion` field entirely.
     return apiOptions.nativeKeypadProxy != null
         ? "REACT_NATIVE_KEYPAD"
-        : apiOptions.customKeypad === true
-        ? apiOptions.useV2Keypad === true
-            ? "MATH_INPUT_KEYPAD_V2"
-            : "MATH_INPUT_KEYPAD_V1"
-        : "PERSEUS_MATH_INPUT";
+        : "MATH_INPUT_KEYPAD_V2";
 };
 
 type Rubric = PerseusExpressionWidgetOptions;

package/src/widgets/graded-group.tsx

@@ -24,6 +24,7 @@ import a11y from "../util/a11y";
 
 import GradedGroupAnswerBar from "./graded-group-answer-bar";
 
+import type {ANSWER_BAR_STATES} from "./graded-group-answer-bar";
 import type {PerseusGradedGroupWidgetOptions} from "../perseus-types";
 import type {
     PerseusScore,
@@ -31,7 +32,6 @@ import type {
     WidgetExports,
     WidgetProps,
 } from "../types";
-import type {ANSWER_BAR_STATES} from "./graded-group-answer-bar";
 
 const GRADING_STATUSES = {
     ungraded: "ungraded" as const,

package/src/widgets/image.tsx

@@ -4,6 +4,7 @@ import classNames from "classnames";
 import * as React from "react";
 import _ from "underscore";
 
+import AssetContext from "../asset-context";
 import SvgImage from "../components/svg-image";
 import * as Changeable from "../mixins/changeable";
 import Renderer from "../renderer";
@@ -93,11 +94,14 @@ class ImageWidget extends React.Component<Props> {
         const backgroundImage = this.props.backgroundImage;
 
         if (backgroundImage.url) {
+            const url = backgroundImage.url;
             image = (
-                <SvgImage
-                    src={backgroundImage.url}
-                    alt={
-                        /* alt text is formatted in a sr-only
+                <AssetContext.Consumer>
+                    {({setAssetStatus}) => (
+                        <SvgImage
+                            src={url}
+                            alt={
+                                /* alt text is formatted in a sr-only
                                div next to the image in addition to
                                the alt attribute.
                                If there is no alt text at all,
@@ -117,22 +121,25 @@ class ImageWidget extends React.Component<Props> {
                                in practice right now, although
                                it will exhibit weird behaviour
                                while editing. */
-                        this.props.alt
-                    }
-                    overrideAriaHidden={true}
-                    width={backgroundImage.width}
-                    height={backgroundImage.height}
-                    preloader={apiOptions.imagePreloader}
-                    extraGraphie={{
-                        box: this.props.box,
-                        range: this.props.range,
-                        labels: this.props.labels,
-                    }}
-                    trackInteraction={this.props.trackInteraction}
-                    zoomToFullSizeOnMobile={apiOptions.isMobile}
-                    constrainHeight={apiOptions.isMobile}
-                    allowFullBleed={apiOptions.isMobile}
-                />
+                                this.props.alt
+                            }
+                            overrideAriaHidden={true}
+                            width={backgroundImage.width}
+                            height={backgroundImage.height}
+                            preloader={apiOptions.imagePreloader}
+                            extraGraphie={{
+                                box: this.props.box,
+                                range: this.props.range,
+                                labels: this.props.labels,
+                            }}
+                            trackInteraction={this.props.trackInteraction}
+                            zoomToFullSizeOnMobile={apiOptions.isMobile}
+                            constrainHeight={apiOptions.isMobile}
+                            allowFullBleed={apiOptions.isMobile}
+                            setAssetStatus={setAssetStatus}
+                        />
+                    )}
+                </AssetContext.Consumer>
             );
         }
 

package/src/widgets/label-image/strings.ts

@@ -1,3 +1,5 @@
+import * as i18n from "@khanacademy/wonder-blocks-i18n";
+
 export const strings = {
-    hideAnswersToggleLabel: "Hide answer choices",
+    hideAnswersToggleLabel: i18n._("Hide answer choices"),
 };

package/src/widgets/label-image.tsx

@@ -22,12 +22,12 @@ import mediaQueries from "../styles/media-queries";
 import AnswerChoices from "./label-image/answer-choices";
 import Marker from "./label-image/marker";
 
-import type {ChangeableProps} from "../mixins/changeable";
-import type {APIOptions, PerseusScore, WidgetExports} from "../types";
 import type {
     InteractiveMarkerType,
     InteractiveMarkerScore,
 } from "./label-image/types";
+import type {ChangeableProps} from "../mixins/changeable";
+import type {APIOptions, PerseusScore, WidgetExports} from "../types";
 
 type MarkersState = {
     markers: ReadonlyArray<InteractiveMarkerType>;

package/src/widgets/passage-ref.tsx

@@ -7,6 +7,7 @@ import * as Changeable from "../mixins/changeable";
 import {removeDenylistProps} from "../mixins/widget-prop-denylist";
 import PerseusMarkdown from "../perseus-markdown";
 
+import type {Passage, Reference} from "./passage";
 import type {PerseusPassageRefWidgetOptions} from "../perseus-types";
 import type {
     ChangeFn,
@@ -14,7 +15,6 @@ import type {
     WidgetExports,
     WidgetProps,
 } from "../types";
-import type {Passage, Reference} from "./passage";
 import type {LinterContextProps} from "@khanacademy/perseus-linter";
 
 const EN_DASH = "\u2013";

package/src/widgets/passage.tsx

@@ -12,6 +12,7 @@ import Renderer from "../renderer";
 
 import PassageMarkdown from "./passage/passage-markdown";
 
+import type {ParseState} from "./passage/passage-markdown";
 import type {SerializedHighlightSet} from "../components/highlighting/types";
 import type {ChangeableProps} from "../mixins/changeable";
 import type {PerseusPassageWidgetOptions} from "../perseus-types";
@@ -21,7 +22,6 @@ import type {
     WidgetInfo,
     WidgetProps,
 } from "../types";
-import type {ParseState} from "./passage/passage-markdown";
 import type {SingleASTNode} from "@khanacademy/simple-markdown";
 
 // A fake paragraph to measure the line height of the passage,

package/src/widgets/radio/widget.tsx

@@ -8,12 +8,12 @@ import PassageRef from "../passage-ref";
 
 import BaseRadio from "./base-radio";
 
+import type {FocusFunction, ChoiceType} from "./base-radio";
 import type {
     PerseusRadioChoice,
     PerseusRadioWidgetOptions,
 } from "../../perseus-types";
 import type {PerseusScore, WidgetProps, ChoiceState} from "../../types";
-import type {FocusFunction, ChoiceType} from "./base-radio";
 
 // RenderProps is the return type for radio.jsx#transform
 export type RenderProps = {