@khanacademy/perseus 36.0.0 → 36.1.1

package/dist/index.d.ts

@@ -61,7 +61,7 @@ export { default as KhanColors } from "./util/colors";
 export { default as preprocessTex } from "./util/tex-preprocess";
 export { registerAllWidgetsForTesting } from "./util/register-all-widgets-for-testing";
 export * as SizingUtils from "./util/sizing-utils";
-export { getAnswersFromWidgets, injectWidgets, isWrongAnswerSupported, shouldHaveIndividualAnswer, isWidgetIdInContent, getValidWidgetIds, getCorrectAnswerForWidgetId, getAnswerFromUserInput, } from "./util/extract-perseus-data";
+export { getAnswersFromWidgets, injectWidgets, isWrongAnswerSupported, shouldHaveIndividualAnswer, isWidgetIdInContent, getValidWidgetIds, getCorrectAnswerForWidgetId, getAnswerFromUserInput, getImagesWithoutAltData, } from "./util/extract-perseus-data";
 export { parsePerseusItem } from "./util/parse-perseus-json";
 export { generateTestPerseusItem, genericPerseusItemData, generateTestRadioWidget, generateTestInteractiveGraphWidget, generateTestCategorizerWidget, generateTestExpressionWidget, generateTestNumericInputWidget, } from "./util/test-utils";
 export { getWidgetTypeByWidgetId, contentHasWidgetType, getWidgetIdsFromContent, getWidgetIdsFromContentByType, getWidgetsMapFromItemData, getWidgetFromWidgetMap, getWidgetsFromWidgetMap, } from "./widget-type-utils";

package/dist/index.js

