From 0a3ac9612d50f6a8031e6c6f753d4f5dc1299692 Mon Sep 17 00:00:00 2001
From: xerxesFOSoftware <xrxsndng@gmail.com>
Date: Fri, 15 Mar 2024 20:11:17 +0800
Subject: [PATCH 1/3] Hide question details during buffer time

---
 WebApp/.env                                   |   2 +-
 .../room/quiz/components/mulitpleChoice.js    |  58 ++---
 .../app/room/quiz/components/question.js      |  22 +-
 .../app/room/quiz/components/trueOrFalse.js   | 199 +++++++++---------
 .../app/room/quiz/components/typeAnswer.js    | 136 ++++++------
 package-lock.json                             |   6 +
 6 files changed, 228 insertions(+), 195 deletions(-)
 create mode 100644 package-lock.json

diff --git a/WebApp/.env b/WebApp/.env
index 694bb0dd..28050308 100644
--- a/WebApp/.env
+++ b/WebApp/.env
@@ -8,7 +8,7 @@ BACKEND_QUIZ_CONN_STR=Server=mssql;Database=QuizMasterQuiz;Trusted_Connection=Fa
 BACKEND_SESSION_CONN_STR=Server=mssql;Database=QuizMasterSession;Trusted_Connection=False;TrustServerCertificate=True;User Id=sa;Password=MsSql123
 
 # GATEWAY
-GATEWAY_CORS=http://localhost:3000;http://localhost:3001;http://localhost:5173;https://localhost:7081;
+GATEWAY_CORS=http://localhost:3000;http://localhost:3001;http://localhost:5173;https://localhost:7081;https://polliwog-measured-bulldog.ngrok-free.app
 
 # SESSION SETTINGS
 SHOW_ANSWER_AFTER_QUESTION_DELAY=10
diff --git a/WebApp/frontend/quiz_session/app/room/quiz/components/mulitpleChoice.js b/WebApp/frontend/quiz_session/app/room/quiz/components/mulitpleChoice.js
index 41a8d549..58f8f13e 100644
--- a/WebApp/frontend/quiz_session/app/room/quiz/components/mulitpleChoice.js
+++ b/WebApp/frontend/quiz_session/app/room/quiz/components/mulitpleChoice.js
@@ -8,7 +8,7 @@ import QuestionImage from "./questionImage";
 import Participants from "../../components/participants";
 import useUserTokenData from "@/app/util/useUserTokenData";
 import { useScreenshot } from "use-react-screenshot";
-import { useAnswer } from "@/app/util/store";
+import { useAnswer, useMetaData } from "@/app/util/store";
 import { notifications } from "@mantine/notifications";
 
 export default React.forwardRef(MulitpleChoice);
