HearingGame/index.js

var ranid = 1;

var cntdrag = 1;

let data_tabl = ["A", "B", "C", "D", "E", "F", "G", "H", "I", "J", "K", "L", "M", "N", "O", "P", "Q", "R", "S", "T", "U", "V", "W", "X", "Y", "Z"];

let prefix = "assets/";

let numcolumns = 2;

function cleanup(){
    var htmls = [];
    var returntos = [];
    $("[returnto]").each(function (index){
        htmls.push($(this).prop("outerHTML"));
        returntos.push($(this).attr("returnto"));
        $(this).remove();
    });
    for (var x = 0 ; x < returntos.length; x++) {
        $('[returntarget="' + returntos[x] + '"]').html(htmls[x]);
    }
}

function checkAnswers() {
    let good = "background-image: url(\"assets/good.png\");";
    let fail = "background-image: url(\"assets/fail.png\");";
    let audiosrc = $('#audioholderak').attr("datacode");
    let lettersrc = $('#letterplace').attr("datacode");
    let imagesrc = $('#imageplace').attr("datacode");
    if (audiosrc == lettersrc) {
        $('#letterstatus').attr('style', good);
        $('#letterstatus').animate({opacity:1}, "slow");
        setTimeout(function (){
            $('#letterstatus').animate({opacity:0}, "slow");        
        });
    }
    else {
        $('#letterstatus').attr('style', fail);
        $('#letterstatus').animate({opacity:1}, "slow");
        setTimeout(function (){
            $('#letterstatus').animate({opacity:0}, "slow");        
        });
    }

    if (audiosrc == imagesrc) {
        $('#imagestatus').attr('style', good);
        $('#imagestatus').animate({opacity:1}, "slow");
        setTimeout(function (){
            $('#imagestatus').animate({opacity:0}, "slow");        
        });
    }
    else {
        $('#imagestatus').attr('style', fail);
        $('#imagestatus').animate({opacity:1}, "slow");
        setTimeout(function (){
            $('#imagestatus').animate({opacity:0}, "slow");        
        });
    }
    if (audiosrc == imagesrc && audiosrc == lettersrc){
        cleanup();
        generatePair();
    }
}

function getRandomInt(min, max) {
    min = Math.ceil(min);
    max = Math.floor(max);
    return Math.floor(Math.random() * (max - min) + min); // The maximum is exclusive and the minimum is inclusive
}

function getRandomElement(array){
    return array[getRandomInt(0, array.length)];
}
  
// imageholder.append();
//         letterholder.append

function columnize(arrayin, columns){
    var tmp2 = "<table><tbody>";
    for (var i = 0; i < arrayin.length; i += columns) {
        var tmp = "<tr>";
        for (var x = i; x < i + columns; x++) {
            if (x > arrayin.length - 1){
                break;
            }
            tmp += "<td>" + arrayin[x] + "</td>";
        }
        tmp += "</tr>";
        tmp2 += tmp;
    }
    tmp2 += "</tbody></table>";
    return tmp2;
}

function showImages() {
    var images = [];
    var letters = [];

    let imageholder = $("#imageholder");
    let letterholder = $("#letterholder");

    for (let i = 0 ; i < data_tabl.length; i++) {
        let imagepath = prefix + "images/" + data_tabl[i] + ".png";
        let letterpath = prefix + "letters/" + data_tabl[i] + ".png";
        
        images.push("<div returntarget=\"" + ranid + "\" ondrop=\"drop(event)\" ondragover=\"allowDrop(event)\" id=\"imageholderak\" class=\"place holderak\"><img returnto=\"" + ranid + "\" datacode=\"" + data_tabl[i] + "\" draggable=\"true\" ondragstart=\"drag(event)\" src=\"" + imagepath + "\" /></div>");
        ranid += 1;
        letters.push("<div returntarget=\"" + ranid + "\" ondrop=\"drop(event)\" ondragover=\"allowDrop(event)\" id=\"letterholderak\" class=\"place holderak\"><img returnto=\"" + ranid + "\" datacode=\"" + data_tabl[i] + "\" draggable=\"true\" ondragstart=\"drag(event)\" src=\"" + letterpath + "\" /></div>");
        ranid += 1;
    }

    imageholder.append(columnize(images, numcolumns));
    letterholder.append(columnize(letters, numcolumns));
    
}

function generatePair(){
    let randomData = getRandomElement(data_tabl);

    let audioplace = $("#audiopart");

    let audiopath = prefix + "audio/" + randomData + ".ogg";

    audioplace.html("<audio id=\"audplay\"><source id=\"audioholderak\" class=\"holderak\" datacode=\"" + randomData + "\" src=\"" + audiopath + "\" type=\"audio/ogg\"/></audio>");
}

$(function() {
    generatePair();
    showImages();

    $("#audiopart").on("click", function (){
        document.getElementById("audplay").play();
    });

    $("#verify").on("click", checkAnswers);

    $("#trashcan").on("click", cleanup);
    
});

function allowDrop(ev) {
    ev.preventDefault();
}

function drag(ev) {
    ev.dataTransfer.setData("cntdrag", cntdrag);
    ev.target.setAttribute("cntdrag", cntdrag);
    cntdrag += 1;
    ev.dataTransfer.setData("text", ev.target.outerHTML);
    ev.dataTransfer.setData("returnto", ev.target.getAttribute("returnto"));
    ev.dataTransfer.setData("datacode", ev.target.getAttribute("datacode"));
}

function drop(ev) {
    ev.preventDefault();
    let data = ev.dataTransfer.getData("text");
    let cntdrag = ev.dataTransfer.getData("cntdrag");
    let datacode = ev.dataTransfer.getData("datacode");
    if (!ev.target.outerHTML.includes("img")){
        //$('[cntdrag="' + cntdrag + '"]').remove();
        ev.target.setAttribute("datacode", datacode);
        ev.target.innerHTML = data;
    }
    else{
        let htmldata = ev.dataTransfer.getData("text");
        let returnto = ev.dataTransfer.getData("returnto");
        $('[returntarget="' + returnto + '"]').html(htmldata);
    }
}

function droptrash(ev) {
    ev.preventDefault();
    let cntdragx = ev.dataTransfer.getData("cntdrag");
    $('[cntdrag="' + cntdragx + '"]').remove();
    let htmldata = ev.dataTransfer.getData("text");
    let returnto = ev.dataTransfer.getData("returnto");
    $('[returntarget="' + returnto + '"]').html(htmldata);
    
}