237 lines
11 KiB
JavaScript
237 lines
11 KiB
JavaScript
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'));
|
|
// var arr = JSON.parse( localStorage.getItem('memoriesdata') );
|
|
// var jsonData2 = JSON.parse(jsonData);
|
|
// console.log(typeof jsonData);
|
|
// console.log('jsonData', jsonData);
|
|
|
|
// Function to remove <p></p> tags from HTML content
|
|
function removeParagraphTags(html) {
|
|
// console.log('html:', html);
|
|
return html.replace(/<p>/g, '').replace(/<\/p>/g, '');
|
|
}
|
|
|
|
function createTreeWithHeading(data, container) {
|
|
// console.log('data', data.question_paper_title);
|
|
// Extract the treeTitle from the JSON data and remove <p></p> tags
|
|
const treeTitle = removeParagraphTags(data.question_paper_title);
|
|
|
|
// Create the heading element
|
|
const heading = document.createElement('a'); // You can use h1, h2, div, or any other suitable HTML element
|
|
heading.style.color = '#740fd6';
|
|
|
|
const truncatedTitle = treeTitle.length > 20 ? treeTitle.substring(0, 20) + '.....' : treeTitle;
|
|
heading.innerHTML = truncatedTitle; // Set the text content of the heading (with HTML tags removed)
|
|
// heading.style.fontSize = 'x-large'; // Set the font size
|
|
// heading.style.marginLeft = '26px';
|
|
container.appendChild(heading);
|
|
|
|
// Create the tree structure
|
|
createTree(data, container);
|
|
}
|
|
|
|
// Function to create the collapsible tree
|
|
function createTree(data, container) {
|
|
data.sections.forEach(section => {
|
|
const sectionDiv = document.createElement('div');
|
|
// const sectionId = section.section_id;
|
|
sectionDiv.className = 'section main-heading';
|
|
// sectionDiv.id = sectionId;
|
|
// console.log('sectionDiv', sectionDiv)
|
|
container.appendChild(sectionDiv);
|
|
|
|
// Create arrow icon element
|
|
const sectionArrow = document.createElement('span');
|
|
sectionArrow.className = 'arrow-right';
|
|
sectionArrow.style.cursor = 'pointer'; // Set cursor to pointer
|
|
sectionDiv.appendChild(sectionArrow);
|
|
|
|
// Click event listener for the arrow icon
|
|
sectionArrow.addEventListener('click', () => {
|
|
contentDiv.classList.toggle('visible');
|
|
sectionDiv.classList.toggle('collapsed');
|
|
if (sectionDiv.classList.contains('collapsed')) {
|
|
sectionArrow.classList.remove('arrow-right');
|
|
sectionArrow.classList.add('arrow-down');
|
|
} else {
|
|
sectionArrow.classList.remove('arrow-down');
|
|
sectionArrow.classList.add('arrow-right');
|
|
}
|
|
});
|
|
|
|
const sectionLink = document.createElement('a');
|
|
sectionLink.href = '#' + section.section_id;
|
|
sectionLink.style.color = '#740fd6';
|
|
|
|
// Add a click event listener to toggle highlighting and boldness
|
|
sectionLink.addEventListener('click', function () {
|
|
if (currentlyHighlightedElement !== null && currentlyHighlightedElement !== sectionLink) {
|
|
// Remove highlight from the previously highlighted element
|
|
currentlyHighlightedElement.style.fontWeight = 'normal';
|
|
}
|
|
|
|
if (currentlyHighlightedElement === sectionLink) {
|
|
// Toggle highlight on the current element
|
|
sectionLink.style.fontWeight = sectionLink.style.fontWeight === 'bold' ? 'normal' : 'bold';
|
|
} else {
|
|
// Make the text bold
|
|
sectionLink.style.fontWeight = 'bold';
|
|
// Update the currently highlighted element
|
|
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);
|
|
|
|
const contentDiv = document.createElement('div');
|
|
contentDiv.className = 'content';
|
|
section.questions.forEach(question => {
|
|
createTreeNode(question, contentDiv);
|
|
});
|
|
|
|
container.appendChild(contentDiv);
|
|
});
|
|
}
|
|
|
|
function createTreeNode(nodeData, parentNode) {
|
|
const nodeDiv = document.createElement('div');
|
|
// nodeDiv.id = nodeData.textQuestion_Id || nodeData.choice_question_id;
|
|
const nodeDataId = nodeData.question_Id
|
|
console.log('nodeDataId:',nodeDataId);
|
|
parentNode.appendChild(nodeDiv);
|
|
|
|
if (nodeData.question) {
|
|
// Create a bullet point element
|
|
const bulletPoint = document.createElement('span');
|
|
// Style the bullet point element
|
|
bulletPoint.style.marginRight = '10px'; // Add space to the right of the bullet point
|
|
bulletPoint.style.fontSize = '23px';
|
|
bulletPoint.style.fontWeight = 'bold';
|
|
bulletPoint.style.color = 'darkgray'; // Change the color of the bullet point
|
|
bulletPoint.textContent = '\u2022'; // Unicode character for a bullet point dot
|
|
// Append the bullet point element to the nodeDiv
|
|
nodeDiv.appendChild(bulletPoint);
|
|
|
|
const questionLink = document.createElement('a');
|
|
// console.log('nodeDiv.id:', nodeDataId);
|
|
questionLink.href = '#' + nodeDataId;
|
|
questionLink.style.color = '#740fd6';
|
|
|
|
// Add a click event listener to toggle highlighting and boldness
|
|
questionLink.addEventListener('click', function () {
|
|
if (currentlyHighlightedElement !== null && currentlyHighlightedElement !== questionLink) {
|
|
// Remove highlight from the previously highlighted element
|
|
currentlyHighlightedElement.style.fontWeight = 'normal';
|
|
}
|
|
|
|
if (currentlyHighlightedElement === questionLink) {
|
|
// Toggle highlight on the current element
|
|
questionLink.style.fontWeight = questionLink.style.fontWeight === 'bold' ? 'normal' : 'bold';
|
|
} else {
|
|
// Make the text bold
|
|
questionLink.style.fontWeight = 'bold';
|
|
// Update the currently highlighted element
|
|
currentlyHighlightedElement = questionLink;
|
|
}
|
|
});
|
|
|
|
// Check if the question text is longer than 20 characters
|
|
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.className = 'question-group';
|
|
// groupTitleDiv.id = groupTitleId;
|
|
parentNode.appendChild(groupTitleDiv);
|
|
|
|
// Create arrow icon element for group title
|
|
const groupTitleArrow = document.createElement('span');
|
|
groupTitleArrow.className = 'arrow-right';
|
|
groupTitleArrow.style.cursor = 'pointer'; // Set cursor to pointer
|
|
groupTitleDiv.appendChild(groupTitleArrow);
|
|
|
|
// Click event listener for the arrow icon
|
|
groupTitleArrow.addEventListener('click', () => {
|
|
groupQuestionsDiv.classList.toggle('visible');
|
|
groupTitleDiv.classList.toggle('collapsed');
|
|
if (groupTitleDiv.classList.contains('collapsed')) {
|
|
groupTitleArrow.classList.remove('arrow-down');
|
|
groupTitleArrow.classList.add('arrow-down');
|
|
} else {
|
|
groupTitleArrow.classList.remove('arrow-down');
|
|
groupTitleArrow.classList.add('arrow-right');
|
|
}
|
|
});
|
|
|
|
const groupQuestionLink = document.createElement('a');
|
|
// console.log('groupTitleDiv.id:', groupTitleId);
|
|
groupQuestionLink.href = '#' + groupTitleId;
|
|
groupQuestionLink.style.color = '#740fd6';
|
|
|
|
// Add a click event listener to toggle highlighting and boldness
|
|
groupQuestionLink.addEventListener('click', function () {
|
|
if (currentlyHighlightedElement !== null && currentlyHighlightedElement !== groupQuestionLink) {
|
|
// Remove highlight from the previously highlighted element
|
|
currentlyHighlightedElement.style.fontWeight = 'normal';
|
|
}
|
|
|
|
if (currentlyHighlightedElement === groupQuestionLink) {
|
|
// Toggle highlight on the current element
|
|
groupQuestionLink.style.fontWeight = groupQuestionLink.style.fontWeight === 'bold' ? 'normal' : 'bold';
|
|
} else {
|
|
// Make the text bold
|
|
groupQuestionLink.style.fontWeight = 'bold';
|
|
// Update the currently highlighted element
|
|
currentlyHighlightedElement = groupQuestionLink;
|
|
}
|
|
});
|
|
|
|
// Check if the group_title is longer than 20 characters
|
|
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);
|
|
|
|
const groupQuestionsDiv = document.createElement('div');
|
|
groupQuestionsDiv.className = 'content';
|
|
nodeData.questions.forEach(groupQuestion => {
|
|
createTreeNode(groupQuestion, groupQuestionsDiv);
|
|
});
|
|
parentNode.appendChild(groupQuestionsDiv);
|
|
}
|
|
}
|
|
|
|
const questionPaperContainer = document.getElementById('questionPaper');
|
|
createTreeWithHeading(jsonData, 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'));
|
|
});
|
|
}
|
|
});
|
|
} |