Hip-Hop Jeopardy Project Case Study
For my Advanced Website Development final project, I created a Jeopardy board with trivia about Black female rappers in honor of the 50th year of Hip Hop.
Project Date: December 2023
My Role: Website Developer
Project Overview: I created a Jeopardy board inspired by the 50th year of Hip Hop using facts tailored to Black women rappers.
The Problem
The idea for the theme of my project came to me while I was listening to music. I was originally going to use an API to create the board, but I could not find any free APIs that were solely Hip Hop music. So this fueled my drive more to create something new and unique, while also finding a way to sneak in my love for Black women.
I started by making a list of all of the female rappers in my Apple Music library. Then, I opened Visual Studio Code to start building my project. I created a javascript file, an HTML file, and a CSS file and linked them all together.
The Solution
I started with the first category: stage names. I wrote objects for the questions and answers, and set them to “questionA” and “answer A”. Then, I created a function that would show the question. To add the answer, I had to create another function and call that in my original stagename function. Then, I wrote code to load the answer button and later reveal the answer when the button was pressed.
Get Kiana Stevenson’s stories in your inbox
Join Medium for free to get updates from this writer.
In my HTML document, I added a title to the site and wrapped it in its own div. Then, I created another div for the gameboard and set its class so that I could add style properties to the entire board. Inside of that, I created a div for category 1 with two lines of text for the category title, directions for the category, 5 buttons to call the function for each wager, and two div tags for the question & answer to load into. I set the values in the function to each wager and labeled them.
Once the framework was built, I simply copied the same code for each category and changed the questions and answers. I also labeled the functions with different letters and numbers for each category to differentiate between all of my elements.
Everything leading up to this was simple. Using CSS to make my board emulate the famous game would be my real challenge. I struggled with finding the right CSS properties to get my desired look structurally. I changed the background of the board to a brighter blue and made the board itself a deeper blue. I centered all of the body text as well as the category titles and the hints underneath. The wager buttons are in an unordered list so I did not have to change their structure much. I also changed the colors of my text, making the categories and answers yellow.
I also changed the fonts using Web Fonts from Google. First, I linked ‘Poppins’ and ‘Bebas Nue’ to the HTML document. Then, I used the font-family property to change all of the text to ‘Poppins’ except for the buttons, which I applied ‘Bebas Nue’ to using the same property.
Results
I used javascript to build the functions for the board and created my own questions/answers. Like the original game, users begin by selecting a category and then a wager. If you press the button with your desired wager on it, the question will appear and another button hiding the answer. The user then guesses the answer. If they press the “Answer” button, it will show them if you guessed correctly.
In all, I learned a lot in creating this project. I was able to practice using Javascript and different CSS properties. I spent a lot of time studying the Flexbox model in an effort to figure out how to achieve the structure of a Jeopardy board. If I could go back, I would spend more time working on the styling of the website and, hopefully, figure out how to make it look perfect. I think I could have created cards and added transitions so they flipped but I would have had to figure out how to get the questions, answers, and wagers to show.
