New on DHTMLGoodies.com:

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

Download drag and drop quiz script

Demo (drag capitals) | Demo (simple math quiz)

Put this into your <HEAD> section

	<style type="text/css">
	/* DEMO CSS */
	body{
		width:100%;
		margin:0px;
		padding:0px;
		font-family: Trebuchet MS, Lucida Sans Unicode, Arial, sans-serif;	/* Font to use */
	}
	#heading{
		height:100px;
	}
	
	/* END DEMO CSS */
	
	#dragScriptContainer{	/* BIG DIV containing HTML needed for the entire script */
		width:400px;
		margin:0 auto;
		border:1px solid #000;
		height:400px;
		margin-top:20px;
		padding:3px;
		-moz-user-select:no;
	}
	
	#questionDiv{	/* Big div for all the questions */
		float:left;
		height:100%;
		width:100px;
		border:1px solid #000;
		padding:2px;
	}
	#answerDiv{	/* Big div for all the answers */
		float:right;
		height:100%;
		width:50px;
		border:1px solid #000;
		padding:2px;	
	}
	
	#questionDiv div,#answerDiv div,#dragContent div{	/* General rules for small divs - i.e. specific questions and answers */
		width:45px;
		height:20px;
		line-height:20px;		
		float:left;
		margin-right:2px;
		margin-bottom:2px;
		text-align:center;
	}
	
	#dragContent div{	/* Drag content div - i.e. specific answers when they are beeing dragged */
		border:1px solid #000;
	}
	
	#answerDiv .dragDropSmallBox{	/* Small answer divs */
		border:1px solid #000;
		cursor:pointer;
	}
	
	#questionDiv .dragDropSmallBox{	/* Small answer divs */
		border:1px solid #000;
		cursor:pointer;
		background-color:#E2EBED; /* Light blue background color */
	}
	
	#questionDiv div div{	/* DIV after it has been dragged from right to left box */
		margin:0px;
		border:0px;
		padding:0px;
		background-color:#FFF;
	}
	#questionDiv .destinationBox{	/* Small empty boxes for the questions - i.e. where answers could be dragged */
		border:0px;
		background-color:#DDD;
		width:47px;
		height:22px;
		
	
		
	}
	#questionDiv .correctAnswer{	/* CSS indicating correct answer */
		background-color:green;
		color:#fff;
		border:1px solid #000;
	}
	#questionDiv .wrongAnswer{	/* CSS indicating wrong answer */
		background-color:red;
		color:#fff;
		border:1px solid #000;
	}

	#dragContent div{
		background-color:#FFF;
	}

	#questionDiv .dragContentOver{	/* Mouse over question boxes - i.e. indicating where dragged element will be appended if mouse button is relased */
		border:1px solid #F00;
	}
	
	#answerDiv.dragContentOver{	/* Mouse over answer box - i.e. indicating where dragged element will be appended if mouse button is relased */
		border:1px solid #F00;
	}
	
	/* NEVER CHANGE THIS */
	#dragContent{
		position:absolute;
		display:none;
	}	
	
	</style>
	<script type="text/javascript">

	/************************************************************************************************************
	(C) www.dhtmlgoodies.com, November 2005
	
	This is a script from www.dhtmlgoodies.com. You will find this and a lot of other scripts at our website.	
	
	Terms of use:
	You are free to use this script as long as the copyright message is kept intact. However, you may not
	redistribute, sell or repost it without our permission.
	
	Thank you!
	
	www.dhtmlgoodies.com
	Alf Magne Kalleland
	
	************************************************************************************************************/
		
	var shuffleQuestions = true;	/* Shuffle questions ? */
	var shuffleAnswers = true;	/* Shuffle answers ? */
	var lockedAfterDrag = false;	/* Lock items after they have been dragged, i.e. the user get's only one shot for the correct answer */
	
	function quizIsFinished()
	{
		// This function is called when everything is solved		
		
	}
	
	
	/* Don't change anything below here */
	var dragContentDiv = false;
	var dragContent = false;
	
	var dragSource = false;
	var dragDropTimer = -1;
	var destinationObjArray = new Array();
	var destination = false;
	var dragSourceParent = false;
	var dragSourceNextSibling = false;
	var answerDiv;
	var questionDiv;	
	var sourceObjectArray = new Array();
	var arrayOfEmptyBoxes = new Array();
	var arrayOfAnswers = new Array();
	
	function getTopPos(inputObj)
	{		
	  if(!inputObj || !inputObj.offsetTop)return 0;		
	  var returnValue = inputObj.offsetTop;
	  while((inputObj = inputObj.offsetParent) != null)returnValue += inputObj.offsetTop;
	  return returnValue;
	}
	
	function getLeftPos(inputObj)
	{
	  if(!inputObj || !inputObj.offsetLeft)return 0;	
	  var returnValue = inputObj.offsetLeft;
	  while((inputObj = inputObj.offsetParent) != null)returnValue += inputObj.offsetLeft;
	  return returnValue;
	}
		
	function cancelEvent()
	{
		return false;
	}
	
	function initDragDrop(e)
	{
		if(document.all)e = event;
		if(lockedAfterDrag && this.parentNode.parentNode.id=='questionDiv')return;
		dragContentDiv.style.left = e.clientX  + Math.max(document.documentElement.scrollLeft,document.body.scrollLeft) + 'px';
		dragContentDiv.style.top = e.clientY  + Math.max(document.documentElement.scrollTop,document.body.scrollTop) + 'px';
		dragSource = this;
		dragSourceParent = this.parentNode;
		dragSourceNextSibling = false;
		if(this.nextSibling)dragSourceNextSibling = this.nextSibling;
		if(!dragSourceNextSibling.tagName)dragSourceNextSibling = dragSourceNextSibling.nextSibling;
		
		dragDropTimer=0;
		timeoutBeforeDrag();
		
		return false;
	}
	
	function timeoutBeforeDrag(){
		if(dragDropTimer>=0 && dragDropTimer<10){
			dragDropTimer = dragDropTimer +1;
			setTimeout('timeoutBeforeDrag()',10);
			return;
		}
		if(dragDropTimer>=10){
			dragContentDiv.style.display='block';
			dragContentDiv.innerHTML = '';
			dragContentDiv.appendChild(dragSource);
		
			
		}		
	}
	
	function dragDropMove(e)
	{
		if(dragDropTimer<10){
			return;
		}
		
		if(document.all)e = event;
		
		var scrollTop = Math.max(document.documentElement.scrollTop,document.body.scrollTop);
		var scrollLeft = Math.max(document.documentElement.scrollLeft,document.body.scrollLeft);
		
		dragContentDiv.style.left = e.clientX + scrollLeft + 'px';
		dragContentDiv.style.top = e.clientY + scrollTop + 'px';
		
		var dragWidth = dragSource.offsetWidth;
		var dragHeight = dragSource.offsetHeight;
		

		var objFound = false;
		
		var mouseX = e.clientX + scrollLeft;
		var mouseY = e.clientY + scrollTop;
		
		destination = false;
		for(var no=0;no<destinationObjArray.length;no++){
			var left = destinationObjArray[no]['left'];
			var top = destinationObjArray[no]['top'];
			var width = destinationObjArray[no]['width'];
			var height = destinationObjArray[no]['height'];
			
			destinationObjArray[no]['obj'].className = 'destinationBox';
			var subs = destinationObjArray[no]['obj'].getElementsByTagName('DIV');
			if(!objFound && subs.length==0){
				if(mouseX < (left/1 + width/1) && (mouseX + dragWidth/1) >left && mouseY < (top/1 + height/1) && (mouseY + dragHeight/1) >top){
					destinationObjArray[no]['obj'].className='dragContentOver';
					destination = destinationObjArray[no]['obj'];					
					objFound = true;
				}		
			}	
		}
		
		sourceObjectArray['obj'].className='';
		
		if(!objFound){
			var left = sourceObjectArray['left'];
			var top = sourceObjectArray['top'];
			var width = sourceObjectArray['width'];
			var height = sourceObjectArray['height'];
						
			if(mouseX < (left/1 + width/1) && (mouseX + dragWidth/1) >left && mouseY < (top/1 + height/1) && (mouseY + dragHeight/1) >top){
				destination = sourceObjectArray['obj'];
				sourceObjectArray['obj'].className='dragContentOver';
			}
		}
		return false;
	}
	
	
	function dragDropEnd()
	{
		if(dragDropTimer<10){
			dragDropTimer = -1;
			return;
		}
		dragContentDiv.style.display='none';
		sourceObjectArray['obj'].style.backgroundColor = '#FFF';
		if(destination){
			destination.appendChild(dragSource);
			destination.className='destinationBox';
			
			// Check if position is correct, i.e. correct answer to the question
			
			if(!destination.id || destination.id!='answerDiv'){
				var previousEl = dragSource.parentNode.previousSibling;
				if(!previousEl.tagName)previousEl = previousEl.previousSibling;
				var numericId = previousEl.id.replace(/[^0-9]/g,'');
				var numericIdSource = dragSource.id.replace(/[^0-9]/g,'');
				
				if(numericId==numericIdSource){
					dragSource.className='correctAnswer';
					checkAllAnswers();	
				}
				else
					dragSource.className='wrongAnswer';				
			}
			
			if(destination.id && destination.id=='answerDiv'){
				dragSource.className='dragDropSmallBox';
			}
			
		}else{
			if(dragSourceNextSibling)
				dragSourceNextSibling.parentNode.insertBefore(dragSource,dragSourceNextSibling);
			else
				dragSourceParent.appendChild(dragSource);
		}
		dragDropTimer = -1;
		dragSourceNextSibling = false;
		dragSourceParent = false;
		destination = false;
	}
	
	function checkAllAnswers()
	{	
		for(var no=0;no<arrayOfEmptyBoxes.length;no++){
			var sub = arrayOfEmptyBoxes[no].getElementsByTagName('DIV');
			if(sub.length==0)return;
			
			if(sub[0].className!='correctAnswer'){
				return;
			}	
			
		}	
		
		quizIsFinished();	
	}
	

	
	function resetPositions()
	{
		if(dragDropTimer>=10)return;
		
		for(var no=0;no<destinationObjArray.length;no++){
			if(destinationObjArray[no]['obj']){
				destinationObjArray[no]['left'] = getLeftPos(destinationObjArray[no]['obj'])
				destinationObjArray[no]['top'] = getTopPos(destinationObjArray[no]['obj'])	
			}		
			
		}
		sourceObjectArray['left'] = getLeftPos(answerDiv);
		sourceObjectArray['top'] = getTopPos(answerDiv);		
	}
	
	
	function initDragDropScript()
	{
		dragContentDiv = document.getElementById('dragContent');
		
		answerDiv = document.getElementById('answerDiv');
		answerDiv.onselectstart = cancelEvent;
		var divs = answerDiv.getElementsByTagName('DIV');
		var answers = new Array();
		
		for(var no=0;no<divs.length;no++){
			if(divs[no].className=='dragDropSmallBox'){
				divs[no].onmousedown = initDragDrop;
				answers[answers.length] = divs[no];
				arrayOfAnswers[arrayOfAnswers.length] = divs[no];
			}
			
		}	
		
		if(shuffleAnswers){
			for(var no=0;no<(answers.length*10);no++){
				var randomIndex = Math.floor(Math.random() * answers.length);
				answerDiv.appendChild(answers[randomIndex]);
			}		
		}
		
		sourceObjectArray['obj'] = answerDiv;
		sourceObjectArray['left'] = getLeftPos(answerDiv);
		sourceObjectArray['top'] = getTopPos(answerDiv);
		sourceObjectArray['width'] = answerDiv.offsetWidth;
		sourceObjectArray['height'] = answerDiv.offsetHeight;
		
		
		questionDiv = document.getElementById('questionDiv');
		
		questionDiv.onselectstart = cancelEvent;
		var divs = questionDiv.getElementsByTagName('DIV');
		
		var questions = new Array();
		var questionsOpenBoxes = new Array();
		

		for(var no=0;no<divs.length;no++){
			if(divs[no].className=='destinationBox'){
				var index = destinationObjArray.length;
				destinationObjArray[index] = new Array();
				destinationObjArray[index]['obj'] = divs[no];
				destinationObjArray[index]['left'] = getLeftPos(divs[no])
				destinationObjArray[index]['top'] = getTopPos(divs[no])
				destinationObjArray[index]['width'] = divs[no].offsetWidth;
				destinationObjArray[index]['height'] = divs[no].offsetHeight;
				questionsOpenBoxes[questionsOpenBoxes.length] = divs[no];
				arrayOfEmptyBoxes[arrayOfEmptyBoxes.length] = divs[no];
			}
			if(divs[no].className=='dragDropSmallBox'){
				questions[questions.length] = divs[no];
			}
				
		}
		
		if(shuffleQuestions){
			for(var no=0;no<(questions.length*10);no++){
				var randomIndex = Math.floor(Math.random() * questions.length);

				questionDiv.appendChild(questions[randomIndex]);			
				questionDiv.appendChild(questionsOpenBoxes[randomIndex]);		
				
				destinationObjArray[destinationObjArray.length] = destinationObjArray[randomIndex];
				destinationObjArray.splice(randomIndex,1);	
				
				questionsOpenBoxes[questionsOpenBoxes.length] = questionsOpenBoxes[randomIndex];
				questionsOpenBoxes.splice(randomIndex,1);
				questions[questions.length] = questions[randomIndex];
				questions.splice(randomIndex,1);	
				
				
			}		
		}
		
		questionDiv.style.visibility = 'visible';
		answerDiv.style.visibility = 'visible';
		
		document.documentElement.onmouseup = dragDropEnd;	
		document.documentElement.onmousemove = dragDropMove;	
		setTimeout('resetPositions()',150);
		window.onresize = resetPositions;
	}

	/* Reset the form */
	function dragDropResetForm()
	{
		for(var no=0;no<arrayOfAnswers.length;no++){
			arrayOfAnswers[no].className='dragDropSmallBox'
			answerDiv.appendChild(arrayOfAnswers[no]);			
		}	
	}
	
	window.onload = initDragDropScript;
	
	</script>

