@khanacademy/perseus 0.0.1 → 0.1.0

package/src/widgets/__testdata__/interactive-graph_testdata.js

@@ -0,0 +1,646 @@
+// @flow
+
+import type {Coord} from "../../interactive2/types.js";
+import type {PerseusRenderer} from "../../perseus-types.js";
+
+// Data for the interactive graph widget
+
+export const angleQuestion: PerseusRenderer = {
+    content:
+        "**Drag the vertex of the angle to place the vertex at point $\\text{A}$.**  \n\n**Drag another point on the angle to make one of the rays go through point $\\text{B}$.**\n\n**Make the other ray go through one of the unlabeled black points to create an acute angle.**  \n*The arc symbol near the vertex indicates the angle being measured.*\n\n[[☃ interactive-graph 1]]",
+    images: {},
+    widgets: {
+        "interactive-graph 1": {
+            alignment: "default",
+            graded: true,
+            options: {
+                backgroundImage: {
+                    bottom: 0,
+                    height: 400,
+                    left: 0,
+                    scale: 1,
+                    url: "https://ka-perseus-graphie.s3.amazonaws.com/807ea77cf7031c1b9a45694083f05b5e09b01946.png",
+                    width: 400,
+                },
+                correct: {
+                    allowReflexAngles: false,
+                    angleOffsetDeg: 1,
+                    coords: [
+                        [2.2059851900220853, 2.2059851900220853],
+                        [-2, -2],
+                        [-4.973144353700384, 5.004289159600586],
+                    ],
+                    snapDegrees: 4,
+                    type: "angle",
+                },
+                graph: {
+                    allowReflexAngles: false,
+                    angleOffsetDeg: 1,
+                    snapDegrees: 4,
+                    type: "angle",
+                },
+                gridStep: [1, 1],
+                labels: ["x", "y"],
+                markings: "none",
+                range: [
+                    [-10, 10],
+                    [-10, 10],
+                ],
+                rulerLabel: "",
+                rulerTicks: 10,
+                showProtractor: false,
+                showRuler: false,
+                snapStep: [0.5, 0.5],
+                step: [1, 1],
+            },
+            static: false,
+            type: "interactive-graph",
+            version: {
+                major: 0,
+                minor: 0,
+            },
+        },
+    },
+};
+
+export const circleQuestion: PerseusRenderer = {
+    content:
+        "**Graph the circle $x^2+y^2+4x+8y+16=0$.**\n\n[[☃ interactive-graph 1]]",
+    images: {},
+    widgets: {
+        "interactive-graph 1": {
+            type: "interactive-graph",
+            alignment: "default",
+            static: false,
+            graded: true,
+            options: {
+                step: [1, 1],
+                markings: "graph",
+                labels: ["x", "y"],
+                showProtractor: false,
+                showRuler: false,
+                rulerLabel: "",
+                rulerTicks: 10,
+                range: [
+                    [-10, 10],
+                    [-10, 10],
+                ],
+                gridStep: [1, 1],
+                snapStep: [1, 1],
+                graph: {
+                    type: "circle",
+                },
+                correct: {
+                    type: "circle",
+                    center: [-2, -4],
+                    radius: 2,
+                },
+            },
+            version: {
+                major: 0,
+                minor: 0,
+            },
+        },
+    },
+};
+
+export const linearQuestion: PerseusRenderer = {
+    content:
+        "**Draw the line of reflection that will map $\\triangle{SIM}$ onto the other triangle below.**\n\n\n[[☃ interactive-graph 1]]",
+    images: {},
+    widgets: {
+        "interactive-graph 1": {
+            graded: true,
+            options: {
+                backgroundImage: {
+                    bottom: 0,
+                    height: 425,
+                    left: 0,
+                    scale: 1,
+                    url: "web+graphie://ka-perseus-graphie.s3.amazonaws.com/9b7c68fb9350531c023460f4abdc395522536b5a",
+                    width: 425,
+                },
+                correct: {
+                    coords: [
+                        [-1, 1],
+                        [0, -2],
+                    ],
+                    type: "linear",
+                },
+                graph: {
+                    type: "linear",
+                },
+                gridStep: [1, 1],
+                labels: ["x", "y"],
+                markings: "none",
+                range: [
+                    [-10, 10],
+                    [-10, 10],
+                ],
+                rulerLabel: "",
+                rulerTicks: 10,
+                showProtractor: false,
+                showRuler: false,
+                snapStep: [0.5, 0.5],
+                step: [1, 1],
+            },
+            type: "interactive-graph",
+            version: {
+                major: 0,
+                minor: 0,
+            },
+        },
+    },
+};
+
+export const linearSystemQuestion: PerseusRenderer = {
+    content:
+        "**Drag the lines so one line goes through points $\\text{A}$ and $\\text{B}$, and the other line goes through points $\\text{C}$  and $\\text{D}$.**  \n[[☃ interactive-graph 1]]",
+    images: {},
+    widgets: {
+        "interactive-graph 1": {
+            type: "interactive-graph",
+            alignment: "default",
+            static: false,
+            graded: true,
+            options: {
+                step: [1, 1],
+                backgroundImage: {
+                    url: "https://ka-perseus-graphie.s3.amazonaws.com/6a5f70a361f0f1baeef61eee6726eef944176663.png",
+                    scale: "1",
+                    bottom: 0,
+                    left: 0,
+                    width: 400,
+                    height: 400,
+                },
+                markings: "none",
+                labels: ["x", "y"],
+                showProtractor: false,
+                showRuler: false,
+                rulerLabel: "",
+                rulerTicks: 10,
+                range: [
+                    [-10, 10],
+                    [-10, 10],
+                ],
+                gridStep: [1, 1],
+                snapStep: [0.5, 0.5],
+                graph: {
+                    type: "linear-system",
+                },
+                correct: {
+                    type: "linear-system",
+                    coords: [
+                        [
+                            [-7, 7],
+                            [0, -2],
+                        ],
+                        [
+                            [-3, -7],
+                            [7, -3],
+                        ],
+                    ],
+                },
+            },
+            version: {
+                major: 0,
+                minor: 0,
+            },
+        },
+    },
+};
+
+export const pointQuestion: PerseusRenderer = {
+    content:
+        "We want to find the zeros of this polynomial:\n\n$p(x)=x(2x+5)(x+1)$\n\n**Plot all the zeros ($x$-intercepts) of the polynomial in the interactive graph.**\n\n[[\u2603 interactive-graph 1]]",
+    images: {},
+    widgets: {
+        "interactive-graph 1": {
+            graded: true,
+            version: {
+                major: 0,
+                minor: 0,
+            },
+            static: false,
+            type: "interactive-graph",
+            options: {
+                rulerTicks: 10,
+                showProtractor: false,
+                graph: {
+                    type: "point",
+                    numPoints: "unlimited",
+                },
+                snapStep: [0.5, 0.5],
+                labels: ["x", "y"],
+                step: [1, 1],
+                gridStep: [0.5, 0.5],
+                backgroundImage: {
+                    url: "web+graphie://ka-perseus-graphie.s3.amazonaws.com/9e825947f778170369f22da5f87239cbf4c1ebe3",
+                    width: 425,
+                    height: 425,
+                },
+                range: [
+                    [-4, 4],
+                    [-4, 4],
+                ],
+                showRuler: false,
+                markings: "none",
+                showTooltips: false,
+                rulerLabel: "",
+                correct: {
+                    coords: [
+                        [0, 0],
+                        [-2.5, 0],
+                        [-1, 0],
+                    ],
+                    numPoints: "unlimited",
+                    type: "point",
+                },
+            },
+            alignment: "default",
+        },
+    },
+};
+
+export const polygonQuestion: PerseusRenderer = {
+    content:
+        "**Drag the vertices of the triangle below to draw a right triangle with side lengths $3$, $4$, and $5$.** \n[[\u2603 interactive-graph 1]] \n",
+    images: {},
+    widgets: {
+        "interactive-graph 1": {
+            graded: true,
+            version: {
+                major: 0,
+                minor: 0,
+            },
+            static: false,
+            type: "interactive-graph",
+            options: {
+                rulerTicks: 10,
+                showProtractor: false,
+                graph: {
+                    showSides: true,
+                    snapTo: "grid",
+                    type: "polygon",
+                },
+                snapStep: [0.25, 0.25],
+                labels: ["x", "y"],
+                step: [0.5, 0.5],
+                gridStep: [0.5, 0.5],
+                backgroundImage: {
+                    scale: 1,
+                    bottom: 0,
+                    url: "",
+                    height: 0,
+                    width: 0,
+                    left: 0,
+                },
+                range: [
+                    [-1, 6],
+                    [-1, 6],
+                ],
+                showRuler: false,
+                markings: "none",
+                showTooltips: false,
+                rulerLabel: "",
+                correct: {
+                    showSides: true,
+                    type: "polygon",
+                    coords: [
+                        [3.5, 2],
+                        [3.5, 5],
+                        [-0.5, 2],
+                    ],
+                    match: "congruent",
+                    snapTo: "grid",
+                },
+            },
+            alignment: "default",
+        },
+    },
+};
+
+export const rayQuestion: PerseusRenderer = {
+    content:
+        "**Move the ray so it has an endpoint at point $\\text{B}$ and goes through point $\\text{A}$. Then complete the statement below.**\n\n[[☃ interactive-graph 1]]",
+    images: {},
+    widgets: {
+        "interactive-graph 1": {
+            alignment: "default",
+            graded: true,
+            options: {
+                backgroundImage: {
+                    bottom: 0,
+                    height: 400,
+                    left: 0,
+                    scale: "1",
+                    url: "https://ka-perseus-graphie.s3.amazonaws.com/140993e12589b317f7bdbd667555ef1c48b26911.png",
+                    width: 400,
+                },
+                correct: {
+                    coords: [
+                        [5, 3],
+                        [-5, -5],
+                    ],
+                    type: "ray",
+                },
+                graph: {
+                    type: "ray",
+                },
+                gridStep: [1, 1],
+                labels: ["x", "y"],
+                markings: "none",
+                range: [
+                    [-10, 10],
+                    [-10, 10],
+                ],
+                rulerLabel: "",
+                rulerTicks: 10,
+                showProtractor: false,
+                showRuler: false,
+                snapStep: [0.5, 0.5],
+                step: [1, 1],
+            },
+            static: false,
+            type: "interactive-graph",
+            version: {
+                major: 0,
+                minor: 0,
+            },
+        },
+    },
+};
+
+export const segmentQuestion: PerseusRenderer = {
+    content:
+        "Line segment $\\overline{OG}$ is rotated $180^\\circ$ about the point $(-2,4)$.  \n\n**Draw the image of this rotation using the interactive graph.**\n\n*The direction of a rotation by a positive angle is counter-clockwise.* \n\n[[☃ interactive-graph 1]]\n\n",
+    images: {},
+    widgets: {
+        "interactive-graph 1": {
+            graded: true,
+            options: {
+                backgroundImage: {
+                    bottom: 0,
+                    height: 425,
+                    left: 0,
+                    scale: 1,
+                    url: "web+graphie://ka-perseus-graphie.s3.amazonaws.com/567155d84afcfa01baf0a44afd994fce3df17b5c",
+                    width: 425,
+                },
+                correct: {
+                    coords: [
+                        [
+                            [-7, 7],
+                            [2, 5],
+                        ],
+                    ],
+                    type: "segment",
+                },
+                graph: {
+                    type: "segment",
+                },
+                gridStep: [1, 1],
+                labels: ["x", "y"],
+                markings: "none",
+                range: [
+                    [-10, 10],
+                    [-10, 10],
+                ],
+                rulerLabel: "",
+                rulerTicks: 10,
+                showProtractor: false,
+                showRuler: false,
+                snapStep: [0.5, 0.5],
+                step: [1, 1],
+            },
+            type: "interactive-graph",
+            version: {
+                major: 0,
+                minor: 0,
+            },
+        },
+    },
+};
+
+export const sinusoidQuestion: PerseusRenderer = {
+    content:
+        "**Graph $h(x)=3\\sin(2x-\\pi)+2$ in the interactive widget.**  \n*Note that one moveable point always defines an extremum point in the graph and the other point always defines a neighbouring intersection with the midline.*\n\n[[☃ interactive-graph 1]]",
+    images: {},
+    widgets: {
+        "interactive-graph 1": {
+            type: "interactive-graph",
+            alignment: "default",
+            static: false,
+            graded: true,
+            options: {
+                step: [1, 1],
+                backgroundImage: {
+                    url: "https://ka-perseus-graphie.s3.amazonaws.com/ba6cf7327a7aaed2386ca00d48b6d554a357ac57.png",
+                    scale: 1,
+                    bottom: 0,
+                    left: 0,
+                    width: 425,
+                    height: 425,
+                },
+                markings: "none",
+                labels: ["x", "y"],
+                showProtractor: false,
+                showRuler: false,
+                showTooltips: false,
+                rulerLabel: "",
+                rulerTicks: 10,
+                range: [
+                    [-10, 10],
+                    [-10, 10],
+                ],
+                gridStep: [1, 1],
+                snapStep: [0.5, 0.5],
+                graph: {
+                    type: "sinusoid",
+                },
+                correct: {
+                    type: "sinusoid",
+                    coords: [
+                        [1, 2],
+                        [1.5, 5],
+                    ],
+                },
+            },
+            version: {
+                major: 0,
+                minor: 0,
+            },
+        },
+    },
+};
+
+export const questionsAndAnswers: $ReadOnlyArray<
+    [
+        PerseusRenderer,
+        $ReadOnlyArray<Coord>, // Correct answer
+        $ReadOnlyArray<Coord>, // Incorrect answer
+    ],
+> = [
+    [
+        polygonQuestion,
+        [
+            [5.5, 2],
+            [1.5, 5],
+            [1.5, 2],
+        ],
+        [
+            // [1, 2],
+            // [1, 3],
+            // [3, 3],
+            [5.0, 2],
+            [1.5, 5],
+            [1.5, 2],
+        ],
+    ],
+    [
+        {
+            content:
+                "**Plot the image of triangle $\\triangle ABC$ under a reflection across line $\\ell$.**\n\n[[\u2603 interactive-graph 1]]",
+            images: {},
+            widgets: {
+                "interactive-graph 1": {
+                    graded: true,
+                    version: {
+                        major: 0,
+                        minor: 0,
+                    },
+                    static: false,
+                    type: "interactive-graph",
+                    options: {
+                        rulerTicks: 10,
+                        showProtractor: false,
+                        graph: {
+                            type: "polygon",
+                        },
+                        snapStep: [1, 1],
+                        labels: ["x", "y"],
+                        step: [1, 1],
+                        gridStep: [1, 1],
+                        backgroundImage: {
+                            url: "web+graphie://ka-perseus-graphie.s3.amazonaws.com/1aa858afa68530210704235a0134a165b4b66d43",
+                            width: 400,
+                            height: 400,
+                        },
+                        range: [
+                            [-8, 8],
+                            [-8, 8],
+                        ],
+                        showRuler: false,
+                        markings: "none",
+                        showTooltips: false,
+                        rulerLabel: "",
+                        correct: {
+                            type: "polygon",
+                            coords: [
+                                [-6, -7],
+                                [1, -4],
+                                [-3, -4],
+                            ],
+                        },
+                    },
+                    alignment: "default",
+                },
+            },
+        },
+        [
+            [-6, -7],
+            [1, -4],
+            [-3, -4],
+        ],
+        [
+            [-8, -7],
+            [1, -4],
+            [-3, -4],
+        ],
+    ],
+    [
+        pointQuestion,
+        [
+            [0, 0],
+            [-2.5, 0],
+            [-1, 0],
+        ],
+        [
+            [3, 0],
+            [-2.5, 0],
+            [-1, 0],
+        ],
+    ],
+    [
+        {
+            content:
+                "The graph below contains quadrilateral $TREK$ and the point $P(-8,-6)$.  \n  \n**Draw the image of quadrilateral $TREK$ under a dilation whose center is $P$ and scale factor is $3$.**  \n  \n[[\u2603 interactive-graph 1]]",
+            images: {},
+            widgets: {
+                "interactive-graph 1": {
+                    graded: true,
+                    version: {
+                        major: 0,
+                        minor: 0,
+                    },
+                    static: false,
+                    type: "interactive-graph",
+                    options: {
+                        rulerTicks: 10,
+                        showProtractor: false,
+                        graph: {
+                            numSides: "unlimited",
+                            snapTo: "grid",
+                            type: "polygon",
+                            showAngles: false,
+                        },
+                        snapStep: [1, 1],
+                        labels: ["x", "y"],
+                        step: [2, 2],
+                        gridStep: [1, 1],
+                        backgroundImage: {
+                            scale: 1,
+                            bottom: 0,
+                            url: "web+graphie://ka-perseus-graphie.s3.amazonaws.com/a1b7a05c177742523250b64a3995c9b37aac3399",
+                            height: 425,
+                            width: 425,
+                            left: 0,
+                        },
+                        range: [
+                            [-12, 12],
+                            [-8, 16],
+                        ],
+                        showRuler: false,
+                        markings: "none",
+                        rulerLabel: "",
+                        correct: {
+                            numSides: "unlimited",
+                            type: "polygon",
+                            coords: [
+                                [-5, 0],
+                                [4, 15],
+                                [4, 0],
+                                [1, 3],
+                            ],
+                            showAngles: false,
+                            snapTo: "grid",
+                        },
+                    },
+                    alignment: "default",
+                },
+            },
+        },
+        [
+            [-5, 0],
+            [4, 15],
+            [4, 0],
+            [1, 3],
+        ],
+        [
+            [-5, 0],
+            [0, 15],
+            [4, 0],
+            [1, 3],
+        ],
+    ],
+];

