@khanacademy/perseus 0.0.1 → 0.1.0

package/dist/strings.js

@@ -5,29 +5,115 @@
   */
  
 module.exports = [
+    i18n._(" The symbol %(sentenceSymbol)s indicates that the following sentence is referenced in a question.", {}),
+    i18n._("'None of the above' may not be selected when other answers are selected.", {}),
+    i18n._("(Choice %(letter)s, Checked, Correct)", {}),
+    i18n._("(Choice %(letter)s, Checked, Incorrect)", {}),
+    i18n._("(Choice %(letter)s, Checked)", {}),
+    i18n._("(Choice %(letter)s, Correct)", {}),
+    i18n._("(Choice %(letter)s, Crossed out, Correct)", {}),
+    i18n._("(Choice %(letter)s, Crossed out, Incorrect)", {}),
+    i18n._("(Choice %(letter)s, Crossed out)", {}),
+    i18n._("(Choice %(letter)s, Incorrect)", {}),
+    i18n._("(Choice %(letter)s)", {}),
+    i18n.$_("[Circle marker %(number)s]", {}),
+    i18n.$_("[Marker for question %(number)s]", {}),
+    i18n.$_("[Sentence %(number)s]", {}),
+    i18n._("**Your answer should be** ", {}),
+    i18n._("a *proper* fraction, like $1/2$ or $6/10$", {}),
+    i18n._("a *simplified improper* fraction, like $7/4$", {}),
+    i18n._("a *simplified proper* fraction, like $3/5$", {}),
+    // I18N: This is a list of single-character labels that will appear in front of multiple-choice options. For instance, a multiple-choice question with three options would display (A) first option (B) second option (C) third option There must be spaces between each of the different characters. The characters will show up next to options in the order that they are listed here. Most multiple choice questions have 5 or fewer options.
+    i18n._("A B C D E F G H I J K L M N O P Q R S T U V W X Y Z", {}),
+    i18n._("a mixed number, like $1\\ 3/4$", {}),
+    i18n.$_("A molecular structure drawing. SMILES notation: %(content)s", {}),
+    i18n._("a multiple of pi, like $12\\ \\text{pi}$ or $2/3\\ \\text{pi}$", {}),
+    i18n._("a percent, like $12.34\\%$", {}),
+    i18n._("Add highlight", {}),
+    i18n._("Add transformations below:", {}),
+    i18n._("an *exact* decimal, like $0.75$", {}),
+    i18n._("an *improper* fraction, like $10/7$ or $14/8$", {}),
+    i18n._("an integer, like $6$", {}),
+    i18n._("Beginning of reading passage footnotes.", {}),
+    i18n._("Beginning of reading passage.", {}),
+    i18n._("Bring back", {}),
+    i18n._("Bring back Choice %(letter)s", {}),
+    i18n._("Check", {}),
+    i18n._("Check your significant figures.", {}),
+    i18n._("Check your units.", {}),
+    i18n._("Choices:", {}),
+    i18n._("Choose %(numCorrect)s answers:", {}),
+    i18n._("Choose 1 answer:", {}),
+    i18n._("Choose all answers that apply:", {}),
+    i18n._("Click each dot on the image to select all answers that apply.", {}),
+    i18n._("Click each dot on the image to select an answer.", {}),
+    i18n._("Click on the tiles to change the lights.", {}),
+    i18n._("Click to add points", {}),
+    i18n._("Click to add vertices", {}),
+    i18n._("Close", {}),
+    i18n._("Closes the tooltip: ", {}),
+    i18n._("Correct", {}),
+    i18n._("Correct (but you crossed it out)", {}),
+    i18n._("Correct (selected)", {}),
+    i18n._("Correct!", {}),
     i18n._("Cosine", {}),
+    i18n._("Cross out", {}),
+    i18n._("Cross out Choice %(letter)s", {}),
     i18n._("Cube", {}),
     i18n._("Cube root", {}),
     i18n._("Custom exponent", {}),
     i18n._("Decimal", {}),
     i18n._("Delete", {}),
+    // I18N: As in the command, "Dilate the polygon"
+    i18n._("Dilate", {}),
+    i18n._("dilation", {}),
+    i18n._("Dilation", {}),
+    i18n.$_("Dilation about %(point)s by %(scale)s", {}),
+    i18n.$_("Dilation of scale %(scale)s about %(point)s", {}),
     i18n._("Dismiss", {}),
     i18n._("Divide", {}),
     i18n._("Down arrow", {}),
+    i18n._("Drag handles to make graph", {}),
+    i18n._("End of reading passage.", {}),
+    i18n._("entered in an invalid answer.", {}),
     i18n._("Equals sign", {}),
-    i18n._("foo", {}),
+    i18n.$_("Error rendering: %(error)s", {}),
+    i18n._("Explain", {}),
+    i18n._("False", {}),
     i18n._("Fraction, excluding the current expression", {}),
     i18n._("Fraction, with current expression in numerator", {}),
+    i18n._("Get another hint", {}),
     i18n._("Greater than or equal to sign", {}),
     i18n._("Greater than sign", {}),
+    i18n._("Hide explanation", {}),
+    i18n._("Hint #%(pos)s", {}),
+    i18n._("Hints", {}),
+    i18n._("I couldn't understand those units.", {}),
+    i18n._("I don't understand that", {}),
+    i18n._("I'm a computer. I only understand multiplication if you use an asterisk (*) as the multiplication sign.", {}),
+    i18n._("Incorrect", {}),
+    i18n._("Incorrect (selected)", {}),
+    i18n._("It looks like you left something blank or ", {}),
+    i18n._("Keep trying", {}),
+    i18n._("Khan Academy video wrapper", {}),
     i18n._("Left arrow", {}),
     i18n._("Left parenthesis", {}),
     i18n._("Less than or equal to sign", {}),
     i18n._("Less than sign", {}),
+    // I18N: a label next to a reading passage to denote the line number
+    i18n._("Line ", {}),
+    i18n.$_("line %(lineNumber)s", {}),
+    i18n.$_("lines %(lineRange)s", {}),
+    i18n._("Loading...", {}),
     i18n._("Logarithm with base 10", {}),
     i18n._("Logarithm with custom base", {}),
+    i18n._("Make circle filled", {}),
+    i18n._("Make circle open", {}),
+    i18n._("Make sure you fill in all cells in the matrix.", {}),
+    i18n._("Make sure you select something for every row.", {}),
     i18n._("Math input box", {}),
     i18n._("Minus", {}),
+    i18n.ngettext("Moves: %(num)s","Moves: %(num)s", {}),
     i18n._("Multiply", {}),
     i18n._("Natural logarithm", {}),
     i18n._("Navigate right into the numerator of a fraction", {}),
@@ -37,18 +123,79 @@ module.exports = [
     i18n._("Navigate right out of the denominator of a fraction", {}),
     i18n._("Navigate right out of the numerator and into the denominator", {}),
     i18n._("Negative", {}),
+    i18n._("Next question", {}),
+    i18n._("No", {}),
+    i18n._("None of the above", {}),
     i18n._("Not-equals sign", {}),
+    i18n._("Note: For this question, the shape will not move.", {}),
+    i18n._("Number of divisions:", {}),
+    i18n._("Number of trials:", {}),
+    i18n._("Open menu for Choice %(letter)s", {}),
+    i18n._("Parameter", {}),
     i18n._("Percent", {}),
     i18n._("Pi", {}),
+    i18n._("Please choose the correct number of answers.", {}),
+    i18n.$_("Please make sure the number of divisions is in the range %(divRangeString)s.", {}),
     i18n._("Plus", {}),
     i18n._("Radical with custom root", {}),
+    i18n._("Reaction arrow pointing to the right.", {}),
+    // I18N: As in the command, "Reflect the polygon"
+    i18n._("Reflect", {}),
+    i18n._("reflection", {}),
+    i18n._("Reflection", {}),
+    i18n.$_("Reflection over the line from %(point1)s to %(point2)s", {}),
+    i18n._("Remove highlight", {}),
     i18n._("Right arrow", {}),
     i18n._("Right parenthesis", {}),
+    // I18N: As in the command, "Rotate the polygon"
+    i18n._("Rotate", {}),
+    i18n._("rotation", {}),
+    i18n._("Rotation", {}),
+    // I18N: %(point)s must come before %(degrees)s in this phrase
+    i18n.$_("Rotation about %(point)s by %(degrees)s", {}),
+    i18n.$_("Rotation by %(degrees)s about %(point)s", {}),
+    i18n._("Run simulation", {}),
+    i18n._("Sample size:", {}),
+    i18n._("See video transcript", {}),
     i18n._("Sine", {}),
+    i18n._("Skip to %(title)s", {}),
+    i18n._("Something went wrong.", {}),
+    i18n._("Sorry, I don't understand that!", {}),
     i18n._("Square", {}),
     i18n._("Square root", {}),
+    i18n._("Switch direction", {}),
     i18n._("Tangent", {}),
+    i18n._("Tap each dot on the image to select all answers that apply.", {}),
+    i18n._("Tap each dot on the image to select an answer.", {}),
+    i18n._("Tap to add points", {}),
     i18n._("Tap with one or two fingers to open keyboard", {}),
+    i18n._("That answer is numerically incorrect.", {}),
+    i18n._("The symbol %(questionSymbol)s indicates that question %(questionNumber)s references this portion of the passage.", {}),
     i18n._("Theta", {}),
+    i18n._("This controls the proportion or percentage that will be used in your simulation.", {}),
+    i18n._("This controls the sample size that will be used in your simulation. For example, if you set this to 100, then for each trial, responses from 100 participants will be simulated.", {}),
+    i18n._("This is the number of trials used in the simulation. For example, if set to 50, then the survey will be conducted 50 times.", {}),
+    // I18N: As in the command, "Translate the polygon"
+    i18n._("Translate", {}),
+    i18n._("translation", {}),
+    i18n._("Translation", {}),
+    // I18N: As in the command, "Translation by <3, 1>"
+    i18n.$_("Translation by %(vector)s", {}),
+    i18n._("True", {}),
+    i18n._("Try again", {}),
+    i18n._("Undo", {}),
     i18n._("Up arrow", {}),
+    i18n._("Use the interactive graph to define a correct transformation.", {}),
+    i18n._("Value", {}),
+    i18n._("We could not understand your answer. Please check your answer for extra text or symbols.", {}),
+    i18n._("We couldn't grade your answer.", {}),
+    i18n._("Yes", {}),
+    i18n._("You must turn on all of the lights to continue.", {}),
+    i18n._("Your answer includes a wrong variable letter.", {}),
+    i18n._("Your answer includes use of a variable with the wrong case.", {}),
+    i18n._("Your answer is almost correct, but it is missing a <code>\\%</code> at the end.", {}),
+    i18n._("Your answer is almost correct, but it needs to be simplified.", {}),
+    i18n._("Your answer is close, but you may have approximated pi. Enter your answer as a multiple of pi, like <code>12\\ \\text{pi}</code> or <code>2/3\\ \\text{pi}</code>", {}),
+    i18n._("Your answer:", {}),
+    i18n._("Your transformation must use a %(type)s.", {}),
 ];

package/package.json

@@ -3,7 +3,7 @@
         "access": "public"
     },
     "name": "@khanacademy/perseus",
