@khanacademy/perseus 16.0.0 → 17.1.0

package/src/widgets/__testdata__/label-image.testdata.ts

@@ -1,6 +1,6 @@
 import type {PerseusRenderer} from "../../perseus-types";
 
-export const question: PerseusRenderer = {
+export const textQuestion: PerseusRenderer = {
     content:
         "Carol created a chart and a bar graph to show how many of each type of vehicle were in her supermarket parking lot.\n\nVehicle Type | Number in the parking lot\n:- | :-: \nTrucks| $25$ \nVans | $5$ \nCars| $40$ \nSUVs | $10$ \n\n**Label each bar on the bar graph.**\n\n[[☃ label-image 1]]\n\n",
     images: {
@@ -61,3 +61,120 @@ export const question: PerseusRenderer = {
         },
     },
 };
+
+export const mathQuestion: PerseusRenderer = {
+    content:
+        "Carol created a chart and a bar graph to show how many of each type of vehicle were in her supermarket parking lot.\n\nVehicle Type | Number in the parking lot\n:- | :-: \nTrucks| $25$ \nVans | $5$ \nCars| $40$ \nSUVs | $10$ \n\n**Label each bar on the bar graph.**\n\n[[☃ label-image 1]]\n\n",
+    images: {
+        "web+graphie://ka-perseus-graphie.s3.amazonaws.com/1e28332fd2321975639ab50c9ce442e568c18421":
+            {
+                width: 341,
+                height: 310,
+            },
+    },
+    widgets: {
+        "label-image 1": {
+            type: "label-image",
+            alignment: "default",
+            static: false,
+            graded: true,
+            options: {
+                static: false,
+                choices: [
+                    "$\\dfrac{1}{2}$",
+                    "$\\dfrac{3}{4}$",
+                    "$\\dfrac{5}{6}$",
+                    "$\\dfrac{7}{8}$",
+                ],
+                imageAlt:
+                    "A bar graph with four bar lines that shows the horizontal axis labeled Number in the parking lot and the vertical axis labeled Vehicle Type. The horizontal axis is labeled, from left to right: 0, 10, 20, 30, 40, and 50. The vertical axis has, from the bottom to the top, four unlabeled bar lines as follows: the first unlabeled bar line extends to the middle of 0 and 10, the second unlabeled bar line extends to 40, the third unlabeled bar line extends to the middle of 20 and 30, and fourth unlabeled bar line extends to 10.",
+                imageUrl:
+                    "web+graphie://ka-perseus-graphie.s3.amazonaws.com/56c60c72e96cd353e4a8b5434506cd3a21e717af",
+                imageWidth: 415,
+                imageHeight: 314,
+                markers: [
+                    {
+                        answers: ["$\\dfrac{1}{2}$"],
+                        label: "The fourth unlabeled bar line.",
+                        x: 25,
+                        y: 17.7,
+                    },
+                    {
+                        answers: ["$\\dfrac{3}{4}$"],
+                        label: "The third unlabeled bar line.",
+                        x: 25,
+                        y: 35.3,
+                    },
+                    {
+                        answers: ["$\\dfrac{5}{6}$"],
+                        label: "The second unlabeled bar line.",
+                        x: 25,
+                        y: 53,
+                    },
+                    {
+                        answers: ["$\\dfrac{7}{8}$"],
+                        label: "The first unlabeled bar line.",
+                        x: 25,
+                        y: 70.3,
+                    },
+                ],
+                multipleAnswers: false,
+                hideChoicesFromInstructions: true,
+            },
+            version: {
+                major: 0,
+                minor: 0,
+            },
+        },
+    },
+};
+
+export const numberline: PerseusRenderer = {
+    content:
+        "**Label each point on the number line with the correct value.**\n\n[[☃ label-image 1]]",
+    images: {},
+    widgets: {
+        "label-image 1": {
+            type: "label-image",
+            alignment: "default",
+            static: false,
+            graded: true,
+            options: {
+                static: false,
+                choices: ["$-\\dfrac{7}{3}$", "$-2\\dfrac{5}{8}$", "$-2.9$"],
+                imageAlt:
+                    "A number line from negative 6 halves to negative 3 halves, labeled in increments of 1 half. There are three points on the line, labeled from left to right with a, b, and c.",
+                imageUrl:
+                    "web+graphie://ka-perseus-graphie.s3.amazonaws.com/05faa925d02e5effd3069bf24da4777e3ae1a28b",
+                imageWidth: 360,
+                imageHeight: 160,
+                markers: [
+                    {
+                        answers: ["$-2.9$"],
+                        label: "Point a is the leftmost of two points between negative 6 halves and negative 5 halves.",
+                        x: 14.25,
+                        y: 50,
+                    },
+                    {
+                        answers: ["$-2\\dfrac{5}{8}$"],
+                        label: "Point b is the rightmost of two points between negative 6 halves and negative 5 halves.",
+                        x: 29.5,
+                        y: 50,
+                    },
+                    {
+                        answers: ["$-\\dfrac{7}{3}$"],
+                        label: "Point c is between negative 5 halves and negative 4 halves.",
+                        x: 45.5,
+                        y: 50,
+                    },
+                ],
+                multipleAnswers: false,
+                hideChoicesFromInstructions: false,
+            },
+            version: {
+                major: 0,
+                minor: 0,
+            },
+        },
+    },
+};

package/src/widgets/__tests__/__snapshots__/dropdown.test.ts.snap

@@ -42,7 +42,7 @@ exports[`Dropdown widget should snapshot when opened: dropdown open 1`] = `
                 </span>
                 <span
                   aria-hidden="true"
-                  class="svg_aeiopc-o_O-caret_ntkmq-o_O-inlineStyles_13xtep5"
+                  class="svg_1q6jc65-o_O-icon_eocf2p-o_O-caret_ntkmq-o_O-inlineStyles_u7ovp6"
                 />
               </button>
             </div>
@@ -107,7 +107,7 @@ exports[`Dropdown widget should snapshot: initial render 1`] = `
                 </span>
                 <span
                   aria-hidden="true"
-                  class="svg_aeiopc-o_O-caret_ntkmq-o_O-inlineStyles_13xtep5"
+                  class="svg_1q6jc65-o_O-icon_eocf2p-o_O-caret_ntkmq-o_O-inlineStyles_u7ovp6"
                 />
               </button>
             </div>

package/src/widgets/label-image/__stories__/answer-pill.stories.tsx

@@ -0,0 +1,62 @@
+import * as React from "react";
+
+import {AnswerPill} from "../answer-pill";
+
+import type {Meta} from "@storybook/react";
+
+const story: Meta<React.ComponentProps<typeof AnswerPill>> = {
+    title: "Perseus/Widgets/Label Image/Answer Pill",
+    component: AnswerPill,
+    render: (args) => <AnswerPill {...args} />,
+    argTypes: {
+        showCorrectness: {
+            options: ["not answered", "correct", "incorrect"],
+            control: {
+                type: "radio",
+            },
+        },
+    },
+};
+export default story;
+
+export const SingleAnswer = {
+    args: {
+        id: "1",
+        selectedAnswers: ["Answer Pill!"],
+        markerRef: null,
+        side: "top",
+        onClick: () => {},
+    },
+};
+
+export const MultipleAnswers = {
+    args: {
+        id: "1",
+        selectedAnswers: ["Answer 1", "Answer 2"],
+        markerRef: null,
+        side: "top",
+        onClick: () => {},
+    },
+};
+
+export const Correct = {
+    args: {
+        id: "1",
+        selectedAnswers: ["Right Answer!"],
+        showCorrectness: "correct",
+        markerRef: null,
+        side: "top",
+        onClick: () => {},
+    },
+};
+
+export const Incorrect = {
+    args: {
+        id: "1",
+        selectedAnswers: ["Wrong Answer!"],
+        showCorrectness: "incorrect",
+        markerRef: null,
+        side: "top",
+        onClick: () => {},
+    },
+};

package/src/widgets/label-image/__tests__/answer-pill.test.tsx

@@ -0,0 +1,83 @@
+import {RenderStateRoot} from "@khanacademy/wonder-blocks-core";
+import {render} from "@testing-library/react";
+import "@testing-library/jest-dom";
+import * as React from "react";
+
+import {testDependencies} from "../../../../../../testing/test-dependencies";
+import * as Dependencies from "../../../dependencies";
+import {AnswerPill} from "../answer-pill";
+
+describe("AnswerPill", () => {
+    beforeEach(() => {
+        jest.spyOn(Dependencies, "getDependencies").mockReturnValue(
+            testDependencies,
+        );
+    });
+
+    it("should display the correct answer string when there is only one selected answer", () => {
+        const selectedAnswers = ["Answer 1"];
+        const screen = render(
+            <AnswerPill
+                selectedAnswers={selectedAnswers}
+                side={"top"}
+                onClick={() => {}}
+            />,
+            {wrapper: RenderStateRoot},
+        );
+        expect(screen.getByText("Answer 1")).toBeInTheDocument();
+    });
+
+    it("should display the correct answer string when there are multiple selected answers", () => {
+        const selectedAnswers = ["Answer 1", "Answer 2", "Answer 3"];
+        const screen = render(
+            <AnswerPill
+                selectedAnswers={selectedAnswers}
+                side={"top"}
+                onClick={() => {}}
+            />,
+            {wrapper: RenderStateRoot},
+        );
+        expect(screen.getByText("3 answers")).toBeInTheDocument();
+    });
+
+    it("should be interactable when no right answer has been chosen", () => {
+        // arrange
+        const clickSpy = jest.fn();
+        const selectedAnswers = ["Answer 1", "Answer 2", "Answer 3"];
+        const screen = render(
+            <AnswerPill
+                selectedAnswers={selectedAnswers}
+                side={"top"}
+                onClick={clickSpy}
+            />,
+            {wrapper: RenderStateRoot},
+        );
+
+        // act
+        screen.getByText("3 answers").click();
+
+        // assert
+        expect(clickSpy).toHaveBeenCalled();
+    });
+
+    it("should not be interactable when a correct answer has been chosen", () => {
+        // arrange
+        const clickSpy = jest.fn();
+        const selectedAnswers = ["Answer 1", "Answer 2", "Answer 3"];
+        const screen = render(
+            <AnswerPill
+                selectedAnswers={selectedAnswers}
+                side={"top"}
+                onClick={clickSpy}
+                showCorrectness="correct"
+            />,
+            {wrapper: RenderStateRoot},
+        );
+
+        // act
+        screen.getByText("3 answers").click();
+
+        // assert
+        expect(clickSpy).not.toHaveBeenCalled();
+    });
+});

package/src/widgets/label-image/__tests__/hide-answers-toggle.test.tsx

@@ -0,0 +1,39 @@
+import {RenderStateRoot} from "@khanacademy/wonder-blocks-core";
+import {render} from "@testing-library/react";
+import "@testing-library/jest-dom";
+import userEvent from "@testing-library/user-event";
+import * as React from "react";
+
+import {HideAnswersToggle} from "../hide-answers-toggle";
+import {strings} from "../strings";
+
+const labelText = strings.hideAnswersToggleLabel;
+
+describe("HideAnswersToggle", () => {
+    it("should render the toggle switch", () => {
+        const screen = render(
+            <HideAnswersToggle areAnswersHidden={false} onChange={undefined} />,
+            {
+                wrapper: RenderStateRoot,
+            },
+        );
+        const toggleSwitch = screen.getByLabelText(
+            labelText,
+        ) as HTMLInputElement;
+        expect(toggleSwitch).toBeInTheDocument();
+        expect(toggleSwitch.checked).toBe(false);
+    });
+
+    it("should call the onChange callback when the toggle switch is clicked", async () => {
+        const onChange = jest.fn((checked) => expect(checked).toBe(true));
+        const screen = render(
+            <HideAnswersToggle areAnswersHidden={false} onChange={onChange} />,
+            {wrapper: RenderStateRoot},
+        );
+        const toggleSwitchBefore = screen.getByLabelText(
+            labelText,
+        ) as HTMLInputElement;
+        userEvent.click(toggleSwitchBefore);
+        expect(onChange).toHaveBeenCalledTimes(1);
+    });
+});

package/src/widgets/label-image/answer-choices.tsx

@@ -236,7 +236,13 @@ export default class AnswerChoices extends React.Component<
         const {groupName} = this.state;
 
         return (
-            <fieldset>
+            <fieldset
+                style={{
+                    border: "none",
+                    margin: 0,
+                    padding: 0,
+                }}
+            >
                 {choices.map((choice, index) => (
                     <AnswerChoice
                         {...choice}

package/src/widgets/label-image/answer-pill.tsx

@@ -0,0 +1,89 @@
+import Color from "@khanacademy/wonder-blocks-color";
+import {useUniqueIdWithMock} from "@khanacademy/wonder-blocks-core";
+import * as i18n from "@khanacademy/wonder-blocks-i18n";
+import Pill from "@khanacademy/wonder-blocks-pill";
+import {StyleSheet, type CSSProperties} from "aphrodite";
+import * as React from "react";
+import {Popper} from "react-popper";
+
+import Renderer from "../../renderer";
+
+export const AnswerPill = (props: {
+    selectedAnswers: readonly string[];
+    showCorrectness?: "correct" | "incorrect";
+    markerRef?: HTMLElement;
+    side: "top" | "bottom" | "left" | "right";
+    onClick: () => void;
+    style?: CSSProperties;
+}) => {
+    const {selectedAnswers, showCorrectness, markerRef, side, onClick, style} =
+        props;
+
+    const idFactory = useUniqueIdWithMock();
+
+    const answerString =
+        selectedAnswers.length > 1
+            ? // always need `ngettext` for variable numbers even if we don't use the singular, see https://khanacademy.slack.com/archives/C0918TZ5G/p1700163024293079
+              i18n.ngettext(
+                  "%(num)s answer",
+                  "%(num)s answers",
+                  selectedAnswers.length,
+              )
+            : selectedAnswers[0];
+
+    // It should no longer be possible to interact with an answer after it
+    // has been labeled (answered) correctly.
+    const correct = showCorrectness === "correct";
+    const incorrect = showCorrectness === "incorrect";
+
+    const bringToFront = {
+        boxShadow: `0 8px 8px ${Color.offBlack64}`,
+        zIndex: 1000,
+    };
+
+    return (
+        <Popper
+            placement={side}
+            referenceElement={markerRef}
+            modifiers={[
+                {
+                    name: "preventOverflow",
+                    options: {
+                        rootBoundary: "viewport",
+                    },
+                },
+            ]}
+        >
+            {({ref, style: popperStyle}) => (
+                <Pill
+                    size="large"
+                    kind="accent"
+                    id={idFactory.get("perseus-label-image-widget-answer-pill")}
+                    onClick={correct ? undefined : onClick}
+                    ref={ref}
+                    style={[
+                        style,
+                        popperStyle,
+                        {
+                            ":hover": bringToFront,
+                            ":focus": bringToFront,
+                        },
+                        correct && styles.correct,
+                        incorrect && styles.incorrect,
+                    ]}
+                >
+                    <Renderer content={answerString} />
+                </Pill>
+            )}
+        </Popper>
+    );
+};
+
+const styles = StyleSheet.create({
+    correct: {
+        backgroundColor: "#00880b", // WB green darkened by 18%
+    },
+    incorrect: {
+        backgroundColor: Color.offBlack64,
+    },
+});

package/src/widgets/label-image/hide-answers-toggle.tsx

@@ -0,0 +1,40 @@
+import {View, useUniqueIdWithMock} from "@khanacademy/wonder-blocks-core";
+import Switch from "@khanacademy/wonder-blocks-switch";
+import {LabelMedium} from "@khanacademy/wonder-blocks-typography";
+import {StyleSheet} from "aphrodite";
+import * as React from "react";
+
+import {strings} from "./strings";
+
+export const HideAnswersToggle = (props: {
+    areAnswersHidden: boolean;
+    onChange: React.ComponentPropsWithoutRef<typeof Switch>["onChange"];
+}) => {
+    const idFactory = useUniqueIdWithMock();
+    const switchId = idFactory.get("hide-answers-toggle");
+    const labelId = idFactory.get("hide-answers-label");
+    return (
+        <View style={styles.switchWrapper}>
+            <Switch
+                id={switchId}
+                checked={props.areAnswersHidden}
+                onChange={props.onChange}
+                aria-labelledby={labelId}
+            />
+            <LabelMedium id={labelId} htmlFor={switchId}>
+                {strings.hideAnswersToggleLabel}
+            </LabelMedium>
+        </View>
+    );
+};
+
+const styles = StyleSheet.create({
+    switchWrapper: {
+        display: "flex",
+        flexDirection: "row",
+        flexWrap: "wrap-reverse",
+        alignItems: "center",
+        gap: "0.5em",
+        marginTop: "1em",
+    },
+});