phiparth.github.io/further-quiz.html at main · phiparth/phiparth.github.io · GitHub

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
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  <title>Debate Trivia</title>
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-[#030317] text-white font-sans">

  <div class="max-w-3xl mx-auto pt-20 px-6">
    <h1 class="text-4xl font-bold mb-10 text-center">Debate Trivia</h1>

    <form id="triviaForm" class="space-y-8">

          <!-- Q1 -->
      <div class="p-6 border border-blue-500 rounded-md bg-[#0B0D3A]">
        <p class="font-bold text-lg mb-4">Q1. What is a rebuttal in a debate?</p>
        <div class="space-y-3 ml-4">
          <label class="flex items-center gap-3"><input type="radio" name="q1" value="A" class="accent-blue-400"> A. A joke to lighten the mood</label>
          <label class="flex items-center gap-3"><input type="radio" name="q1" value="B" class="accent-blue-400"> B. Your final conclusion</label>
          <label class="flex items-center gap-3"><input type="radio" name="q1" value="C" class="accent-blue-400"> C. A response to the other team’s arguments</label>
          <label class="flex items-center gap-3"><input type="radio" name="q1" value="D" class="accent-blue-400"> D. The name of your team</label>
        </div>
      </div>

      <!-- Q2 -->
      <div class="p-6 border border-blue-500 rounded-md bg-[#0B0D3A]">
        <p class="font-bold text-lg mb-4">Q2. Why is structure important in a speech?</p>
        <div class="space-y-3 ml-4">
          <label class="flex items-center gap-3"><input type="radio" name="q2" value="A" class="accent-blue-400"> A. It helps you speak faster</label>
          <label class="flex items-center gap-3"><input type="radio" name="q2" value="B" class="accent-blue-400"> B. It makes your speech easier to follow</label>
          <label class="flex items-center gap-3"><input type="radio" name="q2" value="C" class="accent-blue-400"> C. It shows your vocabulary</label>
          <label class="flex items-center gap-3"><input type="radio" name="q2" value="D" class="accent-blue-400"> D. It confuses the opponent</label>
        </div>
      </div>

      <!-- Q3 -->
      <div class="p-6 border border-blue-500 rounded-md bg-[#0B0D3A]">
        <p class="font-bold text-lg mb-4">Q3. Which of these is the correct order for a basic speech structure?</p>
        <div class="space-y-3 ml-4">
          <label class="flex items-center gap-3"><input type="radio" name="q3" value="A" class="accent-blue-400"> A. Example → Argument → Introduction</label>
          <label class="flex items-center gap-3"><input type="radio" name="q3" value="B" class="accent-blue-400"> B. Rebuttal → Joke → Shout</label>
          <label class="flex items-center gap-3"><input type="radio" name="q3" value="C" class="accent-blue-400"> C. Introduction → Argument → Conclusion</label>
          <label class="flex items-center gap-3"><input type="radio" name="q3" value="D" class="accent-blue-400"> D. Questions → Definition → Clapping</label>
        </div>
      </div>

      <!-- Q4 -->
      <div class="p-6 border border-blue-500 rounded-md bg-[#0B0D3A]">
        <p class="font-bold text-lg mb-4">Q4. Which of the following makes an argument stronger?</p>
        <div class="space-y-3 ml-4">
          <label class="flex items-center gap-3"><input type="radio" name="q4" value="A" class="accent-blue-400"> A. Repeating it loudly</label>
          <label class="flex items-center gap-3"><input type="radio" name="q4" value="B" class="accent-blue-400"> B. Using complicated words</label>
          <label class="flex items-center gap-3"><input type="radio" name="q4" value="C" class="accent-blue-400"> C. Clear point, explanation, and impact</label>
          <label class="flex items-center gap-3"><input type="radio" name="q4" value="D" class="accent-blue-400"> D. Telling a personal story only</label>
        </div>
      </div>

      <!-- Q5 -->
      <div class="p-6 border border-blue-500 rounded-md bg-[#0B0D3A]">
        <p class="font-bold text-lg mb-4">Q5. What is the goal of framing in a debate?</p>
        <div class="space-y-3 ml-4">
          <label class="flex items-center gap-3"><input type="radio" name="q5" value="A" class="accent-blue-400"> A. To confuse the judge</label>
          <label class="flex items-center gap-3"><input type="radio" name="q5" value="B" class="accent-blue-400"> B. To define what the debate is really about</label>
          <label class="flex items-center gap-3"><input type="radio" name="q5" value="C" class="accent-blue-400"> C. To introduce new arguments</label>
          <label class="flex items-center gap-3"><input type="radio" name="q5" value="D" class="accent-blue-400"> D. To agree with the opponent</label>
        </div>
      </div>

      <!-- Q6 -->
      <div class="p-6 border border-blue-500 rounded-md bg-[#0B0D3A]">
        <p class="font-bold text-lg mb-4">Q6. In a motion like “This House would ban beauty pageants”, which of the following is an example of framing?</p>
        <div class="space-y-3 ml-4">
          <label class="flex items-center gap-3"><input type="radio" name="q6" value="A" class="accent-blue-400"> A. Reading the motion loudly</label>
          <label class="flex items-center gap-3"><input type="radio" name="q6" value="B" class="accent-blue-400"> B. Calling pageants “fun”</label>
          <label class="flex items-center gap-3"><input type="radio" name="q6" value="C" class="accent-blue-400"> C. Saying the debate is about body image and social values</label>
          <label class="flex items-center gap-3"><input type="radio" name="q6" value="D" class="accent-blue-400"> D. Arguing only about costs</label>
        </div>
      </div>

      <!-- Q7 -->
      <div class="p-6 border border-blue-500 rounded-md bg-[#0B0D3A]">
        <p class="font-bold text-lg mb-4">Q7. What does “burden” mean in a debate?</p>
        <div class="space-y-3 ml-4">
          <label class="flex items-center gap-3"><input type="radio" name="q7" value="A" class="accent-blue-400"> A. The joke you make during rebuttals</label>
          <label class="flex items-center gap-3"><input type="radio" name="q7" value="B" class="accent-blue-400"> B. The thing your team must prove to win</label>
          <label class="flex items-center gap-3"><input type="radio" name="q7" value="C" class="accent-blue-400"> C. A random fact you include</label>
          <label class="flex items-center gap-3"><input type="radio" name="q7" value="D" class="accent-blue-400"> D. A speaker’s nickname</label>
        </div>
      </div>

      <!-- Q8 -->
      <div class="p-6 border border-blue-500 rounded-md bg-[#0B0D3A]">
        <p class="font-bold text-lg mb-4">Q8. Who are stakeholders in a debate?</p>
        <div class="space-y-3 ml-4">
          <label class="flex items-center gap-3"><input type="radio" name="q8" value="A" class="accent-blue-400"> A. People who are rich</label>
          <label class="flex items-center gap-3"><input type="radio" name="q8" value="B" class="accent-blue-400"> B. Only the speakers</label>
          <label class="flex items-center gap-3"><input type="radio" name="q8" value="C" class="accent-blue-400"> C. People or groups affected by the motion</label>
          <label class="flex items-center gap-3"><input type="radio" name="q8" value="D" class="accent-blue-400"> D. Judges only</label>
        </div>
      </div>

      <!-- Q9 -->
      <div class="p-6 border border-blue-500 rounded-md bg-[#0B0D3A]">
        <p class="font-bold text-lg mb-4">Q9. What does “weighing” mean in debate?</p>
        <div class="space-y-3 ml-4">
          <label class="flex items-center gap-3"><input type="radio" name="q9" value="A" class="accent-blue-400"> A. Calculating scores</label>
          <label class="flex items-center gap-3"><input type="radio" name="q9" value="B" class="accent-blue-400"> B. Comparing whose arguments matter more</label>
          <label class="flex items-center gap-3"><input type="radio" name="q9" value="C" class="accent-blue-400"> C. Deciding who spoke first</label>
          <label class="flex items-center gap-3"><input type="radio" name="q9" value="D" class="accent-blue-400"> D. Making fun of the other side</label>
        </div>
      </div>

      <!-- Q10 -->
      <div class="p-6 border border-blue-500 rounded-md bg-[#0B0D3A]">
        <p class="font-bold text-lg mb-4">Q10. What is a “squirrel” in debating?</p>
        <div class="space-y-3 ml-4">
          <label class="flex items-center gap-3"><input type="radio" name="q10" value="A" class="accent-blue-400"> A. A speaker who talks too fast</label>
          <label class="flex items-center gap-3"><input type="radio" name="q10" value="B" class="accent-blue-400"> B. A twisted or unfair definition of the motion</label>
          <label class="flex items-center gap-3"><input type="radio" name="q10" value="C" class="accent-blue-400"> C. A great rebuttal</label>
          <label class="flex items-center gap-3"><input type="radio" name="q10" value="D" class="accent-blue-400"> D. A backup argument</label>
        </div>
      </div>

      <!-- Submit Button -->
      <div class="flex justify-start mt-10">
        <button type="submit" class="bg-green-500 hover:bg-green-600 text-white font-bold py-2 px-6 rounded shadow-md">
          Submit Answers
        </button>
      </div>

    </form>
  </div>

  <script>
    document.getElementById("triviaForm").addEventListener("submit", async (e) => {
      e.preventDefault();
      const answers = [];

      for (let i = 1; i <= 10; i++) {
        const selected = document.querySelector(`input[name="q${i}"]:checked`);
        answers.push(selected ? selected.value : "");
      }

      if (answers.includes("")) {
        alert("Please answer all 10 questions before submitting.");
        return;
      }

      const token = localStorage.getItem("token");
      const quizId = "further-reading";

      try {
        const res = await fetch("http://localhost:3001/api/quiz/submit", {
          method: "POST",
          headers: {
            "Content-Type": "application/json",
            "Authorization": `Bearer ${token}`
          },
          body: JSON.stringify({ quizId, answers })
        });

        const data = await res.json();
        if (res.ok) {
          localStorage.setItem("quizScore", data.score);
          localStorage.setItem("quizCorrect", data.correct);
          localStorage.setItem("quizTotal", data.total);
          window.location.href = "furtherquizanalysis.html";
        } else {
          alert(data.message || "Submission failed");
        }
      } catch (err) {
        alert("Error submitting quiz.");
        console.error(err);
      }
    });
  </script>

</body>
</html>