Image Quiz Maker Tool

function processImage(originalImg, question = "Что изображено на этой картинке?", optionsStr = "Вариант 1,Вариант 2,Вариант 3,Вариант 4", correctIndex = 0) {
    // Parse parameters
    const optionsArray = optionsStr.split(',').map(opt => opt.trim()).filter(opt => opt.length > 0);
    const correctIdx = parseInt(correctIndex, 10) || 0;

    // Create the main container
    const container = document.createElement('div');
    container.style.fontFamily = '"Segoe UI", Roboto, Helvetica, Arial, sans-serif';
    container.style.maxWidth = '600px';
    container.style.width = '100%';
    container.style.margin = '0 auto';
    container.style.padding = '24px';
    container.style.boxSizing = 'border-box';
    container.style.border = '1px solid #e0e0e0';
    container.style.borderRadius = '12px';
    container.style.boxShadow = '0 8px 16px rgba(0,0,0,0.08)';
    container.style.backgroundColor = '#ffffff';
    container.style.textAlign = 'center';

    // Create and configure the canvas for the image
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');
    
    // Scale image to fit container nicely
    const maxWidth = 552; // 600 - 48 (padding)
    let width = originalImg.width;
    let height = originalImg.height;

    if (width > maxWidth) {
        height = (maxWidth / width) * height;
        width = maxWidth;
    }

    canvas.width = width;
    canvas.height = height;
    canvas.style.borderRadius = '8px';
    canvas.style.boxShadow = '0 4px 8px rgba(0,0,0,0.1)';
    canvas.style.maxWidth = '100%';
    canvas.style.height = 'auto';
    canvas.style.objectFit = 'contain';
    
    // Draw the original image onto the canvas
    ctx.drawImage(originalImg, 0, 0, width, height);
    container.appendChild(canvas);

    // Create the question element
    const questionElem = document.createElement('h3');
    questionElem.textContent = question;
    questionElem.style.color = '#333333';
    questionElem.style.fontSize = '20px';
    questionElem.style.marginTop = '24px';
    questionElem.style.marginBottom = '20px';
    container.appendChild(questionElem);

    // Create the options container
    const optionsContainer = document.createElement('div');
    optionsContainer.style.display = 'flex';
    optionsContainer.style.flexWrap = 'wrap';
    optionsContainer.style.gap = '12px';
    optionsContainer.style.justifyContent = 'center';

    let hasAnswered = false;
    const buttons = [];

    // Result message container
    const resultMsg = document.createElement('div');
    resultMsg.style.marginTop = '20px';
    resultMsg.style.fontSize = '18px';
    resultMsg.style.fontWeight = 'bold';
    resultMsg.style.minHeight = '24px';
    resultMsg.style.transition = 'all 0.3s ease';

    // Create an interactive button for each option
    optionsArray.forEach((optText, index) => {
        const btn = document.createElement('button');
        btn.textContent = optText;
        btn.style.flex = '1 1 calc(50% - 12px)';
        btn.style.minWidth = '140px';
        btn.style.padding = '12px 16px';
        btn.style.fontSize = '16px';
        btn.style.fontWeight = '600';
        btn.style.cursor = 'pointer';
        btn.style.border = '2px solid #4a90e2';
        btn.style.backgroundColor = '#ffffff';
        btn.style.color = '#4a90e2';
        btn.style.borderRadius = '8px';
        btn.style.transition = 'background-color 0.2s, color 0.2s, border-color 0.2s, opacity 0.2s';
        btn.style.outline = 'none';

        // Hover effects
        btn.addEventListener('mouseover', () => {
            if (!hasAnswered) {
                btn.style.backgroundColor = '#f0f7ff';
            }
        });
        btn.addEventListener('mouseout', () => {
            if (!hasAnswered) {
                btn.style.backgroundColor = '#ffffff';
            }
        });

        // Click event to check the answer
        btn.addEventListener('click', () => {
            if (hasAnswered) return;
            hasAnswered = true;

            // Highlight buttons based on correctness
            buttons.forEach((b, i) => {
                b.style.cursor = 'default';
                
                if (i === correctIdx) {
                    // Correct answer highlighting (Green)
                    b.style.backgroundColor = '#2ecc71';
                    b.style.color = '#ffffff';
                    b.style.borderColor = '#27ae60';
                } else if (i === index && index !== correctIdx) {
                    // Wrong answer highlighting (Red)
                    b.style.backgroundColor = '#e74c3c';
                    b.style.color = '#ffffff';
                    b.style.borderColor = '#c0392b';
                } else {
                    // Dim unselected incorrect answers
                    b.style.opacity = '0.5';
                    b.style.backgroundColor = '#f5f5f5';
                    b.style.borderColor = '#dcdcdc';
                    b.style.color = '#7f8c8d';
                }
            });

            // Display outcome text
            if (index === correctIdx) {
                resultMsg.textContent = 'Правильно! / Correct! 🎉';
                resultMsg.style.color = '#27ae60';
            } else {
                resultMsg.textContent = 'Неправильно! / Incorrect! 😢';
                resultMsg.style.color = '#c0392b';
            }
        });

        buttons.push(btn);
        optionsContainer.appendChild(btn);
    });

    container.appendChild(optionsContainer);
    container.appendChild(resultMsg);

    return container;
}