Asking Gemini to write the prompt for creating an interactive app for you: No need to write it yourself

 WHAT HAPPENED: 

1. I was asking Gemini the types of assets that Canvas could generate. In its answer, Gemini mentioned, inter alia, interactive timelines. 

2. I asked Gemini for examples of interactive timelines related to L2 teaching. One suggestion was the historical developments of L2 teaching methodologies. 

3. I found it a useful idea for my teaching, so I asked Gemini how to write a prompt to generate THAT timeline. 

4. Gemini wrote the following prompt for me. I copied it into Canvas, and obtained the interactive asset in about 2 minutes. 

PROMPT PROVIDED BY GEMINI: 

=========

Ready-to-Use Canvas Prompt

Role & Goal: You are an expert web developer and instructional designer. Build a single-page interactive web application using HTML, Tailwind CSS, and vanilla JavaScript that serves as an interactive timeline explaining 5 key language teaching approaches:

1. Grammar-Translation Method

2. Audio-Lingual Method (ALM)

3. Communicative Language Teaching (CLT)

4. Task-Based Language Teaching (TBLT)

5. Translanguaging Framework

Layout & Design:

• Modern, clean UI with a responsive horizontal or vertical timeline layout.

• A top header title: "The Evolution of Language Teaching Approaches".

• Distinct color-coded nodes or cards for each of the 5 approaches along the timeline, displaying the approach name and approximate era.

Interactive Mechanics:

1. Click-to-Expand Modals/Cards: Clicking any approach node highlights it and opens a detail card containing four tabs/sections:

   • Core Theoretical Premise (Theoretical background)

   • Key Classroom Features (Bullet points of teacher/student roles)

   • Example Activity (A concrete classroom scenario)

   • Critique & Limitations (Main pedagogical drawbacks)

2. Interactive Comparison Filter: Include a toggle or filter at the top (e.g., "Focus: Behaviorist/Form-Focused" vs. "Focus: Constructivist/Meaning-Focused") that visually highlights which methods fit each paradigm.

3. Quick Check Quiz: At the bottom of the page, include a 3-item drag-and-drop or multiple-choice quiz where users match a classroom scenario to its corresponding teaching approach, providing instant feedback on answers.

Technical Requirements:

• Ensure all CSS (Tailwind via CDN) and JavaScript are self-contained in a single code block so it runs directly in the Canvas preview.

• Make it responsive for mobile and desktop screens.

Why This Prompt Blueprint Works

• Structural Scaffolding: Dividing your prompt into Role, Layout, Mechanics, and Technical Specs prevents the AI from skipping functional UI elements.

• Explicit Content Framework: Naming the exact 5 approaches ensures Gemini populates accurate pedagogical content rather than placeholder text ("Lorem Ipsum").

• Multi-Modal Data Chunking: Requesting tabs (Premise, Features, Example, Critique) keeps the screen uncluttered and visually digestible for trainees.

• Formative Assessment Loop: Including a mini-quiz transforms a static reading layout into an active learning tool.

Once Canvas generates the code, you can tweak it in real time using side-by-side prompting—for example, asking it to "Change the background to a dark mode palette" or "Add a download button for a summary PDF."

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

OUTPUT TIMELINE: 

https://share.gemini.google/tW82nhI0RRLx

======+++++++++++++++++++++++++++++++++++++++++++++

TAKEAWAYS:

- No need to write the prompt yourself. Instead, tell Gemini your need and ask it to write the prompt for you. 

Chalkie AI: Features: Single Lesson vs Lesson series vs Activity Sheets

 THE 3 MAIN TYPES OF MATERIALS THAT CAN BE CREATED: 

THE LESSON:

- Unlike other platforms, the 'lesson' being generated is actually a presentation slidedeck, with a couple of interactive  tasks embedded. IT'S MAINLY FOR THE PRESENTATION STAGE ONLY. 

- My example: 'ed' vs '-ing' adjectives:  https://app.chalkie.ai/lessons/a17cbfb1-93d1-4438-9144-92f1eb30e5d5?ref=HbJMMVtl

LESSON SERIES

- This function will give you a series of lessons under a certain topic. But like 'Lesson', you do not get a series of lesson plans, but a series of presentation slidedecks. 

ACTIVITY SHEETS

- This function will generate a static worksheet consisting of a few tasks from the prompt or uploaded materials. The worksheet is not interactive. It can be shared via a link, or exported as a WORD or PDF file. 

- My example from 'ed' vs 'ing' adjectives: https://app.chalkie.ai/documents/a28a4c47-d99a-4c57-a90c-3d54653fca11?ref=HbJMMVtl

========

TAKEAWAYS

1.  For the 3 types of generations, you can start with a prompt, and/or uploaded files. 

2. The main functionality lies in generating lesson slidedecks, which contain interactive  tasks. To me, this is Chalkie's strongest feature. 

3. To respond to the interactive tasks, students join the presentation using a code provided by the teacher. 

4. Pricing

- Unlike Gamma, Chalkie provides a free plan which allows for some free materials creation. 

The plethora of teachers' AI platforms: The paradox of choice

 LingoTask; Chalkie; Brisk Teaching; Sayo; Goodclass; Tencent; MagicSchool; School AI; Eduaide; Diffit; Edcafe AI;  Monsha ......

There're now so many teachers' AI platforms. Familiarising myself with the functionality of one platform is challenging enough (e.g., MagicSchool has 70+ functions), not to mention identifying the strengths of each particular platform. A typical case of 'the paradox of choice.' 

