@khanacademy/perseus 0.0.1 → 0.2.1

package/src/widgets/__testdata__/grapher_testdata.js

@@ -0,0 +1,376 @@
+// @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

@@ -0,0 +1,156 @@
+// @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

@@ -0,0 +1,36 @@
+// @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

@@ -0,0 +1,38 @@
+// @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

@@ -0,0 +1,73 @@
+// @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),
+    },
+};