-    "version": "0.0.1",
+    "version": "0.1.0",
     "description": "Core Perseus API (includes renderers and widgets)",
     "module": "dist/es/index.js",
     "main": "dist/index.js",
@@ -12,20 +12,56 @@
         "test": "bash -c 'yarn --silent --cwd \"../..\" test ${@:0} $($([[ ${@: -1} = -* ]] || [[ ${@: -1} = bash ]]) && echo $PWD)'"
     },
     "dependencies": {
-        "@khanacademy/math-input": "^0.4.1"
+        "@khanacademy/math-input": "^0.4.1",
+        "kas": "git+https://git@github.com/Khan/KAS.git#a5b04e0688ec692da86e2991cd389f1fd3831528",
+        "kmath": "git+https://git@github.com/Khan/kmath.git#e1191bbc7bac64ccb582de1b3b2d47ba38b510e0",
+        "mathquill": "git+https://git@github.com/Khan/mathquill.git#a9ae54e057c5c1acc8244a5627acbff29901d992",
+        "simple-markdown": "^0.3.1"
     },
     "devDependencies": {
+        "@khanacademy/wonder-blocks-color": "^1.1.20",
+        "@khanacademy/wonder-blocks-core": "^4.3.0",
+        "@khanacademy/wonder-blocks-data": "^7.0.0",
+        "@khanacademy/wonder-blocks-dropdown": "^2.6.7",
         "@khanacademy/wonder-blocks-i18n": "^1.2.3",
+        "@khanacademy/wonder-blocks-link": "^3.8.5",
+        "@khanacademy/wonder-blocks-popover": "^1.1.10",
+        "@khanacademy/wonder-blocks-spacing": "^3.0.5",
+        "@khanacademy/wonder-blocks-tooltip": "^1.3.10",
+        "@khanacademy/wonder-stuff-core": "^0.1.2",
+        "aphrodite": "^1.2.5",
+        "classnames": "^1.1.4",
+        "create-react-class": "^15.6.3",
         "eslint-import-resolver-alias": "^1.1.2",
         "eslint-plugin-import": "^2.26.0",
+        "intersection-observer": "^0.12.0",
+        "jquery": "^2.1.1",
         "perseus-build-settings": "^0.0.1",
+        "prop-types": "^15.6.1",
         "react": "16.14.0",
-        "react-dom": "16.14.0"
+        "react-dom": "16.14.0",
+        "underscore": "^1.4.4"
     },
     "peerDependencies": {
+        "@khanacademy/wonder-blocks-color": "^1.1.20",
+        "@khanacademy/wonder-blocks-core": "^4.3.0",
+        "@khanacademy/wonder-blocks-data": "^7.0.0",
+        "@khanacademy/wonder-blocks-dropdown": "^2.6.7",
         "@khanacademy/wonder-blocks-i18n": "^1.2.3",
+        "@khanacademy/wonder-blocks-link": "^3.8.5",
+        "@khanacademy/wonder-blocks-popover": "^1.1.10",
+        "@khanacademy/wonder-blocks-spacing": "^3.0.5",
+        "@khanacademy/wonder-blocks-tooltip": "^1.3.10",
+        "@khanacademy/wonder-stuff-core": "^0.1.2",
+        "aphrodite": "^1.2.5",
+        "classnames": "^1.1.4",
+        "create-react-class": "^15.6.3",
+        "intersection-observer": "^0.12.0",
+        "jquery": "^2.1.1",
+        "prop-types": "^15.6.1",
         "react": "16.14.0",
-        "react-dom": "16.14.0"
+        "react-dom": "16.14.0",
+        "underscore": "^1.4.4"
     },
     "author": "",
     "license": "MIT"

