Quiz script - Drag and drop to columns

Demo

Bookmark and Share

Licensing

This script is distributed under the LGPL open source license.
Commercial licenses are also available. Some of these licenses also includes personal e-mail support for up to 1 year.

Put this into your <HEAD> section

Put this into your <BODY> section

Download arrow

To download the arrow used in this script, right click on it below.

Choose "Save target As" and put it in a sub folder called "images".

Configuration

Items in the left side box

The draggable items are <LI> created by the following syntax:

<ul id="allItems">
  <li id="node1" groupId="box2">Oslo</li>
  <li id="node2" groupId="box7">Paris</li>
  <li id="node3" groupId="box3">London</li>
  <li id="node4" groupId="box5">Beijing</li>
  <li id="node5" groupId="box4">Washington</li>
  <li id="node6" groupId="box6">Canberra</li>
  <li id="node18" groupId="box1">Rome</li>
  
  <li id="node7" groupId="box2">Geiranger fjord</li>
  <li id="node8" groupId="box7">Notre Dame</li>
  <li id="node9" groupId="box3">Big Ben</li>
  <li id="node10" groupId="box5">The forbidden city</li>
  <li id="node11" groupId="box6">Queensland</li>
  <li id="node19" groupId="box1">Vatican city</li>
  <li id="node21" groupId="box4">Mississippi</li>
  
  <li id="node12" groupId="box2">Frithjof Nansen</li>
  <li id="node13" groupId="box7">Napoleon Bonaparte</li>
  <li id="node14" groupId="box3">Winston Churchill</li>
  <li id="node15" groupId="box5">Mao</li>
  <li id="node16" groupId="box4">Britney Spears</li>
  <li id="node17" groupId="box6">Ned Kelly</li>
  <li id="node20" groupId="box1">Galileo Galilei</li>
</ul>

You create one <LI> for each draggable node. Put it inside the <ul id="allItems"> tag. It's important that you set the groupId attribute. The value of this attribute must match the "id" of the box where it belongs. For example: Oslo has groupId = "box2". If you like a the code below, you will see that the <UL> right below Oslo have id="box2". I.e. Oslo belongs to the box Norway.

Boxes in right side column

The boxes in the right side columns are created by use of plain HTML. Here's how it is done in this demo:

<div id="dhtmlgoodies_mainContainer">
  <!-- ONE <UL> for each "room" -->
  <div>
    <p>Italy</p>
    <ul id="box1">
    </ul>
  </div>
  <div>    
    <p>Norway</p>
    <ul id="box2"></ul>
  </div>
  <div>
    <p>United Kingdom</p>
    <ul id="box3">
    </ul>
  </div>
  <div>
    <p>United States</p>
    <ul id="box4"></ul>
  </div>
  <div>  
    <p>China</p>
    <ul id="box5">
    </ul>
  </div>
  <div>  
    <p>Australia</p>
    <ul id="box6">
    </ul>
  </div>
  <div>  
    <p>France</p>
    <ul id="box7">
    </ul>
  </div>
</div>

As you can see, there is one <DIV> followed by a <UL> for each column box.

Javascript variables

You have some Javascript variables available which you could use to customize the script:

var boxSizeArray = [3,3,3,3,3,3,3];; // Array indicating how many items there is room for in the right column ULs

var arrow_offsetX = -5; // Offset X - position of small arrow
var arrow_offsetY = 0; // Offset Y - position of small arrow

var arrow_offsetX_firefox = -6; // Firefox - offset X small arrow
var arrow_offsetY_firefox = -13; // Firefox - offset Y small arrow

var initShuffleItems = true; // Shuffle items before staring

var indicateDestionationByUseOfArrow = false;
var lockedAfterDrag = false;

  • boxSizeArray = An array indicating max number of items("students") in the small boxes on the right side.
  • arrow_offsetX = Horizontal offset of small arrow - You may have to adjust this value to get the small arrow positioned correctly
  • arrow_offsetY = Vertical offset of small arrow
  • arrow_offsetX_firefox and arrow_offsetY_firefox = Same as above, but for Firefox.
  • initShuffleItems = The left side items will be shuffled when the script loads.
  • indicateDestionationByUseOfArrow = Indicate where objects will be dropped with an arrow. If you set this variable to false, it will use a rectangle instead.
  • lockedAfterDrag = Lock box after it has been dragged. This means that the user will not be able to drag an answer after it has been dropped on an answer.

Javascript function

The Javascript function called everythingIsCorrect is executed when all the nodes has been moved the the correct column. You can modify this function as you need.

Layout

The layout is controlled by use of CSS. Look at the comments there for help.

Use a strict or loose doctype

For best results, use a valid doctype. You can either choose the strict doctype:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
or a loose doctype:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
The doctype tag should be placed on the first line of your HTML file.

Rate this script at Hotscripts.com

If you like my script, please rate it at HotScripts.com

Comments

keyuri
excillante jquery
keyuri at 04:00AM, 2011/04/05.
Thomas
Hi, I saw a very nice script: Quiz script - Drag and drop to columns
But i have one more special requirement: How is it possible to ask for a Text which is entered into the list too.

Example: I move a student into a list and would now be asked for a text (e-mail address or phone), which is entered into the list too.
Is something possible?
Thomas at 05:02AM, 2011/07/22.
unknown
How do i extract names from database? And my output would be all the names from the database that would be echo out? Thanks!
unknown at 12:22AM, 2011/07/24.
cali
hi and thanks for sharing this script :)

i have a question is it possible to have a decount of available space free.

Then i would start the count from the "boxSizeArray" var to zero dinamicly when the user is putting items in the box.

i suppose i doable because the script is counting somewhere the max items per box. but i do not know how, if someone could help me it would be very nice :)

cheers
cali at 05:14AM, 2011/09/22.
Augusto C SAntos
Hi, first it´s a nice script.
I wanna know if there is a possibility to have unlimited number of right colums ?
thanks
Augusto C SAntos at 07:32AM, 2013/02/25.
calo
Great ! .. i was looking for a script like this.
is it possible to create more destination boxes?

i tried to write in html

<div>
<p>next box</p>
<ul id="box8">
</ul>
</div>

but then the script doesnt work any more.
thank you very much
calo at 03:33PM, 2013/02/27.
JohnJ
Is there a way to show an alert box when there are no items left in the left column? We want to add an option to move on regardless of all boxes being correct.
JohnJ at 03:43PM, 2013/09/29.
SW
Does anyone know how to get this code to work on IOS or Android.
SW at 03:38AM, 2014/06/13.
Jee
Hi,how can i save it into database? and do you have other different type of quizzes using php and mysql?
Jee at 07:46AM, 2014/11/28.
Kieran Joy
Hello!

this is an awesome program. I would like to use it, however i was wondering if i can change the questions column from being one column into multiple columns (for example: instead of 1 X 5 --> 3 X 3)...

i was fiddling around with it and i noticed that it was capturing the answers by set position (meaning that even though i designed the boxes to be 3 X 3 while i was dragging he answer boxes to the question boxes i had to drag it into the spaces below where there were no boxes)

I also merge the two question boxes together so that they can just drag it into the the question box with the matching name in it

i would really like someone's help in my project thank you so much!
Kieran Joy at 11:26AM, 2016/10/17.

Post your comment

Don't have an avatar? Create one at Gravatar.com.

Confirmation code:

Go to cbolson.com


About/Contact | A good idea? | Submit a script | Privacy notice
© 2005 - 2017 dhtmlgoodies.com