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

USER TASK SPECIFICATION:

Create an interactive HTML5 **“Angkor Quest – Exploring Ancient Civilisation”** experience where students explore multiple locations around the Angkor Wat complex, uncover discoveries via hotspots, and reflect on how Angkor’s legacies influence life in modern Southeast Asia (especially Singapore).

TARGET AUDIENCE:
- Upper Primary / Lower Secondary History / Social Studies (~11–14 years old)

INTERACTIVE REQUIREMENTS:
- A **scene-based exploration** UI:
  - Large **scene image** (SVG background) representing the current Angkor site (e.g., Angkor Wat complex, moat, irrigation works, other sites).
  - **Scene text/description** below the image describing the site and its historical significance.
  - **Hotspots** overlaid on the scene (e.g., icons 🏛️, 🌊) that students can click/tap to investigate specific features.
- A **progress bar** at the top tracking overall quest completion (0–100%).
- A **Discoveries** inventory panel showing collected items/icons representing key ideas or artifacts.
- A **dialogue/decision area** where narrative text is shown and decision buttons allow students to extend thinking.
- Navigation controls:
  - **Back** (← Back) to return to previous site.
  - **Next Site →** to move forward through different Angkor locations.
  - **Reset Quest** to start over.
- Tooltip system:
  - A top-level tooltip that explains the overall quest.
  - Tooltip text on hotspots and inventory items.
- Achievement pop-up when a new discovery is made.
- Self-contained HTML, CSS, JavaScript; no external framework.
- **MOBILE-FRIENDLY**:
  - Click/tap hotspots and buttons easily.
  - Layout works both in iframe and full-screen.

SPECIFIC REQUIREMENTS:

Scenes and hotspots
- Maintain a list of **scenes**. Each scene includes:
  - Background SVG/illustration for `#sceneImage`.
  - A descriptive `sceneText` paragraph with historical context and modern links.
  - One or more **hotspots** placed using absolute positioning (e.g., `left`, `top` percentages) within `#interactiveElements`.
  - Each hotspot has:
    - An icon (e.g., 🏛️ for temple, 🌊 for moat/water system).
    - A `data-id` (e.g., `temple`, `moat`) used in the script.
    - A `data-tooltip` string describing what the hotspot represents.
- Clicking a hotspot:
  - Shows additional narrative/description in `#dialogueText` or as a pop-up.
  - Triggers an **achievement notification** and adds a related item to the **Discoveries** inventory if not already collected.

Inventory and achievements
- The **Discoveries** panel (`#inventoryItems`) displays collected items such as:
  - 🏛️ Temple architecture.
  - 🌊 Water/irrigation systems.
  - (and other icons as needed in the implementation).
- When a new discovery is made:
  - Show `#achievementNotification` with title “Discovery Made!” and a short explanation of what was discovered and why it matters.
  - Update the inventory list with a new icon and associated tooltip.
- Hovering over inventory items shows a tooltip with a brief description (e.g., how temple design influenced modern architecture; how moat/irrigation concepts relate to current water management in Singapore).

Dialogue and decision buttons
- Dialogue box (`#dialogueBox` / `#dialogueText`) shows context for the current scene and guidance like:
  - “You are exploring Angkor Wat Temple Complex. Click on the glowing areas to discover more about this ancient wonder.”
- Decision buttons under `#decisionButtons` (e.g., “Learn about Legacy”, “Compare to Today”, “Take Notes”):
  - When clicked, they update the dialogue with extended explanations:
    - Highlight the **legacy** of the feature (e.g., sustainable water systems, religious architecture, trade, culture).
    - Compare ancient practices to **modern Singapore** (e.g., water catchment, urban design, trade networks).
  - May add to progress/inventory as students make thoughtful choices.

Navigation & progress
- **Next Site →** (`#nextBtn`):
  - Advances to the next location (e.g., from Angkor Wat to another related site or viewpoint).
  - Updates scene image, text, hotspots, and resets active decision buttons/hints as appropriate.
- **← Back** (`#backBtn`):
  - Goes to the previous site if available, disabled on the first site.
- **Reset Quest**:
  - Resets progress to 0% and returns to the first site.
  - Clears inventory and hides/clears achievement popups.
  - Resets dialogue to the introductory narrative.
- Progress bar:
  - `#progressFill` width reflects overall quest progress as students visit sites, click hotspots, and make decisions.
  - `#progressText` shows text like “Quest Progress: 60%”.

Tooltip behaviour
- Global tooltip element (`#tooltip`):
  - Shows explanatory text taken from:
    - The main game container’s title (for overall explanation).
    - Hotspots’ `data-tooltip` attributes.
  - Positioned near the cursor; hidden when the cursor leaves.

Achievement pop-up
- `#achievementNotification` appears when a new discovery is made:
  - Contains title “Discovery Made!” and a dynamic text summarising the discovery.
  - Fades out after a short time or when the user continues interacting.

Restart behaviour
- Restarting the quest via **Reset Quest** or at completion:
  - Resets internal state (current site index, progress, inventory, any decision state).
  - Re-populates initial hotspots and default text.

LEARNING OUTCOMES:
- Students should be able to:
  - Identify and describe key features of the **Angkor civilisation**, including architecture, water/irrigation systems, and cultural elements.
  - Recognise and explain **continuities** between ancient Angkor and **modern Singapore/SEA** (e.g., in water management, architecture, trade, culture).
  - Reflect on why studying ancient civilisations is relevant for understanding current societies.
- The quest should be exploratory, encourage curiosity, and scaffold historical thinking (connections across time and space).

INTERACTION FEATURES TO INCLUDE:
- Point-and-click / tap exploration with hotspots.
- Discovery-based inventory and achievement notifications.
- Dialogue updates and decision buttons that deepen understanding.
- Progress tracking and a clear sense of completion.

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