Equation Editor

CAHLR · Dec 8, 2023 · 73c3c9c · 73c3c9c
1 parent fde1ae1
commit 73c3c9c
Show file tree

Hide file tree

Showing 5 changed files with 121 additions and 26 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -16,6 +16,7 @@
     "http2": "~3.3.7",
     "list-react-files": "~0.2.0",
     "localforage": "~1.10.0",
+    "mathlive": "^0.95.5",
     "random-seed": "~0.3.0",
     "react": "~16.14.0",
     "react-cursor-position": "~3.0.3",
@@ -64,5 +65,5 @@
     "react-app-rewire-alias": "~1.1.7",
     "react-app-rewired": "~2.2.1"
   },
-  "homepage": "place-holder"
+  "homepage": "OATutor-EquationEditor"
 }
diff --git a/src/components/problem-input/ProblemInput.js b/src/components/problem-input/ProblemInput.js
@@ -1,12 +1,12 @@
 import React, { createRef } from "react";
 import Grid from "@material-ui/core/Grid";
-import EquationEditor from "equation-editor-react";
 import TextField from "@material-ui/core/TextField";
 import MultipleChoice from "./MultipleChoice";
 import GridInput from "./GridInput";
 import MatrixInput from "./MatrixInput";
 import { renderText } from "../../platform-logic/renderText";
 import clsx from "clsx";
+import "mathlive";
 import './ProblemInput.css'
 import { shuffleArray } from "../../util/shuffleArray";
 import { EQUATION_EDITOR_AUTO_COMMANDS, EQUATION_EDITOR_AUTO_OPERATORS, ThemeContext } from "../../config/config";
