Lỗ hổng trong một cuộc thi trực tuyến của trường

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
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194

let questions = []
let answers = []
let timer
let duration = 30 * 60
let remaining = duration
function startQuiz() {
  const name = document.getElementById('name').value.trim()
  const studentId = document.getElementById('studentId').value.trim()
  const faculty = document.getElementById('faculty').value.trim()
  const email = document.getElementById('email').value.trim()
  const phone = document.getElementById('phone').value.trim()
  if (!name || !studentId || !faculty || !email || !phone) {
    alert('Vui lòng nhập đầy đủ thông tin.')
    return
  }
  document.getElementById('startBtn').disabled = true
  const inputs = document.querySelectorAll(
    '#name, #studentId, #faculty, #email, #phone',
  )
  inputs.forEach((input) => (input.disabled = true))
  document.getElementById('loadingOverlay').classList.remove('hidden')
  google.script.run
    .withFailureHandler((e) => {
      alert(e.message)
      document.getElementById('startBtn').disabled = false
      document.getElementById('loadingOverlay').classList.add('hidden')
    })
    .withSuccessHandler(() => {
      google.script.run
        .withSuccessHandler((qs) => {
          renderQuestions(qs)
          startCountdown()
          document.getElementById('startBtn').style.display = 'none'
          document.getElementById('submitBtn').style.display = 'block'
          document.getElementById('timer').style.display = 'block'
          document.getElementById('loadingOverlay').classList.add('hidden')
        })
        .getRandomQuestions(30)
    })
    .logStartTime({
      studentId,
      name,
      faculty,
      email,
      phone,
    })
}
function renderQuestions(qs) {
  questions = qs
  answers = new Array(qs.length).fill(null)
  const quizDiv = document.getElementById('quiz')
  quizDiv.innerHTML = ''
  qs.forEach((q, idx) => {
    const div = document.createElement('div')
    div.className = 'question'
    div.innerHTML = `
            <p><strong>Câu ${idx + 1}:</strong> ${q.question}</p>
            <div class="answers">
                ${['A', 'B', 'C', 'D']
                  .map(
                    (letter) => `
                    <label>
                        <input type="radio" name="q${idx}" value="${letter}" onchange="chooseAnswer(${idx}, '${letter}')">
                        <span>${letter}. ${q[letter]}</span>
                    </label>`,
                  )
                  .join('')}
            </div>`
    quizDiv.appendChild(div)
  })
}
function chooseAnswer(idx, ans) {
  answers[idx] = {
    answer: ans,
    question: questions[idx].question,
    A: questions[idx].A,
    B: questions[idx].B,
    C: questions[idx].C,
    D: questions[idx].D,
    correct: questions[idx].correct,
  }
  renderQuestionMap() // 🟢 cập nhật lại màu câu đã chọn
}
let currentQuestion = 0
function renderQuestionMap() {
  const map = document.getElementById('questionMap')
  map.innerHTML = ''
  const maxCells = 30
  const total = Math.min(maxCells, questions.length)
  for (let i = 0; i < total; i++) {
    const btn = document.createElement('button')
    btn.textContent = i + 1
    if (answers[i] && answers[i].answer) btn.classList.add('answered')
    if (i === currentQuestion) btn.classList.add('active')
    btn.onclick = () => {
      currentQuestion = i
      const questionDivs = document.querySelectorAll('.question')
      if (questionDivs[i]) {
        questionDivs[i].scrollIntoView({ behavior: 'smooth', block: 'center' })
      }
      renderQuestionMap()
    }
    map.appendChild(btn)
  }
}
function startCountdown() {
  const timerDiv = document.getElementById('timer')
  function updateTimer() {
    const minutes = Math.floor(remaining / 60)
    const seconds = remaining % 60
    timerDiv.textContent = `⏰ Còn: ${minutes} phút ${seconds < 10 ? '0' + seconds : seconds} giây`
    if (remaining <= 0) {
      clearInterval(timer)
      submitQuiz()
    }
    remaining--
  }
  updateTimer()
  timer = setInterval(updateTimer, 1000)
}
function submitQuiz(force = false) {
  const unanswered = answers.filter((a) => a === null).length
  if (unanswered > 0 && !force) {
    if (confirm(`Bạn còn ${unanswered} câu chưa chọn. Nộp luôn?`)) {
      submitQuiz(true)
    } else {
      return
    }
  }
  clearInterval(timer)
  document.getElementById('submitBtn').disabled = true
  const name = document.getElementById('name').value.trim()
  const studentId = document.getElementById('studentId').value.trim()
  const faculty = document.getElementById('faculty').value.trim()
  const email = document.getElementById('email').value.trim()
  const phone = document.getElementById('phone').value.trim()
  google.script.run
    .withSuccessHandler((result) => {
      document.getElementById('quiz').style.display = 'none'
      document.getElementById('questionMap').style.display = 'none'
      document.getElementById('timer').style.display = 'none'
      document.getElementById('startBtn').style.display = 'none'
      document.getElementById('submitBtn').style.display = 'none'
      document
        .querySelectorAll('.input-group')
        .forEach((el) => (el.style.display = 'none'))
      showPopup(`
            ✅ Bài đã nộp thành công!<br><br>
            <strong>Họ và tên:</strong> ${name}<br>
            <strong>MSSV:</strong> ${studentId}<br>
            <strong>Điểm:</strong> ${result.score} / ${result.total}
        `)
    })
    .saveToSheet({
      name: name,
      studentId: studentId,
      faculty: faculty,
      email: email,
      phone: phone,
      answers: answers,
    })
}
function showPopup(message) {
  document.getElementById('popupMessage').innerHTML = message
  document.getElementById('popup').classList.remove('hidden')
}
function closePopup() {
  document.getElementById('popup').classList.add('hidden')
}

