Forum Discussion

ChiaraMiglietta's avatar
ChiaraMiglietta
Community Member
27 days ago
Solved

User-side subtitle customization.

Hi everyone, is it possible to create triggers linked to the textboxes used as caption so that the user can change the font size by clicking a button?

I tried, but an overlap occurs between the states of all the textboxes created as caption. Thank you so much.

  • If you're referring to the built-in captions, what you're asking for is achievable with the help of JavaScript. You can create either a button or a slider version, where the font size changes accordingly when the buttons are clicked or the slider is moved. Below are some examples to illustrate how this can be done:

    Slider version

    Buttons version

  • I did it!!! Thank you very very much for the help and the time you dedicated to me.

    • Nedim's avatar
      Nedim
      Community Member

      I'm glad you did it! You are welcome!

  • Yes, I would like to give it a try, can you help to write the JavaScript code and set it up? Thank you

    • Nedim's avatar
      Nedim
      Community Member

      Steps to Recreate the Slider That Dynamically Changes the Captions Font Size:

      Step 1:
      Create a slider with the following properties. Take note of the slider variable automatically generated by Storyline.






      Step 2:
      Create a custom text variable named fontSize and set its default value to 100%.


      Step 3: 
      To reference and display the fontSize variable on the slide, type %fontSize% in a text box or insert it directly into the text box as shown below. (Skip this step if you don’t want the font size to be visible on the slide.)

      Step 4:
      Create two triggers as follow:










      The first trigger is optional. It automatically displays the captions (CC) when the timeline starts on the slide. For the second trigger, click "JavaScript" and paste the code below:

      const captions = document.querySelector('.caption-container');
      let sliderValue = getVar('Slider1'); // Slider1 or whatever Storyline generated for you
      
      captions.style.fontSize = `${sliderValue}%`
      setVar('fontSize', captions.style.fontSize); // it updates the fontSize variable created in Storyline

       I am attaching the working version for reference, just in case I’ve missed anything.

      • ChiaraMiglietta's avatar
        ChiaraMiglietta
        Community Member

        Hi Nedim, can I copy the slider in all the layer and mantain the javascript for the size of cc? Thank you very much

  • Thank you very much. Is this solution also applicable to SCORM 1.2 courses to be used on an LMS platform, or only for web-based courses?

    • Nedim's avatar
      Nedim
      Community Member

      Yes, the JavaScript code will execute regardless of whether the course is published to SCORM, Web, or Review 360. I recommend using the slider version, as the code is short, easy to update, and simple to understand—even for those who are not familiar with JavaScript. Let me know if you want to give it a try, and I'll help you set it up.

  • Nedim's avatar
    Nedim
    Community Member

    If you're referring to the built-in captions, what you're asking for is achievable with the help of JavaScript. You can create either a button or a slider version, where the font size changes accordingly when the buttons are clicked or the slider is moved. Below are some examples to illustrate how this can be done:

    Slider version

    Buttons version