I am making a set of minigames for my major project, with this minigame I have being following the same method from a previous minigame that I built before.
In my previous minigame I only had one PuzzleContainer but in this one I'm making now has four. Ever since I added three more PuzzleContainers the code doesn't seem to work. Have I done something wrong in my scipting? Can anyone tell me where I'm going wrong?
This is my code for the minigame I am currently working on.
$(document).ready(function() {
//speech
var progress = 0;
var txt;
$('#complete, #speech').hide();
function eventHandler() {
switch (progress) {
case 0:
txt = "Complete";
break;
case 1:
txt = "Move on to the next minigame";
$('#speech').click(function(){
window.location.href="minigame8.html";
});
break;
}
progress++;
$('#speech').html(txt);
}
$('#speech').click(eventHandler);
// Sortable //
$('#puzzleContainer1', '#puzzleContainer2', '#puzzleContainer3', '#puzzleContainer4').sortable({
update: function() {
var userPieces = '';
$('#puzzleContainer1 li', '#puzzleContainer2 li', '#puzzleContainer3 li', '#puzzleContainer4 li').each(function() {
userPieces += $(this).attr('data');
})
checkResult(userPieces);
}
});
$('#puzzleContainer1', '#puzzleContainer2', '#puzzleContainer3', '#puzzleContainer4').disableSelection();
//shows the "Enterpassword once pieces are all correctly aligned
function checkResult(userPieces) {
if (userPieces == '1234' && '12345' && '123456') {
$("#complete").show(0,function() {
eventHandler()
$('#speech').show();
});
}
}
});#puzzleContainer1 {
position: absolute;
z-index: 5;
top: 10px;
left: 130px;
list-style-type: none;
}
#puzzleContainer2 {
position: absolute;
z-index: 5;
top: 75px;
left: 130px;
list-style-type: none;
}
#puzzleContainer3 {
position: absolute;
z-index: 5;
top: 140px;
left: 130px;
list-style-type: none;
}
#puzzleContainer4 {
position: absolute;
z-index: 5;
top: 205px;
left: 130px;
list-style-type: none;
}
ul, menu, dir {
display: block;
}
.piece{
z-index: 5;
float: left;
margin: 0 10px 0 0;
padding: 0;
}
li {
display: list-item;
text-align: -webkit-match-parent;
}
#complete {
position: absolute;
width: 105px;
height: 25px;
top: 240px;
left: 289px;
background-color: black;
color: white;
font-size: 20px;
padding: 10px;
border-style: solid;
border-width: 5px;
border-color: white;
z-index:5;
}
#speech {
position: absolute;
width: 655px;
height: 100px;
top: 330px;
left: 15px;
background-color: black;
color: white;
font-size: 25px;
padding: 10px;
border-style: solid;
border-width: 5px;
border-color: white;
z-index: 99;
}<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>MAS340</title>
<link href="styles.css" rel="stylesheet" />
<script src="jquery-3.1.1.min.js"></script>
<script src="jquery-ui.js"></script>
<script>
//javascript goes here
</script>
</head>
<body>
<div id="stage">
<ul id="puzzleContainer1" class="ui-sortable">
<li class="piece" data="4"><img src="images/puzzle6/puzzleContainer1/L.png">4</li>
<li class="piece" data="1"><img src="images/puzzle6/puzzleContainer1/redF.png">1</li>
<li class="piece" data="2"><img src="images/puzzle6/puzzleContainer1/A.png">2</li>
<li class="piece" data="5"><img src="images/puzzle6/puzzleContainer1/E.png">5</li>
<li class="piece" data="3"><img src="images/puzzle6/puzzleContainer1/B.png">3</li>
</ul>
<ul id="puzzleContainer2" class="ui-sortable">
<li class="piece" data="3"><img src="images/puzzle6/puzzleContainer2/S.png">3</li>
<li class="piece" data="2"><img src="images/puzzle6/puzzleContainer2/U.png">2</li>
<li class="piece" data="4"><img src="images/puzzle6/puzzleContainer2/T.png">4</li>
<li class="piece" data="1"><img src="images/puzzle6/puzzleContainer2/redR.png">1</li>
</ul>
<ul id="puzzleContainer3" class="ui-sortable">
<li class="piece" data="3"><img src="images/puzzle6/puzzleContainer3/A.png">3</li>
<li class="piece" data="2"><img src="images/puzzle6/puzzleContainer3/N.png">2</li>
<li class="piece" data="4"><img src="images/puzzle6/puzzleContainer3/B.png">4</li>
<li class="piece" data="6"><img src="images/puzzle6/puzzleContainer3/E.png">6</li>
<li class="piece" data="1"><img src="images/puzzle6/puzzleContainer3/redE.png">1</li>
<li class="piece" data="5"><img src="images/puzzle6/puzzleContainer3/L.png">5</li>
</ul>
<ul id="puzzleContainer4" class="ui-sortable">
<li class="piece" data="1"><img src="images/puzzle6/puzzleContainer4/redE.png">1</li>
<li class="piece" data="4"><img src="images/puzzle6/puzzleContainer4/O.png">4</li>
<li class="piece" data="3"><img src="images/puzzle6/puzzleContainer4/H.png">3</li>
<li class="piece" data="2"><img src="images/puzzle6/puzzleContainer4/C.png">2</li>
</ul>
<input id="password" type="text" style="display: block;">
<button id="submit" style="display: block;">Enter Password</button>
<div id="complete">ACCEPTED</div>
<div id="speech"></div>
</div>
</body>
</html>
