BRNSystems/HearingGame
1
1
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

something

Browse Source
This commit is contained in:
Bruno Rybársky 2023-04-01 10:44:45 +02:00
parent e78354b8c4
commit fd9e2acc83
No known key found for this signature in database
GPG Key ID: DFE2C061EF985CD4
15 changed files with 130 additions and 42 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
assets/items/AUDIO/BANKA.mp3 Normal file
View File

Binary file not shown.

BIN
assets/items/AUDIO/CHROBAK.mp3 Normal file
View File

Binary file not shown.

BIN
assets/items/AUDIO/CIZMY.mp3 Normal file
View File

Binary file not shown.

BIN
assets/items/AUDIO/MEC.mp3 Normal file
View File

Binary file not shown.

BIN
assets/items/AUDIO/STENA.mp3 Normal file
View File

Binary file not shown.

BIN
assets/items/AUDIO/TEHLA.mp3 Normal file
View File

Binary file not shown.

BIN
assets/items/BANKA.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 667 B

BIN
assets/items/CHROBAK.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 827 B

BIN
assets/items/CIZMY.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.1 KiB

BIN
assets/items/MEC.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 524 B

BIN
assets/items/STENA.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 815 B

BIN
assets/items/TEHLA.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 939 B

1
index.css
View File

@ -41,7 +41,6 @@
width: 64px; width: 64px;
height: 64px; height: 64px;
opacity: 0; opacity: 0;
right: -30%;
background-image: url("assets/fail.png"); background-image: url("assets/fail.png");
} }

16
index.html
View File

@ -1,3 +1,4 @@
<!DOCTYPE html>
<html> <html>
<head> <head>
<title>WAAAAAA</title> <title>WAAAAAA</title>
@ -32,25 +33,20 @@
</div> </div>
</td> </td>
</tr> </tr>
<tr>
<div id="vzoritem">
</div>
</tr>
<tr> <tr>
<div id="imagesky"> <div id="imagesky">
</div> </div>
<td>
<div id="imagestatus" class="status">
</div>
</td>
</tr> </tr>
<tr> <tr>
<div id="lettersky"> <div id="lettersky">
</div> </div>
<td>
<div id="letterstatus" class="status">
</div>
</td>
</tr> </tr>
</tbody> </tbody>
</table> </table>

155
index.js
View File

@ -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 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 = [ let words = [
"AHOJ", "BANKA",
"CAU", "CHROBAK",
"TEST" "CIZMY",
"MEC",
"STENA",
"TEHLA"
]; ];
function makeSpaceWord(word){ function makeSpaceWord(word){
let length = word.length; let length = word.length;
for (var i = 0; i < length; i++) { for (var i = 0; i < length; i++) {
$("#lettersky").append('<td><div id="letterplace" 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 id="imageplace" ondrop="drop(event)" ondragover="allowDrop(event)" class="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/"; let prefix = "assets/";
@ -36,16 +41,50 @@ function cleanup(){
function checkAnswers() { function checkAnswers() {
let good = "background-image: url(\"assets/good.png\");"; let good = "background-image: url(\"assets/good.png\");";
let fail = "background-image: url(\"assets/fail.png\");"; let fail = "background-image: url(\"assets/fail.png\");";
let lettersrc = $('#letterplace').attr("datacode");
let imagesrc = $('#imageplace').attr("datacode"); // $('#letterstatus').attr('style', good);
if (audiosrc == lettersrc) { // $('#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').attr('style', good);
$('#letterstatus').animate({opacity:1}, "slow"); $('#letterstatus').animate({opacity:1}, "slow");
setTimeout(function (){ setTimeout(function (){
$('#letterstatus').animate({opacity:0}, "slow"); $('#letterstatus').animate({opacity:0}, "slow");
}); });
} }
else { else{
$('#letterstatus').attr('style', fail); $('#letterstatus').attr('style', fail);
$('#letterstatus').animate({opacity:1}, "slow"); $('#letterstatus').animate({opacity:1}, "slow");
setTimeout(function (){ setTimeout(function (){
@ -53,24 +92,11 @@ function checkAnswers() {
}); });
} }
if (audiosrc == imagesrc) { if (vzorcodes == imagecodes && vzorcodes == lettercodes){
$('#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 (audiosrc == imagesrc && audiosrc == lettersrc){
cleanup(); cleanup();
generatePair(); generatePair();
} }
console.log("Vzor:" + vzorcodes + "\nLettercodes:" + lettercodes + "\nImagecodes:" + imagecodes);
} }
function getRandomInt(min, max) { function getRandomInt(min, max) {
@ -106,9 +132,21 @@ function showImages() {
let letterpath = prefix + "letters/" + data_tabl[i] + ".png"; let letterpath = prefix + "letters/" + data_tabl[i] + ".png";
let audiopath = prefix + "audio/" + data_tabl[i] + ".ogg"; 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; 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; ranid += 1;
} }
randomize(images).forEach(function (value, index, array){ randomize(images).forEach(function (value, index, array){
@ -123,19 +161,62 @@ function showImages() {
$(this).on("click", function (e){ $(this).on("click", function (e){
let datacode = $(this).attr("datacode"); let datacode = $(this).attr("datacode");
document.getElementById("audplay"+ datacode).play(); 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(){ 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() { $(function() {
@ -163,6 +244,7 @@ function drag(ev) {
ev.dataTransfer.setData("text", ev.target.outerHTML); ev.dataTransfer.setData("text", ev.target.outerHTML);
ev.dataTransfer.setData("returnto", ev.target.getAttribute("returnto")); ev.dataTransfer.setData("returnto", ev.target.getAttribute("returnto"));
ev.dataTransfer.setData("datacode", ev.target.getAttribute("datacode")); ev.dataTransfer.setData("datacode", ev.target.getAttribute("datacode"));
ev.dataTransfer.setData("classy", ev.target.classList);
let datacode = $(ev.target).attr("datacode"); let datacode = $(ev.target).attr("datacode");
document.getElementById("audplay"+ datacode).play(); document.getElementById("audplay"+ datacode).play();
} }
@ -171,7 +253,18 @@ function drop(ev) {
ev.preventDefault(); ev.preventDefault();
let data = ev.dataTransfer.getData("text"); let data = ev.dataTransfer.getData("text");
let cntdrag = ev.dataTransfer.getData("cntdrag"); let cntdrag = ev.dataTransfer.getData("cntdrag");
let classy = ev.dataTransfer.getData("classy");
let datacode = ev.dataTransfer.getData("datacode"); 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")){ if (!ev.target.outerHTML.includes("img")){
//$('[cntdrag="' + cntdrag + '"]').remove(); //$('[cntdrag="' + cntdrag + '"]').remove();
ev.target.setAttribute("datacode", datacode); ev.target.setAttribute("datacode", datacode);