top of page
Screenshot showing the user interface of the eLearning module, which displays dynamic weather data. The UI includes panels for weather updates, transportation methods, and route options, enabling Supply Chain Managers to make informed decisions based on real-time conditions.

Tools:

  • Adobe Captivate

  • Visual Studio Code

  • Google Cloud Function

  • Open Weather Map API

  • Adobe Illustrator

  • Adobe Photoshop

Skills:

  • eLearning Development

  • HTML, Javascript & Node.js

  • API Request Calls

  • Server-side Data Retrieval

  • Graphic Design

  • Accessibility

Project Overview:​

In this eLearning module, learners take on the role of a Supply Chain Manager responsible for distributing weather-sensitive medications, like vaccines and biologics, crucial for public health programs and hospital needs. 

​

Challenge:

​

Faced with the critical task of distributing weather-sensitive medications, new Supply Chain Managers must learn to leverage real-time weather data to select the optimal transportation method and route, ensuring timely and efficient delivery to health programs and hospitals.

​

Solution:

​

To address this challenge, I developed a scenario-based eLearning module that utilizes APIs to integrate real-time weather data, enabling learners to practice making strategic decisions for pharmaceutical shipments.

​

​

Technical Highlights: 

​

  • API Integration: Utilizes up-to-the-minute weather data APIs to simulate real-world conditions, ensuring learners face realistic and timely logistics challenges.

​

  • Dynamic Feedback Mechanism: Employs JavaScript for on-the-fly calculations of optimal transportation methods, offering tailored feedback based on each decision's impact.

​​

  • Accessibility Compliant: Built with custom JavaScript that dynamically updates screen reader tags for each variable, ensuring that the content is accessible and screen readers articulate the actual data rather than just the variable names.

​

Given the nature of this project as a conceptual exercise, adhering strictly to instructional models like ADDIE or Action Mapping wasn't entirely feasible. In a real-world scenario, my initial step would involve organizing a kick-off meeting with stakeholders to understand their needs and initiate a thorough needs analysis. This would typically include reviewing existing data (or requesting data), along with probing questions to identify the target learner group, desired learning outcomes, and course content.

​

For this project, those foundational steps were creatively adapted. I relied on my imagination, supplemented with research from Google and insights from ChatGPT, to simulate this initial phase of project development. 

​

Audience:

 

Novice Supply Chain Managers specifically in the pharmaceutical transportation sector. These individuals are likely new to the role, possibly transitioning from other areas within logistics or pharmaceuticals. They may have foundational knowledge in general supply chain management but require specialized insights into the unique challenges and regulations of pharmaceutical transportation.

​

Objective:

 

Upon completion of this module, Supply Chain Managers in the pharmaceutical industry (Audience) will be able to accurately select the most suitable transportation methods for pharmaceutical shipments(Behavior), based on real-time weather data (Condition), thereby improving on-time delivery rates and the quality of shipments (Degree).

I started this project by researching relevant experiences a supply chain manager might have on the job and then developed the scenario. My decision to focus on a scenario-based approach was significantly influenced by instructional design theories, particularly Malcolm Knowles' theory of adult learning, which emphasizes relevant content. Additionally, Clark Quinn's theories on authentic context and decision-making were instrumental in shaping the project's design. These theories advocate for experiential learning, where learners engage in scenarios that closely replicate real-world challenges, requiring them to make critical decisions.

​

I also utilized Ruth Colvin Clark's theories on feedback. It was important to me that the feedback provided to learners was not only timely but also specific and constructive. This approach was designed to help learners understand the effectiveness or ineffectiveness of their decisions.

The development portion of this project included several key aspects:

​

APIs:

​

For this project, I aimed to incorporate real-time weather data, which led me to implement the OpenWeatherMap API for accessing weather information for the cities relevant to the scenario. This integration required me to write code in JavaScript and utilize Node.js for backend operations. To ensure the security of my API key, I employed Google Cloud Functions, which allowed me to manage the API key securely through server-side data retrieval. This approach ensured that the key was not exposed in client-side code, thereby enhancing the security of the application.

