script.js

const questions = [
    {
        "id": 1,
        "question": "What does this sign mean?",
        "image": "sign_1.png",
        "options": [
            "Do Not Enter",
            "Railroad Warning",
            "Signal Ahead",
            "Pedestrian Crossing",
            "Slow Moving Vehicle",
            "No Passing Zone",
            "Yield Right-of-Way",
            "Stop",
            "Crossroad",
            "Reduction in Lanes",
            "Merge",
            "School Zone and Crossing",
            "No U Turn",
            "Road Construction & Maintenance",
            "No Right Turn",
            "Side Road"
        ],
        "answer_index": 9
    },
    {
        "id": 2,
        "question": "What does this sign mean?",
        "image": "sign_2.png",
        "options": [
            "Do Not Enter",
            "Railroad Warning",
            "Signal Ahead",
            "Pedestrian Crossing",
            "Slow Moving Vehicle",
            "No Passing Zone",
            "Yield Right-of-Way",
            "Stop",
            "Crossroad",
            "Reduction in Lanes",
            "Merge",
            "School Zone and Crossing",
            "No U Turn",
            "Road Construction & Maintenance",
            "No Right Turn",
            "Side Road"
        ],
        "answer_index": 13
    },
    {
        "id": 3,
        "question": "What does this sign mean?",
        "image": "sign_3.png",
        "options": [
            "Do Not Enter",
            "Railroad Warning",
            "Signal Ahead",
            "Pedestrian Crossing",
            "Slow Moving Vehicle",
            "No Passing Zone",
            "Yield Right-of-Way",
            "Stop",
            "Crossroad",
            "Reduction in Lanes",
            "Merge",
            "School Zone and Crossing",
            "No U Turn",
            "Road Construction & Maintenance",
            "No Right Turn",
            "Side Road"
        ],
        "answer_index": 0
    },
    {
        "id": 4,
        "question": "What does this sign mean?",
        "image": "sign_4.png",
        "options": [
            "Do Not Enter",
            "Railroad Warning",
            "Signal Ahead",
            "Pedestrian Crossing",
            "Slow Moving Vehicle",
            "No Passing Zone",
            "Yield Right-of-Way",
            "Stop",
            "Crossroad",
            "Reduction in Lanes",
            "Merge",
            "School Zone and Crossing",
            "No U Turn",
            "Road Construction & Maintenance",
            "No Right Turn",
            "Side Road"
        ],
        "answer_index": 8
    },
    {
        "id": 5,
        "question": "What does this sign mean?",
        "image": "sign_5.png",
        "options": [
            "Do Not Enter",
            "Railroad Warning",
            "Signal Ahead",
            "Pedestrian Crossing",
            "Slow Moving Vehicle",
            "No Passing Zone",
            "Yield Right-of-Way",
            "Stop",
            "Crossroad",
            "Reduction in Lanes",
            "Merge",
            "School Zone and Crossing",
            "No U Turn",
            "Road Construction & Maintenance",
            "No Right Turn",
            "Side Road"
        ],
        "answer_index": 7
    },
    {
        "id": 6,
        "question": "What does this sign mean?",
        "image": "sign_6.png",
        "options": [
            "Do Not Enter",
            "Railroad Warning",
            "Signal Ahead",
            "Pedestrian Crossing",
            "Slow Moving Vehicle",
            "No Passing Zone",
            "Yield Right-of-Way",
            "Stop",
            "Crossroad",
            "Reduction in Lanes",
            "Merge",
            "School Zone and Crossing",
            "No U Turn",
            "Road Construction & Maintenance",
            "No Right Turn",
            "Side Road"
        ],
        "answer_index": 6
    },
    {
        "id": 7,
        "question": "What does this sign mean?",
        "image": "sign_7.png",
        "options": [
            "Do Not Enter",
            "Railroad Warning",
            "Signal Ahead",
            "Pedestrian Crossing",
            "Slow Moving Vehicle",
            "No Passing Zone",
            "Yield Right-of-Way",
            "Stop",
            "Crossroad",
            "Reduction in Lanes",
            "Merge",
            "School Zone and Crossing",
            "No U Turn",
            "Road Construction & Maintenance",
            "No Right Turn",
            "Side Road"
        ],
        "answer_index": 5
    },
    {
        "id": 8,
        "question": "What does this sign mean?",
        "image": "sign_8.png",
        "options": [
            "Do Not Enter",
            "Railroad Warning",
            "Signal Ahead",
            "Pedestrian Crossing",
            "Slow Moving Vehicle",
            "No Passing Zone",
            "Yield Right-of-Way",
            "Stop",
            "Crossroad",
            "Reduction in Lanes",
            "Merge",
            "School Zone and Crossing",
            "No U Turn",
            "Road Construction & Maintenance",
            "No Right Turn",
            "Side Road"
        ],
        "answer_index": 12
    },
    {
        "id": 9,
        "question": "What does this sign mean?",
        "image": "sign_9.png",
        "options": [
            "Do Not Enter",
            "Railroad Warning",
            "Signal Ahead",
            "Pedestrian Crossing",
            "Slow Moving Vehicle",
            "No Passing Zone",
            "Yield Right-of-Way",
            "Stop",
            "Crossroad",
            "Reduction in Lanes",
            "Merge",
            "School Zone and Crossing",
            "No U Turn",
            "Road Construction & Maintenance",
            "No Right Turn",
            "Side Road"
        ],
        "answer_index": 2
    },
    {
        "id": 10,
        "question": "What does this sign mean?",
        "image": "sign_10.png",
        "options": [
            "Do Not Enter",
            "Railroad Warning",
            "Signal Ahead",
            "Pedestrian Crossing",
            "Slow Moving Vehicle",
            "No Passing Zone",
            "Yield Right-of-Way",
            "Stop",
            "Crossroad",
            "Reduction in Lanes",
            "Merge",
            "School Zone and Crossing",
            "No U Turn",
            "Road Construction & Maintenance",
            "No Right Turn",
            "Side Road"
        ],
        "answer_index": 1
    },
    {
        "id": 11,
        "question": "What does this sign mean?",
        "image": "sign_11.png",
        "options": [
            "Do Not Enter",
            "Railroad Warning",
            "Signal Ahead",
            "Pedestrian Crossing",
            "Slow Moving Vehicle",
            "No Passing Zone",
            "Yield Right-of-Way",
            "Stop",
            "Crossroad",
            "Reduction in Lanes",
            "Merge",
            "School Zone and Crossing",
            "No U Turn",
            "Road Construction & Maintenance",
            "No Right Turn",
            "Side Road"
        ],
        "answer_index": 10
    },
    {
        "id": 12,
        "question": "What does this sign mean?",
        "image": "sign_12.png",
        "options": [
            "Do Not Enter",
            "Railroad Warning",
            "Signal Ahead",
            "Pedestrian Crossing",
            "Slow Moving Vehicle",
            "No Passing Zone",
            "Yield Right-of-Way",
            "Stop",
            "Crossroad",
            "Reduction in Lanes",
            "Merge",
            "School Zone and Crossing",
            "No U Turn",
            "Road Construction & Maintenance",
            "No Right Turn",
            "Side Road"
        ],
        "answer_index": 4
    },
    {
        "id": 13,
        "question": "What does this sign mean?",
        "image": "sign_13.png",
        "options": [
            "Do Not Enter",
            "Railroad Warning",
            "Signal Ahead",
            "Pedestrian Crossing",
            "Slow Moving Vehicle",
            "No Passing Zone",
            "Yield Right-of-Way",
            "Stop",
            "Crossroad",
            "Reduction in Lanes",
            "Merge",
            "School Zone and Crossing",
            "No U Turn",
            "Road Construction & Maintenance",
            "No Right Turn",
            "Side Road"
        ],
        "answer_index": 3
    },
    {
        "id": 14,
        "question": "What does this sign mean?",
        "image": "sign_14.png",
        "options": [
            "Do Not Enter",
            "Railroad Warning",
            "Signal Ahead",
            "Pedestrian Crossing",
            "Slow Moving Vehicle",
            "No Passing Zone",
            "Yield Right-of-Way",
            "Stop",
            "Crossroad",
            "Reduction in Lanes",
            "Merge",
            "School Zone and Crossing",
            "No U Turn",
            "Road Construction & Maintenance",
            "No Right Turn",
            "Side Road"
        ],
        "answer_index": 11
    },
    {
        "id": 15,
        "question": "What does this sign mean?",
        "image": "sign_15.png",
        "options": [
            "Do Not Enter",
            "Railroad Warning",
            "Signal Ahead",
            "Pedestrian Crossing",
            "Slow Moving Vehicle",
            "No Passing Zone",
            "Yield Right-of-Way",
            "Stop",
            "Crossroad",
            "Reduction in Lanes",
            "Merge",
            "School Zone and Crossing",
            "No U Turn",
            "Road Construction & Maintenance",
            "No Right Turn",
            "Side Road"
        ],
        "answer_index": 14
    },
    {
        "id": 16,
        "question": "When you come to a stop sign, you must stop your vehicle:",
        "options": [
            "As close to the stop sign as possible.",
            "At a place near the intersection providing you come to a complete stop.",
            "At a marked stop line, before entering the crosswalk, or before entering the intersection if there is no crosswalk."
        ],
        "answer_index": 2
    },
    {
        "id": 17,
        "question": "When headlights are required, they should be dimmed at least 500 feet before meeting and 300 feet before overtaking another vehicle.",
        "options": [
            "True",
            "False"
        ],
        "answer_index": 0
    },
    {
        "id": 18,
        "question": "When driving along the highway and the front right wheel of your vehicle runs off the pavement, you should:",
        "options": [
            "Quickly swing back onto the pavement at your normal speed.",
            "Grasp the steering wheel tightly and take your foot off the accelerator.",
            "Apply the brakes immediately and swing back onto the pavement quickly."
        ],
        "answer_index": 1
    },
    {
        "id": 19,
        "question": "Most rear end collisions are caused by:",
        "options": [
            "Dangerous road conditions.",
            "The vehicle in front stopping too fast.",
            "The vehicle in back following too closely."
        ],
        "answer_index": 2
    },
    {
        "id": 20,
        "question": "Which of the following is the single greatest factor in fatal motor vehicle accidents?",
        "options": [
            "Alcohol.",
            "Mechanical problems.",
            "Bad weather conditions.",
            "Bad road conditions."
        ],
        "answer_index": 0
    },
    {
        "id": 21,
        "question": "When a right turn against a red signal light is allowed, the proper way to make the turn is to:",
        "options": [
            "Stop, give right-of-way to any persons or vehicles within the intersection; then cautiously make your turn.",
            "Turn quickly to get out of the way of other vehicles."
        ],
        "answer_index": 0
    },
    {
        "id": 22,
        "question": "When passing another vehicle, you should not cut back into the right lane until you can see the vehicle that you just passed in your rearview mirror.",
        "options": [
            "True",
            "False"
        ],
        "answer_index": 0
    },
    {
        "id": 23,
        "question": "When a school bus is stopped on a two-lane highway and its red warning lights are \ufb02ashing and its stop signal arm is extended, you must:",
        "options": [
            "Slow down, sound your horn and pass the bus with caution.",
            "Stop your vehicle before reaching the bus.",
            "Pass the bus on the left if there are no vehicles approaching from the opposite direction."
        ],
        "answer_index": 1
    },
    {
        "id": 24,
        "question": "A person may never drive a motor vehicle (even if borrowed or rented for a short period of time) unless the operator holds a valid drivers license which is properly classi\ufb01ed for that kind and type of vehicle.",
        "options": [
            "True",
            "False"
        ],
        "answer_index": 0
    },
    {
        "id": 25,
        "question": "When there are \ufb02ashing signals at a railroad crossing and the train clears the crossing, how soon should you proceed?",
        "options": [
            "Follow the vehicle ahead of you.",
            "After you check to make sure another train is not approaching on another track.",
            "Just as soon as the train clears the crossing."
        ],
        "answer_index": 1
    },
    {
        "id": 26,
        "question": "When a two-lane pavement is marked with a single, solid yellow line on your side of the center line:",
        "options": [
            "Construction work is going on ahead, slow down.",
            "You must not cross the yellow line to pass another vehicle.",
            "You must slow down and proceed with caution."
        ],
        "answer_index": 1
    },
    {
        "id": 27,
        "question": "Which of the following laws and safety rules apply to bicyclists?",
        "options": [
            "Bicyclists should travel in the opposite direction of other vehicles.",
            "The safest hours for operation are during times of poor visibility.",
            "Bicyclists are entitled to the same right-of-way as other vehicles."
        ],
        "answer_index": 2
    },
    {
        "id": 28,
        "question": "When making a left or right turn in a business or residential district, a continuous signal to turn must be given:",
        "options": [
            "Not less than 100 feet before turning.",
            "Only when vehicles are coming toward you.",
            "At least 50 feet from the intersection."
        ],
        "answer_index": 0
    },
    {
        "id": 29,
        "question": "When an authorized emergency vehicle which is using its siren and \ufb02ashing lights approaches your vehicle, you should:",
        "options": [
            "Increase your speed.",
            "Continue at the same speed.",
            "Pull over to the right hand edge of the highway and stop, if possible."
        ],
        "answer_index": 2
    },
    {
        "id": 30,
        "question": "If your vehicle starts to skid on water (hydroplane), you should:",
        "options": [
            "Take your foot off the accelerator and let your vehicle slow down.",
            "Turn your wheel slightly to the right and brake gently.",
            "Turn your ignition off and coast to a stop."
        ],
        "answer_index": 0
    },
    {
        "id": 31,
        "question": "If you are convicted of passing a school bus that is receiving or discharging passengers, you may lose your drivers license for at least 30 days.",
        "options": [
            "True",
            "False"
        ],
        "answer_index": 1
    },
    {
        "id": 32,
        "question": "The road surface of a bridge may be dangerous in winter because:",
        "options": [
            "The bridge surface is warmer.",
            "There may be ice on bridges even when other pavements are clear.",
            "Neither of these."
        ],
        "answer_index": 1
    },
    {
        "id": 33,
        "question": "A \ufb02ashing red traf\ufb01c signal light at an intersection means:",
        "options": [
            "An emergency vehicle is approaching from your rear.",
            "You should be careful when going through the intersection.",
            "Exactly the same thing as a stop sign."
        ],
        "answer_index": 2
    },
    {
        "id": 34,
        "question": "It is permissible for you to pass on the shoulder of the road.",
        "options": [
            "True",
            "False"
        ],
        "answer_index": 1
    },
    {
        "id": 35,
        "question": "When required to stop at railroad crossings, vehicles must stop:",
        "options": [
            "Within 25 feet, but not less than 15 feet from the nearest railroad crossing.",
            "Within 50 feet, but not less than 15 feet from the nearest railroad crossing.",
            "Within 75 feet, but not less than 25 feet from the nearest railroad crossing.",
            "Within 100 feet, but not less than 50 feet from the nearest railroad crossing."
        ],
        "answer_index": 1
    },
    {
        "id": 36,
        "question": "In order to reinstate full driving privileges after a DRIVING UNDER THE INFLUENCE (DUI) revocation, a person must:",
        "options": [
            "Carry high-risk auto insurance for three years.",
            "Be approved for reinstatement by a Secretary of State Hearing Of\ufb01cer and pay a $60 reinstatement fee.",
            "Submit to a professional assessment of alcohol and/or drug use and attend a remedial or rehabilitation program.",
            "Wait a minimum of one year.",
            "All of the above."
        ],
        "answer_index": 4
    },
    {
        "id": 37,
        "question": "It is unlawful for any person to leave the roadway and travel across private property to avoid an of\ufb01cial control device.",
        "options": [
            "True",
            "False"
        ],
        "answer_index": 0
    },
    {
        "id": 38,
        "question": "When driving on a slippery road and the rear end of your vehicle starts to skid, you should",
        "options": [
            "Apply the brakes quickly.",
            "Turn the front wheels in the direction of the skid.",
            "Hold the wheel \ufb01rmly and steer straight ahead, braking gradually."
        ],
        "answer_index": 1
    },
    {
        "id": 39,
        "question": "when a traf\ufb01c light shows both a red light and a green arrow in the direction you wish to turn, you:",
        "options": [
            "Have the right-of-way over pedestrians in turning in the direction of the arrow.",
            "May proceed in the direction of the arrow with caution.",
            "Must stop and remain stopped until the red light has changed."
        ],
        "answer_index": 1
    },
    {
        "id": 40,
        "question": "The \"2-Second Rule\" works like this: when the vehicle ahead of you passes a \ufb01xed object like a tree, etc., if you begin counting, \"one thousand one, one thousand two\"; then if you reach the same tree before you have \ufb01nished saying \"one thousand two\", you are following too closely.",
        "options": [
            "True",
            "False"
        ],
        "answer_index": 0
    },
    {
        "id": 41,
        "question": "Illinois law requires children under age 6 to be secured by a restraint system or seat belt when traveling in a motor vehicle:",
        "options": [
            "In the front seat only.",
            "Anywhere in the vehicle.",
            "In the back seat only.",
            "Never, this is not a law."
        ],
        "answer_index": 1
    },
    {
        "id": 42,
        "question": "A driver moving out of an alley, private road, or driveway within an urban area must:",
        "options": [
            "Sound your horn and exit quickly.",
            "Stop only if there are vehicles coming down the street.",
            "Stop before reaching the sidewalk and yield to pedestrians and vehicles before proceeding."
        ],
        "answer_index": 2
    },
    {
        "id": 43,
        "question": "If you MUST drive during foggy weather, you should turn on the low-beam headlights and:",
        "options": [
            "Flash your lights routinely.",
            "Keep your foot on the brake pedal so your tail lights will be seen more easily.",
            "Drive at a speed that will allow you to stop within your \ufb01eld of vision."
        ],
        "answer_index": 2
    },
    {
        "id": 44,
        "question": "When approaching a blind pedestrian carrying a white cane or accompanied by a guide dog:",
        "options": [
            "You may pass if you slow down and sound the horn.",
            "You must yield the right-of-way.",
            "You may pass if there are no vehicles approaching from the opposite direction."
        ],
        "answer_index": 1
    },
    {
        "id": 45,
        "question": "Motorcycles, though smaller and lighter in weight, have the same right-of-way privileges as other vehicles. Special observance should be given to motorcyclists when they approach an intersection, a railroad crossing, bridge or when bad weather occurs.",
        "options": [
            "True",
            "False"
        ],
        "answer_index": 0
    },
    {
        "id": 46,
        "question": "When you are driving and one of your tires has a blowout, you should:",
        "options": [
            "Quickly steer onto the right shoulder.",
            "Apply the brakes quickly to reduce speed.",
            "Grip the steering wheel \ufb01rmly, take your foot off the gas pedal, and let the vehicle slow down before you drive onto the shoulder."
        ],
        "answer_index": 2
    },
    {
        "id": 47,
        "question": "The driver and front-seat passengers (age 6 and above) are required to wear seat safety belts while riding in a motor vehicle on Illinois roadways. Violators are subject to:",
        "options": [
            "A $50 \ufb01ne plus court costs.",
            "Suspension of their drivers license.",
            "A $25 \ufb01ne plus court costs.",
            "None of the above."
        ],
        "answer_index": 3
    },
    {
        "id": 48,
        "question": "You are waiting at an intersection and the traf\ufb01c signal light changes to green, you may then go ahead:",
        "options": [
            "When you think it is safe to do so.",
            "After \ufb01rst yielding the right-of-way to any persons or vehicles which are within the intersection.",
            "Immediately."
        ],
        "answer_index": 1
    },
    {
        "id": 49,
        "question": "A person who REFUSES to submit to a chemical test, or tests, of his/her blood, breath or urine for the purpose of determining the level of alcohol and/or drug content:",
        "options": [
            "Will receive a drivers license suspension for 12 months for second or more refusals within a 5-year period.",
            "May have this used as evidence against him/her in court if charged with DRIVING UNDER THE INFLUENCE of alcohol and/or drugs (DUI).",
            "Will receive a drivers license suspension for six months on first offense.",
            "All of the above."
        ],
        "answer_index": 3
    },
    {
        "id": 50,
        "question": "Your driving privileges will be revoked in the State of Illinois if you are convicted:",
        "options": [
            "Drag racing.",
            "Driving or being in actual physical control of a vehicle while under the in\ufb02uence of alcohol or other drugs (including prescription drugs which may impair driving ability) and/or combinations, thereof.",
            "Leaving the scene of an accident in which you are involved as a driver, if the accident results in death or personal injury.",
            "None of the above.",
            "All of the above."
        ],
        "answer_index": 4
    },
    {
        "id": 51,
        "question": "When approaching a railroad grade crossing which does NOT have ANY warning system (such as electric \ufb02ashing lights or gates) you should:",
        "options": [
            "Continue at your normal speed.",
            "Look, listen, slow down in case you have to stop, and proceed when safe to do so.",
            "Increase speed and cross tracks as quickly as possible."
        ],
        "answer_index": 1
    },
    {
        "id": 52,
        "question": "Unless posted otherwise, it is permissible for drivers on a one-way street to turn left on a red light into another one-way street that moves traf\ufb01c to the left after making a proper stop and yielding to traf\ufb01c or pedestrians within the intersection.",
        "options": [
            "True",
            "False"
        ],
        "answer_index": 0
    },
    {
        "id": 53,
        "question": "Motorcycles are entitled to use the full width of a traf\ufb01c lane, the same as a vehicle. Therefore, when you are driving a vehicle and want to pass a motorcycle, you should:",
        "options": [
            "Follow the motorcycle without passing it.",
            "Cautiously pass the motorcycle, sharing the same lane that it is using.",
            "Not pass the motorcycle in the same lane that it is using, but change lanes and pass the way you would pass another vehicle."
        ],
        "answer_index": 2
    },
    {
        "id": 54,
        "question": "Your drivers license will be suspended if: after arrested for DRIVING UNDER THE INFLUENCE of alcohol and/or drugs (DUI).",
        "options": [
            "You take a chemical test (breath, blood or urine) and register an amount equal to or over the legal level intoxication (.08%)",
            "You refuse to take a chemical test (breath, blood or urine).",
            "You take a chemical test and register .04%"
        ],
        "answer_index": [
            0,
            1
        ]
    }
];


