Forum Discussion

ELOUPEI's avatar
ELOUPEI
Community Member
15 hours ago

Getting Objects to Appear on a Different Slide

In this interaction, the participant selects 3 of 10 objects (buttons) on slide 1.2. 3 of 10 on slide 1.3 and 4 of 15 on slide 1.4. Then, on slide 1.5, the 10 objects the participant had selected should appear, as a review to show them what they selected.

I wanted to try doing this using just Javascript instead of a multitude of triggers but I'm stuck as the final slide does not display the objects but instead displays the words "None selected".

1 Reply

  • Nedim's avatar
    Nedim
    Community Member

    It took quite a bit of trial and error on my end. It was definitely a complex and challenging one to figure out. However, your scripts have one major assumption that will not hold in Storyline 360. Storyline objects usually do not expose their visual states through a data-state attribute. As a result, parent.getAttribute('data-state') will almost always return null, causing "None selected" even when objects are selected.

    What you need to build for your scenario is a live selection tracking system using the Storyline API obj.state property. Instead of checking all objects once and building a list based on the order they are defined in the script, the script should continuously monitors each Storyline object reference and reads its current state through obj.state.
    Example: if (obj.state === "_default_Selected")

    Above uses the Storyline API object reference to determine whether the object is currently in the Selected state. When the API reports that an object has entered _default_Selected, the object name is added to a tracking array. This array preserves the learner's actual selection order because values are added at the moment the API detects the selected state.

    I used the script that uses setInterval(100) to repeatedly query the Storyline API object states every 100 milliseconds, allowing it to react dynamically when learners select or deselect objects. The final output variables (Value1, Value2, Value3) are generated from the tracked selection array rather than directly from the Storyline object list. This means the displayed result follows learner interaction order instead of the order in which objects appear in the code.

    I’ve added a few more variables (one for each slide) to flag when too many objects are selected. This allows me to display a warning message prompting the learner to select only the required number of objects and controls whether the warning layer is displayed.

    I also removed the "Hover" and "Visited" states from each button so that _default_Hover_Visited_Selected, and _default_Visited_Selected don't interfere with the _default_Selected state. This allows the script to process the "pure" Selected state more efficiently, making the overall script run faster.

    I built it the way I would for my own projects. The only remaining consideration is whether you want to enable the Next button only when the required number of objects is currently selected. Without going into too much detail, please find the attached .story file and let me know how it works on your end.