@khanacademy/perseus 13.1.0 → 14.0.0

package/src/perseus-types.ts

@@ -534,7 +534,7 @@ export type PerseusInteractiveGraphWidgetOptions = {
     showTooltips?: boolean;
     // The unit to show on the ruler.  e.g. "mm", "cm",  "m", "km", "in", "ft", "yd", "mi"
     rulerLabel: string;
-    // How many ticks to show on the ruler.  e.g. 1, 2, 4, 8, 10, 16
+    // How many ticks to show on the ruler.  e.g. 1, 2, 4, 8, 10, 16. Must be an integer.
     rulerTicks: number;
     // The X and Y coordinate ranges for the view of the graph.  default: [[-10, 10], [-10, 10]]
     // NOTE(kevinb): perseus_data.go defines this as Array<Array<number>>
@@ -577,6 +577,7 @@ export type PerseusGraphTypeAngle = {
     snapDegrees?: number;
     // How to match the answer. If missing, defaults to exact matching.
     match?: "congruent";
+    // must have 3 coords - ie [Coord, Coord, Coord]
     coords?: ReadonlyArray<Coord>;
 };
 
@@ -588,11 +589,13 @@ export type PerseusGraphTypeCircle = {
 
 export type PerseusGraphTypeLinear = {
     type: "linear";
+    // expects 2 coords
     coords?: ReadonlyArray<Coord>;
 } & PerseusGraphTypeCommon;
 
 export type PerseusGraphTypeLinearSystem = {
     type: "linear-system";
+    // expects 2 sets of 2 coords
     coords?: ReadonlyArray<ReadonlyArray<Coord>>;
 } & PerseusGraphTypeCommon;
 
@@ -620,6 +623,7 @@ export type PerseusGraphTypePolygon = {
 
 export type PerseusGraphTypeQuadratic = {
     type: "quadratic";
+    // expects a list of 3 coords
     coords?: ReadonlyArray<Coord>;
 } & PerseusGraphTypeCommon;
 
@@ -627,18 +631,19 @@ export type PerseusGraphTypeSegment = {
     type: "segment";
     // The number of segments if a "segment" type. default: 1.  Max: 6
     numSegments?: number;
-    // A list of segments (each segment is a list of coordinates).
-    // Length should match the `numSegments` value.
+    // Expects a list of Coord tuples. Length should match the `numSegments` value.
     coords?: ReadonlyArray<ReadonlyArray<Coord>>;
 } & PerseusGraphTypeCommon;
 
 export type PerseusGraphTypeSinusoid = {
     type: "sinusoid";
+    // Expects a list of 2 Coords
     coords?: ReadonlyArray<Coord>;
 } & PerseusGraphTypeCommon;
 
 export type PerseusGraphTypeRay = {
     type: "ray";
+    // Expects a list of 2 Coords
     coords?: ReadonlyArray<Coord>;
 } & PerseusGraphTypeCommon;
 

package/src/renderer.tsx

@@ -132,7 +132,7 @@ export type Widget = {
         path: FocusPath,
         newValue: string,
         // TODO(jeremy): I think this is actually a callback
-        focus: () => unknown,
+        focus?: () => unknown,
     ) => void;
     getUserInput?: () => WidgetUserInput | null | undefined;
     simpleValidate?: (
@@ -1701,7 +1701,7 @@ class Renderer extends React.Component<Props, State> {
     setInputValue: (
         path: FocusPath,
         newValue: string,
-        focus: () => unknown,
+        focus?: () => unknown,
     ) => void = (path, newValue, focus) => {
         // @ts-expect-error - TS2345 - Argument of type 'FocusPath' is not assignable to parameter of type 'List<any>'.
         const widgetId = _.first(path);

package/src/styles/khan-exercise.css

@@ -130,8 +130,6 @@ div.definition {
 
 #problemarea {
     font-size: 14px;
-    width: 70%;
-    min-height: 378px;
     position: relative;
     float: left;
     padding-bottom: 38px;

package/src/styles/perseus-renderer.less

@@ -96,13 +96,6 @@
 }
 
 .framework-perseus {
-    #problemarea {
-        input,
-        button {
-            .perseus-interactive;
-        }
-    }
-
     div.paragraph {
         font-family: "Lato", sans-serif;
         font-weight: 400;

package/src/widgets/__stories__/random-widgets.stories.tsx

@@ -0,0 +1,59 @@
+import Button from "@khanacademy/wonder-blocks-button";
+import * as React from "react";
+
+import {RendererWithDebugUI} from "../../../../../testing/renderer-with-debug-ui";
+import {randomCategorizerGenerator} from "../__testdata__/categorizer.testdata";
+import {randomDropdownGenerator} from "../__testdata__/dropdown.testdata";
+import {randomExplanationGenerator} from "../__testdata__/explanation.testdata";
+import {randomExpressionGenerator} from "../__testdata__/expression.testdata";
+import {randomInteractiveGraphGenerator} from "../__testdata__/interactive-graph-random.testdata";
+import {randomRadioGenerator} from "../__testdata__/radio.testdata";
+
+import type {PerseusRenderer} from "@khanacademy/perseus";
+
+export default {
+    title: "Perseus/Randomized Widgets",
+};
+
+const RandomizedWidgetContainer = (
+    randomizer: () => PerseusRenderer,
+): React.ReactElement => {
+    const [question, setQuestion] = React.useState(randomizer());
+    const randomize = () => {
+        setQuestion(randomizer());
+    };
+
+    return (
+        <div>
+            <Button size="small" style={{marginBottom: 24}} onClick={randomize}>
+                Randomize
+            </Button>
+
+            <RendererWithDebugUI question={question} />
+        </div>
+    );
+};
+
+export const RandomCategorizer = (): React.ReactElement => {
+    return RandomizedWidgetContainer(randomCategorizerGenerator);
+};
+
+export const RandomDropdown = (): React.ReactElement => {
+    return RandomizedWidgetContainer(randomDropdownGenerator);
+};
+
+export const RandomExplanation = (): React.ReactElement => {
+    return RandomizedWidgetContainer(randomExplanationGenerator);
+};
+
+export const RandomExpression = (): React.ReactElement => {
+    return RandomizedWidgetContainer(randomExpressionGenerator);
+};
+
+export const RandomInteractiveGraph = (): React.ReactElement => {
+    return RandomizedWidgetContainer(randomInteractiveGraphGenerator);
+};
+
+export const RandomRadio = (): React.ReactElement => {
+    return RandomizedWidgetContainer(randomRadioGenerator);
+};

package/src/widgets/__stories__/test-keypad-context-wrapper.tsx

@@ -17,7 +17,6 @@ const Footer = (): React.ReactElement => {
                         onElementMounted={setKeypadElement}
                         onDismiss={() => renderer && renderer.blur()}
                         style={styles.keypad}
-                        useV2Keypad={true}
                         onAnalyticsEvent={async (e) => {
                             action("onAnalyticsEvent")(e);
                         }}

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

@@ -1,3 +1,10 @@
+import {
+    arrayOfLength,
+    randomBoolean,
+    randomInteger,
+    randomSentence,
+} from "./randomizers";
+
 import type {PerseusRenderer} from "../../perseus-types";
 
 export const question1: PerseusRenderer = {
@@ -47,3 +54,36 @@ export const question1: PerseusRenderer = {
         },
     },
 };
+
+export const randomCategorizerGenerator = (): PerseusRenderer => {
+    const questionText = randomSentence(35);
+    const numItems = randomInteger(2, 7);
+    const numCategories = randomInteger(2, 6);
+
+    return {
+        content: `${questionText}\n\n\n[[\u2603 categorizer 1]]`,
+        images: {},
+        widgets: {
+            "categorizer 1": {
+                version: {major: 0, minor: 0},
+                type: "categorizer",
+                graded: randomBoolean(),
+                alignment: "default",
+                options: {
+                    items: arrayOfLength(numItems).map(() =>
+                        randomSentence(12),
+                    ),
+                    values: arrayOfLength(numItems).map(() =>
+                        randomInteger(0, numCategories - 1),
+                    ),
+                    randomizeItems: randomBoolean(),
+                    categories: arrayOfLength(numCategories).map(() =>
+                        randomSentence(7),
+                    ),
+                    highlightLint: randomBoolean(),
+                    static: randomBoolean(0.05),
+                },
+            },
+        },
+    };
+};

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

@@ -1,3 +1,10 @@
+import {
+    arrayOfLength,
+    randomBoolean,
+    randomInteger,
+    randomSentence,
+} from "./randomizers";
+
 import type {PerseusRenderer} from "../../perseus-types";
 
 export const question1: PerseusRenderer = {
@@ -31,3 +38,34 @@ export const question1: PerseusRenderer = {
         },
     },
 };
+
+export const randomDropdownGenerator = (): PerseusRenderer => {
+    const numChoices = randomInteger(2, 16);
+    const correctIndex = randomInteger(0, numChoices - 1);
+    return {
+        content: `${randomSentence(20)} [[☃ dropdown 1]] ${randomSentence(10)}`,
+        images: {},
+        widgets: {
+            "dropdown 1": {
+                type: "dropdown",
+                alignment: "default",
+                static: randomBoolean(0.05),
+                graded: randomBoolean(),
+                options: {
+                    static: randomBoolean(0.05),
+                    placeholder: randomSentence(10),
+                    choices: arrayOfLength(numChoices).map((_, i) => {
+                        return {
+                            content: randomSentence(10),
+                            correct: i === correctIndex,
+                        };
+                    }),
+                },
+                version: {
+                    major: 0,
+                    minor: 0,
+                },
+            },
+        },
+    };
+};

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

@@ -1,3 +1,5 @@
+import {randomBoolean, randomSentence} from "./randomizers";
+
 import type {PerseusRenderer} from "../../perseus-types";
 
 export const question1: PerseusRenderer = {
@@ -53,3 +55,31 @@ export const question2: PerseusRenderer = {
         },
     },
 };
+
+export const randomExplanationGenerator = (): PerseusRenderer => {
+    return {
+        content: `${randomSentence(
+            50,
+        )}\n[[\u2603 explanation 1]]\n${randomSentence(50)}`,
+        images: {},
+        widgets: {
+            "explanation 1": {
+                graded: randomBoolean(),
+                version: {
+                    major: 0,
+                    minor: 0,
+                },
+                static: randomBoolean(0.05),
+                type: "explanation",
+                options: {
+                    hidePrompt: `${randomSentence(20)}`,
+                    widgets: {},
+                    explanation: `${randomSentence(50)}`,
+                    static: randomBoolean(0.05),
+                    showPrompt: `${randomSentence(7)}`,
+                },
+                alignment: "default",
+            },
+        },
+    };
+};

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

@@ -1,7 +1,19 @@
+import {
+    arrayOfLength,
+    randomBoolean,
+    randomElement,
+    randomInteger,
+    randomLetter,
+    randomSentence,
+    randomWord,
+} from "./randomizers";
+
 import type {
     PerseusExpressionWidgetOptions,
     Version,
     PerseusItem,
+    PerseusRenderer,
+    ExpressionWidget,
 } from "../../perseus-types";
 
 const createItemJson = (
@@ -96,3 +108,73 @@ export const expressionItem3: PerseusItem = createItemJson(
         minor: 0,
     },
 );
+
+export const randomExpressionGenerator = (): PerseusRenderer => {
+    const randomButtonSet = [
+        "basic",
+        "basic+div",
+        "trig",
+        "prealgebra",
+        "logarithms",
+        "basic relations",
+        "advanced relations",
+    ]
+        .sort(() => {
+            return randomBoolean() ? 1 : -1;
+        })
+        .slice(0, randomInteger(1, 6));
+
+    const randomFunctionSet = arrayOfLength(randomInteger(0, 6)).map(
+        randomLetter,
+    );
+
+    return {
+        content: `${randomSentence(20)} [[☃ expression 1]]`,
+        images: {},
+        widgets: {
+            "expression 1": {
+                type: "expression",
+                graded: randomBoolean(),
+                version: {
+                    major: 1,
+                    minor: 0,
+                },
+                static: randomBoolean(0.05),
+                options: {
+                    answerForms: [
+                        {
+                            considered: randomElement([
+                                "correct",
+                                "wrong",
+                                "ungraded",
+                            ]),
+                            form: randomBoolean(),
+                            simplify: randomBoolean(),
+                            value: randomWord(),
+                        },
+                        {
+                            considered: randomElement([
+                                "correct",
+                                "wrong",
+                                "ungraded",
+                            ]),
+                            form: randomBoolean(),
+                            simplify: randomBoolean(),
+                            value: randomWord(),
+                        },
+                    ],
+                    times: randomBoolean(),
+                    buttonSets: randomButtonSet,
+                    functions: randomFunctionSet,
+                    buttonsVisible: randomElement([
+                        "always",
+                        "never",
+                        "focused",
+                        undefined,
+                    ]),
+                    alignment: "default",
+                },
+            } as ExpressionWidget,
+        },
+    };
+};

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",
+            },
+        },
+    };
+};