edit oop and responsive design

.vscode/settings.json

@@ -0,0 +1,3 @@
+{
+    "liveServer.settings.port": 5502
+}

css/style.css

@@ -0,0 +1,110 @@
+* {
+  -webkit-box-sizing: border-box;
+          box-sizing: border-box;
+}
+
+body {
+  padding: 0;
+  margin: 0;
+}
+
+#notfound {
+  position: relative;
+  height: 100vh;
+  background-color: #fafbfd;
+}
+
+#notfound .notfound {
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  -webkit-transform: translate(-50%, -50%);
+      -ms-transform: translate(-50%, -50%);
+          transform: translate(-50%, -50%);
+}
+
+.notfound {
+  max-width: 520px;
+  width: 100%;
+  text-align: center;
+}
+
+.notfound .notfound-bg {
+  position: absolute;
+  left: 0px;
+  right: 0px;
+  top: 50%;
+  -webkit-transform: translateY(-50%);
+      -ms-transform: translateY(-50%);
+          transform: translateY(-50%);
+  z-index: -1;
+}
+
+.notfound .notfound-bg > div {
+  width: 100%;
+  background: #fff;
+  border-radius: 90px;
+  height: 125px;
+}
+
+.notfound .notfound-bg > div:nth-child(1) {
+  -webkit-box-shadow: 5px 5px 0px 0px #f3f3f3;
+          box-shadow: 5px 5px 0px 0px #f3f3f3;
+}
+
+.notfound .notfound-bg > div:nth-child(2) {
+  -webkit-transform: scale(1.3);
+      -ms-transform: scale(1.3);
+          transform: scale(1.3);
+  -webkit-box-shadow: 5px 5px 0px 0px #f3f3f3;
+          box-shadow: 5px 5px 0px 0px #f3f3f3;
+  position: relative;
+  z-index: 10;
+}
+
+.notfound .notfound-bg > div:nth-child(3) {
+  -webkit-box-shadow: 5px 5px 0px 0px #f3f3f3;
+          box-shadow: 5px 5px 0px 0px #f3f3f3;
+  position: relative;
+  z-index: 90;
+}
+
+.notfound h1 {
+  font-family: 'Quicksand', sans-serif;
+  font-size: 86px;
+  text-transform: uppercase;
+  font-weight: 700;
+  margin-top: 0;
+  margin-bottom: 8px;
+  color: #151515;
+}
+
+.notfound h2 {
+  font-family: 'Quicksand', sans-serif;
+  font-size: 26px;
+  margin: 0;
+  font-weight: 700;
+  color: #151515;
+}
+
+
+@media only screen and (max-width: 767px) {
+    .notfound .notfound-bg {
+      width: 287px;
+      margin: auto;
+    }
+
+    .notfound .notfound-bg > div {
+      height: 85px;
+  }
+}
+
+@media only screen and (max-width: 480px) {
+  .notfound h1 {
+    font-size: 68px;
+  }
+
+  .notfound h2 {
+    font-size: 18px;
+  }
+}

js/Answer.js

@@ -0,0 +1,8 @@
+class Answer {
+    constructor(body, isCorrect) {
+        this.body = body;
+        this.isCorrect = isCorrect;
+    }
+}
+
+export default Answer;

js/Question.js

@@ -0,0 +1,17 @@
+class Question {
+    constructor(title, answers) {
+      this.title = title;
+      this.answers = answers.map((answer) => ({ ...answer }));
+      this.selectedAnswerIndex = -1;
+    }
+
+    setSelectedAnswer(index) {
+      this.selectedAnswerIndex = index;
+    }
+
+    getSelectedAnswer() {
+      return this.selectedAnswerIndex;
+    }
+  }
+
+  export default Question;

js/app.js

