Skip to main content
Inspiring
January 11, 2012
Question

HTML5 drag and drop quiz

  • January 11, 2012
  • 1 reply
  • 17841 views

Howdy,

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

Much Thanks!

    This topic has been closed for replies.

    1 reply

    Nancy OShea
    Community Expert
    January 11, 2012

    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/

    Nancy O'Shea— Product User, Community Expert & Moderator
    RezuAuthor
    Inspiring
    January 12, 2012

    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.

    Nancy OShea
    Community Expert
    January 13, 2012

    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


    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/

    Nancy O'Shea— Product User, Community Expert & Moderator