@khanacademy/perseus 3.0.0 → 4.0.0

package/src/widgets/__testdata__/grapher_testdata.js

@@ -1,376 +0,0 @@
-// @flow
-
-import type {PerseusRenderer} from "../../perseus-types.js";
-
-export const absoluteValueQuestion: PerseusRenderer = {
-    content:
-        "The graph of the function $h(x)=2|x|$ is shown on the grid below.\n\n**Graph the function $f(x)=2|x-8|+1$ in the interactive graph. **\n\n[[☃ grapher 1]]\n",
-    images: {
-        "web+graphie://ka-perseus-graphie.s3.amazonaws.com/ec054de491d5cfb3ef71c06d34bf2fb7ca7feb86":
-            {
-                width: 425,
-                height: 425,
-            },
-    },
-    widgets: {
-        "grapher 1": {
-            type: "grapher",
-            alignment: "default",
-            static: false,
-            graded: true,
-            options: {
-                correct: {
-                    type: "absolute_value",
-                    coords: [
-                        [8, 1],
-                        [7, 3],
-                    ],
-                },
-                availableTypes: ["absolute_value"],
-                graph: {
-                    editableSettings: ["graph", "snap", "image"],
-                    range: [
-                        [-10, 10],
-                        [-10, 10],
-                    ],
-                    labels: ["x", "y"],
-                    step: [1, 1],
-                    gridStep: [1, 1],
-                    snapStep: [1, 1],
-                    valid: true,
-                    backgroundImage: {
-                        url: "web+graphie://ka-perseus-graphie.s3.amazonaws.com/6fb60e5bad041fe69d3485d52b87030ddcc17ac8",
-                        width: 400,
-                        height: 400,
-                    },
-                    markings: "none",
-                    rulerLabel: "",
-                    rulerTicks: 10,
-                    showProtractor: false,
-                    showRuler: false,
-                },
-            },
-            version: {
-                major: 0,
-                minor: 0,
-            },
-        },
-    },
-};
-
-export const exponentialQuestion: PerseusRenderer = {
-    content:
-        "The interactive graph below contains the graph of $y=3^x$ as a dashed curve, with the points $(0,1)$ and $(1,3)$ highlighted.\n\n**Adjust the movable graph to draw $y=-2\\cdot 3^x+5$.**\n\n[[☃ grapher 1]]",
-    images: {},
-    widgets: {
-        "grapher 1": {
-            alignment: "default",
-            graded: true,
-            options: {
-                availableTypes: ["exponential"],
-                correct: {
-                    asymptote: [
-                        [-10, 5],
-                        [10, 5],
-                    ],
-                    coords: [
-                        [0, 3],
-                        [1, -1],
-                    ],
-                    type: "exponential",
-                },
-                graph: {
-                    backgroundImage: {
-                        height: 400,
-                        url: "web+graphie://ka-perseus-graphie.s3.amazonaws.com/9b46a2a967fc2d1bb7b22e610ba4449aee64d606",
-                        width: 400,
-                    },
-                    editableSettings: ["graph", "snap", "image"],
-                    gridStep: [1, 1],
-                    labels: ["x", "y"],
-                    markings: "none",
-                    range: [
-                        [-8, 8],
-                        [-8, 8],
-                    ],
-                    rulerLabel: "",
-                    rulerTicks: 10,
-                    showProtractor: false,
-                    showRuler: false,
-                    showTooltips: false,
-                    snapStep: [1, 1],
-                    step: [1, 1],
-                    valid: true,
-                },
-            },
-            static: false,
-            type: "grapher",
-            version: {
-                major: 0,
-                minor: 0,
-            },
-        },
-    },
-};
-
-export const linearQuestion: PerseusRenderer = {
-    content: "**Graph $5x+3y=15$.**\n\n[[☃ grapher 1]]",
-    images: {},
-    widgets: {
-        "grapher 1": {
-            type: "grapher",
-            alignment: "default",
-            static: false,
-            graded: true,
-            options: {
-                correct: {
-                    type: "linear",
-                    coords: [
-                        [0, 5],
-                        [3, 0],
-                    ],
-                },
-                availableTypes: ["linear"],
-                graph: {
-                    editableSettings: ["graph", "snap", "image"],
-                    range: [
-                        [-10, 10],
-                        [-10, 10],
-                    ],
-                    labels: ["x", "y"],
-                    step: [1, 1],
-                    gridStep: [1, 1],
-                    snapStep: [1, 1],
-                    valid: true,
-                    backgroundImage: {
-                        url: null,
-                    },
-                    markings: "graph",
-                    rulerLabel: "",
-                    rulerTicks: 10,
-                    showTooltips: false,
-                    showProtractor: false,
-                    showRuler: false,
-                },
-            },
-            version: {
-                major: 0,
-                minor: 0,
-            },
-        },
-    },
-};
-
-export const logarithmQuestion: PerseusRenderer = {
-    content:
-        "The interactive graph below contains the graph of $y=\\log_2(x)$ as a dashed curve, with the points $(1,0)$ and $(2,1)$ highlighted.\n\n**Adjust the movable graph to draw $y=4\\log_2(x+6)-7$.**\n\n[[☃ grapher 1]]",
-    images: {},
-    widgets: {
-        "grapher 1": {
-            alignment: "default",
-            graded: true,
-            options: {
-                availableTypes: ["logarithm"],
-                correct: {
-                    asymptote: [
-                        [-6, -10],
-                        [-6, 10],
-                    ],
-                    coords: [
-                        [-4, -3],
-                        [-5, -7],
-                    ],
-                    type: "logarithm",
-                },
-                graph: {
-                    backgroundImage: {
-                        height: 400,
-                        url: "web+graphie://ka-perseus-graphie.s3.amazonaws.com/ca5bbe65051d1e84dc6c0965865ce61402997946",
-                        width: 400,
-                    },
-                    editableSettings: ["graph", "snap", "image"],
-                    gridStep: [1, 1],
-                    labels: ["x", "y"],
-                    markings: "none",
-                    range: [
-                        [-8, 8],
-                        [-8, 8],
-                    ],
-                    rulerLabel: "",
-                    rulerTicks: 10,
-                    showProtractor: false,
-                    showRuler: false,
-                    showTooltips: false,
-                    snapStep: [1, 1],
-                    step: [1, 1],
-                    valid: true,
-                },
-            },
-            static: false,
-            type: "grapher",
-            version: {
-                major: 0,
-                minor: 0,
-            },
-        },
-    },
-};
-
-export const quadraticQuestion: PerseusRenderer = {
-    content:
-        "In conclusion, the vertex of the parabola is at\n\n$(3,-8)$\n\nand the zeros are\n\n$(5,0)$ and $(1,0)$\n\nIn order to graph, we need the vertex and another point. That other point can be one of the zeros we found, like $(1,0)$:\n\n[[☃ grapher 1]]",
-    images: {},
-    replace: false,
-    widgets: {
-        "grapher 1": {
-            alignment: "default",
-            graded: true,
-            options: {
-                availableTypes: ["quadratic"],
-                correct: {
-                    coords: [
-                        [3, -8],
-                        [1, 0],
-                    ],
-                    type: "quadratic",
-                },
-                graph: {
-                    backgroundImage: {
-                        url: null,
-                    },
-                    editableSettings: ["graph", "snap", "image"],
-                    gridStep: [1, 1],
-                    labels: ["x", "y"],
-                    markings: "graph",
-                    range: [
-                        [-10, 10],
-                        [-10, 10],
-                    ],
-                    rulerLabel: "",
-                    rulerTicks: 10,
-                    showProtractor: false,
-                    showRuler: false,
-                    showTooltips: false,
-                    snapStep: [1, 1],
-                    step: [1, 1],
-                    valid: true,
-                },
-            },
-            static: false,
-            type: "grapher",
-            version: {
-                major: 0,
-                minor: 0,
-            },
-        },
-    },
-};
-
-export const sinusoidQuestion: PerseusRenderer = {
-    content:
-        "###The answer\n\nWe found that the graph of $y=-4\\cos\\left(x\\right)+3$ has a minimum point at $(0,-1)$ and then intersects its midline at $\\left(\\dfrac{1}{2}\\pi,3\\right)$.\n\n[[☃ grapher 3]]\n  ",
-    images: {},
-    replace: false,
-    widgets: {
-        "grapher 3": {
-            alignment: "default",
-            graded: true,
-            options: {
-                availableTypes: ["sinusoid"],
-                correct: {
-                    coords: [
-                        [1, 3],
-                        [0, -1],
-                    ],
-                    type: "sinusoid",
-                },
-                graph: {
-                    backgroundImage: {
-                        height: 400,
-                        url: "web+graphie://ka-perseus-graphie.s3.amazonaws.com/72ac979a8315bfa2a1b802326d9c7f3447c10760",
-                        width: 400,
-                    },
-                    editableSettings: ["graph", "snap", "image"],
-                    gridStep: [1, 1],
-                    labels: ["x", "y"],
-                    markings: "none",
-                    range: [
-                        [-10, 10],
-                        [-10, 10],
-                    ],
-                    rulerLabel: "",
-                    rulerTicks: 10,
-                    showProtractor: false,
-                    showRuler: false,
-                    snapStep: [1, 1],
-                    step: [1, 1],
-                    valid: true,
-                },
-            },
-            static: false,
-            type: "grapher",
-            version: {
-                major: 0,
-                minor: 0,
-            },
-        },
-    },
-};
-
-export const multipleAvailableTypesQuestion: PerseusRenderer = {
-    content:
-        "Let $f(x)=- 2^{-x}-x+5$ and let $g(x)=3|x-1|-3$.  \n\nThe graph of $y=f(x)$ is shown below.\n\n**Use the interactive graph to sketch a graph of $y=g(x)$. **\n\n[[☃ grapher 1]]\n\n",
-    images: {},
-    widgets: {
-        "grapher 1": {
-            alignment: "default",
-            graded: true,
-            options: {
-                availableTypes: [
-                    "linear",
-                    "absolute_value",
-                    "quadratic",
-                    "exponential",
-                    "logarithm",
-                ],
-                correct: {
-                    coords: [
-                        [1, -3],
-                        [2, 0],
-                    ],
-                    type: "absolute_value",
-                },
-                graph: {
-                    backgroundImage: {
-                        height: 400,
-                        url: "web+graphie://ka-perseus-graphie.s3.amazonaws.com/1c79f8ae7a226fc3dedd9218cf14810e1580424f",
-                        width: 400,
-                    },
-                    editableSettings: ["graph", "snap", "image"],
-                    gridStep: [1, 1],
-                    labels: ["x", "y"],
-                    markings: "graph",
-                    range: [
-                        [-10, 10],
-                        [-10, 10],
-                    ],
-                    rulerLabel: "",
-                    rulerTicks: 10,
-                    showProtractor: false,
-                    showRuler: false,
-                    snapStep: [1, 1],
-                    step: [1, 1],
-                    valid: true,
-                },
-            },
-            static: false,
-            type: "grapher",
-            version: {
-                major: 0,
-                minor: 0,
-            },
-        },
-    },
-};
-
-// export const tangentQuestion:PerseusRenderer = {}

