Update answer on stack of array

statics/script.js

@@ -123,11 +123,22 @@ questionEl.addEventListener("keydown", (e) => {
 
 /* ─────────────────────── helpers ───────────────────────────── */
 function displayQa(data) {
-  typeEffect(questionEl, data.question || "[no question]");
-  const html = DOMPurify.sanitize(marked.parse(data.answer || ""));
-  setTimeout(() => { answerEl.innerHTML = html; }, 400);  // nice stagger
+  let qHtml = "", aHtml = "";
+  // Parse and bind JSON now as Q&A can be an array with more than 1 component(s)
+  const qaList = Array.isArray(data) ? data : [data];
+  qaList.forEach((item, idx) => {
+    const q = item.question || "[no question]";
+    const a = item.answer   || "[no answer]";
+    qHtml += `Q${idx + 1}: ${q}\n`;
+    aHtml += `<strong>Q${idx + 1}:</strong> ${DOMPurify.sanitize(marked.parseInline(q))}<br>`;
+    aHtml += `<strong>A${idx + 1}:</strong> ${DOMPurify.sanitize(marked.parse(a))}<hr>`;
+  });
+  // Type effect with trimming element
+  typeEffect(questionEl, qHtml.trim());
+  setTimeout(() => { answerEl.innerHTML = aHtml.trim(); }, 400);
 }
 
+
 /* ─────────────────────── bootstrap ─────────────────────────── */
 window.addEventListener("DOMContentLoaded", async () => {
   try {