Quiz - A Berry Herbal Quiz

An interactive webpage - a quiz about vegetables, fruit and herbs to entertain and educate user about some interesting facts that might spark more interest in veggies, fruits and herbs.

Technologies used

• HTML / CSS - for the styled skeleton of a webpage
• JavaScript - for dynamic quiz functions cooperation
• Github - for code control, record and publishing of webpage
• Wireframe is made using Lucidchart
• The icons were taken from Font Awesome
• Color palette was chosen using Coolors

Wireframes

Original idea for the interactive webpage involved a tarot-kind of entertainment, 'The Voice of Your Soul' was the name, and it was supposed to be giving user cards of inspiration, support, love and kindness, as a spiritual person and a vegan, I thought vegetables would be more appropriate. Nevertheless, there is an image of the wireframe of the first idea

My first idea seemed too spiritual so I decided to go for the second best thing, plant-based resources and interesting facts we never knew about vegetables, fruit or herbs, the image of wireframe for this quiz started like this

Features

• Home page offers for user to input value of number of questions, a button to start the quiz, button to see highscores(if any in local storage) and no highscores button if no quiz has been previously played

• There is a progress bar filling up as questions are answered, a button to restart the game while in the quiz area, a students github icon for link to github repository and a button for home page, there is clear visibility of correct and incorrect answers when user clicks while answering
• There is an option to save your score, start the quiz again, go to Home page and a Github corner button
• There is a footer that has Github link that opens in new page and students LinkedIn while on home page, and Home button with Github link while in main quiz area

• There is a highscores list if on local storage and a reset button to clear all data

Features left to implement

None, all features that were decided to be implemented were succsesfully applied in this quiz

Deployment

GitHub platform is used to deploy this project, in these steps:

• 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 Main Branch (alt: Master).
  • Once the Main 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

Local Deployment

In order to make a local copy of this project, you can clone it using the following command in your IDE terminal of choice:

• git clone https://github.com/totalnoMartina/quiz-about-veggies-and-fruits.git

Alternatively, if using Gitpod, you can simply click here to start your own workspace using this repository.

Testing

All testing showed no major issues or warnings

Browser Compatibility

This webpage is made on Chromebook, Linux, Google Chrome OS, Version 94.0.4606.97 (Official Build) (64-bit), in a Chrome Browser and is fully compatible with it, Chrome screenshot is below

Next browser tested is Safari on Iphone 6S and is fully compatible, and here is a screenshot

The Ecosia Browser (plant tree for every search)was tried in mobile and desktop versions and both were working smoothly, images are below

• Mobile version

• Desktop version

Responsiveness

Responsive Image - The webpage has been made taking into consideration three different sizes of the screen, max-width of 650px for mobile screen size, max-width being 850px for tablet devices and laptop screen size max-width being 1024px

Lighthouse Reports

Home Page Lighthouse Test

Main Quiz Lighthouse Test

Save Score Lighthouse Test

Highscores Lighthouse

Validators Testing

Main page HTML Validator

Main Quiz page HTML Validator

Save score HTML Validator

Highscores page HTML Validator

Main page CSS Validator

Main Quiz page CSS Validator

Save score page CSS Validator

Highscores page CSS Validator

Main page - JavaScript JSHint Test

Main Quiz - JavaSCript JSHint Test

Save score page - JavaScript JSHint Test

Highscores page - JavaScript JSHint Test

Bugs / Issues

• Some minor difficulties with implementing localStorage.getItem and kept losing a variable since last letter would be accidentally ommitted during code checking and re-arrangements, but with help of my mentor my letter was found, and with hint from tutor support I applied sessionStorage succesfully
• Mozilla Firefox was originally tested for responsiveness but apparently Mozilla displays black screen at this point, so I tried Ecosia Browser which works well

Credits

• At first I wanted to practice Javascript with coding a few quizzes as I belive repetition and practice is one of better ways to advance skills so I followed a coder provided in the link below and finally created this webpage, so here is a link to my repository

• The code that helped me make this quiz layout was found on this link

• Linear-gradient on my background and buttons are inspired by Wes, creator of JavaScript 30 projects in 30 days, and here is the link to the project which inspired me.

Content

• The link for some of the questions can be found here
• The hemp seed facts link
• Some questions and answers are inspired by this page
• Some facts about rosemary were found here
• Interesting facts about figs are found here
• I added font style form Google Fonts
• Turmeric facts can be found here
• Mushroom facts can be found here
• Some facts about Avocado can be found on this link and this link
• Some facts about broad beans - fava beans can be found here
• Facts about Artichoke can be found on this link
• Facts about Blueberries can be found on this link and also here
• Facts about onion can be found on this link

Media

The responsive image that contains all three screen sizes is made using Canva