mirror of
https://github.com/alvierahman90/capitals_quiz.git
synced 2025-10-31 07:10:07 +00:00
use spaces instead of tabs, use double quotes instead of single
This commit is contained in:
234
src/game.js
234
src/game.js
@@ -2,23 +2,23 @@
|
||||
|
||||
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))]
|
||||
.concat([...new Set(Object.values(countries).map(country => country.subregion))])
|
||||
.concat([ALL_REGIONS])
|
||||
.sort();
|
||||
.concat([...new Set(Object.values(countries).map(country => country.subregion))])
|
||||
.concat([ALL_REGIONS])
|
||||
.sort();
|
||||
const date = new Date();
|
||||
|
||||
var questionList, selectorMatches, state;
|
||||
@@ -26,154 +26,154 @@ var questionList, selectorMatches, state;
|
||||
|
||||
// set up game
|
||||
function init() {
|
||||
// generate question list
|
||||
var regex;
|
||||
if (selectorHTML.value == "" || selectorHTML.value == ALL_REGIONS) regex = new RegExp(".*");
|
||||
else regex = new RegExp(selectorHTML.value, 'gi');
|
||||
// generate question list
|
||||
var regex;
|
||||
if (selectorHTML.value == "" || selectorHTML.value == ALL_REGIONS) regex = new RegExp(".*");
|
||||
else regex = new RegExp(selectorHTML.value, "gi");
|
||||
|
||||
questionList = Object.keys(countries)
|
||||
.filter(c => countries[c].region.match(regex) || countries[c].subregion.match(regex))
|
||||
.sort(() => Math.random()-0.5);
|
||||
questionList = Object.keys(countries)
|
||||
.filter(c => countries[c].region.match(regex) || countries[c].subregion.match(regex))
|
||||
.sort(() => Math.random()-0.5);
|
||||
|
||||
// set up state variable
|
||||
state.endTime = 0;
|
||||
state.finishedGame = false;
|
||||
state.startedGame = true;
|
||||
state.maxScore = questionList.length;
|
||||
state.score = 0;
|
||||
state.startTime = date.getTime();
|
||||
// set up state variable
|
||||
state.endTime = 0;
|
||||
state.finishedGame = false;
|
||||
state.startedGame = true;
|
||||
state.maxScore = questionList.length;
|
||||
state.score = 0;
|
||||
state.startTime = date.getTime();
|
||||
|
||||
// show and hide appropriate elements
|
||||
answersHTML.style.display = "";
|
||||
settingsHTML.style.display = "none";
|
||||
questionHTML.onclick = deinit;
|
||||
// show and hide appropriate elements
|
||||
answersHTML.style.display = "";
|
||||
settingsHTML.style.display = "none";
|
||||
questionHTML.onclick = deinit;
|
||||
|
||||
// start game
|
||||
updateState();
|
||||
updateScreen();
|
||||
// start game
|
||||
updateState();
|
||||
updateScreen();
|
||||
}
|
||||
|
||||
|
||||
// stop game, go back to start screen
|
||||
function deinit() {
|
||||
answersHTML.style.display = "none";
|
||||
settingsHTML.style.display = "";
|
||||
questionHTML.innerHTML = "tap here or press enter to start";
|
||||
scoreHTML.innerHTML = "score";
|
||||
questionHTML.onclick = init;
|
||||
answersHTML.style.display = "none";
|
||||
settingsHTML.style.display = "";
|
||||
questionHTML.innerHTML = "tap here or press enter to start";
|
||||
scoreHTML.innerHTML = "score";
|
||||
questionHTML.onclick = init;
|
||||
|
||||
questionList = null;
|
||||
selectorMatches = []
|
||||
state = {
|
||||
"score": 0,
|
||||
"maxScore": 0,
|
||||
"startTime": 0,
|
||||
"endTime": 0,
|
||||
"finishedGame": true,
|
||||
"startedGame": false,
|
||||
};
|
||||
questionList = null;
|
||||
selectorMatches = []
|
||||
state = {
|
||||
"score": 0,
|
||||
"maxScore": 0,
|
||||
"startTime": 0,
|
||||
"endTime": 0,
|
||||
"finishedGame": true,
|
||||
"startedGame": false,
|
||||
};
|
||||
}
|
||||
|
||||
|
||||
function updateState() {
|
||||
// check if game is over
|
||||
if (questionList.length == 0) { state.finishedGame = true; return; }
|
||||
// check if game is over
|
||||
if (questionList.length == 0) { state.finishedGame = true; return; }
|
||||
|
||||
// set up new question
|
||||
var newQuestion = questionList.pop();
|
||||
var options = []
|
||||
while (options.length < 4) {
|
||||
var c = capitals_list[Math.floor(Math.random()*capitals_list.length)];
|
||||
if (c !== countries[newQuestion].capital && !options.includes(c)){
|
||||
options.push(c);
|
||||
}
|
||||
}
|
||||
options[Math.floor(Math.random()*4)] = countries[newQuestion].capital;
|
||||
// set up new question
|
||||
var newQuestion = questionList.pop();
|
||||
var options = []
|
||||
while (options.length < 4) {
|
||||
var c = capitals_list[Math.floor(Math.random()*capitals_list.length)];
|
||||
if (c !== countries[newQuestion].capital && !options.includes(c)){
|
||||
options.push(c);
|
||||
}
|
||||
}
|
||||
options[Math.floor(Math.random()*4)] = countries[newQuestion].capital;
|
||||
|
||||
state.question = newQuestion;
|
||||
state.options = options;
|
||||
state.answer = countries[newQuestion].capital;
|
||||
state.question = newQuestion;
|
||||
state.options = options;
|
||||
state.answer = countries[newQuestion].capital;
|
||||
}
|
||||
|
||||
|
||||
// update HTML elements to reflect values of state
|
||||
function updateScreen(){
|
||||
scoreHTML.innerHTML = state.score + "/" + state.maxScore;
|
||||
if (state.finishedGame) {
|
||||
questionHTML.innerHTML = "woooooooo!! tap here or press enter to restart";
|
||||
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];
|
||||
questionHTML.innerHTML = "what is the capital of <span id=\"questionCountry\">" + state.question + "</span>?";
|
||||
scoreHTML.innerHTML = state.score + "/" + state.maxScore;
|
||||
if (state.finishedGame) {
|
||||
questionHTML.innerHTML = "woooooooo!! tap here or press enter to restart";
|
||||
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];
|
||||
questionHTML.innerHTML = "what is the capital of <span id=\"questionCountry\">" + state.question + "</span>?";
|
||||
}
|
||||
|
||||
|
||||
function processClick(answer) {
|
||||
if (state.finishedGame) return;
|
||||
// check if answer to previous question was correct
|
||||
var isAnswerCorrect = state.options[answer] == state.answer
|
||||
state.score += isAnswerCorrect ? 1 : 0;
|
||||
if (state.finishedGame) return;
|
||||
// check if answer to previous question was correct
|
||||
var isAnswerCorrect = state.options[answer] == state.answer
|
||||
state.score += isAnswerCorrect ? 1 : 0;
|
||||
|
||||
// change background color based on if answer was correct
|
||||
bodyHTML.classList.add(isAnswerCorrect ? 'correct' : 'incorrect')
|
||||
setTimeout(() => bodyHTML.classList = [], 500)
|
||||
// change background color based on if answer was correct
|
||||
bodyHTML.classList.add(isAnswerCorrect ? "correct" : "incorrect")
|
||||
setTimeout(() => bodyHTML.classList = [], 500)
|
||||
|
||||
updateState();
|
||||
updateScreen();
|
||||
updateState();
|
||||
updateScreen();
|
||||
}
|
||||
|
||||
|
||||
function setSelectorMatches(value){
|
||||
const regex = new RegExp(selectorHTML.value, 'gi');
|
||||
selectorMatches = regionList
|
||||
.filter(region => region.match(regex))
|
||||
displaySelectorMatches();
|
||||
const regex = new RegExp(selectorHTML.value, "gi");
|
||||
selectorMatches = regionList
|
||||
.filter(region => region.match(regex))
|
||||
displaySelectorMatches();
|
||||
}
|
||||
|
||||
|
||||
function displaySelectorMatches(){
|
||||
selectorResultsHTML.innerHTML = selectorMatches
|
||||
.map(region => {
|
||||
return `<div class="selector_result" onclick="setSelectorValue('${region}');init()"> ${region} </div>`
|
||||
})
|
||||
.sort()
|
||||
.join('');
|
||||
selectorResultsHTML.innerHTML = selectorMatches
|
||||
.map(region => {
|
||||
return `<div class="selector_result" onclick="setSelectorValue('${region}'); init()"> ${region} </div>`
|
||||
})
|
||||
.sort()
|
||||
.join("");
|
||||
}
|
||||
|
||||
|
||||
function setSelectorValue(value) {
|
||||
selectorHTML.value = value;
|
||||
selectorHTML.value = 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 => {
|
||||
if (e.code == "Digit1") processClick(0);
|
||||
if (e.code == "Digit2") processClick(1);
|
||||
if (e.code == "Digit3") processClick(2);
|
||||
if (e.code == "Digit4") processClick(3);
|
||||
if (e.code == "Enter" && settingsHTML.style.display === "none" && state.finishedGame) {
|
||||
deinit();
|
||||
return;
|
||||
}
|
||||
if (e.code == "Enter" && !state.startedGame) init();
|
||||
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);
|
||||
if (e.code == "Digit4") processClick(3);
|
||||
if (e.code == "Enter" && settingsHTML.style.display === "none" && state.finishedGame) {
|
||||
deinit();
|
||||
return;
|
||||
}
|
||||
if (e.code == "Enter" && !state.startedGame) init();
|
||||
});
|
||||
|
||||
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();
|
||||
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();
|
||||
|
||||
setSelectorMatches();
|
||||
setSelectorMatches();
|
||||
});
|
||||
|
||||
|
||||
|
||||
Reference in New Issue
Block a user