let currentQuestionIndex = 0;
let score = 0;
let selectedOptionIndex = null;

const startBtn = document.getElementById('start-btn');
const nextBtn = document.getElementById('next-btn');
const restartBtn = document.getElementById('restart-btn');
const startScreen = document.getElementById('start-screen');
const questionScreen = document.getElementById('question-screen');
const resultScreen = document.getElementById('result-screen');
const questionText = document.getElementById('question-text');
const optionsContainer = document.getElementById('options-container');
const progressContainer = document.getElementById('progress-container');
const progressBar = document.getElementById('progress-bar');
const questionCounter = document.getElementById('question-counter');
const finalScore = document.getElementById('final-score');
const totalQuestions = document.getElementById('total-questions');
const resultMessage = document.getElementById('result-message');
const feedback = document.getElementById('feedback');

startBtn.addEventListener('click', startQuiz);
nextBtn.addEventListener('click', nextQuestion);
restartBtn.addEventListener('click', restartQuiz);

function startQuiz() {
    startScreen.classList.add('hidden');
    questionScreen.classList.remove('hidden');
    progressContainer.classList.remove('hidden');

    currentQuestionIndex = 0;
    score = 0;

    showQuestion();
}

function showQuestion() {
    const question = questions[currentQuestionIndex];
    questionText.innerText = `${question.id}. ${question.question}`;

    // Clear legacy elements
    const oldImg = document.getElementById('question-image');
    if (oldImg) oldImg.remove();
    optionsContainer.innerHTML = '';
    feedback.classList.add('hidden');
    feedback.innerText = '';
    nextBtn.classList.add('hidden');

    // Update progress
    const progress = ((currentQuestionIndex) / questions.length) * 100;
    progressBar.style.width = `${progress}%`;
    questionCounter.innerText = `Question ${currentQuestionIndex + 1} of ${questions.length}`;

    // Render Multiple Choice (Unified for all types now)
    renderMultipleChoice(question);
}

