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

Polish the webpage + Add auto-next

Browse source
This commit is contained in:
Taevas 2021-01-27 16:13:40 +01:00
parent 30ae058161
commit 760e4f402e
3 changed files with 81 additions and 9 deletions
Download patch file Download diff file Expand all files Collapse all files

63
index.css
View file

@ -5,6 +5,15 @@ body {
font-family: Arial, sans-serif;
}
button {
background-color: green;
border: 1px solid grey;
color: black;
text-align: center;
text-decoration: none;
display: inline-block;
}
#question {
width: 100%;
}
@ -61,4 +70,58 @@ body {
margin-top: 2em;
margin-right: auto;
margin-bottom: 0px;
}
#score {
display: flex;
margin-top: 20px;
margin-bottom: 0px;
}
#score p {
font-size: 20px;
background-color: black;
text-align: center;
line-height: 2em;
width: 15em;
height: 2em;
border: 1px solid;
margin-top: 0px;
margin-bottom: 0px;
}
#positive {
margin-left: auto;
margin-right: 10px;
}
#negative {
margin-right: auto;
margin-left: 10px;
}
#allowed {
position: absolute;
bottom: 50%;
font-size: 20px;
background-color: white;
text-align: center;
line-height: 1.5em;
border: 1px solid black;
overflow: initial;
}
#misc {
position: absolute;
bottom: 0%;
font-size: 20px;
background-color: black;
text-align: center;
line-height: 1.5em;
border: 1px solid white;
overflow: initial;
}
form * {
margin: 3px;
}

17
index.html
View file

@ -9,8 +9,8 @@
</head>
<body onload="changeQuestion()">
<div id="question">
<p id="character">if you see this, please enable Javascript in order for the website to work properly!</p>
<p id="equivalent">if you see this, please enable Javascript in order for the website to work properly!</p>
<p id="character"></p>
<p id="equivalent"></p>
</div>
<div id="user_answer">
<input type="text" id="answer_field" autofocus="autofocus" onfocus="this.select()">
@ -21,13 +21,16 @@
<p>Answer was</p>
</div>
<div id="score">
<p style="color: red">0</p>
<p style="color: green">0</p>
<p style="color: green" id="positive">0</p>
<p style="color: red" id="negative">0</p>
</div>
<form id="allowed">
<input type="checkbox" id="h" checked="true"> <label for="h">allow questions involving hiraganas?</label>
<input type="checkbox" id="k" checked="true"> <label for="k">allow questions involving katakanas?</label>
<input type="checkbox" id="r" checked="true"> <label for="r">allow questions involving romaji?</label>
<section><input type="checkbox" id="h" checked="true"> <label for="h" style="color: red">hiragana</label></section>
<section><input type="checkbox" id="k" checked="true"> <label for="k" style="color: green">katakana</label></section>
<section><input type="checkbox" id="r" checked="true"> <label for="r" style="color: blue">romaji</label></section>
</form>
<form id="misc">
<input type="checkbox" id="auto"> <label for="auto" style="color: white">automatically go to next after answer</label>
</form>
</body>
</html>

10
index.js
View file

@ -113,14 +113,20 @@ function shapeQuestion(allow) {
function checkAnswer() {
let answer_field = document.getElementById("answer_field")
let correct_answer_p = document.getElementById("correct_answer").getElementsByTagName('p')[0]
let positive = document.getElementById("score").getElementsByTagName('p')[1]
let negative = document.getElementById("score").getElementsByTagName('p')[0]
let positive = document.getElementById("positive")
let negative = document.getElementById("negative")
if (answer_field.value.toLowerCase() == correct_answer_p.innerHTML.slice(correct_answer_p.innerHTML.lastIndexOf(" ") + 1)) {
positive.style.fontSize = "22px"
$("#positive").animate({"fontSize": "20px"}, 300)
positive.innerHTML = Number(positive.innerHTML) + 1
} else {
negative.style.fontSize = "22px"
$("#negative").animate({"fontSize": "20px"}, 300)
negative.innerHTML = Number(negative.innerHTML) + 1
}
correct_answer.style.visibility = "visible"
if (document.getElementById('auto').checked) {changeQuestion()}
}