Embarr Equestrian Trivia Challenge- Deployed Site Link is a website page designed to be part of a bigger site for example Embarr Equestrian . The quiz page is targeted at horse owners or horse lovers that would like a simple fun interactive way of learning about general horse knowledge or care.

The page design was developed with mobile responsiveness at the forefront. It consists of one html page that should be developed further with improvements to the page structure in order to integrate with its master website Embarr Equestrian - Deployed Site Link.

The Quiz consists of ten shuffled questions that are presented with multiple choice question either two options or four options. When the user selects an answer, the correct one turns green and the wrong one turns red. The quiz result/score is incremented and on completion of the Quiz the user has the option to 'Try Again'.

• Provide a fun interactive learning experience
• Provide a great user experience on all mobile devices
• Be easy to navigate
• Give clear calls to action
• Function in a logical correct way

• I want to be able to navigate the site page/ quiz and understand its objectives clearly without confusion.
• I want to clearly understand how to complete the quiz.

• I would like to see more quiz options on a range equine topics for adults and children.
• I would like to see quizs updated & refreshed monthly with new challenges.

• Equine enthusiasts that want to learn more about equine general knowledge/ horse care in a simple fun interactive way.

• Title

• Logo

  The logo I created simply using a combination of text and a font awsome icon.

  

• Quiz Text

The Quiz text is a short simple description of the quiz and how to navigate it. If the quiz is developed further, more detailed instructions may be necessary. Currently the structure of the quiz is simple and structured so the user is presented with a clear navigation path through the quiz, without the need for excessive instructions.

• The page hero image

The landing page includes a hero image of a horse with a text overlay to allow the user to quickly see exactly what the site quiz is about. This section introduces the user to Embarr Equestrian with an eye catching hero image to grab their attention.

• Additional features
  • Currently the questions & answers are contained in the JavaScipt Code and can be inspected via Developer tools, further development required to read in the Q&A's from an external database.
  • UserName and login features
  • A dedicated 404 page
  • Add a progress bar.
  • Let users review answers before submitting.
  • Give users a summary of their answers after they submit.
  • Update the navigation to let users skip to any question number.
  • Create custom messages for each level of results. For example, if someone scores 8/10 or higher, call them a quiz ninja.
  • Add a button to share results to social media.
  • Save your high scores using localStorage.
  • Add a countdown timer to see if people can beat the clock.
  • Hide the text when starting the quiz.
  • Integrate the quiz page with the main master website, add a header/ navigation/ further quiz sections of various levels/ topics & footer.

• Javascript
• HTML
• CSS

• Git/ Github - Git/Github was used for version control, storage and deployment of the project.

• Font awesome - Font awesome icons were used throughout the site and for the logo creation.

• Google Fonts - Were used to import the Merriweather font used throughout the site.

• Hover: CSS - Was used to created the pop effect for the linked three images on the landing page and the colour hover effect in navigation menu & slideshow next/prev arrows.

• Javascript - JS script was used to action the quiz functions.

• Squoosh - This was used to prepare the images for web optimisation

• Techsini - This was used for the mockup image in the overview.

I tested the quiz application thoroughly and repetitively throughout the Javascript coding, using console.log() where necessary and the dev tools in chrome for debugging. I also had work colleagues and family members assistance to test the site usability. I tested all quiz buttons/ actions/ functions to ensure that they were working as expected. I tested the quiz logic was working as expected.

Test Script actioned:

1. Navigate to page
2. Review Quiz text
3. Click on button 'Play the Quiz'
4. Result - Quiz loads as expected with the 1st Question and multiple choice answers & 'Play Quiz button is hidden'

5. Select answer - The Correct answer turns green/ the wrong answers turn red.

6. On selecting an answer the 'Next' Button appears, the current answer buttons no longer can be actively selected and the score result is updated.
7. On clicking the 'Next' button the question/ answer containers are cleared and a new question is loaded, if the question only has two choices as opposed to four the answer grid appends accordingly.
8. On conclusion of answering all Questions the endgame function is actioned and a message of 'Quiz completed' is displayed with the final result and the 'Try again' button is enabled which on click refreshes the page so the user can complete the quiz again, clearing the Quiz and enabling the 'Play the Quiz' button.

9. Repeat the above steps a number to times to ensure that the questions are being loaded in a shuffled logic.

