Building JavaScript Foundations Through A Branching Scenario

As a learning experience designer, I don't want to just build courses, I want to create dynamic and interactive learning experiences. To expand my technical knowledge, I set a learning goal to build a baseline understanding of JavaScript.

JavaScript is particularly impactful for learning design because it goes beyond the limitations of an authoring tool, allowing me to create more personalized and engaging activities. Instead of relying on numerous triggers within Articulate Storyline to create interactivity, JavaScript minimizes complex triggers through the use of code while giving me more ways to engage the learner in the learning environment.

I applied this learning by creating a simple branching scenario in Articulate Storyline that includes one question with three decision points, each triggering different feedback based on the learner’s selection. What began as a way to gain a basic understanding of JavaScript soon evolved into more complex JavaScript challenges.

The process developed over three phases, checkout the steps below.

Phase 1: Establishing A Foundation

In the first phase, I built a two-slide branching scenario with a simple layout. The first slide showed a student scenario and three response options, each created using square shapes with text. The second slide displayed feedback using a variable called feedbackMessage, which changed dynamically based on the button selected on the previous slide. A button was also included to allow the learner to return to the question slide and explore alternative responses.

This phase focused on understanding how JavaScript interacts with Articulate Storyline. I learned core concepts such as:

• Always starting JavaScript with let player = GetPlayer()

• How Storyline variables allow communication between the Storyline and JavaScript

• The use of strings and the requirement that they be enclosed in quotation marks

• How functions work as reusable blocks of code that perform different actions

By jumping directly into building a working project, I was able to engage in hands-on learning and begin practicing JavaScript in a meaningful, applied way rather than in isolation.

---

Phase 2: Expanding Interactivity and Visuals

With a technical foundation, the second phase focused on increasing interactivity and improving the overall look of the branch scenario. The course expanded from two slides to seven, including:

• A welcome slide that prompts the learner to enter their name

• An instructions slide

• Three feedback slides directly tied to the learner’s selected response

• A conclusion slide allowing the learner to restart or exit the course

Additional JavaScript was introduced on the welcome slide to enhance usability. The start button is triggered to appear only after the learner enters their name. If no name is entered, a JavaScript alert appears and asks the learner to complete the field before being able to proceed.

To improve the look and feel of the course, I added icons on the introductory slide to highlight key reminders and expectations. A character was also introduced to create a more engaging experience. On the feedback slides, the character’s expressions change to match the feedback and whether the learner’s response was correct or incorrect.

Through this phase, I continued building my JavaScript skills while also learning how technical decisions can directly support learner engagement. What began as a very simple branching scenario turned into a more polished, interactive learning experience.

Interact with the second phase of the design below!

---

Phase 3

In the final phase of the project, I reviewed numerous accessibility issues. Primarily, text style needed to be adjusted to correct headings and images required alternative text. When publishing in Storyline, users receive an alert of the number of accessibility errors. I added alternative text to images, adjusted headings, and looked for any color contrast concerns.

I also found this as another opportunity to stretch my JavaScript and Storyline skills. I decided to add an attempt counter to track the number of attempts the learner tried to answer the question. Because this was more complex, I utilized AI to assist me in creating the code. However, instead of adding another trigger in Articulate, I used the existing Execute JavaScript trigger that is attached to each button choice. And instead of rewriting the entire code, I grabbed the snippet of code for the attempt counter and added it into the appropriate location. I also created a variable called attempt and added a sentence to each of the feedback slides that read "Number of Attempts: %attempts%. This allowed the user to track the number of attempts, and %attempts% pulled in the variable that was linked to the JavaScript code.

I also thought it would be more engaging to incorporate the learner's name into additional slides, so I added the variable %learnerName% at the top of each feedback slide to include the learner's name. Finally, I added a few more animations, such as having the character appear shortly after the timeline started on the accompanying slide, to assist with making the course more visually appealing.

In conclusion, by starting small with simple JavaScript and then challenging myself in increments to try new code and incorporating into existing JavaScript, I was able to learn a lot about JavaScript structure, how it communicates with Articulate, and that there are endless options to really customize a learning experience. JavaScript can significantly cut down on the number of triggers needed in Articulate and is a tool I can also use in other learning designs, include web-based tools and resources. I'm looking forward to continue exploring how JavaScript can improve future designs.

Interact with the final version of the student scenario in Articulate Storyline below!