289 lines
9.4 KiB
JavaScript
289 lines
9.4 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 words = [
|
|
"BANKA",
|
|
"CHROBAK",
|
|
"CIZMY",
|
|
"MEC",
|
|
"STENA",
|
|
"TEHLA"
|
|
];
|
|
|
|
function makeSpaceWord(word){
|
|
let length = word.length;
|
|
for (var i = 0; i < length; i++) {
|
|
$("#lettersky").append('<td><div ondrop="drop(event)" ondragover="allowDrop(event)" class="letterplace finalletterplace place"></td>');
|
|
$("#imagesky").append('<td><div ondrop="drop(event)" ondragover="allowDrop(event)" class="imageplace finalimageplace place"></td>');
|
|
}
|
|
$("#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]);
|
|
}
|
|
}
|
|
|
|
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 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)\" 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 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);
|
|
});
|
|
|
|
$(".imageholderak").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);
|
|
|
|
}
|