/* JavaScript Document  
/  @author Nityanand Ojha
*/

const grade = 1;

var fntSize = [40, 35, 30];

let selected = [];
var rubricfntSize = fntSize[grade - 1] + "px";
var quesfntSize = (fntSize[grade - 1]) - 5 + "px";
var optionFntSize = (fntSize[grade - 1]) - 5 + "px";
var fontFace = "Rubric";
var fontFace1 = "Ans, sans-serif";
var rArr = ["Amazing", "Brilliant", "Excellent", "Good", "GoodJob", "Superb", "Welldone", "Wonderful"];
const cArr = ["Oops"];
var wArr = [];
var nArr = ["ThinkAgain", "LetsTryAgain", "LetsGiveAnotherShot", "TryOnceAgain"];

var colorObj = { initial: "#fff", select: "#99ffff" };
var storageArr = [];
var _main;

var sourceOGG = ""
var sourceMP3 = ""

var _rubricTxt;
var _quesTxt;
var srialNo;
var correctMC;

var animDiv;
var chkAns;
var allDone = [];
var audio;
var submitBtn;
var answerBtn;
var checkSol;
var nextBtn;
var preBtn;
var nextpreNav;
var fillAreaCnt = 0;
var selObj = {};
var Qno = 0;
var svgElem;
var xmlns = "http://www.w3.org/2000/svg";
var boxWidth = 1000;
var boxHeight = 420;

const introDelay = 1000;
var introVid;
//////// G for grammer, V for vocabulary..........
var introType = "";
startIntro()
function startIntro() {
	introVid = document.createElement("video");
	titleText = document.createElement("div");
	document.body.appendChild(introVid);
	introVid.style.position = "absolute";
	introVid.style.top = "0px";

	introVid.addEventListener("ended", onEnd);

	//titleText.style.width = "1280px";
	titleText.style.position = "absolute";
	titleText.style.fontFamily = "Title";
	titleText.style.opacity = 0;
	titleText.style.textAlign = "center";
	titleText.style.fontSize = "50px";
	document.body.appendChild(titleText);

	if (introType.length == 0)
		introVid.style.visibility = 'hidden';


	switch (introType.toLowerCase()) {
		case "g":
			titleText.innerHTML = data.title;
			titleText.style.width = "630px";
			titleText.style.top = "400px";
			titleText.style.left = "590px";
			titleText.style.color = "#000";
			introVid.src = "Assets/intro/Title_Grammar.mp4"
			introVid.play();
			setTimeout(showTitle, 3000);
			break;
		case "v":
			titleText.innerHTML = data.title;
			titleText.style.width = "712px";
			titleText.style.top = "400px";
			titleText.style.left = "205px";
			titleText.style.color = "#000";
			introVid.src = "Assets/intro/Title_Vocab.mp4";
			introVid.play();
			setTimeout(showTitle, 5000);
			break;
		default:
			//feedbackVid.init();
			introVid.removeEventListener("ended", onEnd);
			$(titleText).animate({ opacity: 0 }, 1);
			$(introVid).animate({ opacity: 0 }, 1, odd_one_out);
			/* document.getElementById("main").style.backgroundImage = "url('Assets/images/bg.jpg')"; */

			break;
	}

	/* submitBtn = document.getElementById("submit");
	answerBtn = document.getElementById("answer");
	submitBtn.style.visibility = "hidden";
	answerBtn.style.visibility = "hidden"; */
}

function showTitle() {
	$(titleText).animate({ opacity: 1 }, 1000);
}

function onEnd() {
	document.getElementById("main").style.backgroundImage = "url('Assets/images/bg.jpg')";
	//feedbackVid.init();
	introVid.removeEventListener("ended", onEnd);
	$(titleText).animate({ opacity: 0 }, introDelay);
	$(introVid).animate({ opacity: 0 }, introDelay, odd_one_out);
}

function initializeSCORM() {
	const scormInitialized = pipwerks.SCORM.init();
	if (scormInitialized) {
		console.log("SCORM initialized successfully.");
	} else {
		console.error("Failed to initialize SCORM.");
	}
}
function setInitialSCORMStatus() {
	const status = pipwerks.SCORM.get("cmi.core.lesson_status");
	if (status !== "completed" && status !== "passed") {
		pipwerks.SCORM.set("cmi.core.lesson_status", "incomplete");
	}
}

