Giters

RoshnaVakkeel / Chem_Around_Us

A quiz to test your knowledge about the chemistry involved in our daily lives with fun and fact filled questions.

Home Page:https://roshnavakkeel.github.io/Chem_Around_Us/

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

css3html5javascriptchrome-devtoolsjshintlighthousew3c-validationuser-stories

CHEM AROUND US

A chemistry based informative Quiz for all. The inspiration is to provide a small challenge to the user and let them know how chemistry is everywhere. This quiz will leave them with some little extra knowledge and a smile!

Click here for Live Site


**So go ahead and have some fun!!**

CONTENTS

USER EXPERIENCE UX

  • User Stories

    • First Time Visitor Goals

      - As a student who is looking for a chemistry-based quiz, I want to solve challenges in the quiz that are inspired from academia, so that it helps me learn new concepts.
      - As a student who is looking for a chemistry-based quiz, I want to be given one chance only to click an answer, so that it lets me assess myself well.
      - As a student who is looking for a chemistry-based quiz, I want to get awarded for my efforts and my scores to be evaluated, so that I can assess how good I know the subject.
      - As a student who is looking for a chemistry-based quiz, I wish to be able to rate the quiz, so that I can let the creator know how I felt.

    • Returning Visitor Goals

      - As a student who is revisiting the quiz, I want to be encouraged to play the quiz again and again, so that they I can memorize the contents thoroghly.
      - As a student who is revisiting the quiz, I want to retake the quiz if my scores are low, so that I can try again and learn the answers well.

DESIGN

  • Quiz Structure

    The quiz consists of three main sections on a page, excluding the header. The landing section gives user an introduction about the structure of the quiz and a username input box to enter their username entry. Upon entering their valid username, a "Let's Begin" button appears. When clicked the user is led to the quiz section containing 5 multiple choice questions. Users can select the answers and can go ahead to the next questions by clicking next button . After finishing the questions the user raeches the result section. User can see their scores and a message with their name. Users can also provide rating by selecting the stars. If the user chooses to play the quiz again. They can click Back to Quiz Button and the quiz gets reloaded.

  • Typography

    - Google Fonts was used for the following fonts:
    - Font-family= Cabin - for all the paragraphs and normal text.
    - Font-family= Roboto Condensed for all headings.
    - UTF-8 Symbol was used as quiz logo - Atom symbol (Dec - 9883) and for rating section - white star (Dec : 9734) and filled star (Dec - 9733).

  • Responsiveness and Browser Compatibility

    - The layout of index.html utilises Flex styling for responsiveness. the pages were manually tested for the responsivenss.
    - Media queries are used in the website to adjust to the available space on different screen sizes.
    - The quiz was tested in Google Chrome and Microsoft Edge. It works well in these browsers. Mozilla Firefox shows compatibility issues.

  • Wireframes

    To model the quiz and to design the User Interfaces better, Wireframes were created for the website using Balsamiq.

FEATURES

  • Landing Section

    Landing section is the first page view of the quiz to the user. The section contains header, introduction to the quiz, username input box, a submit button. The details can be found in the picture below.

    • Header

      Header consists of a symbol of an atom used as a logo (Unicode UTF-8/Unicode Transformation Format) and name of the quiz "Chem Around Us."

    • Introduction Area

      The text in the introduction area gives a description of the quiz.

    • Username Input Field

      Username input area allows the user to enter a username that will later appear as a welcome message in the same page and the name will also appear in the result message area. The validation rules are described here:

    • Let's Begin Button

      This button appears when the user submits the valid acceptable username. By clicking this button the quiz section will be rendered visible to the user.

  • Quiz Section

    Quiz section contains header that is consistent with the landing section. The area is divided into the categories as shown below.

    The quiz area will initially contain just question and answers. When an option is clicked, a live-score area and the status information gets added to the quiz area.

    • Question Area

      Each time the next button is clicked, a new question gets loaded onto the quiz-box.

    • Option Area

      Each question has 4 choices for the user to select from. User is allowed to click on only one option. Once the selection is made, the other buttons will become inactive. The correct answer will appear as green button and wrong one in red color. Even is the rong answer is clicked the correct answer will appear in green color in order to guide the user to the right answer. The live score span will also appear above the question and a status of question will appear at the bottom of the box. Each correct answer increments the score by the value of 1.

    • Next Button

      Next button when clicked loads a new set of options with a next question.

  • Results Section

    After the user makes the selection of option of the last question, the result area will appear on the screen. The details are provided in the image below. A message containing the username will appear in the result area.

    • Score Area

    Final score will appear in this area. If user skips all selection, a message to make selection will appear in the same position.

    • Rating

    This area contains 5 white star symbols. User can click on their preferred number following which the selected stars will appear filled and a rating score will appear below.

    • Back to Quiz Button

    This button is a reset type button. The user lands on the first landing page upon clicking it.

  • Accessibility

    The quiz is rendered accessible as much as possible by using semantic HTML elements, providing adequate contrast to the fonts. To further ensure that the site is accessible tests with the Web Accessibility Evaluation Tool (WAVE) were conducted.

TECHNOLOGIES

Languages Used

This quiz is created using HTML5, CSS3 and JavaScript.

