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

prettier -w

Browse Source
This commit is contained in:
Akbar Rahman 2022-01-19 20:37:49 +00:00
parent 780f6d7272
commit 8b2695f241
Signed by: alvierahman90
GPG Key ID: 20609519444A1269
4 changed files with 473 additions and 393 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

478
game.js
View File

@ -8,11 +8,13 @@ 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 incorrectAnswersTable = document.getElementById('incorrectAnswersTable'); const incorrectAnswersTable = document.getElementById("incorrectAnswersTable");
const correctAnswersTable = document.getElementById('correctAnswersTable'); const correctAnswersTable = document.getElementById("correctAnswersTable");
const previousQuestionAnswer = document.getElementById('previousQuestionAnswer'); const previousQuestionAnswer = document.getElementById(
const previousQuestionText = document.getElementById('previousQuestionText'); "previousQuestionAnswer"
);
const previousQuestionText = document.getElementById("previousQuestionText");
const regionListHTML = document.getElementById("regionList"); const regionListHTML = document.getElementById("regionList");
const resultsHTML = document.getElementById("results"); const resultsHTML = document.getElementById("results");
const scoreHTML = document.getElementById("score"); const scoreHTML = document.getElementById("score");
@ -24,302 +26,327 @@ var gameTimeStartTime = 0;
var gameTimeIntervalId = 0; var gameTimeIntervalId = 0;
var selectedRegion = null; var selectedRegion = null;
const guessCapital = () => document.getElementById('questionTypeCapital').checked; const guessCapital = () =>
const guessCountry = () => document.getElementById('questionTypeCountry').checked; document.getElementById("questionTypeCapital").checked;
const guessFlag = () => document.getElementById('questionTypeFlag').checked; const guessCountry = () =>
const guessReverseFlag = () => document.getElementById('questionTypeReverseFlag').checked; document.getElementById("questionTypeCountry").checked;
const guessFlag = () => document.getElementById("questionTypeFlag").checked;
const guessReverseFlag = () =>
document.getElementById("questionTypeReverseFlag").checked;
const updateTime = () => { const updateTime = () => {
const secondsPassed = ((new Date().getTime() - gameTimeStartTime.getTime())/1000) const secondsPassed = (
.toFixed(3); (new Date().getTime() - gameTimeStartTime.getTime()) /
timeHTML.innerHTML = secondsPassed; 1000
} ).toFixed(3);
timeHTML.innerHTML = secondsPassed;
};
const getMasterQuestionList = () => { const getMasterQuestionList = () => {
return countries; return countries;
} };
const getQuestionByCountryName = (name) => { const getQuestionByCountryName = (name) => {
c = getMasterQuestionList().filter(c => c.countryname === name) c = getMasterQuestionList().filter((c) => c.countryname === name);
if (c.length > 0) return c[0] if (c.length > 0) return c[0];
return null return null;
} };
const getQuestionByCapital = (capital) => { const getQuestionByCapital = (capital) => {
c = getMasterQuestionList().filter(c => c.capital === capital) c = getMasterQuestionList().filter((c) => c.capital === capital);
if (c.length > 0) return c[0] if (c.length > 0) return c[0];
return null return null;
} };
const optionToAnswer = (option) => { const optionToAnswer = (option) => {
if (guessCapital()) return option.capital; if (guessCapital()) return option.capital;
else if (guessCountry()) return option.countryname; else if (guessCountry()) return option.countryname;
else if (guessReverseFlag()) return option.countryname; else if (guessReverseFlag()) return option.countryname;
else return option.code; else return option.code;
} };
const optionToAnswerFormatted = (option) => { const optionToAnswerFormatted = (option) => {
const r = optionToAnswer(option); const r = optionToAnswer(option);
if (guessFlag()) return getImageURLFromCountryCode(r); if (guessFlag()) return getImageURLFromCountryCode(r);
return r return r;
} };
const optionToQuestion = (option) => { const optionToQuestion = (option) => {
if (guessCapital()) return option.countryname; if (guessCapital()) return option.countryname;
else if (guessCountry()) return option.capital; else if (guessCountry()) return option.capital;
else if (guessReverseFlag()) return option.code; else if (guessReverseFlag()) return option.code;
else return option.countryname; else return option.countryname;
} };
const optionToQuestionFormatted = (option) => { const optionToQuestionFormatted = (option) => {
const r = optionToQuestion(option); const r = optionToQuestion(option);
if (guessReverseFlag()) return getImageURLFromCountryCode(r); if (guessReverseFlag()) return getImageURLFromCountryCode(r);
return r return r;
} };
const getQuestionHTML = (state) => { const getQuestionHTML = (state) => {
if(guessCountry()) if (guessCountry())
return `what country is <span id="questionCapital">${state.question.capital}</span> the capital of?` return `what country is <span id="questionCapital">${state.question.capital}</span> the capital of?`;
if (guessCapital()) if (guessCapital())
return `what is the capital of <span id="questionCountry">${state.question.countryname}</span>?` return `what is the capital of <span id="questionCountry">${state.question.countryname}</span>?`;
if(guessFlag()) if (guessFlag())
return `what is the flag of <span id="questionCountry">${state.question.countryname}</span>?` return `what is the flag of <span id="questionCountry">${state.question.countryname}</span>?`;
if(guessReverseFlag()) if (guessReverseFlag())
return `which country's flag is ${getImageURLFromCountryCode(state.question.code)}?` return `which country's flag is ${getImageURLFromCountryCode(
} state.question.code
)}?`;
};
const answerList = () => { const answerList = () => {
return getMasterQuestionList().map(q => { return getMasterQuestionList().map((q) => {
if (guessCountry()) return q.countryname; if (guessCountry()) return q.countryname;
if (guessCapital()) return q.capital; if (guessCapital()) return q.capital;
if (guessFlag()) return q.code; if (guessFlag()) return q.code;
if (guessReverseFlag()) return q.countryname; 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))]
const regionList = () => [...new Set(getMasterQuestionList().map(item => item.region))] .concat([...new Set(getMasterQuestionList().map((item) => item.subregion))])
.concat([...new Set(getMasterQuestionList().map(item => item.subregion))])
.concat([ALL_REGIONS]) .concat([ALL_REGIONS])
.sort(); .sort();
const date = new Date(); const date = new Date();
var questionList, state; var questionList, state;
var resultsChart = new Chart( var resultsChart = new Chart(document.getElementById("resultsChart"), {
document.getElementById('resultsChart'), type: "doughnut",
{ data: {
type: 'doughnut', labels: [],
data: { datasets: [
labels: [], {
datasets: [ labels: [],
{ data: [],
labels: [], backgroundColor: ["#a1b56c", "#ab4642"],
data: [], },
backgroundColor: [ ],
"#a1b56c", },
"#ab4642", options: {},
] });
}
]
},
options: {}
}
);
// set up game // set up game
function init() { function init() {
// generate question list // generate question list
questionList = getMasterQuestionList() questionList = getMasterQuestionList()
.filter(q => q.region == selectedRegion || q.subregion == selectedRegion || selectedRegion == ALL_REGIONS) .filter(
.sort(() => Math.random()-0.5); (q) =>
q.region == selectedRegion ||
q.subregion == selectedRegion ||
selectedRegion == ALL_REGIONS
)
.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();
state.correctAnswers = []; state.correctAnswers = [];
state.incorrectAnswers = []; state.incorrectAnswers = [];
state.userAnswer = null; state.userAnswer = null;
// 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;
incorrectAnswersTable.innerHTML = "<tr> <th> question </th> <th> answer </th> <th> your answer </th> </tr>"; incorrectAnswersTable.innerHTML =
correctAnswersTable.innerHTML = "<tr> <th> country </th> <th> capital </th> </tr>"; "<tr> <th> question </th> <th> answer </th> <th> your answer </th> </tr>";
correctAnswersTable.innerHTML =
"<tr> <th> country </th> <th> capital </th> </tr>";
// start game // start game
updateState(); updateState();
updateScreen(); updateScreen();
gameTimeStartTime = new Date() gameTimeStartTime = new Date();
gameTimeIntervalId = setInterval(updateTime, 1); gameTimeIntervalId = setInterval(updateTime, 1);
} }
// stop game, go back to start screen // stop game, go back to start screen
function deinit() { function deinit() {
clearInterval(gameTimeIntervalId); 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";
questionList = null; answersHTML.style.display = "none";
state = { resultsHTML.style.display = "none";
"score": 0, settingsHTML.style.display = "";
"maxScore": 0, questionHTML.innerHTML = "capitals_quiz - select a region to start!";
"startTime": 0, scoreHTML.innerHTML = "score";
"endTime": 0, questionHTML.onclick = init;
"finishedGame": true, timeHTML.innerHTML = "time";
"startedGame": false,
}; questionList = null;
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 (questionList.length == 0) { state.finishedGame = true; return; } if (questionList.length == 0) {
state.finishedGame = true;
return;
}
// set up new question // set up new question
const newQuestion = questionList.pop(); const newQuestion = questionList.pop();
console.log(newQuestion); console.log(newQuestion);
var options = [] var options = [];
while (options.length < 4) { while (options.length < 4) {
var c = getMasterQuestionList()[Math.floor(Math.random()*answerList().length)]; var c =
var question = getQuestionByCountryName(newQuestion.countryname); getMasterQuestionList()[Math.floor(Math.random() * answerList().length)];
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); var question = getQuestionByCountryName(newQuestion.countryname);
if (question == undefined) question = getQuestionByCapital(newQuestion.capital); if (question == undefined)
options[Math.floor(Math.random()*4)] = question; 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 = { if (state.question)
"question": state.question, state.previousQuestion = {
"options": state.options, question: state.question,
"answer": state.answer options: state.options,
answer: state.answer,
}; };
state.question = newQuestion; state.question = newQuestion;
state.options = options; state.options = options;
state.answer = question; state.answer = question;
console.log(state); console.log(state);
} }
// 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) {
displayEndScreen(); displayEndScreen();
return; return;
} }
answerAHTML.getElementsByClassName("text")[0].innerHTML = optionToAnswerFormatted(state.options[0]); answerAHTML.getElementsByClassName("text")[0].innerHTML =
answerBHTML.getElementsByClassName("text")[0].innerHTML = optionToAnswerFormatted(state.options[1]); optionToAnswerFormatted(state.options[0]);
answerCHTML.getElementsByClassName("text")[0].innerHTML = optionToAnswerFormatted(state.options[2]); answerBHTML.getElementsByClassName("text")[0].innerHTML =
answerDHTML.getElementsByClassName("text")[0].innerHTML = optionToAnswerFormatted(state.options[3]); 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) questionHTML.innerHTML = getQuestionHTML(state);
if (state.previousQuestion ) { if (state.previousQuestion) {
previousQuestionAnswer.innerHTML = optionToAnswerFormatted(state.previousQuestion.question); previousQuestionAnswer.innerHTML = optionToAnswerFormatted(
previousQuestionText.style.display = ""; state.previousQuestion.question
} );
previousQuestionText.style.display = "";
}
} }
function displayEndScreen() { function displayEndScreen() {
questionHTML.innerHTML = "you did it! click here to restart"; questionHTML.innerHTML = "you did it! click here to restart";
answers.style.display = "none"; answers.style.display = "none";
answers.style.display = "none"; answers.style.display = "none";
clearInterval(gameTimeIntervalId);
if (guessReverseFlag() || guessFlag()) { clearInterval(gameTimeIntervalId);
incorrectAnswersTable.innerHTML = "<tr> <th> country </th> <th> answer </th> <th> your answer </th> </tr>";
correctAnswersTable.innerHTML = "<tr> <th> flag </th> <th> country </th> </tr>";
}
state.incorrectAnswers.forEach(ans => { if (guessReverseFlag() || guessFlag()) {
var tr = document.createElement('tr'); incorrectAnswersTable.innerHTML =
console.log(ans) "<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')) state.incorrectAnswers.forEach((ans) => {
tr.lastChild.innerHTML = optionToQuestionFormatted(ans.question) var tr = document.createElement("tr");
console.log(ans);
tr.appendChild(document.createElement('td')) tr.appendChild(document.createElement("td"));
tr.lastChild.innerHTML = optionToAnswerFormatted(ans.answer); tr.lastChild.innerHTML = optionToQuestionFormatted(ans.question);
tr.appendChild(document.createElement('td')) tr.appendChild(document.createElement("td"));
tr.lastChild.innerHTML = optionToAnswerFormatted(ans.options[ans.userAnswer]); tr.lastChild.innerHTML = optionToAnswerFormatted(ans.answer);
incorrectAnswersTable.appendChild(tr); tr.appendChild(document.createElement("td"));
}) tr.lastChild.innerHTML = optionToAnswerFormatted(
if (state.incorrectAnswers.length <= 0) ans.options[ans.userAnswer]
incorrectAnswersTable.innerHTML = "no incorrect answers! go you!"; );
state.correctAnswers.forEach(ans => { incorrectAnswersTable.appendChild(tr);
var tr = document.createElement('tr'); });
tr.appendChild(document.createElement('td')) if (state.incorrectAnswers.length <= 0)
tr.lastChild.innerHTML = optionToQuestionFormatted(ans.question); incorrectAnswersTable.innerHTML = "no incorrect answers! go you!";
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"]; state.correctAnswers.forEach((ans) => {
resultsChart.config.data.labels = ["correct", "incorrect"]; var tr = document.createElement("tr");
resultsChart.config.data.datasets[0].labels = ["correct", "incorrect"]; tr.appendChild(document.createElement("td"));
resultsChart.config.data.datasets[0].data = [state.correctAnswers.length,state.incorrectAnswers.length]; tr.lastChild.innerHTML = optionToQuestionFormatted(ans.question);
resultsChart.update(); tr.appendChild(document.createElement("td"));
resultsHTML.style.display = ""; 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) { 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;
state.userAnswer = answer; state.userAnswer = answer;
state[isAnswerCorrect ? "correctAnswers" : "incorrectAnswers"].push({ state[isAnswerCorrect ? "correctAnswers" : "incorrectAnswers"].push({
"question": state.question, question: state.question,
"options": state.options, options: state.options,
"userAnswer": state.userAnswer, userAnswer: state.userAnswer,
"answer": state.answer answer: state.answer,
}); });
state.userAnswer = null; state.userAnswer = null;
// change background color based on if answer was correct for 500ms // change background color based on if answer was correct for 500ms
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 setRegion(region) { function setRegion(region) {
selectedRegion = region selectedRegion = region;
} }
// set up event listeners // set up event listeners
@ -328,22 +355,29 @@ 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 (
deinit(); e.code == "Enter" &&
return; settingsHTML.style.display === "none" &&
} state.finishedGame
if (e.code == "Enter" && !state.startedGame) init(); ) {
deinit();
return;
}
if (e.code == "Enter" && !state.startedGame) init();
}); });
// start game // start game
deinit(); deinit();
regionListHTML.innerHTML = regionList() 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() .sort()
.join(""); .join("");

