Freeform - Drag and Drop is not working in HTML5 (Articulate Storyline 2)

Hi Articulate,

I am using "Freeform - Drag & Drop" for my quizzing slide in Articulate Storyline 2. I kept the Drag & Drop Options for Slide 1 as (Refer the image on slide 1 of the attachement):

Drag Item Options - "Checked" for "Return items to start point if dropped outside".
Dropdown selected as - "Any drop target"
Drop Target Options are all unchecked.


I have used 3 drop objects and 2 drop targets. HTML published output is working perfect. HTML5 output behavior is having issues, once I complete the quiz and click on "Review Quiz" button, the review page will show all the drop objects back to their respective initial positions but ideally it should be on the drop targets.

Same issue with one more Drag & Drop Options as in Slide 2 (Refer the image on slide 2 of the attachement):

Drag Item Options - "Checked" for "Return items to start point if dropped outside".
Dropdown selected as - "Any drop target"
Drop Target Options - "Checked" for "Snap dropped items to drop target"
Dropdown selected as - "Free"
Kindly look into this issue and provide me the solution.

21 Replies
chris King

I've also come across a similar issue but the results were inconsistent.  Drag and drops were working with objects/textboxes, but not if I used an image. However this was working if I previewed or used Flash output so I didn't pickup the issue until it was uploaded to our server! Seems this is a bug with the HTML5 output from Storyline and more the reason why Storyline needs a HTML5 preview feature.

I did manage to create a workaround. I created a box and filled it with the image I wished to use for each drag and drop interaction. I hope this workaround helps others. 

Alyssa Gomez

Hi there Chris, 

Thanks for reaching out. Can you explain a bit more about how the Drag and Drop interaction should be behaving vs. how it is actually behaving? In the initial discussion, the user reported that when reviewing the Drag and Drop interaction, all the drag objects are back to their respective initial positions, but ideally they should be on the drop targets. Is this what you're seeing?

Also, can you confirm that you are testing your content in the environment in which it was published and with a supported browser?

It might also be helpful if you could share your file here in the forum so we can test it on our end. You can use the Add Attachment button at the bottom of the reply window. 

Sara F

Hi - this thread is a little old, but am wondering if there has been any resolution to the issue of drag and drop interactions not working appropriately in HTML5.

I've attached one quiz as an example.

When viewing in HTML5:

  • 'Try Again' feedback flashes quickly on screen when user chooses correct answer before moving to next slide. There are no 'Correct' layers on the first 4 quiz questions.
  • On last question slide where there are both 'Try Again' and 'Correct' layers, the correct answer brings up the 'Try Again' layer and the user has to choose the correct answer again before getting the 'Correct' layer.

It works appropriately in HTML. We have been testing in both SCORM Cloud and our LMS (SumTotal). Works fine in IE but not in Chrome (unless you enable flash).

Thanks for any advice!

Alyssa Gomez

Hi there Sara! 

Thanks for sharing your file with me. I made a couple of changes, and now it should be working the way you intended. Here's a link to the published HTML5 output if you'd like to test it. 

A summary of the changes I made:

  • If the learner drags the question to the incorrect answer, I set up a trigger to show the Try Again layer.
  • If the learner drags the question to the correct answer, I set up a trigger to jump to the next slide.
  • I removed all other "Submit Interaction" triggers.

I hope that's helpful!

Leslie McKerchie

Hi Eric,

It sounds like you've run into an issue we are working on. Are your drag items set to shuffle and you have a slide background?

Let me know if that sounds like your set-up and I'll be sure to add this thread to the report as we track user impact and so I'll be able to update you here when I can.

Workarounds:

  • Change the Shuffle behavior to None
  • Remove the background shape or graphic
Leslie McKerchie

Hi again Eric,

Great news!  We just released another update for Articulate 360, and included a few important fixes that you'll see in the release notes here

The item you'll be interested in is:

Fixed: In drag-and-drop interactions, drag items might return to their original positions during quiz review or be hidden by other objects.

Just launch the Articulate 360 desktop app on your computer and click the Update button for Storyline 360. Details here.

Please let us know if you have any questions, either here or by reaching out to our Support Engineers directly.

Andrew Ferguson

I'm wondering if this relates to an issue I'm having also with drag and drop interactions. We have it on Review now and am getting inconsistent reports of the interactions working for some and not others. I've published in the HTML5 with Flash fallback mode.

Should this update you speak of correct the issue?

Description: Dragging words into boxes. Some users report they can't drop the words into the boxes hence submit the interaction. They then get stuck on that page and can't progress. I've not been able to create the issue from two other PCs in my server environment on both IE or Chrome.

Thanks,
Andrew

Andrew Ferguson

I didn't actually, thanks for suggesting that. It appears it might be an unsupported browser issue.

Andrew Ferguson, CTDP
Curriculum Designer
Ontario Police College | 519-773-4220
Ministry of Community Safety and Correctional Services | Ontario Public Service
[https://media.licdn.com/mpr/mpr/shrinknp

Leslie McKerchie

Hey Andrew,

You can find the supported viewing environments in our system requirements documentation here.

If you're still having difficulty, we'd be happy to take a look at your .story file if needed.

It also looks like your email signature came through when you replied via email. You can remove that if needed by clicking ‘Edit’ beneath your response. Here’s a quick Peek video if you need help.