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

USER TASK SPECIFICATION:

Create an interactive HTML5 **“One Thousand Buckets of Water – Oral Interactive Activity”** based on the story 《一千桶水》, where students discuss key scenes, express opinions about characters’ actions, and justify their views using language scaffolds, with optional two-player (partner) mode.

TARGET AUDIENCE:
- Upper Primary Chinese Language (P4–P6) – oral interaction / picture discussion

INTERACTIVE REQUIREMENTS:
- A **storyboard** of 4 main scenes presented as clickable **scene cards**, each with:
  - An emoji-style **scene image** (e.g., 🐋, 🪣, 👥, 🌊).
  - A short **scene title** (e.g., "Whale discovered", "Rescue begins", "Villagers help", "Successful rescue").
  - A brief **scene description** in English or Chinese.
- A **discussion panel** including:
  - A dynamic **question prompt** area showing the current discussion question for the selected scene.
  - A **language scaffold** section with buttons that insert starter phrases.
  - A **response area** where scaffolded responses build up as editable text blocks.
  - Control buttons: **Clear** and **Share your views**.
- A **partner mode** (two-player checkbox) that changes labels/text to reflect two-person discussion.
- A **timer** and **progress indicator** at the bottom:
  - Timer with display (e.g., 15:00) and Start/Pause/Restart button.
  - Horizontal progress bar and text indicating activity progress.
- A **center tooltip/help overlay** explaining the activity goals and how to use language scaffolds.
- Self-contained HTML, CSS, and JavaScript (no external frameworks).
- **Responsive layout**: adapts height for different viewport sizes and iframe embedding (e.g., 90vh or fixed ~450px height).

SPECIFIC REQUIREMENTS:

Scenes & questions
- Represent at least these 4 scenes:
  1. **Whale discovered** – 阿东 and younger brother discover a stranded whale.
  2. **Rescue begins** – They start splashing water using buckets; 阿东 says they need "one thousand buckets".
  3. **Villagers help** – Villagers join in with buckets, clothes, and a water pump.
  4. **Successful rescue** – Tide comes in and the whale returns to the sea, spraying water as if saying thanks.
- Each scene has:
  - `title` (e.g., "发现鲸鱼", "开始救援", "村民帮忙", "成功救援").
  - `question` – a Chinese discussion question encouraging opinion and reasoning, such as:
    - Scene 1: "阿东和弟弟发现搁浅的鲸鱼时，他们的反应如何？你觉得他们这样做对吗？为什么？".
    - Scene 2: "阿东说需要一千桶水来救鲸鱼，你觉得这个想法怎么样？如果是你，你会怎么做？".
    - Scene 3: "村民们看到后也来帮忙，你觉得他们的行为如何？这说明了什么？".
    - Scene 4: "最后鲸鱼得救了，它向大家道谢。你从这个故事中学到了什么？".
  - `details` – a short story excerpt to support understanding.
- Clicking a scene card:
  - Highlights it as active.
  - Updates the **question prompt** area with that scene’s question.
  - Updates activity progress.
  - On small screens, optionally shows a detail overlay with scene question & details.

Language scaffolds
- Provide a set of **scaffold buttons** (Chinese phrases) like:
  - "我觉得他这样做…" – to express judgement.
  - "你说得有道理。可是…" – to provide counter-argument.
  - "如果是我，我会…" – to suggest alternative.
  - "这个主意不错" – to show agreement.
- Clicking a scaffold button:
  - Appends a new **response item** into the response display area, with:
    - The scaffold in bold.
    - An editable `contenteditable` span after it for the student to add details.
  - Removes any placeholder message in the response area if present.
  - Gives a brief animation/visual feedback on the clicked button.

Response area & controls
- **Response area**:
  - Initially shows a placeholder (e.g., “选择语言支架开始表达想法 / Choose a language scaffold to begin expressing your thoughts.”).
  - Each scaffold click adds one response block; students can type to elaborate.
- **Clear** button:
  - Clears all responses, restores the placeholder, and resets internal response tracking.
- **Share your views** button:
  - If no responses exist, show a notification such as “请先添加一些想法再分享！”
  - If there are responses, combine scaffold + typed text from each block and show a confirmation/feedback notification (e.g., how many viewpoints shared, and if in partner mode, note waiting for partner feedback).

Partner (two-player) mode
- Checkbox **Two-player mode**:
  - When enabled, change discussion header (e.g., from "讨论区域" to "双人讨论区域").
  - Notification invites students to discuss with a partner.
  - Sharing feedback may mention partner (e.g., “等待同伴反馈…”).

Timer & progress
- Timer configuration:
  - Default 15:00.
  - **Start timing** button toggles to Pause/Resume/Restart depending on state.
  - Timer counts down every second.
  - When time reaches 0: show message like “活动时间结束！请进行总结分享。” and stop automatically.
- Timer display styling:
  - Normal colour for > 5 minutes.
  - Orange for last 5 minutes.
  - Red for last minute.
- Progress bar:
  - Width proportional to a combination of:
    - Scenes interacted with.
    - Number of scaffolds/responses used.
  - Progress text updates (e.g., “活动进度 60%”; turns to “活动完成” with green colour at 100%).

Tooltips & help overlay
- **Header tooltip**:
  - Small icon at top that, when clicked (especially on mobile), opens a **center tooltip overlay**.
- Center tooltip overlay:
  - Shows lesson objective and instructions in Chinese, including:
    - Learning goal (oral discussion, expressing opinions with reasons).
    - Steps: click scenes, use scaffolds, enable partner mode, follow 15–20 min timing.
    - Short guide on how to use each scaffold.
  - Dismissable with a close button or by clicking outside the content.
- Scene details overlay (optional for mobile):
  - When a scene card is clicked on small screens, show an overlay with scene title, question, and details to support oral discussion.

Notifications
- Implement a **non-blocking toast notification** system for:
  - Sharing responses.
  - Switching to partner mode.
  - Timer finishing.
- Notifications appear at top-right, slide in, and auto-dismiss after ~3 seconds.

Responsive behaviour
- On window resize:
  - Adjust main container height (90vh vs a fixed height like 450px) depending on viewport size.
  - Ensure layout remains readable on tablets/phones.

LEARNING OUTCOMES:
- Students should be able to:
  - Express opinions about characters’ actions in the story 《一千桶水》.
  - Support their opinions with reasons and story evidence.
  - Respond to a partner’s view using appropriate discourse markers (agree/disagree, propose alternatives).
- The interactive should scaffold Chinese oral interaction and picture discussion in a structured but flexible way.

INTERACTION FEATURES TO INCLUDE:
- Clickable story scenes with context-rich prompts.
- Scaffolded response building with editable text.
- Optional partner mode for two-student use.
- Timer and progress bar to structure activity time and pace.
- Clear visual feedback and notifications for key actions.

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