function completeSCORMActivity() {
	pipwerks.SCORM.set("cmi.core.lesson_status", "completed");
	pipwerks.SCORM.save();
}
function terminateSCORM() {
	pipwerks.SCORM.quit();
}



const scaleIt = (element) => {
	console.log("scaleIt");

	// Get screen size
	const checkheight = window.innerHeight;
	const checkwidth = window.innerWidth;


	// Original dimensions
	const mydivHeight = 720;
	const mydivWidth = 1280;

	// Calculate scales as numbers
	const scaleH = checkheight / mydivHeight;
	const scaleW = checkwidth / mydivWidth;

	// Use the smaller scale to maintain aspect ratio
	const calculatedScale = Math.min(scaleH, scaleW);



	// Apply transform origin
	//element.style.transformOrigin = "top left";

	// Apply scale only if smaller than 1
	if (calculatedScale < 1) {
		element.style.transform = `scale(${calculatedScale})`;
	} else {
		element.style.transform = `scale(0.8)`;
	}

	console.log("Scaling Info", {
		screen: [checkwidth, checkheight],
		scaleH,
		scaleW,
		finalScale: calculatedScale
	});
}

function odd_one_out() {
	try {
		initializeSCORM();
		setInitialSCORMStatus();
	} catch (error) {
		console.log("Error: " + error);

	}
	_main = getElement(MAINTAG);
	scaleIt(_main);


	svgElem = document.getElementsByTagName("svg")[0];
	svgElem.style.position = "absolute";
	svgElem.style.top = "160px";
	svgElem.style.left = "99px";
	//svgElem.style.border = "2px solid #fff";
	svgElem.style.borderRadius = "10px";
	//svgElem.style.backgroundColor = "rgba(184,230,236, 0.7)";
	svgElem.style.visibility = "hidden";

	//createSVGTag();

	document.body.removeChild(titleText);
	titleText = null;
	document.body.removeChild(introVid);
	introVid = null;

	for (var i = 0; i < data.Aarr.length; i++) {
		var tmpAttempt = [];
		for (var j = 0; j < data.Aarr[Qno].length; j++) {
			tmpAttempt.push(0);
		}
		storageArr.push({ attempt: tmpAttempt, quesDone: "false" });
	}
	//console.log(storageArr," ******");

	checkSol = createTag("div");
	checkSol.setAttribute("id", "checkSolution");
	_main.appendChild(checkSol);

	answerBtn = createTag("div");
	answerBtn.setAttribute("id", "answer");
	answerBtn.innerHTML = "ANSWER";
	checkSol.appendChild(answerBtn);

	submitBtn = createTag("div");
	submitBtn.setAttribute("id", "submit");
	submitBtn.innerHTML = "CHECK";
	checkSol.appendChild(submitBtn);

	submitBtn.addEventListener("click", onSubmitClick);
	submitBtn.style.pointerEvents = "none";
	submitBtn.style.opacity = 0.5;
	answerBtn.addEventListener("click", onSolutionClick);

	srialNo = document.createElement("div");
	_main = document.getElementById("main");
	audio = document.createElement("audio");
	_main.appendChild(audio);
	sourceMP3 = document.createElement("source");
	audio.appendChild(sourceMP3)
	sourceOGG = document.createElement("source");
	audio.appendChild(sourceOGG)

	_rubricTxt = document.createElement("div");
	_main.appendChild(_rubricTxt);

	rubricAud = document.createElement("span");
	_rubricTxt.append(rubricAud)
	rubricAud.setAttribute("id", "rubricAud")
	rubricAud.classList.add("customButton")
	rubricAud.style.backgroundImage = "url('../__images/audOFF.png')";
	rubricAud.addEventListener("click", onRubricAudClicked)

	rubText = document.createElement("span")
	_rubricTxt.append(rubText)
	rubText.innerHTML = data.rubric || data._rubric;

	//_rubricTxt.innerHTML = data.rubric;
	_rubricTxt.style.background = "#1ac2f3";
	_rubricTxt.style.color = "rgb(68, 68, 68)";
	_rubricTxt.style.padding = 10 + "px";
	_rubricTxt.style.borderRadius = 10 + "px";
	_rubricTxt.style.marginTop = 15 + "px";
	_rubricTxt.style.marginLeft = 530 + "px";
	_rubricTxt.style.fontSize = 35 + "px";
	_rubricTxt.style.fontFamily = fontFace;
	_rubricTxt.style.display = 'inline-block';
	_rubricTxt.style.border = '2px solid #000';
	_rubricTxt.style.borderRadius = '32px';
	_rubricTxt.style.width = 685 + "px";

	soundComplete();

	//soundComplete();
}


