app/static/script.js

let questions = [];
let currentIndex = 0;
let userAnswers = [];
let startTime;

document.getElementById('start-session').addEventListener('click', async () => {
    const file = document.getElementById('file').value;
    if (!file) return alert("Please select a file");

    const response = await fetch('/load_questions', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ file_name: file })
    });

    questions = await response.json();
    userAnswers = Array(questions.length).fill([]);
    startQuiz();
});

function startQuiz() {
    document.getElementById('file-selection').style.display = 'none';
    document.getElementById('quiz-container').style.display = 'block';
    startTime = Date.now();
    displayQuestion();
    setInterval(updateTimer, 1000);
}

function displayQuestion() {
    const question = questions[currentIndex];
    document.getElementById('question-number').innerText = `Question ${currentIndex + 1} of ${questions.length}`;
    document.getElementById('question').innerText = question.question;

    // Verifica se ci sono risposte multiple
    const isMultipleChoice = question.correct.length > 1;

    const optionsDiv = document.getElementById('options');
    optionsDiv.innerHTML = '';

    const form = document.createElement('form');
    form.id = 'question-options';

    question.options.forEach((option, i) => {
        const input = document.createElement('input');
        input.type = isMultipleChoice ? 'checkbox' : 'radio';
        input.name = 'answer';
        input.value = i;
        input.checked = userAnswers[currentIndex].includes(i);

        input.addEventListener('change', () => {
            if (isMultipleChoice) {
                if (input.checked) {
                    userAnswers[currentIndex].push(i);
                } else {
                    userAnswers[currentIndex] = userAnswers[currentIndex].filter(j => j !== i);
                }
            } else {
                userAnswers[currentIndex] = [i];
            }
        });

        const label = document.createElement('label');
        label.appendChild(input);
        label.appendChild(document.createTextNode(option));
        label.style.display = 'block';
        label.style.marginBottom = '10px';

        form.appendChild(label);
    });

    optionsDiv.appendChild(form);
}

function selectAnswer(optionIndex) {
    const currentAnswers = userAnswers[currentIndex];
    if (currentAnswers.includes(optionIndex)) {
        userAnswers[currentIndex] = currentAnswers.filter(i => i !== optionIndex);
    } else {
        userAnswers[currentIndex].push(optionIndex);
    }
    displayQuestion();
}

document.getElementById('next').addEventListener('click', () => {
    currentIndex = Math.min(currentIndex + 1, questions.length - 1);
    displayQuestion();
});

document.getElementById('prev').addEventListener('click', () => {
    currentIndex = Math.max(currentIndex - 1, 0);
    displayQuestion();
});

