New on DHTMLGoodies.com:

DHTML Chess is now available for WordPress at WordPressChess.com.

Quiz script - Drag and drop to columns

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

	<style type="text/css">
	body{
		font-family: Trebuchet MS, Lucida Sans Unicode, Arial, sans-serif;	/* Font to use */
		background-color:#E2EBED;
	}
	#footer{
		height:30px;
		vertical-align:middle;
		text-align:right;
		clear:both;
		padding-right:3px;
		background-color:#317082;
		margin-top:2px;
		width:790px;
	}
	#footer form{
		margin:0px;
		margin-top:2px;
	}
	#dhtmlgoodies_dragDropContainer{	/* Main container for this script */
		width:790px;
		height:720px;
		border:1px solid #317082;
		background-color:#FFF;
		-moz-user-select:none;
	}
	#dhtmlgoodies_dragDropContainer ul{	/* General rules for all <ul> */
		margin-top:0px;
		margin-left:0px;
		margin-bottom:0px;
		padding:2px;
	}
	
	#dhtmlgoodies_dragDropContainer li,#dragContent li,li#indicateDestination{	/* Movable items, i.e. <LI> */
		list-style-type:none;
		height:15px;
		background-color:#FFFF99;
		border:1px solid #000;
		padding:2px;
		margin-bottom:2px;
		cursor:pointer;
		font-size:13px;
		line-height:15px;
	}
	
	li#indicateDestination{	/* Box indicating where content will be dropped - i.e. the one you use if you don't use arrow */
		border:1px dotted #600;	
		background-color:#FFF;
	}
	
	#dhtmlgoodies_dragDropContainer ul li.correctAnswer{	/* Correctly moved item */
		background-color:green;
		color:#FFF;
	}
	#dhtmlgoodies_dragDropContainer ul li.wrongAnswer{	/* Item moved to wrong box */
		background-color:red;
		color:#FFF;
	}
	
	
	/* LEFT COLUMN CSS */
	div#dhtmlgoodies_listOfItems{	/* Left column "Available students" */
		
		float:left;
		padding-left:10px;
		padding-right:10px;
		
		/* CSS HACK */
		width: 180px;	/* IE 5.x */
		width/* */:/**/160px;	/* Other browsers */
		width: /**/160px;
				
	}
	#dhtmlgoodies_listOfItems ul{	/* Left(Sources) column <ul> */
		height:560px;	

	}
		
	div#dhtmlgoodies_listOfItems div{
		border:1px solid #999;		
	}
	div#dhtmlgoodies_listOfItems div ul{	/* Left column <ul> */
		margin-left:10px;	/* Space at the left of list - the arrow will be positioned there */
	}
	#dhtmlgoodies_listOfItems div p{	/* Heading above left column */
		margin:0px;	
		font-weight:bold;
		padding-left:12px;
		background-color:#317082;	
		color:#FFF;
		margin-bottom:5px;
	}
	/* END LEFT COLUMN CSS */
	
	#dhtmlgoodies_dragDropContainer .mouseover{	/* Mouse over effect DIV box in right column */
		background-color:#E2EBED;
		border:1px solid #317082;
	}
	
	/* Start main container CSS */
	
	div#dhtmlgoodies_mainContainer{	/* Right column DIV */
		width:590px;
		float:left;	
	}
	#dhtmlgoodies_mainContainer div{	/* Parent <div> of small boxes */
		float:left;
		margin-right:10px;
		margin-bottom:10px;
		margin-top:0px;
		border:1px solid #999;

		/* CSS HACK */
		width: 172px;	/* IE 5.x */
		width/* */:/**/170px;	/* Other browsers */
		width: /**/170px;
				
	}
	#dhtmlgoodies_mainContainer div ul{
		margin-left:10px;
	}
	
	#dhtmlgoodies_mainContainer div p{	/* Heading above small boxes */
		margin:0px;
		padding:0px;
		padding-left:12px;
		font-weight:bold;
		background-color:#317082;	
		color:#FFF;	
		margin-bottom:5px;
	}
	
	#dhtmlgoodies_mainContainer ul{	/* Small box in right column ,i.e <ul> */
		width:152px;
		height:80px;	
		border:0px;	
		margin-bottom:0px;
		overflow:hidden;
		
	}
	
	#dragContent{	/* Drag container */
		position:absolute;
		width:150px;
		height:15px;
		display:none;
		margin:0px;
		padding:0px;
		z-index:2000;
	}

	#dragDropIndicator{	/* DIV for the small arrow */
		position:absolute;
		width:7px;
		height:10px;
		display:none;
		z-index:1000;
		margin:0px;
		padding:0px;
	}
	</style>
	<style type="text/css" media="print">
	div#dhtmlgoodies_listOfItems{
		display:none;
	}
	body{
		background-color:#FFF;
	}
	img{
		display:none;
	}
	#dhtmlgoodies_dragDropContainer{
		border:0px;
		width:100%;
	}
	</style>	
	<script type="text/javascript">
	/************************************************************************************************************
	Copyright (C) December 2005  DTHMLGoodies.com, Alf Magne Kalleland

	This library is free software; you can redistribute it and/or
	modify it under the terms of the GNU Lesser General Public
	License as published by the Free Software Foundation; either
	version 2.1 of the License, or (at your option) any later version.

	This library is distributed in the hope that it will be useful,
	but WITHOUT ANY WARRANTY; without even the implied warranty of
	MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU
	Lesser General Public License for more details.

	You should have received a copy of the GNU Lesser General Public
	License along with this library; if not, write to the Free Software
	Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301  USA

	Dhtmlgoodies.com., hereby disclaims all copyright interest in this script
	written by Alf Magne Kalleland.

	Alf Magne Kalleland, 2010
	Owner of DHTMLgoodies.com

	************************************************************************************************************/
		
	/* VARIABLES YOU COULD MODIFY */
	var boxSizeArray = [3,3,3,3,3,3,3];	// Array indicating how many items there is rooom 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 verticalSpaceBetweenListItems = 3;	// Pixels space between one <li> and next	
											// Same value or higher as margin bottom in CSS for #dhtmlgoodies_dragDropContainer ul li,#dragContent li
	
											
	var initShuffleItems = true;	// Shuffle items before staring

	var indicateDestionationByUseOfArrow = true;	// Display arrow to indicate where object will be dropped(false = use rectangle)
	
	var lockedAfterDrag = false;	/* Lock items after they have been dragged, i.e. the user get's only one shot for the correct answer */
	
	
	/* END VARIABLES YOU COULD MODIFY */
	
	var dragDropTopContainer = false;
	var dragTimer = -1;
	var dragContentObj = false;
	var contentToBeDragged = false;	// Reference to dragged <li>
	var contentToBeDragged_src = false;	// Reference to parent of <li> before drag started
	var contentToBeDragged_next = false; 	// Reference to next sibling of <li> to be dragged
	var destinationObj = false;	// Reference to <UL> or <LI> where element is dropped.
	var dragDropIndicator = false;	// Reference to small arrow indicating where items will be dropped
	var ulPositionArray = new Array();
	var mouseoverObj = false;	// Reference to highlighted DIV
	
	var MSIE = navigator.userAgent.indexOf('MSIE')>=0?true:false;
	var navigatorVersion = navigator.appVersion.replace(/.*?MSIE (\d\.\d).*/g,'$1')/1;
	var destinationBoxes = new Array();
	var indicateDestinationBox = false;
		
	function getTopPos(inputObj)
	{		
	  var returnValue = inputObj.offsetTop;
	  while((inputObj = inputObj.offsetParent) != null){
	  	if(inputObj.tagName!='HTML')returnValue += inputObj.offsetTop;
	  }
	  return returnValue;
	}
	
	function getLeftPos(inputObj)
	{
	  var returnValue = inputObj.offsetLeft;
	  while((inputObj = inputObj.offsetParent) != null){
	  	if(inputObj.tagName!='HTML')returnValue += inputObj.offsetLeft;
	  }
	  return returnValue;
	}
		
	function cancelEvent()
	{
		return false;
	}
	function initDrag(e)	// Mouse button is pressed down on a LI
	{
		if(document.all)e = event;
		if(lockedAfterDrag && this.parentNode.id!='allItems')return;
		
		var st = Math.max(document.body.scrollTop,document.documentElement.scrollTop);
		var sl = Math.max(document.body.scrollLeft,document.documentElement.scrollLeft);
		
		dragTimer = 0;
		dragContentObj.style.left = e.clientX + sl + 'px';
		dragContentObj.style.top = e.clientY + st + 'px';
		contentToBeDragged = this;
		contentToBeDragged_src = this.parentNode;
		contentToBeDragged_next = false;
		if(this.nextSibling){
			contentToBeDragged_next = this.nextSibling;
			if(!this.tagName && contentToBeDragged_next.nextSibling)contentToBeDragged_next = contentToBeDragged_next.nextSibling;
		}
		timerDrag();
		return false;
	}
	
	function everythingIsCorrect()
	{
		alert('Congratulations! Everything is correct');		
	}
	
	
	function timerDrag()
	{
		if(dragTimer>=0 && dragTimer<10){
			dragTimer++;
			setTimeout('timerDrag()',10);
			return;
		}
		if(dragTimer==10){
			dragContentObj.style.display='block';
			dragContentObj.appendChild(contentToBeDragged);
		}
	}
	
	function moveDragContent(e)
	{
		if(dragTimer<10){
			if(contentToBeDragged){
				if(contentToBeDragged_next){
					contentToBeDragged_src.insertBefore(contentToBeDragged,contentToBeDragged_next);
				}else{
					contentToBeDragged_src.appendChild(contentToBeDragged);
				}	
			}
			return;
		}
		if(document.all)e = event;
		var st = Math.max(document.body.scrollTop,document.documentElement.scrollTop);
		var sl = Math.max(document.body.scrollLeft,document.documentElement.scrollLeft);
		
		
		dragContentObj.style.left = e.clientX + sl + 'px';
		dragContentObj.style.top = e.clientY + st + 'px';
		
		if(mouseoverObj)mouseoverObj.className='';
		destinationObj = false;
		dragDropIndicator.style.display='none';
		if(indicateDestinationBox)indicateDestinationBox.style.display='none';
		var x = e.clientX + sl;
		var y = e.clientY + st;
		var width = dragContentObj.offsetWidth;
		var height = dragContentObj.offsetHeight;
		
		var tmpOffsetX = arrow_offsetX;
		var tmpOffsetY = arrow_offsetY;
		if(!document.all){
			tmpOffsetX = arrow_offsetX_firefox;
			tmpOffsetY = arrow_offsetY_firefox;
		}

		for(var no=0;no<ulPositionArray.length;no++){
			var ul_leftPos = ulPositionArray[no]['left'];	
			var ul_topPos = ulPositionArray[no]['top'];	
			var ul_height = ulPositionArray[no]['height'];
			var ul_width = ulPositionArray[no]['width'];
			
			if((x+width) > ul_leftPos && x<(ul_leftPos + ul_width) && (y+height)> ul_topPos && y<(ul_topPos + ul_height)){
				var noExisting = ulPositionArray[no]['obj'].getElementsByTagName('LI').length;
				if(indicateDestinationBox && indicateDestinationBox.parentNode==ulPositionArray[no]['obj'])noExisting--;
				if(noExisting<boxSizeArray[no-1] || no==0){
					dragDropIndicator.style.left = ul_leftPos + tmpOffsetX + 'px';
					var subLi = ulPositionArray[no]['obj'].getElementsByTagName('LI');
					for(var liIndex=0;liIndex<subLi.length;liIndex++){
						var tmpTop = getTopPos(subLi[liIndex]);
						if(!indicateDestionationByUseOfArrow){
							if(y<tmpTop){
								destinationObj = subLi[liIndex];
								indicateDestinationBox.style.display='block';
								subLi[liIndex].parentNode.insertBefore(indicateDestinationBox,subLi[liIndex]);
								break;
							}
						}else{							
							if(y<tmpTop){
								destinationObj = subLi[liIndex];
								dragDropIndicator.style.top = tmpTop + tmpOffsetY - Math.round(dragDropIndicator.clientHeight/2) + 'px';
								dragDropIndicator.style.display='block';
								break;
							}	
						}					
					}
					
					if(!indicateDestionationByUseOfArrow){
						if(indicateDestinationBox.style.display=='none'){
							indicateDestinationBox.style.display='block';
							ulPositionArray[no]['obj'].appendChild(indicateDestinationBox);
						}
						
					}else{
						if(subLi.length>0 && dragDropIndicator.style.display=='none'){
							dragDropIndicator.style.top = getTopPos(subLi[subLi.length-1]) + subLi[subLi.length-1].offsetHeight + tmpOffsetY + 'px';
							dragDropIndicator.style.display='block';
						}
						if(subLi.length==0){
							dragDropIndicator.style.top = ul_topPos + arrow_offsetY + 'px'
							dragDropIndicator.style.display='block';
						}
					}
					
					if(!destinationObj)destinationObj = ulPositionArray[no]['obj'];
					mouseoverObj = ulPositionArray[no]['obj'].parentNode;
					mouseoverObj.className='mouseover';
					return;
				}
			}
		}
	}
	
	function checkAnswers()
	{
		
		for(var no=0;no<destinationBoxes.length;no++){
			var subLis = destinationBoxes[no].getElementsByTagName('LI');
			if(subLis.length<boxSizeArray[no])return;	
			
			for(var no2=0;no2<subLis.length;no2++){
				if(subLis[no2].className=='wrongAnswer')return;
			}		
		}
		
		everythingIsCorrect();
		
		
	}
	
	
	/* End dragging 
	Put <LI> into a destination or back to where it came from.
	*/	
	function dragDropEnd(e)
	{
		if(dragTimer==-1)return;
		if(dragTimer<10){
			dragTimer = -1;
			return;
		}
		dragTimer = -1;
		if(document.all)e = event;		
		if(destinationObj){
			var groupId = contentToBeDragged.getAttribute('groupId');
			if(!groupId)groupId = contentToBeDragged.groupId;
			
			var destinationToCheckOn = destinationObj;
			if(destinationObj.tagName!='UL'){
				destinationToCheckOn = destinationObj.parentNode;
			}
			
			var answerCheck = false;
			if(groupId == destinationToCheckOn.id){
				contentToBeDragged.className = 'correctAnswer';		
				answerCheck=true;	
			}else{
				contentToBeDragged.className = 'wrongAnswer';
			}
			if(destinationObj.id=='allItems' || destinationObj.parentNode.id=='allItems')contentToBeDragged.className='';
			
			
			if(destinationObj.tagName=='UL'){
				destinationObj.appendChild(contentToBeDragged);
			}else{
				destinationObj.parentNode.insertBefore(contentToBeDragged,destinationObj);
			}
			mouseoverObj.className='';
			destinationObj = false;
			dragDropIndicator.style.display='none';
			if(indicateDestinationBox){
				indicateDestinationBox.style.display='none';
				document.body.appendChild(indicateDestinationBox);
			}
						
			contentToBeDragged = false;
			
			if(answerCheck)checkAnswers();	
			
			return;
		}	
		if(contentToBeDragged_next){
			contentToBeDragged_src.insertBefore(contentToBeDragged,contentToBeDragged_next);
		}else{
			contentToBeDragged_src.appendChild(contentToBeDragged);
		}
		contentToBeDragged = false;
		dragDropIndicator.style.display='none';
		if(indicateDestinationBox){
			indicateDestinationBox.style.display='none';
			document.body.appendChild(indicateDestinationBox);
			
		}		
		mouseoverObj = false;
		
	}
	
	/* 
	Preparing data to be saved 
	*/
	function saveDragDropNodes()
	{
		var saveString = "";
		var uls = dragDropTopContainer.getElementsByTagName('UL');
		for(var no=0;no<uls.length;no++){	// LOoping through all <ul>
			var lis = uls[no].getElementsByTagName('LI');
			for(var no2=0;no2<lis.length;no2++){
				if(saveString.length>0)saveString = saveString + ";";
				saveString = saveString + uls[no].id + '|' + lis[no2].id;
			}	
		}		
		
		document.getElementById('saveContent').innerHTML = '<h1>Ready to save these nodes:</h1> ' + saveString.replace(/;/g,';<br>') + '<p>Format: ID of ul |(pipe) ID of li;(semicolon)</p><p>You can put these values into a hidden form fields, post it to the server and explode the submitted value there</p>';
		
	}
	
	function initDragDropScript()
	{
		dragContentObj = document.getElementById('dragContent');
		dragDropIndicator = document.getElementById('dragDropIndicator');
		dragDropTopContainer = document.getElementById('dhtmlgoodies_dragDropContainer');
		document.documentElement.onselectstart = cancelEvent;;
		var listItems = dragDropTopContainer.getElementsByTagName('LI');	// Get array containing all <LI>
		var itemHeight = false;
		for(var no=0;no<listItems.length;no++){
			listItems[no].onmousedown = initDrag;
			listItems[no].onselectstart = cancelEvent;
			if(!itemHeight)itemHeight = listItems[no].offsetHeight;
			if(MSIE && navigatorVersion/1<6){
				listItems[no].style.cursor='hand';
			}			
		}
		
		var mainContainer = document.getElementById('dhtmlgoodies_mainContainer');
		var uls = mainContainer.getElementsByTagName('UL');
		itemHeight = itemHeight + verticalSpaceBetweenListItems;
		for(var no=0;no<uls.length;no++){
			uls[no].style.height = itemHeight * boxSizeArray[no]  + 'px';
			destinationBoxes[destinationBoxes.length] = uls[no];
		}
		
		var leftContainer = document.getElementById('dhtmlgoodies_listOfItems');
		var itemBox = leftContainer.getElementsByTagName('UL')[0];
		
		document.documentElement.onmousemove = moveDragContent;	// Mouse move event - moving draggable div
		document.documentElement.onmouseup = dragDropEnd;	// Mouse move event - moving draggable div
		
		var ulArray = dragDropTopContainer.getElementsByTagName('UL');
		for(var no=0;no<ulArray.length;no++){
			ulPositionArray[no] = new Array();
			ulPositionArray[no]['left'] = getLeftPos(ulArray[no]);	
			ulPositionArray[no]['top'] = getTopPos(ulArray[no]);	
			ulPositionArray[no]['width'] = ulArray[no].offsetWidth;
			ulPositionArray[no]['height'] = ulArray[no].clientHeight;
			ulPositionArray[no]['obj'] = ulArray[no];
		}
		
		if(initShuffleItems){
			var allItemsObj = document.getElementById('allItems');
			var initItems = allItemsObj.getElementsByTagName('LI');
			
			for(var no=0;no<(initItems.length*10);no++){
				var itemIndex = Math.floor(Math.random()*initItems.length);
				allItemsObj.appendChild(initItems[itemIndex]);
			}
		}
		if(!indicateDestionationByUseOfArrow){
			indicateDestinationBox = document.createElement('LI');
			indicateDestinationBox.id = 'indicateDestination';
			indicateDestinationBox.style.display='none';
			document.body.appendChild(indicateDestinationBox);
		}		
		
	}
	
	window.onload = initDragDropScript;
	</script>