Put this into your <BODY> section

<div id="dragScriptContainer">
	<div id="questionDiv">
		<div class="dragDropSmallBox" id="q1">5x1</div>
		<div class="destinationBox"></div>
		<div class="dragDropSmallBox" id="q2">5x2</div>
		<div class="destinationBox"></div>
		<div class="dragDropSmallBox" id="q3">5x3</div>
		<div class="destinationBox"></div>
		<div class="dragDropSmallBox" id="q4">5x4</div>
		<div class="destinationBox"></div>
		<div class="dragDropSmallBox" id="q5">5x5</div>
		<div class="destinationBox"></div>
		<div class="dragDropSmallBox" id="q6">5x6</div>
		<div class="destinationBox"></div>
		<div class="dragDropSmallBox" id="q7">5x7</div>
		<div class="destinationBox"></div>
		<div class="dragDropSmallBox" id="q8">5x8</div>
		<div class="destinationBox"></div>
		<div class="dragDropSmallBox" id="q9">5x9</div>
		<div class="destinationBox"></div>
		<div class="dragDropSmallBox" id="q10">5x10</div>
		<div class="destinationBox"></div>
	
	</div>
	
	
	<div id="answerDiv">
		<div class="dragDropSmallBox" id="a1">5</div>
		<div class="dragDropSmallBox" id="a2">10</div>
		<div class="dragDropSmallBox" id="a3">15</div>
		<div class="dragDropSmallBox" id="a4">20</div>
		<div class="dragDropSmallBox" id="a5">25</div>
		<div class="dragDropSmallBox" id="a6">30</div>
		<div class="dragDropSmallBox" id="a7">35</div>
		<div class="dragDropSmallBox" id="a8">40</div>
		<div class="dragDropSmallBox" id="a9">45</div>
		<div class="dragDropSmallBox" id="a10">50</div>	
	</div>
