Updated answers.js

Author: jacobfh1

javascripts/answers.js

@@ -1,39 +1,64 @@
 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();
-		  });
-  	};
+  // Process .question elements to add corresponding inputs
+  const questions = document.getElementsByClassName("question");
+  for (const [index, element] of Array.from(questions).entries()) {
+    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);
+
+    // Save answers on input change
+    ansElem.addEventListener("input", saveAnswers);
+  }
+
+  // Save table inputs
+  const tableInputs = document.querySelectorAll("table input[type='text']");
+  tableInputs.forEach(input => {
+    input.addEventListener("input", saveAnswers);
+  });
+
+  // Load previously saved answers
+  loadAnswers();
 });
 
-// Function to save answers to localStorage
-function saveTableAnswers() {
-  const inputs = document.querySelectorAll('table input[type="text"]');
-  inputs.forEach(input => {
-    const value = input.value || ''; // Get the input value or an empty string
-    localStorage.setItem(input.id, value); // Save value in localStorage using the input's ID
+// Function to save all answers (textarea and table inputs)
+function saveAnswers() {
+  // Save textareas
+  const textareas = document.querySelectorAll('textarea[id^="question"]');
+  textareas.forEach(textarea => {
+    const answer = textarea.value || '';
+    localStorage.setItem(textarea.id, answer);
   });
+
+  // Save table inputs
+  const tableInputs = document.querySelectorAll("table input[type='text']");
+  tableInputs.forEach(input => {
+    const answer = input.value || '';
+    const inputId = input.id || `table-input-${Array.from(tableInputs).indexOf(input)}`;
+    localStorage.setItem(inputId, answer);
+  });
+
   console.log("Answers saved to local storage.");
 }
 
-// Load answers from localStorage
-function loadTableAnswers() {
-  const inputs = document.querySelectorAll('table input[type="text"]');
-  inputs.forEach(input => {
-    const savedValue = localStorage.getItem(input.id) || ''; // Load the saved value or an empty string
-    input.value = savedValue; // Set the value to the input field
+// Function to load saved answers
+function loadAnswers() {
+  // Load textareas
+  const textareas = document.querySelectorAll('textarea[id^="question"]');
+  textareas.forEach(textarea => {
+    const savedAnswer = localStorage.getItem(textarea.id) || '';
+    textarea.value = savedAnswer;
   });
+
+  // Load table inputs
+  const tableInputs = document.querySelectorAll("table input[type='text']");
+  tableInputs.forEach(input => {
+    const inputId = input.id || `table-input-${Array.from(tableInputs).indexOf(input)}`;
+    const savedAnswer = localStorage.getItem(inputId) || '';
+    input.value = savedAnswer;
+  });
+
   console.log("Answers loaded from local storage.");
 }
 
@@ -72,7 +97,7 @@ window.addEventListener("load", function() {
 });
 
 
-// Function to download the answers as a PDF with a more professional layout
+// Function to download the answers as a PDF
 document.getElementById('downloadBtn').addEventListener('click', function() {
   const questions = document.querySelectorAll('.question');
   let answersHTML = `
@@ -81,24 +106,25 @@ document.getElementById('downloadBtn').addEventListener('click', function() {
       <h2 style="font-size: 18px;">Submitter</h2>
       <table>`;
 
+  // Include table data
   const table = document.querySelector('table.personal-details');
   for (var i = 0, row; row = table.rows[i]; i++) {
-     answersHTML += `<tr><td style="font-weight: bold;">${row.cells[0].textContent}</td><td>${row.cells[1].children[0].value}</td></tr>`;
+    answersHTML += `<tr><td style="font-weight: bold;">${row.cells[0].textContent}</td><td>${row.cells[1].children[0].value}</td></tr>`;
   }
   answersHTML += `</table>`;
 
   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
+    const questionNumber = index + 1;
+    const questionText = question.innerHTML;
+    const answerText = document.getElementById(`question${questionNumber}`).value;
 
     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
+  answersHTML += `</div>`;
 
   const opt = {
     margin: 1,