	window.onload = init;
	document.getElementById('btnclr1').onclick = newBoard;
	document.getElementById('btn1').onclick = answer;
	document.getElementById('btn2').onclick = check;

	var BtnNew = document.getElementById('btnclr1');
	var BtnAnswer = document.getElementById('btn1')
	var BtnCheck = document.getElementById('btn2')

var sc = 1;

var counter=1;
function init() {
	document.getElementById("screen1").style.display = 'block';
	BtnCheck.disabled=true;
	BtnCheck.setAttribute('style', "color:#D4D0C8;");
	BtnNew.disabled=true;
	BtnNew.setAttribute('style', "color:#D4D0C8;");
	BtnAnswer.disabled=true;
	BtnAnswer.setAttribute('style', "color:#D4D0C8;");
	sc = 1;
}

function newBoard() {
		if (counter < 4) {
			counter+=1;
		} else {
			counter = 1;
		}
		var screenElement = document.getElementsByClassName('screen');
		for(var i=1; i < screenElement.length+1; i++) {
			var screenElement1 = document.getElementById('screen'+i).style.display ='none';
		}
		var screenElement2 = document.getElementById('screen'+counter).style.display = 'block';
		var screenElement = document.getElementsByClassName('no1');
		for(var ii=1; ii < screenElement.length+1; ii++) {
			var getAnswer = document.getElementById("fill1_"+ii);
			getAnswer.setAttribute('style', 'color:#000000;background-color: #99CCFF;');
			getAnswer.value='';
		}
		BtnCheck.disabled=true;
		BtnCheck.setAttribute('style', 'color:#D4D0C8;');
		BtnNew.disabled=true;
		BtnNew.setAttribute('style', 'color:#D4D0C8;');
		BtnAnswer.disabled=true;
		BtnAnswer.setAttribute('style', 'color:#D4D0C8;');
}

function answer() {
	var answer = document.getElementsByClassName("no1");
	if (sc=="1") {
		for(var i=1; i<=answer.length; i++) {
		var getVal = document.getElementById("fill1_"+i);
		var corVal = document.getElementById("ans_"+i);
			getVal.setAttribute('hidden', 'hidden');
			corVal.removeAttribute('hidden');
		}
	BtnNew.disabled=true;
	BtnNew.setAttribute('style', "color:#D4D0C8;");
	BtnCheck.disabled=true;
	BtnCheck.setAttribute('style', "color:#D4D0C8;");
	BtnAnswer.disabled=false;
	BtnAnswer.setAttribute('style', "color:#000000;");
		sc += 1
	 } else {
		for(var i=1; i<=answer.length; i++) {
		var getVal = document.getElementById("fill1_"+i);
		var corVal = document.getElementById("ans_"+i);
			corVal.setAttribute('hidden', 'hidden');
			getVal.removeAttribute('hidden');
		}
	BtnNew.disabled=false;
	BtnNew.setAttribute('style', "color:#000000;");
	BtnCheck.disabled=false;
	BtnCheck.setAttribute('style', "color:#000000;");
		sc -= 1
	}
}
function check() {
	sc = 1;
	var screenElement = document.getElementsByClassName('no1');
	for(var i=1; i < screenElement.length+1; i++) {
		var getAnswer = document.getElementById("fill1_"+i);
		var correctAns = document.getElementById("fill_ans1_"+i);
		var getAnswertext = getAnswer.value.toLowerCase()
			if (getAnswertext == correctAns.innerText.toLowerCase()) {
				getAnswer.setAttribute('style', 'color:#FFFFFF;background-color: #008000;');
			} else {
				getAnswer.setAttribute('style', 'color:#FFFFFF;background-color: red;');
			}
	}
	BtnNew.disabled=false;
	BtnNew.setAttribute('style', "color:#000000");
	BtnAnswer.disabled=false;
	BtnAnswer.setAttribute('style', "color:#000000");
}

function showvalider() {
	BtnCheck.disabled=false;
	BtnCheck.setAttribute('style', "color:#000000;");
}