183
game_styles.css
View File

@ -1,147 +1,161 @@
:root { :root {
--a-color: var(--red); --a-color: var(--red);
--b-color: var(--yellow); --b-color: var(--yellow);
--c-color: var(--green); --c-color: var(--green);
--d-color: var(--blue); --d-color: var(--blue);
--question-country-color: var(--teal); --question-country-color: var(--teal);
--question-capital-color: var(--blue); --question-capital-color: var(--blue);
} }
input { input {
font-family: inherit font-family: inherit;
} }
.correct { .correct {
animation: correct .5s; animation: correct 0.5s;
} }
.incorrect { .incorrect {
animation: incorrect .5s; animation: incorrect 0.5s;
} }
@keyframes correct { @keyframes correct {
0% { background: var(--default-bg); } 0% {
50% { background: var(--green); } background: var(--default-bg);
100% { background: var(--default-bg); } }
50% {
background: var(--green);
}
100% {
background: var(--default-bg);
}
} }
@keyframes incorrect { @keyframes incorrect {
0% { background: var(--default-bg); } 0% {
50% { background: var(--red); } background: var(--default-bg);
100% { background: var(--default-bg); } }
50% {
background: var(--red);
}
100% {
background: var(--default-bg);
}
} }
#toprow { #toprow {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
} }
@media only screen and (max-width: 600px) { @media only screen and (max-width: 600px) {
#toprow { #toprow {
flex-direction: column-reverse; flex-direction: column-reverse;
} }
} }
#question { #question {
font-size: 1.5em; font-size: 1.5em;
display: flex; display: flex;
align-items: center; align-items: center;
} }
#question img { #question img {
max-height: 10vh; max-height: 10vh;
} }
#question * { #question * {
margin: 1em; margin: 1em;
} }
#score { #score {
--good: var(--green); --good: var(--green);
--okay: var(--yellow); --okay: var(--yellow);
--bad: var(--red); --bad: var(--red);
background: var(--good); background: var(--good);
} }
#time { #time {
background: var(--blue); background: var(--blue);
} }
#gameinfo { #gameinfo {
display: flex; display: flex;
} }
#gameinfo * { #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 { #game .answer {
display: flex; display: flex;
justify-content: space-evenly; justify-content: space-evenly;
align-items: center; align-items: center;
align-content: center; align-content: center;
} }
#game .answer .text { #game .answer .text {
width: 50%; width: 50%;
} }
#game .answer .letter { #game .answer .letter {
font-size: 1.5em; font-size: 1.5em;
padding: 1em; padding: 1em;
border: 0; border: 0;
border-radius: 0.25em; border-radius: 0.25em;
} }
#a { #a {
background-color: var(--a-color); background-color: var(--a-color);
border-color: var(--a-color); border-color: var(--a-color);
} }
#b { #b {
background-color: var(--b-color); background-color: var(--b-color);
border-color: var(--b-color); border-color: var(--b-color);
} }
#c { #c {
background-color: var(--c-color); background-color: var(--c-color);
border-color: var(--c-color); border-color: var(--c-color);
} }
#d { #d {
background-color: var(--d-color); background-color: var(--d-color);
border-color: var(--d-color); border-color: var(--d-color);
} }
span#questionCountry { span#questionCountry {
background-color: var(--question-country-color); background-color: var(--question-country-color);
} }
span#questionCapital { span#questionCapital {
background-color: var(--question-capital-color); background-color: var(--question-capital-color);
} }
#settings { #settings {
width: 100% width: 100%;
} }
#regionList { #regionList {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
justify-content: center; justify-content: center;
} }
#settings .regionListItem { #settings .regionListItem {
padding: 1em; padding: 1em;
transition: 0.5s; transition: 0.5s;
} }
#settings .regionListItem:hover { #settings .regionListItem:hover {
background: #d9d9d9; background: #d9d9d9;
color: black; color: black;
} }
/* toggle switches */ /* toggle switches */
@ -153,7 +167,7 @@ span#questionCapital {
height: 34px; height: 34px;
} }
.switch input { .switch input {
opacity: 0; opacity: 0;
width: 0; width: 0;
height: 0; height: 0;
@ -167,8 +181,8 @@ span#questionCapital {
right: 0; right: 0;
bottom: 0; bottom: 0;
background-color: var(--question-country-color); background-color: var(--question-country-color);
-webkit-transition: .4s; -webkit-transition: 0.4s;
transition: .4s; transition: 0.4s;
} }
.slider:before { .slider:before {
@ -179,8 +193,8 @@ span#questionCapital {
left: 4px; left: 4px;
bottom: 4px; bottom: 4px;
background-color: white; background-color: white;
-webkit-transition: .4s; -webkit-transition: 0.4s;
transition: .4s; transition: 0.4s;
} }
input:checked + .slider { input:checked + .slider {
@ -207,29 +221,34 @@ input:checked + .slider:before {
} }
#questionTypeSelector { #questionTypeSelector {
display: flex; display: flex;
width: 100%; width: 100%;
align-items: center; align-items: center;
justify-content: space-around; justify-content: space-around;
margin-top: 3em;; margin-top: 3em;
margin-bottom: 3em;; margin-bottom: 3em;
} }
.text img, td img { max-height: 15vh } .text img,
td img {
#questionTypeSelector input[type="radio"] { display: none; } max-height: 15vh;
input[type="radio"]+label {
padding: 0.5em;
} }
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 { #previousQuestionAnswer {
display: inline; display: inline;
} }
#previousQuestionAnswer img { #previousQuestionAnswer img {
display: inline; display: inline;
max-height: 2em; max-height: 2em;
} }

