alvierahman90/capitals_quiz
1
0
Fork 0
mirror of https://github.com/alvierahman90/capitals_quiz.git synced 2024-11-23 17:59:55 +00:00
Code Issues Projects Releases Wiki Activity

minor changes to code

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

97
src/game.js
View File

@ -1,5 +1,7 @@
"use strict"; "use strict";
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');
@ -12,43 +14,34 @@ 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 ALL_REGIONS = "All Regions";
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])
.sort();
const date = new Date(); const date = new Date();
var question_list = null; var questionList, selectorMatches, state;
var selectorMatches = []
var state = {
"score": 0,
"max_score": 0,
"start_time": 0,
"end_time": 0,
"finishedGame": true,
};
// 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) { if (selectorHTML.value == "" || selectorHTML.value == ALL_REGIONS) regex = new RegExp(".*");
regex = new RegExp(".*"); else regex = new RegExp(selectorHTML.value, 'gi');
} else {
regex = new RegExp(selectorHTML.value, 'gi'); questionList = Object.keys(countries)
}
question_list = 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.end_time = 0; state.endTime = 0;
state.finishedGame = false; state.finishedGame = false;
state.maxScore = question_list.length; state.startedGame = true;
state.maxScore = questionList.length;
state.score = 0; state.score = 0;
state.start_time = date.getTime(); state.startTime = date.getTime();
// show and hide appropriate elements // show and hide appropriate elements
answersHTML.style.display = ""; answersHTML.style.display = "";
@ -60,24 +53,34 @@ function init() {
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";
questionHTML.onclick = init;
scoreHTML.innerHTML = "score"; scoreHTML.innerHTML = "score";
questionHTML.onclick = init;
questionList = null;
selectorMatches = []
state = {
"score": 0,
"maxScore": 0,
"startTime": 0,
"endTime": 0,
"finishedGame": true,
"startedGame": false,
};
} }
function updateState() { function updateState() {
// check if game is over // check if game is over
if (question_list.length == 0) { state.finishedGame = true; return; } if (questionList.length == 0) { state.finishedGame = true; return; }
// set up new question // set up new question
console.log(1); var newQuestion = questionList.pop();
var newQuestion = question_list.pop();
console.log(newQuestion);
console.log(2);
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)];
@ -85,15 +88,14 @@ function updateState() {
options.push(c); options.push(c);
} }
} }
console.log(options)
options[Math.floor(Math.random()*4)] = countries[newQuestion].capital; options[Math.floor(Math.random()*4)] = countries[newQuestion].capital;
console.log(options)
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;
@ -109,17 +111,17 @@ function updateScreen(){
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) {
console.log("got click: " + answer);
if (state.finishedGame) return; if (state.finishedGame) return;
console.log(1);
// check if answer to previous question was correct // check if answer to previous question was correct
state.score += 1 ? state.options[answer] == state.answer : 0; var isAnswerCorrect = state.options[answer] == state.answer
console.log(state.options[answer] == state.answer ? 'correct' : 'incorrect') state.score += isAnswerCorrect ? 1 : 0;
bodyHTML.classList.add(state.options[answer] == state.answer ? 'correct' : 'incorrect')
// change background color based on if answer was correct
bodyHTML.classList.add(isAnswerCorrect ? 'correct' : 'incorrect')
setTimeout(() => bodyHTML.classList = [], 500) setTimeout(() => bodyHTML.classList = [], 500)
console.log("got click: " + answer);
updateState(); updateState();
updateScreen(); updateScreen();
} }
@ -132,9 +134,9 @@ function setSelectorMatches(value){
displaySelectorMatches(); displaySelectorMatches();
} }
function displaySelectorMatches(){ function displaySelectorMatches(){
selectorResultsHTML.innerHTML = selectorMatches selectorResultsHTML.innerHTML = selectorMatches
.concat(ALL_REGIONS)
.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>`
}) })
@ -142,10 +144,12 @@ function displaySelectorMatches(){
.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));
@ -155,27 +159,24 @@ document.addEventListener('keyup', e => {
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" && document.activeElement !== selectorHTML) init(); 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('change', setSelectorMatches);
selectorHTML.addEventListener('keyup', e => { selectorHTML.addEventListener('keyup', e => {
console.log(e.code);
var topResult = document.getElementsByClassName('selector_result')[0] var topResult = document.getElementsByClassName('selector_result')[0]
if (e.code == "Enter" && selectorHTML.value === "") { if (e.code == "Enter" && selectorHTML.value === "") { init(); return; }
init(); if (e.code == "Enter" && selectorHTML.value === topResult.innerHTML.trim()) { init(); return; }
return; if (e.code == "Enter") selectorHTML.value = topResult.innerHTML.trim();
}
if (e.code == "Enter" && selectorHTML.value === topResult.innerHTML.trim()) {
init();
return;
}
if (e.code == "Enter")
selectorHTML.value = topResult.innerHTML.trim();
setSelectorMatches(); setSelectorMatches();
}); });
deinit(); deinit();
selectorHTML.focus(); selectorHTML.focus();
setSelectorMatches(); setSelectorMatches();