pirateIB/pestle
1
Fork 0
Code Activity

Update index.html

Browse source
This commit is contained in:
ihategithub12345678 2024-12-22 15:17:03 +03:00
parent 16100dc229
commit 98bbbd9d6f
2 changed files with 246 additions and 304 deletions
Download patch file Download diff file Expand all files Collapse all files

2
.gitignore vendored Normal file
View file

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

548
app/index.html
View file

@ -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 jsonData = null;
let currentFileName = null;
let jsonDataFetched = false;
let jsonData = null;
let currentFileName = null;
let topics = [];
function loadJSON(filename) {
fetch(`../assets/jsonqb/${filename}`)
.then(response => response.json())
.then(jsonData => {
jsonDataFetched = true
currentFileName = filename;
// 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 allTopics = jsonData.flatMap(item => item.topics);
topics = [...new Set(allTopics)];
renderTopics();
jsonData.forEach(item => {
const question = item.Question;
let questionid = item.question_id;
const markscheme = item.Markscheme;
const report = item['Examiners report'];
const topics = item['topics'];
const subtopics = item['subtopics'];
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'
};
const rightCol = document.getElementById("right-col");
const msbox = document.getElementById("markscheme-box");
const reportbox = document.getElementById("report-box")
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"
};
function toggleMScont(questionid) {
const markschemeContainer = document.getElementById(`markscheme-${questionid} ${filename}`);
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);
}
}
}
Object.entries(attributes).forEach(([key, value]) => {
svg.setAttribute(key, value);
});
});
</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>