Picture of Kevin Jones
DragDrop Component
by Kevin Jones - Friday, 12 September 2014, 5:11 PM
 

I'm working on a component that i'm happy to share... well... it comes with a big disclaimer that its a WORK IN PROGRESS and i've not yet done the tests or the readme stuff :)

Looking for feedback and any thoughts on what i've done badly in terms of 'the best way' vs 'my way'.

Demo : http://staging.n24i.com/multimedia/NC/KJ/adapt/

Git : https://github.com/KevCJones/adapt-dragdrop

General Notes

Main goal here was to leverage responsive side of adapt and implement a drag and drop excercise. Trying to think ahead to more annoying setups where the clients ask me to take said diagrams and turn into a drag and drop diagram.. fill in the gaps etc.

I'm not much of a designer, so i know its got a long way to go for making pretty. 

Be gentle ;)

Picture of Sébastien Bonte
Re: DragDrop Component
by Sébastien Bonte - Friday, 12 September 2014, 7:34 PM
 

Hi,

it's great. I love it! 

Already dowloaded but stil waiting for future upgrade!

Thanks

Picture of Kevin Jones
Re: DragDrop Component
by Kevin Jones - Sunday, 14 September 2014, 1:22 AM
 

Any immediate upgrades you would like just post here. I'll add to list.

 

k

Picture of Sébastien Bonte
Re: DragDrop Component
by Sébastien Bonte - Sunday, 14 September 2014, 2:32 AM
 

At this moment I've no suggestion but I've one problem: it just don't load!

When i build with the drag and drop component, the page don't load! Do you have any idea?

Thanks

Picture of Kevin Jones
Re: DragDrop Component
by Kevin Jones - Sunday, 14 September 2014, 11:56 AM
 

Hmm do you have a live link with code I could look at for you? It might be something I need to update in my framework version.

Picture of Kevin Jones
Re: DragDrop Component
by Kevin Jones - Tuesday, 16 September 2014, 11:24 PM
 

A few updates if you're interested, i tinker when i get time and add things as i need them. I'll keep this as a living thread for anyone who wants to ask for features or discuss limitations etc. 

1. I added a little more to the readme

2. I added support so you can have more draggers than dropzones (leftovers)

3. I made the example.json (and an example.less) that should work out of the box for demonstration purposes

Picture of Kevin Jones
Re: DragDrop Component
by Kevin Jones - Thursday, 18 September 2014, 9:48 AM
 

Minor update : Safari Jquery weirdness - I know now that $(id).css(bottom) on safari returns the pixel value but on Chrome i get the calculated value. 

Weirder still, left didn't do that, $(id).css(left) returned pixel values on both...

 

Solved by using $(id).position instead.. worked nicer anyway.

Picture of Ste p
Re: DragDrop Component
by Ste p - Wednesday, 28 January 2015, 12:39 PM
 

Hi Kevin,

Thanks for sharing the DragDrop component.  I am experiencing an issue positioning the draggable elements on the screen.  I downloaded the component as normal, edited the dragdrop.less using the example provided (then removed the example from the folder).

The draggable items always appear top left even though the positioning is there as described in the example.  I have noticed your medical example here and the problem is not present.  Any ideas what is causing my problem?

(This is on a mac using Safari, Opera, Chrome and Firefox)

Picture of Tom Taylor
Re: DragDrop Component
by Tom Taylor - Thursday, 29 January 2015, 11:46 AM
 

Missed this post the first time around, but just had a quick look at your demo, and would like to say - good job! Don't think I've seen an example of drag and drop behaviour in any Adapt components so far.

One thing to watch: you've used quite a few _.each loops. We've recently found that this can have a big impact on performance in old browsers (IE8 & IE9 specifically), as underscore has a load of extra function calls that fire for every each loop. See https://github.com/adaptlearning/adapt_framework/issues/507 for more info, and some related performance tests here http://jsperf.com/underscore-each-versus-for-loop

In most cases, using _.each should be perfectly acceptable, but we've taken to being very cautious after this find, so it may be something worth testing :)

Picture of Chuck Lorenz
Re: DragDrop Component
by Chuck Lorenz - Thursday, 29 January 2015, 1:36 PM
 

Thanks, Tom, for getting this performance tip out here. As someone who is focused on components, many of the lessons learned in coding the framework will pass me by. I follow the forums and occasionally review develop branches of contrib components, but it's rare when I'll jump into issues (especially closed issues) if I'm not trying to troubleshoot. 

