cortex-js/cortexjs.io

Errors in simple quiz

ksthicke opened this issue · 1 comments

ksthicke commented

The simple quiz does not work as written. I found the following issues:

Step 2
The virtual keyboard doesn't load. Firefox says Uncaught TypeError: window.mathVirtualKeyboard is null. Edge says Uncaught TypeError: Cannot read properties of null (reading 'addEventListener'). I was able to fix this by loading MathLive as a module. I'm not sure what the intended fix for this is.

Step 3
mathfield is not defined. Fixed by adding const mathfield = document.getElementById('answer'); Combining the issues from Steps 2 and 3, the code looks like this:

<!doctype html>
<html>
<head>
    <title>Math Quiz</title>
    <!-- Include MathLive and CortexJS Compute Engine -->
    <script src="https://unpkg.com/@cortex-js/compute-engine"></script>
    <script type="module">
        import "https://unpkg.com/mathlive?module";
        const expectedAnswer = "2x^2+x-1";

        function checkAnswer() {
            const mathfield = document.getElementById('answer');
            const studentInput = mathfield.value;

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

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

        const answerButton = document.getElementById('submitAnswer');
        answerButton.addEventListener('click', checkAnswer);
    </script>
</head>
<body>
    <div>Simplify the expression: (x+1)(2x -1)</div>
    <math-field id="answer"></math-field>
    <button id="submitAnswer">Check Answer</button>
    <div id="feedback"></div>
</body>
</html>

Step 4
Again, mathfield is undefined.

Step 6
In the first part, the div should have id "question". Additionally, since I am using the module due to the issue in Step 2, I needed to directly import the required functions:

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

but I suspect that a different fix to the issue in Step 2 wouldn't require this.

In the second part of Step 6, the code tries to set the htmlContent property of the span tag, which doesn't do anything. I think innerHTML was meant here.

Step 7
Again, I think innerHTML was meant instead of htmlContent.

For the life of me, I cannot get ce.add or ce.mul to work (or at least it did not work in Firefox or Edge, where it kept saying Uncaught TypeError: e.every is not a function). I don't understand what the inputs to ce.add and ce.mul are supposed to be. Instead, I just replaced it with

return ce.box(["Multiply", 
    ["Add", ["Multiply", a, "x"], b], 
    ["Add", ["Multiply", c, "x"], d]]).evaluate();

and then everything worked fine.

arnog commented

Thanks for reporting this issue. This tutorial was written by an AI and there were indeed a few errors in it. I should have reviewed it more closely 😀

The errors should now be corrected.