	window.onload = init;
	document.getElementById("btnclr1").onclick = newBoard;
	document.getElementById("btn1").onclick = result;
	document.getElementById("btn2").onclick = checkans;

	var btnClr = document.getElementById('btnclr1');
	var btnReponse = 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;");
	btnReponse.disabled=true;
	btnReponse.setAttribute('style', "color:#D4D0C8;");
	btnClr.disabled=true;
	btnClr.setAttribute('style', "color:#D4D0C8;");
}

function result() { 
	if (sc == '1') {
		for(j=1;j <= 2;j++) {
			var q = document.getElementById("span_rdo"+counter+"_"+j);
			var a = document.getElementById("span_rdo"+counter+"_"+j+"a");
					q.setAttribute('hidden','hidden')
					a.removeAttribute('hidden')
		}
		btnValider.disabled=true;
		btnValider.setAttribute('style', "color:#D4D0C8;");
		sc += 1
	} else {
		for(j=1;j <= 2;j++) {
			var q = document.getElementById("span_rdo"+counter+"_"+j);
			var a = document.getElementById("span_rdo"+counter+"_"+j+"a");
					a.setAttribute('hidden','hidden')
					q.removeAttribute('hidden')
		}
		btnValider.disabled=false;
		btnValider.setAttribute('style', "color:#000000;");
		sc -= 1
	}

}

function newBoard() {
	sc = 1;
	if (counter < 5) {
		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';
	for(k=1;k<= 2;k++) {
		var span_rdo1 = document.getElementById("span_rdo"+counter+"_"+k);
		span_rdo1.removeAttribute('style');
		var rdo1 = document.getElementById("rdo"+counter+"_"+k).checked=false;
	}
	btnValider.disabled=true;
	btnValider.setAttribute('style', "color:#D4D0C8;");
	btnReponse.disabled=true;
	btnReponse.setAttribute('style', "color:#D4D0C8;");
	btnClr.disabled=true;
	btnClr.setAttribute('style', "color:#D4D0C8;");
}


function checkans() {
	sc = 1;
	console.log("page="+counter)
		for(j=1;j<= 2;j++) {
			if(document.getElementById("rdo"+counter+"_"+j).checked==true) {
				console.log(document.getElementById("rdo"+counter+"_"+j).value);
					for(k=1;k<= 2;k++) {
						var rdo1 = document.getElementById("span_rdo"+counter+"_"+k);
								rdo1.removeAttribute('style');
					}
				if(document.getElementById("rdo"+counter+"_"+j).value=="true") {
					var rdo2 = document.getElementById("span_rdo"+counter+"_"+j);
							rdo2.setAttribute('style', 'background-color:#008000;color:#FFFFFF;');
				} else {
					var rdo2 = document.getElementById("span_rdo"+counter+"_"+j);
							rdo2.setAttribute('style', 'background-color:#FF0000;color:#FFFFFF;');
				}
			}
		}
	btnReponse.disabled=false;
	btnReponse.setAttribute('style', "color:#000000;");
	btnclr1.disabled=false;
	btnclr1.setAttribute('style', "color:#000000;");
}

function valider(x) {
	sc = 1;
	for(k=1;k<= 2;k++) {
		var span_rdo1 = document.getElementById("span_rdo"+counter+"_"+k);
		span_rdo1.removeAttribute('style');
		var rdo1 = document.getElementById("rdo"+counter+"_"+k).checked=false;
	}
	x.checked=true
	btnValider.disabled=false;
	btnValider.setAttribute('style', "color:#000000;");
	btnReponse.disabled=true;
	btnReponse.setAttribute('style', "color:#D4D0C8;");
}

