Down the Trivia Hole

Main Menu and Username
Example of screen effects
Leaderboard System

Inspiration

As freshman, this was our very first hackathon. We wanted to make a project that fit the theme and made us learn new skills/concepts. We chose to do a trivia webpage that uses creative and esoteric features that give is personality and lets our creative side show, as well as our technical side.

What it does

The website is a Alice in Wonderland themed trivia with selectable difficulty for those casual to die-hard fans. After entering the trivia, the user can answer questions, but there is a unique twist. As the user gets answers wrong, they will start to "fall down the rabbit hole" and have screen effects make it harder to answer questions. At the end of the trivia, it will show a scoreboard comparing users to others.

How we built it

We used HTML/CSS with JS, to host the webpage, we used one of our home servers with XAMPP to host the webpage and a Cloudflare secure tunnel to expose it to the internet.

Challenges we ran into

At the start, we all had some experience with coding, but none of us had strength in JavaScript, so we all had to learn and implement features as we learned the language. We were driving on the road as we were laying it. Getting the webpage to work running off the home server was difficult and we had a time crunch as we had to implement it.

Accomplishments that we're proud of

The screen effects are creative and we had fun seeing how our code would affect the trivia experience. It was a lot of fun to learn a new language and stumble along the way.

What we learned

We learned a good bit of JavaScript and how to structure teamwork and tasks. We also learned how to run the webpage over the internet.

What's next for Down the Trivia Hole

To improve this website further, we would implement more screen effects, and use more beautiful CSS. Added interconnected features like a comments section and more themes/trivia question pool would be better.