	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;





// add event handler
function init() {
		var audioElement1 = document.getElementById('au1');
		audioElement1.currentTime = 0;
		audioElement1.pause();
	btnReponses.disabled=true;
	btnReponses.setAttribute('style', "color:#D4D0C8");
	btnValider.disabled=true;
	btnValider.setAttribute('style', "color:#D4D0C8");
}





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="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="ans" id="a_drop_'+ i +'">&#x00A0;</span>';
 clr1.setAttribute("droppable", "true");
clr1.removeAttribute("style");
}
		updateDataTransfer();
		var audioElement1 = document.getElementById('au1');
		audioElement1.currentTime = 0;
		audioElement1.pause();
		var que1 = document.getElementById('que1');
				que1.removeAttribute('style')
		var ans1 = document.getElementById('ans1');
				ans1.setAttribute('style', 'display:none')
	btnReponses.disabled=true;
	btnReponses.setAttribute('style', "color:#D4D0C8");
	btnValider.disabled=true;
	btnValider.setAttribute('style', "color:#D4D0C8");
}

function check() {
	var checkAlbum = document.getElementsByClassName("album");
	for(var i=1; i<=checkAlbum.length; i++) {
		var getAnswer = document.getElementById("a_drop_"+i);
		var correctAnswer = document.getElementById("ans1_"+i);
	if (getAnswer.innerText.trim() == correctAnswer.innerText.trim()) {
			getAnswer.setAttribute("style","background-color:#008000;border: 8px solid #008000;color:#FFFFFF;")
		} else {
			getAnswer.setAttribute("style","background-color:red;border: 8px solid red;color:#FFFFFF;")
		}
	}
		btnReponses.disabled=false;
		btnReponses.setAttribute('style', "color:#000000");
}
function answer() {
	if (sc == 1) {
		var que1 = document.getElementById('que1');
				que1.setAttribute('style', 'display:none')
		var ans1 = document.getElementById('ans1');
				ans1.removeAttribute('style')
		btnValider.disabled=true;
		btnValider.setAttribute('style', "color:#D4D0C8");
		sc += 1;
	} else {
		var que1 = document.getElementById('que1');
				que1.removeAttribute('style')
		var ans1 = document.getElementById('ans1');
				ans1.setAttribute('style', 'display:none')
		btnValider.disabled=false;
		btnValider.setAttribute('style', "color:#000000");
		sc -= 1;
	}
}