Added timer

www/scripts/problem.js

@@ -1,13 +1,26 @@
-
+// Copyright John Salguero All rights Reserved
 function showProblem() {
   const problemEl = document.getElementById("problem");
-  const stepsEl = document.getElementById("equation");
+  const mainEl = document.getElementById("equation-main");
+  const nextEl = document.getElementById("equation-next");
+  const expEl = document.getElementById("explanation");
 
   const formatted = formatMath(problemData.problem);
-  problemEl.innerHTML = `\\(${formatted}\\)`;
-  stepsEl.innerHTML = "";
 
-  MathJax.typesetPromise();
+  // Set the top problem (static)
+  problemEl.innerHTML = `\\(${formatted}\\)`;
+
+  // Initialize the main equation (this is what evolves)
+  mainEl.innerHTML = `\\(${formatted}\\)`;
+
+  // Clear animation layer + explanation
+  nextEl.innerHTML = "";
+  nextEl.style.opacity = 0;
+
+  expEl.innerHTML = "";
+  expEl.style.opacity = 0;
+
+  MathJax.typesetPromise([problemEl, mainEl]);
 }
 
 function showStep() {
@@ -16,33 +29,47 @@ function showStep() {
     return;
   }
 
-  const eqEl = document.getElementById("equation");
+  const mainEl = document.getElementById("equation-main");
+  const nextEl = document.getElementById("equation-next");
   const expEl = document.getElementById("explanation");
 
   const step = problemData.steps[stepIndex];
 
+  // 1. Show explanation
   expEl.innerHTML = step.step;
+  expEl.style.opacity = 1;
 
-  // STEP 1: fade out
-  eqEl.classList.remove("fade-in");
-  eqEl.classList.add("fade-out");
+  // 2. Prepare next equation
+  nextEl.innerHTML = `\\(${formatMath(step.after)}\\)`;
+  nextEl.classList.remove("fade-in", "move-up");
+  nextEl.style.opacity = 0;
+
+  MathJax.typesetPromise([nextEl]);
 
   setTimeout(() => {
-    // STEP 2: update content
-    eqEl.innerHTML = `\\(${formatMath(step.after)}\\)`;
-    MathJax.typesetPromise();
+    // 3. Fade in next equation (below)
+    nextEl.style.opacity = 1;
+    nextEl.classList.add("move-up");
 
-    // STEP 3: force reflow (CRUCIAL)
-    void eqEl.offsetWidth;
+    // 4. Fade out old + explanation
+    mainEl.classList.add("fade-out");
+    expEl.style.opacity = 0;
 
-    // STEP 4: fade back in
-    eqEl.classList.remove("fade-out");
-    eqEl.classList.add("fade-in");
+    setTimeout(() => {
+      // 5. Promote next → main
+      mainEl.innerHTML = nextEl.innerHTML;
+      MathJax.typesetPromise([mainEl]);
 
-    stepIndex++;
+      // reset styles
+      mainEl.classList.remove("fade-out");
+      nextEl.style.opacity = 0;
 
-    setTimeout(showStep, 2000);
-  }, 500);
+      stepIndex++;
+
+      setTimeout(showStep, 1500);
+    }, 500);
+
+  }, 1000); // time to read explanation
 }
   
 function startSteps() {
@@ -50,46 +77,6 @@ function startSteps() {
   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