script.js

"use strict";

// Question bank: update or extend as you like
const questions = [
  {
    question: "Which language runs in a web browser?",
    options: ["Java", "C", "Python", "JavaScript"],
    answer: 3,
  },
  {
    question: "What does CSS stand for?",
    options: [
      "Central Style Sheets",
      "Cascading Style Sheets",
      "Cascading Simple Sheets",
      "Cars SUVs Sailboats",
    ],
    answer: 1,
  },
  {
    question: "What does HTML stand for?",
    options: [
      "Hypertext Markup Language",
      "Hyperloop Machine Language",
      "Hyperlink and Text Markup Language",
      "Home Tool Markup Language",
    ],
    answer: 0,
  },
  {
    question: "What year was JavaScript launched?",
    options: ["1996", "1995", "1994", "None of the above"],
    answer: 1,
  },
  {
    question: "Which one is NOT a programming language?",
    options: ["Kotlin", "Swift", "Banana", "Go"],
    answer: 2,
  },
  {
    question: "Which array method creates a new array with results of a callback?",
    options: ["forEach", "map", "filter", "reduce"],
    answer: 1,
  },
  {
    question: "Which CSS unit scales with the root font size?",
    options: ["px", "em", "rem", "%"],
    answer: 2,
  },
];

// Active question set (shuffled each start)
let activeQuestions = [];
function shuffle(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]];
  }
  return array;
}

let currentIndex = 0;
let score = 0;

// Elements
// Login elements
const loginCard = document.getElementById("login-card");
const loginForm = document.getElementById("login-form");
const nameInput = document.getElementById("name");
const emailInput = document.getElementById("email");
const loginMessage = document.getElementById("login-message");

// Quiz elements
const quizCard = document.getElementById("quiz-card");
const resultCard = document.getElementById("result-card");
const questionEl = document.getElementById("question");
const answersEl = document.getElementById("answers");
const progressEl = document.getElementById("progress");
const nextBtn = document.getElementById("next-btn");
const finalScoreEl = document.getElementById("final-score");
const restartBtn = document.getElementById("restart-btn");
const timerEl = document.getElementById("timer");

// Timer state (2 minutes)
const QUIZ_DURATION_SECONDS = 120; // 2 minutes
let remainingSeconds = QUIZ_DURATION_SECONDS;
let timerId = null;

// Simple storage helpers
const STORAGE_KEY_USERS = "quiz_users_attempts_v1";
let usersAttempts = JSON.parse(localStorage.getItem(STORAGE_KEY_USERS) || "{}");

function saveAttempts() {
  localStorage.setItem(STORAGE_KEY_USERS, JSON.stringify(usersAttempts));
}

function initQuiz() {
  currentIndex = 0;
  score = 0;
  // Create a shuffled copy each start/refresh
  activeQuestions = shuffle(questions.slice());

  // Show quiz, hide result
  resultCard.classList.remove("show");
  resultCard.classList.add("hidden");
  quizCard.classList.add("show");
  quizCard.classList.remove("hidden");

  // Reset and start timer
  stopTimer();
  remainingSeconds = QUIZ_DURATION_SECONDS;
  updateTimerUI();
  startTimer();

  showQuestion();
}

function showQuestion() {
  // Reset state
  nextBtn.classList.add("hidden");
  answersEl.innerHTML = "";

  const q = activeQuestions[currentIndex];
  questionEl.textContent = q.question;
  progressEl.textContent = `Question ${currentIndex + 1} of ${activeQuestions.length}`;

  // Render shuffled answer buttons
  const shuffledAnswers = shuffle(
    q.options.map((text, idx) => ({ text, isCorrect: idx === q.answer }))
  );
  shuffledAnswers.forEach(({ text, isCorrect }) => {
    const btn = document.createElement("button");
    btn.className = "btn option";
    btn.type = "button";
    btn.textContent = text;
    btn.dataset.correct = isCorrect ? "true" : "false";
    btn.addEventListener("click", onSelectAnswer, { once: true });
    answersEl.appendChild(btn);
  });

  // trigger enter animation
  quizCard.classList.remove("fade-in");
  void quizCard.offsetWidth; // reflow to restart animation
  quizCard.classList.add("fade-in");
}

