51 lines
1.0 KiB
JavaScript
51 lines
1.0 KiB
JavaScript
let state = "problem"; // problem | steps | done
|
|
|
|
function showProblem() {
|
|
const problemEl = document.getElementById("problem");
|
|
const stepsEl = document.getElementById("steps");
|
|
|
|
problemEl.innerHTML = `\\(${problemData.problem}\\)`;
|
|
stepsEl.innerHTML = "";
|
|
|
|
MathJax.typesetPromise();
|
|
}
|
|
|
|
function startSequence() {
|
|
setTimeout(() => {
|
|
showNextStep();
|
|
}, 3000); // thinking time
|
|
}
|
|
|
|
function showNextStep() {
|
|
const stepsEl = document.getElementById("steps");
|
|
|
|
if (stepIndex >= problemData.steps.length) {
|
|
// finished → request next problem
|
|
setTimeout(() => {
|
|
requestNextProblem();
|
|
}, 3000);
|
|
|
|
return;
|
|
}
|
|
|
|
const s = problemData.steps[stepIndex];
|
|
|
|
const html = `
|
|
<div class="step">
|
|
<div>\\(${s.before}\\)</div>
|
|
<div>${s.step}</div>
|
|
<div>\\(${s.after}\\)</div>
|
|
</div>
|
|
<hr/>
|
|
`;
|
|
|
|
stepsEl.innerHTML += html;
|
|
|
|
MathJax.typesetPromise();
|
|
|
|
stepIndex++;
|
|
|
|
setTimeout(showNextStep, 2000); // time between steps
|
|
}
|
|
|