VIBE - Brown Bag Series Workshop 1

Welcome to Vibe Coding with Gemini Canvas

Learn how to create interactive educational web apps without traditional coding! Using AI-powered tools like Gemini Canvas, teachers can build engaging simulations, games, and visualizations tailored to their curriculum needs. This workshop guides you through the process from prompt to published app.

Sample Apps

Subject/Area	App Name	Suggested Prompts
Biology	DNA Helical Structure	Create an interactive 3D visualization of a DNA double helix structure. Include sliders to rotate the model around X, Y, and Z axes. Display labels for: nucleotides (A, T, G, C), base pairs, sugar-phosphate backbone, and hydrogen bonds. Show complementary base pairing (A-T, G-C) with different colors. Add zoom controls and the ability to show/hide different components. Use HTML5, CSS, and JavaScript with SVG or Canvas. Make it responsive and touch-friendly.
Chemistry	Carbon 3D Structures	Build an interactive app showing different carbon allotropes (diamond, graphite, fullerene C60, graphene). Create 3D molecular structures that users can rotate with mouse/touch controls. Include: dropdown to switch between structures, information panels explaining properties (hardness, conductivity, uses), visualization of bonding patterns, and comparison view. Use relative units for responsive design. Include labeled axes and clear atomic representations.
Geography	Monsoons	Create an animated educational app explaining monsoon formation in Asia. Include: toggle buttons for summer/winter monsoons, animated arrows showing wind direction, color-coded pressure systems (high/low), rainfall distribution visualization, interactive map of affected regions. Add explanatory text panels describing the formation process. Use smooth animations and clear visual indicators. Ensure mobile responsiveness.
Geography	Land Use in Singapore	Design an interactive map of Singapore with color-coded land use categories: residential (yellow), commercial (red), industrial (purple), green spaces (green), water bodies (blue), transport infrastructure (grey). Make regions clickable to display: percentage of total land area, specific location name, recent changes. Include a legend and summary statistics. Use SVG for the map with touch-friendly click areas.
Math	Angles Quiz	Create a quiz game about angles. Generate random angle diagrams and ask students to: identify angle types (acute, right, obtuse, straight, reflex), calculate missing angles in shapes, find complementary/supplementary angles. Include: score tracker, immediate visual feedback (green for correct, red for wrong), hints button, difficulty levels (easy/medium/hard), progress bar. Show correct answer with explanation after each question. Track attempts and display final score with encouraging message.
History	Interactive Timeline	Build an interactive horizontal timeline for [specific historical period/topic]. Display events as clickable nodes on a scrollable timeline. When clicked, show: event name, date, description (100-150 words), relevant image, and historical significance. Include: zoom controls, filter by category/region, search function, color coding by event type. Add navigation arrows and smooth scrolling. Make timeline responsive - vertical on mobile, horizontal on desktop.
Chinese	Hanyu Pinyin Game	Create a Hanyu Pinyin practice game. Display a Chinese character and 4 pinyin options (multiple choice). Include: audio button to hear correct pronunciation, score counter, timer (optional), progressive difficulty levels, visual feedback animations (stars/checkmarks for correct answers). Cover common HSK1-2 vocabulary. After each answer, show the correct pinyin with tone marks highlighted. Track accuracy percentage. Use large touch-friendly buttons with clear Chinese fonts.
Economics	COE Price Data	Create a web app to visualize Singapore COE (Certificate of Entitlement) bidding data. Allow users to input recent COE results in a text area or upload CSV file. Display: line chart showing price trends over time, comparison between categories (A, B, C, E, motorcycles), current vs previous premium, percentage change. Include dropdown to select time period (3 months/6 months/1 year), color-coded legend, data table view. Make charts responsive using relative sizing. Add tooltips showing exact values on hover.
Project Work	3D Prototypes	Create an interactive 3D model viewer for project prototypes. Allow viewing simple 3D shapes or imported models. Include: rotation controls (drag to rotate), zoom slider, view presets (front, top, side, isometric), pan controls, toggle wireframe/solid view, measurement indicators, annotation pins (clickable to show notes). Background should be neutral grey. Ensure smooth rotation with touch and mouse. Add reset view button. Build using Three.js or plain Canvas/SVG.
Project Work	Clickable Mobile Prototypes	Build an interactive mobile app prototype mockup tool. Create 3-5 connected screens (e.g., home, menu, detail, form, confirmation). Display in a mobile frame (9:16 ratio). Make specific areas clickable to navigate between screens. Include: navigation indicators, back button functionality, smooth screen transitions, hotspot hints (optional), common UI elements (header, buttons, input fields, lists). Add instruction text. Prevent accidental navigation outside prototype. Use mobile-responsive CSS with portrait orientation focus.