function renderMultipleChoice(question) {
    // Image handling
    if (question.image) {
        const img = document.createElement('img');
        img.src = question.image;
        img.id = 'question-image';
        img.style.maxWidth = '100%';
        img.style.maxHeight = '300px';
        img.style.marginBottom = '20px';
        img.style.borderRadius = '8px';
        questionText.after(img);
    }

    // Grid vs List Layout
    if (question.type === 'image_grid') { // Legacy support if needed, but we used singular signs now
        optionsContainer.style.display = 'grid';
        optionsContainer.style.gridTemplateColumns = 'repeat(3, 1fr)';
        optionsContainer.style.gap = '10px';
    } else {
        optionsContainer.style.display = 'flex';
        optionsContainer.style.flexDirection = 'column';
        optionsContainer.style.gap = '12px';
    }

    question.options.forEach((option, index) => {
        const btn = document.createElement('button');
        btn.classList.add('option-btn');

        // Check if option is an image path (simplistic check)
        if (option.endsWith('.png') || option.endsWith('.jpg')) {
            const img = document.createElement('img');
            img.src = option;
            img.style.width = '100%';
            btn.appendChild(img);
        } else {
            btn.innerText = option;
        }

        btn.onclick = () => selectOption(index, btn, question);
        optionsContainer.appendChild(btn);
    });

    // For multi-select questions, add a Submit button
    if (Array.isArray(question.answer_index)) {
        const submitBtn = document.createElement('button');
        submitBtn.id = 'submit-multi-btn';
        submitBtn.classList.add('btn', 'primary');
        submitBtn.innerText = 'Submit (Select multiple)';
        submitBtn.style.marginTop = '15px';
        submitBtn.onclick = () => checkMultiSelect(question);
        optionsContainer.appendChild(submitBtn);
    }
}

