HTML5 CSS3 JAVASCRIPT & jQUERY

Please add below lines of code in the file named written below to test.

Your first index.html file

<html>

<head>

</head>

<body>

</div>

<a tabindex="7" name="position6" class="fButton" id="finshButton"><span class="mButton" >FINISHED</span></a>

<div>

<span id="resetButton">RESET</span>

</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);

}

// Your player controller js file

(function(param){

var btnArray = new Array();

param.fnData = function()
{
loadData();
}

param.arr = function()
{
return btnArray;
}

function addButtonEvents()
{
for(var i=0;i<btnArray.length;i++)
{
btnArray[i].bind('click',handleButtonEvents)
}
}

function handleButtonEvents(e)
{
var obj = $(e.target)
console.log(obj.html())
}

function loadData(){
$(".urClass").empty(); // div class where you want to add your divs
var jsonLoad = "js/data.json";
var tempItems = "";
$.ajax({
url: jsonLoad,
type: "post",
async:true,
dataType:"json",
data: {},
success: function(data){
$("div#headerText").text(data.headerTextData); // add header text from json
$("div#footerText").text(data.footerTextData); // add footer text from json

var tempVal;
var tempValImage;
var paddingLeft=0;
var paddingLeftImage=0;
for (var i = 0; i < data.dataArr.length; i++) {
tempVal=100*i+10+paddingLeft;
var tempObj = new nSpace.myObj(i,tempVal,data.dataArr[i])
tempItems = tempObj.getHTMLdata();
paddingLeft=paddingLeft+5;
$(". urClass").append(tempItems);
btnArray.push(tempItems)
};

console.log(tempItems);
addButtonEvents();
}
});
}
})(nSpace = nSpace || {})
var nSpace;

// your data class who return html content

nSpace.myObj = function(nID,nLeft,Data)
{
var htmlData = ''
function init()
{
htmlData = $('<div id="obj'+nID+'" class="" style="width:100px; height:50px; left:'+nLeft+'px; top:110px; position:absolute; background-color:grey; margin-right: 2cm; line-height: 50px;")>'+Data+'</div>');
}
init()

return{
getHTMLdata:function()
{
return htmlData;
}
}

}

// Your JSON class , from where your data comes

{
"headerTextData":"This is heading",
"dataArr":["Home","About-Us","Gallery","Contact-Us","Products"],
"gallaryImageArr":["images/icon1.png","images/icon2.png","images/icon3.png","images/icon4.png"],
"footerTextData":"This is footerText"
}

// index file

<!DOCTYPE html>

<html>

<head>

</head>

<body>

</div>

</body>

</html>

HTML5 CSS3 JAVASCRIPT & jQUERY

Tuesday, 23 September 2014

Drag and Drop activity type 1 : revert if droppable is already filled

Monday, 15 September 2014

Dynamic data loading from JSON using ajax in to your html page