Forum Discussion
Text typing effect using Javascript
Hi, I have created a course which have several text boxes that animate a text typing effect. These are working perfectly well when I preview the slide. However, when I publish the course to Review or preview the scene, the typing effect is not working. Can anyone please help?
Thanks
12 Replies
What are you seeing in the console?
This should always be the first place you check. It is possible you have some broken code in there, any error in any of your code will break most code running.
Hi, share your .story or just the slide to have a look...
Here is a slide from the course. As I said, it works ok in preview but not when published or when previewing the full scene which contains multiple similar slides each with the same type-text animation JS variable.
Looks like your single slide project does work as intended in Articulate review...?
Do you have a unique variable for each slide in your project file?
It seems to be only an issue when viewing the whole project.I have multiple unique variables all set up in a similar way as the above example
The variable below appears on each slide, youre wiping the value before the slide starts.
// clear the initial value of the "TypingText" variable in Storyline
player.SetVar("Dog2", "");You can try adjusting the project by creating 2 variables:
- Dog2_full (holds the full message)
- Dog2 (used for typing animation output)
var player = GetPlayer();
// Get the full message from a separate variable
var message = player.GetVar("Dog2_full");// Reset the output variable
player.SetVar("Dog2", "");var typingSpeed = 50;
var i = 0;function typeWriter() {
if (i < message.length) {
var currentText = player.GetVar("Dog2");
currentText += message.charAt(i);
player.SetVar("Dog2", currentText);
i++;
setTimeout(typeWriter, typingSpeed);
}
}typeWriter();
Duplicate you project file before trying above!
If each slide contains unique variables for its text, then it seems that those variables may not have been properly referenced on each subsequent slide. Your JavaScript code itself doesn’t contain any syntax errors.
I've reviewed your file and added an additional slide that uses the same code structure but with different variables, each correctly referenced. It works as expected.
Do you have any other javascript in the course? What errors are showing in the console?
I think a more elegant way would be to have one text variable and then assign the value each time the slide loads and then run the execute trigger
Can you share how to do that
If that is the only javascript in your file I suspect you have typo perhaps you removed one of the " when you edited the variable name.
In the console (F12 in chrome) look for any errors, it may give a line number which you can look at in user.js
The better way would have been to have one trigger with the same variable and on each slide add a trigger to set the value, and then execute the JS
Thanks all, especially Nedim - this seems to be the issue!
