AOSSIE-Org · Roaster05 · Mar 23, 2024
diff --git a/extension/html/index.html b/extension/html/index.html
@@ -13,7 +13,10 @@ <h1>EduAid</h1>
         <main>
             <h2 id="welcome">Welcome to EduAid &#128640;</h2>
             <p> A tool that can auto-generate short quizzes based on user input </p>
-            <button id="start">Fire up!</button>
+            <div style="display: flex;">
+                <button id="start">Fire up!</button>
+                <button id="previous">My Work</button>
+            </div>
         </main>
         <script src="../js/index.js"></script>
     </body>

diff --git a/extension/html/previous.html b/extension/html/previous.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+        <meta charset="UTF-8">
+        <meta name="viewport" content="width=device-width, initial-scale=1.0">
+        <link rel="stylesheet" href="../styles/previous.css">
+        <title>QA Pairs List</title>
+    </head>
+    <body>
+
+        <header>
+            <img src="../assets/aossie_logo.png" alt="AOSSIE logo">
+            <h1>EduAid</h1>
+        </header>
+
+        <h2>Your Previous Work</h2>
+
+        <main>
+            <ul id="qaPairsList"></ul>
+        </main>
+
+        <script src="../js/previous.js" defer></script>
+    </body>
+</html>
diff --git a/extension/html/text_input.html b/extension/html/text_input.html
@@ -15,6 +15,7 @@ <h1>EduAid</h1>
         </header>
         <main>
             <h3>Generate QnA</h3>
+            <textarea id="title" placeholder="Enter your title"></textarea>
             <textarea id="text-input" placeholder="Paste your text here"></textarea>
             <div>
                 <input type="file" id="file-upload" accept=".pdf" hidden>

diff --git a/extension/js/index.js b/extension/js/index.js
@@ -1,7 +1,10 @@
 document.addEventListener("DOMContentLoaded", function(){
     const startButton=document.getElementById("start");
-
+    const previousButton = document.getElementById("previous")
     startButton.addEventListener("click", function(){
         window.location.href="../html/text_input.html"
     });
+    previousButton.addEventListener("click", function(){
+        window.location.href="../html/previous.html"
+    });
 });
