Portfolio 2

Online Quiz: Test Your Knowledge about Sweden's Parliament

This project is a simple online quiz built with HTML, CSS, and JavaScript. The quiz tests users' knowledge about Sweden's Parliament with multiple-choice questions and provides feedback with scores at the end. Users can create an account with a username and password before starting the quiz.

Features

Username and Password Login:

Users need to create a username and password to start the quiz.

Multiple-choice Questions:

The quiz includes questions with multiple answers about Sweden's Parliament.

Visual support to answers:

Correct and incorrect answers are visually indicated during the quiz.

Score Tracking:

The user’s score is displayed at the end of the quiz.

Restart Option:

After completing the quiz, users can restart and take the quiz again.

Structure

The Quiz include html, css, javascript files and assets file with images plus README.md file

Design Section

Color choices

The main color for the background is #006aa7 blue that representing the Swedish flag.

Font Choices:

The chosen font is Arial

Layout:

The site is structured using a centered container design with a maximum width of 500px to ensure a focused and readable quiz experience. Media queries are used to adjust the layout on smaller devices, such as mobile phones.

Browser Testing:

The website tested on Google Chroom, Mozila and safari , no issues found.

Credits

Icons and Images: Icons and images used for feedback (correct/incorrect answers) were sourced from shutterstock.

Quiz Questions: The questions about Sweden's Parliament were created based on official information from Swedish government resources.

Sound effects: The correct and incorrect sound effects used for doing the website more engaging from pixabay

Setups

1- Clone the repository:

klick here to see the project in githubKlick Here

2- Deployment:

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.

The live link can be found hereKlick Here

Customization

Adding More Questions:

Its possible to add more questions to the quiz by modifying the questions array in the main.js file.

Content

The texts for the Home page was taken from Swedish riksdags websidan

Validator Testing

• HTML

No errors were returned when passing through the W3C html validator

• CSS

No errors were found when passing through the W3C CSS validator

• JavaScript

No errors were found when passing through the W3C Javascript validator

• There are 11 functions in this file.

• Function with the largest signature take 1 arguments, while the median is 0.

• Largest function has 12 statements in it, while the median is 4.

• The most complex function has a cyclomatic complexity value of 3 while the median is 2.

Accessibility

What did I do to Improve the Website Design and Interactivity according to the feedback

Added More Animations and JavaScript Effects:

I used more animations and JavaScript effects to make the website more interactive and engaging for users.

Included Favicon and 404 Page:

I added a favicon to the website for a more professional look, and I created a custom 404 page to handle errors better.

Improved Documentation and README:

I added more details about the testing process , Credits, and tests. I add comments to the CSS file, explaining the designs.

Organized Files Better:

I organised the project by putting the CSS, HTML, JavaScript, and assets files into separate, clear folders.

More Detailed Commits:

This time, I made more commits for specific changes to keep the version history clear and organised.

Increased Website Interactivity:

I added features like sound effects and a background image to make the site more attractive and interactive.