package/src/widgets/__testdata__/matcher_testdata.js

@@ -0,0 +1,34 @@
+// @flow
+import type {PerseusRenderer} from "../../perseus-types.js";
+
+export const question1: PerseusRenderer = {
+    content:
+        "**Match each claim with its supporting evidence.**\n\n[[\u2603 matcher 1]]",
+    images: {},
+    widgets: {
+        "matcher 1": {
+            version: {major: 0, minor: 0},
+            type: "matcher",
+            graded: true,
+            options: {
+                labels: ["**Claims**", "**Evidence**"],
+                padding: true,
+                orderMatters: false,
+                right: [
+                    "Medium-sized stars typically exist for roughly 10 billion years",
+                    "The current trajectory of the Earth\u2019s tectonic plate movement",
+                    "The life cycle of medium-sized stars includes a red giant stage and ends in a whimper as a white dwarf",
+                    "Rapid escalation of greenhouse gas emissions",
+                    "The current trajectory of the Milky Way galaxy and those in its immediate proximity",
+                ],
+                left: [
+                    "Our Sun will run out of fuel and die in around 5 billion years ",
+                    "Plate tectonics will rearrange the continents: the Pacific will narrow, bringing Australia closer to the Americas, and the Atlantic will expand to form the largest of the oceans ",
+                    "Our Sun will run out of hydrogen, swell into a red giant, gobble up the inner rocky planets, and then collapse and die ",
+                    "Average global temperatures will rise ",
+                    "In 3 to 4 billion years, our galaxy will begin a slow collision with its closest large neighbor, Andromeda ",
+                ],
+            },
+        },
+    },
+};

package/src/widgets/__testdata__/matrix_testdata.js

@@ -0,0 +1,29 @@
+// @flow
+import type {PerseusRenderer} from "../../perseus-types.js";
+
+export const question1: PerseusRenderer = {
+    content:
+        "**Perform the row operation, $R_3 \\leftrightarrow R_2$, on the following matrix.**\n\n$\\left[\\begin{array} {ccc}\n5 & -2 & 1 & 1 \\\\\n3 & 0 & 0 & -2 \\\\\n1 & 1 & 7 & -3 \\end{array} \\right] $\n\n[[\u2603 matrix 1]]\n",
+    images: {},
+    widgets: {
+        "matrix 1": {
+            graded: true,
+            version: {major: 0, minor: 0},
+            static: false,
+            type: "matrix",
+            options: {
+                cursorPosition: [0, 0],
+                suffix: "",
+                answers: [
+                    [5, -2, 1, 1],
+                    [1, 1, 7, -3],
+                    [3, 0, 0, -2],
+                ],
+                prefix: "",
+                static: false,
+                matrixBoardSize: [3, 4],
+            },
+            alignment: "default",
+        },
+    },
+};