Forum Discussion

WilliamRyan-dba's avatar
WilliamRyan-dba
Community Member
4 months ago

Conditionally hide scene

Hi all,

I am working on a multilingual course and have set the menu to visible. I have it structured so that language 1 is in scene 1 to 10, and language 2 is in scene 11 to 20.

When the learner starts the course, all slides for all scenes appear. Is it possible to conditionally hide the other scene(s)? I'm concerned that having them all visible will create some confusion. 

Thanks in advance.  

  • ...in the past, I used custom navigation buttons for other courses, including courses with only one language, because 1) the extra work involved in creating the triggers, adjusting states etc. delayed development time and 2), the navigation buttons took up valuable slide real estate...

  • Basically this is what you need.
    const listElements = document.querySelectorAll('li div.cs-listitem.listitem');

       for(var i = 0 ; i < listElements.length; i++){
       listElements[i].id = 'list_'+i;
       console.log("list "+i);
       if(i > 4){
       listElements[i].style.visibility="hidden";
       }
       } 

    Depending on the exact setup of your project you need to figure out which of the listitems, as the menu in Storyline is just a <li> you want to hide.

    Here you can see a working sample.
    https://360.articulate.com/review/content/716c1463-079c-4b71-90db-fb59ede46e4f/review

    And attached my sample.

    As in my sample you can switch languages/li-items, there is an extra line to show all li's.

    Kind regards,
    Math

  • Thanks for the reply. Unfortunately my skills at JavaScript are next to nil and I don't really understand the code... I'm the VBA kind of guy. 

  • If you know VBA, javascript is a piece of cake :-)
    And Javascript is the only solution for this in Storyline.