AOSSIE-Org · Roaster05 · Mar 22, 2024
diff --git a/extension/html/question_generation.html → extension/html/sidePanel.html b/extension/html/question_generation.html → extension/html/sidePanel.html
@@ -9,7 +9,7 @@
     <body>
         <header>
             <img src="../assets/aossie_logo.png" alt="AOSSIE logo">
-            <h1>EduAid</h1>
+            <h1 id="EduAid">EduAid</h1>
         </header>
 
         <main>
@@ -18,16 +18,8 @@ <h3>Questions have been generated!</h3>
                 <button id="view-questions-button">View</button>
                 <button id="save-button">Save</button>
             </div>
-            <dialog data-modal>
-                <ul id="modal-question-list"></ul>
-                <button data-close-modal>&#10060</button>
-            </dialog>
+            <div id="questionList"></div>
         </main>
-
-        <footer>
-            <button id="back-button">Back</button>
-        </footer>
-
         <script src="../js/question_generation.js"></script>
     </body>
 </html>
diff --git a/extension/js/question_generation.js b/extension/js/question_generation.js
@@ -3,25 +3,37 @@ document.addEventListener("DOMContentLoaded", function(){
     const backButton= document.getElementById("back-button");
     const viewQuestionsButton = document.getElementById("view-questions-button");
     const qaPairs=JSON.parse(localStorage.getItem("qaPairs"));
-    const modalClose= document.querySelector("[data-close-modal]");
-    const modal=document.querySelector("[data-modal]");
+    const questionListDiv = document.getElementById("questionList");
 
 
-    viewQuestionsButton.addEventListener("click", function(){
-      const modalQuestionList = document.getElementById("modal-question-list");
-      modalQuestionList.innerHTML = ""; // Clear previous content
 
-      for (const [question, answer] of Object.entries(qaPairs)) {
-          const questionElement = document.createElement("li");
-          questionElement.textContent = `Question: ${question}, Answer: ${answer}`;
-          modalQuestionList.appendChild(questionElement)
-      }
-      modal.showModal();
-    });
+    let isOpen = false; // Initially closed
 
-    modalClose.addEventListener("click", function(){
-      modal.close();
-    });
+viewQuestionsButton.addEventListener("click", () => {
+    if (isOpen) {
+        // Close the section
+        questionListDiv.style.display = "none";
+        viewQuestionsButton.textContent = "View";
+        isOpen = false;
+    } else {
+        // Open the section
+        questionListDiv.innerHTML = ""; // Clear previous content
+
+        for (const [question, answer] of Object.entries(qaPairs)) {
+            const questionAnswerDiv = document.createElement("div");
+            questionAnswerDiv.classList.add("question-answer");
+            questionAnswerDiv.innerHTML = `
+                <h4>Q) ${question}</h4>
+                <p>Ans:     ${answer}</p>
+            `;
+            questionListDiv.appendChild(questionAnswerDiv);
+        }
+
+        questionListDiv.style.display = "block";
+        viewQuestionsButton.textContent = "Close";
+        isOpen = true;
+    }
+});
     saveButton.addEventListener("click", async function(){
       let textContent= "EduAid Generated QnA:\n\n";
 

diff --git a/extension/js/text_input.js b/extension/js/text_input.js
@@ -1,4 +1,10 @@
-document.addEventListener("DOMContentLoaded", function () {
+document.addEventListener("DOMContentLoaded", async function () {
+  const [tab] = await chrome.tabs.query({
+    active: true,
+    lastFocusedWindow: true
+  });
+
+  const tabId = tab.id;
     const nextButton = document.getElementById("next-button");
     const backButton = document.getElementById("back-button");
     const textInput = document.getElementById("text-input");
@@ -70,7 +76,14 @@ document.addEventListener("DOMContentLoaded", function () {
         const responseData = await response.json();
         // console.log("Response data:\n"+responseData);
         localStorage.setItem("qaPairs", JSON.stringify(responseData));
-        window.location.href = "../html/question_generation.html";
+        //window.location.href = "../html/question_generation.html";
+        alert("Your Questions have been generated, open the SidePanel to view the Questions")
+        chrome.sidePanel.open({ tabId }, () => {
+          chrome.sidePanel.setOptions({
+            path: 'html/sidePanel.html',
+            enabled: true
+          });
+        });
       } else {
         console.error("Backend request failed.");
       }

diff --git a/extension/manifest.json b/extension/manifest.json
@@ -3,7 +3,7 @@
   "name": "EduAid: AI Quiz Generator",
   "version": "1.0",
   "description": "Generate quizzes with AI-powered questions.",
-  "permissions": ["activeTab", "storage"],
+  "permissions": ["sidePanel","activeTab", "storage"],
   "host_permissions":["http://127.0.0.1:8000/*"],
   "icons": {
     "16": "./assets/aossie_logo.png"
@@ -32,5 +32,11 @@
       ],
       "matches": ["<all_urls>"]
     }
-  ]
+  ],
+  "background": {
+    "service_worker": "serviceWorker.js"
+  },
+  "side_panel": {
+    "default_path":"/html/sidePanel.html"
+  }
 }
diff --git a/extension/serviceWorker.js b/extension/serviceWorker.js
@@ -0,0 +1,14 @@
+chrome.runtime.onMessage.addListener((message, sender) => {
+    // The callback for runtime.onMessage must return falsy if we're not sending a response
+    (async () => {
+      if (message.type === 'open_side_panel') {
+        // This will open a tab-specific side panel only on the current tab.
+        await chrome.sidePanel.open({ tabId: sender.tab.id });
+        await chrome.sidePanel.setOptions({
+          tabId: sender.tab.id,
+          path: '/html/sidePanel.html',
+          enabled: true
+        });
+      }
+    })();
+  });
diff --git a/extension/styles/question_generation.css b/extension/styles/question_generation.css
@@ -1,59 +1,60 @@
-body{
-    /* background-color: rgb(18, 89, 231); */
-    background-color: #FBAB7E;
-    background-image: linear-gradient(62deg, #FBAB7E 0%, #F7CE68 100%);
-    font-family: 'Inter';
-    font-weight: 400; /* Regular */
-}
-
-header{
-    display: flex;
-    align-items: center;
-    padding: 10px 20px;
-
-}
-img{
-    width: 32px;
-    height: 32px;
-    margin-right: 10px;
-
+body {
+  background-color: #FBAB7E;
+  background-image: linear-gradient(62deg, #FBAB7E 0%, #F7CE68 100%);
+  font-family: 'Inter';
+  font-weight: 400; /* Regular */
 }
+
+header {
+  display: flex;
+  align-items: center;
+  padding: 10px 20px;
+}
+
+img {
+  width: 32px;
+  height: 32px;
+  margin-right: 10px;
+}
+
 h1 {
-    font-size: 24px;
-  }
-  main {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-    /* height: calc(101vh - 102px); Adjust this height value as needed */
-  }
+  font-size: 24px;
+}
 
-  h2 {
-    font-size: 28px;
-    margin-bottom: 10px;
-  }
-p{
-    margin-left: 2px;
-    margin-right: 2px;
-    padding-left: 1px;
-    padding-right: 1px;
-    text-align: left;
-}
-#text-input{
+main {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  min-height: calc(100vh - 102px); /* Adjust this height value as needed */
+}
+
+h2 {
+  font-size: 28px;
+  margin-bottom: 10px;
+}
+
+p {
+  margin-left: 2px;
+  margin-right: 2px;
+  padding-left: 1px;
+  padding-right: 1px;
+  text-align: left;
+}
+
+#text-input {
   height: 30px;
   width: 150px;
   margin-bottom: 10px;
 }
+
 :root {
   --yellow: #e8f222;
   --green: #82ea27;
   --black: #000;
 }
 
-
 /* Style the button */
-
 button {
   display: inline-block;
   background: linear-gradient(to right, var(--yellow) 0%, var(--green) 50%, var(--yellow) 100%);
@@ -63,9 +64,6 @@ button {
   box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
   color: var(--black);
   cursor: pointer;
-  /* font: 1.5em Raleway, sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale; */
   height: 1.5rem;
   letter-spacing: 0.05em;
   outline: none;
@@ -75,34 +73,55 @@ button {
   -ms-user-select: none;
   user-select: none;
   width: 3rem;
-  transition: background-position 0.7s ease; /* Add transition for background position */
-  margin-bottom: 1px;
-
+  transition: background-position 0.7s ease;
+  margin-bottom: 20px;
 }
+
 button:hover {
-    background-position: 100%; /* Move the background gradient on hover */
-  }
-  
-  /* Add animation for button hover effect */
-  @keyframes gradient {
-    0% {
+  background-position: 100%;
+}
+
+/* Add animation for button hover effect */
+@keyframes gradient {
+  0% {
       background-position: 0% 50%;
-    }
-    100% {
+  }
+  100% {
       background-position: 100%;
-    }
   }
+}
+
+#save-button {
+  width: auto;
+}
 
-#save-button{
-    width:auto
+#view-questions-button {
+  width: auto;
 }
-#view-questions-button{
-    width: auto;
+
+#button-container {
+  display: inline-block;
+  margin-bottom: 3px;
+}
+
+.question-answer {
+  background-color: #fff;
+  border: 1px solid #ccc;
+  border-radius: 8px;
+  padding: 15px;
+  margin-bottom: 20px;
+  max-width: 600px; /* Set the maximum width */
+  overflow-y: auto;
+}
+
+.question-answer h3 {
+  font-size: 18px;
+  margin-bottom: 10px;
+}
+
+.question-answer:last-child {
+  margin-bottom: 0; /* Remove bottom margin for the last question-answer div */
 }
-#button-container{
-    display: inline-block;
-    margin-bottom: 3px;
+.EduAid {
+  margin-left: 30;
 }
-h3{
-    font: 18px;
-}
diff --git a/extension/styles/text_input.css b/extension/styles/text_input.css
@@ -20,6 +20,7 @@ img{
 }
 h1 {
     font-size: 24px;
+
   }
   main {
     display: flex;