From 98bbbd9d6f3ab155946846572ffe6cec10522978 Mon Sep 17 00:00:00 2001
From: ihategithub12345678
<140644077+ihategithub12345678@users.noreply.github.com>
Date: Sun, 22 Dec 2024 15:17:03 +0300
Subject: [PATCH] Update index.html
---
.gitignore | 2 +
app/index.html | 548 ++++++++++++++++++++++---------------------------
2 files changed, 246 insertions(+), 304 deletions(-)
create mode 100644 .gitignore
diff --git a/.gitignore b/.gitignore
new file mode 100644
index 0000000..5ca0973
--- /dev/null
+++ b/.gitignore
@@ -0,0 +1,2 @@
+.DS_Store
+
diff --git a/app/index.html b/app/index.html
index 1655fb3..df7d4f9 100644
--- a/app/index.html
+++ b/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');
- }
+ }
@@ -371,311 +371,251 @@ function generatePDF() {
+
+ svg.classList.add("cursor-pointer", "text-primary", "hidden");
+ svg.innerHTML = `
+
+
+
+ `;
+ 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 = `
+ ${questionid}
+ Topics: ${topics.join(', ')}
+ Subtopics: ${subtopics.join(', ')}
+ ${question}
+ `;
+
+ 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', '[]');
+ }
+
-