diff --git a/.DS_Store b/.DS_Store
new file mode 100644
index 0000000..b8a0bb8
Binary files /dev/null and b/.DS_Store differ
diff --git a/README.md b/README.md
index 57e6d16..b877c30 100644
--- a/README.md
+++ b/README.md
@@ -1,9 +1,5 @@
 # Web Accessibility Project
 
-A basic web server template focused on web accessibility practices.
+Link to netlify: https://accessibility-simon-sofie.netlify.app/
 
-### Installation
-
-1. Fork this repository by clicking the "Fork" button at the top right of the GitHub repository page.
-
-2. Clone your forked repository
+Project by Simon and Sofie
\ No newline at end of file
diff --git a/about.html b/about.html
index 5adbad6..d595b17 100644
--- a/about.html
+++ b/about.html
@@ -1,10 +1,187 @@
 <!DOCTYPE html>
-<html>
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>About</title>
-    <link rel="stylesheet" href="css/styles.css" />
-  </head>
-  <body></body>
-</html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta
+    name="viewport"
+    content="width=device-width, initial-scale=1.0"
+  />
+  <title>About this quiz</title>
+  <link
+    rel="stylesheet"
+    href="css/color-palette.css"
+  />
+  <link
+    rel="stylesheet"
+    href="css/styles.css"
+  />
+  <!-- font awesome icons -->
+  <script
+    src="https://kit.fontawesome.com/beb1bc6f21.js"
+    crossorigin="anonymous"
+  ></script>
+  <script
+    src="./js/about.js"
+    defer
+  ></script>
+</head>
+
+<body id="body">
+  <a
+    href="#about-content"
+    class="skip-link"
+    tabindex="0"
+  >Skip to main content</a>
+
+  <header
+    role="banner"
+    tabindex="-1"
+  >
+    <button
+      id="menu-icon"
+      class="fas fa-bars"
+      aria-live="assertive"
+      aria-haspopup="true"
+      aria-expanded="false"
+      aria-controls="Menu"
+      aria-label="Open main menu"
+      tabindex="0"
+    ></button>
+    <nav
+      role="navigation"
+      aria-label="Main Menu"
+      id="nav-links"
+    >
+      <ul role="list">
+        <li
+          id="index-page2"
+          role="listitem"
+        ><a href="index.html">Home</a></li>
+        <li
+          id="about-page2"
+          role="listitem"
+        ><a
+            id="about-style"
+            href="about.html"
+          >About</a></li>
+      </ul>
+    </nav>
+  </header>
+  <main
+    id="about-content"
+    role="main"
+  >
+    <section
+      id="about"
+      class=""
+      role="region"
+      aria-labelledby="about-text"
+    >
+      <div
+        class="speech-bubble"
+        role="img"
+        aria-labelledby="about-text"
+      >
+        <!-- A non descriptive image -->
+        <img
+          src="./img/speech-bubble.webp"
+          alt=""
+          aria-hidden="true"
+        />
+        <div class="title-text">
+          <h1
+            id="question-text"
+            class="question-text-about"
+            tabindex="0"
+          >How this Quiz is accessible</h1>
+        </div>
+      </div>
+      <ol role="list">
+        <li
+          tabindex="0"
+          role="listitem"
+        ><strong>A "Skip to main content"</strong> link lets users bypass navigation and
+          go directly
+          to
+          the quiz.</li>
+        <li
+          tabindex="0"
+          role="listitem"
+        >The quiz is fully <strong>keyboard-accessible</strong>, allowing users to
+          navigate and
+          select answers without a
+          mouse.</li>
+        <li
+          tabindex="0"
+          role="listitem"
+        >A <strong>clean and simple layout</strong> ensures an easy-to-read experience
+          with minimal
+          distractions.</li>
+        <li
+          tabindex="0"
+          role="listitem"
+        ><strong>ARIA labels</strong> enhance accessibility for screen readers.</li>
+        <li
+          tabindex="0"
+          role="listitem"
+        ><strong>Semantic HTML</strong> improves structure and readability for both
+          users and
+          assistive technologies.
+        </li>
+        <li
+          tabindex="0"
+          role="listitem"
+        >
+          A <strong>dark mode option</strong> provides a high-contrast black background with white text for a more
+          comfortable viewing experience.
+        </li>
+        <li
+          tabindex="0"
+          role="listitem"
+        >A <strong>reduce motion option</strong> allows users to disable animations and
+          sliding
+          effects in the quiz, providing a more comfortable experience for anyone sensitive to motion.</li>
+      </ol>
+      <!-- A descriptive image -->
+      <div class="img-container">
+        <img
+          class="accessibility-img"
+          src="./img/web-accessibility-features.webp"
+          alt="Illustration of web accessibility features for this quiz"
+          role="img"
+        />
+      </div>
+    </section>
+  </main>
+  <footer role="contentinfo">
+    <nav
+      role="navigation"
+      aria-label="Footer menu"
+    >
+      <button
+        id="dark-mode-icon"
+        class="dark-mode-icon"
+        type="button"
+        aria-label="Toggle dark mode"
+      >
+        Dark mode
+      </button>
+      <p tabindex="0">
+        Project by Simon & Sofie
+        <a
+          tabindex="0"
+          href="https://github.com/simfrisk/accessibility-sofie-simon"
+          aria-label="GitHub repository for Accessibility Project by Simon & Sofie"
+        >
+          <i
+            class="fa-brands fa-github"
+            aria-hidden="true"
+          ></i>
+        </a>
+      </p>
+    </nav>
+  </footer>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/css/color-palette.css b/css/color-palette.css
new file mode 100644
index 0000000..1822444
--- /dev/null
+++ b/css/color-palette.css
@@ -0,0 +1,14 @@
+:root {
+  --primary: #fdeb3f;
+  --secondary: #121212;
+  --complementary: #FFFFFF;
+  --font-primary: #121212;
+  --font-primary-fixed: #121212;
+}
+
+.dark-mode {
+  --primary: #121212;
+  --secondary: #FFFFFF;
+  --complementary: #121212;
+  --font-primary: #FFFFFF;
+}
\ No newline at end of file
diff --git a/css/styles.css b/css/styles.css
index e69de29..c9cf6ae 100644
--- a/css/styles.css
+++ b/css/styles.css
@@ -0,0 +1,532 @@
+* {
+  box-sizing: border-box;
+  margin: none;
+}
+
+body {
+  background-color: var(--primary);
+  font-family: 'Futura', Helvetica, sans-serif;
+  font-size: 16px;
+  color: var(--font-primary);
+  margin: 0;
+  overflow-x: hidden;
+}
+
+/* Skip link button styling */
+
+.skip-link {
+  position: absolute;
+  top: -40px;
+  right: 0;
+  padding: 8px;
+  z-index: 100;
+  transition: top 0.3s;
+  background-color: var(--complementary);
+  outline: 4px solid var(--secondary);
+  text-transform: uppercase;
+  font-weight: bold;
+}
+
+.skip-link:hover {
+  border-bottom: none;
+  text-decoration: underline;
+}
+
+.skip-link:focus {
+  top: 0;
+}
+
+/* Styling for nav in header and footer */
+
+#menu-icon {
+  background-color: transparent;
+  box-shadow: none;
+  border: none;
+  outline: none;
+  z-index: 1000;
+  position: relative;
+  font-size: clamp(30px, 5vh, 50px);
+  cursor: pointer;
+  padding: 12px;
+}
+
+header {
+  min-height: 8dvh;
+  border-top: 4px solid var(--secondary);
+  border-left: 4px solid var(--secondary);
+  border-right: 4px solid var(--secondary);
+  margin: 0;
+  z-index: 10;
+  display: flex;
+  align-items: center;
+}
+
+nav {
+  padding: 16px;
+  letter-spacing: 0.5px;
+}
+
+#nav-links {
+  display: none;
+  width: 100%;
+  background: transparent;
+  font-size: 24px;
+  text-transform: uppercase;
+}
+
+#nav-links.active {
+  display: flex;
+  flex-direction: column;
+  padding: 0px 12px;
+}
+
+ul,
+ol {
+  display: flex;
+  padding: 0;
+  margin: 0;
+  list-style: none;
+}
+
+li {
+  font-weight: bold;
+  padding: 6px 12px;
+}
+
+a {
+  text-decoration: none;
+  color: var(--font-primary);
+}
+
+#nav-links a:hover {
+  border-bottom: 4px solid var(--secondary);
+}
+
+#index-page {
+  border-bottom: 4px dashed var(--secondary);
+}
+
+#about-style {
+  border-bottom: 4px dashed var(--secondary);
+}
+
+:focus-visible {
+  outline-offset: 2px;
+  border-radius: 4px;
+  transition: outline-color 0.2s ease, box-shadow 0.2s ease;
+  box-shadow: 2px 2px 15px var(--secondary);
+}
+
+/* For interactive elements */
+
+button:focus-visible,
+a:focus-visible,
+.options:focus-visible,
+#menu-icon:focus-visible,
+div:focus-visible {
+  outline: 4px solid var(--secondary);
+}
+
+/* For other elements */
+
+h1:focus-visible,
+h2:focus-visible,
+h3:focus-visible,
+h4:focus-visible,
+p:focus-visible,
+li:focus-visible,
+img:focus-visible,
+legend:focus-visible {
+  outline: 4px solid var(--secondary);
+}
+
+
+
+/* styling for each section */
+
+#main-content {
+  display: flex;
+  overflow-x: scroll;
+  scroll-snap-type: x mandatory;
+  min-height: 80dvh;
+  width: 100dvw;
+  overflow-y: auto;
+}
+
+.card {
+  display: flex;
+  scroll-snap-align: start;
+  flex-direction: column;
+  justify-content: center;
+  text-align: center;
+
+  gap: 18px;
+  background-color: var(--primary);
+  border: 4px solid var(--secondary);
+  padding: 16px;
+  transition: transform .7s ease-out;
+  min-height: 80dvh;
+  width: 100dvw;
+  scroll-snap-align: start;
+  flex-shrink: 0;
+}
+
+
+.hide {
+  display: none;
+}
+
+/* Hides scrollbar in Chrome, Safari, and newer Edge */
+*::-webkit-scrollbar {
+  display: none;
+}
+
+#question-title {
+  padding-top: 20px;
+}
+
+.speech-bubble {
+  position: relative;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+  margin: 0 auto;
+  text-align: center;
+}
+
+.speech-bubble img {
+  display: block;
+  max-width: 320px;
+  height: auto;
+}
+
+.title-text {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  padding: 6px;
+  text-align: center;
+  width: 250px;
+}
+
+/* Styling for text */
+
+h1,
+h2,
+h3,
+p {
+  padding: 0;
+  margin: 0;
+}
+
+p {
+  color: var(--font-primary);
+}
+
+h1 {
+  font-size: 22px;
+}
+
+h2,
+h3 {
+  font-size: 18px;
+}
+
+.bubble-text {
+  color: var(--font-primary-fixed);
+}
+
+
+/* Quiz questions form layout */
+
+form {
+  padding: 8px 24px;
+}
+
+fieldset {
+  border: none;
+  border: 0;
+  padding: 0;
+  margin: 0;
+  min-width: 0;
+}
+
+.error-text {
+  color: var(--font-primary);
+  font-weight: bold;
+  text-transform: uppercase;
+}
+
+.error-btn {
+  color: var(--font-primary);
+  border: 2px solid var(--font-primary);
+}
+
+.error-frame {
+  padding: 10px;
+  border-radius: 10px;
+  outline: 2px dashed var(--font-primary);
+}
+
+.dark-button {
+  background-color: var(--secondary);
+  color: var(--complementary);
+  border: solid 2px var(--complementary);
+}
+
+.radio-button-group {
+  display: grid;
+  grid-template-columns: repeat(1, 2fr);
+  margin: 10px;
+}
+
+input[type="radio"] {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  margin: -1px;
+  padding: 0;
+  border: 0;
+  clip: rect(0, 0, 0, 0);
+  overflow: hidden;
+  white-space: nowrap;
+  color: var(--font-primary);
+}
+
+.options {
+  cursor: pointer;
+  user-select: none;
+  margin: 8px 0px;
+  padding: 8px;
+  color: var(--font-primary);
+  background-color: var(--complementary);
+  box-shadow: 2px 3px 0px var(--secondary);
+  border: 2px solid var(--secondary);
+  border-radius: 4px;
+  transition: box-shadow 0.1s ease-in-out, transform 0.1s ease-in-out;
+}
+
+input[type="radio"]:checked+.options {
+  box-shadow: inset 4px 4px 0px var(--secondary);
+  transform: translateY(3px) scale(0.96);
+  background-color: var(--secondary);
+  color: var(--complementary)
+}
+
+.options:hover {
+  box-shadow: 0px 0px 0px var(--secondary);
+  transform: translateY(2px);
+}
+
+button {
+  font-family: 'Futura', Helvetica, sans-serif;
+  color: var(--font-primary);
+  font-size: 16px;
+  border: 2px solid var(--secondary);
+  border-radius: 8px;
+  background-color: var(--complementary);
+  box-shadow: 2px 3px 0px var(--secondary);
+  padding: 8px 22px;
+  text-transform: uppercase;
+  font-weight: 600;
+  letter-spacing: 0.5px;
+  transition: box-shadow 0.1s ease-in-out, transform 0.1s ease-in-out;
+}
+
+button:hover {
+  box-shadow: none;
+  transform: translateY(2px);
+}
+
+button:active {
+  box-shadow: inset 1.5px 2px 0px var(--secondary);
+  transform: translateY(2px) scale(0.98);
+}
+
+/* Styling for the about page content */
+
+#about {
+  padding-top: 20px;
+  border: 4px solid var(--secondary);
+}
+
+ol {
+  display: grid;
+  grid-template-columns: repeat(1, 1fr);
+  grid-auto-rows: auto;
+  gap: 16px;
+  padding: 16px;
+}
+
+ol li {
+  margin-bottom: 18px;
+  position: relative;
+  padding-left: 40px;
+  text-align: left;
+}
+
+ol li::before {
+  content: "\f058";
+  font-family: "Font Awesome 5 Free";
+  font-weight: 900;
+  position: absolute;
+  left: 0;
+  font-size: 22px;
+}
+
+.accessibility-img {
+  width: 100%;
+  height: auto;
+  border: 4px solid var(--secondary);
+}
+
+/* styling of icons */
+i {
+  font-size: 24px;
+  color: var(--font-primary);
+}
+
+footer {
+  border-bottom: 4px solid var(--secondary);
+  border-right: 4px solid var(--secondary);
+  border-left: 4px solid var(--secondary);
+  background-color: var(--primary);
+  width: 100%;
+  z-index: 10;
+  padding: 8px;
+}
+
+footer nav {
+  display: grid;
+  grid-template-columns: repeat(2, auto);
+  grid-template-rows: auto auto;
+  gap: 16px;
+  justify-content: center;
+  align-items: center;
+  padding: 12px;
+}
+
+footer nav p {
+  grid-column: span 2;
+  text-align: center;
+}
+
+footer button {
+  padding: 8px 12px;
+  letter-spacing: 0;
+}
+
+.question-text-about {
+  color: var(--font-primary-fixed);
+}
+
+/* Tablet  */
+@media screen and (min-width: 768px) {
+
+  #menu-icon {
+    display: none;
+  }
+
+  #nav-links {
+    display: flex;
+  }
+
+  ul {
+    display: flex;
+    flex-direction: row;
+  }
+
+  .page-description {
+    max-width: 60%;
+  }
+
+  button {
+    font-size: 18px;
+    padding: 8px 22px;
+  }
+
+  .card {
+    justify-content: center;
+    align-items: center;
+    flex-direction: column;
+  }
+
+  .speech-bubble img {
+    max-width: 400px;
+  }
+
+  .offset {
+    transform: translateX(0dvh);
+  }
+
+  .radio-button-group {
+    padding: 20px;
+    display: grid;
+    grid-template-columns: repeat(2, 2fr);
+    column-gap: 32px;
+    row-gap: 16px;
+  }
+
+  .options {
+    padding: 8px 22px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    font-size: 20px;
+    min-width: 300px;
+  }
+
+  ol {
+    grid-template-columns: repeat(2, 1fr);
+  }
+
+  #motion-mode-icon {
+    display: none;
+  }
+
+  footer nav {
+    grid-template-columns: 1fr;
+    justify-items: center;
+    align-items: center;
+  }
+
+  .accessibility-img {
+    max-width: 768px;
+    height: auto;
+  }
+
+  .img-container {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    padding: 12px;
+  }
+}
+
+@media screen and (min-width: 1024px) {
+
+  ol {
+    grid-template-columns: repeat(3, 1fr);
+  }
+
+}
+
+@media screen and (max-width: 360px) {
+
+  header {
+    margin: 0;
+    z-index: 10;
+  }
+
+  #main-content {
+    position: relative;
+    width: 100dvw;
+    padding: 4px;
+  }
+
+  #motion-mode-icon {
+    display: none;
+  }
+}
\ No newline at end of file
diff --git a/dist/js/darkmode.js b/dist/js/darkmode.js
new file mode 100644
index 0000000..ae17155
--- /dev/null
+++ b/dist/js/darkmode.js
@@ -0,0 +1,20 @@
+"use strict";
+const darkmodetoggle = document.querySelector("#dark-mode-icon");
+const theBody = document.querySelector("body");
+const darkmode = () => {
+    if (theBody.classList.contains("dark-mode")) {
+        theBody.classList.remove("dark-mode");
+        localStorage.setItem("dark-mode", "disabled");
+        darkmodetoggle.classList.remove("dark-button");
+        darkmodetoggle.innerHTML = "DARK MODE";
+    }
+    else {
+        theBody.classList.add("dark-mode");
+        localStorage.setItem("dark-mode", "enabled");
+        darkmodetoggle.classList.add("dark-button");
+        darkmodetoggle.innerHTML = "LIGHT MODE";
+    }
+    const isExpanded = darkmodetoggle.getAttribute("aria-expanded") === "true";
+    darkmodetoggle.setAttribute("aria-expanded", isExpanded ? "false" : "true");
+};
+darkmodetoggle.addEventListener("click", darkmode);
diff --git a/dist/js/main.js b/dist/js/main.js
new file mode 100644
index 0000000..8aaf11f
--- /dev/null
+++ b/dist/js/main.js
@@ -0,0 +1,345 @@
+"use strict";
+//#region --- DOM Elements -----
+//Buttons
+const skipToMain = document.querySelector("#skip-to-main");
+const navLinks = document.querySelector("#nav-links");
+const menuIcon = document.querySelector("#menu-icon");
+const startQuizBtn = document.querySelector("#start-quiz-btn");
+const submitAnswerBtn = document.querySelector("#answer-btn");
+const nextQuestionBtn = document.querySelector("#next-question-btn");
+const startAgainBtn = document.querySelector("#start-again-btn");
+const radioButtonCheck = document.querySelectorAll('input[name="question1"]');
+const motionModeIcon = document.querySelector("#motion-mode-icon");
+const darkmodetoggle = document.querySelector("#dark-mode-icon");
+//Links
+const indexPage = document.querySelector("#index-page");
+const aboutPage = document.querySelector("#about-page");
+//Containers & sections
+const theBody = document.querySelector("body");
+const main = document.querySelector("#main-content");
+const selectionForm = document.querySelector("#selection-form");
+const legend = document.querySelector("#legend");
+const testing = document.querySelector("#testing");
+const startPage = document.querySelector("#start-page");
+const quizContainer = document.querySelector("#quiz-container");
+const answerBtnContainer = document.querySelector("#answer-btn-container");
+const resultContainer = document.querySelector("#result-container");
+const radioButtonGroup = document.querySelector(".radio-button-group");
+const darkModeContainer = document.querySelector("#dark-mode-container");
+//texts
+const titleText = document.querySelector(".title-text");
+const questionTitle = document.querySelector("#question-title");
+const questionText = document.querySelector("#question-text");
+const resultTitle = document.querySelector("#result-title");
+const resultExplanation = document.querySelector("#result-explanation");
+const quizResult = document.querySelector("#quiz-result");
+const quizResultTitle = document.querySelector("#quiz-result-title");
+const quizResultText = document.querySelector("#quiz-result-text");
+//Options
+const optionA = document.querySelector('label[for="option-a"]');
+const optionB = document.querySelector('label[for="option-b"]');
+const optionC = document.querySelector('label[for="option-c"]');
+const optionD = document.querySelector('label[for="option-d"]');
+//Extra
+const cards = document.querySelectorAll(".card");
+const scrollLeft = main.scrollLeft;
+const cardWidth = cards[0].offsetWidth; // Assuming all cards have the same width
+//Objects & Arrays
+let reduceMotion = false;
+let currentStep = -1;
+let currentPage = startPage;
+let userChoice = "";
+let currentQuestion = null;
+let score = 0;
+//#endregion
+//#region --- Functions -----
+//#region --- User Idetifier -----
+const userChoiseIdentifier = () => {
+    const options = document.querySelectorAll('input[name="question1"]');
+    options.forEach((button) => {
+        button.addEventListener("change", (event) => {
+            userChoice = event.target.value;
+        });
+    });
+};
+userChoiseIdentifier();
+//#endregion
+//#region --- Burger Menu -----
+const burgerMenu = () => {
+    navLinks.classList.toggle("active");
+    menuIcon.classList.toggle("fa-bars");
+    menuIcon.classList.toggle("fa-times");
+    const isExpanded = menuIcon.getAttribute("aria-expanded") === "true";
+    menuIcon.setAttribute("aria-expanded", isExpanded ? "false" : "true");
+    const currentLabel = isExpanded ? "Open main menu" : "Close main menu";
+    menuIcon.setAttribute("aria-label", currentLabel);
+    const isMenuOpen = navLinks.classList.contains("active");
+    navLinks.setAttribute("aria-hidden", isMenuOpen ? "false" : "true");
+};
+//#endregion
+//#region --- Load Next Question -----
+const loadNextQuestion = () => {
+    userChoice = "";
+    currentStep++;
+    radioButtonCheck.forEach((radio) => {
+        radio.checked = false;
+    });
+    if (currentStep >= questions.length) {
+        quizResultTitle.innerHTML = "The quiz is over!";
+        quizResultText.innerHTML = `Your result is ${score} / ${questions.length}`;
+        transition(resultContainer, quizResult, null);
+    }
+    else {
+        currentQuestion = questions[currentStep];
+        questionTitle.innerHTML = `Question ${currentStep + 1}/${questions.length}`;
+        questionText.innerHTML = currentQuestion.questionText;
+        optionA.innerHTML = currentQuestion.options[0];
+        optionB.innerHTML = currentQuestion.options[1];
+        optionC.innerHTML = currentQuestion.options[2];
+        optionD.innerHTML = currentQuestion.options[3];
+        transition(resultContainer, quizContainer, startPage);
+    }
+};
+//#endregion
+//#region --- Load answer -----
+const loadNextAnswer = (event) => {
+    if (event)
+        event.preventDefault();
+    if (userChoice === "") {
+        legend.innerHTML = "You have not selected an option";
+        legend.classList.add("error-text");
+        submitAnswerBtn.classList.add("error-btn");
+        radioButtonGroup.classList.add("error-frame");
+        legend.setAttribute("aria-live", "assertive");
+        legend.setAttribute("role", "alert");
+        legend.focus();
+        return;
+    }
+    if (userChoice === currentQuestion.correctAnswer) {
+        resultTitle.innerHTML = currentQuestion.resultTitleWin;
+        resultExplanation.innerHTML = currentQuestion.resultExplanationWin;
+        score++;
+    }
+    else {
+        resultTitle.innerHTML = currentQuestion.resultTitleLose;
+        resultExplanation.innerHTML = currentQuestion.resultExplanationLose;
+    }
+    transition(quizContainer, resultContainer, null);
+    if (currentStep % questions.length === questions.length - 1) {
+        nextQuestionBtn.innerHTML = "SEE RESULT";
+    }
+};
+const resetErrorStyle = () => {
+    legend.innerHTML = "Choose the correct answer:";
+    legend.classList.remove("error-text");
+    submitAnswerBtn.classList.remove("error-btn");
+    radioButtonGroup.classList.remove("error-frame");
+    legend.removeAttribute("aria-live");
+    legend.removeAttribute("role");
+};
+//#endregion
+//#region --- Start over ----
+const startAgain = () => {
+    nextQuestionBtn.innerHTML = "NEXT QUESTION";
+    currentStep = -1;
+    score = 0;
+    transition(quizResult, startPage, null);
+};
+//#endregion
+//#region --- Keyboard Navigation ----
+const handleKeyEvent = (event, button) => {
+    switch (event.key) {
+        case "Enter":
+            switch (document.activeElement) {
+                case button:
+                    button.click();
+                    break;
+                case skipToMain:
+                    main.focus();
+                    break;
+                case menuIcon:
+                    burgerMenu();
+                    break;
+                case indexPage:
+                    indexPage.click();
+                    break;
+                case aboutPage:
+                    aboutPage.click();
+                    break;
+                case darkModeContainer:
+                    darkmode();
+                    break;
+                case motionModeIcon:
+                    toggleReduceMotion(); // Add this line!
+                    break;
+                case optionA:
+                    event.preventDefault();
+                    optionA.click();
+                    break;
+                case optionB:
+                    event.preventDefault();
+                    optionB.click();
+                    break;
+                case optionC:
+                    event.preventDefault();
+                    optionC.click();
+                    break;
+                case optionD:
+                    event.preventDefault();
+                    optionD.click();
+                    break;
+                case answerBtnContainer:
+                    loadNextAnswer();
+                    setTimeout(() => {
+                        resultTitle.focus();
+                    }, 600);
+                    break;
+                case nextQuestionBtn:
+                    setTimeout(() => {
+                        questionTitle.focus();
+                    }, 600);
+                    break;
+                case startAgainBtn:
+                    setTimeout(() => {
+                        titleText.focus();
+                    }, 600);
+                    break;
+                default:
+                    if (document.activeElement !== skipToMain &&
+                        document.activeElement !== button &&
+                        document.activeElement !== menuIcon &&
+                        document.activeElement !== indexPage &&
+                        document.activeElement !== aboutPage &&
+                        document.activeElement !== darkmodetoggle &&
+                        document.activeElement !== motionModeIcon &&
+                        document.activeElement !== optionA &&
+                        document.activeElement !== optionB &&
+                        document.activeElement !== optionC &&
+                        document.activeElement !== optionD &&
+                        document.activeElement !== answerBtnContainer &&
+                        document.activeElement !== nextQuestionBtn &&
+                        document.activeElement !== startAgainBtn) {
+                        event.preventDefault();
+                        button.focus();
+                    }
+                    break;
+            }
+            break;
+        case "Escape":
+            if (document.activeElement !== skipToMain &&
+                document.activeElement !== button &&
+                document.activeElement !== menuIcon &&
+                document.activeElement !== indexPage &&
+                document.activeElement !== aboutPage &&
+                document.activeElement !== darkmodetoggle &&
+                document.activeElement !== motionModeIcon &&
+                document.activeElement !== optionA &&
+                document.activeElement !== optionB &&
+                document.activeElement !== optionC &&
+                document.activeElement !== optionD &&
+                document.activeElement !== answerBtnContainer &&
+                document.activeElement !== nextQuestionBtn &&
+                document.activeElement !== startAgainBtn) {
+                event.preventDefault();
+                optionA.focus();
+            }
+            else {
+                return;
+                // optionA.focus()
+            }
+            break;
+        case "ArrowDown":
+            if (document.activeElement === optionD) {
+                event.preventDefault();
+                answerBtnContainer.focus();
+            }
+    }
+};
+const enterKeySelect = (event) => {
+    handleKeyEvent(event, submitAnswerBtn);
+    handleKeyEvent(event, startQuizBtn);
+    // handleKeyEvent(event, nextQuestionBtn);
+    // handleKeyEvent(event, startAgainBtn);
+};
+//#endregion
+//#region --- Transition ----
+const transition = (hideElement, showElement, hideElementExtra) => {
+    const mediaQueryIpad = window.matchMedia("(min-width: 768px)");
+    const mediaQuerySmall = window.matchMedia("(max-width: 360px)");
+    if (mediaQueryIpad.matches ||
+        mediaQuerySmall.matches ||
+        reduceMotion === true) {
+        showElement.classList.remove("hide");
+        hideElement.classList.add("hide");
+        if (hideElementExtra) {
+            hideElementExtra.classList.add("hide");
+        }
+    }
+    else {
+        showElement.classList.remove("hide");
+        requestAnimationFrame(() => {
+            main.scrollTo({
+                left: main.scrollLeft + cardWidth,
+                behavior: "smooth",
+            });
+        });
+        setTimeout(() => {
+            hideElement.classList.add("hide");
+            if (hideElementExtra) {
+                hideElementExtra.classList.add("hide");
+            }
+            const parent = hideElement.parentNode;
+            if (parent) {
+                parent.insertBefore(showElement, hideElement);
+            }
+        }, 500);
+    }
+};
+//#endregion
+//#region --- Dark mode & Reduce motion----
+if (localStorage.getItem("dark-mode") === "enabled") {
+    theBody.classList.add("dark-mode");
+}
+const darkmode = () => {
+    if (theBody.classList.contains("dark-mode")) {
+        theBody.classList.remove("dark-mode");
+        localStorage.setItem("dark-mode", "disabled");
+        darkmodetoggle.classList.remove("dark-button");
+        darkmodetoggle.innerHTML = "DARK MODE";
+    }
+    else {
+        theBody.classList.add("dark-mode");
+        localStorage.setItem("dark-mode", "enabled");
+        darkmodetoggle.classList.add("dark-button");
+        darkmodetoggle.innerHTML = "LIGHT MODE";
+    }
+    const isExpanded = darkmodetoggle.getAttribute("aria-expanded") === "true";
+    darkmodetoggle.setAttribute("aria-expanded", isExpanded ? "false" : "true");
+};
+const toggleReduceMotion = () => {
+    reduceMotion = !reduceMotion;
+    if (reduceMotion) {
+        motionModeIcon.classList.add("dark-button");
+    }
+    else {
+        motionModeIcon.classList.remove("dark-button");
+    }
+    const isExpanded = motionModeIcon.getAttribute("aria-expanded") === "true";
+    motionModeIcon.setAttribute("aria-expanded", isExpanded ? "false" : "true");
+};
+//#endrigion
+//#endregion
+//#endregion
+//#region --- Event listeners -----
+menuIcon.addEventListener("click", burgerMenu);
+startQuizBtn.addEventListener("click", loadNextQuestion);
+submitAnswerBtn.addEventListener("click", loadNextAnswer);
+nextQuestionBtn.addEventListener("click", loadNextQuestion);
+startAgainBtn.addEventListener("click", startAgain);
+darkmodetoggle.addEventListener("click", darkmode);
+motionModeIcon.addEventListener("click", toggleReduceMotion);
+document.addEventListener("keydown", enterKeySelect);
+radioButtonCheck.forEach((btn) => {
+    btn.addEventListener("click", resetErrorStyle);
+});
+//#endregion
diff --git a/dist/js/questions.js b/dist/js/questions.js
new file mode 100644
index 0000000..ab47cf1
--- /dev/null
+++ b/dist/js/questions.js
@@ -0,0 +1,52 @@
+"use strict";
+//#endregion
+//#region --- Object -----
+const questions = [
+    {
+        id: "question1",
+        currentStep: 1,
+        questionTitle: "This is question ",
+        questionText: "Which of the following is NOT a principle of the WCAG?",
+        options: ["Perceivable", "Operable", "Flexible", "Robust"],
+        correctAnswer: "C",
+        resultTitleWin: "This is correct!",
+        resultExplanationWin: "Perceivable, Operable, Understandable and Robust are the four main principles. Well done!",
+        resultTitleLose: "Oh no!",
+        resultExplanationLose: "You got it wrong. Perceivable, Operable, Understandable and Robust are the four main principles.",
+    },
+    {
+        id: "question2",
+        questionText: "What does ARIA stand for?",
+        questionTitle: "This is question ",
+        currentStep: 2,
+        options: [
+            "Accessible Rich Internet Applications",
+            "Advanced Responsive Internet Accessibility",
+            "Automated Resource Integration API",
+            "Assistive Rendering & Interaction Attributes",
+        ],
+        correctAnswer: "A",
+        resultTitleWin: "Yay!",
+        resultExplanationWin: "You got it right. Accessible Rich Internet Applications is correct!",
+        resultTitleLose: "Not quite!",
+        resultExplanationLose: "The correct answer is Accessible Rich Internet Applications. Now you know!",
+    },
+    {
+        id: "question3",
+        currentStep: 3,
+        questionTitle: "This is question ",
+        questionText: "What is the purpose of a 'skip to content' link?",
+        options: [
+            "To skip advertisements",
+            "To skip the navigation",
+            "To skip all images",
+            "To skip the logo",
+        ],
+        correctAnswer: "B",
+        resultTitleWin: "Yes!",
+        resultExplanationWin: "That is the right choice. When you press 'skip to content' you want the user to skip the navigation.",
+        resultTitleLose: "Oh no!",
+        resultExplanationLose: "This is incorrect. When you press 'skip to content' you want the user to skip the navigation.",
+    },
+];
+//#endregion
diff --git a/dist/visibility.js b/dist/visibility.js
new file mode 100644
index 0000000..3918c74
--- /dev/null
+++ b/dist/visibility.js
@@ -0,0 +1 @@
+"use strict";
diff --git a/img/.DS_Store b/img/.DS_Store
new file mode 100644
index 0000000..5008ddf
Binary files /dev/null and b/img/.DS_Store differ
diff --git a/img/speech-bubble.webp b/img/speech-bubble.webp
new file mode 100644
index 0000000..23a0f25
Binary files /dev/null and b/img/speech-bubble.webp differ
diff --git a/img/web-accessibility-features.webp b/img/web-accessibility-features.webp
new file mode 100644
index 0000000..000d52b
Binary files /dev/null and b/img/web-accessibility-features.webp differ
diff --git a/index.html b/index.html
index a9a33db..0342ba0 100644
--- a/index.html
+++ b/index.html
@@ -1,13 +1,375 @@
 <!DOCTYPE html>
