Update

ice_breaking_challenge/background_task.py

@@ -13,7 +13,7 @@ def background_task(sid, qna: pd.DataFrame, team_size: int):
     import time
     start_time = time.time()
 
-    global quiz_results
+    global quiz_results, quiz_generated
     quiz_generated[sid] = False
     generated_quizzes = generate_quiz(qna, team_size)
     quiz_results[sid] = generated_quizzes
@@ -81,7 +81,10 @@ def generate_quiz(data: pd.DataFrame, team_size: int):
         print("==========================================")
 
         question_generated = lines[0]
-        multiple_choice_generated = lines[1]
+
+        tokens = re.split(r'\d+\.\s*', lines[1])
+        multiple_choice_generated = [token.strip() for token in tokens if token]
+
         answer_generated = lines[2]
 
         print(question_generated, multiple_choice_generated, answer_generated)

ice_breaking_challenge/qr.py

@@ -39,7 +39,6 @@ def qr() -> None:
                 import time
                 Thread(target=background_task.background_task, args=(session.sid, qna, team_size)).start()
 
-
                 # import time
                 # time.sleep(100)
                 return redirect(url_for("introduction.introduction"))

ice_breaking_challenge/quiz.py

@@ -1,7 +1,7 @@
 from flask import Blueprint, render_template, session
-from flask import request, redirect, url_for
+from flask import redirect, url_for, session
 
-from ice_breaking_challenge import quiz_results
+from ice_breaking_challenge import quiz_generated, quiz_results
 
 bp = Blueprint("quiz", __name__, url_prefix="/quiz")
 
@@ -25,4 +25,8 @@ def quiz():
 
 @bp.route("/finish", methods=["GET"])
 def finish():
+    global quiz_generated, quiz_results
+    session_id = session.sid
+    del quiz_generated[session_id]
+    del quiz_results[session_id]
     return render_template("finish.html")

ice_breaking_challenge/static/style.css

@@ -134,4 +134,171 @@ input[type=submit]:hover {
 
 input[type=submit]:active {
   background: #01579b;
-}
+}
+
+/* Quiz Title */
+.quiz-title {
+  color: #0288d1;
+  font-size: 2rem;
+  margin-bottom: 30px;
+  text-transform: uppercase;
+  letter-spacing: 2px;
+}
+
+/* Consistent Answer Styling */
+.correct-answer {
+  font-size: 1.5rem;
+  color: #d32f2f;
+  font-weight: bold;
+  margin-top: 20px;
+  display: none; /* Initially hidden */
+}
+
+/* Choices Styling */
+.choices {
+  font-size: 1.3rem;
+  color: #333;
+  margin-bottom: 30px;
+  list-style-type: none;
+  padding: 0;
+  line-height: 1.8;
+}
+
+
+
+/* Submit button for the next quiz */
+.next-button {
+  background-color: #0288d1;
+  color: white;
+  font-size: 1rem;
+  cursor: pointer;
+  border-radius: 5px;
+  padding: 10px 20px;
+  border: none;
+  transition: background-color 0.3s ease;
+}
+
+.next-button:hover {
+  background-color: #0277bd;
+}
+
+.next-button:active {
+  background-color: #01579b;
+}
+
+/* Container for the quiz */
+.quiz-container {
+  max-width: 600px;
+  margin: 0 auto;
+  padding: 20px;
+  background-color: #f5f5f5;
+  border-radius: 10px;
+  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
+  text-align: center;
+}
+
+/* Title styling */
+.quiz-title {
+  color: #0288d1;
+  margin-bottom: 20px;
+}
+
+/* Host section aligned right */
+.quiz-host-container {
+  text-align: right;
+  margin-bottom: 20px;
+}
+
+.quiz-host {
+  font-weight: bold;
+  color: #333;
+}
+
+.quiz-host-name {
+  color: #2e7d32;
+}
+
+/* Question section aligned left */
+.quiz-question-container {
+  text-align: left;
+  margin-bottom: 20px;
+}
+
+.quiz-question {
+  font-weight: bold;
+  color: #003285;
+  font-size: 1.7rem;
+}
+
+/* Choices with proper alignment */
+.choices {
+  text-align: left;
+  margin-bottom: 30px;
+}
+
+/* Consistent Answer Styling */
+.correct-answer {
+  font-size: 1.5rem;
+  color: #d32f2f;
+  font-weight: bold;
+  margin-top: 20px;
+  display: none;
+}
+
+/* Show Answer button - blue color theme */
+.answer-button {
+  background-color: #003285;
+  color: white;
+  padding: 12px 24px;
+  font-size: 1.2rem;
+  border: none;
+  border-radius: 8px;
+  cursor: pointer;
+  font-weight: bold;
+  text-transform: uppercase;
+  transition: background-color 0.3s ease, transform 0.3s ease;
+  margin-bottom: 30px;
+}
+
+.answer-button:hover {
+  background-color: #00286A;
+  transform: scale(1.05);
+}
+
+.answer-button:active {
+  background-color: #00286A;
+  transform: scale(1.05);
+}
+
+/* Submit button for the next quiz */
+.next-button {
+  background-color: #0288d1;
+  color: white;
+  font-size: 1rem;
+  cursor: pointer;
+  border-radius: 5px;
+  padding: 10px 20px;
+  border: none;
+  transition: background-color 0.3s ease;
+}
+
+.next-button:hover {
+  background-color: #0277bd;
+}
+
+.next-button:active {
+  background-color: #01579b;
+}
+
+/* Styling for the instruction text */
+#instruction {
+  font-size: 1.5rem;
+  margin-bottom: 10px;
+  text-align: center;
+}
+
+#topic {
+  font-size: 2rem;
+  margin-top: 10px;
+  text-align: center;
+}

