diff --git a/extension/html/index.html b/extension/html/index.html index d5b53a6..cedb7c2 100644 --- a/extension/html/index.html +++ b/extension/html/index.html @@ -13,6 +13,7 @@

EduAid

Welcome to EduAid 🚀

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

+
diff --git a/extension/html/past_quizzes.html b/extension/html/past_quizzes.html new file mode 100644 index 0000000..78699f2 --- /dev/null +++ b/extension/html/past_quizzes.html @@ -0,0 +1,17 @@ + + + + + + Past Quizzes - EduAid + + + + +
+
+
+ + + + diff --git a/extension/js/index.js b/extension/js/index.js index 97144fd..28df800 100644 --- 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" }); -}); \ No newline at end of file + + 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 new file mode 100644 index 0000000..78a7ab6 --- /dev/null +++ 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 = `Q${qIndex + 1}: ${question}
A: ${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 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 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 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 index 58bdd94..dcf41d1 100644 --- 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 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 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 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 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 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 element and revoke the Blob URL + document.body.removeChild(downloadLink); + URL.revokeObjectURL(blobUrl); + }); + + backButton.addEventListener("click", function () { + window.location.href = "../html/text_input.html" + }); }); \ No newline at end of file diff --git a/extension/js/text_input.js b/extension/js/text_input.js index bf65bb9..de605ae 100644 --- 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."); } - }); \ No newline at end of file + loadingScreen.style.display = "none"; + } +}); \ No newline at end of file diff --git a/extension/js/util.js b/extension/js/util.js new file mode 100644 index 0000000..a7a72fb --- /dev/null +++ b/extension/js/util.js @@ -0,0 +1,4 @@ + +export { + storeInTextFile +} \ No newline at end of file diff --git a/extension/styles/index.css b/extension/styles/index.css index 8c0bae4..24e986e 100644 --- a/extension/styles/index.css +++ b/extension/styles/index.css @@ -1,48 +1,51 @@ +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: 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; - +h1 { + font-size: 24px; } -img{ - width: 32px; - height: 32px; - margin-right: 10px; - + +main { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + /* height: calc(101vh - 102px); Adjust this height value as needed */ } -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 */ - } - h2 { - font-size: 28px; - margin-bottom: 10px; - } -p{ - margin-left: 2px; - margin-right: 2px; - padding-left: 1px; - padding-right: 1px; - text-align: left; +h2 { + font-size: 28px; + margin-bottom: 10px; +} + +p { + margin-left: 2px; + margin-right: 2px; + padding-left: 1px; + padding-right: 1px; + text-align: left; } + :root { --yellow: #e8f222; --green: #82ea27; @@ -71,13 +74,16 @@ button { -ms-user-select: none; user-select: none; width: 7rem; - transition: background-position 0.7s ease; /* Add transition for background position */ - margin-bottom: 1px; + transition: background-position 0.7s ease; + /* Add transition for background position */ + margin-bottom: 2px; + margin-top: 2px; } /* Style the button on hover */ button:hover { - background-position: 100%; /* Move the background gradient on hover */ + background-position: 100%; + /* Move the background gradient on hover */ } /* Add animation for button hover effect */ @@ -85,13 +91,14 @@ button:hover { 0% { background-position: 0% 50%; } + 100% { background-position: 100%; } } -#welcome{ +#welcome { - font-size: 22px; + font-size: 22px; } \ No newline at end of file diff --git a/extension/styles/past_quizzes.css b/extension/styles/past_quizzes.css new file mode 100644 index 0000000..b1dd6e9 --- /dev/null +++ b/extension/styles/past_quizzes.css @@ -0,0 +1,118 @@ +body { + background-color: #FBAB7E; + background-image: linear-gradient(62deg, #FBAB7E 0%, #F7CE68 100%); + font-family: 'Inter', sans-serif; + font-weight: 400; + color: #333; + /* Text color */ +} + +main { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + padding: 20px; +} + +.quiz-item { + margin-bottom: 20px; + width: 100%; + border-radius: 10px; + box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); + background-color: #fff; +} + +.active { + background-color: #ccc; + /* Active header background color */ +} + +.accordion { + background-color: #f9f9f9; + /* Background color of accordion header */ + color: #333; + /* Text color */ + cursor: pointer; + padding: 18px; + /* Spacing around the accordion header */ + width: 100%; + text-align: left; + /* Align text to the left within the accordion header */ + border: none; + outline: none; + transition: background-color 0.3s ease; + /* Smooth transition for background color change */ +} + +/* Hover Effect */ +.accordion:hover { + background-color: #ddd; + /* Change background color on hover */ +} + +/* Active State */ +.accordion.active { + background-color: #ccc; + /* Change background color when accordion is active (open) */ +} + +/* Content Style */ +.content { + padding: 0 18px; + /* Spacing around the content */ + max-height: 0; + /* Initially hide content */ + overflow: hidden; + transition: max-height 0.3s ease; + /* Smooth transition for opening/closing content */ +} + +.content p { + margin: 0; + padding: 5px 0; + font-size: 16px; + /* Font size for questions and answers */ + line-height: 1.5; +} + +.content strong { + font-weight: bold; + color: #555; + /* Color for question labels */ +} + +.button-row { + display: flex; + justify-content: space-between; + margin-top: 10px; +} + +/* Button Style */ +.button-row button { + border: none; + padding: 10px; + cursor: pointer; + transition: background-color 0.3s ease; + /* Rounded bottom corners */ + width: 100%; +} + + + +/* Save Button Style */ +.save-button { + background-color: #4ABDAC; + /* Light blue color */ + color: #fff; + border-radius: 0 0 10px 10px; + /* Bottom right corner rounded */ +} + + + + +.save-button:hover { + background-color: #338E91; + /* Darker shade of blue */ +} \ No newline at end of file