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

Replicated a quest app on Food Pyramid and getting the share link using Netlify

 The entire original quest is developed by Miss Lily for a P4 five-lesson AI-enhanced unit on Healthy Eating. 

Her original quest app:

https://vast-canyon-ba7a.here.now/

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

I wanted to try creating something like her Lesson 1.

 So I took a screencap of Lesson 1, went to Gemini > Gemini Canvas, and asked it to create a similar webpage. 

It worked; but the resulting Share Link did not work. 

- I then saved the resulting webpage as an HTML file (which worked)

- I went to netlify, and dropped the HTML file into the upload box. 

-  It created a URL; I asked it to make it public, and got the below link: 

https://mellifluous-daifuku-594522.netlify.app/

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

TAKEWAYS

1. By uploading the image of an interactive app to Gemini Canvas, it can replicate a similar one. 

2. Netlify can give you a public link to an html file.  

Created 2 interactive games using an uploaded infographic image using Padlet Arcade and Wordwall

 TOPIC: Multimodal Literacy and 21st century school education

APP: Gemini

STEPS: 

1. I asked Gemini to explain the significance of Multimodal Literacy for 21st century school education. 

2. Then I used the Image function, and asked Gemini to create an infographic based on its output. 

OUTPUT: 

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

CREATING INTERACTIVE GAME FROM THE ABOVE INFOGRAPHIC

I. Padlet Arcade

- After I uploaded the image, Padlet Arcade analysed it and then suggested a few game formats. I chose oe of them. 

https://arcade.padlet.com/game/yGjxwVOmr6?link_shared=1

II. WORDWALL

- I started by choosing a template (game format).

- I uploaded the infographic. 

- Wordwall created the game. 

https://wordwall.net/resource/116641088/multimodal-literacy-essential-21st-century-skills

Converted a static worksheet to an interactive webpage using Gemini Canvas: Politeness Power

 STEPS:

1. I made a screencap of part of a worksheet (on politeness expressions) created by Gracelyn, and paste it into Gemini's prompt box in CANVAS. 

2. My prompt IN CANVAS: 

Convert the above task into an interactive HTML web application. There will be 2 subtasks: (1) Students will tick the sentence in each pair which they find more polite, and then (2) for the sentence which they consider more polite, students will click the word in the sentence which makes the sentence more polite.

3. Output 

https://share.gemini.google/CWupQdE1S1Rw

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

TAKEAWAY: 

Gemini Canvas is doing a good job in converting a static worksheet into a web application. 

Created a three-tab interactive webpage on Simple Machines using Poe

 AI TOOL USED: 

- Poe's Canvas Creator

PROMPT

Create an app for upper primary students to learn about Simple Machines. Refer to the following picture for the format.

Learning Objectives:

• I can tell the names of the parts of a simple machine.
• I can label the picture of a simple machine.

There should be 3 tabs across the page below 'Learning objectives'.

• The first tab, titled 'Simple Machine', opens a picture with the parts of a simple machine labelled.
• The second tab, titled 'Quiz', opens up a few multiple choice questions about simple machines.
• The third tab, titled 'Simple Machine Labelling', opens up a diagram labelling task for students to label the parts of a simple machine.

OUTPUT:

https://poe.com/Simple-Machines

(Users need to sign in with their Poe account.)

Created a Typing Challenge game directly with Gemini Canvas and with Canva Code for Me

 I then tried directly asking Gemini Canvas to create the Typing Challenge, this time involving Colour Words. Gemini Canvas was able to do that from a prompt:

Prompt: create an interactive typing challenge game for upper secondary ESL students. The words to type are colour words. 

Output: https://share.gemini.google/7pEPF7CJpDl2

- The output is more complicated than I expected.

- When I tried, it confined itself to a small range of words. 

- Hence, the output needs iteration. But the takeaway is that instead of cloning and revising somebody's typing game, I can also create one directly using a simple prompt. 

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

Then I used the same prompt in Canva Code for Me:

The OUTPUT: 

- The page design is very simple.

