Forum Discussion

KeithShull_VO's avatar
KeithShull_VO
Community Member
8 months ago
Solved

Force the menu to only show slides from selected scenes (not the whole project)

Hoping this awesome community of Heroes can solve this challenge. I have an assessment-only SL project with 7 scenes; each scene has its own question bank. All users complete scene 1. After that,...
storyline 360
  • Nedim's avatar
    Nedim
    8 months ago

    I think it looks just fine. Please email me at nedim.ramic@gmail.com  so I can send you the .story file along with a few important details you should be aware of.

Nedim's avatar
Nedim
Community Member
8 months ago

Ideally, only Scene 1 should be displayed in the menu. The other scenes can likely be hidden using JavaScript. Once a selection is made, we could dynamically reveal the selected scene in the menu, and the first scene if needed.

If you can provide more details about your structure or even better a mockup .story file, I may be able to assist further. This is how I did it in a sample project:



CRios's avatar
CRios
Community Member
5 months ago

Hi Nedim​, can you please share your sample .story file with the custom menu example above? This other discussion shows using a menu icon, and not the player. We'd like to customize which slides are shown in the player menu like you have shown above. 

  • Nedim's avatar
    Nedim
    Community Member
    3 months ago

    Sorry CRios​ I didn’t see your repost earlier. I just returned to this thread to review and noticed your message. Let me know if you still need the file, and I’ll be happy to get back to you with it.

    • JosephKalouch's avatar
      JosephKalouch
      Community Member
      2 months ago

      This is great Nedim! Could you share the .story file? This is exactly what I was looking for. Thank you! 

      • Nedim's avatar
        Nedim
        Community Member
        2 months ago

        Hello Joseph,

        I've attached a .story file as a reference. This simple example includes a selection scene and two additional scenes. Each scene's visibility is controlled based on the user's selection on the selection slide. The JavaScript is placed in the Slide Master. If your project uses multiple Slide Masters, make sure the JS trigger is included in each one.

        • If you add more scenes, make sure to:
          • Create a variable for each new scene.
          • Include each scene variable in the sceneMap object in the JavaScript code.
        • If you rename the selection scene, update the code accordingly (e.g., ["Scene selection"] should reflect the new name).
        • On the selection slide, if you add more buttons for new scenes, create triggers that update the corresponding scene variables, just like the existing triggers shown in the example file.

        const sceneMap = {
    "Scene 1": getVar("scene1"),
    "Scene 2": getVar("scene2"),
    // Add more as needed
};

// Get list of active (true) scenes
const activeScenes = ["Scene selection"]; // always keep this one
for (const [sceneTitle, isActive] of Object.entries(sceneMap)) {
    if (isActive) {
        activeScenes.push(sceneTitle);
    }
}

const menuItems = document.querySelectorAll('.is-scene');

// Reset and control visibility
menuItems.forEach(menu => {
    const title = menu.getAttribute('data-slide-title');
    menu.parentElement.style.display = activeScenes.includes(title) ? "" : "none";
});

        EDIT: My file won’t go through. I’ve tried many times, but the issue is on my end. If you don’t mind, please send an email to mailto:nedim.ramic@gmail.com and I’ll reply with the attached file. I’ll be off on a 10-day vacation starting next week, so hopefully I can send it to you before then. Sorry about that.