File size: 4,098 Bytes
cdfb731
 
 
 
 
 
0bcd8e4
 
 
cdfb731
0bcd8e4
19abad4
cdfb731
 
a2274a8
 
 
 
 
 
 
 
 
 
 
 
 
285b774
9dc9ac8
285b774
 
 
 
 
 
 
a2274a8
 
 
 
 
 
 
 
 
 
0bcd8e4
 
 
 
cdfb731
0bcd8e4
cdfb731
6fc4c72
 
 
 
cdfb731
 
9dc9ac8
cdfb731
 
0bcd8e4
 
 
 
cdfb731
 
 
 
98960e8
 
 
 
0bcd8e4
 
 
 
 
 
 
 
 
 
98960e8
 
 
 
0bcd8e4
 
 
 
98960e8
 
 
 
 
 
 
 
 
cdfb731
 
0bcd8e4
 
 
 
98960e8
 
 
cdfb731
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
const socket = io();
let username;

function joinQuiz() {
    username = document.getElementById('username').value;
    socket.emit('join', { username: username });
    document.getElementById('username').style.display = 'none';
    document.querySelector('button').style.display = 'none';
    document.getElementById('logged-user').textContent = username;
    document.getElementById('quiz-content').style.display = 'block';
    document.getElementById('waiting-message').style.display = 'block';
    document.getElementById('join-title').style.display = 'none';
}

function submitForm(event) {
    event.preventDefault();
    const selectedOption = document.querySelector('input[name="answer"]:checked');
    if (selectedOption) {
        const answer = selectedOption.value;
        socket.emit('submit_answer', { answer });
    } else {
        alert("Please select an option before submitting.");
    }
}

function selectExam() {
    const examName = document.getElementById('exam-selector').value;
    const startQuestion = document.getElementById('start-question-number').value;
    socket.emit('select_exam', { exam_name: examName, start_question: parseInt(startQuestion) });
    document.getElementById('question-start-display').textContent = `Starting from question ${startQuestion}.`;
}

function updateSliderValue(value) {
    document.getElementById('start-question').value = value;
    document.getElementById('start-question-number').value = value;
    document.getElementById('question-start-display').textContent = `Starting from question ${value}.`;
}

socket.on('exam_loaded', (data) => {
    if (data.success) {
        alert(`Exam "${data.exam_name}" loaded successfully!`);
    } else {
        alert(`Failed to load exam "${data.exam_name}".`);
    }
});

socket.on('update_participants', (data) => {
    document.getElementById('participant-count').textContent = data.count;
});

socket.on('new_question', (data) => {
    document.getElementById('waiting-message').style.display = 'none';
    document.getElementById('question-text').innerText = data.question;
    const letters = ['a', 'b', 'c', 'd'];
    const options = data.options.map((opt, index) =>
        `<input type="radio" id="${letters[index]}" name="answer" value="${opt}">
        <label for="${letters[index]}">${letters[index]}) ${opt}</label><br>`
    ).join('');
    document.getElementById('options').innerHTML = options;
    document.getElementById('end-quiz').disabled = false;
});

function checkAnswers() {
    socket.emit('check_answers');
}

function nextQuestion() {
    socket.emit('next_question');
}

function endQuiz() {
    socket.emit('end_quiz');
}

function restartQuiz() {
    socket.emit('restart_quiz');
}

socket.on('display_results', (data) => {
    const img = `<img src="data:image/png;base64,${data.chart}" alt="Results Chart" />`;
    const resultText = `<p>Correct Answer: ${data.results.correct_answer}</p>`;
    document.getElementById('results').innerHTML = img + resultText;
});

socket.on('enable_end_quiz', () => {
    document.getElementById('end-quiz').disabled = false;
});

socket.on('clear_results', () => {
    document.getElementById('results').innerHTML = '';
});

socket.on('display_final_results', (finalResults) => {
    document.getElementById('quiz-content').style.display = 'none';
    const resultsTable = document.getElementById('results-table');
    resultsTable.innerHTML = '';
    finalResults.forEach((participant) => {
        const row = `<tr><td>${participant.username}</td><td>${participant.score}</td></tr>`;
        resultsTable.innerHTML += row;
    });
    document.getElementById('final-results').style.display = 'block';
});

socket.on('quiz_reset', () => {
    document.getElementById('results').innerHTML = '';
    document.getElementById('question-text').innerText = '';
    document.getElementById('options').innerHTML = '';
    document.getElementById('final-results').style.display = 'none';
    document.getElementById('quiz-content').style.display = 'block';
    document.getElementById('waiting-message').style.display = 'block';
});