Breadcrumbs

wRiteFormula from PDF Knowledge Base ": An AI-Powered Journey to an Engaging Chemistry Game

v3:  added MistakeIdentification_v3-1 GameContentDatabase_v8-2_no-macro.xlsx

 

Download

 

 

 

  •  

 

 

v2: added the selection mechanism required that the number of ions selected correspond to the ratio of ions in the chemical formula as a way of nudging students to consider the balance of charges which is reflected in the chemical formula.

2 cations; 2 anions is marked as ok, it is reduce to 1 : 1

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

 

 

Download

 

 

 

 

 

 

Download

 

 

 

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="/ospsg/style.css">
</head>
<body>
  <h1>wRiteFormula v2 Challenge</h1>
  <!-- Interactive Elements -->
  <script src="/ospsg/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 Parsing Extracted structured logic from PDFs and images
Code Generation Built and edited HTML, CSS, and complex JavaScript
File Operations Read, wrote, replaced content in real-time
Debugging Diagnosed errors and proposed multiple fixes
Packaging Created 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.

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.

[text]

 

 

For Teachers

[SIMU_TEACHER]

Software Requirements

[SIMU_SWREQ]

Translation

[text]

Research

[text]

Video

[text]

Credits

[SIMU_CREDITS]

Version:

https://weelookang.blogspot.com/2025/04/building-writeformula-ai-powered.html

Other Resources

[text]

 

end faq

{accordionfaq faqid=accordion3 faqclass="lightnessfaq defaulticon headerbackground headerborder contentbackground contentborder round5"}
5 1 1 1 1 1 1 1 1 1 1 Rating 5.00 (1 Vote)
Details
Parent Category: Chemistry
Category: 03 Chemistry of Reactions
Hits: 151