Quiz - Är du smartare än Johan?

A browser-based multiple choice quiz built with vanilla JavaScript and Bootstrap.

---

About

This project was built as a group assignment in the course JavaScript 1. The goal was to create an interactive quiz application using fundamental JavaScript concepts such as DOM manipulation, event listeners, functions and scope.

---

Features

• 10 multiple choice questions
• Immediate visual feedback on correct and wrong answers
• Progress tracking showing current question number
• Error message if the user tries to proceed without selecting an answer
• Result screen with final score and emoji based on performance
• Restart button to reset and play again

---

Project Structure

├── index.html       # HTML structure and layout
├── index.js         # Quiz logic and DOM manipulation
└── styles.css       # Custom styling

---

How It Works

1. The quiz initializes by calling initQuiz() which resets state and renders the first question
2. showQuestion() renders the current question and creates answer buttons dynamically
3. When an answer is clicked, checkAnswer() evaluates it and updates the score
4. The selected answer is highlighted green or red, and all buttons are disabled
5. The user clicks "Nästa fråga" to advance — hasAnswered() prevents skipping unanswered questions
6. After the last question, showResult() displays the final score
7. The user can restart by clicking "Starta om", which calls initQuiz() again

---

Concepts Used

• "use strict" — prevents use of undeclared variables and other unsafe behavior
• DOM manipulation — createElement, appendChild, classList, textContent
• Event listeners — addEventListener with click events
• Array method — forEach
• Functions — separation of logic and rendering responsibilities

---

Getting Started

No installation or build tools required. To run the quiz locally:

1. Download the .zip-filw
2. Un-zip and open index.html with Visual Studio Code
3. Make sure you have the extension Live Server- https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer
4. Click on "Go Live" in the bottom right corner of your VsCode window

The project uses Bootstrap via CDN — an internet connection is required for styles and scripts to load correctly.

---

Known Issues & Areas for Improvement

• Questions are always in the same order — there is no shuffle functionality, so repeated playthroughs follow the same sequence
• No timer — there is currently no time limit per question
• Questions are hardcoded — the question bank lives directly in index.js, making it harder to expand or maintain as the list grows
• No score persistence — the score is not saved between sessions, so refreshing the page resets everything

---

Technologies

• HTML5
• CSS3
• JavaScript (ES6+)
• Bootstrap 5.3

---

Authors

Kim R, Molly DL and Therese J Group assignment — JavaScript 1