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

Prevent being stuck in while loop + Define how webpage looks

Browse source
This commit is contained in:
Taevas 2021-01-26 18:04:06 +01:00
parent b2e2089d21
commit 554daa220f
3 changed files with 50 additions and 14 deletions
Download patch file Download diff file Expand all files Collapse all files

28
index.css
View file

@ -1,3 +1,31 @@
body {
display: inline;
background-color: #1c1f22;
color: white;
font-family: "Helvetica";
}
#question {
width: 100%;
}
#character {
font-size: 100px;
background-color: black;
text-align: center;
line-height: 200px;
width: 200px;
height: 200px;
border: 1px solid;
margin-left: auto;
margin-right: auto;
}
#correct_answer {
}
#score {
}
#allowed {
}

5
index.html
View file

@ -9,7 +9,10 @@
</head>
<body onload="changeQuestion()">
<div id="question">
<p>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>

31
index.js
View file

@ -10,10 +10,12 @@ function changeQuestion() {
document.getElementById("answer_field").value = ""
document.getElementById("answer_field").focus()
let p = document.getElementById("question").getElementsByTagName('p')[0]
let p_one = document.getElementById("character")
let p_two = document.getElementById("equivalent")
let a = document.getElementById("correct_answer")
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
a.style.visibility = "hidden"
@ -23,44 +25,47 @@ function changeQuestion() {
var part_two
var answer
switch (questionShape[0]) {
switch (questionShape[1]) {
case "h":
part_one = "hiragana"
answer = characters.h
part_one = characters.h
break
case "k":
part_one = "katakana"
answer = characters.k
part_one = characters.k
break
case "r":
part_one = "romaji"
answer = characters.r
part_one = characters.r
break
default:
part_one = "???"
}
switch (questionShape[1]) {
switch (questionShape[0]) {
case "h":
part_two = characters.h
part_two = "hiragana"
answer = characters.h
break
case "k":
part_two = characters.k
part_two = "katakana"
answer = characters.k
break
case "r":
part_two = characters.r
part_two = "romaji"
answer = characters.r
break
default:
part_two = "???"
}
p.innerHTML = `What is the ${part_one} equivalent of ${part_two}?`
p_one.innerHTML = part_one
p_two.innerHTML = part_two
a.getElementsByTagName('p')[0].innerHTML = `The answer was ${answer}`
})
}
function shapeQuestion(allow) {
if (allow.filter(Boolean).length < 2) {return false} // No question can be found if two boxes are left unchecked
let possibilities = ['h', 'k', 'r']
var element_one
var element_two