RMIT University Vietnam
Learning & Teaching · Vibe Coding for Education Built with Val – RMIT's AI virtual learning assistant
Built with Val – RMIT's AI virtual learning assistant.

Val is available to all RMIT staff and students. Your prompts, files and generated code stay inside the University — no personal AI accounts needed.

Open Val → val.rmit.edu.au

From teaching idea to interactive tool.

Describe what you want in plain language. Val 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. Val turns the description into a working interactive activity — one self-contained .html file.

EXAMPLE PROMPT — TYPED INTO VAL
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.
Try it yourself in Val
Generated in Val · one prompt
Interest Rate Challenge
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.

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 Val

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 Val.

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 Val 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 Val 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 Val defaulting to a recall quiz.

Why describe the interface before you build? Val 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.

Next: build and refine it in Val.

Use this as your starting prompt in val.rmit.edu.au. 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 Val and send.
03 · SaveCopy the code, paste into Notepad / TextEdit (plain text), save as my-activity.html.
04 · RefineOpen it in your browser. Tell Val what to change — one thing at a time.
Open Val →
Stage 03 · Canvas

How to embed your design into Canvas.

Your activity is one .html file. In about five minutes you can have it sitting inside a Canvas page, next to your instructions, with a fallback link for anyone whose browser blocks the frame. Follow the seven 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.

1Upload the file to your course Files

In your Canvas course, click Files in the left-hand course menu, then the blue Upload button at the top right. Choose your .html file. Keep it at the top level of Files, or in a folder called activities — be consistent so you can find it next semester.

What you should see: the file in the list with a green tick (published) and the type “HTML document”. If the icon is grey, click it and choose Publish — students cannot open an unpublished file.

IN CANVAS

RMIT Canvas › ACCT1234 Financial Accounting
Home
Announcements
Modules
Pages
Files
Grades
Files + Folder  ⬆ Upload
📄 week5-cashflow-quiz.html HTML document
📄 week3-terms-matching.html HTML document
📁 lecture-slides Folder

2Open the file's preview and copy two numbers

Click the file name. Canvas opens a preview. Now look at your browser's address bar. The address contains the two numbers you need: the course ID after /courses/ and the file ID after /files/. Write both down, or leave the tab open.

The course ID is the same for every file in the course. The file ID is different for each file. Your numbers will not be the ones in the example — the pattern is what matters.

YOUR BROWSER'S ADDRESS BAR

https://rmit.instructure.com/courses/123456/files/78901234
COURSE ID 123456   the number after /courses/
FILE ID 78901234   the number after /files/

3Generate your embed code

Type the two numbers into the generator. Set a height that fits your activity — 600 to 700 px suits most quizzes and games; a tall worked example may need 900. You can change it later. Click Generate, then Copy code.

What the code does: the <iframe> shows your file inside the page. The <p> underneath is a plain link to the same file that opens in a new tab — keep it. It is the fallback for phones, for anyone using a screen reader, and for the day a browser update blocks the frame.

4Open the Canvas page, in edit mode

Go to Pages, open the page for that week and click Edit. First write the instruction your students need, in the normal editor — one or two lines: what to do, how long it takes, what happens afterwards. Then put the cursor on a new line where the activity should appear.

Example instruction: “Before Tuesday's tutorial, complete the quiz below (about 8 minutes). Note which question you got wrong and why — we will start the tutorial with those.”

IN CANVAS — PAGE EDITOR

Week 5 – Cash flow Edit
BIUA▾🔗🖼📎
Before Tuesday's tutorial, complete the quiz below (about 8 minutes). Note which question you got wrong and why — we will start the tutorial with those.

← activity goes here
</>

5Switch to the HTML editor and paste

At the bottom right of the editor box is a small </> icon (“Switch to raw HTML editor”). Click it. The page turns into code. Scroll to the end — just after your instruction text — and paste the code you copied in step 3. Click </> again to return to the normal view.

