something
This commit is contained in:
parent
e78354b8c4
commit
fd9e2acc83
BIN
assets/items/AUDIO/BANKA.mp3
Normal file
BIN
assets/items/AUDIO/BANKA.mp3
Normal file
Binary file not shown.
BIN
assets/items/AUDIO/CHROBAK.mp3
Normal file
BIN
assets/items/AUDIO/CHROBAK.mp3
Normal file
Binary file not shown.
BIN
assets/items/AUDIO/CIZMY.mp3
Normal file
BIN
assets/items/AUDIO/CIZMY.mp3
Normal file
Binary file not shown.
BIN
assets/items/AUDIO/MEC.mp3
Normal file
BIN
assets/items/AUDIO/MEC.mp3
Normal file
Binary file not shown.
BIN
assets/items/AUDIO/STENA.mp3
Normal file
BIN
assets/items/AUDIO/STENA.mp3
Normal file
Binary file not shown.
BIN
assets/items/AUDIO/TEHLA.mp3
Normal file
BIN
assets/items/AUDIO/TEHLA.mp3
Normal file
Binary file not shown.
BIN
assets/items/BANKA.png
Normal file
BIN
assets/items/BANKA.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 667 B |
BIN
assets/items/CHROBAK.png
Normal file
BIN
assets/items/CHROBAK.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 827 B |
BIN
assets/items/CIZMY.png
Normal file
BIN
assets/items/CIZMY.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.1 KiB |
BIN
assets/items/MEC.png
Normal file
BIN
assets/items/MEC.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 524 B |
BIN
assets/items/STENA.png
Normal file
BIN
assets/items/STENA.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 815 B |
BIN
assets/items/TEHLA.png
Normal file
BIN
assets/items/TEHLA.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 939 B |
@ -41,7 +41,6 @@
|
||||
width: 64px;
|
||||
height: 64px;
|
||||
opacity: 0;
|
||||
right: -30%;
|
||||
background-image: url("assets/fail.png");
|
||||
}
|
||||
|
||||
|
||||
16
index.html
16
index.html
@ -1,3 +1,4 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>WAAAAAA</title>
|
||||
@ -32,25 +33,20 @@
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<div id="vzoritem">
|
||||
|
||||
</div>
|
||||
</tr>
|
||||
<tr>
|
||||
<div id="imagesky">
|
||||
|
||||
</div>
|
||||
<td>
|
||||
<div id="imagestatus" class="status">
|
||||
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<div id="lettersky">
|
||||
|
||||
</div>
|
||||
<td>
|
||||
<div id="letterstatus" class="status">
|
||||
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
155
index.js
155
index.js
@ -5,17 +5,22 @@ 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"
|
||||
"BANKA",
|
||||
"CHROBAK",
|
||||
"CIZMY",
|
||||
"MEC",
|
||||
"STENA",
|
||||
"TEHLA"
|
||||
];
|
||||
|
||||
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>');
|
||||
$("#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/";
|
||||
@ -36,41 +41,62 @@ function cleanup(){
|
||||
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) {
|
||||
// $('#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 {
|
||||
else{
|
||||
$('#imagestatus').attr('style', fail);
|
||||
$('#imagestatus').animate({opacity:1}, "slow");
|
||||
setTimeout(function (){
|
||||
$('#imagestatus').animate({opacity:0}, "slow");
|
||||
});
|
||||
}
|
||||
if (audiosrc == imagesrc && audiosrc == lettersrc){
|
||||
|
||||
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) {
|
||||
@ -106,9 +132,21 @@ function showImages() {
|
||||
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>");
|
||||
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)\" src=\"" + letterpath + "\" /></div>");
|
||||
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){
|
||||
@ -123,19 +161,62 @@ function showImages() {
|
||||
$(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 randomData = getRandomElement(data_tabl);
|
||||
let word = getRandomElement(words);
|
||||
|
||||
let audioplace = $("#audiopart");
|
||||
makeSpaceWord(word);
|
||||
|
||||
generateItem(word);
|
||||
|
||||
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() {
|
||||
@ -163,6 +244,7 @@ function drag(ev) {
|
||||
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();
|
||||
}
|
||||
@ -171,7 +253,18 @@ 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);
|
||||
|
||||
Loading…
Reference in New Issue
Block a user