@@ -22,6 +22,10 @@ class ProblemInput extends React.Component {
         this.equationRef = createRef()
 
         this.onEquationChange = this.onEquationChange.bind(this)
+
+        this.state = {
+            value: "",
+        };
     }
 
     componentDidMount() {
@@ -80,6 +84,8 @@ class ProblemInput extends React.Component {
         const { classes, state, index, showCorrectness, allowRetry, variabilization } = this.props;
         const { use_expanded_view, debug } = this.context;
         let { problemType, stepAnswer, hintAnswer, units } = this.props.step;
+        const keepMCOrder = this.props.keepMCOrder;
+        const keyboardType = this.props.keyboardType;
 
         const problemAttempted = state.isCorrect != null
         const correctAnswer = Array.isArray(stepAnswer) ? stepAnswer[0] : hintAnswer[0]
@@ -88,28 +94,30 @@ class ProblemInput extends React.Component {
         if (this.isMatrixInput()) {
             problemType = "MatrixInput"
         }
+
+        try {
+            window.mathVirtualKeyboard.layouts = [keyboardType];
+        } catch {
+            window.mathVirtualKeyboard.layouts = ["default"];
+        }
+
 
         return (
             <Grid container spacing={0} justifyContent="center" alignItems="center"
                 className={clsx(disableInput && 'disable-interactions')}>
                 <Grid item xs={1} md={problemType === "TextBox" ? 4 : false}/>
                 <Grid item xs={9} md={problemType === "TextBox" ? 3 : 12}>
                     {(problemType === "TextBox" && this.props.step.answerType !== "string") && (
-                        <center
-                            ref={this.equationRef}
-                            className={clsx(showCorrectness && state.isCorrect === false && classes.textBoxLatexIncorrect, state.usedHints && classes.textBoxLatexUsedHint, classes.textBoxLatex)}
-                            {...stagingProp({
-                                "data-selenium-target": `arithmetic-answer-${index}`
-                            })}
+                        <math-field 
+                            onInput={evt => this.props.setInputValState(evt.target.value)}
+                            style={{"display": "block"}}
+                            value={(use_expanded_view && debug) ? correctAnswer : state.inputVal}
+                            onChange={this.onEquationChange}
+                            autoCommands={EQUATION_EDITOR_AUTO_COMMANDS}
+                            autoOperatorNames={EQUATION_EDITOR_AUTO_OPERATORS}
                         >
-                            <EquationEditor
-                                value={(use_expanded_view && debug) ? correctAnswer : state.inputVal}
-                                onChange={this.onEquationChange}
-                                style={{ width: "100%" }}
-                                autoCommands={EQUATION_EDITOR_AUTO_COMMANDS}
-                                autoOperatorNames={EQUATION_EDITOR_AUTO_OPERATORS}
-                            />
-                        </center>
+                            </math-field>
+
                     )}
                     {(problemType === "TextBox" && this.props.step.answerType === "string") && (
                         <TextField
@@ -146,7 +154,18 @@ class ProblemInput extends React.Component {
                         >
                         </textarea>
                     )}
-                    {problemType === "MultipleChoice" && (
+                    {(problemType === "MultipleChoice" && keepMCOrder) && (
+                        <MultipleChoice
+                            onChange={(evt) => this.props.editInput(evt)}
+                            choices={[...this.props.step.choices].reverse()}
+                            index={index}
+                            {...(use_expanded_view && debug) ? {
+                                defaultValue: correctAnswer
+                            } : {}}
+                            variabilization={variabilization}
+                        />
+                    )}
+                    {(problemType === "MultipleChoice" && (keepMCOrder === false || keepMCOrder === null)) && (
                         <MultipleChoice
                             onChange={(evt) => this.props.editInput(evt)}
                             choices={shuffleArray(this.props.step.choices, this.props.seed)}
@@ -195,4 +214,4 @@ class ProblemInput extends React.Component {
     }
 }
 
-export default ProblemInput
+export default ProblemInput
diff --git a/src/components/problem-layout/Problem.js b/src/components/problem-layout/Problem.js
@@ -42,12 +42,16 @@ class Problem extends React.Component {
 
         const giveStuFeedback = this.props.lesson?.giveStuFeedback;
         const giveStuHints = this.props.lesson?.giveStuHints;
+        const keepMCOrder = this.props.lesson?.keepMCOrder;
+        const keyboardType = this.props.lesson?.keyboardType;
         const doMasteryUpdate = this.props.lesson?.doMasteryUpdate;
         const unlockFirstHint = this.props.lesson?.unlockFirstHint;
         const giveStuBottomHint = this.props.lesson?.allowBottomHint;
 
         this.giveHintOnIncorrect = true;
         this.giveStuFeedback = giveStuFeedback == null || giveStuFeedback;
+        this.keepMCOrder = keepMCOrder != null && keepMCOrder;
+        this.keyboardType = keyboardType != null && keyboardType;
         this.giveStuHints = giveStuHints == null || giveStuHints;
         this.doMasteryUpdate = doMasteryUpdate == null || doMasteryUpdate;
         this.unlockFirstHint = unlockFirstHint != null && unlockFirstHint;
@@ -462,6 +466,8 @@ class Problem extends React.Component {
                                     problemSubTitle={problem.body}
                                     giveStuFeedback={this.giveStuFeedback}
                                     giveStuHints={this.giveStuHints}
+                                    keepMCOrder={this.keepMCOrder}
+                                    keyboardType={this.keyboardType}
                                     giveHintOnIncorrect={
                                         this.giveHintOnIncorrect
                                     }

diff --git a/src/components/problem-layout/ProblemCard.js b/src/components/problem-layout/ProblemCard.js
@@ -46,7 +46,8 @@ class ProblemCard extends React.Component {
         this.giveStuHints = props.giveStuHints;
         this.unlockFirstHint = props.unlockFirstHint;
         this.giveHintOnIncorrect = props.giveHintOnIncorrect
-
+        this.keepMCOrder = props.keepMCOrder;
+        this.keyboardType = props.keyboardType;
         this.allowRetry = this.giveStuFeedback;
 
         this.giveStuBottomHint = props.giveStuBottomHint;
@@ -589,6 +590,8 @@ class ProblemCard extends React.Component {
                             state={this.state}
                             step={this.step}
                             seed={this.props.seed}
+                            keepMCOrder={this.props.keepMCOrder}
+                            keyboardType={this.props.keyboardType}
                             _setState={(state) => this.setState(state)}
                             context={this.context}
                             editInput={this.editInput}
@@ -731,4 +734,4 @@ class ProblemCard extends React.Component {
     }
 }
 
-export default withStyles(styles)(ProblemCard);
+export default withStyles(styles)(ProblemCard);