RGB order matters

A repeated wrong swatch should not consume the same attempt twice. This color guessing game JavaScript example compares ordered RGB triples and stable option IDs, so browser style serialization and repeated clicks cannot change the rule.

Match the target RGB (64, 128, 192) against four fixed options, with room for three distinct wrong choices. C2 then C2 again leaves two wrong choices remaining. C3 leaves one, and C1 wins without another penalty. Numeric Practice exposes candidate values as a separate comparison mode; changing modes starts a fresh round.

RGB order matters
RGB order matters
Open the full example ↗

Give the target and options stable records

The target is RGB (64, 128, 192). Compare the three ordered integer components, not the visual similarity of screenshots or a CSS background string.

ID RGB tuple Key
C1 (64, 128, 192) Exact target
C2 (192, 128, 64) Red and blue exchanged
C3 (64, 192, 128) Green and blue exchanged
C4 (128, 64, 192) Red and green exchanged

Exactly one option matches all components. C2 has the same three numbers as the target, but the order is different. A tuple is not an unordered bag of channel values.

The author's RGB guessing project describes a target, clickable candidates and wrong-choice penalties. This original example instead fixes four options, retains explicit rejected IDs and keeps a terminal result visible. Reset starts another round with the same four options.

Separate visual practice from numeric practice

Visual mode shows the target tuple and four swatches labeled Option 1 through Option 4; candidate tuples are not revealed until resolution. Numeric Practice additionally exposes each candidate's R/G/B values so the task can be completed through nonvisual component comparison.

These are different teaching modes. A numeric answer is not evidence of visual matching ability, and a visual mismatch is not a diagnosis or display-calibration result. The exercise makes no color-perception, accessibility-certification or screen-accuracy claim.

Choose Visual practice or Numeric Practice before comparing the options. Switching modes starts a fresh round and clears the previous guesses. Resolving a round reveals every tuple with its channel-order explanation.

Keep a rejected ID from charging twice

Start Playing with three remaining wrong choices and an empty rejected set. A correct choice immediately enters Won without subtracting an attempt. A new wrong ID enters the rejected set and reduces the remaining count by one. A previously rejected ID has no further effect.

Activation Result Remaining wrong choices
C2 Wrong; C2 unavailable 2
C2 again Already rejected; unchanged 2
C3 Wrong; C3 unavailable 1
C1 Correct; Won 1

In an independent branch, C2, C3 and C4 produce three distinct wrong choices, remaining 0 and Lost. No input after Lost can turn that result into Won. Check correctness before applying a wrong-choice penalty; do not subtract from the budget merely because a button was activated.

The history records each new wrong choice and the winning choice. A repeated rejected option produces a message without adding a second guess, so you can compare the history with the remaining count.

Read the result and start another round

The four options keep their positions and labels, making it easy to connect a choice with its history entry. After Won or Lost, the game reveals every candidate tuple and its channel-order explanation. Compare the red and blue values in C2 with the target to see why the same three numbers can still form a different color.

Reset keeps the selected mode and restores the original options, three remaining wrong choices, and an empty history. Use Numeric Practice when the lesson concerns channel order. A tuple match describes the stored values; it does not establish how accurately a particular screen reproduces them.

Copy a prompt for this example

Create one self-contained HTML RGB guessing game with embedded CSS and JavaScript. Use a prominent target tuple, four labeled swatch buttons, a remaining-choice count, guess history, and a result panel. Keep labels outside the swatches so they remain readable.

The target is RGB (64, 128, 192). C1 is (64, 128, 192), C2 is (192, 128, 64), C3 is (64, 192, 128), and C4 is (128, 64, 192). Compare the ordered numeric components directly.

Start in Visual mode with three remaining distinct wrong choices. Hide candidate tuples while the round is active. A new wrong option reduces the count by one and enters a rejected set. Repeating that option must leave the count and confirmed history unchanged. C1 wins immediately without a wrong-choice penalty. Three distinct wrong options produce Lost. Ignore guesses after either terminal result.

Provide Numeric Practice, which shows candidate channel values during play. Changing modes starts a fresh round. Reset starts a fresh round while keeping the selected mode.

After Won or Lost, reveal every tuple and explain the swapped channels. C2 swaps red and blue, C3 swaps green and blue, and C4 swaps red and green. Preserve option positions and labels after rejection.

Support the sequence C2, C2, C3, C1: the remaining count becomes 2, 2, 1, then Won with 1 remaining. Keep the layout responsive. Return only the complete HTML file.

For a tuple-comparison demonstration, NOS can display this prepared HTML game. Compare C2’s exchanged channels in Numeric Practice, then select C2 twice and check why only the first selection reduces the remaining count.

Keep reading