Picture of Sébastien Bonte
Re: DragDrop Component
by Sébastien Bonte - Friday, 6 March 2015, 11:45 PM
 

Hi,

 

I've got some issues inclunding two drag and drop Component in the same page. 

The problem is: when the first one is answered, the draggable item of the second component aren't selectable anymore. 

 

Is there a way to put twice the same draganddrop component without problem? May i do something wrong? Is that a tutor problem?

Any help is welcome.

Thanks to all

Picture of khaled sayed
Re: DragDrop Component
by khaled sayed - Tuesday, 17 March 2015, 8:51 AM
 

Hi Sébastien Bonte

Can you please show me how you can use this component in the corse , i'm spend a lot of time trying without any result , I just install and regster it to the adapt tool only .

khaled

Picture of Gavin Nelson
Re: DragDrop Component
by Gavin Nelson - Tuesday, 14 July 2015, 3:48 PM
 

I'm also getting this issue with multiple instances of the component on same page.

I added an issue on github: https://github.com/KevCJones/adapt-dragdrop/issues/1 I'm going to try to fix this if i can and i'll update the issue with any more aspects i discover.

Picture of Helen Maffin
Re: DragDrop Component
by Helen Maffin - Wednesday, 15 July 2015, 9:30 AM
 

Amazing! Great work Kevin!

 

Is it Authoring tool compatible?

Picture of John Niezen
Re: DragDrop Component
by John Niezen - Thursday, 3 September 2015, 6:34 AM
 

Hi Kevin,


Our team also is impressed with this option, and like Helen, we would like to know it it can be loaded in the Authoring tool.

Question; Will you add graphic as well?

Picture of x z
Re: DragDrop Component
by x z - Friday, 4 September 2015, 6:47 AM
 

H5P has a nice drag & drop activity and other interactives that work on my iPhone. It's open source, but I'm not sure it is compatible with Adapt. Again the code issues are beyond me; however, plugins have been created for WordPress, Moodle, and other platforms. 

https://h5p.org/content-types-and-applications

-S

Picture of John Niezen
Re: DragDrop Component
by John Niezen - Thursday, 3 September 2015, 6:35 AM
 

Hi Kevin,


Our team also is impressed with this option, and like Helen, we would like to know it it can be loaded in the Authoring tool.

Question; Will you add graphic as well?

Picture of Ben Simons
Re: DragDrop Component
by Ben Simons - Thursday, 3 December 2015, 9:48 AM
 

Hi Kevin,

Love the component, looks awesome and works well, but I am having an issue where even when I get the question right it is marking it as wrong... I have changed anything from the example.json and the model answer doesn't change my answers. I'm pretty good with the alphabet and I'm positive that A is before B and so on. 

If I Paste the code in here could you have a look over it for me and see if I'm being stupid or not.

Many Thanks

 

{
"_id": "c-148",
"_parentId": "b-106",
"_type":"component",
"_component":"dragdrop",
"_classes":"",
"_layout":"full",
"_attempts": 2,
"_questionWeight":10,
"title": "Drag & Drop Component",
"displayTitle": "Drag & Drop Component",
"body": "",
"instruction":"Drag the items below into the correct slots. ",
"_buttons":{
"submit":"Submit",
"reset":"Reset",
"showCorrectAnswer":"Model Answer",
"hideCorrectAnswer":"Your Answer"
},
"_feedback": {
"correct": "This feedback will appear if you answered the question correctly.",
"_incorrect": {
"notFinal": "This feedback will appear if you answered part of the question correctly.",
"final": "This feedback will appear if you answered the question incorrectly."
},
"_partlyCorrect": {
"notFinal": "This feedback will appear if you answered part of the question correctly.",
"final": "This feedback will appear if you answered part of the question correctly."
}
},
"_background" : "<div class='bg-item bg-item-1'><p>What is the letter before 'B'?</p></div><div class='bg-item bg-item-2'>Which letter is after 'A'?</div><div class='bg-item bg-item-3'>Which letter is after 'B'?</div>",
"_draggableItems": [
{
"id" : "draggerA",
"class":"draggable-01",
"innerBody" : "<div>A</div>"
},
{
"id" : "draggerB",
"class":"draggable-01",
"innerBody" : "<div>B</div>"
},
{
"id" : "draggerC",
"class":"draggable-01",
"innerBody" : "<div>C</div>"
}
],
"_items": [
{
"id":"dropperA",
"class":"dropzone-01",
"innerBody": "",
"_accepted": [
{
"id": "draggerA",
"_isCorrect": true
},
{
"id": "draggerB",
"_isCorrect": false
},
{
"id": "draggerC",
"_isCorrect": false
}
]
},
{
"id":"dropperB",
"class":"dropzone-01",
"innerBody": "",
"_accepted": [
{
"id": "draggerA",
"_isCorrect": false
},
{
"id": "draggerB",
"_isCorrect": true
},
{
"id": "draggerC",
"_isCorrect": false
}
]
},
{
"id":"dropperC",
"class":"dropzone-01",
"innerBody": "",
"_accepted": [
{
"id": "draggerA",
"_isCorrect": false
},
{
"id": "draggerB",
"_isCorrect": false
},
{
"id": "draggerC",
"_isCorrect": true
}
]
}
],
"_pageLevelProgress": {
"_isEnabled": true
}
},

