HearingGame/index.js

var ranid = 1;

var cntdrag = 1;
//missing Q, CH, DZ, DŽ, Ä, W, X
let data_tabl = ["A", "Á", "B", "C", "Č", "D", "Ď", "E", "É", "F", "G", "H", "I", "Í", "J", "K", "L", "Ĺ", "Ľ", "M", "N", "Ň", "O", "Ó", "Ô", "P", "R", "Ŕ", "S", "Š", "T", "Ť", "U", "Ú", "V", "Y", "Ý", "Z", "Ž"];

let tocount = 10;

let words = [
    "DOM",
    "STROM",
    "ÚSTA",
    "NOHA",
    "MEČ",
    "ZAJAC",
    "MAČKA",
    "KOMÍN",
    "VÁZA",
    "ŠESŤ",
    "PEŇ",
    "CITRÓN",
    "PRST",
    "MYŠ",
    "HAD",
    "HUSLE",
    "ŽABA",
    "FÉN",
    "GUMA",
    "BÝK"
];

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("");
    try{
        umami.trackEvent("Trash clear", { type: 'trashclear' });
    } catch(e) {} 

    
}

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("p").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();cleanup
        generatePair();
        try{
            umami.trackEvent('Successful round', { type: 'successround' });
        } catch(e) {} 
        document.getElementById("goodaudio").play();
    }
    else{
        try{
            umami.trackEvent('Unsuccessful round', { type: 'failround' });
        } catch(e) {} 
        document.getElementById("failaudio").play();
    }
    try{
        umami.trackEvent("Round data", { type: 'rounddata', Vzor: vzorcodes, Lettercodes: lettercodes, Imagecodes: imagecodes });
    } catch(e) {} 
}

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 refresh(){
    cleanup();
    generatePair();
}
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(word) {
    $("#imageholder").html("");
    $("#letterholder").html("");
    let tmp_tabl = Array.from(word)
    var images = [];
    var letters = [];
    let imageholder = $("#imageholder");
    let letterholder = $("#letterholder");

    var now_count = tmp_tabl.length;

    while (now_count < tocount){
        tmp_tabl.push(getRandomElement(data_tabl));
        now_count++;
    }

    try{
        umami.trackEvent("Round images", { type: 'roundimages', images: tmp_tabl });
    } catch(e) {} 
    for (let i = 0 ; i < tmp_tabl.length; i++) {
        let imagepath = prefix + "images/" + tmp_tabl[i] + ".png";
        let letterpath = prefix + "letters/" + tmp_tabl[i] + ".png";
        let audiopath = prefix + "audio/" + tmp_tabl[i] + ".mp3";
        
        images.push(
            "<div returntarget=\"" + ranid + "\" ranid=\"" + ranid + "\" ondrop=\"drop(event)\" ondragover=\"allowDrop(event)\" id=\"imageholderak" + ranid + "\" datacode=\"" + tmp_tabl[i] + "\" class=\"place originalplace grid-item holderak imageholderak\">" + 
                "<img returnto=\"" + ranid + "\" datacode=\"" + tmp_tabl[i] + "\" draggable=\"true\" ondragstart=\"drag(event)\" class=\"imagevec\" src=\"" + imagepath + "\">" + 
                    "<audio datacode=\"" + tmp_tabl[i] + "\" id=\"audplay" + tmp_tabl[i] + "\">" + 
                        "<source id=\"audioholderak" + ranid + "\" class=\"holderak\" datacode=\"" + tmp_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=\"" + tmp_tabl[i] + "\" class=\"place originalplace grid-item holderak letterholderak\">" + 
                "<p returnto=\"" + ranid + "\" datacode=\"" + tmp_tabl[i] + "\" draggable=\"true\" ondragstart=\"drag(event)\" class=\"lettervec\">" + tmp_tabl[i] + "</p>" +
            "</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"));
            if (emptyindex > -1){
                let changingelement = $("#" + idcko);
                changingelement.html(targetElement.html());
                try{
                    umami.trackEvent('Clicked sign', { type: 'clicksign', datacode: targetElement.attr("datacode") });
                } catch(e) {} 
            }

        }

        if (targetElement.hasClass("letterholderak")){
            let [emptyindex, idcko] = getEmptyIndex($(".finalletterplace"));
            if (emptyindex > -1){
                let changingelement = $("#" + idcko);
                try{
                    umami.trackEvent('Clicked letter', { type: 'clickletter', datacode: targetElement.attr("datacode") });
                } catch(e) {} 
                changingelement.html(targetElement.html());
            }

        }
    });

    $(".finalplace").on("click", function (){
        try{
            umami.trackEvent('Clicked clear', { type: 'clickclear', datacode: $(this).children()[0].getAttribute("datacode") });
        } catch(e) {} 
        $(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");
             try{
                 umami.trackEvent('Listened to image', { type: 'listenimage', datacode: $(this).attr("datacode") });
                } catch(e) {} 
             document.getElementById("audplayitem"+ datacode).play();
        }) 
     });
    
}

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

    makeSpaceWord(word);

    generateItem(word);

    showImages(word);

}

