stuff
This commit is contained in:
parent
c5ec92d148
commit
ac1a8a37e3
27
index.css
27
index.css
@ -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;
|
||||
}
|
||||
58
index.html
58
index.html
@ -15,6 +15,35 @@
|
||||
<audio id="failaudio">
|
||||
<source src="assets/fail.ogg" type="audio/ogg">
|
||||
</audio>
|
||||
<div id="activeholder">
|
||||
<div class="activepart">
|
||||
<table class="activepart">
|
||||
<tbody>
|
||||
<tr id="vzoritemtr" align="center">
|
||||
<td id="vzoritemtd">
|
||||
<div id="vzoritem">
|
||||
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr align="center">
|
||||
<td>
|
||||
<div id="lettersky" class="activepart">
|
||||
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr align="center">
|
||||
<td>
|
||||
<div id="imagesky" class="activepart">
|
||||
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
<div id="lettercontainer" class="itemcont">
|
||||
<div id="letterholder" class="itemstor">
|
||||
</div>
|
||||
@ -23,32 +52,9 @@
|
||||
<div id="imageholder" class="itemstor">
|
||||
</div>
|
||||
</div>
|
||||
<div id="activeholder">
|
||||
<div class="activepart">
|
||||
<table class="activepart">
|
||||
<table id="actiontable">
|
||||
<tbody>
|
||||
<tr>
|
||||
<td id="vzoritemtd">
|
||||
<div id="vzoritem">
|
||||
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<div id="lettersky" class="activepart">
|
||||
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<div id="imagesky" class="activepart">
|
||||
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<tr align="center">
|
||||
<td>
|
||||
<div id="verify" class="activepart fixbgimage">
|
||||
|
||||
@ -67,7 +73,5 @@
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
24
index.js
24
index.js
@ -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();
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user