@khanacademy/perseus 19.1.5 → 19.1.7

package/src/widgets/__stories__/radio.stories.tsx

@@ -1,86 +0,0 @@
-import * as React from "react";
-
-import {RendererWithDebugUI} from "../../../../../testing/renderer-with-debug-ui";
-import {
-    questionWithPassage,
-    multiChoiceQuestion,
-    multiChoiceQuestionSimple,
-} from "../__testdata__/radio.testdata";
-
-import type {PerseusRenderer} from "../../perseus-types";
-import type {APIOptions} from "../../types";
-
-type StoryArgs = {
-    // Radio Options
-    static: boolean;
-    // API Options
-    crossOutEnabled: boolean;
-    // Renderer Options
-    reviewMode: boolean;
-};
-
-type Story = {
-    title: string;
-    args: StoryArgs;
-};
-
-export default {
-    title: "Perseus/Widgets/Radio",
-    args: {
-        static: false,
-        crossOutEnabled: false,
-        reviewMode: false,
-    },
-} as Story;
-
-const applyStoryArgs = (
-    question: PerseusRenderer,
-    args: StoryArgs,
-): PerseusRenderer => {
-    const q = {
-        ...question,
-        widgets: {},
-    } as const;
-
-    for (const [widgetId, widget] of Object.entries(question.widgets)) {
-        q.widgets[widgetId] = {...widget, static: args.static};
-    }
-
-    return q;
-};
-
-const buildApiOptions = (args: StoryArgs): APIOptions => {
-    return {
-        crossOutEnabled: args.crossOutEnabled,
-    };
-};
-
-export const SingleSelect = (args: StoryArgs): React.ReactElement => {
-    return (
-        <RendererWithDebugUI
-            question={applyStoryArgs(questionWithPassage, args)}
-            apiOptions={buildApiOptions(args)}
-            reviewMode={args.reviewMode}
-        />
-    );
-};
-
-export const MultiSelectSimple = (args: StoryArgs): React.ReactElement => {
-    return (
-        <RendererWithDebugUI
-            question={applyStoryArgs(multiChoiceQuestionSimple, args)}
-            apiOptions={buildApiOptions(args)}
-            reviewMode={args.reviewMode}
-        />
-    );
-};
-
-export const MultiSelect = (args: StoryArgs): React.ReactElement => {
-    return (
-        <RendererWithDebugUI
-            question={applyStoryArgs(multiChoiceQuestion, args)}
-            apiOptions={buildApiOptions(args)}
-            reviewMode={args.reviewMode}
-        />
-    );
-};

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

@@ -1,59 +0,0 @@
-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__/sorter.stories.tsx

@@ -1,14 +0,0 @@
-import * as React from "react";
-
-import {RendererWithDebugUI} from "../../../../../testing/renderer-with-debug-ui";
-import {question1} from "../__testdata__/sorter.testdata";
-
-export default {
-    title: "Perseus/Widgets/Sorter",
-};
-
-type StoryArgs = Record<any, any>;
-
-export const Question1 = (args: StoryArgs): React.ReactElement => {
-    return <RendererWithDebugUI question={question1} />;
-};

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

@@ -1,66 +0,0 @@
-import {
-    KeypadContext,
-    StatefulKeypadContextProvider,
-    MobileKeypad,
-} from "@khanacademy/math-input";
-import {View} from "@khanacademy/wonder-blocks-core";
-import {action} from "@storybook/addon-actions";
-import {StyleSheet} from "aphrodite";
-import * as React from "react";
-
-const Footer = (): React.ReactElement => {
-    return (
-        <View style={styles.keypadContainer}>
-            <KeypadContext.Consumer>
-                {({setKeypadElement, renderer}) => (
-                    <MobileKeypad
-                        onElementMounted={setKeypadElement}
-                        onDismiss={() => renderer && renderer.blur()}
-                        style={styles.keypad}
-                        onAnalyticsEvent={async (e) => {
-                            action("onAnalyticsEvent")(e);
-                        }}
-                    />
-                )}
-            </KeypadContext.Consumer>
-        </View>
-    );
-};
-
-type Props = {
-    children: React.ReactElement;
-};
-
-const TestKeypadContextWrapper = (props: Props): React.ReactElement => {
-    return (
-        <StatefulKeypadContextProvider>
-            {props.children}
-            <Footer />
-        </StatefulKeypadContextProvider>
-    );
-};
-
-export default TestKeypadContextWrapper;
-
-const styles = StyleSheet.create({
-    keypad: {
-        position: "absolute",
-        // The keypad itself needs to respond to events even though
-        // we've set its container to pointer-events: none;
-        pointerEvents: "all",
-    },
-    keypadContainer: {
-        position: "absolute",
-        width: "100%",
-        bottom: 0,
-        // Hide the overflow of this container so when the keypad is
-        // dismissed, it doesn't overlap the toolbar.
-        overflow: "hidden",
-        // Prevent container from swallowing events that the exercise
-        // below it needs to respond to.
-        pointerEvents: "none",
-        // NOTE: in webapp we normally get this from problemProgress
-        // from the exercise state store.
-        height: 240,
-    },
-});

