alvierahman90/capitals_quiz
1
0
Fork 0
mirror of https://github.com/alvierahman90/capitals_quiz.git synced 2024-11-27 11:49:54 +00:00
Code Issues Projects Releases Wiki Activity

use spaces instead of tabs, use double quotes instead of single

Browse Source
This commit is contained in:
Akbar Rahman 2021-04-11 17:30:43 +01:00
parent 1654b98ce4
commit a643fe3b75
1 changed files with 117 additions and 117 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

56
src/game.js
View File

@ -2,17 +2,17 @@
const ALL_REGIONS = "All Regions";
const answersHTML = document.getElementById('answers');
const answerAHTML = document.getElementById('answer_a');
const answerBHTML = document.getElementById('answer_b');
const answerCHTML = document.getElementById('answer_c');
const answerDHTML = document.getElementById('answer_d');
const bodyHTML = document.getElementsByTagName('body')[0]
const scoreHTML = document.getElementById('score');
const settingsHTML = document.getElementById('settings');
const selectorHTML = document.getElementById('region_selector');
const selectorResultsHTML = document.getElementById('selector_results');
const questionHTML = document.getElementById('question');
const answersHTML = document.getElementById("answers");
const answerAHTML = document.getElementById("answer_a");
const answerBHTML = document.getElementById("answer_b");
const answerCHTML = document.getElementById("answer_c");
const answerDHTML = document.getElementById("answer_d");
const bodyHTML = document.getElementsByTagName("body")[0]
const scoreHTML = document.getElementById("score");
const settingsHTML = document.getElementById("settings");
const selectorHTML = document.getElementById("region_selector");
const selectorResultsHTML = document.getElementById("selector_results");
const questionHTML = document.getElementById("question");
const capitals_list = Object.values(countries).map(country => country.capital);
const regionList = [...new Set(Object.values(countries).map(country => country.region))]
@ -29,7 +29,7 @@ function init() {
// generate question list
var regex;
if (selectorHTML.value == "" || selectorHTML.value == ALL_REGIONS) regex = new RegExp(".*");
else regex = new RegExp(selectorHTML.value, 'gi');
else regex = new RegExp(selectorHTML.value, "gi");
questionList = Object.keys(countries)
.filter(c => countries[c].region.match(regex) || countries[c].subregion.match(regex))
@ -104,10 +104,10 @@ function updateScreen(){
answers.style.display = "none";
return;
}
answerAHTML.getElementsByClassName('text')[0].innerHTML = state.options[0];
answerBHTML.getElementsByClassName('text')[0].innerHTML = state.options[1];
answerCHTML.getElementsByClassName('text')[0].innerHTML = state.options[2];
answerDHTML.getElementsByClassName('text')[0].innerHTML = state.options[3];
answerAHTML.getElementsByClassName("text")[0].innerHTML = state.options[0];
answerBHTML.getElementsByClassName("text")[0].innerHTML = state.options[1];
answerCHTML.getElementsByClassName("text")[0].innerHTML = state.options[2];
answerDHTML.getElementsByClassName("text")[0].innerHTML = state.options[3];
questionHTML.innerHTML = "what is the capital of <span id=\"questionCountry\">" + state.question + "</span>?";
}
@ -119,7 +119,7 @@ function processClick(answer) {
state.score += isAnswerCorrect ? 1 : 0;
// change background color based on if answer was correct
bodyHTML.classList.add(isAnswerCorrect ? 'correct' : 'incorrect')
bodyHTML.classList.add(isAnswerCorrect ? "correct" : "incorrect")
setTimeout(() => bodyHTML.classList = [], 500)
updateState();
@ -128,7 +128,7 @@ function processClick(answer) {
function setSelectorMatches(value){
const regex = new RegExp(selectorHTML.value, 'gi');
const regex = new RegExp(selectorHTML.value, "gi");
selectorMatches = regionList
.filter(region => region.match(regex))
displaySelectorMatches();
@ -138,10 +138,10 @@ function setSelectorMatches(value){
function displaySelectorMatches(){
selectorResultsHTML.innerHTML = selectorMatches
.map(region => {
return `<div class="selector_result" onclick="setSelectorValue('${region}');init()"> ${region} </div>`
return `<div class="selector_result" onclick="setSelectorValue('${region}'); init()"> ${region} </div>`
})
.sort()
.join('');
.join("");
}
@ -150,11 +150,11 @@ function setSelectorValue(value) {
}
answerAHTML.addEventListener('click', () => processClick(0));
answerBHTML.addEventListener('click', () => processClick(1));
answerCHTML.addEventListener('click', () => processClick(2));
answerDHTML.addEventListener('click', () => processClick(3));
document.addEventListener('keyup', e => {
answerAHTML.addEventListener("click", () => processClick(0));
answerBHTML.addEventListener("click", () => processClick(1));
answerCHTML.addEventListener("click", () => processClick(2));
answerDHTML.addEventListener("click", () => processClick(3));
document.addEventListener("keyup", e => {
if (e.code == "Digit1") processClick(0);
if (e.code == "Digit2") processClick(1);
if (e.code == "Digit3") processClick(2);
@ -166,9 +166,9 @@ document.addEventListener('keyup', e => {
if (e.code == "Enter" && !state.startedGame) init();
});
selectorHTML.addEventListener('change', setSelectorMatches);
selectorHTML.addEventListener('keyup', e => {
var topResult = document.getElementsByClassName('selector_result')[0]
selectorHTML.addEventListener("change", setSelectorMatches);
selectorHTML.addEventListener("keyup", e => {
var topResult = document.getElementsByClassName("selector_result")[0]
if (e.code == "Enter" && selectorHTML.value === "") { init(); return; }
if (e.code == "Enter" && selectorHTML.value === topResult.innerHTML.trim()) { init(); return; }
if (e.code == "Enter") selectorHTML.value = topResult.innerHTML.trim();