80 lines
1.6 KiB
JavaScript
80 lines
1.6 KiB
JavaScript
let state = "problem"; // problem | steps | done
|
|
let stepIndex = 0;
|
|
let currentData = null;
|
|
|
|
// Load the data to draw
|
|
async function loadData() {
|
|
const res = await fetch("data/data.json");
|
|
currentData = await res.json();
|
|
|
|
state = "problem";
|
|
stepIndex = 0;
|
|
|
|
render();
|
|
}
|
|
|
|
function render() {
|
|
if (!currentData) return;
|
|
|
|
const problemEl = document.getElementById("problem");
|
|
const stepsEl = document.getElementById("steps");
|
|
|
|
if (state === "problem") {
|
|
problemEl.innerHTML = `\\(${currentData.problem}\\)`;
|
|
stepsEl.innerHTML = "";
|
|
}
|
|
|
|
if (state === "step") {
|
|
problemEl.innerHTML = `\\(${currentData.problem}\\)`;
|
|
|
|
let html = "";
|
|
for (let i = 0; i <= stepIndex; i++) {
|
|
const s = currentData.steps[i];
|
|
html += `
|
|
<div class="step">
|
|
<div>\\(${s.before}\\)</div>
|
|
<div>${s.step}</div>
|
|
<div>\\(${s.after}\\)</div>
|
|
</div>
|
|
<hr/>
|
|
`;
|
|
}
|
|
|
|
stepsEl.innerHTML = html;
|
|
}
|
|
|
|
MathJax.typesetPromise();
|
|
}
|
|
|
|
function startSequence() {
|
|
// 1. show problem
|
|
state = "problem";
|
|
render();
|
|
|
|
setTimeout(() => {
|
|
state = "step";
|
|
stepIndex = 0;
|
|
render();
|
|
|
|
let interval = setInterval(() => {
|
|
stepIndex++;
|
|
|
|
render();
|
|
|
|
if (stepIndex >= currentData.steps.length - 1) {
|
|
clearInterval(interval);
|
|
|
|
setTimeout(() => {
|
|
loadData(); // next problem
|
|
}, 3000);
|
|
}
|
|
}, 2000); // time between steps
|
|
|
|
}, 4000); // thinking time before reveal
|
|
}
|
|
|
|
loadData().then(() => {
|
|
startSequence();
|
|
});
|
|
|