From 254a0a1ae0b726b65132406c665fccff1af23f64 Mon Sep 17 00:00:00 2001
From: aadhavan valli <aadhavanvalli@gmail.com>
Date: Tue, 13 Feb 2024 11:26:56 +0530
Subject: [PATCH] TABINDEX : AADHAVAN

---
 addform.html | 194 ++++++++++++++++++++++++++++++++++++---------------
 nav_pane.js  |  24 +++----
 2 files changed, 148 insertions(+), 70 deletions(-)

diff --git a/addform.html b/addform.html
index f2ac3ee..be187b2 100644
--- a/addform.html
+++ b/addform.html
@@ -64,6 +64,15 @@
 
 
 			<style>    
+
+				.sectionTitleTabWorking{
+					border: white !important;
+					width: 0px !important;
+				}
+				.sectionTitleTabWorking:focus{
+					box-shadow: 0 0 10px rgba(255, 255, 255, 0.5) !important;
+					border: white;
+				}
 				.focused {
 					border: 2px solid rgba(253, 126, 20, .60);
 				}
@@ -1093,12 +1102,12 @@ async function convertToLatex(text, mathstatus) {
 				<!-- The contentEditable div for Quill -->
 				<div class="row">
 					<div class="col-12">
-						<div class="richText worksection" id="workarea" contentEditable="true" tabindex="0" placeholder="Type your message and press Enter..." style="position: relative; top: 4px;"></div>
+						<div class="richText worksection" id="workarea" contentEditable="true"  placeholder="Type your message and press Enter..." style="position: relative; top: 4px;"></div>
 						<input type="file" id="workarea_fileInput" style="display: none;">
 					</div>
 					<div class="col-12">
 						<div>
-							<math-field id="workarea_math" style="width: 100%; " contenteditable="true" tabindex="0"></math-field>
+							<math-field id="workarea_math" style="width: 100%; " contenteditable="true" ></math-field>
 						</div>
 					</div>
 					<div class="col-6 items2" style="display: flex; align-items: center; position: relative; right: 40px;">
@@ -1138,7 +1147,7 @@ async function convertToLatex(text, mathstatus) {
 					<div class="col-lg-12 col-md-12" style="padding: 0;">
 						<div class="form_box">
 							<label class="titleSpace">Description:</label>
-							<div class="richText" id="Question_description" contenteditable="true" tabindex="0" style=" border: 2px solid #EEECFE; margin-top: 4px; color: black;"></div>
+							<div class="richText" id="Question_description" contenteditable="true"  style=" border: 2px solid #EEECFE; margin-top: 4px; color: black;"></div>
 							<input type="file" id="Question_description_fileInput" style="display: none;">
 						</div>
 					</div>
@@ -2036,16 +2045,16 @@ function addSection(title = false, description = false, random_no = false, secti
 
                         <div class="form_box">
                             <label class="titleSpace">Section:  </label>
-                            <div class="richText" id="section_title_text_${random_no == false ? text_field_created_time : random_no}" contenteditable="true" tabindex="0" style="border: 2px solid #EEECFE; margin-top: 4px;">${title ? title : ''}</div>
+                            <div class="richText" id="section_title_text_${random_no == false ? text_field_created_time : random_no}" contenteditable="true"  style="border: 2px solid #EEECFE; margin-top: 4px;">${title ? title : ''}</div>
 							<input type="file" id="fileInput_${sectionRandomID}" style="display: none;">                        </div>
                     </div>
 
                     <div class="col-lg-12 col-md-12">
                         <div class="form_box">
                             <label class="titleSpace">Description:</label>
-                            <div class="richText" id="section_description_text_${random_no == false ? text_field_created_time : random_no}" contenteditable="true" tabindex="0" style="border: 2px solid #EEECFE; margin-top: 4px;">${description ? description : ''}</div>
+                            <div class="richText" id="section_description_text_${random_no == false ? text_field_created_time : random_no}" contenteditable="true"  style="border: 2px solid #EEECFE; margin-top: 4px;">${description ? description : ''}</div>
 							<input type="file" id="fileInput2_${sectionRandomID}" style="display: none;">                        </div>
-                    </div>tabindex="0"
+                    </div>
 
                     <div class="col-lg-5 col-md-5 mt-2">
                         <span>Display Marks</span>
@@ -2210,11 +2219,24 @@ function addSection(title = false, description = false, random_no = false, secti
 				],
 				});
 
-				var chat_Div = $("#"+SectionText);
+				var chat_Div = $("#" + SectionText);
 				var chat_previousDiv = chat_Div.prev();
-				var sectionText_Id = 'sectionTitleValue' + sectionRandomID
+				var sectionText_Id = 'sectionTitleValue' + sectionRandomID;
+
+				// Create a hidden input element
+				var hiddenInput = $('<input>').attr({
+					id: 'input_' + sectionText_Id ,
+					class: 'sectionTitleTabWorking'
+				})
+				// .css('display', 'none'); // Set display to none
+
+				// Add the hidden input before the chat_previousDiv element
+				chat_previousDiv.before(hiddenInput);
+
+				// Set the ID of the chat_previousDiv element
 				chat_previousDiv.attr("id", sectionText_Id);
 
+
 				var fileInputId = 'fileInput_' + sectionRandomID;
 				const fileInput = document.getElementById(fileInputId);
 				fileInput.addEventListener("change", () => {
@@ -2465,7 +2487,7 @@ function addQuestionGroup(idObj)
 							</div>						
 							<div class="col-lg-12 col-md-12">
 								<div class="form_box">
-									<label class="titleSpace">Questions Group Title:<span id='partOf_${QuestionGroup_ID}'></span> <input contenteditable="true" tabindex="0" style="border: 2px solid #EEECFE;height:34px;width: 200px !important;;margin-left:4px;" class="QuestionsGroupIdset SerialNo"  id="Questions_Group_id_${QuestionGroup_ID}"  value="${group_question_id}" placeholder="SNo..."> </label>
+									<label class="titleSpace">Questions Group Title:<span id='partOf_${QuestionGroup_ID}'></span> <input contenteditable="true"  style="border: 2px solid #EEECFE;height:34px;width: 200px !important;;margin-left:4px;" class="QuestionsGroupIdset SerialNo"  id="Questions_Group_id_${QuestionGroup_ID}"  value="${group_question_id}" placeholder="SNo..."> </label>
 									<div class="richText" id="subSection_title_text_${QuestionGroup_ID}" contenteditable="true" style=" border: 2px solid #EEECFE;  margin-top: 4px;">${idObj.hasOwnProperty('question_group_obj') ? idObj.question_group_obj.group_title  : ""}</div>
 									<input type="file" id="fileInput_${QuestionGroup_ID}" style="display: none;">
 								</div>
@@ -2474,7 +2496,7 @@ function addQuestionGroup(idObj)
 							<div class="col-lg-12 col-md-12 hideondrag">
 								<div class="form_box">
 									<label class="titleSpace">Questions Group Description:</label>
-									<div class="richText" id="subSection_description_text_${QuestionGroup_ID}" contenteditable="true" tabindex="0" style=" border: 2px solid #EEECFE;  margin-top: 4px;">${idObj.hasOwnProperty('question_group_obj') ? idObj.question_group_obj.group_description : ""}</div>
+									<div class="richText" id="subSection_description_text_${QuestionGroup_ID}" contenteditable="true"  style=" border: 2px solid #EEECFE;  margin-top: 4px;">${idObj.hasOwnProperty('question_group_obj') ? idObj.question_group_obj.group_description : ""}</div>
 									<input type="file" id="fileInput2_${QuestionGroup_ID}" style="display: none;">
 								</div>
 							</div>
@@ -2984,9 +3006,9 @@ function groupQuestion(question_id = false, section_id = false , group_question_
 				<div class="row">
 					<div class="col-lg-12 col-md-12" style="margin-top: -20px"> 
 						<div class="form_box">
-							<label class="titleSpace">Question:<span id='partOf_${addChoiceAreaId}'> <input style=" width: 200px !important;border: 2px solid #EEECFE;height: 37px; margin-left: 4px; margin-top: -29px;" id="QuestionChoiceId_${addChoiceAreaId}" class="QuestionChoiceId SerialNo" tabindex="0" contenteditable="true" value="${questionIdS}" placeholder="SNo...."></label>
-			 				<div class="richText" id="textQuestionName_${addChoiceAreaId}" contenteditable="true" tabindex="0" style=" border: 2px solid #EEECFE;  margin-top: 4px;">${questionTitle ? questionTitle : ''}</div>
-							 <math-field  id="textQuestiontitleMath_${addChoiceAreaId}" contenteditable="true" tabindex="0">${titleMath == 'Math' ? questionTitle : ''}</math-field>
+							<label class="titleSpace">Question:<span id='partOf_${addChoiceAreaId}'> <input style=" width: 200px !important;border: 2px solid #EEECFE;height: 37px; margin-left: 4px; margin-top: -29px;" id="QuestionChoiceId_${addChoiceAreaId}" class="QuestionChoiceId SerialNo"  contenteditable="true" value="${questionIdS}" placeholder="SNo...."></label>
+			 				<div class="richText" id="textQuestionName_${addChoiceAreaId}" contenteditable="true"  style=" border: 2px solid #EEECFE;  margin-top: 4px;">${questionTitle ? questionTitle : ''}</div>
+							 <math-field  id="textQuestiontitleMath_${addChoiceAreaId}" contenteditable="true" >${titleMath == 'Math' ? questionTitle : ''}</math-field>
 							 <span class="mathQuestions">Math</span>&nbsp;<input class="checkbox" style="width:14px; height:14px" type="checkbox" id="titlemath_${addChoiceAreaId}">
 							<input type="file" id="fileInput_${addChoiceAreaId}" style="display: none;">
 						</div>
@@ -2995,8 +3017,8 @@ function groupQuestion(question_id = false, section_id = false , group_question_
 					<div class="col-lg-12 col-md-12 hideondrag" style="margin-bottom: 5px">
 						<div class="form_box">
 							<label class="titleSpace">Subtitle:</label>
-							<div class="richText" id="textQuestionSubtitle_${addChoiceAreaId}" contenteditable="true" tabindex="0" style=" border: 2px solid #EEECFE;  margin-top: 4px;">${questionDescription ? questionDescription : ''}</div>
-							<math-field  id="textQuestionSubtitle_math_${addChoiceAreaId}" contenteditable="true" tabindex="0">${mathEnabled == 'Math' ? questionDescription : ''}</math-field>
+							<div class="richText" id="textQuestionSubtitle_${addChoiceAreaId}" contenteditable="true"  style=" border: 2px solid #EEECFE;  margin-top: 4px;">${questionDescription ? questionDescription : ''}</div>
+							<math-field  id="textQuestionSubtitle_math_${addChoiceAreaId}" contenteditable="true" >${mathEnabled == 'Math' ? questionDescription : ''}</math-field>
 							<span class="mathQuestions">Math</span>&nbsp;<input class="checkbox" style="width:14px; height:14px" type="checkbox" id="math_${addChoiceAreaId}">
 							<input type="file" id="fileInput2_${addChoiceAreaId}" style="display: none;">
 						</div>
@@ -3007,7 +3029,7 @@ function groupQuestion(question_id = false, section_id = false , group_question_
 						<div class="choice row align-items-center" id="deleteChoice_${addChoiceAreaId}">
 							<div class="col-lg-0"><input type="radio" id="radioButton_${addChoiceAreaId}" checked></div>
 							<div class="col-lg-6" style="margin-bottom: 10px">
-								<div class="richText" id="choiceTextField_${addChoiceAreaId}" contenteditable="true" tabindex="0" style=" border: 2px solid #EEECFE; width: 100%; margin-top: 10px;">${Choice ? Choice[0].choice_name : ""}</div>
+								<div class="richText" id="choiceTextField_${addChoiceAreaId}" contenteditable="true"  style=" border: 2px solid #EEECFE; width: 100%; margin-top: 10px;">${Choice ? Choice[0].choice_name : ""}</div>
 								<math-field  id="choiceTextField_math_${addChoiceAreaId}" style="width: 100%;" contenteditable="true">${Choice ? Choice[0].choice_name : ""}</math-field>
 								<input type="file" id="fileInput3_${addChoiceAreaId}" style="display: none;">
                              </div>
@@ -3674,7 +3696,7 @@ function addNewChoice(NewaddChoiceAreaId = false, focusval = false, choiceName =
 					<div class="choice row align-items-center" id="newDeleteChoice_`+text_field_created_time+rnd_no+`">
 						<div class="col-lg-0"><input type="radio" id="newChoiceRadioButton_`+text_field_created_time+rnd_no+`" checked ></div>
 						<div class="col-lg-6" style="margin-bottom: 10px">
-							<div class="richText" id="newChoiceTextField_`+text_field_created_time+rnd_no+`" contenteditable="true" tabindex="0" style=" border: 2px solid #EEECFE; width: 100%; margin-top: 6px; display:none!important;">${choiceName ? choiceName : ""}</div>
+							<div class="richText" id="newChoiceTextField_`+text_field_created_time+rnd_no+`" contenteditable="true"  style=" border: 2px solid #EEECFE; width: 100%; margin-top: 6px; display:none!important;">${choiceName ? choiceName : ""}</div>
 							<math-field  id="newchoiceTextField_math_`+text_field_created_time+rnd_no+`" style="width: 100%;" contenteditable="true">${choiceName ? choiceName : ""}</math-field>
 							<input type="file" id="fileInput_`+text_field_created_time+rnd_no+`" style="display: none;">
 							</div>
@@ -3988,9 +4010,9 @@ textQuestion +=
 	<div class="col-lg-12 col-md-12" style="margin-top: -20px">
 		<input type="hidden" id="Text_Question_UUID_ID_${addTextQuestionId}" value="${QuestionObj.hasOwnProperty('questionUUID') ? QuestionObj.questionUUID : Text_Question_UUID}">
 		<div class="form_box">
-			<label class="titleSpace">Question:<span id='partOf_${addTextQuestionId}'> <input type='text'style="border: 2px solid #EEECFE; height:34px;width: 200px !important;margin-left: 4px;" id='QuestionTextIdSet_${addTextQuestionId}' class='QuestionTextIdSet SerialNo' tabindex="0" contenteditable="true" value="${ssa}" placeholder="SNo...."></label>
+			<label class="titleSpace">Question:<span id='partOf_${addTextQuestionId}'> <input type='text'style="border: 2px solid #EEECFE; height:34px;width: 200px !important;margin-left: 4px;" id='QuestionTextIdSet_${addTextQuestionId}' class='QuestionTextIdSet SerialNo'  contenteditable="true" value="${ssa}" placeholder="SNo...."></label>
 			<div type="text" class="richText" id="textQuestionName_${addTextQuestionId}" contenteditable="true" style=" border: 2px solid #EEECFE;  margin-top: 4px;">${QuestionObj.hasOwnProperty('questionTitle') ? QuestionObj.questionTitle : ''}</div> 
-			<math-field id="textQuestiontitleMath_${addTextQuestionId}" contenteditable="true" tabindex="0">${QuestionObj.titleMath == 'Math' ? QuestionObj.questionTitle : ''}</math-field>
+			<math-field id="textQuestiontitleMath_${addTextQuestionId}" contenteditable="true" >${QuestionObj.titleMath == 'Math' ? QuestionObj.questionTitle : ''}</math-field>
 			<span class="mathQuestions">Math</span>&nbsp;<input class="checkbox" style="width:14px; height:14px" type="checkbox" id="titlemath_${addTextQuestionId}"> 
 			<input type="file" id="fileInput_${addTextQuestionId}" style="display: none;">
 		</div>
@@ -6099,10 +6121,8 @@ setInterval(removeNonExistentIdseveryTime, 1000)
 			var aa=  jsonObject.AppSetting;
 			const inputString = aa[0];
 			const valuesArray = inputString.split(',');
-			console.log(valuesArray);
 
 			valuesArray.forEach(value => {
-				console.log(value);
 				if(value === 'WorkArea'){
 					const mathNameValuesChoices =document.querySelectorAll('.math');
 					mathNameValuesChoices.forEach(function (mathNameValuesChoice){
@@ -6126,10 +6146,8 @@ setInterval(removeNonExistentIdseveryTime, 1000)
 						mathNameValue.style="display:none;";
 						mathNameValue.nextSibling.nextSibling.style = "display:none;width:14px; height:14px";
 					})
-					
 				}else if(value === 'TextQuestionButton'){
 				
-
 					var elements = document.querySelectorAll('[title="TextQuestion"]');
 					elements.forEach(function(element) {
 						var parentElement = element.parentElement;
@@ -6143,13 +6161,7 @@ setInterval(removeNonExistentIdseveryTime, 1000)
 					});
 				}
 			})
-
-		})
-		
-		
-
-		
-		
+		})		
 	}
 
 	document.addEventListener('click', appSettingHide);	
@@ -6158,30 +6170,6 @@ setInterval(removeNonExistentIdseveryTime, 1000)
 
 
 
-
-<script>
-	// Find all div elements with contenteditable attribute set to true
-const editableDivs = document.querySelectorAll('div[contenteditable="true"]');
-console.log(editableDivs);
-
-// Add event listener to each editable div
-editableDivs.forEach(function(div) {
-    div.addEventListener("keydown", function(event) {
-        var isContentEditable = this.getAttribute("contenteditable") === "true";
-        if (isContentEditable && event.key === "Tab") {
-            // Custom tab behavior here
-            event.preventDefault(); // Prevent default tab behavior
-            // Implement your custom tab behavior
-            // For example, you can insert a tab character or focus on the next editable element
-        }
-    });
-});
-
-</script>
-
-
-
-
 <script>
 
 setTimeout(nagvigationAlgimnetDragandDrop, 2000);
@@ -6196,7 +6184,7 @@ setTimeout(nagvigationAlgimnetDragandDrop, 2000);
 			Array.from(children).forEach(childElement => {
 				if (childElement.classList.contains('content')) {
 					childElement.style.width ='249px'
-					console.log(childElement);
+					// console.log(childElement);
 					const children2s = childElement.children;
 					Array.from(children2s).forEach(childElement2 => {
 						if (childElement2.classList.contains('content') ){
@@ -6224,12 +6212,102 @@ setTimeout(nagvigationAlgimnetDragandDrop, 2000);
 		}
 	}
 
-	document.addEventListener('click', nagvigationAlgimnetDragandDrop);	
+document.addEventListener('click', nagvigationAlgimnetDragandDrop);	
+document.addEventListener('keydown', nagvigationAlgimnetDragandDrop);
+document.addEventListener('keyup', nagvigationAlgimnetDragandDrop);
+
+
 
-	
-	
 </script>
 
 
+
+
+
+
+
+<script>
+	document.addEventListener('keydown', function(event) {
+    if (event.key === 'Tab') {
+
+		// console.log(event.target);
+		if (event.target.id.replace(/\d+/g, '')   === "sectionTitleWorkarea_") {
+			const element = event.target.parentElement.parentElement.parentElement.parentElement.nextElementSibling.querySelector('.jodit-wysiwyg');	
+			if (event.key === 'Tab') {
+				event.preventDefault(); 
+				element.focus(); 
+				element.scrollIntoView({ behavior: "smooth", block: "center" });
+			}
+		}else if(event.target.id.replace(/\d+/g, '') === "textTitleWorkarea_"){
+			const element = event.target.parentElement.parentElement.parentElement.parentElement.querySelector('.checkbox');	
+			if (event.key === 'Tab') {
+				event.preventDefault(); 
+				element.focus(); 
+				element.scrollIntoView({ behavior: "smooth", block: "center" });
+			}
+		}else if(event.target.id.replace(/\d+/g, '') === "QuestionTextIdSet_" || event.target.id.replace(/\d+/g, '') === "QuestionChoiceId_" || event.target.id.replace(/\d+/g, '') === "Questions_Group_id_"){
+			const element = event.target.parentElement.parentElement.parentElement.querySelector('.jodit-wysiwyg');
+			if (event.key === 'Tab') {
+				event.preventDefault(); 
+				element.focus(); 
+				element.scrollIntoView({ behavior: "smooth", block: "center" });
+			}
+		}else if(event.target.id.replace(/\d+/g, '') === "titlemath_"){
+
+			const element= event.target.parentElement.parentElement.nextElementSibling.querySelector('.jodit-wysiwyg')
+			if (event.key === 'Tab') {
+				event.preventDefault(); 
+				element.focus(); 
+				element.scrollIntoView({ behavior: "smooth", block: "center" });
+			}
+
+		}else if(event.target.id.replace(/\d+/g, '') === "MCQTitleWorkarea_"){
+
+			const element = event.target.parentElement.parentElement.parentElement.parentElement.querySelector('.checkbox');	
+			if (event.key === 'Tab') {
+				event.preventDefault(); 
+				element.focus();
+				element.scrollIntoView({ behavior: "smooth", block: "center" }); 
+			}
+		}else if(event.target.id.replace(/\d+/g, '') === "radioButton_" || event.target.id.replace(/\d+/g, '') === "newChoiceRadioButton_."){
+		   const element= event.target.parentElement.parentElement.querySelector('.jodit-wysiwyg');
+		   if (event.key === 'Tab') {
+				event.preventDefault(); 
+				element.focus(); 
+				element.scrollIntoView({ behavior: "smooth", block: "center" });
+			}
+		}else if (event.target.id.replace(/\d+/g, '') === "subSectionTitleWorkarea_") {
+			 const element = event.target.parentElement.parentElement.parentElement.parentElement.nextElementSibling.querySelector('.jodit-wysiwyg');
+			 if (event.key === 'Tab') {
+				event.preventDefault(); 
+				element.focus(); 
+				element.scrollIntoView({ behavior: "smooth", block: "center" });
+			}
+		}else if(event.target.id === "Question_title_workarea"){
+			const element = event.target.parentElement.parentElement.parentElement.parentElement.nextElementSibling.querySelector('.jodit-wysiwyg');
+			 if (event.key === 'Tab') {
+				event.preventDefault(); 
+				element.focus();
+				element.scrollIntoView({ behavior: "smooth", block: "center" }); 
+			}
+		}else if(event.target.id.replace(/\d+/g, '') === "input_sectionTitleValue"){
+			const element = event.target.parentElement.querySelector('.jodit-wysiwyg');
+			if (event.key === 'Tab') {
+				event.preventDefault(); 
+				element.focus(); 
+				element.scrollIntoView({ behavior: "smooth", block: "center" });
+
+			}
+		}
+    }
+});
+
+
+
+		
+</script>
+
+
+
 </body>
 </html>
diff --git a/nav_pane.js b/nav_pane.js
index a320a59..379c06d 100644
--- a/nav_pane.js
+++ b/nav_pane.js
@@ -226,8 +226,8 @@ function navpane() {
                 sectionDiv.style.backgroundColor ='#fcdddd';
                 // sectionDiv.style.border = '5px solid #fcdddd';
                 sectionDiv.style.color ='black';
-                sectionDiv.style.marginLeft ='-67px';
-                sectionDiv.style.paddingLeft='67px';
+                // sectionDiv.style.marginLeft ='-67px';
+                // sectionDiv.style.paddingLeft='67px';
                 sectionDiv.style.marginRight= '-75px'
                 currentlyHighlightedElement = sectionLink;
                
@@ -265,8 +265,8 @@ function navpane() {
                     // sectionDiv.style.border = '5px solid #fcdddd';
                     sectionDiv.style.borderRadius = '5px';
                     sectionDiv.style.color ='black';
-                    sectionDiv.style.marginLeft ='-67px';
-                    sectionDiv.style.paddingLeft='67px';
+                    // sectionDiv.style.marginLeft ='-67px';
+                    // sectionDiv.style.paddingLeft='67px';
                     sectionDiv.style.marginRight= '-75px'
                     sectionLink.style.fontWeight = '100';
 
@@ -436,8 +436,8 @@ function navpane() {
                 // nodeDiv.style.border = '5px solid #fcdddd';
                 nodeDiv.style.borderRadius = '5px';
                 nodeDiv.style.color ='black';
-                nodeDiv.style.marginLeft ='-67px';
-                nodeDiv.style.paddingLeft='67px';
+                // nodeDiv.style.marginLeft ='-67px';
+                // nodeDiv.style.paddingLeft='67px';
                 // nodeDiv.style.marginRight= '-75px';
                 // nodeDiv.style.justifyContent= 'space-between';
                 QuestionID.style.fontWeight = '100';
@@ -506,8 +506,8 @@ function navpane() {
                 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.marginLeft ='-67px';
+                // nodeDiv.style.paddingLeft='67px';
                 // nodeDiv.style.marginRight= '-75px';
                 nodeDiv.style.borderLeftWidth= '-75px';
                 // nodeDiv.style.justifyContent= 'space-between';
@@ -718,8 +718,8 @@ function navpane() {
                 // groupTitleDiv.style.border = '5px solid #fcdddd';
                 groupTitleDiv.style.borderRadius = '5px';
                 groupTitleDiv.style.backgroundColor = '#fcdddd';
-                groupTitleDiv.style.marginLeft ='-67px';
-                groupTitleDiv.style.paddingLeft='67px';
+                // groupTitleDiv.style.marginLeft ='-67px';
+                // groupTitleDiv.style.paddingLeft='67px';
                 groupTitleDiv.style.marginRight= '-75px';
                 groupTitleDiv.style.borderLeftWidth= '-75px';
 
@@ -821,8 +821,8 @@ function navpane() {
                 groupTitleDiv.style.borderRadius = '5px';
                 groupTitleDiv.style.backgroundColor = '#fcdddd';
                 groupQuestionLink.style.color= 'black';
-                groupTitleDiv.style.marginLeft ='-67px';
-                groupTitleDiv.style.paddingLeft='67px';
+                // groupTitleDiv.style.marginLeft ='-67px';
+                // groupTitleDiv.style.paddingLeft='67px';
                 groupTitleDiv.style.marginRight= '-75px';
                 groupTitleDiv.style.borderLeftWidth= '-75px';
                 GroupBoxID.style.fontWeight = 'normal';