Body
This article introduces the video tutorial on designing clear, visually distinctive alerts and banners in Moodle using generative AI (Microsoft Copilot) plus lightweight HTML. You’ll see how to turn plain notices into professional components, align them with institutional branding, and deploy them anywhere Moodle provides a rich-text editor. For additional, pre-made patterns, see BirdyOZ UI Elements: https://birdyoz.github.io/helpers/ui-elements.html.
What you’ll need
-
Access to Microsoft Copilot (web or in M365).
-
Editing rights in Moodle (to add a Text and media area, Page, Assignment, etc.).
-
A short piece of notice/alert text (e.g., policy update, deadline, study tip).
Watch the video (context)
The video walks through:
-
generating a basic alert with Copilot,
-
inserting HTML in Moodle,
-
improving the look using a BirdyOZ pattern, and
-
customizing width, corner radius, colors, and contrast.
Step-by-step tutorial
1) Draft your alert text
Write a concise message (title + 1–3 lines). Example:
2) Use generative AI (Copilot) to scaffold HTML
In Copilot, paste your text and prompt:
“Turn this into an eye-catching HTML alert for Moodle. Use semantic HTML, inline styles (no external CSS), an icon, good contrast, and responsive width. Include a bold heading and brief body text.”
Copy the generated HTML.
3) Insert HTML in Moodle
-
In your course, Turn editing on.
-
Add an activity or resource → Text and media area (or edit an existing one).
-
In the editor, click Show more tools ▾ and then Source code / HTML (</>).
-
Paste the HTML (remove any placeholder HTML already there).
-
Optional: Under Activity completion, choose Do not indicate activity completion (to avoid “Mark as done” on simple notices).
-
Save and return to course.
4) Improve the design with a BirdyOZ pattern
The Copilot output is functional but plain. For a more polished look:
-
Visit BirdyOZ UI Elements: https://birdyoz.github.io/helpers/ui-elements.html.
-
Choose a notice/alert pattern that suits your use case.
-
Copy the HTML structure and merge it with your alert text (you can ask Copilot:
“Adapt my alert content into this BirdyOZ pattern. Keep inline styles, ensure AA contrast, and make it 720–900px max-width with 12–16px padding.”)
-
Replace your Moodle HTML with the improved version and Save.
5) Customize to your institutional branding
-
Colors: Update background-color, border-color, and color to match brand hex values.
-
Corner radius & width: Adjust border-radius and max-width.
-
Iconography: Use inline SVG (aria-hidden) so it renders without external libraries.
6) Accessibility checks
-
Maintain 4.5:1 contrast for body text (3:1 for headings at ≥18.66px/14pt bold).
-
Don’t rely on color alone; keep an icon and a clear heading.
-
Mark decorative icons as aria-hidden="true".
-
Keep language succinct and avoid all-caps blocks.
Copy-and-paste prompts for Copilot
A. Starter (plain → HTML alert)
“Convert the text below into a clean HTML alert for Moodle with inline styles (no external CSS). Include: a bold title, short body, left icon (SVG), responsive max-width (820px), 16px padding, 12px rounded corners, and AA contrast.”
B. BirdyOZ enhancement
“Adapt my alert content into this BirdyOZ pattern (pasted below). Keep inline styles only, ensure headings and borders use the same brand green (#0F6D4F), and set max-width: 880px; border-radius: 14px;.”
C. Brand variants
“Create two variants: 1) outlined (white bg, green border), 2) filled (green bg, white text). Maintain accessibility and responsive spacing.”
More Generative AI Hacks for Course Development
Think this alert hack was cool? You haven’t seen anything yet. Dive into fast, practical ways to supercharge Moodle and your teaching workflows with generative AI.