The conclusion of repeating the above test script multiple times was that:

• The quiz page and quiz itself was understandable and easy to use.
• All Buttons with eventlistners/ functions on completion of testing are working as expected.
• The Shuffled question logic is working as expected.
• The correct color hue is being loaded on selection of an answer - red for wrong/ green for correct.
• The results/ score is being incremented correcly.
• The quiz only actions the endquiz function once all questions have been answered.
• The select/ click action is disabled once a question is selected, it is only possible to move forward with the quiz by seclecting 'Next'
• The 'Play Quiz' button hides as expected on initialising the quiz.
• The 'Next' button only appears once a question has been answered.
• The Restart button only appears for the end quiz.

In my testing I discovered a couple of bugs that I fixed:

1. The score was incrementing on navigation through the quiz questions - this was resolved by using an if statment within the funtion onOptionClick so that the score would only increment if the answer was 'correct'.
2. The score was incrementing if the user clicked the correct answer button multiple times - this was resolved by removing the 'click' event listner ability once the user had made their selection.

There are now no known unfixed bugs to report.

I reviewed all content on the site for:

• grammar and spelling mistakes
• Images are placed properly with proper sizes & displaying as expected
• Instructions are clear and contain correct information
• Verified all text/ headings are displaying correctly

I tested that all hover effects were working for the buttons.

I ran the site through the lighthouse performance tool for developers: Lighthouse

I used chrome developer tools, Techsini & ami throughout all development of the site to ensure that it was responding to all devices down to 300px - 360px width

I tested the site responsiveness on my iphone/ ipad and my family/ friends android mobile devices to ensure the page was rendering and functional across a range of devices.

As the quiz is contained in a flex container and the design is basic , alot of media queries were not necessary, some media queries have been appplied in the CSS to reduce the size of the Quiz Buttons/ Text for smaller screens, however once the page is further developed these would be considered, actioned and tested accordingly.

I ran the JS Code through JShint

No errors detected

I ran the code through JavaScript Beautifier and copied it back into my JS file.

I ran the CSS Code through the following validator: Jigsaw

There were no errors detected

I ran the HTML Code through the following validator: Jigsaw

Once two stray div elements were removed no warnings/ errors were reported.

I ran the html code through a html beautifier and copied it back into the index file Code Beautify

I ran the code through the Autoprefixer and copied the parsed CSS back into my project.

Code inspired and adapted from the following tutorials and sources:

• https://www.sitepoint.com/simple-javascript-quiz/
• https://www.w3schools.com/js/default.asp
• https://simplestepscode.com/javascript-quiz-tutorial/
• https://www.youtube.com/watch?v=f4fB9Xg2JEY&list=WL&index=14
• https://www.youtube.com/watch?v=w-OKdSHRlfA&list=WL&index=13
• https://flexiple.com/disable-button-javascript/
• https://www.youtube.com/watch?v=jvk1pFNqXaw&t=1300s
• https://stackoverflow.com/questions/28610365/how-can-i-add-an-event-for-a-one-time-click-to-a-function
• https://www.youtube.com/channel/UCFbNIlppjAuEX4znoulh0Cw

And of course the Code Institute Javascript online module & challenges/ Love Maths

• Tutorials from W3schools, Elementor & from the Love Runnning Module.
• The image used was purchased from Shutterstock

• Tutorials & flexbox code adapted from Flexfroggy, W3schools, CSS tricks, CSS grid versus flexbox, Webdev

• Code taken from Mozilla & Box Shadow

• Code adapted from Mozilla

All content was written by the project owner.

• The hero image (purchased from Shutterstock)

• I used the Markdown cheat sheet and the love running template to help put together my readme.

I would like to thank my mentor Akshat Garg for his guidence.

• 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.

  • On submission the project it is forked, by forking the project a copy of the original repository is made that can be viewed without affecting the original repository by following these steps: In the GitHub repository, locate the settings, above this is the option to 'fork', select this to create a copy

  • Cloning a repository: When you create a repository on GitHub.com, it exists as a remote repository. You can clone your repository to create a local copy on your computer and sync between the two locations. It makes it easier to fix merge conflicts, add or remove files, and push larger commits.

The live link can be found here - Embarr Equestrian Trivia Challenge - Deployed Site Link