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

#65 issue /question_type page layout corrected #66

Open
wants to merge 2 commits into
base: main
Choose a base branch
from
Open
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
29 changes: 29 additions & 0 deletions eduaid_web/dockerfile
Original file line number Diff line number Diff line change
@@ -0,0 +1,29 @@

FROM node:22-alpine


WORKDIR /app


COPY package*.json ./


RUN npm install


COPY . .


RUN npm run build


FROM nginx:alpine


COPY --from=build /app/build /usr/share/nginx/html


EXPOSE 3000


CMD ["nginx", "-g", "daemon off;"]
196 changes: 99 additions & 97 deletions eduaid_web/src/pages/Question_Type.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -16,109 +16,111 @@ const Question_Type = () => {
};

return (
<div className="popup w-screen h-screen bg-[#02000F] flex justify-center items-center">
<div className="w-full h-full bg-cust bg-opacity-50 bg-custom-gradient p-6">
<a href="/">
<div className="flex items-end gap-4">
<img src={logo} alt="logo" className="w-24 my-6 block" />
<div className="text-5xl mb-5 font-extrabold">
<span className="bg-gradient-to-r from-[#FF005C] to-[#7600F2] text-transparent bg-clip-text">
Edu
</span>
<span className="bg-gradient-to-r from-[#7600F2] to-[#00CBE7] text-transparent bg-clip-text">
Aid
</span>
</div>
</div>
</a>
<div className="text-4xl mt-6 text-white text-center font-extrabold">
What’s on your Mind?
<div className="popup w-screen h-full bg-[#02000F] flex justify-center items-center">
<div className="w-full h-full bg-cust bg-opacity-50 bg-custom-gradient p-4 sm:p-6">
<a href="/">
<div className="flex flex-col sm:flex-row text-center items-center gap-4">
<img src={logo} alt="logo" className="w-20 my-6 block" />
<div className="text-3xl sm:text-4xl font-extrabold">
<span className="bg-gradient-to-r from-[#FF005C] to-[#7600F2] text-transparent bg-clip-text">
Edu
</span>
<span className="bg-gradient-to-r from-[#7600F2] to-[#00CBE7] text-transparent bg-clip-text">
Aid
</span>
</div>
<div className="mt-2 text-white text-xl text-center font-medium">
Choose one
</div>
</a>
<div className="text-3xl sm:text-4xl -mt-18 mb-10 text-white text-center font-extrabold">
What’s on your Mind?
</div>
<div className="mt-2 text-white text-lg sm:text-xl mb-5 text-center font-medium">
Choose one
</div>
<div className="flex flex-col sm:flex-row gap-4 justify-center items-center mt-8 mb-8">
<div
onClick={() => handleOptionClick("get_shortq")}
className="flex my-5 items-center w-full max-w-lg cursor-pointer rounded-xl gap-6 px-4 sm:px-6 py-4 sm:py-6 bg-opacity-50 bg-[#202838]"
>
<div
className={`w-10 h-10 rounded-full ${
selectedOption === "get_shortq"
? "bg-gradient-to-b from-[#405EED] to-[#01CBE7]"
: "bg-[#999C9D]"
} `}
></div>
<div className="text-white text-lg sm:text-2xl font-medium">
Short-Answer Type Questions
</div>
<div className="flex flex-col items-center mt-8">
<div
onClick={() => handleOptionClick("get_shortq")}
className="flex my-3 items-center w-full max-w-lg cursor-pointer rounded-xl gap-6 px-6 py-6 bg-opacity-50 bg-[#202838]"
>
<div
className={`w-10 h-10 rounded-full ${
selectedOption === "get_shortq"
? "bg-gradient-to-b from-[#405EED] to-[#01CBE7]"
: "bg-[#999C9D]"
} `}
></div>
<div className="text-white text-2xl font-medium">
Short-Answer Type Questions
</div>
</div>
<div
onClick={() => handleOptionClick("get_mcq")}
className="flex my-3 items-center w-full max-w-lg cursor-pointer rounded-xl gap-6 px-6 py-6 bg-opacity-50 bg-[#202838]"
>
<div
className={`w-10 h-10 rounded-full ${
selectedOption === "get_mcq"
? "bg-gradient-to-b from-[#405EED] to-[#01CBE7]"
: "bg-[#999C9D]"
} `}
></div>
<div className="text-white text-2xl font-medium">
Multiple Choice Questions
</div>
</div>
<div
onClick={() => handleOptionClick("get_boolq")}
className="flex my-3 items-center w-full max-w-lg cursor-pointer rounded-xl gap-6 px-6 py-6 bg-opacity-50 bg-[#202838]"
>
<div
className={`w-10 h-10 rounded-full ${
selectedOption === "get_boolq"
? "bg-gradient-to-b from-[#405EED] to-[#01CBE7]"
: "bg-[#999C9D]"
} `}
></div>
<div className="text-white text-2xl font-medium">
True/False Questions
</div>
</div>
<div
onClick={() => handleOptionClick("get_problems")}
className="flex my-3 items-center w-full max-w-lg cursor-pointer rounded-xl gap-6 px-6 py-6 bg-opacity-50 bg-[#202838]"
>
<div
className={`w-10 h-10 rounded-full ${
selectedOption === "get_problems"
? "bg-gradient-to-b from-[#405EED] to-[#01CBE7]"
: "bg-[#999C9D]"
} `}
></div>
<div className="text-white text-2xl font-medium">All Questions</div>
</div>
</div>
<div
onClick={() => handleOptionClick("get_mcq")}
className="flex my-3 items-center w-full max-w-lg cursor-pointer rounded-xl gap-6 px-4 sm:px-6 py-4 sm:py-6 bg-opacity-50 bg-[#202838]"
>
<div
className={`w-10 h-10 rounded-full ${
selectedOption === "get_mcq"
? "bg-gradient-to-b from-[#405EED] to-[#01CBE7]"
: "bg-[#999C9D]"
} `}
></div>
<div className="text-white text-lg sm:text-2xl font-medium">
Multiple Choice Questions
</div>
<div className="mx-auto text-center mt-10">
{selectedOption ? (
<a href="input">
<button
onClick={handleSaveToLocalStorage}
className="rounded-2xl text-2xl text-white w-fit px-8 font-bold py-3 bg-gradient-to-r from-[#FF005C] via-[#7600F2] to-[#00CBE7]"
>
Fire Up{" "}🚀
</button>
</a>
) : (
<button
onClick={() => alert("Please select a question type.")}
className="rounded-2xl text-2xl text-white w-fit px-8 font-bold py-3 bg-gray-500 cursor-not-allowed"
disabled
>
Fire Up{" "}🚀
</button>
)}
</div>
</div>
<div className="flex flex-col sm:flex-row gap-4 justify-center items-center mt-8 mb-8">
<div
onClick={() => handleOptionClick("get_boolq")}
className="flex my-5 items-center w-full max-w-lg cursor-pointer rounded-xl gap-6 px-4 sm:px-6 py-4 sm:py-6 bg-opacity-50 bg-[#202838]"
>
<div
className={`w-10 h-10 rounded-full ${
selectedOption === "get_boolq"
? "bg-gradient-to-b from-[#405EED] to-[#01CBE7]"
: "bg-[#999C9D]"
} `}
></div>
<div className="text-white text-lg sm:text-2xl font-medium">
True/False Questions
</div>
</div>
<div
onClick={() => handleOptionClick("get_problems")}
className="flex my-3 items-center w-full max-w-lg cursor-pointer rounded-xl gap-6 px-4 sm:px-6 py-4 sm:py-6 bg-opacity-50 bg-[#202838]"
>
<div
className={`w-10 h-10 rounded-full ${
selectedOption === "get_problems"
? "bg-gradient-to-b from-[#405EED] to-[#01CBE7]"
: "bg-[#999C9D]"
} `}
></div>
<div className="text-white text-lg sm:text-2xl font-medium">All Questions</div>
</div>
</div>
<div className="mx-auto text-center mt-10">
{selectedOption ? (
<a href="input">
<button
onClick={handleSaveToLocalStorage}
className="rounded-2xl text-lg sm:text-2xl text-white w-fit px-6 sm:px-8 font-bold py-3 bg-gradient-to-r from-[#FF005C] via-[#7600F2] to-[#00CBE7]"
>
Fire Up{" "}🚀
</button>
</a>
) : (
<button
onClick={() => alert("Please select a question type.")}
className="rounded-2xl text-lg sm:text-2xl text-white w-fit px-6 sm:px-8 font-bold py-3 bg-gray-500 cursor-not-allowed"
disabled
>
Fire Up{" "}🚀
</button>
)}
</div>
</div>
</div>
);
};

Expand Down