Merge branch 'main' into 'main'

Update index.html

See merge request ibdocs.2/pestlev3!1

.gitignore

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

app/index.html

@@ -36,7 +36,7 @@
       var modal2 = document.getElementById('markscheme');
       modal2.classList.toggle('hidden');
     }
-  
+
     function toggleR() {
       var modal3 = document.getElementById('report');
       modal3.classList.toggle('hidden');
@@ -44,10 +44,10 @@
 
     function toggleDarkMode() {
     const body = document.body;
-    body.classList.toggle('dark-mode');    
+    body.classList.toggle('dark-mode');
     const head = document.head;
     head.classList.toggle('dark-mode');
-    }    
+    }
   </script>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js"></script>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/html2pdf.js/0.9.2/html2pdf.bundle.min.js"></script>
@@ -371,311 +371,251 @@ function generatePDF() {
     </div>
   </div>
   <script>
-    let jsonDataFetched = false;
+      let jsonDataFetched = false;
-    let jsonData = null;
+      let jsonData = null;
-    let currentFileName = null;
+      let currentFileName = null;
+      let topics = [];
 
-    function loadJSON(filename) {
+      // Cache DOM elements
-        fetch(`../assets/jsonqb/${filename}`)
+      const domCache = {
-            .then(response => response.json())
+          rightCol: document.getElementById("right-col"),
-            .then(jsonData => {
+          msbox: document.getElementById("markscheme-box"),
-                jsonDataFetched = true
+          reportbox: document.getElementById("report-box"),
-                currentFileName = filename;
+          msbox2: document.getElementById("markscheme-box2"),
+          repbox2: document.getElementById("report-box2"),
+          leftCol: document.getElementById('left-col')
+      };
 
-                const allTopics = jsonData.flatMap(item => item.topics);
+      const fileNameMap = {
-                topics = [...new Set(allTopics)];
+          'bioqb': 'Biology QB.json',
-                renderTopics();
+          'bmqb': 'Business Management QB.json',
-                
+          'chemqb': 'Chemistry QB.json',
-                jsonData.forEach(item => {
+          'compsciqb': 'Computer Science QB.json',
-                    const question = item.Question;
+          'destechqb': 'Design Technology QB.json',
-                    let questionid = item.question_id;
+          'digsocqb': 'Digital Society QB.json',
-                    const markscheme = item.Markscheme;
+          'econqb': 'Economics QB.json',
-                    const report = item['Examiners report'];
+          'essqb': 'ESS QB.json',
-                    const topics = item['topics'];
+          'geoqb': 'Geography QB.json',
-                    const subtopics = item['subtopics'];
+          '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'
+      };
 
-                    const rightCol = document.getElementById("right-col");
+      function createSVGElement(questionid) {
-                    const msbox = document.getElementById("markscheme-box");
+          const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
-                    const reportbox = document.getElementById("report-box")
+          const attributes = {
+              "width": "2rem",
+              "height": "2rem",
+              "viewBox": "0 0 24 24",
+              "fill": "none",
+              "stroke": "currentColor",
+              "stroke-width": "2",
+              "stroke-linecap": "round",
+              "stroke-linejoin": "round"
+          };
 
-                    function toggleMScont(questionid) {
+          Object.entries(attributes).forEach(([key, value]) => {
-                        const markschemeContainer = document.getElementById(`markscheme-${questionid} ${filename}`);
+              svg.setAttribute(key, value);
-                        toggleMSSvg.classList.toggle('hidden');
-                        markschemeContainer.classList.toggle('hidden');
-                    }
-                
-                    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");
-                    bigQuestionBox.appendChild(h3);
-                    insertHTML(questionid, h3);
-
-                    const h4_1 = document.createElement("h4");
-                    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);
-
-                    const btnContainer = document.createElement("div");
-                    btnContainer.classList.add("btn-container");
-
-                    const markschemeBtn = document.createElement("button");
-                    markschemeBtn.classList.add("btn-secondary");
-                    markschemeBtn.textContent = "Markscheme";
-
-                    markschemeBtn.addEventListener('click', function() {
-                        toggleMS();
-                        toggleMScont(questionid);
-                    });
-                    
-                    const reportBtn = document.createElement("button");
-                    reportBtn.classList.add("btn-secondary");
-                    reportBtn.textContent = "Examiners report";
-
-                    reportBtn.addEventListener('click', function() {
-                        toggleR();
-                        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);
-
-                    if (markscheme) {
-                        const markschemeContainer = document.createElement("div");
-                        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");
-                        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");
-                    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");
-                    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() {
-                    toggleMScont(questionid);
-                    toggleMS();
-                    });
-
-                    toggleRepSvg.addEventListener('click', function() {
-                    toggleRepcont(questionid);
-                    toggleR();
-                    });
-                    
-                    function updateSquareContainers() {
-                    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');
-                        }
-                    });
-                    }
-                    updateSquareContainers();
-
-                });
-                
-
-            })
-            .catch(error => console.error('Error fetching JSON:', error));
-    }
-    
-    function renderTopics() {
-    const leftCol = document.getElementById('left-col');
-    topics.sort();
-    topics.forEach(topic => {
-        const label = document.createElement('label');
-        label.classList.add('topic-label');
-        
-        const checkbox = document.createElement('input');
-        checkbox.type = 'checkbox';
-        checkbox.name = 'topic';
-        checkbox.value = topic;
-
-        label.appendChild(checkbox);
-        label.appendChild(document.createTextNode(topic));
-
-        leftCol.appendChild(label);
-
-        checkbox.addEventListener('change', function() {
-            const topicDivs = document.querySelectorAll(`div[class^="${topic}"]`);
-            topicDivs.forEach(div => {
-                div.classList.toggle('hidden');
-            });
-        });
-        });
-    }
-
-    document.addEventListener('DOMContentLoaded', function () {
-    document.addEventListener('click', function (event) {
-        const clickedElement = event.target;
-        const id = clickedElement.id;
-
-        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');
-                      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) {
-                      const rightCol = document.getElementById('right-col');
-                      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);
-                }
-            }
-          }
           });
