A game of general geography trivia using a free API. Answer 20 questions with fifteen seconds each, see how many you can get correct!
- HTML
- CSS
- Javascript
- API retrieved with Axios
Simply open the game, press start, and play! Game link: https://emmastriviagame.netlify.app
- As a user, I want adequate time to answer each question so I don't feel rushed.
- As a user, I want to be able to restart, and replay without refreshing.
- As a user, I want my final score to pop up at the end.
- As a user, I want the display to be clear, engaging and accessible so I'm not confused while trying to answer questions.
- As a user, I want to be able to always see my score and which question number I'm currently on.
The code for my scoring is somwhow reversed, and I couldn't figure it out; originally, if you got a question right the score would go down and vice versa. As a quick fix, I switched the code so that if you get a question correct you lose a point (which translates somehow to gaining a point), and vice versa. I would love to fix this correctly eventually:
` function checkAnswer(i) { const currentQuestion = questions[questionId]; if (currentQuestion.answers[i] === currentQuestion.correctAnswer) { changePoints(-1); } else { changePoints(1); } goToNextQuestion(); }
function changePoints(amount) { points -= amount; scoreElement.innerText = "Your score is " + points; } `
I would also love to make better, more modern styling using CSS. Another hurdle was my original code - it was basically only readable to me. I spent hours refactoring it, using basically the same logic, to create clearer, more readable code.
Google, MDN, W3, Stackoverflow, my lovely brother, Leo and Greg. Temani Afif for more advanced CSS colorings and styles, the earth animation from The Pragmatick on Stackoverflow, and Luke Embrey for the h1 styling. Thank you all <3