Edit game instructons

app/games/directional-processing/interface.html

@@ -10,7 +10,7 @@ <h3>How to Play</h3>
     </p>
     <ol>
       <li>Watch the pattern carefully — it will only appear for a short time.</li>
-      <li>After a brief mask, use the on-screen buttons or arrow keys to respond.</li>
+      <li>After it stops, use the on-screen buttons or arrow keys to indicate which direction it moved.</li>
       <li>Get 3 correct in a row to advance to a harder level.</li>
       <li>Get 3 wrong in a row to drop back 2 levels.</li>
     </ol>
@@ -35,14 +35,8 @@ <h3>How to Play</h3>
 
     <div class="dp-stage" id="dp-stage">
       <!-- The Gabor patch is drawn here; mask is applied by filling with gray. -->
-      <canvas
-        id="dp-canvas"
-        class="dp-canvas"
-        width="400"
-        height="400"
-        aria-label="Directional motion stimulus"
-        role="img"
-      ></canvas>
+      <canvas id="dp-canvas" class="dp-canvas" width="400" height="400" aria-label="Directional motion stimulus"
+        role="img"></canvas>
     </div>
 
     <!-- Direction response buttons: always visible; buttons are disabled
@@ -53,16 +47,15 @@ <h3>How to Play</h3>
         Which direction did the pattern move?
       </p>
       <div class="dp-direction-pad" role="group" aria-labelledby="dp-response-prompt">
-        <button id="dp-btn-up" type="button" class="dp-dir-btn dp-dir-btn--up"
-          aria-label="Up">&#8679; Up</button>
+        <button id="dp-btn-up" type="button" class="dp-dir-btn dp-dir-btn--up" aria-label="Up">&#8679; Up</button>
         <div class="dp-direction-pad__row">
-          <button id="dp-btn-left" type="button" class="dp-dir-btn dp-dir-btn--left"
-            aria-label="Left">&#8678; Left</button>
-          <button id="dp-btn-right" type="button" class="dp-dir-btn dp-dir-btn--right"
-            aria-label="Right">Right &#8680;</button>
+          <button id="dp-btn-left" type="button" class="dp-dir-btn dp-dir-btn--left" aria-label="Left">&#8678;
+            Left</button>
+          <button id="dp-btn-right" type="button" class="dp-dir-btn dp-dir-btn--right" aria-label="Right">Right
+            &#8680;</button>
         </div>
-        <button id="dp-btn-down" type="button" class="dp-dir-btn dp-dir-btn--down"
-          aria-label="Down">&#8681; Down</button>
+        <button id="dp-btn-down" type="button" class="dp-dir-btn dp-dir-btn--down" aria-label="Down">&#8681;
+          Down</button>
       </div>
     </div>
 
@@ -76,7 +69,7 @@ <h4 id="dp-trend-title">Speed Trend (ms)</h4>
         aria-label="Display time trend over recent trials">
         <polyline id="dp-trend-line" fill="none" stroke="currentColor" stroke-width="2" points=""></polyline>
       </svg>
-      <p id="dp-trend-empty" class="game-trend__empty">Complete a trial to populate chart.</p>
+      <p id="dp-trend-empty" class="game-trend__empty">Chart will appear after the first round.</p>
       <p class="game-trend__meta">
         Latest: <strong id="dp-trend-latest">--</strong> ms
       </p>

app/games/fast-piggie/interface.html

@@ -5,13 +5,17 @@ <h2 id="fp-title">Fast Piggie</h2>
   <!-- Instructions panel: shown before the game starts -->
   <div id="fp-instructions" class="fp-instructions game-welcome">
     <h3>How to Play</h3>
-    <p>A spinning wheel of guinea pigs will flash on screen briefly. One of them looks a little different — spot the odd
-      one out before they disappear!</p>
+    <p>A set of guinea pigs spread around a circle will flash on screen briefly. Only one will look like the image
+      below. Select that guinea
+      pig in each round.</p>
+    <img src="games/fast-piggie/images/thumbnail.png" alt="The orange guinea pig is the target."
+      class="fp-instructions__image" loading="lazy" decoding="async">
     <ul>