function onSelectAnswer(e) {
  const selectedBtn = e.currentTarget;
  const isCorrect = selectedBtn.dataset.correct === "true";

  const optionButtons = Array.from(answersEl.children);

  // mark correctness
  if (isCorrect) {
    selectedBtn.classList.add("correct");
    score++;
  } else {
    selectedBtn.classList.add("incorrect");
    // highlight the correct one
    const correctBtn = optionButtons.find((b) => b.dataset.correct === "true");
    if (correctBtn) correctBtn.classList.add("correct");
  }

  // disable all options
  optionButtons.forEach((btn) => {
    btn.disabled = true;
  });

  // show Next
  nextBtn.classList.remove("hidden");
}

nextBtn.addEventListener("click", () => {
  currentIndex++;
  if (currentIndex < activeQuestions.length) {
    showQuestion();
  } else {
    showResult();
  }
});

function showResult() {
  stopTimer();
  quizCard.classList.remove("show");
  quizCard.classList.add("hidden");
  resultCard.classList.add("show");
  resultCard.classList.remove("hidden");
  finalScoreEl.textContent = `You scored ${score} out of ${activeQuestions.length}`;

  // Mark attempt for the logged-in user
  const currentUserEmail = emailInput?.value?.trim().toLowerCase();
  if (currentUserEmail) {
    usersAttempts[currentUserEmail] = {
      name: nameInput?.value?.trim() || "",
      completedAt: new Date().toISOString(),
      score,
      total: activeQuestions.length,
    };
    saveAttempts();
  }

  // Stay on result screen (no auto-quit)
}

restartBtn.addEventListener("click", () => {
  // Back to login; do not allow retake
  resultCard.classList.remove("show");
  resultCard.classList.add("hidden");
  loginCard.classList.remove("hidden");

  // Clear inputs so a different user can log in
  nameInput.value = "";
  emailInput.value = "";

  loginMessage.textContent = "You have already completed the quiz.";
  loginMessage.className = "message error";
});

// Timer helpers
function startTimer() {
  if (timerId) return; // avoid duplicate timers
  timerId = setInterval(() => {
    remainingSeconds--;
    updateTimerUI();
    if (remainingSeconds <= 0) {
      remainingSeconds = 0;
      updateTimerUI();
      showResult(); // auto-finish on timeout
    }
  }, 1000);
}

function stopTimer() {
  if (timerId) {
    clearInterval(timerId);
    timerId = null;
  }
}

function updateTimerUI() {
  if (!timerEl) return;
  const m = Math.floor(remainingSeconds / 60).toString().padStart(2, "0");
  const s = (remainingSeconds % 60).toString().padStart(2, "0");
  timerEl.textContent = `${m}:${s}`;

  // visual hints as time runs out
  timerEl.classList.toggle("warning", remainingSeconds <= 60 && remainingSeconds > 20);
  timerEl.classList.toggle("danger", remainingSeconds <= 20);
}

// Start: show login first
function showLogin() {
  loginCard.classList.remove("hidden");
}

// Handle login
loginForm.addEventListener("submit", (e) => {
  e.preventDefault();
  const name = nameInput.value.trim();
  const email = emailInput.value.trim().toLowerCase();

  loginMessage.textContent = "";
  loginMessage.className = "message";

  if (!name || !email || !/^[^@\s]+@[^@\s]+\.[^@\s]+$/.test(email)) {
    loginMessage.textContent = "Please enter a valid name and email.";
    loginMessage.classList.add("error");
    return;
  }

  // Check if user already completed the quiz
  const attempt = usersAttempts[email];
  if (attempt) {
    loginMessage.textContent = "You have already completed the quiz.";
    loginMessage.classList.add("error");
    return;
  }

  // Proceed to quiz
  loginCard.classList.add("hidden");
  initQuiz();
});



// Timer helpers
function startTimer() {
  if (timerId) return; // avoid duplicate timers
  timerId = setInterval(() => {
    remainingSeconds--;
    updateTimerUI();
    if (remainingSeconds <= 0) {
      remainingSeconds = 0;
      updateTimerUI();
      showResult(); // auto-finish on timeout
    }
  }, 1000);
}

function stopTimer() {
  if (timerId) {
    clearInterval(timerId);
    timerId = null;
  }
}

function updateTimerUI() {
  if (!timerEl) return;
  const m = Math.floor(remainingSeconds / 60).toString().padStart(2, "0");
  const s = (remainingSeconds % 60).toString().padStart(2, "0");
  timerEl.textContent = `${m}:${s}`;

  // visual hints as time runs out
  timerEl.classList.toggle("warning", remainingSeconds <= 60 && remainingSeconds > 20);
  timerEl.classList.toggle("danger", remainingSeconds <= 20);
}

if (document.readyState === "loading") {
  document.addEventListener("DOMContentLoaded", showLogin);
} else {
  showLogin();
}