Created an interactive learning module on Ordering Coffee at a Cafe politely using Gemini Canvas

 1. Inspired by the following learning module created by Leonard Wong: 

https://l.facebook.com/l.php?u=https%3A%2F%2Fturbo-eagle-3zzr.here.now%2F%3Ffbclid%3DIwcGRvZgVleHRuA2FlbQIxMABicmlkETEyME14ZWRqb1lob2IwYTI3c3J0YwZhcHBfaWQQMjIyMDM5MTc4ODIwMDg5MgABHpdlsntUVYQAyeruV-7cHqF_DZijiHiwYWkh7bUVFTNAwYkT6yZjGqO9MVa5_aem_-iRl_4bDRcllUBygt4fELw&h=AUCTehN7XaKIDNcR4n6QrGVTslL3BEwJ8qkPJFUOSE_40gA-FKOmI7lb9Nl7_YV-5Tzv6C5MPMwbFrdqCt41sguuu7CRLEyK0IpX0uEqjroSXuF8ytnpP5goRjSeLOrt9SgBWBdsaVZl6g&__tn__=-UK-R&c[0]=AUArH-aSAD4PA3X24Fk2RYu60h6-g3JFj2vMQbLnKI82yqeMeV8DMyHMlQunF_ADrRhqG-szypj6PzJIZY8i0K3itb8NQ-9HeRuDjIO7k55zFSvLnF4_ziiOiWHXd9QHdT831NCJawcWY_zSuT9CUthd

2. Asked Gemini about the module. 

3. Gemini introduced bolt.new for creating such interactive modules. 

4. Asked Gemini to provide a simple example, and a prompt. The example provided was 'Ordering a coffee politely at a cafe'. Gemini provided the following prompt: 

=========\

Act as an expert frontend web developer and TESOL instructional designer.

Create a single-file, self-contained HTML/CSS/JavaScript interactive Micro-Learning Unit for English language learners.

Topic: Ordering Food at a Cafe (Functional Language & Pragmatics)

Target Audience: Intermediate ESL/EFL students.

App Requirements:

Visual Header: Clean modern layout with a title "Interactive Scenario: At the Cafe" and a progress bar.

Step 1: Vocabulary & Pragmatics Checklist. Interactive clickable cards showing direct vs. polite ordering phrases (e.g., "Give me a coffee" vs. "Could I get a coffee, please?").

Step 2: Interactive Audio/Text Dialogue. A visual chat interface simulating a barista and customer, where students click to reveal the next line of dialogue.

Step 3: Branching Dialogue Practice. A multiple-choice scenario where the barista asks a follow-up ("What size would you like?") and the learner picks the best polite response. Give instant color-coded feedback.

Step 4: Final Quiz & Summary. A brief 3-question check on polite modals ("could", "would", "may") with a final score display. Design Style: Clean, mobile-friendly, modern UI with Tailwind CSS (via CDN) and friendly pastel colors. Code Output: Provide ONLY valid, single-file HTML code containing inline CSS and JavaScript. Do not use external asset files or npm dependencies.

==================

5.  Went to bolt.new and copied the above prompt into the chatbox. Bolt.new could create the module directly. But when I tried the output, there were some bugs. I asked for revision, but then used up all my  credits.

https://interactive-cafe-eng-pwfk.bolt.host

6. I went back to Gemini Canvas, and used the same prompt. GEMINI CANVAS CAN ACTUALLY CREATE SUCH A MODULE DIRECTLY!

https://share.gemini.google/EkXq2DKF4pf6