ProjectB/projectb
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

NAV PANE COMPLETED:SV

Browse Source
This commit is contained in:
Sharath 2023-10-11 19:27:44 +05:30
parent cb07cf2225
commit 2f7b8e76b9
2 changed files with 138 additions and 113 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
addform.html
View File

@ -542,6 +542,12 @@
<!-- nave pane -->
<script src="nav_pane.js"></script>
<!-- <script>
var questionPaperElement = document.getElementById("questionPaper");
function saveoldnav(){
localStorage.setItem("OLD_JSON_FOR_NAV", JSON.stringify((questionPaperElement)));
}
</script> -->
<script>
var sidebarWrapper = document.getElementById("questionPaper");

245
nav_pane.js
View File

@ -1,3 +1,5 @@
// Initialize an array to store the expanded section data-ids
const expandedSections = [];
function navpane() {
// Sample JSON data
let isHighlighted = false;
@ -9,207 +11,220 @@ function navpane() {
// 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
const heading = document.createElement('a');
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';
heading.innerHTML = truncatedTitle;
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;
const sectionId = section.section_id;
sectionDiv.setAttribute('data-id', sectionId);
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";
// Check if the section should be initially expanded based on expandedSections
if (expandedSections.includes(sectionId)) {
sectionDiv.classList.remove('collapsed');
} else {
sectionDiv.classList.add('collapsed');
}
sectionLink.innerHTML = removeParagraphTags(section.section_title);
sectionDiv.appendChild(sectionLink);
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;
sectionLink.style.color = '#740fd6';
// Add a click event listener to toggle highlighting and boldness
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;
}
});
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.id = nodeData.textQuestion_Id || nodeData.choice_question_id;
const nodeDataId = nodeData.textQuestion_Id || nodeData.choice_question_id;
const nodeDataId = nodeData.question_Id;
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.marginRight = '10px';
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
bulletPoint.style.color = 'darkgray';
bulletPoint.textContent = '\u2022';
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.setAttribute('data-id', groupTitleId);
groupTitleDiv.className = 'question-group';
// groupTitleDiv.id = groupTitleId;
// 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);
// Create arrow icon element for group title
const groupTitleArrow = document.createElement('span');
groupTitleArrow.className = 'arrow-right';
groupTitleArrow.style.cursor = 'pointer'; // Set cursor to pointer
groupTitleArrow.style.cursor = 'pointer';
groupTitleDiv.appendChild(groupTitleArrow);
// Click event listener for the arrow icon
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')) {
groupTitleArrow.classList.remove('arrow-down');
groupTitleArrow.classList.add('arrow-down');
} else {
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');
// 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);
});
@ -217,8 +232,12 @@ function navpane() {
}
}
const questionPaperContainer = document.getElementById('questionPaper');
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