</div>
<div id="dragContent"></div>
<input type="button" onclick="dragDropResetForm();return false" value="Reset">

Configuration

Set up the HTML

Boxes with questions and answers is created by using the following format:

This is a short version of the code used in the demo. You have one
<div id="questionDiv">
ss parent element of all your questions. In there you put two <DIV> tags for each question.

The first one is for the question, the second is the empty box where answers could be dragged. Create as many pairs as you have questions

<div id="answerDiv"> is used as parent element for all your answers. Create one div for each of your answers inside of this div tag.

Note that the id of the answers should match the id of the question, i.e. the numeric part. Example: The <DIV> with id "a1" is the answer to the question with id "q1". You don't have to use "q" and "a" as prefix. The important part is that you have matching numbers.

Layout

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

Javascript variables

You have two Javascript variables available:

var shuffleQuestions = true; /* Shuffle questions ? */
var shuffleAnswers = true; /* Shuffle answers ? */
var lockedAfterDrag = false;

shuffleQuestions = Shuffle questions
shuffleAnswers = Shuffle answers
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

I have added an empty function to the script:

function quizIsFinished()
{

}

This function is called when everything is solved correctly. You can customize this function as you want. example: put in
alert('Finished! you did it');

Strict or loose doctype

This script works best in Internet Explorer if you use a valid doctype. You can choose between using the loose or strict doctype:

