View the live project here.

This is a website for a simple quiz game about the Dutch Elfstedentocht (transl. "Eleven Cities Tour"), a long distance skating event on natural ice. Every time there is a prolonged period of frost, Dutch people anxiously await the decision whether this will be the year there will finally be another Elfstedentocht. The last event took place in early 1997. This year (2021) we came close, but due to the ongoing pandemic it was regretfully decided not to hold the race (which didn't stop individual citizens from skating the route on their own though).

The purpose of this website is to provide the skating community with a quiz game as entertainment while they wait for the next Elfstedentocht. It is intended to bring the event to the attention of people outside the Dutch skating community. The name "It sil heve" was chosen because the words are synonymous with the Elfstedentocht anticipation. They are Frisian and mean "It will happen", they were used to announce the 1985 event and are also displayed on the Elfstedentoch monument. The website is designed to be responsive and accessible on a range of devices, making it easy to navigate for potential users.

• User stories

  • Visiting User Goals

    1. As a visiting user, I want to easily understand the main purpose of the site.
    2. As a visiting user, I want to be able to easily navigate throughout the site.
    3. As a visiting user, I want to know my position in the game.
    4. As a visiting user, I want to compete.

• Design

  • Colour Scheme

    • There are eight colours used throughout the site, the first two are main colours and the remaining six are used for accents.

    Main colours

    

    The colours #41464b and #a1b8d6 were chosen as they approach the palette of the background image on the index.html. The colours are cool to approach the colours seen in the landscape on a Dutch winter day, but with enough gray to not become too harsh when viewed on a screen.
    

    Accent colours

    

    The colours #3b4044, #3accf, #6e91bf, #90ee90 and #ffb6c1 are accent colours. The first two are used in hover effects and box-shadows. #6e91bf is used on the game.html page to better set apart the answer-prefix. The last two colours are also used on the game.html to indicate whether the correct or incorrect answer has been selected. 
    

  • Typography

    • The Raleway font is the main font used throughout the whole website with Sans Serif as the fallback font in case the font isn't being imported into the site correctly. Raleway was chosen as it is an elegant sans-serif typeface family.

  • Imagery

    • The large background image on the index.html is representative of long-distance skating on natural ice in the Netherlands: large, open space with a few people. It provides a very serene scene, which was used as the guiding sense for the rest of the project.

• Wireframes

  • Home page wireframe - View

  • Game page wireframe - View

  • End of game page wireframe - View

  • Scoreboard page wireframe - View

  • Mobile wireframes - View

  • Tablet wireframes - View

• Background image which conveys the atmosphere of skating on natural ice in the Netherlands.

• Name of the game and the topic are clearly visible. Text is intentionally kept to a minimum so as not to detract from the serene atmosphere of the background image.

• Call to action button labelled "How to Play" which when clicked opens a modal with instructions to the game.

• Call to action button labelled "Let's Play" which when clicked opens the game page.

• Call to action button labelled "Scoreboard" which when clicked opens the scoreboard page.

• Top left of the screen holds a section labelled "Question" which shows the number question the current question is out of the maximum of ten questions in every game.

• Top right of the screen holds a section labelled "Score" which shows the number of points accumulated in the game so far.

• Middle section holds the question and a group of cards underneath which display the four possible answers to each question. The cards serve as buttons and have a hover effect. When selected the normally white background of the card changes colour to indicate whether the selection was correct or not.

• Below the answers is a call to action button labelled "Home" which when clicked opens the home page.

• Page loads automatically after 10 questions have been answered.

• The total number of points scored is clearly stated.

• The user is prompted to enter their name in the input box in order to save their score.

• The save button below the input box is disabled until a character has been entered into the input box.

• Call to action button labelled "Play again" which when clicked opens the game page.

• Call to action button labelled "Home" at the bottom of the scoreboard which when clicked opens the home page.

• Scoreboard is shown with the header "Scoreboard" and a maximum of 5 scores to be displayed.

• Call to action button labelled "Home" at the bottom of the scoreboard which when clicked opens the home page.

• A Dutch version of the site so it will serve the Dutch general public as well. This was not done due to time constraints.
• A background information section which will give some instant information without having to search for it elsewhere online.
• More questions to create a greater variation in the quiz.

• HTML5
• CSS3
• JavaScript

1. Bootstrap 5:
   • Bootstrap was used to assist with the responsiveness and styling of the website.
2. Google Fonts:
   • Google fonts was used to import the 'Raleway' font into the style.css file which is used throughout the project.
3. Font Awesome:
   • Font Awesome was used to add the icons to the navigation and modal buttons used throughout the project.
4. jQuery:
   • jQuery came with Bootstrap to make the navbar responsive but was also used for the smooth scroll function in JavaScript.
5. Git
   • Git was used for version control by utilizing the Gitpod terminal to commit to Git and Push to GitHub.
6. GitHub:
   • GitHub is used to store the projects code after being pushed from Git.
7. Balsamiq:
   • Balsamiq was used to create the wireframes during the design process.
8. TinyJPG
   • TinyJPG was used to reduce image file sizes.
9. Coolors
   • Coolors was used to generate the palette used throughout the site.

The W3C Markup Validator, W3C CSS Validator Services and JSHint were used to validate every page of the project to ensure there were no syntax errors in the project.

• W3C Markup Validator

  • Home - Result
  • Game - Result
  • Endgame - Result
  • Scoreboard - Result

  No errors or warnings were given for the HTML code.

• W3C CSS Validator

  One error and one warning were given for the CSS code - Results The error referred to the fact that for the hover effect on the buttons transform: scale(0.3rem) was used. Rem is not allowed as a value for transform. Correcting this to transform: scale(1.3) resolved the error.

  The warning referred to the fact that the W3C CSS Validator cannot check linked/imported files in direct input. Style.css has an import link for the Google Font of 'Raleway' and the link to the background image for the home page. This seems to be a minor issue inherent to the way the validator is set up, but as it doesn't impact the function of the site I've decided to leave it as is. - Results

• JSHint
  The linter gave no fatal errors, only warnings. Most of these pertained to the fact that the syntax used is only available in ES6. As the code also doesn't produce any errors in ChromeDevTools I desiced to leave the code as it is.

  Script.js - Results

  Endgame.js - Results

  Scoreboard.js - Results

I used Google Lighthouse to audit the site's performance, accessibility, use of best practices and search engine optimization.

Testing resulted in the following score:

• Performance: 98%
• Accessibility: 100%
• Best Practices: 100%
• SEO: 100%

Performance - Two suggested improvements involved removing or altering CSS and JavaScript elements which are included in Bootstrap. I decided against tampering with this.

To test the responsiveness of the site Chrome DevTools and Responsive Design Checker were used. Screenshots for the home page and the game page are included. The end game and scoreboard pages with their minimal content followed the same line as the other two pages.

Desktop 1920x1080 - View

Notebook 1366x768 - View

Tablet 800x1280 - View

Tablet 768x1024 - View

Smartphone 414x736 - View

Smartphone 320x568 - View

Desktop 1920x1080 - View

Notebook 1366x768 - View

Tablet 800x1280 - View

Tablet 768x104 - View

Smartphone 414x736 - View

Smartphone 320x568 - View

Only on the smallest smartphone screen (320x480) did the background image interfere with the text on the buttons. Screensizemap was consulted to determine the popularity of this screen size. The popularity listed for this type of screen hovers around 2% and seems to concern smartphones which can be considered at the end of their lifecycle. It is listed as a known issue.

• Visiting User Goals

  1. As a visiting user, I want to easily understand the main purpose of the site.

     1. Upon entering the site, users are automatically greeted with the clean and easily readable page which contains the title heading "It sil heve" and underneath that the subheading "Elfstedentocht quiz" with three buttons to go to the page of their choice. View
     2. Underneath the titles are three buttons labelled "How to play?", "Let's play" and "Scoreboard".
     3. Text has intentionally been kept to an absolute minimum.

  2. As a visiting user, I want to be able to easily navigate throughout the site.

     1. The buttons on the home page provide the user with clearly marked links to the respective pages. These buttons are the same across all pages. View
     2. The home button is located at the bottom of every screen View, except of course the home page itself.
     3. The game page automatically opens into the end of game page upon completion of the game View
     4. After submitting a username and saving their score, the scoreboard page also loads automatically View and View

  3. As a visiting user, I want to know my position in the game.

     1. On the game page the user is presented with the question counter in the top left hand corner. View
     2. The counter shows what question out of ten question in a game the user is currently playing.
     3. A new question is automatically loaded one second after submitting the answer to the previous question.
     4. An easily distinguishable "Home" button sits at the bottom of the screen should the user wish to abort the game and return to the home page View
     5. At the end of the game, the end of game page is automatically opened and the user is urged to submit their name to be added to the scoreboard. View

  4. As a visiting user, I want to compete.

     1. On the home page, the user is first presented with a button labelled "How to play?" View which when clicked opens a modal with instructions View
     2. On the home page, the user is presented with a button labelled "Let's Play" which when clicked opens the game page View
     3. The game page loads questions automatically View
     4. Correctly answered questions are noted in this manner while incorrectly answered questions are noted in this manner.
     5. At the end of the game the user is prompted to enter their name and submit their score.
     6. Alternatively, the user can view the scoreboard or play again to improve their score.

• On mobile devices with a screen narrower than 360px the contents of the card section on index.html pushed out of alignment.
  • Text and text on buttons disappears from view as a result.

The project was deployed to GitHub Pages using the following steps:

1. Log in to GitHub and locate the It-sil-heve repository
2. At the top of the Repository (not top of page), locate the "Settings" Button on the menu.
   • Alternatively Click Here for a GIF demonstrating the process starting from Step 2.
3. Scroll down the Settings page until you locate the "GitHub Pages" Section.
4. Under "Source", click the dropdown called "None" and select "Master Branch".
5. The page will automatically refresh.
6. Scroll back down through the page to locate the now published site link in the "GitHub Pages" section.

By forking the GitHub Repository we make a copy of the original repository on our GitHub account to view and/or make changes without affecting the original repository by using the following steps...

1. Log in to GitHub and locate the It-sil-heve repository
2. At the top of the Repository (not top of page) just above the "Settings" Button on the menu, locate the "Fork" Button.
3. You should now have a copy of the original repository in your GitHub account.

1. Log in to GitHub and locate the It-sil-heve repository
2. Under the repository name, click "Clone or download".
3. To clone the repository using HTTPS, under "Clone with HTTPS", copy the link.
4. Open Git Bash
5. Change the current working directory to the location where you want the cloned directory to be made.
6. Type git clone, and then paste the URL you copied in Step 3.

$ git clone https://github.com/YOUR-USERNAME/YOUR-REPOSITORY

7. Press Enter. Your local clone will be created.

Click Here to retrieve pictures for some of the buttons and more detailed explanations of the above process.

• Bootstrap5: Bootstrap Library used throughout the project mainly to make site responsive using the Bootstrap Grid System.

• YouTube: The game page with its JavaScript functionality was copied from this tutorial.

• I feel compelled to mention I spend countless hours wading through repositories and tutorials. I learned so much and was influenced by all of it. So thank you to all who have shared JavaScript code relating to quiz games online, this project would not have been possible without you.

• Inspiration for the questions was taken from Wikipedia.

• Background image for the home page by Steve Photography on Shutterstock

• Code Institure Student Care, Alexander Farrell for invaluable help.

• Code Institue assessors for understanding and leniency.

• Friends and family for feedback and helpful suggestions.