Sample Learning Goals

[text]

 

 

From Concept to Classroom: Creating an Educational Game with AI Assistance

Developing engaging educational resources often requires bridging the gap between pedagogical goals and technical implementation. Recently, I embarked on a project to create an interactive drag-and-drop game about human body systems for primary school students (ages 5-11), specifically designed for potential use in environments like the Singapore Student Learning Space (SLS). A key requirement was that the final product be a single, self-contained HTML file, capable of running offline without external dependencies. This presented some interesting challenges, but collaborating with Google's Gemini Pro made the process significantly smoother and more iterative.

https://g.co/gemini/share/2e40f3dc3327 https://gemini.google.com/u/1/app/a94c180568b77652?_gl=1*1xn0m4h*_gcl_au*NjEzNzQyNjgxLjE3Mzc1MjMyNjg.

Master Prompt Used

Uploading a layout or sketch (PNG, JPG, etc.) greatly enhances the AI's understanding of the desired design.

🎯 Objective:

Create a fully interactive, pedagogically sound, and engaging simulation using only HTML, CSS, and JavaScript (no external libraries). The output must be a single self-contained HTML file suitable for embedding within the Singapore Student Learning Space (SLS).

🧑‍🎓 Target Audience:

Students aged {5 to 11 } years old.

Subject and Level:

Singapore MOE syllabus level (e.g., Primary Science  Biology) to ensure appropriate complexity and curriculum alignment.

🧪 Simulation Core Requirements:

1. Topic:

This "4 Body Systems" game offers several potential applications in educational settings:

Introduction to Human Body Systems: As a first encounter with these fundamental biological concepts.

The "4 Body Systems: skeletal, circulatory-respiratory, nervous and digestive system, drag and drop game" is a valuable open educational resource that provides an interactive and engaging way for learners to grasp the basics of human organ systems. Its user-friendly drag-and-drop interface, potential for timed challenges,

2. Concepts to Demonstrate:

⚙️ Simulation Behavior & Features:

Scientific Accuracy: Model the system based on scientifically accurate principles and equations appropriate for the target level. Balance realism with pedagogical clarity.

Interactivity & Controls:

Include standard controls: ► Play, || Pause, ►| Step (advance one time-step), and ↻ Reset for Science Virtual Laboratory Setup.

Implement the user-controlled variables specified in section 3 (e.g., sliders, inputs).

