Note: this text prompt is re-made from the interactive, use as reference only.

USER TASK SPECIFICATION:

Create an interactive HTML5 **“Favorite Fruits Bar Chart”** where students explore a simple bar chart showing classmates’ favourite fruits and reveal the number of votes for each fruit by interacting with the bars.

TARGET AUDIENCE:
- Primary 3 Mathematics (Data handling / Picture & Bar Graphs)

INTERACTIVE REQUIREMENTS:
- Visual **bar chart** representing the number of votes for several fruits.
- Fruits (at least):
  - Apple
  - Banana
  - Orange
  - Grape
  - Strawberry
- Each fruit should be represented by:
  - An emoji/icon (e.g., 🍎, 🍌, 🍊, 🍇, 🍓)
  - A fruit label (name)
  - A coloured bar whose height reflects the number of votes.
- **Click/tap interaction**: clicking/tapping a bar reveals that fruit’s exact number of votes.
- Visual and audio **immediate feedback** on bar clicks (animations + soft click sound).
- A **“Most Popular Fruit”** highlight that appears after students have explored all bars.
- A short **instruction message** that updates as students interact (e.g., prompts them to click remaining bars).
- Tooltip explaining what the chart represents and how to interact.
- Self-contained front-end (HTML + CSS + JavaScript), no external libraries required.
- **MOBILE-RESPONSIVE & TOUCH-ENABLED**:
  - Layout adapts to smaller screens.
  - Bars respond to touch as well as mouse.
- **ACCESSIBLE**:
  - Bars are keyboard-focusable and activatable with Enter/Space.
  - ARIA labels describing the action (e.g., “Click to see votes for apple”).

SPECIFIC REQUIREMENTS:

Dataset and mapping
- Use a fixed example dataset for clarity (numbers can be adjusted but should distinguish the most popular fruit). For example:
  - Apple: 8 votes
  - Banana: 6 votes
  - Orange: 10 votes
  - Grape: 4 votes
  - Strawberry: 7 votes
- Encode the vote count for each fruit as a **data attribute** on the bar container (e.g., `data-fruit="apple"`, `data-votes="8"`).
- Set the bar height proportionally to the number of votes (e.g., as a percentage of the tallest bar). Example mapping:
  - 10 votes → 100% height
  - 8 votes → 80%
  - 7 votes → 70%
  - 6 votes → 60%
  - 4 votes → 40%

Bar structure and layout
- Main **chart container**:
  - Contains multiple `.fruit-bar` items laid out horizontally.
- Each `.fruit-bar` should include:
  - `.fruit-info` block with emoji and text label.
  - `.bar-container` with:
    - `.bar` (the coloured vertical bar matching the fruit).
    - `.vote-display` beneath or inside the bar area, initially showing `?`.
- Bars should be visually distinct (different colours for each fruit).

Interaction behaviour
- Clicking/tapping a fruit bar should:
  - Add a `clicked` style (e.g., slight border or background change) to show it’s been explored.
  - Update the corresponding `.vote-display` text from `?` to the full text, e.g. `8 votes`.
  - Play a short **click sound** using Web Audio API (with graceful fallback if unavailable).
  - Apply a brief **clickPulse** animation (scale up/down) for immediate feedback.
- Track which fruits have been clicked using an internal data structure (e.g., a Set of fruit IDs).
- Once **all bars have been clicked**:
  - After a short delay, reveal a **“Most Popular”** message area:
    - Text like: “👑 Orange is the most popular!” (using the fruit with the largest vote count).
    - A celebratory bounce or pulse animation on this message.
  - Highlight the most popular bar with a pulsing animation.

Instruction / progress feedback
- A small **instructions panel** below or beside the chart with a paragraph that changes based on progress:
  - Before any clicks: “👆 Click on any bar to see the number of votes!”
  - After some bars clicked but not all: e.g., “Great! Click X more bars to see all votes!”
  - After all bars clicked: “🎉 Excellent! You’ve explored all the data!”
- Progress calculation: `clickedBars.size / totalBars * 100` (used only for messaging, no need for a visual progress bar unless desired).

Tooltip / header info
- A tooltip element (e.g., at the top of the chart) containing:
  - Title: “Favorite Fruits of Students”
  - Brief description: “Click on the bars to see how many votes each fruit got!”
- Tooltip behaviour:
  - Appears when hovering over the main chart panel (desktop) after a short delay.
  - Hides when the pointer leaves the chart area.
  - On touch devices: show on touchstart for a couple of seconds, then fade out.

Animations and audio
- Define CSS keyframe animations for:
  - `clickPulse`: small scale up/down on click.
  - `bounce`: bounce effect for the “Most Popular” message.
  - `pulse`: gentle pulsing highlight on the winning bar.
- Implement a simple click sound via Web Audio API:
  - Create `AudioContext`, oscillator, and gain node.
  - Short blip that ramps down quickly.
  - Catch errors silently if audio is not available or blocked.

Accessibility and keyboard support
- Each `.fruit-bar`:
  - Should have `tabindex="0"` so it can be focused via keyboard.
  - `role="button"` and `aria-label` like “Click to see votes for apple”.
- Global `keydown` handler:
  - When Enter or Space is pressed and a `.fruit-bar` has focus, trigger the same behaviour as click (including vote reveal and animations).

LEARNING OUTCOMES:
- Students should be able to:
  - Read a simple bar chart and relate bar height to frequency (number of votes).
  - Identify which category (fruit) has the greatest number of votes.
  - Recognise that data can be represented visually and explored interactively.
- The interactive should encourage **exploratory data analysis** by clicking all bars and then noticing the most popular fruit.

INTERACTION FEATURES TO INCLUDE:
- Click/tap and keyboard interactions on bars.
- Animated feedback and simple audio cues for engagement.
- Dynamic instructions that respond to user progress.
- Automatic reveal of the most popular category once all data has been explored.
- Tooltip that contextualises the chart and guides interaction.

Create a complete, functional HTML5 interactive that meets all requirements above.