<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Technical Writing - Interactive Quiz</title>
    <style>
        * {
            box-sizing: border-box;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            margin: 0;
            padding: 0;
        }

        body {
            background-color: #f4f7f6;
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
            padding: 15px;
        }

        .quiz-card {
            background-color: #ffffff;
            border-radius: 16px;
            box-shadow: 0 10px 25px rgba(0,0,0,0.1);
            max-width: 500px;
            width: 100%;
            overflow: hidden;
            border: 1px solid #e0e0e0;
        }

        .header {
            background: linear-gradient(135deg, #0b2545, #134074);
            color: white;
            padding: 24px 20px;
            border-radius: 0 0 12px 12px;
        }

        .header h1 {
            font-size: 1.3rem;
            font-weight: 700;
            margin-bottom: 6px;
        }

        .header p {
            font-size: 0.85rem;
            opacity: 0.85;
            margin-bottom: 16px;
        }

        .stats-container {
            display: flex;
            gap: 10px;
            flex-wrap: wrap;
        }

        .stat-badge {
            background: rgba(255, 255, 255, 0.15);
            padding: 6px 12px;
            border-radius: 20px;
            font-size: 0.8rem;
            backdrop-filter: blur(5px);
        }

        .quiz-body {
            padding: 20px;
        }

        .progress-bar-container {
            height: 6px;
            background-color: #eef2f5;
            border-radius: 3px;
            margin-bottom: 16px;
            overflow: hidden;
        }

        .progress-bar {
            height: 100%;
            background-color: #1d4ed8;
            width: 0%;
            transition: width 0.3s ease;
        }

        .question-meta {
            display: flex;
            justify-content: space-between;
            color: #64748b;
            font-size: 0.85rem;
            font-weight: 600;
            margin-bottom: 12px;
        }

        .question-text {
            font-size: 1rem;
            color: #1e293b;
            font-weight: 600;
            margin-bottom: 20px;
            line-height: 1.4;
        }

        .options-list {
            display: flex;
            flex-direction: column;
            gap: 10px;
            margin-bottom: 20px;
        }

        .option-btn {
            background-color: #ffffff;
            border: 1.5px solid #e2e8f0;
            border-radius: 10px;
            padding: 12px 16px;
            text-align: left;
            font-size: 0.9rem;
            color: #334155;
            cursor: pointer;
            transition: all 0.2s ease;
            display: flex;
            align-items: center;
        }

        .option-btn:hover:not(:disabled) {
            border-color: #94a3b8;
            background-color: #f8fafc;
        }

        .option-btn.correct {
            background-color: #f0fdf4;
            border-color: #22c55e;
            color: #15803d;
            font-weight: 600;
        }

        .option-btn.incorrect {
            background-color: #fef2f2;
            border-color: #ef4444;
            color: #b91c1c;
            font-weight: 600;
        }

        .option-btn:disabled {
            cursor: default;
        }

        .feedback-message {
            margin-bottom: 20px;
            font-size: 0.9rem;
            font-weight: 600;
            padding: 10px;
            border-radius: 8px;
            display: none;
        }

        .feedback-message.correct {
            display: block;
            color: #15803d;
            background-color: #dcfce7;
        }

        .feedback-message.incorrect {
            display: block;
            color: #b91c1c;
            background-color: #fee2e2;
        }

        .navigation-btns {
            display: flex;
            justify-content: space-between;
            gap: 10px;
        }

        .btn {
            padding: 10px 18px;
            border-radius: 8px;
            border: none;
            font-weight: 600;
            font-size: 0.85rem;
            cursor: pointer;
            transition: background 0.2s;
        }

        .btn-secondary {
            background-color: #e2e8f0;
            color: #475569;
        }

        .btn-secondary:hover {
            background-color: #cbd5e1;
        }

        .btn-primary {
            background-color: #0b2545;
            color: white;
        }

        .btn-primary:hover {
            background-color: #134074;
        }

        .btn-danger {
            background-color: #ef4444;
            color: white;
        }

        .btn-danger:hover {
            background-color: #dc2626;
        }

        .footer-note {
            font-size: 0.75rem;
            color: #94a3b8;
            margin-top: 20px;
            text-align: center;
            line-height: 1.3;
        }

        .result-screen {
            text-align: center;
            padding: 30px 20px;
        }

        .result-score {
            font-size: 2.5rem;
            font-weight: 800;
            color: #0b2545;
            margin: 15px 0;
        }
    </style>
</head>
<body>

<div class="quiz-card">
    <div class="header">
        <h1>Technical Writing – Interactive Quiz</h1>
        <p>Question bank extracted from the supplied PDF</p>
        <div class="stats-container">
            <div class="stat-badge">Questions: <span id="total-q-count">0</span></div>
            <div class="stat-badge">Correct: <span id="correct-count">0</span></div>
            <div class="stat-badge">Answered: <span id="answered-count">0</span></div>
        </div>
    </div>

    <div class="quiz-body" id="quiz-screen">
        <div class="progress-bar-container">
            <div class="progress-bar" id="progress-bar"></div>
        </div>

        <div class="question-meta">
            <span id="question-number">Question 1 of 0</span>
            <span id="percentage">0%</span>
        </div>

        <div class="question-text" id="question-text">
            Loading questions...
        </div>

        <div class="options-list" id="options-container">
            <!-- Options dynamically loaded -->
        </div>

        <div class="feedback-message" id="feedback"></div>

        <div class="navigation-btns">
            <button class="btn btn-secondary" id="prev-btn" onclick="prevQuestion()" disabled>Previous</button>
            <button class="btn btn-primary" id="next-btn" onclick="nextQuestion()">Next</button>
            <button class="btn btn-danger" onclick="finishQuiz()">Finish</button>
        </div>

        <p class="footer-note">
            The quiz uses the source answer key as provided in the PDF; source wording is not silently corrected.
        </p>
    </div>

    <div class="quiz-body result-screen" id="result-screen" style="display: none;">
        <h2>Quiz Completed!</h2>
        <div class="result-score" id="final-score">0 / 0</div>
        <p id="result-comment" style="color: #64748b; margin-bottom: 20px;"></p>
        <button class="btn btn-primary" onclick="restartQuiz()">Restart Quiz</button>
    </div>
</div>

<script>
const quizQuestions = [
    // Grammar & Sentences
    { q: "What are the basic elements of every sentence?", options: ["Subject and Verb", "Subject and Predicate", "Verb and Object", "Noun and Adjective"], answer: 1 },
    { q: "Which type of sentence has one subject and one predicate?", options: ["Compound Sentence", "Complex Sentence", "Simple Sentence", "Compound-Complex Sentence"], answer: 2 },
    { q: "In the sentence 'Tom and Mary play tennis,' what is the compound subject?", options: ["Tom", "Mary", "Tennis", "Tom and Mary"], answer: 3 },
    { q: "What is the coordinating conjunction used in compound sentences?", options: ["And", "But", "Or", "All of the above"], answer: 3 },
    { q: "In the sentence 'We went to San Juan, ..... most of us danced all night,' what is the coordinating conjunction?", options: ["And", "Most", "Went", "Us"], answer: 0 },
    { q: "Which type of sentence has a subordinating conjunction?", options: ["Simple Sentence", "Compound Sentence", "Complex Sentence", "Compound-Complex Sentence"], answer: 2 },
    { q: "What are the three types of tenses?", options: ["Past, Present, Future", "Simple, Continuous, Perfect", "Active, Passive", "Compound, Complex, Compound-Complex"], answer: 0 },
    { q: "Which aspect of tense indicates an action that is ongoing?", options: ["Simple", "Continuous", "Perfect", "Perfect Continuous"], answer: 1 },
    { q: "What is the voice of the sentence 'The cat chased the mouse'?", options: ["Active", "Passive", "Neutral", "None of the above"], answer: 0 },
    { q: "In the sentence 'Bob is handsome; ......., he is rich,' what is the conjunctive adverb used?", options: ["However", "Therefore", "Moreover", "Otherwise"], answer: 2 },

    // Punctuation
    { q: "What is an end mark?", options: ["A mark at the beginning of a sentence", "A mark at the end of a sentence", "A mark in the middle of a sentence", "A mark indicating a question"], answer: 1 },
    { q: "Which punctuation mark is used for statements and commands?", options: ["Exclamation mark", "Question mark", "Period", "Colon"], answer: 2 },
    { q: "What does a question mark indicate?", options: ["Excitement", "A statement", "A question", "A command"], answer: 2 },
    { q: "When do we use an exclamation mark?", options: ["To indicate a question", "To indicate a statement", "To show excitement or feeling", "To give a command"], answer: 2 },
    { q: "Which punctuation mark is used for abbreviations?", options: ["Exclamation mark", "Question mark", "Period", "Colon"], answer: 2 },
    { q: "Which punctuation mark is used before a list?", options: ["Comma", "Colon", "Period", "Exclamation mark"], answer: 1 },
    { q: "When do we use a comma?", options: ["To separate a list", "To indicate a question", "To show excitement", "To give a command"], answer: 0 },
    { q: "What does a colon consist of?", options: ["Two periods", "Two commas", "A period and a comma", "A question mark and an exclamation mark"], answer: 0 },
    { q: "Which punctuation mark is used between the date and the year?", options: ["Comma", "Colon", "Period", "Exclamation mark"], answer: 0 },
    { q: "What is the purpose of an end mark?", options: ["To indicate the beginning of a sentence", "To indicate the middle of a sentence", "To indicate the end of a sentence", "To indicate a question"], answer: 2 },
    { q: "Which punctuation mark is used for time?", options: ["Comma", "Colon", "Period", "Exclamation mark"], answer: 1 },
    { q: "What is the correct punctuation for the sentence: 'Where are we going?'", options: ["Exclamation mark", "Question mark", "Period", "Colon"], answer: 1 },
    { q: "What is the correct punctuation for the sentence: 'The phone is ringing....'", options: ["Exclamation mark", "Question mark", "Period", "Colon"], answer: 2 },
    { q: "What is the correct punctuation for the sentence: 'That car is going to crash....'", options: ["Exclamation mark", "Question mark", "Period", "Colon"], answer: 0 },
    { q: "What is the correct punctuation for the sentence: 'Put those papers away....'", options: ["Exclamation mark", "Question mark", "Period", "Colon"], answer: 2 },
    { q: "Which punctuation mark is used for a command?", options: ["Exclamation mark", "Question mark", "Period", "Colon"], answer: 2 },
    { q: "What does a comma indicate?", options: ["A question", "A statement", "A list", "Excitement"], answer: 2 },
    { q: "What is the purpose of a colon?", options: ["To separate a list", "To indicate a question", "To show excitement", "To indicate time"], answer: 3 },
    { q: "Which punctuation mark is used for excitement or feeling?", options: ["Comma", "Colon", "Period", "Exclamation mark"], answer: 3 },
    { q: "What is the correct punctuation for the sentence: 'That tree is going to fall on the house....'", options: ["Exclamation mark", "Question mark", "Period", "Colon"], answer: 0 },
    { q: "What is the correct punctuation for the sentence: 'It was December ....24.... 2001.'", options: ["Exclamation mark", "Question mark", "Period", "Comma"], answer: 3 },
    { q: "What is the correct punctuation for the sentence: 'My favorite animals are giraffes... dogs... cats... and birds.'", options: ["Exclamation mark", "Question mark", "Period", "Comma"], answer: 3 },
    { q: "Which punctuation mark is used for separating items in a list?", options: ["Exclamation mark", "Question mark", "Period", "Comma"], answer: 3 },
    { q: "What is the correct punctuation for the sentence: '11.....35 pm.'", options: ["Exclamation mark", "Question mark", "Period", "Colon"], answer: 3 },
    { q: "What is the correct punctuation for the sentence: 'J....K... Rollings.'", options: ["Exclamation mark", "Question mark", "Period", "Colon"], answer: 2 },
    { q: "What is the correct punctuation for the sentence: 'MS...White.'", options: ["Exclamation mark", "Question mark", "Period", "Colon"], answer: 2 },
    { q: "What is the correct punctuation for the sentence: 'Dr...Watson.'", options: ["Exclamation mark", "Question mark", "Period", "Colon"], answer: 2 },
    { q: "Which punctuation mark is used for indicating a question?", options: ["Exclamation mark", "Question mark", "Period", "Colon"], answer: 1 },
    { q: "Which punctuation mark is used for indicating a command?", options: ["Exclamation mark", "Question mark", "Period", "Colon"], answer: 2 },

    // Technical Roles & Mechatronics
    { q: "What does Mechatronics refer to?", options: ["Mechanical systems only", "Electrical systems only", "Mechanical and electrical systems combined with mechanics, electronics, computing, and control", "Computing systems only"], answer: 2 },
    { q: "What is an embedded system in Mechatronics?", options: ["A system that requires constant human intervention", "A system that runs on its own without human intervention and also combination of hardware and software", "A system that only uses hardware", "A system that only uses software"], answer: 1 },
    { q: "What is the main difference between Engineers and Engineering Technologists?", options: ["Engineers design and manufacture machines and systems, while engineering technologists have the technical knowledge-how to use and install the machines properly", "Engineers only design machines, while engineering technologists only manufacture machines", "Engineers only manufacture machines, while engineering technologists only design machines", "Engineers and engineering technologists have the same roles and responsibilities"], answer: 0 },
    { q: "What do Research engineers specialize in?", options: ["Principles of chemistry, biology, physics, and mathematics", "Computer knowledge", "Principles of chemistry only", "Principles of physics only"], answer: 0 },
    { q: "What do Development engineers do?", options: ["Identify problems in a potential product", "Bridge the gap between the laboratory and the production facility", "Both a and b", "None of the above"], answer: 2 },
    { q: "What is the main focus of Design engineers?", options: ["Ensuring the product meets safety standards", "Keeping the development of a part cost-effective", "Both a and b", "None of the above"], answer: 2 },
    { q: "What do Analysis engineers use to enrich the work of design and research engineers?", options: ["Heat transfer and fluid flow", "Vibrations and dynamics", "Both a and b", "None of the above"], answer: 2 },
    { q: "What is the role of Systems engineers?", options: ["Bringing together components of parts from design engineers to make a complete product", "Ensuring all components of a product work together as intended by design engineers", "Both a and b", "None of the above"], answer: 2 },
    { q: "What do Manufacturing & Construction engineers do?", options: ["Work individually or in teams", "Responsible for 'molding' raw materials into finished products", "Both a and b", "None of the above"], answer: 2 },
    { q: "What is the responsibility of Operations & Maintenance engineers?", options: ["Maintaining the production line", "Inspecting facility and equipment", "Both a and b", "None of the above"], answer: 2 },
    { q: "What is the role of Technical Support engineers?", options: ["Working between consumers and producers", "Having in-depth knowledge of technical aspects of the product", "Both a and b", "None of the above"], answer: 0 },
    { q: "What is the main focus of Customer Support engineers?", options: ["Having technical knowledge", "Evaluating cost-effectiveness of current practices", "Both a and b", "None of the above"], answer: 2 },
    { q: "What do Sales engineers specialize in?", options: ["Technical background and effective communication with customers", "Only technical background", "Only effective communication with customers", "None of the above"], answer: 0 },
    { q: "What do Consulting engineers do?", options: ["Design, installation, and upkeep of a product", "Work directly for manufacturing firms", "Both a and b", "None of the above"], answer: 0 },

    // Publishing & Scientific Paper Sections
    { q: "What is one of the key elements of publishing?", options: ["Author's personal life", "Ethical issues", "Fictional writing", "Movie reviews"], answer: 1 },
    { q: "What is the purpose of the Abstract in a scientific paper?", options: ["To confuse the reader", "To summarize the problem, method, results, and conclusions", "To hide the key findings", "To provide incorrect information"], answer: 1 },
    { q: "In the Introduction section of a scientific paper, what should be clearly stated?", options: ["The author's favorite color", "The problem being investigated", "A fictional story", "The author's personal opinions"], answer: 1 },
    { q: "What should be included in the Methods section of a scientific paper?", options: ["Personal anecdotes", "Detailed procedures for replication", "Fictional characters", "Unrelated information"], answer: 1 },
    { q: "What should be presented in the Results section of a scientific paper?", options: ["Personal opinions", "Objective findings", "Fictional data", "Unrelated information"], answer: 1 },
    { q: "What should the Discussion/Conclusion section of a scientific paper focus on?", options: ["Speculation and personal beliefs", "Moving the body of scientific knowledge forward", "Fictional scenarios", "Unrelated topics"], answer: 1 },
    { q: "What is the purpose of the Acknowledgements section in a scientific paper?", options: ["To ignore those who helped in the research", "To recognize those who contributed to the research", "To provide incorrect information", "To hide key findings"], answer: 1 },
    { q: "Why do many authors write the abstract last?", options: ["To confuse the reader", "To accurately reflect the content of the paper", "To hide key findings", "To provide incorrect information"], answer: 1 },
    { q: "What should be clearly described in the Title of a scientific paper?", options: ["The author's favorite food", "The contents of the paper", "Fictional events", "Unrelated information"], answer: 1 },
    { q: "What is the purpose of the Key Words in the abstract of a scientific paper?", options: ["To confuse the reader", "To provide incorrect information", "To help in abstracting and indexing services", "To hide key findings"], answer: 2 },

    // Citations & Technical Reports
    { q: "What should be recognized by a citation in your work?", options: ["Common knowledge", "Information from your experiment", "Previously published work", "Personal opinions"], answer: 2 },
    { q: "How should references be presented according to the text?", options: ["Avoid mentioning references", "Present them in a consistent format", "Make them difficult to find", "List all related references"], answer: 1 },
    { q: "According to the text, what is writing considered to be?", options: ["A hobby", "A skill", "A talent", "A burden"], answer: 1 },
    { q: "What is the specialized field that requires personal discipline and organization skill mentioned in the text?", options: ["Technical writing", "Technical work", "Marketing", "Sales"], answer: 0 },
    { q: "How is a long document usually divided when it comes to chapters and sections?", options: ["Chapters only", "Sections only", "Chapters, sections, and sub-sections", "Sub-sections only"], answer: 2 },
    { q: "What are the sources of information that were 'actually' referred to during the preparation of the work called?", options: ["Citations", "References", "Quotes", "Footnotes"], answer: 1 },
    { q: "According to the text, where can a student bring innovation into their project work?", options: ["In the conclusion only", "In the methodology only", "In the presentation of results only", "In various aspects of the project work"], answer: 3 },

    // Academic vs Technical Writing
    { q: "What is the purpose of academic writing?", options: ["Getting something done", "Demonstrating knowledge about a topic", "Evaluating the reader", "None of the above"], answer: 1 },
    { q: "Who is the audience for academic writing?", options: ["Several people", "Teacher", "Students", "Professionals"], answer: 1 },
    { q: "What is the criteria for evaluation in academic writing?", options: ["Depth, logic, clarity, unity, and grammar", "Length of the text", "Use of complex vocabulary", "None of the above"], answer: 0 },
    { q: "How should information be organized in academic writing?", options: ["Keep paragraphs long", "Use complex sentences", "Chunk your information", "None of the above"], answer: 2 },
    { q: "What is the purpose of technical writing?", options: ["Getting something done", "Demonstrating knowledge about a topic", "Evaluating the reader", "None of the above"], answer: 0 },
    { q: "What is the criteria for evaluation in technical writing?", options: ["Depth, logic, clarity, unity, and grammar", "Length of the text", "Use of complex vocabulary", "Clear and simple organization of ideas"], answer: 3 },
    { q: "What is a key component of written reports for measurements in a lab?", options: ["Title", "Abstract", "Introduction", "All of the above"], answer: 3 },
    { q: "What should be the first step in the Summary and Conclusions section of a report?", options: ["State important results", "Restate objectives", "Discuss significance of results", "None of the above"], answer: 1 },
    { q: "What is the key to effective writing in reports and proposals?", options: ["Use of jargon", "Lengthy paragraphs", "Clarity and simplicity", "None of the above"], answer: 2 },

    // Revision & Brainstorming
    { q: "What is the main purpose of revision?", options: ["To waste time", "To reinforce learning", "To procrastinate", "To forget information"], answer: 1 },
    { q: "How much information can short term memory hold at a time?", options: ["5 bits", "10 bits", "7 bits", "15 bits"], answer: 2 },
    { q: "What percentage of information is remembered within 30 days without revision?", options: ["50%", "10%", "20%", "30%"], answer: 2 },
    { q: "What is the key feature of mind maps?", options: ["They start with a small idea", "They use long paragraphs", "They are black and white", "They start around a central idea or picture"], answer: 3 },
    { q: "Why are mind maps considered more brain-friendly?", options: ["They are black and white", "They are easy to forget", "They reflect how the brain remembers", "They are difficult to review"], answer: 2 },
    { q: "What is brainstorming?", options: ["A method of thinking up solutions in groups", "A method of thinking up solutions individually", "A method of forgetting ideas", "A method of organizing ideas"], answer: 0 },
    { q: "What is the main benefit of brainstorming?", options: ["It creates a negative atmosphere", "It leads to personal attacks", "It generates many ideas", "It limits creativity"], answer: 2 },
    { q: "What is the first phase in organizing a brainstorming session?", options: ["Conduct the session", "Evaluation", "Preparation", "Implementation"], answer: 2 },
    { q: "What is a mistake to be avoided during a brainstorming session?", options: ["Having too many brainstorming sessions", "Creating a positive atmosphere", "Providing constructive criticism", "Negative judgments in advance"], answer: 3 },
    { q: "What is the most important activity in managing time effectively?", options: ["Procrastination", "Lack of planning", "Planning", "Socializing"], answer: 2 },

    // Abstracts & Summaries
    { q: "What is an abstract?", options: ["A long, detailed summary of a research paper", "A short, self-contained summary of an article, paper, or thesis", "A list of references used in a research paper", "A conclusion drawn from a research study"], answer: 1 },
    { q: "Who usually writes an abstract?", options: ["Professional writers only", "Authors of the paper or research", "Students in the same field", "Teachers evaluating research projects"], answer: 1 },
    { q: "What is the purpose of an abstract?", options: ["To confuse readers about the main points of the research", "To summarize the entire research paper in detail", "To persuade readers to read the full text", "To include lengthy explanations of concepts"], answer: 2 },
    { q: "What is the recommended length for an abstract?", options: ["Between 50 and 100 words", "Between 150 and 250 words", "Between 300 and 400 words", "Over 500 words"], answer: 1 },
    { q: "What is the purpose of a summary?", options: ["To provide personal opinions", "To include background knowledge", "To give a short account of the central ideas of a text", "To share personal information"], answer: 2 },
    { q: "What is the purpose of paraphrasing?", options: ["To express someone else's ideas in your own language", "To provide personal opinions", "To include all the details from the original text", "To summarize only the most essential points"], answer: 0 },
    { q: "What is an executive summary?", options: ["A detailed report", "A brief overview of a report", "A list of references", "A bibliography"], answer: 1 },
    { q: "Who is an executive summary written for?", options: ["Technical experts", "Non-technical people", "Researchers", "Professors"], answer: 1 },
    { q: "When should you create an executive summary?", options: ["Only for reports over 100 pages", "Only for reports under 10 pages", "For reports exceeding four pages", "For reports with no main points"], answer: 2 }
];

let currentQuestionIndex = 0;
let userAnswers = new Array(quizQuestions.length).fill(null);

document.getElementById('total-q-count').innerText = quizQuestions.length;

function loadQuestion() {
    const currentQ = quizQuestions[currentQuestionIndex];
    document.getElementById('question-number').innerText = `Question ${currentQuestionIndex + 1} of ${quizQuestions.length}`;
    document.getElementById('percentage').innerText = `${Math.round(((currentQuestionIndex + 1) / quizQuestions.length) * 100)}%`;
    document.getElementById('progress-bar').style.width = `${((currentQuestionIndex + 1) / quizQuestions.length) * 100}%`;
    document.getElementById('question-text').innerText = currentQ.q;

    const optionsContainer = document.getElementById('options-container');
    optionsContainer.innerHTML = '';

    const alphabet = ['A', 'B', 'C', 'D'];
    const feedback = document.getElementById('feedback');
    feedback.className = 'feedback-message';
    feedback.style.display = 'none';

    currentQ.options.forEach((opt, idx) => {
        const btn = document.createElement('button');
        btn.className = 'option-btn';
        btn.innerHTML = `<strong style="margin-right: 8px;">${alphabet[idx]}.</strong> ${opt}`;
        
        if (userAnswers[currentQuestionIndex] !== null) {
            btn.disabled = true;
            if (idx === currentQ.answer) {
                btn.classList.add('correct');
            }
            if (userAnswers[currentQuestionIndex] === idx && idx !== currentQ.answer) {
                btn.classList.add('incorrect');
            }
        } else {
            btn.onclick = () => selectOption(idx);
        }

        optionsContainer.appendChild(btn);
    });

    if (userAnswers[currentQuestionIndex] !== null) {
        const isCorrect = userAnswers[currentQuestionIndex] === currentQ.answer;
        feedback.innerText = isCorrect ? "✓ Correct!" : `X Incorrect – Correct answer: ${alphabet[currentQ.answer]}`;
        feedback.classList.add(isCorrect ? 'correct' : 'incorrect');
    }

    document.getElementById('prev-btn').disabled = currentQuestionIndex === 0;
    document.getElementById('next-btn').innerText = currentQuestionIndex === quizQuestions.length - 1 ? 'Finish' : 'Next';
}

function selectOption(index) {
    userAnswers[currentQuestionIndex] = index;
    updateStats();
    loadQuestion();
}

function updateStats() {
    const answered = userAnswers.filter(a => a !== null).length;
    let correct = 0;
    userAnswers.forEach((ans, idx) => {
        if (ans === quizQuestions[idx].answer) correct++;
    });

    document.getElementById('answered-count').innerText = answered;
    document.getElementById('correct-count').innerText = correct;
}

function nextQuestion() {
    if (currentQuestionIndex < quizQuestions.length - 1) {
        currentQuestionIndex++;
        loadQuestion();
    } else {
        finishQuiz();
    }
}

function prevQuestion() {
    if (currentQuestionIndex > 0) {
        currentQuestionIndex--;
        loadQuestion();
    }
}

function finishQuiz() {
    document.getElementById('quiz-screen').style.display = 'none';
    document.getElementById('result-screen').style.display = 'block';

    let correct = 0;
    userAnswers.forEach((ans, idx) => {
        if (ans === quizQuestions[idx].answer) correct++;
    });

    document.getElementById('final-score').innerText = `${correct} / ${quizQuestions.length}`;
    const percentage = (correct / quizQuestions.length) * 100;
    
    let comment = "ممتاز! أدائك رائع جداً.";
    if (percentage < 50) comment = "تحتاج لمزيد من المراجعة والتركيز على مفاهيم المادة.";
    else if (percentage < 80) comment = "أداء جيد، يمكنك مراجعة الأسئلة الخاطئة للتحسين.";
    
    document.getElementById('result-comment').innerText = comment;
}

function restartQuiz() {
    currentQuestionIndex = 0;
    userAnswers = new Array(quizQuestions.length).fill(null);
    updateStats();
    document.getElementById('quiz-screen').style.display = 'block';
    document.getElementById('result-screen').style.display = 'none';
    loadQuestion();
}

// Initialize quiz
loadQuestion();
</script>

</body>
</html>
