@khanacademy/perseus 53.1.0 → 54.0.0

package/dist/interactive2/movable.d.ts

@@ -1,6 +1,6 @@
 import type { Constraint, ConstraintCallbacks, Coord } from "./types";
 import type { Graphie } from "../util/graphie";
-export interface State {
+interface State {
     added?: boolean;
     isHovering?: boolean;
     isMouseOver?: boolean;
@@ -96,3 +96,4 @@ export declare class Movable<Options extends Record<string, any>> {
         getMouseTarget(): Element;
     } | null | undefined;
 }
+export {};

package/dist/strings.d.ts

@@ -178,6 +178,10 @@ export type PerseusStrings = {
     simulationLoadFail: string;
     simulationLocaleWarning: string;
     selectAnAnswer: string;
+    srGraphInstructions: string;
+    srUnlimitedGraphInstructions: string;
+    xAxis: string;
+    yAxis: string;
     addPoint: string;
     removePoint: string;
     graphKeyboardPrompt: string;
@@ -242,13 +246,19 @@ export type PerseusStrings = {
         point2X: string;
         point2Y: string;
     }) => string;
-    srAngleSideAtCoordinates: ({ point, side, x, y, }: {
-        point: number;
-        side: string;
+    srAngleStartingSide: ({ x, y }: {
         x: string;
         y: string;
     }) => string;
-    srAngleVertexAtCoordinatesWithAngleMeasure: ({ x, y, angleMeasure, }: {
+    srAngleEndingSide: ({ x, y }: {
+        x: string;
+        y: string;
+    }) => string;
+    srAngleVertex: ({ x, y }: {
+        x: string;
+        y: string;
+    }) => string;
+    srAngleVertexWithAngleMeasure: ({ x, y, angleMeasure, }: {
         x: string;
         y: string;
         angleMeasure: string;
@@ -263,6 +273,14 @@ export type PerseusStrings = {
         endingSideX: string;
         endingSideY: string;
     }) => string;
+    srAngleInteractiveElements: ({ vertexX, vertexY, startingSideX, startingSideY, endingSideX, endingSideY, }: {
+        vertexX: string;
+        vertexY: string;
+        startingSideX: string;
+        startingSideY: string;
+        endingSideX: string;
+        endingSideY: string;
+    }) => string;
     srSingleSegmentGraphAriaLabel: string;
     srMultipleSegmentGraphAriaLabel: ({ countOfSegments, }: {
         countOfSegments: number;
@@ -401,6 +419,27 @@ export type PerseusStrings = {
         length: string;
     }) => string;
     srUnlimitedPolygonEmpty: string;
+    srSinusoidGraph: string;
+    srSinusoidRootPoint: ({ x, y }: {
+        x: string;
+        y: string;
+    }) => string;
+    srSinusoidPeakPoint: ({ x, y }: {
+        x: string;
+        y: string;
+    }) => string;
+    srSinusoidDescription: ({ minValue, maxValue, cycleStart, cycleEnd, }: {
+        minValue: string;
+        maxValue: string;
+        cycleStart: string;
+        cycleEnd: string;
+    }) => string;
+    srSinusoidInteractiveElements: ({ point1X, point1Y, point2X, point2Y, }: {
+        point1X: string;
+        point1Y: string;
+        point2X: string;
+        point2Y: string;
+    }) => string;
 };
 /**
  * Untranslated strings used in Perseus. To be used by an external
@@ -550,6 +589,10 @@ export declare const strings: {
     openPolygon: string;
     srInteractiveElements: string;
     srNoInteractiveElements: string;
+    srGraphInstructions: string;
+    srUnlimitedGraphInstructions: string;
+    xAxis: string;
+    yAxis: string;
     srPointAtCoordinates: string;
     srCircleGraph: string;
     srCircleShape: string;
@@ -567,10 +610,13 @@ export declare const strings: {
     srLinearGraphBothIntercepts: string;
     srLinearGraphOriginIntercept: string;
     srLinearGrabHandle: string;
-    srAngleSideAtCoordinates: string;
-    srAngleVertexAtCoordinatesWithAngleMeasure: string;
+    srAngleStartingSide: string;
+    srAngleEndingSide: string;
+    srAngleVertex: string;
+    srAngleVertexWithAngleMeasure: string;
     srAngleGraphAriaLabel: string;
     srAngleGraphAriaDescription: string;
+    srAngleInteractiveElements: string;
     srSingleSegmentGraphAriaLabel: string;
     srMultipleSegmentGraphAriaLabel: string;
     srMultipleSegmentIndividualLabel: string;
@@ -612,6 +658,11 @@ export declare const strings: {
     srPolygonSideLength: string;
     srPolygonSideLengthApprox: string;
     srUnlimitedPolygonEmpty: string;
+    srSinusoidGraph: string;
+    srSinusoidRootPoint: string;
+    srSinusoidPeakPoint: string;
+    srSinusoidDescription: string;
+    srSinusoidInteractiveElements: string;
 };
 /**
  * Mock strings for the Perseus package, to be used for tests and Storybook.

package/dist/strings.js

@@ -159,6 +159,10 @@ const strings = {
   // translation tickets after all interactive graph SR strings have
   // been finalized. Remove this comment after the tickets have been
   // created.
+  srGraphInstructions: "Use the Tab key to move through the interactive elements in the graph. When an interactive element has focus, use the Arrow keys to move it.",
+  srUnlimitedGraphInstructions: "Press Shift + Enter to interact with the graph. Use the Tab key to move through the interactive elements in the graph and access the graph Action Bar. When an interactive element has focus, use the Arrow keys to move it or use the Delete key to remove it from the graph. Use the buttons in the Action Bar to add or adjust elements within the graph.",
+  xAxis: "X-axis",
+  yAxis: "Y-axis",
   srPointAtCoordinates: "Point %(num)s at %(x)s comma %(y)s.",
   srCircleGraph: "A circle on a coordinate plane.",
   srCircleShape: "Circle. The center point is at %(centerX)s comma %(centerY)s.",
@@ -176,10 +180,13 @@ const strings = {
   srLinearGraphBothIntercepts: "The line crosses the X-axis at %(xIntercept)s comma 0 and the Y-axis at 0 comma %(yIntercept)s.",
   srLinearGraphOriginIntercept: "The line crosses the x and y axes at the graph's origin.",
   srLinearGrabHandle: "Line from %(point1X)s comma %(point1Y)s to %(point2X)s comma %(point2Y)s.",
-  srAngleSideAtCoordinates: "Point %(point)s, %(side)s at %(x)s comma %(y)s",
-  srAngleVertexAtCoordinatesWithAngleMeasure: "Point 2, vertex at %(x)s comma %(y)s. Angle %(angleMeasure)s degrees",
+  srAngleStartingSide: "Point 3, starting side at %(x)s comma %(y)s.",
+  srAngleEndingSide: "Point 2, ending side at %(x)s comma %(y)s.",
+  srAngleVertex: "Point 1, vertex at %(x)s comma %(y)s.",
+  srAngleVertexWithAngleMeasure: "Point 1, vertex at %(x)s comma %(y)s. Angle %(angleMeasure)s degrees.",
   srAngleGraphAriaLabel: "An angle on a coordinate plane.",
   srAngleGraphAriaDescription: "The angle measure is %(angleMeasure)s degrees with a vertex at %(vertexX)s comma %(vertexY)s, a point on the starting side at %(startingSideX)s comma %(startingSideY)s and a point on the ending side at %(endingSideX)s comma %(endingSideY)s",
+  srAngleInteractiveElements: "An angle formed by 3 points. The vertex is at %(vertexX)s comma %(vertexY)s. The starting side point is at %(startingSideX)s comma %(startingSideY)s. The ending side point is at %(endingSideX)s comma %(endingSideY)s.",
   srSingleSegmentGraphAriaLabel: "A line segment on a coordinate plane.",
   srMultipleSegmentGraphAriaLabel: "%(countOfSegments)s line segments on a coordinate plane.",
   srMultipleSegmentIndividualLabel: "Segment %(indexOfSegment)s: Endpoint 1 at %(point1X)s comma %(point1Y)s. Endpoint 2 at %(point2X)s comma %(point2Y)s.",
@@ -220,7 +227,12 @@ const strings = {
   srPolygonPointAngle: "Angle equal to %(angle)s degrees.",
   srPolygonSideLength: "A line segment, length equal to %(length)s units, connects to point %(pointNum)s.",
   srPolygonSideLengthApprox: "A line segment, length approximately equal to %(length)s units, connects to point %(pointNum)s.",
-  srUnlimitedPolygonEmpty: "An empty coordinate plane."
+  srUnlimitedPolygonEmpty: "An empty coordinate plane.",
+  srSinusoidGraph: "A sinusoid function on a coordinate plane.",
+  srSinusoidRootPoint: "Midline intersection at %(x)s comma %(y)s.",
+  srSinusoidPeakPoint: "Extremum point at %(x)s comma %(y)s.",
+  srSinusoidDescription: "The graph shows a wave with a minimum value of %(minValue)s and a maximum value of %(maxValue)s. The wave completes a full cycle from %(cycleStart)s to %(cycleEnd)s.",
+  srSinusoidInteractiveElements: "Sinusoid graph with midline intersection point at %(point1X)s comma %(point1Y)s and extremum point at %(point2X)s comma %(point2Y)s."
   // The above strings are used for interactive graph SR descriptions.
 };
 
@@ -483,6 +495,10 @@ const mockStrings = {
   simulationLocaleWarning: "Sorry, this simulation isn't available in your language.",
   selectAnAnswer: "Select an answer",
   // The following strings are used for interactive graph SR descriptions.
+  srGraphInstructions: "Use the Tab key to move through the interactive elements in the graph. When an interactive element has focus, use the Arrow keys to move it.",
+  srUnlimitedGraphInstructions: "Press Shift + Enter to interact with the graph. Use the Tab key to move through the interactive elements in the graph and access the graph Action Bar. When an interactive element has focus, use the Arrow keys to move it or use the Delete key to remove it from the graph. Use the buttons in the Action Bar to add or adjust elements within the graph.",
+  xAxis: "X-axis",
+  yAxis: "Y-axis",
   graphKeyboardPrompt: "Press Shift + Enter to interact with the graph",
   addPoint: "Add Point",
   removePoint: "Remove Point",
@@ -580,25 +596,37 @@ const mockStrings = {
     } = _ref37;
     return `Line from ${point1X} comma ${point1Y} to ${point2X} comma ${point2Y}.`;
   },
-  srAngleSideAtCoordinates: _ref38 => {
+  srAngleStartingSide: _ref38 => {
     let {
-      point,
-      side,
       x,
       y
     } = _ref38;
-    return `Point ${point}, ${side} at ${x} comma ${y}`;
+    return `Point 3, starting side at ${x} comma ${y}.`;
   },
-  srAngleVertexAtCoordinatesWithAngleMeasure: _ref39 => {
+  srAngleEndingSide: _ref39 => {
+    let {
+      x,
+      y
+    } = _ref39;
+    return `Point 2, ending side at ${x} comma ${y}.`;
+  },
+  srAngleVertex: _ref40 => {
+    let {
+      x,
+      y
+    } = _ref40;
+    return `Point 1, vertex at ${x} comma ${y}.`;
+  },
+  srAngleVertexWithAngleMeasure: _ref41 => {
     let {
       x,
       y,
       angleMeasure
-    } = _ref39;
-    return `Point 2, vertex at ${x} comma ${y}. Angle ${angleMeasure} degrees`;
+    } = _ref41;
+    return `Point 1, vertex at ${x} comma ${y}. Angle ${angleMeasure} degrees.`;
   },
   srAngleGraphAriaLabel: "An angle on a coordinate plane.",
-  srAngleGraphAriaDescription: _ref40 => {
+  srAngleGraphAriaDescription: _ref42 => {
     let {
       angleMeasure,
       vertexX,
@@ -607,118 +635,129 @@ const mockStrings = {
       startingSideY,
       endingSideX,
       endingSideY
-    } = _ref40;
+    } = _ref42;
     return `The angle measure is ${angleMeasure} degrees with a vertex at ${vertexX} comma ${vertexY}, a point on the starting side at ${startingSideX} comma ${startingSideY} and a point on the ending side at ${endingSideX} comma ${endingSideY}.`;
   },
+  srAngleInteractiveElements: _ref43 => {
+    let {
+      vertexX,
+      vertexY,
+      startingSideX,
+      startingSideY,
+      endingSideX,
+      endingSideY
+    } = _ref43;
+    return `An angle formed by 3 points. The vertex is at ${vertexX} comma ${vertexY}. The starting side point is at ${startingSideX} comma ${startingSideY}. The ending side point is at ${endingSideX} comma ${endingSideY}.`;
+  },
   srSingleSegmentGraphAriaLabel: "A line segment on a coordinate plane.",
-  srMultipleSegmentGraphAriaLabel: _ref41 => {
+  srMultipleSegmentGraphAriaLabel: _ref44 => {
     let {
       countOfSegments
-    } = _ref41;
+    } = _ref44;
     return `${countOfSegments} segments on a coordinate plane.`;
   },
-  srMultipleSegmentIndividualLabel: _ref42 => {
+  srMultipleSegmentIndividualLabel: _ref45 => {
     let {
       point1X,
       point1Y,
       point2X,
       point2Y,
       indexOfSegment
-    } = _ref42;
+    } = _ref45;
     return `Segment ${indexOfSegment}: Endpoint 1 at ${point1X} comma ${point1Y}. Endpoint 2 at ${point2X} comma ${point2Y}.`;
   },
-  srSingleSegmentLabel: _ref43 => {
+  srSingleSegmentLabel: _ref46 => {
     let {
       point1X,
       point1Y,
       point2X,
       point2Y
-    } = _ref43;
+    } = _ref46;
     return `Endpoint 1 at ${point1X} comma ${point1Y}. Endpoint 2 at ${point2X} comma ${point2Y}.`;
   },
-  srSegmentLength: _ref44 => {
+  srSegmentLength: _ref47 => {
     let {
       length
-    } = _ref44;
+    } = _ref47;
     return `Segment length ${length} units.`;
   },
-  srSingleSegmentGraphEndpointAriaLabel: _ref45 => {
+  srSingleSegmentGraphEndpointAriaLabel: _ref48 => {
     let {
       endpointNumber,
       x,
       y
-    } = _ref45;
+    } = _ref48;
     return `Endpoint ${endpointNumber} at ${x} comma ${y}.`;
   },
-  srMultipleSegmentGraphEndpointAriaLabel: _ref46 => {
+  srMultipleSegmentGraphEndpointAriaLabel: _ref49 => {
     let {
       endpointNumber,
       x,
       y,
       indexOfSegment
-    } = _ref46;
+    } = _ref49;
     return `Endpoint ${endpointNumber} on segment ${indexOfSegment} at ${x} comma ${y}.`;
   },
-  srSegmentGrabHandle: _ref47 => {
+  srSegmentGrabHandle: _ref50 => {
     let {
       point1X,
       point1Y,
       point2X,
       point2Y
-    } = _ref47;
+    } = _ref50;
     return `Segment from ${point1X} comma ${point1Y} to ${point2X} comma ${point2Y}.`;
   },
   srLinearSystemGraph: "Two lines on a coordinate plane.",
-  srLinearSystemPoints: _ref48 => {
+  srLinearSystemPoints: _ref51 => {
     let {
       lineNumber,
       point1X,
       point1Y,
       point2X,
       point2Y
-    } = _ref48;
+    } = _ref51;
     return `Line ${lineNumber} has two points, point 1 at ${point1X} comma ${point1Y} and point 2 at ${point2X} comma ${point2Y}.`;
   },
-  srLinearSystemPoint: _ref49 => {
+  srLinearSystemPoint: _ref52 => {
     let {
       lineNumber,
       pointSequence,
       x,
       y
-    } = _ref49;
+    } = _ref52;
     return `Point ${pointSequence} on line ${lineNumber} at ${x} comma ${y}.`;
   },
   srRayGraph: "A ray on a coordinate plane.",
-  srRayPoints: _ref50 => {
+  srRayPoints: _ref53 => {
     let {
       point1X,
       point1Y,
       point2X,
       point2Y
-    } = _ref50;
+    } = _ref53;
     return `The endpoint is at ${point1X} comma ${point1Y} and the ray goes through point ${point2X} comma ${point2Y}.`;
   },
-  srRayGrabHandle: _ref51 => {
+  srRayGrabHandle: _ref54 => {
     let {
       point1X,
       point1Y,
       point2X,
       point2Y
-    } = _ref51;
+    } = _ref54;
     return `Ray with endpoint ${point1X} comma ${point1Y} going through point ${point2X} comma ${point2Y}.`;
   },
-  srRayEndpoint: _ref52 => {
+  srRayEndpoint: _ref55 => {
     let {
       x,
       y
-    } = _ref52;
+    } = _ref55;
     return `Endpoint at ${x} comma ${y}.`;
   },
-  srRayTerminalPoint: _ref53 => {
+  srRayTerminalPoint: _ref56 => {
     let {
       x,
       y
-    } = _ref53;
+    } = _ref56;
     return `Through point at ${x} comma ${y}.`;
   },
   srQuadraticGraph: "A parabola on a 4-quadrant coordinate plane.",
@@ -727,55 +766,55 @@ const mockStrings = {
   srQuadraticGraphVertexOrigin: "Vertex is at the origin.",
   srQuadraticGraphVertexXAxis: "Vertex is on the X-axis.",
   srQuadraticGraphVertexYAxis: "Vertex is on the Y-axis.",
-  srQuadraticGraphVertexQuadrant: _ref54 => {
+  srQuadraticGraphVertexQuadrant: _ref57 => {
     let {
       quadrant
-    } = _ref54;
+    } = _ref57;
     return `Vertex is in quadrant ${quadrant}.`;
   },
-  srQuadraticTwoXIntercepts: _ref55 => {
+  srQuadraticTwoXIntercepts: _ref58 => {
     let {
       intercept1,
       intercept2
-    } = _ref55;
+    } = _ref58;
     return `The X-intercepts are at ${intercept1} comma 0 and ${intercept2} comma 0.`;
   },
-  srQuadraticOneXIntercept: _ref56 => {
+  srQuadraticOneXIntercept: _ref59 => {
     let {
       intercept
-    } = _ref56;
+    } = _ref59;
     return `The X-intercept is at ${intercept} comma 0.`;
   },
-  srQuadraticYIntercept: _ref57 => {
+  srQuadraticYIntercept: _ref60 => {
     let {
       intercept
-    } = _ref57;
+    } = _ref60;
     return `The Y-intercept is at 0 comma ${intercept}.`;
   },
-  srQuadraticPointOrigin: _ref58 => {
+  srQuadraticPointOrigin: _ref61 => {
     let {
       pointNumber
-    } = _ref58;
+    } = _ref61;
     return `Point ${pointNumber} on parabola at the origin.`;
   },
-  srQuadraticPointAxis: _ref59 => {
+  srQuadraticPointAxis: _ref62 => {
     let {
       pointNumber,
       x,
       y
-    } = _ref59;
+    } = _ref62;
     return `Point ${pointNumber} on parabola at ${x} comma ${y}.`;
   },
-  srQuadraticPointQuadrant: _ref60 => {
+  srQuadraticPointQuadrant: _ref63 => {
     let {
       pointNumber,
       x,
       y,
       quadrant
-    } = _ref60;
+    } = _ref63;
     return `Point ${pointNumber} on parabola in quadrant ${quadrant} at ${x} comma ${y}.`;
   },
-  srQuadraticInteractiveElements: _ref61 => {
+  srQuadraticInteractiveElements: _ref64 => {
     let {
       point1X,
       point1Y,
@@ -783,52 +822,85 @@ const mockStrings = {
       point2Y,
       point3X,
       point3Y
-    } = _ref61;
+    } = _ref64;
     return `Parabola with points at ${point1X} comma ${point1Y}, ${point2X} comma ${point2Y}, and ${point3X} comma ${point3Y}.`;
   },
   srPolygonGraph: "A polygon.",
   srPolygonGraphCoordinatePlane: "A polygon on a coordinate plane.",
-  srPolygonGraphPointsNum: _ref62 => {
+  srPolygonGraphPointsNum: _ref65 => {
     let {
       num
-    } = _ref62;
+    } = _ref65;
     return `The polygon has ${num} points.`;
   },
   srPolygonGraphPointsOne: "The polygon has 1 point.",
-  srPolygonElementsNum: _ref63 => {
+  srPolygonElementsNum: _ref66 => {
     let {
       num
-    } = _ref63;
+    } = _ref66;
     return `A polygon with ${num} points.`;
   },
   srPolygonElementsOne: "A polygon with 1 point.",
-  srPolygonPointAngleApprox: _ref64 => {
+  srPolygonPointAngleApprox: _ref67 => {
     let {
       angle
-    } = _ref64;
+    } = _ref67;
     return `Angle approximately equal to ${angle} degrees.`;
   },
-  srPolygonPointAngle: _ref65 => {
+  srPolygonPointAngle: _ref68 => {
     let {
       angle
-    } = _ref65;
+    } = _ref68;
     return `Angle equal to ${angle} degrees.`;
   },
-  srPolygonSideLength: _ref66 => {
+  srPolygonSideLength: _ref69 => {
     let {
       pointNum,
       length
-    } = _ref66;
+    } = _ref69;
     return `A line segment, length equal to ${length} units, connects to point ${pointNum}.`;
   },
-  srPolygonSideLengthApprox: _ref67 => {
+  srPolygonSideLengthApprox: _ref70 => {
     let {
       pointNum,
       length
-    } = _ref67;
+    } = _ref70;
     return `A line segment, length approximately equal to ${length} units, connects to point ${pointNum}.`;
   },
-  srUnlimitedPolygonEmpty: "An empty coordinate plane."
+  srUnlimitedPolygonEmpty: "An empty coordinate plane.",
+  srSinusoidGraph: "A sinusoid function on a coordinate plane.",
+  srSinusoidRootPoint: _ref71 => {
+    let {
+      x,
+      y
+    } = _ref71;
+    return `Midline intersection at ${x} comma ${y}.`;
+  },
+  srSinusoidPeakPoint: _ref72 => {
+    let {
+      x,
+      y
+    } = _ref72;
+    return `Extremum point at ${x} comma ${y}.`;
+  },
+  srSinusoidDescription: _ref73 => {
+    let {
+      minValue,
+      maxValue,
+      cycleStart,
+      cycleEnd
+    } = _ref73;
+    return `The graph shows a wave with a minimum value of ${minValue} and a maximum value of ${maxValue}. The wave completes a full cycle from ${cycleStart} to ${cycleEnd}.`;
+  },
+  srSinusoidInteractiveElements: _ref74 => {
+    let {
+      point1X,
+      point1Y,
+      point2X,
+      point2Y
+    } = _ref74;
+    return `Sinusoid graph with midline intersection point at ${point1X} comma ${point1Y} and extremum point at ${point2X} comma ${point2Y}.`;
+  }
   // The above strings are used for interactive graph SR descriptions.
 };