Please add below lines of code in the file named written below to test.
Your first index.html file
<html>
<head>
<link rel="stylesheet" href="css/style.css" />
<link rel="stylesheet" href="JS/jquery-ui.css">
<script type="text/javascript" src="JS/jquery-1.10.2.js"></script>
<script type="text/javascript" src="JS/jquery-ui.js"></script>
<script type="text/javascript" src="JS/activity.js"></script>
<script type="text/javascript" src="JS/jquery.ui.touch-punch.js"></script>
</head>
<body>
<div id="masterDiv">
<div id="lockButtonDiv"></div>
<div id="header">
<div id="headerText"></div>
</div>
<div class="dragActivity"></div>
<a tabindex="7" name="position6" class="fButton" id="finshButton"><span class="mButton" >FINISHED</span></a>
<div id="bottom">
<div id="bottomText1"></div>
<div>
<span id="resetButton">RESET</span>
</div>
</div>
</div>
</body>
</html>
Now activity.js class // playercontroller
var posArr = new Array();
var clonePosArr = new Array();
var ansArr = [4, 5, 2, 6, 3, 6];
var bRevert = true;
$(document).ready(function() {
loadLabels();
setTimeout(function(){
RegisterEvents()
}, 500);
});
var elementLength
function loadLabels(){
//alert("ExercisesOther");
$(".dragActivity").empty();
var jsonLoad1 = "JS/data.json";
var tempItems = "";
$.ajax({
url: jsonLoad1,
type: "post",
async:true,
dataType:"json",
data: {},
success: function(data){
// alert("success"+data.data1.length);
$("div#headerText").text(data.headerTextData);
$("div#bottomText1").text(data.footerTextData);
elementLength = data.data1.length
for (var i = 0; i < elementLength; i++) {
j=i+1;
tempItems += '<div id="dvDrop'+j+'" class="dvDrop"></div>';
tempItems += '<div class="btn" id="btnP'+i+'" tabindex="'+j+'"><span id="mButton6" class="mButton">'+data.data1[i]+'</span></div>';
tempItems += '<div id="ans'+j+'" class="answer"></div>';
};
$(".dragActivity").append(tempItems);
}
});
}
function getPosition() {
posArr = new Array();
for (var i = 0; i <= elementLength-1; i++) {
posArr.push($("#btnP" + i).position());
};
clonePosArr = posArr;
}
function handelButtonEvents(e)
{
switch (e.type)
{
case "mousedown":
$(this).css("background-color","blue");
break;
case "mouseup":
$(this).css("background-color","grey");
break;
case "mouseover":
$(this).css("background-color","grey");
break;
case "mouseout":
$(this).css("background-color","white");
break;
case "keypress":
break;
}
}
function giveAnswers()
{
var aTemp = new Array();
$(".btn").each(function()
{
var data = ($(this).attr('holder') != 'null')?Number(String($(this).attr('holder')).slice(6,7)):'null'
aTemp.push(data)
})
return aTemp;
}
function RegisterEvents()
{
console.log("RegisterEvents");
//console.log('RegisterEvents')
$("#finshButton,#resetButton").bind("mouseover mouseout keypress keyup mouseup mousedown ",handelButtonEvents);
getPosition();
$("#btnP0,#btnP1,#btnP2,#btnP3,#btnP4,#btnP5").attr("holder",'null');
$("#btnP0,#btnP1,#btnP2,#btnP3,#btnP4,#btnP5").attr("pos",'');
$("#btnP0,#btnP1,#btnP2,#btnP3,#btnP4,#btnP5").draggable({
containment: "#masterDiv",
revert: function()
{
//console.log('revert Called')
if(bRevert)
{
// console.log('revert Called inside')
var pos = String($(this).attr('pos')).split('|')
$(this).css('top',Number(pos[0]))
$(this).css('left',Number(pos[1]))
}
},
start:function(){
$(this).attr('pos',$(this).position().top+"|"+$(this).position().left)
$(this).css("z-index","20");
bRevert = true;
},
revertDuration: 0
});
$("#dvDrop1,#dvDrop2,#dvDrop3,#dvDrop4,#dvDrop5,#dvDrop6").attr("bFilled","null");
$("#dvDrop1,#dvDrop2,#dvDrop3,#dvDrop4,#dvDrop5,#dvDrop6").droppable({
drop: function(event, ui) {
$(ui.draggable).css("z-index","10");
if ($(this).attr("bFilled")!="true")
{
if($(ui.draggable).attr('holder') != 'null')
{
$('#'+$(ui.draggable).attr('holder')).attr('bFilled','null')
$(ui.draggable).attr('holder','null')
}
var dropId = $(this).attr("id");
$(ui.draggable).attr("holder",dropId);
$(this).attr("bFilled","true")
var leftPos = $(this).position().left
var topPos = $(this).position().top
ui.draggable.css('left', leftPos);
ui.draggable.css('top', topPos)
$(ui.draggable).attr('pos',topPos+"|"+leftPos)
bRevert = false;
}
else
{
bRevert = true;
}
}
});
$("#resetButton").click(function() {
$("#lockButtonDiv").css("display","none");
resetButtonNames();
});
$("#finshButton").click(function() {
$("#lockButtonDiv").css("display","block");
for(var i=1;i<=6;i++)
{
if($("#dvDrop"+i).attr("bFilled")=="null")
{
console.log("here <<<<<<<<<<<<<<<<");
$(".answer").removeClass("right wrong");
}
}
var userAnswers = giveAnswers();
for(var i=0;i<userAnswers.length;i++)
{
if(userAnswers[i] == ansArr[i])
{
$("#ans"+userAnswers[i]).addClass("right");
}
else
{
$("#ans"+userAnswers[i]).addClass("wrong");
}
}
});
}
function resetButtonNames() {
$("#dvDrop1,#dvDrop2,#dvDrop3,#dvDrop4,#dvDrop5,#dvDrop6").attr("bFilled","null");
$("#btnP0,#btnP1,#btnP2,#btnP3,#btnP4,#btnP5").attr("holder",'null');
for (var k = 1; k <= elementLength; k++) {
$("#ans" + k).removeClass("right wrong");
}
for (var i = 0; i <= elementLength-1; i++) {
$("#btnP" + i).css("top", posArr[i].top).css("left", posArr[i].left);
}
for (var i = elementLength-1; i >= 0; i--) {
var j = Math.floor(Math.random() * (i + 1));
var temp = clonePosArr[i];
clonePosArr[i] = clonePosArr[j];
clonePosArr[j] = temp;
// console.log(i);
$("#btnP" + i).css("top", clonePosArr[i].top).css("left", clonePosArr[i].left);
}
}
Third add style.css class
body
{
margin: 0px;
}
.ui-draggable-dragging{ z-index: 10000; }
div#masterDiv
{
/*background-image: url("../images/bg.jpg");*/
width:1010px; height:648px;
/*position:absolute;
top:70px; left:0px;*/
border-style: solid;
border-color: #000000;
border-width: 2px;
top:75px;
margin:0 auto;
position: relative;
}
div#lockButtonDiv
{
width:1010px;
height:532px;
z-index: 100;
display: none;
position: absolute;
}
div#header
{
background-color: orange;
border-color: white white #000000;
border-style: solid;
border-width: 0 0 2px;
height: 45px;
position: relative;
top: 0px;
line-height:45px;
text-align: center;
font-family: 'Arial';
font-size: 24px;
}
div#headerText
{
left: 25px;
position: absolute;
}
.dvDrop
{
border-color: #000000 #c0c0c0 #c0c0c0 #000000 ;
border-style: solid;
border-width: 1px;
height: 40px;
/*margin-right: 100px;*/
position: absolute;
width: 193px;
line-height:40px;
background-color: gray;
}
#dvDrop1
{
left: 125px;
top: 184px;
}
#dvDrop2
{
left: 380px;
top: 184px;
}
#dvDrop3
{
left: 638px;
top: 184px;
}
#dvDrop4
{
left: 125px;
top: 354px;
}
#dvDrop5
{
left: 380px;
top: 354px;
}
#dvDrop6
{
left: 638px;
top: 354px;
}
div#buttonGrid
{
/*border-color: #000000 white;
border-style: solid;
border-width: 2px 0;*/
height: 100px;
position: absolute;
top: 415px;
width: 1010px;
font-family: 'Arial';
font-size: 18px;
}
.btn
{
border-color: #c0c0c0 #000000 #000000 #c0c0c0 ;
border-style: solid;
border-width: 1px;
height: 40px;
/*margin-right: 100px;*/
position: absolute;
width: 193px;
cursor: pointer;
line-height:40px;
background-color: #ffffff;
z-index: 10;
font-family: "Arial";
}
.mButton
{
margin: 9px;
}
#btnP0
{
left: 7px;
top: 420px;
}
#btnP1{ left: 250px;
top: 420px;
}
#btnP2{ top: 420px;
left: 494px;}
#btnP3{ left: 7px;
top: 479px;
}
#btnP4{ left: 250px;
top: 479px;
}
#btnP5 { left: 494px;
top: 479px;
}
.fButton
{
left: 885px;
top: 472px;
border-color: #000000;
border-style: solid;
border-width: 1px;
height: 40px;
/*margin-right: 100px;*/
position: absolute;
width: 110px;
cursor: pointer;
line-height:40px;
font-family: 'Arial';
font-size: 19px;
}
div#bottom
{
background-color: orange;
border-color: #000000 white;
border-style: solid;
border-width: 2px 0;
height: 116px;
position: absolute;
top: 530px;
width: 1010px;
/*line-height:116px;
text-align: center;*/
}
div#bottomText1
{
font-family: 'Arial';
font-size: 21px;
height: 35px;
left: 20px;
position: absolute;
top: 12px;
width: 812px;
}
div#bottomText2
{
font-family: 'Arial';
font-size: 21px;
height: 40px;
left: 20px;
position: absolute;
top: 42px;
width: 837px;
}
#resetButton
{
background-color: white;
border-color: #000000;
border-style: solid;
border-width: 1px;
cursor: pointer;
font-family: 'Arial';
font-size: 19px;
height: 34px;
left: 919px;
line-height: 34px;
margin-right: 100px;
position: absolute;
text-align: center;
top: 59px;
width: 71px;
}
.right
{
background-image: url("../images/right.png");
background-repeat: no-repeat;
z-index: 10;
width: 51px;
height: 44px;
}
.wrong
{
background-image: url("../images/wrong.png");
background-repeat: no-repeat;
z-index: 10;
width: 51px;
height: 44px;
}
.answer {position:absolute;z-index: 20;}
#ans1 {top:184px; left:233px;}
#ans2 {top:184px; left:528px;}
#ans3 {top:184px; left:789px;}
#ans4 {top:354px; left:233px;}
#ans5 {top:354px; left:528px;}
#ans6 {top:354px; left:789px;}
Next we have data.json
{
"data1": ["DIRECT-INDIRECT","SEMI-INDIRECT"],
"headerTextData": "test headerTextData",
"footerTextData": "test footerTextData"
}
No comments:
Post a Comment