package/src/widgets/__testdata__/group_testdata.js

@@ -1,156 +0,0 @@
-// @flow
-import type {PerseusRenderer} from "../../perseus-types.js";
-
-export const question1: PerseusRenderer = {
-    content:
-        "![](https://ka-perseus-graphie.s3.amazonaws.com/3e6d0981127dea205c2becc0ead24702fbe862a1.png)\n\n=====\n\n[[☃ group 1]]\n\n[[☃ group 2]]",
-    images: {
-        "https://ka-perseus-graphie.s3.amazonaws.com/3e6d0981127dea205c2becc0ead24702fbe862a1.png":
-            {height: 480, width: 428},
-    },
-    widgets: {
-        "group 1": {
-            graded: true,
-            options: {
-                content:
-                    "**In one week, how many more hours are in the periods with a $35$ percent discount than in the periods with the regular price?**\n\n[[☃ radio 1]]",
-                images: {},
-                widgets: {
-                    "radio 1": {
-                        graded: true,
-                        options: {
-                            choices: [
-                                {content: "$45$", correct: false},
-                                {content: "$42$", correct: false},
-                                {
-                                    content: "$30$",
-                                    correct: false,
-                                    clue: "Here's a clue, this isn't the correct answer!",
-                                },
-                                {content: "$18$", correct: false},
-                                {content: "$15$", correct: true},
-                            ],
-                            displayCount: null,
-                            multipleSelect: false,
-                            noneOfTheAbove: false,
-                            onePerLine: true,
-                            randomize: false,
-                        },
-                        type: "radio",
-                        version: {major: 0, minor: 0},
-                    },
-                },
-            },
-            type: "group",
-            version: {major: 0, minor: 0},
-        },
-        "group 2": {
-            graded: true,
-            options: {
-                content:
-                    "**What is $\\redD{\\text{A}}$ rounded to the nearest ten?**   \n\n[[☃ numeric-input 1]]\n\n**What is $\\redD{\\text{A}}$ rounded to the nearest hundred?**   \n\n[[☃ numeric-input 2]]\n\n[[☃ image 1]]\n\n",
-                images: {
-                    "web+graphie://ka-perseus-graphie.s3.amazonaws.com/3351ccf19e60c28a1d08664f5c16defa76ed0348":
-                        {height: 80, width: 380},
-                },
-                widgets: {
-                    "image 1": {
-                        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,
-                            },
-                            box: [380, 80],
-                            caption: "",
-                            labels: [],
-                            range: [
-                                [0, 10],
-                                [0, 10],
-                            ],
-                            static: false,
-                            title: "",
-                        },
-                        static: false,
-                        type: "image",
-                        version: {major: 0, minor: 0},
-                    },
-                    "numeric-input 1": {
-                        alignment: "default",
-                        graded: true,
-                        options: {
-                            answers: [
-                                {
-                                    maxError: null,
-                                    message: "",
-                                    simplify: "required",
-                                    status: "correct",
-                                    strict: false,
-                                    value: 230,
-                                },
-                            ],
-                            coefficient: false,
-                            labelText: "value rounded to the nearest ten",
-                            multipleNumberInput: false,
-                            rightAlign: false,
-                            size: "normal",
-                            static: false,
-                        },
-                        static: false,
-                        type: "numeric-input",
-                        version: {major: 0, minor: 0},
-                    },
-                    "numeric-input 2": {
-                        alignment: "default",
-                        graded: true,
-                        options: {
-                            answers: [
-                                {
-                                    maxError: null,
-                                    message: "",
-                                    simplify: "required",
-                                    status: "correct",
-                                    strict: false,
-                                    value: 200,
-                                },
-                            ],
-                            coefficient: false,
-                            labelText: "value rounded to the nearest hundred",
-                            multipleNumberInput: false,
-                            rightAlign: false,
-                            size: "normal",
-                            static: false,
-                        },
-                        static: false,
-                        type: "numeric-input",
-                        version: {major: 0, minor: 0},
-                    },
-                },
-            },
-            type: "group",
-            version: {major: 0, minor: 0},
-        },
-        "radio 1": {
-            graded: true,
-            options: {
-                choices: [
-                    {content: "", correct: false},
-                    {content: "", correct: false},
-                    {content: "", correct: false},
-                    {content: "", correct: false},
-                    {content: "", correct: true},
-                ],
-                displayCount: null,
-                multipleSelect: false,
-                noneOfTheAbove: false,
-                onePerLine: true,
-                randomize: false,
-            },
-            type: "radio",
-            version: {major: 0, minor: 0},
-        },
-    },
-};