diff --git a/extension/js/previous.js b/extension/js/previous.js
@@ -0,0 +1,66 @@
+function generateList() {
+    const qaArray = JSON.parse(localStorage.getItem("qaArray"));
+    const qaPairsList = document.getElementById("qaPairsList");
+
+    if (qaArray) {
+        qaPairsList.innerHTML = ""; // Clear previous content
+
+qaArray.forEach((entry, idx) => {
+    const listItem = document.createElement("li");
+
+    // Create a container for the title and additional information
+    const contentContainer = document.createElement("div");
+
+    // Create the title
+    const title = document.createElement("h3");
+    title.textContent = entry.title; // Access the title directly
+    contentContainer.appendChild(title);
+
+    // Additional information container
+    const additionalInfo = document.createElement("div");
+    additionalInfo.classList.add("additional-info");
+    additionalInfo.textContent = `Ques: ${Object.keys(entry.qapair).length}, Date: ${new Date(entry.date).toLocaleString()}`;
+    contentContainer.appendChild(additionalInfo);
+
+    // Create a button for each list item
+    const button = document.createElement("button");
+    button.classList.add("custom-button");
+    button.textContent = "Open";
+
+    // Attach click event listener to each button
+    button.addEventListener("click", function() {
+        setQaPairs(entry.qapair, idx);
+        window.location.href = "../html/question_generation.html";
+    });
+
+    // Append button to list item
+    contentContainer.appendChild(button);
+
+    // Hover effect
+    contentContainer.addEventListener("mouseenter", function() {
+        additionalInfo.style.display = "block";
+        button.style.display = "block";
+    });
+    contentContainer.addEventListener("mouseleave", function() {
+        additionalInfo.style.display = "none";
+        button.style.display = "none";
+    });
+
+    // Append content container to list item
+    listItem.appendChild(contentContainer);
+
+    // Append list item to the list
+    qaPairsList.appendChild(listItem);
+});
+
+    } else {
+        qaPairsList.innerHTML = "<li>No data available</li>";
+    }
+}
+
+// Function to set qaPairs in localStorage
+function setQaPairs(qaPairs, idx) {
+    localStorage.setItem("qaPairs", JSON.stringify(qaPairs));
+    console.log(`qaPairs set for index ${idx}`);
+}
+generateList();
diff --git a/extension/js/text_input.js b/extension/js/text_input.js
@@ -1,79 +1,97 @@
 document.addEventListener("DOMContentLoaded", function () {
-    const nextButton = document.getElementById("next-button");
-    const backButton = document.getElementById("back-button");
-    const textInput = document.getElementById("text-input");
-    const fileInput = document.getElementById("file-upload");
-    const loadingScreen = document.getElementById("loading-screen");
-
-
-    fileInput.addEventListener("change", async function () {
+  const nextButton = document.getElementById("next-button");
+  const backButton = document.getElementById("back-button");
+  const textInput = document.getElementById("text-input");
+  const fileInput = document.getElementById("file-upload");
+  const loadingScreen = document.getElementById("loading-screen");
+  const title = document.getElementById("title");
+
+
+  fileInput.addEventListener("change", async function () {
+    const file = fileInput.files[0];
+    if (file) {
+      const fileReader = new FileReader();
+      fileReader.onload = async function (event) {
+        const pdfData = new Uint8Array(event.target.result);
+        const pdf = await pdfjsLib.getDocument({ data: pdfData }).promise;
+        let pdfText = "";
+
+        for (let i = 1; i <= pdf.numPages; i++) {
+          const page = await pdf.getPage(i);
+          const pageText = await page.getTextContent();
+          const pageStrings = pageText.items.map(item => item.str);
+          pdfText += pageStrings.join(" ");
+        }
+
+        textInput.value = pdfText;
+      };
+      fileReader.readAsArrayBuffer(file);
+    }
+  });
+
+  nextButton.addEventListener("click", async function () {
+    loadingScreen.style.display = "flex"
+    const inputText = textInput.value;
+
+    if (inputText.trim() === "" && fileInput.files.length > 0) {
       const file = fileInput.files[0];
-      if (file) {
-        const fileReader = new FileReader();
-        fileReader.onload = async function (event) {
-          const pdfData = new Uint8Array(event.target.result);
-          const pdf = await pdfjsLib.getDocument({ data: pdfData }).promise;
-          let pdfText = "";
-
-          for (let i = 1; i <= pdf.numPages; i++) {
-            const page = await pdf.getPage(i);
-            const pageText = await page.getTextContent();
-            const pageStrings = pageText.items.map(item => item.str);
-            pdfText += pageStrings.join(" ");
-          }
-
-          textInput.value = pdfText;
-        };
-        fileReader.readAsArrayBuffer(file);
-      }
-    });
+      const fileReader = new FileReader();
+      fileReader.onload = async function (event) {
+        const uploadedPdfData = new Uint8Array(event.target.result);
+        await sendToBackend(uploadedPdfData, "pdf");
+      };
+      fileReader.readAsArrayBuffer(file);
+    } else if (inputText.trim() !== "") {
+      await sendToBackend(inputText, "text");
+    } else {
+      alert("Please enter text or upload a PDF file.");
+      loadingScreen.style.display = "none";
+    }
+  });
 
-    nextButton.addEventListener("click", async function () {
-      loadingScreen.style.display = "flex"
-      const inputText = textInput.value;
-
-      if (inputText.trim() === "" && fileInput.files.length > 0) {
-        const file = fileInput.files[0];
-        const fileReader = new FileReader();
-        fileReader.onload = async function (event) {
-          const uploadedPdfData = new Uint8Array(event.target.result);
-          await sendToBackend(uploadedPdfData,"pdf");
-        };
-        fileReader.readAsArrayBuffer(file);
-      } else if (inputText.trim() !== "") {
-        await sendToBackend(inputText,"text");
-      } else {
-        alert("Please enter text or upload a PDF file.");
-        loadingScreen.style.display = "none";
-      }
-    });
-
-    backButton.addEventListener("click", function () {
-      window.location.href = "../html/index.html";
+  backButton.addEventListener("click", function () {
+    window.location.href = "../html/index.html";
+  });
+
+  async function sendToBackend(data, dataType) {
+    let formData;
+    let contentType;
+    formData = JSON.stringify({ 'input_text': data });
+    contentType = "application/json; charset=UTF-8";
+
+    const response = await fetch("http://127.0.0.1:8000", {
+      method: "POST",
+      body: formData,
+      headers: {
+        "Content-Type": contentType,
+      },
     });
-
-    async function sendToBackend(data, dataType) {
-      let formData;
-      let contentType;
-      formData = JSON.stringify({ 'input_text': data });
-      contentType = "application/json; charset=UTF-8";
-
-      const response = await fetch("http://127.0.0.1:8000", {
-        method: "POST",
-        body: formData,
-        headers: {
-          "Content-Type": contentType,
-        },
-      });
-
-      if (response.ok) {
-        const responseData = await response.json();
-        // console.log("Response data:\n"+responseData);
-        localStorage.setItem("qaPairs", JSON.stringify(responseData));
-        window.location.href = "../html/question_generation.html";
-      } else {
-        console.error("Backend request failed.");
-      }
-      loadingScreen.style.display = "none";
+
+    if (response.ok) {
+      const responseData = await response.json();
+      // console.log("Response data:\n"+responseData);
+      localStorage.setItem("qaPairs", JSON.stringify(responseData));
+      if (localStorage.getItem("qaArray")) {
+        var arr = JSON.parse(localStorage.getItem("qaArray"));
+        arr.push({
+            title:title.value,
+            qapair: responseData,
+            date:  Date.now() 
+        });
+        localStorage.setItem("qaArray", JSON.stringify(arr));
+    } else {
+        // If "qaArray" doesn't exist in localStorage, initialize it with an array containing the new entry
+        var arr = [{
+            title:title.value,
+            qapair: responseData,
+            date: Date.now()
+        }];
+        localStorage.setItem("qaArray", JSON.stringify(arr));
+    }
+      window.location.href = "../html/question_generation.html";
+    } else {
+      console.error("Backend request failed.");
     }
-  });
+    loadingScreen.style.display = "none";
+  }
+});
diff --git a/extension/manifest.json b/extension/manifest.json
@@ -28,6 +28,7 @@
         "./js/text_input.js",
         ".js/view_questions.js",
         "./js/question_generation.js",
+        "/js/previous.js",
         "./assets/aossie_logo.png"
       ],
       "matches": ["<all_urls>"]

diff --git a/extension/styles/index.css b/extension/styles/index.css
@@ -70,9 +70,10 @@ button {
   -moz-user-select: none;
   -ms-user-select: none;
   user-select: none;
-  width: 7rem;
+  width: 5rem;
   transition: background-position 0.7s ease; /* Add transition for background position */
   margin-bottom: 1px;
+  margin-left: 6px;
 }
 
 /* Style the button on hover */