function onRubricAudClicked(e) {
	rubricAud.style.backgroundImage = "url('../__images/audON.png')";
	sourceOGG.src = "Assets/rubric/rubric.ogg";
	sourceMP3.src = "Assets/rubric/rubric.mp3";
	audio.load()
	audio.load();
	audio.play();
	audio.addEventListener("ended", rubComplete);
}


function rubComplete() {
	audio.removeEventListener("ended", rubComplete);
	rubricAud.style.backgroundImage = "url('../__images/audOFF.png')";
}

function soundComplete() {
	var colorIns = document.createElement("div");
	_main.appendChild(colorIns);
	colorIns.innerHTML = 'Pick colours from here.';
	colorIns.style.position = "absolute";
	colorIns.style.bottom = "309px";
	colorIns.style.left = "249px";
	colorIns.style.fontSize = "27px";
	colorIns.style.fontFamily = "rubric";
	colorIns.style.color = "white";

	//audio.removeEventListener("ended", soundComplete);
	addingNextPre();
	addQuestion(0);
}

function createSVGTag() {
	svgElem = document.createElementNS(xmlns, "svg");
	svgElem.setAttribute("viewBox", "0 0 " + boxWidth + " " + boxHeight);
	svgElem.setAttribute("width", boxWidth);
	svgElem.setAttribute("height", boxHeight);
	svgElem.style.position = "absolute";
	svgElem.style.top = "100px";
	svgElem.style.left = "50px";
	svgElem.style.border = "1px solid red";
	_main.appendChild(svgElem);
}

function addingNextPre() {
	nextpreNav = document.createElement("div");
	nextpreNav.style.visibility = "hidden";
	nextpreNav.className = "nextpreNav";
	nextpreNav.setAttribute("id", "nextpreNav");
	nextpreNav.style.top = 587 + "px";
	nextpreNav.style.left = 165 + "px";
	_main.appendChild(nextpreNav);

	nextBtn = document.createElement("div");
	nextBtn.setAttribute("id", "nextBtn");

	preBtn = document.createElement("div");
	preBtn.setAttribute("id", "preBtn");
	disableObj(preBtn);
	nextpreNav.appendChild(nextBtn);
	nextpreNav.appendChild(preBtn);

	nextpreNav.addEventListener("click", onNavigationClick);

}

function onNavigationClick(e) {

	if (e.target.id == "preBtn") {
		submitBtn.style.pointerEvents = "none";
		submitBtn.style.opacity = 0.5;
		removePrevious();
		addQuestion(--Qno);
		handlingDoneQues();

		if (!Qno) {
			disableObj(e.target);
			return;
		}
		enableObj(getElement("nextBtn"));

	} else if (e.target.id == "nextBtn") {
		submitBtn.style.pointerEvents = "none";
		submitBtn.style.opacity = 0.5;
		Qno++
		removePrevious();
		addQuestion(Qno);
		handlingDoneQues();

		if (Qno == data.optionArr.length - 1) {
			console.log(Qno, " dddddddddddddddddddd ", data.optionArr.length - 1);
			disableObj(e.target);
			return;
		}
		enableObj(getElement("preBtn"));
	}
}

function disableObj(obj) {
	obj.style.pointerEvents = "none";
	obj.style.opacity = 0.5;
}

function enableObj(obj) {
	obj.style.pointerEvents = "auto";
	obj.style.opacity = 1;
}

function remove_quesTxt() {
	_main.removeChild(_quesTxt);
	_quesTxt = null;
}