package/src/widgets/__testdata__/iframe_testdata.js

@@ -1,36 +0,0 @@
-// @flow
-import type {PerseusRenderer} from "../../perseus-types.js";
-
-export const question1: PerseusRenderer = {
-    content: "Try matching the target image\n[[\u2603 iframe 1]]\n",
-    images: {
-        "https://ka-perseus-images.s3.amazonaws.com/8e518475587bc83767c72b49ff094e5870c3edc3.png":
-            {
-                width: 760,
-                height: 688,
-            },
-    },
-    widgets: {
-        "iframe 1": {
-            graded: true,
-            version: {major: 0, minor: 0},
-            static: false,
-            type: "iframe",
-            options: {
-                settings: [
-                    {name: "hue", value: "210"},
-                    {name: "subdivisions", value: "0"},
-                    {name: "zoom", value: "2"},
-                    {name: "seed", value: "6"},
-                    {name: "", value: ""},
-                ],
-                url: "4960944252",
-                height: "410",
-                width: "410",
-                allowFullScreen: true,
-                static: false,
-            },
-            alignment: "default",
-        },
-    },
-};

package/src/widgets/__testdata__/image_testdata.js

@@ -1,38 +0,0 @@
-// @flow
-
-import type {ImageWidget} from "../../perseus-types.js";
-
-export const question = {
-    content:
-        "[[☃ image 1]]\n\n=====\n\nA quilter wants to make the design shown at left using the Golden Ratio. Specifically, he wants the ratio of the triangle heights $A:B$ and $B:C$ to each equal $1.62$. If the quilter makes the triangle height $A=8\\ \\text{in}$, approximately how tall should he make triangle height $C$?",
-    images: {
-        "https://ka-perseus-graphie.s3.amazonaws.com/511d44e43c38d8c76812517e9c6f48e64ea42b20.png":
-            {height: 377, width: 460},
-    },
-    widgets: {
-        "image 1": ({
-            alignment: "block",
-            graded: true,
-            options: {
-                alt: "An array of isosceles triangles. A triangle has height A. Two smaller triangle, one with height B and one with height C, have approximately the same combined height as A.",
-                title: "Image Title",
-                caption: "Image Caption",
-                backgroundImage: {
-                    height: 345,
-                    url: "web+graphie://ka-perseus-graphie.s3.amazonaws.com/2ac8f769a7323f55e41c12cfa39e774be08bc138",
-                    width: 420,
-                },
-                box: [420, 345],
-                labels: [],
-                range: [
-                    [0, 10],
-                    [0, 10],
-                ],
-                static: false,
-            },
-            static: false,
-            type: "image",
-            version: {major: 0, minor: 0},
-        }: ImageWidget),
-    },
-};

