acorn/static/draggame.js

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 = "<div style='float: left; max-width: 70%; text-align: left;'>" + questions[i] + "</div>";
        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);
}