-<html>
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Title</title>
-    <link rel="stylesheet" href="css/styles.css" />
-  </head>
-  <body>
-    <p>This is the starting point.</p>
-    <script src="js/main.js"></script>
-  </body>
-</html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta
+    name="viewport"
+    content="width=device-width, initial-scale=1.0"
+  />
+  <title>Web Accessibility Quiz</title>
+  <link
+    rel="stylesheet"
+    href="css/color-palette.css"
+  />
+  <link
+    rel="stylesheet"
+    href="css/styles.css"
+  />
+  <!-- font awesome icons -->
+  <script
+    src="https://kit.fontawesome.com/beb1bc6f21.js"
+    crossorigin="anonymous"
+  ></script>
+  <script
+    src="./dist/js/questions.js"
+    defer
+  ></script>
+  <script
+    src="./dist/js/main.js"
+    defer
+  ></script>
+</head>
+
+<body id="body">
+  <a
+    id="skip-to-main"
+    tabindex="0"
+    href="#main-content"
+    class="skip-link"
+  >Skip to main content</a>
+
+  <!-- #region --- Header  ----->
+  <header>
+    <button
+      id="menu-icon"
+      class="fas fa-bars"
+      aria-live="assertive"
+      aria-haspopup="true"
+      aria-expanded="false"
+      aria-controls="Menu"
+      aria-label="Open main menu"
+    ></button>
+
+    <nav
+      role="navigation"
+      aria-label="Main Menu"
+      id="nav-links"
+    >
+      <ul>
+        <li>
+          <a
+            id="index-page"
+            href="index.html"
+            tabindex="0"
+            aria-current="page"
+          >Home</a>
+        </li>
+        <li>
+          <a
+            id="about-page"
+            href="about.html"
+            tabindex="0"
+          >About</a>
+        </li>
+      </ul>
+    </nav>
+  </header>
+
+  <!-- #endregion -->
+
+  <main id="main-content">
+    <!-- #region --- Start page  ----->
+    <section
+      id="start-page"
+      class="card"
+      role="region"
+      aria-labelledby="start-title"
+    >
+      <div
+        class="speech-bubble"
+        id="question container"
+      >
+        <img
+          src="./img/speech-bubble.webp"
+          alt="Speach bubble"
+          aria-hidden="true"
+        />
+
+        <div class="title-text">
+          <h1
+            id="start-title"
+            class="bubble-text"
+            tabindex="0"
+          >
+            Web Accessibility Quiz
+          </h1>
+        </div>
+      </div>
+
+      <p
+        class="page-description"
+        tabindex="0"
+      >
+        This quiz will test your knowledge of web accessibility principles and
+        best practices. Good luck!
+      </p>
+
+      <button
+        tabindex="0"
+        type="button"
+        id="start-quiz-btn"
+        class="submit-btn"
+      >
+        Start Quiz
+      </button>
+    </section>
+
+    <!-- #endregion -->
+
+    <!-- #region --- Quiz Container  ----->
+    <section
+      id="quiz-container"
+      class="card hide"
+      aria-labelledby="question-title"
+    >
+      <h2
+        tabindex="0"
+        id="question-title"
+        class=""
+      >
+        Question 1/3
+      </h2>
+
+      <div
+        class="speech-bubble"
+        id="question-container"
+      >
+        <img
+          src="./img/speech-bubble.webp"
+          alt="Speach bubble"
+          aria-hidden="true"
+        />
+        <div class="title-text">
+          <h3
+            id="question-text"
+            class="bubble-text"
+            tabindex="0"
+          >
+            Which of the following is NOT a principle of the WCAG?
+          </h3>
+        </div>
+      </div>
+
+      <form id="selection-form">
+        <fieldset aria-describedby="legend">
+          <!-- Lable fix -->
+          <legend
+            id="legend"
+            tabindex="0"
+          >
+            <p>Choose the correct answer:</p>
+          </legend>
+          <div class="radio-button-group">
+            <input
+              class=""
+              id="option-a"
+              name="question1"
+              type="radio"
+              value="A"
+              tabindex="-1"
+            />
+            <label
+              tabindex="0"
+              for="option-a"
+              class="options"
+            >option A</label>
+
+            <input
+              id="option-b"
+              name="question1"
+              type="radio"
+              value="B"
+              tabindex="-1"
+            />
+            <label
+              tabindex="0"
+              for="option-b"
+              class="options"
+            >option B</label>
+
+            <input
+              id="option-c"
+              name="question1"
+              type="radio"
+              value="C"
+              tabindex="-1"
+            />
+            <label
+              tabindex="0"
+              for="option-c"
+              class="options"
+            >option C</label>
+
+            <input
+              id="option-d"
+              name="question1"
+              type="radio"
+              value="D"
+              tabindex="-1"
+            />
+            <label
+              tabindex="0"
+              for="option-d"
+              class="options"
+            >option D</label>
+          </div>
+        </fieldset>
+
+        <div
+          id="answer-btn-container"
+          tabindex="0"
+        >
+          <button
+            type="button"
+            id="answer-btn"
+            class="submit-btn"
+          >
+            Submit
+          </button>
+        </div>
+      </form>
+    </section>
+    <!-- #endregion -->
+
+    <!-- #region --- Result Container  ----->
+    <section
+      id="result-container"
+      class="card hide"
+      role="region"
+    >
+      <div
+        class="speech-bubble"
+        id="answer-container"
+      >
+        <img
+          src="./img/speech-bubble.webp"
+          alt="Speach bubble"
+          aria-hidden="true"
+        />
+        <div class="title-text">
+          <h2
+            id="result-title"
+            tabindex="0"
+            class="bubble-text"
+            aria-live="polite"
+          >Placeholder</h2>
+          <p
+            id="result-explanation"
+            tabindex="0"
+            class="bubble-text"
+            aria-live="polite"
+          ></p>
+
+        </div>
+      </div>
+
+      <button
+        id="next-question-btn"
+        class="submit-btn"
+        type="button"
+      >
+        Next question
+      </button>
+
+      <div
+        id="announcer"
+        class="visually-hidden"
+        aria-live="polite"
+      ></div>
+    </section>
+    <!-- #endregion -->
+
+    <!-- #region --- Quiz Result ----->
+    <section
+      id="quiz-result"
+      class="card hide"
+      role="region"
+    >
+      <div
+        class="speech-bubble"
+        id=""
+      >
+        <img
+          src="./img/speech-bubble.webp"
+          alt="Speach bubble"
+          aria-hidden="true"
+        />
+        <div class="title-text">
+          <h3
+            id="quiz-result-title"
+            class="bubble-text"
+            tabindex="0"
+          >Placeholder</h3>
+          <p
+            id="quiz-result-text"
+            class="bubble-text"
+            tabindex="0"
+          ></p>
+        </div>
+      </div>
+
+      <button
+        id="start-again-btn"
+        class="submit-btn"
+        tabindex="0"
+        type="button"
+      >
+        Start again
+      </button>
+    </section>
+    <!-- #endregion -->
+  </main>
+
+  <footer role="contentinfo">
+    <nav
+      role="navigation"
+      aria-label="Footer menu"
+    >
+      <button
+        id="motion-mode-icon"
+        class="dark-mode-icon"
+        type="button"
+        tabindex="0"
+        aria-live="polite"
+        aria-label="Toggle reduce motion"
+        aria-expanded="false"
+      >
+        Reduce Motion
+      </button>
+
+      <div id="dark-mode-container">
+        <button
+          id="dark-mode-icon"
+          aria-live="polite"
+          aria-label="Toggle dark mode"
+          aria-expanded="false"
+        >
+          Dark mode
+        </button>
+      </div>
+      <p tabindex="0">
+        Project by Simon & Sofie
+        <a
+          tabindex="0"
+          href="https://github.com/simfrisk/accessibility-sofie-simon"
+          aria-label="Link to github"
+        >
+          <i class="fa-brands fa-github"></i>
+        </a>
+      </p>
+    </nav>
+  </footer>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/js/about.js b/js/about.js
new file mode 100644
index 0000000..d9ed2e2
--- /dev/null
+++ b/js/about.js
@@ -0,0 +1,46 @@
+// Menu
+
+const navLinks = document.querySelector("#nav-links")
+const menuIcon = document.querySelector("#menu-icon")
+
+const burgerMenu = () => {
+  navLinks.classList.toggle("active")
+  menuIcon.classList.toggle("fa-bars")
+  menuIcon.classList.toggle("fa-times")
+}
+
+menuIcon.addEventListener("click", burgerMenu)
+
+// Darkmode
+
+const theBody = document.querySelector("body")
+
+const darkmodetoggle = document.querySelector(
+  "#dark-mode-icon"
+)
+
+if (localStorage.getItem("dark-mode") === "enabled") {
+  theBody.classList.add("dark-mode");
+}
+
+const darkmode = () => {
+  if (theBody.classList.contains("dark-mode")) {
+    theBody.classList.remove("dark-mode");
+    localStorage.setItem("dark-mode", "disabled");
+    darkmodetoggle.classList.remove("dark-button");
+    darkmodetoggle.innerHTML = "DARK MODE";
+  } else {
+    theBody.classList.add("dark-mode");
+    localStorage.setItem("dark-mode", "enabled");
+    darkmodetoggle.classList.add("dark-button");
+    darkmodetoggle.innerHTML = "LIGHT MODE";
+  }
+
+  const isExpanded = darkmodetoggle.getAttribute("aria-expanded") === "true";
+  darkmodetoggle.setAttribute("aria-expanded", isExpanded ? "false" : "true");
+};
+
+darkmodetoggle.addEventListener("click", darkmode);
+
+
+
diff --git a/js/main.ts b/js/main.ts
new file mode 100644
index 0000000..94ec048
--- /dev/null
+++ b/js/main.ts
@@ -0,0 +1,400 @@
+//#region --- DOM Elements -----
+
+//Buttons
+const skipToMain = document.querySelector("#skip-to-main") as HTMLDivElement;
+const navLinks = document.querySelector("#nav-links") as HTMLDivElement;
+const menuIcon = document.querySelector("#menu-icon") as HTMLButtonElement;
+const startQuizBtn = document.querySelector("#start-quiz-btn") as HTMLElement;
+const submitAnswerBtn = document.querySelector("#answer-btn") as HTMLElement;
+const nextQuestionBtn = document.querySelector("#next-question-btn") as HTMLElement;
+const startAgainBtn = document.querySelector("#start-again-btn") as HTMLButtonElement;
+const radioButtonCheck = document.querySelectorAll('input[name="question1"]') as NodeListOf<HTMLInputElement>;
+const motionModeIcon = document.querySelector("#motion-mode-icon") as HTMLElement;
+const darkmodetoggle = document.querySelector("#dark-mode-icon") as HTMLButtonElement;
+
+//Links
+const indexPage = document.querySelector("#index-page") as HTMLAnchorElement;
+const aboutPage = document.querySelector("#about-page") as HTMLAnchorElement;
+
+//Containers & sections
+const theBody = document.querySelector("body") as HTMLBodyElement;
+const main = document.querySelector("#main-content") as HTMLElement;
+const selectionForm = document.querySelector("#selection-form") as HTMLFormElement;
+const legend = document.querySelector("#legend") as HTMLAnchorElement;
+const testing = document.querySelector("#testing") as HTMLAnchorElement;
+const startPage = document.querySelector("#start-page") as HTMLElement;
+const quizContainer = document.querySelector("#quiz-container") as HTMLElement;
+const answerBtnContainer = document.querySelector("#answer-btn-container") as HTMLButtonElement;
+const resultContainer = document.querySelector("#result-container") as HTMLElement;
+const radioButtonGroup = document.querySelector(".radio-button-group") as HTMLDivElement;
+const darkModeContainer = document.querySelector("#dark-mode-container") as HTMLButtonElement;
+
+//texts
+const titleText = document.querySelector(".title-text") as HTMLElement;
+const questionTitle = document.querySelector("#question-title") as HTMLHeadingElement;
+const questionText = document.querySelector("#question-text") as HTMLParagraphElement;
+const resultTitle = document.querySelector("#result-title") as HTMLElement;
+const resultExplanation = document.querySelector("#result-explanation") as HTMLParagraphElement;
+const quizResult = document.querySelector("#quiz-result") as HTMLElement;
+const quizResultTitle = document.querySelector("#quiz-result-title") as HTMLElement;
+const quizResultText = document.querySelector("#quiz-result-text") as HTMLParagraphElement;
+
+
+//Options
+const optionA = document.querySelector('label[for="option-a"]') as HTMLLabelElement;
+const optionB = document.querySelector('label[for="option-b"]') as HTMLLabelElement;
+const optionC = document.querySelector('label[for="option-c"]') as HTMLLabelElement;
+const optionD = document.querySelector('label[for="option-d"]') as HTMLLabelElement;
+
+//Extra
+const cards = document.querySelectorAll(".card") as NodeListOf<HTMLElement>;
+const scrollLeft = main.scrollLeft;
+const cardWidth = cards[0].offsetWidth; // Assuming all cards have the same width
+
+//Objects & Arrays
+
+let reduceMotion = false;
+let currentStep: number = -1;
+let currentPage = startPage;
+let userChoice: string = "";
+let currentQuestion: any = null;
+let score: number = 0;
+
+//#endregion
+
+//#region --- Functions -----
+
+//#region --- User Idetifier -----
+const userChoiseIdentifier = (): void => {
+  const options = document.querySelectorAll('input[name="question1"]') as NodeListOf<HTMLInputElement>;
+  options.forEach((button) => {
+    button.addEventListener("change", (event) => {
+      userChoice = (event.target as HTMLInputElement).value;
+    });
+  });
+};
+
+userChoiseIdentifier();
+
+//#endregion
+
+//#region --- Burger Menu -----
+const burgerMenu = (): void => {
+  navLinks.classList.toggle("active");
+  menuIcon.classList.toggle("fa-bars");
+  menuIcon.classList.toggle("fa-times");
+
+  const isExpanded = menuIcon.getAttribute("aria-expanded") === "true";
+  menuIcon.setAttribute("aria-expanded", isExpanded ? "false" : "true");
+
+  const currentLabel = isExpanded ? "Open main menu" : "Close main menu";
+  menuIcon.setAttribute("aria-label", currentLabel);
+
+  const isMenuOpen = navLinks.classList.contains("active");
+  navLinks.setAttribute("aria-hidden", isMenuOpen ? "false" : "true");
+};
+//#endregion
+
+//#region --- Load Next Question -----
+const loadNextQuestion = (): void => {
+  userChoice = "";
+  currentStep++;
+  radioButtonCheck.forEach((radio): void => {
+    radio.checked = false;
+  });
+
+  if (currentStep >= questions.length) {
+    quizResultTitle.innerHTML = "The quiz is over!";
+    quizResultText.innerHTML = `Your result is ${score} / ${questions.length}`;
+    transition(resultContainer, quizResult, null);
+  } else {
+    currentQuestion = questions[currentStep];
+    questionTitle.innerHTML = `Question ${currentStep + 1}/${questions.length}`;
+    questionText.innerHTML = currentQuestion.questionText;
+    optionA.innerHTML = currentQuestion.options[0];
+    optionB.innerHTML = currentQuestion.options[1];
+    optionC.innerHTML = currentQuestion.options[2];
+    optionD.innerHTML = currentQuestion.options[3];
+    transition(resultContainer, quizContainer, startPage);
+  }
+};
+
+//#endregion
+
+//#region --- Load answer -----
+const loadNextAnswer = (event: Event): void => {
+  if (event) event.preventDefault();
+
+  if (userChoice === "") {
+    legend.innerHTML = "You have not selected an option";
+
+    legend.classList.add("error-text");
+    submitAnswerBtn.classList.add("error-btn");
+    radioButtonGroup.classList.add("error-frame");
+
+    legend.setAttribute("aria-live", "assertive");
+    legend.setAttribute("role", "alert");
+    legend.focus();
+
+    return;
+  }
+
+  if (userChoice === currentQuestion.correctAnswer) {
+    resultTitle.innerHTML = currentQuestion.resultTitleWin;
+    resultExplanation.innerHTML = currentQuestion.resultExplanationWin;
+    score++;
+  } else {
+    resultTitle.innerHTML = currentQuestion.resultTitleLose;
+    resultExplanation.innerHTML = currentQuestion.resultExplanationLose;
+  }
+  transition(quizContainer, resultContainer, null);
+
+  if (currentStep % questions.length === questions.length - 1) {
+    nextQuestionBtn.innerHTML = "SEE RESULT";
+  }
+};
+
+const resetErrorStyle = () => {
+  legend.innerHTML = "Choose the correct answer:";
+  legend.classList.remove("error-text");
+  submitAnswerBtn.classList.remove("error-btn");
+  radioButtonGroup.classList.remove("error-frame");
+  legend.removeAttribute("aria-live");
+  legend.removeAttribute("role");
+};
+
+//#endregion
+
+//#region --- Start over ----
+const startAgain = (): void => {
+  nextQuestionBtn.innerHTML = "NEXT QUESTION";
+  currentStep = -1;
+  score = 0;
+  transition(quizResult, startPage, null);
+};
+
+//#endregion
+
+//#region --- Keyboard Navigation ----
+const handleKeyEvent = (event: KeyboardEvent, button: HTMLElement): void => {
+  switch (event.key) {
+    case "Enter":
+      switch (document.activeElement) {
+        case button:
+          button.click();
+          break;
+        case skipToMain:
+          main.focus()
+          break;
+        case menuIcon:
+          burgerMenu();
+          break;
+        case indexPage:
+          indexPage.click();
+          break;
+        case aboutPage:
+          aboutPage.click();
+          break;
+        case darkModeContainer:
+          darkmode();
+          break;
+        case motionModeIcon:
+          toggleReduceMotion(); // Add this line!
+          break;
+        case optionA:
+          event.preventDefault();
+          optionA.click();
+          break;
+        case optionB:
+          event.preventDefault();
+          optionB.click();
+          break;
+        case optionC:
+          event.preventDefault();
+          optionC.click();
+          break;
+        case optionD:
+          event.preventDefault();
+          optionD.click();
+          break;
+        case answerBtnContainer:
+          loadNextAnswer();
+          setTimeout(() => {
+            resultTitle.focus();
+          }, 600);
+          break;
+        case nextQuestionBtn:
+          setTimeout(() => {
+            questionTitle.focus();
+          }, 600);
+          break;
+        case startAgainBtn:
+          setTimeout(() => {
+            titleText.focus();
+          }, 600);
+          break;
+        default:
+          if (
+            document.activeElement !== skipToMain &&
+            document.activeElement !== button &&
+            document.activeElement !== menuIcon &&
+            document.activeElement !== indexPage &&
+            document.activeElement !== aboutPage &&
+            document.activeElement !== darkmodetoggle &&
+            document.activeElement !== motionModeIcon &&
+            document.activeElement !== optionA &&
+            document.activeElement !== optionB &&
+            document.activeElement !== optionC &&
+            document.activeElement !== optionD &&
+            document.activeElement !== answerBtnContainer &&
+            document.activeElement !== nextQuestionBtn &&
+            document.activeElement !== startAgainBtn
+          ) {
+            event.preventDefault();
+            button.focus();
+          }
+          break;
+      }
+      break;
+
+    case "Escape":
+      if (
+        document.activeElement !== skipToMain &&
+        document.activeElement !== button &&
+        document.activeElement !== menuIcon &&
+        document.activeElement !== indexPage &&
+        document.activeElement !== aboutPage &&
+        document.activeElement !== darkmodetoggle &&
+        document.activeElement !== motionModeIcon &&
+        document.activeElement !== optionA &&
+        document.activeElement !== optionB &&
+        document.activeElement !== optionC &&
+        document.activeElement !== optionD &&
+        document.activeElement !== answerBtnContainer &&
+        document.activeElement !== nextQuestionBtn &&
+        document.activeElement !== startAgainBtn
+      ) {
+        event.preventDefault();
+        optionA.focus();
+      } else {
+        return;
+        // optionA.focus()
+      }
+      break;
+
+    case "ArrowDown":
+      if (document.activeElement === optionD) {
+        event.preventDefault();
+        answerBtnContainer.focus();
+      }
+  }
+};
+
+const enterKeySelect = (event: KeyboardEvent): void => {
+  handleKeyEvent(event, submitAnswerBtn);
+  handleKeyEvent(event, startQuizBtn);
+  // handleKeyEvent(event, nextQuestionBtn);
+  // handleKeyEvent(event, startAgainBtn);
+};
+
+//#endregion
+
+//#region --- Transition ----
+
+const transition = (
+  hideElement: HTMLElement,
+  showElement: HTMLElement,
+  hideElementExtra?: HTMLElement
+): void => {
+  const mediaQueryIpad = window.matchMedia("(min-width: 768px)");
+  const mediaQuerySmall = window.matchMedia("(max-width: 360px)");
+
+  if (
+    mediaQueryIpad.matches ||
+    mediaQuerySmall.matches ||
+    reduceMotion === true
+  ) {
+    showElement.classList.remove("hide");
+    hideElement.classList.add("hide");
+    if (hideElementExtra) {
+      hideElementExtra.classList.add("hide");
+    }
+  } else {
+    showElement.classList.remove("hide");
+    requestAnimationFrame(() => {
+      main.scrollTo({
+        left: main.scrollLeft + cardWidth,
+        behavior: "smooth",
+      });
+    });
+    setTimeout(() => {
+      hideElement.classList.add("hide");
+      if (hideElementExtra) {
+        hideElementExtra.classList.add("hide");
+      }
+      const parent = hideElement.parentNode;
+      if (parent) {
+        parent.insertBefore(showElement, hideElement);
+      }
+    }, 500);
+  }
+};
+
+//#endregion
+
+//#region --- Dark mode & Reduce motion----
+
+if (localStorage.getItem("dark-mode") === "enabled") {
+  theBody.classList.add("dark-mode");
+}
+
+const darkmode = () => {
+  if (theBody.classList.contains("dark-mode")) {
+    theBody.classList.remove("dark-mode");
+    localStorage.setItem("dark-mode", "disabled");
+    darkmodetoggle.classList.remove("dark-button");
+    darkmodetoggle.innerHTML = "DARK MODE";
+  } else {
+    theBody.classList.add("dark-mode");
+    localStorage.setItem("dark-mode", "enabled");
+    darkmodetoggle.classList.add("dark-button");
+    darkmodetoggle.innerHTML = "LIGHT MODE";
+  }
+
+  const isExpanded = darkmodetoggle.getAttribute("aria-expanded") === "true";
+  darkmodetoggle.setAttribute("aria-expanded", isExpanded ? "false" : "true");
+};
+
+const toggleReduceMotion = () => {
+  reduceMotion = !reduceMotion;
+  if (reduceMotion) {
+    motionModeIcon.classList.add("dark-button");
+  } else {
+    motionModeIcon.classList.remove("dark-button");
+  }
+
+  const isExpanded = motionModeIcon.getAttribute("aria-expanded") === "true";
+  motionModeIcon.setAttribute("aria-expanded", isExpanded ? "false" : "true");
+};
+
+//#endrigion
+
+//#endregion
+
+//#endregion
+
+//#region --- Event listeners -----
+menuIcon.addEventListener("click", burgerMenu);
+startQuizBtn.addEventListener("click", loadNextQuestion);
+submitAnswerBtn.addEventListener("click", loadNextAnswer);
+nextQuestionBtn.addEventListener("click", loadNextQuestion);
+startAgainBtn.addEventListener("click", startAgain);
+darkmodetoggle.addEventListener("click", darkmode);
+motionModeIcon.addEventListener("click", toggleReduceMotion);
+document.addEventListener("keydown", enterKeySelect);
+
+radioButtonCheck.forEach((btn) => {
+  btn.addEventListener("click", resetErrorStyle);
+});
+
+//#endregion
diff --git a/js/questions.ts b/js/questions.ts
new file mode 100644
index 0000000..25b74b7
--- /dev/null
+++ b/js/questions.ts
@@ -0,0 +1,72 @@
+//#region --- Interface -----
+interface Question {
+  id: string;
+  currentStep: number;
+  questionTitle: string;
+  questionText: string;
+  options: string[];
+  correctAnswer: string;
+  resultTitleWin: string;
+  resultExplanationWin: string;
+  resultTitleLose: string;
+  resultExplanationLose: string;
+}
+//#endregion
+
+//#region --- Object -----
+const questions: Question[] = [
+  {
+    id: "question1",
+    currentStep: 1,
+    questionTitle: "This is question ",
+    questionText: "Which of the following is NOT a principle of the WCAG?",
+    options: ["Perceivable", "Operable", "Flexible", "Robust"],
+    correctAnswer: "C",
+    resultTitleWin: "This is correct!",
+    resultExplanationWin:
+      "Perceivable, Operable, Understandable and Robust are the four main principles. Well done!",
+    resultTitleLose: "Oh no!",
+    resultExplanationLose:
+      "You got it wrong. Perceivable, Operable, Understandable and Robust are the four main principles.",
+  },
+  {
+    id: "question2",
+    questionText: "What does ARIA stand for?",
+    questionTitle: "This is question ",
+    currentStep: 2,
+    options: [
+      "Accessible Rich Internet Applications",
+      "Advanced Responsive Internet Accessibility",
+      "Automated Resource Integration API",
+      "Assistive Rendering & Interaction Attributes",
+    ],
+    correctAnswer: "A",
+    resultTitleWin: "Yay!",
+    resultExplanationWin:
+      "You got it right. Accessible Rich Internet Applications is correct!",
+    resultTitleLose: "Not quite!",
+    resultExplanationLose:
+      "The correct answer is Accessible Rich Internet Applications. Now you know!",
+  },
+  {
+    id: "question3",
+    currentStep: 3,
+    questionTitle: "This is question ",
+    questionText: "What is the purpose of a 'skip to content' link?",
+    options: [
+      "To skip advertisements",
+      "To skip the navigation",
+      "To skip all images",
+      "To skip the logo",
+    ],
+    correctAnswer: "B",
+    resultTitleWin: "Yes!",
+    resultExplanationWin:
+      "That is the right choice. When you press 'skip to content' you want the user to skip the navigation.",
+    resultTitleLose: "Oh no!",
+    resultExplanationLose:
+      "This is incorrect. When you press 'skip to content' you want the user to skip the navigation.",
+  },
+];
+
+//#endregion
diff --git a/structure.md b/structure.md
new file mode 100644
index 0000000..db83914
--- /dev/null
+++ b/structure.md
@@ -0,0 +1,70 @@
+
+Go to next ...
+  - Questions 1
+    - Load Question A
+    - Load Question B (Correct)
+    - Load Question C
+    - Load Question D
+  - Store score
+  - Ansewer 1
+    - Load ansewer
+      - Correct
+      - incrorect
+  - Questions 2
+    - Load Question A
+    - Load Question B
+    - Load Question C
+    - Load Question D (Corrext)
+  - Store score
+  - Ansewer 2 
+    - Load ansewer
+      - Correct
+      - incrorect
+  - Questions 3
+    - Load Question A (Correct)
+    - Load Question B
+    - Load Question C
+    - Load Question D
+  - Store score
+  - Ansewer 3
+    - Load ansewer
+      - Correct
+      - incrorect
+  - Final Score 
+    - Load resault
+    - On exit (Set User score = 0) 
+
+
+
+User score
+  - Create user
+    - User score = 0
+
+Question Object:
+Questions: {
+A1: Question A1
+B1: Question B1
+C1: Question C1
+D1: Question D1
+A2: Question A2
+B2: Question B2
+C2: Question C2
+D2: Question D2
+A3: Question A3
+B3: Question B3
+C3: Question C3
+D3: Question D3
+}
+
+
+Correct option
+
+Wrong option
+
+Load questions
+  - 
+
+
+
+
+
diff --git a/js/main.js b/test.js
similarity index 100%
rename from js/main.js
rename to test.js
diff --git a/tsconfig.json b/tsconfig.json
new file mode 100644
index 0000000..3ad0b7f
--- /dev/null
+++ b/tsconfig.json
@@ -0,0 +1,17 @@
+{
+  "compilerOptions": {
+    "target": "ES6",
+    "outDir": "./dist",
+    "strict": true,
+    "lib": [
+      "es2016",
+      "dom"
+    ]
+  },
+  "include": [
+    "**/*.ts"
+  ],
+  "exclude": [
+    "node_modules"
+  ]
+}
\ No newline at end of file
diff --git a/visibility.ts b/visibility.ts
new file mode 100644
index 0000000..e69de29
