Built with VaI - RMIT's AI virtual learning assistant.
From teaching idea to interactive tool
Describe what you want in plain language. ChatGPT writes the code. You refine the result through conversation, not syntax — and leave with an activity ready for your own course.
Don't start with “What can AI make?”
Start with “What do I want my students to do?”
This is a workshop, not a demonstration. No programming background required.
Stage 01 · Demo
See what one clear prompt can do.
We start with a simple teaching request. ChatGPT turns the description into a working interactive activity — one self-contained .html file.
EXAMPLE PROMPT — TYPED INTO ChatGPT
You are a learning designer. Create a single-file .html game called "Interest Rate Challenge" for first-year business students practising simple interest.
Five rounds. Each round shows a short scenario with a random principal, rate and time. The student types the interest, has 30 seconds, and earns more points for faster correct answers. After each answer, show the full working (Principal × Rate × Time) and a one-line explanation. Track score and streak, show progress, and end with a summary and a Play Again button.
Clean, colourful, readable on a phone. All CSS and JavaScript inside one file. Return only the code.
Five scenarios. Thirty seconds each. Faster is worth more.
0points
0streak
1of 5
Simple interest = Principal × Rate × Time
You will see a scenario. Work out the interest earned and type it in. Round to the nearest dollar.
Principal
Rate
Time
$
0points
Notice what made the prompt useful.
It says what students should do, what the activity should produce, and asks for a single file you can save and run anywhere.
Stage 02 · Hands-on in ChatGPT
Start with the learning, not the technology.
Tell us what you teach, what students should achieve, and what the finished activity should look like. Then choose a format and we will write your starting prompt for ChatGPT.
1. What are you teaching?
Start with your course and topic.
2. What should students be able to do?
Describe the learning goal in one or two sentences.
Students should be able to:
no verbs chosen yet
Pick one or more verbs — they set the level of thinking — then say what students will do it to, and in what situation.
3. What should the interface look like?
Describe what students see on screen: layout, colours, tone, what is where, what happens after each action.
The clearer you are about the interface, the less ChatGPT has to guess — and the less you will need to restyle later.
4. Choose a format
Each format already carries its full description — mechanics, timing, feedback — into the prompt. Nothing else to fill in.
Written into every prompt: RMIT's AAA
Whichever format you pick, the generated prompt instructs ChatGPT to design the activity so that it is:
Active — students act at every step (decide, sort, justify, predict); no screen where they only read.
Authentic — situations, names and numbers come from real practice in your field, not textbook abstractions.
Applied — the concept is used to solve or judge something, and feedback explains how it applied.
You will see this as a labelled block in your prompt. Keep it — it is what stops ChatGPT defaulting to a recall quiz.
Why describe the interface before you build?
ChatGPT produces a much better starting point when it knows the learning goal, how the student interacts, and what the screen should look like — the alternative is three rounds of restyling.
ChatGPT
Next: build and refine it in ChatGPT.
Use this as your starting prompt in chatgpt.com. Then improve it one change at a time: content, interaction, feedback, accessibility, visual design.
01 · CopyCopy your starting prompt below.
02 · PastePaste it into a new chat in ChatGPT and send.
03 · SaveCopy the code, paste into Notepad / TextEdit (plain text), save as my-activity.html.
04 · RefineOpen it in your browser. Tell ChatGPT what to change — one thing at a time.
Your activity is one .html file. In about five minutes you can have it sitting inside a Moodle page, next to your instructions, with a fallback link for anyone whose browser blocks the frame. Follow the four steps in order — the example alongside each step shows exactly what you should be seeing.
Before you upload — a 60-second check
✓One file, no external libraries. Open it with the Wi-Fi off. If it still works, it is self-contained.
✓Content checked by you. Every question, distractor and feedback line verified before students see it.
✓Sensible file name. Lower-case, no spaces: week5-cashflow-quiz.html, not Final version (2).html.
1Turn editing on and add a File resource
In your Moodle course, click Turn editing on. Go to the section where you want the activity to appear and click Add an activity or resource. Select File from the list.
IN MOODLE
My Moodle ACCT1234 Financial Accounting
+ Add an activity or resource
2Upload your HTML file
Give the resource a name (e.g., "Week 5 Cash Flow Quiz"). Under the Select files section, drag and drop your .html file, or click to upload it.
IN MOODLE ADDING A NEW FILE
Adding a new File
?? week5-cashflow-quiz.html
3Set the display to Embed
Scroll down to the Appearance section and click to expand it. Change the Display dropdown from "Automatic" to Embed. This tells Moodle to show the activity directly on the page instead of forcing students to download it.
IN MOODLE APPEARANCE SETTINGS
Appearance
Display:
4Save and test
Scroll to the bottom and click Save and return to course or Save and display. Click on the resource to ensure it loads properly. Your interactive activity is now ready for students!
To update the activity later: You can edit the File resource, delete the old .html file, and upload the new one with the same name.
IN MOODLE SAVED RESOURCE
Week 5 Cash Flow Quiz
Your activity runs here, inside the page.
Two other places it can live
An .html file can also sit in OneDrive or SharePoint for sharing with colleagues, or be handed to students as a download. Neither route tracks completion or marks; for the classroom uses in this workshop, that is not needed.
Stage 04 · Feedback & Q&A
What will you build next?
Your feedback helps us understand where vibe coding can support teaching and where more guidance is needed.
How useful was the workshop?
1 = Not useful · 5 = Very useful
How confident are you now that you could build something for your course?
Same scale as the poll at the start of the session.
What would you like to try next?
Thank you. Your feedback has been recorded.
Questions?
What worked? What was difficult? What would you like to build for your students?
ChatGPT
Keep building after today.
ChatGPT is available to all RMIT staff at chatgpt.com. Join the vibe coding community of practice to share what you build and see what colleagues are making.
Stage 05 · Useful materials
Game mechanics you can ask ChatGPT for, by level of thinking.
Every one of these can be built as a single .html file. Choose the level of thinking you want first, then the mechanic — and put the name and the one-line description into the Goal of your prompt. Adapted from the mechanics list of the PolyU Educational Development Centre.
REMEMBERING7 mechanics
Learner verbs: recall, recognise, list, order
Flashcard memory matchFlip two cards at a time to pair terms with definitions or images.
Speed bucket sortTiles fall from the top; drag each into its labelled category before it lands.
Boss-battle triviaCorrect recall answers deal damage to a boss; wrong ones cost health.
Definition fill-in-the-blankType or drag the missing key word into an incomplete statement.
Sequence sorterDrag scrambled steps or events into the correct order.
Whack-a-factTap the correct target as items pop up, before they disappear.
Interactive crosswordSelect a clue and type the exact vocabulary word into the grid.
Category matrixDrag items into a two-axis grid, e.g. cause/effect × short/long term.
Process-flow repairA flowchart with wrong or scrambled steps; swap components to fix it.
Evidence balance scaleDrag evidence onto a scale; the beam tilts for and against a claim.
System hierarchy deconstructorClick a system to break it down into its sub-components as a tree.
EVALUATING7 mechanics
Learner verbs: judge, critique, check, defend
Rubric judgeGrade a work sample with rubric sliders and justify the mark.
Fallacy & bias detectiveHighlight the fallacies or biases in a passage and rate reliability.
Solution stress-testerDrag stress factors onto competing solutions and justify the winner.
Source credibility auditorSort sources into credibility tiers by credentials and method.
Priority trade-off balancerAllocate a limited budget across options and defend the choices.
Standard compliance auditorFlag violations against a guideline and choose corrective steps.
Claim strength meterWeigh supporting and conflicting evidence to rate a hypothesis.
CREATING7 mechanics
Learner verbs: design, invent, formulate, compose
System blueprint architectAssemble modular components on a grid to meet target conditions.
Concept fusion engineDraw random concept cards and combine them into a novel solution.
Hypothesis formulatorAssemble a new hypothesis from data points with a sentence builder.
Alternative scenario builderChange a system's founding variables and map the what-if outcomes.
Modular proposal composerCompose an action plan from goal, method and contingency blocks.
Synthesis mind-mapperReconcile conflicting perspectives into one integrated framework.
Rule-set synthesiserDesign the rules of a system, then run a simulation to see how they perform.
How to use this list in a prompt
“Build a Category matrix: students drag items into a two-axis grid (cause/effect × short/long term). Use these items: … Feedback names the axis they got wrong.” Then add the usual constraints: one file, no libraries, keyboard accessible, readable on a phone.
Stage 06 · Advanced materials
When one file is not enough: designing a simulation lab.
Everything in this workshop fits in a single .html file. Some ideas outgrow that — a live model with analytics, accounts, an AI opponent. This section is drawn from a research paper From Knowing to Doing: Design Propositions for Simulation-Based Learning Across Feedback Paradigms (Pham, Nkhoma and Le, 2026): a design recipe with its evidence base, what building a full platform took, and the judgements that stayed human.
1. The five-step design recipe — and where each step comes from
Each step answers to a body of evidence, not to preference. The recipe applies just as well to a single-file activity.
Step
What it means
Evidence
1
Pick one misconception
Not a topic — a specific, documented student confusion.
Procedural fluency and conceptual understanding are distinct; target the gap between them (Hiebert & Lefevre, 1986).
2
Find the relationship behind it
What does the formula hide? That is your content.
Understanding is constructed by acting on relationships, not by receiving them (Piaget, 1952; Vygotsky, 1978).
3
Make it a picture
The chart is the answer; the number is a footnote.
Externalising relational structure aids understanding; offloading computation frees working memory (Mayer, 2009; Sweller, 1988).
4
Make it instant
No submit button — every change updates everything, immediately.
Feedback is among the strongest influences on learning when task-focused and timely (Hattie & Timperley, 2007; Nicol & Macfarlane-Dick, 2006).
5
Start simple, let them add
Minimal default first; complexity is opt-in, not default.
Scaffolding extends what a learner can accomplish unaided (Wood, Bruner & Ross, 1976).
The through-line: authentic learning asks students to act on knowledge in realistic contexts. Earlier work extended this with external formative feedback — feedback arriving from outside the teacher–student pair (Villarroel et al., 2018; Pham et al., 2021). Simulation platforms make that source a chart, a compounding consequence, or an AI opponent.
2. How the capability was built: self-teaching with AI
Starting assets were discipline knowledge and pedagogical instinct — not programming.
1Plain-English briefs
Each module began as a one-page description of the misconception and what the student should see — the five-step recipe, written down.
2AI coding assistants
Conversational iteration: "make the curve respond to the slider", "hide advanced controls by default". The same refine loop you used today.
3Self-taught plumbing
Connecting a database for analytics, linking APIs and keys, configuring deployment, reading error messages.
4Colleague walkthroughs
Expert testers found the first interface overwhelming → a progressive-disclosure redesign. No AI flagged this.
A learnable curve: weeks of tinkering, not years of programming.
3. The four-step pipeline — and what each stage really takes
1Ideation & architecture
Conversational AI (in RMIT: ChatGPT)
Turn the brief into a component structure, data model and interaction plan — before any code. Fast and creative; the AI is a strong design partner, but you decide what is pedagogically right.
Low effort
2Development
Agentic coding IDE
Generates and edits the code from the brief, iterated conversationally. Expect to read code you did not write and to describe bugs precisely.
Moderate
3Data & backend
Managed database
Tables, keys, row-level security, analytics — and, for anything with accounts, user state. The steepest step, where most first-timers stall.
Budget a weekend
4Deployment
Static hosting
Push the repository, get a live URL in minutes. Near one-click; only environment variables and API keys need care.
Low effort
A note on toolsInside RMIT, ChatGPT is the sanctioned place to start and the only tool you need for everything in this workshop. The external tools used in the original platform (coding IDEs, databases, hosting) sit outside University agreements — check with ITS and Learning & Teaching before putting any course or student data through them.
4. What stays human: checks only the discipline expert can run
Is the model right?
A constant-cost WACC curve is impossible in theory — the designer, not the AI, knows costs must respond to leverage.
Does the model behave as theory says?
The SML plots the asset on the line by construction — deciding that this shows equilibrium, not a bug, is a disciplinary judgement.
Does the interface overwhelm?
Colleague walkthroughs caught what no AI flagged: the full interface was too much at first sight.
What must students be told?
Every model simplifies; deciding what to disclose is disciplinary honesty.
AI removes the coding barrier — not the expertise.
Source: Pham, Nkhoma and Le (2026). From Knowing to Doing: Design Propositions for Simulation-Based Learning Across Feedback Paradigms. Working Paper, RMIT University. Happy to sit with you for your first build.