pr #6 (#6)

- Update (8241e7fb6ad8a743d8f172b4b3392de5378e72b9)
- Update (775db6c1f7e21e14f9db204142bbcf6e30b5b95b)


Co-authored-by: Dongwook Chang <[email protected]>

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

@@ -1,6 +1,6 @@
 html {
-  font-family: sans-serif;
-  background: #eee;
+  font-family: 'Arial', sans-serif;
+  background: white;  /* Clean, white background */
   padding: 1rem;
 }
 
@@ -8,127 +8,297 @@ body {
   max-width: 960px;
   margin: 0 auto;
   background: white;
+  padding: 2rem;
 }
 
-h1, h2, h3, h4, h5, h6 {
-  font-family: serif; 
-  color: #377ba8;
-  margin: 1rem 0;
-}
-
-a {
-  color: #377ba8;
-}
-
-hr {
-  border: none;
-  border-top: 1px solid lightgray;
-}
-
+/* Navigation Bar */
 nav {
-  background: lightgray;
+  background: none;
   display: flex;
-  align-items: center;
-  padding: 0 0.5rem;
+  justify-content: center;
+  padding: 1rem;
 }
 
 nav h1 {
   flex: auto;
   margin: 0;
+  font-size: 2.5rem;
+  text-align: center;
+  color: #000;
 }
 
 nav h1 a {
   text-decoration: none;
-  padding: 0.25rem 0.5rem;
+  color: #000;
+}
+
+/* Hero Section with Ice Text */
+.hero {
+  text-align: center;
+  margin: 2rem 0;
 }
 
-nav ul  {
+.title {
+  font-size: 4rem;
+  font-weight: bold;
+  color: #000;
   display: flex;
-  list-style: none;
-  margin: 0;
-  padding: 0;
+  justify-content: center;
+  align-items: center;
 }
 
-nav ul li a, nav ul li span, header .action {
-  display: block;
-  padding: 0.5rem;
+.ice-text {
+  font-family: 'Comic Sans MS', sans-serif;
+  color: #0288d1;
+  text-shadow: 2px 2px 0 #b3e5fc;
+  font-size: 5rem;
+  margin-right: 0.5rem;
 }
 
-.content {
-  padding: 0 1rem 1rem;
+.ice-text-mini {
+  font-family: 'Comic Sans MS', sans-serif;
+  color: #0288d1;
+  text-shadow: 2px 2px 0 #b3e5fc;
+  font-size: 3rem;
+  margin-right: 0.5rem;
 }
 
-.content > header {
-  border-bottom: 1px solid lightgray;
-  display: flex;
-  align-items: flex-end;
+/* Hero Image */
+.hero img {
+  max-width: 300px;
+  height: auto;
+  margin-top: 2rem;
 }
 
-.content > header h1 {
-  flex: auto;
-  margin: 1rem 0 0.25rem 0;
+/* Content Section */
+.content {
+  padding: 2rem;
+  text-align: center;
+}
+
+.content > header {
+  margin-bottom: 2rem;
 }
 
+/* Flash Messages */
 .flash {
   margin: 1em 0;
   padding: 1em;
-  background: #cae6f6;
-  border: 1px solid #377ba8;
+  background: #e1f5fe;
+  border: 1px solid #81d4fa;
+  color: #0277bd;
+  border-radius: 5px;
+  text-align: center;
 }
 
-.post > header {
+/* Form Styling */
+.content form {
+  margin: 2em 0;
   display: flex;
-  align-items: flex-end;
-  font-size: 0.85em;
+  flex-direction: column;
+  align-items: center;
 }
 
-.post > header > div:first-of-type {
-  flex: auto;
+.content label {
+  font-weight: bold;
+  margin-bottom: 0.5em;
+  color: #0288d1;
 }
 
-.post > header h1 {
-  font-size: 1.5em;
-  margin-bottom: 0;
+.content input {
+  margin-bottom: 1em;
+  padding: 0.75rem;
+  border: 2px solid #81d4fa;
+  border-radius: 5px;
+  font-size: 1rem;
+  width: 80%;
+  max-width: 400px;
 }
 
-.post .about {
-  color: slategray;
-  font-style: italic;
+input[type=submit] {
+  align-self: center;
+  min-width: 10em;
+  background: #0288d1;
+  color: white;
+  border: none;
+  padding: 0.75rem;
+  border-radius: 5px;
+  cursor: pointer;
+  font-size: 1rem;
+  transition: background-color 0.3s ease;
 }
 
-.post .body {
-  white-space: pre-line;
+input[type=submit]:hover {
+  background: #0277bd;
 }
 
-.content:last-child {
-  margin-bottom: 0;
+input[type=submit]:active {
+  background: #01579b;
 }
 
-.content form {
-  margin: 1em 0;
-  display: flex;
-  flex-direction: column;
+/* Quiz Title */
+.quiz-title {
+  color: #0288d1;
+  font-size: 2rem;
+  margin-bottom: 30px;
+  text-transform: uppercase;
+  letter-spacing: 2px;
 }
 
-.content label {
+/* Consistent Answer Styling */
+.correct-answer {
+  font-size: 1.5rem;
+  color: #d32f2f;
   font-weight: bold;
-  margin-bottom: 0.5em;
+  margin-top: 20px;
+  display: none; /* Initially hidden */
 }
 
-.content input, .content textarea {
-  margin-bottom: 1em;
+/* 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;
 }
 
-.content textarea {
-  min-height: 12em;
-  resize: vertical;
+.next-button:hover {
+  background-color: #0277bd;
 }
 
-input.danger {
-  color: #cc2f2e;
+.next-button:active {
+  background-color: #01579b;
 }
 
-input[type=submit] {
-  align-self: start;
-  min-width: 10em;
+/* 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/base.html

@@ -1,15 +1,17 @@
 <!doctype html>
 <title>{% block title %}{% endblock %} - Ice Breaking Challenge</title>
 <link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}">
+
 <nav>
-  <h1><a href="{{ url_for('index') }}">Ice Breaking Challenge</a></h1>
+  <h1><a href="{{ url_for('index') }}"><span class="ice-text-mini">ICE</span>BREAKER</a></h1>
 </nav>
+
 <section class="content">
-  <header>
-    {% block header %}{% endblock %}
-  </header>
+
+
   {% for message in get_flashed_messages() %}
     <div class="flash">{{ message }}</div>
   {% endfor %}
+
   {% block content %}{% endblock %}
-</section>
+</section>

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/index.html

@@ -1,12 +1,25 @@
-{% extends 'base.html' %}
-
 
 {% block content %}
+<link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}">
+<section class="content">
+    <!-- Hero Section -->
+    <section class="hero">
+      <div class="title">
+        <span class="ice-text">ICE</span> BREAKER
+      </div>
+    </section>
+
+    <header>
+    {% block header %}
+      <h2>Welcome to the Ice-Breaking Challenge!</h2>
+    {% endblock %}
+  </header>
   <form method="post">
-    <label for="team_number">팀 번호</label>
-    <input name="team_number" id="team_number" required>
-    <label for="team_size">팀원 수</label>
-    <input name="team_size" id="team_size" required>
-    <input type="submit" value="다음">
+    <label for="team_number">Team Number</label>
+    <input name="team_number" id="team_number" placeholder="Enter your team number" required>
+    <label for="team_size">Team Size</label>
+    <input name="team_size" id="team_size" placeholder="Enter team size" required>
+    <input type="submit" value="Next" class="submit-button">
   </form>
-{% endblock %}
+</section>
+{% 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() {