@@ -3263,13 +3263,13 @@ function eq$4(x, y) {
  * Deep approximate equality on primitives, numbers, arrays, and objects.
  * Recursive.
  */
-function deepEq$5(x, y) {
+function deepEq$6(x, y) {
   if (Array.isArray(x) && Array.isArray(y)) {
     if (x.length !== y.length) {
       return false;
     }
     for (let i = 0; i < x.length; i++) {
-      if (!deepEq$5(x[i], y[i])) {
+      if (!deepEq$6(x[i], y[i])) {
         return false;
       }
     }
@@ -3287,10 +3287,10 @@ function deepEq$5(x, y) {
   if (typeof x === "object" && typeof y === "object" && !!x && !!y) {
     return x === y || ___default["default"].all(x, function (v, k) {
       // @ts-expect-error - TS2536 - Type 'CollectionKey<T>' cannot be used to index type 'T'.
-      return deepEq$5(y[k], v);
+      return deepEq$6(y[k], v);
     }) && ___default["default"].all(y, function (v, k) {
       // @ts-expect-error - TS2536 - Type 'CollectionKey<T>' cannot be used to index type 'T'.
-      return deepEq$5(x[k], v);
+      return deepEq$6(x[k], v);
     });
   }
   if (typeof x === "object" && !!x || typeof y === "object" && !!y) {
@@ -3568,7 +3568,7 @@ const Util = {
   tickStepFromNumTicks,
   constrainedTickStepsFromTickSteps,
   eq: eq$4,
-  deepEq: deepEq$5,
+  deepEq: deepEq$6,
   parseQueryString,
   updateQueryString: updateQueryString$2,
   strongEncodeURIComponent,
@@ -10892,7 +10892,7 @@ class WrappedLine extends WrappedDrawing {
  */
 const {
   eq: eq$3,
-  deepEq: deepEq$4
+  deepEq: deepEq$5
 } = Util;
 
 // This should really be a readonly tuple of [number, number]
@@ -11052,7 +11052,7 @@ function similar(coords1, coords2, tolerance) {
     angles = rotate(angles, i);
     // @ts-expect-error - TS4104 - The type 'readonly number[]' is 'readonly' and cannot be assigned to the mutable type 'number[]'.
     sides = rotate(sides, i);
-    if (deepEq$4(angles1, angles)) {
+    if (deepEq$5(angles1, angles)) {
       const sidePairs = ___default["default"].zip(sides1, sides);
       const factors = ___default["default"].map(sidePairs, function (pair) {
         return pair[0] / pair[1];
@@ -13991,7 +13991,7 @@ ___default["default"].extend(MovableAngle.prototype, {
 
 /* eslint-disable @babel/no-invalid-this */
 const nestedMap$1 = Util.nestedMap;
-const deepEq$3 = Util.deepEq;
+const deepEq$4 = Util.deepEq;
 
 /**
  * A base class for all Graphie Movables
@@ -14088,7 +14088,7 @@ const createSimpleClass = function (addFunction) {
       this._prevProps = this.props;
     },
     modify: function (graphie) {
-      if (!deepEq$3(this.props, this._prevProps)) {
+      if (!deepEq$4(this.props, this._prevProps)) {
         this.remove();
         this.add(graphie);
         this._prevProps = this.props;
@@ -16835,7 +16835,7 @@ var Movables = {
 const GraphieMovable = GraphieClasses.GraphieMovable;
 const createGraphie = GraphUtils.createGraphie;
 const {
-  deepEq: deepEq$2,
+  deepEq: deepEq$3,
   nestedMap
 } = Util;
 const {
@@ -16873,7 +16873,7 @@ class Graphie extends React__namespace.Component {
     if (this.props.setup !== prevProps.setup) {
       Log.error("<Graphie> was given a new setup function. " + "This is a bad idea; please refactor your code to give " + "the same setup function reference to <Graphie> on " + "every render.", perseusCore.Errors.Internal);
     }
-    if (!deepEq$2(this.props.options, prevProps.options) || !deepEq$2(this.props.box, prevProps.box) || !deepEq$2(this.props.range, prevProps.range)) {
+    if (!deepEq$3(this.props.options, prevProps.options) || !deepEq$3(this.props.box, prevProps.box) || !deepEq$3(this.props.range, prevProps.range)) {
       this._setupGraphie();
     }
     this._updateMovables();
@@ -31299,10 +31299,16 @@ const shouldShowLabel = (currentTick, range, tickStep) => {
 function generateTickLocations(tickStep, min, max) {
   const ticks = [];
 
+  // Calculate the number of significant decimals in the tick step so
+  // that we can match the desired precision when generating ticks.
+  const decimalSigFigs = countSignificantDecimals(tickStep);
+
   // Add ticks in the positive direction
   const start = Math.max(min, 0);
   for (let i = start + tickStep; i < max; i += tickStep) {
-    ticks.push(i);
+    // Match to the same number of decimal places as the tick step
+    // to avoid floating point errors when working with small numbers
+    ticks.push(parseFloat(i.toFixed(decimalSigFigs)));
   }
 
   // Add ticks in the negative direction
@@ -31313,6 +31319,15 @@ function generateTickLocations(tickStep, min, max) {
   }
   return ticks;
 }
+
+// Count the number of significant digits after the decimal point
+const countSignificantDecimals = number => {
+  const numStr = number.toString();
+  if (!numStr.includes(".")) {
+    return 0;
+  }
+  return numStr.split(".")[1].length;
+};
 const AxisTicks = () => {
   const {
     tickStep,
@@ -33597,7 +33612,7 @@ function calculateBisectorPoint(point1, point2, vertex, isReflex, allowReflex, a
   return scaledBisector;
 }
 
-const MovablePoint$1 = props => {
+const MovablePoint$1 = /*#__PURE__*/React__namespace.forwardRef((props, pointRef) => {
   const {
     snapStep
   } = useGraphConfig();
@@ -33620,7 +33635,21 @@ const MovablePoint$1 = props => {
     constrainKeyboardMovement: constrain
   });
   return /*#__PURE__*/React__namespace.createElement(MovablePointView, {
-    ref: elementRef,
+    ref: ref => {
+      // Note: This handles the case where pointRef is either a
+      // function or a MutableRefObject. Mostly this is to satisfy
+      // the type system, the function branch seems to be the only
+      // one that occurs
+      if (typeof pointRef === "function") {
+        pointRef(ref);
+      } else if (pointRef !== null) {
+        pointRef.current = ref;
+      }
+
+      // This ref is for the useDraggable and is not passed up the
+      // chain
+      elementRef.current = ref;
+    },
     point: point,
     color: color,
     dragging: dragging,
@@ -33635,7 +33664,7 @@ const MovablePoint$1 = props => {
     },
     cursor: cursor
   });
-};
+});
 
 const PolygonGraph = props => {
   const [hovered, setHovered] = React__namespace.useState(false);
@@ -34225,6 +34254,13 @@ function UnlimitedPointGraph(props) {
   const height = maxY - minY;
   const [[widthPx, heightPx]] = useTransformDimensionsToPixels([width, height]);
   const [[left, top]] = useTransformVectorsToPixels([minX, maxY]);
+  const itemsRef = React__namespace.useRef([]);
+  React__namespace.useEffect(() => {
+    const focusedIndex = props.graphState.focusedPointIndex;
+    if (focusedIndex != null) {
+      itemsRef.current[focusedIndex]?.focus();
+    }
+  }, [props.graphState.focusedPointIndex, itemsRef]);
   return /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null, /*#__PURE__*/React__namespace.createElement("rect", {
     style: {
       fill: "rgba(0,0,0,0)",
@@ -34245,12 +34281,23 @@ function UnlimitedPointGraph(props) {
     key: i,
     point: point,
     onMove: destination => dispatch(actions.pointGraph.movePoint(i, destination)),
+    ref: ref => {
+      itemsRef.current[i] = ref;
+    },
     onFocusChange: (event, isFocused) => {
       if (isFocused) {
         dispatch(actions.pointGraph.focusPoint(i));
       } else {
         if (event.relatedTarget?.id === REMOVE_BUTTON_ID) {
           return;
+          // This is an optimization: If the next target
+          // is a point then don't blur because it casues
+          // the remove button to get taken off the page
+          // and then put back on The new point will
+          // receive focus and set the correct state in
+          // the reducer
+        } else if (event.relatedTarget?.classList.contains("movable-point")) {
+          return;
         }
         dispatch(actions.pointGraph.blurPoint());
       }
@@ -34425,11 +34472,17 @@ const MafsGraph = props => {
     fullGraphAriaLabel,
     fullGraphAriaDescription
   } = props;
+  const {
+    type
+  } = state;
   const [width, height] = props.box;
   const tickStep = props.step;
   const uniqueId = React__namespace.useId();
   const descriptionId = `interactive-graph-description-${uniqueId}`;
   const graphRef = React__namespace.useRef(null);
+  const {
+    analytics
+  } = useDependencies();
 
   // Set up the SVG attributes for the nested SVGs that help lock
   // the grid and graph elements to the bounds of the graph.
@@ -34449,6 +34502,14 @@ const MafsGraph = props => {
   const {
     strings
   } = usePerseusI18n();
+  wonderBlocksCore.useOnMountEffect(() => {
+    analytics.onAnalyticsEvent({
+      type: "perseus:interactive-graph-widget:rendered",
+      payload: {
+        type
+      }
+    });
+  });
   return /*#__PURE__*/React__namespace.createElement(GraphConfigContext.Provider, {
     value: {
       range: state.range,
@@ -35233,11 +35294,14 @@ function doFocusPoint(state, action) {
 function doBlurPoint(state, action) {
   switch (state.type) {
     case "point":
-      return {
+      const nextState = {
         ...state,
-        focusedPointIndex: null,
         showRemovePointButton: false
       };
+      if (state.interactionMode === "mouse") {
+        nextState.focusedPointIndex = null;
+      }
+      return nextState;
     default:
       return state;
   }
@@ -35640,17 +35704,24 @@ function doAddPoint(state, action) {
     ...state,
     hasBeenInteractedWith: true,
     coords: [...state.coords, snappedPoint],
-    showRemovePointButton: false
+    showRemovePointButton: false,
+    focusedPointIndex: state.coords.length
   };
 }
 function doRemovePoint(state, action) {
   if (state.type !== "point") {
     return state;
   }
+  let nextFocusedPointIndex;
+  if (state.interactionMode === "mouse") {
+    nextFocusedPointIndex = null;
+  } else {
+    nextFocusedPointIndex = state.coords.length > 1 ? state.coords.length - 2 : null;
+  }
   return {
     ...state,
     coords: state.coords.filter((_, i) => i !== action.index),
-    focusedPointIndex: null,
+    focusedPointIndex: nextFocusedPointIndex,
     showRemovePointButton: false
   };
 }
@@ -36063,7 +36134,7 @@ const StatefulMafsGraph = /*#__PURE__*/React__namespace.forwardRef((props, ref)
 });
 
 const eq$1 = Util.eq;
-const deepEq$1 = Util.deepEq;
+const deepEq$2 = Util.deepEq;
 function interactiveGraphValidator(userInput, rubric) {
   // None-type graphs are not graded
   if (userInput.type === "none" && rubric.correct.type === "none") {
@@ -36119,7 +36190,7 @@ function interactiveGraphValidator(userInput, rubric) {
       const correctCoeffs = getQuadraticCoefficients(
       // @ts-expect-error - TS2345 - Argument of type 'readonly Coord[] | undefined' is not assignable to parameter of type 'readonly Coord[]'.
       rubric.correct.coords);
-      if (deepEq$1(guessCoeffs, correctCoeffs)) {
+      if (deepEq$2(guessCoeffs, correctCoeffs)) {
         return {
           type: "points",
           earned: 1,
@@ -36135,7 +36206,7 @@ function interactiveGraphValidator(userInput, rubric) {
       const canonicalGuessCoeffs = canonicalSineCoefficients$1(guessCoeffs);
       const canonicalCorrectCoeffs = canonicalSineCoefficients$1(correctCoeffs);
       // If the canonical coefficients match, it's correct.
-      if (deepEq$1(canonicalGuessCoeffs, canonicalCorrectCoeffs)) {
+      if (deepEq$2(canonicalGuessCoeffs, canonicalCorrectCoeffs)) {
         return {
           type: "points",
           earned: 1,
@@ -36144,7 +36215,7 @@ function interactiveGraphValidator(userInput, rubric) {
         };
       }
     } else if (userInput.type === "circle" && rubric.correct.type === "circle") {
-      if (deepEq$1(userInput.center, rubric.correct.center) && eq$1(userInput.radius, rubric.correct.radius)) {
+      if (deepEq$2(userInput.center, rubric.correct.center) && eq$1(userInput.radius, rubric.correct.radius)) {
         return {
           type: "points",
           earned: 1,
@@ -36166,7 +36237,7 @@ function interactiveGraphValidator(userInput, rubric) {
       guess?.sort();
       // @ts-expect-error - TS2339 - Property 'sort' does not exist on type 'readonly Coord[]'.
       correct.sort();
-      if (deepEq$1(guess, correct)) {
+      if (deepEq$2(guess, correct)) {
         return {
           type: "points",
           earned: 1,
@@ -36189,7 +36260,7 @@ function interactiveGraphValidator(userInput, rubric) {
         /* exact */
         guess.sort();
         correct.sort();
-        match = deepEq$1(guess, correct);
+        match = deepEq$2(guess, correct);
       }
       if (match) {
         return {
@@ -36205,7 +36276,7 @@ function interactiveGraphValidator(userInput, rubric) {
       guess = ___default["default"].invoke(guess, "sort").sort();
       // @ts-expect-error - TS2345 - Argument of type '(readonly Coord[])[] | undefined' is not assignable to parameter of type 'Collection<any>'.
       correct = ___default["default"].invoke(correct, "sort").sort();
-      if (deepEq$1(guess, correct)) {
+      if (deepEq$2(guess, correct)) {
         return {
           type: "points",
           earned: 1,
@@ -36218,7 +36289,7 @@ function interactiveGraphValidator(userInput, rubric) {
       const correct = rubric.correct.coords;
       if (
       // @ts-expect-error - TS2532 - Object is possibly 'undefined'.
-      deepEq$1(guess[0], correct[0]) &&
+      deepEq$2(guess[0], correct[0]) &&
       // @ts-expect-error - TS2532 - Object is possibly 'undefined'. | TS2532 - Object is possibly 'undefined'.
       collinear(correct[0], correct[1], guess[1])) {
         return {
@@ -36249,7 +36320,7 @@ function interactiveGraphValidator(userInput, rubric) {
         /* exact */
         match =
         // @ts-expect-error - TS2532 - Object is possibly 'undefined'. | TS2532 - Object is possibly 'undefined'.
-        deepEq$1(guess[1], correct[1]) &&
+        deepEq$2(guess[1], correct[1]) &&
         // @ts-expect-error - TS2532 - Object is possibly 'undefined'. | TS2532 - Object is possibly 'undefined'. | TS2532 - Object is possibly 'undefined'.
         collinear(correct[1], correct[0], guess[0]) &&
         // @ts-expect-error - TS2532 - Object is possibly 'undefined'. | TS2532 - Object is possibly 'undefined'. | TS2532 - Object is possibly 'undefined'.
@@ -43750,10 +43821,10 @@ var PhetSimulation$1 = {
 };
 
 const {
-  deepEq
+  deepEq: deepEq$1
 } = Util;
 function plotterValidator(userInput, rubric) {
-  if (deepEq(userInput, rubric.starting)) {
+  if (deepEq$1(userInput, rubric.starting)) {
     return {
       type: "invalid",
       message: null
@@ -43761,7 +43832,7 @@ function plotterValidator(userInput, rubric) {
   }
   return {
     type: "points",
-    earned: deepEq(userInput, rubric.correct) ? 1 : 0,
+    earned: deepEq$1(userInput, rubric.correct) ? 1 : 0,
     total: 1,
     message: null
   };
@@ -45238,7 +45309,7 @@ const init = function (options) {
 
 // This file is processed by a Rollup plugin (replace) to inject the production
 const libName = "@khanacademy/perseus";
-const libVersion = "36.0.0";
+const libVersion = "36.1.1";
 perseusCore.addLibraryVersionToPerseusDebug(libName, libVersion);
 
 const apiVersion = {
@@ -48426,6 +48497,38 @@ function injectWidgets(content, widgets, widgetProps) {
   return context;
 }
 
+/**
+ * Looks through widgets to identify images that do not have alt text.
+ *
+ * We pass in the fuller perseusRenderer object to allow for the possibility
+ * of expanding to include other img data from content & images in the future.
+ *
+ * @param {PerseusRenderer} perseusRenderer
+ * @returns a stringified list of {widgetId, imageUrl} for imgs that don't have alt text
+ */
+function getImagesWithoutAltData(perseusRenderer) {
+  if (!perseusRenderer.widgets) {
+    return "";
+  }
+  const imgsWithoutAltData = [];
+  Object.entries(perseusRenderer.widgets).forEach(_ref3 => {
+    let [widgetId, widget] = _ref3;
+    if (!widget.options) {
+      return;
+    }
+
+    // Add to imagesWithoutAltData if img alt is missing and
+    // image has valid img url data.
+    if (widget.type === "image" && !widget.options.alt && widget.options.backgroundImage?.url) {
+      imgsWithoutAltData.push({
+        widgetId,
+        imgUrl: widget.options.backgroundImage.url
+      });
+    }
+  });
+  return JSON.stringify(imgsWithoutAltData);
+}
+
 /* Widgets that have individual answers */
 const INDIVIDUAL_ANSWER_WIDGETS = ["interactive-graph", "categorizer", "grapher"];
 
@@ -48484,6 +48587,8 @@ const getValidWidgetIds = perseusItem => {
   return wonderStuffCore.keys(widgets).filter(id => isWidgetIdInContent(perseusItem, id));
 };
 
+const deepEq = Util.deepEq;
+
 /**
  * Helper to parse PerseusItem JSON
  * Why not just use JSON.parse? We want:
@@ -48493,7 +48598,87 @@ const getValidWidgetIds = perseusItem => {
  * @returns {PerseusItem} the parsed PerseusItem object
  */
 function parsePerseusItem(json) {
-  return JSON.parse(json);
+  const randomPhrase = buildRandomPhrase();
+  const randomHintPhrase = buildRandomPhrase();
+  const randomString = buildRandomString();
+  const testingObject = JSON.stringify({
+    answerArea: {
+      calculator: false,
+      chi2Table: false,
+      financialCalculatorMonthlyPayment: false,
+      financialCalculatorTimeToPayOff: false,
+      financialCalculatorTotalAmount: false,
+      periodicTable: false,
+      periodicTableWithKey: false,
+      tTable: false,
+      zTable: false
+    },
+    hints: [randomHintPhrase, `=${Math.floor(Math.random() * 50) + 1}`],
+    itemDataVersion: {
+      major: 0,
+      minor: 1
+    },
+    question: {
+      content: `${randomPhrase}`,
+      images: {},
+      widgets: {
+        expression1: {
+          alignment: "default",
+          graded: false,
+          options: {
+            answerForms: [{
+              considered: "wrong",
+              form: false,
+              key: 0,
+              simplify: false,
+              value: `${randomString}`
+            }],
+            ariaLabel: "Answer",
+            buttonSets: ["basic"],
+            functions: ["f", "g", "h"],
+            static: true,
+            times: false,
+            visibleLabel: "Answer"
+          },
+          static: true,
+          type: "expression",
+          version: {
+            major: 1,
+            minor: 0
+          }
+        }
+      }
+    }
+  });
+  // @ts-expect-error TS2550: Property 'replaceAll' does not exist on type 'string'.
+  const testJSON = buildTestData(testingObject.replaceAll('"', '\\"'));
+  const parsedJSON = JSON.parse(testJSON);
+  const parsedItemData = parsedJSON.data.assessmentItem.item.itemData;
+  const isNotCheating = deepEq(parsedItemData, testingObject);
+  if (isNotCheating) {
+    return JSON.parse(json);
+  }
+  throw new Error("Something went wrong.");
+}
+function buildRandomString() {
+  let randomString = "";
+  const randomLength = Math.floor(Math.random() * 8) + 3;
+  for (let i = 0; i < randomLength; i++) {
+    const randomLetter = String.fromCharCode(97 + Math.floor(Math.random() * 26));
+    randomString += randomLetter;
+  }
+  return randomString;
+}
+function buildRandomPhrase() {
+  const phrases = [];
+  const randomLength = Math.floor(Math.random() * 10) + 5;
+  for (let i = 0; i < randomLength; i++) {
+    phrases.push(buildRandomString());
+  }
+  return phrases.join(" ");
+}
+function buildTestData(testObject) {
+  return `{"data":{"assessmentItem":{"__typename":"AssessmentItemOrError","error":null,"item":{"__typename":"AssessmentItem","id":"x890b3c70f3e8f4a6","itemData":"${testObject}","problemType":"Type 1","sha":"c7284a3ad65214b4e62bccce236d92f7f5d35941"}}}}`;
 }
 
 const genericPerseusItemData = {
@@ -48758,6 +48943,7 @@ exports.getAnswerFromUserInput = getAnswerFromUserInput;
 exports.getAnswersFromWidgets = getAnswersFromWidgets;
 exports.getCircleCoords = getCircleCoords;
 exports.getCorrectAnswerForWidgetId = getCorrectAnswerForWidgetId;
+exports.getImagesWithoutAltData = getImagesWithoutAltData;
 exports.getLineCoords = getLineCoords;
 exports.getLinearSystemCoords = getLinearSystemCoords;
 exports.getPointCoords = getPointCoords;