Welcome to Macramé Quiz. This quiz is created to test your knowledge about Macramé. I have added some history questions and some questions from the present times.

• UX

  • User Goals

  • User Inputs

  • Owner Goals

  • Requirements

  • Expectations

  • Design Choices

    • Fonts
    • Icons

  • Wireframes

  • Features

    • Existing Features
      • Welcome Page
      • Quiz Page
      • Save Result
      • Scoreboard Result
    • Unfixed Bugs

  • Languages and Websites used

    • Languages that I used
    • Tools

  • Testing

    • Responsiveness
    • Validation

  • Credits

• Visually appealing.
• Easily navigated around.
• Quality and valuable content.
• Form to save score.

• As a user I want the quiz game to save my score so I can compete with my friends and family.
• As a user I want to be asked tricky question so I can test my knowlodge about Macramé.
• As a user I want to be able to make contact to the website owner via different social media.
• As a user I want to be able to easily navigate through the website.

• Spread as much information as possible about Macramé.
• Increase the number of visiters.
• Increase rankings on search engines.

• Easy to navigate on various screen sizes.
• Keep the user interested with information to make them want to engage with the website.
• Visually inviting so users do not leave and recommend to friends and family.

• I expect all links to social media sites to be opened in a new tab.
• I expect all navigation links to work correctly.
• I expect screen size not to affect the quality of the website.
• I expect all answers to the questions to be correct and accurate.

In order to make the quiz more appealing, I have used the Google Fonts to find a text that best suits the feel of the website. For the main "Macramé Quiz" I have used Beau Rivage as I believe it needed to look different than the rest of the website but not too different that it starts looking weird. For the questions I have used the Ibarra Real Nova font and for the options I a used the Lato font. I believe these two font sits really well together.

I have used icons for my website from the Font Awesome library. These icons will only be used where there is no explination is needed and are really common among the users like social media links.

  Back to Top
 

I have used Photoshop to develop wireframes for my website. I initially created the desktop version first and then scalled it down for tablet and smart phones. Because a requirement is to give little but quality information to the user to make them want to engage with the quiz.

Wireframe Home Page

Wireframe Quiz Page

Wireframe Scoreboard Page

  Back to Top
 

Desktop

• The welcome page includes play button and High score button.

  

• The Quiz page includes questions and answer choices. It also includes useful information such as number of questions and score.

  

• This page includes the total score that 1 scores. It also lets you save your score to so you can compete with friends and family. There also usefull buttons to navigate such as "Play Again" and "Home" button.

  

• The Scoreboard page gives the score history and "Home" for user to go back to the main page.

  

  
    Back to Top
   

I wanted to add a function where if the selected answer is incorret the correct andwer will be triggered as well and highlight "green" but after trying many different combination of codes I could fix this.

• HTML
• CSS
• Javascript

• Gitpod
• Photoshop
• W3C HTML Validation Service
• W3C CSS Validation Service
• JShint Validation Service
• Font Awesome library
• Google Fonts

I feel that the site has hit the goals are required by everyone. The site responds nicely to all different screen sizes, the question section looks clean and responsive. It allows the user to save the their score The content is simple and to the point and the site is not overcrowded.
 

I have validated my project with the W3C Validator and I used JShind JShind to validate my Javascript codes.

I got few warnings for HTML but I think it works for me better this way so I left them the way they are, there were no errors.

I've also got few warnings for my JavaScript files but most of them were for "Missing semicolon" so I also left them the way they were.

Below are the validation images.

  Back to Top
 

Following writing the code then commiting and pushing to GitHub, this project was formed using GitHub by the following steps.

• Navigate to the repository on github and click 'Settings'.
• Then select 'Pages' on the side navigation.
• Select the 'None' dropdown, and then click 'master'.
• Click on the 'Save' button.
• Now the website is live on [https://naqij.github.io/Macrame-Quiz/]
• If any changes are required or made they can be done by committing and push to GitHub and the changes will be updated.

I would like to thanks.

• Simen Daehlin

And Kenan Wright

For code insperation, help, advice and encouragment.

For content and style insperation,

I used my wife's (Daima Zainab) thesis on Macramé and Celtic art.

• Instagram page of Daima Zainab

For code insperation I have looked into my first project "The Knots" to see which way the code reacted if changed into certein way and then applied the same on my second project which is Macramé Quiz project. I also wanted to keep the same theme as my first project so in future I could link the quiz to my website.

For code inspirations I went through my notes that I took throughout the course and also I checked out few Youtube videos to understand them better and use them correctly.

I have also used [https://www.w3schools.com/] for code insperation and testing the code before using on my website.

  Back to Top