Transforming complex instructional goals into dynamic, learner-driven interactions.
This gallery serves as a technical sandbox showcasing high-fidelity interactions designed to solve complex instructional hurdles. The featured builds are a mix of custom-engineered solutions developed during technical consultations for peer designers and advanced prototypes created for industry-recognized benchmarks like Articulate’s eLearning Heroes Projects and Tim Slade's eLearning Design Challenges.
Because these projects are built to demonstrate functional architecture, such as complex variable logic, data manipulation, and accessibility workarounds, they utilize placeholder content. This ensures the focus remains entirely on the technical mechanics and scalability of the interaction, providing a clear view of the "engine" behind the learning experience.
Built for Articulates eLearning Heroes Weekly Challenge #544
By using a sleek, branded accordion layout, I’m able to:
Reduce cognitive load.
Keep the interface uncluttered.
Let learners explore content at their own pace.
The Challenge:
"This week, your challenge is to share an example that shows how accordion interactions can be used to present frequently asked questions in e-learning courses. "
The Solution:
Used the 'morph' transition to animate movement between each step - required each step to be its own slide
Used variables to track views and display checkmarks on steps after being visited - custom variables to set custom states
AI-generated images and color palatte
This is a consulting project for another developer. It is a 'Logic Prototype' that intentionally strips away the visual design to ensure the logic is bulletproof.
The Challenge:
The "Multi-Question" Challenge: A single slide containing multiple independent multiple-choice questions that get graded after the entire slide is completed.
The "Data Entry" Challenge: After listening to an audio file (no more than 3 times), the learner needs to fill out a multi-field text-entry form.
The "Grading" Challenge: Both parts of this assessment needed to be graded together and displayed as a single score on a result slide.
The Solution:
I stepped away from the built-in "Graded Slide" templates and built a Custom Scoring Engine using:
Button Sets: This allowed multiple independent "Question Groups" to live on a single plane without interfering with each other's states.
Triggers: I used triggers to set variables and calculate the score as the learner interacts with the slide.
Manual Variables: Moving away from defaults to specific naming conventions like MC1_Answer and name_correct allowed me to track data across the entire slide.
This started as a project for Articulate's eLearning Heroes Challenge #328, but updated to solve a problem for a peer developer. It is another 'logic prototype' with no visual design.
The Challenge:
The developer wanted to create an assessment slide with five questions whose answer selection is presented as drop-downs.
Each answer field is worth one point, and the score should be revealed on the results page when the user clicks submit.
The Solution:
Layers to show the options when the user clicks an entry field
States on the base layer objects to display the
selected answers
Variables to store the selected options
A grade layer with no visual elements to score each selection when the user hits submit before revealing the submit page.