let selectedOptions = []; // Track multiple selections

function selectOption(index, btn, question) {
    // Multi-select mode for array answers
    if (Array.isArray(question.answer_index)) {
        if (selectedOptions.includes(index)) {
            // Deselect
            selectedOptions = selectedOptions.filter(i => i !== index);
            btn.classList.remove('selected');
        } else {
            // Select
            selectedOptions.push(index);
            btn.classList.add('selected');
        }
        return; // Don't auto-submit
    }

    // Single select mode (original logic)
    if (selectedOptionIndex !== null) return; // Prevent changing answer

    selectedOptionIndex = index;
    let isCorrect = index === question.answer_index;
    let correctIndices = [question.answer_index];

    const options = optionsContainer.children;

    if (isCorrect) {
        btn.classList.add('correct');
        score++;
        feedback.innerText = "Correct! Good job.";
        feedback.classList.add('correct');
        feedback.classList.remove('wrong');
    } else {
        btn.classList.add('wrong');
        // Highlight correct answer(s)
        correctIndices.forEach(i => options[i].classList.add('correct'));
        feedback.innerText = "Incorrect. The correct answer is highlighted.";
        feedback.classList.add('wrong');
        feedback.classList.remove('correct');
    }

    feedback.classList.remove('hidden');

    // Disable all options
    Array.from(options).forEach(opt => opt.classList.add('disabled'));

    nextBtn.classList.remove('hidden');
}