function addQuestion(indx) {
	//feedbackVid.doReset();
	submitBtn.style.visibility = "visible";
	answerBtn.style.visibility = "visible";

	/* _quesTxt && remove_quesTxt();
	_quesTxt = document.createElement("div")
	_main.appendChild(_quesTxt);
	_quesTxt.style.position = "absolute";
	_quesTxt.innerHTML = data.quesArr[indx].ques;
	_quesTxt.style.top = (_rubricTxt.offsetHeight+70)+"px"
	_quesTxt.style.left = 120+"px"
	_quesTxt.style.backgroundColor = "#fff";
	_quesTxt.style.padding = "10px";
	_quesTxt.style.border = "3px solid #F29B34";
	_quesTxt.style.fontSize = quesfntSize;
	_quesTxt.style.fontFamily = fontFace1;
	
	var cWidth = Math.min(_quesTxt.offsetWidth, 1000);
	_quesTxt.style.width = cWidth+"px"; */

	//createSvgElements();

	svgElem.style.visibility = "visible";

	var swatch = document.getElementById("swatches");
	var colorCnt = 0;
	for (var i = 0; i < swatch.children.length; i++) {
		swatch.children[i].style.pointerEvents = "none";

		switch (swatch.children[i].nodeName) {
			case "text":
				/* var txt = swatch.children[i];
				txt.setAttribute("font-family", fontFace);
				txt.setAttribute("font-size", quesfntSize); */
				break;
			default:
				//console.log(swatch.children[i].nodeName," swatch");
				var swt = swatch.children[i];
				swt.style.pointerEvents = "auto";
				//swt.setAttribute("filter", "url(#f2)");
				swt.setAttribute("id", "swatch" + colorCnt);
				swt.setAttribute("fill", data.swatches[i]);
				swt.setAttribute("cursor", "pointer");
				swt.addEventListener("click", onSwatchesClicked);
				swt.addEventListener("mouseover", onSwatchesOver);
				colorCnt++;
				break;
		}
	}

	var fillArea = document.getElementById("fill");
	var cnt = 0;
	for (var j = 0; j < fillArea.children.length; j++) {
		fillArea.children[j].style.pointerEvents = "none";

		switch (fillArea.children[j].nodeName) {
			case "text":
				/* var txt = fillArea.children[j];
				txt.setAttribute("font-family", fontFace);
				txt.setAttribute("font-size", quesfntSize); */
				break;
			default:
				//console.log(fillArea.children[j].nodeName," childNodes");
				var fArea = fillArea.children[j];
				fArea.style.pointerEvents = "auto";
				fArea.setAttribute("id", "fill" + cnt);
				fArea.setAttribute("fill", colorObj.initial);
				fArea.setAttribute("cursor", "pointer");
				fArea.addEventListener("click", onfillAreaClicked);
				fArea.usrAns = null;
				fArea.isDone = false;
				cnt++;
				fillAreaCnt = cnt;
				allDone.push("n");
				break;
		}
	}

	//addNumbering(indx);
}

