Unlocking Global Reach with Dynamic Translation in Articulate Storyline

Dynaimic Translation in Articulate Storyline
Dynaimic Translation in Articulate Storyline

Introduction

In today’s interconnected world, eLearning content creators are faced with the challenge of reaching a global audience with diverse linguistic backgrounds. Addressing this need, I am excited to introduce a revolutionary technique for dynamic translation in Articulate Storyline – a game-changer that opens up new possibilities for eLearning courses.


The Breakthrough Technique:

You can seamlessly integrate dynamic translation into your Articulate Storyline courses. This is made possible through a custom JavaScript solution that empowers you to translate your content into an impressive 132 languages.


Follow These 3 Simple Steps:

Step 1: Upgrade Project Text

Go to “Design” > “Fonts” > “Upgrade Project Text” to initiate the process.

Step 2: Display Accessible Text

Navigate to “Design” > “Fonts” > “Display Accessible Text” to ensure comprehensive accessibility.

Step 3: Set up JavaScript Trigger

On your first slide, add a JavaScript trigger set to execute when the timeline starts. Paste the provided code.


Conclusion

As we embrace the era of digital learning, it is crucial to adapt and cater to the diverse needs of learners worldwide. This innovative approach to dynamic translation in Articulate Storyline is a testament to the continuous evolution of eLearning solutions. I trust that this contribution will empower you to create more inclusive and globally accessible courses, revolutionizing the way we deliver education. Cheers to the future of eLearning! ๐ŸŒ๐Ÿ™Œ

Share this article
Shareable URL
Comments 8
        1. function createGoogleTranslateWidget() {
          const translateDiv = document.createElement('div');
          translateDiv.id = 'google_translate_element';

          const targetDiv = document.querySelector('.slide-window-slide-container');

          targetDiv.parentNode.insertBefore(translateDiv, targetDiv);

          const script1 = document.createElement('script');
          script1.type = 'text/javascript';
          script1.src = 'https://translate.google.com/translate_a/element.js?cb=googleTranslateElementInit';
          document.body.appendChild(script1);

          if (!window.googleTranslateElementInit) {
          window.googleTranslateElementInit = function() {
          new google.translate.TranslateElement({
          pageLanguage: 'en',
          layout: google.translate.TranslateElement.InlineLayout.HORIZONTAL
          }, 'google_translate_element');
          }
          }
          }

          function addCssToHead(cssRules) {
          var styleElement = document.createElement('style');

          styleElement.textContent = cssRules;

          document.head.appendChild(styleElement);
          }

          var css = `
          iframe[id=":1.container"] {
          display: none !important;
          }
          body {
          top: 0 !important;
          }
          .goog-logo-link {
          display: none !important;
          }
          .goog-te-gadget {
          color: transparent !important;
          }
          .VIpgJd-ZVi9od-l4eHX-hSRGPd {
          display: none;
          }
          #goog-gt-tt #goog-gt-vt {
          display: none !important;
          }
          .VIpgJd-ZVi9od-aZ2wEe-wOHMyf.VIpgJd-ZVi9od-aZ2wEe-wOHMyf-ti6hGc {
          display: none !important;
          }
          body {
          overflow: auto !important;
          }
          `;

          if (!document.getElementById('google_translate_element')) {
          addCssToHead(css);
          createGoogleTranslateWidget();
          }

  1. Thanks for sharing this. Is it possible to adjust the code and limit the language options, for example only having French as an option to change to?

Leave a Reply

Your email address will not be published. Required fields are marked *

Read next