package/src/README.md

@@ -0,0 +1,7 @@
+Widgets from the Perseus (exercise) editor.
+
+TODO(benkraft): Figure out the distinction between this and the various other
+Perseus packages.
+
+Code-Owner: Learning Platform
+Crowdin-Category: content.chrome

package/src/__stories__/item-renderer.stories.jsx

@@ -0,0 +1,27 @@
+// @flow
+
+import * as React from "react";
+
+import {ItemRendererWithDebugUI} from "../../../../testing/item-renderer-with-debug-ui.jsx";
+import {
+    itemWithInput,
+    labelImageItem,
+} from "../__testdata__/item-renderer_testdata.js";
+
+type StoryArgs = {||};
+
+type Story = {|
+    title: string,
+|};
+
+export default ({
+    title: "Perseus/Renderers/Item Renderer",
+}: Story);
+
+export const InputNumberItem = (args: StoryArgs): React.Node => {
+    return <ItemRendererWithDebugUI item={itemWithInput} />;
+};
+
+export const LabelImageItem = (args: StoryArgs): React.Node => {
+    return <ItemRendererWithDebugUI item={labelImageItem} />;
+};

package/src/__stories__/server-item-renderer.stories.jsx

@@ -0,0 +1,27 @@
+// @flow
+
+import * as React from "react";
+
+import {ServerItemRendererWithDebugUI} from "../../../../testing/server-item-renderer-with-debug-ui.jsx";
+import {
+    itemWithInput,
+    labelImageItem,
+} from "../__testdata__/item-renderer_testdata.js";
+
+type StoryArgs = {||};
+
+type Story = {|
+    title: string,
+|};
+
+export default ({
+    title: "Perseus/Renderers/Server Item Renderer",
+}: Story);
+
+export const InputNumberItem = (args: StoryArgs): React.Node => {
+    return <ServerItemRendererWithDebugUI item={itemWithInput} />;
+};
+
+export const LabelImageItem = (args: StoryArgs): React.Node => {
+    return <ServerItemRendererWithDebugUI item={labelImageItem} />;
+};

