quiz-engine.js

import { questions } from './quiz-data.js';

// Quiz state
let currentQuestionIndex = 0;
let score = 0;
let selectedOption = null;
let answered = false;

// DOM elements
const questionText = document.getElementById('question-text');
const optionsContainer = document.getElementById('options-container');
const explanation = document.getElementById('explanation');
const prevBtn = document.getElementById('prev-btn');
const nextBtn = document.getElementById('next-btn');
const currentQuestionDisplay = document.getElementById('current-question');
const totalQuestionsDisplay = document.getElementById('total-questions');
const scoreDisplay = document.getElementById('score');
const quizContent = document.getElementById('quiz-content');
const finalResults = document.getElementById('final-results');
const finalScoreDisplay = document.getElementById('final-score');
const resultMessage = document.getElementById('result-message');
const restartBtn = document.getElementById('restart-btn');

// Initialize quiz
function initQuiz() {
    totalQuestionsDisplay.textContent = questions.length;
    showQuestion();
    
    prevBtn.addEventListener('click', showPreviousQuestion);
    nextBtn.addEventListener('click', showNextQuestion);
    restartBtn.addEventListener('click', restartQuiz);
}

// Show current question
function showQuestion() {
    const question = questions[currentQuestionIndex];
    questionText.textContent = question.question;
    
    optionsContainer.innerHTML = '';
    question.options.forEach((option, index) => {
        const optionElement = document.createElement('div');
        optionElement.classList.add('option');
        optionElement.textContent = option;
        optionElement.dataset.index = index;
        optionElement.addEventListener('click', selectOption);
        optionsContainer.appendChild(optionElement);
    });
    
    explanation.textContent = '';
    explanation.classList.remove('show');
    
    currentQuestionDisplay.textContent = currentQuestionIndex + 1;
    prevBtn.disabled = currentQuestionIndex === 0;
    nextBtn.textContent = currentQuestionIndex === questions.length - 1 ? 'Finish' : 'Next';
    
    selectedOption = null;
    answered = false;
}

// Handle option selection
function selectOption(e) {
    if (answered) return;
    
    const selectedElement = e.target;
    const optionIndex = parseInt(selectedElement.dataset.index);
    
    document.querySelectorAll('.option').forEach(opt => {
        opt.classList.remove('selected');
    });
    
    selectedElement.classList.add('selected');
    selectedOption = optionIndex;
    checkAnswer(); // Immediately check the answer upon selection
}

// Check answer and provide feedback
function checkAnswer() {
    if (selectedOption === null) return false;
    
    const question = questions[currentQuestionIndex];
    const options = document.querySelectorAll('.option');
    const selectedElement = options[selectedOption];
    
    answered = true;
    
    options.forEach(opt => {
        opt.classList.remove('correct', 'incorrect', 'selected');
    });
    
    if (selectedOption === question.answer) {
        selectedElement.classList.add('correct');
        score++;
        scoreDisplay.textContent = score;
        explanation.textContent = `Correct! ${question.explanation} This is the best approach because it optimizes performance for high-frequency updates in large graphs.`;
    } else {
        selectedElement.classList.add('incorrect');
        options[question.answer].classList.add('correct');
        explanation.textContent = `Incorrect. You selected: "${selectedElement.textContent}". The correct answer is: "${options[question.answer].textContent}". ${question.explanation} Your choice is less optimal because it doesn't handle the scale and frequency of updates as efficiently.`;
    }
    
    explanation.classList.add('show');
    return selectedOption === question.answer;
}

// Show next question
function showNextQuestion() {
    if (!answered) return; // Only move forward if answered
    
    if (currentQuestionIndex < questions.length - 1) {
        currentQuestionIndex++;
        showQuestion();
    } else {
        showFinalResults();
    }
}

// Show previous question
function showPreviousQuestion() {
    if (currentQuestionIndex > 0) {
        currentQuestionIndex--;
        showQuestion();
    }
}

// Show final results
function showFinalResults() {
    quizContent.style.display = 'none';
    finalResults.style.display = 'block';
    
    finalScoreDisplay.textContent = `${score} out of ${questions.length}`;
    
    if (score >= 40) {
        finalScoreDisplay.classList.add('pass');
        resultMessage.textContent = 'Congratulations! You passed the AWS Cloud Practitioner Quiz.';
    } else {
        finalScoreDisplay.classList.add('fail');
        resultMessage.textContent = 'You did not pass this time. Review AWS documentation and try again!';
    }
}

// Restart quiz
function restartQuiz() {
    currentQuestionIndex = 0;
    score = 0;
    selectedOption = null;
    answered = false;
    
    scoreDisplay.textContent = '0';
    finalResults.style.display = 'none';
    quizContent.style.display = 'block';
    
    showQuestion();
}

// Initialize the quiz when the page loads
window.addEventListener('DOMContentLoaded', initQuiz);