<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Experimental Matrices</title>
  <style>
    /* General Reset */
    * {
      margin: 30;
      padding: 0;
      box-sizing: border-box;
    }

    body {
      font-family: 'Arial', sans-serif;
      background-color: #121212;
      color: #ffffff;
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100vh;
      overflow: hidden;
    }

    .container {
      width: 100%;
      max-width: 800px;
      padding: 20px;
      background-color: #1e1e1e;
      border-radius: 0px;
      box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5);
      text-align: center;
    }

    h1 {
      font-size: 2rem;
      margin-bottom: 20px;
      color: #00ffcc;
    }

    .timer {
    font-size: 1.5rem;
    color: #00ffcc;
    margin: 10px 0;
}

.timer.warning {
    color: #ff4081;
    animation: pulse 1s infinite;
}

@keyframes pulse {
    0% { opacity: 1; }
    50% { opacity: 0.5; }
    100% { opacity: 1; }
}

    .question {
      font-size: 1rem;	
      margin-bottom: 20px;
    }

    .question img {
      max-width: 100%;
      height: auto;
      border-radius: 8px;
      border: 2px solid #333;
      margin-bottom: 20px;
    }

   .answers {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* Change to 3 columns */
  gap: 15px;
  justify-content: center;
  margin: 0 auto;
  max-width: 1200px; /* Increased max-width to accommodate more options */
}

.answer {
  padding: 12px 15px; /* Slightly reduced padding */
  background-color: #333;
  border: 2px solid #444;
  border-radius: 8px;
  color: #00ffcc;
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.answer img {
  width: 150px; /* Slightly reduced image size */
  height: 150px; /* Slightly reduced image size */
  margin-bottom: 4px;
  border-radius: 8px;
  border: 1px solid #222;
}

.container {
  width: 100%;
  max-width: 800px; /* Increased max-width */
  padding: 20px;
  background-color: #1e1e1e;
  border-radius: 10px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5);
  text-align: center;
}


    .answer p {
      margin-top: 5px;
      font-size: 1rem;
    }

    .answer:hover {
      background-color: #00ffcc;
      color: #1e1e1e;
      border-color: #00ffcc;
    }

    .result {
      margin-top: 20px;
      font-size: 1.5rem;
      color: #ff4081;
    }

    button {
      margin-top: 20px;
      padding: 10px 20px;
      background-color: #00ffcc;
      color: #1e1e1e;
      border: none;
      border-radius: 8px;
      cursor: pointer;
      font-size: 1rem;
    }

    button:hover {
      background-color: #00d1b2;
    }
  </style>
