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

add letter limit

Browse Source
This commit is contained in:
Bruno Rybársky 2023-04-01 21:41:38 +02:00
parent cd7d3a23e1
commit 6eb82d0a01
No known key found for this signature in database
GPG Key ID: DFE2C061EF985CD4
3 changed files with 42 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
index.css
View File

@ -9,7 +9,7 @@
bottom: 0%; bottom: 0%;
} }
#activepart{ .activepart{
width: fit-content; width: fit-content;
margin: auto; margin: auto;
padding: auto; padding: auto;
@ -70,4 +70,11 @@ th, td {
.itemstor > *{ .itemstor > *{
margin: 16px; margin: 16px;
}
#vzoritem{
bottom: 4%;
left: 4%;
position: absolute;
z-index: 2;
} }

20
index.html
View File

@ -15,37 +15,35 @@
<div id="lettercontainer" class="itemcont"> <div id="lettercontainer" class="itemcont">
<div id="letterholder" class="itemstor"> <div id="letterholder" class="itemstor">
</div> </div>
</div>
<div id="vzoritem">
</div> </div>
<div id="activeholder"> <div id="activeholder">
<div id="activepart"> <div class="activepart">
<table> <table class="activepart">
<tbody> <tbody>
<tr> <tr>
<td> <td>
<div id="verify"> <div id="verify" class="activepart">
</div> </div>
</td> </td>
</tr> </tr>
<tr> <tr>
<td> <td>
<div id="trashcan" ondrop="droptrash(event)" ondragover="allowDrop(event)"></div> <div id="trashcan" class="activepart" ondrop="droptrash(event)" ondragover="allowDrop(event)"></div>
</div> </div>
</td> </td>
</tr> </tr>
<tr> <tr>
<div id="vzoritem"> <div id="imagesky" class="activepart">
</div>
</tr>
<tr>
<div id="imagesky">
</div> </div>
</tr> </tr>
<tr> <tr>
<div id="lettersky"> <div id="lettersky" class="activepart">
</div> </div>
</tr> </tr>

37
index.js
View File

@ -4,6 +4,8 @@ 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 tocount = 10;
let words = [ let words = [
"BANKA", "BANKA",
"CHROBAK", "CHROBAK",
@ -157,29 +159,40 @@ function getEmptyIndex(element) {
return [finalindex, idcko]; return [finalindex, idcko];
} }
function showImages() { function showImages(word) {
let tmp_tabl = Array.from(word)
var images = []; var images = [];
var letters = []; var letters = [];
let imageholder = $("#imageholder"); let imageholder = $("#imageholder");
let letterholder = $("#letterholder"); let letterholder = $("#letterholder");
for (let i = 0 ; i < data_tabl.length; i++) {
let imagepath = prefix + "images/" + data_tabl[i] + ".png"; var now_count = tmp_tabl.length;
let letterpath = prefix + "letters/" + data_tabl[i] + ".png";
let audiopath = prefix + "audio/" + data_tabl[i] + ".ogg"; 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( images.push(
"<div returntarget=\"" + ranid + "\" ranid=\"" + ranid + "\" ondrop=\"drop(event)\" ondragover=\"allowDrop(event)\" id=\"imageholderak" + ranid + "\" datacode=\"" + data_tabl[i] + "\" class=\"place originalplace grid-item holderak imageholderak\">" + "<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=\"" + data_tabl[i] + "\" draggable=\"true\" ondragstart=\"drag(event)\" class=\"imagevec\" src=\"" + imagepath + "\">" + "<img returnto=\"" + ranid + "\" datacode=\"" + tmp_tabl[i] + "\" draggable=\"true\" ondragstart=\"drag(event)\" class=\"imagevec\" src=\"" + imagepath + "\">" +
"<audio datacode=\"" + data_tabl[i] + "\" id=\"audplay" + data_tabl[i] + "\">" + "<audio datacode=\"" + tmp_tabl[i] + "\" id=\"audplay" + tmp_tabl[i] + "\">" +
"<source id=\"audioholderak" + ranid + "\" class=\"holderak\" datacode=\"" + data_tabl[i] + "\" src=\"" + audiopath + "\" type=\"audio/ogg\"/>" + "<source id=\"audioholderak" + ranid + "\" class=\"holderak\" datacode=\"" + tmp_tabl[i] + "\" src=\"" + audiopath + "\" type=\"audio/ogg\"/>" +
"</audio>" + "</audio>" +
"</img>" + "</img>" +
"</div>" "</div>"
); );
ranid += 1; ranid += 1;
letters.push( letters.push(
"<div returntarget=\"" + ranid + "\" ranid=\"" + ranid + "\" ondrop=\"drop(event)\" ondragover=\"allowDrop(event)\" id=\"letterholderak" + ranid + "\" datacode=\"" + data_tabl[i] + "\" class=\"place originalplace grid-item holderak letterholderak\">" + "<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=\"" + data_tabl[i] + "\" draggable=\"true\" ondragstart=\"drag(event)\" class=\"lettervec\" src=\"" + letterpath + "\" />" + "<img returnto=\"" + ranid + "\" datacode=\"" + tmp_tabl[i] + "\" draggable=\"true\" ondragstart=\"drag(event)\" class=\"lettervec\" src=\"" + letterpath + "\" />" +
"</div>" "</div>"
); );
ranid += 1; ranid += 1;
@ -280,12 +293,12 @@ function generatePair(){
generateItem(word); generateItem(word);
showImages(word);
} }
$(function() { $(function() {
generatePair(); generatePair();
showImages();
$("#audiopart").on("click", function (){ $("#audiopart").on("click", function (){
document.getElementById("audplay").play(); document.getElementById("audplay").play();