Interactive 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! 🎉Practice: Visualizing Policy with Rise360
Hi there, I'm Leslie! I built this microlearning module in Rise360 because I wanted to practice creating a short, visual story with interactive elements from a text-only public policy source. 7 Ways the SAVE Act Would Block Voting Rights Government and think tank materials are text-heavy and focus on the process to create the policy or proposal, rather than who the policy impacts and what they either have the opportunity to do, or are now responsible for. I wanted to select a topic and source material that I didn't know anything about to keep my decision making to a minimum. I think visual storytelling would help people process policies and decide faster if they want to complete the call-to-action. I used Flaticons for the icon/ vectors. I created two different source attribution pages at the end of the module - one for the source material and one for the icon/ vectors used I'm unsure how to create a .story file for download. But happy to share anything I can. Thank you in advance for your feedback and comments on the design, flow, etc. While I believe in this topic and the research behind it, I realize it is political, so I hope I haven't violated and posting rules. Best, LeslieUp-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!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/WritingAI Course Drafts
✨ My favorite Articulate Rise feature of 2025: AI Course Drafts ✨ As a learning and instructional designer, I’m always looking for tools that help me work smarter without sacrificing quality or creativity—and the AI Course Drafts in Articulate Rise absolutely delivered this year. In 2025 alone, I’ve created several courses using this feature, and it has dramatically simplified the development process. Starting with a solid AI-generated structure saved me hours of setup time and gave me a strong instructional foundation to build on. What I loved most? 👉 The drafts weren’t the final product—they were the launch point. I went in, refined the learning flow, customized activities, adjusted the tone, and added meaningful personal and cultural touches. I even created two full courses in different languages: 🇺🇸 English: The Structure and Meaning of the Traditional Latin Mass: A Guided Exploration 🇪🇸 Spanish: Uso Efectivo y Ético de la Inteligencia Artificial en el Trabajo Being able to personalize content while still saving time is a game changer—especially when designing for different audiences, languages, and subject matter depth. AI didn’t replace my role —it amplified it. Curious to hear from other: 👉 Have you tried AI Course Drafts yet? How are you using them in your workflow?How I Embedded an AI Chatbot into a Rise 360 Course
This interactive course demonstrates how an AI-powered teaching assistant can be embedded directly into a Rise 360 experience. Please let me know what you think of the live demo Built with GPT-4o, LangChain, FAISS, and Streamlit, the assistant retrieves content from Teaching in a Digital Age by Dr. Tony Bates and answers learner questions in real time. You can try the assistant directly within the course to see how AI can support self-paced learning by offering just-in-time help, contextual answers, and scalable support—without the need for live facilitation. This project showcases how instructional designers can combine low-code tools and open content to build smarter, more responsive digital learning environments. If you’re interested, I’d happily share a short Loom walkthrough explaining how it was built.