</head>
<body>
  <div class="container">
    <h1>Experimental Matrices</h1>
    <div id="timer" class="timer"></div>
    <div id="quiz">
      <div id="question-container" class="question">
        <!-- Question content will be dynamically inserted here -->
      </div>
      <div id="answers-container" class="answers">
        <!-- Answer choices will be dynamically inserted here -->
      </div>
    </div>
    <div id="result" class="result" style="display: none;"></div>
    <button id="restart-btn" style="display: none;" onclick="restartQuiz()">Restart</button>
  </div>

  <script>
    // Questions and Answers Data
   const questions = [
  {
    question: "What goes in the empty box?",
    image: "questions/1.png",
    timeLimit: 30, 
    answers: [
      { text: null, image: "answers/1A.png", correct: false },
      { text: null, image: "answers/1B.png", correct: false },
      { text: null, image: "answers/1C.png", correct: true },
      { text: null, image: "answers/1D.png", correct: false },
      { text: null, image: "answers/1E.png", correct: false },
      { text: null, image: "answers/1F.png", correct: false } 
    ]
  },
  {
    question: "What goes in the empty box?",
    image: "questions/2.png",
    timeLimit: 30, 
    answers: [
      { text: null, image: "answers/2A.png", correct: false },
      { text: null, image: "answers/2B.png", correct: false },
      { text: null, image: "answers/2C.png", correct: false },
      { text: null, image: "answers/2D.png", correct: false },
      { text: null, image: "answers/2E.png", correct: false },
      { text: null, image: "answers/2F.png", correct: true }
    ]
  },

{
    question: "What goes in the empty box?",
    image: "questions/3.png",
    timeLimit: 30, 
    answers: [
      { text: null, image: "answers/3A.png", correct: false },
      { text: null, image: "answers/3B.png", correct: false },
      { text: null, image: "answers/3C.png", correct: false},
      { text: null, image: "answers/3D.png", correct: true},
      { text: null, image: "answers/3E.png", correct: false },
      { text: null, image: "answers/3F.png", correct: false } 
    ]
  },
{
    question: "What goes in the empty box?",
    image: "questions/4.png",
    timeLimit: 30, 
    answers: [
      { text: null, image: "answers/4A.png", correct: false },
      { text: null, image: "answers/4B.png", correct: false },
      { text: null, image: "answers/4C.png", correct: false},
      { text: null, image: "answers/4D.png", correct: false},
      { text: null, image: "answers/4E.png", correct: true },
      { text: null, image: "answers/4F.png", correct: false } 
    ]
  },
{
    question: "What goes in the empty box?",
    image: "questions/5.png",
    timeLimit: 30, 
    answers: [
      { text: null, image: "answers/5A.png", correct: true },
      { text: null, image: "answers/5B.png", correct: false },
      { text: null, image: "answers/5C.png", correct: false},
      { text: null, image: "answers/5D.png", correct: false},
      { text: null, image: "answers/5E.png", correct: false },
      { text: null, image: "answers/5F.png", correct: false } 
    ]
  },
{
    question: "What goes in the empty box?",
    image: "questions/6.png",
    timeLimit: 30, 
    answers: [
      { text: null, image: "answers/6A.png", correct: false },
      { text: null, image: "answers/6B.png", correct: false },
      { text: null, image: "answers/6C.png", correct: false},
      { text: null, image: "answers/6D.png", correct: false},
      { text: null, image: "answers/6E.png", correct: false },
      { text: null, image: "answers/6F.png", correct: true } 
    ]
  },
{
    question: "What goes in the empty box?",
    image: "questions/7.png",
    timeLimit: 30, 
    answers: [
      { text: null, image: "answers/7A.png", correct: true },
      { text: null, image: "answers/7B.png", correct: false },
      { text: null, image: "answers/7C.png", correct: false},
      { text: null, image: "answers/7D.png", correct: false},
      { text: null, image: "answers/7E.png", correct: false },
      { text: null, image: "answers/7F.png", correct: false } 
    ]
  },
{
    question: "What goes in the empty box?",
    image: "questions/8.png",
    timeLimit: 75, 
    answers: [
      { text: null, image: "answers/8A.png", correct: false },
      { text: null, image: "answers/8B.png", correct: true },
      { text: null, image: "answers/8C.png", correct: false},
      { text: null, image: "answers/8D.png", correct: false},
      { text: null, image: "answers/8E.png", correct: false },
      { text: null, image: "answers/8F.png", correct: false } 
    ]
  },
{
    question: "What goes in the empty box?",
    image: "questions/9.png",
    timeLimit: 75, 
    answers: [
      { text: null, image: "answers/9A.png", correct: false},
      { text: null, image: "answers/9B.png", correct: false},
      { text: null, image: "answers/9C.png", correct: false},
      { text: null, image: "answers/9D.png", correct: false},
      { text: null, image: "answers/9E.png", correct: true},
      { text: null, image: "answers/9F.png", correct: false} 
    ]
  },
{
    question: "What goes in the empty box?",
    image: "questions/10.png",
    timeLimit: 75, 
    answers: [
      { text: null, image: "answers/10A.png", correct: false},
      { text: null, image: "answers/10B.png", correct: false},
      { text: null, image: "answers/10C.png", correct: true},
      { text: null, image: "answers/10D.png", correct: false},
      { text: null, image: "answers/10E.png", correct: false},
      { text: null, image: "answers/10F.png", correct: false} 
    ]
  },
{
    question: "What goes in the empty box?",
    image: "questions/11.png",
    timeLimit: 75, 
    answers: [
      { text: null, image: "answers/11A.png", correct: false},
      { text: null, image: "answers/11B.png", correct: false},
      { text: null, image: "answers/11C.png", correct: false},
      { text: null, image: "answers/11D.png", correct: true},
      { text: null, image: "answers/11E.png", correct: false},
      { text: null, image: "answers/11F.png", correct: false} 
    ]
  },
{
    question: "What goes in the empty box?",
    image: "questions/12.png",
    timeLimit: 90, 
    answers: [
      { text: null, image: "answers/12A.png", correct: true},
      { text: null, image: "answers/12B.png", correct: false},
      { text: null, image: "answers/12C.png", correct: false},
      { text: null, image: "answers/12D.png", correct: false},
      { text: null, image: "answers/12E.png", correct: false},
      { text: null, image: "answers/12F.png", correct: false} 
    ]
  },
{
    question: "What goes in the empty box?",
    image: "questions/13.png",
    timeLimit: 90, 
    answers: [
      { text: null, image: "answers/13A.png", correct: true},
      { text: null, image: "answers/13B.png", correct: false},
      { text: null, image: "answers/13C.png", correct: false},
      { text: null, image: "answers/13D.png", correct: false},
      { text: null, image: "answers/13E.png", correct: false},
      { text: null, image: "answers/13F.png", correct: false} 
    ]
  },
{
    question: "What goes in the empty box?",
    image: "questions/14.png",
    timeLimit: 90, 
    answers: [
      { text: null, image: "answers/14A.png", correct: false},
      { text: null, image: "answers/14B.png", correct: false},
      { text: null, image: "answers/14C.png", correct: false},
      { text: null, image: "answers/14D.png", correct: false},
      { text: null, image: "answers/14E.png", correct: false},
      { text: null, image: "answers/14F.png", correct: true} 
    ]
  },
{
    question: "What goes in the empty box?",
    image: "questions/15.png",
    timeLimit: 90, 
    answers: [
      { text: null, image: "answers/15A.png", correct: false},
      { text: null, image: "answers/15B.png", correct: true},
      { text: null, image: "answers/15C.png", correct: false},
      { text: null, image: "answers/15D.png", correct: false},
      { text: null, image: "answers/15E.png", correct: false},
      { text: null, image: "answers/15F.png", correct: false} 
    ]
  },
{
    question: "What goes in the empty box?",
    image: "questions/16.png",
    timeLimit: 90, 
    answers: [
      { text: null, image: "answers/16A.png", correct: false},
      { text: null, image: "answers/16B.png", correct: true},
      { text: null, image: "answers/16C.png", correct: false},
      { text: null, image: "answers/16D.png", correct: false},
      { text: null, image: "answers/16E.png", correct: false},
      { text: null, image: "answers/16F.png", correct: false} 
    ]
  },
{
    question: "What goes in the empty box?",
    image: "questions/17.png",
    timeLimit: 120, 
    answers: [
      { text: null, image: "answers/17A.png", correct: true},
      { text: null, image: "answers/17B.png", correct: false},
      { text: null, image: "answers/17C.png", correct: false},
      { text: null, image: "answers/17D.png", correct: false},
      { text: null, image: "answers/17E.png", correct: false},
      { text: null, image: "answers/17F.png", correct: false} 
    ]
  },
{
    question: "What goes in the empty box?",
    image: "questions/18.png",
    timeLimit: 120, 
    answers: [
      { text: null, image: "answers/18A.png", correct: false},
      { text: null, image: "answers/18B.png", correct: false},
      { text: null, image: "answers/18C.png", correct: false},
      { text: null, image: "answers/18D.png", correct: true},
      { text: null, image: "answers/18E.png", correct: false},
      { text: null, image: "answers/18F.png", correct: false} 
    ]
  },
{
    question: "What goes in the empty box?",
    image: "questions/19.png",
    timeLimit: 120, 
    answers: [
      { text: null, image: "answers/19A.png", correct: false},
      { text: null, image: "answers/19B.png", correct: false},
      { text: null, image: "answers/19C.png", correct: false},
      { text: null, image: "answers/19D.png", correct: false},
      { text: null, image: "answers/19E.png", correct: false},
      { text: null, image: "answers/19F.png", correct: true} 
    ]
  },
{
    question: "What goes in the empty box?",
    image: "questions/20.png",
    timeLimit: 120, 
    answers: [
      { text: null, image: "answers/20A.png", correct: false},
      { text: null, image: "answers/20B.png", correct: false},
      { text: null, image: "answers/20C.png", correct: false},
      { text: null, image: "answers/20D.png", correct: true},
      { text: null, image: "answers/20E.png", correct: false},
      { text: null, image: "answers/20F.png", correct: false} 
    ]
  },
{
    question: "What goes in the empty box?",
    image: "questions/21.png",
    timeLimit: 120, 
    answers: [
      { text: null, image: "answers/21A.png", correct: false},
      { text: null, image: "answers/21B.png", correct: false},
      { text: null, image: "answers/21C.png", correct: false},
      { text: null, image: "answers/21D.png", correct: false},
      { text: null, image: "answers/21E.png", correct: true},
      { text: null, image: "answers/21F.png", correct: false} 
    ]
  },
{
    question: "What goes in the empty box?",
    image: "questions/22.png",
    timeLimit: 120, 
    answers: [
      { text: null, image: "answers/22A.png", correct: false},
      { text: null, image: "answers/22B.png", correct: true},
      { text: null, image: "answers/22C.png", correct: false},
      { text: null, image: "answers/22D.png", correct: false},
      { text: null, image: "answers/22E.png", correct: false},
      { text: null, image: "answers/22F.png", correct: false} 
    ]
  },
{
    question: "What goes in the empty box?",
    image: "questions/23.png",
    timeLimit: 120, 
    answers: [
      { text: null, image: "answers/23A.png", correct: false},
      { text: null, image: "answers/23B.png", correct: false},
      { text: null, image: "answers/23C.png", correct: false},
      { text: null, image: "answers/23D.png", correct: false},
      { text: null, image: "answers/23E.png", correct: true},
      { text: null, image: "answers/23F.png", correct: false} 
    ]
  },
{
    question: "What goes in the empty box?",
    image: "questions/24.png",
    timeLimit: 180, 
    answers: [
      { text: null, image: "answers/24A.png", correct: false},
      { text: null, image: "answers/24B.png", correct: false},
      { text: null, image: "answers/24C.png", correct: true},
      { text: null, image: "answers/24D.png", correct: false},
      { text: null, image: "answers/24E.png", correct: false},
      { text: null, image: "answers/24F.png", correct: false} 
    ]
  }
// 5a, 4b, 3c, 4d, 4e, 4f

];


