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

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

function init() {
	counter=1
	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;
		var dID = oldThis.getAttribute('id'); 
			setTimeout(function() {
			//oldObj.parentNode.removeChild(oldObj); // remove object from DOM
			// add similar object in another place
			//oldThis.innerHTML = oldSrc;
			oldThis.innerHTML = '<span class="equal">=</span><span class="ans" id="a_'+dID+'"><span id="'+iObj+'">'+oldSrc+'</span></span>';
			// and update event handlers
			updateDataTransfer();
			// little customization
			//oldThis.style.borderColor = "#ccc";
			oldThis.setAttribute("droppable", "false");
			btnValider.disabled=false;
			btnValider.setAttribute('style', "color:#000000");

		}, 300);
return false;
});



function clear1() {
	var fillSelect1 = document.getElementsByClassName("album");
	for(var i=1; i<=fillSelect1.length; i++) {
		var clr1 = document.getElementById("drop_"+i);
		clr1.innerHTML = '<span class="equal">=</span><span class="ans" id="a_drop_'+ i +'">&#x00A0;</span>';
		clr1.setAttribute("droppable", "true");
		clr1.removeAttribute("style");
	}

	var answer = document.getElementsByClassName("album");
		for(var i=1; i<=answer.length; i++) {
			var getVal = document.getElementById("drop_"+i);
			var corVal = document.getElementById("e_"+i);
			corVal.setAttribute('hidden', 'hidden');
			getVal.removeAttribute('hidden');
		}
	updateDataTransfer();
	btnReponses.disabled=true;
	btnReponses.setAttribute('style', "color:#D4D0C8");
	btnValider.disabled=true;
	btnValider.setAttribute('style', "color:#D4D0C8");
	sc=1;
}

function check() {
	sc=1;
	var checkAlbum = document.getElementsByClassName("album");
	for(var i=1; i<=checkAlbum.length; i++) {
		var correctVal = document.getElementById("a_drop_"+i);
		var matchVal = document.getElementById("ans1_"+i);
			console.log(correctVal.innerText);
			console.log(matchVal.innerText);
	if (correctVal.innerText== matchVal.innerText) {
			correctVal.setAttribute("style","background-color:#008000; color:#FFFFFF;border:1px solid #EA9800;border: 8px solid #008000;");
		} else {
			correctVal.setAttribute("style","background-color:red; color:#FFFFFF;border:1px solid #EA9800;border: 8px solid red;");
		}
	}
	btnReponses.disabled=false;
	btnReponses.setAttribute('style', "color:#000000");
}

function answer() {
	var answer = document.getElementsByClassName("album");
	if (sc=="1") {
		for(var i=1; i<=answer.length; i++) {
		var getVal = document.getElementById("drop_"+i);
		var corVal = document.getElementById("e_"+i);
			getVal.setAttribute('hidden', 'hidden');
			corVal.removeAttribute('hidden');
		}
		btnValider.disabled=true;
		btnValider.setAttribute('style', "color:#D4D0C8");
		sc += 1
	 } else {
		for(var i=1; i<=answer.length; i++) {
		var getVal = document.getElementById("drop_"+i);
		var corVal = document.getElementById("e_"+i);
			corVal.setAttribute('hidden', 'hidden');
			getVal.removeAttribute('hidden');
		}
		btnValider.disabled=false;
		btnValider.setAttribute('style', "color:#000000");
		sc -= 1
	}
}
