var Fraction = {};//namespace
var Utils = {};
Utils.Path = " ";
var resId = 0, questionId = 0, startTime = 0, scoredMarks = 0, totalMarks = 10, label = " ", level = 1, scoreFlag = false;
$(document).ready(function () {
    $(".se-pre-con").fadeOut("slow");
    if ((navigator.userAgent.match(/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile/i))&& !(window.location.href.includes('http')))
        Utils.mobileDeviceFlag = true;
    /* if (Utils.mobileDeviceFlag)
        Utils.Path = Android.getMediaPath("Fraction Equivalent"); */
    setTimeout(function () { Fraction.Initilize(); }, 200);
});
Fraction.Initilize = function () {
	document.title = Fraction.hardcoded.title;
    Fraction.setImages(); //function that set all the images 
    document.getElementById("gamePage").style.display = "none";
    document.getElementById("endPage").style.display = "none";
	document.getElementById("widget").style.display="none";
    document.body.style.backgroundImage = "url('images/skin/Game-bg.png')";
    Fraction.variableInitilization(); //function to declare and initilize all images
}
Fraction.setImages = function () {
    document.getElementById("logoImg").src = Utils.Path + "images/skin/logo.png";
    document.getElementById("playImage").src = Utils.Path + "images/skin/Play.png";
    document.getElementById("soundImage").src = Utils.Path + "images/skin/Sound.png";
    document.getElementById("skipImage").src = Utils.Path + "images/skin/Skip.png";
    document.getElementById("nextImage").src = Utils.Path+"images/skin/Next.png";
    document.getElementById("instructionPlay").src = Utils.Path + "images/skin/Play.png";
    document.getElementById("headingSpanId").innerHTML = Fraction.hardcoded.title;
    document.getElementById("heading_Instruction").innerHTML = Fraction.hardcoded.instruction;
    //document.getElementById("instrctions").innerHTML = Fraction.hardcoded.instruction_1;
	document.getElementById("bookId").style.backgroundImage  = Utils.Path+"url('images/skin/Books.png')";
    document.getElementById("canvasDivId").style.backgroundImage  = Utils.Path+"url('images/skin/clock.png')";
    document.getElementById("canvasDivId2").style.backgroundImage  = Utils.Path+"url('images/skin/clock.png')";
    document.getElementById("correctWrongImage2").src = Utils.Path+"images/skin/Doll_1.png";
	document.getElementById("confiramtionText").innerHTML = Fraction.modalData.responseMsg;
    document.getElementById("Yes").innerHTML = Fraction.modalData.yes;
    document.getElementById("No").innerHTML = Fraction.modalData.no;
}
Fraction.variableInitilization = function () {
    Fraction.numOfSection = 0;  //used to divide the circle into number of part
    Fraction.numOfColorPart = 0;//used to color the number of part
    Fraction.arc = 0;//used to calculate the angle according to num of section
    Fraction.angle = 0;
    Fraction.dollFlag = false;
    Fraction.optionFlag = false;
  	Fraction.quesCount = 0;//number of attempts
    Fraction.Answer = 0; //answer of the question
	Fraction.counter = 0;//index from the queastion Array
	Fraction.secods=0;
	Fraction.ansCount = 0;//used for count correct ans
	Fraction.correctCounter=0;//variable for the number of correct ans
	Fraction.total_No_of_Questions=5;	
    Fraction.ctx; //varible to get context of the canvas
    Fraction.radius;
    Fraction.x; //x cordinate for where to start canvas horizontally
    Fraction.y; // y cordinate for where to start canvas vertically
	Fraction.quesArray=[]; //array that contain 5 ques with option
    Fraction.noResponseTimer;//timer for please ans the ques
	Fraction.timerID;//timer for the nextQuestion
    Fraction.quesFlag=false;//flag to identify the wether question skipedor not
}
Fraction.showInstruction = function(){
    var unorderedList,i=0,listorderd,totalInstruction;
    totalInstruction =Fraction.hardcoded.instruction_1;
    unorderedList = document.createElement("ul");
    unorderedList.setAttribute("id","unorderedListId");
     for(i=0;i<totalInstruction.length;i++)
     {
        listorderd = document.createElement("li");
        listorderd.setAttribute("id","listorderdId"+i);
        listorderd.innerHTML = Fraction.hardcoded.instruction_1[i];
        unorderedList.appendChild(listorderd);
     }
     document.getElementById("instrctions").appendChild(unorderedList);
    document.getElementById("coverPage").style.display = "none";
   // document.getElementById("homeDiv").style.visibility = "visible";
    document.getElementById("instructionPage").style.display="block"
}
Fraction.startGame = function () {
    Fraction.playInstruction();
    document.getElementById("coverPage").style.display = "none";
    document.getElementById("instructionPage").style.display="none"
    document.getElementById("widget").style.display = "block";
    document.getElementById("gamePage").style.display = "block";
    document.body.style.backgroundImage = Utils.Path+"url('images/skin/Game-bg.png')";
	Fraction.createCanvas();
	Fraction.calculateSection();
    Fraction.drawCircle();
}
Fraction.createCanvas = function () { //canvas and optioDiv
    var  width = canvasDivId.offsetWidth;
    var  height = canvasDivId.offsetHeight;
    canvasTag = document.createElement("canvas");
    canvasTag.setAttribute("id", "canvasId");
    canvasTag.setAttribute("width",width);
    canvasTag.setAttribute("height",height);
   document.getElementById("canvasDivId").appendChild(canvasTag);
    var canvasElement = document.getElementById("canvasId");
    Fraction.ctx = canvasElement.getContext('2d');
    canvasElement.style.width = "99%";
    canvasElement.style.height = "101%";
    Fraction.radius = (canvasElement.width/2.7), Fraction.x = (canvasElement.width / 2.25), Fraction.y = (canvasElement.height / 2);
    for (var i = 0; i < 4; i++) {//Div for the option
        optionDiv = document.createElement("div");
        optionDiv.setAttribute("id", "optionDivID" + i);
        optionDiv.setAttribute("class", "nopadding optionDivClass col-sm-3 col-xs-3 col-md-3 col-lg-3");
        optionDiv.setAttribute("onclick", "Fraction.checkAnswer(this.id)");
        document.getElementById("innerOptionDivId").appendChild(optionDiv);
		document.getElementById("optionDivID"+i).style.backgroundImage = 'url('+"images/skin/Cube_"+i+".png"+')';
        numartorDiv = document.createElement("div"); //div for numerator value of option
        numartorDiv.setAttribute("id", "numaratorID" + i);
        numartorDiv.setAttribute("class", "nopadding numartorDivlass col-sm-5 col-xs-5 col-lg-5 col-md-5 col-sm-offset-3 col-xs-offset-3 col-lg-offset-3 col-md-offset-3");
        optionDiv.appendChild(numartorDiv);
        DenomratorDiv = document.createElement("div");//div for denomator value of option
        DenomratorDiv.setAttribute("id", "denomratorID" + i);
        DenomratorDiv.setAttribute("class", "nopadding denomratorDivClass col-sm-5 col-xs-5 col-lg-5 col-md-5 col-sm-offset-3 col-xs-offset-3 col-lg-offset-3 col-md-offset-3");
        optionDiv.appendChild(DenomratorDiv);
	}
}
Fraction.calculateSection = function () {//random num to divide the circle and color the circle
	while(Fraction.quesArray.length<5)
	{
		jsonObj = {};
		var array_of_Option=[];
		Fraction.numOfSection = Math.floor(Math.random() * 7) + 1;
     	Fraction.numOfColorPart = Math.floor(Math.random() * Fraction.numOfSection - 1) + 1;
		if (Fraction.numOfSection <= 2 || Fraction.numOfColorPart <= 0) {
        Fraction.calculateSection();
		return 0;
		}
		else{
		   array_of_Option = Fraction.calculateOption();
		}
		jsonObj['section'] = Fraction.numOfSection;
		jsonObj['colorPart'] = Fraction.numOfColorPart;
        jsonObj['options'] = array_of_Option;
        jsonObj['optionFlag'] = Fraction.optionFlag;
		Fraction.quesArray.push(jsonObj);
	}
    console.log(Fraction.quesArray);
}
Fraction.calculateOption = function () {//calculate option 
    var randNum=0,randNo=0,mainOptionArray=[],optionArray=[],randomArray=[],flag = false;
    randNum = Math.floor(Math.random()*2);
	randNo = Math.floor(Math.random()*2);
    if(randNum == 0){
    optionArray.push(Fraction.numOfColorPart);
    optionArray.push(Fraction.numOfSection);
    mainOptionArray.push(optionArray);
    randomArray.push(Fraction.numOfColorPart);
    randomArray.push(Fraction.numOfSection);
    optionArray = [];
    }
    if ((Fraction.numOfColorPart % 2 == 0) && (Fraction.numOfSection % 2 == 0)) {
        flag = true;
        Fraction.option1 = Fraction.numOfColorPart / 2;
        optionArray.push(Fraction.option1);
        Fraction.option2 = Fraction.numOfSection / 2	
        optionArray.push(Fraction.option2);
        mainOptionArray.push(optionArray);
        randomArray.push(Fraction.option1);
        randomArray.push(Fraction.option2);
        optionArray = [];
        if(randNum == 1)
        {
            Fraction.option1 = Fraction.numOfColorPart*2;
            optionArray.push(Fraction.option1);
            Fraction.option2 = Fraction.numOfSection*2;
            optionArray.push(Fraction.option2);
            mainOptionArray.push(optionArray);
            randomArray.push(Fraction.option1);
            randomArray.push(Fraction.option2);
            optionArray = [];
        }
    }
	else {
        Fraction.option1 = Fraction.numOfColorPart * 2;
		optionArray.push(Fraction.option1);
        Fraction.option2 = Fraction.numOfSection * 2;
        optionArray.push(Fraction.option2);
        randomArray.push(Fraction.option1);
        randomArray.push(Fraction.option2);
        mainOptionArray.push(optionArray);
        optionArray = [];
        if(randNum == 1)
        {
            Fraction.option1 = Fraction.numOfColorPart * 3;
		    optionArray.push(Fraction.option1);
             Fraction.option2 = Fraction.numOfSection * 3;
            optionArray.push(Fraction.option2);
            randomArray.push(Fraction.option1);
            randomArray.push(Fraction.option2);
            mainOptionArray.push(optionArray);
            optionArray = [];
         }
      
    }
    if(randNo == 1){
       // Fraction.optionFlag = false;
    for (var i = 0; i < 2; i++) {
        while (optionArray.length < 2) {
            var option1 = Math.floor(Math.random() * 10)+1;
            if (randomArray.indexOf(option1) == -1) {
			    optionArray.push(option1);
                randomArray.push(option1);
            }
           }
           optionArray.sort(function (a, b) { return a - b }); //sort the number in the desc order
           mainOptionArray.push(optionArray);
           optionArray = [];
    }
}
    else{
        Fraction.optionFlag = true;
        if(flag == true){
            Fraction.option1 = Fraction.numOfColorPart * 3;
		    optionArray.push(Fraction.option1);
             Fraction.option2 = Fraction.numOfSection * 3;
            optionArray.push(Fraction.option2);
            randomArray.push(Fraction.option1);
            randomArray.push(Fraction.option2);
            mainOptionArray.push(optionArray);
            optionArray = [];
        }
        else{
            Fraction.option1 = Fraction.numOfColorPart*4;
		    optionArray.push(Fraction.option1);
             Fraction.option2 = Fraction.numOfSection*4;
            optionArray.push(Fraction.option2);
            randomArray.push(Fraction.option1);
            randomArray.push(Fraction.option2);
            mainOptionArray.push(optionArray);
            optionArray = [];
        }
        while (optionArray.length < 2) {
            var option1 = Math.floor(Math.random() * 10)+1;
            if (randomArray.indexOf(option1) == -1)
            {
			    optionArray.push(option1);
                randomArray.push(option1);
            }
        }
        optionArray.sort(function (a, b) { return a - b }); //sort the number in the desc order
        mainOptionArray.push(optionArray);
        optionArray = [];
    }
        mainOptionArray = shuffle(mainOptionArray);
	   return (mainOptionArray);
} 
Fraction.drawCircle = function () {//draw and divide circle
    d = new Date();  //date object
    startTime = d.getDate() + "-" + (d.getMonth() + 1) + "-" + d.getFullYear() + " " + d.getHours() + ":" + d.getMinutes() + ":" + d.getSeconds();  //to get the current date 
    scoreFlag = false;
	Fraction.quesFlag=false;
    Fraction.ctx.beginPath();
    Fraction.ctx.arc(Fraction.x, Fraction.y, Fraction.radius, 0, 2 * Math.PI);
    Fraction.ctx.closePath();
    for (var i = 0; i < Fraction.quesArray[Fraction.counter].section; i++) {
        Fraction.arc = Math.PI * 2 / Fraction.quesArray[Fraction.counter].section;
        Fraction.angle = -(0 + Fraction.arc * i);
        if (i < Fraction.quesArray[Fraction.counter].colorPart)
            Fraction.ctx.fillStyle = "orange";
        else
            Fraction.ctx.fillStyle = "white";
        Fraction.ctx.beginPath();
        Fraction.ctx.lineTo(Fraction.x, Fraction.y);
        Fraction.ctx.arc(Fraction.x, Fraction.y, Fraction.radius, Fraction.angle, Fraction.angle + Fraction.arc, false);
        Fraction.ctx.arc(Fraction.x, Fraction.y, 1, Fraction.angle + Fraction.arc, Fraction.angle, true);
        Fraction.ctx.fill();
        Fraction.ctx.lineWidth = 2;
        Fraction.ctx.strokeStyle = "black";
        Fraction.ctx.stroke();
    }
	Fraction.setOption();
}
Fraction.setOption = function () {//to set Option
    for (var i = 0; i < 4; i++) {
        document.getElementById("numaratorID" + i).innerHTML = Fraction.quesArray[Fraction.counter].options[i][0];
        document.getElementById("denomratorID" + i).innerHTML = Fraction.quesArray[Fraction.counter].options[i][1];
    }
	
	Fraction.seconds = 0;
	Fraction.startTimer(); //please ans the ques instruction.
}
Fraction.playInstruction = function () { // sound button
    document.getElementById("playSound").src = Utils.Path + "sounds/Instruction/instruction.mp3";
    document.getElementById("playSound").play();
}
 Fraction.checkAnswer = function (clicked_id) {//ans wrong or rigth
    var childs,numarValue,denomValue;
    scoreFlag = true;
    document.getElementById("canvasDivId2").style.visibility="hidden";
	clearInterval(Fraction.noResponseTimer);
	clearTimeout(Fraction.timerID);
     childs = document.getElementById(clicked_id).children;
     numarValue = childs[0].innerHTML;
     denomValue = childs[1].innerHTML;
    Fraction.Answer = Fraction.quesArray[Fraction.counter].colorPart / Fraction.quesArray[Fraction.counter].section;
    Fraction.clicked_answer = numarValue / denomValue;
    if (Fraction.Answer == Fraction.clicked_answer) {
        document.getElementById("playSound").pause();
        $("#" + clicked_id).css('pointer-events', 'none');
        $("#" + clicked_id).addClass('animated bounce');
		Fraction.ansCount++;
		if(Fraction.ansCount==1)
		{
            if(Fraction.quesArray[Fraction.counter].optionFlag == true)
              $("#correctWrongImage2").css({"transform":"rotate(-60deg)","top":"2vh"});
            else
            $("#correctWrongImage2").css({"transform":"rotate(-45deg)","top":"-1vh"});
            document.getElementById("playSound").src = Utils.Path + "sounds/Instruction/Buzzercorrect 1.mp3";
            document.getElementById("playSound").play();
            Fraction.seconds = 0;
	        Fraction.startTimer();
		}
        if (Fraction.ansCount == 2) {
            if(Fraction.quesArray[Fraction.counter].optionFlag == false)
             {
                Fraction.correctCounter++;
                if(Fraction.dollFlag == true)
                    $("#correctWrongImage2").css({"transform":"rotate(-45deg)","top":"-1vh"});
                else
                   $("#correctWrongImage2").css({"transform":"rotate(0deg)","top":"2vh"});
                $("#canvasId").hide();
                $("#canvasDivId").hide();
               document.getElementById("watchImg").style.display="block";
              document.getElementById("watchImg").src = Utils.Path+"images/skin/clock-correct.gif";
             $("#canvasDivId").addClass('animated bounce');
			  document.getElementById("correctWrongImage2").src = Utils.Path + "images/skin/Doll-Correct.gif";
			  document.getElementById("playSound").src = Utils.Path + "sounds/Instruction/Weldone.mp3";
             document.getElementById("playSound").play();
			 $('.optionDivClass').css('pointer-events', 'none');
             scoredMarks = 10;
             lebel = " ";
             Fraction.scoreFunction();
               if (Fraction.timerID) {
				clearTimeout(Fraction.timerID);
				Fraction.timerID = null;
			  }
			  	Fraction.timerID = setTimeout(Fraction.checkCounter, 2000);
				Fraction.quesArray.splice(Fraction.counter, 1);
			}
           else{
            if(Fraction.dollFlag == true) 
                $("#correctWrongImage2").css({"transform":"rotate(-60deg)","top":"2vh"});
            else
               $("#correctWrongImage2").css({"transform":"rotate(-30deg)","top":"2vh"});

               $("#canvasDivId").addClass('animated bounce');
			  document.getElementById("playSound").src = Utils.Path + "sounds/Instruction/Buzzercorrect 1.mp3";
             document.getElementById("playSound").play();
             Fraction.seconds = 0;
	        Fraction.startTimer();
         }
        }
           if(Fraction.ansCount == 3)
           {
            Fraction.correctCounter++;
            if(Fraction.dollFlag == true)
            $("#correctWrongImage2").css({"transform":"rotate(-30deg)","top":"2vh"});
            else
            $("#correctWrongImage2").css({"transform":"rotate(0deg)","top":"-2vh"});
            $("#canvasId").hide();
            $("#canvasDivId").hide();
           document.getElementById("watchImg").style.display="block";
          document.getElementById("watchImg").src = Utils.Path+"images/skin/clock-correct.gif";
         $("#canvasDivId").addClass('animated bounce');
          document.getElementById("correctWrongImage2").src = Utils.Path + "images/skin/Doll-Correct.gif";
          document.getElementById("playSound").src = Utils.Path + "sounds/Instruction/Weldone.mp3";
         document.getElementById("playSound").play();
         $('.optionDivClass').css('pointer-events', 'none');
         scoredMarks = 10;
         lebel = " ";
         Fraction.scoreFunction();
           if (Fraction.timerID) {
            clearTimeout(Fraction.timerID);
            Fraction.timerID = null;
          }
              Fraction.timerID = setTimeout(Fraction.checkCounter, 2000);
            Fraction.quesArray.splice(Fraction.counter, 1);
          }
        }
    
    else {  // when answer is wrong
           Fraction.dollFlag = true;
			clearTimeout(Fraction.correctImgTimerId);
            document.getElementById("playSound").pause();
            $("#" + clicked_id).css('pointer-events', 'none');
            $("#" + clicked_id).addClass('animated shake');
          //  Fraction.showCanvas(numarValue,denomValue);
            Fraction.ansCount++;
            if(Fraction.ansCount==1)
            {
                document.getElementById("playSound").src = Utils.Path + "sounds/Instruction/wrongSound.mp3";
                document.getElementById("playSound").play();
                Fraction.seconds = 0;
                Fraction.startTimer();
            }
            if (Fraction.timerID) {
                clearTimeout(Fraction.timerID);
                Fraction.timerID = null;
            }
           if(Fraction.ansCount == 2)
           {
               if(Fraction.quesArray[Fraction.counter].optionFlag == false){
                   document.getElementById("playSound").src = Utils.Path + "sounds/Instruction/wrongSound.mp3";
                    document.getElementById("playSound").play();
                    $("#canvasId").hide();
                    $("#canvasDivId").hide();
                    document.getElementById("watchImg").style.display="block";
		            document.getElementById("watchImg").src = Utils.Path+"images/skin/clock-wrong.gif";
                    $("#" + clicked_id).addClass('animated shake');
                    document.getElementById("correctWrongImage2").src = Utils.Path + "images/skin/Doll-Wrong.gif";
                    scoredMarks = 0;
                    lebel = " ";
                    Fraction.scoreFunction();
                    $('.optionDivClass').css('pointer-events', 'none');
                    Fraction.timerID = setTimeout(Fraction.checkCounter, 2000);
                    Fraction.quesArray.splice(Fraction.counter, 1);
               }
               else{
                      document.getElementById("playSound").src = Utils.Path + "sounds/Instruction/wrongSound.mp3";
                       document.getElementById("playSound").play();
                       $("#" + clicked_id).addClass('animated shake');
                       document.getElementById("correctWrongImage2").src = Utils.Path + "images/skin/Doll-Wrong.gif";
                    }
            }
            if(Fraction.ansCount == 3)
            {
                document.getElementById("playSound").src = Utils.Path + "sounds/Instruction/wrongSound.mp3";
                document.getElementById("playSound").play();
                $("#canvasId").hide();
                $("#canvasDivId").hide();
                document.getElementById("watchImg").style.display="block";
                document.getElementById("watchImg").src = Utils.Path+"images/skin/clock-wrong.gif";
                $("#" + clicked_id).addClass('animated shake');
                document.getElementById("correctWrongImage2").src = Utils.Path + "images/skin/Doll-Wrong.gif";
                scoredMarks = 0;
                lebel = " ";
                Fraction.scoreFunction();
                $('.optionDivClass').css('pointer-events', 'none');
                Fraction.timerID = setTimeout(Fraction.checkCounter, 2000);
                Fraction.quesArray.splice(Fraction.counter, 1);
            }	
    }
    Fraction.showCanvas(numarValue,denomValue);
}
Fraction.showCanvas = function(numarValue,denomValue){
    $("#canvasDivId2").addClass("animated bounceInDown");
    document.getElementById("canvasDivId2").style.visibility="visible";
    var upValue  = numarValue;
    var downvalue = denomValue;
    var canvasWidth = canvasDivId2.offsetWidth;
    var canvasHeigth = canvasDivId2.offsetHeight;
    document.getElementById("canvas2").setAttribute("width",canvasWidth);
    document.getElementById("canvas2").setAttribute("height",canvasHeigth);
    var canvasElement2 = document.getElementById("canvas2");
    var contex = canvasElement2.getContext('2d');
    canvasElement2.style.width = "99%";
    canvasElement2.style.height = "101%"; 
    var r = (canvasElement2.width/2.7), xAxis = (canvasElement2.width / 2.25), yAxis = (canvasElement2.height / 2);
    contex.beginPath();
    contex.arc(xAxis, yAxis, r , 0, 2 * Math.PI);
    contex.closePath();
    for (var i = 0; i < downvalue; i++) {
        var canvasArc = Math.PI * 2 / downvalue;
        var angleValue = -(0 + canvasArc * i);
        if (i < upValue)
        contex.fillStyle = "orange";
        else
        contex.fillStyle = "white";
        contex.beginPath();
        Fraction.ctx.lineTo(xAxis, yAxis);
        contex.arc(xAxis,yAxis,  r,angleValue, angleValue+canvasArc, false);
        contex.arc(xAxis,yAxis, 1, angleValue + canvasArc,angleValue, true);
        contex.fill();
        contex.lineWidth = 2;
        contex.strokeStyle = "black";
        contex.stroke();
    }
}
Fraction.checkCounter = function () {//check attempt ques
	clearInterval(Fraction.noResponseTimer);
	clearTimeout(Fraction.timerID);
    Fraction.quesFlag = true;
  
    if (Fraction.counter < Fraction.quesArray.length) {
        Fraction.nextQuestion();
    }
    else {
        if (Fraction.quesArray.length != 0) {
            Fraction.counter = 0;
            clearTimeout(Fraction.timerID);
            clearInterval(Fraction.noResponseTimer);
            document.getElementById("responseBoxDiv").style.display = "block";
            document.getElementById("soundlogo").style.pointerEvents = "none";
            document.getElementById("playSound").pause();
        }
        else {
            Fraction.gameOver();
        }
    }
}
Fraction.nextQuestion = function () {
    clearInterval(Fraction.noResponseTimer);
	clearTimeout(Fraction.timerID);
    document.getElementById("playSound").pause();
    document.getElementById("canvasDivId2").style.visibility="hidden";
    Fraction.ansCount = 0;
    Fraction.optionFlag=false;
    Fraction.dollFlag = false;
	if(Fraction.quesFlag == false)
	{
	  Fraction.counter++;
	}
    $("#canvasDivId").removeClass('animated bounce');
    $("#canvasDivId").removeClass('animated shake');
    //$("#correctWrongImage2").addClass("dollclassinit");
    //$("#correctWrongImage2").removeClass("dollClass1");
    $("#correctWrongImage2").css({"transform":"rotate(-90deg)","top":"7vh"});
	document.getElementById("watchImg").src =" ";
    document.getElementById("watchImg").style.display="none";
    document.getElementById("canvasDivId").style.backgroundImage  = Utils.Path+"url('images/skin/clock.png')";
    $("#canvasDivId").show();
    $("#canvasId").show();
    $('.shake').removeClass('animated shake');
    $('.bounce').removeClass('animated bounce'); 
    document.getElementById("correctWrongImage2").src = Utils.Path+"images/skin/Doll_1.png";
    $('.optionDivClass').css('pointer-events', 'auto');
    for (var i = 0; i < 4; i++) {
        document.getElementById("numaratorID" + i).innerHTML = " ";
        document.getElementById("denomratorID" + i).innerHTML = " ";
    }
    Fraction.ctx.clearRect(0, 0, canvasTag.width, canvasTag.height); //function to clear canvas
    if (Fraction.counter < Fraction.quesArray.length) {
        Fraction.drawCircle();
    }
    else {
        if (Fraction.quesArray.length != 0) {
            Fraction.counter = 0;
            clearTimeout(Fraction.timerID);
            document.getElementById("responseBoxDiv").style.display = "block";
            document.getElementById("soundlogo").style.pointerEvents = "none";
			document.getElementById("playSound").pause();
        }
        else {
            Fraction.gameOver();
        }
    }
}
Fraction.gameOver = function () {
    document.getElementById("playSound").pause();
	 document.getElementById("responseBoxDiv").style.display = "none";
    document.getElementById("endPage").style.display = "block";
    document.getElementById("widget").style.display = "none";
    document.getElementById("gamePage").style.display = "none";
    document.getElementById("GameOver").innerHTML = Fraction.hardcoded.gameOver;
	Fraction.createStars();
    Fraction.giveStars();
}
Fraction.createStars = function () {//create div for stars
    clearInterval(Fraction.noResponseTimer);
    var newImage, newDiv, i, numberOfStars = 5;
    for (i = 1; i <= Math.floor(numberOfStars); i++) {
        newDiv = document.createElement("div");
        newDiv.setAttribute("id", "starDiv" + i);
        newDiv.setAttribute("class", "nopadding stars col-xs-2 col-md-2 col-lg-2 col-sm-2");
        newImage = document.createElement("img");
        newImage.setAttribute("id", "starImg" + i);
        newImage.setAttribute("class", "img-responsive nopadding col-sm-12 col-lg-12 col-md-12 col-xs-12");
        newImage.setAttribute("src", Utils.Path + "images/skin/star1.png");
        $(newDiv).append(newImage);
        $("#starsDiv").append(newDiv);
    }
}
Fraction.giveStars = function () //calculate stars
{   
    clearInterval(Fraction.noResponseTimer);
    var i, numberOfStars = 0, temp;
    ans = Fraction.total_No_of_Questions / 5;
    temp = Fraction.correctCounter / ans;
    numberOfStars = Math.floor(temp);
    temp = Math.round(temp);
    for (i = 1; i <= Math.floor(numberOfStars); i++)
        document.getElementById("starImg" + i).setAttribute("src", Utils.Path + "images/skin/star2.png");
    $("#starsDiv").css("visibility", "visible");
    if (numberOfStars != 0) {
        document.getElementById("playSound").src = Utils.Path + "sounds/Instruction/" + "Star" + numberOfStars + ".mp3";
        document.getElementById("playSound").play();
    }
    if (Utils.mobileDeviceFlag)
        Android.StudentCertification(Fraction.correctCounter, Fraction.total_No_of_Questions, "8");
}

