Word Scramble Game JavaScript Code: Preserve Every Letter

A set of distinct letters drops BALLOON’s second L and second O. An anagram-only answer check can also accept PLATEN for PLANET even though it misses the supplied clue.

Preserve letter counts in the bank and the authored answer in the check.

The playable two-item game validates its configured scrambles, accepts a response or intentional Skip once per item, and records Correct, Incorrect or Skipped. Both items can finish with zero points; completion means recorded outcomes. Repeated Check cannot award the same item twice.

Word Scramble Game JavaScript Code: Preserve Every Letter
Word Scramble Game JavaScript Code: Preserve Every Letter
Open the full example ↗

Begin with two original authored entries

The reference game describes guessing, revealing, advancing and skipping. In this two-word version, resolve each card before Next becomes available. The same rule applies whether the answer was correct, incorrect or skipped.

Use this original bank:

ID Authored answer Supplied clue Fixed scramble
W1 BALLOON A party object filled with air LOBOLAN
W2 PLANET A world orbiting a star TENLAP

These are the selected answers for these cards, not a claim that a clue admits only one word in every context. Keep the clue and item ID visible; the checker compares the supplied authored answer.

The bank's answers are uppercase ASCII letters. Each ID is unique and every entry has a nonblank clue and scramble. Validate the complete bank before Start; a corrupt entry prevents beginning rather than silently reducing the game to one item.

Compare letter counts rather than distinct letters

W1 contains B once, A once, L twice, O twice and N once. LOBOLAN contains exactly those seven letters with those counts.

Letter BALLOON LOBOLAN
A 1 1
B 1 1
L 2 2
N 1 1
O 2 2

A distinct-letter set contains only A, B,L,N,O and loses the multiplicities. Validating with that set could miss the two required Ls and two Os.

W2's PLANET and TENLAP each contain P,L,A,N,E,T once. Preserve both length and per-letter counts. A configured scramble BALON is invalid for W1 before the game starts; its missing L and O cannot be repaired by the checker accepting a shorter response.

Count the two Ls and two Os in LOBOLAN before trying to solve W1. Each repeated letter must appear in the answer.

Validate response syntax before changing its case

For a response, trim surrounding whitespace, then require a nonempty string of ASCII letters A–Z or a–z. Only after that validation, convert ASCII lowercase to uppercase.

The response “ balloon ” becomes BALLOON and matches W1. Internal spaces remain invalid: BAL LOON does not become BALLOON by deleting the space.

Punctuation, digits and non-ASCII letters are invalid and do not resolve the item. Do not uppercase arbitrary Unicode first and accept a transformed result as if the original input were ASCII. A letter with a case mapping to multiple characters is outside this declared input policy.

Format-valid text is then compared with the exact authored answer. BALON uses valid letters but is wrong for BALLOON; it resolves W1 incorrectly with zero credit. It is not an invalid input merely because its letter count differs.

The bank-validation rule and response rule serve different purposes: a corrupt configured scramble blocks Start, while a valid-letter wrong guess ends that item.

Advance only after resolution and finish at two IDs

After the first card, Check and Skip become unavailable. Next opens W2 with an empty answer field and clears the old feedback and revealed answer.

Repeated Check or Skip on W1 adds no credit or record. Next before resolution changes nothing. After advancing, another Next is blocked because W2 is still unresolved.

Resolving W2 completes the game, whether the score is 0, 1 or 2. The final answer and both outcomes stay visible. Next cannot open a third card, and the completed cards cannot earn extra points.

The outcome history keeps the card ID, clue, scramble, normalized answer or explicit skip, result and point award. Editing the current input leaves earlier rows unchanged.

Play the two outcomes

Press Start and enter balloon with optional surrounding spaces. Check records W1 as correct and reveals BALLOON. Next opens W2; PLATEN is valid letter input but the wrong authored answer, so it records Incorrect and completes the game with one point. Empty input, punctuation or internal spaces leave a card unresolved.

Skip is an explicit alternative to guessing, not an interpretation of an empty answer. Keep the clue and item ID beside every outcome. Reset clears both outcomes, score, current input and revealed answer, returning to Ready. The two answers are fixed and can be inspected in the source, which makes it easy to study the checking function.

Copy this prompt

Create a complete two-card word scramble game in one HTML file. Put the clue and large scrambled letters above an answer input and Start, Check, Skip, Next and Reset buttons. Show score, resolved-card count, revealed answers and an outcome history.

Use W1 with answer BALLOON, clue "A party object filled with air" and scramble LOBOLAN. Use W2 with answer PLANET, clue "A world orbiting a star" and scramble TENLAP. Before Start, validate unique IDs, nonblank clues, uppercase ASCII answers and exact scramble letter counts. BALLOON requires two Ls and two Os, so BALON would be an invalid configured scramble.

Start opens W1. For a typed answer, trim outer whitespace and require nonempty ASCII letters before converting to uppercase. Blank input, punctuation or internal spaces leave the card unresolved. The response " balloon " matches W1. BALON is valid-letter input but incorrect for W1, so it resolves the card with zero points. PLATEN is incorrect for W2 even though it rearranges PLANET.

A correct answer earns one point. An incorrect valid answer or explicit Skip earns zero. Resolve each card once, reveal its answer and append its ID, clue, scramble, normalized response or skip, result and credit to the history. Disable Check and Skip after resolution. Next opens W2 only after W1 has resolved.

Resolving W2 completes the game at any score. Repeated actions cannot add another record or a third card. Fresh Enter in the answer field performs Check. Reset clears the session and returns to Ready. Use readable typography, spacious controls and a responsive layout.

Compare a wrong answer with invalid input

Start W1 and enter BAL LOON. The internal space leaves the card open. Then enter BALON: it uses valid letters but resolves the card incorrectly. NOS can render the HTML game for this validation comparison. Continue to W2 and finish the session to show why two resolved cards can still produce zero points.

Keep reading