Pages

▼

Thursday, April 24, 2025

Building "wRiteFormula": An AI-Powered Journey to an Engaging Chemistry Game

 

Building "wRiteFormula": An AI-Powered Journey to an Engaging Chemistry Game

Creating effective educational tools means bridging the gap between pedagogical intent and technical execution. This post documents the development of wRiteFormula v2, an interactive chemistry game for secondary school students in Singapore. It showcases how AI collaboration—leveraging Trae.ai, the Cline Extension, and Google’s Gemini 2.5 Pro model—accelerated the process of transforming a static PDF specification into a dynamic web-based learning tool.

The Objective: From PDF Specification to Playable Game

The goal was ambitious: convert a detailed PDF into a fully functional, curriculum-aligned, and engaging chemistry game using only HTML, CSS, and JavaScript—fit for embedding in Singapore’s Student Learning Space (SLS). The game targeted students aged 13–16 (Secondary 3/4), focusing on the correct formation and naming of ionic compounds. 

wRiteFormulaPDF/
wRiteFormulaPDF_SLS_20250424_210409.zip

Key Requirements:

  • Curriculum-aligned ionic bonding logic

  • Intuitive tile-based gameplay with responsive feedback

  • Gamified elements like scoring and streaks

  • MCQs based on student misconceptions

Laying the Groundwork: From Idea to Codebase

We began by breaking down the PDF into actionable tasks and setting up the foundational code using the write_to_file tool in Cline:

<!-- index.html -->
<!DOCTYPE html>
<html>
<head>
  <title>wRiteFormula v2</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <h1>wRiteFormula v2 Challenge</h1>
  <!-- Interactive Elements -->
  <script src="script.js"></script>
</body>
</html>

From there, script.js and style.css served as the main engines of game logic and design.

Core Gameplay Implementation

Development centered around the script.js file. Major milestones included:

  1. Ion Database (allIons): Each ion was defined with its name, charge, type, and oxidation state.

  2. Level Logic (levelDefinitions): Difficulty progressed over 20 levels, with each level offering specific cation/anion combinations.

  3. Tile Grid Generation (populateIonGrid): Dynamically populated based on level, with responsive layouts.

  4. User Interaction (handleTileClick): Enabled users to select one cation and one anion, activating a “Form Compound” button.

  5. Chemical Formula Calculation (calculateFormula): Used charge balancing via LCM and included special formatting for polyatomic ions.

  6. Compound Naming (generateCompoundName): Respected IUPAC naming conventions, including Roman numerals.

  7. Quiz Mechanism (MCQs):

    • Randomized question type (name or formula)

    • Plausible distractors based on real student errors

    • Instant feedback and scoring logic

Iterative Improvements and Bug Fixes

New Levels

wRiteFormulaPDF/
wRiteFormulaPDF_SLS_20250424_210409.zip

Initial deployment covered levels 1–15. 

wRiteFormulaPDF/
wRiteFormulaPDF_SLS_20250424_210409.zip

Based on user feedback, levels 16–20 were added with rare ions like CrO₄²⁻, CN⁻, and Pt²⁺.

Debugging Highlights

  • ReferenceError: charge2: Scope error resolved by elevating gcd and replacing local variables.

  • SyntaxError: Unexpected token '<': Caused by HTML tags in feedback strings—resolved by safely extracting text from elements before injection.

Enhanced Engagement

  • Sound Effects: Triggered on tile selection and quiz results using .play() on Audio objects.

  • Responsive Design:

    • Reduced tile count on mobile

    • Used CSS Grid with auto-fit and media queries

  • Scoring Adjustment: Simplified scoring logic to match student feedback.

Final Touches: Packaging and Publishing

  • Analytics: Added Google Analytics tracking for usage insights.

  • Attribution: Credit line included at the bottom of index.html for Trae.ai, Cline, Gemini 2.5 Pro, and iwant2study.org.

  • SLS Zip Package: A ZIP archive containing only the runtime essentials (index.html, style.css, script.js, sounds/) was created via:

tar -a -c -f wRiteFormula_SLS_20250424_210409.zip index.html script.js style.css sounds

AI as a Development Partner

This project illustrates the power of embedding AI into the development pipeline:

TaskAI Contribution
Requirement ParsingExtracted structured logic from PDFs and images
Code GenerationBuilt and edited HTML, CSS, and complex JavaScript
File OperationsRead, wrote, replaced content in real-time
DebuggingDiagnosed errors and proposed multiple fixes
PackagingCreated distributable files for SLS

The collaborative interplay between AI and human insight enabled rapid prototyping, iterative enhancement, and classroom-ready deployment—all within days, not weeks.

Enhancement

Require that the number of ions selected correspond to what’s needed for the charges to be balanced in an ionic compound






Conclusion

wRiteFormula v2 stands as a testament to the potential of AI-augmented development in education. By blending clear educational goals with powerful AI tooling, what began as a static PDF became a dynamic, gamified learning experience—scalable, interactive, and aligned with modern pedagogy.

Whether you're an educator, developer, or edtech enthusiast, this project demonstrates how AI can help build the future of learning—one compound at a time.

at

No comments:

Post a Comment