Game Of Facts

As the Milestone 2 Project for Code Institute's, 'Interactive Frontend Development' portion of the Full Stack Developer Program, Game Of Facts is a web-based trivia game built for Game of Thrones fans and educators of global history. This project was built with HTML, CSS, Bootstrap 4, JavaScript, and jQuery to produce an educational and interactive experience.

UX

The primary goals of, ' Game Of Facts' are:

• Create an interactive trivia game that is both informative and fun.

• Present historical/factual information in a fun and learnable way.

Game Of Facts' target market is comprised of:

• Men & women (ages 18-34) who enjoy history and are fans of the, 'A Song Of Ice and Fire' book series and/or the HBO hit TV series, 'Game Of Thrones'.

• Educators of world/global history that want to incorporate games and pop-culture into their lesson.

NOTE: This game should not be played by anybody who has not finished the television or book series, as it may contain spoilers.

A full write-up of the target market analysis can be viewed here

User Stories were created during the development phase of this project to help the developer begin the wireframe process.

This document can be viewed here

This Strategy Plane activity was conducted to determine which features were the most important and most viable.

The trade-off activity can be viewed in full in this document

Once the strategy exercises were completed, the following wireframes were created by the developer to guide the development process.

All wireframes were created with Balsamiq wireframing software and can be viewed as a PDF document here.

Features

• How To Play: The 'How To Play' section allows users to read about the game before they get started by opening a modal with directions.

• Quiz Questions: The quiz section provides questions with multiple choices for users to read and answer by clicking on their best guess and triggering a modal to open.

• Multiple Choices: Displayed in the right-hand column, this feature allows the user to view the multiple-choice options and click on their desired choice so they can find out if they were right or wrong.

• Progress: The progress feature allows the user to see their progress in the game by displaying the number of the question they are currently working on out of the total number of questions in the game.

• Final Score: The final score section allows the user to see how many total questions they answered correctly, by displaying the score on the page at the end of the quiz.

Existing Features

• How To Play
• Quiz Questions
• Multiple Choices
• Progress
• Final Score

UX Design

Typography

The fonts selected for this project were:

1. Trajan-Pro-3, serif
2. Futura PT, sans-serif

The developer selected these fonts because:

• Trajan-Pro-3 is the font used for the official Game Of Thrones logo. It is widely recognized by Game Of Thrones fans and brings the right aesthetic to this web-based trivia game. This font was selected and used to style page titles, questions, progress, final score, and the game logo.

• Futura PT is a clean and modern sans-serif font that is recognizable and appealing to the project's target market. This font was chosen for answer explanations, multiple choices, navigation links, and other body text to compliment the Trajan-Pro-3, serif font.

Color Palette

The following color palette was chosen by the developer for this project:

Technologies

• HTML

• CSS

• JavaScript

• jQuery

• Bootstrap

• GitHub/GitHub Pages

• Git

• Gitpod

• JSHint

• CSS Autoprefixer

• W3C Jigsaw Validator

• W3C HTML Validator

• Popper.js

• Balsamiq

• Jasmine

Testing

Defensive programming was implemented by the developer to ensure the game's speed and functionality. To read a full write-up of these tests, please refer to TESTING.

Deployment

This project was deployed with GitHub Pages. The developer deployed the project successfully by following these steps:

1. Created a repository on GitHub.
2. Exported the project to Gitpod.
3. Opened the project in Gitpod.
4. Created index.html.
5. Built project website.
6. Committed and pushed all changes to GitHub.
7. Imported project into GitHub Desktop and VSCode to work on Animations_Branch and experiment with new features.
8. Committed and pushed all changes to GitHub.
9. Merged Animations_Branch into master.
10. Deleted alternate branches.
11. Once the project was completed, I visited "repository settings" on GitHub.com.
12. Scrolled down to the GitHub Pages section and clicked, "source".
13. Selected the 'master' branch for deployment.
14. Fired up a browser and went here to ensure deployment was successful.

To run this project locally

1. Follow this link to the project's GitHub Repository.
2. In the 'Code' section to the project name and description.
3. Click the green button labeled, 'Clone or download.'
4. Copy the provided URL.
5. Open Git Bash in your local Integrated Development Environment.
6. Type the command, git clone.
7. Paste this URL that was copied from GitHub earlier.

Another Option:

1. Follow this link to the project's GitHub Repository.
2. In the 'Code' section scroll passed the project's name and description.
3. Click the green button labeled, 'Clone or download.'
4. Click, 'Download Zip'.
5. Wait for the zip file to extract.
6. Open the folder.
7. Open index.html in your web browser

To run this project remotely

1. Open your local IDE
2. Type the command git remote add origin followed by this URL.
3. Run git remote -v
4. cd project folder

You can also:

• View a live version of this project here

Credits

Content and Research

• The target market research and demographic data used to create User Stories, Wireframes, and to pitch this project in README.md were obtained from Wired.com, BusinessInsider.com, WinterIsComing.net and Statista.com.

• The information about real historical events that inspired Game Of Thrones from the quiz portion of this project was copied from:

  1. BBC.com - to research real events that inspired Game of Thrones.
  2. History Behind Game Of Thrones - to research the real history behind Game of Thrones.
  3. LiveScience.com - for quiz content about Game Of Thrones filming locations
  4. The Week was used to obtain information about Scotland's historical Black Dinner of 1440.
  5. Ancient.eu and Brittanica.com were referenced to obtain historical information about The War Of The Roses.
  6. Fandom - the quiz answer about the Ironborn and Vikings was copied and pasted from this article.

Code

• The functions used to create the quiz for this project were copied from/learned by following the, 'How to Create JS Quiz App,' tutorial on Webdevtrick.com and adjusted by the developer.

• The modal dialog box used to display the correct question answers, GIF images, and descriptions was copied from Bootstrap.

• The modal dialog box used to display the directions for the game was copied from Bootstrap.

• The branded navbar with toggle expand was copied from Bootstrap.

• The GIF images used in each modal dialog box were copied from GIPHY.

• The media queries in the stylesheet were copied/learned from w3schools.com

• The classes used to style the game's grid and buttons were also copied from Bootstrap.

• The solution code for removing the blue outline from .navbar-toggler was copied from Stack Overflow and applied to the stylesheet.

• The JavaScript used to make the navbar toggler close automatically after a link is clinked was copied from Stack Overflow.

• The styles used to prevent the background from being scrolled while modal is open were copied from CSS Tricks.

Media

• The background image of the iron throne used in the jumbotron section was downloaded/licensed via Shutterstock.

Acknowledgements

• The JavaScript and jQuery techniques used to build this project were learned during the 'Interactive Frontend Development' portion of Code Institute's Full-Stack Software Developer Program.

• The markdown used to create this README.md document was learned from commonmark.org.

• Acknowledgments go to MDN Web Doc for providing learnable information about inheritance and the prototype chain, which were used to help me gain a more thorough understanding of prototyping in JavaScript.

• The article, 'Mastering Markdown' by GitHub Guides for providing a useful markdown syntax guide.

• Code Institute's README Template was used as a guide and foundation for this README document.