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 words = [
    "AHOJ",
    "CAU",
    "TEST"
];

function makeSpaceWord(word){
    let length = word.length;
    for (var i = 0; i < length; i++) {
        $("#lettersky").append('<td><div id="letterplace" ondrop="drop(event)" ondragover="allowDrop(event)" class="place"></td>');
        $("#imagesky").append('<td><div id="imageplace" ondrop="drop(event)" ondragover="allowDrop(event)" class="place"></td>');
    }
}

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 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 randomize(inarray){
    var tmp = [];
    const randomly = () => Math.random() - 0.5;

    const traitInfo = Array(inarray.length).fill({}); // for the snippet.
    const hahainarray = [].concat(inarray).sort(randomly);

    traitInfo.forEach((t, i) => {
    tmp.push(hahainarray[i]);
    });
    return tmp;
}

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";
        let audiopath = prefix + "audio/" + data_tabl[i] + ".ogg";
        
        images.push("<div returntarget=\"" + ranid + "\" ranid=\"" + ranid + "\" ondrop=\"drop(event)\" ondragover=\"allowDrop(event)\" id=\"imageholderak" + ranid + "\" datacode=\"" + data_tabl[i] + "\" class=\"place grid-item holderak imageholderak\"><img returnto=\"" + ranid + "\" datacode=\"" + data_tabl[i] + "\" draggable=\"true\" ondragstart=\"drag(event)\" src=\"" + imagepath + "\"><audio datacode=\"" + data_tabl[i] + "\" id=\"audplay" + data_tabl[i] + "\"><source id=\"audioholderak" + ranid + "\" class=\"holderak\" datacode=\"" + data_tabl[i] + "\" src=\"" + audiopath + "\" type=\"audio/ogg\"/></audio></img></div>");
        ranid += 1;
        letters.push("<div returntarget=\"" + ranid + "\" ranid=\"" + ranid + "\" ondrop=\"drop(event)\" ondragover=\"allowDrop(event)\" id=\"letterholderak" + ranid + "\" datacode=\"" + data_tabl[i] + "\" class=\"place grid-item holderak letterholderak\"><img returnto=\"" + ranid + "\" datacode=\"" + data_tabl[i] + "\" draggable=\"true\" ondragstart=\"drag(event)\" src=\"" + letterpath + "\" /></div>");
        ranid += 1;
    }
    randomize(images).forEach(function (value, index, array){
        imageholder.append(value);
    });

    randomize(letters).forEach(function (value, index, array){
        letterholder.append(value);
    });

    $(".imageholderak").each(function(){
       $(this).on("click", function (e){
            let datacode = $(this).attr("datacode");
            document.getElementById("audplay"+ datacode).play();

       }) 
    });
}

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"));
    let datacode = $(ev.target).attr("datacode");
    document.getElementById("audplay"+ datacode).play();
}

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