View the live project here.

This is a fictional website designed to engage the user in a unique and fun way and connect them with NuBiQ to play an online quiz every week. They can subscribe to stay updated with the current events of NuBiQ and use the social media links to stay connected with the company.

• User stories

  • First Time Visitor Goals

    1. As a First Time Visitor, I want to play a fun online quiz to test my knowledge about Netflix.
    2. As a First Time Visitor, I want to be able to easily navigate throughout the site to play the quiz.

  • Returning Visitor Goals

    1. As a Returning Visitor, I want to play a new fun quiz.
    2. As a Returning Visitor, I want to stay connected through the social media links.

  • Frequent User Goals

    1. As a Frequent User, I want to sign up to the Newsletter to stay updated with the current events of NuBiQ.

  • Owners Goals

    1. As a Owner, I want to make an online quiz that visitors can play for fun.
    2. As a Owner, I want to provide an entertaining quiz for visitors to test their knowledge about Netflix.
    3. As a Owner, I want to make a good working quiz so that the visitor comes back to play more.
    4. As a Owner, I want to provide social media links to stay connected.
    5. As a Owner, I want to keep the visitor updated with new quizzes and current events.

• Design

  • Colour Scheme

    • The two main colours used are Red and Dark Blue. Had used white and a little bit of Purple color for contrast.

  • Typography

    • The Lato font is the main font used throughout the whole website with Sans Serif as the fallback font in case for any reason the font isn't being imported into the site correctly. Lato means 'Summer' in Polish. It is easy and clear to read and belongs to the three most popular font sizes used.

  • Imagery

    • Imagery is important. The large, background hero image is designed to be striking and to catch the user's attention. The big red N and dark Blue background are catching for the eye.

• Wireframes

  • Wireframes Desktop, Tablet and Mobile - View

• Collapsed sidebar where you can link to the different sections of the page and Logo.

• The Landing page with a picture and text which quiz topic you can play.

• Three different boxes to play the quiz: The first is the Start box where you can start to play and see how many questions you need to answer. And where you need to fill in a username before you can start. The second box is where you answer the questions with the options and the little circles to see how many right and wrong you have. You need to answer before you can continue to the next question. Finally you have the Result box where you see the result with your username and the pop up box that thanks you for playing and let you know you can subscribe.

• The subscribe section where you can submit your email to get the Newsletter.

• The footer shows the icons of the social media links.

• Interactive elements like the sidebar for navigation. The quiz boxes and pop up box after playing and the subscribe button where you get an alert when clicked to subscribe. In the footer you can find the social media links.

• Submit email to receive a Newsletter and stay updated with new quizzes every week.

• Every week there will be a new type of quiz to play with another subject and questions.

• The quiz is made so that you can change the questions for a new quiz (in the file questions.js) every week.

• HTML5
• CSS3
• JavaScript

1. Google Fonts:
   • Google fonts were used to import the 'Lato' font into the style.css file which is used on all pages throughout the project.
2. Font Awesome:
   • Font Awesome was used for the social media links and the envelope to enter your email for the Newsletter.
3. Git:
   • Git was used for version control by utilizing the Gitpod terminal to commit to Git and Push to GitHub.
4. GitHub:
   • GitHub is used to store the projects code after being pushed from Git.
5. Balsamiq:
   • Balsamiq was used to create the wireframes during the design process.

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

• W3C Markup Validator - Results

• W3C CSS Validator - Results

• JavaScript Validator ES6 - Results app.js & Results questions.js

• JSHint - Result app.js & Result question.js.

  Testing User Stories from User Experience (UX) Section

• First Time Visitor Goals

  1. As a First Time Visitor, I want to play a fun online quiz to test my knowledge about Netflix.

     1. Upon entering the site, users are seeing that the quiz questions are about Netflix and they can easily start and play the quiz when push the start button after they typed in a username.
     2. After each question they know if the answer is right or wrong through the color green or red. Than they go to the next question with the next button.
     3. When they have finished the quiz they get the results right away in a clear table and they can choose to play again or go to the homebox. They also see the result with their username.
     4. The questions are set up random everytime you play. There are 30 questions in total and it displays just 12 to play. Because the questions are random picked you can play the quiz multiple times.

  2. As a First Time Visitor, I want to be able to easily navigate throughout the site to play the quiz.

     1. The site has been designed to be clear and easy to use with not a lot of text. At the top of the page there is a side navigation bar that opens when you click on the hamburger button. When you click on a link you go to that section. a. Known Bug is that when you click on the Quiz link it goes to the quiz section but you see also the newsletter section. This is because the sections are not that big. And you have to press the 'x' to close the sidebar.
     2. You can play the quiz, subscribe to the Newsletter and connect through the social media links. a. Known Bug is that i used for the form action="" (empty) because it is a fictional website.
     3. It is a one page website for entertaining purpose and a options to be updated and play different quizzes every week.