- But the content is better than that produced by Gemini Canvas. 

TAKEAWAY:

- Canva Code for Me is not bad for creating interactive games. I may just need to do some simple iterations. 

Created an interactive typing challenge from Ha Sir's example bypassing the Code Block step

 Then I tried a more direct workflow that didn't require getting the Code Block first: 

1. I went to Gemini Canvas, and entered the following prompt: 

please revise the following typing challenge, changing the words to type to words which are grammar items:

https://gemini.google.com/share/1b28010945f0?skid=0d2d966a-31cd-48be-8718-ffe2c23d94ea (Ha Sir's original Challenge)

2. Gemini Canvas returned the following: 

https://share.gemini.google/JyR9c5k74naR

...which is actually quite different from Ha Sir's in design. I think Gemini Canvas was simply referring to the idea of Typing Challenge, instead of cloning and modifying Ha Sir's game. 

Cloned and Modified Ha Sir's Typing Challenge App

 1. Ha Sir's original typing challenge (involving IT terms): https://share.gemini.google/QRTbRKkKdkIo

2. I copied his link, went to Gemini, and asked it to create a similar typing game, but involving grammar terms. 

3. Gemini then gave me the Code Block. 

4. I asked Gemini how to turn the Code Block  into a standalone webpage which can be shared with others. Gemini suggested a couple of options, but they were technically too complicated for me. 

5. I copied the Code Block that Gemini had give me already. 

6. I went to Canva's Code for me, and paste in the Code Block. (I didn't write further prompts; just pasted in the Code Block.)

7. Canva Code for Me succeeded in creating a standalone interactive game: 

https://bit.ly/paulsze-grammar-terms-typing-challenge

Tried out Wordwall's AI functionality to create an interactive game

 WHAT I DID:

1. Choose a game templete. 

2. Uploaded my original worksheet (WORD file) which contained the Answer Key

3. Wrote the prompt: 

please create a 10-question quiz using the content of the uploaded word file. All 10 questions are multiple choice questions. Students look at each given sentence, which contains an underlined word or phrase, and decide which type of reference the underlined word/phrase is. 

For each question, the 3 choices are: 

- anaphoric (A)

- cataphoric (C)

- exophoric (E)

In the attached file, for each of the 10 sentences, the correct answer is given at the end of the sentence (i.e., A, or C, or E). 

4. GENERATE

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

OUTPUT: 

- Usable. Note, though, that the originally formatting in the WORD file, such as highlighting, italics, will not show in the generated task. 

https://wordwall.net/resource/115987359

Padlet Arcade trumps Gemini Canvas when it comes to creating interactive tasks/games

 很久沒有用Gemini Canvas製作interactive game，為了「温習」用法，隨便請Gemini Canvas 製作一個關於endangered animals的flashcard deck，每張card正面是動物英文名稱，和一個一按會聽到發音的按鈕，咭的背面是動物的圖片；Gemini Canvas的結果頗令人失望，有按鈕卻沒有聲音，一半的動物圖片還是錯的。經過幾次iteration ，結果仍是很差勁。

我立刻轉到Padlet Arcade ，不到一分鐘便生成完美和切合我需要的flashcard deck  。Padlet Arcade是到目前為止我最滿意用以製作interactive game的AI app。而且就算是free plan user，也可以無限量製作interactive game。Wordwall 今夭也有AI functionality，但free plan user只能製作3個game。

Padlet是我欣賞的eLearning app, 不斷完善其functionality,每次重訪，都看見new features。

Created a 'Read lecture transcript and Answer 3 MC questions' app using Poe's App Creator

 Originally, I went to Gemini and asked how to write a prompt to create a canvas app similar to the P4 Listening app created by Alex Lam. 

After 2 turns, it gave me a sample prompt, as below: 

You are an expert Marine Biologist. Create a Poe Canvas app for a listening and comprehension task about Coral Reefs.
The Lesson: Discuss the symbiotic relationship between polyps and algae.
Interface: Create a dashboard in the Canvas. When I click 'Start,' show a 'Transcript' of a lecture. Below it, provide 3 comprehension questions one by one.
Style: Use a blue ocean theme for the UI. Use React-style components (HTML/JS) to handle the question logic so the page doesn't refresh, but updates dynamically as I answer.

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

