Update index.html

.gitignore

@@ -0,0 +1,2 @@
+.DS_Store
+

app/index.html

@@ -374,219 +374,194 @@ function generatePDF() {
       let jsonDataFetched = false;
       let jsonData = null;
       let currentFileName = null;
+      let topics = [];
+
+      // Cache DOM elements
+      const domCache = {
+          rightCol: document.getElementById("right-col"),
+          msbox: document.getElementById("markscheme-box"),
+          reportbox: document.getElementById("report-box"),
+          msbox2: document.getElementById("markscheme-box2"),
+          repbox2: document.getElementById("report-box2"),
+          leftCol: document.getElementById('left-col')
+      };
+
+      const fileNameMap = {
+          'bioqb': 'Biology QB.json',
+          'bmqb': 'Business Management QB.json',
+          'chemqb': 'Chemistry QB.json',
+          'compsciqb': 'Computer Science QB.json',
+          'destechqb': 'Design Technology QB.json',
+          'digsocqb': 'Digital Society QB.json',
+          'econqb': 'Economics QB.json',
+          'essqb': 'ESS QB.json',
+          'geoqb': 'Geography QB.json',
+          'histqb': 'History QB.json',
+          'mathaaqb': 'Math AA QB.json',
+          'mathaiqb': 'Math AI QB.json',
+          'phyqb': 'Physics QB.json',
+          'psychqb': 'Psychology QB.json',
+          'sehsqb': 'SEHS QB.json'
+      };
+
+      function createSVGElement(questionid) {
+          const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
+          const attributes = {
+              "width": "2rem",
+              "height": "2rem",
+              "viewBox": "0 0 24 24",
+              "fill": "none",
+              "stroke": "currentColor",
+              "stroke-width": "2",
+              "stroke-linecap": "round",
+              "stroke-linejoin": "round"
+          };
+
+          Object.entries(attributes).forEach(([key, value]) => {
+              svg.setAttribute(key, value);
+          });
+
+          svg.classList.add("cursor-pointer", "text-primary", "hidden");
+          svg.innerHTML = `
+              <rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect>
+              <line x1="9" y1="9" x2="15" y2="15"></line>
+              <line x1="15" y1="9" x2="9" y2="15"></line>
+          `;
+          return svg;
+      }
 
       function loadJSON(filename) {
           fetch(`../assets/jsonqb/${filename}`)
               .then(response => response.json())
-            .then(jsonData => {
+              .then(data => {
-                jsonDataFetched = true
+                  jsonDataFetched = true;
                   currentFileName = filename;
 
-                const allTopics = jsonData.flatMap(item => item.topics);
+                  // Process topics once
-                topics = [...new Set(allTopics)];
+                  topics = [...new Set(data.flatMap(item => item.topics))].sort();
                   renderTopics();
 
-                jsonData.forEach(item => {
+                  // Create document fragment for batch DOM updates
-                    const question = item.Question;
+                  const fragment = document.createDocumentFragment();
-                    let questionid = item.question_id;
-                    const markscheme = item.Markscheme;
-                    const report = item['Examiners report'];
-                    const topics = item['topics'];
-                    const subtopics = item['subtopics'];
 
-                    const rightCol = document.getElementById("right-col");
+                  // Process all items at once
-                    const msbox = document.getElementById("markscheme-box");
+                  data.forEach(item => {
-                    const reportbox = document.getElementById("report-box")
+                      const {
-
+                          Question: question,
-                    function toggleMScont(questionid) {
+                          question_id: questionid,
-                        const markschemeContainer = document.getElementById(`markscheme-${questionid} ${filename}`);
+                          Markscheme: markscheme,
-                        toggleMSSvg.classList.toggle('hidden');
+                          'Examiners report': report,
-                        markschemeContainer.classList.toggle('hidden');
+                          topics,
-                    }
+                          subtopics
-                
+                      } = item;
-                    function toggleRepcont(questionid) {
-                        const reportContainer = document.getElementById(`report-${questionid} ${filename}`);
-                        toggleRepSvg.classList.toggle('hidden');
-                        reportContainer.classList.toggle('hidden');
-                    }
-                    
-                    const insertHTML = (htmlString, container) => {
-                        container.insertAdjacentHTML('beforeend', htmlString);
-                    }
 
                       const bigQuestionBox = document.createElement("div");
                       bigQuestionBox.id = questionid;
-                    topics.forEach(topic => {
-                        bigQuestionBox.classList.add(topic.trim());
-                    });
-                    subtopics.forEach(subtopic => {
-                        bigQuestionBox.classList.add(subtopic.trim());
-                    });
-                    bigQuestionBox.classList.add("hidden")
-                    rightCol.appendChild(bigQuestionBox);
 
-                    const h3 = document.createElement("h3");
+                      // Add all classes at once
-                    bigQuestionBox.appendChild(h3);
+                      const allClasses = [...topics.map(t => t.trim()),
-                    insertHTML(questionid, h3);
+                                        ...subtopics.map(s => s.trim()),
-
+                                        "hidden"];
-                    const h4_1 = document.createElement("h4");
+                      bigQuestionBox.classList.add(...allClasses);
-                    h4_1.innerHTML = `<b>Topics:</b> ${topics}`;
-                    bigQuestionBox.appendChild(h4_1);
-
-                    const h4_2 = document.createElement("h4");
-                    h4_2.innerHTML = `<b>Subtopics:</b> ${subtopics}`;
-                    bigQuestionBox.appendChild(h4_2);                 
-
-                    const p = document.createElement("p");
-                    bigQuestionBox.appendChild(p);
-
-                    const questionContainer = document.createElement("div");
-                    questionContainer.classList.add("square-container");
-                    bigQuestionBox.appendChild(questionContainer);
 
+                      // Create buttons container
                       const btnContainer = document.createElement("div");
                       btnContainer.classList.add("btn-container");
 
-                    const markschemeBtn = document.createElement("button");
+                      const buttons = [
-                    markschemeBtn.classList.add("btn-secondary");
+                          { text: "Markscheme", handler: () => { toggleMS(); toggleMScont(questionid); } },
-                    markschemeBtn.textContent = "Markscheme";
+                          { text: "Examiners report", handler: () => { toggleR(); toggleRepcont(questionid); } },
+                          { text: "Add to PDF", handler: createPDFButtonHandler(questionid) }
+                      ].map(createButton);
 
-                    markschemeBtn.addEventListener('click', function() {
+                      buttons.forEach(button => btnContainer.appendChild(button));
-                        toggleMS();
-                        toggleMScont(questionid);
-                    });
 
-                    const reportBtn = document.createElement("button");
+                      // Build question content
-                    reportBtn.classList.add("btn-secondary");
+                      const content = `
-                    reportBtn.textContent = "Examiners report";
+                          <h3>${questionid}</h3>
+                          <h4><b>Topics:</b> ${topics.join(', ')}</h4>
+                          <h4><b>Subtopics:</b> ${subtopics.join(', ')}</h4>
+                          <div class="square-container">${question}</div>
+                      `;
 
-                    reportBtn.addEventListener('click', function() {
+                      bigQuestionBox.innerHTML = content;
-                        toggleR();
+                      bigQuestionBox.querySelector('h3').after(btnContainer);
-                        toggleRepcont(questionid);
-                    });
-
-                    const addtopdfBtn = document.createElement("button");
-                    addtopdfBtn.classList.add("btn-secondary");
-                    addtopdfBtn.textContent = "Add to PDF";
-
-                    addtopdfBtn.addEventListener('click', function() {
-                      let selectedQuestionIds = JSON.parse(sessionStorage.getItem('selectedQuestionIds')) || [];
-                      const index = selectedQuestionIds.indexOf(questionid);
-                      if (index !== -1) {
-                          // if present, remove it
-                          selectedQuestionIds.splice(index, 1);
-                          addtopdfBtn.style.backgroundColor = '#55ad95';
-                          addtopdfBtn.textContent = 'Add to PDF';
-                      } else {
-                          // if not present, add it
-                          selectedQuestionIds.push(questionid);
-                          addtopdfBtn.style.backgroundColor = '#e03b3b';
-                          addtopdfBtn.textContent = 'Added!';
-                      }
-                      sessionStorage.setItem('selectedQuestionIds', JSON.stringify(selectedQuestionIds));
-                    });
-
-                    btnContainer.appendChild(markschemeBtn);
-                    btnContainer.appendChild(reportBtn);
-                    btnContainer.appendChild(addtopdfBtn);
-                    p.appendChild(btnContainer);
-
-                    insertHTML(question, questionContainer);
 
+                      // Add containers for markscheme and report
                       if (markscheme) {
-                        const markschemeContainer = document.createElement("div");
+                          createContainer('markscheme', questionid, filename, markscheme, domCache.msbox);
-                        markschemeContainer.classList.add("square-container");
-                        markschemeContainer.classList.add("hidden");
-                        markschemeContainer.id = `markscheme-${questionid} ${filename}`;
-                        msbox.appendChild(markschemeContainer);
-                        insertHTML(markscheme, markschemeContainer);
                       }
 
                       if (report) {
-                        const reportContainer = document.createElement("div");
+                          createContainer('report', questionid, filename, report, domCache.reportbox);
-                        reportContainer.classList.add("square-container");
-                        reportContainer.classList.add("hidden");
-                        reportContainer.id = `report-${questionid} ${filename}`;
-                        reportbox.appendChild(reportContainer);
-                        insertHTML(report, reportContainer);
                       }
-                    const toggleMSSvg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
+
+                      // Create and attach SVG elements
+                      const toggleMSSvg = createSVGElement(questionid);
                       toggleMSSvg.id = `toggleMSSvg-${questionid}`;
-                    toggleMSSvg.setAttribute("xmlns", "http://www.w3.org/2000/svg");
-                    toggleMSSvg.setAttribute("width", "2rem");
-                    toggleMSSvg.setAttribute("height", "2rem");
-                    toggleMSSvg.setAttribute("viewBox", "0 0 24 24");
-                    toggleMSSvg.setAttribute("fill", "none");
-                    toggleMSSvg.setAttribute("stroke", "currentColor");
-                    toggleMSSvg.setAttribute("stroke-width", "2");
-                    toggleMSSvg.setAttribute("stroke-linecap", "round");
-                    toggleMSSvg.setAttribute("stroke-linejoin", "round");
-                    toggleMSSvg.classList.add("cursor-pointer");
-                    toggleMSSvg.classList.add("text-primary");
-                    toggleMSSvg.classList.add("hidden");
-                    toggleMSSvg.innerHTML = `
-                    <rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect>
-                    <line x1="9" y1="9" x2="15" y2="15"></line>
-                    <line x1="15" y1="9" x2="9" y2="15"></line>
-                    `;
-                    const msbox2 = document.getElementById("markscheme-box2");
-                    msbox2.appendChild(toggleMSSvg);
 
-                    const toggleRepSvg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
+                      const toggleRepSvg = createSVGElement(questionid);
                       toggleRepSvg.id = `toggleRepSvg-${questionid}`;
-                    toggleRepSvg.setAttribute("xmlns", "http://www.w3.org/2000/svg");
-                    toggleRepSvg.setAttribute("width", "2rem");
-                    toggleRepSvg.setAttribute("height", "2rem");
-                    toggleRepSvg.setAttribute("viewBox", "0 0 24 24");
-                    toggleRepSvg.setAttribute("fill", "none");
-                    toggleRepSvg.setAttribute("stroke", "currentColor");
-                    toggleRepSvg.setAttribute("stroke-width", "2");
-                    toggleRepSvg.setAttribute("stroke-linecap", "round");
-                    toggleRepSvg.setAttribute("stroke-linejoin", "round");
-                    toggleRepSvg.classList.add("cursor-pointer");
-                    toggleRepSvg.classList.add("text-primary");
-                    toggleRepSvg.classList.add("hidden");
-                    toggleRepSvg.innerHTML = `
-                    <rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect>
-                    <line x1="9" y1="9" x2="15" y2="15"></line>
-                    <line x1="15" y1="9" x2="9" y2="15"></line>
-                    `;
-                    const repbox2 = document.getElementById("report-box2");
-                    repbox2.appendChild(toggleRepSvg);
 
-                    toggleMSSvg.addEventListener('click', function() {
+                      domCache.msbox2.appendChild(toggleMSSvg);
+                      domCache.repbox2.appendChild(toggleRepSvg);
+
+                      // Add SVG event listeners
+                      toggleMSSvg.addEventListener('click', () => {
                           toggleMScont(questionid);
                           toggleMS();
                       });
 
-                    toggleRepSvg.addEventListener('click', function() {
+                      toggleRepSvg.addEventListener('click', () => {
                           toggleRepcont(questionid);
                           toggleR();
                       });
 
-                    function updateSquareContainers() {
+                      fragment.appendChild(bigQuestionBox);
-                    const squareContainers = document.querySelectorAll('.square-container');
-
-                    squareContainers.forEach(container => {
-                        const children = container.children;
-
-                        if (children.length === 1 && children[0].classList.contains('question')) {
-                            children[0].classList.replace('question', 'specification');
-                        }
                   });
-                    }
+
+                  domCache.rightCol.appendChild(fragment);
                   updateSquareContainers();
-
-                });
-                
-
               })
               .catch(error => console.error('Error fetching JSON:', error));
       }
 
+      function createButton({ text, handler, className = 'btn-secondary' }) {
+          const button = document.createElement("button");
+          button.classList.add(className);
+          button.textContent = text;
+          button.addEventListener('click', handler);
+          return button;
+      }
+
+      function createPDFButtonHandler(questionid) {
+          return function() {
+              let selectedQuestionIds = JSON.parse(sessionStorage.getItem('selectedQuestionIds')) || [];
+              const index = selectedQuestionIds.indexOf(questionid);
+              if (index !== -1) {
+                  selectedQuestionIds.splice(index, 1);
+                  this.style.backgroundColor = '#55ad95';
+                  this.textContent = 'Add to PDF';
+              } else {
+                  selectedQuestionIds.push(questionid);
+                  this.style.backgroundColor = '#e03b3b';
+                  this.textContent = 'Added!';
+              }
+              sessionStorage.setItem('selectedQuestionIds', JSON.stringify(selectedQuestionIds));
+          };
+      }
+
+      function createContainer(type, questionid, filename, content, parent) {
+          const container = document.createElement("div");
+          container.classList.add("square-container", "hidden");
+          container.id = `${type}-${questionid} ${filename}`;
+          container.innerHTML = content;
+          parent.appendChild(container);
+      }
+
       function renderTopics() {
-    const leftCol = document.getElementById('left-col');
+          const fragment = document.createDocumentFragment();
-    topics.sort();
+
           topics.forEach(topic => {
               const label = document.createElement('label');
               label.classList.add('topic-label');
@@ -596,85 +571,50 @@ function generatePDF() {
               checkbox.name = 'topic';
               checkbox.value = topic;
 
-        label.appendChild(checkbox);
+              checkbox.addEventListener('change', () => {
-        label.appendChild(document.createTextNode(topic));
+                  document.querySelectorAll(`div[class*="${topic}"]`)
-
+                      .forEach(div => div.classList.toggle('hidden'));
-        leftCol.appendChild(label);
-
-        checkbox.addEventListener('change', function() {
-            const topicDivs = document.querySelectorAll(`div[class^="${topic}"]`);
-            topicDivs.forEach(div => {
-                div.classList.toggle('hidden');
               });
+
+              label.append(checkbox, topic);
+              fragment.appendChild(label);
           });
+
+          domCache.leftCol.appendChild(fragment);
+      }
+
+      function updateSquareContainers() {
+          document.querySelectorAll('.square-container').forEach(container => {
+              const firstChild = container.children[0];
+              if (firstChild?.classList.contains('question')) {
+                  firstChild.classList.replace('question', 'specification');
+              }
           });
       }
 
-    document.addEventListener('DOMContentLoaded', function () {
+      // Event Listeners
-    document.addEventListener('click', function (event) {
+      document.addEventListener('DOMContentLoaded', () => {
-        const clickedElement = event.target;
+          document.addEventListener('click', event => {
-        const id = clickedElement.id;
+              const filename = fileNameMap[event.target.id];
+              if (!filename) return;
 
-        if (id) {
-            let filename;
-            if (id === 'bioqb') {
-                filename = 'Biology QB.json';
-            } else if (id === 'bmqb') {
-                filename = 'Business Management QB.json';
-            } else if (id === 'chemqb') {
-                filename = 'Chemistry QB.json';
-            } else if (id === 'compsciqb') {
-                filename = 'Computer Science QB.json';
-            } else if (id === 'destechqb') {
-                filename = 'Design Technology QB.json';
-            } else if (id === 'digsocqb') {
-                filename = 'Digital Society QB.json';
-            } else if (id === 'econqb') {
-                filename = 'Economics QB.json';
-            } else if (id === 'essqb') {
-                filename = 'ESS QB.json';
-            } else if (id === 'geoqb') {
-                filename = 'Geography QB.json';
-            } else if (id === 'histqb') {
-                filename = 'History QB.json';
-            } else if (id === 'mathaaqb') {
-                filename = 'Math AA QB.json';
-            } else if (id === 'mathaiqb') {
-                filename = 'Math AI QB.json';
-            } else if (id === 'phyqb') {
-                filename = 'Physics QB.json';
-            } else if (id === 'psychqb') {
-                filename = 'Psychology QB.json';
-            } else if (id === 'sehsqb') {
-                filename = 'SEHS QB.json';
-            }
-
-            if (filename) {
               if (jsonDataFetched && filename !== currentFileName) {
-                      const rightCol = document.getElementById('right-col');
+                  resetState();
-                      rightCol.innerHTML = '';
-                      const topicLabels = document.querySelectorAll('.topic-label');
-                      topicLabels.forEach(label => label.remove());
-                      let selectedQuestionIds = []
-                      sessionStorage.setItem('selectedQuestionIds', JSON.stringify(selectedQuestionIds));
                   loadJSON(filename);
-                    } else if (jsonDataFetched && filename == currentFileName) {
+              } else if (jsonDataFetched && filename === currentFileName) {
-                      const rightCol = document.getElementById('right-col');
+                  resetState();
-                      rightCol.innerHTML = '';
-                      const topicLabels = document.querySelectorAll('.topic-label');
-                      topicLabels.forEach(label => label.remove());
                   jsonDataFetched = false;
-                      let selectedQuestionIds = []
-                      sessionStorage.setItem('selectedQuestionIds', JSON.stringify(selectedQuestionIds));
               } else if (!jsonDataFetched) {
-                      let selectedQuestionIds = []
-                      sessionStorage.setItem('selectedQuestionIds', JSON.stringify(selectedQuestionIds));
                   loadJSON(filename);
               }
-            }
-          }
           });
       });
+
+      function resetState() {
+          domCache.rightCol.innerHTML = '';
+          document.querySelectorAll('.topic-label').forEach(label => label.remove());
+          sessionStorage.setItem('selectedQuestionIds', '[]');
+      }
   </script>
 </body>