package/src/widgets/__stories__/unit.stories.tsx

@@ -1,28 +0,0 @@
-import * as React from "react";
-
-import {ApiOptions} from "../../perseus-api";
-import {OldUnitInput} from "../unit";
-
-type StoryArgs = Record<any, any>;
-
-type Story = {
-    title: string;
-};
-
-export default {
-    title: "Perseus/Widgets/Unit",
-} as Story;
-
-export const NonStaticRender = (args: StoryArgs): React.ReactElement => {
-    return (
-        <OldUnitInput
-            apiOptions={{
-                ...ApiOptions.defaults,
-            }}
-            value="2 tbsp"
-            onFocus={() => {}}
-            onBlur={() => {}}
-            onChange={({value}) => {}}
-        />
-    );
-};

package/src/widgets/__stories__/video-transcript-link.stories.tsx

@@ -1,23 +0,0 @@
-import * as React from "react";
-
-import VideoTranscriptLink from "../video-transcript-link";
-
-type StoryArgs = Record<any, any>;
-
-type Story = {
-    title: string;
-};
-
-export default {
-    title: "Perseus/Components/Video Transcript Link",
-} as Story;
-
-export const YoutubeVideoLink = (args: StoryArgs): React.ReactElement => {
-    return (
-        <VideoTranscriptLink location="https://www.youtube.com/watch?v=YoutubeId" />
-    );
-};
-
-export const SlugVideoLink = (args: StoryArgs): React.ReactElement => {
-    return <VideoTranscriptLink location="slug-video-id" />;
-};

package/src/widgets/__stories__/video.stories.tsx

@@ -1,22 +0,0 @@
-import * as React from "react";
-
-import {RendererWithDebugUI} from "../../../../../testing/renderer-with-debug-ui";
-import {question1, question2, question3} from "../__testdata__/video.testdata";
-
-export default {
-    title: "Perseus/Widgets/Video",
-};
-
-type StoryArgs = Record<any, any>;
-
-export const Question1 = (args: StoryArgs): React.ReactElement => {
-    return <RendererWithDebugUI question={question1} />;
-};
-
-export const Question2 = (args: StoryArgs): React.ReactElement => {
-    return <RendererWithDebugUI question={question2} />;
-};
-
-export const Question3 = (args: StoryArgs): React.ReactElement => {
-    return <RendererWithDebugUI question={question3} />;
-};

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

@@ -1,21 +0,0 @@
-import type {ChoiceType} from "../radio/base-radio";
-
-export function generateChoice(options: Partial<ChoiceType>): ChoiceType {
-    const base = {
-        checked: false,
-        crossedOut: false,
-        content: "",
-        rationale: "",
-        hasRationale: false,
-        showRationale: false,
-        showCorrectness: false,
-        correct: false,
-        isNoneOfTheAbove: false,
-        highlighted: false,
-        previouslyAnswered: false,
-        revealNoneOfTheAbove: false,
-        disabled: false,
-    } as const;
-
-    return {...base, ...options};
-}

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

