Instructional Designer

Adding Google Translate to Storyline


Anyone else follow N R Z Malik? He’s amazing! I love his sharing, caring, and accessibility focused agenda. Also, the man is a JavaScript genius! Ok, with my gushing out of the way, he has been working on incorporating Google Translate into Storyline and this ability would be amazing in my courses.

If you don’t know, I work in a global company and we currently use DeepL and the faux captioning method I developed to do this. It’s not difficult, but it’s cumbersome, and it takes a while to get the hang of it.

But.. what if we could scrap all of that, add a little JS, make a small html change, zip it all up, and it just worked?

As you can see Malik’s solution as is causes some small issues with our specific courses. The google header pushes our courses down by about 40px, which makes our menu items drop below the viewing window. So, my amazing work friend Kristin added a little bit of code to the story.html file which simply adds a scroll bar so that we can access the bottom menu with the mouse.

As usual, I’ve been creating internal documentation for this solution. If you want to try it yourself, you can visit N R Z Malik’s Blog – https://www.eblog.nrzmalik.com/unlocking-global-reach-with-dynamic-translation-in-articulate-storyline/

To change the Storyline file to ensure that it scrolls:

You are going to add to the <body> tag with the code provided below.  In the tag, you will see a “background: hexcode”    you need to add a space after the hex code and then add in the code (shown here, highlighted).   Then, save and exit the file.

Add in :

overflow: auto !important;

Once done, zip up the folder and then deploy as you normally would.