-      <li>Watch the wheel carefully when it appears.</li>
-      <li>After the piggies vanish, click or tap the wedge where the different one was hiding.</li>
-      <li>Use arrow keys to navigate wedges and press <kbd>Enter</kbd> or <kbd>Space</kbd> to confirm.</li>
-      <li>Rounds get harder (more wedges, less time) as your score grows!</li>
+      <li>Watch the game play area carefully when it appears.</li>
+      <li>After the piggies vanish, click the wedge where the orange one was hiding.</li>
+      <li>Keyboard users can use arrow keys to navigate wedges and press <kbd>Enter</kbd> or <kbd>Space</kbd> to
+        confirm.</li>
+      <li>Rounds get harder (more piggies and less time) as you progress.</li>
     </ul>
     <button id="fp-start-btn" class="game-btn game-btn--primary">
       Start Game

app/games/fast-piggie/style.css

@@ -23,6 +23,14 @@
   margin: 0;
 }
 
+/* Instructions image */
+.fp-instructions__image {
+  display: block;
+  margin: 0 auto 1rem;
+  max-width: 100%;
+  max-height: 100px;
+}
+
 /* Stats bar */
 .fp-stats {
   display: flex;

app/games/field-of-view/interface.html

@@ -8,10 +8,10 @@ <h3>How to Play</h3>
       After a brief flash, the field image masks the board.
     </p>
     <ol>
-      <li>Memorize which kitten appeared in the center.</li>
-      <li>Memorize where the toy appeared in the periphery (outer edge).</li>
-      <li>After the field mask, select the kitten and click the toy location.</li>
-      <li>The game adapts your display time with a 1-up / 2-down staircase.</li>
+      <li>Track which kitten appeared in the center.</li>
+      <li>Note where the toy appeared in the outer edge.</li>
+      <li>When the field mask appears, select the kitten and click the toy location from the controls on the left.</li>
+      <li>As the game progresses the display time will drop, and the size of the grid will increase.</li>
     </ol>
     <button id="fov-start-btn" type="button" class="game-btn game-btn--primary">
       Start Game
@@ -36,21 +36,18 @@ <h4 id="fov-kitten-question">Which Kitten Appeared</h4>
         <div class="fov-response__center" role="group" aria-label="Center kitten response">
           <button id="fov-center-primary" type="button" class="fov-choice-btn" aria-pressed="false"
             aria-label="Primary kitten appeared">
-            <img src="games/field-of-view/images/primaryKitten.png" alt="Primary kitten option" loading="lazy" decoding="async">
+            <img src="games/field-of-view/images/primaryKitten.png" alt="Primary kitten option" loading="lazy"
+              decoding="async">
           </button>
           <button id="fov-center-secondary" type="button" class="fov-choice-btn" aria-pressed="false"
             aria-label="Secondary kitten appeared">
-            <img src="games/field-of-view/images/secondaryKitten.png" alt="Secondary kitten option" loading="lazy" decoding="async">
+            <img src="games/field-of-view/images/secondaryKitten.png" alt="Secondary kitten option" loading="lazy"
+              decoding="async">
           </button>
         </div>
         <h4 class="fov-location-header">Which Square Was the Toy In</h4>
-        <div
-          id="fov-location-selector"
-          class="fov-location-selector"
-          role="group"
-          aria-label="Toy location selector"
-          hidden
-        ></div>
+        <div id="fov-location-selector" class="fov-location-selector" role="group" aria-label="Toy location selector"
+          hidden></div>
       </div>
 
       <div class="fov-stage" id="fov-stage">

app/games/high-speed-memory/interface.html

@@ -10,24 +10,21 @@ <h2 id="hsm-title">High Speed Memory</h2>
     <h3>How to Play</h3>
     <p>
       A grid of cards will flash open briefly — remember where the
-      <strong>Primary</strong> image appears!
-      After they flip back, click all three cards that showed the Primary image.
+      greyhound image below appears!
+      After they flip back, click all three cards that showed the image.
     </p>
     <p class="hsm-instructions__primary-label">
-      <strong>Find this card — it appears three times each round:</strong>
+      <strong>Find this greyhound — it appears three times each round (and he likes the attention):</strong>
     </p>
-    <img
-      src="games/high-speed-memory/images/Primary.jpg"
-      alt="The Primary card you need to find"
-      class="hsm-instructions__primary-img"
-    >
+    <img src="games/high-speed-memory/images/Primary.jpg" alt="The Primary card you need to find"
+      class="hsm-instructions__primary-img">
     <ul>
       <li>Watch closely while the cards are revealed.</li>
-      <li>After they flip face-down, click the three cards that showed the Primary image.</li>
-      <li>A wrong guess restarts the round after a brief delay — no partial credit.</li>
-      <li>Find all three to complete a round — complete <strong>3 rounds in a row</strong>
-        to advance to the next level with a larger grid and shorter reveal time!</li>
-      <li>Use <kbd>Tab</kbd> to move between cards and <kbd>Enter</kbd> or <kbd>Space</kbd>
+      <li>After they flip face-down, click the three cards that showed the image above.</li>
+      <li>A wrong guess ends the round — there is no partial credit.</li>
+      <li>Find all three to complete a round successfully — successfully complete <strong>3 rounds in a row</strong>
+        to advance to the next level with a larger grid and shorter reveal time.</li>
+      <li>Keyboard users can use <kbd>Tab</kbd> to move between cards and <kbd>Enter</kbd> or <kbd>Space</kbd>
         to select.</li>
     </ul>
     <button id="hsm-start-btn" type="button" class="game-btn game-btn--primary">
@@ -49,21 +46,10 @@ <h3>How to Play</h3>
     </div>
 
     <!-- Card grid: populated dynamically by index.js -->
-    <div
-      id="hsm-grid"
-      class="hsm-grid"
-      role="group"
-      aria-label="Memory card grid"
-    ></div>
+    <div id="hsm-grid" class="hsm-grid" role="group" aria-label="Memory card grid"></div>
 
     <!-- Screen-reader feedback region -->
-    <div
-      id="hsm-feedback"
-      class="sr-only"
-      role="status"
-      aria-live="polite"
-      aria-atomic="true"
-    ></div>
+    <div id="hsm-feedback" class="sr-only" role="status" aria-live="polite" aria-atomic="true"></div>
 
     <!-- Speed trend chart -->
     <section class="game-trend" aria-labelledby="hsm-trend-title">

app/games/object-track/interface.html

@@ -7,12 +7,14 @@ <h2 id="mot-heading" class="mot-game__title">Object Track</h2>
   <!-- Instructions panel -->
   <div id="mot-instructions" class="mot-game__instructions game-welcome">
     <h3>How to Play</h3>
-    <p>Watch which circles briefly highlight — those are your targets.</p>
+    <p>Your goal is to track the selected balls as they move around the arena. Once they start to move all the balls are
+      the same so watch which circles briefly highlight — those are your targets.</p>
     <ol>
-      <li>Observe the highlighted circles during the marking phase.</li>
-      <li>Keep tracking the same circles as all move around the arena.</li>
-      <li>When movement stops, click each circle you believe was a target.</li>
-      <li>After selecting all targets the round is scored automatically.</li>
+      <li>Observe the highlighted balls at the beginning of each round.</li>
+      <li>Keep tracking the same ball as all move around the arena.</li>
+      <li>When movement stops, click each ball you believe was a target.</li>
+      <li>After selecting three targets the round is scored automatically.</li>
+      <li>As the game progresses, the number of balls and their speed will increase.</li>
     </ol>
     <button type="button" id="mot-start" class="game-btn game-btn--primary">
       Start Game

app/games/orbit-sprite-memory/interface.html

@@ -4,16 +4,15 @@ <h2 id="osm-title">Orbit Sprite Memory</h2>
   <div id="osm-instructions" class="osm-panel game-welcome">
     <h3>How to Play</h3>
     <p>
-      Watch the images around the circle. One image is the <strong>target</strong> for this round,
-      and it appears exactly three times.
+      A series of rabbit images will appear around the circular game play area. One image is the <strong>target</strong>
+      for this round; it appears exactly three times.
     </p>
     <ul>
-      <li>The target image is shown before each round starts.</li>
-      <li>Distractor images appear no more than two times each.</li>
-      <li>After playback, select the three circles where the target appeared.</li>
-      <li>The number of circles to choose from grows as the level increases.</li>
+      <li>Note the target image shown before each round starts in the top left corner.</li>
+      <li>Watch as a series of images appear around the circle. Remember which three are the round's target image.</li>
+      <li>After they have all appeared, select the three circles where the target appeared.</li>
+      <li>The number of locations to choose from grows as the level increases, as does the speed of their display.</li>
       <li>Get three correct rounds in a row to level up.</li>
-      <li>Higher levels show more distractors and reduce display time.</li>
     </ul>
     <button id="osm-start-btn" type="button" class="game-btn game-btn--primary">Start Game</button>
   </div>

app/games/otter-stop/index.js

@@ -187,7 +187,7 @@ export function showImage(imageKey) {
   _stimulusImg.src = isNoGo
     ? `${IMAGE_BASE}no-go.png`
     : `${IMAGE_BASE_GO}${imageKey}`;
-  _stimulusImg.alt = isNoGo ? 'No-go otter' : 'Go otter';
+  _stimulusImg.alt = isNoGo ? 'No-go fish' : 'Go otter';
   _stimulusImg.classList.remove('os-hidden');
 }
 

app/games/otter-stop/interface.html

@@ -9,7 +9,7 @@ <h2 id="os-title">Otter Stop!</h2>
   <div id="os-instructions" class="os-instructions game-welcome">
     <h3 class="os-instructions__subheading">How to Play</h3>
     <p class="os-instructions__intro">
-      A stream of otters needs your help — but one sneaky otter means
+      A stream of otters needs your help — but one sneaky fish means
       <strong>STOP!</strong>
     </p>
     <ul class="os-instructions__list">
@@ -19,8 +19,20 @@ <h3 class="os-instructions__subheading">How to Play</h3>
         <strong>must</strong> respond or it counts as a miss!
       </li>
       <li>When the sneaky <strong>fish</strong> appears, do <strong>nothing</strong> — freeze!</li>
+      <li>The round ends when you see the success or failure images and hear the corresponding sound.</li>
       <li>The game speeds up as your accuracy improves. Good luck!</li>
     </ul>
+    <p>You can ignore these images during gameplay — they are just for feedback.</p>
+    <div class="os-instructions__row">
+      <div class="os-instructions__column">
+        <img class="os-instructions__img" src="games/otter-stop/images/success.png"
+          alt="The success image with a green otter icon." />
+      </div>
+      <div class="os-instructions__column">
+        <img class="os-instructions__img" src="games/otter-stop/images/failure.png"
+          alt="The failure image with a red otter icon." />
+      </div>
+    </div>
     <button id="os-start-btn" type="button" class="game-btn game-btn--primary">
       Start Game
     </button>
@@ -57,7 +69,7 @@ <h3 class="os-instructions__subheading">How to Play</h3>
     <!-- Reminder -->
     <p class="os-reminder">
       Press <kbd>Space</kbd> or <strong>click the image</strong> for every otter —
-      <strong>except</strong> the no-go otter! Missing a go otter counts as wrong.
+      <strong>except</strong> the no-go fish! Missing a go otter counts as wrong.
     </p>
 
     <!-- Controls -->

app/games/otter-stop/manifest.json

@@ -1,7 +1,7 @@
 {
   "id": "otter-stop",
   "name": "Otter Stop",
-  "description": "React fast to each otter — but freeze when the no-go otter appears. Train your inhibitory control at ever-increasing speeds.",
+  "description": "React fast to each otter — but freeze when the no-go fish appears. Train your inhibitory control at ever-increasing speeds.",
   "version": "0.1.0",
   "entryPoint": "index.js",
   "thumbnail": "images/thumbnail.png",

app/games/otter-stop/style.css

@@ -28,6 +28,27 @@
   gap: 0.75rem;
 }
 
+.os-instructions__row {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.75rem;
+  align-items: flex-start;
+}
+
+.os-instructions__column {
+  flex: 1 1 220px;
+  max-width: 100%;
+  padding: 5px;
+  box-sizing: border-box;
+}
+
+.os-instructions__img {
+  display: block;
+  width: 100%;
+  max-width: 200px;
+  height: auto;
+}
+
 /* ── Stats bar ───────────────────────────────────────────────────────────── */
 
 .os-stats {
@@ -117,11 +138,13 @@
 }
 
 .os-feedback__text--correct {
-  color: #1a6f1a; /* WCAG AA on white: ≥ 4.5:1 */
+  color: #1a6f1a;
+  /* WCAG AA on white: ≥ 4.5:1 */
 }
 
 .os-feedback__text--wrong {
-  color: #9b1c1c; /* WCAG AA on white: ≥ 4.5:1 */
+  color: #9b1c1c;
+  /* WCAG AA on white: ≥ 4.5:1 */
 }
 
 /* ── Reminder text ───────────────────────────────────────────────────────── */

app/games/otter-stop/tests/index.test.js

@@ -372,12 +372,12 @@ describe('showImage()', () => {
     expect(img.src).not.toContain('go/no-go');
   });
 
-  it('sets alt text to "No-go otter" for the no-go image', () => {
+  it('sets alt text to "No-go fish" for the no-go image', () => {
     const container = buildContainer();
     plugin.init(container);
     showImage('no-go');
     const img = container.querySelector('#os-stimulus-img');
-    expect(img.alt).toBe('No-go otter');
+    expect(img.alt).toBe('No-go fish');
   });
 
   it('sets alt text to "Go otter" for a go image', () => {

app/games/sound-sweep/game.js

@@ -46,8 +46,9 @@ export const LEVELS = [
   { sweepDurationMs: 200, isiMs: 200 },
   { sweepDurationMs: 150, isiMs: 150 },
   { sweepDurationMs: 100, isiMs: 100 },
-  { sweepDurationMs:  80, isiMs:  80 },
-  { sweepDurationMs:  60, isiMs:  40 },
+  { sweepDurationMs: 80, isiMs: 80 },
+  { sweepDurationMs: 60, isiMs: 40 },
+  { sweepDurationMs: 40, isiMs: 20 },
 ];
 
 // ── Module-level state (reset by initGame) ────────────────────────────────────

app/games/sound-sweep/interface.html

@@ -12,10 +12,10 @@ <h3>How to Play</h3>
     <ol>
       <li>Listen carefully to both sweeps.</li>
       <li>Identify the sequence you heard: Up-Up, Up-Down, Down-Up,
-          or Down-Down.</li>
+        or Down-Down.</li>
       <li>Use the buttons or press keys <kbd>1</kbd>&ndash;<kbd>4</kbd>
-          to select your answer.</li>
-      <li>Get 3 correct in a row to advance to a harder (faster) level.</li>
+        to select your answer.</li>
+      <li>Get 3 correct in a row to advance to a harder level.</li>
       <li>Get 3 wrong in a row to drop back 2 levels.</li>
     </ol>
     <p>
@@ -48,7 +48,9 @@ <h3>How to Play</h3>
         aria-label="Replay sweeps"
         title="Replay the sweeps (does not affect scoring)"
         disabled
-      >&#128266; Replay</button>
+      >
+        &#128266; Replay
+      </button>
     </div>
 
     <!-- Response buttons: always visible; disabled during sweep playback. -->