• Returning Visitor Goals

  1. As a Returning Visitor, I want to play a new fun quiz.

     1. Every week you can play a new quiz with different questions if you visit the website. a. Known Bug is that because it is a fictional website made for studie purpose i will not change the questions every week. But it is possible.

  2. As a Returning Visitor, I want to stay connected through the social media links.

     1. When you click on the social media links you can visit the page of NuBiQ and stay connected with them. a. Known bug is that the links to social media are not linked to NuBiQ because it is fictional.

• Frequent Users Goal

  1. As a Frequent User, I want to sign up to the Newsletter to stay updated with the current events of NuBiQ.

     1. Through the Newsletter that you receive in your email you stay updated about which quiz is coming for the next week. It is easy to subscribe with a entering your email that is required to submit. a. Bug also here because it is fictional there is not a real newsletter. b. Bug is that when you subscribe it is not linked to an emailaddress of the company because it is a fictional website so i did not use emailjs. Instead made an alert in javascript to send an window alert that say Thank you for subscribing. So an event is happening when you click on the subscribe button.

• Owners Goals

  1. As a Owner, I want to make an online quiz that visitors can play for fun.

     1. When visiting the website it is easy to navigate and see which subject the quiz is about and how many questions to answer. When you press the start button you can play the quiz and you will see the result right after with your username. In that way it becomes more personal and you could make a print screen and share it with friends.

  2. As a Owner, I want to provide an entertaining quiz for visitors to test their knowledge about Netflix.

     1. This week the quiz is about your Netflix knowledge and next week ther will be another quiz to play. In this way you keep entertaining the visitor.

  3. As a Owner, I want to make a good working quiz so that the visitor comes back to play more.

     1. The challenging questions will keep the visitor's attention and curiosity to come back for more.
     2. The quiz is easy to play and gives you the result in percentage and the right and wrong questions.
     3. When you play and answered a question wrong you will see the right answer too. But the questions and answers are shuffled so you can play multiple times if you want.

  4. As a Owner, I want to provide social media links to stay connected.

     1. At the footer of the page you can click on the different social media links, like Facebook, Instagram, tiktok and YouTube and go the page right away.

  5. As a Owner, I want to keep the visitor updated with new quizzes and current events.

     1. When you subscribe to the Newsletter you get an update every week through email and find out what the events are and which quiz is coming the week after. Events could be something like winning prices if you post your quiz result on your social media and be in the top three of the best players.
     2. Through social media you can have a lot of new visitors on your website.

• Further Testing

  • The Website was tested on Google Chrome, Opera, Microsoft Edge and Mozilla Firefox.
  • The website was viewed with google chrome on a variety of devices such as Desktop, Laptop, iPhone5/SE, iPhone 6/7/8(plus), iPad & Ipad Pro.
  • The website was tested on Google Chrome Lighthouse for desktop and mobile. desktop & mobile
  • The responsivness testing was viewed on website responsive designchecker. For different inches Desktops, Apple Ipad, Amazon Kindle Fire, Samsung Galaxy Tab 10, Sony Xperia Z2/3 en Samsung Galaxy S5/6/7.

• Known Bugs

  • On mobile devices the Enter Your Email had covered the whole width of the screen this can look out of proportion.
  • On mobile devices the open en closed sidebar took out to much space so that the content of the website could not be seen good. Debugged that to take away the open en closed sidebar.
  • With the jshint validator it gave an error for const and let because it is just available in es6 version.
  • On mobile devices the text that pops up after your result in the landing page is not fully readable. Had fixed that to add to mediaquery for mobile and put the text-box up.
  • The browsertesting for Microsoft Edge gave an error on the ms-filter for css that was not supported by Chrome, Chrome android and Samsung internet. And gave a warning that response should include 'x-content-type-options' in the header.
  • For Mozilla-Firefox it gave a warning that the keyboard events on the website were not available on some keyboards.

To deploy the project

• The site was deployed to GitHub pages. The steps to deploy are as follows:
• In the GitHub repository, navigate to the Settings tab
• From the source section drop-down menu, select the Master Branch
• Once the master branch has been selected, the page will be automatically refreshed with a detailed ribbon display to indicate the successful deployment.

The live link can be found here - (https://ellis882.github.io/NuBiQ-quiz-online-mp2/) To clone the project

• Under the repository’s name, click Clone or download.
• In the Clone with hTTPS section, copy the given URL.
• In your IDE of choice, open Git Bash.
• Change the current working directory to the location where you want the cloned directory to be made.
• Type git clone, and then paste the URL copied from GitHub.
• Press enter and the local clone will be created.

• The quiz code came from YouTube Tutorial The WebShala

• The code for the collapsed sidebar came from W3Schools How to

• The code for the newsletter came from YouTube Tutorial Coding Market

  Content

• All content for the Netflix quiz questions came from Manchester evening news and Cambridge-news

  Media

• All Images came from Unsplash

• The icons came from Font Awesome

  Acknowledgements

• My Mentor for continuous helpful feedback.

• Tutor support at Code Institute for their support.