Happy Birthday Mini Game
How I Built a Bright, Clicky Birthday Game for Rise 360 I wanted to make a birthday interaction in Rise 360 that felt a little more playful than a standard celebration graphic, so I built a custom HTML block for a colleague's birthday. It started as a colorful animated birthday screen with balloons, confetti, and a cake. Cute? Yes. But then I thought… what if it felt more like a mini game? So I turned it into a fast little “birthday grab” activity where goodies fall from the top of the screen and learners click them before time runs out. I added a score, timer, party meter, different fall speeds, and a win screen to make it feel more arcade-like. Cupcakes drift slowly, stars zip by faster, and the whole thing is packed with bright colors and motion. One of the biggest lessons was keeping the code simple enough to behave nicely inside a Rise 360 embed. Once we switched to a cleaner JavaScript approach for the falling items, everything clicked into place. It was a fun reminder that even a small custom block can add a lot of personality to a course. Sometimes a birthday shoutout can also be a mini interactive experience. Happy Birthday Mini GameWhat testers are saying...
I had way too much fun making this one. 😄 I wanted to build an interactive activity in Rise 360 for some systems training, focused on tester feedback about the claims experience. I had the content, but I wanted the interaction to feel a little more polished, a little more modern, and a lot less “wall of text.” So naturally... I teamed up with ChatGPT. We started with the basics: turning static content into an interactive experience inside a Rise 360 Code Block. Then I kept doing what designers do best — looking at it and saying, “Hmm... it needs more wow factor.” 😂 Together, we evolved it from a simple clickable layout into: ✨ a subtle animated background ✨ a more visually engaging dashboard-style experience ✨ interactive theme selection ✨ flip cards for “Voice of the Testers” ✨ a cleaner, more polished feel that still works as one self-contained code block in Rise 360 What I loved most was the back-and-forth. I could react to what I saw, ask for changes, push the design further, and shape the experience in real time. It felt less like “generate something for me” and more like co-creating with a very fast design partner who never gets tired of revision rounds. Honestly, it was kind of a blast. Curious how others are using AI as a creative partner in e-learning design. Are you using it to brainstorm interactions, write code, polish visuals, or all of the above? What testers are saying... #ELearningHeroes #Rise360 #InstructionalDesign #ELearning #LearningDesign #AIinLearningDesignInteractive Video Using Code Block
Why use a boring video player when you can roll out the red carpet? A quick how-to on wrapping your leadership videos in a cinematic branded experience — no coding experience required “Picture this: your learners open a Rise 360 course and instead of a bare MP4 sitting in a block, they’re greeted with a pulsing, glowing, cinematic launch screen that practically whispers ‘this is important.’ That’s the energy we’re going for.” The problem with plain video We’ve all done it. You drop a leadership video into a Rise 360 lesson and… it looks exactly like a video block. No branding. No context. Just a lonely play button floating there, hoping someone clicks it. Your executive recorded a heartfelt 3-minute message. It deserves better than a default video block. I didn’t write a single line of code (and that’s the point) Here’s the part that might surprise you: I’m not a developer. The entire HTML wrapper was built using ChatGPT. I described what I wanted — a branded launch screen, animated background, a polished play button, smooth state handling — and ChatGPT generated the code. I tweaked the colors and logo, and that was it. If you’ve ever thought “I’d love to do something like this but I don’t know how to code” — this is your sign. You don’t need to. You just need to know what you want and be able to describe it clearly. AI does the heavy lifting. What I asked ChatGPT for “Create a single HTML file that plays a video with a branded top bar showing my logo, an animated dark background with particles, a cinematic launch screen, and smooth play/pause/ended states.” The more specific you are, the better the result. Mention your brand colors, what text you want in the header, and how you want it to behave. Enter: the video wrapper A video wrapper is just a single HTML file that lives alongside your MP4. It loads the video, surrounds it with branded polish, and gives your learners a moment of “oh wow, this looks professional” before the message even starts. Here’s what mine includes — all living in one tidy index.html file: Branded top bar — Your logo and course title, front and center. Animated background — Subtle particles and light sweeps. Pure CSS — no libraries. Cinematic launch screen — A styled overlay before the video plays — sets the tone. Replay state — Handles play, pause, and ended states gracefully. How to set it up (it’s easier than you think) Describe what you want to ChatGPT Tell it your brand colors, what you want in the header, and how the video should behave. Ask for a single self-contained HTML file that references the video and logo by filename. Be specific — the more detail you give, the better the result. Assemble your project folder Put your three files together in one folder: index.html, your logo (SVG works great), and your MP4. They all need to live together — the HTML references the other two by filename, so they can’t be separated. Add a Code Block in Rise 360 and upload as a project In your Rise 360 lesson, add a Code block. Here’s the key: don’t use the paste option — use Upload Project instead. This lets you upload the entire folder so your HTML, logo, and video all get bundled together with their references intact. Pasting the HTML alone won’t work because Rise has no way of knowing about the video and logo sitting on your computer. Publish and enjoy the reactions Watch your stakeholders ask “wait, how did you do that?” and act like it was no big deal. The tech behind the magic The whole thing is plain HTML, CSS, and a tiny bit of vanilla JavaScript — no frameworks, no dependencies, nothing to install. The animated background is pure CSS keyframe animations. The state machine (paused → playing → ended) is about 60 lines of JS. The entire file is self-contained and loads instantly. And again — ChatGPT wrote all of it. My job was to describe the vision, paste in my logo filename and brand colors, and iterate a couple of times until it looked right. Pro tip The wrapper also handles the awkward “video file not found” state gracefully — it shows a friendly message instead of a broken player. Ask ChatGPT to include this and it’ll handle it automatically. Your learners will never see an ugly error. Give it a try Your learners deserve a first impression that matches the quality of the content. A video wrapper costs you maybe 10 minutes of prompting and delivers a noticeably more premium experience. Once you build one, you’ll use it on every leadership video forever. Life’s too short for boring video players. 🎥 Interactive Video Using Code BlockFree Download: Cinematic Stat Reveal for Rise 360
Over the past few months I've been combining my love of coding with Rise 360's new(ish) code block functionality — and I've ended up with a growing library of custom components I'm really proud of. I figured it was time to start sharing some of what I've built with the community. First up: the Cinematic Stat Reveal — a free download, on me. t's an animated component that makes key statistics actually land with learners, rather than just sitting flat on a page. Bold, clean, and designed to create one of those moments where a number genuinely stops someone in their tracks. ✅ No coding required to use ✅ Drops straight into any Rise 360 course ✅ Fully customisable to your content and brand Free Download in the files includes a guide on how to use and edit this block. Would love to hear how you use it and if you have any suggestions or things you'd like me to build, let me know! Happy building! 🎉Up-Updated "Reveal" codes
I’ve been experimenting with the original HTML code blocks included in Articulate 360’s built-in examples and wanted to share how far you can extend that base structure using GenAI to iterate and refine interactions. Starting with the default image-reveal index provided by Articulate, I used GenAI to progressively develop three new versions. I supplied my own images, created meaningful alternative text for screen readers, and introduced additional UX and accessibility improvements. Every version is fully tailorable if you want to adapt the formatting, colours, spacing or behaviour. The three examples are: Enhanced Image Reveal Grid Uses the original Articulate structure. Adds a hover zoom, a click-to-zoom state, and high-contrast purple letter tiles for accessibility. Fanned “Deck of Cards” Flip Interaction A dynamic fanned layout, more like a real card hand. Cards lift and reveal their letter on hover, flip on click, and reset if clicked again. Includes chevron navigation for easier cycling. Plain Flip Grid with Navigation A clean, accessible flip-card grid with navigation chevrons. Mirrors the deck behaviour but with a simplified layout. NOW WITH MORE EXAMPLES of what reveal styles can imagine! If you have suggestions, improvements or alternative approaches, I’d really love the feedback. And if you’d like to use or remix any part of this, feel free — I’d love to see what you create with it. Review360360 Images in Rise
Hey everyone! I've been experimenting with embedding 360° panoramic images directly into Rise using the Code Block and Pannellum, a free, open-source WebGL viewer, and honestly it turned out way cool. The build is a single HTML file you paste into a Rise Code Block. What you get out of the box: Auto-panning on load with a play/pause toggle Multi-scene navigation (forward/back buttons that loop) Fullscreen without any image distortion Clean minimal controls that stay out of the way All you need is a song in your heart, and some hosted equirectangular images. I hosted the images in another Rise lesson for simplicity. I'm attaching the index files for both versions. Give it a go. Happy to answer questions or nerd out about it in the comments. 🙂 Test it out here!A Growing List of Cool Code Block Examples
➡️ View the examples and grab the code Hi everyone! 👋 You'll find (34 so far) examples of what you can do with the Rise Code Block. These are my tests that I've built to be responsive and accessible. I've provided the code for each so you can easily copy, paste, and insert them in your Rise courses. There is a suggestion box if you'd like to upvote an idea or enter your own. If you have any comments, just drop them here in review. Yor can reach me directly at stephanie@stephanieharnett.ca. Latest Examples: Spin the Wheel (fun tip spinner) Your Input Suggestion Box Interactions Click & Reveal Checklist Flip Cards Glossary You Can Print Hover Definitions & Popup Info Labeled Graphic Matching Activity Memory Match Scratch Card Reveal Scrolling Ticker Sentence Builder Sorting Interaction with Feedback Timeline Vertical & Horizonal Tabs Effects & Media Animated Checklist Confetti Dividers Multi-track audio Player Graphics Blended Image Slider Image Compare Slider Knowledge Check / Quizzes Card Order Question Flashcard Self-Assessment Row Order Question Swipe Card Quiz Yes/No Swipe Cards User Input Capture & Recall Reflections You Can Print Course Completion Certificate ElevenLabs Chatbot Learner Name with Persistence Notebook You Can Print Pulse Check (no right/wrong answer question) E-Learning Challenges & Fun Stuff #535 Snow Globe #540 Valentine Oracle Rise Code Block "Build-a-Thon" SubmissionGame of the watercans - SL360 + easy JS
Hi Everybody, here is an example of easy javascript used for a little game. There are 3 cans. Can 1 is full, has 12 liters. Can 2 (7 liter) and 3 (5 liter) are empty. You can pour the water from one can, into another, till its full. Goal is to have 1 liter in 1 can. Sounds not too bad? Can you think of a way to calculate this? If you pour c1 into c2, only 7 liters will enter c2. 5 liters will remain in C1. Easy step one. for every next step we need to know the following: how much water is in each can? how much water can be poured into another? What is the result? how much water is in each can? when all the cans have content, there are 6 possibilities. C1-->C2, C1-->C3, C2-->C1, C2-->C3, C3-->C1 and C3-->C1. (--> pours into) So what do we need? In JS we need variables (var) to calculate each of the 6 possibilties. We need a drag and drop trigger, to move the cans and execute one of the scripts. We need triggers to move the cans back in place after every step. Here are the 3 variables volume for can 1,2,3. The C1 has 12 liters, C2, C3 are empty, 0. Next are the triggers. So after each drop, 2 of the variables will have changed. We trigger to 'jump this slide' when this happens. Did you know, you only reset the objects, the variables will not be reset!! It doesnt matter which can you move. All cans will be reset to startposition. I suppose you can remove one of these triggers, because any of the other 2 will have changed after each pour. Object triggers: Group 1 is can 1 with water, etc. You can clearly see the logic, we needed 6 possible actions. we have 6 scripts which calculate how much water is in the cans you use. Here is the script for C1 --> C2. lines 2-7 will be the same for all the 6 scripts. For those new to js in SL360. You need to retrieve the value of the variables from the player and rename them for usage in the script-shell. This is what lines 5-6-7 do. We take the volumes of each can and name them can1vol, can2vol and can3vol. lines 15-17 we export the new values back into the player. lines 9-13 is where the magic happens. L9: We create a var for how much room there still is in c2. It cannot be more than 7 liters. so. 7 liter - whats inside now. L10: Now we create the var transfer. 'Math.min' takes the lowest value of the named vars. In this case 12 liters in C1, C2 is empty, to it can take 7 liters. The lowest is 7, this will be the transfer value. L12: newCan1 is the next variable. we take the volume in c1, 12 - the transfer value 7. L13: newCan2 is the next, we take the volume in C2, 0 + the transfer value 7. L15-17 we export back to the player, accordingly for the newCan values. (only C1 and C2 have changed, so new values to them. C3 didnt change. Copy the script to all of the 5 remaining triggers and change lines 9-13. Think clearly, can1 has 12 liters and C3 has 5 liters of space. so we use those values to change line 9. in line 10 we change for each outcome how much is in the can you pour from and how much is in the can we drop. We only change the vars that are in use, make sure you trigger the minus and plus to the right can in lines 12-13. :-D | Make sure you use the newCan values for the correct cans. In the project you will find all the scripts. I have to excuse myself for not properly finishing the project, I still need to add states of the quantity of water in each can. Now c1 will always be full, below each can, the values of how much is in there, works. Hope anyone will find this usefull. Have a great day!Interactive Notepad/Writing
A fun interactive way for students to take notes and save/print those notes. A few languages for students to choose. Default is English (note for students who choose other languages). Can be printed Opens in a new tab, students right-click and click Print or Save As a PDF Tools such a erasing, font color changing, different fonts, and stickers Can easily be altered to suit your needs I used Rise Code Blocks and the code is located in the attached documents. Thank you! Demo: Interactive Notepad/Writing
