108 lines
2.8 KiB
JavaScript
108 lines
2.8 KiB
JavaScript
|
|
function showProblem() {
|
|
const problemEl = document.getElementById("problem");
|
|
const stepsEl = document.getElementById("equation");
|
|
|
|
const formatted = formatMath(problemData.problem);
|
|
problemEl.innerHTML = `\\(${formatted}\\)`;
|
|
stepsEl.innerHTML = "";
|
|
|
|
MathJax.typesetPromise();
|
|
}
|
|
|
|
function showStep() {
|
|
if (stepIndex >= problemData.steps.length) {
|
|
setTimeout(requestNextProblem, 3000);
|
|
return;
|
|
}
|
|
|
|
const eqEl = document.getElementById("equation");
|
|
const expEl = document.getElementById("explanation");
|
|
|
|
const step = problemData.steps[stepIndex];
|
|
|
|
expEl.innerHTML = step.step;
|
|
|
|
// STEP 1: fade out
|
|
eqEl.classList.remove("fade-in");
|
|
eqEl.classList.add("fade-out");
|
|
|
|
setTimeout(() => {
|
|
// STEP 2: update content
|
|
eqEl.innerHTML = `\\(${formatMath(step.after)}\\)`;
|
|
MathJax.typesetPromise();
|
|
|
|
// STEP 3: force reflow (CRUCIAL)
|
|
void eqEl.offsetWidth;
|
|
|
|
// STEP 4: fade back in
|
|
eqEl.classList.remove("fade-out");
|
|
eqEl.classList.add("fade-in");
|
|
|
|
stepIndex++;
|
|
|
|
setTimeout(showStep, 2000);
|
|
}, 500);
|
|
}
|
|
|
|
function startSteps() {
|
|
stepIndex = 0;
|
|
showStep();
|
|
}
|
|
|
|
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 formatted_step_before = formatMath(s.before);
|
|
const formatted_step_after = formatMath(s.after);
|
|
|
|
const html = `
|
|
<hr/>
|
|
<div class="step">
|
|
<div>\\(${formatted_step_before}\\)</div>
|
|
<div>${s.step}</div>
|
|
<div>\\(${formatted_step_after}\\)</div>
|
|
</div>
|
|
`;
|
|
|
|
stepsEl.innerHTML = html;
|
|
|
|
MathJax.typesetPromise();
|
|
|
|
stepIndex++;
|
|
|
|
setTimeout(showNextStep, 2000); // time between steps
|
|
}
|
|
|
|
function formatMath(str) {
|
|
return str
|
|
.replace(/\*\*/g, "^") // Exponent Fix
|
|
.replace(/(\d+)\s*\*\s*x/g, "$1x") // 4*x -> 4x
|
|
.replace(/x\s*\*\s*(\d+)/g, "$1x") // x*4 -> 4x
|
|
.replace(/\b1x\b/g, "x") // 1x -> x
|
|
.replace(/(\d+)\s*\*\s*\(/g, "$1(") // 4*( -> 4(
|
|
.replace(/\)\s*\*\s*\(/g, ")(") // )*( -> )(
|
|
.replace(/x\s*\*\s*\(/g, "x(") // x*( -> x(
|
|
|
|
// FRACTIONS (order matters!)
|
|
.replace(/\(([^()]+)\)\s*\/\s*\(([^()]+)\)/g, "\\frac{$1}{$2}")
|
|
.replace(/\(([^()]+)\)\s*\/\s*([a-zA-Z0-9]+)/g, "\\frac{$1}{$2}")
|
|
.replace(/([a-zA-Z0-9]+)\s*\/\s*\(([^()]+)\)/g, "\\frac{$1}{$2}")
|
|
.replace(/([a-zA-Z0-9]+)\s*\/\s*([a-zA-Z0-9]+)/g, "\\frac{$1}{$2}");
|
|
} |