View The Live Project Here

1. Introduction
2. UX
   1. Ideal User Demographic
   2. User Stories
   3. Development Planes
   4. Design
3. Features
   1. Design Features
   2. Existing Features
   3. Features to Implement in the future
4. Issues and Bugs
5. Technologies Used
   1. Main Languages Used
   2. Frameworks, Libraries & Programs Used
6. Testing
   1. Testing.md
7. Deployment
   1. Deploying on GitHub Pages
8. Credits
   1. Content
   2. Media
   3. Code
9. Acknowledgements

This website is a quiz created to test your knowledge of the hit show Game Of Thrones that ran for 8 seasons from April 2001 until May 2019, set in the fictional kingdom of westeros. In the mythical continent of Westeros, several powerful families fight for control of the Seven Kingdoms. As conflict erupts in the kingdoms of men, an ancient enemy rises once again to threaten them all. Meanwhile, the last heirs of a recently usurped dynasty plot to take back their homeland from across the Narrow Sea. This quiz will test your knowledge on the world of westeros and the charaters to the max.

This website was made for the first of five Milestone projects required to complete the Diploma in Software development (eCommerce Applications) program at The Code Institute.

The main requirements of this project are to build a responsive and interactive front-end site using all the technologies learned so far, namely HTML5, CSS3 and JavaScript.

The ideal user for this website is:

• Current user
• Gaming user

1. As a current user, I want to easily navigate through the site and access quiz ease.
2. As a current user, I want to easily navigate to content I have previously viewed within a small number of steps.
3. As a current user, I would like to see new content added to the quiz and questions updated that works with the current format.

1. As a new user, I want to easily navigate the entire site intuitively.
2. As a new user, I want the information I seek to be easily accessible and relevant.
3. As a new user, I want attractive and relevant visuals and colour schemes that work with the content.
4. As a new user, I want to get access to a site that has good accuate questions with correct answers.

To create a fully operational quiz using java script based on the hit tv show game of thrones, to update and change the questions to make sure it does not become repetitive.

Strategy incorporates user needs as well as product objectives. This website will focus on the following target audience, divided into three main categories:

• Roles:

  • Current users
  • New users
  • Gaming users

• Demographic:

  • All ages
  • Worldwide

The scope plane is about defining requirements based on the goals established on the strategy plane. Using the information in the strategy plane, the identified required features have been broken into the following two categories.

• Content Requirements:
  • The user will be looking for:
    • Accuate questions with correct answers
    • Images from the series
    • Regular quiz updates
• Functionality Requirements:
  • The user will be able to:
    • Be able to easily navigate the site to find the quiz or information they require.
    • Be able to sign up to recieve news and updates.

The information above was then organized in a hierarchical tree structure, a site map, showing how users can navigate through the site with ease and efficiency, with the following results:

Wireframes were made to showcase the appearance of the site pages while keeping a positive user experience in mind. The wireframes were created using a desktop version of Balsamiq.

Back to top

Each page within the site has a consistent and responsive navigation system. The details of features on the site are detailed below.

• The Header is across the top of the page. It is not static as this would cover too much of the screen. A back-to-top button was implemented instead so users can access the navigation bar quickly.
• The Navigation Bar is positioned directly below the header.
• The Footer is 100% in width and 40px in height. It stays at the bottom of the screen at all times, on all screen sizes. Each social media link opens in a new tab. Additionally, each social media link opens in a new tab to relavent social media page. Each page within the site has a consistent and responsive navigation system. The details of features on the site are detailed below.
• The Sign Up Form is to provide a way for users to contact the develper and they can be informed of quiz updates.

• Header - Appearing on almost every page for brand recognition.
• Navigation Bar - Appearing on almost every page for a consistently easy and intuitive navigable.
• Social Media Icons - Appearing on almost every page, the icons are appropriate representations of the Social Media platforms.
• Back To Top Scroll - Apearing on the Intro page and the Quiz when on smaller screens it allows the user to get back to the top of the page with one click.
• Contact Form - A contact form is used in the Contact Page, to provide a point of contact for the user.
• Intro Page - Provides a summary of the TV series game of Thrones and a little quiz introdution.
• Quiz Page - This page has the Quiz game on it and provides the user with a score at the end.
• Sign Up Page - This page provide the user with a place to sign up to get information on when the quiz is updated.
• Sin Up Dump Page - This page is were the user is taken after submiting the form in the sign up page.

• Helpful Links Page
  • Feature
  • Expand the quiz and make more levels to progress too.
  • Add java script to get the contact form to send an email.
  • Reason for not featuring in this release - Not enough time to find these out before the submission date also I may not be aware of some of these events.

Back to top

• Footer Not At bottom of Page - A bug was detected with the footer on the quiz and sign up dump page not staying at the base of the screen. It was rectified by fixing it to the bottom of the page.
• Header and Footer Responsivness - A bug was detected on smaller screens that the header and footer do not fit the width of the screen. The issue was rectified by finding the div and making it responsive to smaller screens
• Footer on Quiz Page - A bug was detected on the quiz page with the footer being fixed it was covering the bottem on the quix box when playing. It was rectified by changing the footer and html to display releative this means the footer stays at the bottom of the page and move down when quiz box expands.

• Contact Form Sending Emails - I put in place using emailjs and java script a way for the contact form to send an email when doing this i had some issues with the form not loading also auto response was not working. If i had some more time i would have fixed this and implenmented this, for now i have removed this so the contact form works.

Back to top

• HTML5
• CSS3
• JavaScript

• Google Fonts
  • Google fonts was used to import the fonts into the style.css file. These fonts were used throughout the project.
• Favicon
  • Favicon was used to add an icon to the website tab. These were used throughout the project.
• Font Awesome
  • Font Awesome was used on almost all pages throughout the website to import icons (e.g. social media icons) for UX purposes.
• GitPod
  • GitPod was used for writing code, commiting, and then pushing to GitHub.
• GitHub
  • GitHub was used to store the project after pushing
• Balsamiq
  • Balsamiq was used to create the wireframes during the design phase of the project.

Back to top

Testing information can be found in a separate testing file

To deploy this page to GitHub Pages from its GitHub repository, the following steps were taken:

1. Log into GitHub or create an account.
2. Locate the [GitHub Repository](add link here "Link to GitHub Repo").
3. At the top of the repository, select Settings from the menu items.
4. Scroll down the Settings page to the "Pages" section.
5. Under "Source" click the drop-down menu labelled "None" and select "Main".
6. Upon selection, the page will automatically refresh meaning that the website is now deployed.
7. Scroll back down to the "Pages" section to retrieve the deployed link.

• Some of the text used in various pages were borrowed and adapted from various sites, Listed below.
  • Wkipedia
  • Favicon
  • IMBD

• Almost all the images came from IWM and Google Pictures

The developer consulted multiple sites in order to better understand the code they were trying to implement. For code that was copied and edited, the developer made sure to reference this with the code. The following sites were used on a more regular basis:

• Stack Overflow
• W3Schools
• MDN Docs
• DevDocs API Documentation

Back to top

• I would like to thank my family for their valued opinions and critic during the process of design and development.
• I would like to thank my tutor Seun, for their invaluable help and guidance throughout the process.
• Lastly, I would like to extend my deepest gratitude to the amazing people in Slack who helped me rigorously test every aspect of my site.

Back to top