HTML5 Drag and Drop not working with "answers"

Hi All,

I am creating a drag and drop activity with 5 drag items and 5 drop targets. All works fine in flash, but only works in HTML5 when there is one drag item image. Whenever I insert additional drag items, no drag items appear in the HTML5 output, rendering the drag and drop useless.

I have tested using tempshare and in multiple browsers (IE9, Firefox v20 and Chrome).

I have also made sure there are no transparent images.

Please help!

3 Replies
Christine Hendrickson

Welcome to E-Learning Heroes, Steve!

Out of curiosity, is this happening when you're viewing the HTML5 content on your PC, or on your iPad, or both?

I'm guessing you're referring to this article about transparency:

Drag-and-Drop Interaction Isn't Working in HTML5 Output

What type of Drag-and-Drop quiz are you using? Are you using the default template, or a freeform?

Do you have access to another server where you can test this? Tempshare is a great temporary host, but it may help to try placing the project elsewhere, just to help narrow down the cause of the issue.

Thanks and welcome again!


Steve Wilkins

Hi Christine,

Thanks for your reply. I am viewing the HTML5 component of my freeform drag-and-drop on a PC, but i have managed to solve the problem!

The issue was (I think) caused by the order of the layers of the drag item images. I made sure that these layers were in the same order as the sequence in which the drag items appear (i am using the drag-and-drop option for items to appear one at a time).

SO happy to have resolved the issue and greatly appreciate your response. This is the first time I have used Articulate Storyline, and I have 20 days left of my 30-day trial as my organisation makes a decision on e-learning software. I will definitely be recommending Articulate. I love it! Never had so much fun at work!

Steve Wilkins

NSW Department of Education