Tutorial Simple Quiz

In this tutorial, we’ll create a web-based quiz application that allows students to practice simplifying mathematical expressions into polynomials.

We’ll use two powerful tools: MathLive for math input and CortexJS Compute Engine for evaluating mathematical expressions.

Step 1: Setting Up Your Project

In this tutorial, we’ll use HTML and JavaScript.

Let’s start by setting up our HTML file.

<!doctype html>
<html>
<title>Math Quiz</title>
<body>
<!-- Interactive elements will be added here -->
</body>
<script type="module">
// Import the MathLive and Compute Engine libraries
import "//unpkg.com/mathlive?module";
import "//unpkg.com/@cortex-js/compute-engine";

// JavaScript code will be added here

</script>
</html>


For convenience, we’re loading the MathLive and ComputeEngine library from the unpkg CDN. You can also download the libraries and host them locally.

Since we want to use the Compute Engine, we’ll need to load its library as well. We could use MathLive without the Compute Engine, but we’ll need it to evaluate the student’s input.

Note that the <script> tag has a type="module" attribute. This is required to use the import statement.

Step 2: Creating the Quiz Interface

Our quiz will have a simple interface: a question area, an input field for the answer, a submission button, and a feedback section.

<p>Simplify the expression: (x+1)(2x -1)</p>
<div id="feedback"></div>


When the MathLive library is loaded, a new HTML element becomes available: <math-field>.

This element is a math input field that allows users to type math expressions.

We’ll use this element to allow students to input their answers.

Let’s add some CSS to make our quiz look nicer.

<style>
math-field {
width: 100%;
margin: 8px 0;
}
button {
margin: 8px 0;
font-size: 1em;
font-weight: bold;
font-family: system-ui;
}
p {
font-family: system-ui;
font-size: 1.5em;
}
#feedback {
font-family: system-ui;
font-size: 1.2em;
font-weight: bold;
display: flex;
justify-content: center;
border: 1px solid #ddd;
background: #f0f0f0;
}
</style>


Step 3: Processing and Checking Answers

Now, let’s add functionality to process the student’s input and compare it with the expected answer.

const expectedAnswer = "2x^2+x-1";

const studentInput = mathfield.value;

// Compare the expressions as strings
const feedback = studentInput === expectedAnswer ?
'Correct! 😃' : 'Try again. 😞';

document.getElementById('feedback').textContent = feedback;
}



To read the content of the math input field, we use the value property of the <math-field> element. This property returns a LaTeX string representation of the math expression

We then compare the student’s input with the expected answer. If the student’s input matches the expected answer, we’ll display a “Correct!” message. Otherwise, we’ll display a “Try again.” message.

Step 4: Using the CortexJS Compute Engine

While comparing the student’s input with the expected answer works, it’s not very flexible. For example, if we want to accept equivalent answers, we’ll have to manually check for each possible equivalent answer. This can be tedious and error-prone.

Instead, we can use the CortexJS Compute Engine to evaluate the student’s input and compare it with the expected answer. This way, we can accept equivalent answers without having to manually check for each one.

When the Compute Engine library is loaded in the page, the MathLive library automatically uses it to evaluate the math expressions entered in the math input field.

The Compute Engine represents mathematical expressions as a MathJSON data structure. This is a more flexible representation than LaTeX, and allows us to compare expressions in a more robust way.

To get the MathJSON representation of the student’s input, we can use the expression property of the <math-field> element.

We can get a reference to the Compute Engine instance used by MathLive by accessing the computeEngine property of MathfieldElement. We can then use the parse() method to convert the expected answer into a MathJSON expression.

We’ll modify our checkAnswer() function as follows:

const ce = MathfieldElement.computeEngine;

const studentInput = mathfield.expression;

// Compare the expressions using isSame()
'Correct! 😃' : 'Try again. 😞';

document.getElementById('feedback').textContent = feedback;
}


The method ce.parse() returns a boxed expression from a LaTeX string. A boxed expression is a JavaScript object that represents a mathematical expression.

The Compute Engine provides many operations that can be performed on boxed expressions, including calculus, statistical operations and linear algebra.

For example, we can simplify an expression, expand it or evaluate it for a given value of x.

Using the isSame() method, we can compare the student’s input with the expected answer. This method returns true if the two expressions are structurally equivalent, and false otherwise.

