Button to show solution

src/app.tsx

@@ -1,6 +1,8 @@
 import { useState } from 'preact/hooks'
 import './app.css'
-
+import { Solution } from './solution'
+import type { SolutionKey } from './solution'
+import type { JSX } from 'preact'
 
 export function App() {
   // choose number between 2 and max inclusive
@@ -14,6 +16,22 @@ export function App() {
     else return gcd(b, a % b)
   }
 
+  const getSolution = (a : number, b : number) : SolutionKey => {
+    var result : SolutionKey = [ ]
+    if (b > a) {
+      var t = b
+      b = a
+      a = t
+    }
+    while (b != 0) {
+      result.push([ a, Math.floor(a / b), b, a % b ])
+      var t = a % b
+      a = b
+      b = t
+    }
+    return result
+  }
+
   const doCheck = (e : Event) : void => {
     e.preventDefault()
     const rightAnswer = gcd(factors[0], factors[1])
@@ -32,13 +50,24 @@ export function App() {
     setFeedback(false)
     setCorrect(false)
     setFactors(chooseFactors())
+    setSolution(null)
     document.forms[0].reset()
   }
 
+  const doSolution = (e : Event) : void => {
+    e.preventDefault()
+    if (solution === null) {
+      setSolution(<Solution rows={getSolution(factors[0], factors[1])} />)
+    } else {
+      setSolution(null)
+    }
+  }
+
   const [factors, setFactors] = useState(chooseFactors())
 
   const [correct, setCorrect] = useState(false)
   const [feedback, setFeedback] = useState(false)
+  const [solution, setSolution] = useState<JSX.Element|null>(null)
 
   return (
       <div className="px-4 py-5 my-5 text-center">
@@ -54,10 +83,14 @@ export function App() {
           <div className="col-12">
             <button type="submit" onClick={correct ? doNext : doCheck} className="btn btn-primary">{correct ? "Next" : "Check"}</button>
           </div>
+          <div className="col-12">
+            <button type="submit" onClick={doSolution} className="btn btn-secondary">{solution !== null ? "Hide" : "Solve"}</button>
+          </div>
         </form>
         <div className={feedback ? "visible" : "invisible"}>
           <div className={correct ? "alert alert-success m-4" : "alert alert-danger m-4"}>{correct ? "Correct" : "Try again!"}</div>
         </div>
+        {solution !== null ? solution : <></>}
       </div>
   )
 }

src/solution.css

@@ -0,0 +1,6 @@
+.solution {
+    padding: 16px;
+    border-radius: 12px;
+    background: white;
+    color: black;
+}

src/solution.tsx

@@ -0,0 +1,29 @@
+import './solution.css'
+
+type SolutionRow = [Number, Number, Number, Number]
+export type SolutionKey = Array<SolutionRow>
+type SolutionParams = {
+  rows : SolutionKey
+}
+
+export function Solution({rows}:SolutionParams) {
+  const colors = [
+    "red",
+    "blue",
+    "green",
+    "brown",
+    "purple",
+    "orange"
+  ]
+  const displayRow = (row : SolutionRow, index : number) => {
+    let range : number[] = [0, 1, 2]
+    const styles = range.map((i)=>{return `padding:3px;color:white;background:${colors[(i+index)%colors.length]}`})
+    return <p>
+      <span style={styles[0]}>{row[0]}</span>&nbsp;&divide;&nbsp;<span style={styles[1]}>{row[2]}</span>&nbsp;=&nbsp;{row[1]}&nbsp;R&nbsp;<span style={styles[2]}>{row[3]}</span>
+    </p>
+  }
+
+  return <div className="solution text-center" data-bs-theme="light">
+    {rows.map(displayRow)}
+  </div>
+}