document.getElementById('end-session').addEventListener('click', () => {
    let correctCount = 0;
    let incorrectCount = 0;
    let unansweredCount = 0;

    const resultsTable = document.createElement('table');
    resultsTable.style.width = '100%';
    resultsTable.style.borderCollapse = 'collapse';

    // Crea l'intestazione della tabella
    const headerRow = document.createElement('tr');
    ['Question', 'Your Answer', 'Correct Answer', 'Status'].forEach(header => {
        const th = document.createElement('th');
        th.innerText = header;
        th.style.border = '1px solid #ddd';
        th.style.padding = '10px';
        th.style.backgroundColor = '#f4f4f4';
        headerRow.appendChild(th);
    });
    resultsTable.appendChild(headerRow);

    questions.forEach((question, index) => {
        const row = document.createElement('tr');

        // Colonna domanda
        const questionCell = document.createElement('td');
        questionCell.innerText = question.question;
        questionCell.style.border = '1px solid #ddd';
        questionCell.style.padding = '10px';
        row.appendChild(questionCell);

        // Colonna risposta dell'utente
        const userAnswerCell = document.createElement('td');
        const userAnswersText = userAnswers[index].length
            ? userAnswers[index].map(ansIndex => question.options[ansIndex]).join(', ')
            : 'No answer';
        userAnswerCell.innerText = userAnswersText;
        userAnswerCell.style.border = '1px solid #ddd';
        userAnswerCell.style.padding = '10px';
        row.appendChild(userAnswerCell);

        // Colonna risposta corretta
        const correctAnswerCell = document.createElement('td');
        if (userAnswers[index].length === 0) {
            correctAnswerCell.innerText = 'No answer';
            unansweredCount++;  // Aumenta il contatore delle risposte non date
        } else {
            const correctAnswersText = question.correct.map(letter => {
                const optionIndex = letter.charCodeAt(0) - 65; // A = 0, B = 1, C = 2, ...
                return question.options[optionIndex];
            }).join(', ');
            correctAnswerCell.innerText = correctAnswersText;
            if (JSON.stringify(userAnswers[index].sort()) === JSON.stringify(question.correct.sort().map(letter => letter.charCodeAt(0) - 65))) {
                correctCount++;  // Aumenta il contatore delle risposte corrette
            } else {
                incorrectCount++;  // Aumenta il contatore delle risposte sbagliate
            }
        }
        correctAnswerCell.style.border = '1px solid #ddd';
        correctAnswerCell.style.padding = '10px';
        if (userAnswers[index].length > 0) {
            correctAnswerCell.style.backgroundColor = '#d4edda'; // Verde chiaro per evidenziare la risposta corretta
        }
        row.appendChild(correctAnswerCell);

        // Colonna stato
        const statusCell = document.createElement('td');
        if (userAnswers[index].length === 0) {
            statusCell.innerText = 'Not answered';
            statusCell.style.color = 'orange';
        } else {
            // Confronto corretto per risposte multiple (controllo che le risposte dell'utente corrispondano alle risposte corrette)
            const isCorrect = JSON.stringify(userAnswers[index].sort()) === JSON.stringify(question.correct.sort().map(letter => letter.charCodeAt(0) - 65));
            if (isCorrect) {
                statusCell.innerText = 'Correct';
                statusCell.style.color = 'green';
            } else {
                statusCell.innerText = 'Incorrect';
                statusCell.style.color = 'red';
            }
        }
        statusCell.style.border = '1px solid #ddd';
        statusCell.style.padding = '10px';
        row.appendChild(statusCell);

        resultsTable.appendChild(row);
    });

    // Calcola lo score
    const totalQuestions = questions.length;
    const score = (correctCount / totalQuestions) * 100;

    // Mostra il punteggio con i dettagli
    const scoreDetails = document.createElement('div');
    scoreDetails.style.marginBottom = '20px';

    scoreDetails.innerHTML = `
        <h3>Quiz Results</h3>
        <p><strong>Total Questions:</strong> ${totalQuestions}</p>
        <p><strong>Correct Answers:</strong> ${correctCount}</p>
        <p><strong>Incorrect Answers:</strong> ${incorrectCount}</p>
        <p><strong>Unanswered Questions:</strong> ${unansweredCount}</p>
        <p><strong>Your score:</strong> ${score.toFixed(2)}%</p>
    `;

    // Aggiungi i dettagli del punteggio e la tabella ai risultati
    const resultsContainer = document.getElementById('results-container');
    resultsContainer.innerHTML = ''; // Pulisci i risultati precedenti
    resultsContainer.appendChild(scoreDetails);
    resultsContainer.appendChild(resultsTable);

    // Mostra il contenitore dei risultati e nascondi il quiz
    document.getElementById('quiz-container').style.display = 'none';
    resultsContainer.style.display = 'block';
});

document.getElementById('restart').addEventListener('click', () => {
    document.getElementById('results-container').style.display = 'none';
    document.getElementById('file-selection').style.display = 'block';
    document.getElementById('quiz-container').style.display = 'none';
    currentIndex = 0;
    questions = [];
    userAnswers = [];
    document.getElementById('file').value = ''; // Reset file selection
});
function updateTimer() {
    const elapsedTime = Math.floor((Date.now() - startTime) / 1000);
    const hours = String(Math.floor(elapsedTime / 3600)).padStart(2, '0');
    const minutes = String(Math.floor((elapsedTime % 3600) / 60)).padStart(2, '0');
    const seconds = String(elapsedTime % 60).padStart(2, '0');
    document.getElementById('timer').innerText = `Time: ${hours}:${minutes}:${seconds}`;
}