Drag and Drop Quiz
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 - 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"> </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"> </span> attended Yale with the large and brooding<span class="target" data-accept="buchanan"> </span>.</li> <li>George Wilson owns an unsuccessful garage in an area known as the <span class="target" data-accept="ashes"> </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"> </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(' '); $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(); } });
});

Developer | Coran Spicer |
Username | cgspicer |
Uploaded | October 14, 2022 |
Rating | 3.5 |
Size | 3,837 Kb |
Views | 56,644 |
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!
Name | Size |
Fully Furnished | 3,613 Kb |
Fruit Stripe Background | 2,758 Kb |
ExamplesEdit | 1,592 Kb |
A Pen by Coran Spicer | 2,815 Kb |
Aaronmarino.com v2 styles | 2,863 Kb |
BuildUp | 3,509 Kb |
SMITE Ward Icon | 3,236 Kb |
Donatello Sprite | 2,452 Kb |
Tile with special tiles experiment | 1,952 Kb |
Hi-rez logo | 5,938 Kb |
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!
Name | Username | Size |
Popover Example | Seanboom | 2,429 Kb |
Basic HTML5 Structure | YuvarajTana | 1,289 Kb |
CMP5-Opdracht15 | SannevanGastel | 2,733 Kb |
My three.js practice | Esambino | 3,203 Kb |
Revolving Text Landing Page Trial | TimRuby | 2,976 Kb |
Personal Website Redesign v2.0 | DevItWithDavid | 5,168 Kb |
Freecodecamp - Tribute Page | Samoht513 | 3,583 Kb |
Flexbox Grid - equal height | DaveOrDead | 2,855 Kb |
Funny menu | AxeLVaisper | 4,671 Kb |
Ripples in water | Nobitagit | 2,704 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!