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

USER TASK SPECIFICATION:

Create an interactive HTML5 **“Acid-Base Indicator Testing Lab”** where students test different household substances using multiple acid–base indicators to determine approximate pH and classify substances as acids, bases, or neutral.

TARGET AUDIENCE:
- Upper Primary / Lower Secondary Science (approx. ages 11–14)

INTERACTIVE REQUIREMENTS:
- Educational content aligned to basic acid–base concepts (pH scale, indicators, acids vs bases vs neutral)
- Visual **virtual lab bench** with:
  - A **test tube rack** containing multiple clickable test tubes (e.g., 8 tubes)
  - Shelves holding **indicator bottles** and **substance bottles**, each clearly labeled
- User interaction primarily via **mouse/touch clicks** on:
  - Test tubes (to select a tube)
  - Substance bottles (to add a substance to the selected tube)
  - Indicator bottles (to add indicators and observe color changes)
- Include **2D visualizations**:
  - Colored test tubes showing liquid and indicator color change
  - A **pH scale bar** (1–14) with a smooth color gradient from strong acid to strong base
  - A **digital pH display** and a text readout of the substance’s “nature” (Strong Acid / Weak Acid / Neutral / Weak Base)
- Real-time updates:
  - When a test is performed, the test tube color should change to the correct indicator color
  - pH reading and nature text should update immediately when a tested tube is selected
  - A results/observation table should update live as more tests are done
- Include a **hint modal** and **zoom/magnified view**:
  - Hint button opens a modal with concise rules for interpreting indicator colors and pH ranges
  - Zoom button opens a modal showing a magnified view of the current tested tube’s color
- Self-contained front-end (HTML + CSS + JavaScript). It may be a single HTML file with embedded CSS/JS or separate `.css` / `.js` files, but **no external libraries** should be required.
- Clear labels, legends, and explanations:
  - Labels for “Indicators”, “Test Substances”, “pH Scale”, “pH Reading”, “Observation Table”
  - Tooltips or titles on bottles and test tubes with additional information (e.g., approximate pH, strong/weak acid/base)
- **MOBILE-RESPONSIVE**:
  - Include a viewport meta tag for proper scaling on phones
  - Layout should adapt to smaller screens (stack panels vertically, ensure text remains readable)
- **TOUCH-ENABLED**:
  - All interactions (select tube, select substance, select indicator, buttons) must work with touch events
  - Avoid double-tap zoom issues on mobile (e.g., preventing default double-tap zoom where appropriate)

SPECIFIC REQUIREMENTS:

Lab components and substances
- Test tube rack:
  - At least **8 clickable test tubes** in a rack
  - Clicking a test tube **selects** it (visually highlighted)
  - Each tube can store:
    - Which substance is inside
    - Which indicator was used
    - Whether it has been “tested”
- Indicators (on an “Indicators” shelf section):
  - **Universal Indicator**
  - **Litmus Solution**
  - **Phenolphthalein**
  - **Methyl Orange**
- Test Substances (on a “Test Substances” shelf section):
  - Vinegar (Acetic Acid) – weak acid, pH ≈ 2.5
  - Lemon Juice (Citric Acid) – weak acid, pH ≈ 2
  - Distilled Water – neutral, pH 7
  - Baking Soda Solution – weak base, pH ≈ 9
  - Soap Solution – weak base, pH ≈ 10
  - Dilute Hydrochloric Acid (HCl) – strong acid, pH ≈ 1
  - **Unknown X** – mystery substance, pH ≈ 8.5 (weak base) that students can identify using indicators
- Each bottle should have:
  - A visible label (e.g., “Vinegar”, “Lemon”, “Water”, “Baking Soda”, “Soap”, “HCl”, “Unknown X”)
  - A tooltip/title with a short description (e.g., “Weak acid, pH ~2.5”)

Interaction logic and flow
- Step-wise interaction with **dynamic instructions**:
  - Step 1: “Select a clean test tube from the rack”
  - Step 2: “Select a substance to add to the test tube”
  - Step 3: “Select an indicator to test the substance”
  - Step 4: “Click the indicator again to add it to the tube” (if needed for clarity)
  - Instructions should update automatically based on what the learner has already done (selected tube, added substance, etc.).
- When a **substance bottle** is clicked:
  - That substance becomes the “selected substance” (bottle highlighted)
  - If a test tube is already selected, the substance is added to that tube:
    - Tube visually fills with a base color (e.g., pale liquid colored according to the substance)
    - The tube’s tooltip updates to indicate which substance it contains.
