Forum Discussion
Week 2 - Group 2 Discussion
Here is my course:
https://share.articulate.com/EsVr0XGO0onVGepEWX8B5
1. Share 3 changes you made to the Rise AI Course Draft to improve learner engagement. Why did you make those changes to your project? Be specific!
- I added audio throughout the course for those auditory learners and bolded key terms for easy reading
- I added images using the AI image prompts and added the desired color hue to include in the image (tried to keep the images consistent throughout the course)
- I added an AI Avatar video to open the course and used the Branding feature
2. Which AI feature or capability was most valuable in your workflow, and why? Did anything about it surprise you?
- I found the AI audio generator helpful and easy to use
- The AI image prompt generator feature helped with getting the right images for the concept being discussed. I didn't realize how much better the images come out with the "right" AI image prompt.
3. What challenges did you face when trying to get AI to produce the results you wanted?
- Previewing the images and looking for extra hands or weird writing was time consuming and funny at times
I love the AI Avatar video! Could you share how you created it?
Hi Nicki,
It's part of Articulate Lab. Your account admin has to enable the feature. You get a certain amount of credit to create these. Here's a Knowledge Article with more information:
New in Labs: AI Avatars | E-Learning Heroes
This is great with the use of audio and consistent formatting. I agree on the AI images, I always write in the Custom description: "NO WORDS, PHRASES, or TEXT in the picture". See if that helps!
I really liked all the images that you included and how everything was on theme. Also, the use of the Labs features like the avatar video and branding were really cool to see in practice.
I loved your use of consistent graphic design and style throughout the course. The green colors were very soothing and calming.
Your AI avatar video was very cool - great use of the newer AI feature.
The confetti popping was great - would love to know how you did that - just an AI video?
The only thing I could think of to make the course stronger would be to add some scenarios (but I didn't do that in my own course either).
I noticed you used a lot of audio. Do you normally use audio in Rise? We typically do not use it as it makes for more rapid and cheaper development for our clients. If they want audio they usually want the text to animate in with the audio which can't be done in Rise.
Well done - beautiful course!
Thank you all for your feedback. The confetti block was a code I saw on Heroes. Here's the code. Just copy and paste it into a code block. If you want to change any of the colors, you'll have to know a little html to change those in the code.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Confetti</title>
<!-- Google Fonts: Load only the two fonts used in :root below.
Common Rise theme fonts for reference:
Be Vietnam Pro, Cormorant, DM Sans, Inter, Lato, Lora, Lustria,
Maitree, Maven Pro, Merriweather, Montserrat, Open Sans, Poppins,
Raleway, Roboto, Roboto Slab -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Lato:wght@400;700amp;display=swap" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/confetti.browser.min.js"></script>
<style>
/* === CSS VARIABLES === */
:root {
/* Typography — Change these to match the Rise course theme */
--heading-font: 'Lato', sans-serif;
--body-font: 'Lato', sans-serif;
--heading-size: 18pt;
--body-size: 12pt;
/* Colours */
--primary-color: #198754;
--primary-hover: #157347;
--text-color: #333333;
--bg-color: transparent;
}
/* === BASE RESET === */
*, *::before, *::after { box-sizing: border-box; }
/* === RISE IFRAME COMPATIBILITY ===
This block is a legitimate fixed-height exception — the confetti
canvas must fill the full iframe. Body height is set explicitly
by applyConfig() and reported to Rise via notifyRiseHeight(). */
html {
background-color: transparent;
}
body {
margin: 0;
padding: 0;
width: 100%;
font-family: var(--body-font);
font-size: var(--body-size);
color: var(--text-color);
background-color: transparent;
overflow: hidden;
}
/* === TYPOGRAPHY CLASSES === */
.rise-heading {
font-family: var(--heading-font);
font-size: var(--heading-size);
line-height: 1.2;
}
.rise-body {
font-family: var(--body-font);
font-size: var(--body-size);
line-height: 1.5;
}
button {
font-family: var(--heading-font);
}
/* === ACCESSIBILITY: FOCUS STATES === */
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
[tabindex]:focus-visible {
outline: 3px solid var(--primary-color);
outline-offset: 2px;
}
/* === REDUCED MOTION ===
When the user prefers reduced motion, confetti is suppressed entirely
in fireConfetti(). This CSS rule handles any transition/animation
on other elements in the block. */
MeDia (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
}
/* === COMPONENT STYLES === */
/* Canvas fills the iframe — fixed-height block, so vw/vh are safe here */
#confettiCanvas {
position: fixed;
top: 0; left: 0;
width: 100vw;
height: 100vh;
pointer-events: none;
z-index: 999;
}
.container {
position: relative;
z-index: 1000;
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 100%;
text-align: center;
padding: 20px;
}
/* Trigger button — min 44px touch target */
.trigger-button {
background-color: var(--primary-color);
color: white;
border: none;
padding: 14px 28px;
min-height: 44px;
font-family: var(--heading-font);
font-size: 1.1rem;
font-weight: 600;
border-radius: 8px;
cursor: pointer;
transition: transform 0.1s ease, background-color 0.2s ease, box-shadow 0.2s ease;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
display: none;
user-select: none;
}
.trigger-button:hover { background-color: var(--primary-hover); }
.trigger-button:active { transform: scale(0.95); }
/* Screen-reader only utility */
.sr-only {
position: absolute;
width: 1px; height: 1px;
padding: 0; margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border-width: 0;
}
</style>
</head>
<body class="rise-body">
<canvas id="confettiCanvas"></canvas>
<main id="app">
<div class="container">
<button id="confettiBtn" class="trigger-button">
Launch Confetti
</button>
<div id="announcer" class="sr-only" aria-live="polite"></div>
</div>
</main>
<script>
/* =========================================================
CONFIGURATION — Edit values here. Do not edit code below.
========================================================= */
const CONFIG = {
// --- Identity ---
APP_TITLE: 'Confetti', // Sets the browser/tab title
// --- Typography (must match fonts loaded in <link> above) ---
HEADING_FONT: 'Lato',
BODY_FONT: 'Lato',
// --- Theme ---
PRIMARY_COLOR: '#198754', // Button colour and focus rings
PRIMARY_HOVER: '#157347', // Button hover colour
// --- Rise Completion ---
RISE_COMPLETION: true, // Set false to disable completion signal
COMPLETION_TRIGGER: 'onFire', // 'onFire' = fires when confetti launches
// --- Block height ---
// This block is fixed-height. Set this to match the manual height
// you set in Rise (in pixels). Default 200px works for a button-only block.
BLOCK_HEIGHT: 200,
// --- Behaviour ---
AUTO_PLAY: false, // Fire confetti automatically on load
SHOW_BUTTON: true, // Show the launch button
REPEATS: 3, // Number of confetti bursts
REPEAT_INTERVAL: 1000, // Milliseconds between bursts
// --- Sound ---
ENABLE_SOUND: true, // Play a sound on fire
SOUND_VOLUME: 0.3, // Volume 0–1
// URL to an audio file. Leave empty to use the built-in synth ding.
SOUND_URL: 'ENTER_AUDIO_URL',
// --- Confetti appearance ---
PARTICLE_COUNT: 150,
ANGLE: 90,
SPREAD: 80,
START_VELOCITY: 45,
GRAVITY: 1.0,
SCALAR: 1.2,
ORIGIN_X: 0.5, // 0 = left edge, 1 = right edge
ORIGIN_Y: 0.5, // 0 = top, 1 = bottom
COLORS: ['#7b1642', '#b44811', '#37c6f4', '#feca06', '#24809e'],
SHAPES: ['circle', 'square'] // 'circle' | 'square' | 'star'
};
/* =========================================================
APPLICATION LOGIC — Do not edit below this line.
========================================================= */
let completionSent = false;
let confettiInstance = null;
let isFiring = false;
let audioCtx = null;
/**
* Syncs CONFIG values to CSS variables and DOM.
* Also sets explicit body height so Rise can size the iframe correctly.
*/
function applyConfig() {
const root = document.documentElement.style;
root.setProperty('--heading-font', `'${CONFIG.HEADING_FONT}', sans-serif`);
root.setProperty('--body-font', `'${CONFIG.BODY_FONT}', sans-serif`);
root.setProperty('--primary-color', CONFIG.PRIMARY_COLOR);
root.setProperty('--primary-hover', CONFIG.PRIMARY_HOVER);
document.title = CONFIG.APP_TITLE;
// Fixed-height block — set body height explicitly so Rise receives
// the correct iframe size from notifyRiseHeight().
document.body.style.height = CONFIG.BLOCK_HEIGHT + 'px';
const container = document.querySelector('.container');
if (container) container.style.height = CONFIG.BLOCK_HEIGHT + 'px';
const btn = document.getElementById('confettiBtn');
if (btn) btn.style.display = CONFIG.SHOW_BUTTON ? 'inline-block' : 'none';
}
/**
* Reports the block's height to the Rise parent frame.
* For this fixed-height block the height is BLOCK_HEIGHT.
*/
function notifyRiseHeight() {
const height = CONFIG.BLOCK_HEIGHT;
if (window.parent && window.parent !== window) {
window.parent.postMessage({ type: 'setHeight', height: height }, '*');
}
}
window.addEventListener('load', notifyRiseHeight);
new ResizeObserver(notifyRiseHeight).observe(document.body);
/**
* Sends a completion signal to Rise. Fires at most once per session.
*/
function sendRiseCompletion() {
if (completionSent || !CONFIG.RISE_COMPLETION) return;
try {
window.parent.postMessage({ type: 'complete' }, '*');
} catch (e) {
// Silently fail — block may not be in an iframe
}
completionSent = true;
}
/* --- Audio --- */
function initAudio() {
if (!audioCtx) {
audioCtx = new (window.AudioContext || window.webkitAudioContext)();
}
if (audioCtx.state === 'suspended') audioCtx.resume();
}
function playDingFallback() {
initAudio();
const now = audioCtx.currentTime;
const osc = audioCtx.createOscillator();
const gain = audioCtx.createGain();
osc.type = 'triangle';
osc.frequency.setValueAtTime(880, now);
osc.frequency.exponentialRampToValueAtTime(1200, now + 0.05);
gain.gain.setValueAtTime(0, now);
gain.gain.linearRampToValueAtTime(CONFIG.SOUND_VOLUME, now + 0.02);
gain.gain.exponentialRampToValueAtTime(0.001, now + 0.5);
osc.connect(gain);
gain.connect(audioCtx.destination);
osc.start(now);
osc.stop(now + 0.6);
}
function playSound() {
if (!CONFIG.ENABLE_SOUND || CONFIG.AUTO_PLAY) return;
try {
if (CONFIG.SOUND_URL && CONFIG.SOUND_URL.trim() !== '') {
const audio = new Audio(CONFIG.SOUND_URL);
audio.volume = CONFIG.SOUND_VOLUME;
audio.play().catch(() => {});
} else {
playDingFallback();
}
} catch (e) {}
}
/* --- Confetti --- */
function setupConfetti() {
if (confettiInstance) return;
const canvas = document.getElementById('confettiCanvas');
canvas.width = window.innerWidth || 300;
canvas.height = window.innerHeight || CONFIG.BLOCK_HEIGHT;
confettiInstance = confetti.create(canvas, {
resize: true,
useWorker: false
});
}
async function fireConfetti() {
if (isFiring || !confettiInstance) return;
// Respect prefers-reduced-motion
if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) return;
isFiring = true;
let count = 0;
let soundPlayed = false;
const interval = setInterval(() => {
if (count >= CONFIG.REPEATS) {
clearInterval(interval);
isFiring = false;
return;
}
confettiInstance({
particleCount: CONFIG.PARTICLE_COUNT,
angle: CONFIG.ANGLE,
spread: CONFIG.SPREAD,
startVelocity: CONFIG.START_VELOCITY,
gravity: CONFIG.GRAVITY,
scalar: CONFIG.SCALAR,
origin: { x: CONFIG.ORIGIN_X, y: CONFIG.ORIGIN_Y },
colors: CONFIG.COLORS,
shapes: CONFIG.SHAPES
});
if (!soundPlayed) {
playSound();
soundPlayed = true;
}
count++;
}, CONFIG.REPEAT_INTERVAL);
if (CONFIG.COMPLETION_TRIGGER === 'onFire') sendRiseCompletion();
}
/**
* Waits until the iframe has real dimensions before setting up the canvas.
* Rise iframes can briefly report 0×0 on initial load.
*/
function checkReadyAndStart() {
if (window.innerHeight > 0 && window.innerWidth > 0) {
setupConfetti();
if (CONFIG.AUTO_PLAY) {
setTimeout(fireConfetti, 500);
if (CONFIG.COMPLETION_TRIGGER === 'onFire') sendRiseCompletion();
}
} else {
setTimeout(checkReadyAndStart, 100);
}
}
/** Entry point — runs after the DOM is ready */
function init() {
applyConfig();
const btn = document.getElementById('confettiBtn');
btn.addEventListener('click', () => {
initAudio();
fireConfetti();
});
checkReadyAndStart();
notifyRiseHeight();
}
document.addEventListener('DOMContentLoaded', init);
</script>
</body>
</html>
I also like to include the audio for users. I've had feedback that supervisors appreciate that we are looking out for visual and auditory learners by including a variety of presentation methods. The interactivity is also important. Finally, that you have the transcript visible on the opening is great for people to see, too.
Hi Annabel, your course in my favorite. What did you use to generate the talking avatar video?
Hi JekaterinaPr165​,
That's a feature in Articulate Lab. Your Articulate Admin would have to enable it. It works on credit. We get an initial number of credits and each video uses up your credits. See more info on how to use it here:https://community.articulate.com/discussions/labs/new-in-labs-ai-avatars/1256513
I like your use of colour in the images and overall design. Thanks for the confetti :)
The animation theming is really fun! I'm feeling inspired to try it out!
I did love the AI avatar video as well and starting out with that was a great hook. I like all the opportunities of engagement and the style of images you used. Love the green color that you used throughout as well.
