Progress Bar in Storyline 360 using just a TEXT VARIABLE and JavaScript

Published: 25 August 2024
on channel: Learnomancer
239
10

Learn how to create a unique progress bar in Articulate Storyline using only text variables and JavaScript.

This tutorial shows you how to:

➡️ Set up text variables in Storyline
➡️ Use JavaScript to calculate and display progress
➡️ Customize the progress bar appearance
➡️ Implement different styles (dashes, numbers, text)

Perfect for e-learning developers looking to enhance their Storyline projects with a simple yet effective progress indicator. No GSAP or complex coding required!

I'm going for that old-school green terminal look for my progress bar, but you can implement this using any characters you want. This can be a really cool addition to any gamified elearning or implementation of gamification, or just if you want to show users how they progress through your project without using more complex solutions such as those involving GSAP.

🕒 Timestamps:
0:00 Introduction
0:23 Setting up the master slide and variables
02:12 Adding the javascript code
03:54 Exploring alternative progress bar characters
04:39 Customization options
05:02 Conclusion


📺Additional ressources
---
How to create a progress bar with GSAP and Javascript:
   • Create a Progress Bar in Storyline 36...  
   • Create a Gamified Progress Bar in Art...  
---
How to show progression using percentages:
   • Storyline 360 | Show course Progressi...  
---


#elearningdevelopment #storyline360 #elearning #instructionaldesign #javascript #articulatestoryline #tutorial


Watch video Progress Bar in Storyline 360 using just a TEXT VARIABLE and JavaScript online without registration, duration hours minute second in high quality. This video was added by user Learnomancer 25 August 2024, don't forget to share it with your friends and acquaintances, it has been viewed on our site 239 once and liked it 10 people.