​

Weighted Scoring and Formulas:

​

After solving the API request, I designed weighted scoring and formulas for all the possible weather conditions and modes of transportation. This weighted scoring and formula calculation takes place behind the scenes every time a learner experiences the project and determines the best mode of transportation based on the weather data at that moment in time. 

​

Check out the weighted scoring and formulas behind the project.

​

Javascript:​

​

  • Request calls for APIs: This back-end code facilitates requests to the OpenWeatherMap API in order to retrieve the real-time weather data that is then displayed through variables in Captivate.

​​

  • Calculate the scoring: This front-end code calculates the formulas using the values of the variables and the weighted scoring to determine the learner's choice and compare it to the transportation method with the highest score.

​​

  • Develop dynamic feedback: Because this module utilizes real-time weather data, variables can always change requiring the need for feedback that adapts to both real-time weather data and learner choice. Referencing the Feedback Intervention Theory, all the feedback is also 'task-based', focusing on the task and not the learner personally.

​​

Examples of dynamic feedback responding to real-time weather data and learner choice:

​

​

​

​

​

​

​

​

​

​

​

​

​

​

​

​

  • ​​Ensure accessibility: This code made sure all variables were able to be read by a screen reader. Unfortunately, Captivate falls short in its native support for accessibility, particularly for dynamic content. In the absence of this specialized JavaScript, screen readers would be limited to recognizing only the variable names, rather than their actual values. Given that this project incorporates over 75 distinct variables, it was essential to apply this code individually to each one, thus significantly improving the accessibility of the eLearning experience.

​​

If you are interested, check out some code snippets created in Visual Studio Code from this project.

​

UX Design Principles:

​

Following â€‹sound UX and accessibility principles, I made sure to keep the design simple and navigation straightforward with button consistency and placement. Learners can repeat the instructions and intro-brief as many times as needed. Text is consistent across the module following hierarchy standards and left-aligned to promote ease of reading. All colors meet contrast guidelines and are WCAG AAA large text compliant.

​

By applying the principles of Cognitive Load Theory, I balanced the amount of information given to learners to prevent cognitive overload. To achieve this, I designed the course so that learners have access to an embedded job aid and map, enabling them to reference these resources as needed while navigating the scenario. This approach allows learners to simultaneously engage with the full scope of the scenario and its weather-related details, without feeling overwhelmed.

This project has truly been a labor of love for me. My initial goal was to address a real-world challenge through scenario-based learning, innovatively enhanced with API integration to create a more authentic experience. The project has indeed been a success, and I've made significant strides in my development skills. However, I've come to realize that its scalability is limited. Working with Adobe Captivate, which isn't primarily a JavaScript editor, presented challenges. Constantly switching between Visual Studio Code and Captivate highlighted a potential alternative approach: building the entire project directly in external Javascript. While this method demands extensive coding expertise, it could streamline the process.

 

However, in all honesty, I think the objective of this module could be met just using static data. Making an API request and utilizing real-time weather data does give it a novelty factor, but it's not reliable, the build is timely, and if it's a large organization making 100s - 1,000s API requests could be costly. Using static data instead could achieve similar organizational outcomes, simplifying the build process while still using internal scoring. In future iterations, I'm considering developing a version that doesn't use APIs. 

​

Do I regret undertaking this project? Absolutely not! Despite the challenges, it has been a valuable learning experience. The use of APIs and the development of code that dynamically alters feedback based on changing weather data and user choices has been particularly rewarding. This project stands as a testament to my problem-solving skills, creativity, and perseverance. I could have given up at any stage, but I chose to see it through to the end. I think the novelty and complexity of this project speak volumes about my ability to innovate and adapt.

©2024 by REN Learning Design

bottom of page