Fraction.showNext = function () {
    document.getElementById("responseBoxDiv").style.display = "none";
	clearInterval(Fraction.noResponseTimer);
    Fraction.quesFlag =true;
	clearTimeout(Fraction.timerID);
    if (Fraction.quesArray.length != 0) {
        Fraction.counter = 0;
        Fraction.nextQuestion();
    }
    else {
        clearTimeout(Fraction.timerID);
        Fraction.gameOver();
		}
}
Fraction.startTimer = function () {// instruction plz ans the ques
    if (Fraction.noResponseTimer) {
        clearInterval(Fraction.noResponseTimer);
        Fraction.noResponseTimer = null;
        Fraction.seconds = 0;
    }
    Fraction.noResponseTimer = setInterval(function () {
        Fraction.seconds++;
        if (Fraction.seconds >= 7) {
            document.getElementById("playSound").src = Utils.Path + "sounds/Instruction/please_ans_the_ques.mp3";
            document.getElementById("playSound").play();
            clearInterval(Fraction.noResponseTimer);
            if (Fraction.timeOut) {
                clearTimeout(Fraction.timeOut);
                Fraction.timeOut = null;
            }
            Fraction.timeOut = setTimeout(function () {
                Fraction.seconds = 0;
                Fraction.startTimer();
            }, 2000);
        }
    }, 1000);
}
Fraction.goNext = function () {// move to the next game
    if (Utils.mobileDeviceFlag)
        Android.GotoNextGame();
}
Fraction.scoreFunction = function () {//display score
    console.log(resId, questionId, scoredMarks, totalMarks, level, startTime, label);
    if (Utils.mobileDeviceFlag) {
        Android.addScore(resId, questionId, scoredMarks, totalMarks, level, startTime);
    }
}