@@ -1,89 +0,0 @@
-import {
-    arrayOfLength,
-    randomBoolean,
-    randomInteger,
-    randomSentence,
-} from "./randomizers";
-
-import type {PerseusRenderer} from "../../perseus-types";
-
-export const question1: PerseusRenderer = {
-    content:
-        "**Classify each graph according to the kind of relationship it suggests.**\n\n$\\qquad\\qquad\\quad\\text{Graph 1}\\qquad\\qquad\\quad\\qquad\\qquad\\quad\\text{Graph 2}$\n\n\n\n[[\u2603 categorizer 1]]\n\n**Graph 1.**\n\n![](https://ka-perseus-graphie.s3.amazonaws.com/049c091ed0978112aba3a36b0591d992baf7b1ac.png)\n\n**Graph 2.**\n\n![](https://ka-perseus-graphie.s3.amazonaws.com/40df186f39fb6d65de6bee0d8b681502d10cb37a.png)  \n",
-    images: {
-        "https://ka-perseus-graphie.s3.amazonaws.com/40df186f39fb6d65de6bee0d8b681502d10cb37a.png":
-            {
-                width: 244,
-                height: 223,
-            },
-        "https://ka-perseus-graphie.s3.amazonaws.com/1ead1b334f82ea0eb1bcbd5a56943d8c738ba3de.png":
-            {
-                width: 219,
-                height: 215,
-            },
-        "https://ka-perseus-graphie.s3.amazonaws.com/b420aeaf8bad76b1cdb70a950947df2e4cfbcf0a.png":
-            {
-                width: 238,
-                height: 223,
-            },
-        "https://ka-perseus-graphie.s3.amazonaws.com/049c091ed0978112aba3a36b0591d992baf7b1ac.png":
-            {
-                width: 220,
-                height: 223,
-            },
-    },
-    widgets: {
-        "categorizer 1": {
-            version: {major: 0, minor: 0},
-            type: "categorizer",
-            graded: true,
-            alignment: "default",
-            options: {
-                items: ["Graph $1$", "Graph $2$"],
-                values: [1, 3],
-                randomizeItems: false,
-                categories: [
-                    "No relationship",
-                    "Positive linear relationship",
-                    "Negative linear relationship",
-                    "Nonlinear relationship",
-                ],
-                highlightLint: false,
-                static: false,
-            },
-        },
-    },
-};
-
-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__/cs-program.testdata.ts

@@ -1,27 +0,0 @@
-import type {PerseusRenderer} from "../../perseus-types";
-
-export const question1: PerseusRenderer = {
-    content: "[[\u2603 cs-program 1]]\n\n",
-    images: {},
-    widgets: {
-        "cs-program 1": {
-            graded: true,
-            version: {major: 0, minor: 0},
-            static: false,
-            type: "cs-program",
-            options: {
-                settings: [
-                    {name: "", value: ""},
-                    {name: "", value: ""},
-                ],
-                height: 540,
-                width: 640,
-                programID: "6293105639817216",
-                static: false,
-                showButtons: false,
-                showEditor: false,
-            },
-            alignment: "block",
-        },
-    },
-};

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

@@ -1,71 +0,0 @@
-import {
-    arrayOfLength,
-    randomBoolean,
-    randomInteger,
-    randomSentence,
-} from "./randomizers";
-
-import type {PerseusRenderer} from "../../perseus-types";
-
-export const question1: PerseusRenderer = {
-    content:
-        "The total number of boxes the forklift can carry is [[☃ dropdown 1]] $60$.",
-    images: {},
-    widgets: {
-        "dropdown 1": {
-            type: "dropdown",
-            alignment: "default",
-            static: false,
-            graded: true,
-            options: {
-                static: false,
-                placeholder: "greater/less than or equal to",
-                choices: [
-                    {
-                        content: "greater than or equal to",
-                        correct: false,
-                    },
-                    {
-                        content: "less than or equal to",
-                        correct: true,
-                    },
-                ],
-            },
-            version: {
-                major: 0,
-                minor: 0,
-            },
-        },
-    },
-};
-
-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,85 +0,0 @@
-import {randomBoolean, randomSentence} from "./randomizers";
-
-import type {PerseusRenderer} from "../../perseus-types";
-
-export const question1: PerseusRenderer = {
-    content:
-        "Here's the explanation\n[[\u2603 explanation 1]]\nDid you get that?",
-    images: {},
-    widgets: {
-        "explanation 1": {
-            graded: true,
-            version: {
-                major: 0,
-                minor: 0,
-            },
-            // NOTE: The explanation widget doesn't consume this directly,
-            // instead, Perseus renders an overlay <div /> over top of the
-            // widget that intercepts interactions to it.
-            static: false,
-            type: "explanation",
-            options: {
-                hidePrompt: "Hide explanation!",
-                widgets: {},
-                explanation: "This is an explanation",
-                static: false,
-                showPrompt: "Explanation",
-            },
-            alignment: "default",
-        },
-    },
-};
-
-export const question2: PerseusRenderer = {
-    content:
-        "Here's the explanation\n[[\u2603 explanation 1]]\nDid you get that?",
-    images: {},
-    widgets: {
-        "explanation 1": {
-            graded: true,
-            version: {
-                major: 0,
-                minor: 0,
-            },
-            // Speculative generality... is this used in practice?
-            static: true,
-            type: "explanation",
-            options: {
-                hidePrompt: "Hide explanation!",
-                widgets: {},
-                explanation: "This is an explanation",
-                static: true,
-                showPrompt: "Explanation",
-            },
-            alignment: "default",
-        },
-    },
-};
-
-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",
-            },
-        },
-    };
-};