function createSvgElements() {
	var bubble = "M97.712,136.128c-14.18,0-23.374-5.282-27.404-8.229c-2.112,0.422-5.263,0.877-9.083,0.877c-8.629,0-16.86-2.377-23.807-6.871c-14.053-9.094-14.7-23.637-14.292-29.661c-4.128-3.862-12.748-13.503-11.245-25.549c1.748-14.008,13.898-29.039,36.526-30.307c2.2-4.441,7.549-11.604,19.727-14.086c2.076-0.422,4.152-0.638,6.169-0.638c9.646,0,16.072,4.778,19.214,7.857c1.137-0.152,2.502-0.277,3.975-0.291c2.975-1.526,10.291-4.684,19.876-4.684c5.456,0,10.851,1.017,16.037,3.024c14.851,5.748,20.663,16.86,22.336,23.859c7.46,1.01,15.809,5.021,20.232,13.868c5.559,11.119-0.824,20.88-6.181,25.664c-0.461,4.435-2.696,13.814-12.996,21.509c-9.61,7.179-18.658,8.25-23.198,8.25c-0.007,0-0.016,0-0.023,0c-3.998,4.458-14.495,14.038-31.693,15.256C100.488,136.078,99.083,136.128,97.712,136.128L97.712,136.128z";

	for (var j = 0; j < 5; j++) {
		var pth = document.createElementNS(xmlns, "path");
		svgElem.appendChild(pth);
		pth.setAttribute("d", bubble);
		pth.setAttribute("fill", colorObj.initial);
		var xx = 10 + (170 * j);
		pth.setAttribute("transform", "translate(" + xx + ", 20)");

		pth.setAttribute("cursor", "pointer");
		pth.addEventListener("click", onCellClicked);
	}

	for (var i = 0; i < swatches.length; i++) {
		var pth = document.createElementNS(xmlns, "path");
		svgElem.appendChild(pth);
		pth.setAttribute("d", "M44.509,46.737c0,0-37.979,3.023-4.698,18.517c0,0-13.339,38.166,17.228,15.494c0,0,37.979,20.782,19.971-15.726c0,0,37.697-25.466-5.876-20.931C71.133,44.091,48.817,4.413,44.509,46.737z");
		pth.setAttribute("fill", swatches[i]);
		var xx = 10 + (100 * i);
		pth.setAttribute("transform", "translate(" + xx + ", 250)");
		pth.setAttribute("id", "sw" + i);
		pth.setAttribute("cursor", "pointer");
		pth.addEventListener("click", onSwatchesClicked);
		pth.addEventListener("mouseover", onSwatchesOver);

		/* var cc = "<animateTransform xlink:href='#"+"sw"+i+"' attributeName='transform' attributeType='XML' id='"+"any"+i+"' type='rotate' from='0 38.501500725746155 38.4994986653327945' to='360 38.501500725746155 38.4994986653327945' dur='0.3s' begin='click' repeatCount='1' fill='freeze'/>"
		pth.innerHTML = cc; */
	}

}
var lastColor = null;
var lastObj = null;
function onfillAreaClicked(e) {
	var fillA = e.target;

	console.log(fillA.usrAns, " ----clicked", lastColor, selObj.color);
	if (lastColor == selObj.color && lastObj.id == e.target.id) {
		lastObj = null;
		lastColor = null;
		removeColor(fillA,);
		fillA.usrAns = '';
	} else if (selObj.color) {
		lastObj = fillA;
		lastColor = selObj.color;
		setColor(fillA, selObj.color);
		fillA.usrAns = selObj.id;
		enableBTN();
	}
}

//var cTar=null;
function onSwatchesClicked(e) {
	var target = e.target;

	selObj["color"] = target.getAttribute("fill");
	selObj["id"] = target.id.substr(6, 1);

	/* if(cTar){
		cTar.removeAttribute("stroke");
	} */
	target.setAttribute("stroke", "black");
	target.style.transition = "";
	//cTar = target;

	$("#swatches").children().css("stroke", "black")
	console.log(" ----onSwatchesClicked");
}

function onSwatchesOver(e) {
	var target = e.target;
	var num = target.id.substr(2, 1);
	//console.log(num,"over +++++++");
}

function addNumbering(indx) {
	srialNo.style.position = "absolute";
	srialNo.innerHTML = (indx + 1);
	srialNo.style.width = 30 + "px";
	srialNo.style.textAlign = "center";
	srialNo.style.fontSize = quesfntSize;
	srialNo.style.fontFamily = fontFace1;
	srialNo.style.border = "3px solid #F29B34";
	srialNo.style.borderRadius = "50%";
	_main.appendChild(srialNo);
	srialNo.style.top = _quesTxt.offsetTop + "px";
	srialNo.style.left = (_quesTxt.offsetLeft - 60) + "px";

	srialNo.style.backgroundColor = "#fff";
	srialNo.style.padding = "8px";
}
var currAttempt = 0;



