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

add stopwatch

Browse Source
This commit is contained in:
Akbar Rahman 2021-12-01 15:10:50 +00:00
parent 8bb93a2308
commit 53e7d62280
Signed by: alvierahman90
GPG Key ID: 20609519444A1269
2 changed files with 24 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
src/game.js
View File

@ -18,6 +18,16 @@ const settingsHTML = document.getElementById("settings");
const selectorHTML = document.getElementById("region_selector"); 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 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 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))]
@ -83,17 +93,22 @@ function init() {
// start game // start game
updateState(); updateState();
updateScreen(); updateScreen();
gameTimeStartTime = new Date()
gameTimeIntervalId = setInterval(updateTime, 1);
} }
// stop game, go back to start screen // stop game, go back to start screen
function deinit() { function deinit() {
clearInterval(gameTimeIntervalId);
answersHTML.style.display = "none"; answersHTML.style.display = "none";
resultsHTML.style.display = "none"; resultsHTML.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";
scoreHTML.innerHTML = "score"; scoreHTML.innerHTML = "score";
questionHTML.onclick = init; questionHTML.onclick = init;
timeHTML.innerHTML = "time";
questionList = null; questionList = null;
selectorMatches = [] selectorMatches = []
@ -152,10 +167,13 @@ function updateScreen(){
} }
} }
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);
state.incorrectAnswers.forEach(ans => { state.incorrectAnswers.forEach(ans => {
var tr = document.createElement('tr'); var tr = document.createElement('tr');
@ -235,7 +253,6 @@ 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));

3
src/index.html
View File

@ -13,7 +13,10 @@
<div id=game> <div id=game>
<div id="toprow"> <div id="toprow">
<p onclick="init()" id="question">you need javascript enabled to play this</p> <p onclick="init()" 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="score">score</p>
</div>
</div> </div>
<div style="display: none" id="settings"> <div style="display: none" id="settings">
<input placeholder="select a region (tap or type to filter)" id="region_selector" type="text"> <input placeholder="select a region (tap or type to filter)" id="region_selector" type="text">