mirror of
https://github.com/alvierahman90/capitals_quiz.git
synced 2024-11-27 19:59:54 +00:00
286 lines
9.2 KiB
JavaScript
286 lines
9.2 KiB
JavaScript
"use strict";
|
|
|
|
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 incorrectAnswersTable = document.getElementById('incorrectAnswersTable');
|
|
const correctAnswersTable = document.getElementById('correctAnswersTable');
|
|
const previousQuestionAnswer = document.getElementById('previousQuestionAnswer');
|
|
const previousQuestionText = document.getElementById('previousQuestionText');
|
|
const resultsHTML = document.getElementById("results");
|
|
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 timeHTML = document.getElementById("time");
|
|
|
|
var gameTimeStartTime = 0;
|
|
var gameTimeIntervalId = 0;
|
|
|
|
function updateTime() {
|
|
const secondsPassed = ((new Date().getTime() - gameTimeStartTime.getTime())/1000)
|
|
.toFixed(3);
|
|
timeHTML.innerHTML = secondsPassed;
|
|
}
|
|
|
|
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();
|
|
const date = new Date();
|
|
|
|
var questionList, selectorMatches, state;
|
|
|
|
var resultsChart = new Chart(
|
|
document.getElementById('resultsChart'),
|
|
{
|
|
type: 'doughnut',
|
|
data: {
|
|
labels: [],
|
|
datasets: [
|
|
{
|
|
labels: [],
|
|
data: [],
|
|
backgroundColor: [
|
|
"#a1b56c",
|
|
"#ab4642",
|
|
]
|
|
|
|
}
|
|
]
|
|
},
|
|
options: {}
|
|
}
|
|
);
|
|
|
|
|
|
// 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");
|
|
|
|
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();
|
|
state.correctAnswers = [];
|
|
state.incorrectAnswers = [];
|
|
state.userAnswer = null;
|
|
|
|
// show and hide appropriate elements
|
|
answersHTML.style.display = "";
|
|
settingsHTML.style.display = "none";
|
|
questionHTML.onclick = deinit;
|
|
incorrectAnswersTable.innerHTML = "<tr> <th> country </th> <th> capital </th> <th> your answer </th> </tr>";
|
|
correctAnswersTable.innerHTML = "<tr> <th> country </th> <th> capital </th> </tr>";
|
|
|
|
// start game
|
|
updateState();
|
|
updateScreen();
|
|
gameTimeStartTime = new Date()
|
|
gameTimeIntervalId = setInterval(updateTime, 1);
|
|
}
|
|
|
|
|
|
// stop game, go back to start screen
|
|
function deinit() {
|
|
clearInterval(gameTimeIntervalId);
|
|
|
|
answersHTML.style.display = "none";
|
|
resultsHTML.style.display = "none";
|
|
settingsHTML.style.display = "";
|
|
questionHTML.innerHTML = "tap here or press enter to start";
|
|
scoreHTML.innerHTML = "score";
|
|
questionHTML.onclick = init;
|
|
timeHTML.innerHTML = "time";
|
|
|
|
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; }
|
|
|
|
// 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;
|
|
|
|
if (state.question) state.previousQuestion = {
|
|
"question": state.question,
|
|
"options": state.options,
|
|
"answer": state.answer
|
|
};
|
|
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) {
|
|
displayEndScreen();
|
|
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>?`;
|
|
if (state.previousQuestion ) {
|
|
previousQuestionAnswer.innerHTML = state.previousQuestion.answer;
|
|
previousQuestionText.style.display = "";
|
|
}
|
|
}
|
|
|
|
|
|
function displayEndScreen() {
|
|
questionHTML.innerHTML = "you did it! click here to restart";
|
|
answers.style.display = "none";
|
|
answers.style.display = "none";
|
|
|
|
clearInterval(gameTimeIntervalId);
|
|
|
|
state.incorrectAnswers.forEach(ans => {
|
|
var tr = document.createElement('tr');
|
|
tr.appendChild(document.createElement('td'))
|
|
tr.lastChild.innerHTML = ans.question
|
|
tr.appendChild(document.createElement('td'))
|
|
tr.lastChild.innerHTML = ans.answer
|
|
tr.appendChild(document.createElement('td'))
|
|
tr.lastChild.innerHTML = ans.options[ans.userAnswer]
|
|
incorrectAnswersTable.appendChild(tr);
|
|
})
|
|
if (state.incorrectAnswers.length <= 0)
|
|
incorrectAnswersTable.innerHTML = "no incorrect answers! go you!";
|
|
|
|
state.correctAnswers.forEach(ans => {
|
|
var tr = document.createElement('tr');
|
|
tr.appendChild(document.createElement('td'))
|
|
tr.lastChild.innerHTML = ans.question
|
|
tr.appendChild(document.createElement('td'))
|
|
tr.lastChild.innerHTML = ans.answer
|
|
correctAnswersTable.appendChild(tr);
|
|
})
|
|
if (state.correctAnswers.length <= 0)
|
|
correctAnswersTable.innerHTML = "no correct answers. better luck next time :')";
|
|
|
|
resultsChart.config.data.labels = ["correct", "incorrect"];
|
|
resultsChart.config.data.labels = ["correct", "incorrect"];
|
|
resultsChart.config.data.datasets[0].labels = ["correct", "incorrect"];
|
|
resultsChart.config.data.datasets[0].data = [state.correctAnswers.length,state.incorrectAnswers.length];
|
|
resultsChart.update();
|
|
resultsHTML.style.display = "";
|
|
}
|
|
|
|
|
|
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;
|
|
state.userAnswer = answer;
|
|
state[isAnswerCorrect ? "correctAnswers" : "incorrectAnswers"].push({
|
|
"question": state.question,
|
|
"options": state.options,
|
|
"userAnswer": state.userAnswer,
|
|
"answer": state.answer
|
|
});
|
|
state.userAnswer = null;
|
|
|
|
// change background color based on if answer was correct
|
|
bodyHTML.classList.add(isAnswerCorrect ? "correct" : "incorrect")
|
|
setTimeout(() => bodyHTML.classList = [], 500)
|
|
|
|
updateState();
|
|
updateScreen();
|
|
}
|
|
|
|
|
|
function setSelectorMatches(value){
|
|
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("");
|
|
}
|
|
|
|
|
|
function setSelectorValue(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();
|
|
});
|
|
|
|
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();
|
|
});
|
|
|
|
|
|
deinit();
|
|
selectorHTML.focus();
|
|
setSelectorMatches();
|