- When an **indicator bottle** is clicked:
  - That indicator becomes the “selected indicator” (bottle highlighted)
  - If the selected tube already has a substance, adding the indicator should:
    - Trigger a short animation (“testing” state) and then
    - Change the liquid color in that tube to the correct indicator color based on the substance’s pH.

Indicator behavior (core simulation logic)
- Use a simple rule-based mapping from **substance pH** to indicator color.
- Example mappings (as in the current interactive):
  - Universal Indicator:
    - HCl (pH 1): red
    - Lemon (pH 2): orange-red
    - Vinegar (pH 2.5): orange
    - Water (pH 7): green
    - Unknown X (pH 8.5): cyan/light blue
    - Baking Soda (pH 9): blue
    - Soap (pH 10): dark blue
  - Litmus:
    - Acids (pH 1–2.5): red/pink
    - Neutral (pH 7): purple
    - Bases (pH 8.5–10): blue/teal
  - Phenolphthalein:
    - pH < 7: colorless/transparent
    - pH ≈ 7: colorless
    - pH ≥ 8.5: pink to deeper pink
  - Methyl Orange:
    - Strong/weak acids: red/orange-red
    - Near neutral to basic: orange/yellow
- After a test is performed:
  - Mark the tube as “tested”
  - Save its substance, indicator, and resulting color into a data structure for use by the pH display, zoom view, and results table.

pH scale and display
- Include a **pH Scale panel** with:
  - Numbers 1–14 along the scale
  - A horizontal color gradient bar from strong acid (red) through neutral (green) to strong base (blue/purple)
  - Labels indicating ranges (e.g., “Strong Acid”, “Neutral”, “Strong Base”).
- Include a **Digital pH Display**:
  - Large numeric pH value (1 decimal place) for the currently selected tested tube
  - A text label indicating chemical nature (e.g., “Strong Acid”, “Weak Acid”, “Neutral”, “Weak Base”)
  - Color-code the pH value text:
    - Red-ish for pH < 7
    - Green for pH = 7
    - Blue-ish for pH > 7
  - If no tube is selected or the selected tube hasn’t been tested yet, show placeholders (e.g., “-.-” and “Select a test tube”).

Observation / results table
- Include an **“Observation Table”** section with a scrollable table:
  - Columns: Substance | Universal | Litmus | Phenolphthalein | Methyl Orange | pH | Nature
  - Each indicator column should show a small colored square representing the observed color for that substance–indicator combination.
- Behavior:
  - When a test is performed, the table row for that substance is created or updated.
  - Untested indicator cells can show a placeholder (e.g., “-” or an empty box).
  - The table initially displays a message like “No tests performed yet”.

Hint and zoom functionality
- **Hint button**:
  - Opens a modal dialog titled “Helpful Hints” (or similar)
  - Bullet points summarizing key rules:
    - pH ranges for acids/bases
    - Indicator behavior (litmus red/blue, phenolphthalein colorless/pink, universal indicator colors, etc.)
    - Examples of strong vs weak acids/bases.
- **Zoom button**:
  - If a tested tube is currently selected, open a “Magnified View” modal showing a large test tube with the exact indicator color for that tube.
  - If no tested tube is selected, show an alert or message: e.g., “Please select a tested tube to zoom in!”.

Global controls
- **Reset** button:
  - Confirms with the user before clearing
  - On reset, clear:
    - All tubes (remove substances/indicators, reset colors)
    - Selected substance/indicator
    - pH display and nature text
    - Observation table (back to “No tests performed yet”)
- All buttons should have clear labels and tooltips (e.g., Hint, Zoom, Reset).

LEARNING OUTCOMES:
- Students should be able to:
  - Describe the difference between acids, bases, and neutral substances using the pH scale
  - Use multiple indicators (universal, litmus, phenolphthalein, methyl orange) to infer whether a substance is acidic, neutral, or basic
  - Interpret indicator color changes to estimate approximate pH values
  - Use patterns in their observation table to identify an **unknown substance** from its indicator responses.
- The interactive should encourage **experimental thinking**:
  - Try different indicators on the same substance
  - Compare indicator responses across different substances
  - Use hints and observation table to draw conclusions.

INTERACTION FEATURES TO INCLUDE:
- Clear, guided **step-by-step instructions** that update as the learner progresses
- Clickable bottles and test tubes with visible “selected” state
- Real-time visual updates (tube colors, pH display, observation table)
- Modals for hints and zoomed-in visualization
- Reset functionality to return to a clean state
- Tooltips/titles for key elements (bottles, tubes, scales) providing extra context.

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