HTML5 drag and drop quiz

[Rezu]

Howdy,

Curious to know if anyone has any code/info on creating a drap and drop quiz in HTML5.

Much Thanks!

[Nancy OShea]

This will require a combination of web technologies.

Have a look at Adobe Edge Preview.

http://labs.adobe.com/technologies/edge/

Nancy O.

Alt-Web Design & Publishing

Web | Graphics | Print | Media  Specialists 

http://alt-web.com/

[Rezu]

Hi Nancy,

Thanks for the info...I've been working on other projects using Edge...very cool tool. Don't have enough wherewithall to get it to do DnD quizzes.

I spied an HTML5 DnD demo by Remy Sharp... http://html5demos.com/drag ...it's keen and also works in IE, but again, I'm looking for DnD quizzing functionality in HTML5 (maybe it doesn't exist yet?) and I don't have the skills to create it.

Thanks for any help.

[Rezu]

Anyone know where one can purchase the code/template for a drag and drop quiz?

Thanks,

k

[John Waller]

What do you mean by a drag and drop quiz? Got any links to online examples of what you've got in mind?

[Rezu]

Hi John,

Thanks for the reply...what I'm looking for is something akin to this...

http://www.infosemantics.com.au/adobe-captivate-widgets/drag-and-drop/question

but html5 driven not flash .swf.

The first thread here mentions Remy Sharp's html5 drag and drop http://html5demos.com/drag, but I need it to be a quiz format i.e. if you drop the wrong object on the target you get a 'try again' comment and if you're correct, there's a 'congrat's comment.

I also found some DnD scripts on http://www.dhtmlgoodies.com.

The dhtmlgoodies are closest to what I need, quiz/response-wise, but am worried their code might not be performable on ipad iphone platforms so am looking for native HTML5 code/templates/...

Let me know if this doesn't make sense and I can come up with other examples.

Much Thanks!

k

[Nancy OShea]

Unless you're prepared to build this from scratch, I don't think you will find an off the shelf solution.

I would start with jQuery which is well supported by x-browsers including Apple iDevices. 

http://www.1stwebdesigner.com/freebies/drag-drop-jquery-plugins/

http://www.elated.com/articles/drag-and-drop-with-jquery-your-essential-guide/

Best of luck,

Nancy O.

Alt-Web Design & Publishing

Web | Graphics | Print | Media  Specialists 

http://alt-web.com/

[Rezu]

Much Thanks, Nancy!

k

[Guest]

Hi Nancy

I found the jquery UI and the essential guide and can get that all to work when just creating html. When I try to use it from within Edge " draggable" works but "droppable" not. No reaction when executing the droppable related code.

To include the jquery ui capabilities in edge I have added the jquery UI library as resource to the edge preload file and a link to the jquery UI css to the edge html files . Is this wrong and is there maybe a better way to do this?

Thank you! Kevyn

[Guest]

try at www.templatesold.com

Leonardo Hermoso

Bovespa

Como Investir na bolsa de valores