Real-Time-Quiz-Application

Sleeping

Real-Time-Quiz-Application / app /static /script.js

Fausto Busuito

Application changes

b0a7145 almost 2 years ago

8.9 kB

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}`;
}

	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}`;
	}