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