Libraries Used

  • Git - For version control

  • GitHub - To create my repositories, save and store my project files

  • Google Fonts - To import fonts

  • Font Awesome - For the iconography used in footer and links

  • Google Dev Tools - To debug, troubleshoot and test features and adjust property values. Using the Lighthouse extension installed in Chrome Browser, the performance report was generated.

ISSUES AND FIXES

  • Design Implementation

  1. My initial plan involved superposing each page on one another. But as there are buttons in different pages, it got confusing and styling became very complicated, So, to remove the confusion, I introduced an additional page named "questions.html". From the index.html, the page was linked using "action" tag. Clicking on which, user would directly get to the questions page. After recieving Mentor's suggestion on keeping no additional page and it is better in the initial stage to have a single html file i.e. "index.html". I copied all the codes from "questions.html" and pasted it to the "index.html" file. But there was an overlap of the sections, as I had provided style to #landing {position: absolute;} earlier. That was then changed to #landing {position: relative;} and the overlapping or super position was solved.

  2. Another change from the initial designs implemented were: removal of "Previous" button as the function implementation was going to be difficult as the data storage step would be involved.

  3. Styling of each div was made easy using flexboxes so that respinsiveness could be easily implemented. Initially all the divs were placed on the same page as per to document flow. In order to make it superpose one above the other. The class attribute named "hide" was introduced with display set to none to the sections "quiz-box" and "result". When we aspire to display the desired section, we could turn its display on using JavaScript "quizBox.classList.remove('hide'). The other method used to hide the previous section is "quizBox.style.display = 'none';".

  • Function Implementation
  1. In quiz section, initially I provided spans to enter the options. But upon answer selection, the other options still remain clickable. So, the spans were then changed to buttons, as they allow the coder to implement - button "disabled" option. Using the code "option0.disabled = true" (similarly for all options),all the buttons are disabled the exact moment click is made, so that user can only make single selection and cannot select any other answer.

  1. Second most troublesome issue I faced was once an option selection was made, the changes carried over to the next quiz-box options as well. The changes made would not revert to original. I solved it using the codes in the nextQuestion function: function nextQuestion() { option0.disabled = false; // buttons for selection are enabled so that the user can make a choice. option0.style.background = 'lightblue'; // buttons are reset to the original colour, so that the changes made do not carry over.}.
    All the buttons were given similar logical conditions to each option button.

  1. The third most challenging task was to get the correct answer appear green, even if the user selects the wrong answer and both the selcted wrong answer and the ecpected selecetd answer must appear on screen together. With my mentor's help, this issue was solved. By creating a new variable called options and was accessed using document.getElementById("options") from HTML . The correct option "correctChild" was located from the array and the correctChild/ correct option was given the color green. These codes were used to get the function to be executed: let correctChild = Array.from(options.children).find(child => child.innerText === questionList[i].answer);

correctChild.firstChild.style.background = 'green';
This piece of code makes the correct answer appear green even with or without user clicking on it.

TESTING

  • Validation


    Result of CSS validation: No errors found.

    • JSHint (Javascript)

      JSHint, which is a static Code Analysis Tool for JavaScript, was used to test compliance with JavaSCript standards.

      Result of JSHint validation:

    Metrics state that:

    • There are 11 functions in this file.
    • Function with the largest signature take 2 arguments, while the median is 1.
    • Largest function has 17 statements in it, while the median is 3.
    • The most complex function has a cyclomatic complexity value of 4 while the median is 1.
    • There are no errors or warnings.
    • According to the report, there is One unused variable "scoreCalc". It is actually a function name that I introduced. I found information that instead of defining a onclick function in index.html, one should add a event Listener in script.js instead. The scoreCalc function runs on 4 different buttons. I tried to change it and try, but due to its complexity, I couldn't fix it.

PERFORMANCE

  • Lighthouse Tool

    To test the performance, quality, and correctness of your web pages, Lighthouse chrome extension tool was used. Result:

  • WAVE Accessibilty Tool

    WAVE chrome extension is used to evaluate accessibility of the web content. WAVE did not report any errors or contrast errors.

DEPLOYMENT

Project Deployment on GitHub pages

GitHub pages were used to deploy the site. The steps to activate Github pages:
  • Navigate to the Settings tab in the GitHub repository.
  • Navigate to the 'Pages' tab on the left of the page.
  • Go to the 'Build and deployment' section, select 'Deploy from a branch' in the source dropdown.
  • Select branch 'main' and click on 'Save'.
  • Deployment link generated: https://roshnavakkeel.github.io/Chem_Around_Us/

CREDITS

  • Content

The fonts are imported from Google Fonts.
A few references used for JS coding:

ACKNOWLEDGEMENTS

I would like to acknowledge the following people who have helped me along the way in completing my second milestone project:
  • My Mentor Jubril Akolade for his guidance, best suggestions and constant encouragement. I very much appreciate his coding tips that helped me solve really complicated challenges I faced.
  • My fellow students for their company and encouragement. Kenan and Lane for guiding us through. Special thanks to Kristyna Maulerova for her encouragement and support.
  • My tutors who helped me understand the concepts better.

About

A quiz to test your knowledge about the chemistry involved in our daily lives with fun and fact filled questions.

https://roshnavakkeel.github.io/Chem_Around_Us/

css3html5javascriptchrome-devtoolsjshintlighthousew3c-validationuser-stories

Languages

Language:JavaScript 34.7%Language:Dockerfile 23.8%Language:HTML 22.3%Language:CSS 19.3%