@@ -0,0 +1,204 @@
+import Question from './Question.js';
+import Answer from './Answer.js';
+
+let q1 = new Question("What is the capital of France?", [
+    new Answer("Berlin", false),
+    new Answer("Madrid", false),
+    new Answer("Paris", true),
+    new Answer("Rome", false),
+]);
+
+let q2 = new Question("What's Your Name?", [
+    new Answer("John", false),
+    new Answer("Doe", false),
+    new Answer("Ahmed", true),
+    new Answer("Omar", false),
+]);
+
+let q3 = new Question("What's Your Age?", [
+    new Answer("23", false),
+    new Answer("22", false),
+    new Answer("16", true),
+    new Answer("32", false),
+]);
+
+let quiz = [q1, q2, q3];
+let impo = document.getElementById("question");
+let options = document.querySelectorAll(".option");
+let radioInputs = document.querySelectorAll("input[type='radio']");
+let nextButton = document.getElementById("next");
+let previousButton = document.getElementById("previous");
+let submitButton = document.getElementById("submit");
+let markButton = document.getElementById("mark");
+let timerDisplay = document.getElementById("timeLeft");
+let markedQuestionsDiv = document.getElementById("markedQuestions");
+let timerInterval;
+let currentIndex = 0;
+let timeLeft = 400; // Total time in seconds
+
+function updateQuestion() {
+    let currentQuestion = quiz[currentIndex];
+    impo.textContent = currentQuestion.title;
+    for (let i = 0; i < options.length; i++) {
+        options[i].querySelector("label").textContent = currentQuestion.answers[i].body;
+        radioInputs[i].checked = false; // Reset radio button selection
+        radioInputs[i].disabled = false; // Enable radio buttons
+
+        // Highlight selected answer if already selected
+        if (currentQuestion.getSelectedAnswer() === i) {
+            radioInputs[i].checked = true; // Example: Select radio button on selection
+        }
+    }
+
+    if (currentIndex === 0) {
+        previousButton.style.display = "none";
+    } else {
+        previousButton.style.display = "block";
+    }
+    if (currentIndex === quiz.length - 1) {
+        nextButton.style.display = "none";
+    } else {
+        nextButton.style.display = "block";
+    }
+
+    // Update mark/unmark button text based on question marking status
+    updateMarkButton();
+}
+
+function handleOptionClick(index) {
+    let currentQuestion = quiz[currentIndex];
+
+    // Mark the selected answer and update UI
+    currentQuestion.setSelectedAnswer(index);
+}
+
+function calculateScore() {
+    let correctAnswers = 0;
+    quiz.forEach((question) => {
+        if (question.getSelectedAnswer() !== -1 && question.answers[question.getSelectedAnswer()].isCorrect) {
+            correctAnswers++;
+        }
+    });
+    return correctAnswers;
+}
+
+function startTimer(minutes) {
+    let seconds = minutes * 60;
+
+    function updateCountdown() {
+        let mins = Math.floor(seconds / 60);
+        let secs = seconds % 60;
+        secs = secs < 10 ? '0' + secs : secs; // add leading zero if seconds less than 10
+        timerDisplay.textContent = `${mins}:${secs}`;
+
+        if (seconds > 0) {
+            seconds--;
+            setTimeout(updateCountdown, 1000);
+        } else {
+            goToResultPage();
+        }
+    }
+
+    updateCountdown();
+}
+
+function goToResultPage() {
+    let score = calculateScore();
+    // Redirect to result page with score
+    window.location.replace(`result.html?score=${score}`);
+}
+
+function toggleMarkQuestion() {
+    let currentQuestion = quiz[currentIndex];
+
+    // Check if the question is already marked
+    let existingMarkedQuestion = Array.from(markedQuestionsDiv.children).find((div) => parseInt(div.dataset.index) === currentIndex);
+
+    if (!existingMarkedQuestion) {
+        // Mark the question
+        let markedDiv = document.createElement("div");
+        markedDiv.className = "marked-question";
+        markedDiv.textContent = currentQuestion.title;
+        markedDiv.dataset.index = currentIndex; // Store the current index in dataset
+        markedDiv.addEventListener("click", () => {
+            goToMarkedQuestion(markedDiv.dataset.index);
+        });
+        markedQuestionsDiv.appendChild(markedDiv);
+        markedQuestionsDiv.style.transition = "all 0.5s";
+    } else {
+        // Unmark the question
+        existingMarkedQuestion.remove();
+    }
+
+    // Update mark/unmark button text based on question marking status
+    updateMarkButton();
+    // Show or hide marked questions section based on content
+    toggleMarkedQuestionsSection();
+}
+
+function updateMarkButton() {
+    let currentQuestion = quiz[currentIndex];
+    let existingMarkedQuestion = Array.from(markedQuestionsDiv.children).find((div) => parseInt(div.dataset.index) === currentIndex);
+
+    if (existingMarkedQuestion) {
+        markButton.textContent = "Unmark";
+    } else {
+        markButton.textContent = "Mark";
+    }
+}
+
+function goToMarkedQuestion(index) {
+    currentIndex = parseInt(index); // Convert index back to integer
+    updateQuestion();
+}
+
+function toggleMarkedQuestionsSection() {
+    if (markedQuestionsDiv.children.length > 0) {
+        markedQuestionsDiv.style.display = "block";
+        markedQuestionsDiv.classList.add("slideIn");
+    } else {
+        markedQuestionsDiv.style.display = "none";
+        markedQuestionsDiv.classList.remove("slideIn");
+    }
+}
+
+shuffleArray(quiz);
+updateQuestion();
+startTimer(timeLeft); // Start the timer when the page loads
+
+// Event listeners
+nextButton.addEventListener("click", () => {
+    if (currentIndex < quiz.length - 1) {
+        currentIndex++;
+        updateQuestion();
+    }
+});
+
+previousButton.addEventListener("click", () => {
+    if (currentIndex > 0) {
+        currentIndex--;
+        updateQuestion();
+    }
+});
+
+submitButton.addEventListener("click", () => {
+    goToResultPage();
+});
+
+markButton.addEventListener("click", () => {
+    toggleMarkQuestion();
+});
+
+// Add event listeners to radio buttons for option selection
+radioInputs.forEach((radio, index) => {
+    radio.addEventListener("change", () => {
+        handleOptionClick(index);
+    });
+});
+
+function shuffleArray(array) {
+    for (let i = array.length - 1; i > 0; i--) {
+        const j = Math.floor(Math.random() * (i + 1));
+        [array[i], array[j]] = [array[j], array[i]];
+    }
+}

