Before Big refactor

www/scripts/problem.js

@@ -11,14 +11,13 @@ function showProblem() {
   problemEl.innerHTML = `\\(${formatted}\\)`;
 
   // Initialize the main equation (this is what evolves)
-  mainEl.innerHTML = `\\(${formatted}\\)`;
+  mainEl.innerHTML = "";
 
   // Clear animation layer + explanation
   nextEl.innerHTML = "";
   nextEl.style.opacity = 0;
 
   expEl.innerHTML = "";
-  expEl.style.opacity = 0;
 
   MathJax.typesetPromise([problemEl, mainEl]);
 }
@@ -35,41 +34,49 @@ function showStep() {
 
   const step = problemData.steps[stepIndex];
 
-  // 1. Show explanation
-  expEl.innerHTML = step.step;
-  expEl.style.opacity = 1;
-
-  // 2. Prepare next equation
-  nextEl.innerHTML = `\\(${formatMath(step.after)}\\)`;
-  nextEl.classList.remove("fade-in", "move-up");
+  // 1. Start with the equation
+  mainEl.innerHTML = `\\(${formatMath(step.before)}\\)`;
+  MathJax.typesetPromise([mainEl]);
+  mainEl.style.opacity = 1;
   nextEl.style.opacity = 0;
 
-  MathJax.typesetPromise([nextEl]);
-
-  setTimeout(() => {
-    // 3. Fade in next equation (below)
-    nextEl.style.opacity = 1;
-    nextEl.classList.add("move-up");
-
-    // 4. Fade out old + explanation
-    mainEl.classList.add("fade-out");
-    expEl.style.opacity = 0;
-
+  setTimeout(() => {  
+    // 2. Show explanation
+    expEl.innerHTML = step.step;
+    expEl.style.opacity = 1;
+    
+    // 3. Prepare next equation
+    nextEl.innerHTML = `\\(${formatMath(step.after)}\\)`;
+    nextEl.classList.remove("move-up");
+    nextEl.style.opacity = 0;
+    
+    MathJax.typesetPromise([nextEl]);
+    
     setTimeout(() => {
-      // 5. Promote next → main
-      mainEl.innerHTML = nextEl.innerHTML;
-      MathJax.typesetPromise([mainEl]);
-
-      // reset styles
-      mainEl.classList.remove("fade-out");
-      nextEl.style.opacity = 0;
-
-      stepIndex++;
-
-      setTimeout(showStep, 1500);
-    }, 500);
-
-  }, 1000); // time to read explanation
+      // 3. Fade in next equation (below)
+      nextEl.style.opacity = 1;
+    
+      setTimeout(() => {
+        // 4. Fade out old and explanation
+	    mainEl.style.opacity = 0;
+	    expEl.style.opacity = 0;
+      
+        setTimeout(() => {
+		  
+		  // 5. Move up next equation
+		  nextEl.classList.add("move-up");
+		  
+          // 5. Promote next → main
+          mainEl.innerHTML = nextEl.innerHTML;
+          MathJax.typesetPromise([mainEl]);
+		  
+          stepIndex++;
+		  
+          setTimeout(showStep, 1500);
+        }, 1500); // Move up New Equation
+      }, 3000); // Fade Out Explanation and old
+	}, 1500); // Fade in Next Equation
+  }, 1500); // Show Explanation
 }
   
 function startSteps() {