385 lines
13 KiB
JavaScript
385 lines
13 KiB
JavaScript
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 tocount = 10;
|
|
|
|
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("");
|
|
umami.trackEvent("Trash clear", { type: 'trashclear' });
|
|
|
|
|
|
}
|
|
|
|
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();
|
|
umami.trackEvent('Successful round', { type: 'successround' });
|
|
}
|
|
else{
|
|
umami.trackEvent('Unsuccessful round', { type: 'failround' });
|
|
}
|
|
umami.trackEvent("Round data", { type: 'rounddata', Vzor: vzorcodes, Lettercodes: lettercodes, Imagecodes: 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(word) {
|
|
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++;
|
|
}
|
|
|
|
umami.trackEvent("Round images", { type: 'roundimages', images: tmp_tabl });
|
|
|
|
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] + ".ogg";
|
|
|
|
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\">" +
|
|
"<img returnto=\"" + ranid + "\" datacode=\"" + tmp_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"));
|
|
if (emptyindex > -1){
|
|
let changingelement = $("#" + idcko);
|
|
changingelement.html(targetElement.html());
|
|
umami.trackEvent('Clicked sign', { type: 'clicksign', datacode: targetElement.attr("datacode") });
|
|
}
|
|
|
|
}
|
|
|
|
if (targetElement.hasClass("letterholderak")){
|
|
let [emptyindex, idcko] = getEmptyIndex($(".finalletterplace"));
|
|
if (emptyindex > -1){
|
|
let changingelement = $("#" + idcko);
|
|
umami.trackEvent('Clicked letter', { type: 'clickletter', datacode: targetElement.attr("datacode") });
|
|
changingelement.html(targetElement.html());
|
|
}
|
|
|
|
}
|
|
});
|
|
|
|
$(".finalplace").on("click", function (){
|
|
umami.trackEvent('Clicked clear', { type: 'clickclear', datacode: $(this).children()[0].getAttribute("datacode") });
|
|
$(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");
|
|
umami.trackEvent('Listened to image', { type: 'listenimage', datacode: $(this).attr("datacode") });
|
|
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);
|
|
|
|
});
|
|
|
|
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.classList.contains("imagevec")){
|
|
umami.trackEvent('Dragged sign', { type: 'draggedsign', datacode: ev.target.getAttribute("datacode") });
|
|
}
|
|
else if (ev.target.classList.contains("lettervec")){
|
|
umami.trackEvent('Dragged letter', { type: 'draggedletter', datacode: ev.target.getAttribute("datacode") });
|
|
}
|
|
}
|
|
|
|
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);
|
|
}
|
|
if (classy.includes("imagevec")){
|
|
umami.trackEvent('Dropped sign', { type: 'droppedsign', datacode: ev.target.getAttribute("datacode") });
|
|
}
|
|
else if (classy.includes("lettervec")){
|
|
umami.trackEvent('Dropped letter', { type: 'droppedletter', datacode: ev.target.getAttribute("datacode") });
|
|
}
|
|
}
|
|
|
|
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")){
|
|
umami.trackEvent('Dragged sign into trashcan', { type: 'dropsigntrash', datacode: ev.target.getAttribute("datacode") });
|
|
}
|
|
else if (classy.includes("lettervec")){
|
|
umami.trackEvent('Dragged letter into trashcan', { type: 'droplettertrash', datacode: ev.target.getAttribute("datacode") });
|
|
}
|
|
|
|
}
|