155
index.html
View File

@ -1,72 +1,99 @@
<!DOCTYPE html> <!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> <body>
<meta charset="utf-8"/> <div id="game">
<meta name="viewport" content="width=device-width, initial-scale=1"> <div id="toprow">
<link rel="stylesheet" type="text/css" href="styles.css" /> <p id="question">you need javascript enabled to play this</p>
<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>
<div id="gameinfo"> <div id="gameinfo">
<p id="time">time</p> <p id="time">time</p>
<p id="score">score</p> <p id="score">score</p>
</div> </div>
</div> </div>
<div style="display: none" id="settings"> <div style="display: none" id="settings">
<div id="regionList"></div> <div id="regionList"></div>
<div id="questionTypeSelector" > <div id="questionTypeSelector">
<input type="radio" name="questionMode" value="capital" id="questionTypeCapital" checked> <input
<label for="questionTypeCapital">capital</label> type="radio"
name="questionMode"
value="capital"
id="questionTypeCapital"
checked
/>
<label for="questionTypeCapital">capital</label>
<input type="radio" name="questionMode" value="country" id="questionTypeCountry"> <input
<label for="questionTypeCountry">country</label> type="radio"
name="questionMode"
value="country"
id="questionTypeCountry"
/>
<label for="questionTypeCountry">country</label>
<input type="radio" name="questionMode" value="flag" id="questionTypeFlag"> <input
<label for="questionTypeFlag">flag</label> type="radio"
name="questionMode"
value="flag"
id="questionTypeFlag"
/>
<label for="questionTypeFlag">flag</label>
<input type="radio" name="questionMode" value="reverseflag" id="questionTypeReverseFlag"> <input
<label for="questionTypeReverseFlag">reverseflag</label> type="radio"
</div> name="questionMode"
</div> value="reverseflag"
<div style="display: none" id="answers"> id="questionTypeReverseFlag"
<div class="answer" id="answer_a"> />
<p class="letter" id="a">1</p> <label for="questionTypeReverseFlag">reverseflag</label>
<p class="text">answer 1 text</p> </div>
</div> </div>
<div class="answer" id="answer_b"> <div style="display: none" id="answers">
<p class="letter" id="b">2</p> <div class="answer" id="answer_a">
<p class="text">answer 2 text</p> <p class="letter" id="a">1</p>
</div> <p class="text">answer 1 text</p>
<div class="answer" id="answer_c"> </div>
<p class="letter" id="c">3</p> <div class="answer" id="answer_b">
<p class="text">this sample text is longer than the rest</p> <p class="letter" id="b">2</p>
</div> <p class="text">answer 2 text</p>
<div class="answer" id="answer_d"> </div>
<p class="letter" id="d">4</p> <div class="answer" id="answer_c">
<p class="text">answer 4 text</p> <p class="letter" id="c">3</p>
</div> <p class="text">this sample text is longer than the rest</p>
<p id="previousQuestionText" style="display: none"> answer to previous question: <span id="previousQuestionAnswer"> </span></p> </div>
</div> <div class="answer" id="answer_d">
<div style="display: none" id="results"> <p class="letter" id="d">4</p>
<h1 id="resultsBreakdownHeader"> results breakdown </h1> <p class="text">answer 4 text</p>
<div> </div>
<canvas id="resultsChart"></canvas> <p id="previousQuestionText" style="display: none">
</div> answer to previous question:
<h2 id="incorrectAnswersHeader"> incorrect answers </h2> <span id="previousQuestionAnswer"> </span>
<table id="incorrectAnswersTable"> </table> </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> <h2 id="correctAnswersHeader">correct answers</h2>
<table id="correctAnswersTable"> </table> <table id="correctAnswersTable"></table>
</div> </div>
</div> </div>
<p> built with ❤ and adequate amounts of care by <a href="https://alra.uk">alv</a></p> <p>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script> built with ❤ and adequate amounts of care by
<script type="text/javascript" src="countries.js"></script> <a href="https://alra.uk">alv</a>
<script type="text/javascript" src="game.js"></script> </p>
</body> <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
View File

