Storyline 360 - Get element in drop target through JS

Oct 28, 2023

I was Wondering if it was possible to get an elements which is in drop target through JavaScript in Storyline 360.

The situation is the following: I got 20 elements and 20 drop targets (numbered from 1 to 20). This allows the user to drag any element onto any target, resulting in a custom order for these 20 elements (e.g. element 1 on target 18, element 2 on target 10, element 3 on target 5, ...).
Now I am trying to save that order in a JavaScript object to create a PDF of it (using JSPDF), something like that:

var elementObject = {
1: "element 8",
2: "element 12",
3: "element 5",
4: "element 19",
...
};
Since you can only determine wheter an element is dropped on a correct or an incorrect target in Storyline, I can't use Storyline's native functionalities for this. Every drop target is the correct one, since you can freely set a custom order.

Does anyone know how to achieve this? Or a workaround to get that result? Doesn't have to be tidy and clean, just working :)

2 Replies

Randall Wurster

26 days ago04/02/24 at 12:25 pm (UTC)

Upping - have a similar Q.

John Cooper

26 days ago04/02/24 at 9:23 pm (UTC)

Have you considered using the JavaScript library pdf-lib rather than JSPDF?

The reason I say this is because we use it to fill in pdf forms. You can create a pdf template with named fields and then use JavaScript to read the variables from Storyline and drop them into the fields in the pdf. So if your objects were text blocks it would be very simple....

...However, it is also possible to insert a png image into a field and we do use this when creating a downloadable survey form e.g.

The slider button is a small png file which we can insert into the appropriate fields (there are 50 fields in the sample above). using the user's slider responses we use a .setImage(pngimage) command to fill in the corresponding field with the button. I haven't tried it with larger images but I see no reason it wouldn't work.

So you could have 20 fields in your pdf template and then just drop the appropriate image element into the fields in the order your user positioned then in the drag and drop exercise (by testing for an intersection of the image object and your position boxes).

Hope that helps - it would certainly be interesting to try this approach.

Best regards