Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Hide details during buffer time #199

Merged
merged 3 commits into from
Mar 15, 2024
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down Expand Up @@ -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"
}`}
>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Expand All @@ -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,
Expand Down Expand Up @@ -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 ${
Expand Down
22 changes: 17 additions & 5 deletions WebApp/frontend/quiz_session/app/room/quiz/components/question.js
Original file line number Diff line number Diff line change
Expand Up @@ -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();
Expand All @@ -44,7 +44,7 @@ export default function Question() {
const handleCloseLeaderboard = () => {
setResetLeader();
setIsShowLeader(false);
}
};

useEffect(() => {
if (leader.length > 0) {
Expand All @@ -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 (
<>
Expand All @@ -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>
</>
Expand Down
199 changes: 102 additions & 97 deletions WebApp/frontend/quiz_session/app/room/quiz/components/trueOrFalse.js
Original file line number Diff line number Diff line change
Expand Up @@ -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) =>
Expand Down Expand Up @@ -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" : ""
Expand Down
Loading
Loading