$(function() {
    generatePair();

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

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

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

    $("#refresh").on("click", refresh);
    
});

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();
    if (ev.target.parentElement.classList.contains("originalplace")){
        ev.dataTransfer.setData("dragfromoriginal", "YES");
    }
    else{
        ev.dataTransfer.setData("dragfromoriginal", "NO");
    }
    if (ev.target.classList.contains("imagevec")){
        try{
            umami.trackEvent('Dragged sign', { type: 'draggedsign', datacode: ev.target.getAttribute("datacode") });
        } catch(e) {} 
    }
    else if (ev.target.classList.contains("lettervec")){
        try{
            umami.trackEvent('Dragged letter', { type: 'draggedletter', datacode: ev.target.getAttribute("datacode") });
            } catch(e) {} 
    }
}

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");
    let dragfromoriginal = ev.dataTransfer.getData("dragfromoriginal");
    if (ev.target.classList.contains("letterplace")){
        if (!classy.includes("lettervec")){
            return;
        }
    }
    if (ev.target.parentElement.classList.contains("originalplace")){
        return;
    }
    if (ev.target.classList.contains("imageplace")){
        if (!classy.includes("imagevec")){
            return;
        }
    }
    if (ev.target.parentElement.innerHTML.includes("<img")){
        return;
    }
    if (ev.target.parentElement.innerHTML.includes("<p")){
        return;
    }
    if (dragfromoriginal == "NO"){
        $('[cntdrag="' + cntdrag + '"]').remove();
    }
    ev.target.setAttribute("datacode", datacode);
    ev.target.setAttribute("cntdrag", cntdrag);
    cntdrag += 1;

    ev.target.innerHTML = data;

    if (classy.includes("imagevec")){
        try{
            umami.trackEvent('Dropped sign', { type: 'droppedsign', datacode: ev.target.getAttribute("datacode") });
        } catch(e) {} 
    }
    else if (classy.includes("lettervec")){
        try{
            umami.trackEvent('Dropped letter', { type: 'droppedletter', datacode: ev.target.getAttribute("datacode") });
        } catch(e) {} 
    }
}

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");
    let classy = ev.dataTransfer.getData("classy");
    $('[returntarget="' + returnto + '"]').html(htmldata);
    if (classy.includes("imagevec")){
        try{
            umami.trackEvent('Dragged sign into trashcan', { type: 'dropsigntrash', datacode: ev.target.getAttribute("datacode") });
        } catch(e) {} 
    }
    else if (classy.includes("lettervec")){
        try{
            umami.trackEvent('Dragged letter into trashcan', { type: 'droplettertrash', datacode: ev.target.getAttribute("datacode") });
        } catch(e) {} 
    }
    
}