function onSubmitClick(e) {
	console.log("submit clicked")
	disableOptions();
	disableBTN();

	chkAns = new checkAnswer(Qno);

	if (chkAns.done()) {
		console.log("submit clicked 1")
		storageArr[Qno].quesDone = "true";
		setTimeout(drawNextQuestion, 4000);
		setTimeout(function () {
			//answerBtn.style.pointerEvents = "auto";
			//answerBtn.style.opacity = 1;
			enableOptions();
		}, 3000)
	} else {
		console.log("submit clicked 2")
		setTimeout(function () {
			answerBtn.style.pointerEvents = "auto";
			answerBtn.style.opacity = 1;

			if (Qno < data.optionArr.length - 1) {
				enableObj(nextBtn);
			}

			if (Qno) {
				enableObj(preBtn);
			}
			setTimeout(drawNextQuestion, 1000);
			//resetFillAreas();
			//solutionForWrongOne();
		}, 3000);
	}

	var wCount = chkAns.getWCount();
	var tempR = chkAns.getRCount();

	var maxAttempt = getMaxOfArray(storageArr[Qno].attempt);
	//console.log(storageArr[Qno].attempt, " donennnnnnnnnnnnnnnnnn wCount: ", wCount);
	if (wCount) {
		if (maxAttempt - 1 == 0 && tempR) {
			if (tempR <= wCount) {
				playWrongFeedback(tempR);
			} else {
				playRemainingWrongFeedback((fillAreaCnt) - tempR);
			}
		} else {
			playFeedback("wrong");
		}
		//feedbackVid.playWrongFeedback(postSubmit);
	} else {
		console.log("submit clicked 3")
		playFeedback("right");
		//feedbackVid.playCorrectFeedback(postSubmit);
	}

}

function checkAnswer(indx) {
	var _b = false;
	var wCount = 0;
	var tempR = 0;

	for (var i = 0; i < fillAreaCnt; i++) {
		var fArea = document.getElementById("fill" + i);
		if (fArea.usrAns != null && fArea.isDone == false) {
			if (data.Aarr[Qno][i] == fArea.usrAns) {
				tempR++;
				allDone[i] = "c";
				fArea.isDone = true;
			} else {
				var cc = storageArr[Qno].attempt[i];
				cc++;
				storageArr[Qno].attempt[i] = cc;
				wCount++;
				console.log(storageArr, " storageArr_onSubmit___wrong");
			}
		}
	}

	this.done = function () {
		if (allDone.indexOf("n") <= -1) {
			_b = true;
		} else {
			_b = false;
		}
		return _b;
	}

	this.getWCount = function () {
		return wCount;
	}

	this.getRCount = function () {
		return tempR;
	}

}

function getMaxOfArray(numArray) {
	return Math.max.apply(null, numArray);
}

function postSubmit() {

}

function drawNextQuestion() {

	console.log('drawNextQuestion');

	enableObj(getElement("preBtn"));

	if (Qno < data.optionArr.length - 1) {
		//Qno++;
		//removePrevious();
		//addQuestion(Qno)
	} else {
		disableOptions();
		disableBTN();
		disableObj(nextBtn);
		disableObj(preBtn);
		answerBtn.style.pointerEvents = "none";
		answerBtn.style.opacity = 0.5;
	}
	completeSCORMActivity();
	makeAnimationSpace();
	disableBTN();
	/*answerBtn.style.pointerEvents = "auto";
	answerBtn.style.opacity = 1;*/
	//handlingDoneQues();

	enableOptions();
	if (Qno < data.optionArr.length - 1) {
		enableObj(nextBtn);
	}

	if (Qno) {
		enableObj(preBtn);
	}
}

/* function drawIncorrectQuestion(){
	enableOptions();
	answerBtn.style.pointerEvents = "auto";
	answerBtn.style.opacity = 1;
	
	if(Qno<data.optionArr.length-1)
	{
		enableObj(nextBtn);
	}
	
	if(Qno)
	{
		enableObj(preBtn);
	}
	
	
	if(storageArr[Qno].attempt >= attempt){
		playFeedback("correct");
		setColor(correctMC, "#009900");
		disableOptions();
		startStoring();
		
		if(Qno < data.optionArr.length-1){
			setTimeout(drawNextQuestion, 3000);
		}else{
			console.log("activity finished 2222222222222");
			
			disableObj(nextBtn);
			disableObj(preBtn);
			answerBtn.style.pointerEvents = "none";
			answerBtn.style.opacity = 0.5;
		}
		
		disableObj(nextBtn);
		disableObj(preBtn);
		answerBtn.style.pointerEvents = "none";
		answerBtn.style.opacity = 0.5;
	}
	
	setTimeout(makeAnimationSpace, 3000);
} */


