https://iwant2study.moe.edu.sg/lookangejss/promptLibrary/ai-prompt-library.html 
USER TASK SPECIFICATION:
Create an interactive HTML5 auto-detect about Countable and Uncountable nouns.
TARGET AUDIENCE: Primary 3-4 - English Language
INTERACTIVE REQUIREMENTS:
- Educational content suitable for Primary 3-4 students
- User interaction via sliders, buttons, checkboxes, or other appropriate controls
- Include visualizations (2D graphics)
- Display real-time changes in graphs, values, or visual feedback
- Self-contained in one HTML file with embedded CSS and JavaScript
- Add clear labels, legends, and explanations for all elements
- **MOBILE-RESPONSIVE**: Must work on phones (viewport meta tag, touch events, min 44px touch targets)
- **TOUCH-ENABLED**: Drag-and-drop must work with touch (touchstart/touchmove/touchend events)
- Tooltips/help panels must include a visible close (X) button
 
SPECIFIC REQUIREMENTS:
drop and drop for P3 English Camille and the Sunflowers: Countable/Uncountable Nouns & Collective Nouns
LEARNING OUTCOMES:
- Students should be able to explore and understand Countable and Uncountable nouns
- Interactive elements should reveal key concepts through manipulation
- Visual feedback should reinforce learning objectives
- Design should encourage experimentation and discovery
- Progressive difficulty: begin with scaffolded questions, then steadily reduce hints until full-difficulty questions are presented
REAL-TIME DATA ANALYTICS (Critical for Learning Assessment):
- Implement a real-time action log showing:
  * Timestamp of each action (using relative time: t=0s, t=3s, etc.)
  * Description of action taken (e.g., "Slider moved to 45°", "Reset button clicked")
  * Current state/values after action
  * Sequential log of all interactions
- Display action log in a clear, scrollable panel
- Use Unicode symbols to mark different action types
- Purpose: Allow teachers to understand student exploration patterns and thinking process
If the interactive includes quiz/assessment mode, ALSO log:
- Question number and full question text
- Task/instruction prompt shown to the student
- Student's selected answer or input
- Correct answer
- Result (✅ Correct / ❌ Wrong) with color coding
- Attempt number (first try, second try, etc.)
- Show a sequential, scrollable quiz analytics panel to reveal misconception patterns
- Use Unicode symbols and color coding for visual clarity
- Purpose: Allow teachers to diagnose misunderstandings and learning gaps
ANALYTICS PLACEMENT:
- Position analytics panel at the bottom or side of the interactive
- Make it collapsible/toggleable to not interfere with main interaction
- Ensure analytics update in real-time as student interacts
- Include a "Clear Log" or "Reset Analytics" button
INTERACTION FEATURES TO INCLUDE:
- Input controls (sliders/buttons) with clear labels and units
- Real-time visual updates based on user input
- Graphs or diagrams that respond to changes
- Brief explanatory text or tooltips for context
- Reset functionality to return to default state
- **Real-time analytics panel tracking student actions for learning assessment**
 

VISUAL DESIGN REQUIREMENTS:
- Use appropriate color schemes for educational content
- Ensure sufficient contrast for readability
- Include visual hierarchy to guide attention
- Use animations judiciously to demonstrate concepts
- Maintain consistency in design elements
Please create a complete, functional HTML5 interactive that meets all requirements above. The output should be a single HTML file ready to be embedded in an LMS or opened directly in a browser.
 
Refine:
objects Visible immediately for all of them. And the objects.. Books. Cookies. Oil. Pear salt. Sugar. Table and water.
refine 2:
Can you augment the text with a graphics? For example, a books will be a graphic of many books. Cookies. Would be a graphic, will be accompanied with a graphic of cookies etc. The reason for asking this is because students who cannot read so well. Having the pictures there will help them to remember the meaning of these words
refine 3
add click and click ability to allow exisiting interaction. not just drag and drop.
add feedback such as "Oil is uncountable, but you can count bottles of oil." to each option to increase learning opportunity of common misconception