Forum Discussion

SChen-65's avatar
SChen-65
Community Member
2 months ago
Solved

Setting Data Entry Object Focus & Auto-Advance to Next Slide When Correct Value is Entered

I am trying to create an application simulation that requires the data entry field on a single slide to have focus when the timeline starts so the learner inputs specific text (word = Profile) into a data entry field WITHOUT clicking the field AND once the entire word is confirmed in the data entry field (value = Profile) the slide will automatically jump to the next slide. 

1) I attempted to use the SetFocus Trigger to set focus on the data entry field, but it has that awful thick black border and gross yellow glow. I have not figured out how to change the properties of the SetFocus Trigger, if there an option to do that. I searched E-Learning Heroes using a number of different criteria, but only getting posts that discuss layer and base layer set focus, not slide object focus. I even removed the Alt Text setting under Size and Position properties in the Slide Master that was recommended by Phil in a different community post.

2) I tried to modify Phil Mayor's Storyline blur_jump.story file to suit my scenario and just can't seem to get it to work. I am new to JavaScript. Some of the naming conventions in Phil Mayor's blur_jump.story file are a little challenging since he did not have any programming notes in the JavaScript code; I am not getting the gist of his JavaScript program in the triggers in order to have it function the way I need it to. It has been quite a while since I have done any programming code (used to program in Visual Basic), but I have a very logical mind. 

Using Storyline 360 X64 version in Windows. Anyone have any recommendations to offer on how to set focus on a search text entry object without having to use that terrible Set Focus trigger or how to get the slide to jump to the next slide if the learner types the entire word "Profile"? 

Your feedback would be greatly appreciated. :) - S

5 Replies

  • SChen-65's avatar
    SChen-65
    Community Member

    Thanks, Nedim,

    Your JavaScript worked!!! I truly appreciate your JS knowledge. Your code makes sense. Once I publish the course to Review 360, I will need to make sure the slide still functions as intended.

    I did see the Event Listener command on https://www.w3schools.com/ but still trying to understand the JS statements and syntax. I will definitely pursue the tutorials at https://www.w3schools.com/ much further. 

    For the benefit of others in this great community, here is the coding Nedim provided (I added some comments - Nedim, are my comments a correct description of the coding?): 
    -----------------------------------
    // Setting JS variable:
    var input = document.querySelector('.acc-textinput');

    // Setting focus on the data entry field:
    setTimeout(() => {
      input.focus();
    }, 100);

    /* 
    Use value of JS variable and assign directly to the Storyline 
    project variable instead of manually setting an object trigger to set 
    the variable to the typed value that requires an event on the object 
    such as loses focus. 
    */
    input.addEventListener('input', function() {
        var inputValue = input.value;
        setVar('WordProfile_SC', inputValue);
    });
    --------------------------
    Then, the separate trigger with conditions for jumping to the next slide will process.

    If I have further questions, I will add to this post. The Storyline community is the best!

  • SChen-65's avatar
    SChen-65
    Community Member

    Just tried to preview the entire project story file again. Now the Search Text Entry object does not have focus and requires the learner to click the field to begin typing the word Profile. Also tried previewing only the single scene itself with the same result. The www.w3schools.com reference states: 

    * The Window setTimeout() method is executed only once.

    * If you need repeated executions, use setInterval() instead.

    * Use the clearTimeout() method to prevent the function from starting.

    Do I need to use setInterval() instead and stop the execution after X milliseconds? Thoughts? 

    • Nedim's avatar
      Nedim
      Community Member

      I was not able to replicate this issue. In your case, it could be that the browser hasn't finished rendering the input field when setTimeout(..., 100) runs. If the input isn't fully interactive when focus() is called, the focus might not take effect. The current execution stack is cleared, but that still might be before the input is ready to be focused. Try increasing the delay from 100ms to 200ms.

      Set Timeout vs Set Interval

      • More Efficient → setTimeout runs once, while setInterval keeps running until stopped. Since you only need to focus the input a few milliseconds later, a single delay is usually enough.
      • No Need for Cleanup → setInterval requires clearInterval() to stop unnecessary retries, whereas setTimeout doesn't need extra handling.
      • Simpler & Less Processing → Running setInterval repeatedly for something that succeeds on the first or second attempt isn't efficient.
      • Use setInterval only if there’s a high chance the input won’t be ready within a fixed delay (e.g., dynamically loaded content). In that case, you need multiple retries.


      Set Interval Example:

      var input = document.querySelector('.acc-textinput');
      
      function focusWithInterval(maxRetries = 3, intervalTime = 100) {
          let attempts = 0;
      
          let intervalId = setInterval(() => {
              input.focus();
      
              if (document.activeElement === input) {
                  console.log("Input is in focus!");
                  clearInterval(intervalId);
              } else {
                  attempts++;
                  console.log(`Focus attempt ${attempts} failed. Retrying...`);
      
                  if (attempts >= maxRetries) {
                      clearInterval(intervalId);
                      console.log("Failed to focus input after multiple attempts.");
                  }
              }
          }, intervalTime);
      }
      
      focusWithInterval(3, 100);
      
      input.addEventListener('input', function() {
          var inputValue = input.value;
          setVar('WordProfile_SC', inputValue);
          console.log(`Updated variable: WordProfile_SC = ${inputValue}`);
      });

      While this works (logs show that the input is always focused on the first attempt after a 100ms delay), it feels like overkill and somewhat redundant. I suggest sticking with setTimeout for simplicity.

  • SChen-65's avatar
    SChen-65
    Community Member

    Thanks, Nedim,

    This makes sense. I will test out increasing the Set Timeout 100ms delay to 200ms. Thanks again!