Start as a learner
A correct answer does not always reveal the reasoning behind it. Begin with a prediction, then use a model to make the thinking visible.
Before you begin: your workspace
Use a laptop or desktop, an upcoming lesson, and your district-approved teacher Gemini account with Canvas available. This course and its included examples run on Cloudflare, so you do not need Google Sites access to explore them. Open Google Sites only when you reach the student-publishing step. Optional: Google Forms for collecting student reflections.
Teachers use AI to build. Students use the finished activity on Google Sites, without needing Gemini accounts. Keep student names, work samples, and identifying details out of AI prompts.
If Canvas is unavailable, complete the planning and testing steps with the downloadable starter. Ask your district about teacher access before using a different account. Allow extra time for account setup or troubleshooting.
Which apple offer costs less per pound?
Offer A: 3 pounds for $6. Offer B: 4 pounds for $10. Assume the same kind and quality of apples.
3 pounds for $6
$6 ÷ 3 lb = $2 per pound
4 pounds split into equal groups
Mathematical model: each offer has one fixed price per pound, with no fees or discounts. Changing the slider creates a new offer; it does not report real store prices.
Visual word bank and language supports
$ ÷ lbUnit rate / tasa unitaria
A quantity for one unit. Here, dollars for one pound.
1 lbPer / por
For each one. “$2 per pound” means each pound costs $2.
$6Total / total
The cost of the whole offer.
Explain in words, a drawing, or a home language first.
“For one pound, A costs ___ and B costs ___. This shows ___.”
Check the mathematics after investigating
At the original prices, A is $2/lb and B is $2.50/lb. Both are $2/lb when B costs $8. B is cheaper per pound below $8. A lower total price alone is not enough to compare offers with different amounts.
Explore the examples on this site
Both activities open on the same Cloudflare site as this course. No Google Sites access is needed.
Change field strength and compare mobile chargesMath: Which offer is the better value?
Compare equal quantities and change the price
Optional Google Sites examples
Use these to see student-facing Google Sites pages when your account and network allow access. They are not required for this course.
- Chemistry: Charge Carriers on Google Sites
- Math: Chance Detectives on Google Sites (a separate math example)
Build around the student’s idea
Vibe coding means describing what you want an AI tool to build, trying the result, and guiding revisions in everyday language. Your instructional judgment drives the process.
A misconception
“The offer with the lower total price always has the lower price per pound.”
This gives you a specific idea students can test.
A barrier to showing understanding
A learner understands the comparison but does not yet know what “per” means in English.
Use language supports before assuming there is a conceptual misconception.
The learning sequence
- Predict: surface the idea and the reason behind it.
- Investigate: change or compare something that matters to that idea.
- Explain: name a specific observation and connect it to the concept.
- Revise: return to the original idea and try a new case.
Keep the thinking; reduce the language barrier. Add a visual word bank, short directions, optional translations, sentence frames, and ways to explain through a drawing or oral discussion. Check translations with a knowledgeable speaker. Do not make an English-only writing task the only evidence of understanding.
Check your design judgment
Which interaction best addresses the unit-rate misconception?
Chemistry design connection
One possible idea to test is “solid salt cannot conduct because it has no charged particles.” A model can compare fixed ions in a crystal with mobile ions in solution. Ask students to distinguish having charged particles from having particles that can move through the material.
In a simple fixed-condition model, increasing electric field strength can increase current without changing the material’s conductivity. Show model limits explicitly; a classroom model is not a new laboratory observation or a model of lightning at every scale. Verify the science against your adopted curriculum before classroom use.
Build, test, and revise in Canvas
Follow this text-based demonstration in your own Gemini window. Every step includes the action, what to look for, and a way to recover.
- Open Gemini with your approved teacher account. Choose Canvas in the prompt tools. Paste the example prompt below and send it.
- Try the app preview. Make a prediction, change the price, and explain the result. If the preview shows code instead of an activity, ask for a runnable single-file HTML app.
- Test the mathematics. A should be $2/lb. B should be $2.50/lb at $10 and $2/lb at $8. B becomes cheaper below $8.
- Request one revision. Use the revision prompt below, try the app again, and check that the original mathematics still works.
- Inspect the Code view. Request a complete single HTML file if you see React imports, multiple files, or external dependencies. Keep the complete source for the Google Sites step.
Demonstration prompt
Demonstration revision
No Canvas access, or a blank preview?
Use the working starter below to follow the same test-and-revise process. You can inspect and save its code now, then customize with Canvas when access is available. Do not enter student information to resolve an access issue.
If downloads are blocked in an embed, use “Show starter code,” select all, and copy into a plain-text file named unit-rate-starter.html.
Choose one idea to investigate
Use an upcoming lesson. Keep the first prototype small: one learning goal, one misconception, and one meaningful interaction.
Describe patterns in student thinking without names or identifiable work. These notes feed your build prompt.
Turn your plan into a working activity
Spend the first 10 minutes getting the core interaction to work. Use the next 10 minutes for one focused revision.
Regenerating replaces edits in this prompt. Save or copy your edited version first. Replace any bracketed placeholders before sending it.
First 10 minutes: make the interaction work
- Open a new Canvas and send your prompt.
- Try every control and make one prediction as a learner.
- Check a known case using your trusted source or worked solution.
- Save the complete HTML source before requesting changes.
Next 10 minutes: improve one thing
Choose the biggest barrier to learning. Copy a prompt below and add the specific problem you observed.
Try to find what could confuse a learner
Take six minutes to test, then four minutes to revise one important issue. If you are working alone, use a fresh preview and follow the student directions literally.
Test as a student
- Use Tab, Enter, and the arrow keys. Can you reach and use the controls?
- Try the lowest and highest values, an equal case, and reset.
- Choose a plausible wrong answer. Does feedback help you reason?
- Zoom to 200% and try a narrow window.
- Use the word bank or sentence frame. Does it support an explanation without giving it away?
Check as a teacher
What would count as evidence of learning?
“The student got the right answer” is a start. Look for a specific comparison, a correct relationship, and an explanation of how the original idea changed or was strengthened.
Example of an explanation to look for
“I first compared the two totals. At $7, Offer B still costs more in total than A, but four pounds for $7 is $1.75 per pound. That is less than A’s $2 per pound. The total alone cannot tell me which offer has the lower unit price.”
Follow up with a new case, such as 5 pounds for $9 versus 3 pounds for $6. Ask students to explain rather than only calculate. The unit prices are $1.80 and $2.00 per pound.
Put the activity where students can use it
The course and examples stay on Cloudflare. For your own student activity, learn how to embed the finished HTML in Google Sites and collect reflections with a separate, approved Google Form.
If you cannot access Google Sites: finish your prototype and save its HTML. You can complete the rest of this course without Sites. Record the publishing step you need help with, or work with an approved site owner to host the activity on Cloudflare. Confirm student access before classroom use.
Publish the student activity in Google Sites
- In Canvas, open Code. Ask for the entire app as a single HTML file with inline CSS and JavaScript. Copy all of the source, without Markdown code fences.
- In Google Sites, open a page and choose Insert → Embed → Embed code. Paste the HTML, choose Next, then Insert. CSS needs
<style>tags; JavaScript needs<script>tags. - Resize the embed so the controls and reflection prompts are visible. Use Preview for desktop and phone layouts.
- Choose your district-approved published-site audience, then Publish. Share the published page URL.
- Test that URL using a permitted student account or ask a colleague with equivalent access to test it. Check both the activity and the separate Form. An editor’s preview does not confirm student access.
- After revising in Canvas, replace the embed code and publish the Google Site again. Changes in Canvas do not automatically update the embed.
Google documents HTML/CSS/JavaScript embedding, but school policies and generated code can affect the result. Embedding help · Publishing and access help
If the embed is blank, clipped, or asks for an AI account
- Blank: recopy the complete source. Ask Gemini to remove React, imports, external scripts, network requests, and build steps. Request one self-contained HTML file.
- Clipped: increase the embed height and width. Ask Gemini for responsive content that does not rely on a fixed screen height.
- AI sign-in: make sure you embedded the actual HTML rather than a Gemini shared-app link.
- Blocked by school policy: use the downloadable source and ask your district about approved embedding. Do not bypass access controls.
- Copy/download blocked: select the code text manually. On Windows use Ctrl+A/C while the code field is focused; on Mac use Command+A/C.
Collect reflections with Google Forms
The activity itself does not send students’ typed responses anywhere. Create a Form in your approved school account, add the questions, set responder access, and publish the Form. Then place it beneath the activity using Insert → Forms, or add its responder link.
Without names in responses
Turn email collection off. Omit names, student IDs, and file uploads. Review responder access and any setting that requires sign-in. “Anonymous” here means the teacher’s response record does not deliberately collect identity, not that Google or the school cannot associate activity with an account.
School-account responses
Use Settings → Responses → Collect email addresses → Verified when approved. Responders confirm their Google account email. Set responder access to the intended school audience and test it.
For both options, use two separate Forms and two clearly labeled links. A question inside one Form cannot switch verified email collection on and off for individual responses. Turn off “View results summary” when responses should remain private. “Limit to 1 response” requires sign-in; sign-in alone does not necessarily record an email in responses.
Copy-ready student reflection questions
Create these as paragraph questions, except the confidence question (multiple choice). Offer an oral explanation, drawing, or teacher conference when appropriate. Do not enable file uploads just to collect drawings without reviewing the data implications.
Email collection help · Form responder access and publishing
Your first prototype is a starting point
Save your course progress, download your planning notes, and keep your complete HTML source. After classroom use, revise from what students actually say and do.
Your resource library
Prompts, a working starter, reflection questions, and publishing help in one place.
Prompt and planning toolkit
Download a plain-text reference with the build framework, revision prompts, testing checklist, Form questions, and sharing steps.
Working unit-rate starter
A complete student activity with predictions, an adjustable offer, visual vocabulary, and reflection prompts.
Your work from this course
The progress file restores your notes and checked steps. Planning notes are a readable reference. Neither is sent to a facilitator. Browser printing works best when the course is open as its own page.
If copy is blocked, click inside this field and select all text manually.
Official tool guidance
- Gemini Canvas: create apps, use Code view, and revise
- Google Sites: embed HTML and insert Forms
- Google Sites: publish and manage who can view
- Google Forms: response and email settings
- Google Forms: publish and share with responders
Tool steps checked October 5, 2026. Menus and school account access may differ. This course is an independent educator resource.
For the course host: publish on Cloudflare
The deployment ZIP contains the course and both included examples. Upload it to Cloudflare Pages using the direct-upload flow. Keep index.html, chemistry-charge-carriers.html, and unit-rate-starter.html together at the root. The course links to the example files on the same site. No build command is needed. Official Direct Upload guidance.
Google Sites links are optional examples of the student-publishing approach. The course does not depend on them. If you maintain a copy of an activity on Google Sites, replace its embed code and republish when you update the Cloudflare copy; the two versions do not synchronize automatically.
This course has no backend, analytics code, external libraries, or automatic saving. Responses remain in memory until the page closes; progress export is an explicit local file download. Hosting providers can maintain their own access logs. There is no central completion tracking.