I copied it into Poe's App Creator. It returned the output app below in about 2 minutes: 

https://poe.com/preview/psOeQWeHJ9sKNiZsqEAW

So the prompt given by Gemini worked. But there was no audio in the app. Then I asked App Creator to add a Play button and Audio to the app, but I was going beyond the required points. So I stopped there. 

=======

TAKEAWAY: 

It's OK to ask a chatbot to provide you with a prompt to use in creating a canvas app. 

Create a Heading Matching task using Canva AI on Environmental Protection: Can't base it on my own infographic

 Previously, I created an infographic on Saving the Environment, from a simple prompt, using Canva AI. 

Just now, I wanted to use Canva's Code for Me, to create an interactive blank-filling task (fill in the headings for the 5 sections in the infographic).

But I was not able to upload my infographic. It referred to my prompt, and generated a general one as below: https://paulsze.net/eco-friendly-tips

Created a 5-level Tense Master app in Poe: Used a teacher-created one as example and Had Poe write the prompt for me.

 1. I first came across the following Tense Master app created in Poe by a teacher: 

https://poe.com/preview/zyuhXdEiyCboeQ3OWxTY

2. Inside each level, there are 3 Practice Formats: 

3. Hence, the overall design of this app is quite sophisticated. I wondered if I could create a similar one in Poe. But how to write the prompt was a big issue, and could be very time-consuming. 

4. I turned to Poe,  and asked if I provided it with the share link (preview link), would it be able to write the prompt for me. 

5. It asked me to provide the share link. Then it said it could not access the preview link app content. It then asked me for some details, and in particular SOME SCREEN SHOTS. 

6. I simply too 4 screenshots, in sequence if one is to use the app. 

7. Poe then wrote a very lengthy prompt. 

8. I copied the prompt, and pasted it into App Creator. 

9. It worked, though it took quite a long time for App Creator to finish the task.

OUTPUT: 

https://poe.com/preview/hfe93Y7XraWG1pF90BGz

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

TAKEAWAYS

1. Though I have yet to check out the content, the resulting app looks good. 

2. This experience shows that if I come across another elaborate canvas app, but do not wish to spend a lot of time figuring out the prompt, I can (a) describe my needs, and (b) attach some screenshots of the original app, and ask a chatbot to write the prompt for me. THIS WILL SAVE A LOT OF TIME. 

Created an interactive on Rebecca Oxford's Learning Styles inventory using Poe's app creator from the PDF: doable

 I downloaded the inventory PDF from U of Alberta website. 

I uploaded the pDF to Poe's App Creator, and 

- asked it to convert it to an interactive questionnaire, and

- add a results summary button at the end. 

==========

RESULT:

- Excellent

- https://poe.com/preview/k2WukRazGMuAuNKx8JXC

=======

TAKEAWAY

- Poe can convert a questionnaire PDF to an interactive version and add a Results summary for users to keep a record of their submissions

We can still create unlimited AI interactive activities under PADLET TA!

 Padlet很疏爽。  在它的Padlet TA 下可以無限量製作AI的interactive activity。

多年前Padlet由全免費轉為收費時，它讓我保留當時已創建的58個padlet，而只要我archive一個 padlet，便可以繼續製作新的padlet 。已archive的padlet如果日後要重用，只要unarchive便可以了。

相反 Nearpod便太可恶了，先前我嫌它慢把我的Gold plan降回Free plan，它竟然把我先前1GB以上的製作隱藏起來!

Created a 5-item T/F quiz in Gemini and then transferred it to a Google Site

 A canvas app I make with my current HK Gemini account can't be shared with others via a link immediately. But I can copy the HTML code, go to Google Sites, and paste in the HTML code to create a website which contains the original canvas app I made in Gemini. (But interestingly, in Gemini, I had to use the 'Create without Canvas' function in order to get the correct HTML code!)

