By Mohamad Azhar
Learning Objectives: Break time
Interactive Prompt: 
Create an HTML5 interactive called “Class Perk Scratch Card” for secondary students. The experience shows a single large, cartoony scratch card that hides a perk result. When the student drags the cursor or finger, a realistic scratch animation reveals the layer below.

Requirements:

Visuals: bright, playful, cartoon look. Rounded card, glossy coating effect, sparkles. Big “Scratch me!” headline. A mischievous mascot in the corner.


Scratch interaction: works with mouse and touch. Use canvas with a foreground coating and an eraser brush that follows the pointer. Brush size 30 to 40 px. Smooth strokes, no lag. Add a light scratch sound on drag and a subtle particle fleck trail.


Reveal logic: the result is chosen only on first drag start. Weighted randomness: 10 percent Chocolate Bar, 30 percent Sweet, 60 percent Lose. Ensure correct probabilities across many plays.


Win feedback: if Chocolate or Sweet, show a burst confetti animation, a short success sound, and a large card flip that reveals the prize art and text. If Lose, show a comic “Better luck next time” with a tiny sad trombone sound and a gentle shake.


UI: Start button to show a fresh coated card. Reset button that fully re-covers the card and clears state. A timer displays how long the student spent scratching. A results panel logs the last 5 outcomes with time stamps. Sound toggle.


Fair play: prevent peeking by blocking right-click context menu on canvas and disabling pointer events below the coating until 40 percent of the area is scratched. Show a progress ring at the corner that fills as area is cleared. Auto-reveal when 70 percent is cleared.


Accessibility: keyboard support that simulates scratching with arrow keys and space to “rub.” Provide ARIA labels, focus order, and a high-contrast mode toggle.


Performance: target 60 fps on mid-range devices. Debounce pointer events and batch canvas updates. Test on desktop and mobile.


Export: one self-contained HTML file with embedded CSS and JS. No external libraries.


Deliverables:
• Working HTML5 interactive
• Clear code comments for the scratch mask, area-cleared calculation, and weighted RNG
• How-to section at the top explaining where to change probabilities and prize text