ice_breaking_challenge/templates/finish.html

@@ -1,7 +1,9 @@
 {% extends 'base.html' %}
 
 {% block content %}
-  <h1>퀴즈가 끝났습니다!</h1>
-  <p>즐거우셨나요? 많이 친해지셨나요? 감사합니다!</p>
-  <p>참여해주셔서 감사합니다. 앞으로도 좋은 시간 되세요!</p>
+    <div class="quiz-container">
+  <h1 id="topic">퀴즈가 끝났습니다!</h1>
+  <p id="instruction">즐거우셨나요? 많이 친해지셨나요?</p>
+  <p id="instruction">참여해주셔서 감사합니다. 앞으로도 좋은 시간 되세요!</p>
+    </div>
 {% endblock %}

ice_breaking_challenge/templates/introduction.html

@@ -1,7 +1,7 @@
 {% extends 'base.html' %}
 
 {% block content %}
-  <div style="text-align: center; margin-top: 20px;">
+    <div class="quiz-container" style="text-align: center; margin-top: 20px;">
     <h2 style="font-family: 'Montserrat', sans-serif; font-weight: 700; color: #2c3e50;">자기소개 하는 시간을 가져 보세요</h2>
     <p style="font-family: 'Montserrat', sans-serif; color: #7f8c8d;">팀원들과 함께 간단한 자기소개를 해보세요!</p>
     <form method="post" style="margin-top: 20px;">

ice_breaking_challenge/templates/quiz.html

@@ -1,33 +1,50 @@
 {% extends 'base.html' %}
 
 {% block content %}
-  <h1>퀴즈 생성 결과</h1>
-
-  {% if quiz %}
-    <ul>
-          <h2>문제 주인: {{ quiz[0] }}</h2> <!-- 이름 부분 -->
-          <h3>질문: {{ quiz[1] }}</h3> <!-- 질문 부분 -->
-          <ul>
-            {{ quiz[2] }} <!-- 4지선다 보기 -->
-          </ul>
-          <button onclick="showAnswer()">정답 보기</button>
-          <p id="answer" style="display: none;">정답: {{ quiz[3] }}</p> <!-- 정답 -->
-    </ul>
-  {% else %}
-    <p>퀴즈가 없습니다. 다시 시도해 주세요.</p>
-  {% endif %}
+  <div class="quiz-container">
+    <h1 class="quiz-title">Quiz Results</h1>
+
+    {% if quiz %}
+      <div class="quiz-content">
+        <!-- Display quiz host's name -->
+        <div class="quiz-host-container">
+          <span class="quiz-host">Host: {{ quiz[0] }}</span>
+        </div>
+
+        <!-- Display the question -->
+        <div class="quiz-question-container">
+          <span class="quiz-question">{{ quiz[1] }}</span>
+        </div>
+
+        <!-- Display quiz options as it is -->
+        <ul class="choices">
+            {% for choice in quiz[2] %}
+            <li>{{ loop.index }}. {{ choice }}</li>
+            {% endfor %}
+        </ul>
+
+        <!-- Show answer button that disappears after click -->
+        <button class="answer-button" onclick="showAnswer()">Show Answer</button>
+
+        <!-- Correct answer, initially hidden -->
+        <p id="answer" style="display: none;" class="correct-answer">Correct Answer: {{ quiz[3] }}</p>
+      </div>
+    {% else %}
+      <p>No quiz available. Please try again.</p>
+    {% endif %}
+
+    <!-- Button to move to the next quiz -->
     <form method="post" style="margin-top: 20px;">
-      <input type="submit" value="다음" style="padding: 10px 20px; font-size: 16px; cursor: pointer; border-radius: 5px; border: none; background-color: #2980b9; color: white;">
+      <input type="submit" value="Next" class="next-button">
     </form>
+  </div>
 
   <script>
     function showAnswer() {
-      const answer = document.getElementById(`answer`);
-      if (answer.style.display === "none") {
-        answer.style.display = "block";
-      } else {
-        answer.style.display = "none";
-      }
+      const answer = document.getElementById('answer');
+      const button = document.querySelector('.answer-button');
+      answer.style.display = "block";
+      button.style.display = "none"; // Hide the button after clicking
     }
   </script>
 {% endblock %}

ice_breaking_challenge/templates/topic.html

@@ -1,8 +1,11 @@
 {% extends 'base.html' %}
 
 {% block content %}
-  <h1 id="topic">{{ topic }}</h1>  <!-- 서버에서 전달한 주제를 바로 표시 -->
+    <div class="quiz-container">
+    <h1 id=>다음을 주제로 생각을 공유해보세요!</h1>
 
+  <p id="instruction" style="color: #262a2a;">{{ topic }}</p>  <!-- 서버에서 전달한 주제를 바로 표시 -->
+    </div>
   <script>
     // 20초마다 페이지 새로고침
     setInterval(function() {