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

stuff

Browse Source
This commit is contained in:
Timotej Rybársky 2023-04-07 13:04:48 +02:00
parent c5ec92d148
commit ac1a8a37e3
3 changed files with 60 additions and 51 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

27
index.css
View File

@ -51,17 +51,22 @@ body {
.status {
width: 128px;
height: 128px;
opacity: 0;
display: none;
background-image: url("assets/fail.png");
}
th,
td {
padding: 16px;
padding: 8px;
overflow: hidden;
display: inline-block;
}
#actiontable{
margin-left: auto;
margin-right: auto;
}
.itemcont {
width: 100vw;
}
@ -70,15 +75,15 @@ td {
display: flex;
flex-direction: row;
flex-wrap: wrap;
margin: 10px;
margin-left: auto;
margin-right: auto;
width: fit-content;
margin: auto;
padding: auto;
position: relative;
}
.itemstor>div {
margin: 16px;
margin: 8px;
}
.itemstor>div>p {
margin: 0px;
@ -88,13 +93,14 @@ td {
bottom: 4%;
left: 4%;
z-index: 10;
object-fit: contain;
}
#vzoritemtd{
width: 50%;
height: 50%;
width: unset;
height: unset;
overflow: unset;
margin-left: auto;
margin-right: auto;
}
.itemholderak{
@ -118,7 +124,6 @@ td {
}
#currentvzor{
object-fit: contain;
width: 50%;
height: 50%;
width: unset;
height: unset;
}

60
index.html
View File

@ -15,53 +15,28 @@
<audio id="failaudio">
<source src="assets/fail.ogg" type="audio/ogg">
</audio>
<div id="lettercontainer" class="itemcont">
<div id="letterholder" class="itemstor">
</div>
</div>
<div id="imagecontainer" class="itemcont">
<div id="imageholder" class="itemstor">
</div>
</div>
<div id="activeholder">
<div class="activepart">
<table class="activepart">
<tbody>
<tr>
<tr id="vzoritemtr" align="center">
<td id="vzoritemtd">
<div id="vzoritem">
</div>
</td>
</tr>
<tr>
<tr align="center">
<td>
<div id="lettersky" class="activepart">
</div>
</td>
</tr>
<tr>
<tr align="center">
<td>
<div id="imagesky" class="activepart">
</div>
</td>
</tr>
<tr>
<td>
<div id="verify" class="activepart fixbgimage">
</div>
</td>
<td>
<div id="trashcan" class="fixbgimage activepart" ondrop="droptrash(event)" ondragover="allowDrop(event)">
</div>
</td>
<td>
<div id="refresh" class="fixbgimage activepart">
</div>
</td>
</tr>
@ -69,5 +44,34 @@
</table>
</div>
</div>
<div id="lettercontainer" class="itemcont">
<div id="letterholder" class="itemstor">
</div>
</div>
<div id="imagecontainer" class="itemcont">
<div id="imageholder" class="itemstor">
</div>
</div>
<table id="actiontable">
<tbody>
<tr align="center">
<td>
<div id="verify" class="activepart fixbgimage">
</div>
</td>
<td>
<div id="trashcan" class="fixbgimage activepart" ondrop="droptrash(event)" ondragover="allowDrop(event)">
</div>
</td>
<td>
<div id="refresh" class="fixbgimage activepart">
</div>
</td>
</tr>
</tbody>
</table>
</body>
</html>

24
index.js
View File

@ -39,8 +39,8 @@ function makeSpaceWord(word){
imagesky = imagesky + ('<td><div ondrop="drop(event)" id="letterko' + ranid +'" finalplaceindex="' + i +'" ondragover="allowDrop(event)" class="imageplace finalplace finalimageplace place"></td>');
ranid++;
}
lettersky = lettersky + ('<td><div id="letterstatus" class="status fixbgimage"></div></td>');
imagesky = imagesky + ('<td><div id="imagestatus" class="status fixbgimage"></div></td>');
lettersky = lettersky + ('<td id="letterstatus" class="status fixbgimage"></td>');
imagesky = imagesky + ('<td id="imagestatus" class="status fixbgimage"></td>');
$("#lettersky").html(lettersky);
$("#imagesky").html(imagesky);
}
@ -72,9 +72,9 @@ function checkAnswers() {
let fail = "background-image: url(\"assets/fail.png\");";
// $('#letterstatus').attr('style', good);
// $('#letterstatus').animate({opacity:1}, "slow");
// $('#letterstatus').fadeIn();
// setTimeout(function (){
// $('#letterstatus').animate({opacity:0}, "slow");
// $('#letterstatus').fadeOut();
// });
var imagecodes = "";
var lettercodes = "";
@ -92,32 +92,32 @@ function checkAnswers() {
if (vzorcodes == imagecodes)
{
$('#imagestatus').attr('style', good);
$('#imagestatus').animate({opacity:1}, "slow");
$('#imagestatus').fadeIn();
setTimeout(function (){
$('#imagestatus').animate({opacity:0}, "slow");
$('#imagestatus').fadeOut();
});
}
else{
$('#imagestatus').attr('style', fail);
$('#imagestatus').animate({opacity:1}, "slow");
$('#imagestatus').fadeIn();
setTimeout(function (){
$('#imagestatus').animate({opacity:0}, "slow");
$('#imagestatus').fadeOut();
});
}
if (vzorcodes == lettercodes)
{
$('#letterstatus').attr('style', good);
$('#letterstatus').animate({opacity:1}, "slow");
$('#letterstatus').fadeIn();
setTimeout(function (){
$('#letterstatus').animate({opacity:0}, "slow");
$('#letterstatus').fadeOut();
});
}
else{
$('#letterstatus').attr('style', fail);
$('#letterstatus').animate({opacity:1}, "slow");
$('#letterstatus').fadeIn();
setTimeout(function (){
$('#letterstatus').animate({opacity:0}, "slow");
$('#letterstatus').fadeOut();
});
}