941 lines
42 KiB
JavaScript
941 lines
42 KiB
JavaScript
// const { css } = require("jquery");
|
|
// const mathJaxPath = require.resolve('./node_modules/mathjax/es5/latest.js');
|
|
// require(mathJaxPath);
|
|
const takeNumberOnly = require('./assets/js/takeNumberOnly/takeNumberOnly')
|
|
|
|
// 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'));
|
|
var editPage = localStorage.getItem('EditNavExpend');
|
|
// console.log(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 removeParagraphTags(html) {
|
|
// return html.replace(/<p>/g, '').replace(/<\/p>/g, '');
|
|
|
|
var html = html.replace(/<[^>]*>/g, '');
|
|
if (html.length >= 30) {
|
|
html=html.slice(0,24 ) + ''; // ...
|
|
}
|
|
return html
|
|
|
|
}
|
|
|
|
//function for remove <img> tag
|
|
function removeTagsAndTruncate(html, maxLength) {
|
|
|
|
const doc = new DOMParser().parseFromString(html, 'text/html');
|
|
|
|
// Remove <p> tags
|
|
const paragraphs = doc.getElementsByTagName('p');
|
|
for (let i = paragraphs.length - 1; i >= 0; i--) {
|
|
const paragraph = paragraphs[i];
|
|
paragraph.parentNode.replaceChild(document.createTextNode(paragraph.textContent), paragraph);
|
|
}
|
|
|
|
// Remove <img> tags
|
|
const images = doc.getElementsByTagName('img');
|
|
for (let i = images.length - 1; i >= 0; i--) {
|
|
const image = images[i];
|
|
image.parentNode.removeChild(image);
|
|
}
|
|
|
|
// Get the text content
|
|
const textContent = doc.body.textContent;
|
|
|
|
// Truncate the content
|
|
var truncatedContent = "";
|
|
if(textContent.length > 24)
|
|
{
|
|
truncatedContent = textContent.substring(0, maxLength) + ''; // ...
|
|
}
|
|
else{
|
|
truncatedContent = textContent;
|
|
}
|
|
|
|
return truncatedContent;
|
|
}
|
|
|
|
function createTreeWithHeading(data, container) {
|
|
|
|
const treeTitle = removeParagraphTags(data.question_paper_title);
|
|
const heading = document.createElement('a');
|
|
heading.style.color = '#1D3557';
|
|
// const truncatedTitle = treeTitle.length > 20 ? treeTitle.substring(0, 20) + '.....' : treeTitle;
|
|
const truncatedTitle = treeTitle.length > 30 ? treeTitle + '' : treeTitle;
|
|
heading.innerHTML = truncatedTitle;
|
|
const headingNavPane = document.createElement('div');
|
|
headingNavPane.style.textAlign = 'center';
|
|
headingNavPane.style.marginBottom = '45px'
|
|
headingNavPane.innerHTML = "OUTLINE";
|
|
container.appendChild(headingNavPane)
|
|
container.appendChild(heading);
|
|
createTree(data, container);
|
|
}
|
|
|
|
function createTree(data, container) {
|
|
data.sections.forEach(section => {
|
|
var sectionDiv = document.createElement('div');
|
|
const sectionId = section.section_id;;
|
|
sectionDiv.setAttribute('data-id', sectionId);
|
|
sectionDiv.className = 'section main-heading';
|
|
sectionDiv.setAttribute('id', `nav_section_title_${sectionId.match(/\d+/)[0]}`)
|
|
// sectionDiv.setAttribute('draggable', 'true');
|
|
sectionDiv.setAttribute("ondragstart" , "dragStart(this,event)");
|
|
sectionDiv.setAttribute("ondragend" , "dragEnd(this,event)");
|
|
sectionDiv.setAttribute("ondragover" , "dragOver(this,event)");
|
|
sectionDiv.setAttribute("ondrop" , "dragDrop(this,event)");
|
|
sectionDiv.setAttribute("ondragleave" ,"dragLeave(this,event)");
|
|
|
|
// console.log(section);
|
|
// console.log(typeof sectionDiv);
|
|
var a= sectionDiv.outerHTML
|
|
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');
|
|
}
|
|
|
|
if(editPage == 1 || editPage == null)
|
|
{
|
|
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');
|
|
}
|
|
});
|
|
|
|
if(editPage == 1 || editPage == null)
|
|
{
|
|
sectionDiv.classList.add('collapsed');
|
|
|
|
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');
|
|
}
|
|
|
|
}
|
|
|
|
// s {
|
|
// text-decoration: none !important;
|
|
// color: inherit;
|
|
// cursor: auto;
|
|
// }
|
|
var sectionLink = document.createElement('a');
|
|
sectionLink.href = '#' + section.section_id;
|
|
sectionLink.style.textOverflow ='ellipsis';
|
|
sectionLink.style.whiteSpace= 'nowrap';
|
|
sectionLink.style.overflow ='hidden';
|
|
sectionLink.style.display ='-webkit-inline-box';
|
|
sectionLink.style.maxWidth = '190px';
|
|
sectionLink.style.fontWeight = '100';
|
|
|
|
// 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 = '#000000';
|
|
|
|
//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 === '400' ? 'normal' : '400';
|
|
// } else {
|
|
// sectionLink.style.fontWeight = '400';
|
|
// currentlyHighlightedElement = sectionLink;
|
|
// }
|
|
// });
|
|
|
|
sectionLink.addEventListener('mouseover', function () {
|
|
if (currentlyHighlightedElement !== null && currentlyHighlightedElement !== sectionLink) {
|
|
currentlyHighlightedElement.style.fontWeight = '100';
|
|
}
|
|
|
|
sectionDiv.style.backgroundColor ='#fcdddd';
|
|
// sectionDiv.style.border = '5px solid #fcdddd';
|
|
sectionDiv.style.color ='black';
|
|
sectionDiv.style.marginLeft ='-67px';
|
|
sectionDiv.style.paddingLeft='67px';
|
|
sectionDiv.style.marginRight= '-75px'
|
|
currentlyHighlightedElement = sectionLink;
|
|
|
|
});
|
|
|
|
sectionLink.addEventListener('mouseout', function () {
|
|
if (currentlyHighlightedElement !== null && currentlyHighlightedElement !== sectionLink) {
|
|
currentlyHighlightedElement.style.fontWeight = '100';
|
|
}
|
|
sectionDiv.style.backgroundColor='white'
|
|
sectionDiv.style.border='white'
|
|
sectionLink.style.fontWeight = '100';
|
|
|
|
|
|
});
|
|
// SectionBoxID.addEventListener('click', function() {
|
|
// if (currentlyHighlightedElement !== null && currentlyHighlightedElement !== sectionLink) {
|
|
// currentlyHighlightedElement.style.fontWeight = 'normal';
|
|
// }
|
|
|
|
// if (currentlyHighlightedElement === sectionLink) {
|
|
// sectionLink.style.fontWeight = sectionLink.style.fontWeight === '400' ? 'normal' : '400';
|
|
// } else {
|
|
// sectionLink.style.fontWeight = '400';
|
|
// currentlyHighlightedElement = sectionLink;
|
|
// }
|
|
// });
|
|
|
|
SectionBoxID.addEventListener('mouseover', function() {
|
|
if (currentlyHighlightedElement !== null && currentlyHighlightedElement !== sectionLink) {
|
|
currentlyHighlightedElement.style.fontWeight = '100';
|
|
}
|
|
|
|
sectionDiv.style.backgroundColor ='#fcdddd';
|
|
// sectionDiv.style.border = '5px solid #fcdddd';
|
|
sectionDiv.style.borderRadius = '5px';
|
|
sectionDiv.style.color ='black';
|
|
sectionDiv.style.marginLeft ='-67px';
|
|
sectionDiv.style.paddingLeft='67px';
|
|
sectionDiv.style.marginRight= '-75px'
|
|
sectionLink.style.fontWeight = '100';
|
|
|
|
currentlyHighlightedElement = sectionLink;
|
|
// sectionDiv.scrollIntoView({ behavior: 'smooth', block: 'start' });
|
|
|
|
});
|
|
|
|
SectionBoxID.addEventListener('mouseout', function() {
|
|
if (currentlyHighlightedElement !== null && currentlyHighlightedElement !== sectionLink) {
|
|
currentlyHighlightedElement.style.fontWeight = '100';
|
|
}
|
|
sectionDiv.style.backgroundColor='white'
|
|
sectionDiv.style.border='white'
|
|
sectionLink.style.fontWeight = '100';
|
|
// sectionDiv.scrollIntoView({ behavior: 'smooth', block: 'start' });
|
|
|
|
});
|
|
|
|
|
|
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');
|
|
const nodeDivChildForIconAlgin = document.createElement('div');
|
|
nodeDiv.className = "navContain";
|
|
nodeDiv.classList.add('navDrag');
|
|
nodeDiv.appendChild(nodeDivChildForIconAlgin)
|
|
// nodeDiv.id = nodeData.textQuestion_Id || nodeData.choice_question_id;
|
|
const nodeDataId = nodeData.question_Id
|
|
const nodeDataType = nodeData.question_type
|
|
// console.log('nodeDataType:',nodeDataType);
|
|
|
|
if (nodeDataId) {
|
|
var navPaneQuestionId = takeNumberOnly.takeNumberOnly(nodeDataId)
|
|
}
|
|
|
|
|
|
|
|
var bulletPoint = "";
|
|
var dragIcon = "";
|
|
dragIcon = document.createElement('i');
|
|
dragIcon.className = 'fas fa-grip-horizontal';
|
|
dragIcon.style.position = '';
|
|
dragIcon.style.right = '1260px';
|
|
if (nodeData.question) {
|
|
parentNode.appendChild(nodeDiv);
|
|
|
|
var RawID = "";
|
|
if(nodeDataType == 'text')
|
|
{
|
|
bulletPoint = document.createElement('img');
|
|
bulletPoint.src = 'assets/images/navtext.svg';
|
|
bulletPoint.style.marginRight = '5px';
|
|
bulletPoint.style.width = '13px';
|
|
bulletPoint.style.fontWeight = 'bold';
|
|
bulletPoint.style.color = '#00aaff';
|
|
// bulletPoint.textContent = '\u2022';
|
|
// bulletPoint.setAttribute("title", "Descriptive");
|
|
nodeDivChildForIconAlgin.appendChild(bulletPoint);
|
|
nodeDiv.id =`nav_removeAndCloneTextQuestion_${navPaneQuestionId}`;
|
|
nodeDiv.setAttribute('draggable', 'true');
|
|
nodeDiv.setAttribute("ondragstart" , "dragStart(this,event)");
|
|
nodeDiv.setAttribute("ondragend" , "dragEnd(this,event)");
|
|
nodeDiv.setAttribute("ondragover" , "dragOver(this,event)");
|
|
nodeDiv.setAttribute("ondrop" , "dragDrop(this,event)");
|
|
nodeDiv.setAttribute("ondragleave" , "dragLeave(this , event)");
|
|
|
|
var splitedId = nodeDataId.split("_")[1];
|
|
RawID = 'removeAndCloneTextQuestion_'+splitedId;
|
|
|
|
|
|
}else if(nodeDataType == 'group')
|
|
{
|
|
bulletPoint = document.createElement('img');
|
|
bulletPoint.src = 'assets/images/navchoice.svg';
|
|
bulletPoint.style.marginRight = '5px';
|
|
bulletPoint.style.width = '13px';
|
|
bulletPoint.style.fontWeight = 'bold';
|
|
bulletPoint.style.color = '#00aaff';
|
|
bulletPoint.setAttribute("title", "MCQ");
|
|
// bulletPoint.textContent = '\u2022';
|
|
nodeDiv.id =`nav_removeAndCloneQroupQuestion_${navPaneQuestionId}`;
|
|
nodeDiv.setAttribute('draggable', 'true');
|
|
nodeDiv.setAttribute("ondragstart" , "dragStart(this,event)");
|
|
nodeDiv.setAttribute("ondragend" , "dragEnd(this,event)");
|
|
nodeDiv.setAttribute("ondragover" , "dragOver(this,event)");
|
|
nodeDiv.setAttribute("ondrop" , "dragDrop(this,event)");
|
|
nodeDiv.setAttribute("ondragleave" , "dragLeave(this , event)");
|
|
// nodeDiv.style.justifyContent= 'space-between'
|
|
nodeDivChildForIconAlgin.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;
|
|
// const questionlinkDiv =document.querySelectorAll('.navContain')
|
|
// console.log(questionlinkDiv);
|
|
// 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 = '#000000';
|
|
questionLink.style.fontSize = '13px';
|
|
questionLink.style.textOverflow ='ellipsis';
|
|
questionLink.style.whiteSpace= 'nowrap';
|
|
questionLink.style.overflow ='hidden';
|
|
questionLink.style.display ='-webkit-inline-box';
|
|
questionLink.style.maxWidth = '190px';
|
|
questionLink.style.fontWeight = '100';
|
|
|
|
// if(nodeDataType == 'text')
|
|
// {
|
|
// questionLink.setAttribute("title", "DescriptiveQuestion");
|
|
// }else if(nodeDataType == 'group'){
|
|
// questionLink.setAttribute("title", "MultiChoiceQuestion");
|
|
|
|
// }
|
|
|
|
// QuestionID.addEventListener('click', function () {
|
|
// if (currentlyHighlightedElement !== null && currentlyHighlightedElement !== questionLink) {
|
|
// currentlyHighlightedElement.style.fontWeight = 'normal';
|
|
// }
|
|
|
|
// if (currentlyHighlightedElement === questionLink) {
|
|
// questionLink.style.fontWeight = questionLink.style.fontWeight === '400' ? 'normal' : '400';
|
|
// questionLink.style.backgroundColor = 'white';
|
|
// currentlyHighlightedElement =null
|
|
// } else {
|
|
// questionLink.style.fontWeight = '400';
|
|
// questionLink.style.backgroundColor = '#1D3557';
|
|
// QuestionID.style.fontWeight = 'normal';
|
|
// currentlyHighlightedElement = questionLink;
|
|
// }
|
|
// });
|
|
|
|
QuestionID.addEventListener('mouseover', function () {
|
|
// console.log(QuestionID);
|
|
if (currentlyHighlightedElement !== null && currentlyHighlightedElement !== questionLink) {
|
|
currentlyHighlightedElement.style.fontWeight = '100';
|
|
}
|
|
// questionLink.style.fontWeight = '500';
|
|
// nodeDiv.style.fontWeight = '500';
|
|
nodeDiv.style.backgroundColor ='#fcdddd';
|
|
// nodeDiv.style.border = '5px solid #fcdddd';
|
|
nodeDiv.style.borderRadius = '5px';
|
|
nodeDiv.style.color ='black';
|
|
nodeDiv.style.marginLeft ='-67px';
|
|
nodeDiv.style.paddingLeft='67px';
|
|
// nodeDiv.style.marginRight= '-75px';
|
|
// nodeDiv.style.justifyContent= 'space-between';
|
|
QuestionID.style.fontWeight = '100';
|
|
currentlyHighlightedElement = nodeDiv;
|
|
// nodeDiv.scrollIntoView({ behavior: 'smooth', block: 'start' });
|
|
var a=nodeDiv.querySelector('a').href
|
|
var aa=a.split('#')[1];
|
|
// scrollToElement(aa)
|
|
|
|
});
|
|
|
|
QuestionID.addEventListener('mouseout', function () {
|
|
if (currentlyHighlightedElement !== null && currentlyHighlightedElement !== questionLink) {
|
|
currentlyHighlightedElement.style.fontWeight = 'normal';
|
|
}
|
|
|
|
// questionLink.style.fontWeight = questionLink.style.fontWeight === '400' ? 'normal' : '400';
|
|
// questionLink.style.backgroundColor = 'white';
|
|
// questionLink.style.border = 'none';
|
|
// questionLink.style.borderRadius = '5px';
|
|
questionLink.style.color = ' black';
|
|
|
|
// nodeDiv.style.fontWeight = questionLink.style.fontWeight === '400' ? 'normal' : '400';
|
|
nodeDiv.style.backgroundColor = 'white';
|
|
nodeDiv.style.border = 'none';
|
|
nodeDiv.style.borderRadius = '5px';
|
|
nodeDiv.style.color = ' black';
|
|
nodeDiv.style.marginLeft ='0px';
|
|
nodeDiv.style.paddingLeft='0px';
|
|
// nodeDiv.style.justifyContent= 'space-between'
|
|
currentlyHighlightedElement =null
|
|
// nodeDiv.scrollIntoView({ behavior: 'smooth', block: 'start' });
|
|
|
|
var a=nodeDiv.querySelector('a').href
|
|
var aa=a.split('#')[1];
|
|
// scrollToElement(aa)
|
|
|
|
});
|
|
|
|
// questionLink.addEventListener('click', function () {
|
|
// if (currentlyHighlightedElement !== null && currentlyHighlightedElement !== questionLink) {
|
|
// currentlyHighlightedElement.style.fontWeight = 'normal';
|
|
// }
|
|
|
|
// if (currentlyHighlightedElement === questionLink) {
|
|
// questionLink.style.fontWeight = questionLink.style.fontWeight === '400' ? 'normal' : '400';
|
|
// questionLink.style.backgroundColor = 'white';
|
|
// currentlyHighlightedElement =null
|
|
// } else {
|
|
// questionLink.style.fontWeight = '400';
|
|
// questionLink.style.backgroundColor = '#1D3557';
|
|
// currentlyHighlightedElement = questionLink;
|
|
// }
|
|
// });
|
|
|
|
questionLink.addEventListener('mouseover', function () {
|
|
if (currentlyHighlightedElement !== null && currentlyHighlightedElement !== questionLink) {
|
|
currentlyHighlightedElement.style.fontWeight = '100';
|
|
}
|
|
|
|
// questionLink.style.fontWeight = '500';
|
|
// questionLink.style.color = ' rgb(255 255 255)';
|
|
// nodeDiv.style.fontWeight = '500';
|
|
nodeDiv.style.backgroundColor = '#fcdddd';
|
|
// nodeDiv.style.border = '5px solid #fcdddd';
|
|
nodeDiv.style.borderRadius = '5px';
|
|
// nodeDiv.style.color = ' rgb(255 255 255)';
|
|
nodeDiv.style.color ='black';
|
|
nodeDiv.style.marginLeft ='-67px';
|
|
nodeDiv.style.paddingLeft='67px';
|
|
// nodeDiv.style.marginRight= '-75px';
|
|
nodeDiv.style.borderLeftWidth= '-75px';
|
|
// nodeDiv.style.justifyContent= 'space-between';
|
|
currentlyHighlightedElement = questionLink;
|
|
});
|
|
questionLink.addEventListener('mouseout', function () {
|
|
if (currentlyHighlightedElement !== null && currentlyHighlightedElement !== questionLink) {
|
|
currentlyHighlightedElement.style.fontWeight = '100';
|
|
}
|
|
|
|
// questionLink.style.fontWeight = questionLink.style.fontWeight === '400' ? 'normal' : '400';
|
|
questionLink.style.color = ' black';
|
|
// nodeDiv.style.fontWeight = questionLink.style.fontWeight === '400' ? 'normal' : '400';
|
|
nodeDiv.style.backgroundColor = 'white';
|
|
nodeDiv.style.border = 'none';
|
|
nodeDiv.style.borderRadius = '5px';
|
|
nodeDiv.style.color = ' black';
|
|
nodeDiv.style.marginLeft ='0px';
|
|
nodeDiv.style.paddingLeft='0px';
|
|
// nodeDiv.style.justifyContent= 'space-between';
|
|
currentlyHighlightedElement =null
|
|
});
|
|
|
|
|
|
|
|
// if (nodeData.question.length > 20) {
|
|
// // questionLink.innerHTML = removeParagraphTags(nodeData.question.substring(0, 20) + '...');
|
|
// questionLink.innerHTML = removeParagraphTags(nodeData.question);
|
|
|
|
// } else {
|
|
// questionLink.innerHTML = removeParagraphTags(nodeData.question);
|
|
// }
|
|
|
|
|
|
var htmlTagRemovedQuestionTitle = removeTagsAndTruncate(nodeData.question, 25);
|
|
var Latex = convertToLatex(htmlTagRemovedQuestionTitle);
|
|
|
|
var data = ''
|
|
if(nodeData.isMathEnabled){
|
|
data = Latex;
|
|
}else{
|
|
data = htmlTagRemovedQuestionTitle;
|
|
}
|
|
|
|
questionLink.innerHTML = data;
|
|
|
|
// console.log('questionLink : ', questionLink)
|
|
|
|
|
|
nodeDivChildForIconAlgin.appendChild(questionLink);
|
|
nodeDiv.appendChild(dragIcon)
|
|
} else if (nodeData.group_title) {
|
|
const groupTitleDiv = document.createElement('div');
|
|
// const gripIcon = document.createElement('i');
|
|
// gripIcon.className = 'fas fa-grip-horizontal';
|
|
// gripIcon.style.position = 'fixed';
|
|
// gripIcon.style.right = '1260px';
|
|
|
|
// groupTitleDiv.appendChild(gripIcon);
|
|
|
|
const groupTitleId = nodeData.question_group_id;
|
|
const getNumberOnlyGroupTitleId = takeNumberOnly.takeNumberOnly(groupTitleId)
|
|
groupTitleDiv.setAttribute('data-id', groupTitleId);
|
|
groupTitleDiv.setAttribute('id', `nav_draggedGroup_${getNumberOnlyGroupTitleId}`);
|
|
groupTitleDiv.className = 'question-group';
|
|
groupTitleDiv.setAttribute('draggable', 'true');
|
|
groupTitleDiv.setAttribute("ondragstart" , "dragStart(this,event)");
|
|
groupTitleDiv.setAttribute("ondragend" , "dragEnd(this , event)");
|
|
groupTitleDiv.setAttribute("ondragover" , "dragOver(this,event)");
|
|
groupTitleDiv.setAttribute("ondragleave" , "dragLeave(this , event)")
|
|
groupTitleDiv.setAttribute("ondrop" , "dragDrop(this , event)");
|
|
|
|
|
|
// 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');
|
|
}
|
|
if(editPage == 1 || editPage == null){
|
|
|
|
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');
|
|
}
|
|
});
|
|
|
|
|
|
if(editPage == 1 || editPage == null){
|
|
|
|
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 = '#000000';
|
|
let currentlyHighlightedElement = null;
|
|
|
|
// groupQuestionLink.addEventListener('click', () => {
|
|
// if (currentlyHighlightedElement !== null && currentlyHighlightedElement !== groupQuestionLink) {
|
|
// currentlyHighlightedElement.style.fontWeight = 'normal';
|
|
// currentlyHighlightedElement.style.border = 'none';
|
|
// currentlyHighlightedElement.style.backgroundColor = 'white';
|
|
// currentlyHighlightedElement.style.borderWidth = 'none';
|
|
// }
|
|
|
|
// if (currentlyHighlightedElement === groupQuestionLink) {
|
|
// groupQuestionLink.style.fontWeight = 'normal';
|
|
// groupQuestionLink.style.border = 'none';
|
|
// groupQuestionLink.style.backgroundColor = 'white';
|
|
// groupQuestionLink.style.borderWidth = 'none';
|
|
// groupQuestionLink.style.color = 'black';
|
|
// currentlyHighlightedElement = null;
|
|
// } else {
|
|
// groupQuestionLink.style.fontWeight = '400';
|
|
// groupQuestionLink.style.border = '5px solid #1D3557';
|
|
// groupQuestionLink.style.borderRadius = '5px';
|
|
// // groupQuestionLink.style.borderWidth= '10px'
|
|
// groupQuestionLink.style.backgroundColor = '#1D3557';
|
|
// groupQuestionLink.style.color=' rgb(255 255 255)'
|
|
// currentlyHighlightedElement = groupQuestionLink;
|
|
// }
|
|
// });
|
|
|
|
groupQuestionLink.addEventListener('mouseover', () => {
|
|
if (currentlyHighlightedElement !== null && currentlyHighlightedElement !== groupQuestionLink) {
|
|
currentlyHighlightedElement.style.fontWeight = '100';
|
|
currentlyHighlightedElement.style.border = 'none';
|
|
currentlyHighlightedElement.style.backgroundColor = 'white';
|
|
currentlyHighlightedElement.style.borderWidth = 'none';
|
|
}
|
|
|
|
// groupQuestionLink.style.fontWeight = '400';
|
|
// groupQuestionLink.style.border = '5px solid #1D3557';
|
|
// groupQuestionLink.style.borderRadius = '5px';
|
|
// // groupQuestionLink.style.borderWidth= '10px'
|
|
// groupQuestionLink.style.backgroundColor = '#1D3557';
|
|
// groupQuestionLink.style.color=' rgb(255 255 255)';
|
|
groupQuestionLink.style.color= 'black';
|
|
groupTitleDiv.style.color='black';
|
|
groupTitleDiv.style.fontWeight = '100';
|
|
// groupTitleDiv.style.border = '5px solid #fcdddd';
|
|
groupTitleDiv.style.borderRadius = '5px';
|
|
groupTitleDiv.style.backgroundColor = '#fcdddd';
|
|
groupTitleDiv.style.marginLeft ='-67px';
|
|
groupTitleDiv.style.paddingLeft='67px';
|
|
groupTitleDiv.style.marginRight= '-75px';
|
|
groupTitleDiv.style.borderLeftWidth= '-75px';
|
|
|
|
currentlyHighlightedElement = groupQuestionLink;
|
|
|
|
});
|
|
|
|
groupQuestionLink.addEventListener('mouseout', () => {
|
|
if (currentlyHighlightedElement !== null && currentlyHighlightedElement !== groupQuestionLink) {
|
|
currentlyHighlightedElement.style.fontWeight = 'normal';
|
|
currentlyHighlightedElement.style.border = 'none';
|
|
currentlyHighlightedElement.style.backgroundColor = 'white';
|
|
currentlyHighlightedElement.style.borderWidth = 'none';
|
|
}
|
|
|
|
// groupQuestionLink.style.fontWeight = 'normal';
|
|
// groupQuestionLink.style.border = 'none';
|
|
// groupQuestionLink.style.backgroundColor = 'white';
|
|
// groupQuestionLink.style.borderWidth = 'none';
|
|
groupQuestionLink.style.color = 'black';
|
|
// currentlyHighlightedElement = null;
|
|
|
|
groupTitleDiv.style.fontWeight = 'normal';
|
|
groupTitleDiv.style.border = 'none';
|
|
groupTitleDiv.style.backgroundColor = 'white';
|
|
groupTitleDiv.style.borderWidth = 'none';
|
|
groupTitleDiv.style.color = 'black';
|
|
groupTitleDiv.style.marginLeft ='0px';
|
|
groupTitleDiv.style.paddingLeft='0px';
|
|
currentlyHighlightedElement = null;
|
|
});
|
|
|
|
// GroupBoxID.addEventListener('click', function () {
|
|
|
|
// if (currentlyHighlightedElement !== null && currentlyHighlightedElement !== groupQuestionLink) {
|
|
// currentlyHighlightedElement.style.fontWeight = 'normal';
|
|
// currentlyHighlightedElement.style.border = 'none';
|
|
// currentlyHighlightedElement.style.backgroundColor = 'white';
|
|
// currentlyHighlightedElement.style.borderWidth = 'none';
|
|
// }
|
|
|
|
// if (currentlyHighlightedElement === groupQuestionLink) {
|
|
// groupQuestionLink.style.fontWeight = 'normal';
|
|
// groupQuestionLink.style.border = 'none';
|
|
// groupQuestionLink.style.backgroundColor = 'white';
|
|
// groupQuestionLink.style.borderWidth = 'none';
|
|
// groupQuestionLink.style.borderRadius = '0px';
|
|
// groupQuestionLink.style.color = 'black';
|
|
// currentlyHighlightedElement = null;
|
|
// } else {
|
|
// groupQuestionLink.style.fontWeight = '400';
|
|
// groupQuestionLink.style.border = '5px solid #1D3557';
|
|
// groupQuestionLink.style.backgroundColor = '#1D3557';
|
|
// groupQuestionLink.style.borderWidth= '10px'
|
|
// // groupQuestionLink.style.borderWidth = '5px';
|
|
// groupQuestionLink.style.borderRadius = '5px';
|
|
// groupQuestionLink.style.color = 'rgb(255 255 255)';
|
|
// GroupBoxID.style.fontWeight = 'normal';
|
|
// currentlyHighlightedElement = groupQuestionLink;
|
|
// }
|
|
// });
|
|
|
|
|
|
GroupBoxID.addEventListener('mouseout', function () {
|
|
|
|
if (currentlyHighlightedElement !== null && currentlyHighlightedElement !== groupQuestionLink) {
|
|
currentlyHighlightedElement.style.fontWeight = 'normal';
|
|
currentlyHighlightedElement.style.border = 'none';
|
|
currentlyHighlightedElement.style.backgroundColor = 'white';
|
|
currentlyHighlightedElement.style.borderWidth = 'none';
|
|
}
|
|
|
|
groupQuestionLink.style.color = 'black';
|
|
|
|
groupTitleDiv.style.fontWeight = 'normal';
|
|
groupTitleDiv.style.border = 'none';
|
|
groupTitleDiv.style.backgroundColor = 'white';
|
|
groupTitleDiv.style.borderWidth = 'none';
|
|
groupTitleDiv.style.color = 'black';
|
|
groupTitleDiv.style.marginLeft ='0px';
|
|
groupTitleDiv.style.paddingLeft='0px';
|
|
currentlyHighlightedElement = null;
|
|
// groupTitleDiv.scrollIntoView({ behavior: 'smooth', block: 'start' });
|
|
|
|
});
|
|
|
|
GroupBoxID.addEventListener('mouseover', function () {
|
|
|
|
if (currentlyHighlightedElement !== null && currentlyHighlightedElement !== groupQuestionLink) {
|
|
currentlyHighlightedElement.style.fontWeight = 'normal';
|
|
currentlyHighlightedElement.style.border = 'none';
|
|
currentlyHighlightedElement.style.backgroundColor = 'white';
|
|
currentlyHighlightedElement.style.borderWidth = 'none';
|
|
}
|
|
|
|
|
|
groupTitleDiv.style.fontWeight = '400';
|
|
groupTitleDiv.style.border = '5px solid #fcdddd';
|
|
groupTitleDiv.style.borderRadius = '5px';
|
|
groupTitleDiv.style.backgroundColor = '#fcdddd';
|
|
groupQuestionLink.style.color= 'black';
|
|
groupTitleDiv.style.marginLeft ='-67px';
|
|
groupTitleDiv.style.paddingLeft='67px';
|
|
groupTitleDiv.style.marginRight= '-75px';
|
|
groupTitleDiv.style.borderLeftWidth= '-75px';
|
|
GroupBoxID.style.fontWeight = 'normal';
|
|
currentlyHighlightedElement = groupQuestionLink;
|
|
// groupTitleDiv.scrollIntoView({ behavior: 'smooth', block: 'start' });
|
|
|
|
});
|
|
|
|
|
|
if (nodeData.group_title.length > 20) {
|
|
// groupQuestionLink.innerHTML = removeParagraphTags(nodeData.group_title.substring(0, 20) + '..');
|
|
groupQuestionLink.innerHTML = removeParagraphTags(nodeData.group_title);
|
|
|
|
} 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'));
|
|
});
|
|
}
|
|
const sidebarToggle1 = document.body.querySelector('#sidebarToggle1');
|
|
if (sidebarToggle1) {
|
|
sidebarToggle1.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) {
|
|
console.log('scroll elementId : ', elementId)
|
|
var getMathFieldId = elementId.replace(/\d/g, '');
|
|
console.log('getMathFieldId : ', getMathFieldId);
|
|
const element = document.getElementById(elementId);
|
|
const previousElement = element.previousElementSibling;
|
|
var focus = ''
|
|
if(getMathFieldId == 'textQuestiontitleMath_'){
|
|
focus = element
|
|
}
|
|
else{
|
|
focus = previousElement.querySelector('.jodit-workplace').querySelector('.jodit-wysiwyg');
|
|
}
|
|
if (element) {
|
|
focus.scrollIntoView({ behavior: "smooth", block: "center" });
|
|
}
|
|
}
|
|
|
|
function convertToLatex(text, mathstatus) {
|
|
// Parse mathstatus into a boolean
|
|
const mathStatusBoolean = true;
|
|
|
|
// Check if the text contains <p> tags
|
|
if (!/<p>|<\/p>/i.test(text)) {
|
|
// Use MathJax to convert the text to LaTeX if mathStatusBoolean is true
|
|
var val = mathStatusBoolean ? MathJax.tex2chtml(text).outerHTML : text;
|
|
return convertMathJaxToLatex(val)
|
|
} else {
|
|
// Use MathJax to convert the text to LaTeX if it contains <p> tags
|
|
var val2 = MathJax.tex2chtml(text).outerHTML;
|
|
return convertMathJaxToLatex(val2)
|
|
}
|
|
}
|
|
|
|
function convertMathJaxToLatex(mathJaxCode) {
|
|
// Replace MathJax-specific tags and attributes
|
|
let latexCode = mathJaxCode
|
|
.replace(/<mjx-container[^>]*>/g, '')
|
|
.replace(/<\/mjx-container>/g, '')
|
|
.replace(/<mjx-math[^>]*>/g, '')
|
|
.replace(/<\/mjx-math>/g, '')
|
|
.replace(/<mjx-mi[^>]*>/g, '')
|
|
.replace(/<\/mjx-mi>/g, '')
|
|
.replace(/<mjx-c[^>]*>/g, '')
|
|
.replace(/<\/mjx-c>/g, '')
|
|
.replace(/<mjx-assistive-mml[^>]*>/g, '')
|
|
.replace(/<\/mjx-assistive-mml>/g, '')
|
|
.replace(/</g, '<')
|
|
.replace(/>/g, '>');
|
|
|
|
return latexCode;
|
|
}
|
|
|
|
|
|
|
|
|