Untitled

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Security+ Practice Exam A</title>
    <style>
        body {
            font-family: system-ui, -apple-system, sans-serif;
            line-height: 1.5;
            margin: 0;
            padding: 20px;
            background: #f5f5f5;
        }
        .container {
            max-width: 800px;
            margin: 0 auto;
        }
        .question-container {
            background: white;
            border-radius: 8px;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
            padding: 20px;
            margin-bottom: 20px;
        }
        .option {
            padding: 10px;
            margin: 5px 0;
            border: 1px solid #ddd;
            border-radius: 4px;
            cursor: pointer;
        }
        .option:hover {
            background: #f0f9ff;
        }
        .option.selected {
            background: #dbeafe;
            border-color: #2563eb;
        }
        .button {
            padding: 10px 20px;
            border: none;
            border-radius: 4px;
            background: #2563eb;
            color: white;
            cursor: pointer;
            font-size: 14px;
            margin: 5px;
        }
        .button:hover {
            background: #1d4ed8;
        }
        .button:disabled {
            background: #94a3b8;
            cursor: not-allowed;
        }
        .progress {
            text-align: center;
            margin: 20px 0;
            font-size: 16px;
        }
        #results {
            display: none;
        }
        .explanation {
            margin-top: 10px;
            padding: 10px;
            background: #f0f9ff;
            border-radius: 4px;
            display: none;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>Security+ Practice Exam A</h1>
        <div class="progress">Question <span id="current">1</span> of 85</div>
        <div class="question-container" id="questionContainer"></div>
        <div>
            <button onclick="prevQuestion()" id="prevButton" class="button">Previous</button>
            <button onclick="nextQuestion()" id="nextButton" class="button">Next</button>
        </div>
        <div id="results"></div>
    </div>

<script>
var examQuestions = [
    { 
        q: "A test question",
        o: ["Option 1", "Option 2", "Option 3", "Option 4"],
        a: 1,
        e: "Explanation for the answer."
    },
    
];
console.log(examQuestions.length)

var currentQuestion = 0;
var userAnswers = new Array(examQuestions.length).fill(null);

function displayQuestion() {
    var question = examQuestions[currentQuestion];
    var html = '<h3>Question ' + (currentQuestion + 1) + '</h3>';
    html += '<p>' + question.q + '</p>';
    
    for(var i = 0; i < question.o.length; i++) {
        var selected = Array.isArray(userAnswers[currentQuestion]) ? userAnswers[currentQuestion].includes(i) : userAnswers[currentQuestion] === i;
        html += '<div class="option' + (selected ? ' selected' : '') + '" onclick="selectAnswer(' + i + ')">';
        html += String.fromCharCode(65 + i) + '. ' + question.o[i];
        html += '</div>';
    }
    
    document.getElementById('questionContainer').innerHTML = html;
    document.getElementById('current').textContent = currentQuestion + 1;
    document.getElementById('prevButton').disabled = currentQuestion === 0;
    document.getElementById('nextButton').textContent = 
        currentQuestion === examQuestions.length - 1 ? 'Finish' : 'Next';
}

function selectAnswer(answer) {
    var question = examQuestions[currentQuestion];
    if (Array.isArray(question.a)) {
        // Multiple correct answers
        if (!Array.isArray(userAnswers[currentQuestion])) {
            userAnswers[currentQuestion] = [];
        }
        var index = userAnswers[currentQuestion].indexOf(answer);
        if (index === -1) {
            userAnswers[currentQuestion].push(answer);
        } else {
            userAnswers[currentQuestion].splice(index, 1);
        }
    } else {
        // Single correct answer
        userAnswers[currentQuestion] = answer;
    }
    displayQuestion();
}

function prevQuestion() {
    if(currentQuestion > 0) {
        currentQuestion--;
        displayQuestion();
    }
}

function nextQuestion() {
    if(currentQuestion < examQuestions.length - 1) {
        currentQuestion++;
        displayQuestion();
    } else {
        showResults();
    }
}

function showResults() {
    var correct = 0;
    var html = '<h2>Exam Results</h2>';
    
    for(var i = 0; i < examQuestions.length; i++) {
        var question = examQuestions[i];
        var userAnswer = userAnswers[i];
        var isCorrect = false;

        if (Array.isArray(question.a)) {
            // Multiple correct answers
            if (Array.isArray(userAnswer) && userAnswer.length === question.a.length && userAnswer.every((val, index) => val === question.a[index])) {
                isCorrect = true;
                correct++;
            }
        } else {
            // Single correct answer
            if (userAnswer === question.a) {
                isCorrect = true;
                correct++;
            }
        }

        html += `
            <div class="review-item" style="margin: 20px 0; padding: 15px; border: 1px solid #ddd; border-radius: 4px;">
                <h4>Question ${i + 1}</h4>
                <p style="font-weight: bold;">${question.q}</p>
                <p>Your answer: ${userAnswer !== null ? (Array.isArray(userAnswer) ? userAnswer.map(ans => String.fromCharCode(65 + ans) + '. ' + question.o[ans]).join(', ') : String.fromCharCode(65 + userAnswer) + '. ' + question.o[userAnswer]) : 'Not answered'}</p>
                <p>Correct answer: ${Array.isArray(question.a) ? question.a.map(ans => String.fromCharCode(65 + ans) + '. ' + question.o[ans]).join(', ') : String.fromCharCode(65 + question.a) + '. ' + question.o[question.a]}</p>
                <div style="padding: 10px; background: ${isCorrect ? '#dcfce7' : '#fee2e2'}; border-radius: 4px; margin-top: 10px;">
                    <strong>${isCorrect ? '✓ Correct' : '✗ Incorrect'}</strong>
                </div>
                <div style="padding: 10px; background: #f0f9ff; border-radius: 4px; margin-top: 10px;">
                    <strong>Explanation:</strong><br>${question.e}
                </div>
            </div>
        `;
    }
    
    var score = Math.round((correct / examQuestions.length) * 100);
    html += '<h3>Score: ' + correct + '/' + examQuestions.length + ' (' + score + '%)</h3>';
    
    document.getElementById('questionContainer').style.display = 'none';
    document.getElementById('prevButton').style.display = 'none';
    document.getElementById('nextButton').style.display = 'none';
    document.querySelector('.progress').style.display = 'none';
    
    document.getElementById('results').style.display = 'block';
    document.getElementById('results').innerHTML = html;
}

// Start the exam
displayQuestion();
</script>
</body>
</html>
Editor is loading...