AOSSIE-Org · Ibrahim-Soltan · Mar 27, 2024
diff --git a/extension/html/index.html b/extension/html/index.html
@@ -13,6 +13,7 @@ <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="past_quizzes">Past Quizzes!</button>
             <button id="start">Fire up!</button>
         </main>
         <script src="../js/index.js"></script>

diff --git a/extension/html/past_quizzes.html b/extension/html/past_quizzes.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Past Quizzes - EduAid</title>
+    <link rel="stylesheet" href="../styles/past_quizzes.css">
+</head>
+<body>
+
+    <main>
+        <div id="quiz-list" class="quiz-container"></div>
+    </main>
+
+    <script src="../js/past_quizzes.js"></script>
+</body>
+</html>
diff --git a/extension/js/index.js b/extension/js/index.js
@@ -1,7 +1,14 @@
-document.addEventListener("DOMContentLoaded", function(){
-    const startButton=document.getElementById("start");
+document.addEventListener("DOMContentLoaded", function () {
+    const startButton = document.getElementById("start");
 
-    startButton.addEventListener("click", function(){
-        window.location.href="../html/text_input.html"
+    startButton.addEventListener("click", function () {
+        window.location.href = "../html/text_input.html"
     });
-});
+
+    const pastQuizzesButton = document.getElementById("past_quizzes")
+
+
+    pastQuizzesButton.addEventListener("click", function () {
+        window.open("../html/past_quizzes.html", "_blank");
+    })
+});
diff --git a/extension/js/past_quizzes.js b/extension/js/past_quizzes.js
@@ -0,0 +1,75 @@
+
+
+document.addEventListener("DOMContentLoaded", function () {
+    const quizList = document.getElementById("quiz-list");
+    const pastQuizzes = JSON.parse(localStorage.getItem("past_quizzes")) || [];
+
+    pastQuizzes.forEach((quiz, index) => {
+        const quizItem = document.createElement("div");
+        quizItem.classList.add("quiz-item");
+
+        const quizHeader = document.createElement("button");
+        quizHeader.classList.add("accordion");
+        quizHeader.innerText = `Quiz ${index + 1}`;
+        quizHeader.addEventListener("click", function () {
+            this.classList.toggle("active");
+            const content = this.nextElementSibling;
+            if (this.classList.contains("active")) {
+                content.style.maxHeight = content.scrollHeight + "px";
+            } else {
+                content.style.maxHeight = null;
+            }
+        });
+
+        const quizContent = document.createElement("div");
+        quizContent.classList.add("content");
+
+        Object.entries(quiz).forEach(([question, answer], qIndex) => {
+            const qaPair = document.createElement("p");
+            qaPair.innerHTML = `<strong>Q${qIndex + 1}:</strong> ${question}<br/><strong>A:</strong> ${answer}`;
+            quizContent.appendChild(qaPair);
+        });
+
+        const buttonRow = document.createElement("div");
+        buttonRow.classList.add("button-row");
+
+        const saveButton = document.createElement("button");
+        saveButton.classList.add("save-button");
+        saveButton.innerText = "Save to File";
+        saveButton.addEventListener("click", async function () {
+            let textContent = "EduAid Generated QnA:\n\n";
+
+            for (const [question, answer] of Object.entries(quiz)) {
+                textContent += `Question: ${question}\nAnswer: ${answer}\n\n`;
+            }
+            const blob = new Blob([textContent], { type: "text/plain" });
+
+            // Create a URL for the Blob
+            const blobUrl = URL.createObjectURL(blob);
+
+            // Create a temporary <a> element to trigger the download
+            const downloadLink = document.createElement("a");
+            downloadLink.href = blobUrl;
+            downloadLink.download = "questions_and_answers.txt";
+            downloadLink.style.display = "none";
+
+            // Append the <a> element to the document
+            document.body.appendChild(downloadLink);
+
+            // Simulate a click on the link to trigger the download
+            downloadLink.click();
+
+            // Clean up: remove the temporary <a> element and revoke the Blob URL
+            document.body.removeChild(downloadLink);
+            URL.revokeObjectURL(blobUrl);
+        });
+
+        buttonRow.appendChild(saveButton);
+
+        quizItem.appendChild(quizHeader);
+        quizItem.appendChild(quizContent);
+        quizItem.appendChild(buttonRow);
+
+        quizList.appendChild(quizItem);
+    });
+});
diff --git a/extension/js/question_generation.js b/extension/js/question_generation.js
@@ -1,56 +1,56 @@
-document.addEventListener("DOMContentLoaded", function(){
-    const saveButton= document.getElementById("save-button");
-    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]");
-
-
-    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();
-    });
-
-    modalClose.addEventListener("click", function(){
-      modal.close();
-    });
-    saveButton.addEventListener("click", async function(){
-      let textContent= "EduAid Generated QnA:\n\n";
-
-      for (const [question,answer] of Object.entries(qaPairs)){
-        textContent+= `Question: ${question}\nAnswer: ${answer}\n\n`;
-      }
-      const blob = new Blob([textContent], { type: "text/plain" });
-
-        // Create a URL for the Blob
-        const blobUrl = URL.createObjectURL(blob);
-
-        // Create a temporary <a> element to trigger the download
-        const downloadLink = document.createElement("a");
-        downloadLink.href = blobUrl;
-        downloadLink.download = "questions_and_answers.txt";
-        downloadLink.style.display = "none";
-
-        // Append the <a> element to the document
-        document.body.appendChild(downloadLink);
-
-        // Simulate a click on the link to trigger the download
-        downloadLink.click();
-
-        // Clean up: remove the temporary <a> element and revoke the Blob URL
-        document.body.removeChild(downloadLink);
-        URL.revokeObjectURL(blobUrl);
-    });
-      
-      backButton.addEventListener("click", function(){
-        window.location.href="../html/text_input.html"
-      });
+document.addEventListener("DOMContentLoaded", function () {
+  const saveButton = document.getElementById("save-button");
+  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]");
+
+
+  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();
+  });
+
+  modalClose.addEventListener("click", function () {
+    modal.close();
+  });
+  saveButton.addEventListener("click", async function () {
+    let textContent = "EduAid Generated QnA:\n\n";
+
+    for (const [question, answer] of Object.entries(qaPairs)) {
+      textContent += `Question: ${question}\nAnswer: ${answer}\n\n`;
+    }
+    const blob = new Blob([textContent], { type: "text/plain" });
+
+    // Create a URL for the Blob
+    const blobUrl = URL.createObjectURL(blob);
+
+    // Create a temporary <a> element to trigger the download
+    const downloadLink = document.createElement("a");
+    downloadLink.href = blobUrl;
+    downloadLink.download = "questions_and_answers.txt";
+    downloadLink.style.display = "none";
+
+    // Append the <a> element to the document
+    document.body.appendChild(downloadLink);
+
+    // Simulate a click on the link to trigger the download
+    downloadLink.click();
+
+    // Clean up: remove the temporary <a> element and revoke the Blob URL
+    document.body.removeChild(downloadLink);
+    URL.revokeObjectURL(blobUrl);
+  });
+
+  backButton.addEventListener("click", function () {
+    window.location.href = "../html/text_input.html"
+  });
 });
diff --git a/extension/js/text_input.js b/extension/js/text_input.js
@@ -1,79 +1,84 @@
 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");
+
+
+  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));
+
+      const pastQuizzes = JSON.parse(localStorage.getItem("past_quizzes")) || [];
+      pastQuizzes.push(responseData);
+      localStorage.setItem("past_quizzes", JSON.stringify(pastQuizzes));
+
+      window.location.href = "../html/question_generation.html";
+    } else {
+      console.error("Backend request failed.");
     }
-  });
+    loadingScreen.style.display = "none";
+  }
+});