HearingGame/index.js

var ranid = 1;

var cntdrag = 1;

let data_tabl = ["A", "B", "C"];

let prefix = "assets/";

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)];
}
  
function showImages() {
    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";
        
        let imageholder = $("#imageholder");
        let letterholder = $("#letterholder");

        imageholder.append("<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;
        letterholder.append("<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;
    }
}

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);
    
}