Skip to content

Commit

Permalink
Merge pull request #55 from yatikakain/main
Browse files Browse the repository at this point in the history 
[Improvement] Implement Dropdown for Mode Switching between Generate Q&A and Ask Questions
  • Loading branch information
@Aditya062003
Aditya062003 authored Oct 20, 2024
2 parents a6c9560 + eaa9dd0 commit 626bcc6
Show file tree
Hide file tree
Showing 3 changed files with 95 additions and 34 deletions.
4 changes: 3 additions & 1 deletion .gitignore
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,4 +24,6 @@ extension/dist
extension/node_modules
backend/credentials.json
backend/token.json
backend/service_account_key.json
backend/service_account_key.json
venv
backend/Eduaid
44 changes: 39 additions & 5 deletions extension/src/pages/answer/Answer.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@ import logo from "../../assets/aossie_logo.webp";
import stars from "../../assets/stars.png";
import { FaClipboard } from "react-icons/fa";
import Switch from "react-switch"
import { FaQuestionCircle, FaClipboardList } from "react-icons/fa"; // Icons for the dropdown

const Answer = () => {
const [context, setContext] = useState("");
Expand All @@ -13,11 +14,23 @@ const Answer = () => {
const [loading, setLoading] = useState(false);

const [isToggleOn, setIsToggleOn] = useState(1);
const [mode, setMode] = useState("ask_question"); // Dropdown state

const toggleSwitch = () => {
window.location.href = "/src/pages/home/home.html";
setIsToggleOn(0);

// const toggleSwitch = () => {
// window.location.href = "/src/pages/home/home.html";
// setIsToggleOn(0);

// };

const handleModeChange = (event) => {
setMode(event.target.value);
// You can navigate to a different page or perform a specific action based on the mode here
if (event.target.value === "generate_qna") {
// window.location.href = "/src/pages/answer/answer.html"; // Redirect for 'Ask Questions' mode
window.location.href = "/src/pages/home/home.html";

}
};

const addQuestion = () => {
Expand Down Expand Up @@ -121,15 +134,36 @@ const Answer = () => {
Aid
</span>
</div>
<Switch
{/* <Switch
checked={isToggleOn}
onChange={toggleSwitch}
offColor="#FF005C"
onColor="#00CBE7"
height={32}
width={64}
className="ml-32 mb-8"
/>
/> */}
{/* Dropdown for Mode Selection */}
<div className="relative ml-auto mb-3">
<select
value={mode}
onChange={handleModeChange}
className="bg-[#202838] text-white text-sm font-medium px-4 py-2 rounded-xl appearance-none"
>
<option value="generate_qna">
<FaClipboardList className="inline-block mr-2" />
Generate Q&A
</option>
<option value="ask_question">
<FaQuestionCircle className="inline-block mr-2" />
Ask Questions
</option>
</select>
</div>

</div>
<div className="text-3xl mt-3 mb-1 text-white ml-4 font-extrabold">
Ask Questions!
</div>
<div className="relative bg-[#83b6cc40] mx-3 rounded-xl p-2 h-20">
<button className="absolute top-0 left-0 p-2 text-white focus:outline-none">
Expand Down
81 changes: 53 additions & 28 deletions extension/src/pages/home/Home.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,17 +2,11 @@ import React, { useState } from "react";
import ReactDOM from "react-dom";
import "../../index.css";
import logo from "../../assets/aossie_logo.webp";
import Switch from "react-switch"
import { FaQuestionCircle, FaClipboardList } from "react-icons/fa"; // Icons for the dropdown

function Home() {
const [selectedOption, setSelectedOption] = useState(null);
const [isToggleOn, setIsToggleOn] = useState(0);

const toggleSwitch = () => {
window.location.href = "/src/pages/answer/answer.html";
setIsToggleOn(1)

};
const [mode, setMode] = useState("generate_qna"); // Dropdown state

const handleOptionClick = (option) => {
setSelectedOption(option);
Expand All @@ -24,11 +18,18 @@ function Home() {
}
};

const handleModeChange = (event) => {
setMode(event.target.value);
// You can navigate to a different page or perform a specific action based on the mode here
if (event.target.value === "ask_question") {
window.location.href = "/src/pages/answer/answer.html"; // Redirect for 'Ask Questions' mode
}
};

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">
<div className="flex items-end gap-[2px]">

<img src={logo} alt="logo" className="w-16 my-4 ml-4 block" />
<div className="text-2xl mb-3 font-extrabold">
<span className="bg-gradient-to-r from-[#FF005C] to-[#7600F2] text-transparent bg-clip-text">
Expand All @@ -38,90 +39,114 @@ function Home() {
Aid
</span>
</div>
<Switch
checked={isToggleOn}
onChange={toggleSwitch}
offColor="#FF005C"
onColor="#00CBE7"
height={32}
width={64}
className="ml-32 mb-8"
/>

{/* Dropdown for Mode Selection */}
<div className="relative ml-auto mb-3">
<select
value={mode}
onChange={handleModeChange}
className="bg-[#202838] text-white text-sm font-medium px-4 py-2 rounded-xl appearance-none"
>
<option value="generate_qna">
<FaClipboardList className="inline-block mr-2" />
Generate Q&A
</option>
<option value="ask_question">
<FaQuestionCircle className="inline-block mr-2" />
Ask Questions
</option>
</select>
</div>
</div>

<div className="text-3xl mt-3 text-white ml-4 font-extrabold">
What’s on your Mind?
</div>
<div className="mt-1 text-white text-sm ml-4 font-medium">
Choose one
</div>

{/* Question Type Options */}
<div>
<div
onClick={() => handleOptionClick("get_shortq")}
className="flex my-3 items-center mx-3 cursor-pointer rounded-xl gap-4 px-4 py-4 bg-opacity-50 bg-[#202838]"
className={`flex my-3 items-center mx-3 cursor-pointer rounded-xl gap-4 px-4 py-4 bg-opacity-50 bg-[#202838] ${
selectedOption === "get_shortq" ? "border border-[#405EED]" : ""
}`}
>
<div
className={`px-3 py-3 rounded-full ${
selectedOption === "get_shortq"
? "bg-gradient-to-b from-[#405EED] to-[#01CBE7]"
: "bg-[#999C9D]"
} `}
}`}
></div>
<div className="text-white text-lg font-medium">
Short-Answer Type Questions
</div>
</div>

<div
onClick={() => handleOptionClick("get_mcq")}
className="flex my-3 cursor-pointer items-center mx-3 rounded-xl bg-opacity-50 gap-4 px-4 py-4 bg-[#202838]"
className={`flex my-3 items-center mx-3 cursor-pointer rounded-xl gap-4 px-4 py-4 bg-opacity-50 bg-[#202838] ${
selectedOption === "get_mcq" ? "border border-[#405EED]" : ""
}`}
>
<div
className={`px-3 py-3 rounded-full ${
selectedOption === "get_mcq"
? "bg-gradient-to-b from-[#405EED] to-[#01CBE7]"
: "bg-[#999C9D]"
} `}
}`}
></div>
<div className="text-white text-lg font-medium">
Multiple Choice Questions
</div>
</div>

<div
onClick={() => handleOptionClick("get_boolq")}
className="flex cursor-pointer my-3 items-center mx-3 rounded-xl bg-opacity-50 gap-4 px-4 py-4 bg-[#202838]"
className={`flex my-3 items-center mx-3 cursor-pointer rounded-xl gap-4 px-4 py-4 bg-opacity-50 bg-[#202838] ${
selectedOption === "get_boolq" ? "border border-[#405EED]" : ""
}`}
>
<div
className={`px-3 py-3 rounded-full ${
selectedOption === "get_boolq"
? "bg-gradient-to-b from-[#405EED] to-[#01CBE7]"
: "bg-[#999C9D]"
} `}
}`}
></div>
<div className="text-white text-lg font-medium">
True/False Questions
</div>
</div>

<div
onClick={() => handleOptionClick("get_problems")}
className="flex my-3 cursor-pointer items-center mx-3 rounded-xl bg-opacity-50 gap-4 px-4 py-4 bg-[#202838]"
className={`flex my-3 items-center mx-3 cursor-pointer rounded-xl gap-4 px-4 py-4 bg-opacity-50 bg-[#202838] ${
selectedOption === "get_problems" ? "border border-[#405EED]" : ""
}`}
>
<div
className={`px-3 py-3 rounded-full ${
selectedOption === "get_problems"
? "bg-gradient-to-b from-[#405EED] to-[#01CBE7]"
: "bg-[#999C9D]"
} `}
}`}
></div>
<div className="text-white text-lg font-medium">All Questions</div>
</div>
</div>

<div className="mx-auto text-center mt-6">
{selectedOption ? (
<a href="/src/pages/text_input/text_input.html">
<button
onClick={handleSaveToLocalStorage}
className="rounded-2xl text-xl text-white w-fit px-6 font-bold py-2 bg-gradient-to-r from-[#FF005C] via-[#7600F2] to-[#00CBE7]"
>
Fire Up{" "}🚀
Fire Up 🚀
</button>
</a>
) : (
Expand All @@ -130,7 +155,7 @@ function Home() {
className="rounded-2xl text-xl text-white w-fit px-6 font-bold py-2 bg-gray-500 cursor-not-allowed"
disabled
>
Fire Up{" "}🚀
Fire Up 🚀
</button>
)}
</div>
Expand Down

0 comments on commit 626bcc6

Please sign in to comment.