function onSolutionClick() {
	for (var j = 0; j < data.Aarr[Qno].length; j++) {
		var fArea = document.getElementById("fill" + j);
		setColor(fArea, data.swatches[data.Aarr[Qno][j]]);
		storageArr[Qno].attempt[j] = attempt;
		allDone[j] = "c";
	}
	storageArr[Qno].quesDone = "true";

	console.log(storageArr, " storageArr onsolution")
	disableOptions();
	disableBTN();

	setTimeout(drawNextQuestion, 3000);
	playFeedback("correct");
}

function solutionForWrongOne() {
	console.log("wrong answer ee999")
	var isFeedback = false;

	if (currAttempt >= attempt) {
		console.log("wrong answer 1")
		data.correctAns.map(correctID => {
			//console.log(document.querySelector("."+correctID))
			document.querySelector("." + correctID).style.fill = "rgb(253, 234, 0)";
			//setColor(correctID, "rgb(253, 234, 0)");
			return null;
		})
		//allDone[j] = "c";
		//fArea.isDone = true;
		isFeedback = true;
		//}
	}

	if (isFeedback) {
		console.log("wrong answer 1")
		playFeedback("correct");
		isFeedback = false;
		disableOptions();
		disableBTN();
		storageArr[Qno].quesDone = "true";
		setTimeout(drawNextQuestion, 3000);
	}
}

function handlingDoneQues() {
	console.log(" 2222222222222222222");
	answerBtn.style.pointerEvents = "auto";
	answerBtn.style.opacity = 1;

	if (storageArr[Qno].option != undefined) {
		disableOptions();
		setColor(correctMC, "#009900");

		answerBtn.style.pointerEvents = "none";
		answerBtn.style.opacity = 0.5;
	}
}

function removePrevious() {
	for (var i = 0; i < data.optionArr[Qno].length; i++) {
		var getPrevOption = document.getElementById("op" + i);
		_main.removeChild(getPrevOption);
	}
}

function playFeedback(val) {
	var ranNum;
	switch (val) {
		case "right":
			ranNum = parseInt(Math.random() * (rArr.length));
			console.log(ranNum)
			sourceOGG.src = "../__audio/" + rArr[ranNum] + ".ogg";
			sourceMP3.src = "../__audio/" + rArr[ranNum] + ".mp3";
			break;
		case "wrong":
			wArr = cArr;
			if (storageArr[Qno].attempt == 1) {
				wArr = wArr.concat(nArr);
			}
			if (storageArr[Qno].attempt == attempt) {
				for (var ii = 0; ii < nArr.length; ii++) {
					if (wArr.indexOf(nArr[ii]) > -1) {
						wArr.splice(wArr.indexOf(nArr[ii]), 1);
					}
				}
			}

			ranNum = parseInt(Math.random() * (wArr.length));
			sourceOGG.src = "../__audio/" + wArr[ranNum] + ".ogg";
			sourceMP3.src = "../__audio/" + wArr[ranNum] + ".mp3";
			break
		case "correct":
			sourceOGG.src = "../__audio/ThisIsTheCorrectAns.ogg";
			sourceMP3.src = "../__audio/ThisIsTheCorrectAns.mp3";
			break
		case "completed":
			sourceOGG.src = "../__audio/completed.ogg";
			sourceMP3.src = "../__audio/completed.mp3";
			break
	}
	audio.load();
	audio.play();
}

function playWrongFeedback(id) {
	sourceOGG.src = "../__audio/Right" + id + ".ogg";
	sourceMP3.src = "../__audio/Right" + id + ".mp3";
	console.log("AAAAAAAAAAAAAAAA:  ", audio);
	audio.load();
	audio.play();
}

function playRemainingWrongFeedback(id) {
	sourceOGG.src = "../__audio/MoreGo" + id + ".ogg";
	sourceMP3.src = "../__audio/MoreGo" + id + ".mp3";
	console.log("AAAAAAAAAAAAAAAA:  ", audio);
	audio.load();
	audio.play();
}

function checkAllDone() {
	var _d = true;

	for (var i = 0; i < storageArr.length; i++) {
		if (storageArr[i].quesDone == "false") {
			_d = false;
			break;
		}
	}

	return _d;
}

