Exit
  • Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
  • 한국 커뮤니티
1

HTML5 drag and drop quiz

Participant ,
Jan 10, 2012 Jan 10, 2012

Howdy,

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

Much Thanks!

17.5K
Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Jan 11, 2012 Jan 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
Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Participant ,
Jan 11, 2012 Jan 11, 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.

Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Participant ,
Jan 13, 2012 Jan 13, 2012

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

Thanks,

k

Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Jan 13, 2012 Jan 13, 2012

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

Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Participant ,
Jan 13, 2012 Jan 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

Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Jan 13, 2012 Jan 13, 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/

Nancy O'Shea— Product User, Community Expert & Moderator
Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Participant ,
Jan 13, 2012 Jan 13, 2012

Much Thanks, Nancy!

k

Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Guest
Mar 12, 2012 Mar 12, 2012
LATEST

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

Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Guest
Jan 16, 2012 Jan 16, 2012

try at www.templatesold.com

Leonardo Hermoso

Bovespa

Como Investir na bolsa de valores

Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines