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 = [
    "BANKA",
    "CHROBAK",
    "CIZMY",
    "MEC",
    "STENA",
    "TEHLA"
];

function makeSpaceWord(word){
    $("#lettersky").html("");
    $("#imagesky").html("");
    let length = word.length;
    for (var i = 0; i < length; i++) {
        $("#lettersky").append('<td><div ondrop="drop(event)" id="letterko' + ranid +'" finalplaceindex="' + i +'" ondragover="allowDrop(event)" class="letterplace finalplace finalletterplace place"></td>');
        ranid++;
        $("#imagesky").append('<td><div ondrop="drop(event)" id="letterko' + ranid +'" finalplaceindex="' + i +'" ondragover="allowDrop(event)" class="imageplace finalplace finalimageplace place"></td>');
        ranid++;
    }
    $("#lettersky").append('<td><div id="letterstatus" class="status"></div></td>');
    $("#imagesky").append('<td><div id="imagestatus" class="status"></div></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]);
    // }

    $(".finalplace").html("");
}

function checkAnswers() {
    let good = "background-image: url(\"assets/good.png\");";
    let fail = "background-image: url(\"assets/fail.png\");";

    // $('#letterstatus').attr('style', good);
    // $('#letterstatus').animate({opacity:1}, "slow");
    // setTimeout(function (){
    //     $('#letterstatus').animate({opacity:0}, "slow");        
    // });
    var imagecodes = "";
    var lettercodes = "";
    let vzorcodes = $("#currentvzor").attr("datacode");  

    
    $(".finalimageplace").find("img").each(function (){
        imagecodes = imagecodes + $(this).attr("datacode");
    });

    $(".finalletterplace").find("img").each(function (){
        lettercodes = lettercodes + $(this).attr("datacode"); 
    });

    if (vzorcodes == imagecodes)
    {
        $('#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 (vzorcodes == lettercodes)
    {
        $('#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 (vzorcodes == imagecodes && vzorcodes == lettercodes){
        cleanup();
        generatePair();
    }
    console.log("Vzor:" + vzorcodes + "\nLettercodes:" + lettercodes + "\nImagecodes:" + imagecodes);
}

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 getEmptyIndex(element) {
    var emptyPlaces = [];
    var idcka = [];
    var finalindex = -1;
    var idcko = "";
   element.each(function (){
        let thiselement = $(this);
        if (thiselement.html() == ""){
            emptyPlaces.push(thiselement.attr("finalplaceindex"));
            idcka.push(thiselement.attr("id"));
        }
    });
    
    emptyPlaces.forEach(function (value, index) {
        if (value < finalindex || finalindex < 0){
            finalindex = value;
            idcko = idcka[index];
        }
    });
    return [finalindex, idcko];
}

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 originalplace grid-item holderak imageholderak\">" + 
                "<img returnto=\"" + ranid + "\" datacode=\"" + data_tabl[i] + "\" draggable=\"true\" ondragstart=\"drag(event)\" class=\"imagevec\" 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 originalplace grid-item holderak letterholderak\">" + 
                "<img returnto=\"" + ranid + "\" datacode=\"" + data_tabl[i] + "\" draggable=\"true\" ondragstart=\"drag(event)\" class=\"lettervec\" 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);
    });

    $(".originalplace").on("click", function(e){
        let targetElement = $(this);
        if (targetElement.hasClass("imageholderak")){
            let [emptyindex, idcko] = getEmptyIndex($(".finalimageplace"), this);
            if (emptyindex > -1){
                let changingelement = $("#" + idcko);
                changingelement.html(targetElement.html());
            }

        }

        if (targetElement.hasClass("letterholderak")){
            let [emptyindex, idcko] = getEmptyIndex($(".finalletterplace"), this);
            if (emptyindex > -1){
                let changingelement = $("#" + idcko);
                changingelement.html(targetElement.html());
            }

        }
    });

    $(".finalplace").on("click", function (){
        $(this).html("");
    });

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

function generateItem(word){
    let vzorplace = $("#vzoritem");
    
    let datacode = "datacode=\"" + word + "\" "

    let imagesrc = "src=\"assets/items/" + word +".png\" "
    let imageid = "id=\"currentvzor\" ";

    let audioid = "id = \"audplayitem" + word + "\" ";
    let audiosrc = "src=\"assets/items/AUDIO/" + word +".mp3\" "

    let sourceid = "id=\"audioitemholderak" + word +"\" "
    let sourceclass = "class=\"holderak\" "
    let sourcetype = "type=\"audio/mpeg\" "

    let sourceend = "</source>";
    let audioend = "</audio>";
    let imageend = "</img>";
    let itemend = "</div>";
    
    let itemid = "id = \"itemholderak" + word + "\" ";
    let itemclass = "class=\"itemholderak holderak\"";

    let itempart = "<div " + itemid + itemclass + datacode + ">";

    let imagepart = "<img " + imagesrc + datacode + imageid + ">";

    let audiopart = "<audio " + datacode + audioid + ">";

    let sourcepart = "<source " + datacode + audiosrc + sourceclass + sourceid + sourcetype + ">";

    let finalpart = itempart + imagepart + audiopart + sourcepart + sourceend + audioend + imageend + itemend;

    vzorplace.html(finalpart);

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

function generatePair(){
    let word = getRandomElement(words);

    makeSpaceWord(word);

    generateItem(word);


}

$(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"));
    ev.dataTransfer.setData("classy", ev.target.classList);
    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 classy = ev.dataTransfer.getData("classy");
    let datacode = ev.dataTransfer.getData("datacode");
    if (ev.target.classList.contains("letterplace")){
        if (!classy.includes("lettervec")){
            return;
        }
    }
    if (ev.target.classList.contains("imageplace")){
        if (!classy.includes("imagevec")){
            return;
        }
    }
    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);
    
}