Yi Jun Prompt:
Students are [Secondary 4] of [mixed abilities]

Learning Outcome [how to differentiate between nuclear fission and nuclear fission using examples]

The aesthetic design should be [Cute] and include features in the following: for the interactivity, I want to utilize [Matching] mechanics, supported by [Immediate Feedback] and an exploration style focused on [Discovery]. To drive engagement, please include [Points and Scoring and Time Pressure] within a [Mystery storyline with dialogues] narrative. Finally, the experience should include a musical score and sound effects for [general interaction]. Please make sure that the interactive includes "nuclear fission" and "nuclear fusion" as selection buttons but do not include the terms "fission", "fusion", "split", "fuse" in the questions. At the end of the game, include explanation of "nuclear fission" and "nuclear fusion" and offer an evaluation of student's performance on the interactive.

 

📋 REQUIREMENTS:

- Must run entirely offline without external libraries

- Optimized for iframe (100% width, 450px height) and standalone mode (90vh)

- Aligned to Singapore curriculum and notations

- Apply cognitive load theory and Mayer's multimedia learning principles

- Support both touch and mouse interactions (minimum 44px touch targets)

- Use visual cues (shadows, highlights) for interaction states

- Implement tooltips for additional information to reduce clutter

- No header text to save vertical space

- Clean, organized layout with clear visual hierarchy

 

🎨 DESIGN PRINCIPLES TO APPLY:

- Segmentation: Break content into manageable chunks

- Coherence: Eliminate extraneous information

- Signaling: Use visual cues to guide attention

- Spatial Contiguity: Place related elements together

- Temporal Contiguity: Present related information simultaneously

- Modality: Use both visual and verbal channels appropriately

- Redundancy: Avoid unnecessary duplication

- Personalization: Use conversational, engaging language

 

 

💻 TECHNICAL SPECIFICATIONS:

- Generate three separate files: index.html, styles.css, script.js

- Include comprehensive comments explaining the code

- Ensure responsive design and accessibility

- Optimize performance for smooth interactions