@khanacademy/perseus 1.2.0 → 1.3.1

package/src/widgets/__tests__/passage_test.jsx

@@ -8,15 +8,12 @@ import {testDependencies} from "../../../../../testing/test-dependencies.js";
 import * as Dependencies from "../../dependencies.js";
 import {ApiOptions} from "../../perseus-api.jsx";
 import {question1, question2} from "../__testdata__/passage_testdata.js";
-import PassageWidgetExport from "../passage.jsx";
-import * as getLineHeightModule from "../passage/get-line-height-for-node.js";
+import PassageWidgetExport, {LineHeightMeasurer} from "../passage.jsx";
 
 import {renderQuestion} from "./renderQuestion.jsx";
 
 import type {APIOptions} from "../../types.js";
 
-jest.mock("../passage/get-line-height-for-node.js");
-
 function renderPassage(overwrite) {
     const widgetPropsBase = {
         footnotes: "",
@@ -53,10 +50,6 @@ function renderPassage(overwrite) {
 
 describe("passage widget", () => {
     beforeEach(() => {
-        jest.spyOn(getLineHeightModule, "getLineHeightForNode").mockReturnValue(
-            21,
-        );
-
         // passage widget uses the height of the entire rendered passage along
         // with the above line height calculations to determine the number of
         // lines rendered (as a way to provide line numbering).
@@ -66,6 +59,11 @@ describe("passage widget", () => {
             "get",
         ).mockReturnValue(200.0);
 
+        jest.spyOn(
+            LineHeightMeasurer.prototype,
+            "measureLineHeight",
+        ).mockReturnValue(20);
+
         jest.spyOn(Dependencies, "getDependencies").mockReturnValue(
             testDependencies,
         );

package/src/widgets/__tests__/radio_test.jsx

@@ -800,7 +800,9 @@ describe("multi-choice question", () => {
 
         // Act
         const option = screen.getAllByRole("checkbox");
-        userEvent.click(option[3]); // incorrect
+        userEvent.click(option[0]); // correct
+        userEvent.click(option[1]); // correct
+        userEvent.click(option[2]); // incorrect
 
         // Assert
         expect(renderer).toHaveInvalidInput(

package/src/widgets/passage.jsx

@@ -1,5 +1,4 @@
 // @flow
-
 import {linterContextDefault} from "@khanacademy/perseus-linter";
 import * as i18n from "@khanacademy/wonder-blocks-i18n";
 import {StyleSheet, css} from "aphrodite";
@@ -12,7 +11,6 @@ import HighlightableContent from "../components/highlighting/highlightable-conte
 import {getDependencies} from "../dependencies.js";
 import Renderer from "../renderer.jsx";
 
-import {getLineHeightForNode} from "./passage/get-line-height-for-node.js";
 import PassageMarkdown from "./passage/passage-markdown.jsx";
 
 import type {SerializedHighlightSet} from "../components/highlighting/types.js";
@@ -27,51 +25,24 @@ import type {
 import type {ParseState} from "./passage/passage-markdown.jsx";
 import type {SingleASTNode} from "@khanacademy/simple-markdown";
 
-// A fake paragraph to measure the line height of the passage. In CSS we always
-// set the line height to 22 pixels, but when using the browser zoom feature,
-// the line height often ends up being a fractional number of pixels close to
-// 22 pixels.
-class LineHeightMeasurer extends React.Component<{...}> {
-    _cachedLineHeight: number;
-    body: ?HTMLDivElement;
-    end: ?HTMLDivElement;
+// A fake paragraph to measure the line height of the passage,
+// so we can adapt to browser zoom
+export class LineHeightMeasurer extends React.Component<{...}> {
+    _line: ?HTMLDivElement;
 
     measureLineHeight(): number {
-        if (typeof this._cachedLineHeight !== "number") {
-            this.forceMeasureLineHeight();
-        }
-
-        return this._cachedLineHeight;
-    }
-
-    forceMeasureLineHeight() {
-        const body = this.body;
-        const end = this.end;
-
-        if (!body || !end) {
-            return;
+        if (!this._line) {
+            return 0;
         }
 
-        // Add some text which magically fills an entire line.
-        body.textContent = " \u0080";
-
-        // Now, the line height is the difference between the top of the
-        // second line and the top of the first line.
-        this._cachedLineHeight = getLineHeightForNode(body, end);
-
-        // Clear out the first line so it doesn't overlap the passage.
-        body.textContent = "";
+        return this._line.clientHeight;
     }
 
     render(): React.Node {
         return (
-            <div className={css(styles.measurer)}>
-                <div>
-                    <div
-                        ref={(ref) => (this.body = ref)}
-                        className="paragraph"
-                    />
-                    <div ref={(ref) => (this.end = ref)} />
+            <div className={css(styles.measurer)} aria-hidden="true">
+                <div ref={(ref) => (this._line = ref)} className="paragraph">
+                    Line Height Measurement
                 </div>
             </div>
         );
@@ -81,9 +52,9 @@ class LineHeightMeasurer extends React.Component<{...}> {
 const styles = StyleSheet.create({
     measurer: {
         position: "absolute",
-        width: "100%",
         top: 0,
         left: 0,
+        visibility: "hidden",
         // keep from blocking text selection
         zIndex: -1,
     },
@@ -168,7 +139,7 @@ class Passage extends React.Component<PassageProps, PassageState> {
             // height changes we expect are subpixel changes when the user
             // zooms in/out, and the only way to listen for zoom events is to
             // listen for resize events.
-            this._lineHeightMeasurerRef?.forceMeasureLineHeight();
+            this._lineHeightMeasurerRef?.measureLineHeight();
             this._updateState();
         }, 500);
         window.addEventListener("resize", this._onResize);

package/src/widgets/radio/__stories__/sat-styles.stories.jsx

@@ -0,0 +1,191 @@
+// @flow
+import {action} from "@storybook/addon-actions";
+import * as React from "react";
+
+import {generateChoice} from "../../__testdata__/base-radio_testdata.js";
+import BaseRadio from "../base-radio.jsx";
+
+type StoryArgs = {|
+    multipleSelect: boolean,
+    editMode: boolean,
+    countChoices: boolean,
+|};
+
+type Story = {|
+    title: string,
+    args: StoryArgs,
+|};
+
+export default ({
+    title: "Perseus/Widgets/Radio/SAT Base Radio",
+    args: {
+        multipleSelect: false,
+        editMode: false,
+        countChoices: false,
+    },
+}: Story);
+
+const defaultProps = {
+    apiOptions: {
+        satStyling: true,
+    },
+    choices: [
+        generateChoice({
+            content: "Content 1",
+        }),
+        generateChoice({
+            content: "Content 2",
+        }),
+        generateChoice({
+            content: "Content 3",
+            correct: true,
+        }),
+        generateChoice({
+            isNoneOfTheAbove: true,
+        }),
+    ],
+    deselectEnabled: false,
+    editMode: false,
+    labelWrap: false,
+    countChoices: false,
+    numCorrect: 1,
+    multipleSelect: false,
+
+    // A callback indicating that this choice has changed. Its argument is
+    // an object with two keys: `checked` and `crossedOut`. Each contains
+    // an array of boolean values, specifying the new checked and
+    // crossed-out value of each choice.
+    onChange: action("changed"),
+
+    // Whether this widget was the most recently used widget in this
+    // Renderer. Determines whether we'll auto-scroll the page upon
+    // entering review mode.
+    isLastUsedWidget: false,
+};
+
+export const Interactive = (args: StoryArgs): React.Node => {
+    const overwrittenProps = {...defaultProps, ...args};
+    return <BaseRadio {...overwrittenProps} />;
+};
+
+export const SingleSelectWithNothingSelected = (
+    args: StoryArgs,
+): React.Node => {
+    const overwrittenProps = {...defaultProps, multipleSelect: false};
+    return <BaseRadio {...overwrittenProps} />;
+};
+
+export const MultipleSelectWithNothingSelected = (
+    args: StoryArgs,
+): React.Node => {
+    const overwrittenProps = {...defaultProps, multipleSelect: true};
+    return <BaseRadio {...overwrittenProps} />;
+};
+
+export const MultipleSelectWithCountChoicesLabel = (
+    args: StoryArgs,
+): React.Node => {
+    const overwrittenProps = {
+        ...defaultProps,
+        multipleSelect: true,
+        numCorrect: 2,
+        countChoices: true,
+    };
+    return <BaseRadio {...overwrittenProps} />;
+};
+
+export const SingleSelected = (args: StoryArgs): React.Node => {
+    const choices = Array(4)
+        .fill(null)
+        .map((_, i) => generateChoice({content: `Choice ${i + 1}`}));
+    choices[1].checked = true;
+
+    const overwrittenProps = {...defaultProps, multipleSelect: false, choices};
+    return <BaseRadio {...overwrittenProps} />;
+};
+
+export const MultipleSelected = (args: StoryArgs): React.Node => {
+    const choices = Array(4)
+        .fill(null)
+        .map((_, i) => generateChoice({content: `Choice ${i + 1}`}));
+    choices[1].checked = true;
+    choices[2].checked = true;
+
+    const overwrittenProps = {...defaultProps, multipleSelect: true, choices};
+    return <BaseRadio {...overwrittenProps} />;
+};
+
+export const SingleKitchenSink = (args: StoryArgs): React.Node => {
+    const choices = Array(4)
+        .fill(null)
+        .map((_, i) => {
+            const choice = generateChoice({
+                content: `Choice ${i + 1}`,
+                rationale: "This is a neat rationale",
+                hasRationale: true,
+                showRationale: true,
+                correct: false,
+                showCorrectness: true,
+            });
+
+            return choice;
+        });
+    choices[1].checked = true;
+    choices[2].correct = true;
+
+    const rubricChoices = choices.map(({correct}) => ({
+        // note(matthew): reviewModeRubric.choices requires content,
+        // but I don't see how it's getting used and Flow gets mad
+        // when I use choice.content because it's not a string.
+        // reviewModeRubric could probably use a look over.
+        content: "",
+        correct,
+    }));
+
+    const overwrittenProps = {
+        ...defaultProps,
+        multipleSelect: false,
+        reviewModeRubric: {choices: rubricChoices},
+        choices,
+    };
+    return <BaseRadio {...overwrittenProps} />;
+};
+
+export const MultipleKitchenSink = (args: StoryArgs): React.Node => {
+    const choices = Array(4)
+        .fill(null)
+        .map((_, i) => {
+            const choice = generateChoice({
+                content: `Choice ${i + 1}`,
+                rationale: "This is a neat rationale",
+                hasRationale: true,
+                showRationale: true,
+                correct: false,
+                showCorrectness: true,
+            });
+
+            return choice;
+        });
+    choices[1].checked = true;
+    choices[2].checked = true;
+    choices[2].correct = true;
+    choices[3].correct = true;
+
+    const rubricChoices = choices.map((c) => ({
+        // note(matthew): reviewModeRubric.choices requires content,
+        // but I don't see how it's getting used and Flow gets mad
+        // when I use choice.content because it's not a string.
+        // reviewModeRubric could probably use a look over.
+        content: "",
+        correct: c.correct,
+    }));
+
+    const overwrittenProps = {
+        ...defaultProps,
+        multipleSelect: true,
+        numCorrect: 2,
+        reviewModeRubric: {choices: rubricChoices},
+        choices,
+    };
+    return <BaseRadio {...overwrittenProps} />;
+};

package/src/widgets/radio/base-radio.jsx

@@ -454,8 +454,7 @@ const styles: StyleDeclaration = StyleSheet.create({
     },
 
     radio: {
-        // Avoid centering
-        width: "100%",
+        padding: 0,
     },
 
     responsiveRadioContainer: {

package/src/widgets/radio/choice.jsx

@@ -14,7 +14,7 @@ import {useState, useEffect} from "react";
 import _ from "underscore";
 
 import Icon from "../../components/icon.jsx";
-import {ApiOptions} from "../../perseus-api.jsx";
+import {ApiOptions, ClassNames} from "../../perseus-api.jsx";
 import * as styleConstants from "../../styles/constants.js";
 import mediaQueries from "../../styles/media-queries.js";
 
@@ -140,7 +140,6 @@ function Choice(props: ChoicePropsWithForwardRef): React.Node {
         css(
             !apiOptions.satStyling && styles.description,
             apiOptions.satStyling && styles.satDescription,
-            satCorrectChoice && styles.satDescriptionCorrect,
             satCorrectChoice && checked && styles.satDescriptionCorrectChecked,
             satIncorrectChecked && styles.satDescriptionIncorrectChecked,
         ),
@@ -179,12 +178,12 @@ function Choice(props: ChoicePropsWithForwardRef): React.Node {
                 dispay: "flex",
                 flexDirection: "column",
             }}
+            className={descriptionClassName}
         >
             <div
                 style={{
                     display: "flex",
                     flexDirection: "row",
-                    width: "100%",
                     opacity: showDimmed ? 0.5 : 1.0,
                 }}
             >
@@ -208,6 +207,7 @@ function Choice(props: ChoicePropsWithForwardRef): React.Node {
                             apiOptions.readOnly
                         }
                         tabIndex={-1}
+                        className={ClassNames.RADIO.OPTION_CONTENT}
                     />
                     <label htmlFor={choiceId}>
                         {a11yText} &nbsp; {content}
@@ -222,7 +222,6 @@ function Choice(props: ChoicePropsWithForwardRef): React.Node {
                             crossedOut: false,
                         });
                     }}
-                    className={descriptionClassName}
                     disabled={
                         disabled ||
                         apiOptions.staticRender ||
@@ -390,11 +389,7 @@ const styles = StyleSheet.create({
         boxSizing: "border-box",
         cursor: "pointer",
         marginLeft: 0,
-        padding: "17px 14px",
-    },
-
-    satDescriptionCorrect: {
-        color: styleConstants.satCorrectColor,
+        padding: "17px 14px 17px 0",
     },
 
     satDescriptionCorrectChecked: {
@@ -402,7 +397,6 @@ const styles = StyleSheet.create({
     },
 
     satDescriptionIncorrectChecked: {
-        color: styleConstants.satIncorrectColor,
         backgroundColor: styleConstants.satIncorrectBackgroundColor,
     },
 

package/src/widgets/radio/widget.jsx

@@ -1,4 +1,3 @@
-/* eslint-disable react/sort-comp */
 // @flow
 import {linterContextDefault} from "@khanacademy/perseus-linter";
 import * as i18n from "@khanacademy/wonder-blocks-i18n";
@@ -66,6 +65,134 @@ class Radio extends React.Component<Props> {
         linterContext: linterContextDefault,
     };
 
+    static validate(userInput: UserInput, rubric: Rubric): PerseusScore {
+        const numSelected = userInput.choicesSelected.reduce(
+            (sum, selected) => {
+                return sum + (selected ? 1 : 0);
+            },
+            0,
+        );
+
+        if (numSelected === 0) {
+            return {
+                type: "invalid",
+                message: null,
+            };
+        }
+
+        if (
+            userInput.numCorrect &&
+            userInput.numCorrect > 1 &&
+            numSelected !== userInput.numCorrect
+        ) {
+            return {
+                type: "invalid",
+                message: i18n._("Please choose the correct number of answers."),
+            };
+            // If NOTA and some other answer are checked, ...
+        }
+        if (userInput.noneOfTheAboveSelected && numSelected > 1) {
+            return {
+                type: "invalid",
+                message: i18n._(
+                    "'None of the above' may not be selected " +
+                        "when other answers are selected.",
+                ),
+            };
+        }
+
+        const correct = userInput.choicesSelected.every((selected, i) => {
+            let isCorrect;
+            if (userInput.noneOfTheAboveIndex === i) {
+                isCorrect = rubric.choices.every((choice, j) => {
+                    return i === j || !choice.correct;
+                });
+            } else {
+                isCorrect = !!rubric.choices[i].correct;
+            }
+            return isCorrect === selected;
+        });
+
+        return {
+            type: "points",
+            earned: correct ? 1 : 0,
+            total: 1,
+            message: null,
+        };
+    }
+
+    static getUserInputFromProps(props: Props): UserInput {
+        // Return checked inputs in the form {choicesSelected: [bool]}. (Dear
+        // future timeline implementers: this used to be {value: i} before
+        // multiple select was added)
+        if (props.choiceStates) {
+            let noneOfTheAboveIndex = null;
+            let noneOfTheAboveSelected = false;
+
+            const choiceStates = props.choiceStates;
+            const choicesSelected = choiceStates.map(() => false);
+            const countChoices = props.countChoices;
+            const numCorrect = props.numCorrect;
+
+            for (let i = 0; i < choicesSelected.length; i++) {
+                const index = props.choices[i].originalIndex;
+
+                choicesSelected[index] = choiceStates[i].selected;
+
+                if (props.choices[i].isNoneOfTheAbove) {
+                    noneOfTheAboveIndex = index;
+
+                    if (choicesSelected[i]) {
+                        noneOfTheAboveSelected = true;
+                    }
+                }
+            }
+
+            return {
+                countChoices,
+                choicesSelected,
+                numCorrect,
+                noneOfTheAboveIndex,
+                noneOfTheAboveSelected,
+            };
+            // Support legacy choiceState implementation
+        }
+        /* istanbul ignore if - props.values is deprecated */
+        const {values} = props;
+        if (values) {
+            let noneOfTheAboveIndex = null;
+            let noneOfTheAboveSelected = false;
+
+            const choicesSelected = [...values];
+            const countChoices = props.countChoices;
+            const numCorrect = props.numCorrect;
+            const valuesLength = values.length;
+
+            for (let i = 0; i < valuesLength; i++) {
+                const index = props.choices[i].originalIndex;
+                choicesSelected[index] = values[i];
+
+                if (props.choices[i].isNoneOfTheAbove) {
+                    noneOfTheAboveIndex = index;
+                    if (choicesSelected[i]) {
+                        noneOfTheAboveSelected = true;
+                    }
+                }
+            }
+            return {
+                choicesSelected,
+                noneOfTheAboveIndex,
+                noneOfTheAboveSelected,
+                countChoices,
+                numCorrect,
+            };
+        }
+        // Nothing checked
+        return {
+            choicesSelected: props.choices.map(() => false),
+        };
+    }
+
     _renderRenderer: (content?: string) => React.Node = (
         content?: string = "",
     ) => {
@@ -382,134 +509,6 @@ class Radio extends React.Component<Props> {
             />
         );
     }
-
-    static validate(userInput: UserInput, rubric: Rubric): PerseusScore {
-        const numSelected = userInput.choicesSelected.reduce(
-            (sum, selected) => {
-                return sum + (selected ? 1 : 0);
-            },
-            0,
-        );
-
-        if (numSelected === 0) {
-            return {
-                type: "invalid",
-                message: null,
-            };
-        }
-
-        if (
-            userInput.numCorrect &&
-            userInput.numCorrect > 1 &&
-            numSelected !== userInput.numCorrect
-        ) {
-            return {
-                type: "invalid",
-                message: i18n._("Please choose the correct number of answers."),
-            };
-            // If NOTA and some other answer are checked, ...
-        }
-        if (userInput.noneOfTheAboveSelected && numSelected > 1) {
-            return {
-                type: "invalid",
-                message: i18n._(
-                    "'None of the above' may not be selected " +
-                        "when other answers are selected.",
-                ),
-            };
-        }
-
-        const correct = userInput.choicesSelected.every((selected, i) => {
-            let isCorrect;
-            if (userInput.noneOfTheAboveIndex === i) {
-                isCorrect = rubric.choices.every((choice, j) => {
-                    return i === j || !choice.correct;
-                });
-            } else {
-                isCorrect = !!rubric.choices[i].correct;
-            }
-            return isCorrect === selected;
-        });
-
-        return {
-            type: "points",
-            earned: correct ? 1 : 0,
-            total: 1,
-            message: null,
-        };
-    }
-
-    static getUserInputFromProps(props: Props): UserInput {
-        // Return checked inputs in the form {choicesSelected: [bool]}. (Dear
-        // future timeline implementers: this used to be {value: i} before
-        // multiple select was added)
-        if (props.choiceStates) {
-            let noneOfTheAboveIndex = null;
-            let noneOfTheAboveSelected = false;
-
-            const choiceStates = props.choiceStates;
-            const choicesSelected = choiceStates.map(() => false);
-            const countChoices = props.countChoices;
-            const numCorrect = props.numCorrect;
-
-            for (let i = 0; i < choicesSelected.length; i++) {
-                const index = props.choices[i].originalIndex;
-
-                choicesSelected[index] = choiceStates[i].selected;
-
-                if (props.choices[i].isNoneOfTheAbove) {
-                    noneOfTheAboveIndex = index;
-
-                    if (choicesSelected[i]) {
-                        noneOfTheAboveSelected = true;
-                    }
-                }
-            }
-
-            return {
-                countChoices,
-                choicesSelected,
-                numCorrect,
-                noneOfTheAboveIndex,
-                noneOfTheAboveSelected,
-            };
-            // Support legacy choiceState implementation
-        }
-        /* istanbul ignore if - props.values is deprecated */
-        const {values} = props;
-        if (values) {
-            let noneOfTheAboveIndex = null;
-            let noneOfTheAboveSelected = false;
-
-            const choicesSelected = [...values];
-            const countChoices = props.countChoices;
-            const numCorrect = props.numCorrect;
-            const valuesLength = values.length;
-
-            for (let i = 0; i < valuesLength; i++) {
-                const index = props.choices[i].originalIndex;
-                choicesSelected[index] = values[i];
-
-                if (props.choices[i].isNoneOfTheAbove) {
-                    noneOfTheAboveIndex = index;
-                    if (choicesSelected[i]) {
-                        noneOfTheAboveSelected = true;
-                    }
-                }
-            }
-            return {
-                choicesSelected,
-                noneOfTheAboveIndex,
-                noneOfTheAboveSelected,
-                countChoices,
-                numCorrect,
-            };
-        }
-        // Nothing checked
-        return {
-            choicesSelected: props.choices.map(() => false),
-        };
-    }
 }
 
 export default Radio;

package/src/widgets/passage/get-line-height-for-node.js

@@ -1,9 +0,0 @@
-// @flow
-import $ from "jquery";
-
-export const getLineHeightForNode = (
-    line1: HTMLDivElement,
-    line2: HTMLDivElement,
-): number => {
-    return $(line2).offset().top - $(line1).offset().top;
-};