Movie Quiz

Movie Quiz is a website designed to let users test their knowledge of the cinematic universe. When the users finishes the quiz, they will be presented with a total score in order to compare the results with their friends.

Contents

1. Project Goals

   • User Goals
   • User Stories
   • Designer Goals

2. Design Choices

   • Fonts
   • Color Scheme

3. Content

   • Start Page
   • Questions and Answers
   • Results
   • Future Goals

4. Technologies Used

   • Testing
     • Browsers and Devices
     • Responsiveness
   • Validators
     • HTML
     • CSS
     • JSHINT
     • LightHouse
   • Known Bugs

5. Deployment

6. Credits

Project Goals

The goal was to create a simple, easy to use quiz game for users that want to test their movie knowledge. Whether that's about music composers, directors or the actual content within them.

User Goals

The quiz is targeted at the broader movie interested audience.

User Stories

• As a user I want the quiz to be easy to navigate.
• As a user I want clear feedback on my performance.
• As a user I want to be challenged.

Designer Goals

• Simple design with few choises across all devices.
• A flow of information that is clear and easy to understand.
• Satisfactory feedback on user inputs.

Design Choices

Fonts

Since the quiz is quite simple in it's design, I felt like there was room for a more relaxed font style. Therefore I decided to use 'Slackey' for the logo. To not exaggerate this I decided to use 'Peralta' for my headings as this comes across as a slightly tuned down version of 'Slackey'.

Color Scheme

Along with the nature of the fonts I decided to take a more colorful approach on the back & foreground-colors. To give contrast to the bright orange buttons and white headings I chose a darker blue for the contents background while the body consists of a lighter beige color in order to keep the lighthearted feel that the quiz is aimed to represent.

• Game background: #012133
• Buttons: #ff6600
• Heading text: #fff
• Body Background: #eee8aa

Content

Header

The header is simple and only consists of a logo to represent the quiz.

Start Page

The start page contains a button on which you can start the actual quiz.

Questions and Answers

The Q/A page shows the question in the heading above and questions grouped in two options per line.

Results

After completion of the quiz the results page will display the users score in comparison to the maximum score. Here, the user will also be able to replay the quiz through the "Play Again" button.

Future Goals

• Possible future features would include a bigger and more random selection of questions making it so the game becomes different each time you play.
• Adding a scoreboard to be able to compare yourself to other users.

Technologies Used

Languages

• HTML
• CSS
• Javascript

Libraries

• Sweet Alerts 2

Testing

Browsers and Devices

I asked my girlfriend to try the quiz out on her Iphone 5 and give me feedback on it and the user experience seemed overall positive.

Responsiveness

Testing the application had me try the different screen sizes using the dev tools chrome extension aswell as using different browsers. Responsiveness is present on all screen sizes.

Validators

HTML

CSS

JSHINT

Lighthouse

Known Bugs

• No knows bugs

Deployment

The site was deployed to GitHub pages

• In github repository, go to settings
• Select master branch as source location.
• Press the provided link
• Site is accessible via Movie Quiz

Credits

• Credit to my girlfriend for helping with testing of the quiz.