Drag and Drop Quiz

Developer
Coran Spicer
Size
3,837 Kb
Views
56,672
  1. Drag and Drop Quiz Previews
  2. Drag and Drop Quiz HTML Codes
  3. Drag and Drop Quiz CSS Codes
  4. Drag and Drop Quiz JS Codes

How do I make an drag and drop quiz?

A simple drag and drop quiz concept. You can assign options and their drop targets and track completion.. What is a drag and drop quiz? How do you make a drag and drop quiz? This script and codes were developed by Coran Spicer on 14 October 2022, Friday.

Drag and Drop Quiz Previews
IQ Test

Drag and Drop Quiz - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Drag and Drop Quiz</title> <link rel='stylesheet prefetch' href='http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/smoothness/jquery-ui.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="quiz-wrapper">	<p class="question-description">Fill in the blanks by dragging the missing answer.</p>	<ul class="options">	<li class="title">Options</li>	<li class="option" data-target="carraway">Nick Carraway</li>	<li class="option" data-target="fitz">F. Scott Fitzgerald</li>	<li class="option" data-target="westegg">West Egg</li>	<li class="option" data-target="buchanan">Tom Buchanan</li>	<li class="option" data-target="daisy">Daisy</li>	<li class="option" data-target="ashes">Valley of Ashes</li>	</ul>
<div class="answers">	<ol>	<li><span class="target" data-accept="fitz">&nbsp;</span>, a native of St Paul, Minnesota, and also a member of the "Lost Generation" finished four novels including "This Side of Paradise".</li>	<li><span class="target" data-accept="carraway">&nbsp;</span> attended Yale with the large and brooding<span class="target" data-accept="buchanan">&nbsp;</span>.</li>	<li>George Wilson owns an unsuccessful garage in an area known as the <span class="target" data-accept="ashes">&nbsp;</span>, where Tom brings Nick for a party.</li>	<li>Jay Gatsby, the Buchanans, and Nick himself all make<span class="target" data-accept="westegg">&nbsp;</span>their home.</li>	</ol>
</div> <button type="submit" value="submit">Submit</button> <div class="lightbox-bg"></div> <div class="status confirm"> <p>All Answers Answered</p> </div> <div class="status deny"> <p>Answers Remain</p> </div>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jqueryui-touch-punch/0.2.3/jquery.ui.touch-punch.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Drag and Drop Quiz - Script Codes CSS Codes

.quiz-wrapper { position: relative; display: block; width: 510px; height: 450px;
}
.quiz-wrapper p.question-description { background: #19286C; color: white; padding: 25px 20px;
}
.quiz-wrapper ul.options { position: relative; display: inline-block; vertical-align: top; width: 165px; list-style: none; border: 1px solid #19286C; text-align: center; padding: 0; margin: 0;
}
.quiz-wrapper ul.options li { border: 1px solid transparent; padding: 6px 8px;
}
.quiz-wrapper ul.options li.title { background: #19286C; color: white;
}
.quiz-wrapper ul.options li.option { display: block; position: relative; z-index: 50; font-size: 13px;
}
.quiz-wrapper .answers { display: inline-block; width: 335px; font-size: 13px; line-height: 20px;
}
.quiz-wrapper .answers .target { display: inline-block; width: 110px; background: lightblue; margin: 0 3px; text-align: center;
}
.quiz-wrapper button[type="submit"] { display: block; position: relative; margin: 10px auto; padding: 10px; background: #19286C; border: none; color: white; font-size: 16px;
}
.lightbox-bg { display: none; position: absolute; z-index: 100; width: 100%; height: 100%; top: 0; left: 0; background: rgba(0, 0, 0, 0.7);
}
.status { display: none; position: absolute; z-index: 110; text-align: center; width: 80%; top: 220px; left: 47px;
}
.status p { background: white; padding: 30px;
}

Drag and Drop Quiz - Script Codes JS Codes

/**
* Drag and drop quiz intended for an iBooks widget
*/
$(document).ready( function() { //initialize the quiz options var answersLeft = []; $('.quiz-wrapper').find('li.option').each( function(i) { var $this = $(this); var answerValue = $this.data('target'); var $target = $('.answers .target[data-accept="'+answerValue+'"]'); var labelText = $this.html(); $this.draggable( { revert: "invalid", containment: ".quiz-wrapper" }); if ( $target.length > 0 ) { $target.droppable( { accept: 'li.option[data-target="'+answerValue+'"]', drop: function( event, ui ) { $this.draggable('destroy'); $target.droppable('destroy'); $this.html('&nbsp;'); $target.html(labelText); answersLeft.splice( answersLeft.indexOf( answerValue ), 1 ); } }); answersLeft.push(answerValue); } else { } }); $('.quiz-wrapper button[type="submit"]').click( function() { if ( answersLeft.length > 0 ) { $('.lightbox-bg').show(); $('.status.deny').show(); $('.lightbox-bg').click( function() { $('.lightbox-bg').hide(); $('.status.deny').hide(); $('.lightbox-bg').unbind('click'); }); } else { $('.lightbox-bg').show(); $('.status.confirm').show(); } });
});
Drag and Drop Quiz - Script Codes
Drag and Drop Quiz - Script Codes
Home Page Home
Developer Coran Spicer
Username cgspicer
Uploaded October 14, 2022
Rating 3.5
Size 3,837 Kb
Views 56,672
Do you need developer help for Drag and Drop Quiz?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Coran Spicer (cgspicer) Script Codes
Name
Donatello Sprite
Tile with special tiles experiment
FocalCenter.js for jQuery
Promise example
Header logo that changes
BuildUp
SMITE spinner
Album 88 Tuner
Aaronmarino.com v2 styles
Hi-rez logo
Create amazing Facebook ads with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!