@@ -24,6 +24,9 @@ function MulitpleChoice({ question, connectionId }, ref) {
   const [previousStatement, setPreviousStatement] = useState(null);
   const { answer } = useAnswer();
 
+  /* Shows/hides question details during buffer time */
+  const showDetails = question?.remainingTime <= question?.question?.qTime;
+
   const [image, takeScreenShot] = useScreenshot({
     type: "image/jpeg",
     quality: 1.0,
@@ -124,31 +127,34 @@ function MulitpleChoice({ question, connectionId }, ref) {
           </div>
         </div>
       )}
-      <div
-        className={`w-full grid grid-cols-2 place-content-center gap-3 mt-8 ${
-          answer ? "opacity-50" : ""
-        }`}
-      >
-        {question?.details.map((choices, index) => (
-          <div
-            className={`${
-              pick === choices.qDetailDesc
-                ? "bg-dark_green text-white"
-                : "bg-white text-dark_green"
-            } flex justify-center items-center text-xl font-bold px-4 py-4 rounded-md shadow-lg ${
-              isSubmitted ? "cursor-not-allowed" : "cursor-pointer"
-            }`}
-            key={index}
-            onClick={() => {
-              if (isAdmin) return;
-              if  (isSubmitted) return;
-              handlePick(choices.qDetailDesc);
-            }}
-          >
-            {choices.qDetailDesc}
-          </div>
-        ))}
-      </div>
+
+      {showDetails && (
+        <div
+          className={`w-full grid grid-cols-2 place-content-center gap-3 mt-8 ${
+            answer ? "opacity-50" : ""
+          }`}
+        >
+          {question?.details.map((choices, index) => (
+            <div
+              className={`${
+                pick === choices.qDetailDesc
+                  ? "bg-dark_green text-white"
+                  : "bg-white text-dark_green"
+              } flex justify-center items-center text-xl font-bold px-4 py-4 rounded-md shadow-lg ${
+                isSubmitted ? "cursor-not-allowed" : "cursor-pointer"
+              }`}
+              key={index}
+              onClick={() => {
+                if (isAdmin) return;
+                if (isSubmitted) return;
+                handlePick(choices.qDetailDesc);
+              }}
+            >
+              {choices.qDetailDesc}
+            </div>
+          ))}
+        </div>
+      )}
       {!isAdmin && (
         <div
           className={`w-full justify-center flex mt-8 ${
diff --git a/WebApp/frontend/quiz_session/app/room/quiz/components/question.js b/WebApp/frontend/quiz_session/app/room/quiz/components/question.js
index 25862cd8..d335ed25 100644
--- a/WebApp/frontend/quiz_session/app/room/quiz/components/question.js
+++ b/WebApp/frontend/quiz_session/app/room/quiz/components/question.js
@@ -32,7 +32,7 @@ export default function Question() {
   const [isFinished, setIsFinished] = useState(false);
   const [leaderBoard, setLeaderBoard] = useState([]);
   const { connectionId } = useConnectionId();
-  const {answer} = useAnswer();
+  const { answer } = useAnswer();
   const { isAdmin } = useUserTokenData();
 
   const { push } = useRouter();
@@ -44,7 +44,7 @@ export default function Question() {
   const handleCloseLeaderboard = () => {
     setResetLeader();
     setIsShowLeader(false);
-  }
+  };
 
   useEffect(() => {
     if (leader.length > 0) {
@@ -63,7 +63,12 @@ export default function Question() {
   }, [question, leader, isStop]);
 
   if (isShowLeader && !isFinished) {
-    return <Interval leaderBoard={leaderBoard} handleCloseLeaderboard={handleCloseLeaderboard} />;
+    return (
+      <Interval
+        leaderBoard={leaderBoard}
+        handleCloseLeaderboard={handleCloseLeaderboard}
+      />
+    );
   } else if (isFinished) {
     return (
       <>
@@ -73,12 +78,19 @@ export default function Question() {
           <div></div> {/* Add an empty div to push the button to the right */}
           <Button
             onClick={() =>
-              goBackToLoby(params, connection, push, setResetLeader, setStart, isAdmin)
+              goBackToLoby(
+                params,
+                connection,
+                push,
+                setResetLeader,
+                setStart,
+                isAdmin
+              )
             }
             className={"w-auto bg-[#FF6633] p-2"}
             color="yellow"
           >
-            { isAdmin ? "Go Back to Dashboard":"Leave Room"}
+            {isAdmin ? "Go Back to Dashboard" : "Leave Room"}
           </Button>
         </div>
       </>
diff --git a/WebApp/frontend/quiz_session/app/room/quiz/components/trueOrFalse.js b/WebApp/frontend/quiz_session/app/room/quiz/components/trueOrFalse.js
index 08a2811d..3390ba80 100644
--- a/WebApp/frontend/quiz_session/app/room/quiz/components/trueOrFalse.js
+++ b/WebApp/frontend/quiz_session/app/room/quiz/components/trueOrFalse.js
@@ -28,6 +28,8 @@ function TrueOrFalse({ question, connectionId }, ref) {
     type: "image/jpeg",
     quality: 1.0,
   });
+  /* Shows/hides question details during buffer time */
+  const showDetails = question?.remainingTime <= question?.question?.qTime;
 
   const submitScreenshot = (id, connectionId) =>
     takeScreenShot(ref.current).then((image) =>
@@ -95,109 +97,112 @@ function TrueOrFalse({ question, connectionId }, ref) {
         </div>
         {hasImage && <QuestionImage imageUrl={imageUrl} open={open} />}
       </div>
-      {isAdmin ? (
-        <div className="w-full place-content-center">
-          {ANSWER && (
-            <div className="py-8 px-[20%]">
-              <p className="text-white">Correct answer is: </p>
-              <div className="border-2 bg-white text-dark_green flex justify-center items-center m-5 text-xl font-bold p-3 shadow-lg">
-                <p className="px-4">{ANSWER}</p>
-                <CheckIcon width={20} height={20} />
+
+      {isAdmin
+        ? showDetails && (
+            <div className="w-full place-content-center">
+              {ANSWER && (
+                <div className="py-8 px-[20%]">
+                  <p className="text-white">Correct answer is: </p>
+                  <div className="border-2 bg-white text-dark_green flex justify-center items-center m-5 text-xl font-bold p-3 shadow-lg">
+                    <p className="px-4">{ANSWER}</p>
+                    <CheckIcon width={20} height={20} />
+                  </div>
+                </div>
+              )}
+              <div
+                className={`{w-full grid grid-cols-2 place-content-center gap-3 mt-8 ${
+                  ANSWER ? "opacity-50" : ""
+                }`}
+              >
+                <div
+                  className={` ${
+                    pick === "true"
+                      ? "bg-dark_green text-white"
+                      : "bg-white text-dark_green"
+                  } flex justify-center items-center text-xl font-bold px-4 py-4 rounded-md shadow-lg ${
+                    isSubmitted ? "cursor-not-allowed" : "cursor-pointer"
+                  }`}
+                  onClick={() => {
+                    if (isAdmin) return;
+                    if (isSubmitted) return;
+                    handlePick("true");
+                  }}
+                >
+                  True
+                </div>
+                <div
+                  className={` ${
+                    pick === "false"
+                      ? "bg-dark_green text-white"
+                      : "bg-white text-dark_green"
+                  } flex justify-center items-center text-xl font-bold px-4 py-4 rounded-md shadow-lg ${
+                    isSubmitted ? "cursor-not-allowed" : "cursor-pointer"
+                  }`}
+                  onClick={() => {
+                    if (isAdmin) return;
+                    if (isSubmitted) return;
+                    handlePick("false");
+                  }}
+                >
+                  False
+                </div>
               </div>
             </div>
-          )}
-          <div
-            className={`{w-full grid grid-cols-2 place-content-center gap-3 mt-8 ${
-              ANSWER ? "opacity-50" : ""
-            }`}
-          >
-            <div
-              className={` ${
-                pick === "true"
-                  ? "bg-dark_green text-white"
-                  : "bg-white text-dark_green"
-              } flex justify-center items-center text-xl font-bold px-4 py-4 rounded-md shadow-lg ${
-                isSubmitted ? "cursor-not-allowed" : "cursor-pointer"
-              }`}
-              onClick={() => {
-                if (isAdmin) return;
-                if  (isSubmitted) return;
-                handlePick("true");
-              }}
-            >
-              True
-            </div>
-            <div
-              className={` ${
-                pick === "false"
-                  ? "bg-dark_green text-white"
-                  : "bg-white text-dark_green"
-              } flex justify-center items-center text-xl font-bold px-4 py-4 rounded-md shadow-lg ${
-                isSubmitted ? "cursor-not-allowed" : "cursor-pointer"
-              }`}
-              onClick={() => {
-                if (isAdmin) return;
-                if  (isSubmitted) return;
-                handlePick("false");
-              }}
-            >
-              False
-            </div>
-          </div>
-        </div>
-      ) : (
-        <div className="w-full place-content-center">
-          {ANSWER && (
-            <div className="py-8 px-[20%] col-span-2">
-              <p className="text-white">Correct answer is: </p>
-              <div className="border-2 bg-white text-dark_green flex justify-center items-center m-5 text-xl font-bold p-3 shadow-lg">
-                <p className="px-4">{ANSWER}</p>
-                <CheckIcon width={20} height={20} />
+          )
+        : showDetails && (
+            <div className="w-full place-content-center">
+              {ANSWER && (
+                <div className="py-8 px-[20%] col-span-2">
+                  <p className="text-white">Correct answer is: </p>
+                  <div className="border-2 bg-white text-dark_green flex justify-center items-center m-5 text-xl font-bold p-3 shadow-lg">
+                    <p className="px-4">{ANSWER}</p>
+                    <CheckIcon width={20} height={20} />
+                  </div>
+                </div>
+              )}
+              <div
+                className={`{w-screen grid grid-cols-2 place-content-center gap-3 mt-8 ${
+                  ANSWER ? "opacity-50" : ""
+                }`}
+              >
+                <div
+                  className={` ${
+                    pick === "true"
+                      ? "bg-dark_green text-white"
+                      : "bg-white text-dark_green"
+                  } flex justify-center items-center text-xl font-bold px-4 py-4 rounded-md shadow-lg ${
+                    isSubmitted ? "cursor-not-allowed" : "cursor-pointer"
+                  }`}
+                  onClick={() => {
+                    if (isAdmin) return;
+                    if (isSubmitted) return;
+                    handlePick("true");
+                  }}
+                >
+                  True
+                </div>
+                <div
+                  className={` ${
+                    pick === "false"
+                      ? "bg-dark_green text-white"
+                      : "bg-white text-dark_green"
+                  } flex justify-center items-center text-xl font-bold px-4 py-4 rounded-md shadow-lg ${
+                    isSubmitted ? "cursor-not-allowed" : "cursor-pointer"
+                  }`}
+                  onClick={() => {
+                    if (isAdmin) return;
+                    if (isSubmitted) return;
+                    handlePick("false");
+                  }}
+                >
+                  False
+                </div>
               </div>
             </div>
           )}
-          <div
-            className={`{w-screen grid grid-cols-2 place-content-center gap-3 mt-8 ${
-              ANSWER ? "opacity-50" : ""
-            }`}
-          >
-            <div
-              className={` ${
-                pick === "true"
-                  ? "bg-dark_green text-white"
-                  : "bg-white text-dark_green"
-              } flex justify-center items-center text-xl font-bold px-4 py-4 rounded-md shadow-lg ${
-                isSubmitted ? "cursor-not-allowed" : "cursor-pointer"
-              }`}
-              onClick={() => {
-                if (isAdmin) return;
-                if  (isSubmitted) return;
-                handlePick("true");
-              }}
-            >
-              True
-            </div>
-            <div
-              className={` ${
-                pick === "false"
-                  ? "bg-dark_green text-white"
-                  : "bg-white text-dark_green"
-              } flex justify-center items-center text-xl font-bold px-4 py-4 rounded-md shadow-lg ${
-                isSubmitted ? "cursor-not-allowed" : "cursor-pointer"
-              }`}
-              onClick={() => {
-                if (isAdmin) return;
-                if  (isSubmitted) return;
-                handlePick("false");
-              }}
-            >
-              False
-            </div>
-          </div>
-        </div>
-      )}
 
-      {!isAdmin && (
+      {!isAdmin && showDetails && (
         <div
           className={`w-full justify-center flex mt-8 ${
             ANSWER ? "opacity-50" : ""
diff --git a/WebApp/frontend/quiz_session/app/room/quiz/components/typeAnswer.js b/WebApp/frontend/quiz_session/app/room/quiz/components/typeAnswer.js
index 3441920d..13810349 100644
--- a/WebApp/frontend/quiz_session/app/room/quiz/components/typeAnswer.js
+++ b/WebApp/frontend/quiz_session/app/room/quiz/components/typeAnswer.js
@@ -28,6 +28,8 @@ function TypeAnswer({ question, connectionId, answer: ANSWER }, ref) {
     type: "image/jpeg",
     quality: 1.0,
   });
+  /* Shows/hides question details during buffer time */
+  const showDetails = question?.remainingTime <= question?.question?.qTime;
 
   const submitScreenshot = (id, connectionId) =>
     takeScreenShot(ref.current).then((image) =>
@@ -95,75 +97,77 @@ function TypeAnswer({ question, connectionId, answer: ANSWER }, ref) {
         </div>
         {hasImage && <QuestionImage imageUrl={imageUrl} open={open} />}
       </div>
-      {isAdmin ? (
-        <div className="py-8 px-[20%] w-full">
-          {ANSWER ? (
-            <div className="py-8 px-[20%]">
-              <p className="text-white">Correct answer is: </p>
-              <div className="border-2 bg-white text-dark_green flex justify-center items-center m-5 text-xl font-bold p-3 shadow-lg rounded-md">
-                <p className="px-4">{ANSWER}</p>
-                <CheckIcon width={20} height={20} />
-              </div>
-            </div>
-          ) : (
-            <div className=" flex w-full mt-8 items-center justify-center">
-              <div className="border-2 border-white bg-green-700 rounded-md flex items-center  px-6 py-3">
-                <div className="animate-pulse w-3">
-                  <span className="text-2xl text-white">|</span>
-                </div>
-                <p className="text-white opacity-50 w-fit text-base font-regular">
-                  Type your answers on the text area
-                </p>
-              </div>
-            </div>
-          )}
-          <Participants excludeAdmins={true} includeLoaderModal={false} />
-        </div>
-      ) : (
-        <>
-          {ANSWER && (
+      {isAdmin
+        ? showDetails && (
             <div className="py-8 px-[20%] w-full">
-              <p className="text-white">Correct answer is: </p>
-              <div className="border-2 bg-white text-dark_green flex justify-center items-center m-5 text-xl font-bold p-3 shadow-lg rounded-md">
-                <p className="px-4">{ANSWER}</p>
-                <CheckIcon width={20} height={20} />
-              </div>
-            </div>
-          )}
-          {!isAdmin && (
-            <div className="flex flex-row w-1/2 space-x-2">
-              <div className="w-3/4">
-                <Input
-                  id="input-typeAnswer"
-                  placeholder="Type your Answer"
-                  size="xl"
-                  onChange={(e) => {
-                    setAnswer(e.target.value);
-                  }}
-                  disabled={isSubmitted || ANSWER}
-                  value={answer ?? (ANSWER ? "" : "")}
-                />
-              </div>
-              <div className="w-1/4">
-                <Button
-                  fullWidth
-                  color={"yellow"}
-                  size="xl"
-                  onClick={handleSubmit}
-                  disabled={isSubmitted || ANSWER}
-                  className={`shadow-lg ${
-                    isSubmitted
-                      ? "bg-[#FFAB3E] text-[##FFF9DF]"
-                      : "bg-[#FF6633]"
-                  }`}
-                >
-                  Submit
-                </Button>
-              </div>
+              {ANSWER ? (
+                <div className="py-8 px-[20%]">
+                  <p className="text-white">Correct answer is: </p>
+                  <div className="border-2 bg-white text-dark_green flex justify-center items-center m-5 text-xl font-bold p-3 shadow-lg rounded-md">
+                    <p className="px-4">{ANSWER}</p>
+                    <CheckIcon width={20} height={20} />
+                  </div>
+                </div>
+              ) : (
+                <div className=" flex w-full mt-8 items-center justify-center">
+                  <div className="border-2 border-white bg-green-700 rounded-md flex items-center  px-6 py-3">
+                    <div className="animate-pulse w-3">
+                      <span className="text-2xl text-white">|</span>
+                    </div>
+                    <p className="text-white opacity-50 w-fit text-base font-regular">
+                      Type your answers on the text area
+                    </p>
+                  </div>
+                </div>
+              )}
+              <Participants excludeAdmins={true} includeLoaderModal={false} />
             </div>
+          )
+        : showDetails && (
+            <>
+              {ANSWER && (
+                <div className="py-8 px-[20%] w-full">
+                  <p className="text-white">Correct answer is: </p>
+                  <div className="border-2 bg-white text-dark_green flex justify-center items-center m-5 text-xl font-bold p-3 shadow-lg rounded-md">
+                    <p className="px-4">{ANSWER}</p>
+                    <CheckIcon width={20} height={20} />
+                  </div>
+                </div>
+              )}
+              {!isAdmin && (
+                <div className="flex flex-row w-1/2 space-x-2">
+                  <div className="w-3/4">
+                    <Input
+                      id="input-typeAnswer"
+                      placeholder="Type your Answer"
+                      size="xl"
+                      onChange={(e) => {
+                        setAnswer(e.target.value);
+                      }}
+                      disabled={isSubmitted || ANSWER}
+                      value={answer ?? (ANSWER ? "" : "")}
+                    />
+                  </div>
+                  <div className="w-1/4">
+                    <Button
+                      fullWidth
+                      color={"yellow"}
+                      size="xl"
+                      onClick={handleSubmit}
+                      disabled={isSubmitted || ANSWER}
+                      className={`shadow-lg ${
+                        isSubmitted
+                          ? "bg-[#FFAB3E] text-[##FFF9DF]"
+                          : "bg-[#FF6633]"
+                      }`}
+                    >
+                      Submit
+                    </Button>
+                  </div>
+                </div>
+              )}
+            </>
           )}
-        </>
-      )}
 
       <div className=" w-full justify-center flex">
         <div className=" w-1/2 flex justify-center text-white text-2xl font-bold rounded-lg"></div>
diff --git a/package-lock.json b/package-lock.json
new file mode 100644
index 00000000..aa919b87
--- /dev/null
+++ b/package-lock.json
@@ -0,0 +1,6 @@
+{
+  "name": "QuizMaster",
+  "lockfileVersion": 3,
+  "requires": true,
+  "packages": {}
+}

From ea0f26bdfa2450c60e9d8fda0adbbb30cf097b72 Mon Sep 17 00:00:00 2001
From: xerxesFOSoftware <xrxsndng@gmail.com>
Date: Fri, 15 Mar 2024 20:19:10 +0800
Subject: [PATCH 2/3] Hide timer during buffer time

---
 .../quiz_session/app/room/quiz/components/header.js         | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

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 513c4dba..d98822eb 100644
--- a/WebApp/frontend/quiz_session/app/room/quiz/components/header.js
+++ b/WebApp/frontend/quiz_session/app/room/quiz/components/header.js
@@ -16,6 +16,8 @@ export default function Header() {
   const [isMute, setIsMute] = useState();
   const [collapsedVolume, setCollapsedVolumne] = useState(true);
   const [volume, setVolume] = useState(100);
+  /* Shows/hides question details during buffer time */
+  const showDetails = question?.remainingTime <= question?.question?.qTime;
 
   const [play, { stop }] = useSound(
     "/audio/quiz_master-ten-seconds-count-down.mp3",
@@ -64,7 +66,9 @@ export default function Header() {
         </div>
         <div className="flex flex-1 justify-end">
           <div
-            className={`flex flex-col rounded-md px-4 py-2 w-28 justify-center items-center ${
+            className={`${
+              showDetails ? `flex` : `hidden`
+            } flex-col rounded-md px-4 py-2 w-28 justify-center items-center ${
               time > 10 ? " bg-green-700/50" : "bg-red-500"
             }`}
           >

From 9b4e2ce1377f068a9c604d63dfefa89f1d480d98 Mon Sep 17 00:00:00 2001
From: Jayharron Mar Abejar <72720429+jaymar921@users.noreply.github.com>
Date: Fri, 15 Mar 2024 20:21:32 +0800
Subject: [PATCH 3/3] Update .env

---
 WebApp/.env | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/WebApp/.env b/WebApp/.env
index 28050308..694bb0dd 100644
--- a/WebApp/.env
+++ b/WebApp/.env
@@ -8,7 +8,7 @@ BACKEND_QUIZ_CONN_STR=Server=mssql;Database=QuizMasterQuiz;Trusted_Connection=Fa
 BACKEND_SESSION_CONN_STR=Server=mssql;Database=QuizMasterSession;Trusted_Connection=False;TrustServerCertificate=True;User Id=sa;Password=MsSql123
 
 # GATEWAY
-GATEWAY_CORS=http://localhost:3000;http://localhost:3001;http://localhost:5173;https://localhost:7081;https://polliwog-measured-bulldog.ngrok-free.app
+GATEWAY_CORS=http://localhost:3000;http://localhost:3001;http://localhost:5173;https://localhost:7081;
 
 # SESSION SETTINGS
 SHOW_ANSWER_AFTER_QUESTION_DELAY=10