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

USER TASK SPECIFICATION:

Create an interactive HTML5 **“Animal Classification Assessment”** where students drag and drop animals into the correct vertebrate/invertebrate groups based on their characteristics.

TARGET AUDIENCE:
- Primary 4–5 Science (approx. ages 10–11)

INTERACTIVE REQUIREMENTS:
- Focus on **animal classification** by major groups:
  - Mammals
  - Birds
  - Reptiles
  - Amphibians
  - Fish
  - Insects
- Learners are given a **set of animal cards** (with emoji + name) and must drag each card into the correct classification box.
- Support **mouse-based drag-and-drop** (desktop) and **touch drag** (mobile/tablet).
- Provide **instant formative feedback** when a card is dropped:
  - Correct placements highlighted positively.
  - Incorrect placements get hints about the correct group characteristics.
- Include a **progress bar** showing how many animals have been placed out of the total (0–100% complete).
- Include assessment controls:
  - **Submit Answer** button (enabled only when all animals are placed).
  - **Try Again** button to reset and allow students to reattempt.
- Include a **Help/Examples** modal explaining each animal group with sample animals.
- Provide a **results section** showing score (e.g., 10/12 correct) and an encouragement message based on performance.
- Self-contained front-end (HTML, CSS, JavaScript) with no external frameworks required.
- **MOBILE-RESPONSIVE & TOUCH-ENABLED**:
  - Responsive layout that works well on phones and tablets.
  - Touch events for dragging animal cards to classification boxes.

SPECIFIC REQUIREMENTS:

Animal cards
- Include at least the following animals (exact set can be adapted, but should cover all groups):
  - **Mammals**: Dog, Cat
  - **Birds**: Eagle, Penguin
  - **Reptiles**: Snake, Turtle
  - **Amphibians**: Frog, Salamander
  - **Fish**: Fish, Shark
  - **Insects**: Butterfly, Bee
- Each animal card should display:
  - A clear **emoji/icon** representing the animal.
  - The **animal name** (e.g., “Shark”).
- Each card should carry internal data attributes or equivalent to encode the **correct group** (e.g., `data-group="mammals"`).

Classification boxes
- Create six classification boxes, one for each group:
  - Mammals
  - Birds
  - Reptiles
  - Amphibians
  - Fish
  - Insects
- Each classification box should contain:
  - A small **icon/emoji** representing the group (e.g., 🐄 for mammals, 🐦 for birds).
  - A **group label** (e.g., “Mammals”).
  - An inner **drop zone** where animal cards can be dropped.
- Each box should have a **tooltip or title** describing group characteristics, for example:
  - Mammals: warm-blooded, have hair/fur, feed milk to babies.
  - Birds: feathers, wings, lay eggs.
  - Reptiles: scales, cold-blooded, lay eggs on land.
  - Amphibians: live in water and on land, smooth moist skin.
  - Fish: live in water, gills, scales.
  - Insects: six legs, three body parts, often wings.

Drag-and-drop / touch interaction
- Desktop drag-and-drop:
  - Animal cards are draggable.
  - Drop zones accept cards.
  - Visual feedback when a card is dragged over a valid drop zone (e.g., highlight border or background of that box).
- Touch interaction (mobile/tablet):
  - Press and drag an animal card with touch.
  - Card follows the finger.
  - When released over a drop zone, the card snaps into that zone.
  - Reset positioning if not dropped over any valid zone.
- When a card is dropped in a drop zone:
  - Remove any previous placement for that animal (i.e., moving between boxes is allowed before submission).
  - Store the mapping from animal to the currently chosen group.

Feedback and hints
- Immediate feedback after each drop **before submission**:
  - If the animal is placed in the correct group:
    - Add a `correct` visual style (e.g., green border / background).
    - Optionally show a small tooltip like “Correct! Well done!”.
  - If placed incorrectly:
    - Add an `incorrect` visual style (e.g., red border).
    - Show a brief hint that gently guides the student, e.g.:
      - Mammals: “Think about animals that have fur and feed milk to their babies.”
      - Birds: “Think about animals that have feathers and wings.”
      - Reptiles: “Think about animals that have scales and are cold-blooded.”
      - Amphibians: “Think about animals that can live both in water and on land.”
      - Fish: “Think about animals that live in water and breathe through gills.”
      - Insects: “Think about animals that have 6 legs and 3 body parts.”
- Tooltips should appear near the card and disappear automatically after a short time (e.g., 2 seconds).

Progress tracking
- Maintain a data structure (`placedAnimals` or similar) mapping animal name → chosen group.
- **Progress bar** at the top:
  - Shows the percentage of animals that have been placed in any group (not necessarily correct).
  - Label such as “0% Complete”, “50% Complete”, etc.
- Update the progress bar **whenever** an animal is placed or moved.

Submit and scoring
- **Submit Answer** button:
  - Disabled until all animals have been placed in some box.
  - On click:
    - Lock the assessment (prevent further dragging).
    - Calculate number correct (matching chosen group to the encoded correct group).
    - Compute score and percentage (e.g., 10/12 → 83%).
- **Results section** (initially hidden):
  - Show score summary like: `You got X out of Y correct! (Z%)`.
  - Show **encouragement message** varying with performance:
    - ≥ 90%: “Excellent work! You really understand animal classification!”
    - ≥ 70%: “Great effort! You have a good understanding of animal groups!”
    - ≥ 50%: “Good try! Keep learning about animal characteristics!”
    - < 50%: “Keep practicing! Every scientist learns through trying!”
  - Optionally add a simple celebration animation (e.g., subtle scaling, background highlight) on the results panel.

Retry / reset
- **Try Again** button:
  - Hidden until after submission.
  - On click:
    - Reset internal state (isSubmitted, placedAnimals, correct count).
    - Move all animals back to the original animal cards area.
    - Clear all `correct`/`incorrect` styles.
    - Clear or hide the results section.
    - Reset progress bar to 0%.
    - Optionally shuffle the order of animal cards for variety.

Help / instructional support
- **Help button** always visible (e.g., “Need Help?”):
  - Opens a **Help modal** with concise explanations and example animals for each group.
  - Use clear, student-friendly language.
  - Include at least one example per group (some may overlap with actual assessment animals).
- Modal behavior:
  - Visible as an overlay centered on the screen.
  - Close icon (×) in top-right.
  - Clicking outside the modal content (on the overlay background) closes the modal.

Visual design and responsiveness
- Clean, student-friendly UI with:
  - A main container.
  - A row/column for the animal cards.
  - A grid layout for the classification boxes.
- Use simple color coding and iconography consistent across the UI.
- Make sure text is readable on both desktop and mobile.
- Hide or reposition tooltips when window is resized to avoid misplacement.

LEARNING OUTCOMES:
- Students should be able to:
  - Identify key characteristics of major animal groups (mammals, birds, reptiles, amphibians, fish, insects).
  - Correctly classify common animals into these groups.
  - Use hints and examples to refine their understanding when they make mistakes.
- The activity should serve as a **self-marking assessment**, giving instant feedback and a final score, while remaining encouraging and low-stakes.

INTERACTION FEATURES TO INCLUDE:
- Drag-and-drop (mouse) and touch-drag (mobile) for animal cards.
- Real-time progress bar and status text.
- Tooltips/hints for incorrect attempts and confirmations for correct attempts.
- Help modal with examples and group characteristics.
- Submit/score screen with encouragement messages.
- Try-again/reset flow resetting the whole assessment.

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