Case Study

For EmblemCon 2025, my streaming partner Ducessa and I wanted to upgrade our interface for our annual Jeopardy panel. The layout we had was fine truth be told, but it was a little clunky. We used Photoshop to display questions and build the board, so we relied on folders and turning on and off layers to present the panel. However, I was confident with my coding skills that I could build something to make our panel more efficient.

Using the motivation and energy from the Wheel of Fortune panel, I mentally deconstructed and built an interface that appeared a lot like the Jeopardy one using HTML and CSS

The biggest challenge was thinking about how I want to present the questions. They needed to be large enough for the contestants and viewers to see. I also needed to make sure that whatever I did wasn't intrusive or destructive to the actual game.

After a bit of brainstorming, the answer was obvious to me:
Lightboxes

Lightboxes are a way to display information without navigating away from the page, and thanks to Javascript and CSS, you can control the size and content within them.

Thus, I coded a single lightbox that appears when you click a question, and it takes the text content of that question and applies it to inside the lightbox for a bigger view. To make the lightbox go away, I added a close button that sets the display to none. Clicking on another question makes it appear again, and as mentioned, applies the new question content.

Just like in the Jeopardy show, sometimes there's a Daily Double that appears and needs to appear first. Thus, I coded another lightbox and added a check in my Javascript functionality. If the question has a dataset of "dd" (standing for Daily Double), then it makes the daily double lightbox appear, overtop of the question thanks to z-index.

Using the same logic as before as well, when it's Final Jeopardy time, 3 lightboxes appear. One for the final Jeopardy title, one for the category, and 1 for the question. Thanks to good old z-index, they appear in the exact order I needed them to, and when the close button is pressed, it just takes away the one layer while leaving the others untouched.

Coding the Jeopardy site for EmblemCon was honestly a lot more fun than the Wheel of Fortune one. I did it all in an afternoon and the result feels clean and professional in my opinion. While simple, it's one of the projects I'm most proud of!