Using variables to generate organized lists
Mar 11, 2024
I'm currently working on a tool where people select items from a long list. Each item is coded into two variables (in this case environment type and evidence base). I'm trying to create a screen where the selected items show up on a matrix that shows where they fall in terms of environment type.
What I've done so far is create a true/false variable for each item selected in the check-off list. When the item's box is checked, the variable is changed to true. The results slide has all items in a "hidden" state using text that matches the slide background color. I set a "true" state that changes the text color to black. When the timeline starts on the results slide, items that were selected change state to true.
The problem with this method is that long gaps between items in the list can occur depending on what gets selected, and it's not the most accessible for screen readers. I'm wondering if there is a javascript code that can be written instead so that only the items selected are shown in order.
I've attached a project sample for reference
2 Replies
There is a sample that does this sort of sorting at this discussion:
https://community.articulate.com/discussions/articulate-storyline/sorting-and-organizing-lists
Hi Brent,
The first slide won't work properly if the user selects a checkbox and then unselects, or clicks a checkbox multiple times, because your triggers are adding 1 every time a checkbox is clicked, whether it's selected or not.
In the attached file, I have re-done the triggers and added a layer to accumulate the selections. The first slide also accommodate users who advance to the next slide but then want to come back and change some of their selections. I won't go through the details here, but if you study the triggers on the layer and base layer, I think you'll understand what I have done.
Next, I added an Execute JavaScript trigger on the last slide in order to accommodate your desire to remove blank lines in the boxes. The sample Walt linked to is much more efficient than my JS code in that he uses a loop. I elected to spell out each line rather than use a loop (or in this case, nested loops) to make it easier for you to understand in case you're unfamiliar with JavaScript. The code seems long but it's really just a handful of lines being repeated over and over again to accommodate the 7 of 9 boxes that could display one or more values.
I'm happy to answer any questions.