@khanacademy/perseus 1.2.0 → 1.3.0

package/package.json

@@ -3,7 +3,7 @@
     "description": "Core Perseus API (includes renderers and widgets)",
     "author": "Khan Academy",
     "license": "MIT",
-    "version": "1.2.0",
+    "version": "1.3.0",
     "publishConfig": {
         "access": "public"
     },

package/src/styles/widgets/passage.less

@@ -45,12 +45,16 @@
 
         margin: 0 0 10px;
     }
+
+    // note(matthewc): If you need to change any of this,
+    // check that line numbers line up correctly.
+    // The margin should probably be 0 or the line height
     .passage-text div.paragraph {
-        font-family: "Noto Serif", serif;
         font-weight: 400;
-        font-size: 20px;
-        line-height: 24px;
+        font-size: @font-size;
+        line-height: @line-height;
         text-indent: 20px;
+        margin: 0;
 
         span {
             text-indent: 0;

package/src/widgets/__stories__/passage-ref.stories.jsx

@@ -2,7 +2,7 @@
 import * as React from "react";
 
 import {RendererWithDebugUI} from "../../../../../testing/renderer-with-debug-ui.jsx";
-import {question1} from "../__testdata__/passage-ref_testdata.js";
+import {question1, question2} from "../__testdata__/passage-ref_testdata.js";
 
 type StoryArgs = {||};
 
@@ -14,6 +14,10 @@ export default ({
     title: "Perseus/Widgets/PassageRef",
 }: Story);
 
-export const Question1 = (args: StoryArgs): React.Node => {
+export const ShortPassage = (args: StoryArgs): React.Node => {
     return <RendererWithDebugUI question={question1} />;
 };
+
+export const LongPassage = (args: StoryArgs): React.Node => {
+    return <RendererWithDebugUI question={question2} />;
+};

package/src/widgets/__stories__/passage.stories.jsx

@@ -2,7 +2,11 @@
 import * as React from "react";
 
 import {RendererWithDebugUI} from "../../../../../testing/renderer-with-debug-ui.jsx";
-import {question1, question2} from "../__testdata__/passage_testdata.js";
+import {
+    question1,
+    question2,
+    question3,
+} from "../__testdata__/passage_testdata.js";
 
 export default {
     title: "Perseus/Widgets/Passage",
@@ -17,3 +21,7 @@ export const SimpleQuestion = (args: StoryArgs): React.Node => {
 export const MultiPassageQuestion = (args: StoryArgs): React.Node => {
     return <RendererWithDebugUI question={question2} />;
 };
+
+export const SingleNumberedPassage = (args: StoryArgs): React.Node => {
+    return <RendererWithDebugUI question={question3} />;
+};

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

@@ -6,6 +6,7 @@ import {RendererWithDebugUI} from "../../../../../testing/renderer-with-debug-ui
 import {
     questionWithPassage,
     multiChoiceQuestion,
+    multiChoiceQuestionSimple,
 } from "../__testdata__/radio_testdata.js";
 
 import type {PerseusRenderer} from "../../perseus-types.js";
@@ -71,6 +72,16 @@ export const SingleSelect = (args: StoryArgs): React.Node => {
     );
 };
 
+export const MultiSelectSimple = (args: StoryArgs): React.Node => {
+    return (
+        <RendererWithDebugUI
+            question={applyStoryArgs(multiChoiceQuestionSimple, args)}
+            apiOptions={buildApiOptions(args)}
+            reviewMode={args.reviewMode}
+        />
+    );
+};
+
 export const MultiSelect = (args: StoryArgs): React.Node => {
     return (
         <RendererWithDebugUI

package/src/widgets/__testdata__/passage-ref_testdata.js

@@ -39,3 +39,65 @@ export const question1: PerseusRenderer = {
         },
     },
 };
+
+export const question2: PerseusRenderer = {
+    content:
+        '[[☃ passage 1]]\n\n"It is!" is used in [[☃ passage-ref 1]]\n\n"unsettle" is used in [[☃ passage-ref 2]]\n\n"flagon" is used in [[☃ passage-ref 3]]\n\n',
+    images: {},
+    widgets: {
+        "passage 1": {
+            alignment: "default",
+            graded: true,
+            options: {
+                footnotes: "",
+                passageText:
+                    '\n\nOne afternoon, Mrs. Bretton, coaxing [Paulina] from her usual station in a corner, had lifted her into the window-seat, and, by way of occupying her attention, told her to watch the passengers and count how many ladies should go down the street in a given time. She had sat listlessly, hardly looking, and not counting, when—my eye being fixed on hers—I witnessed in its iris and pupil a startling transfiguration. These sudden, dangerous natures—*sensitive* as they are called—offer many a curious spectacle to those whom a cooler temperament has secured from participation in their angular vagaries. The fixed and heavy gaze swum, trembled, then glittered in fire; the small, overcast brow cleared; the trivial and dejected features lit up; the sad countenance vanished, and in its place appeared a sudden eagerness, an intense expectancy. {{"It *is!*"}} were her words.\n\nLike a bird or a shaft, or any other swift thing, she was gone from the room. How she got the house-door open I cannot tell; probably it might be ajar; perhaps Warren was in the way and obeyed her behest, which would be impetuous enough. I—watching calmly from the window—saw her, in her black frock and tiny braided apron (to pinafores she had an antipathy), dart half the length of the street; and, as I was on the point of turning, and quietly announcing to Mrs. Bretton that the child was run out mad, and ought instantly to be pursued, I saw her caught up, and rapt at once from my cool observation, and from the wondering stare of the passengers. A gentleman had done this good turn, and now, covering her with his     cloak, advanced to restore her to the house whence he had seen her issue.\n\nI concluded he would leave her in a servant\'s charge and withdraw; but he entered: having tarried a little while below, he came up-stairs.\n\nHis reception immediately explained that he was known to Mrs. Bretton. She recognised him; she greeted him, and yet she was fluttered, surprised, taken unawares. Her look and manner were even expostulatory; and in reply to these, rather than her words, he said,—"I could not help it, madam: I found it impossible to leave the country without seeing with my own eyes how she settled."\n\n"But you will {{unsettle}} her."\n\n"I hope not. And how is papa\'s little Polly?"\n\nThis question he addressed to Paulina, as he sat down and placed her gently on the ground before him.\n\n"How is Polly\'s papa?" was the reply, as she leaned on his knee, and gazed up into his face.\n\nIt was not a noisy, not a wordy scene: for that I was thankful; but it was a scene of feeling too brimful, and which, because the cup did not foam up high or furiously overflow, only oppressed one the more. On all occasions of vehement, unrestrained expansion, a sense of disdain or ridicule comes to the weary spectator\'s relief; whereas I have ever felt most burdensome that sort of sensibility which bends of its own will, a giant slave under the sway of good sense.\n\nMr. Home was a stern-featured—perhaps I should rather say, a hard-featured man: his forehead was knotty, and his cheekbones were marked and prominent. The character of his face was quite Scotch; but there was feeling in his eye, and emotion in his now agitated countenance. His northern accent in speaking harmonised with his physiognomy. He was at once proud-looking and homely-looking. He laid his hand on the child\'s uplifted head. She said—"Kiss Polly."\n\nHe kissed her. I wished she would utter some hysterical cry, so that I might get relief and be at ease. She made wonderfully little noise: she seemed to have got what she wanted—all she wanted, and to be in a trance of content. Neither in mien nor in features was this creature like her sire, and yet she was of his strain: her mind had been filled from his, as the cup from the {{flagon}}.\n',
+                passageTitle: "",
+                showLineNumbers: true,
+                static: false,
+            },
+            static: false,
+            type: "passage",
+            version: {
+                major: 0,
+                minor: 0,
+            },
+        },
+        "passage-ref 1": {
+            options: {
+                passageNumber: 1,
+                referenceNumber: 1,
+                summaryText: "",
+            },
+            type: "passage-ref",
+            version: {
+                major: 0,
+                minor: 1,
+            },
+        },
+        "passage-ref 2": {
+            options: {
+                passageNumber: 1,
+                referenceNumber: 2,
+                summaryText: "",
+            },
+            type: "passage-ref",
+            version: {
+                major: 0,
+                minor: 1,
+            },
+        },
+        "passage-ref 3": {
+            options: {
+                passageNumber: 1,
+                referenceNumber: 3,
+                summaryText: "",
+            },
+            type: "passage-ref",
+            version: {
+                major: 0,
+                minor: 1,
+            },
+        },
+    },
+};

package/src/widgets/__testdata__/passage_testdata.js

@@ -69,3 +69,28 @@ export const question2: PerseusRenderer = {
         },
     },
 };
+
+export const question3: PerseusRenderer = {
+    content: "[[☃ passage 1]]",
+    images: {},
+    widgets: {
+        "passage 1": {
+            alignment: "default",
+            graded: true,
+            options: {
+                footnotes: "An example footnote",
+                passageText:
+                    "{{For reasons that are not entirely clear, when animals make their way to isolated islands [[1]], they tend to evolve relatively quickly toward an outsized or pint-sized version of their mainland counterpart.}} \n\n{{Perhaps the most famous example of an island giant—and, sadly, of species extinction—is the dodo, once found on the Indian Ocean island of Mauritius.}} {{When the dodo's ancestor (thought to be a migratory pigeon) settled on this island with abundant food, no competition from terrestrial mammals, and no predators, it could survive without flying, and thus was freed from the energetic and size constraints of flight.}} {{New Zealand also had avian giants, now extinct, including the flightless moa, an ostrich-like bird, and Haast's eagle (_Harpagornis moorei_), which had a wingspan up to 3 meters.}} {{Though Haast's eagle could fly—and presumably used its wings to {{launch}} brutal attacks on the hapless moa—its body mass (10–14 kilograms) pushed the limits for self-propelled flight.}}\n\n{{As extreme evolutionary examples, these island birds can offer insights into the forces and events shaping evolutionary change.}} In a new study, Michael Bunce et al. compared ancient mitochondrial DNA extracted from Haast's eagle bones with DNA sequences of 16 living eagle species to better characterize the evolutionary history of the extinct giant raptor. {{Their results suggest the extinct raptor underwent a rapid evolutionary transformation that belies its kinship to some of the world's smallest eagle species.}}\n\nThe authors characterized the rates of sequence evolution within mitochondrial DNA to establish the evolutionary relationships between the different eagle species. Their analysis places Haast's eagle in the same evolutionary lineage as a group of small eagle species in the genus _Hieraaetus_. Surprisingly, the genetic distance separating the giant eagle and its more diminutive _Hieraaetus_ cousins from their last {{common}} ancestor is relatively small.\n",
+                passageTitle: "Passage 1",
+                showLineNumbers: true,
+                static: false,
+            },
+            static: false,
+            type: "passage",
+            version: {
+                major: 0,
+                minor: 0,
+            },
+        },
+    },
+};

package/src/widgets/__testdata__/radio_testdata.js

@@ -194,6 +194,58 @@ export const multiChoiceQuestion: PerseusRenderer = {
     },
 };
 
+export const multiChoiceQuestionSimple: PerseusRenderer = {
+    content: "What are some ways to say hello?\n\n[[\u2603 radio 1]]",
+    images: {},
+    widgets: {
+        "radio 1": ({
+            graded: true,
+            version: {
+                major: 1,
+                minor: 0,
+            },
+            static: false,
+            type: "radio",
+            options: {
+                onePerLine: true,
+                displayCount: null,
+                choices: [
+                    {
+                        content: "Hola",
+                        isNoneOfTheAbove: false,
+                        correct: true,
+                    },
+                    {
+                        content: "Hey",
+                        isNoneOfTheAbove: false,
+                        correct: true,
+                    },
+                    {
+                        content: "Hi",
+                        isNoneOfTheAbove: false,
+                        correct: true,
+                    },
+                    {
+                        content: "Goodbye",
+                        isNoneOfTheAbove: false,
+                        correct: false,
+                    },
+                    {
+                        content: "None of these",
+                        isNoneOfTheAbove: true,
+                        correct: false,
+                    },
+                ],
+                hasNoneOfTheAbove: true,
+                multipleSelect: true,
+                randomize: false,
+                deselectEnabled: false,
+            },
+            alignment: "default",
+        }: RadioWidget),
+    },
+};
+
 export const multiChoiceQuestionAndAnswer: [
     PerseusRenderer,
     $ReadOnlyArray<number>,

package/src/widgets/__tests__/__snapshots__/passage-ref_test.jsx.snap

@@ -55,13 +55,13 @@ exports[`passage-ref widget should render with invalid reference 1`] = `
                         <div>
                           <div>
                             <div
-                              class="measurer_vtwrnx"
+                              aria-hidden="true"
+                              class="measurer_225hir"
                             >
-                              <div>
-                                <div
-                                  class="paragraph"
-                                />
-                                <div />
+                              <div
+                                class="paragraph"
+                              >
+                                Line Height Measurement
                               </div>
                             </div>
                             <div
@@ -200,13 +200,13 @@ exports[`passage-ref widget should render with multi-line reference 1`] = `
                         <div>
                           <div>
                             <div
-                              class="measurer_vtwrnx"
+                              aria-hidden="true"
+                              class="measurer_225hir"
                             >
-                              <div>
-                                <div
-                                  class="paragraph"
-                                />
-                                <div />
+                              <div
+                                class="paragraph"
+                              >
+                                Line Height Measurement
                               </div>
                             </div>
                             <div
@@ -350,13 +350,13 @@ exports[`passage-ref widget should render with single-line reference 1`] = `
                         <div>
                           <div>
                             <div
-                              class="measurer_vtwrnx"
+                              aria-hidden="true"
+                              class="measurer_225hir"
                             >
-                              <div>
-                                <div
-                                  class="paragraph"
-                                />
-                                <div />
+                              <div
+                                class="paragraph"
+                              >
+                                Line Height Measurement
                               </div>
                             </div>
                             <div

package/src/widgets/__tests__/__snapshots__/passage_test.jsx.snap

@@ -219,13 +219,13 @@ exports[`passage widget should snapshot multiple passages (mobile: false) 1`] =
                         <div>
                           <div>
                             <div
-                              class="measurer_vtwrnx"
+                              aria-hidden="true"
+                              class="measurer_225hir"
                             >
-                              <div>
-                                <div
-                                  class="paragraph"
-                                />
-                                <div />
+                              <div
+                                class="paragraph"
+                              >
+                                Line Height Measurement
                               </div>
                             </div>
                             <div
@@ -711,13 +711,13 @@ exports[`passage widget should snapshot multiple passages (mobile: false) 1`] =
                         <div>
                           <div>
                             <div
-                              class="measurer_vtwrnx"
+                              aria-hidden="true"
+                              class="measurer_225hir"
                             >
-                              <div>
-                                <div
-                                  class="paragraph"
-                                />
-                                <div />
+                              <div
+                                class="paragraph"
+                              >
+                                Line Height Measurement
                               </div>
                             </div>
                             <div
@@ -1090,13 +1090,13 @@ exports[`passage widget should snapshot multiple passages (mobile: true) 1`] = `
                         <div>
                           <div>
                             <div
-                              class="measurer_vtwrnx"
+                              aria-hidden="true"
+                              class="measurer_225hir"
                             >
-                              <div>
-                                <div
-                                  class="paragraph"
-                                />
-                                <div />
+                              <div
+                                class="paragraph"
+                              >
+                                Line Height Measurement
                               </div>
                             </div>
                             <div
@@ -1582,13 +1582,13 @@ exports[`passage widget should snapshot multiple passages (mobile: true) 1`] = `
                         <div>
                           <div>
                             <div
-                              class="measurer_vtwrnx"
+                              aria-hidden="true"
+                              class="measurer_225hir"
                             >
-                              <div>
-                                <div
-                                  class="paragraph"
-                                />
-                                <div />
+                              <div
+                                class="paragraph"
+                              >
+                                Line Height Measurement
                               </div>
                             </div>
                             <div
@@ -1840,13 +1840,13 @@ exports[`passage widget should snapshot simple passage (mobile: false) 1`] = `
                         <div>
                           <div>
                             <div
-                              class="measurer_vtwrnx"
+                              aria-hidden="true"
+                              class="measurer_225hir"
                             >
-                              <div>
-                                <div
-                                  class="paragraph"
-                                />
-                                <div />
+                              <div
+                                class="paragraph"
+                              >
+                                Line Height Measurement
                               </div>
                             </div>
                             <div
@@ -1941,13 +1941,13 @@ exports[`passage widget should snapshot simple passage (mobile: true) 1`] = `
                         <div>
                           <div>
                             <div
-                              class="measurer_vtwrnx"
+                              aria-hidden="true"
+                              class="measurer_225hir"
                             >
-                              <div>
-                                <div
-                                  class="paragraph"
-                                />
-                                <div />
+                              <div
+                                class="paragraph"
+                              >
+                                Line Height Measurement
                               </div>
                             </div>
                             <div

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);