From 3679c3cb354c454bea988d623ae281b48004d9b6 Mon Sep 17 00:00:00 2001
From: Raphael Jess Bacordio
 <91072520+raisondetre1207@users.noreply.github.com>
Date: Wed, 13 Mar 2024 18:41:20 +0800
Subject: [PATCH] Feat: Add quiz set name in quiz session; Move correct and
 wrong indicators to front of answer; Add y overflow on leaderboard

---
 .../IndividualParticipantAnswersReport.tsx    |  6 +--
 .../app/room/quiz/components/header.js        | 37 +++++++++++--------
 .../app/room/quiz/components/leaderboard.js   |  2 +-
 3 files changed, 26 insertions(+), 19 deletions(-)

diff --git a/WebApp/frontend/quiz-master/app/reports/components/pdfReports/IndividualParticipantAnswersReport.tsx b/WebApp/frontend/quiz-master/app/reports/components/pdfReports/IndividualParticipantAnswersReport.tsx
index 448b0529..7be3bb1c 100644
--- a/WebApp/frontend/quiz-master/app/reports/components/pdfReports/IndividualParticipantAnswersReport.tsx
+++ b/WebApp/frontend/quiz-master/app/reports/components/pdfReports/IndividualParticipantAnswersReport.tsx
@@ -138,13 +138,13 @@ function ParticipantAnswersTableRow({
                         { color: isParticipantCorrect ? "#17A14B" : "red" },
                     ]}
                 >
-                    {`${participantAnswer.answer} ${
-                        isParticipantCorrect ? "  ✅" : "  ❌"
+                    {`${isParticipantCorrect ? "✅  " : "❌  "} ${
+                        participantAnswer.answer
                     }`}
                 </Text>
             ) : (
                 <Text style={[styles.answerColumn, { color: "grey" }]}>
-                    {"<No answer submitted>"}
+                    {"❌  <No answer submitted>"}
                 </Text>
             )}
 
diff --git a/WebApp/frontend/quiz_session/app/room/quiz/components/header.js b/WebApp/frontend/quiz_session/app/room/quiz/components/header.js
index 640dd8a6..ffc28cd9 100644
--- a/WebApp/frontend/quiz_session/app/room/quiz/components/header.js
+++ b/WebApp/frontend/quiz_session/app/room/quiz/components/header.js
@@ -32,30 +32,37 @@ export default function Header() {
 
   return (
     <div className="px-5 pt-2 w-full bg-green-600 ">
-      <div className="flex flex-row  w-full justify-between">
-        <div className="flex justify-start">
+      <div className="flex flex-row  w-full justify-between items-center">
+        <div className="flex flex-1">
           <RoomPin />
         </div>
         <div className="flex justify-center">
-          <div className="flex-row flex bg-white items-center px-5 py-2 rounded-lg text-green_text ">
-            <div className="text-xl font-bold">
-              Question {metadata?.currentQuestionIndex}{" "}
+          <div className="justify-center items-center">
+            <p className="text-white text-sm mb-2">
+              {metadata?.currentSetName}
+            </p>
+            <div className="flex-row flex bg-white py-2 rounded-md text-green_text flex-2 justify-center items-center">
+              <div className="text-base font-bold">
+                Question {metadata?.currentQuestionIndex}{" "}
+              </div>
+              <div>&nbsp; out of {metadata?.totalNumberOfQuestions}</div>
             </div>
-            <div>&nbsp; out of {metadata?.totalNumberOfQuestions}</div>
           </div>
         </div>
-        <div
-          className={`flex flex-col rounded-md px-4 py-2 w-28 justify-center items-center ${
-            time > 10 ? " bg-green-700/50" : "bg-red-500"
-          }`}
-        >
-          <div className="text-white text-sm">Time left</div>
+        <div className="flex flex-1 justify-end">
           <div
-            className={`text-2xl font-bold text-white ${
-              time <= 5 && time > 0 ? "animate-ping" : ""
+            className={`flex flex-col rounded-md px-4 py-2 w-28 justify-center items-center ${
+              time > 10 ? " bg-green-700/50" : "bg-red-500"
             }`}
           >
-            {timeFormater(time)}
+            <div className="text-white text-sm">Time left</div>
+            <div
+              className={`text-2xl font-bold text-white ${
+                time <= 5 && time > 0 ? "animate-ping" : ""
+              }`}
+            >
+              {timeFormater(time)}
+            </div>
           </div>
         </div>
       </div>
diff --git a/WebApp/frontend/quiz_session/app/room/quiz/components/leaderboard.js b/WebApp/frontend/quiz_session/app/room/quiz/components/leaderboard.js
index dd221aa0..584cfc35 100644
--- a/WebApp/frontend/quiz_session/app/room/quiz/components/leaderboard.js
+++ b/WebApp/frontend/quiz_session/app/room/quiz/components/leaderboard.js
@@ -50,7 +50,7 @@ export default function Leaderboard({ leaderBoard }) {
 
   return (
     <div className="h-full w-full flex justify-center items-center ">
-      <AnimateSlideInFromBottom className="w-[90%] sm:w-[75%] md:w-[45%] lg:w-[50%] xl:w-1/3 h-3/4 max-w-[460px] bg-white  rounded-lg shadow-2xl shadow-green-600">
+      <AnimateSlideInFromBottom className="w-[90%] sm:w-[75%] md:w-[45%] lg:w-[50%] xl:w-1/3 h-3/4 max-w-[460px] bg-white  rounded-lg shadow-2xl shadow-green-600 overflow-y-scroll">
         <div className="p-5 overflow-auto space-y-5">
           <div className="flex flex-row justify-between">
             <div className="font-bold">Leaderboard</div>