SIDEBAR NAVIGATION
This commit is contained in:
Sharath
parent
2c12f07f2e
commit
51415c02a7
199
addform.html
199
addform.html
@ -177,6 +177,151 @@
|
||||
}
|
||||
|
||||
|
||||
</style>
|
||||
|
||||
<style>
|
||||
.arrow-down::before {
|
||||
content: '\25BC';
|
||||
margin-right: 5px;
|
||||
}
|
||||
.arrow-right::before {
|
||||
content: '\25B6';
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
.menu-symbol::before {
|
||||
content: '\2630'; /* Unicode character for the menu symbol (☰) */
|
||||
font-size: 24px; /* Adjust the font size as needed */
|
||||
}
|
||||
a{
|
||||
white-space: nowrap !important;
|
||||
}
|
||||
|
||||
/* Style for the main headings */
|
||||
.main-heading {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
/* Style for the collapsible content */
|
||||
.content {
|
||||
display: none;
|
||||
margin-left: 20px;
|
||||
}
|
||||
|
||||
.content.visible {
|
||||
display: block;
|
||||
}
|
||||
.nested {
|
||||
border-left: 2px dotted #000;
|
||||
margin-left: 10px;
|
||||
padding-left: 10px;
|
||||
}
|
||||
|
||||
|
||||
#wrapper {
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
#sidebar-wrapper {
|
||||
min-height: 100vh;
|
||||
width:300px;
|
||||
margin-left: -15rem;
|
||||
transition: margin 0.25s ease-out;
|
||||
background-color: #ffffff8f!important;
|
||||
position: relative;
|
||||
overflow-y: auto;
|
||||
border-radius: 40px;
|
||||
}
|
||||
|
||||
#sidebar-wrapper .sidebar-heading {
|
||||
padding: 0.875rem 1.25rem;
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
|
||||
#sidebar-wrapper .list-group {
|
||||
width: 15rem;
|
||||
}
|
||||
#questionPaper{
|
||||
position: fixed;
|
||||
top: 151px;
|
||||
left: 0;
|
||||
overflow-y: auto;
|
||||
overflow-x: scroll;
|
||||
max-height: 532px;
|
||||
padding:0 00 20px;
|
||||
width: 235px;
|
||||
height: -webkit-fill-available;
|
||||
}
|
||||
#page-content-wrapper {
|
||||
min-width: 100%;
|
||||
}
|
||||
|
||||
body.sb-sidenav-toggled #wrapper #sidebar-wrapper {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
@media (min-width: 100px) {
|
||||
#sidebar-wrapper {
|
||||
margin-left: 0;
|
||||
}
|
||||
#page-content-wrapper {
|
||||
min-width: 0;
|
||||
width: 100%;
|
||||
}
|
||||
body.sb-sidenav-toggled #wrapper #sidebar-wrapper {
|
||||
margin-left: -19rem;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
/* Reset default margin and padding for body and the wrapper */
|
||||
body, #wrapper {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
/* Set the wrapper to flex layout */
|
||||
#wrapper {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
/* Style the sidebar */
|
||||
|
||||
.sidebar-content {
|
||||
padding: 10px; /* Add padding to your content */
|
||||
}
|
||||
|
||||
/* Style the main content area */
|
||||
.main-content {
|
||||
flex-grow: 1; /* Allow the main content to grow and fill the remaining space */
|
||||
overflow-y: auto; /* Enable vertical scrolling for the main content */
|
||||
}
|
||||
.qP-style{
|
||||
left:-220px!important;
|
||||
}
|
||||
|
||||
/*navigation botton */
|
||||
.menu-symbol {
|
||||
background-color: transparent;
|
||||
margin-top: 14px;
|
||||
margin-right: -69%;
|
||||
margin-left: -108px;
|
||||
border: none;
|
||||
border-radius: 50%; /* Make the button round */
|
||||
width: 40px; /* Set the width and height of the button */
|
||||
height: 40px;
|
||||
transition: box-shadow 0.3s, background-color 0.3s; /* Add a smooth transition to the shadow and background-color */
|
||||
}
|
||||
|
||||
.menu-symbol:hover {
|
||||
box-shadow: 0 0 10px rgba(0, 0, 0, 0); /* Add a transparent shadow on hover */
|
||||
background-color: #e4d3f8b4;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
|
||||
</style>
|
||||
|
||||
</head>
|
||||
@ -197,6 +342,8 @@
|
||||
<div class="row">
|
||||
<div class="col-lg-12">
|
||||
<div id="sticky-header" class="nav-menu">
|
||||
<button class="menu-symbol" id="sidebarToggle"></button>
|
||||
|
||||
<div class="header-logo">
|
||||
<a href="dashboard.html" ><h2 style="margin-top: 25px;"><img src="assets/images/fav-icon/icon.png" alt=""> PROJECT-B</h2></a>
|
||||
<a class="main_sticky" href="dashboard.html" class="project"><h2 style="margin-top: 25px;"><img src="assets/images/fav-icon/icon.png" alt=""> PROJECT-B</h2></a>
|
||||
@ -225,9 +372,18 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<!-- QuestionPapper Container start -->
|
||||
<div class="container" style=" margin-top: 6%; max-width: 75%;">
|
||||
<div class="d-flex" id="wrapper">
|
||||
<!-- Sidebar-->
|
||||
<div class="border-end bg-white" id="sidebar-wrapper">
|
||||
<div id="questionPaper"></div>
|
||||
</div>
|
||||
<!-- sidebar end -->
|
||||
|
||||
|
||||
<div class="container" >
|
||||
|
||||
<div class="mainpanel"></div>
|
||||
|
||||
<!-- QuestionPapper Start -->
|
||||
<div class="row section QuestionPaperClass" id="QuestionPaper">
|
||||
@ -320,6 +476,7 @@
|
||||
|
||||
</div>
|
||||
<!-- QuestionPapper Container End -->
|
||||
</div>
|
||||
|
||||
|
||||
<div class="copy-right-area">
|
||||
@ -376,8 +533,19 @@
|
||||
|
||||
<!-- RTC Hide and Show Script -->
|
||||
<script src="rtc_hide_and_show.js"></script>
|
||||
|
||||
<!-- nave pane -->
|
||||
<script src="nav_pane.js"></script>
|
||||
|
||||
|
||||
<script>
|
||||
var sidebarWrapper = document.getElementById("questionPaper");
|
||||
|
||||
function clearSidebarWrapper() {
|
||||
while (sidebarWrapper.firstChild) {
|
||||
sidebarWrapper.removeChild(sidebarWrapper.firstChild);
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<script>
|
||||
|
||||
const url = new URL(window.location.href);// Get the URL of the current page for JSON
|
||||
@ -433,6 +601,9 @@ function loadXML(xmlFileName) {
|
||||
} else {
|
||||
resolve(data);
|
||||
xml2json(data);
|
||||
json2nav();
|
||||
clearSidebarWrapper();
|
||||
navpane();
|
||||
}
|
||||
});
|
||||
});
|
||||
@ -525,9 +696,13 @@ var inputElement2 = document.getElementById('Question_title');
|
||||
inputElement2.addEventListener("keyup", function(event) {
|
||||
|
||||
json2nav();
|
||||
clearSidebarWrapper();
|
||||
navpane();
|
||||
|
||||
});
|
||||
json2nav();
|
||||
clearSidebarWrapper();
|
||||
navpane();
|
||||
// html2json();
|
||||
|
||||
|
||||
@ -814,6 +989,8 @@ function addSection(title = false, description = false, random_no = false, secti
|
||||
inputElement.addEventListener("keyup", function(event) {
|
||||
|
||||
json2nav();
|
||||
clearSidebarWrapper();
|
||||
navpane();
|
||||
|
||||
});
|
||||
|
||||
@ -853,6 +1030,8 @@ function addSection(title = false, description = false, random_no = false, secti
|
||||
// });
|
||||
|
||||
json2nav();
|
||||
clearSidebarWrapper();
|
||||
navpane();
|
||||
|
||||
|
||||
}
|
||||
@ -1122,10 +1301,14 @@ function addQuestionGroup(idObj)
|
||||
inputElement.addEventListener("keyup", function(event) {
|
||||
|
||||
json2nav();
|
||||
clearSidebarWrapper();
|
||||
navpane();
|
||||
|
||||
});
|
||||
|
||||
json2nav();
|
||||
clearSidebarWrapper();
|
||||
navpane();
|
||||
// html2json();
|
||||
|
||||
}
|
||||
@ -1590,10 +1773,14 @@ function groupQuestion( question_id = false, section_id = false , group_question
|
||||
$(inputElement).keyup(function(event) {
|
||||
|
||||
json2nav();
|
||||
clearSidebarWrapper();
|
||||
navpane();
|
||||
|
||||
});
|
||||
|
||||
json2nav();
|
||||
clearSidebarWrapper();
|
||||
navpane();
|
||||
}
|
||||
|
||||
//Function for Create a New Choice Field in a Choice Question
|
||||
@ -1746,6 +1933,8 @@ function addNewChoice(NewaddChoiceAreaId = false , choiceName = false, choiceDes
|
||||
$(newchoiceTextField_previousDiv).hide();
|
||||
|
||||
json2nav();
|
||||
clearSidebarWrapper();
|
||||
navpane();
|
||||
}
|
||||
|
||||
//Function for Create a New Text Question in the Section and Question Group
|
||||
@ -2116,9 +2305,13 @@ function textQuestion(question_id = false, section_id = false, group_question_ar
|
||||
|
||||
$(inputElement).keyup(function(event) {
|
||||
json2nav();
|
||||
clearSidebarWrapper();
|
||||
navpane();
|
||||
});
|
||||
|
||||
json2nav();
|
||||
clearSidebarWrapper();
|
||||
navpane();
|
||||
|
||||
}
|
||||
|
||||
|
||||
@ -152,7 +152,7 @@
|
||||
<div class="heder-menu">
|
||||
<ul>
|
||||
<li><a href="addform.html"><i class="fa fa-plus" aria-hidden="true" style="font-size: 24px;"></i> New</a></li>
|
||||
<li><a href="#" id="myBtn"><i class="fa fa-upload" aria-hidden="true" style="font-size: 24px;"></i> Open</a></li>
|
||||
<li><a href="#" id="myBtn"><i class="fa fa-folder-open" aria-hidden="true" style="font-size: 24px;"></i> Open</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -84,19 +84,22 @@ function json2nav() {
|
||||
}
|
||||
|
||||
|
||||
$.fn.getSectionData = function(element) {
|
||||
$.fn.getSectionDataNavigation = function(element) {
|
||||
// console.log('getSectionData');
|
||||
// console.log(element.id);
|
||||
const rand_id = (element.id).split("_").slice(-1)[0];
|
||||
// console.log(rand_id);
|
||||
// console.log('section_title_text_'+rand_id);
|
||||
console.log(rand_id);
|
||||
console.log('section_title_text_'+rand_id);
|
||||
var section = {}
|
||||
var section_title = document.getElementById('section_title_text_' + rand_id);
|
||||
section['section_title'] = ((typeof section_title !== null && section_title !== 'undefined') ? (section_title !== null ? section_title.querySelector('.ql-editor').innerHTML : null) : null);
|
||||
console.log('section title in nav script');
|
||||
console.log(section_title);
|
||||
// section['section_title'] = ((section_title !== null && section_title !== 'undefined') ? (section_title !== null ? section_title.querySelector('.ql-editor').innerHTML : null) : null);
|
||||
section['section_title'] = (section_title && section_title.querySelector('.ql-editor') ? section_title.querySelector('.ql-editor').innerHTML : null);
|
||||
section['section_id'] = 'section_title_text_' + rand_id;
|
||||
if (section_title !== null) {
|
||||
var questionsData = $.fn.getQuestionsData(rand_id);
|
||||
// console.log('Section Data');
|
||||
console.log('Section Data');
|
||||
// console.log(questionsData);
|
||||
section['questions'] = questionsData;
|
||||
return section;
|
||||
@ -117,8 +120,8 @@ function json2nav() {
|
||||
$parentSectionElement.find(".section").each(function(index, element) {
|
||||
// console.log(element);
|
||||
// if(index == 2){return false;}
|
||||
var sectionData = $.fn.getSectionData(element);
|
||||
// console.log(sectionData);
|
||||
var sectionData = $.fn.getSectionDataNavigation(element);
|
||||
console.log('sectionData:',sectionData);
|
||||
if (sectionData !== null && sectionData !== undefined) {
|
||||
formData['sections'].push(sectionData);
|
||||
}
|
||||
@ -127,7 +130,7 @@ function json2nav() {
|
||||
|
||||
// console.log((formData));
|
||||
// console.log(JSON.stringify(formData, null, 1));
|
||||
localStorage.setItem("json", JSON.stringify((formData)));
|
||||
console.log(JSON.stringify(formData));
|
||||
localStorage.setItem("JSON_FOR_NAV", JSON.stringify((formData)));
|
||||
console.log('ddddddddddddddddddddddddddddddddddddddddddd',JSON.stringify(formData));
|
||||
// console.log(OBJtoXML(({'question_paper' : formData})));
|
||||
}
|
||||
|
||||
2
index.js
2
index.js
@ -65,7 +65,7 @@ async function loadMultipleXMLs() {
|
||||
<i class="fa fa-pencil-square-o" aria-hidden="true" style="font-size: 24px"></i>
|
||||
</a>
|
||||
<a class="icons" href="#" id="${dynamicId}" data-filename="${xmlFile}" title="Export">
|
||||
<i class="fa fa-download" aria-hidden="true" style="font-size: 24px"></i>
|
||||
<i class="fa fa-upload" aria-hidden="true" style="font-size: 24px"></i>
|
||||
</a>
|
||||
</div>
|
||||
<div class="resent-post-single-box">
|
||||
|
||||
236
nav_pane.js
Normal file
236
nav_pane.js
Normal file
@ -0,0 +1,236 @@
|
||||
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.textQuestion_Id || nodeData.choice_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.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'));
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
@ -1059,6 +1059,7 @@ input::focus {
|
||||
background: #fff;
|
||||
/* background: #b3ffd9; */
|
||||
position: relative;
|
||||
border-radius: 39px;
|
||||
/* color: darkgrey; */
|
||||
}
|
||||
|
||||
@ -2099,6 +2100,7 @@ input::focus {
|
||||
}
|
||||
.copy-left {
|
||||
text-align: center;
|
||||
padding: 148px 0px 0px 0px;
|
||||
}
|
||||
.copy-right-area span {
|
||||
font-size: 16px;
|
||||
@ -3485,7 +3487,9 @@ input:disabled {
|
||||
transition: border-left-color 0.3s; /* Add a smooth transition effect */
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
.question:hover .type1-switch{
|
||||
display:block !important;
|
||||
}
|
||||
.element:hover {
|
||||
border-left-color: #00aaff; /* Change the border color on hover */
|
||||
}
|
||||
|
||||
@ -1051,6 +1051,7 @@ input::focus {
|
||||
background: #fff;
|
||||
/* background: #b3ffd9; */
|
||||
position: relative;
|
||||
border-radius: 39px;
|
||||
/* color: darkgrey; */
|
||||
}
|
||||
|
||||
|
||||
File diff suppressed because one or more lines are too long
Loading…
Reference in New Issue
Block a user