mirror of
https://github.com/alvierahman90/capitals_quiz.git
synced 2024-11-23 17:59:55 +00:00
minor changes to code
This commit is contained in:
parent
49c16263da
commit
1654b98ce4
97
src/game.js
97
src/game.js
@ -1,5 +1,7 @@
|
||||
"use strict";
|
||||
|
||||
const ALL_REGIONS = "All Regions";
|
||||
|
||||
const answersHTML = document.getElementById('answers');
|
||||
const answerAHTML = document.getElementById('answer_a');
|
||||
const answerBHTML = document.getElementById('answer_b');
|
||||
@ -12,43 +14,34 @@ const selectorHTML = document.getElementById('region_selector');
|
||||
const selectorResultsHTML = document.getElementById('selector_results');
|
||||
const questionHTML = document.getElementById('question');
|
||||
|
||||
const ALL_REGIONS = "All Regions";
|
||||
|
||||
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([...new Set(Object.values(countries).map(country => country.subregion))])
|
||||
.concat([ALL_REGIONS])
|
||||
.sort();
|
||||
const date = new Date();
|
||||
|
||||
var question_list = null;
|
||||
var selectorMatches = []
|
||||
var state = {
|
||||
"score": 0,
|
||||
"max_score": 0,
|
||||
"start_time": 0,
|
||||
"end_time": 0,
|
||||
"finishedGame": true,
|
||||
};
|
||||
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');
|
||||
}
|
||||
question_list = Object.keys(countries)
|
||||
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);
|
||||
|
||||
// set up state variable
|
||||
state.end_time = 0;
|
||||
state.endTime = 0;
|
||||
state.finishedGame = false;
|
||||
state.maxScore = question_list.length;
|
||||
state.startedGame = true;
|
||||
state.maxScore = questionList.length;
|
||||
state.score = 0;
|
||||
state.start_time = date.getTime();
|
||||
state.startTime = date.getTime();
|
||||
|
||||
// show and hide appropriate elements
|
||||
answersHTML.style.display = "";
|
||||
@ -60,24 +53,34 @@ function init() {
|
||||
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";
|
||||
questionHTML.onclick = init;
|
||||
scoreHTML.innerHTML = "score";
|
||||
questionHTML.onclick = init;
|
||||
|
||||
questionList = null;
|
||||
selectorMatches = []
|
||||
state = {
|
||||
"score": 0,
|
||||
"maxScore": 0,
|
||||
"startTime": 0,
|
||||
"endTime": 0,
|
||||
"finishedGame": true,
|
||||
"startedGame": false,
|
||||
};
|
||||
}
|
||||
|
||||
|
||||
function updateState() {
|
||||
// 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
|
||||
console.log(1);
|
||||
var newQuestion = question_list.pop();
|
||||
console.log(newQuestion);
|
||||
console.log(2);
|
||||
var newQuestion = questionList.pop();
|
||||
var options = []
|
||||
while (options.length < 4) {
|
||||
var c = capitals_list[Math.floor(Math.random()*capitals_list.length)];
|
||||
@ -85,15 +88,14 @@ function updateState() {
|
||||
options.push(c);
|
||||
}
|
||||
}
|
||||
console.log(options)
|
||||
options[Math.floor(Math.random()*4)] = countries[newQuestion].capital;
|
||||
console.log(options)
|
||||
|
||||
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;
|
||||
@ -109,17 +111,17 @@ function updateScreen(){
|
||||
questionHTML.innerHTML = "what is the capital of <span id=\"questionCountry\">" + state.question + "</span>?";
|
||||
}
|
||||
|
||||
|
||||
function processClick(answer) {
|
||||
console.log("got click: " + answer);
|
||||
if (state.finishedGame) return;
|
||||
console.log(1);
|
||||
// check if answer to previous question was correct
|
||||
state.score += 1 ? state.options[answer] == state.answer : 0;
|
||||
console.log(state.options[answer] == state.answer ? 'correct' : 'incorrect')
|
||||
bodyHTML.classList.add(state.options[answer] == state.answer ? 'correct' : 'incorrect')
|
||||
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)
|
||||
|
||||
console.log("got click: " + answer);
|
||||
updateState();
|
||||
updateScreen();
|
||||
}
|
||||
@ -132,9 +134,9 @@ function setSelectorMatches(value){
|
||||
displaySelectorMatches();
|
||||
}
|
||||
|
||||
|
||||
function displaySelectorMatches(){
|
||||
selectorResultsHTML.innerHTML = selectorMatches
|
||||
.concat(ALL_REGIONS)
|
||||
.map(region => {
|
||||
return `<div class="selector_result" onclick="setSelectorValue('${region}');init()"> ${region} </div>`
|
||||
})
|
||||
@ -142,10 +144,12 @@ function displaySelectorMatches(){
|
||||
.join('');
|
||||
}
|
||||
|
||||
|
||||
function setSelectorValue(value) {
|
||||
selectorHTML.value = value;
|
||||
}
|
||||
|
||||
|
||||
answerAHTML.addEventListener('click', () => processClick(0));
|
||||
answerBHTML.addEventListener('click', () => processClick(1));
|
||||
answerCHTML.addEventListener('click', () => processClick(2));
|
||||
@ -155,27 +159,24 @@ document.addEventListener('keyup', e => {
|
||||
if (e.code == "Digit2") processClick(1);
|
||||
if (e.code == "Digit3") processClick(2);
|
||||
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('keyup', e => {
|
||||
console.log(e.code);
|
||||
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();
|
||||
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();
|
||||
});
|
||||
|
||||
|
||||
deinit();
|
||||
selectorHTML.focus();
|
||||
setSelectorMatches();
|
||||
|
||||
Loading…
Reference in New Issue
Block a user