From 8e041f32d72f77b42e8fc114dec105f62b338503 Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Tue, 21 Apr 2026 13:06:52 +0000
Subject: [PATCH] computing-pi: clickable avg toggle + second instruction line
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

T9: The center avg display is now a <button>. Clicking it toggles
between showing avg × 4 (with 'π ≈ 3.1416' reference) and showing
plain avg (with 'π/4 ≈ 0.7854'). Label flips accordingly. Subtle
background hover wash to hint at interactivity.

T10: Added a second instruction line below 'Click on any of the
completed runs to view the full sequence.' calling out the avg
toggle. Both lines sit in a shared centered text-muted-foreground
container with small vertical gap.
---
 src/components/interactives/ComputingPi.tsx | 25 ++++++++++++++-------
 src/data/admin-data.json                    |  2 ++
 2 files changed, 19 insertions(+), 8 deletions(-)

diff --git a/src/components/interactives/ComputingPi.tsx b/src/components/interactives/ComputingPi.tsx
index a415d52..f251d2d 100644
--- a/src/components/interactives/ComputingPi.tsx
+++ b/src/components/interactives/ComputingPi.tsx
@@ -76,6 +76,7 @@ const ComputingPi: React.FC = () => {
   const [runs, setRuns] = useState<Run[]>([]);
   const [running, setRunning] = useState(false);
   const [selectedIdx, setSelectedIdx] = useState<number | null>(null);
+  const [showTimes4, setShowTimes4] = useState(true);
 
   const started = runs.length > 0;
   const allStopped = started && runs.every((r) => r.stopped);
@@ -144,17 +145,24 @@ const ComputingPi: React.FC = () => {
               />
             </div>
 
-            <div className="flex flex-col items-center">
+            <button
+              type="button"
+              onClick={() => setShowTimes4((v) => !v)}
+              aria-label="Toggle between average and average × 4"
+              className="flex flex-col items-center rounded-lg px-3 py-1 -my-1 hover:bg-background/60 transition-colors cursor-pointer"
+            >
               <span className="text-xs uppercase tracking-wide text-muted-foreground">
-                Average × 4
+                {showTimes4 ? 'Average × 4' : 'Average'}
               </span>
               <span className="font-mono text-3xl tabular-nums">
-                {avgTimes4 !== null ? avgTimes4.toFixed(4) : '—'}
+                {avgTimes4 !== null
+                  ? (showTimes4 ? avgTimes4 : avgTimes4 / 4).toFixed(4)
+                  : '—'}
               </span>
               <span className="text-xs text-muted-foreground">
-                π ≈ 3.1416
+                {showTimes4 ? 'π ≈ 3.1416' : 'π/4 ≈ 0.7854'}
               </span>
-            </div>
+            </button>
 
             <div className="flex justify-center sm:justify-end">
               {!started ? (
@@ -179,9 +187,10 @@ const ComputingPi: React.FC = () => {
           {/* Instruction + grid of runs */}
           {started ? (
             <>
-              <p className="text-xs text-center text-muted-foreground">
-                Click on any of the completed runs to view the full sequence.
-              </p>
+              <div className="text-xs text-center text-muted-foreground space-y-0.5">
+                <p>Click on any of the completed runs to view the full sequence.</p>
+                <p>Click on the average shown above to toggle between seeing the average and the average multiplied by 4.</p>
+              </div>
               <div
                 className="grid gap-2"
                 style={{ gridTemplateColumns: 'repeat(auto-fill, minmax(110px, 1fr))' }}
diff --git a/src/data/admin-data.json b/src/data/admin-data.json
index b8871ad..d5fcb03 100644
--- a/src/data/admin-data.json
+++ b/src/data/admin-data.json
@@ -450,6 +450,7 @@
         "text": "Make it so that if the user clicks on the average shown, they can toggle between seeing the average and the average multiplied by 4. When showing average, show the value of pi/4 below (instead of pi).",
         "done": true,
         "refId": "T9",
+        "remark": "Wrapped the center avg display in a <button> with a subtle hover wash. Added showTimes4 state (default true). Label flips Average × 4 ↔ Average, the big number divides by 4 when showing plain avg, and the reference line flips between 'π ≈ 3.1416' and 'π/4 ≈ 0.7854'.",
         "doneDate": "2026-04-21"
       },
       {
@@ -457,6 +458,7 @@
         "text": "Just below \"Click on any of the completed runs to view the full sequence.\", add the line \"Click on the average shown above to toggle between seeing the average and the average multiplied by 4).\"",
         "done": true,
         "refId": "T10",
+        "remark": "Stacked a second <p> under the existing instruction in a space-y-0.5 div so both lines share the centered text-muted-foreground styling.",
         "doneDate": "2026-04-21"
       }
     ]