[Optionalhttps://g.co/gemini/share/2e40f3dc3327" style="color: rgb(0, 158, 184); font-family: "Helvetica Neue Light", HelveticaNeue-Light, "Helvetica Neue", Helvetica, Arial, sans-serif; outline: none; text-decoration: none; transition: color 0.3s; display: inline;">https://g.co/gemini/share/2e40f3dc3327

The Initial Spark: Requirements and Constraints

The core idea was simple yet effective: a game where students drag representations of organs onto a human body outline, learning to associate parts with the correct system (Skeletal, Circulatory/Respiratory, Nervous, and Digestive). The user provided an initial concept image and clear constraints:

bodySystemGemini25Pro.zip bodySystemGemini25Pro/

 

bodySystemGemini25Pro.zip bodySystemGemini25Pro/

 

bodySystemGemini25Pro.zip bodySystemGemini25Pro/

• Technology: HTML, CSS, and JavaScript only. No external libraries or frameworks.

• Format: Single, self-contained HTML file.

• Compatibility: Offline use, modern browsers, responsive design.

• Target Audience: Young learners (5-11 years).

Laying the Foundation: HTML Structure and CSS Styling

Based on the requirements and reference image, Gemini helped generate the initial HTML structure. We established:

1. A controls bar for buttons (Start New System, Reset) and displays (System Title, Timer).

2. A main game area split into two sections using CSS Flexbox:

   • The left side for the human body outline (the drop target).

   • The right side for the list of draggable organs (the source).

3. A feedback area below the game to display messages.

Gemini also generated the initial CSS, focusing on a clean layout, responsive design using media queries, and clear visual hierarchy suitable for young learners. We ensured elements like buttons and text had good contrast and readability, adhering to basic accessibility principles.

Bringing it to Life: JavaScript Drag & Drop

This was the most complex part. Gemini assisted in implementing the core game logic using JavaScript's native Drag and Drop API:

• Data Representation: We defined a JavaScript object (bodySystems) to hold the data for each system, including the list of organs and their corresponding correct drop zones.

• Drag Events: Event listeners (dragstart, dragend) were added to the organ elements. dragstart stores information about the dragged organ.

• Drop Events: Event listeners (dragover, dragleave, drop) were added to the drop zone elements. dragover prevents the default browser behavior to allow dropping. handleDrop contains the core logic:

  • Identify the dragged organ and the target drop zone.

  • Check if the organ belongs to that specific zone for the current system.

  • Provide visual feedback (styling the zone, showing messages).

  • Move the organ element into the zone upon a correct drop.

  • Track progress and check for system completion.

• Controls & Timer: Functions were implemented for the Start New System button (loading the next system's data, clearing the board), the Reset button (reloading the current system), and the timer (start, stop, reset).

Iteration and Refinement: The Power of Collaboration

Development rarely follows a perfectly linear path. Our collaboration involved several iterative cycles:

1. Text to SVG Organs: Initially, due to the "no external resources" constraint, organs were represented by simple text labels. When the user requested images, we discussed the conflict with offline compatibility. Gemini suggested using embedded SVGs as a self-contained alternative. Gemini then assisted in generating simple SVG code for each organ and updating the JavaScript to display these SVGs within the draggable elements.

2. Improving the Body Outline: The initial CSS-based body outline was very basic. The user requested a more human-like silhouette. Gemini helped replace the div with an <svg> element containing a <path> with appropriate coordinates to draw a better shape, updating the CSS accordingly.

3. Debugging Drag & Drop: Introducing the SVG body outline inadvertently broke the drag-and-drop functionality. Through discussion and analysis (aided by Gemini identifying potential issues with HTML elements inside SVG and event propagation), we diagnosed the problem: the drop zone divs weren't reliably receiving events when placed inside the SVG. The fix involved creating a separate, absolutely positioned div (#drop-zone-area) layered on top of the SVG to contain the drop zones, restoring the event handling.

4. Solving Overlapping Zones: Users reported issues dropping specific organs (Heart/Lungs, Intestines). Gemini helped diagnose this as an issue where larger drop zones were overlapping smaller ones positioned at the same coordinates. Since the larger zones were added later in the DOM, they were interactively "on top," preventing drops onto the smaller zones beneath. The solution, implemented with Gemini's help, was to add CSS z-index properties to the specific drop zone rules, ensuring the smaller zones had a higher stacking order. This property explicitly controls how overlapping elements are layered, allowing us to define that the smaller 'Heart' zone should appear above the 'Lungs' zone, and the 'Small Intestine' above the 'Large Intestine', even if their parent elements are positioned similarly. This seemingly small CSS adjustment was crucial for usability.

Throughout this process, Gemini wasn't just writing code; it was acting as a true development partner. It was explaining concepts like the CSS box model, the intricacies of SVG rendering, or the event propagation differences when dealing with nested HTML and SVG elements. When errors occurred, Gemini could analyze code snippets alongside user descriptions ("I can't drop the heart") and visual evidence from screenshots to propose targeted fixes. For instance, seeing the drop zones highlighted in the screenshot helped confirm the overlap theory for the Heart/Lungs issue. Gemini also suggested alternative approaches, such as discussing different ways to handle the drop zone positioning before settling on the overlay div. The implementation was constantly refined based on this iterative feedback loop – adjusting CSS percentages, tweaking SVG appearances, and improving feedback messages.

The Final Product & Reflections

The result of this collaborative effort is a functional, interactive educational game tailored to the specific needs and constraints outlined at the start. It successfully meets the requirements of being offline-compatible and contained within a single HTML file, making it easily distributable and usable in various learning environments. The game allows young students to visually and interactively learn about four key human body systems through an engaging drag-and-drop activity, reinforcing organ identification and system association. The use of clear SVG visuals strikes a balance between representation and simplicity, appropriate for the target age group.

This project vividly demonstrated the power and potential of collaborating with an AI like Gemini Pro in a real-world development scenario. It significantly accelerated the entire process, from generating the initial HTML/CSS boilerplate and complex JavaScript logic for drag-and-drop state management, to creating the necessary SVG assets on demand. Debugging, often a time-consuming part of development, was streamlined; Gemini helped quickly identify and resolve tricky CSS layout conflicts (like the overlapping zones) and event handling bugs (like the SVG container issue) that could otherwise take considerable manual effort to pinpoint. The ability to communicate problems using natural language, supplemented with visual context via screenshots, proved incredibly efficient compared to formulating precise technical bug reports. While human oversight, pedagogical expertise, and final decision-making remain indispensable, AI assistance like Gemini Pro serves as a powerful force multiplier, enabling educators and developers to create effective, custom learning resources more rapidly and iteratively.

Credit: weelookang@gmail.com using Gemini Pro.For more resources go to https://sg.iwant2study.org/ospsg/index.php/interactive-resources/biology Biology

For Teachers

[SIMU_TEACHER]

Software Requirements

[SIMU_SWREQ]

Translation

[text]

Research

[text]

Video

[text]

Credits

[SIMU_CREDITS]

Version:

https://weelookang.blogspot.com/2025/04/gemini-25-pro-from-concept-to-classroom.html

Other Resources

[text]