mirror of
https://github.com/alvierahman90/capitals_quiz.git
synced 2024-11-27 19:59:54 +00:00
use spaces instead of tabs, use double quotes instead of single
This commit is contained in:
parent
1654b98ce4
commit
a643fe3b75
234
src/game.js
234
src/game.js
@ -2,23 +2,23 @@
|
|||||||
|
|
||||||
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))]
|
||||||
.concat([...new Set(Object.values(countries).map(country => country.subregion))])
|
.concat([...new Set(Object.values(countries).map(country => country.subregion))])
|
||||||
.concat([ALL_REGIONS])
|
.concat([ALL_REGIONS])
|
||||||
.sort();
|
.sort();
|
||||||
const date = new Date();
|
const date = new Date();
|
||||||
|
|
||||||
var questionList, selectorMatches, state;
|
var questionList, selectorMatches, state;
|
||||||
@ -26,154 +26,154 @@ var questionList, selectorMatches, state;
|
|||||||
|
|
||||||
// set up game
|
// set up game
|
||||||
function init() {
|
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))
|
||||||
.sort(() => Math.random()-0.5);
|
.sort(() => Math.random()-0.5);
|
||||||
|
|
||||||
// set up state variable
|
// set up state variable
|
||||||
state.endTime = 0;
|
state.endTime = 0;
|
||||||
state.finishedGame = false;
|
state.finishedGame = false;
|
||||||
state.startedGame = true;
|
state.startedGame = true;
|
||||||
state.maxScore = questionList.length;
|
state.maxScore = questionList.length;
|
||||||
state.score = 0;
|
state.score = 0;
|
||||||
state.startTime = date.getTime();
|
state.startTime = date.getTime();
|
||||||
|
|
||||||
// show and hide appropriate elements
|
// show and hide appropriate elements
|
||||||
answersHTML.style.display = "";
|
answersHTML.style.display = "";
|
||||||
settingsHTML.style.display = "none";
|
settingsHTML.style.display = "none";
|
||||||
questionHTML.onclick = deinit;
|
questionHTML.onclick = deinit;
|
||||||
|
|
||||||
// start game
|
// start game
|
||||||
updateState();
|
updateState();
|
||||||
updateScreen();
|
updateScreen();
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
// stop game, go back to start screen
|
// stop game, go back to start screen
|
||||||
function deinit() {
|
function deinit() {
|
||||||
answersHTML.style.display = "none";
|
answersHTML.style.display = "none";
|
||||||
settingsHTML.style.display = "";
|
settingsHTML.style.display = "";
|
||||||
questionHTML.innerHTML = "tap here or press enter to start";
|
questionHTML.innerHTML = "tap here or press enter to start";
|
||||||
scoreHTML.innerHTML = "score";
|
scoreHTML.innerHTML = "score";
|
||||||
questionHTML.onclick = init;
|
questionHTML.onclick = init;
|
||||||
|
|
||||||
questionList = null;
|
questionList = null;
|
||||||
selectorMatches = []
|
selectorMatches = []
|
||||||
state = {
|
state = {
|
||||||
"score": 0,
|
"score": 0,
|
||||||
"maxScore": 0,
|
"maxScore": 0,
|
||||||
"startTime": 0,
|
"startTime": 0,
|
||||||
"endTime": 0,
|
"endTime": 0,
|
||||||
"finishedGame": true,
|
"finishedGame": true,
|
||||||
"startedGame": false,
|
"startedGame": false,
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
function updateState() {
|
function updateState() {
|
||||||
// check if game is over
|
// check if game is over
|
||||||
if (questionList.length == 0) { state.finishedGame = true; return; }
|
if (questionList.length == 0) { state.finishedGame = true; return; }
|
||||||
|
|
||||||
// set up new question
|
// set up new question
|
||||||
var newQuestion = questionList.pop();
|
var newQuestion = questionList.pop();
|
||||||
var options = []
|
var options = []
|
||||||
while (options.length < 4) {
|
while (options.length < 4) {
|
||||||
var c = capitals_list[Math.floor(Math.random()*capitals_list.length)];
|
var c = capitals_list[Math.floor(Math.random()*capitals_list.length)];
|
||||||
if (c !== countries[newQuestion].capital && !options.includes(c)){
|
if (c !== countries[newQuestion].capital && !options.includes(c)){
|
||||||
options.push(c);
|
options.push(c);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
options[Math.floor(Math.random()*4)] = countries[newQuestion].capital;
|
options[Math.floor(Math.random()*4)] = countries[newQuestion].capital;
|
||||||
|
|
||||||
state.question = newQuestion;
|
state.question = newQuestion;
|
||||||
state.options = options;
|
state.options = options;
|
||||||
state.answer = countries[newQuestion].capital;
|
state.answer = countries[newQuestion].capital;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
// update HTML elements to reflect values of state
|
// update HTML elements to reflect values of state
|
||||||
function updateScreen(){
|
function updateScreen(){
|
||||||
scoreHTML.innerHTML = state.score + "/" + state.maxScore;
|
scoreHTML.innerHTML = state.score + "/" + state.maxScore;
|
||||||
if (state.finishedGame) {
|
if (state.finishedGame) {
|
||||||
questionHTML.innerHTML = "woooooooo!! tap here or press enter to restart";
|
questionHTML.innerHTML = "woooooooo!! tap here or press enter to restart";
|
||||||
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>?";
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
function processClick(answer) {
|
function processClick(answer) {
|
||||||
if (state.finishedGame) return;
|
if (state.finishedGame) return;
|
||||||
// check if answer to previous question was correct
|
// check if answer to previous question was correct
|
||||||
var isAnswerCorrect = state.options[answer] == state.answer
|
var isAnswerCorrect = state.options[answer] == state.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();
|
||||||
updateScreen();
|
updateScreen();
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
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();
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
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("");
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
function setSelectorValue(value) {
|
function setSelectorValue(value) {
|
||||||
selectorHTML.value = value;
|
selectorHTML.value = 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);
|
||||||
if (e.code == "Digit4") processClick(3);
|
if (e.code == "Digit4") processClick(3);
|
||||||
if (e.code == "Enter" && settingsHTML.style.display === "none" && state.finishedGame) {
|
if (e.code == "Enter" && settingsHTML.style.display === "none" && state.finishedGame) {
|
||||||
deinit();
|
deinit();
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
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();
|
||||||
|
|
||||||
setSelectorMatches();
|
setSelectorMatches();
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user