js/helper.js

@@ -0,0 +1,4 @@
+export function getUsersArr() {
+    const users = localStorage.getItem("users");
+    return users ? JSON.parse(users) : []; 
+  }

js/login.js

@@ -1,6 +1,7 @@
-import {getUsersArr} from "./register.js";
 
-let form = document.getElementsByClassName("form")[0];
+import { getUsersArr } from "./helper.js";
+
+let form = document.getElementsByClassName("log-form")[0];
 
 let email = document.getElementById("email");
 let spanEmail = document.getElementById("span-email");
@@ -28,10 +29,11 @@ function validate(e){
      const user = users.find(u => u.email === email.value && u.password === passWord.value);
 
       if (user) {
-        alert("Login successful!");
+        location.replace("/quiz.html");
 
       } else {
-        alert("Please try again.");
+        form.style.outline = "1px solid #d00707";
+        spanPass.textContent = "Email & Password Not Valid !";
       }
 
 }

js/register.js

@@ -1,5 +1,7 @@
-let form = document.getElementsByClassName("form")[0];
+import { getUsersArr } from "./helper.js";
 
+let form = document.getElementsByClassName("form")[0];
+console.log(form)
 let firstName = document.getElementById("firstName");
 let spanFirstName = document.getElementById("span-first-name");
 let rejxname = /^[a-zA-Z ]{2,30}$/;
@@ -95,10 +97,7 @@ function validation(event) {
     location.replace("/login.html");
   }
 }
-export function getUsersArr() {
-  const users = localStorage.getItem("users");
-  return users ? JSON.parse(users) : []; // law fe users array hatha lw mafesh e3mle array
-}
+
 
 form.addEventListener("submit", validation);