let currentQuestionIndex = 0;
let score = 0;
let timer;
let timeLeft;
let consecutiveWrong = 0;  // Added this variable to track consecutive wrong answers
const MAX_CONSECUTIVE_WRONG = 3;  // Added this constant to set the maximum allowed wrong answers in a row


const questionContainer = document.getElementById("question-container");
const answersContainer = document.getElementById("answers-container");
const resultContainer = document.getElementById("result");
const restartButton = document.getElementById("restart-btn");
const timerDisplay = document.getElementById("timer");

function startTimer(duration) {
    clearInterval(timer);
    timerDisplay.classList.remove('warning');
    
    if (duration === 0) {
        timerDisplay.style.display = 'none';
        return;
    }

    timerDisplay.style.display = 'block';
    timeLeft = duration;
    updateTimerDisplay();

    timer = setInterval(() => {
        timeLeft--;
        updateTimerDisplay();

        if (timeLeft <= 5) {
            timerDisplay.classList.add('warning');
        }

        if (timeLeft <= 0) {
            clearInterval(timer);
            selectAnswer(false); // Auto-select wrong answer when time runs out
        }
    }, 1000);
}

function updateTimerDisplay() {
    timerDisplay.textContent = `Time: ${timeLeft}`;
}

function showQuestion() {
    // Clear previous content
    questionContainer.innerHTML = "";
    answersContainer.innerHTML = "";

    // Get current question
    const question = questions[currentQuestionIndex];

    // Start timer for current question
    startTimer(question.timeLimit);

    // Display question text or image
    const questionTitle = document.createElement("h2");
    questionTitle.textContent = question.question;
    questionContainer.appendChild(questionTitle);

    if (question.image) {
        const questionImage = document.createElement("img");
        questionImage.src = question.image;
        questionImage.alt = "Question Image";
        questionContainer.appendChild(questionImage);
    }

    // Display answers
    question.answers.forEach(answer => {
        const answerButton = document.createElement("div");
        answerButton.classList.add("answer");

        if (answer.image) {
            const answerImage = document.createElement("img");
            answerImage.src = answer.image;
            answerImage.alt = "Answer Image";
            answerButton.appendChild(answerImage);
        }

        if (answer.text) {
            const answerText = document.createElement("p");
            answerText.textContent = answer.text;
            answerButton.appendChild(answerText);
        }

        answerButton.onclick = () => selectAnswer(answer.correct);
        answersContainer.appendChild(answerButton);
    });
}

function selectAnswer(correct) {
    clearInterval(timer);
    
    if (correct) {
        score++;
        consecutiveWrong = 0;  // Reset consecutive wrong answers when correct
    } else {
        consecutiveWrong++;  // Increment consecutive wrong answers
        if (consecutiveWrong >= MAX_CONSECUTIVE_WRONG) {
            showResult();  // End the test if too many wrong answers in a row
            return;
        }
    }

  currentQuestionIndex++;

    if (currentQuestionIndex < questions.length) {
        showQuestion();
    } else {
        showResult();
    }
}

function showResult() {
    questionContainer.style.display = "none";
    answersContainer.style.display = "none";
    resultContainer.style.display = "block";
    timerDisplay.style.display = "none";
    
    // Modified result message to show reason for termination if applicable
    let resultMessage = `Your score: ${score} out of ${questions.length}`;
    resultContainer.textContent = resultMessage;
}

// Start the quiz
showQuestion();
</script>
</body>
</html>