window.onload = init;
	var btnClr = document.getElementById('btnclr1');
	var btnValider = document.getElementById('btn1');
	var btnReponses = document.getElementById('btn2');
	var sc = 1;
function init() {
	sc = 1;
	for(var i=1; i<=2; i++) {
		for(var j=1; j<=4; j++) {
		var ansboxq = document.getElementById('ansbox');
				ansboxq.innerHTML += '<p id="pdrop' + i +'_'+j+'" hidden="hidden"></p>'
		}
	}
	document.getElementById('btnclr1').onclick = clear1;
	document.getElementById('btn1').onclick = checkAns1;
	document.getElementById('btn2').onclick = answer;
	btnReponses.disabled=true;
	btnReponses.setAttribute('style', "color:#D4D0C8");
	btnValider.disabled=true;
	btnValider.setAttribute('style', "color:#D4D0C8");
}

function answer() {
	var quebox= document.getElementById('quebox');
	var ansbox= document.getElementById('ansbox');
	if (sc == 1) {
		quebox.setAttribute('style', 'display:none;transition: all 0.5s ease')
		ansbox.setAttribute('style', 'display:block;transition: all 0.5s ease')
		btnValider.disabled=true;
		btnValider.setAttribute('style', "color:#D4D0C8");
		sc += 1;
	} else {
		quebox.setAttribute('style', 'display:block;transition: all 0.5s ease')
		ansbox.setAttribute('style', 'display:none;transition: all 0.5s ease')
		btnValider.disabled=false;
		btnValider.setAttribute('style', "color:#000000");
		sc -=1;
	}
}

function checkAns1() {
	sc = 1;
	for(var i=1; i<=4; i++) {
		var dropVal = document.getElementById("drop1_"+i);
		var dropValue = dropVal.getAttribute("droppable");
		var dropImg = dropVal.firstChild;
		var dropSpan = dropImg.firstChild;
		var getVal = dropImg.getAttribute("id");
		if (dropValue == 'false') {
			if (getVal == 'a_a4' || getVal == 'a_a7' || getVal == 'a_a1' || getVal == 'a_a2') {
				dropSpan.setAttribute('style','-moz-box-shadow: 4px 5px 15px green;-webkit-box-shadow: 4px 5px 15px green;-o-box-shadow: 4px 5px 15px green;box-shadow: 4px 5px 15px green;border:2px solid green;')
			} else {
					dropSpan.setAttribute('style','-moz-box-shadow: 4px 5px 15px red;-webkit-box-shadow: 4px 5px 15px red;-o-box-shadow: 4px 5px 15px red;box-shadow: 4px 5px 15px red;border:2px solid red;')
			}
		}
	}
	for(var j=1; j<=4; j++) {
		var dropVal = document.getElementById("drop2_"+j);
		var dropValue = dropVal.getAttribute("droppable");
		var dropImg = dropVal.firstChild;
		var dropSpan = dropImg.firstChild;
		var getVal = dropImg.getAttribute("id");
		if (dropValue == 'false') {
			if (getVal == 'a_a5' || getVal == 'a_a3'|| getVal == 'a_a6') {
				dropSpan.setAttribute('style','-moz-box-shadow: 4px 5px 15px green;-webkit-box-shadow: 4px 5px 15px green;-o-box-shadow: 4px 5px 15px green;box-shadow: 4px 5px 15px green;border:2px solid green;')
			} else {
				dropSpan.setAttribute('style','-moz-box-shadow: 4px 5px 15px red;-webkit-box-shadow: 4px 5px 15px red;-o-box-shadow: 4px 5px 15px red;box-shadow: 4px 5px 15px red;border:2px solid red;')
			}
		}
	}
	btnReponses.disabled=false;
	btnReponses.setAttribute('style', "color:#000000");
}
function clear1() {
	location.reload();
}

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);
					}
				}
			};
		}
	})();
var dragItems;
updateDataTransfer();
var dropAreas = document.querySelectorAll('[droppable=true]');
function cancel(e) {
	if (e.preventDefault) {
		e.preventDefault();
	}
	return false;
}
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;
		});
	}
}
addEvent(dropAreas, 'dragover', function (event) {
	updateDataTransfer()
		if (event.preventDefault) event.preventDefault();
		//this.style.borderColor = "#000";
		return false;
});

addEvent(dropAreas, 'drop', function (event) {
	updateDataTransfer();
	if (event.preventDefault) event.preventDefault();
	var iObj = event.dataTransfer.getData('obj_id');
	var oldObj = document.getElementById(iObj);
	var oldSrc = oldObj.innerHTML;
	var oldThis = this;
	var dID = oldThis.getAttribute('id');
	var para = document.getElementById('p'+dID)
	var insertCheck = true;

	for(var i=1; i<=2; i++) {
		for(var j=1; j<=4; j++) {
		var check = document.getElementById('pdrop' + i +'_'+j+'');
			if (check.innerText == String(dID.substring(0,5)+iObj)) {
				insertCheck = false;
			}
		}
	}

	if (insertCheck == true) {
		para.innerText = String(dID.substring(0,5)+iObj);
		setTimeout(function() {
			oldThis.innerHTML = '<span class="ans" id="a_'+iObj+'"><span>'+oldSrc+'</span></span>';
			updateDataTransfer();
			//oldThis.style.borderColor = "#ccc";
			oldThis.setAttribute("droppable", "false");
			btnValider.disabled=false;
			btnValider.setAttribute('style', "color:#000000");
		}, 300);
	}

return false;
});

