@khanacademy/perseus 17.6.1 → 17.7.0

package/package.json

@@ -3,7 +3,7 @@
     "description": "Core Perseus API (includes renderers and widgets)",
     "author": "Khan Academy",
     "license": "MIT",
-    "version": "17.6.1",
+    "version": "17.7.0",
     "publishConfig": {
         "access": "public"
     },
@@ -24,7 +24,7 @@
     "dependencies": {
         "@khanacademy/kas": "^0.3.7",
         "@khanacademy/kmath": "^0.1.8",
-        "@khanacademy/math-input": "^16.4.1",
+        "@khanacademy/math-input": "^16.5.0",
         "@khanacademy/perseus-core": "1.4.1",
         "@khanacademy/perseus-linter": "^0.3.10",
         "@khanacademy/pure-markdown": "^0.2.13",

package/src/widgets/__testdata__/expression.testdata.ts

@@ -48,6 +48,26 @@ const createItemJson = (
     };
 };
 
+export const expressionItemWithAnswer = (answer: string): PerseusItem => {
+    return createItemJson(
+        {
+            answerForms: [
+                {
+                    considered: "correct",
+                    form: false,
+                    simplify: false,
+                    value: answer,
+                },
+            ],
+            times: false,
+            buttonSets: ["basic"],
+            functions: [],
+            buttonsVisible: "always",
+        },
+        {major: 1, minor: 0},
+    );
+};
+
 export const expressionItem2: PerseusItem = createItemJson(
     {
         answerForms: [

package/src/widgets/__tests__/expression.test.tsx

@@ -12,6 +12,7 @@ import {
     expressionItem2,
     expressionItem3,
     expressionItem3Options,
+    expressionItemWithAnswer,
 } from "../__testdata__/expression.testdata";
 import {Expression} from "../expression";
 
@@ -182,6 +183,33 @@ describe("Expression Widget", function () {
         });
     });
 
+    describe("when the question uses the sin function", () => {
+        it("allows parens", () => {
+            const item = expressionItemWithAnswer("sin(x)");
+            assertCorrect(item, "sin(x)");
+        });
+
+        it("allows no parens", () => {
+            const item = expressionItemWithAnswer("sin(x)");
+            assertCorrect(item, "sin x");
+        });
+
+        it("grades a wrong answer as incorrect", () => {
+            const item = expressionItemWithAnswer("sin(x)");
+            assertIncorrect(item, "2");
+        });
+
+        it("treats sen as equivalent to sin", () => {
+            const item = expressionItemWithAnswer("sin(x)");
+            assertCorrect(item, "sen x");
+        });
+
+        it("treats multiple usages of sen as equivalent to sin", () => {
+            const item = expressionItemWithAnswer("sin(sin(x))");
+            assertCorrect(item, "sen(sen(x))");
+        });
+    });
+
     describe("analytics", () => {
         const assertKeypadVersion = (
             apiOptions: APIOptions,
@@ -436,4 +464,21 @@ describe("error tooltip", () => {
             screen.getByText("Sorry, I don't understand that!"),
         ).toBeVisible();
     });
+
+    it("does not show error text when the sen() function is used (Portuguese for sin())", async () => {
+        // Arrange
+        const {renderer} = renderQuestion(expressionItem2.question);
+        const expression = renderer.findWidgets("expression 1")[0];
+
+        // Act
+        expression.insert("sen(x)");
+        screen.getByRole("textbox").blur();
+        renderer.guessAndScore();
+
+        // Assert
+        expect(screen.queryByText("Oops!")).toBeNull();
+        expect(
+            screen.queryByText("Sorry, I don't understand that!"),
+        ).toBeNull();
+    });
 });

package/src/widgets/expression.tsx

@@ -57,6 +57,17 @@ const insertBraces = (value) => {
     return value.replace(/([_^])([^{])/g, "$1{$2}");
 };
 
+const anglicizeOperators = (tex: string): string => {
+    // sen is used instead of sin in some languages, e.g. Portuguese.
+    // To ensure that answers in various languages are graded correctly, we
+    // convert operators to their Englishy forms.
+    return tex.replace(/\\operatorname{sen}/g, "\\sin ");
+};
+
+const normalizeTex = (tex: string): string => {
+    return anglicizeOperators(insertBraces(tex));
+};
+
 const deriveKeypadVersion = (apiOptions: APIOptions) => {
     // We can derive which version of the keypad is in use. This is
     // a bit tricky, but this code will be relatively short-lived
@@ -280,7 +291,7 @@ export class Expression extends React.Component<Props, ExpressionState> {
     }
 
     static getUserInputFromProps(props: Props): string {
-        return insertBraces(props.value);
+        return normalizeTex(props.value);
     }
 
     static getOneCorrectAnswerFromRubric(
@@ -410,7 +421,7 @@ export class Expression extends React.Component<Props, ExpressionState> {
         _.extend(options, {
             decimal_separator: i18n.getDecimalSeparator(),
         });
-        return KAS.parse(insertBraces(value), options);
+        return KAS.parse(normalizeTex(value), options);
     };
 
     changeAndTrack: (e: any, cb: () => void) => void = (

package/src/widgets/label-image/marker.tsx

@@ -67,8 +67,8 @@ export default class Marker extends React.Component<Props> {
 
         const iconNull: IconType = {
             path: "",
-            height: 0,
-            width: 0,
+            height: 1,
+            width: 1,
         };
 
         // default dot