Prompt Engineering Tips

Be specific about interactivity: Mention sliders, buttons, dropdowns, and what they should control
Request responsive design: Ask for relative units (%, em, vh, vw) instead of fixed pixels
Specify visual feedback: Describe colors, animations, and user feedback clearly
Include pedagogical goals: Explain what students should learn or explore
Request accessibility features: Large touch targets, clear labels, keyboard navigation
Iterate in steps: Start with core functionality, then add features in follow-up prompts

Step-by-Step Guide

1. Open Gemini

Go to https://gemini.google.com. You can be signed in to iCON or your private Gmail.

2. Select Canvas Mode

Select "Tools" and then "Canvas".

3. Enter Your Prompt

Enter your prompt to describe what you want to build.

Tip: You can also insert an image of a sketch of the concept that you want.

4. Test and Iterate

Test the app from the preview. If something is broken, describe what you notice is missing or wrong into the next prompt. You can also suggest improvements in the form of additional features or user interface changes.

5. Share Your App

If you are satisfied with the app, click on "Share" and "Copy Contents".

6. Open Google Sites

Go to Google Sites and create a new Site or open an existing Site.

7. Navigate to Pages

Click on "Pages".

8. Embed Your App

Add a new page and click on "Full page embed".

Sample Prompt Templates

Interactive Simulation

Template:

Create an interactive web-based simulation to help students explore [concept/topic].

Requirements:
- Include at least one adjustable input (slider / dropdown / button) for [independent variable]
- Show real-time visual feedback (animation, graph, or changing diagram)
- Display numerical values with correct units
- Add brief on-screen explanations describing what changes and why
- Keep the layout simple and classroom-friendly

Pedagogical goals:
- Support conceptual understanding, not just calculation
- Allow students to predict → test → explain

Technical Constraints:
- Acceptable languages: HTML5, CSS, and JavaScript.
- Vector graphics should be used, using SVG or other suitable formats. The media object should be scaled proportionally in response to changing browser size - for HTML tags, ensure that the dimensions are defined using relative sizes (%, em) instead of absolute sizing (px). 
- Scales proportionately and works within its own browser window regardless of size.
- Automatically adapt to mobile, tablet, and desktop screens
- Use relative units (%, vw, vh, rem) instead of fixed pixel layouts where possible
- Ensure all interactive elements are touch-friendly (large buttons, no hover-only actions)
- Prevent horizontal scrolling on small screens
- Maintain usability in portrait and landscape orientations

Learning Game

Template:

Build a game-based learning activity based on [describe existing game or your own game design] to answer questions about [topic/skill].

Game mechanics:
- Correct answers increase score / progress
- Track and display current score and attempts

Learning design:
- Questions should vary in difficulty
- Provide immediate feedback after each attempt
- Encourage retrying and learning from mistakes

Technical constraints:
- Acceptable languages: HTML5, CSS, and JavaScript.
- Vector graphics should be used, using SVG or other suitable formats. The media object should be scaled proportionally in response to changing browser size - for HTML tags, ensure that the dimensions are defined using relative sizes (%, em) instead of absolute sizing (px). 
- Scales proportionately and works within its own browser window regardless of size.
- Automatically adapt to mobile, tablet, and desktop screens
- Use relative units (%, vw, vh, rem) instead of fixed pixel layouts where possible
- Ensure all interactive elements are touch-friendly (large buttons, no hover-only actions)
- Prevent horizontal scrolling on small screens
- Maintain usability in portrait and landscape orientations

Data Visualisation

Template:

For ChatGPT Users (SLS Packaging)

Add this prompt when using ChatGPT to package for Singapore Learning Space (SLS):

Note: This prompt does not work for Gemini.