Put this into your <BODY> section

<div id="dhtmlgoodies_dragDropContainer">
	<div id="topBar">
		<img src="/images/heading3.gif">
	</div>
	<div id="dhtmlgoodies_listOfItems">
		<div>
			<p>Objects to move</p>		
		<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">Fridtjof 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">John F. Kennedy</li>
			<li id="node17" groupId="box6">Ned Kelly</li>
			<li id="node20" groupId="box1">Galileo Galilei</li>
			
			
		</ul>
		</div>
	</div>	
	<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>
</div>
<ul id="dragContent"></ul>
<div id="dragDropIndicator"><img src="images/insert.gif"></div>
<div id="saveContent"></div>

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">
  
  <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

Comments

Hi, I saw a very nice script: Quiz script - Drag and drop to columnsBut 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 11:02AM, 2011/07/22.

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 06:22AM, 2011/07/24.

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 11:14AM, 2011/09/22.

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 02:32PM, 2013/02/25.

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 10:33PM, 2013/02/27.

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 09:43PM, 2013/09/29.

Does anyone know how to get this code to work on IOS or Android.

SW at 09:38AM, 2014/06/13.

Hi,how can i save it into database? and do you have other different type of quizzes using php and mysql?

Jee at 02:46PM, 2014/11/28.

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 iti would really like someone's help in my project thank you so much!

Kieran Joy at 05:26PM, 2016/10/17.