Skip to content
IronHack JS Trivia Game Project
JavaScript HTML CSS
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
Extra
SCSS
img
js
sound
Logic.txt
README.md
drag-transform.css
drag-transform.map
index.html
style.css
style.map

README.md

Drag Quiz

The best and most beautiful test of Drag knowledge, because when it comes to Drag, the look matters.


Introduction

When I was tasked to create a game for IronHack, the first thing that popped into my mind was trivia. I personally love trivia because I love learning random facts. But usually trivia games are very ugly and about boring things. So I decided to create a trivia game about the least boring thing I know.....Drag Queens. Take a look at my presentation here

Demo

  • Play the game live here

Development

Luckily for me trivia games are not as complex as other games because the base logic is pretty easy to comprehend. So because I wanted the game to be nicely designed, modern and responsive, I started with design first.

  • I used Adobe Xd to create a the layout of all the cards. Check them out here
  • I then used Adobe Xd's prototype feature to link all the cards together to mirror the game's real flow.
  • After that I then had to create the consistent background and basic card style layout that would be used throughout all of the game.
  • After that was done, I went and created all of the different card layouts for each situation in HTML and CSS (using Sass).
  • Then I took a break from the design to just create a simple quiz with a few questions to make sure I had a solid simple logic I could expand upon.
  • Once the quiz logic was working I went back to the created cards and used jQuery to decide when each card should be shown, to mimick the gameflow I had already protoyped.
  • After doing that, I realized a huge flaw in my design. There was no way to go back to the previous card unless you refreshed the site and started from the beginning. That is when I created a minimalist toggle button menu on the button to give the user the ability to jump to sections of the game.
  • Now that the card flow was working and I had all the designs, the fun part came of linking the two together.
  • I first had to expand upon the logic of the quiz. I had to create lives and a timer.
  • Then I started to link the questions to the already designed question cards.
  • This of course resulted in some display issues and glitches that were fixed after some trial and error.
  • With all question cards working, I then linked the correct and wrong cards, along with the game over cards.
  • I then tweaked the score to be linked to how quickly you answer the question. I also made the timer get shorter the more points you got.
  • The last thing I need to do is to randomize the order of the questions, and then repeat for multiple categories.

Built with

  • 375 lines of HTML
  • 725 lines of Sass
  • 365 lines of JavaScript
  • 72 lines of jQuery
  • Prototyping done with Adobe Xd
  • Styling done with Materialize
  • & lots of Google Searches

Bugs

  • Sometimes the quiz will start loading from the category screen after reset.
  • If you exit the game before finishing and try to start again, the timer will be buggy.

To-do

  • Randomize the order of the answers
  • Create the quizzes for the other categories
  • Create mix all deck option
  • Add timer animation
  • Clean up and restructure my code
You can’t perform that action at this time.