mirror of
https://github.com/alvierahman90/capitals_quiz.git
synced 2024-11-23 17:59:55 +00:00
prettier -w
This commit is contained in:
parent
780f6d7272
commit
8b2695f241
GPG Key ID:
20609519444A1269
478
game.js
478
game.js
@ -8,11 +8,13 @@ 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 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 regionListHTML = document.getElementById("regionList");
|
||||
const resultsHTML = document.getElementById("results");
|
||||
const scoreHTML = document.getElementById("score");
|
||||
@ -24,302 +26,327 @@ var gameTimeStartTime = 0;
|
||||
var gameTimeIntervalId = 0;
|
||||
var selectedRegion = null;
|
||||
|
||||
const guessCapital = () => document.getElementById('questionTypeCapital').checked;
|
||||
const guessCountry = () => document.getElementById('questionTypeCountry').checked;
|
||||
const guessFlag = () => document.getElementById('questionTypeFlag').checked;
|
||||
const guessReverseFlag = () => document.getElementById('questionTypeReverseFlag').checked;
|
||||
const guessCapital = () =>
|
||||
document.getElementById("questionTypeCapital").checked;
|
||||
const guessCountry = () =>
|
||||
document.getElementById("questionTypeCountry").checked;
|
||||
const guessFlag = () => document.getElementById("questionTypeFlag").checked;
|
||||
const guessReverseFlag = () =>
|
||||
document.getElementById("questionTypeReverseFlag").checked;
|
||||
|
||||
const updateTime = () => {
|
||||
const secondsPassed = ((new Date().getTime() - gameTimeStartTime.getTime())/1000)
|
||||
.toFixed(3);
|
||||
timeHTML.innerHTML = secondsPassed;
|
||||
}
|
||||
const secondsPassed = (
|
||||
(new Date().getTime() - gameTimeStartTime.getTime()) /
|
||||
1000
|
||||
).toFixed(3);
|
||||
timeHTML.innerHTML = secondsPassed;
|
||||
};
|
||||
|
||||
const getMasterQuestionList = () => {
|
||||
return countries;
|
||||
}
|
||||
};
|
||||
|
||||
const getQuestionByCountryName = (name) => {
|
||||
c = getMasterQuestionList().filter(c => c.countryname === name)
|
||||
if (c.length > 0) return c[0]
|
||||
return null
|
||||
}
|
||||
c = getMasterQuestionList().filter((c) => c.countryname === name);
|
||||
if (c.length > 0) return c[0];
|
||||
return null;
|
||||
};
|
||||
|
||||
const getQuestionByCapital = (capital) => {
|
||||
c = getMasterQuestionList().filter(c => c.capital === capital)
|
||||
if (c.length > 0) return c[0]
|
||||
return null
|
||||
}
|
||||
c = getMasterQuestionList().filter((c) => c.capital === capital);
|
||||
if (c.length > 0) return c[0];
|
||||
return null;
|
||||
};
|
||||
|
||||
const optionToAnswer = (option) => {
|
||||
if (guessCapital()) return option.capital;
|
||||
else if (guessCountry()) return option.countryname;
|
||||
else if (guessReverseFlag()) return option.countryname;
|
||||
else return option.code;
|
||||
}
|
||||
};
|
||||
|
||||
const optionToAnswerFormatted = (option) => {
|
||||
const r = optionToAnswer(option);
|
||||
if (guessFlag()) return getImageURLFromCountryCode(r);
|
||||
return r
|
||||
}
|
||||
return r;
|
||||
};
|
||||
|
||||
const optionToQuestion = (option) => {
|
||||
if (guessCapital()) return option.countryname;
|
||||
else if (guessCountry()) return option.capital;
|
||||
else if (guessReverseFlag()) return option.code;
|
||||
else return option.countryname;
|
||||
}
|
||||
};
|
||||
|
||||
const optionToQuestionFormatted = (option) => {
|
||||
const r = optionToQuestion(option);
|
||||
if (guessReverseFlag()) return getImageURLFromCountryCode(r);
|
||||
return r
|
||||
}
|
||||
return r;
|
||||
};
|
||||
|
||||
const getQuestionHTML = (state) => {
|
||||
if(guessCountry())
|
||||
return `what country is <span id="questionCapital">${state.question.capital}</span> the capital of?`
|
||||
if (guessCountry())
|
||||
return `what country is <span id="questionCapital">${state.question.capital}</span> the capital of?`;
|
||||
if (guessCapital())
|
||||
return `what is the capital of <span id="questionCountry">${state.question.countryname}</span>?`
|
||||
if(guessFlag())
|
||||
return `what is the flag of <span id="questionCountry">${state.question.countryname}</span>?`
|
||||
if(guessReverseFlag())
|
||||
return `which country's flag is ${getImageURLFromCountryCode(state.question.code)}?`
|
||||
}
|
||||
return `what is the capital of <span id="questionCountry">${state.question.countryname}</span>?`;
|
||||
if (guessFlag())
|
||||
return `what is the flag of <span id="questionCountry">${state.question.countryname}</span>?`;
|
||||
if (guessReverseFlag())
|
||||
return `which country's flag is ${getImageURLFromCountryCode(
|
||||
state.question.code
|
||||
)}?`;
|
||||
};
|
||||
|
||||
const answerList = () => {
|
||||
return getMasterQuestionList().map(q => {
|
||||
return getMasterQuestionList().map((q) => {
|
||||
if (guessCountry()) return q.countryname;
|
||||
if (guessCapital()) return q.capital;
|
||||
if (guessFlag()) return q.code;
|
||||
if (guessReverseFlag()) return q.countryname;
|
||||
})
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
const getImageURLFromCountryCode = (code) =>
|
||||
`<img src="${FLAG_DIR}/${code}.svg" />`;
|
||||
|
||||
const getImageURLFromCountryCode = (code) => `<img src="${FLAG_DIR}/${code}.svg" />`;
|
||||
|
||||
const regionList = () => [...new Set(getMasterQuestionList().map(item => item.region))]
|
||||
.concat([...new Set(getMasterQuestionList().map(item => item.subregion))])
|
||||
const regionList = () =>
|
||||
[...new Set(getMasterQuestionList().map((item) => item.region))]
|
||||
.concat([...new Set(getMasterQuestionList().map((item) => item.subregion))])
|
||||
.concat([ALL_REGIONS])
|
||||
.sort();
|
||||
const date = new Date();
|
||||
|
||||
var questionList, state;
|
||||
|
||||
var resultsChart = new Chart(
|
||||
document.getElementById('resultsChart'),
|
||||
{
|
||||
type: 'doughnut',
|
||||
data: {
|
||||
labels: [],
|
||||
datasets: [
|
||||
{
|
||||
labels: [],
|
||||
data: [],
|
||||
backgroundColor: [
|
||||
"#a1b56c",
|
||||
"#ab4642",
|
||||
]
|
||||
|
||||
}
|
||||
]
|
||||
},
|
||||
options: {}
|
||||
}
|
||||
);
|
||||
|
||||
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
|
||||
questionList = getMasterQuestionList()
|
||||
.filter(q => q.region == selectedRegion || q.subregion == selectedRegion || selectedRegion == ALL_REGIONS)
|
||||
.sort(() => Math.random()-0.5);
|
||||
// generate question list
|
||||
questionList = getMasterQuestionList()
|
||||
.filter(
|
||||
(q) =>
|
||||
q.region == selectedRegion ||
|
||||
q.subregion == selectedRegion ||
|
||||
selectedRegion == ALL_REGIONS
|
||||
)
|
||||
.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;
|
||||
// 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> question </th> <th> answer </th> <th> your answer </th> </tr>";
|
||||
correctAnswersTable.innerHTML = "<tr> <th> country </th> <th> capital </th> </tr>";
|
||||
// show and hide appropriate elements
|
||||
answersHTML.style.display = "";
|
||||
settingsHTML.style.display = "none";
|
||||
questionHTML.onclick = deinit;
|
||||
incorrectAnswersTable.innerHTML =
|
||||
"<tr> <th> question </th> <th> answer </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);
|
||||
// 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 = "capitals_quiz - select a region to start!";
|
||||
scoreHTML.innerHTML = "score";
|
||||
questionHTML.onclick = init;
|
||||
timeHTML.innerHTML = "time";
|
||||
clearInterval(gameTimeIntervalId);
|
||||
|
||||
questionList = null;
|
||||
state = {
|
||||
"score": 0,
|
||||
"maxScore": 0,
|
||||
"startTime": 0,
|
||||
"endTime": 0,
|
||||
"finishedGame": true,
|
||||
"startedGame": false,
|
||||
};
|
||||
answersHTML.style.display = "none";
|
||||
resultsHTML.style.display = "none";
|
||||
settingsHTML.style.display = "";
|
||||
questionHTML.innerHTML = "capitals_quiz - select a region to start!";
|
||||
scoreHTML.innerHTML = "score";
|
||||
questionHTML.onclick = init;
|
||||
timeHTML.innerHTML = "time";
|
||||
|
||||
questionList = null;
|
||||
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
|
||||
const newQuestion = questionList.pop();
|
||||
console.log(newQuestion);
|
||||
// set up new question
|
||||
const newQuestion = questionList.pop();
|
||||
console.log(newQuestion);
|
||||
|
||||
var options = []
|
||||
while (options.length < 4) {
|
||||
var c = getMasterQuestionList()[Math.floor(Math.random()*answerList().length)];
|
||||
var question = getQuestionByCountryName(newQuestion.countryname);
|
||||
if (question == undefined) question = getQuestionByCapital(newQuestion.capital);
|
||||
console.log(c);
|
||||
console.log(question);
|
||||
if (c !== getQuestionByCountryName(newQuestion.countryname)&& !options.includes(c)){
|
||||
options.push(c);
|
||||
}
|
||||
}
|
||||
var options = [];
|
||||
while (options.length < 4) {
|
||||
var c =
|
||||
getMasterQuestionList()[Math.floor(Math.random() * answerList().length)];
|
||||
var question = getQuestionByCountryName(newQuestion.countryname);
|
||||
if (question == undefined) question = getQuestionByCapital(newQuestion.capital);
|
||||
options[Math.floor(Math.random()*4)] = question;
|
||||
if (question == undefined)
|
||||
question = getQuestionByCapital(newQuestion.capital);
|
||||
console.log(c);
|
||||
console.log(question);
|
||||
if (
|
||||
c !== getQuestionByCountryName(newQuestion.countryname) &&
|
||||
!options.includes(c)
|
||||
) {
|
||||
options.push(c);
|
||||
}
|
||||
}
|
||||
var question = getQuestionByCountryName(newQuestion.countryname);
|
||||
if (question == undefined)
|
||||
question = getQuestionByCapital(newQuestion.capital);
|
||||
options[Math.floor(Math.random() * 4)] = question;
|
||||
|
||||
if (state.question) state.previousQuestion = {
|
||||
"question": state.question,
|
||||
"options": state.options,
|
||||
"answer": state.answer
|
||||
if (state.question)
|
||||
state.previousQuestion = {
|
||||
question: state.question,
|
||||
options: state.options,
|
||||
answer: state.answer,
|
||||
};
|
||||
|
||||
state.question = newQuestion;
|
||||
state.options = options;
|
||||
state.answer = question;
|
||||
console.log(state);
|
||||
state.question = newQuestion;
|
||||
state.options = options;
|
||||
state.answer = question;
|
||||
console.log(state);
|
||||
}
|
||||
|
||||
|
||||
// update HTML elements to reflect values of state
|
||||
function updateScreen(){
|
||||
scoreHTML.innerHTML = state.score + "/" + state.maxScore;
|
||||
if (state.finishedGame) {
|
||||
displayEndScreen();
|
||||
return;
|
||||
}
|
||||
function updateScreen() {
|
||||
scoreHTML.innerHTML = state.score + "/" + state.maxScore;
|
||||
if (state.finishedGame) {
|
||||
displayEndScreen();
|
||||
return;
|
||||
}
|
||||
|
||||
answerAHTML.getElementsByClassName("text")[0].innerHTML = optionToAnswerFormatted(state.options[0]);
|
||||
answerBHTML.getElementsByClassName("text")[0].innerHTML = optionToAnswerFormatted(state.options[1]);
|
||||
answerCHTML.getElementsByClassName("text")[0].innerHTML = optionToAnswerFormatted(state.options[2]);
|
||||
answerDHTML.getElementsByClassName("text")[0].innerHTML = optionToAnswerFormatted(state.options[3]);
|
||||
answerAHTML.getElementsByClassName("text")[0].innerHTML =
|
||||
optionToAnswerFormatted(state.options[0]);
|
||||
answerBHTML.getElementsByClassName("text")[0].innerHTML =
|
||||
optionToAnswerFormatted(state.options[1]);
|
||||
answerCHTML.getElementsByClassName("text")[0].innerHTML =
|
||||
optionToAnswerFormatted(state.options[2]);
|
||||
answerDHTML.getElementsByClassName("text")[0].innerHTML =
|
||||
optionToAnswerFormatted(state.options[3]);
|
||||
|
||||
questionHTML.innerHTML = getQuestionHTML(state)
|
||||
if (state.previousQuestion ) {
|
||||
previousQuestionAnswer.innerHTML = optionToAnswerFormatted(state.previousQuestion.question);
|
||||
previousQuestionText.style.display = "";
|
||||
}
|
||||
questionHTML.innerHTML = getQuestionHTML(state);
|
||||
if (state.previousQuestion) {
|
||||
previousQuestionAnswer.innerHTML = optionToAnswerFormatted(
|
||||
state.previousQuestion.question
|
||||
);
|
||||
previousQuestionText.style.display = "";
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
function displayEndScreen() {
|
||||
questionHTML.innerHTML = "you did it! click here to restart";
|
||||
answers.style.display = "none";
|
||||
answers.style.display = "none";
|
||||
|
||||
clearInterval(gameTimeIntervalId);
|
||||
questionHTML.innerHTML = "you did it! click here to restart";
|
||||
answers.style.display = "none";
|
||||
answers.style.display = "none";
|
||||
|
||||
if (guessReverseFlag() || guessFlag()) {
|
||||
incorrectAnswersTable.innerHTML = "<tr> <th> country </th> <th> answer </th> <th> your answer </th> </tr>";
|
||||
correctAnswersTable.innerHTML = "<tr> <th> flag </th> <th> country </th> </tr>";
|
||||
}
|
||||
clearInterval(gameTimeIntervalId);
|
||||
|
||||
state.incorrectAnswers.forEach(ans => {
|
||||
var tr = document.createElement('tr');
|
||||
console.log(ans)
|
||||
if (guessReverseFlag() || guessFlag()) {
|
||||
incorrectAnswersTable.innerHTML =
|
||||
"<tr> <th> country </th> <th> answer </th> <th> your answer </th> </tr>";
|
||||
correctAnswersTable.innerHTML =
|
||||
"<tr> <th> flag </th> <th> country </th> </tr>";
|
||||
}
|
||||
|
||||
tr.appendChild(document.createElement('td'))
|
||||
tr.lastChild.innerHTML = optionToQuestionFormatted(ans.question)
|
||||
state.incorrectAnswers.forEach((ans) => {
|
||||
var tr = document.createElement("tr");
|
||||
console.log(ans);
|
||||
|
||||
tr.appendChild(document.createElement('td'))
|
||||
tr.lastChild.innerHTML = optionToAnswerFormatted(ans.answer);
|
||||
tr.appendChild(document.createElement("td"));
|
||||
tr.lastChild.innerHTML = optionToQuestionFormatted(ans.question);
|
||||
|
||||
tr.appendChild(document.createElement('td'))
|
||||
tr.lastChild.innerHTML = optionToAnswerFormatted(ans.options[ans.userAnswer]);
|
||||
tr.appendChild(document.createElement("td"));
|
||||
tr.lastChild.innerHTML = optionToAnswerFormatted(ans.answer);
|
||||
|
||||
incorrectAnswersTable.appendChild(tr);
|
||||
})
|
||||
if (state.incorrectAnswers.length <= 0)
|
||||
incorrectAnswersTable.innerHTML = "no incorrect answers! go you!";
|
||||
tr.appendChild(document.createElement("td"));
|
||||
tr.lastChild.innerHTML = optionToAnswerFormatted(
|
||||
ans.options[ans.userAnswer]
|
||||
);
|
||||
|
||||
state.correctAnswers.forEach(ans => {
|
||||
var tr = document.createElement('tr');
|
||||
tr.appendChild(document.createElement('td'))
|
||||
tr.lastChild.innerHTML = optionToQuestionFormatted(ans.question);
|
||||
tr.appendChild(document.createElement('td'))
|
||||
tr.lastChild.innerHTML = optionToAnswerFormatted(ans.answer);
|
||||
correctAnswersTable.appendChild(tr);
|
||||
})
|
||||
if (state.correctAnswers.length <= 0)
|
||||
correctAnswersTable.innerHTML = "no correct answers. better luck next time :')";
|
||||
incorrectAnswersTable.appendChild(tr);
|
||||
});
|
||||
if (state.incorrectAnswers.length <= 0)
|
||||
incorrectAnswersTable.innerHTML = "no incorrect answers! go you!";
|
||||
|
||||
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 = "";
|
||||
state.correctAnswers.forEach((ans) => {
|
||||
var tr = document.createElement("tr");
|
||||
tr.appendChild(document.createElement("td"));
|
||||
tr.lastChild.innerHTML = optionToQuestionFormatted(ans.question);
|
||||
tr.appendChild(document.createElement("td"));
|
||||
tr.lastChild.innerHTML = optionToAnswerFormatted(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;
|
||||
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 for 500ms
|
||||
bodyHTML.classList.add(isAnswerCorrect ? "correct" : "incorrect")
|
||||
setTimeout(() => bodyHTML.classList = [], 500)
|
||||
// change background color based on if answer was correct for 500ms
|
||||
bodyHTML.classList.add(isAnswerCorrect ? "correct" : "incorrect");
|
||||
setTimeout(() => (bodyHTML.classList = []), 500);
|
||||
|
||||
updateState();
|
||||
updateScreen();
|
||||
updateState();
|
||||
updateScreen();
|
||||
}
|
||||
|
||||
|
||||
function setRegion(region) {
|
||||
selectedRegion = region
|
||||
selectedRegion = region;
|
||||
}
|
||||
|
||||
// set up event listeners
|
||||
@ -328,22 +355,29 @@ 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();
|
||||
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();
|
||||
});
|
||||
|
||||
// start game
|
||||
|
||||
deinit();
|
||||
regionListHTML.innerHTML = regionList()
|
||||
.map(region => `<div class="regionListItem" onclick="setRegion('${region}'); init()"> ${region} </div>`)
|
||||
.map(
|
||||
(region) =>
|
||||
`<div class="regionListItem" onclick="setRegion('${region}'); init()"> ${region} </div>`
|
||||
)
|
||||
.sort()
|
||||
.join("");
|
||||
|
||||
183
game_styles.css
183
game_styles.css
@ -1,147 +1,161 @@
|
||||
:root {
|
||||
--a-color: var(--red);
|
||||
--b-color: var(--yellow);
|
||||
--c-color: var(--green);
|
||||
--d-color: var(--blue);
|
||||
--question-country-color: var(--teal);
|
||||
--question-capital-color: var(--blue);
|
||||
--a-color: var(--red);
|
||||
--b-color: var(--yellow);
|
||||
--c-color: var(--green);
|
||||
--d-color: var(--blue);
|
||||
--question-country-color: var(--teal);
|
||||
--question-capital-color: var(--blue);
|
||||
}
|
||||
|
||||
input {
|
||||
font-family: inherit
|
||||
font-family: inherit;
|
||||
}
|
||||
|
||||
.correct {
|
||||
animation: correct .5s;
|
||||
animation: correct 0.5s;
|
||||
}
|
||||
|
||||
.incorrect {
|
||||
animation: incorrect .5s;
|
||||
animation: incorrect 0.5s;
|
||||
}
|
||||
|
||||
@keyframes correct {
|
||||
0% { background: var(--default-bg); }
|
||||
50% { background: var(--green); }
|
||||
100% { background: var(--default-bg); }
|
||||
0% {
|
||||
background: var(--default-bg);
|
||||
}
|
||||
50% {
|
||||
background: var(--green);
|
||||
}
|
||||
100% {
|
||||
background: var(--default-bg);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes incorrect {
|
||||
0% { background: var(--default-bg); }
|
||||
50% { background: var(--red); }
|
||||
100% { background: var(--default-bg); }
|
||||
0% {
|
||||
background: var(--default-bg);
|
||||
}
|
||||
50% {
|
||||
background: var(--red);
|
||||
}
|
||||
100% {
|
||||
background: var(--default-bg);
|
||||
}
|
||||
}
|
||||
|
||||
#toprow {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 600px) {
|
||||
#toprow {
|
||||
flex-direction: column-reverse;
|
||||
}
|
||||
#toprow {
|
||||
flex-direction: column-reverse;
|
||||
}
|
||||
}
|
||||
|
||||
#question {
|
||||
font-size: 1.5em;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: 1.5em;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
#question img {
|
||||
max-height: 10vh;
|
||||
max-height: 10vh;
|
||||
}
|
||||
|
||||
#question * {
|
||||
margin: 1em;
|
||||
margin: 1em;
|
||||
}
|
||||
|
||||
#score {
|
||||
--good: var(--green);
|
||||
--okay: var(--yellow);
|
||||
--bad: var(--red);
|
||||
background: var(--good);
|
||||
--good: var(--green);
|
||||
--okay: var(--yellow);
|
||||
--bad: var(--red);
|
||||
background: var(--good);
|
||||
}
|
||||
|
||||
#time {
|
||||
background: var(--blue);
|
||||
background: var(--blue);
|
||||
}
|
||||
|
||||
#gameinfo {
|
||||
display: flex;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
#gameinfo * {
|
||||
margin: 0 0.5em 0 0.5em;
|
||||
margin: 0 0.5em 0 0.5em;
|
||||
}
|
||||
|
||||
#previousQuestionAnswer { background: var(--green) }
|
||||
#previousQuestionAnswer {
|
||||
background: var(--green);
|
||||
}
|
||||
|
||||
#game .answer {
|
||||
display: flex;
|
||||
justify-content: space-evenly;
|
||||
align-items: center;
|
||||
align-content: center;
|
||||
display: flex;
|
||||
justify-content: space-evenly;
|
||||
align-items: center;
|
||||
align-content: center;
|
||||
}
|
||||
|
||||
#game .answer .text {
|
||||
width: 50%;
|
||||
width: 50%;
|
||||
}
|
||||
|
||||
#game .answer .letter {
|
||||
font-size: 1.5em;
|
||||
padding: 1em;
|
||||
border: 0;
|
||||
border-radius: 0.25em;
|
||||
font-size: 1.5em;
|
||||
padding: 1em;
|
||||
border: 0;
|
||||
border-radius: 0.25em;
|
||||
}
|
||||
|
||||
#a {
|
||||
background-color: var(--a-color);
|
||||
border-color: var(--a-color);
|
||||
background-color: var(--a-color);
|
||||
border-color: var(--a-color);
|
||||
}
|
||||
|
||||
#b {
|
||||
background-color: var(--b-color);
|
||||
border-color: var(--b-color);
|
||||
background-color: var(--b-color);
|
||||
border-color: var(--b-color);
|
||||
}
|
||||
|
||||
#c {
|
||||
background-color: var(--c-color);
|
||||
border-color: var(--c-color);
|
||||
background-color: var(--c-color);
|
||||
border-color: var(--c-color);
|
||||
}
|
||||
|
||||
#d {
|
||||
background-color: var(--d-color);
|
||||
border-color: var(--d-color);
|
||||
background-color: var(--d-color);
|
||||
border-color: var(--d-color);
|
||||
}
|
||||
|
||||
span#questionCountry {
|
||||
background-color: var(--question-country-color);
|
||||
background-color: var(--question-country-color);
|
||||
}
|
||||
|
||||
span#questionCapital {
|
||||
background-color: var(--question-capital-color);
|
||||
background-color: var(--question-capital-color);
|
||||
}
|
||||
|
||||
#settings {
|
||||
width: 100%
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
#regionList {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
#settings .regionListItem {
|
||||
padding: 1em;
|
||||
transition: 0.5s;
|
||||
padding: 1em;
|
||||
transition: 0.5s;
|
||||
}
|
||||
|
||||
#settings .regionListItem:hover {
|
||||
background: #d9d9d9;
|
||||
color: black;
|
||||
background: #d9d9d9;
|
||||
color: black;
|
||||
}
|
||||
|
||||
/* toggle switches */
|
||||
@ -153,7 +167,7 @@ span#questionCapital {
|
||||
height: 34px;
|
||||
}
|
||||
|
||||
.switch input {
|
||||
.switch input {
|
||||
opacity: 0;
|
||||
width: 0;
|
||||
height: 0;
|
||||
@ -167,8 +181,8 @@ span#questionCapital {
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background-color: var(--question-country-color);
|
||||
-webkit-transition: .4s;
|
||||
transition: .4s;
|
||||
-webkit-transition: 0.4s;
|
||||
transition: 0.4s;
|
||||
}
|
||||
|
||||
.slider:before {
|
||||
@ -179,8 +193,8 @@ span#questionCapital {
|
||||
left: 4px;
|
||||
bottom: 4px;
|
||||
background-color: white;
|
||||
-webkit-transition: .4s;
|
||||
transition: .4s;
|
||||
-webkit-transition: 0.4s;
|
||||
transition: 0.4s;
|
||||
}
|
||||
|
||||
input:checked + .slider {
|
||||
@ -207,29 +221,34 @@ input:checked + .slider:before {
|
||||
}
|
||||
|
||||
#questionTypeSelector {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
align-items: center;
|
||||
justify-content: space-around;
|
||||
margin-top: 3em;;
|
||||
margin-bottom: 3em;;
|
||||
display: flex;
|
||||
width: 100%;
|
||||
align-items: center;
|
||||
justify-content: space-around;
|
||||
margin-top: 3em;
|
||||
margin-bottom: 3em;
|
||||
}
|
||||
|
||||
.text img, td img { max-height: 15vh }
|
||||
|
||||
#questionTypeSelector input[type="radio"] { display: none; }
|
||||
input[type="radio"]+label {
|
||||
padding: 0.5em;
|
||||
.text img,
|
||||
td img {
|
||||
max-height: 15vh;
|
||||
}
|
||||
input[type="radio"]:checked+label {
|
||||
background-color: var(--yellow);
|
||||
|
||||
#questionTypeSelector input[type="radio"] {
|
||||
display: none;
|
||||
}
|
||||
input[type="radio"] + label {
|
||||
padding: 0.5em;
|
||||
}
|
||||
input[type="radio"]:checked + label {
|
||||
background-color: var(--yellow);
|
||||
}
|
||||
|
||||
#previousQuestionAnswer {
|
||||
display: inline;
|
||||
display: inline;
|
||||
}
|
||||
|
||||
#previousQuestionAnswer img {
|
||||
display: inline;
|
||||
max-height: 2em;
|
||||
display: inline;
|
||||
max-height: 2em;
|
||||
}
|
||||
|
||||
155
index.html
155
index.html
@ -1,72 +1,99 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<link rel="stylesheet" type="text/css" href="styles.css" />
|
||||
<link rel="stylesheet" type="text/css" href="game_styles.css" />
|
||||
<title>capitals_quiz</title>
|
||||
</head>
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8"/>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<link rel="stylesheet" type="text/css" href="styles.css" />
|
||||
<link rel="stylesheet" type="text/css" href="game_styles.css" />
|
||||
<title>capitals_quiz</title>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id=game>
|
||||
<div id="toprow">
|
||||
<p id="question">you need javascript enabled to play this</p>
|
||||
<body>
|
||||
<div id="game">
|
||||
<div id="toprow">
|
||||
<p id="question">you need javascript enabled to play this</p>
|
||||
<div id="gameinfo">
|
||||
<p id="time">time</p>
|
||||
<p id="score">score</p>
|
||||
<p id="time">time</p>
|
||||
<p id="score">score</p>
|
||||
</div>
|
||||
</div>
|
||||
<div style="display: none" id="settings">
|
||||
<div id="regionList"></div>
|
||||
<div id="questionTypeSelector" >
|
||||
<input type="radio" name="questionMode" value="capital" id="questionTypeCapital" checked>
|
||||
<label for="questionTypeCapital">capital</label>
|
||||
</div>
|
||||
<div style="display: none" id="settings">
|
||||
<div id="regionList"></div>
|
||||
<div id="questionTypeSelector">
|
||||
<input
|
||||
type="radio"
|
||||
name="questionMode"
|
||||
value="capital"
|
||||
id="questionTypeCapital"
|
||||
checked
|
||||
/>
|
||||
<label for="questionTypeCapital">capital</label>
|
||||
|
||||
<input type="radio" name="questionMode" value="country" id="questionTypeCountry">
|
||||
<label for="questionTypeCountry">country</label>
|
||||
<input
|
||||
type="radio"
|
||||
name="questionMode"
|
||||
value="country"
|
||||
id="questionTypeCountry"
|
||||
/>
|
||||
<label for="questionTypeCountry">country</label>
|
||||
|
||||
<input type="radio" name="questionMode" value="flag" id="questionTypeFlag">
|
||||
<label for="questionTypeFlag">flag</label>
|
||||
<input
|
||||
type="radio"
|
||||
name="questionMode"
|
||||
value="flag"
|
||||
id="questionTypeFlag"
|
||||
/>
|
||||
<label for="questionTypeFlag">flag</label>
|
||||
|
||||
<input type="radio" name="questionMode" value="reverseflag" id="questionTypeReverseFlag">
|
||||
<label for="questionTypeReverseFlag">reverseflag</label>
|
||||
</div>
|
||||
</div>
|
||||
<div style="display: none" id="answers">
|
||||
<div class="answer" id="answer_a">
|
||||
<p class="letter" id="a">1</p>
|
||||
<p class="text">answer 1 text</p>
|
||||
</div>
|
||||
<div class="answer" id="answer_b">
|
||||
<p class="letter" id="b">2</p>
|
||||
<p class="text">answer 2 text</p>
|
||||
</div>
|
||||
<div class="answer" id="answer_c">
|
||||
<p class="letter" id="c">3</p>
|
||||
<p class="text">this sample text is longer than the rest</p>
|
||||
</div>
|
||||
<div class="answer" id="answer_d">
|
||||
<p class="letter" id="d">4</p>
|
||||
<p class="text">answer 4 text</p>
|
||||
</div>
|
||||
<p id="previousQuestionText" style="display: none"> answer to previous question: <span id="previousQuestionAnswer"> </span></p>
|
||||
</div>
|
||||
<div style="display: none" id="results">
|
||||
<h1 id="resultsBreakdownHeader"> results breakdown </h1>
|
||||
<div>
|
||||
<canvas id="resultsChart"></canvas>
|
||||
</div>
|
||||
<h2 id="incorrectAnswersHeader"> incorrect answers </h2>
|
||||
<table id="incorrectAnswersTable"> </table>
|
||||
<input
|
||||
type="radio"
|
||||
name="questionMode"
|
||||
value="reverseflag"
|
||||
id="questionTypeReverseFlag"
|
||||
/>
|
||||
<label for="questionTypeReverseFlag">reverseflag</label>
|
||||
</div>
|
||||
</div>
|
||||
<div style="display: none" id="answers">
|
||||
<div class="answer" id="answer_a">
|
||||
<p class="letter" id="a">1</p>
|
||||
<p class="text">answer 1 text</p>
|
||||
</div>
|
||||
<div class="answer" id="answer_b">
|
||||
<p class="letter" id="b">2</p>
|
||||
<p class="text">answer 2 text</p>
|
||||
</div>
|
||||
<div class="answer" id="answer_c">
|
||||
<p class="letter" id="c">3</p>
|
||||
<p class="text">this sample text is longer than the rest</p>
|
||||
</div>
|
||||
<div class="answer" id="answer_d">
|
||||
<p class="letter" id="d">4</p>
|
||||
<p class="text">answer 4 text</p>
|
||||
</div>
|
||||
<p id="previousQuestionText" style="display: none">
|
||||
answer to previous question:
|
||||
<span id="previousQuestionAnswer"> </span>
|
||||
</p>
|
||||
</div>
|
||||
<div style="display: none" id="results">
|
||||
<h1 id="resultsBreakdownHeader">results breakdown</h1>
|
||||
<div>
|
||||
<canvas id="resultsChart"></canvas>
|
||||
</div>
|
||||
<h2 id="incorrectAnswersHeader">incorrect answers</h2>
|
||||
<table id="incorrectAnswersTable"></table>
|
||||
|
||||
<h2 id="correctAnswersHeader"> correct answers </h2>
|
||||
<table id="correctAnswersTable"> </table>
|
||||
</div>
|
||||
</div>
|
||||
<p> built with ❤ and adequate amounts of care by <a href="https://alra.uk">alv</a></p>
|
||||
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
|
||||
<script type="text/javascript" src="countries.js"></script>
|
||||
<script type="text/javascript" src="game.js"></script>
|
||||
</body>
|
||||
<h2 id="correctAnswersHeader">correct answers</h2>
|
||||
<table id="correctAnswersTable"></table>
|
||||
</div>
|
||||
</div>
|
||||
<p>
|
||||
built with ❤ and adequate amounts of care by
|
||||
<a href="https://alra.uk">alv</a>
|
||||
</p>
|
||||
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
|
||||
<script type="text/javascript" src="countries.js"></script>
|
||||
<script type="text/javascript" src="game.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
50
styles.css
50
styles.css
@ -1,35 +1,35 @@
|
||||
@import url("https://alv.cx/styles.css");
|
||||
|
||||
:root {
|
||||
--default-bg: #fefefe;
|
||||
--dark-bg: #b8b8b8;
|
||||
--selected-bg:#383838;
|
||||
--default-fg: #454545;
|
||||
--red: #ab4642;
|
||||
--orange: #dc9656;
|
||||
--yellow: #f7ca88;
|
||||
--green: #a1b56c;
|
||||
--teal: #86c1b9;
|
||||
--blue: #7cafc2;
|
||||
--purple: #ba8baf;
|
||||
--brown: #a16946;
|
||||
--default-bg: #fefefe;
|
||||
--dark-bg: #b8b8b8;
|
||||
--selected-bg: #383838;
|
||||
--default-fg: #454545;
|
||||
--red: #ab4642;
|
||||
--orange: #dc9656;
|
||||
--yellow: #f7ca88;
|
||||
--green: #a1b56c;
|
||||
--teal: #86c1b9;
|
||||
--blue: #7cafc2;
|
||||
--purple: #ba8baf;
|
||||
--brown: #a16946;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: monospace;
|
||||
color: var(--default-fg);
|
||||
font-size: 16px;
|
||||
margin: 0 auto;
|
||||
max-width: 800px;
|
||||
padding: 2em;
|
||||
line-height: 1.1;
|
||||
text-align: justify;
|
||||
background-color: var(--default-bg);
|
||||
font-family: monospace;
|
||||
color: var(--default-fg);
|
||||
font-size: 16px;
|
||||
margin: 0 auto;
|
||||
max-width: 800px;
|
||||
padding: 2em;
|
||||
line-height: 1.1;
|
||||
text-align: justify;
|
||||
background-color: var(--default-bg);
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 600px) {
|
||||
body {
|
||||
margin: 0em auto;
|
||||
padding: 2em;
|
||||
}
|
||||
body {
|
||||
margin: 0em auto;
|
||||
padding: 2em;
|
||||
}
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user