Simple Minds is a three page quiz that begins on the home page. When the "play game" button is clicked, the user is taken to the game page.

The quiz is a fun, interactive multiple choice questionaire that is designed for Veterinary and Veterinary Nursing students from years 1-5. The questions are a mixture of course content from all of the years and test the students' general knowledge on several different topics.

The design of the quiz ensures that the user can easily navigate the content and the interactive design keeps the user engaged while updating them on their current score and how many questions they have until the quiz is completed.

Once the quiz is finished, the user is informed of their score and they have a choice to either play another game or to return to the homepage.

• First Time Visitor Goals

• As a first time visitor, I want to easily understand what the quiz is for.

• As a first time visitor, I want to find the quiz well structured and easy to use.

• As a first time visitor, I want to have a good experience that makes me want to come back to the site again.

• Returning Visitor Goals

• As a returning visitor I want to see what updates there are

• As a returning visitor I want to see more questions and topics to choose from

• As a returning visitor I want to be tested on specific knowledge

Build an online quiz that is a fun game/challenge. The target audience is Veterinary and Veterinary Nursing students from years 1-5. It is a general knowledge quiz that assesses multiple modules from the college course.

• It is a multiple choice quiz layout, the user must choose one option. The quiz will assess correct and incorrect answers and give the user this feedback.

• Potential future releases:

  • The addition of reasons behind the correct answer being correct.
  • A timer feature so that the user has to manage their time like a real exam.
  • The test could be broken down further into specific modules that the student could choose what to be tested on.

This is a three-page quiz.

• The homepage will display the button to be clicked to begin the quiz.

• This click will take the user to the game page that will display a question and options in MCQ style. There is an interactive display that counts the questions asked and the amount of correct and incorrect answers.

• Once the user has completed the game, they will be taken to the end page where they will be given their score and a choice to go back to the homepage or to play again.

The page will have a straightforward layout so that the user will easily find what they are looking for. The user has one option to begin the quiz, taking questions randomly from a bank of questions. The question is displayed and the user is given three choices to answer from. Once the answer is selected, the answer is assessed for correctness/incorrectness.The quiz moves on to the next question until the maximum number of questions has been asked. The user can then choose if they want to play the quiz again or go back to the home page.

Neutral colours are chosen so that the user doesn't get distracted by background images and colours. The green colour for the background adds to the user experience without compromising their ability to see what is being asked of them.

The font colour has been set to an off-grey/black colour so that it is less harsh to read. The font is set to Times, again so that it is clearly readable and the user can read everything easily.

• HTML5
• CSS3
• JavaScript

• Google Developer Tools - Used during the coding process to identify errors in CSS and in JavaScript files

• Font Awesome - The flask icon was imported from FontAwesome to add style to the homepage font

• Favicon - The pawprint favicon adds some small but nice detail to the tab so the user can recognize the tab if they click off of it

• Github - Used to store the project code after being pushed from Git

• Git - Used for version control

• Gitpod - Used to edit code and using the terminal to add and commit code with key messages that were pushed to Github

• Balsamiq - Used to create wireframes for the quiz

• Hover.css: - Used on the link elements and option containers to add interactivity for the user

• Responsive on PC, laptop, tablet and phone screens

• Interactive elements:

  • "Play Game" Button
  • Options
  • Progress Bar
  • Question Counter
  • Score Area
  • Return Home/Play Again Buttons

  Testing and Bugs

• HTML was tested using W3C Markup Validation Service

  • No errors detected.
  • Two warnings corrected where blank input was detected

  

• CSS was tested using W3C CSS Validation Service

  • No errors or warnings detected

  

• JavaScript was tested using ES6 Syntax Check

  • Two errors resolved, missing semi-colon (x2)
  • No warnings detected

• JavaScript was tested again through recommended JSHint

  • JSHint
  • Six unused variables were removed after detection
  • Twenty-five warnings related to ES6 were detected

  

• DevTools Lighthouse

  • Contrast issue with prefix background - updated green to a darker green

• Javascript unused variables (x6) detected in JSHint were removed

• Navigating between pages when different links were clicked was solved by my mentor Chris

• localStorage issue solved with the help of Sean, Tutor at CodeInstitute

• Desktop
• Laptop
• iPad
• iPhone 6/7/8 - 375px
• iPhone 5/SE - 320px

• Google Chrome

• Safari

• Microsoft Edge

• Mozilla Firefox

• My mentor Chris for his support and motivation
• Tutor support, Sean at CodeInstitute for his help and feedback
• CodeInstitute course content
• Fellow peers on Slack
• Stackoverflow for general queries

• Colour Scheme:

  • ColorSpace
  • Color Hunt
  • Coolors

• CSS Flexbox

  • FreeCodeCamp
  • Youtube tutorial - FreeCodeCamp
  • W3Schools
  • CSS Tricks

• Breakpoints

  • Microsoft
  • FreeCodeCamp - Media Quiries/Breakpoints
  • W3Schools

• Extra Reading

  • Sitepoint - arrow functions
  • Difference between universal selector and root pseudo class
  • MDN - Template Literals

• Markdown Cheat Sheet

  • Markdown Guide

• Design Elements

  • FontAwesome
  • Favicon
  • Add Favicon to page
  • Responsive Design
  • Converting Colours

• Tutorials

  • Written 1

  • Written 2

  • Written 3

  • Written 4

  • Video 1

  • Video 2

  • Video 3a

  • Video 3b

  • Video 3c

  • Video 3d

  • Video 3e

  • Video 3f

  • Video 3g

  • Video 3h

• Change option selection colour correct/incorrect

  • Oreilly.com
  • StackOverflow

• Creating delay

  • Tutorialspoint
  • Sitepoint

• Create Progress Bar

  • W3Schools
  • GeeksForGeeks
  • Youtube
  • StackOverflow

• Create Random Question

  • StackOverflow

• Convert HTML collection to array

  • StackOverflow

• Update Correct/Incorrect Counter

  • Updating the Scores - CodeInstitute

• CodeInstitute Student Projects for a better understanding around the topics

  • Quizzler-Javascript
  • MS2-Quiz-Game-1
  • javascript-quiz

Fork and Clone Your Repository

1. On GitHub, go to the selected repositories main page
2. In the top-right corner, click the Fork button
3. Go to your fork of the repository
4. Click  the green download code button
5. Clone the repository using HTTPS, under "Clone with HTTPS", then click .
6. Or, To clone the repository using an SSH key, click Use SSH, then click .
7. Or, To clone a repository using GitHub CLI, click Use GitHub CLI, then click .
8. Open the Terminal
9. Change the current working directory to the location where you want the cloned directory
10. Type git clone
11. Then paste the URL you copied earlier
12. Press Enter
13. You now have a local clone

Remote Deployment

1. On GitHub, go to your chosen repository
2. At the top of the repository on the right hand side, click the settings tab
3. Scroll down to the "Github Pages" section
4. Go to the branch drop-down menu and select a publishing source
5. Change the source branch to "master"
6. Click Save
7. Refresh the page.
8. Copy the live website link provided

Local Deployment

1. Go to Gitpod
2. Select the repository to be used and click open
3. In the terminal, type python3 -m http.server
4. Click Open Browser