Picture of Mike Stevens
Re: DragDrop Component
by Mike Stevens - Tuesday, 22 March 2016, 4:01 PM
 

Hi just wanted to mention another good Drag and drop component that I recently got working with the Adapt Authoring tool. I forked the original component and added a couple extra features and works well with authoring tool now too. Here is the link if interested...




https://github.com/mike-st/adapt-dragAndDrop


Picture of Sam Tsiu
Re: DragDrop Component
by Sam Tsiu - Wednesday, 23 March 2016, 3:53 AM
 

Thanks for sharing this, Mike.

Just watched your intro video of this component on youtube, it looks very good.

Cheers

Sam

Picture of Matt Leathes
Re: DragDrop Component
by Matt Leathes - Tuesday, 19 April 2016, 2:39 PM
 

Hi Mike

I see from the underlying code that this gets swapped out for 'objectMatching' on small screens. Do you happen to know if this is that component?

Picture of Mike Stevens
Re: DragDrop Component
by Mike Stevens - Wednesday, 4 May 2016, 11:14 PM
 

Hi Matt. It did use the objectMatching but I have removed it as I wanted to keep the drag and drop working on iphone, android phones. I used less to make it much more compatible now.

Picture of Mike Stevens
Re: DragDrop Component
by Mike Stevens - Thursday, 5 May 2016, 12:48 AM
 

Picture of Sébastien Bonte
Re: DragDrop Component
by Sébastien Bonte - Monday, 25 April 2016, 3:38 PM
 

Hi Mike,

I tried to upload the zip file of the drag and drop component on the authoring tool but the upload failed. I tried the first version and the second you promote to be compatble with the authoring tool.

 The authoring tool told that the upload failed but it appears on the component liste but i cannot edit, i see the following message: 

Cannot read property '_extensions' of undefined

What can I do?

 

Thank you so much

Picture of Mike Stevens
Re: DragDrop Component
by Mike Stevens - Wednesday, 4 May 2016, 11:15 PM
 

If you are using an earlier version of the authoring tool which is before Version 2. I don't think it will work.

Picture of Stephen Harlow
Re: DragDrop Component
by Stephen Harlow - Tuesday, 14 June 2016, 10:58 PM
 

Hi Mike

Thanks for the work on the drag'n'drop component. I just wanted to report some odd behaviour.

When I installed the component and then added it to a block I got the "Cannot read property '_extensions' of undefined" error described by Sébastien above, however, when I logged out of the authoring tool and back in again the component behaved as I would expect.

When I generate a preview however the images are missing and instead the relative path to the image is displayed, i.e., course/en/assets/7155fce49f63734b91afa12512ce4ef67a2048e1.png. Other than this the drag'n'drop functionality works well!

I'm using version 2.0.10 of the framework and 0.17 of the authoring tool.

Any ideas what might be going wrong?

Cheers

Stephen

 

Picture of C OCaoimh
Re: DragDrop Component
by C OCaoimh - Tuesday, 21 June 2016, 1:10 PM
 

Hi, 

First, thanks for all the work done on the component. I've noticed that when I install it (https://github.com/mike-st/adapt-dragAndDrop) with the Adapt CLI:

  • The feedback displays the component title and not the feedback title
  • The feedback body displays [object Object] 
  • There are no ticks or crosses next to the correct answers.

