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.
is there any possibility of changing the slide audio like this?
We can’t translate any audio files…
Hi,
Can you share the Javascript for the translation
Hi Dhayalan,
Code Pastebin link: https://pastebin.com/XUBhVArw
Hi the pastebin link isn’t working. Can you please help with javascript code?
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();
}
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?
Very interested in this as well!
You’ve done an impressive work on your website in covering the topic.
My brother suggested I might like this web site. He was entirely right.
This post actually made my day.
My brother suggested I mighht like this web site.
He was entirely right. This post actually made my day.