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.

    March 12, 2012

    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/


    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