Taevas/kanaguessr
Taevas/kanaguessr
0
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

More friendly to mobile

Browse source
This commit is contained in:
Taevas 2023-03-07 23:59:19 +01:00
parent 3c5e975c7b
commit 1323641733
4 changed files with 43 additions and 32 deletions
Download patch file Download diff file Expand all files Collapse all files

BIN
favicon.png
View file

Binary file not shown.
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 9.8 KiB

After

Width:  |  Height:  |  Size: 8.1 KiB

Before After
Before After

58
index.css
View file

@ -30,12 +30,6 @@ p {
width: 2em; width: 2em;
} }
@media screen and (max-height: 450px) {
#character {
font-size: 20vh;
}
}
#equivalent { #equivalent {
font-size: 20px; font-size: 20px;
width: 10em; width: 10em;
@ -91,28 +85,6 @@ p {
margin-top: 15px; margin-top: 15px;
} }
@media screen and (max-height: 450px) {
#user_answer * {
height: 6vw;
line-height: 5.5vw;
min-height: auto;
}
}
@media screen and (max-width: 450px) {
#user_answer * {
width: 12vw;
}
#answer_field {
width: 50vw;
}
#correct_answer {
font-size: 5vw;
height: auto;
width: 70vw;
}
}
#settings { #settings {
margin-top: 10px; margin-top: 10px;
} }
@ -148,3 +120,33 @@ p {
margin-left: auto; margin-left: auto;
margin-right: auto; margin-right: auto;
} }
@media screen and (max-width: 450px) {
#user_answer * {
width: 12vw;
}
#answer_field {
width: 50vw;
}
#correct_answer {
font-size: 5vw;
height: auto;
width: 70vw;
}
}
@media screen and (max-height: 650px) {
#user_answer * {
height: 8vh;
line-height: 7.5vh;
min-height: auto;
font-size: 5vh;
}
#character {
font-size: 12vh;
}
#equivalent, #correct_answer {
font-size: 4vh;
}
}

8
index.html
View file

@ -24,13 +24,13 @@
<input type="text" class="form-control form-control-sm" id="answer_field" placeholder="type..." autofocus="autofocus"> <input type="text" class="form-control form-control-sm" id="answer_field" placeholder="type..." autofocus="autofocus">
<p style="color: red" id="negative">0</p> <p style="color: red" id="negative">0</p>
</div> </div>
<div class="row" id="submit_answer">
<button class="col btn btn-lg btn-outline-success" id="answer_btn">answer</button>
<button class="col btn btn-lg btn-outline-info" id="next_btn">next</button>
</div>
<div class="row" id="correct_answer" style="display: none;"> <div class="row" id="correct_answer" style="display: none;">
<p id="answer_paragraph">the answer was</p> <p id="answer_paragraph">the answer was</p>
</div> </div>
<div class="row" id="submit_answer">
<button class="col btn btn-lg btn-outline-success" id="answer_btn">answer</button>
<button class="col btn btn-lg btn-outline-info" id="next_btn" style="display: none;">next</button>
</div>
</div> </div>
</div> </div>
<div class="row" id="settings"> <div class="row" id="settings">

9
index.js
View file

@ -14,6 +14,10 @@ $(function() {
function changeQuestion() { function changeQuestion() {
$("#answer_field").val("") // Empty field so user doesn't have to do it $("#answer_field").val("") // Empty field so user doesn't have to do it
$("#answer_field").focus() // Focus on field so user doesn't have to do it $("#answer_field").focus() // Focus on field so user doesn't have to do it
$("#answer_btn").attr("disabled", false)
$("#answer_btn").css("display", "block")
$("#next_btn").css("display", "none")
$("#next_btn").html("skip")
let questionShape = shapeQuestion( let questionShape = shapeQuestion(
[$("#hq:checked").length, $("#kq:checked").length, $("#rq:checked").length], [$("#hq:checked").length, $("#kq:checked").length, $("#rq:checked").length],
@ -124,6 +128,7 @@ function checkCharacters() {
} }
function checkAnswer() { function checkAnswer() {
$("#answer_field").focus() // Keey keyboard on for mobile users
if (!$("#answer_field").val()) {return} if (!$("#answer_field").val()) {return}
if ($("#answer_field").css("backgroundColor") === "rgb(255, 0, 0)") { if ($("#answer_field").css("backgroundColor") === "rgb(255, 0, 0)") {
$("#equivalent").css("fontSize", "25px") $("#equivalent").css("fontSize", "25px")
@ -144,5 +149,9 @@ function checkAnswer() {
} else { } else {
$("#correct_answer").css("visibility", "visible") $("#correct_answer").css("visibility", "visible")
$("#correct_answer").slideDown(100) $("#correct_answer").slideDown(100)
$("#answer_btn").attr("disabled", true)
$("#answer_btn").css("display", "none")
$("#next_btn").html("next")
$("#next_btn").css("display", "block")
} }
} }