package/src/__testdata__/item-renderer_testdata.js

@@ -0,0 +1,161 @@
+// @flow
+
+import type {
+    InputNumberWidget,
+    LabelImageWidget,
+    PerseusItem,
+    PerseusRenderer,
+} from "../perseus-types.js";
+
+export const itemWithInput: PerseusItem = {
+    question: {
+        content:
+            "Enter the number $$-42$$ in the box: [[\u2603 input-number 1]]",
+        images: {},
+        widgets: {
+            "input-number 1": ({
+                type: "input-number",
+                graded: true,
+                options: {
+                    answerType: "number",
+                    value: "-42",
+                    simplify: "required",
+                    size: "normal",
+                    inexact: false,
+                    maxError: 0.1,
+                },
+            }: InputNumberWidget),
+        },
+    },
+    hints: [
+        {content: "Hint #1", images: {}, widgets: {}},
+        {content: "Hint #2", images: {}, widgets: {}},
+        {content: "Hint #3", images: {}, widgets: {}},
+    ],
+    answerArea: null,
+    _multi: null,
+    itemDataVersion: {major: 0, minor: 0},
+    answer: null,
+};
+
+export const labelImageItem: PerseusItem = {
+    answerArea: {
+        calculator: false,
+        chi2Table: false,
+        periodicTable: false,
+        tTable: false,
+        zTable: false,
+    },
+    _multi: null,
+    answer: null,
+    hints: [],
+    itemDataVersion: {major: 0, minor: 1},
+    question: {
+        content:
+            "Catherine created a chart and a bar graph to show how many dogs of each breed the animal shelter placed into good homes last year. \n\nDog breed  | Number of dogs \n:- | :-: \nBulldog | $32$ \nGreyhound | $72$ \nMastiff | $56$ \nCollie | $40$ \n\n**Label each bar on the bar graph.**\n\n[[☃ label-image 1]]\n\n\n\n",
+        images: {
+            "web+graphie://ka-perseus-graphie.s3.amazonaws.com/2f60b533892fe6cb9351f704ffdada8ae4bc655c":
+                {height: 365, width: 503},
+            "web+graphie://ka-perseus-graphie.s3.amazonaws.com/75f937c6ea133d655dd9f698a58182efd6cc85d4":
+                {height: 293, width: 331},
+        },
+        widgets: {
+            "label-image 1": ({
+                alignment: "default",
+                graded: true,
+                static: false,
+                type: "label-image",
+                version: {major: 0, minor: 0},
+                options: {
+                    choices: ["Bulldog", "Greyhound", "Mastiff", "Collie"],
+                    hideChoicesFromInstructions: true,
+                    imageAlt:
+                        "A bar graph with four bar lines shows the horizontal axis labeled Dog breed and the vertical axis labeled Number of dogs. The vertical axis is labeled from the bottom of the axis to the top of the axis as follows: 0, 8, 16, 24, 32, 40, 48, 56, 64, 72, and 80. The horizontal axis has, from left to right, four unlabeled bar lines as follows: the first unlabeled bar line extends to 56, the second unlabeled bar line extends to 72, the third unlabeled bar line extends to 40, and the fourth unlabeled bar line extends to 32.",
+                    imageHeight: 293,
+                    imageUrl:
+                        "web+graphie://ka-perseus-graphie.s3.amazonaws.com/64ace45942546183c3dc842cb0e9e4f64a312727",
+                    imageWidth: 331,
+                    markers: [
+                        {
+                            answers: ["Bulldog"],
+                            label: "The fourth unlabeled bar line.",
+                            x: 87.3,
+                            y: 90.2,
+                        },
+                        {
+                            answers: ["Collie"],
+                            label: "The third unlabeled bar line.",
+                            x: 67.7,
+                            y: 90.5,
+                        },
+                        {
+                            answers: ["Greyhound"],
+                            label: "The second unlabeled bar line.",
+                            x: 47.7,
+                            y: 90.2,
+                        },
+                        {
+                            answers: ["Mastiff"],
+                            label: "The first unlabeled bar line.",
+                            x: 27.8,
+                            y: 90.5,
+                        },
+                    ],
+                    multipleAnswers: false,
+                    static: false,
+                },
+            }: LabelImageWidget),
+        },
+    },
+};
+
+// Note that if this item is used, you _must_ first register the MockWidget
+export const mockedItem: PerseusItem = {
+    // The mock widget type is not part of the PerseusWidget type union (and
+    // we don't want to make it such to avoid polluting our production types
+    // for test purposes) so we force Flow to accept it here.
+    question: (({
+        content:
+            "Mock widget ==> [[\u2603 mock-widget 1]] [[\u2603 mock-widget 2]] [[\u2603 mock-widget 3]] [[\u2603 mock-widget 4]]",
+        images: {},
+        widgets: {
+            "mock-widget 1": {
+                graded: true,
+                version: {major: 0, minor: 0},
+                static: false,
+                type: "mock-widget",
+                options: {static: false, smiling: true},
+                alignment: "default",
+            },
+            "mock-widget 2": {
+                graded: true,
+                version: {major: 0, minor: 0},
+                static: false,
+                type: "mock-widget",
+                options: {static: false, smiling: false},
+                alignment: "default",
+            },
+            "mock-widget 3": {
+                graded: true,
+                version: {major: 0, minor: 0},
+                static: false,
+                type: "mock-widget",
+                options: {static: false, smiling: true},
+                alignment: "default",
+            },
+            "mock-widget 4": {
+                graded: true,
+                version: {major: 0, minor: 0},
+                static: false,
+                type: "mock-widget",
+                options: {static: false, smiling: false},
+                alignment: "default",
+            },
+        },
+    }: any): PerseusRenderer),
+    hints: [],
+    answerArea: null,
+    _multi: null,
+    itemDataVersion: {major: 0, minor: 0},
+    answer: null,
+};

