Drag and Drop Randômico
Galera preciso de um ajuda... To quebrando a cabeça com isso.
Preciso que um dos três números 1 se encaixem no primeiro quadro, depois vão sobrar 2, um desses dois tem que se encaixar no 4 quadro e o que sobrar se encaixe no 7 quadro. Independente de qual escolher, ele precisa encaixar.
Será que conseguem me ajudar com isso?
Muito Obrigado.
<!DOCTYPE html>
<html lang="pt">
<head>
<title>Vetoquinol Game</title>
<meta name="generator" content="BBEdit 7.0.3" />
<link rel="Stylesheet" href="css/style.css" type="text/css" />
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery-ui.min.js"></script>
<style type="text/css">
p{font-size:1em;}
.caption{font-size:.8em;
font-weight:bold;}
/*img{border:solid 1px #000000;}*/
td{vertical-align:top;}
#draggable { width: 24px; height: 24px; background: red; }
#helper { width: 24px; height: 24px; background: yellow; }
/* Main content area */
#gameContent {
margin: 10px;
font-family: Georgia, serif;
line-height: 1.1em;
color: #333;
margin: 5px 5px;
text-align: center;
}
#cardPile {
/*margin: 0 auto;*/
background: #fff;
}
#cardSlots {
float:right;
margin: -515px 30px 0 auto;
background: #b2b2b2;
}
#cardSlots, #cardPile {
width: 423px;
height: 442px;
padding: 33px;
border: 3px 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 */
#cardPile div {
float: left;
width: 130px;
height: 130px;
padding: 1px;
padding-bottom: 0;
/*border: 2px solid #333;*/
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
margin: 10px 5px 0 0px;
/*background: #fff;*/
}
#cardSlots div {
float: left;
width: 130px;
height: 130px;
padding: 1px;
padding-bottom: 0;
border: 0px solid #333;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
margin: 10px 5px 0 0px;
/*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: .8em;*/
/*text-shadow: 0 2px 2px #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 */
/*
#card1.correct { background: green; }
#card2.correct { background: green; }
#card3.correct { background: green; }
#card4.correct { background: green; }
#card5.correct { background: green; }
#card6.correct { background: green; }
#card7.correct { background: green; }
#card8.correct { background: green; }
#card9.correct { background: green; }
#card10.correct { background: green; }
#card11.correct { background: green; }
#card12.correct { background: green; }
*/
/* "You did it!" message */
#successMessage {
position: absolute;
left: 480px;
top: 500px;
width: 323px;
height: 0;
z-index: 100;
background: #ccc;
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;
}
#message {
position: absolute;
left: 580px;
top: 750px;
width: 0;
height: 0;
z-index: 100;
background: #fff;
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">
//<!--
title="Vetoquinol Game";
subject="SEP";
var list=new Array("part1");
// Usage:
function showAnswer(id){
if(document.getElementById(id).style.display=="none"){
document.getElementById(id).style.display="";
}else{
document.getElementById(id).style.display="none";
}
}
function hideAll(){
for(i=0;i<list.length;i++){
document.getElementById(list*).style.display="none";**
**
$("#answersToggle").click(function(){*
*
$("#answers").toggle("slow");*
*
});*
*
$("#answer1").hide("fast");*
*
$("#answer2").hide("fast");
*
*
**
$("#answer1Toggle").click(function(){*
*
$("#answer1").toggle("slow");*
*
$("#answer2").hide("fast");*
*
});*
*
$("#answer2Toggle").click(function(){*
*
$("#answer2").toggle("slow");*
*
$("#answer1").hide("fast");*
*
});*
*
});
*
*
**
$( init );*
*
*
*
function init() {*
*
$('#makeMeDraggable').draggable();
*
*
**
$('#draggable').draggable( {*
*
cursor: 'move',*
*
containment: 'document',*
*
helper: helper*
*
} );*
*
}
*
*
**
function helper( event ) {*
*
return '<div id="helper" style="font-size:.6em;">drag!</div>';*
*
}
*
*
**
var correctCards = 0;
*
*
**
$( gameInit );*
*
*
*
function gameInit() {*
*
*
*
// Hide the success message*
*
$('#successMessage').hide();*
*
$('#successMessage').css( {*
*
left: '580px',*
*
top: '750px',*
*
width: 0,*
*
height: 0*
*
} );*
*
$('#message').hide();*
*
$('#message').css( {*
*
left: '580px',*
*
top: '750px',*
*
width: 0,*
*
height: 0*
*
} );*
*
// Reset the game*
*
correctCards =0;*
*
$('#cardPile').html( '' );*
*
$('#cardSlots').html( '' );*
*
var numOfCards=9;*
*
// Create the pile of shuffled cards*
*
var numbers = [ 1, 2, 3, 1, 5, 1, 7, 8, 9 ] ;
*
*
**
var text = [ '1', *
*
'2',*
*
'3',*
*
'4',*
*
'5',*
*
'6',*
*
'7',*
*
'8',*
*
'9'];*
*
*
*
//var text = [ '<img src="images/enisyl.png" width="136" height="135" />', *
*
//'<img src="images/flevox.png" width="136" height="135" />',*
*
//'<img src="images/cimalgex.png" width="136" height="135" />',*
*
//'<img src="images/enisyl.png" width="136" height="135" />',*
*
//'<img src="images/program.png" width="136" height="135" />',*
*
//'<img src="images/cimalgex.png" width="136" height="135" />',*
*
//'<img src="images/flevox.png" width="136" height="135" />',*
*
//'<img src="images/cimalgex.png" width="136" height="135" />',*
*
//'<img src="images/program.png" width="136" height="135" />'];*
*
numbers.sort( function() { return Math.random() - .05 - .05 } );*
*
*
*
for ( var i=0; i<text.length; i++ ) {*
*
$('<div>' + text[numbers-1] + '</div>').data( 'number', numbers ).attr( 'id', 'card'+numbers** ).appendTo( '#cardPile' ).draggable( {*
*
containment: '#content',*
*
stack: '#cardPile div',*
*
cursor: 'move',*
*
revert: true,*
*
start:hideMessage*
*
*
*
} );*
*
}*
*
*
*
// Create the card slots*
*
var words = ['<img src="images/quadro1.png" width="136" height="135" />', '<img src="images/quadro2.png" width="136" height="135" />', '<img src="images/quadro3.png" width="136" height="135" />','<img src="images/quadro4.png" width="136" height="135" />', '<img src="images/quadro5.png" width="136" height="135" />', '<img src="images/quadro6.png" width="136" height="135" />', '<img src="images/quadro7.png" width="136" height="135" />', '<img src="images/quadro8.png" width="136" height="135" />', '<img src="images/quadro9.png" width="136" height="135" />'];*
*
for ( var i=1; i<=words.length; i++ ) {*
*
$('<div>' + words[i-1] + '</div>').data( 'number', i ).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 ) {*
*
/**
*
if(slotNumber==1){*
*
$('#message').show().html("SLA works by curing and solidify successive layers of liquid photopolymer resin using an ultraviolet laser.");*
*
} *
*
if(slotNumber==2){*
*
$('#message').show().html("Selective Laser Sintering is similar to SLA, but instead of liquid resin, powdered materials including nylon, ceramics, glass, aluminum, to steel or silver can be used.");*
*
} *
*
if(slotNumber==3){*
*
$('#message').show().html("Chuck Hull founds 3D systems, which develops its first commercial 3D printer, the Stereolithography Apparatus (or SLA-1)");*
*
} *
*
if(slotNumber==4){*
*
$('#message').show().html("Fused Deposition Modeling heats and extrudes thermoplastic filament, depositing layers of semi-liquid beads along an STL-defined extrusion path.");*
*
} *
*
if(slotNumber==5){*
*
$('#message').show().html("Scott Crump founds Stratasys");*
*
} *
*
if(slotNumber==6){*
*
$('#message').show().html("Four Selective Laser Sintering machines were built, but none were ever sold. Each cost $300,000-$400,000.");*
*
} *
*
if(slotNumber==7){*
*
$('#message').show().html("LOM bonds and cuts sheet material using a digitally guided laser.");*
*
} *
*
if(slotNumber==8){*
*
$('#message').show().html("MIT's Three Dimensional Printing (3DP) spreads a thin layer of powdered material on a flat bed, solidifying successive layers with fine jets of binding agent. MIT licenses it technology to several companies including ZCorp.");*
*
} *
*
if(slotNumber==9){*
*
$('#message').show().html("Anthony Atala, director of the Institute for Regenerative Medicine at Wake Forest University School of Medicine, leads a research team that successfully implants a lab-grown bladder into a human patient. The organ is built by seeding a 3D-printed scaffold with bladder cells.");*
*
} *
*
if(slotNumber==10){*
*
$('#message').show().html("The aim of the RepRap (Replicating Rapid Prototyper) project is is to create a Fused Filament Fabrication (FFF) 3D printer that can print most of its own components. FFF instead of FDM is chosen to describe the process in order to avoid legal issues with Stratasys.");*
*
} *
*
if(slotNumber==11){*
*
$('#message').show().html("Thingiverse was started in November 2008 by Zach \"Hoeken\" Smith as a companion site to MakerBot Industries, a DIY 3D printer kit making company.");*
*
} *
*
if(slotNumber==12){*
*
$('#message').show().html("The project comes out of Cornell's Fab@Home venture, headed up by associate professor Hod Lipson. Started in 2005, the project aims to create do-it-yourself versions of machines that can manufacture custom objects on-demand. The group started experimenting with food fabrication in 2007."); *
*
} *
*
/
*
*
*
animateMessage();*
*
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 all the cards have been placed correctly then display a message*
*
// and reset the cards for another go*
*
*
*
if ( correctCards == 9 ) {*
*
$('#successMessage').show();*
*
$('#successMessage').animate( {*
*
left: '700px',*
*
top: '350px',*
*
width: '300px',*
*
height: '60px',*
*
opacity: 1*
*
} );*
*
}*
*
*
*
}*
*
function hideMessage(){*
*
$('#message').animate( *
*
{*
*
left: '220px',*
*
top: '700px',*
*
width: '600px',*
*
height: '100px',*
*
opacity: 0*
*
});*
*
}*
*
function animateMessage(){*
*
$('#message').animate( *
*
{*
*
left: '220px',*
*
top: '700px',*
*
width: '600px',*
*
height: '100px',*
*
opacity: 1*
*
});*
*
*
*
}*
*
//-->*
*
</script>
*
*
**
*
*
</head>*
*
<body class="thrColFixHdr">*
*
<!-- begin address -->*
*
<div id="container"><!-- end address --> *
*
<!-- begin title --><!-- end title, end ghetto code -->*
*
<!-- begin sidebar 1 -->*
*
<!-- <div id="sidebar1">*
*
<p></p>*
*
</div>-->*
*
<!-- end #sidebar1 -->*
*
<!-- begin #sidebar2 --><!-- end #sidebar2 -->*
*
<!-- begin #maincontent -->
*
*
**
<div id="mainContent">*
*
<!--Game-->
*
*
**
<div id="part1" style="display:block;">*
*
<div id="gameContent">*
*
*
*
<div id="cardPile"> </div>*
*
<div id="cardSlots"> </div>*
*
<div id="message"></div>*
*
<div id="successMessage">*
*
<span style="font-weight:bold;font-size:2em;">Parabéns! Você acertou todos!</span><br><br>*
*
<button onclick="gameInit()">Jogar Novamente</button>*
*
</div>*
*
*
*
</div>*
*
<ol class="instructions">*
*
</ol>*
*
</div>*
*
<div></div>*
*
*
*
</div>*
*
<!-- This clearing element should immediately follow the #mainContent div in order to force the #container div to contain all child floats --><br class="clearfloat" />
*
*
**
<!-- end #container --></div>*
*
</body>*
*
</html>
*
Discussão (0)
Carregando comentários...