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

Make webpage look better

Browse source
This commit is contained in:
Taevas 2021-01-27 02:37:57 +01:00
parent 554daa220f
commit 30ae058161
3 changed files with 74 additions and 19 deletions
Download patch file Download diff file Expand all files Collapse all files

53
index.css
View file

@ -2,7 +2,7 @@ body {
display: inline;
background-color: #1c1f22;
color: white;
font-family: "Helvetica";
font-family: Arial, sans-serif;
}
#question {
@ -13,19 +13,52 @@ body {
font-size: 100px;
background-color: black;
text-align: center;
line-height: 200px;
width: 200px;
height: 200px;
line-height: 2em;
width: 2em;
height: 2em;
border: 1px solid;
margin-left: auto;
margin-right: auto;
margin-bottom: 0px;
}
#equivalent {
font-size: 20px;
background-color: black;
text-align: center;
line-height: 2em;
width: 10em;
height: 2em;
border: 1px solid;
margin-left: auto;
margin-right: auto;
margin-bottom: 0px;
}
#user_answer {
font-size: 20px;
background-color: black;
text-align: center;
line-height: 2em;
width: 15em;
height: 2em;
border: 1px solid;
margin-left: auto;
margin-top: 2em;
margin-right: auto;
margin-bottom: 0px;
}
#correct_answer {
}
#score {
}
#allowed {
font-size: 20px;
background-color: black;
text-align: center;
line-height: 0em;
width: 15em;
height: 2em;
border: 1px solid;
margin-left: auto;
margin-top: 2em;
margin-right: auto;
margin-bottom: 0px;
}

14
index.html
View file

@ -9,13 +9,13 @@
</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">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>
</div>
<div id="user_answer">
<input type="text" id="answer_field" autofocus="autofocus" onfocus="this.select()">
<button onclick="checkAnswer()" id="answer_btn">Answer</button>
<button onclick="changeQuestion()" id="next_btn">Next</button>
<button onclick="checkAnswer()" id="answer_btn">answer</button>
<button onclick="changeQuestion()" id="next_btn">next</button>
</div>
<div id="correct_answer" style="visibility: hidden;">
<p>Answer was</p>
@ -25,9 +25,9 @@
<p style="color: green">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>
<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>
</form>
</body>
</html>

26
index.js
View file

@ -14,9 +14,15 @@ function changeQuestion() {
let p_two = document.getElementById("equivalent")
let a = document.getElementById("correct_answer")
//p_one.style.fontSize = "102px"
//$("#character").animate({fontSize: "100px"}, 100)
let questionShape = shapeQuestion([document.getElementById('h').checked, document.getElementById('k').checked, document.getElementById('r').checked])
if (!questionShape) {return false} // No question can be found if two boxes are left unchecked
changeBackground(questionShape[1], p_one)
changeBackground(questionShape[0], p_two)
a.style.visibility = "hidden"
$.getJSON("characters.json", function(data) {
@ -58,11 +64,27 @@ function changeQuestion() {
p_one.innerHTML = part_one
p_two.innerHTML = part_two
a.getElementsByTagName('p')[0].innerHTML = `The answer was ${answer}`
a.getElementsByTagName('p')[0].innerHTML = `the answer was ${answer}`
})
}
function changeBackground(char, para) {
switch (char) {
case "h":
para.style.backgroundColor = "red"
break;
case "k":
para.style.backgroundColor = "green"
break;
case "r":
para.style.backgroundColor = "blue"
break;
default:
para.style.backgroundColor = "black"
}
}
function shapeQuestion(allow) {
if (allow.filter(Boolean).length < 2) {return false} // No question can be found if two boxes are left unchecked
@ -94,7 +116,7 @@ function checkAnswer() {
let positive = document.getElementById("score").getElementsByTagName('p')[1]
let negative = document.getElementById("score").getElementsByTagName('p')[0]
if (answer_field.value == correct_answer_p.innerHTML.slice(correct_answer_p.innerHTML.lastIndexOf(" ") + 1)) {
if (answer_field.value.toLowerCase() == correct_answer_p.innerHTML.slice(correct_answer_p.innerHTML.lastIndexOf(" ") + 1)) {
positive.innerHTML = Number(positive.innerHTML) + 1
} else {
negative.innerHTML = Number(negative.innerHTML) + 1