Storyline ANIMTEXT
Hey community! 👋 Creating cool animated titles in Storyline is often tedious... and rarely impressive. So I've put together 17 ready-to-use JavaScript scripts to animate your SVG texts: ✅ Slide replay handling (automatic reset) ✅ Storyline pause support (Varpause variable) ✅ One script per effect, easy to integrate Note: the Voronoi effect loads a small external library (d3-delaunay) automatically - completely transparent to the user! Have fun, test them out, and let me know which effect is your favorite! Review : https://360.articulate.com/review/content/c1587dba-5193-4d45-a4eb-2b985309b7ce/reviewTreasure Hunters Learning Game
Before I officially became an ID I worked in a job that encouraged self-learning and would give us time to take e-learning. One of the e-learning I became focused on was PowerPoint. This led to me making games in my free time one game was a Pirates adventure that I repurposed to be a trivia game for learning a new process at work. This was long before I became an ID but was laying the groundwork for this path. When I became an ID I was introduced to Storyline and was told it is PowerPoint on steroids. For my first couple week I was encouraged to play around, watch videos, come here and look at what other can and have done. I took that time to remake the game using Storyline and enhanced it with branching options. This is the result after those 2 weeks. I really wanted to see if my PowerPoint skills and translated to Storyline and see how I could push it. I thought I would share it and maybe inspire others I have been by this community.PUISSANCE 3
Bonjour la communauté Storyline 👋 Je voulais partager avec vous un petit projet perso que je viens de finaliser : PUISSANCE 3 🎮 Un mini-jeu entre le morpion et le Puissance 4 : ➡️ 2 modes de jeu (Solo / Duo) ➡️ 3 pions alignés (vertical, horizontal ou diagonal) = victoire… ou pas 👀 🎯 Objectif du défi Créer un jeu complet 100 % avec les outils natifs d’Articulate Storyline : variables (numériques / booléennes), états d’objets, déclencheurs conditionnels, animations pilotées par la logique, gestion des tours, victoire et partie nulle, sans JavaScript. 🧠 Principe de fonctionnement (simplifié) Chaque jeton posé met à jour une variable de position dans la grille. À chaque action, Storyline vérifie des combinaisons prédéfinies (colonnes, lignes, diagonales). Quand une condition “3 alignés” est vraie, le jeu se fige et affiche le résultat via un calque dédié. 🛠️ À noter Le plateau, les supports et les jetons sont réalisés directement dans Storyline Seuls les smileys de fin de partie ont été générés via IA Le reste repose uniquement sur la logique interne de l’outil 👉 Lien Review pour tester le jeu : Lien jeu Puissance 3 review Je serais ravi d’avoir vos retours, idées d’optimisation ou simplement votre ressenti sur le concept 🙂 Merci à la communauté pour l’inspiration quotidienne ! Bien à vous, Jérôme GrandpratUpdated "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. All three examples are linked below, along with the downloadable files. 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. Review360 Zip files GDrive location: HERESelect Your Role - JavaScript Animation Example
I recently shared this example on LinkedIn and wanted to share it here too. After sharing this, I got asked a lot: Can you share the details of how you vibe coded this? So sure, and here's the file too! ⬇️ Here’s my vibe coding process: Use your favorite AI (I like Gemini) Describe exactly how you want the interaction to work Feed it your slide specifics (variable names, ObjectIDs, etc.) Set up your slide the way it tells you to Test it Tell AI what didn't work (or what you want to change) Test it again Revise it again... and repeat Don't let your chat sessions get too long, otherwise the AI seems to start spitting out messy or broken code. Starting a fresh chat keeps the AI sharp and makes debugging easier. Vibe coding usually takes a lot of iterations, and it can get frustrating fast. If you change one thing incorrectly, the entire interaction can break. And then figuring out why it broke (and what to change it without breaking something else) can make you want to throw your laptop out the window. Cue Natalia Vostretsova 🤓's tutorials. She shares really helpful examples and resources that build a foundation for how JavaScript works so you’re not just copy/pasting, but actually able to read, edit, and troubleshoot it. She also has an upcoming course in the works, so definitely follow her if you want to learn more. With that said, attached is the file for this interaction. I tried to clean it up and make it as editable as possible. Here's how to use it once you download it: Open the slide Find the JavaScript trigger Follow the orange instructions inside the code to customize it for your slide If you run into trouble getting it to work, here’s the fastest fix: Paste your edited code into AI Describe your slide setup Tell it what’s happening (or not happening) Revise it until it works on your end If you get it working, drop a comment with what you made (even a quick screen recording). I’d love to see how you use it!
🔍 Interactive Magnifier Tool for Image Inspection
Hi everyone, I wanted to share a new experiment I’ve been playing with recently, a custom magnifying-glass inspection tool built with HTML, CSS, and JavaScript, then embedded into Rise 360 using a Storyline block. This idea came from reviewing an AI-generated laboratory image that looked perfectly fine at a distance, but the closer I examined it, the more inconsistencies and small “AI giveaways” I found. That sparked the idea for a scenario-based inspection activity, where learners can zoom in to look for issues, hazards, or clues. 🔧 What it does The interaction uses a hexagonal lens that lets learners: Toggle Inspect Mode on/off Move a magnifying glass across an image Zoom in with the mouse wheel Zoom using keyboard shortcuts (+ and −) Navigate smoothly across very large, detailed visuals It works brilliantly for: Spot-the-issue / observational tasks Quality assurance or audit simulations Safety checks Equipment-familiarisation exercises Any situation where learners must analyse detail 🎨 Customisable If you’d like to adapt it, you can easily modify: The shape of the magnifier The image The zoom strength The toggle button The colours and frame styling I’ll include instructions in the shared example so you can download the code, replace the image, or restyle it however you like. 💡 Why I’m sharing it Like many of you, I love finding ways to push what Rise + Storyline can do together. This tool combines accessibility, usability, and custom code in a way that still fits neatly inside the Articulate ecosystem — no outside hosting needed. Would love to hear any thoughts, suggestions, or creative variations you might come up with! 🎁 If you'd like… I can also generate: A compressed ZIP of the interaction A Storyline .storyfile with everything preconfigured A variation with hotspots that react when the lens passes over them A version that reveals information only when inspecting certain regions An accessibility-first version with keyboard-draggable magnifier Have a play REVIEW360 Shared folder for ZIPSVideo Game Top-Down with Arrow Key controls
Introduction and features If you have ever wanted to create a world that your users can explore, but haven't known how to do it, then this project can help you get out there and get after it. View introduction in video format here: Video on LinkedIn A full course using multiple characters, multiple boards, side-scrolling animations when moving from board to board, are already being enjoyed by thousands in a professional setting in one of the biggest companies in the world. With this type of course, you have have the user walk around and size of world, gather items, solve tasks and anything you can think of. Review the project here: Review360 You control the Avatar with the Arrow Keys on the keyboard and she can only walk on the paths set by you. That means, she can't walk through walls! You can warp to Task slides or to another Board slide using the Intersect trigger. Download the Project at the bottom of this post. How the character moves The character is a PNG picture that is exactly 200x200 in size. The trick to movement is to also have the Motion Paths be 200px in length and have them set to Relative Start Point. I have chosen an animation time of 0.25 seconds. There are 5 states, the Normal state is the character in the Idle Position. The other 4 states are self-explanatory. Lastly, two triggers are created (NUM 2 appears when you hit Arrow Down on your keyboard). Your character now moves around the Canvas. How the character was created The character was created using AI using the following prompt: I'm creating a game and need a picture of a character. The game has an isometric view and I need the following 4 poses in the same picture with transparent background: 1 Front view where she has an idle pose and standing still. 2 Front view where she is walking towards the camera. 3 Back view where she is walking away from the camera. 4 Left view where she is walking with arms swinging very little. Comically small body. Very large head. Female. 3D style. High resolution. Office clothes. Short hair. Glasses. Transparent background. Disney style. That gave me this character in the poses I asked for. I use this large character for all slides except for the board. On the board, I took the picture into Photoshop and shrunk the body into something even smaller. How the board was made The board was made using PowerPoint and AI. I drew the outline of the board in PowerPoint using square shapes. I guess you could do this in Storyline as well! Then I found random pictures of inventory on google and copy-pasted them into various positions. Then I uploaded the picture into the Copilot AI - any image generation AI will work and used the following prompt: Can you create an exact replica of this image, but make it beautiful 3d top-down style. Make the colors pleasant and give it a disney vibe so that the scene feels warm and welcoming. Keep the layout the same. How to prevent the character from walking through walls This is the part that requires you to click the most with your mouse. First you create a grid of 200x200px square shapes. They only need to cover the areas the character will be walking on. They need to be touching each other and Shape Outline must be turned off - or it won't work. You then type in a unique identifier in each square shape. I just used the numbers from 1-27. I also renamed all the shapes "Square 1" "Square 2" "Square 3" etc. Next you create a new Number variable. The default value should be the square your character will be starting on. In my case, 1. You then create a bunch of triggers that changes the location variable upon intersecting with the character. You can now track exactly where on the board your character is located. This is key to controlling where it can not move. Lastly, you create the following trigger for all four arrow keys. The numbers will be different for you. But basically you look at Square 1 and visualize if the character should be able to move downwards from this location. If it shouldn't be able to, then you don't add the number to the list. If it should be able to, then you add the number. Download the project file Explore all the other various tricks employed to create the soft shadows, the smooth transitions and more by downloading the file right here. :) This project was created by http://www.mindsparkelearning.com - but feel free to modify it and then make it your own! :) I hope someone out there can find this project useful."Wait, SVGs are just code?"
Hi everyone, I have to admit something embarrassing. I was today years old (well, 44 years old to be exact) when I properly realised that SVG files are just code. I always thought of them as "images" you have to save, host, and link to. But no, they're just text! 🤦♂️ That realisation sent me down a rabbit hole, and the result is this: a Visual Narrative Selection Tool that is completely self-contained. No external image files, no hosting headaches, just one single HTML file doing everything. 🔍 What it is: It’s a scenario-based training interaction where learners have to pick the right chart type (e.g., "Is a Pie Chart okay for time-series data?"). If they get it wrong, the feedback doesn't just say "Incorrect"—it actually shows them why using a custom SVG graph generated right there in the browser. ✨ Why I'm sharing it: This is a pure "Zero-Asset" experiment. Because the icons and graphs are all SVG code written directly into the HTML: It's impossible to break: You can't "lose" the image files because they live inside the code. It's lightweight: The whole thing is tiny. It's accessible: Fully navigable via keyboard (Tab/Enter). AI-enabled: with a strong enough visual cue, no other files are required I've shared the source code below. It’s fully commented (with my contact info hidden in a professional comment block at the top) Feel free to download, break it, and tell me what you think. And please tell me I'm not the only one who didn't realise SVGs were this powerful? RISE READY HEREQuiz or Game Sample
I needed to update a matching activity that was not great nor accessible. I decided to gamify it with options. I created a quiz and also modified it to be game so the participants would actually be building their automatic connections to the content through what they are considering an assessment. Participants also needed to be able to take this in the quiz format since some people do not perform well if they feel that the time restriction adds pressure and stress. There is also some javascript in it to make the timer look better. Try it yourself. Quiz and Game Activity | Review 360 Download and modify it for your needs. The instructions can be found on the title page. If you do, let me know how it worked for you.