1
2
3
4
5
6
7
8
9
10

const name = document.getElementById('name').value.trim();
const studentId = document.getElementById('studentId').value.trim();
const faculty = document.getElementById('faculty').value.trim();
const email = document.getElementById('email').value.trim();
const phone = document.getElementById('phone').value.trim();
if (!name || !studentId || !faculty || !email || !phone) {
    alert('Vui lòng nhập đầy đủ thông tin.');
    return;
}

1
2
3
4
5
6
7

// validate email and mssv
function checkValidate(email, mssv) {
    const mssvRegex = /^\d{8}$/;
    if (!mssvRegex.test(mssv)) return false; // mssv không hợp lệ
    const expectedEmail = `${mssv}@student.hcmus.edu.vn`;
    return email.toLowerCase() === expectedEmail.toLowerCase();
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

let timer;
let duration = 30 * 60;
let remaining = duration;
// ...
function startCountdown() {
  const timerDiv = document.getElementById('timer')
  function updateTimer() {
    const minutes = Math.floor(remaining / 60)
    const seconds = remaining % 60
    timerDiv.textContent = `⏰ Còn: ${minutes} phút ${seconds < 10 ? '0' + seconds : seconds} giây`
    if (remaining <= 0) {
      clearInterval(timer)
      submitQuiz()
    }
    remaining--
  }
  updateTimer()
  timer = setInterval(updateTimer, 1000)
}

1

clearInterval(timer)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

.logStartTime({
  studentId,
  name,
  faculty,
  email,
  phone,
})
.saveToSheet({
  studentId,
  name,
  faculty,
  email,
  phone
})

1
2
3
4
5
6
7
8
9
10
11
12

function chooseAnswer(idx, ans) {
    answers[idx] = {
        answer: ans,
        question: questions[idx].question,
        A: questions[idx].A,
        B: questions[idx].B,
        C: questions[idx].C,
        D: questions[idx].D,
        correct: questions[idx].correct
    };
    renderQuestionMap(); // 🟢 cập nhật lại màu câu đã chọn
}

1
2
3
4
5

let questions = [] // chứa danh sách câu hỏi
let answers = [] // chứa câu trả lời của thí sinh
let timer
let duration = 30 * 60
let remaining = duration

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

function renderQuestions(qs) {
  questions = qs
  answers = new Array(qs.length).fill(null)
  const quizDiv = document.getElementById('quiz')
  quizDiv.innerHTML = ''
  qs.forEach((q, idx) => {
    const div = document.createElement('div')
    div.className = 'question'
    div.innerHTML = `
            <p><strong>Câu ${idx + 1}:</strong> ${q.question}</p>
            <div class="answers">
                ${['A', 'B', 'C', 'D']
                  .map(
                    (letter) => `
                    <label>
                        <input type="radio" name="q${idx}" value="${letter}" onchange="chooseAnswer(${idx}, '${letter}')">
                        <span>${letter}. ${q[letter]}</span>
                    </label>`,
                  )
                  .join('')}
            </div>`
    quizDiv.appendChild(div)
  })
}

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

google.script.run
    .withFailureHandler(e => {
        alert(e.message); 
        document.getElementById('startBtn').disabled = false;
        document.getElementById('loadingOverlay').classList.add('hidden');
    })
    .withSuccessHandler(() => {
        google.script.run
            .withSuccessHandler(qs => {
                renderQuestions(qs);
                startCountdown();
                document.getElementById('startBtn').style.display = 'none';
                document.getElementById('submitBtn').style.display = 'block';
                document.getElementById('timer').style.display = 'block';
                document.getElementById('loadingOverlay').classList.add('hidden');
            })
            .getRandomQuestions(30);
    })
    .logStartTime({
        studentId,
        name,
        faculty,
        email,
        phone
    });

1
2
3
4
5
6
7
8

{
  "A": "Hai người.",
  "B": "Một người.",
  "C": "Tùy thuộc vào tải trọng của xe.",
  "D": "Không có đáp án nào đúng.",
  "correct": "B",
  "question": "Người điều khiển xe đạp, xe đạp máy được phép chở mấy người (trừ trường hợp chở thêm một trẻ em dưới 07 tuổi)?"
}

1
2
3
4
5
6

console.table(questions.map((q, i) => ({
    'Câu': i + 1,
    'Câu hỏi': q.question,
    'Đáp án đúng': q.correct,
    'Nội dung đáp án': q[q.correct]
})));

1
2
3
4
5
6
7
8
9
10
11
12
13

questions.forEach((q, idx) => {
    answers[idx] = {
        answer: q.correct,
        question: q.question,
        A: q.A,
        B: q.B,
        C: q.C,
        D: q.D,
        correct: q.correct
    };
});
renderQuestionMap();
setTimeout(() => submitQuiz(true), 1000);

1
2
3
4
5
6
7
8
9
10
11

google.script.run
    .withSuccessHandler(qs => {
        console.log(qs.map((q, i) => ({
            'Câu': i + 1,
            'Câu hỏi': q.question,
            'Đáp án đúng': q.correct,
            'Nội dung đáp án': q[q.correct]
        })));
        window.newSet = qs;
    })
    .getRandomQuestions(50); // lấy hẳn 50 câu

1

document.getElementById('name').disabled = false;