385 lines
16 KiB
JavaScript
385 lines
16 KiB
JavaScript
// Initialize an array to store the expanded section data-ids
|
|
const expandedSections = [];
|
|
function navpane() {
|
|
// Sample JSON data
|
|
let isHighlighted = false;
|
|
let currentlyHighlightedElement = null; // Track the currently highlighted element
|
|
// console.log('navpane called');
|
|
var jsonData = JSON.parse(localStorage.getItem('JSON_FOR_NAV'));
|
|
// console.log(jsonData);
|
|
// var arr = JSON.parse( localStorage.getItem('memoriesdata') );
|
|
// var jsonData2 = JSON.parse(jsonData);
|
|
// console.log(typeof jsonData);
|
|
// console.log('jsonData', jsonData);
|
|
|
|
|
|
|
|
function removeParagraphTags(html) {
|
|
return html.replace(/<p>/g, '').replace(/<\/p>/g, '');
|
|
}
|
|
|
|
function createTreeWithHeading(data, container) {
|
|
const treeTitle = removeParagraphTags(data.question_paper_title);
|
|
const heading = document.createElement('a');
|
|
heading.style.color = '#740fd6';
|
|
const truncatedTitle = treeTitle.length > 20 ? treeTitle.substring(0, 20) + '.....' : treeTitle;
|
|
heading.innerHTML = truncatedTitle;
|
|
container.appendChild(heading);
|
|
createTree(data, container);
|
|
}
|
|
|
|
function createTree(data, container) {
|
|
data.sections.forEach(section => {
|
|
const sectionDiv = document.createElement('div');
|
|
const sectionId = section.section_id;;
|
|
sectionDiv.setAttribute('data-id', sectionId);
|
|
sectionDiv.className = 'section main-heading';
|
|
|
|
var splitedSectionId = sectionId.split("_")[3];
|
|
var SectionBox_RawID = 'SectionBox_'+splitedSectionId;
|
|
var SectionBoxID = document.getElementById(SectionBox_RawID)
|
|
// console.log(SectionBoxID);
|
|
|
|
|
|
// Check if the section should be initially expanded based on expandedSections
|
|
if (expandedSections.includes(sectionId)) {
|
|
sectionDiv.classList.remove('collapsed');
|
|
|
|
} else {
|
|
sectionDiv.classList.add('collapsed');
|
|
}
|
|
|
|
container.appendChild(sectionDiv);
|
|
|
|
const sectionArrow = document.createElement('span');
|
|
sectionArrow.style.cursor = 'pointer';
|
|
sectionDiv.appendChild(sectionArrow);
|
|
|
|
const contentDiv = document.createElement('div');
|
|
contentDiv.className = 'content';
|
|
|
|
// Update the arrow icon based on the section's initial state
|
|
if (sectionDiv.classList.contains('collapsed')) {
|
|
sectionArrow.className = 'arrow-right';
|
|
} else {
|
|
sectionArrow.className = 'arrow-down';
|
|
contentDiv.classList.add('visible');
|
|
}
|
|
|
|
sectionArrow.addEventListener('click', () => {
|
|
contentDiv.classList.toggle('visible');
|
|
sectionDiv.classList.toggle('collapsed');
|
|
|
|
// Check if the section is expanded or collapsed
|
|
if (sectionDiv.classList.contains('collapsed')) {
|
|
const index = expandedSections.indexOf(sectionId);
|
|
if (index !== -1) {
|
|
expandedSections.splice(index, 1);
|
|
}
|
|
sectionArrow.classList.remove('arrow-down');
|
|
sectionArrow.classList.add('arrow-right');
|
|
} else {
|
|
expandedSections.push(sectionId);
|
|
sectionArrow.classList.remove('arrow-right');
|
|
sectionArrow.classList.add('arrow-down');
|
|
}
|
|
});
|
|
|
|
const sectionLink = document.createElement('a');
|
|
sectionLink.href = '#' + section.section_id;
|
|
|
|
// Attach the scroll function to the hyperlinks
|
|
sectionLink.addEventListener('click', function(e) {
|
|
e.preventDefault(); // Prevent the default behavior of the link
|
|
const targetId = this.getAttribute('href').substring(1); // Get the target element's ID
|
|
scrollToElement(targetId);
|
|
});
|
|
|
|
|
|
sectionLink.style.color = '#740fd6';
|
|
|
|
//click event listener to toggle highlighting and boldness if click the Section
|
|
sectionLink.addEventListener('click', function () {
|
|
if (currentlyHighlightedElement !== null && currentlyHighlightedElement !== sectionLink) {
|
|
currentlyHighlightedElement.style.fontWeight = 'normal';
|
|
}
|
|
|
|
if (currentlyHighlightedElement === sectionLink) {
|
|
sectionLink.style.fontWeight = sectionLink.style.fontWeight === 'bold' ? 'normal' : 'bold';
|
|
} else {
|
|
sectionLink.style.fontWeight = 'bold';
|
|
currentlyHighlightedElement = sectionLink;
|
|
}
|
|
});
|
|
|
|
SectionBoxID.addEventListener('click', function() {
|
|
if (currentlyHighlightedElement !== null && currentlyHighlightedElement !== sectionLink) {
|
|
currentlyHighlightedElement.style.fontWeight = 'normal';
|
|
}
|
|
|
|
if (currentlyHighlightedElement === sectionLink) {
|
|
sectionLink.style.fontWeight = sectionLink.style.fontWeight === 'bold' ? 'normal' : 'bold';
|
|
} else {
|
|
sectionLink.style.fontWeight = 'bold';
|
|
currentlyHighlightedElement = sectionLink;
|
|
}
|
|
});
|
|
|
|
if (section.section_title == null || typeof section.section_title === 'undefined') {
|
|
section.section_title = "sampletitle";
|
|
}
|
|
|
|
sectionLink.innerHTML = removeParagraphTags(section.section_title);
|
|
sectionDiv.appendChild(sectionLink);
|
|
|
|
section.questions.forEach(question => {
|
|
createTreeNode(question, contentDiv);
|
|
});
|
|
|
|
container.appendChild(contentDiv);
|
|
});
|
|
}
|
|
|
|
function createTreeNode(nodeData, parentNode) {
|
|
const nodeDiv = document.createElement('div');
|
|
nodeDiv.className = "navContain";
|
|
|
|
|
|
// nodeDiv.id = nodeData.textQuestion_Id || nodeData.choice_question_id;
|
|
const nodeDataId = nodeData.question_Id
|
|
const nodeDataType = nodeData.question_type
|
|
// console.log('nodeDataType:',nodeDataType);
|
|
parentNode.appendChild(nodeDiv);
|
|
|
|
|
|
var bulletPoint = "";
|
|
if (nodeData.question) {
|
|
|
|
var RawID = "";
|
|
if(nodeDataType == 'text')
|
|
{
|
|
bulletPoint = document.createElement('span');
|
|
bulletPoint.className = "fa fa-text-width";
|
|
bulletPoint.style.marginRight = '5px';
|
|
bulletPoint.style.fontSize = '15px';
|
|
bulletPoint.style.fontWeight = 'bold';
|
|
bulletPoint.style.color = '#00aaff';
|
|
// bulletPoint.textContent = '\u2022';
|
|
bulletPoint.setAttribute("title", "Descriptive");
|
|
nodeDiv.appendChild(bulletPoint);
|
|
|
|
var splitedId = nodeDataId.split("_")[1];
|
|
RawID = 'removeAndCloneTextQuestion_'+splitedId;
|
|
|
|
|
|
}else if(nodeDataType == 'group')
|
|
{
|
|
bulletPoint = document.createElement('span');
|
|
bulletPoint.className = "fa fa-check-circle-o";
|
|
bulletPoint.style.marginRight = '5px';
|
|
bulletPoint.style.fontSize = '15px';
|
|
bulletPoint.style.fontWeight = 'bold';
|
|
bulletPoint.style.color = '#00aaff';
|
|
bulletPoint.setAttribute("title", "MCQ");
|
|
// bulletPoint.textContent = '\u2022';
|
|
nodeDiv.appendChild(bulletPoint);
|
|
|
|
var splitedId = nodeDataId.split("_")[1];
|
|
RawID = 'removeAndCloneQroupQuestion_'+splitedId;
|
|
|
|
}
|
|
|
|
var QuestionID = document.getElementById(RawID)
|
|
// console.log(QuestionID)
|
|
|
|
const questionLink = document.createElement('a');
|
|
questionLink.href = '#' + nodeDataId;
|
|
|
|
// Attach the scroll function to the hyperlinks
|
|
questionLink.addEventListener('click', function(e) {
|
|
e.preventDefault(); // Prevent the default behavior of the link
|
|
const targetId = this.getAttribute('href').substring(1); // Get the target element's ID
|
|
scrollToElement(targetId);
|
|
});
|
|
questionLink.style.color = '#740fd6';
|
|
|
|
if(nodeDataType == 'text')
|
|
{
|
|
questionLink.setAttribute("title", "Descriptive");
|
|
}else if(nodeDataType == 'text'){
|
|
questionLink.setAttribute("title", "MCQ");
|
|
|
|
}
|
|
|
|
QuestionID.addEventListener('click', function () {
|
|
if (currentlyHighlightedElement !== null && currentlyHighlightedElement !== questionLink) {
|
|
currentlyHighlightedElement.style.fontWeight = 'normal';
|
|
}
|
|
|
|
if (currentlyHighlightedElement === questionLink) {
|
|
questionLink.style.fontWeight = questionLink.style.fontWeight === 'bold' ? 'normal' : 'bold';
|
|
} else {
|
|
questionLink.style.fontWeight = 'bold';
|
|
QuestionID.style.fontWeight = 'normal';
|
|
currentlyHighlightedElement = questionLink;
|
|
}
|
|
});
|
|
questionLink.addEventListener('click', function () {
|
|
if (currentlyHighlightedElement !== null && currentlyHighlightedElement !== questionLink) {
|
|
currentlyHighlightedElement.style.fontWeight = 'normal';
|
|
}
|
|
|
|
if (currentlyHighlightedElement === questionLink) {
|
|
questionLink.style.fontWeight = questionLink.style.fontWeight === 'bold' ? 'normal' : 'bold';
|
|
} else {
|
|
questionLink.style.fontWeight = 'bold';
|
|
currentlyHighlightedElement = questionLink;
|
|
}
|
|
});
|
|
|
|
if (nodeData.question.length > 20) {
|
|
questionLink.innerHTML = removeParagraphTags(nodeData.question.substring(0, 20) + '...');
|
|
} else {
|
|
questionLink.innerHTML = removeParagraphTags(nodeData.question);
|
|
}
|
|
|
|
nodeDiv.appendChild(questionLink);
|
|
} else if (nodeData.group_title) {
|
|
const groupTitleDiv = document.createElement('div');
|
|
const groupTitleId = nodeData.question_group_id;
|
|
groupTitleDiv.setAttribute('data-id', groupTitleId);
|
|
groupTitleDiv.className = 'question-group';
|
|
|
|
// console.log(groupTitleId);
|
|
|
|
var splitedGroupId = groupTitleId.split("_")[3];
|
|
var SplitedGroupRawID = 'QuestionGroupButtons_'+splitedGroupId;
|
|
var GroupBoxID = document.getElementById(SplitedGroupRawID);
|
|
// console.log(GroupBoxID);
|
|
|
|
|
|
// Check if the group should be initially expanded based on expandedSections
|
|
if (expandedSections.includes(groupTitleId)) {
|
|
groupTitleDiv.classList.remove('collapsed');
|
|
} else {
|
|
groupTitleDiv.classList.add('collapsed');
|
|
}
|
|
|
|
parentNode.appendChild(groupTitleDiv);
|
|
|
|
const groupTitleArrow = document.createElement('span');
|
|
groupTitleArrow.className = 'arrow-right';
|
|
groupTitleArrow.style.cursor = 'pointer';
|
|
groupTitleDiv.appendChild(groupTitleArrow);
|
|
|
|
const groupQuestionsDiv = document.createElement('div');
|
|
groupQuestionsDiv.className = 'content';
|
|
|
|
// Update the arrow icon based on the section's initial state
|
|
if (groupTitleDiv.classList.contains('collapsed')) {
|
|
groupTitleArrow.className = 'arrow-right';
|
|
} else {
|
|
groupTitleArrow.className = 'arrow-down';
|
|
groupQuestionsDiv.classList.add('visible');
|
|
}
|
|
|
|
groupTitleArrow.addEventListener('click', () => {
|
|
groupQuestionsDiv.classList.toggle('visible');
|
|
groupTitleDiv.classList.toggle('collapsed');
|
|
|
|
// Check if the group is expanded or collapsed
|
|
if (groupTitleDiv.classList.contains('collapsed')) {
|
|
const index = expandedSections.indexOf(groupTitleId);
|
|
if (index !== -1) {
|
|
expandedSections.splice(index, 1);
|
|
}
|
|
groupTitleArrow.classList.remove('arrow-down');
|
|
groupTitleArrow.classList.add('arrow-right');
|
|
} else {
|
|
expandedSections.push(groupTitleId);
|
|
groupTitleArrow.classList.remove('arrow-right');
|
|
groupTitleArrow.classList.add('arrow-down');
|
|
}
|
|
});
|
|
|
|
const groupQuestionLink = document.createElement('a');
|
|
groupQuestionLink.href = '#' + groupTitleId;
|
|
|
|
// Attach the scroll function to the hyperlinks
|
|
groupQuestionLink.addEventListener('click', function(e) {
|
|
e.preventDefault(); // Prevent the default behavior of the link
|
|
const targetId = this.getAttribute('href').substring(1); // Get the target element's ID
|
|
scrollToElement(targetId);
|
|
});
|
|
groupQuestionLink.style.color = '#740fd6';
|
|
|
|
groupQuestionLink.addEventListener('click', function () {
|
|
if (currentlyHighlightedElement !== null && currentlyHighlightedElement !== groupQuestionLink) {
|
|
currentlyHighlightedElement.style.fontWeight = 'normal';
|
|
}
|
|
|
|
if (currentlyHighlightedElement === groupQuestionLink) {
|
|
groupQuestionLink.style.fontWeight = groupQuestionLink.style.fontWeight === 'bold' ? 'normal' : 'bold';
|
|
} else {
|
|
groupQuestionLink.style.fontWeight = 'bold';
|
|
currentlyHighlightedElement = groupQuestionLink;
|
|
}
|
|
});
|
|
GroupBoxID.addEventListener('click', function () {
|
|
if (currentlyHighlightedElement !== null && currentlyHighlightedElement !== groupQuestionLink) {
|
|
currentlyHighlightedElement.style.fontWeight = 'normal';
|
|
}
|
|
|
|
if (currentlyHighlightedElement === groupQuestionLink) {
|
|
groupQuestionLink.style.fontWeight = groupQuestionLink.style.fontWeight === 'bold' ? 'normal' : 'bold';
|
|
} else {
|
|
groupQuestionLink.style.fontWeight = 'bold';
|
|
GroupBoxID.style.fontWeight = 'normal';
|
|
currentlyHighlightedElement = groupQuestionLink;
|
|
}
|
|
});
|
|
|
|
if (nodeData.group_title.length > 20) {
|
|
groupQuestionLink.innerHTML = removeParagraphTags(nodeData.group_title.substring(0, 20) + '..');
|
|
} else {
|
|
groupQuestionLink.innerHTML = removeParagraphTags(nodeData.group_title);
|
|
}
|
|
groupTitleDiv.appendChild(groupQuestionLink);
|
|
|
|
|
|
nodeData.questions.forEach(groupQuestion => {
|
|
createTreeNode(groupQuestion, groupQuestionsDiv);
|
|
});
|
|
parentNode.appendChild(groupQuestionsDiv);
|
|
}
|
|
}
|
|
|
|
var questionPaperContainer = document.getElementById('questionPaper');
|
|
|
|
createTreeWithHeading(jsonData, questionPaperContainer);
|
|
localStorage.setItem("collapse", JSON.stringify((expandedSections)));
|
|
// console.log('expandedSections:',expandedSections);
|
|
// console.log('questionPaperContainer:',questionPaperContainer);
|
|
|
|
window.addEventListener('DOMContentLoaded', event => {
|
|
// Toggle the side navigation
|
|
const sidebarToggle = document.body.querySelector('#sidebarToggle');
|
|
if (sidebarToggle) {
|
|
sidebarToggle.addEventListener('click', event => {
|
|
event.preventDefault();
|
|
document.body.classList.toggle('sb-sidenav-toggled');
|
|
let qP = document.getElementById('questionPaper');
|
|
qP.classList.toggle('qP-style');
|
|
localStorage.setItem('sb|sidebar-toggle', document.body.classList.contains('sb-sidenav-toggled'));
|
|
});
|
|
}
|
|
});
|
|
}
|
|
|
|
// Function to scroll to the specified element with smooth behavior
|
|
function scrollToElement(elementId) {
|
|
const element = document.getElementById(elementId);
|
|
if (element) {
|
|
element.scrollIntoView({ behavior: "smooth", block: "center" });
|
|
}
|
|
} |