Dynamic Sorting activity

Apr 26, 2024

Vishakha Hegde
By Vishakha Hegde

I am trying to build an activity where there are 43 cards to be sorted into 5 categories and the slides ahead display the results visually. 

Slide 1 - Visual Setup: 43 rectangles (with text on them) stacked behind one another and 5 rectangles representing the 5 categories. To keep this simple, I'll name the cards as card1, card2..and the categories as mostImportant, extremelyImportant, very important, somewhatImportant and notImportant. 

Submit button

Slide 1 - what's happening: Drag and drop activity is completed once learner submits activity using the button and jumps to the mostImportantDisplay slide. Also, there is a limit on how many cards go into each category (9 to be precise).

Slide 2 (mostImportantDisplay) - Visual Setup: 9 placeholder rectangles which each display the content of the cards sorted into this category. So card 4, card 6, card 15, card 22, card 26, card 33, card 40 and two blank rectangles because let's say only 7 were sorted into this category.

Slide 3 (extremelyImportantDisplay) and so on with the results' slides in Slide 4, Slide 5 and Slide 6.

Can this be done using Storyline and Javascript? Maybe recording all the drop events using Javascript and setting up a trigger for the submit button. Also then pushing dragged objects into category arrays and then accessing each of the arrays individually and assigning them to storyline variables. And then changing the states of the rectangles on the results' slide to match the values held by the storyline variables. Would really appreciate any help or direction with this one.

Thanks,

Vishakha

2 Replies
Nathanial Hilliard
2 days ago05/07/24 at 5:51 pm (UTC)

Hi Vishakha. I've done something similar with 24 card-like objects sorted across three targets. I did not use a formal Drag and Drop question, but just the Drops the Object On triggers. Your planned approach seems more or less correct. You would want SL variables to track how many cards are in each drop stack, where each card was dropped (allowing for repositioning if desired). For slides 2 and beyond, you could use some JS to scan all the SL card position variables, and set five SL variables to indicate which of the 43 states each of the placeholders should be, then set them using triggers. One JS routine with a flag SL variable indicating each of the 5 possible outcomes would minimize code and extra SL variables/triggers. You probably don't need any arrays.

As for limiting each stack to 9 card drops, you might search for info on the 0px move trick for resetting dropped items to their starting point. Attach a move animation with length 0px to each of the 43 cards. If the drop count for any given stack exceeds 9, reject the card by triggering its 0px move animation and reset the count to 9.

Sign In to Reply