function makeAnimationSpace() {
	if (Qno) {
		enableObj(preBtn);
	}

	if (!checkAllDone()) {
		return;
	}
	let targetWidth = window.innerWidth; // 100vw in pixels
	let targetHeight = window.innerHeight; // 100vw in pixels

	var actComDiv = document.createElement("div");
	document.body.appendChild(actComDiv);
	actComDiv.classList.add("actComDiv")
	actComDiv.style.position = "absolute";
	/* actComDiv.style.left = 0 + "px";
	actComDiv.style.top = 0 + "px"; */
	actComDiv.style.width = targetWidth;
	actComDiv.style.height = targetHeight;
	actComDiv.style.zIndex = "200";
	actComDiv.style.backgroundColor = "#fff";


	animDiv = document.createElement("div");
	actComDiv.appendChild(animDiv);
	//animDiv.style.position = "absolute";
	animDiv.classList.add("animDiv")
	// animDiv.style.width = 1280+"px";
	animDiv.style.width = targetWidth + "px";
	animDiv.style.height = 233 + "px";
	animDiv.style.top = "10%";
	animDiv.style.overflow = "hidden";
	animDiv.style.backgroundImage = "url(Assets/images/activityComplete.png)";
	animDiv.style.backgroundSize = "100vw 233px";
	animDiv.style.alignItems = "center";
	// display: flex;
	// align-items: center;
	// justify-content: center;
	// animDiv.style.backgroundSize = "1280px 233px";
	animDiv.style.backgroundRepeat = "no-repeat";

	$(actComDiv).animate({ width: targetWidth, height: targetHeight }, 700);
	// $(actComDiv).animate({width:1280},500);	
	setTimeout(completedDelay, 0);
}

function completedDelay() {
	var activityText = document.createElement("img");
	animDiv.appendChild(activityText);
	activityText.src = "Assets/images/activity.png";
	activityText.setAttribute("id", "activityText");
	var completedText = document.createElement("img");
	animDiv.appendChild(completedText);
	completedText.src = "Assets/images/completed.png";
	completedText.setAttribute("id", "completedText");
	playFeedback("completed");
}

function disableBTN() {
	disableObj(nextBtn);
	disableObj(preBtn);

	submitBtn.style.pointerEvents = "none";
	submitBtn.style.opacity = 0.5;
	answerBtn.style.pointerEvents = "none";
	answerBtn.style.opacity = 0.5;
}

function enableBTN() {
	submitBtn.style.pointerEvents = "auto";
	submitBtn.style.opacity = 1;
	answerBtn.style.pointerEvents = "auto";
	answerBtn.style.opacity = 1;

	if (Qno < data.optionArr.length - 1) {
		enableObj(nextBtn);
	}

	if (Qno) {
		enableObj(preBtn);
	}
}

function disableOptions() {
	for (var k = 0; k < data.Aarr[Qno].length; k++) {
		var fArea = document.getElementById("fill" + k);
		fArea.style.pointerEvents = "none";
	}
}

function enableOptions() {
	for (var k = 0; k < data.Aarr[Qno].length; k++) {
		var fArea = document.getElementById("fill" + k);
		if (fArea.isDone) {
			fArea.style.pointerEvents = "none";
		} else {
			fArea.style.pointerEvents = "auto";
		}
	}
}

function resetFillAreas() {

	var fillObj = document.getElementById("fill").children;
	for (var k = 0; k < fillObj.length; k++) {
		var fArea = fillObj[k];

		/* if(fArea.isDone){
			fArea.style.pointerEvents = "none";
		}else */{
			fArea.style.pointerEvents = "auto";
			fArea.usrAns = null;
			fArea.isDone = false;
			fArea.setAttribute("fill", colorObj.initial);
			fArea.style.fill = colorObj.initial;
		}
	}
}


function setColor(mc, co) {
	console.log(mc.getAttribute("class"));
	selected.push(mc.getAttribute("class"));
	mc.setAttribute("fill", co);
	mc.style.fill = co;
}
function removeColor(mc, co) {
	mc.setAttribute("fill", colorObj.initial);
	mc.style.fill = colorObj.initial;
}

function getElement(str) {
	return (document.getElementById(str));
}

function createTag(str) {
	return (document.createElement(str));
}