function checkMultiSelect(question) {
    const correctIndices = question.answer_index;
    const options = optionsContainer.children;

    // Check if selected options match correct answers exactly
    const isCorrect =
        selectedOptions.length === correctIndices.length &&
        selectedOptions.every(i => correctIndices.includes(i));

    if (isCorrect) {
        score++;
        feedback.innerText = "Correct! Good job.";
        feedback.classList.add('correct');
        feedback.classList.remove('wrong');
    } else {
        feedback.innerText = "Incorrect. The correct answers are highlighted.";
        feedback.classList.add('wrong');
        feedback.classList.remove('correct');
    }

    // Highlight correct answers
    correctIndices.forEach(i => options[i].classList.add('correct'));

    // Mark wrong selections
    selectedOptions.forEach(i => {
        if (!correctIndices.includes(i)) {
            options[i].classList.add('wrong');
        }
    });

    feedback.classList.remove('hidden');

    // Disable all options and hide submit button
    Array.from(options).forEach(opt => opt.classList.add('disabled'));
    const submitBtn = document.getElementById('submit-multi-btn');
    if (submitBtn) submitBtn.style.display = 'none';

    nextBtn.classList.remove('hidden');
}

function nextQuestion() {
    selectedOptionIndex = null;
    selectedOptions = []; // Reset multi-select
    currentQuestionIndex++;
    if (currentQuestionIndex < questions.length) {
        showQuestion();
    } else {
        showResults();
    }
}

function showResults() {
    questionScreen.classList.add('hidden');
    progressContainer.classList.add('hidden');
    resultScreen.classList.remove('hidden');

    finalScore.innerText = score;
    totalQuestions.innerText = questions.length;

    const percentage = (score / questions.length) * 100;
    let message = "";
    if (percentage >= 90) {
        message = "Excellent! You are ready for the test.";
    } else if (percentage >= 80) {
        message = "Great job! A little more practice and you'll be perfect.";
    } else if (percentage >= 70) {
        message = "Good effort, but review the questions you missed.";
    } else {
        message = "Keep practicing. You need to study more.";
    }
    resultMessage.innerText = message;
}

function restartQuiz() {
    resultScreen.classList.add('hidden');
    startQuiz();
}