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

	var BtnClr = document.getElementById('btnclr1');
	var BtnReponses = document.getElementById('btn1')
	var BtnValider = document.getElementById('btn2')
	var sc = 1;

var counter=1;
function init() {
	document.getElementById("screen1").style.display = 'block';
	BtnValider.disabled=true;
	BtnValider.setAttribute('style', "color:#D4D0C8;");
	BtnClr.disabled=true;
	BtnClr.setAttribute('style', "color:#D4D0C8;");
	BtnReponses.disabled=true;
	BtnReponses.setAttribute('style', "color:#D4D0C8;");

}

function check() {
	var mySelect = document.getElementsByClassName('no1');
	for(var i=1; i <= mySelect.length; i++) {
		var getAnswer = document.getElementById("fill"+i);
		var correctAns = document.getElementById("ans"+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;');
		}
	}
	BtnReponses.disabled=false;
	BtnReponses.setAttribute('style', "color:#000000;");
	BtnClr.disabled=false;
	BtnClr.setAttribute('style', "color:#000000;");
	sc = 1;
}

function answer() {
	var mySelect = document.getElementsByClassName('no1');
		if (sc=="1") {
		for(var i=1; i <= mySelect.length; i++) {
			var que = document.getElementById('fill'+i)
					que.setAttribute('hidden', 'hidden')
			var ans = document.getElementById('e'+i)
					ans.removeAttribute('hidden')
		}
	BtnClr.disabled=true;
	BtnClr.setAttribute('style', "color:#D4D0C8;");
	BtnValider.disabled=true;
	BtnValider.setAttribute('style', "color:#D4D0C8;");
		sc += 1
	 } else {
		for(var i=1; i <= mySelect.length; i++) {
			var que = document.getElementById('fill'+i)
					que.removeAttribute('hidden')
			var ans = document.getElementById('e'+i)
					ans.setAttribute('hidden', 'hidden')
		}
		BtnClr.disabled=false;
		BtnClr.setAttribute('style', "color:#000000;");
		BtnValider.disabled=false;
		BtnValider.setAttribute('style', "color:#000000;");
		sc -= 1
	}
}
function viewValider() {
		BtnValider.disabled=false;
		BtnValider.setAttribute('style', "color:#000000;");
}
function newBoard() {
	if (counter < 5) {
		counter+=1;
	} else {
		counter = 1;
	}
	sc = 1;
	var screenElement = document.getElementsByClassName('screen');
		for(var i=1; i <= screenElement.length; i++) {
		var screenElement1 = document.getElementById('screen'+i).style.display ='none';
	}
	var mySelect = document.getElementsByClassName('no1');
	for(var j=1; j <= mySelect.length; j++) {
		var fillEle = document.getElementById('fill'+j);
				fillEle.removeAttribute('style');
				fillEle.value= '';
	}
	document.getElementById('screen'+counter).style.display = 'block';
	BtnValider.disabled=true;
	BtnValider.setAttribute('style', "color:#D4D0C8;");
	BtnClr.disabled=true;
	BtnClr.setAttribute('style', "color:#D4D0C8;");
	BtnReponses.disabled=true;
	BtnReponses.setAttribute('style', "color:#D4D0C8;");
}

