@khanacademy/perseus 0.0.1 → 0.2.1

package/dist/strings.js

@@ -5,50 +5,152 @@
   */
  
 module.exports = [
-    i18n._("Cosine", {}),
-    i18n._("Cube", {}),
-    i18n._("Cube root", {}),
-    i18n._("Custom exponent", {}),
-    i18n._("Decimal", {}),
-    i18n._("Delete", {}),
-    i18n._("Dismiss", {}),
-    i18n._("Divide", {}),
-    i18n._("Down arrow", {}),
-    i18n._("Equals sign", {}),
-    i18n._("foo", {}),
-    i18n._("Fraction, excluding the current expression", {}),
-    i18n._("Fraction, with current expression in numerator", {}),
-    i18n._("Greater than or equal to sign", {}),
-    i18n._("Greater than sign", {}),
-    i18n._("Left arrow", {}),
-    i18n._("Left parenthesis", {}),
-    i18n._("Less than or equal to sign", {}),
-    i18n._("Less than sign", {}),
-    i18n._("Logarithm with base 10", {}),
-    i18n._("Logarithm with custom base", {}),
-    i18n._("Math input box", {}),
-    i18n._("Minus", {}),
-    i18n._("Multiply", {}),
-    i18n._("Natural logarithm", {}),
-    i18n._("Navigate right into the numerator of a fraction", {}),
-    i18n._("Navigate right out of a base", {}),
-    i18n._("Navigate right out of a set of parentheses", {}),
-    i18n._("Navigate right out of an exponent", {}),
-    i18n._("Navigate right out of the denominator of a fraction", {}),
-    i18n._("Navigate right out of the numerator and into the denominator", {}),
-    i18n._("Negative", {}),
-    i18n._("Not-equals sign", {}),
-    i18n._("Percent", {}),
-    i18n._("Pi", {}),
-    i18n._("Plus", {}),
-    i18n._("Radical with custom root", {}),
-    i18n._("Right arrow", {}),
-    i18n._("Right parenthesis", {}),
-    i18n._("Sine", {}),
-    i18n._("Square", {}),
-    i18n._("Square root", {}),
-    i18n._("Tangent", {}),
-    i18n._("Tap with one or two fingers to open keyboard", {}),
-    i18n._("Theta", {}),
-    i18n._("Up arrow", {}),
+    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._("Cross out", {}),
+    i18n._("Cross out Choice %(letter)s", {}),
+    // 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._("Drag handles to make graph", {}),
+    i18n._("End of reading passage.", {}),
+    i18n._("entered in an invalid answer.", {}),
+    i18n.$_("Error rendering: %(error)s", {}),
+    i18n._("Explain", {}),
+    i18n._("False", {}),
+    i18n._("Get another hint", {}),
+    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: 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._("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.ngettext("Moves: %(num)s","Moves: %(num)s", {}),
+    i18n._("Next question", {}),
+    i18n._("No", {}),
+    i18n._("None of the above", {}),
+    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._("Please choose the correct number of answers.", {}),
+    i18n.$_("Please make sure the number of divisions is in the range %(divRangeString)s.", {}),
+    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: 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._("Skip to %(title)s", {}),
+    i18n._("Something went wrong.", {}),
+    i18n._("Sorry, I don't understand that!", {}),
+    i18n._("Switch direction", {}),
+    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._("That answer is numerically incorrect.", {}),
+    i18n._("The symbol %(questionSymbol)s indicates that question %(questionNumber)s references this portion of the passage.", {}),
+    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._("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.2.1",
     "description": "Core Perseus API (includes renderers and widgets)",
     "module": "dist/es/index.js",
     "main": "dist/index.js",
@@ -12,20 +12,66 @@
         "test": "bash -c 'yarn --silent --cwd \"../..\" test ${@:0} $($([[ ${@: -1} = -* ]] || [[ ${@: -1} = bash ]]) && echo $PWD)'"
     },
     "dependencies": {
-        "@khanacademy/math-input": "^0.4.1"
+        "@khanacademy/kmath": "0.0.5",
+        "@khanacademy/math-input": "^0.5.0",
+        "@khanacademy/kas": "^0.2.3",
+        "@khanacademy/simple-markdown": "^0.8.1",
+        "mathquill": "git+https://git@github.com/Khan/mathquill.git#a9ae54e057c5c1acc8244a5627acbff29901d992"
     },
     "devDependencies": {
+        "@khanacademy/wonder-blocks-button": "2.11.5",
+        "@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-layout": "1.4.9",
+        "@khanacademy/wonder-blocks-link": "^3.8.5",
+        "@khanacademy/wonder-blocks-popover": "^1.1.10",
+        "@khanacademy/wonder-blocks-progress-spinner": "1.1.31",
+        "@khanacademy/wonder-blocks-spacing": "^3.0.5",
+        "@khanacademy/wonder-blocks-tooltip": "^1.3.10",
+        "@khanacademy/wonder-blocks-typography": "1.1.31",
+        "@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",
+        "lodash.debounce": "^4.0.8",
         "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-button": "2.11.5",
+        "@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-layout": "1.4.9",
+        "@khanacademy/wonder-blocks-link": "^3.8.5",
+        "@khanacademy/wonder-blocks-popover": "^1.1.10",
+        "@khanacademy/wonder-blocks-progress-spinner": "1.1.31",
+        "@khanacademy/wonder-blocks-spacing": "^3.0.5",
+        "@khanacademy/wonder-blocks-tooltip": "^1.3.10",
+        "@khanacademy/wonder-blocks-typography": "1.1.31",
+        "@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",
+        "lodash.debounce": "^4.0.8",
+        "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,35 @@
+# Perseus
+
+<p align="center"><img src="logo.png" alt="perseus logo" width="150px"/></p>
+
+<p align="center">Perseus Exercise Renderer</p>
+
+Perseus is Khan Academy's exercise system. This repo contains the code needed to take a problem in the perseus format and present it, allow interaction, and grade the result of a learner's work.
+
+<p align="center"><img src="sample.png" alt="sample of perseus in use" height="150px"/></p>
+
+This repo is a constellation of sub-repos for showing exercise content. Please see individual projects in in the `packages/` folder for more information about each sub-project.
+
+## Getting started
+
+### Prerequisites
+
+- [Node.JS v12](https://nodejs.org/download/release/v10.18.1/)
+- [Yarn](https://yarnpkg.com/lang/en/docs/install/)
+
+### Installation
+
+To install perseus, you need to run the following commands:
+
+#### `yarn install`
+
+Installs project dependencies
+
+## Contributing
+
+See [CONTRIBUTING.md](./CONTRIBUTING.md) for a walkthrough of how some
+of the Perseus code works and how to extend it.
+
+## License
+
+[MIT License](http://opensource.org/licenses/MIT)

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