Colors of Pride: Enhancing Articulate Storyline with JavaScript Gradients

natestoker 12 September 2024 JavaScript or Logic

Let’s add a vibrant touch to your Articulate Storyline projects! This blog post will guide you through a JavaScript trigger that applies a beautiful rainbow gradient to text within your e-learning courses.

Let’s explore the JavaScript code that will make this magic happen:

 function logFontInfoAndPosition(dataModelId) {
  // Step 1: Select all div elements
  var divs = document.querySelectorAll('div');

  // Step 2: Find the div containing the specified data-model-id
  var targetDiv = null;
  for (let div of divs) {
    if (div.getAttribute('data-model-id') === dataModelId) {
      targetDiv = div;
      break;
    }
  }

  // Step 3: Check if the target div exists; if not, log an error and exit the function
  if (!targetDiv) {
    console.error(`Div with data-model-id '${dataModelId}' not found.`);
    return;
  }

  // Step 4: Get the SVG and text element within the target div
  let svg = targetDiv.querySelector('svg');
  let textElement = svg.querySelector('text');

  // Step 5: Check if the SVG and text element exist
  if (!svg || !textElement) {
    console.error(`SVG or text element not found in the target div.`);
    return;
  }

  // Step 6: Create the gradient within the SVG
  let defs = svg.querySelector('defs') || document.createElementNS('http://www.w3.org/2000/svg', 'defs');
  let linearGradient = document.createElementNS('http://www.w3.org/2000/svg', 'linearGradient');
  linearGradient.id = 'gradient';
  linearGradient.setAttribute('x1', '0%');
  linearGradient.setAttribute('y1', '22%'); // Start at 22%
  linearGradient.setAttribute('x2', '0%');
  linearGradient.setAttribute('y2', '82%'); // End at 82%

  // Define the gradient bands with distinct stops
  linearGradient.innerHTML = `
    <stop offset="0%" stop-color="#5461c8"/>
    <stop offset="16.67%" stop-color="#5461c8"/>
    <stop offset="16.67%" stop-color="#c724b1"/>
    <stop offset="33.34%" stop-color="#c724b1"/>
    <stop offset="33.34%" stop-color="#e4002b"/>
    <stop offset="50%" stop-color="#e4002b"/>
    <stop offset="50%" stop-color="#ff6900"/>
    <stop offset="66.67%" stop-color="#ff6900"/>
    <stop offset="66.67%" stop-color="#f6be00"/>
    <stop offset="83.34%" stop-color="#f6be00"/>
    <stop offset="83.34%" stop-color="#97d700"/>
    <stop offset="100%" stop-color="#97d700"/>
  `;

  // Append the gradient to the defs element
  defs.appendChild(linearGradient);
  svg.appendChild(defs);

  // Apply the gradient as the fill for the text element
  textElement.style.fill = `url(#gradient)`;

  // Ensure the div appears above other elements (if needed)
  targetDiv.style.zIndex = '9999';
}

// Example call targeting the div with data-model-id="6hfJN5zz7qg"
logFontInfoAndPosition('6hfJN5zz7qg');

Step-by-Step Breakdown for Articulate Storyline

  1. Identify the Target: Replace 'YourDataModelId' in the example call with the actual data-model-id of the text element you want to style. You can find this ID by inspecting the element in Storyline’s preview or published output. I am including a snippet of code where you just need to temporarily use the Accessibility Alternative text.  In my function the alternative text is PRIDE. So the usage of the function would be getDataIdOfElement(“PRIDE”); and this will show me a DataModelID of 6hfJN5zz7qg.

  2. Add the JavaScript Trigger:

    • Create a new trigger in Storyline.
    • Set the Action to “Execute JavaScript.”
    • Paste the provided JavaScript code into the Script field.
    • Configure the trigger to execute when the timeline starts.

Key Considerations

  • Text Element: Ensure the text you want to style is within an SVG element. If not, you might need to adjust the code to target a different element type or convert your text to SVG.
  • Browser Compatibility: Test your project in different browsers to ensure the gradient effect displays correctly.
  • Accessibility: Consider providing alternative ways to access the information for users who may have difficulty perceiving colors.

Please note you can’t have this effect on two lines of text, only one.

Step 6:

  linearGradient.setAttribute('x1', '0%');
  linearGradient.setAttribute('y1', '22%'); // Start at 22%
  linearGradient.setAttribute('x2', '0%');
  linearGradient.setAttribute('y2', '82%'); // End at 82%

While it might seem intuitive to set the gradient’s start and end points at 0% and 100%, respectively, real-world rendering sometimes requires adjustments. In this case, we discovered through careful inspection using Chrome’s developer tools that the gradient’s visual alignment with the text was improved by setting the y1 and y2 attributes to 22% and 82%. Feel free to modify these values further if needed to achieve your desired look.

  // Define the gradient bands with distinct stops
  linearGradient.innerHTML = `
    <stop offset="0%" stop-color="#5461c8"/>
    <stop offset="16.67%" stop-color="#5461c8"/>
    <stop offset="16.67%" stop-color="#c724b1"/>
    <stop offset="33.34%" stop-color="#c724b1"/>
    <stop offset="33.34%" stop-color="#e4002b"/>
    <stop offset="50%" stop-color="#e4002b"/>
    <stop offset="50%" stop-color="#ff6900"/>
    <stop offset="66.67%" stop-color="#ff6900"/>
    <stop offset="66.67%" stop-color="#f6be00"/>
    <stop offset="83.34%" stop-color="#f6be00"/>
    <stop offset="83.34%" stop-color="#97d700"/>
    <stop offset="100%" stop-color="#97d700"/>
  `;

This code defines the gradient’s color bands. Note the repetition of offset values; this technique creates distinct transitions between colors. You have complete control over this gradient: remove bands, add new ones, or even simplify it to a single, smooth gradient. The choice is yours!

Conclusion

By leveraging JavaScript triggers and a bit of code, you can infuse your Articulate Storyline projects with the vibrant colors of Pride. This tutorial empowers you to create engaging and inclusive e-learning experiences that celebrate diversity and promote acceptance.

Remember, the possibilities are endless. Explore different color combinations, experiment with gradient directions, and let your creativity shine!

Feel free to reach out if you have any questions or need further assistance. Let’s continue learning and creating together!

Additional Tips

  • Customize the Gradient: Modify the stop-color values in the code to create your own unique gradient.
  • Animate the Gradient: Use CSS animations or JavaScript to add movement and dynamism to your gradient.
  • Explore Further: Delve deeper into JavaScript and Articulate Storyline’s capabilities to unlock even more creative possibilities for your e-learning projects.

Let your Storyline projects radiate with the spirit of Pride!

Related Posts