Is there something that I'm missing here?

Thanks in advance for your help.

Cormac



Picture of Matt Leathes
Re: DragDrop Component
by Matt Leathes - Tuesday, 21 June 2016, 4:32 PM
 

It looks to me like the example.json for that component isn't right - it doesn't match what's listed in properties.schema (a file that tells the authoring tool how the json should be structured) for a start

The feedback json for a typical question component looks like this.

Picture of C OCaoimh
Re: DragDrop Component
by C OCaoimh - Monday, 4 July 2016, 11:36 AM
 

Hi Matt,

Thanks for that. I'd tried to modify  the feedback so that matches that of other components but it wouldn't compile. 

I'm looking into it with a developer. 

In any case, I suspect that what I'm really looking for is component that will allow us to match sentences together. Here's an example of what I'm looking for from the venerable HotPotatoes:

http://www.ewbooks.info/hotpot/assets/taxonomy/L-multipleMatch1-1.htm

This pretty much means making a component from the ground up.

Thanks again for the help!

Cormac

 

Picture of Mike Stevens
Re: DragDrop Component
by Mike Stevens - Friday, 8 July 2016, 8:20 PM
 

Hi I have fixed the marking on the drap and drop so it works now with the newest adapt authoring tool 1.7. It was just a fix for the less file i needed to make. Here is the link...

 

https://github.com/mike-st/adapt-dragAndDrop

 

Picture of Stephen Harlow
Re: DragDrop Component
by Stephen Harlow - Sunday, 10 July 2016, 10:52 PM
 

Thanks Mike, oddly, when I preview a drag'n'drop component the image still does not render. Instead I see the relative path to the asset, e.g., course/en/assets/xxxx.jpg Otherwise the component behaves as expected; I can drag the path over the drag area and submit to get feedback. Am I missing something to get the graphics to display? I'm using the latest version of the Authoring Tool.

Picture of Mike Stevens
Re: DragDrop Component
by Mike Stevens - Tuesday, 12 July 2016, 8:37 PM
 

Hi Stephen

That is kind of weird it is not working from the image path you gave me as that is correct. I attached a screen shot and inspected the element so you can see we are using the same path for the images in the drag and drop. I am using 1.7 authoring tool. I am wondering if you should try and take out the component by removing it in the mongodb database and then delete the drag and drop folder in the "temp" + "plugin" folders with in the authoring tool. Perhaps a fresh upload of the plugin will help and fix the issue as it is working okay for me. 


Picture of Pippo De Paperis
Re: DragDrop Component
by Pippo De Paperis - Friday, 14 October 2016, 4:09 PM
 

Hi Mike,

 

I really like the demo of your component and I'd like to start using it. However, I'm having an issue getting it to work in the Authoring tool v2. I am using the vagrant version. I loaded the component as a plugin, but when I add it to a block and go into the options, I only see the basic component option, but there's no additional option to set up the component (screenshot attached).

I guess maybe something went wrong when I loaded the component. What do you suggest I can do to try and troubleshoot this?


Picture of Mike Stevens
Re: DragDrop Component
by Mike Stevens - Friday, 21 October 2016, 5:59 PM
 

Hi Pippo

I am thinking something may have gone wrong with the upload. Perhaps delete the component from mongodb database using robomongo and then remove the component in the temp and plugin's folders and try re-uploading the component again. It may be missing in the temp folder if so add it there and that will fix the problem right away. Hard to say what the issue is... I am currently using it with no issues right now in AT 0.2.2 but I am not using vagrant to run the authoring tool.

Picture of Helen Maffin
Re: DragDrop Component
by Helen Maffin - Monday, 24 October 2016, 12:10 PM
 

Mike how did you get it in the AT without properties.schema?!

EDIT - Ah sorry I thought we were still talking about KevCJones' drag and drop.

Picture of Mike Stevens
Re: DragDrop Component
by Mike Stevens - Monday, 24 October 2016, 1:37 PM
 

Hi Helen

I wrote the properties.schema myself but was based off of another drag and drop not KevC one, but think you sorted that out already. I did the same for the cover menu too.

Picture of Helen Maffin
Re: DragDrop Component
by Helen Maffin - Monday, 24 October 2016, 12:10 PM
 

Pippo - how did you manage to upload this to the Authoring tool without a properties.schema?

EDIT - Ah sorry I thought we were still talking about KevCJones' drag and drop.