-        });
+
-  </script>  
+          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(data => {
+                  jsonDataFetched = true;
+                  currentFileName = filename;
+
+                  // Process topics once
+                  topics = [...new Set(data.flatMap(item => item.topics))].sort();
+                  renderTopics();
+
+                  // Create document fragment for batch DOM updates
+                  const fragment = document.createDocumentFragment();
+
+                  // Process all items at once
+                  data.forEach(item => {
+                      const {
+                          Question: question,
+                          question_id: questionid,
+                          Markscheme: markscheme,
+                          'Examiners report': report,
+                          topics,
+                          subtopics
+                      } = item;
+
+                      const bigQuestionBox = document.createElement("div");
+                      bigQuestionBox.id = questionid;
+
+                      // Add all classes at once
+                      const allClasses = [...topics.map(t => t.trim()),
+                                        ...subtopics.map(s => s.trim()),
+                                        "hidden"];
+                      bigQuestionBox.classList.add(...allClasses);
+
+                      // Create buttons container
+                      const btnContainer = document.createElement("div");
+                      btnContainer.classList.add("btn-container");
+
+                      const buttons = [
+                          { text: "Markscheme", handler: () => { toggleMS(); toggleMScont(questionid); } },
+                          { text: "Examiners report", handler: () => { toggleR(); toggleRepcont(questionid); } },
+                          { text: "Add to PDF", handler: createPDFButtonHandler(questionid) }
+                      ].map(createButton);
+
+                      buttons.forEach(button => btnContainer.appendChild(button));
+
+                      // Build question content
+                      const content = `
+                          <h3>${questionid}</h3>
+                          <h4><b>Topics:</b> ${topics.join(', ')}</h4>
+                          <h4><b>Subtopics:</b> ${subtopics.join(', ')}</h4>
+                          <div class="square-container">${question}</div>
+                      `;
+
+                      bigQuestionBox.innerHTML = content;
+                      bigQuestionBox.querySelector('h3').after(btnContainer);
+
+                      // Add containers for markscheme and report
+                      if (markscheme) {
+                          createContainer('markscheme', questionid, filename, markscheme, domCache.msbox);
+                      }
+
+                      if (report) {
+                          createContainer('report', questionid, filename, report, domCache.reportbox);
+                      }
+
+                      // Create and attach SVG elements
+                      const toggleMSSvg = createSVGElement(questionid);
+                      toggleMSSvg.id = `toggleMSSvg-${questionid}`;
+
+                      const toggleRepSvg = createSVGElement(questionid);
+                      toggleRepSvg.id = `toggleRepSvg-${questionid}`;
+
+                      domCache.msbox2.appendChild(toggleMSSvg);
+                      domCache.repbox2.appendChild(toggleRepSvg);
+
+                      // Add SVG event listeners
+                      toggleMSSvg.addEventListener('click', () => {
+                          toggleMScont(questionid);
+                          toggleMS();
+                      });
+
+                      toggleRepSvg.addEventListener('click', () => {
+                          toggleRepcont(questionid);
+                          toggleR();
+                      });
+
+                      fragment.appendChild(bigQuestionBox);
+                  });
+
+                  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 fragment = document.createDocumentFragment();
+
+          topics.forEach(topic => {
+              const label = document.createElement('label');
+              label.classList.add('topic-label');
+
+              const checkbox = document.createElement('input');
+              checkbox.type = 'checkbox';
+              checkbox.name = 'topic';
+              checkbox.value = topic;
+
+              checkbox.addEventListener('change', () => {
+                  document.querySelectorAll(`div[class*="${topic}"]`)
+                      .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');
+              }
+          });
+      }
+
+      // Event Listeners
+      document.addEventListener('DOMContentLoaded', () => {
+          document.addEventListener('click', event => {
+              const filename = fileNameMap[event.target.id];
+              if (!filename) return;
+
+              if (jsonDataFetched && filename !== currentFileName) {
+                  resetState();
+                  loadJSON(filename);
+              } else if (jsonDataFetched && filename === currentFileName) {
+                  resetState();
+                  jsonDataFetched = false;
+              } else if (!jsonDataFetched) {
+                  loadJSON(filename);
+              }
+          });
+      });
+
+      function resetState() {
+          domCache.rightCol.innerHTML = '';
+          document.querySelectorAll('.topic-label').forEach(label => label.remove());
+          sessionStorage.setItem('selectedQuestionIds', '[]');
+      }
+  </script>
 </body>
 
-</html>
+</html>