From 8532a7d8fd2245641ff3c10509353e817b1b7344 Mon Sep 17 00:00:00 2001 From: Roaster05 Date: Sat, 23 Mar 2024 15:23:14 +0530 Subject: [PATCH] Added My Work feature --- extension/html/index.html | 5 +- extension/html/previous.html | 24 +++++ extension/html/text_input.html | 1 + extension/js/index.js | 5 +- extension/js/previous.js | 66 +++++++++++++ extension/js/text_input.js | 166 ++++++++++++++++++-------------- extension/manifest.json | 1 + extension/styles/index.css | 3 +- extension/styles/previous.css | 131 +++++++++++++++++++++++++ extension/styles/text_input.css | 5 + 10 files changed, 330 insertions(+), 77 deletions(-) create mode 100644 extension/html/previous.html create mode 100644 extension/js/previous.js create mode 100644 extension/styles/previous.css diff --git a/extension/html/index.html b/extension/html/index.html index d5b53a65..e071ca73 100644 --- a/extension/html/index.html +++ b/extension/html/index.html @@ -13,7 +13,10 @@

EduAid

Welcome to EduAid 🚀

A tool that can auto-generate short quizzes based on user input

- +
+ + +
diff --git a/extension/html/previous.html b/extension/html/previous.html new file mode 100644 index 00000000..6e256b2f --- /dev/null +++ b/extension/html/previous.html @@ -0,0 +1,24 @@ + + + + + + + QA Pairs List + + + +
+ AOSSIE logo +

EduAid

+
+ +

Your Previous Work

+ +
+ +
+ + + + diff --git a/extension/html/text_input.html b/extension/html/text_input.html index f62c2da0..11f9b812 100644 --- a/extension/html/text_input.html +++ b/extension/html/text_input.html @@ -15,6 +15,7 @@

EduAid

Generate QnA

+
diff --git a/extension/js/index.js b/extension/js/index.js index 97144fd6..737bf568 100644 --- 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" + }); }); \ No newline at end of file diff --git a/extension/js/previous.js b/extension/js/previous.js new file mode 100644 index 00000000..1ba7d5bb --- /dev/null +++ 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 = "
  • No data available
    • "; + } +} + +// 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 index bf65bb92..d842ebfb 100644 --- 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."); } - }); \ No newline at end of file + loadingScreen.style.display = "none"; + } +}); \ No newline at end of file diff --git a/extension/manifest.json b/extension/manifest.json index dabae1aa..a626a7e6 100644 --- 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": [""] diff --git a/extension/styles/index.css b/extension/styles/index.css index 8c0bae46..8684595a 100644 --- 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 */ diff --git a/extension/styles/previous.css b/extension/styles/previous.css new file mode 100644 index 00000000..c59e58da --- /dev/null +++ b/extension/styles/previous.css @@ -0,0 +1,131 @@ +body { + background-color: #FBAB7E; + background-image: linear-gradient(62deg, #FBAB7E 0%, #F7CE68 100%); + font-family: 'Inter'; + font-weight: 400; /* Regular */ + height: 200px; + width: 300px; + overflow-y: auto; + +} + +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; +} + +h2 { + font-size: 28px; + margin-bottom: 10px; +} + +#qaPairsList { + list-style: none; + padding: 0; + width: 100%; +} + +li { + margin-bottom: 10px; + background-color: #fff; + border-radius: 10px; + padding-left: 6px; + padding-right: 6px; + padding-top: 2px; + padding-bottom: 2px; + box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); +} + +button { + display: inline-block; + background: linear-gradient(to right, var(--yellow) 0%, var(--green) 50%, var(--yellow) 100%); + background-size: 500%; + border: none; + border-radius: 2rem; + box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15); + color: var(--black); + cursor: pointer; + height: 2rem; + letter-spacing: 0.05em; + outline: none; + -webkit-tap-highlight-color: transparent; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + width: 4rem; + transition: background-position 0.7s ease; + margin-top: 3px; + margin-bottom:2px; + margin-left: 10px; +} + +button:hover { + background-position: 100%; /* Move the background gradient on hover */ + filter: brightness(110%); /* Increase brightness on hover */ +} + +button:focus { + outline: none; /* Remove outline on focus */ +} + +.loading-screen { + display: none; + position: absolute; + top: 0; + left: 10; + width: 100%; + height: 100%; + background-color: rgba(0, 0, 0, 0.5); + z-index: 9999; + justify-content: center; + align-items: center; +} + +.loading-spinner { + border: 4px solid var(--yellow); + border-top: 4px solid var(--green); + border-radius: 50%; + width: 40px; + height: 40px; + align-self: center; + animation: spin 1s linear infinite; + margin-left: 10px; +} + +@keyframes spin { + 0% { transform: rotate(0deg); } + 100% { transform: rotate(360deg); } +} +.additional-info { + display: none; + margin-top: 5px; /* Adjust spacing as needed */ +} + +.custom-button { + display: none; + margin-top: 5px; /* Adjust spacing as needed */ +} + +/* Hide title on hover */ +li:hover h3 { + display: none; +} \ No newline at end of file diff --git a/extension/styles/text_input.css b/extension/styles/text_input.css index 19e1412c..4072c636 100644 --- a/extension/styles/text_input.css +++ b/extension/styles/text_input.css @@ -45,6 +45,11 @@ p{ width: 150px; margin-bottom: 10px; } +#title { + height: 20px; + width: 150px; + margin-bottom: 5px; +} :root { --yellow: #e8f222; --green: #82ea27;