	window.onload = init;
	document.getElementById('btnclr1').onclick = clear1;
	document.getElementById('btn1').onclick = checkAns;
	document.getElementById('btn2').onclick = showanswer;

	var btnClr = document.getElementById('btnclr1');
	var btnValider = document.getElementById('btn1');
	var btnReponses = document.getElementById('btn2');
	var sc = 1;





// add event handler
function init() {
	btnReponses.disabled=true;
	btnReponses.setAttribute('style', "color:#D4D0C8");
	btnValider.disabled=true;
	btnValider.setAttribute('style', "color:#D4D0C8");
}



// add event handler
var addEvent = (function () {
	if (document.addEventListener) {
		return function (el, type, fn) {
			if (el && el.nodeName || el === window) {
				el.addEventListener(type, fn, false);
			} else if (el && el.length) {
				for (var i = 0; i < el.length; i++) {
					addEvent(el[i], type, fn);
				}
			}
		};
		} else {
			return function (el, type, fn) {
				if (el && el.nodeName || el === window) {
					el.attachEvent('on' + type, function () { return fn.call(el, window.event); });
				} else if (el && el.length) {
					for (var i = 0; i < el.length; i++) {
					addEvent(el[i], type, fn);
					}
				}
			};
		}
	})();

// inner variables

var dragItems;
updateDataTransfer();

var dropAreas = document.querySelectorAll('[droppable=true]');

// preventDefault (stops the browser from redirecting off to the text)

function cancel(e) {
	if (e.preventDefault) {
		e.preventDefault();
	}
	return false;
}
// update event handlers
function updateDataTransfer() {
	dragItems = document.querySelectorAll('[draggable=true]');
			for (var i = 0; i < dragItems.length; i++) {
		addEvent(dragItems[i], 'dragstart', function (event) {
			event.dataTransfer.setData('obj_id', this.id);
			return false;
		});
	}
}

// dragover event handler
addEvent(dropAreas, 'dragover', function (event) {
	updateDataTransfer()
		if (event.preventDefault) event.preventDefault();
		// little customization
		//this.style.borderColor = "#000";
		return false;
	
});


// drop event handler
addEvent(dropAreas, 'drop', function (event) {
	updateDataTransfer();
	if (event.preventDefault) event.preventDefault();
		// get dropped object
		var iObj = event.dataTransfer.getData('obj_id');
		var oldObj = document.getElementById(iObj);
		// get its image src
		var oldSrc = oldObj.innerHTML;
		oldObj.className += 'hidden';
		var oldThis = this;
		
		setTimeout(function() {
			//oldObj.parentNode.removeChild(oldObj); // remove object from DOM
			// add similar object in another place
			//oldThis.innerHTML = oldSrc;
			oldThis.innerHTML = '<span id="'+iObj+'" style="font-weight: bold;font-size:.7em;">'+oldSrc+'</span>';
			// and update event handlers
			updateDataTransfer();
			// little customization
			//oldThis.style.borderColor = "#ccc";
			oldThis.setAttribute("droppable", "false");
		}, 200);
		btnValider.disabled=false;
		btnValider.setAttribute('style', "color:#000000");
		sc = 1;
	return false;
}
);

function checkAns() {
	sc = 1;
	for(i=1;i<=8;i++) {
	var correctVal = document.getElementById("drop_"+i);
	console.log("drop"+i);
	var ch=document.getElementById("drop_"+i).firstChild;
	console.log(ch.id);
	var txt=String(ch.id);
		console.log("chid= "+txt);
		var matchimgid="a"+i;
		console.log("matchimgid= "+matchimgid);
		var dropVal = correctVal.getAttribute('droppable')
		if (dropVal == 'false') {
			if(txt==matchimgid) {
				correctVal.setAttribute("style","font-size:1em;color:Black;background-color:#FFFFFF; Border: 3.5px solid Green; border-radius:15px;")
			} else {
				correctVal.setAttribute("style","font-size:1.5em;color:Black;background-color:#FFFFFF; Border: 3.5px solid Red; border-radius:15px;")
			}
		}
	}
			btnReponses.disabled=false;
			btnReponses.setAttribute('style', "color:#000000");
}

function clear1(){
	location.reload();
}
function showanswer() {
	if (sc == 1) {
		for(i=1;i<=8;i++) { 
			var que1 = document.getElementById('drop_'+i);
			var ans1 = document.getElementById('e_'+i);
				que1.setAttribute('hidden', 'hidden')
				ans1.removeAttribute('hidden')
		}
		btnValider.disabled=true;
		btnValider.setAttribute('style', "color:#D4D0C8");
		sc += 1;
	} else {
		for(i=1;i<=8;i++) { 
			var que1 = document.getElementById('drop_'+i);
			var ans1 = document.getElementById('e_'+i);
				ans1.setAttribute('hidden', 'hidden')
				que1.removeAttribute('hidden')
		}
		btnValider.disabled=false;
		btnValider.setAttribute('style', "color:#000000");
		sc -= 1;
	}


}
