Only a true Harry Potter afficianado would be able to answer all these questions! Ready for a challenge? Click here to accept my challenge.
The Technical Details
This is a simple timer-based quiz created from scratch - yup, custom CSS. The game logic relies on JavaScript, with jQuery to manipulate the DOM. Here's my pseudocode, if you're interested in the thought process that goes into creating a quiz like this.
If you're looking for most of the DOM content, look in the JavaScript file. The HTML file only contains the several empty sections of the game, most of them hidden until the user interacts with the game.
The Design Process
This was one of my earliest works in Front End Design, just around a month after I learned how to put together a webpage! So I'm very proud of how it turned out.
I wanted to try and build a website that would look just as good on mobile browsers, and I knew that one of the biggest challenges was creating a pretty and scalable background. I relied heavily on my Graphic Design experience to come up with this PNG image for the background. Here's a graveyard of all the images I tried before finalizing my background image.
The solution that seemed most natural to me was to use Photoshop to give the image transparent edges, and use relative positioning for the background image. While not the most refined solution, I wanted to leave this up as a testament to my ability to think creatively even in the earliest stages of my learning of web development.