<!DOCTYPE html>
<meta charset="utf-8" />
<title>GM Canvas Example</title>
<script src="https://graspablemath.com/shared/libs/gmath/gm-inject.js"></script>
<body>
<div id="gm-div" style="height: 400px"></div>
<script>
loadGM(initCanvas, { version: 'latest' });
function initCanvas() {
const canvasOptions = {
"use_toolbar": false,
"formula_panel": false,
"vertical_scroll": false
};
canvas = new gmath.Canvas('#gm-div', canvasOptions);
canvas.model.createElement('derivation', {
eq: '2x+1=3',
wiggle: ['+1:1'],
pos: { x: 'left', y: 'top' },
});
canvas.model.on('el_changed', function (evt) {
console.log(evt.last_eq);
if (evt.last_eq === 'x=1') canvas.showHint('Success :)');
});
}
</script>
</body>
I followed the instructions at https://github.com/eweitnauer/gm-api/blob/master/quickstart.md#changes-in-the-state-of-a-derivation, and I got the error "Uncaught TypeError: canvas.showHint is not a function". The following is my code: