Hi Matt,
I'm not sure if you are still following this post or not, but any how, I wanted to check with you about some tweak that I made to your code.
My goal is to use this drag and drop for sorting type of exercises for our users.
And I will include the code that i have changed here. My question is how to get the order in which the user has placed his choices in cardSlots. That is, I want to save the user's answer.
Is there any way to do this?
Thanks in advance.
<%@ Page Language="vb" AutoEventWireup="false" CodeBehind="Test.aspx.vb" Inherits="Project.Test"
EnableEventValidation="false" ValidateRequest="false" %>
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="asp" %>
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit.HTMLEditor"
TagPrefix="cc1" %>
<!DOCTYPE html" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head runat="server">
<title>Sorting Exercise</title>
<style type="text/css">
/* Add some margin to the page and set a default font and colour */
body
{
margin: 30px;
font-family: "Georgia" , serif;
line-height: 1.8em;
color: #333;
}
/* Give headings their own font */
h1, h2, h3, h4
{
font-family: "Lucida Sans Unicode" , "Lucida Grande" , sans-serif;
}
/* Main content area */
#content
{
margin: 80px 70px;
text-align: center;
-moz-user-select: none;
-webkit-user-select: none;
user-select: none;
}
/* Header/footer boxes */
.wideBox
{
clear: both;
text-align: center;
margin: 70px;
padding: 10px;
background: #ebedf2;
border: 1px solid #333;
}
.wideBox h1
{
font-weight: bold;
margin: 20px;
color: #666;
font-size: 1.5em;
}
/* Slots for final card positions */
#cardSlots
{
margin: 50px auto 0 auto;
background: #ddf;
}
/* The initial pile of unsorted cards */
#cardPile
{
margin: 0 auto;
background: #ffd;
}
#cardSlots, #cardPile
{
width: 200px;
height: 400px;
padding: 0px;
border: 2px solid #333;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
-moz-box-shadow: 0 0 .3em rgba(0, 0, 0, .8);
-webkit-box-shadow: 0 0 .3em rgba(0, 0, 0, .8);
box-shadow: 0 0 .3em rgba(0, 0, 0, .8);
}
/* Individual cards and slots */
#cardSlots div, #cardPile div
{
float: left;
width: 80%;
height: 20px;
padding: 5px;
padding-top: 5px;
padding-bottom: 5px;
border: 2px solid #333;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
margin: 0 0 0 10px;
background: #fff;
}
#cardSlots div:first-child, #cardPile div:first-child
{
/*margin-left: 0;*/
}
#cardSlots div.hovered
{
background: #aaa;
}
#cardSlots div
{
border-style: dashed;
}
#cardPile div
{
background: #666;
color: #fff;
font-size: 12px;
text-shadow: 0 0 3px #000;
}
#cardPile div.ui-draggable-dragging
{
-moz-box-shadow: 0 0 .5em rgba(0, 0, 0, .8);
-webkit-box-shadow: 0 0 .5em rgba(0, 0, 0, .8);
box-shadow: 0 0 .5em rgba(0, 0, 0, .8);
}
/* Individually coloured cards */
#card0.correct
{
background: silver;
}
#card1.correct
{
background: red;
}
#card2.correct
{
background: brown;
}
#card3.correct
{
background: orange;
}
#card4.correct
{
background: yellow;
}
#card5.correct
{
background: green;
}
#card6.correct
{
background: cyan;
}
#card7.correct
{
background: blue;
}
#card8.correct
{
background: indigo;
}
#card9.correct
{
background: purple;
}
#card10.correct
{
background: violet;
}
#card11.correct
{
background: lime;
}
#card12.correct
{
background: Teal;
}
#card13.correct
{
background: Olive;
}
#card14.correct
{
background: White;
}
#card15.correct
{
background: Navy;
}
#card16.correct
{
background: gray;
}
/* "You did it!" message */
#successMessage
{
position: absolute;
left: 580px;
top: 250px;
width: 0;
height: 0;
z-index: 100;
background: #dfd;
border: 2px solid #333;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
-moz-box-shadow: .3em .3em .5em rgba(0, 0, 0, .8);
-webkit-box-shadow: .3em .3em .5em rgba(0, 0, 0, .8);
box-shadow: .3em .3em .5em rgba(0, 0, 0, .8);
padding: 20px;
}
</style>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/jquery-ui.min.js"></script>
<script type="text/javascript">
var correctCards = 0;
$(init);
//When|we|got|to|the|concert,|the |orchestra| had|already| begun|to|play.
var numbers = [[0, 'When'], [1, 'we'], [2, 'got'], [3, 'to'], [4, 'the'], [5, 'concert'], [6, 'the'], [7, 'orchestra'], [8, 'had'], [9, 'already'], [10, 'begun'], [11, 'to'], [12, 'play']];
var numbersunsorted = [[0, 'When'], [1, 'we'], [2, 'got'], [3, 'to'], [4, 'the'], [5, 'concert'], [6, 'the'], [7, 'orchestra'], [8, 'had'], [9, 'already'], [10, 'begun'], [11, 'to'], [12, 'play']];
function init() {
// Hide the success message
$('#successMessage').hide();
$('#successMessage').css({
left: '580px',
top: '250px',
width: 0,
height: 0
});
// Reset the game
correctCards = 0;
$('#cardPile').html('');
$('#cardSlots').html('');
$('#cardPile').height(35 * numbers.length);
$('#cardSlots').height(35 * numbers.length);
// Create the pile of shuffled cards
numbers.sort(function () { return Math.random() - .5 });
for (var i = 0; i < numbers.length; i++) {
$('<div>' + numbers[i][1] + '</div>').data('number', numbers[i][1]).attr('id', 'card' + numbers[i][0]).appendTo('#cardPile').draggable({
containment: '#content',
stack: '#cardPile div',
cursor: 'move',
revert: true
});
}
// Create the card slots
var words = ['', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', ''];
for (var i = 1; i <= numbers.length; i++) {
$('<div>' + numbersunsorted[i - 1][1] + '</div>').data('number', numbersunsorted[i - 1][1]).appendTo('#cardSlots').droppable({
accept: '#cardPile div',
hoverClass: 'hovered',
drop: handleCardDrop
});
}
}
function handleCardDrop(event, ui) {
var slotNumber = $(this).data('number');
var cardNumber = ui.draggable.data('number');
// If the card was dropped to the correct slot,
// change the card colour, position it directly
// on top of the slot, and prevent it being dragged
// again
if (slotNumber == cardNumber) {
ui.draggable.addClass('correct');
ui.draggable.draggable('disable');
$(this).droppable('disable');
ui.draggable.position({ of: $(this), my: 'left top', at: 'left top' });
ui.draggable.draggable('option', 'revert', false);
correctCards++;
}
if (slotNumber != cardNumber) {
ui.draggable.addClass('incorrect');
//ui.draggable.draggable('enable');
$(this).droppable('disable');
ui.draggable.position({ of: $(this), my: 'left top', at: 'left top' });
ui.draggable.draggable('option', 'revert', false);
}
// If all the cards have been placed correctly then display a message
// and reset the cards for another go
if (correctCards == numbers.length) {
$('<div>' + 'Your Score is: ' + correctCards + ' out of ' + numbers.length + '</div>').appendTo('#successMessage')
$('#successMessage').show();
$('#successMessage').animate({
left: '380px',
top: '200px',
width: '400px',
height: '100px',
opacity: 1
});
}
}
function showResult() {
$('<div>' + 'Your Score is: ' + correctCards + ' out of ' + numbers.length + '</div>').appendTo('#Div1');
$('#Div1').show();
$('#Div1').animate({
left: '380px',
top: '200px',
width: '400px',
height: '100px',
opacity: 1
});
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div id="content" style="width: 40%">
<div id="cardPile" style="float: left;">
<div id="card4" class="ui-draggable" style="position: relative;">
4</div>
<div id="card1" class="ui-draggable" style="position: relative;">
1</div>
<div id="card2" class="ui-draggable" style="position: relative;">
2</div>
<div id="card5" class="ui-draggable" style="position: relative;">
5</div>
<div id="card3" class="ui-draggable" style="position: relative;">
3</div>
<div id="card6" class="ui-draggable" style="position: relative;">
6</div>
<div id="card7" class="ui-draggable" style="position: relative;">
7</div>
<div id="card8" class="ui-draggable" style="position: relative;">
8</div>
<div id="card9" class="ui-draggable" style="position: relative;">
9</div>
<div id="card10" class="ui-draggable" style="position: relative;">
10</div>
<div id="card11" class="ui-draggable" style="position: relative;">
11</div>
<div id="card12" class="ui-draggable" style="position: relative;">
12</div>
<div id="card13" class="ui-draggable" style="position: relative;">
13</div>
<div id="card14" class="ui-draggable" style="position: relative;">
14</div>
</div>
<div id="cardSlots">
<div class="ui-droppable">
one</div>
<div class="ui-droppable">
two</div>
<div class="ui-droppable">
three</div>
<div class="ui-droppable">
four</div>
<div class="ui-droppable">
five</div>
<div class="ui-droppable">
six</div>
<div class="ui-droppable">
seven</div>
<div class="ui-droppable">
eight</div>
<div class="ui-droppable">
nine</div>
<div class="ui-droppable">
ten</div>
<div class="ui-droppable">
Eleven</div>
<div class="ui-droppable">
Twelve</div>
<div class="ui-droppable">
Thirteen</div>
<div class="ui-droppable">
Fourteen</div>
</div>
<div id="successMessage" style="display: none; left: 580px; top: 250px; width: 0px;
height: 0px;">
<button onclick="init()">
Play Again</button>
</div>
<button onmouseover="showResult()" onmouseout="$('#Div1').hide(); $('#Div1').html('');">
Show Result</button>
<div id="Div1" style="display: none; left: 580px; top: 250px; width: 0px;
height: 0px;">
</div>
</div>
</form>
</body>
</html>
[Edited by hitech on 30-May-13 10:53]
Glad it's working now anyway!
