@khanacademy/perseus 42.0.0 → 42.0.1

package/dist/index.d.ts

@@ -58,6 +58,7 @@ export { isItemRenderableByVersion } from "./renderability";
 export { violatingWidgets } from "./a11y";
 export { interactiveSizes } from "./styles/constants";
 export { displaySigFigs } from "./sigfigs";
+export { conversionRequired, convertDeprecatedWidgets, } from "./util/deprecated-widgets/modernize-widgets-utils";
 export { PerseusI18nContextProvider, PerseusI18nContext, usePerseusI18n, } from "./components/i18n-context";
 /**
  * Util

package/dist/index.js

@@ -18875,6 +18875,194 @@ class QuestionParagraph extends React__namespace.Component {
   }
 }
 
+// Methods to convert input-number widgets to numeric-input widgets
+
+const inputNumberToNumericInput = json => {
+  // First we need to create a map of the old input-number keys to the new numeric-input keys
+  // so that we can ensure we update the content and widgets accordingly
+  const renameMap = getInputNumberRenameMap(json);
+
+  // Then we can use this to update the JSON
+  return convertInputNumberJson(json, renameMap);
+};
+
+// We need to be able to run this code recursively in order to convert nested input-number widgets
+const convertInputNumberJson = (json, renameMap) => {
+  const updatedContent = convertDeprecatedWidgetsInContent(json, renameMap);
+  const updatedWidgets = convertInputNumberWidgetOptions(json, renameMap);
+  const modernizedJson = {
+    ...json,
+    content: updatedContent,
+    widgets: updatedWidgets
+  };
+  return modernizedJson;
+};
+
+// Convert the input-number json in the widgets of a PerseusRenderer object
+const convertInputNumberWidgetOptions = (json, renameMap) => {
+  const widgets = {
+    ...json.widgets
+  };
+  // The question.widgets is a dictionary map of widgets, so we need to loop through in order to convert input-number to numeric-input
+  // which can exist as both the key or as a value on widget.type.
+  for (const key of Object.keys(widgets)) {
+    // Loop through the keys of the widgets dictionary
+    if (widgets[key].options.widgets) {
+      widgets[key].options = {
+        ...inputNumberToNumericInput(widgets[key].options)
+      };
+    }
+    // Check if the widget is an input-number
+    if (widgets[key].type === "input-number") {
+      // If the answerType is not number or percent, we need to provide
+      // the answer form for the numeric-input widget
+      const provideAnswerForm = widgets[key].options.answerType !== "number" && widgets[key].options.answerType !== "percent";
+      // We need to determine the mathFormat for the numeric-input widget
+      const mathFormat = widgets[key].options.answerType === "rational" ? "proper" // input-number uses "rational" for proper fractions
+      : widgets[key].options.answerType; // Otherwise, we can use the answerType directly
+
+      // We need to update the answers prop to match the numeric-input widget format
+      const answers = [{
+        value: widgets[key].options.value,
+        simplify: widgets[key].options.simplify,
+        // Input Number doesn't have a strict prop, so we default to false
+        strict: false,
+        // We only want to set maxError if the inexact prop is true
+        maxError: widgets[key].options.inexact ? widgets[key].options.maxError : 0,
+        status: "correct",
+        // Input-number only allows correct answers
+        message: ""
+      }];
+
+      // Add the required answerForms if provided/applicable
+      if (provideAnswerForm) {
+        answers[0].answerForms = [mathFormat];
+      }
+
+      // Update the options prop to match the numeric-input widget format
+      const upgradedWidgetOptions = {
+        answers,
+        size: widgets[key].options.size,
+        coefficient: false,
+        // input-number doesn't have a coefficient prop
+        labelText: "",
+        // input-number doesn't have a labelText prop
+        static: false,
+        // static is always false for numeric-input
+        rightAlign: widgets[key].options.rightAlign || false
+      };
+      const upgradedWidget = {
+        options: upgradedWidgetOptions,
+        type: "numeric-input"
+      };
+      const newWidgetName = renameMap[key];
+      // Create the new key entry
+      widgets[newWidgetName] = upgradedWidget;
+
+      // We need to delete the old widget key
+      delete widgets[key];
+    }
+  }
+  return widgets;
+};
+
+// Convert the deprecated widget refs in the content string
+// of a PerseusRenderer object to their renamed equivalents
+const convertDeprecatedWidgetsInContent = (json, renameMap) => {
+  return Object.keys(renameMap).reduce((newContent, oldKey) => {
+    const newKey = renameMap[oldKey];
+    return newKey ? newContent.replace(oldKey, newKey) : newContent;
+  }, json.content);
+};
+
+// Create a map of the old input-number keys to the new numeric-input keys
+const getInputNumberRenameMap = json => {
+  const numericRegex = /(?<=\[\[\u2603 )(numeric-input \d+)(?=\]\])/g;
+  const inputNumberRegex = /(?<=\[\[\u2603 )(input-number \d+)(?=\]\])/g;
+
+  // Get all the content strings within the json, which might be nested within widgets
+  const allContentStrings = json.content;
+
+  // Loop through the content strings to get all the input-number widgets
+  const renameMap = {};
+  const inputNumberMatches = [...(allContentStrings.match(inputNumberRegex) || [])];
+
+  // We want to count any pre-existing numeric-input widgets
+  // so that we can start the new ids at the next number
+  const numericMatches = [...(allContentStrings.match(numericRegex) || [])];
+  let currentNumericCount = numericMatches.reduce((count, match) => {
+    const id = parseInt(match.split(" ")[1], 10);
+    return id >= count ? id + 1 : count; // We want to start at the next highest number
+  }, 1);
+
+  // Now that we have all the necessary information, we can create the renameMap
+  for (const match of inputNumberMatches) {
+    const oldKey = match;
+    const newKey = `numeric-input ${currentNumericCount}`;
+    renameMap[oldKey] = newKey;
+    currentNumericCount++;
+  }
+  return renameMap;
+};
+
+// Convert the user input data keys from input-number to numeric-input
+const convertUserInputNumberData = userInputMap => {
+  const updatedUserInputMap = {
+    ...userInputMap
+  };
+  for (const key of Object.keys(userInputMap)) {
+    if (key.includes("input-number")) {
+      const updatedKey = key.replace("input-number", "numeric-input");
+      updatedUserInputMap[updatedKey] = userInputMap[key];
+      delete updatedUserInputMap[key];
+    }
+  }
+  return updatedUserInputMap;
+};
+
+const widgetRegExes = [/input-number \d+/]; // We can add more regexes here in the future
+
+// This utils in this file are used to modernize our Perseus JSON structure,
+// so that we can convert deprecated widgets to their modern equivalents when
+// content creators use the Editor Page to update content containing these widgets.
+// Currently, we're only converting input-number to numeric-input,
+// but we can add more conversions here in the future.
+// Modernize the json content of a PerseusRenderer object
+// by converting deprecated widgets to their modern equivalents
+const convertDeprecatedWidgets = json => {
+  // Currently we're only converting input-number to numeric-input,
+  // But we can add more conversions here in the future
+  return inputNumberToNumericInput(json);
+};
+const conversionRequired = json => {
+  // If there's no content, then there's no conversion required
+  if (!json.content) {
+    return false;
+  }
+  // Check the content string for any top-level input-number widgets
+  if (widgetRegExes.some(regex => regex.test(json.content))) {
+    return true;
+  }
+
+  // If there's no deprecated widget in the top-level, then check for any nested widgets
+  for (const key of Object.keys(json.widgets)) {
+    if (json.widgets[key].options.widgets) {
+      const nestedJson = json.widgets[key].options;
+      if (conversionRequired(nestedJson)) {
+        return true;
+      }
+    }
+  }
+  return false;
+};
+
+// Convert the user input data keys for deprecated widgets to their modern equivalents
+const convertUserInputData = userInputMap => {
+  // Currently we're only converting input-number to numeric-input,
+  // But we can add more conversions here in the future
+  return convertUserInputNumberData(userInputMap);
+};
+
 // These are all the current widgets that require user-input and are supported for automatic scoring
 const QUESTION_WIDGETS = ["numeric-input", "input-number", "radio", "interactive-graph", "interactive-number-line", "categorizer", "plotter", "orderer", "protractor", "matcher", "sorter"];
 
@@ -19474,11 +19662,18 @@ function scorePerseusItem(perseusRenderData, userInputMap,
 // TODO(LEMS-2461,LEMS-2391): these probably
 // need to be removed before we move this to the server
 strings, locale) {
+  // Check if the PerseusRenderer object contains any deprecated widgets that need to be converted
+  const mustConvertData = conversionRequired(perseusRenderData);
+  const convertedRenderData = mustConvertData ? convertDeprecatedWidgets(perseusRenderData) // Convert deprecated widgets to their modern equivalents
+  : perseusRenderData;
+  const convertedUserInputMap = mustConvertData ? convertUserInputData(userInputMap) // Convert deprecated user input data keys to their modern equivalents
+  : userInputMap;
+
   // There seems to be a chance that PerseusRenderer.widgets might include
   // widget data for widgets that are not in PerseusRenderer.content,
   // so this checks that the widgets are being used before scoring them
-  const usedWidgetIds = getWidgetIdsFromContent(perseusRenderData.content);
-  const scores = scoreWidgetsFunctional(perseusRenderData.widgets, usedWidgetIds, userInputMap, strings, locale);
+  const usedWidgetIds = getWidgetIdsFromContent(convertedRenderData.content);
+  const scores = scoreWidgetsFunctional(convertedRenderData.widgets, usedWidgetIds, convertedUserInputMap, strings, locale);
   return Util.flattenScores(scores);
 }
 function scoreWidgetsFunctional(widgets,
@@ -45203,7 +45398,7 @@ const init = function () {
 
 // This file is processed by a Rollup plugin (replace) to inject the production
 const libName = "@khanacademy/perseus";
-const libVersion = "42.0.0";
+const libVersion = "42.0.1";
 perseusCore.addLibraryVersionToPerseusDebug(libName, libVersion);
 
 const apiVersion = {
@@ -49843,6 +50038,8 @@ exports.buildMapper = buildMapper;
 exports.components = components;
 exports.containerSizeClass = containerSizeClass;
 exports.contentHasWidgetType = contentHasWidgetType;
+exports.conversionRequired = conversionRequired;
+exports.convertDeprecatedWidgets = convertDeprecatedWidgets;
 exports.convertWidgetNameToEnum = convertWidgetNameToEnum;
 exports.displaySigFigs = displaySigFigs;
 exports.generateTestCategorizerWidget = generateTestCategorizerWidget;