Note: this text prompt is re-made from the interactive, use as reference only. USER TASK SPECIFICATION: Create an interactive HTML5 **“Parts of a Flower – Concept Mapping”** activity where students drag word cards (petals, stem, roots, leaves) to the correct parts of a flower diagram and see immediate feedback on their understanding of structure and function. TARGET AUDIENCE: - Primary 5 Science (lower progress learners, ~11 years old) INTERACTIVE REQUIREMENTS: - A central **flower diagram** (SVG or canvas) showing key parts: - Roots - Stem - Leaves - Petals - **Drag-and-drop word cards** representing each part + function: - “Petals – Make the flower beautiful to attract insects” - “Stem – Holds up the flower and carries water” - “Roots – Take in water and nutrients from soil” - “Leaves – Make food for the plant using sunlight” - Students drag these cards to **drop zones** over the corresponding diagram parts. - Visual connection lines drawn between each card and its target part when placed. - Two main controls: - **“Check My Work”**: evaluate all current placements. - **“Try Again”**: reset the activity. - Feedback mechanisms: - Immediate, local feedback when placing a card (brief tooltip message, highlight on target). - Overall summary feedback after checking (score-style message with encouragement). - Self-contained HTML + CSS + JavaScript (no external frameworks). - **MOBILE-RESPONSIVE & TOUCH-ENABLED**: - Drag-and-drop must work with both mouse and touch. - Layout adapts for iframe and full-browser modes. SPECIFIC REQUIREMENTS: Flower diagram and drop zones - Use an SVG-based flower composed of groups (``) for each part: - **Roots** group with stylised root paths near the bottom, and a circular drop zone around them. - **Stem** group with a vertical rectangle, and a drop zone around the stem. - **Leaves** group with two leaf shapes on the sides, each with a drop zone (both represent the same part). - **Petals** group with petals and central disc, and a circular drop zone around the petals. - Each drop zone must have a data attribute indicating the part it represents, e.g. `data-part="roots"`, `data-part="stem"`, etc. Word cards - List word cards in a dedicated `word-cards-container`: - Each card is a `.word-card` element with: - `data-word` attribute (e.g. "petals", "stem", "roots", "leaves"). - Visible text for the part name (e.g. `Petals`). - A short description of function (e.g. `Make the flower beautiful to attract insects`). - Cards must be **draggable** and visually distinct (e.g., borders, background colour). - Cards that have been placed should be styled differently (e.g., `placed` class) and not draggable again until reset. Drag-and-drop behaviour - Support **mouse-based drag-and-drop**: - `dragstart`, `dragover`, `drop`, `dragenter`, `dragleave`, `dragend` events. - Only allow dragging word cards that are not yet placed. - Support **touch-based drag-and-drop**: - `touchstart`, `touchmove`, `touchend` events. - On `touchmove`, move the card with the finger (using fixed positioning and high z-index). - On `touchend`, determine the element under the finger via `document.elementFromPoint()` and treat it as a drop event if it’s a drop zone. - When hovering over or touching a drop zone while dragging: - Add a `highlight` class to that drop zone so students know they can drop there. - When a card is dropped on a drop zone: - If that drop zone already has a placement, clear/move the previous card back. - Record the placement mapping (e.g., `placements[part] = word`). - Mark the word card as placed (`.placed`). - Create a **connection line** from the card to the drop zone. Connections - Implement a separate SVG group (`.connection-lines`) that contains `` elements representing connections between cards and parts. - When a card is placed: - Compute the positions of the card centre and the drop zone centre relative to the container. - Create a line from card centre to drop zone centre. - Tag the line with a data attribute, e.g. `data-connection="petals-petals"`. - When resetting/removing placements, remove or update their corresponding lines. - Lines may gain a `correct` class when the match is correct during checking. Answer key and immediate feedback - Maintain a **correct answers mapping**, for example: - `petals → petals` - `stem → stem` - `roots → roots` - `leaves → leaves` - When a card is placed on a drop zone: - Determine if the placement is correct using the mapping. - Briefly highlight the drop zone: - Add `correct` class for correct placement. - Add `incorrect` class for incorrect placement. - Show a short message via a temporary tooltip, e.g.: - Correct: “Great job! That’s correct!” - Incorrect: “Try again! Think about what this part does.” - Remove these highlight classes after a short duration (e.g., 2 seconds). Check and feedback logic - On “Check My Work” button click: - Iterate over all expected parts and compare `placements[part]` with the answer key. - Count the number of correct matches. - Add persistent feedback classes to drop zones and lines (e.g., `correct` for fully correct connections, `incorrect` for wrong or missing ones). - Display overall feedback in a dedicated `#feedback` area: - If all correct: success message, e.g. `🌸 Excellent! You got all 4 correct! You understand how flower parts work together!`. - If mostly correct: partial success message, e.g. `🌱 Good work! You got 3 out of 4 correct. Check the red ones and try again!`. - If few correct: encouragement to try again, e.g. `🌿 Keep trying! You got 1 out of 4 correct. Remember: each part has a special job!`. - For a perfect score, trigger a small **celebration animation** on all placed cards (e.g., sequential bounce effect). - Temporarily disable the “Check My Work” button (e.g., for 3 seconds) to prevent spamming. Reset behaviour - On “Try Again” button click: - Clear `placements` and any feedback classes from drop zones and lines. - Move all word cards back to their original container and remove `placed` styles. - Clear the connection lines group. - Reset the feedback area. - Show a short tooltip message such as “Activity reset! Try again!”. Tooltips and accessibility - Tooltip system: - A global tooltip (`#tooltip`) moves near the cursor when hovering over elements with `title` attributes. - On `mouseenter`, show the tooltip text from `title` and temporarily remove the `title` to avoid default browser tooltip. - On `mouseleave`, hide the custom tooltip and restore the original `title` from a stored `data-original-title` attribute. - On `mousemove`, update tooltip position relative to the container. - When showing custom messages (e.g., after reset or correct placement), create a temporary tooltip-like overlay centred in the container; remove after a few seconds. Responsive handling - Adjust container height based on environment: - If running inside an iframe, limit height (e.g., 450px) for SLS embedding. - If in full browser, use a percentage of viewport height (e.g., 90vh). - On window resize: - Optionally recalculate line positions if needed (or accept minor drift if simple). LEARNING OUTCOMES: - Students should be able to: - Identify the **roots**, **stem**, **leaves**, and **petals** of a flowering plant. - Match each part with its **function** (e.g., roots absorb water, leaves make food, etc.). - See how all parts are connected in a whole plant system. - The activity should support **concept mapping** by visually linking labels and parts, reinforcing both terminology and function. INTERACTION FEATURES TO INCLUDE: - Drag-and-drop of labelled cards to diagram parts (mouse + touch). - Visual connection lines between cards and parts. - Immediate placement feedback and overall checking feedback. - Reset/try-again function for repeated practice. - Custom tooltip system improving clarity and accessibility. Create a complete, functional HTML5 interactive that meets all requirements above.