This method compares the two expressions not as strings, but as mathematical expressions. For example, it will consider 2x or 2\times x to be the same.

Step 5: Listening for Keyboard Events

We can make our quiz more user-friendly by allowing students to validate their answer by pressing the Enter key.

To do this, we’ll add an event listener to the math input field to listen for keyboard events.

const answerField = document.getElementById('answer');
});


Note that we could also use the keypress event, but the input event is will work both when using a physical keyboard and when using the virtual keyboard.

Step 6: Displaying Static Math

In our example so far, we display the question in plain text. We can display it as LaTeX instead. It doesn’t make much of a difference in this case, but it can be useful when we want to display more complex math.

First, we’ll modify the HTML to indicate that a portion of the question should be rendered as math by surrounding it with $$ delimiters. <div>Simplify the expression:$$ (x+1)(2x-1) </div>


Then we’ll call the renderMathInElement() function to render the math in the question.

renderMathInElement(document.getElementById('question'));


If we had a lot of math in our quiz, we could call renderMathInDocument() to render all the math in the page.

We also need to load a CSS stylesheet to render the math. We can use the mathlive-static.css stylesheet provided by the MathLive library.

<link
rel="stylesheet"
href="https://unpkg.com/mathlive/dist/mathlive-static.css"
/>


Another way to render math is to use the convertLatexToMarkup() function.

To do this, we’ll modify our markup to use a <span> element.

<p>Simplify the expression: <span id="question">(x+1)(2x-1)</span></p>


Then we’ll modify our JavaScript to use this function to render the question.

const questionSpan = document.getElementById('question');
questionSpan.innerHTML =
convertLatexToMarkup(questionSpan.textContent);


Here we’re using convertLatexToMarkup() to convert the LaTeX representation of the expression into HTML markup. It’s a more direct way to render static math in the page.

Note that we need to modify our import statement to import the convertLatexToMarkup() function.

import { renderMathInElement, convertLatexToMarkup } from "//unpkg.com/mathlive?module";


Step 7: Generating Random Questions

So far our quiz always asks the same question. To keep it interesting, we can generate random questions.

We’ll create a function that generates a product of two random terms.

function generateRandomQuestion() {
const ce = MathfieldElement.computeEngine;
const a = Math.floor(Math.random() * 10) + 1;
const b = Math.floor(Math.random() * 10) ;
const c = Math.floor(Math.random() * 10) + 1;
const d = Math.floor(Math.random() * 10) ;
// (ax+b)(cx+d)
return ce.box(["Multiply",
}


The ce.box() function creates a boxed expression from a MathJSON expression.

Then we’ll update our script to use this function to generate the question.

const question = generateRandomQuestion();
document.getElementById('question').innerHTML =
convertLatexToMarkup(question.latex);


Since we expect the student to have simplified the expression, we use simplify() to simplify the product of two terms into a polynomial and compare it with the student’s input.

Conclusion

Here’s the complete code for our quiz application:

<!doctype html>
<html>
<title>Math Quiz</title>
rel="stylesheet"
href="https://unpkg.com/mathlive/dist/mathlive-static.css"
/>
<style>
math-field {
width: 100%;
margin: 8px 0;
}
button {
margin: 8px 0;
font-size: 1em;
font-weight: bold;
font-family: system-ui;
}
p {
font-family: system-ui;
font-size: 1.5em;
}
#feedback {
font-family: system-ui;
font-size: 1.2em;
font-weight: bold;
display: flex;
justify-content: center;
border: 1px solid #ddd;
background: #f0f0f0;
}
</style>
<body>
<p>Simplify the expression <span id="question"></span></p>
<div id="feedback"></div>
</body>
<script type="module">
import { convertLatexToMarkup } from "//unpkg.com/mathlive?module";
import "//unpkg.com/@cortex-js/compute-engine";
const ce = MathfieldElement.computeEngine;
const question = generateRandomQuestion();

document.getElementById('question').innerHTML =
convertLatexToMarkup(question.latex);

});

function generateRandomQuestion() {
const a = Math.floor(Math.random() * 10) + 1;
const b = Math.floor(Math.random() * 10) ;
const c = Math.floor(Math.random() * 10) + 1;
const d = Math.floor(Math.random() * 10) ;
// (ax+b)(cx+d)
return ce.box(["Multiply",
}

// Compare the expressions using isSame()