Forum Discussion

EmilyGann's avatar
EmilyGann
Community Member
13 days ago

JavaScript works but doesn't appear in Storyline

Hi. I'm trying to get an array of months to quickly appear one at a time on a Storyline slide. I've tested the JavaScript separately and know it works. However, the problem seems to lie in getting it to appear when I preview the slide.

I've created a text box variable called "monthFlash" and have created a trigger to execute the following JavaScript when the timeline reaches 2 seconds. Am I missing something?

Thanks for any help!
Emily

const monthFlash = object('6UpCTO4zJV1'); 
let player = GetPlayer(); 
let monthInfo = player.GetVar("monthsAnimate"); 
let january = player.GetVar("January"); 
let february = player.GetVar("February"); 
let march = player.GetVar("March"); 
let april = player.GetVar("April"); 
let may = player.GetVar("May"); 
let june = player.GetVar("June"); 
let july = player.GetVar("July"); 
let august = player.GetVar("August"); 
let september = player.GetVar("September"); 
let october = player.GetVar("October"); 
let november = player.GetVar("November"); 
let december = player.GetVar("December"); 

let monthArray = [january, february, march, april, may, june, july, august, september, october, november, december]; 
function displayArray(array, delay) { 
let index = 0; 

function showNextElement() { 
if (index < monthArray.length) { 
monthFlash.textContent = monthArray[index]; 
index++; 
setTimeout(showNextElement, delay); 
} 
} 
showNextElement(); 
} 

const updatedVar = displayArray(monthArray, 300); 
updatedVar 
player.SetVar("monthFlash", updatedVar);

 

storyline 360

4 Replies

Sort By
  • Nathan_Hilliard's avatar
    Nathan_Hilliard
    Community Member
    13 days ago

    Without an example project, I'm not sure what you are doing exactly. I haven't used the JS API functions much however, I can suggest:

    1. line 32 looks like an error
    2. I don't believe textContext exists as a property or method on Object()
    3. The Object() function really just exposes the topmost wrapper of a slide object. This allows you to do things like move, scale, rotate, change state, etc. but it does not give you direct access to the actual HTML element or things like the contents of say a text box.
    4. If your goal is to assign a series of text strings to a text box on the slide, consider just using a SL variable reference (%variableName%) in the text box and setting that variable via JavaScript or a slide timer.
    5. Since displayArray() doesn't return anything, I don't know what line 33 is storing
  • SBP_Inc's avatar
    SBP_Inc
    Community Member
    13 days ago

    I don't believe JS is enabled/runnable in Preview mode, only published. Quite a pain

    • Nathan_Hilliard's avatar
      Nathan_Hilliard
      Community Member
      13 days ago

      In the later versions of SL 360, JavaScript does run in preview mode. There are some other features that do not operate, and you do have to be careful to publish enough of the project for everything to function as expected though.

  • JohnCooper-be3c's avatar
    JohnCooper-be3c
    Community Member
    13 days ago

    Nathan_Hilliard​ is absolutely right. I don't think you can change the contents of a text box in this way. .textContent won't affect Storyline objects.
    Even if monthFlash referred to a DOM element, I don't see how changing textContent would change what the learner sees in Storyline. To display text in Storyline, you update a variable using player.SetVar(), and that variable must be bound to a visible text box in the Storyline project as Nathan suggests. Once you have the variable reference in the text box, you could try something like this:

    let monthArray = [
      player.GetVar("January"),
      player.GetVar("February"),
      player.GetVar("March"),
      player.GetVar("April"),
      player.GetVar("May"),
      player.GetVar("June"),
      player.GetVar("July"),
      player.GetVar("August"),
      player.GetVar("September"),
      player.GetVar("October"),
      player.GetVar("November"),
      player.GetVar("December")
    ];

    let index = 0;

    function showNextMonth() {
      if (index < monthArray.length) {
        player.SetVar("monthFlash", monthArray[index]);
        index++;
        setTimeout(showNextMonth, 300); // 300ms delay between updates
      }
    }

    showNextMonth();

Related Content