@ -1,35 +1,35 @@
@import url("https://alv.cx/styles.css"); @import url("https://alv.cx/styles.css");
:root { :root {
--default-bg: #fefefe; --default-bg: #fefefe;
--dark-bg: #b8b8b8; --dark-bg: #b8b8b8;
--selected-bg:#383838; --selected-bg: #383838;
--default-fg: #454545; --default-fg: #454545;
--red: #ab4642; --red: #ab4642;
--orange: #dc9656; --orange: #dc9656;
--yellow: #f7ca88; --yellow: #f7ca88;
--green: #a1b56c; --green: #a1b56c;
--teal: #86c1b9; --teal: #86c1b9;
--blue: #7cafc2; --blue: #7cafc2;
--purple: #ba8baf; --purple: #ba8baf;
--brown: #a16946; --brown: #a16946;
} }
body { body {
font-family: monospace; font-family: monospace;
color: var(--default-fg); color: var(--default-fg);
font-size: 16px; font-size: 16px;
margin: 0 auto; margin: 0 auto;
max-width: 800px; max-width: 800px;
padding: 2em; padding: 2em;
line-height: 1.1; line-height: 1.1;
text-align: justify; text-align: justify;
background-color: var(--default-bg); background-color: var(--default-bg);
} }
@media only screen and (max-width: 600px) { @media only screen and (max-width: 600px) {
body { body {
margin: 0em auto; margin: 0em auto;
padding: 2em; padding: 2em;
} }
} }