package/src/__testdata__/renderer_testdata.js

@@ -0,0 +1,123 @@
+// @flow
+
+import type {
+    DropdownWidget,
+    ImageWidget,
+    InputNumberWidget,
+    PerseusRenderer,
+} from "../perseus-types.js";
+
+export const dropdownWidget: DropdownWidget = {
+    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 imageWidget: ImageWidget = {
+    alignment: "block",
+    graded: true,
+    options: {
+        alt: "A number line labeled 200 to 300 with tick marks at every 5 units. The tick marks at 200, 210, 220, 230, 240, 250, 260, 270, 280, 290, and 300 are labeled. A red circle labeled A is between 220 tick mark and 230 tick mark.",
+        backgroundImage: {
+            height: 80,
+            url: "web+graphie://ka-perseus-graphie.s3.amazonaws.com/3351ccf19e60c28a1d08664f5c16defa76ed0348",
+            width: 380,
+        },
+    },
+    static: false,
+    type: "image",
+    version: {major: 0, minor: 0},
+};
+
+export const inputNumberWidget: InputNumberWidget = {
+    version: {
+        major: 0,
+        minor: 0,
+    },
+    type: "input-number",
+    graded: true,
+    alignment: "default",
+    options: {
+        maxError: 0.1,
+        inexact: false,
+        value: 0.3333333333333333,
+        simplify: "optional",
+        answerType: "rational",
+        size: "normal",
+    },
+};
+
+export const question1: PerseusRenderer = {
+    content:
+        "The total number of boxes the forklift can carry is [[☃ dropdown 1]] $60$.",
+    images: {},
+    widgets: {"dropdown 1": dropdownWidget},
+};
+
+export const question2: PerseusRenderer = {
+    content:
+        "Denis baked a peach pie and cut it into $3$ equal-sized pieces.  Denis's dad eats $1$ section of the pie.  \n\n**What fraction of the pie did Denis's dad eat?**  \n![](https://ka-perseus-graphie.s3.amazonaws.com/74a2b7583a2c26ebfb3ad714e29867541253fc97.png)    \n[[\u2603 input-number 1]]  \n\n\n\n",
+    images: {
+        "https://ka-perseus-graphie.s3.amazonaws.com/74a2b7583a2c26ebfb3ad714e29867541253fc97.png":
+            {
+                width: 200,
+                height: 200,
+            },
+    },
+    widgets: {"input-number 1": inputNumberWidget},
+};
+
+// Note that if this item is used, you _must_ first register the MockWidget
+export const mockedItem: PerseusRenderer = (({
+    // The mock widget type is not part of the PerseusWidget type union (and
+    // we don't want to make it such to avoid polluting our production types
+    // for test purposes) so we force Flow to accept it here.
+    content:
+        "Mock widgets ==> [[\u2603 mock-widget 1]] [[\u2603 mock-widget 2]] [[\u2603 mock-widget 3]]",
+    images: {},
+    widgets: {
+        "mock-widget 1": {
+            graded: true,
+            version: {major: 0, minor: 0},
+            static: false,
+            type: "mock-widget",
+            options: {static: false, smiling: true},
+            alignment: "default",
+        },
+        "mock-widget 2": {
+            graded: true,
+            version: {major: 0, minor: 0},
+            static: false,
+            type: "mock-widget",
+            options: {static: false, smiling: false},
+            alignment: "default",
+        },
+        "mock-widget 3": {
+            graded: true,
+            version: {major: 0, minor: 0},
+            static: false,
+            type: "mock-widget",
+            options: {static: false, smiling: true},
+            alignment: "default",
+        },
+    },
+}: any): PerseusRenderer);