What Edcafe AI can do for creating Reading Comprehension pack

 

• Can create a customised reading passage from a prompt, uploaded materials, and a link.
• after the reading passage is generated, can add Vocabulary, Quiz, and Audio

• Vocabulary: in the form of a glossary
  • 
    
    
• Passage Quiz: MCQ; short answers, etc.
• Generate Audio
• 
  
  

OBSERVATIONS

1. The Generate Audio function is still not available in Diffit. 

2. But Diffit can generate the reading passage and the worksheet in one go. 

Edcafe ai: generating a slidedeck from a Youtube video for a Previewing step

Sometimes, a Youtube video which is very rich in content may not be easy for students to follow if they are asked to watch it individually or together as a whole class. Although today there are AI apps which will generate a transcript/summary forr a YT video, the transcript/summary is still one piece of text, which may not be very captivating. 

One pre-viewing idea I have tried out recently in my Language Awareness course is to generate a concise slidedeck from a Youtube video I was about to ask the class to view. I asked the class to look through the generated slidedeck first. Many of the slides summarised the video content in graphic forms for easier understanding. When the students had finished looking through the generated slidedeck (for 3 minutes), they then watched the video. The post-viewing quiz showed a very high level of understanding. 

For illustration, here is a pre-video-viewing slidedeck I created using Edcafe AI. The YT video was created by Mr Ha Chi Hong, in which he explained how to use Gemini Spark to convert PDFs to editable documents. The content of the video is rather technical.  Looking through the Edcafe AI-created slidedeck as a pre-viewing step will certainly help. 

Mr Ha's original video (25:37): https://www.youtube.com/watch?v=Mw9RbtTl8fY

Edcafe AI-generated previewing slidedeck: https://app.edcafe.ai/share/slidedeck/converting-pdfs-to-editable-documents-with-ai-6a77f551ca64f4eb033ac1a0

Checking out Edcafe AI : Create Slidedeck function

under CONTENT AND PLANNING

Eg; Create slidedeck

MY ATTEMPT: 

Eg: 'Converting PDFs to Editable Documents with AI', made with Edcafe AI from a Youtube video by Mr HA Chi Hong.

Checking out HKU's iClass

iClass is essentially a Learning Management System. 

Teachers can input teaching resources beforehand. 

Example: 

The types of resources that can be created: 

After that, the teacher can administer each learning unit from the platform. Students use their student account to follow. 

===========

OTHER OBSERVATIONS: 

A. The teacher can switch between the Teacher Mode and the Student Mode, to see what the screen looks like for students. 

B. The teacher can view students' real time work while students are responding to the unit activities. 

C. The teacher can export students' learning data. 

D. It does not have AI capability. 

Gemini getting better and better in generating images: Image Consistency, and Spelling

 I still remember not long ago, Gemini would sometimes display 2 problems when generating images: (1) image consistency of the main characters in a picture sequence, and (2) spelling. 

Today, those issues seldom occur again. Good job, Gemini.

Repicating someone's created comic strip and turning the dialogues into English: Good Results

Original Comic Strip by Ms Selena Tam: 

WHAT I DID: 

1. I went to Gemini > Image.

2. Paste in the above comic strip. 

3. Wrote the prompt: 

Replicate the uploaded comic strip, turning the Chinese dialogs in the speech bubbles into English

4. output below: 

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

TAKEWAY: 

1. Gemini replicated the original images, without changing them in any way. 

2. The English translation from the Chinese is accurate. 

3. If teachers find a suitable comic strip in Chinese which they want to use in an English lesson, they can follow this example.  

 

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.  

Gemini + Google Drive > Locating files under a topic and creating a quiz based on those files

 I then tried Ha Sir's second example in his explainer video (https://www.youtube.com/watch?v=qPAFfcOiJ14). In Gemini, I typed @, then chose Google Drive. I then asked Gemini: 'Please find my google slidesdecks which are related to language awareness.'

It took Gemini less than 10 seconds to locate, in my Google Drive, the names of the 6 Google slidedecks related to Language Awareness. I then continued to ask Gemini to create a 10-item MC quiz based on the 6 located slidedecks. Again, Gemini gave me the quiz, in interactive format (https://share.gemini.google/ZK1xd6n8KDDq)

Gemini + Google Services > First attempt to add events from Faculty Almanac to my Google Calendar

 Following Ha Sir's first example in his explainer video (https://www.youtube.com/watch?v=qPAFfcOiJ14), I uploaded the 26-27 faculty almanac (in Chinese) to Gemini, typed @, and chose 'Google Calendar'. I then asked Gemini: 'Add the 學位教師教育文憑課程 events in September from the attached faculty almanac to my Google Calendar.'

Ten seconds later, when I checked my Google Calendar, the 3 September events on the Faculty Almanac were there already. 

Gemini 可以聯繫其他的Google service (Keep; Gmail; Docs; Tasks; Google Drive), 那麽可以玩的事情便多了。

Saving a webpage as a desktop app: How

 STEPS

1. Go to the website that you want to install as a desktop app. 

2. Stay on that tab. Click on the three dots in the top right corner. 

3. In the dropdown menu, open 'Cast, save, and share'. 

4. On the next pop-up window, choose 'Install page as app.' 

5. Type out the name of the desktop use. Then click 'Yes'. 

6. The website is installed as a desktop app immediately. It can be (1) pinned to the task bar, and (b) listed in the installed app under 'Start'.