🧠 How I Used Gemini Pro 2.5 to Build “Allowance Adventure!” – A Budgeting Interactive for All Ages 💰

As someone passionate about using technology to teach life skills, I recently embarked on a journey to make financial literacy fun, visual, and interactive. The result? 🎉 Allowance Adventure! – a web-based budgeting game built with the help of Google's Gemini Pro 2.5, HTML5, JavaScript

💡 What Is “Allowance Adventure!”?

Allowance Adventure! is a simple, interactive web app where users play out budgeting scenarios. You can choose between being a student with a weekly allowance, or an adult managing a paycheck. Your goal? Buy your needs first, avoid overspending on wants, and see how much you can save.

🎮 Key Features:

• 👶 Two difficulty levels: “Student Week” vs. “Adult Paycheck”

• 💵 Realistic spending choices (e.g., bus pass, phone bills, hobbies)

• 🎲 Random events like "You found $5!" or "Bus fare went up!" keep things unpredictable

• 📊 Dynamic budgeting with visual feedback

• 🛒 Interactive cart and final review with savings evaluation

🤖 How Gemini Pro 2.5 Helped Me Create It

I used Gemini Pro 2.5 as my AI co-pilot to: https://gemini.google.com/app/

https://gemini.google.com/app/
https://gemini.google.com/u/0/app/d0e3fb8f2ee396dc?_gl=1*1xn0m4h*_gcl_au*NjEzNzQyNjgxLjE3Mzc1MjMyNjg.

• ✍️ Generate boilerplate code for HTML structure and JavaScript logic

• 🔄 Iterate logic for spending, saving, and calculating leftover budget

• 🧪 Test random event injection logic with edge cases

• 💅 Style the UI with TailwindCSS and incorporate UX-friendly features

• 🧠 Get insights on gamification ideas like "essential vs. optional" needs

Gemini helped break big ideas down into code snippets, and responded instantly with suggestions or improvements. I could describe what I wanted – “a budgeting game where kids must buy food before games” – and Gemini translated that into functional, readable code.

🛠️ Technologies Used

Tech	Role
HTML5	Page structure and content layout
JavaScript	Core interactivity, budgeting logic, and random events
Lucide Icons	Fun, expressive icons for each item
Google Analytics	Optional for tracking

📚 Curriculum Connections

This interactive ties in directly with financial literacy goals and complements lessons like the SLS module on Needs and Wants. It can be a great tool for:

• PSLE / lower secondary Math and Citizenship Ed

• Post-exam activities

• Blended or flipped learning sessions

🌐 Try It Out + Source Code

➡️ Launch Allowance Adventure Now!
💻 Or embed the code on your own site – it’s just one self-contained HTML file!

✨ Final Thoughts

With Gemini Pro 2.5, building interactive web apps is easier than ever under 3 prompts.

ask for preview here!

Whether you're an educator, student, or just curious about AI-assisted coding, tools like this are lowering the barrier to create rich, pedagogically sound learning experiences.

no, i want you to think out of the box, and be imaginative to create a interactive to supplement the lesson, maybe a game or quest or virtual world to learn the concept?

randomise the money put the buyables in a flex display to reduce the need to scroll

in about 5 tries, Continue with Gemini Advanced

You’ve reached your limit on 2.5 Pro (experimental) until 8:10 PM. Try Gemini Advanced for higher limits.

Let students learn budgeting by doing, and let AI help you build the future of learning.

---

🧑‍🏫 Created by: Wee Loo Kang
🌍 Explore more: iwant2study.org

<!--

MASTER PROMPT FOR INTERACTIVE GENERATION

Create an educational budgeting interactive web app titled "Allowance Adventure!" that helps users learn about financial literacy by categorizing expenses into needs, wants, and savings.

FEATURES TO IMPLEMENT:

1. Two levels:

   - "Student Week" with $40 budget and student-related expenses.

   - "Adult Paycheck" with $500 budget and adult-related expenses.

2. Items:

   - Each level has ~8-10 items categorized as:

     - "need" (essential),

     - "want" (optional),

     - "saving" (user sets aside money).

   - Items have minPrice and maxPrice to randomly assign a currentPrice.

3. UI Components:

   - Header with title and description.

   - Budget summary: Initial, Current Remaining, and Calculated Savings.

   - Level toggle buttons (student vs. adult).

   - Dynamic item cards with icon, category, price, and Buy button.

   - Shopping cart summary.

   - Finish & Reset buttons.

4. Game Logic:

   - User buys items; budget decreases accordingly.

   - Buying all "need" items is required for a good outcome.

   - Random events occasionally occur (positive or negative budget impact).

   - On Finish: Provide a reflection message (e.g. “Great job budgeting!” or “You forgot an essential!”)

5. Visual Design:

   - Use Lucide icons for each item.

   - Ensure responsive layout, suitable for desktop and mobile.

6. Tracking (optional):

   - Include Google Analytics and AdSense tags for learning deployment.

7. Deployment:

   - Entire simulation must be in a **single HTML file** for easy uploading to LMS platforms like SLS.

   - Minimize external dependencies

8. Pedagogical Aim:

   - Encourage learners to distinguish between needs and wants.

   - Teach basic budgeting and the value of saving.

OUTPUT REQUIREMENT:

Return a fully working single-file HTML containing HTML, JavaScript ready to run in any browser without server-side dependencies.

-->