package/src/widgets/__testdata__/input-number_testdata.js

@@ -1,73 +0,0 @@
-// @flow
-import type {PerseusRenderer, InputNumberWidget} from "../../perseus-types.js";
-
-export const question1: 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": ({
-            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",
-            },
-        }: InputNumberWidget),
-    },
-};
-
-export const question2: PerseusRenderer = {
-    content:
-        "A washing machine is being redesigned to handle a greater volume of water.  One part is a pipe with a radius of $3 \\,\\text{cm}$ and a length of $11\\,\\text{cm}$.  It gets replaced with a pipe of radius $4\\,\\text{cm}$, and the same length. \n\n**How many more cubic centimeters of water can the new pipe hold?**\n\n [[\u2603 input-number 1]] $\\text{cm}^3$",
-    images: Object.freeze({}),
-    widgets: {
-        "input-number 1": ({
-            type: "input-number",
-            graded: true,
-            options: {
-                maxError: 0.1,
-                inexact: false,
-                value: 241.90263432641407,
-                simplify: "required",
-                answerType: "pi",
-                size: "normal",
-            },
-        }: InputNumberWidget),
-    },
-};
-
-export const question3: PerseusRenderer = {
-    content:
-        'Akshat works in a hospital lab.\n\nTo project blood quantities, he wants to know the probability that more than $1$ of the next $7$ donors will have type-A blood. From his previous work, Sorin knows that $\\dfrac14$ of donors have type-A blood.\n\nAkshat uses a computer to produce many samples that simulate the next $7$ donors. The first $8$ samples are shown in the table below where "$\\text{\\red{A}}$" represents a donor *with* type-A blood, and "$\\text{\\blue{Z}}$" represents a donor *without* type-A blood.\n\n**Based on the samples below, estimate the probability that  more than $1$ of the next $7$ donors will have type-A blood.** If necessary, round your answer to the nearest hundredth. [[\u2603 input-number 1]]\n\n*Note: This a small sample to practice with. A larger sample could give a much better estimate.*\n\n | Sample |\n:-: | :-: | \n$1$ | $\\text{\\blue{Z}, \\blue{Z}, \\blue{Z}, \\blue{Z}, \\red{A}, \\blue{Z}, \\blue{Z}}$\n$2$ | $\\text{\\blue{Z}, \\blue{Z}, \\blue{Z}, \\blue{Z}, \\blue{Z}, \\blue{Z}, \\blue{Z}}$\n$3$ | $\\text{\\blue{Z}, \\blue{Z}, \\red{A}, \\blue{Z}, \\blue{Z}, \\blue{Z}, \\blue{Z}}$\n$4$ | $\\text{\\red{A}, \\red{A}, \\blue{Z}, \\blue{Z}, \\blue{Z}, \\blue{Z}, \\blue{Z}}$\n$5$ | $\\text{\\blue{Z}, \\blue{Z}, \\blue{Z}, \\blue{Z}, \\blue{Z}, \\red{A}, \\red{A}}$\n$6$ | $\\text{\\blue{Z}, \\red{A}, \\red{A}, \\blue{Z}, \\blue{Z}, \\blue{Z}, \\blue{Z}}$\n$7$ | $\\text{\\blue{Z}, \\red{A}, \\blue{Z}, \\blue{Z}, \\blue{Z}, \\red{A}, \\blue{Z}}$\n$8$ | $\\text{\\blue{Z}, \\blue{Z}, \\blue{Z}, \\blue{Z}, \\red{A}, \\blue{Z}, \\blue{Z}}$\n\n',
-    images: Object.freeze({}),
-    widgets: {
-        "input-number 1": ({
-            type: "input-number",
-            graded: true,
-            options: {
-                maxError: 0.1,
-                inexact: false,
-                value: 0.5,
-                simplify: "optional",
-                answerType: "percent",
-                size: "small",
-            },
-        }: InputNumberWidget),
-    },
-};