If you see the code itself as text on the page, you pasted while still in the normal editor. Undo, click </>, and paste again.

IN CANVAS — RAW HTML EDITOR

Week 5 – Cash flow HTML editor
<p>Before Tuesday's tutorial, complete the quiz below (about 8 minutes). Note which question you got wrong and why — we will start the tutorial with those.</p> <iframe src="/courses/123456/files/78901234/preview" width="100%" height="650" title="Week 5 cash-flow quiz"></iframe> <p><a href="/courses/123456/files/78901234/download?download_frd=1" target="_blank">Open “Week 5 cash-flow quiz” in a new tab</a></p>
</>

Highlighted: the code you paste from step 3.

6Save, then test as a student

Click Save. The activity should now run inside the page. Then click Student View (top right of the course) and open the same page. Do the activity as a student would: answer, read the feedback, try it on your phone through the Canvas app.

If the frame is empty: students are not stuck — the link underneath still opens the file. Check the file is published (step 1) and the file ID is right (step 2). If it still does not display, keep the link as the main route and tell Learning & Teaching; some browser or Canvas settings restrict embedded files.

IN CANVAS — SAVED PAGE, STUDENT VIEW

Week 5 – Cash flow 👓 Student View

Before Tuesday's tutorial, complete the quiz below (about 8 minutes)…

Week 5 cash-flow quizYour activity runs here, inside the page — questions, feedback, score.
Open “Week 5 cash-flow quiz” in a new tab

7Publish the page and add it to the week's module

Publish the page. In Modules, click + on the relevant week, choose Page, select your page and click Add item. Publish the item. Students now reach the activity through the week's module, with your instructions above it.

To update the activity later: do not touch the page. Go back to your Val chat, describe the change in one sentence, ask for the full updated file, then in Files upload the new file with the same name and choose Replace. The file ID stays the same, so the embed keeps working.

IN CANVAS — MODULES

Week 5 – Cash flow + ✓ Published
📖 Week 5 reading
🎞 Lecture recording
📄 Week 5 – Cash flow (page with quiz)

Green row: the page you just added.

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 05 · Useful materials

Game mechanics you can ask Val 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.

UNDERSTANDING4 mechanics

Learner verbs: compare, classify, summarise, distinguish

Venn sorterDrag items into overlapping circles by their traits — one set, the overlap, or neither.
Outlier finderClick the item that does not belong, then say what rule the others share.
Misconception mazeMove through a maze by opening only the doors marked with correct statements.
Paraphrase pathfinderRead a scenario and pick the correct summary to cross each obstacle.

APPLYING6 mechanics

Learner verbs: execute, use, select, modify

Category conveyor beltItems move along a belt; drag each into the right bin under a rule set.
Process-flow builderDrag scrambled action blocks into a flowchart that solves a procedure.
Scenario decision treeChoose an action at each stage and see the consequence unfold.
Rule-based runnerArcade runner: dodge obstacles by choosing the correct formula in time.
Concept web linkerDraw connection lines between floating concept nodes by their relationships.
System-balance slidersAdjust variables with sliders to bring a system into equilibrium.

ANALYSING4 mechanics

Learner verbs: differentiate, attribute, deconstruct, relate

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.

StepWhat it meansEvidence
1Pick one misconceptionNot a topic — a specific, documented student confusion.Procedural fluency and conceptual understanding are distinct; target the gap between them (Hiebert & Lefevre, 1986).
2Find the relationship behind itWhat does the formula hide? That is your content.Understanding is constructed by acting on relationships, not by receiving them (Piaget, 1952; Vygotsky, 1978).
3Make it a pictureThe chart is the answer; the number is a footnote.Externalising relational structure aids understanding; offloading computation frees working memory (Mayer, 2009; Sweller, 1988).
4Make it instantNo 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).
5Start simple, let them addMinimal 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: Val)

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, Val 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.