Regex lesson 3: start with g off + guided discoverability (flag pulse + hint highlights) #90

Closed
opened 2026-05-09 14:01:30 +00:00 by spikerj · 1 comment
Owner

Problem

Regex lesson 3 tells the learner: “The pattern is just the; flip on g in the flags bar.” In the current UI, g is already enabled in the flags bar, so there is nothing actionable for this step—pass criteria may already be satisfied without the user toggling anything.

Goals

  1. Initial state — For this lesson (lesson 3 / the “global g” lesson), start with the g flag OFF so enabling it is a required, clear action.

  2. Discoverability on “hit” hover — When the user mouses over the hit (the eval / match outcome area—whatever surface currently surfaces the instruction block that mentions g), animate the g character/button in the flags bar so it flashes and scales (CSS animation) and draws attention immediately.

  3. Hint 1 hover — When the user mouses over Hint 1, highlight both occurrences of the in the test/sample text (same visual treatment you’d use for match highlights—consistent with the rest of the regex lesson UI).

Acceptance criteria

  • Lesson 3 loads with g disabled by default.
  • Completing the lesson still requires setting the pattern to the and turning g on (tests / grader unchanged unless curriculum needs a one-line note in Mongo).
  • Hover on the designated “hit” region triggers a short, non-annoying pulse/scale on the g flag control (accessible: don’t rely on hover-only for the only path to success; this is guidance, not the sole affordance).
  • Hover on Hint 1 highlights both the substrings in the subject text.
  • No regression for other regex lessons’ default flags or hint behavior.

Implementation hints (non-binding)

  • Likely touch: @spikersoft/feature-dev-tools-reg-ex (reg-ex.component, lesson pane, flags bar).
  • Lesson identity may come from route / lesson number or Mongo LessonAttempt—scope the behavior to this lesson only if other lessons expect g on by default.

Labels

frontend · ux · regex · lesson-content (as applicable)

## Problem **Regex lesson 3** tells the learner: *“The pattern is just `the`; flip on **g** in the flags bar.”* In the current UI, **`g` is already enabled in the flags bar**, so there is **nothing actionable** for this step—pass criteria may already be satisfied without the user toggling anything. ## Goals 1. **Initial state** — For this lesson (lesson 3 / the “global `g`” lesson), **start with the `g` flag OFF** so enabling it is a required, clear action. 2. **Discoverability on “hit” hover** — When the user **mouses over the hit** (the eval / match outcome area—whatever surface currently surfaces the instruction block that mentions `g`), **animate the `g` character/button in the flags bar** so it **flashes and scales** (CSS animation) and draws attention immediately. 3. **Hint 1 hover** — When the user **mouses over Hint 1**, **highlight both occurrences of `the`** in the test/sample text (same visual treatment you’d use for match highlights—consistent with the rest of the regex lesson UI). ## Acceptance criteria - [ ] Lesson 3 loads with **`g` disabled** by default. - [ ] Completing the lesson still **requires** setting the pattern to `the` and **turning `g` on** (tests / grader unchanged unless curriculum needs a one-line note in Mongo). - [ ] Hover on the designated **“hit”** region triggers a **short, non-annoying** pulse/scale on the **`g` flag control** (accessible: don’t rely on hover-only for the only path to success; this is **guidance**, not the sole affordance). - [ ] Hover on **Hint 1** highlights **both `the`** substrings in the subject text. - [ ] No regression for other regex lessons’ default flags or hint behavior. ## Implementation hints (non-binding) - Likely touch: `@spikersoft/feature-dev-tools-reg-ex` (`reg-ex.component`, lesson pane, flags bar). - Lesson identity may come from **route / lesson number** or **Mongo `LessonAttempt`**—scope the behavior to **this lesson only** if other lessons expect `g` on by default. ## Labels `frontend` · `ux` · `regex` · `lesson-content` (as applicable)
Author
Owner

Superseded by #91 — broader systemic fix (every challenge lesson now starts with no flags pre-enabled, not just lesson 3) plus the structured-hint hover affordances (test-text flash on HighlightSpans, flag-bar pulse on HighlightFlags) and a full per-lesson audit of all 57 regex lessons across the 12 chapter files.

The acceptance criteria from this issue all land in #91:

  • Lesson 3 (and every challenge lesson) loads with g disabled by default.
  • Grader still requires the correct flags at submit (unchanged).
  • Hovering Hint 1 highlights both the substrings in the subject text.
  • The flag pulse fires on hint hover for any hint authored with HighlightFlags.

Closing as superseded.

Superseded by [#91](https://git.spikersoft.com/spikerj/spikersoft-issues/issues/91) — broader systemic fix (every challenge lesson now starts with no flags pre-enabled, not just lesson 3) plus the structured-hint hover affordances (test-text flash on `HighlightSpans`, flag-bar pulse on `HighlightFlags`) and a full per-lesson audit of all 57 regex lessons across the 12 chapter files. The acceptance criteria from this issue all land in #91: - Lesson 3 (and every challenge lesson) loads with `g` disabled by default. - Grader still requires the correct flags at submit (unchanged). - Hovering Hint 1 highlights both `the` substrings in the subject text. - The flag pulse fires on hint hover for any hint authored with `HighlightFlags`. Closing as superseded.
Sign in to join this conversation.