Below is the result of my attempt (a 5-item T/F quiz on the speech organs), which is a Google site. (But I think it's faster to just use Poe's 'Create canvas app' function to create the app.)

https://sites.google.com/view/tfquizonspeechorgans/home

Created a grouping task on Psychological vs Social Issues in the ESL classroom using POE's Canvas App function

PROMPT:

Make an interactive grouping task for students to put 12 learning issues in the ESL classroom into the correct (A) psychological issues, and (B) social issues. 

Examples of psychological issues:

- learner anxiety

- poor memory

- low attention span

Examples of social issues: 

- conflict with classmates

- bullying

- exam pressure

OUTPUT

https://poe.com/preview/UgH5rSKo7sYRJzgV9qPl

===========

TAKEAWAY: 

No need to provide all the content ideas for Canvas App. Just give it some examples. 

AI can create a diagram labelling task directly from a diagram

 1. I asked Gemini 3 whether it can create a diagram labelling task directly from my uploaded image. It said Yes. 

2. It then provided an example by giving me the code to copy for creating a Cell Structure diagram labelling task. 

3. I copied the Code, when to POE's "Canvas App' function, pasted in the code. 

4. The first output does not work. I asked it to try again. 

5. The second output works, as below: 

https://poe.com/preview/o8syjR0euMrOxDErJl1D

=========

OBSERVATIONS

1. AI can create a diagram labelling task directly from a diagram. 

2. Next try: Do the above directly in 'Create Canvas App'. 

In POE, a chatbot response can be directly turned into an interactive task

 In the past, within POE, I would use the Chatbot function to get ideas, and then the 'Create Canvas app' function to create an interactive elearning task. 

But JUST REALISED THAT I CAN CONTINUE ON TO THE LATTER DIRECTLY FROM THE CHATBOT RESPONSE WITHOUT LEAVING THE CHATBOT.

In POE, I was using Gemini 3 Pro to set an overview of major SLA theories. 

OUTPUT: 

https://poe.com/s/YK1MewVwAfXxkSyc192B

Then, I thought: 'Why don't I try getting an interactive task directly from the output?"

In 'CONTINUE CHAT', I asked it to provide me with an interactive matching task for Ss to match the names of the 7 theories in the answer, to their meanings. 

THE CHATBOT COULD CONTINUE!

The first result did not work. I then asked the chatbot to try again. 

The second attempt by the chatbot was a success, as follows: 

https://poe.com/preview/PlvYOzoYibKA7veLreEk

===========

THE UPSIDE

- I need not extract the names of the theories, and their meanings (this could take some time), and copy them to the 'Create Canvas app'. 

Created an interactive board game based on someone else's board game and prompt provided by Claude

 At first, it was a board game forwarded by Ada Lam. This board game was about National Security: 

https://poe.com/preview/efNlwvpJs2iVoImQ1e9H

Then, I thought: 'Can I create a similar board game using AI for English?'

WHAT I THEN DID: 

1. Went to POE Claude. Pasted in the above link. Said I wanted to create a similar board game for primary students to practise English. I asked Claude to provide me with the prompt, which it did in less than 10 seconds. 

2. I copied the prompt. Went to POE's create canvas app, and pasted in the prompt. 

3. It took almost 5 minutes. But it succeeded: 

https://poe.com/preview/jsjfKPR73pLM3yZYGZOg

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

A. OPENING SCENE: 

B. AFTER SS CLICK 'START ADVENTURE':

C. IN TURNS, SS THROW THE DICE. 

D. AN MC QUESTION THEN POPS UP: 

 

E. THE SCOREBOARD AT THE TOP SHOWS THE LATEST SCORES OF EACH PLAYER

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

WHAT I LEARNT FROM THIS ATTEMPT: 

1. I can read Chinese stuff too, even if you're communicating with it in English.

2. If I come across a shared interactive which I find interesting and may want to replicate, instead of writing the prompt myself, which can take hours, I should just tell a bot what I want (in this case, the sample app link), can ask it to write the prompt for me!