Initial refactoring of teachingmodule.qmd

_quarto.yml

@@ -26,3 +26,4 @@ format:
           light: [materia, css/materialight.scss]
           dark: darkly
     toc: true
+    css: css/styles.css

css/styles.css

@@ -7,4 +7,72 @@
   .layout-border {
     background-color:  #f0f0f0;
     padding: 20px;
-  }
+  }
+
+body {
+    counter-reset: question-counter;
+}
+
+.question {
+    counter-increment: question-counter;
+    font-weight: bold;
+    font-size: 120%;
+}
+
+.question::before {
+  content: "Question " counter(question-counter) ": ";
+}
+
+
+/* Styling the textarea */
+
+.input-box:focus {
+  border-color: #0073e6;
+  box-shadow: 0px 4px 8px rgba(0, 115, 230, 0.2);
+  outline: none;
+}
+
+/* Styling the download button */
+.download-button {
+  background-color: #0073e6;
+  color: white;
+  padding: 10px 20px;
+  border: none;
+  border-radius: 4px;
+  font-size: 16px;
+  cursor: pointer;
+  transition: background-color 0.3s, box-shadow 0.3s;
+}
+
+.download-button:hover {
+  background-color: #005bb5;
+  box-shadow: 0px 4px 8px rgba(0, 115, 230, 0.3);
+}
+
+.input-box {
+  width: 100%;
+  min-height: 40px; /* Adjusted for input height */
+  padding: 10px;
+  margin-top: 5px;
+  margin-bottom: 5px;
+  border: 1px solid #ccc; /* Ensure consistent border */
+  border-radius: 5px;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+  font-size: 16px; /* Ensure consistent font size */
+  box-sizing: border-box; /* Ensures padding is included in total width */
+}
+
+.download-button {
+  background-color: #007bff; /* Blue button */
+  color: white;
+  padding: 10px 20px;
+  border: none;
+  border-radius: 5px;
+  cursor: pointer;
+  font-size: 16px;
+  margin-top: 20px;
+}
+
+.download-button:hover {
+  background-color: #0056b3; /* Darker blue on hover */
+}

javascripts/answers.js

@@ -0,0 +1,74 @@
+window.addEventListener("load", function() {
+	var questions = document.getElementsByClassName("question");
+	console.log(questions);
+	for (const [index, element] of Array.from(questions).entries()) {
+  		// <textarea id="question27" placeholder="Type your answer here..." class="input-box"></textarea>
+		const ansElem = document.createElement("textarea");
+		ansElem.setAttribute("id", "question" + (index + 1));
+		ansElem.setAttribute("placeholder", "Type your answer here...");
+		ansElem.classList.add("input-box");
+  		element.insertAdjacentElement("afterend", ansElem);
+  		// Automatically resize textareas based on input
+  		ansElem.addEventListener('input', function() {
+		    this.style.height = 'auto';
+		    this.style.height = (this.scrollHeight) + 'px';
+		    saveAnswers();
+		  });
+  	};
+});
+
+// Function to save answers to localStorage
+function saveAnswers() {
+  // Select all textareas
+  const textareas = document.querySelectorAll('textarea[id^="question"]');
+  textareas.forEach(textarea => {
+    const answer = textarea.value || '';
+    localStorage.setItem(textarea.id, answer);
+  });
+  console.log("Answers saved to local storage.");
+}
+
+// Load answers from localStorage
+function loadAnswers() {
+  const textareas = document.querySelectorAll('textarea[id^="question"]');
+  textareas.forEach(textarea => {
+    const savedAnswer = localStorage.getItem(textarea.id) || '';
+    textarea.value = savedAnswer;
+  });
+  console.log("Answers loaded from local storage.");
+}
+
+// Function to download the answers as a PDF with a more professional layout
+document.getElementById('downloadBtn').addEventListener('click', function() {
+  const questions = document.querySelectorAll('.question');
+  let answersHTML = `
+    <div style="font-family: Arial, sans-serif; padding: 20px;">
+      <h1 style="text-align: center; font-size: 24px;">Assignment Submission</h1>
+  `;
+
+  questions.forEach((question, index) => {
+    const questionNumber = index + 1; // Incrementing index for question number
+    const questionText = question.innerHTML; // Get the question text
+    const answerText = document.getElementById(`question${questionNumber}`).value; // Get the corresponding answer
+
+    answersHTML += `
+      <h2 style="font-size: 18px; margin-bottom: 5px;">${questionText}</h2>
+      <p style="font-size: 14px;">${answerText || 'No answer provided'}</p>
+    `;
+  });
+
+  answersHTML += `</div>`; // Closing the div
+
+  const opt = {
+    margin: 1,
+    filename: 'assignment_answers.pdf',
+    image: { type: 'jpeg', quality: 0.98 },
+    html2canvas: { scale: 2 },
+    jsPDF: { unit: 'in', format: 'letter', orientation: 'portrait' }
+  };
+
+  html2pdf().from(answersHTML).set(opt).save();
+});
+
+// Load answers when the page loads
+window.addEventListener("load", loadAnswers);