displayedQuestions = null;
displayedAnswers = null;
function setupDraggame(questions, answers) {
var dropzones = $("#dropzones");
dropzones.empty();
for (var i = 0; i < questions.length; i++) {
var $nz = document.createElement("div");
$nz.setAttribute("id", "qdz" + i);
$nz.setAttribute("class", "question-dropzone");
$nz.setAttribute("ondragover", "allowDrag(event)");
$nz.setAttribute("ondrop", "drop(event)");
//$nz.textContent = questions[i];
$nz.innerHTML = "
" + questions[i] + "
";
dropzones.append($nz);
}
var qsource = $("#qdz-source");
qsource.empty();
for (var i = 0; i < answers.length; i++) {
var $de = document.createElement("p");
$de.setAttribute("id", "qde" + i);
$de.setAttribute("class", "question-dropelement");
$de.setAttribute("draggable", "true");
$de.setAttribute("ondragstart", "drag(event)");
$de.textContent = answers[i];
qsource.append($de);
}
displayedQuestions = questions;
displayedAnswers = answers;
}
function getDragAnswers() {
answers = [];
var dropzones = $("#dropzones").children();
for(var i = 0; i < dropzones.length; i++) {
var dz = dropzones[i];
if (dz.id.startsWith("qdz")) {
var q_id = parseInt(dz.id.substring(3));
var dropelements = $("#" + dz.id).children();
for(var j = 0; j < dropelements.length; j++) {
var de = dropelements[j];
if (de.id.startsWith("qde")) {
var a_id = parseInt(de.id.substring(3));
if (q_id != NaN && a_id != NaN) {
//answers[displayedQuestions[q_id]] = displayedAnswers[a_id];
answers.push([displayedAnswers[a_id], displayedQuestions[q_id]]);
}
}
}
}
}
return answers;
}
function allowDrag(e) {
e.preventDefault();
}
function drag(e) {
e.dataTransfer.setData("id", e.target.id);
}
function drop(e) {
e.preventDefault();
var id = e.dataTransfer.getData("id");
var target = e.target;
while (!target.classList.contains("question-dropzone") && !target.classList.contains("question-dropsource"))
target = target.parentNode;
var occupyingDrop = target.querySelector(".question-dropelement");
var element = document.getElementById(id);
if (occupyingDrop != null && !target.classList.contains("question-dropsource")) {
element.parentNode.appendChild(occupyingDrop);
}
target.appendChild(element);
}