Do you want to create interactive notes like SCORM package but using Google Site as the platform? You do not need to use LLMs or Elearning unlike SCORM package.
These are the steps that I used:
- Generate HTML code. You can use Claude, ChatGPT or Gemini AI to generate the HTML code.
- Copy the HTML code and paste it in Google Site. <Embed>
- To share the interactive site with your students, make sure you use the appropriate setting [Published site -> Public]
Here is an editable prompt to generate HTML code using ROTAFA format that you can copy-and-paste to Claude or ChatGPT or Gemini AI (better use Gemini Pro – UTM account).
R — Role
Act as an experienced instructional designer, adult educator, educational content creator and front-end developer. Apply adult-learning principles, inclusive pedagogy, cognitive scaffolding and accessible web-design practices.
O — Objective
Create an engaging, self-paced instructional webpage that helps learners understand [Add course or module topic] and achieve these learning outcomes:
- [Learning outcome 1]
- [Learning outcome 2]
- [Learning outcome 3]
The learning experience must remain understandable to beginners while providing sufficient intellectual depth for learners with an educational or professional background.
T — Task
Develop the complete instructional content and functional webpage. Include:
- A concise introduction explaining the topic’s relevance.
- Clearly stated learning outcomes.
- Well-organised notes divided into short, manageable sections.
- Plain-language explanations of technical terms.
- Relevant examples, analogies or brief scenarios.
- “Key point” boxes highlighting essential ideas.
- A short summary at the end of each major section.
- [Add number] multiple-choice questions, each with four plausible options and only one correct answer.
- Immediate feedback explaining why the selected answer is correct or incorrect.
- One or two [You can change the number] open-ended reflective questions that connect the topic with learners’ experiences or practice.
- A final section containing suggested answers or guidance for self-review.
- References for factual or theoretical content, using [APA 7th/other] style.
Ensure that the questions assess understanding and application, rather than simple recall alone.
If the course topic, learning outcomes, duration or assessment level has not been provided, ask me concise clarification questions before generating the webpage.
A — Audience
The learners range from their 20s to their 60s. Some have formal educational or professional backgrounds, while others have little or no background in education. [You can change the audience to suit with the course that you are teaching]
Use respectful, inclusive and non-patronising language. Do not assume prior knowledge. Introduce concepts progressively, moving from foundational explanations to practical application. Avoid unnecessary jargon and explain unavoidable terminology when it first appears.
F — Format
Produce one complete, self-contained HTML document suitable for embedding in Google Sites through Insert → Embed → Embed code.
Technical requirements:
- Place all HTML, CSS and JavaScript in one code block.
- Use semantic HTML with clear heading levels.
- Make the page responsive for desktop, tablet and mobile screens.
- Use accessible labels, keyboard-friendly controls and visible focus indicators.
- Maintain sufficient colour contrast and readable font sizes.
- Use lightweight vanilla JavaScript only.
- Do not use external libraries, frameworks or assets.
- Make the multiple-choice questions interactive and display feedback without reloading the page.
- Include a “Reset answers” button.
- Return the finished HTML code only, without explanatory text outside the code block.
A — Additional Requirements
Use a minimalist educational design with:
- Soft, calming colours such as muted blue, sage green, warm cream and pale lavender.
- Generous white space and restrained visual decoration.
- A clean sans-serif font stack.
- Consistent cards, buttons and section spacing.
- A maximum content width that supports comfortable reading.
- Subtle transitions that do not distract learners.
- No flashing elements, autoplay media or excessive animation.
Course details:
- Course title: [Insert title]
- Topic or module: [Insert topic]
- Learning duration: [Insert estimated duration]
- Language: [Insert language]
- Academic level: [Insert level or “mixed”]
- Number of MCQs: [Insert number]
- Relevant context or discipline: [Insert context]
- Content or references to use: [Paste source material, if applicable]
Do not fabricate references, statistics or theories. If reliable source material is required but unavailable, mark the affected section clearly for instructor verification.
You want to see an example?
This is an example of Google Site for a short course that I have to conduct with outsiders (non UTM students or staff) who cannot get accessed to our eLearning.
Additional tips:
- If you use Claude, to ensure the information of your interactive note is based on facts or have references, upload your class notes, ebook or relevant materials in Project (Folder). You can also ask Claude to add or use information based on valid references such as journals etc.
- If you use Gemini AI or ChatGPT, to ensure the information of your interactive note is based on facts or have references, upload your class notes, ebook or relevant materials (click + button) and write the prompt in the chatbox. Double check that you have uploaded the materials and add another statement in your prompt “Only use information from the provided/uploaded materials ONLY”. This is to reduce “hallucination”.














