Case Study: NMIX 6020 – Advanced Web Development Javascript Trivia Game

NMIX 6020 — Javascript Trivia Game

My final project for NMIX 6020: Advanced Web Development was a trivia game I created using Javascript.

Spring 2024

Project Overview

With this project, I wanted to take an assignment that we worked on earlier in the semester, and build on it with some of the skills I picked up throughout the course. I made extensive use of Javascript and CSS to customize my trivia game and make it work smoothly.

The Problem

I made this because I was very interested in using an API to generate random information for a webpage. I think it is a very valuable tool for developers, so I thought it would be beneficial to get some more experience using an API. The goal was to take that huge amount of information and turn it into a fun and competitive trivia game.

The Solution

My method involved taking the code from an earlier assignment that we did in this class, and adapting it to fit my specific needs to build a polished and fun game.

Initial Planning

The first step was outlining the features that I wanted to include. I decided that I wanted the user to have to answer 10 random multiple choice trivia questions. I wanted the game to keep track of the user’s score, and I wanted to have a 60-second timer to add some pressure to the game.

The User Interface

The UI needed to be intuitive and visually appealing. I designed a simple layout with a main question area with big, legible text, intuitive answer buttons, and a timer/score display that automatically updates throughout the game.

The UI for my trivia game. This is the main page that displays when the user starts a new game. The gradient background is animated, so it adds some visually appealing motion to the page.

The interface needed to be kept minimalistic to keep the focus on the trivia questions, but it still needed to be fun, so I added an animated gradient background to make things look more interesting.

Integrating the Trivia API

To fetch the questions for the game, I integrated an external API using jQuery’s “$.getJSON” method. Like I said before, this project was adapted from an earlier lesson that we did in the class, so I built upon the methods that we used in that lesson to fit my needs.

The original function from the lesson:

My code:

Implementing the Game Logic

The original lesson displayed 10 questions all at once, so I changed the code to display 10 questions sequentially. In my code, the loadQuestion() function is initially called when the page loads to load the first question. It is called. again whenever a user answers a question.

When the page loads, ‘loadQuestion(currentIndex)’ is called, which loads the first question

When a user selects an answer (‘showAns’ function is called), the ‘currentIndex’ is incremented to load the next question. This process continues until the ‘currentIndex’ reaches 10, at which point the game is over, and the gameOver() function runs.

I made separate functions ‘startTimer,’ ‘gameOver,’ and ‘resetGame,’ each with its own specific function related to the question loading.

One of the big challenges was getting the timer to reset when the user clicks the “play again” button at the end of the game. It originally would show the timer from the previous game and the current game at the same time, leading to some weird gameplay effects.

To fix this, I had to make sure that the timer would only start when the first question is loaded, and end when the game over screen pops up.

Results

Overall, I am very happy with the final result of this project. I learned a lot about how to incorporate information from APIs into an interactive website. I also learned a lot about how to start and stop different JS processes at different times and making sure each function only runs when I want it to.