Strict doctype:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

Loose doctype:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

Insert this code at the top of your HTML file.

Comments

i had a question about a user interface modification - instead of the list of answers moving up when an answer is dragged off the list, i wanted to have a set of grey boxes underneath the answers on the right column, so that when a user dragged and dropped an answer he/she would see an empty container from where the answer was dragged and could return drag the answer to the spot? is that possible? how would that be accomplished?

austin at 12:33AM, 2012/02/20.

I want to write an alert if the quiz is incorrecte.g. if correct alert ('well done'); else alert ('try again') Any help??/

marc at 08:57AM, 2012/05/17.

What's the code and form set-up to save this to SQL database with php or Ajax? Thanks for the pointers!

John at 02:17PM, 2012/09/01.

Excellent! you are genius and amazing! visiting this site and seeing your work really made me so happy!One reason of my happiness is i did thought of similar idea but never implemented !

Aditya at 05:18AM, 2013/03/17.

What's the code and form set-up to save this to SQL database with php?

Marco Silva at 10:04AM, 2013/07/29.

Iâ€™m currently using a script/form that has served a purpose for me for some time but I keep thinking back to a vision I had some time ago that I was never able to master. The closest thing I can find to what I want is shown here (above)http://www.dhtmlgoodies.com/scripts/drag-drop-quiz/drag-drop-quiz-d2.htmlbut itâ€™s still not exactly what Iâ€™m after (im not looking for a quiz) Basically I am creating a team selection page for my users (there only a handful of them) What I would be doing is list on the right hand side of the screen, every available player in their squad (usually 45 names) and the on the left hand side of the screen, have empty boxes (18 of them) representing the positions on the field.There would also be a sub section below the 18 feild positions on the right for emergency players (6 of them) in case somebody got injured ect. My hope then would be that a user could: * Click a name on the left and drag it to a field position on the right, thus filling that position and removing the players name from the squad list (because he has been selected) * This would continue to happen until all field positions were full. * Once all positions were full, the user would click a submit button to send the chosen players to me in a plain text list via email * A user would be banned from clicking submit until all positions were filled. * A user could remove a player by dragging his name back out of a position (this would also re disable the submit button if the position is then not filled. * I've attached a photoshop view of my idea (sorry for it being out of allignment) and note that the sample might not follow the rules shown above (eg submit button visible before team it full Can't see the picture I can email it to you. In a nutshell the bare bones of my requirements are that I have a list of 45 names. What I need the form to do is allow a user to select 18 primary names from the list, and 6 secondary names from the list and have the form email me their selections in the order that they were chosen...... It must also ensure that no name was used twice.Is this still something that is too ambitious???

Ash at 10:52PM, 2013/12/14.

can you help with drag and drop form builder I'm trying to create? that goes for anyone else here as well

joseph at 12:17PM, 2014/02/09.

Does this work for touchscreen devices/

Sammy at 11:24PM, 2015/04/08.

its not works in ipad please give the solution

sagar at 06:28AM, 2015/08/08.

Hi,

when i try to create the divs inside answerDiv using ng-repeat (Angularjs), i am not able to drage.
it will be very helpful, please let me know if any idea/suggestion

--Thanks

sona saran at 07:29PM, 2018/11/28.

in this example , drag and drop to one value is already available on destination-box and after another value will be added to on same destination-box both value is swap and old destination-box value is swap on dragdropsmallclass it is posiblle on this example

manisha gadhiya at 12:30AM, 2019/02/06.