Please bookmark this page to avoid losing your image tool!

Image Quiz Maker Tool

(Free & Supports Bulk Upload)

Drag & drop your images here or

The result will appear here...
You can edit the below JavaScript code to customize the image 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;
}

Free Image Tool Creator

Can't find the image tool you're looking for?
Create one based on your own needs now!

Description

The Image Quiz Maker Tool allows users to transform any image into an interactive multiple-choice quiz. By providing an image, a question, and a set of potential answers, the tool generates a visually engaging quiz interface that includes instant feedback to indicate whether a chosen answer is correct or incorrect. This tool is ideal for educators creating visual learning assessments, content creators developing engaging social media polls, or anyone looking to add interactive trivia elements to presentations and websites.

Leave a Reply

Your email address will not be published. Required fields are marked *