From 2c12f07f2e2d33cfc0f850aff175921c80f9e2df Mon Sep 17 00:00:00 2001
From: venkateswaran ubuntu <bitbucket@venbainfotech.com>
Date: Fri, 6 Oct 2023 12:39:18 +0530
Subject: [PATCH] NESTED HANDLED

---
 addform.html                                  | 475 +++++++++++++++---
 html2json.js                                  |   4 +-
 ...vigation.js => html2json_for_navigation.js |   0
 json2html.js                                  | 117 +++--
 json2xml.js                                   |  96 ++--
 package-lock.json                             |  10 +-
 package.json                                  |   1 +
 rtc_hide_and_show.js                          |  22 +-
 style.css                                     |  47 +-
 xml2json.js                                   |  26 +-
 10 files changed, 624 insertions(+), 174 deletions(-)
 rename json2html_for_navigation.js => html2json_for_navigation.js (100%)

diff --git a/addform.html b/addform.html
index d7d5944..317ce39 100644
--- a/addform.html
+++ b/addform.html
@@ -168,6 +168,13 @@
 			color: #6d6d6d;
 		}
       
+		.buttons {
+			position: absolute;
+			top: 0px;
+			right: -192px;
+			/* display: none; */
+			text-align: -webkit-right;         
+        }
 		  
        
 </style>
@@ -365,7 +372,7 @@
 
 	<!-- SAVE the QUESTIONPAPER to XML SCRIPT -->
 	<script src="savexml.js"></script>
-	<script src="json2html_for_navigation.js"></script>
+	<script src="html2json_for_navigation.js"></script>
 
 	<!-- RTC Hide and Show Script -->
 	<script src="rtc_hide_and_show.js"></script>
@@ -373,6 +380,11 @@
 	
 <script>
 
+const url = new URL(window.location.href);// Get the URL of the current page for JSON
+const params = new URLSearchParams(url.search);// Create a URLSearchParams object from the query string
+const FileName = params.get('filename');// Get the value of a specific parameter
+
+
 $(document).ready(function() {
 
 	$('.ql-toolbar').hide(); // Hide the Quill Text Editor if PAge load
@@ -411,10 +423,6 @@ document.addEventListener('DOMContentLoaded', function () {
 	scrollToTopBtn2.addEventListener('click', keepCursorAtPosition);
 });
 		
-		
-const url = new URL(window.location.href);// Get the URL of the current page for JSON
-const params = new URLSearchParams(url.search);// Create a URLSearchParams object from the query string
-const FileName = params.get('filename');// Get the value of a specific parameter
 
 // Function to load XML from a file
 function loadXML(xmlFileName) {
@@ -517,11 +525,31 @@ var inputElement2 = document.getElementById('Question_title');
 inputElement2.addEventListener("keyup", function(event) {
 
 json2nav();
+
 });
-// json2nav();
+json2nav();
 // html2json();
 
 
+function showButtons(container) {
+	const buttons = container.querySelector('.buttons');
+	const onhover = container.querySelector('.onhover');
+	if(buttons && onhover)
+	{
+        onhover.style.display = 'block';
+	}
+	buttons.style.display = 'block';
+	
+ }
+
+function hideButtons(container) {
+	const buttons = container.querySelector('.buttons');
+	const onhover = container.querySelector('.onhover');
+	buttons.style.display = 'none';
+	onhover.style.display = 'none';
+
+}
+
 
 var i = 0;
 //Function for Create a New Section in the Question Paper
@@ -543,18 +571,43 @@ function addSection(title = false, description = false, random_no = false, secti
 		 }
 
 		
+         localStorage.setItem('sectionId', sectionRandomID);
+
 		i = i + 1;
 		addsection +=
-		`<div class="section-heading">
+		`		
+		<div class="section-heading">
 			<i class="fa fa-angle-down float-left" id="collapseSection_${random_no == false ? text_field_created_time : random_no}" aria-hidden="true"></i>
 			&nbsp; <!-- Add a space character here -->
 			Section:${i}
 		</div>
 		  <input type="hidden" id="Section_UUID_ID_${random_no == false ? text_field_created_time : random_no}" value="${section_uuid == false ? Section_UUID : section_uuid}">
-			<div class="section restrict-drop" id="section_${random_no == false ? text_field_created_time : random_no}">
+			<div class="section restrict-drop" id="section_${sectionRandomID}"  >
 				<div class="sectionTitle"  id="section_title_${random_no == false ? text_field_created_time : random_no}">
 					<div class="nodrop col-lg-12 col-md-12">
-						<div class="row question element" style="border-top : 15px solid">
+						<div class="row question element" style="border-top : 15px solid; margin-right: ;" id="SectionBox_${sectionRandomID}" onmouseover="showButtons(this)" >
+
+							<div class="row" style="text-align:right; width: 100%">
+								<div class="col-lg-10 col-md-12">
+									<div class=" button-group align-items-center">
+										<div class="addButton buttons" style="display: none;" id="sectionAddButton_${sectionRandomID}">
+											<div class="col-md-2"> 
+												<i title="TextQuestion" class="fa fa-text-width" aria-hidden="true" onclick="addNewQuestions(event, 1)" id="sidetextButton_${sectionRandomID}"></i>
+											</div>
+											<div class="col-md-2">
+												<i title="ChoiceQuestion"class="fa fa-check-circle-o" aria-hidden="true" onclick="addNewQuestions(event, 2)" id="sidechoiseButton_${sectionRandomID}"></i>
+											</div>
+											<div class="col-md-2">
+												<i title="QuestionGroup" class="fa fa-th-list" aria-hidden="true" onclick="addNewGroupQuestions(event, 0)" id="sidegroupQuestionButton_${sectionRandomID}"></i>
+											</div>
+											<div class="col-md-2">
+												<i title="Section" class="fa fa-columns" aria-hidden="true" onclick="addSection()" id="sidesectionButton_${sectionRandomID}"></i>
+											</div>
+										</div>
+									</div>
+								</div>
+							</div>
+
 							<div class="col-lg-12 col-md-12">
 								<div class="form_box">
 									<label>Section:</label>
@@ -595,16 +648,16 @@ function addSection(title = false, description = false, random_no = false, secti
 					</div>
 				</div>
 				<div class="">
-					<div class="section-question-area" id="question_area_${random_no == false ? text_field_created_time : random_no}">
+					<div class="section-question-area" id="question_area_${sectionRandomID}">
 					</div>
 				</div>
 			</div>
 
-			<div style="text-align:right; width: 100%">
+			<div class="row" style="text-align:right; width: 100%">
 				<div class="col-lg-10 col-md-12">
 					<div class="button-group align-items-center">
 						<div class="form-button addButton">
-							<button type="submit" onclick="addNewQuestions(event)" id="addNewButton_${sectionRandomID}">+Add New</button>
+							<button type="submit"  id="addNewButton_${sectionRandomID}">+Add New</button>
 							<button type="submit" style="display: none;" onclick="addNewQuestions(event, 1)" id="textButton_${sectionRandomID}">Text</button>
 							<button type="submit" style="display: none;" onclick="addNewQuestions(event, 2)" id="choiseButton_${sectionRandomID}">Choice</button>
 							<button type="submit" style="display: none;" onclick="addSection()" id="sectionButton_${sectionRandomID}">Section</button>
@@ -622,8 +675,10 @@ function addSection(title = false, description = false, random_no = false, secti
 		var SectionButtonId = 'sectionButton_' + sectionRandomID;
 		var textButtonId = 'textButton_' + sectionRandomID;
 		var ChoiseButtonId = 'choiseButton_' + sectionRandomID;
+		var sideChoiseButtonId = 'sidechoiseButton_' + sectionRandomID;
 		var groupQuestionButtonId = 'groupQuestionButton_' + sectionRandomID;
-		
+
+	
                 
 		$('#'+addNewButtonId).on('click', function() {  
                
@@ -675,6 +730,16 @@ function addSection(title = false, description = false, random_no = false, secti
 			});
 
 
+			var section = 'SectionBox_'+sectionRandomID;
+			var sectionAddButton = 'sectionAddButton_'+sectionRandomID;
+            $('#'+section).mouseenter(function(){
+       
+				add_button_hide_and_show(sectionAddButton);
+
+			})
+			$('#'+sectionAddButton).hide();
+
+
 
 			var collapseSectionId = (random_no == false) ? 'collapseSection_' + text_field_created_time : 'collapseSection_' + random_no;
 			var contentId = (random_no == false) ? 'question_area_' + text_field_created_time : 'question_area_' + random_no;
@@ -787,60 +852,101 @@ function addSection(title = false, description = false, random_no = false, secti
 
                 //  });
 
-                
+				json2nav();
 
 
 	}
 
 //Function for Create a New Question Group
-function addQuestionGroup(question_group_id = false, QuestionGroupTitle = false, QuestionGroupDescription = false, questionType = false, random_no = false, question_area_id = false, questionRandomNo = false, QuestionGroupMarks = false, QuestionGroupUUID = false, add_question_group_id = false, QuestionGroupDisplayMarks = false, QuestionGroupAttemptAny = false)
-	{ 
+// function addQuestionGroup(question_group_id = false, QuestionGroupTitle = false, QuestionGroupDescription = false, question_area_id = false, questionRandomNo = false, QuestionGroupMarks = false, QuestionGroupUUID = false, add_question_group_id = false, QuestionGroupDisplayMarks = false, QuestionGroupAttemptAny = false)
+function addQuestionGroup(idObj)
+{ 
 		const QuestionGroup_UUID = uuidv4();
 
+		//set default values
+		var question_group_id = false; // set default value false. this param for add question group inside section (i.e) question area id
+		var add_question_group_id = false // set default value false. this param for add new question group inside another  question group (i.e) group question area id
+		//end of set default values
+
+		//set values from obj param if exists
+		if(idObj.hasOwnProperty('question_group_id'))
+		{ 
+			question_group_id = idObj.question_group_id; 
+		}
+		else if(idObj.hasOwnProperty('add_question_group_id'))
+		{
+			question_group_id = idObj.add_question_group_id; 
+		}
+
+		//end of set values from obj param if exists
+
 		var addQuestionGroup = "";
 		const text_field_created_time = Date.now();
          
 		var QuestionGroup_ID = "";
-		if(questionRandomNo)
+		if(idObj.hasOwnProperty('questions_randon_id'))
 		{
-            QuestionGroup_ID = questionRandomNo;
+            QuestionGroup_ID = idObj.questions_randon_id;
 		}
 		else
 		{
 			QuestionGroup_ID = text_field_created_time;
 		}
 
+		localStorage.setItem('QuestionGroupId', QuestionGroup_ID)
+
+		var sectionRandomID = localStorage.getItem('sectionId');
+
 		addQuestionGroup +=
-		`<div draggable='true' class="draggable-group hidedrag" id="draggedGroup_${questionRandomNo == false ? text_field_created_time : questionRandomNo}">
-			<i id="collapseSubSection_${questionRandomNo == false ? text_field_created_time : questionRandomNo}" aria-hidden="true" style=" font-size: 24px; margin-right: 9px; margin-top: 25px;"></i> 
-			<input type="hidden" id="Question_Group_UUID_ID_${questionRandomNo == false ? text_field_created_time : questionRandomNo}" value="${QuestionGroupUUID == false ? QuestionGroup_UUID : QuestionGroupUUID}">
-			<div class="groupsection" draggable='true' id="group_question_${questionRandomNo == false ? text_field_created_time : questionRandomNo}">
-				<div class="sectionTitle" id="group_question_title_${questionRandomNo == false ? text_field_created_time : questionRandomNo}">		
+		`<div  draggable='true' class="draggable-group hidedrag" id="draggedGroup_${QuestionGroup_ID}">
+			<i id="collapseSubSection_${QuestionGroup_ID}" aria-hidden="true" style=" font-size: 24px; margin-right: 9px; margin-top: 25px;"></i> 
+			<input type="hidden" id="Question_Group_UUID_ID_${QuestionGroup_ID}" value="${idObj.hasOwnProperty('question_group_obj') ? idObj.question_group_obj.attributes.Id : QuestionGroup_UUID}">
+			<div class="groupsection" draggable='true' id="group_question_${QuestionGroup_ID}">
+				<div class="sectionTitle" id="group_question_title_${QuestionGroup_ID}">		
 					
 					<div class="col-lg-12 col-md-12">
 						
-						<div class="row question element" style="border-top: 10px solid #a658f3; border-radius:10px; margin-top:5px;">
+						<div onmouseover="showButtons(this)" id="QuestionGroupButtons_${QuestionGroup_ID}" class="row question element" style="border-top: 10px solid #a658f3; border-radius:10px; margin-top:5px;">
+							
+							<div class="row" style="text-align:right; width: 100%">
+								<div class="col-lg-10 col-md-12">
+									<div class=" button-group align-items-center">
+										<div class="addButton buttons" style="display: none;" id="AddButton_${QuestionGroup_ID}">
+											<div class="col-md-2">
+												<i class="fa fa-text-width" aria-hidden="true" onclick="addNewGroupQuestions(event, 1)" id="textButtonSectionQroupside_${QuestionGroup_ID}" title="Question Group Text Question"></i>
+											</div>
+											<div class="col-md-2">
+												<i class="fa fa-check-circle-o" aria-hidden="true" onclick="addNewGroupQuestions(event, 2)" id="choiseButtonSectionQroupside_${QuestionGroup_ID}" title="Question Group Choice Question"></i>
+											</div>
+											<div class="col-md-2">
+												<i class="fa fa-th-list" aria-hidden="true" onclick="MultiLevelQuestionGroup(event)" id="QuestionGroupButtonside_${QuestionGroup_ID}"  title="Question Group on Question Group"></i>
+											</div>
+										</div>
+									</div>
+								</div>
+							</div>
+						
 							<div id="dragHandle" class="drag-handle">
 							<i class="fas fa-grip-horizontal"></i>
 							</div>
 							<div class="col-lg-12 col-md-12">
 								<div class="form_box">
 									<label>Quesions Group:</label>
-									<div class="richText" id="subSection_title_text_${questionRandomNo == false ? text_field_created_time : questionRandomNo}" contenteditable="true" style=" border: 2px solid #EEECFE;  margin-top: 4px;">${QuestionGroupTitle ? QuestionGroupTitle : ""}</div>
+									<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>
 								</div>
 							</div>
 
 							<div class="col-lg-12 col-md-12 hideondrag">
 								<div class="form_box">
 									<label>Quesions Group Description:</label>
-									<div class="richText" id="subSection_description_text_${questionRandomNo == false ? text_field_created_time : questionRandomNo}" contenteditable="true" style=" border: 2px solid #EEECFE;  margin-top: 4px;">${QuestionGroupDescription ? QuestionGroupDescription : ""}</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>
 								</div>
 							</div>
                             
 							
 							<span>Display Marks</span>
 							<label class="switch">
-							<input type="checkbox" id="Question_Group_Display_Marks_Id_${questionRandomNo == false ? text_field_created_time : questionRandomNo}" checked> 
+							<input type="checkbox" id="Question_Group_Display_Marks_Id_${QuestionGroup_ID}" checked> 
 							<span class="slider round"></span>
 							</label>
 							
@@ -848,7 +954,7 @@ function addQuestionGroup(question_group_id = false, QuestionGroupTitle = false,
 							<div class="col-lg-4 col-md-4 hideondrag text" style="margin-left:215px;">
 								<div class="form_box">
 									<div style="margin-left: 35px;"> Attempt Any : </div>
-									<input type="text" id="Question_Attempt_Any_Id_${questionRandomNo == false ? text_field_created_time : questionRandomNo}" value="${QuestionGroupAttemptAny !== false ? QuestionGroupAttemptAny : 0}">
+									<input type="text" id="Question_Attempt_Any_Id_${QuestionGroup_ID}" value="${idObj.hasOwnProperty('question_group_obj') ? idObj.question_group_obj.group_attempt_any : 0}">
 								</div>
 							</div>	
 
@@ -856,7 +962,7 @@ function addQuestionGroup(question_group_id = false, QuestionGroupTitle = false,
 							<div class="col-lg-4 col-md-4 hideondrag text">
 								<div class="form_box" style="margin-top: -55px;">
 									<div style="margin-left: 80px;"> Marks : </div>
-									<input type="text"  id="Question_Group_Marks_Id_${questionRandomNo == false ? text_field_created_time : questionRandomNo}" value="${QuestionGroupMarks !== false ? QuestionGroupMarks : "0"}">
+									<input type="text"  id="Question_Group_Marks_Id_${QuestionGroup_ID}" value="${idObj.hasOwnProperty('question_group_obj') ? idObj.question_group_obj.group_marks : "0"}">
 								</div>
 							</div>	
 						</div>
@@ -864,16 +970,16 @@ function addQuestionGroup(question_group_id = false, QuestionGroupTitle = false,
 				</div>
 
      			<div class="">
-					<div class="nested-sortable" id="group_question_area_${questionRandomNo == false ? text_field_created_time : questionRandomNo}"></div>
+					<div class="nested-sortable" id="group_question_area_${QuestionGroup_ID}"></div>
 				</div>
 				<div class="row " >
 						<div class="col-lg-8 col-md-12">
 							<div class="button-group align-items-center">
 								<div class="form-button addButton">
-									<button type="submit" id="addNewButtonSectionQroup_${questionRandomNo == false ? text_field_created_time : questionRandomNo}">Insert Question</button>
-									<button type="submit" style="display: none;" onclick="addNewGroupQuestions(event, 1)" id="textButtonSectionQroup_${questionRandomNo == false ? text_field_created_time : questionRandomNo}">Text</button>
-									<button type="submit" style="display: none;" onclick="addNewGroupQuestions(event, 2)" id="choiseButtonSectionQroup_${questionRandomNo == false ? text_field_created_time : questionRandomNo}">Choice</button>
-									<button type="submit" style="display: none;" onclick="MultiLevelQuestionGroup(event)" id="QuestionGroupButton_${questionRandomNo == false ? text_field_created_time : questionRandomNo}">Question Group</button>
+									<button type="submit" id="addNewButtonSectionQroup_${QuestionGroup_ID}">Insert Question</button>
+									<button type="submit" style="display: none;" onclick="addNewGroupQuestions(event, 1)" id="textButtonSectionQroup_${QuestionGroup_ID}">Text</button>
+									<button type="submit" style="display: none;" onclick="addNewGroupQuestions(event, 2)" id="choiseButtonSectionQroup_${QuestionGroup_ID}">Choice</button>
+									<button type="submit" style="display: none;" onclick="MultiLevelQuestionGroup(event)" id="QuestionGroupButton_${QuestionGroup_ID}">Question Group</button>
 								</div>
 							</div>
 						</div>
@@ -886,9 +992,9 @@ function addQuestionGroup(question_group_id = false, QuestionGroupTitle = false,
 			var formContainer = document.getElementById(question_group_id);
 		    formContainer.insertAdjacentHTML('beforeend', addQuestionGroup);
 		}
-		else if(question_area_id)
+		else if(idObj.hasOwnProperty('section_question_area_id'))
 		{
-			var formContainer = document.getElementById(question_area_id);
+			var formContainer = document.getElementById(idObj.section_question_area_id);
 		    formContainer.insertAdjacentHTML('beforeend', addQuestionGroup);
 		}
 		else if(add_question_group_id)
@@ -897,10 +1003,10 @@ function addQuestionGroup(question_group_id = false, QuestionGroupTitle = false,
 		    formContainer.insertAdjacentHTML('beforeend', addQuestionGroup);
 		}
 
-		var addNewButtonId = (questionRandomNo == false) ? 'addNewButtonSectionQroup_' + text_field_created_time : 'addNewButtonSectionQroup_' + questionRandomNo;
-		var textButtonId = (questionRandomNo == false) ? 'textButtonSectionQroup_' + text_field_created_time : 'textButtonSectionQroup_' + questionRandomNo;
-		var ChoiseButtonId = (questionRandomNo == false) ? 'choiseButtonSectionQroup_' + text_field_created_time : 'choiseButtonSectionQroup_' + questionRandomNo;
-		var GroupQuestionButtonId = (questionRandomNo == false) ? 'QuestionGroupButton_' + text_field_created_time : 'QuestionGroupButton_' + questionRandomNo;
+		var addNewButtonId = 'addNewButtonSectionQroup_' + QuestionGroup_ID ;
+		var textButtonId = 'textButtonSectionQroup_' + QuestionGroup_ID ;
+		var ChoiseButtonId = 'choiseButtonSectionQroup_' + QuestionGroup_ID ;
+		var GroupQuestionButtonId = 'QuestionGroupButton_' + QuestionGroup_ID ;
 
 		$('#'+addNewButtonId).on('click', function() {  
                 
@@ -928,7 +1034,26 @@ function addQuestionGroup(question_group_id = false, QuestionGroupTitle = false,
 				$('#'+GroupQuestionButtonId).hide();
 			});
 			
-			var subSectionText = (questionRandomNo == false) ? 'subSection_title_text_' + text_field_created_time : 'subSection_title_text_' + questionRandomNo;
+
+            var groupQuestion = 'draggedGroup_'+QuestionGroup_ID;
+            $('#'+groupQuestion).click(function(){
+       
+				// alert('draggedGroup_');
+
+			})
+
+			var removeAndCloneTextQuestion_Raw = 'QuestionGroupButtons_'+QuestionGroup_ID;
+			var AddButtons_Raw = 'AddButton_'+QuestionGroup_ID;
+            $('#'+removeAndCloneTextQuestion_Raw).mouseenter(function(){
+       
+				add_button_hide_and_show(AddButtons_Raw);
+
+			})
+			$('#'+AddButtons_Raw).hide();
+
+
+
+			var subSectionText = 'subSection_title_text_' + QuestionGroup_ID;
 			var quill = new Quill('#'+subSectionText, {
 				theme: 'snow', // Choose a theme (snow, bubble, etc.)
 				modules: {
@@ -936,7 +1061,7 @@ function addQuestionGroup(question_group_id = false, QuestionGroupTitle = false,
 				},
 			});
 			
-			var subSectionDescription = (questionRandomNo == false) ? 'subSection_description_text_' + text_field_created_time : 'subSection_description_text_' + questionRandomNo;
+			var subSectionDescription = 'subSection_description_text_' + QuestionGroup_ID;
 			var quill = new Quill('#'+subSectionDescription, {
 				theme: 'snow', // Choose a theme (snow, bubble, etc.)
 				modules: {
@@ -946,8 +1071,8 @@ function addQuestionGroup(question_group_id = false, QuestionGroupTitle = false,
 
 		
 			
-			var sub_section_title_Div = (questionRandomNo == false) ? 'subSection_title_text_' + text_field_created_time : 'subSection_title_text_' + questionRandomNo;
-			var NewRTEId = (questionRandomNo == false) ? 'subsection_title_rtc_' + text_field_created_time : 'subsection_title_rtc_' + questionRandomNo;
+			var sub_section_title_Div = 'subSection_title_text_' + QuestionGroup_ID ;
+			var NewRTEId = 'subsection_title_rtc_' + QuestionGroup_ID;
 			var sub_section_title_previousDiv = $('#'+sub_section_title_Div).prev();
 			sub_section_title_previousDiv.attr("id", NewRTEId);
 			$('#'+sub_section_title_Div).click(function() {
@@ -957,8 +1082,8 @@ function addQuestionGroup(question_group_id = false, QuestionGroupTitle = false,
 			});	
 
 		
-			var sub_section_description_Div = (questionRandomNo == false) ? 'subSection_description_text_' + text_field_created_time : 'subSection_description_text_' + questionRandomNo;
-			var NewRTEId2 = (questionRandomNo == false) ? 'subsection_description_rtc_' + text_field_created_time : 'subsection_description_rtc_' + questionRandomNo;			
+			var sub_section_description_Div = 'subSection_description_text_' + QuestionGroup_ID;
+			var NewRTEId2 = 'subsection_description_rtc_' + QuestionGroup_ID;			
 			var sub_section_description_previousDiv = $('#'+sub_section_description_Div).prev();
 			sub_section_description_previousDiv.attr("id", NewRTEId2);
 			$('#'+sub_section_description_Div).click(function() {
@@ -968,12 +1093,22 @@ function addQuestionGroup(question_group_id = false, QuestionGroupTitle = false,
 			});	
 			$(sub_section_description_previousDiv).hide();
 			$(sub_section_title_previousDiv).hide();
+            
+			var displayMArks = ""
+			if(idObj.hasOwnProperty('question_group_obj'))
+			{
+				displayMArks = idObj.question_group_obj.group_display_marks;
+			}
+			else
+			{
+				displayMArks = 'false';
+			}
 
 
 			var DisplayMark_RawID = "Question_Group_Display_Marks_Id_" + QuestionGroup_ID;
                 var DisplayMark_ID = document.getElementById(DisplayMark_RawID)
 
-				if(QuestionGroupDisplayMarks === 'true'){
+				if(displayMArks === 'true'){
 
 					DisplayMark_ID.checked = true;
 				}else{
@@ -990,7 +1125,7 @@ function addQuestionGroup(question_group_id = false, QuestionGroupTitle = false,
 
 			});
 
-			// json2nav();
+			json2nav();
 			// html2json();
 	
 }
@@ -1050,10 +1185,13 @@ function groupQuestion( question_id = false, section_id = false , group_question
 			UUID = ChoiceQuestion_UUID;
 		}
 
+		var sectionRandomID = localStorage.getItem('sectionId');
 
-					       		
+		var QuestionGroup_ID = localStorage.getItem('QuestionGroupId');
+        
+    		
 		groupQuestion += 
-		`<div class="question hidedrag element Question-Border-Top col-lg-12" draggable="true"   id="removeAndCloneQroupQuestion_${questionRandomNo == false ? text_field_created_time : questionRandomNo}" style="border-top: solid; margin-bottom: 15px; margin-top: -25px;" onclick="toggleClasses(this)">
+		`<div class="question hidedrag element Question-Border-Top col-lg-12" draggable="true"   id="removeAndCloneQroupQuestion_${addChoiceAreaId}" style="border-top: solid; margin-bottom: 15px; margin-top: -25px;" onclick="toggleClasses(this)" onmouseover="showButtons(this)">
 			<div id="dragHandle" class="drag-handle">
 				<i class="fas fa-grip-horizontal"></i>
 			</div>
@@ -1061,6 +1199,48 @@ function groupQuestion( question_id = false, section_id = false , group_question
 				<i class="fa fa-trash-o"  onclick="removeClonedQroupQuestion(${questionRandomNo == false ? text_field_created_time : questionRandomNo})" style="font-size:20px;"aria-hidden="true"></i>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
 				<i class="fa fa-clone" id="cloneId_${questionRandomNo == false ? text_field_created_time : questionRandomNo}" onclick="cloneQuestion(event, 2)"  style="font-size:20px;" aria-hidden="true"></i>
 			</div>
+
+             
+			<div class="row" style="text-align:right; width: 100%" id="overallAddButtons_${addChoiceAreaId}">
+				<div class="col-lg-10 col-md-12">
+					<div class=" button-group align-items-center">
+						<div class="addButton buttons" style="display: none;" id="AddButtons_${addChoiceAreaId}">
+							<div class="col-md-2"> 
+								<i class="fa fa-text-width" aria-hidden="true" onclick="addNewQuestions(event, 1)" id="sidetextButton_${sectionRandomID}"></i>
+							</div>
+							<div class="col-md-2">
+								<i class="fa fa-check-circle-o" aria-hidden="true" onclick="addNewQuestions(event, 2)" id="sidechoiseButton_${sectionRandomID}"></i>
+							</div>
+							<div class="col-md-2">
+								<i class="fa fa-th-list" aria-hidden="true" onclick="addNewGroupQuestions(event, 0)" id="sidegroupQuestionButton_${sectionRandomID}"></i>
+							</div>
+							<div class="col-md-2">
+								<i class="fa fa-columns" aria-hidden="true" onclick="addSection()" id="sidesectionButton_${sectionRandomID}"></i>
+							</div>
+						</div>
+					</div>
+				</div>
+			</div>	
+
+			<div class="row" style="text-align:right; width: 100%;" id="overallQuestionGRoupAddButtons_${addChoiceAreaId}">
+				<div class="col-lg-10 col-md-12">
+					<div class=" button-group align-items-center">
+						<div class="addButton buttons onhover" style="display: none;" id="QuestionGRoupAddButtons_${addChoiceAreaId}">
+							<div class="col-md-2">
+								<i class="fa fa-text-width" aria-hidden="true" onclick="addNewGroupQuestions(event, 1)" id="textButtonSectionQroupside_${QuestionGroup_ID}" title="Question Group Text Question"></i>
+							</div>
+							<div class="col-md-2">
+								<i class="fa fa-check-circle-o" aria-hidden="true" onclick="addNewGroupQuestions(event, 2)" id="choiseButtonSectionQroupside_${QuestionGroup_ID}" title="Question Group Choice Question"></i>
+							</div>
+							<div class="col-md-2">
+								<i class="fa fa-th-list" aria-hidden="true" onclick="MultiLevelQuestionGroup(event)" id="QuestionGroupButtonside_${QuestionGroup_ID}"  title="Question Group on Question Group"></i>
+							</div>
+						</div>
+					</div>
+				</div>
+			</div>
+
+
 			<div class="col-lg-12 col-md-12">
 				<input type="hidden" id="Choice_Question_UUID_ID_${addChoiceAreaId}" value="${UUID}">
 				<div class="row">
@@ -1273,6 +1453,64 @@ function groupQuestion( question_id = false, section_id = false , group_question
 		})
 
 
+
+
+	var AddButtons_Raw = 'AddButtons_'+addChoiceAreaId;
+	var overallAddButtons_Raw = 'overallAddButtons_'+addChoiceAreaId;
+	var QuestionGroupAddButtons_Raw = 'QuestionGRoupAddButtons_'+addChoiceAreaId;
+	var overallQuestionGroupAddButtons_Raw = 'overallQuestionGRoupAddButtons_'+addChoiceAreaId;
+
+	var AddButtons_ID = document.getElementById(AddButtons_Raw)
+	var QuestionGroupAddButtons_ID = document.getElementById(QuestionGroupAddButtons_Raw)
+	var removeAndCloneTextQuestion_ID = document.getElementById(removeAndCloneTextQuestion_Raw);
+
+
+	if(group_question_area_id !== false)
+	{    
+		// alert('true')
+		$('#'+overallQuestionGroupAddButtons_Raw).show();
+		$('#'+overallAddButtons_Raw).hide();
+
+	}
+	else{
+
+		// alert('false')
+		$('#'+overallQuestionGroupAddButtons_Raw).hide();
+		$('#'+overallAddButtons_Raw).show();
+	}
+
+
+			var removeAndCloneTextQuestion_Raw = 'removeAndCloneQroupQuestion_'+addChoiceAreaId;
+			var AddButtons_Raw = 'AddButtons_'+addChoiceAreaId;
+            $('#'+removeAndCloneTextQuestion_Raw).mouseenter(function(){
+       
+				if(group_question_area_id !== false)
+				{
+					add_button_hide_and_show(QuestionGroupAddButtons_Raw);
+				}
+				else
+				{
+					add_button_hide_and_show(AddButtons_Raw);
+				}
+
+			})
+			$('#'+AddButtons_Raw).hide();
+			$('#'+QuestionGroupAddButtons_Raw).hide();
+
+
+
+	
+	var removeAndCloneTextQuestion_Raw = 'removeAndCloneQroupQuestion_'+addChoiceAreaId;
+	var removeAndCloneTextQuestion_ID = document.getElementById(removeAndCloneTextQuestion_Raw);
+   
+
+	// $(removeAndCloneTextQuestion_ID).click(function(){
+       
+	// 	// alert('choice');
+
+	// })
+
+
 		var typetwoQuestionName = (questionRandomNo == false) ? 'textQuestionName_' + text_field_created_time : 'textQuestionName_' + questionRandomNo;
 		
 			var quill = new Quill('#'+typetwoQuestionName, {
@@ -1355,10 +1593,11 @@ function groupQuestion( question_id = false, section_id = false , group_question
 
 		});
 		 
+		json2nav();
 	}
 
 //Function for Create a New Choice Field in a Choice Question 	
-function addNewChoice(NewaddChoiceAreaId = false , choiceName = false, choiceDescription = false, random_no = false, questionRandomNo = false, QuestionGroupRandomNo = false, choiceID = false, mathEnabled= false)
+function addNewChoice(NewaddChoiceAreaId = false , choiceName = false, choiceDescription = false, questionRandomNo = false, QuestionGroupRandomNo = false, choiceID = false, mathEnabled= false)
 	{    
      
      const Choice_Group_Dynamic_UUID = uuidv4(); 		
@@ -1416,7 +1655,6 @@ function addNewChoice(NewaddChoiceAreaId = false , choiceName = false, choiceDes
 
             var choiceid = localStorage.getItem('ChoiceId');
 			var ChoiceMathSwitch = 'math_'+choiceid;
-			console.log(ChoiceMathSwitch);
 
 			var ChoiceMathSwitchId = document.getElementById(ChoiceMathSwitch)
 			var newchoiceTextField_math_Id = document.getElementById('newchoiceTextField_math_'+text_field_created_time+rnd_no);
@@ -1440,14 +1678,11 @@ function addNewChoice(NewaddChoiceAreaId = false , choiceName = false, choiceDes
 			
 			if (ChoiceMathSwitchId.checked) {
 
-				console.log('if');
-
 				$(newchoiceTextFieldId).hide();
 				$(newchoiceTextField_math_Id).show();
 
 			} else {
 
-				console.log('else');
 				$(newchoiceTextFieldId).show();
 				$(newchoiceTextField_math_Id).hide();
 			}
@@ -1501,16 +1736,16 @@ function addNewChoice(NewaddChoiceAreaId = false , choiceName = false, choiceDes
 				
 				var id = localStorage.getItem('rtc');
 				var hideid = document.getElementById(id);
-				console.log('hide id :' + hideid)
+				// console.log('hide id :' + hideid)
 				$(hideid).hide();
 				$(newchoiceTextField_previousDiv).show();
-				console.log('show id :'+newchoiceTextField_previousDiv)
+				// console.log('show id :'+newchoiceTextField_previousDiv)
 				localStorage.setItem('rtc',newChoiceTextNewRTEId);
 
 			});
 			$(newchoiceTextField_previousDiv).hide();
 
-			
+			json2nav();
 	 }
 
 //Function for Create a New Text Question in the Section and Question Group 
@@ -1567,13 +1802,54 @@ function textQuestion(question_id = false, section_id = false, group_question_ar
 			UUID = Text_Question_UUID;
 		}
 
-		
+		var sectionRandomID = localStorage.getItem('sectionId');
+		var QuestionGroup_ID = localStorage.getItem('QuestionGroupId');
+
         textQuestion += 
-		`<div class="col-lg-12 question hidedrag element Question-Border-Top" draggable="true"  id="removeAndCloneTextQuestion_${questionRandomNo == false ? text_field_created_time : questionRandomNo}" style="border-top: 3px solid; margin-bottom: 15px; margin-top: -15px;" onclick="toggleClasses(this)">
+		`<div class="col-lg-12 question hidedrag element Question-Border-Top" draggable="true"  id="removeAndCloneTextQuestion_${addTextQuestionId}" style="border-top: 3px solid; margin-bottom: 15px; margin-top: -15px;" onclick="toggleClasses(this)" onmouseover="showButtons(this)">
 			<div id="dragHandle" class="drag-handle " >
 				<i class="fas fa-grip-horizontal"></i>
 			</div>
 
+            <div class="row" style="text-align:right; width: 100%" id="overallAddButtons_${addTextQuestionId}" >
+				<div class="col-lg-10 col-md-12">
+					<div class=" button-group align-items-center">
+						<div class="addButton buttons" style="display: none;" id="AddButtons_${addTextQuestionId}">
+							<div class="col-md-2"> 
+								<i class="fa fa-text-width" aria-hidden="true" onclick="addNewQuestions(event, 1)" id="sidetextButton_${sectionRandomID}"></i>
+							</div>
+							<div class="col-md-2">
+								<i class="fa fa-check-circle-o" aria-hidden="true" onclick="addNewQuestions(event, 2)" id="sidechoiseButton_${sectionRandomID}"></i>
+							</div>
+							<div class="col-md-2">
+								<i class="fa fa-th-list" aria-hidden="true" onclick="addNewGroupQuestions(event, 0)" id="sidegroupQuestionButton_${sectionRandomID}"></i>
+							</div>
+							<div class="col-md-2">
+								<i class="fa fa-columns" aria-hidden="true" onclick="addSection()" id="sidesectionButton_${sectionRandomID}"></i>
+							</div>
+						</div>
+					</div>
+				</div>
+			</div>
+			
+			<div class="row" style="text-align:right; width: 100%;" id="overallQuestionGRoupAddButtons_${addTextQuestionId}">
+				<div class="col-lg-10 col-md-12">
+					<div class=" button-group align-items-center">
+						<div class="addButton buttons onhover" style="display: none;" id="QuestionGRoupAddButtons_${addTextQuestionId}">
+							<div class="col-md-2">
+								<i class="fa fa-text-width" aria-hidden="true" onclick="addNewGroupQuestions(event, 1)" id="textButtonSectionQroupside_${QuestionGroup_ID}" title="Question Group Text Question"></i>
+							</div>
+							<div class="col-md-2">
+								<i class="fa fa-check-circle-o" aria-hidden="true" onclick="addNewGroupQuestions(event, 2)" id="choiseButtonSectionQroupside_${QuestionGroup_ID}" title="Question Group Choice Question"></i>
+							</div>
+							<div class="col-md-2">
+								<i class="fa fa-th-list" aria-hidden="true" onclick="MultiLevelQuestionGroup(event)" id="QuestionGroupButtonside_${QuestionGroup_ID}"  title="Question Group on Question Group"></i>
+							</div>
+						</div>
+					</div>
+				</div>
+			</div>
+
 			<div class="items  align-items-center hideondrag" style="display: none;">
 				<i class="fa fa-trash-o"  onclick="removeClonedTextQuestion(${questionRandomNo == false ? text_field_created_time : questionRandomNo})" style="font-size:20px;"aria-hidden="true"></i>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
 				<i class="fa fa-clone"    onclick="cloneQuestion(event, 1)" id="cloneId_${questionRandomNo == false ? text_field_created_time : questionRandomNo}" style="font-size:20px;"  aria-hidden="true"></i>
@@ -1656,7 +1932,7 @@ function textQuestion(question_id = false, section_id = false, group_question_ar
 			var sectionDiv = document.getElementById(questionAreaId); 
 			sectionDiv.insertAdjacentHTML('beforeend', textQuestion);
 		}
-		else if(group_question_area_id)
+		else if(group_question_area_id !== 0)
 		{
 			var sectionDiv = document.getElementById(group_question_area_id); 
 			sectionDiv.insertAdjacentHTML('beforeend', textQuestion);
@@ -1684,7 +1960,7 @@ function textQuestion(question_id = false, section_id = false, group_question_ar
 		  });
 
 
-		  var ChoiceMathSwitch = (questionRandomNo == false) ? 'math_' + text_field_created_time : 'math_' + questionRandomNo;
+		var ChoiceMathSwitch = (questionRandomNo == false) ? 'math_' + text_field_created_time : 'math_' + questionRandomNo;
 		var textQuestionSubtitle_math = (questionRandomNo == false) ? 'textQuestionSubtitle_math_' + text_field_created_time : 'textQuestionSubtitle_math_' + questionRandomNo;
 		var textQuestionSubtitle = (questionRandomNo == false) ? 'textQuestionSubtitle_' + text_field_created_time : 'textQuestionSubtitle_' + questionRandomNo;
        
@@ -1722,6 +1998,58 @@ function textQuestion(question_id = false, section_id = false, group_question_ar
       }
     });
 
+
+
+
+	var AddButtons_Raw = 'AddButtons_'+addTextQuestionId;
+	var overallAddButtons_Raw = 'overallAddButtons_'+addTextQuestionId;
+	var QuestionGroupAddButtons_Raw = 'QuestionGRoupAddButtons_'+addTextQuestionId;
+	var overallQuestionGroupAddButtons_Raw = 'overallQuestionGRoupAddButtons_'+addTextQuestionId;
+
+	var AddButtons_ID = document.getElementById(AddButtons_Raw)
+	var QuestionGroupAddButtons_ID = document.getElementById(QuestionGroupAddButtons_Raw)
+	var removeAndCloneTextQuestion_ID = document.getElementById(removeAndCloneTextQuestion_Raw);
+
+    console.log('group_question_area_id');
+    console.log(group_question_area_id);
+    console.log('questionTitle');
+    console.log(questionTitle);
+	// if(group_question_area_id !== false )//questionGroupId
+	if(group_question_area_id !== false )//questionGroupId
+	{    
+		// alert('three')
+		// three button group
+		$('#'+overallQuestionGroupAddButtons_Raw).show();
+		$('#'+overallAddButtons_Raw).hide();
+
+	}
+	else{
+      
+		// alert('four')
+		// four button group
+		$('#'+overallQuestionGroupAddButtons_Raw).hide();
+		$('#'+overallAddButtons_Raw).show();
+	}
+
+	
+        	var removeAndCloneTextQuestion_Raw = 'removeAndCloneTextQuestion_'+addTextQuestionId;
+			var AddButtons_Raw = 'AddButtons_'+addTextQuestionId;
+            $('#'+removeAndCloneTextQuestion_Raw).mouseenter(function(){
+       
+
+				if(group_question_area_id !== false || questionTitle !== false)
+				{
+					add_button_hide_and_show(QuestionGroupAddButtons_Raw);
+				}
+				else
+				{
+					add_button_hide_and_show(AddButtons_Raw);
+				}
+
+			})
+			$('#'+AddButtons_Raw).hide();
+			$('#'+QuestionGroupAddButtons_Raw).hide();
+
 		  
 
 		  var typeOneQuestionName = (questionRandomNo == false) ? 'textQuestionName_' + text_field_created_time : 'textQuestionName_' + questionRandomNo;
@@ -1790,20 +2118,26 @@ function textQuestion(question_id = false, section_id = false, group_question_ar
 				json2nav();
 			});
 
-			//json2nav();
+			json2nav();
 		
 }
 
 
 
-
 //Function for Add Group Question inside the Group QUestion Like Question
 function MultiLevelQuestionGroup(e)
 {
 	get_question_area_id = e.target.id;
 	var question_group_id = get_question_area_id.split("_")[1];
 	var add_question_group_id = 'group_question_area_'+question_group_id;
-	addQuestionGroup(false, false, false, false, false,false, false, false, false, add_question_group_id)
+    
+	var MultiLevelQuestionGroup_obj = {
+       
+		'add_question_group_id': add_question_group_id
+
+	}
+
+	addQuestionGroup(MultiLevelQuestionGroup_obj)
 
 
 }
@@ -1811,10 +2145,11 @@ function MultiLevelQuestionGroup(e)
 //Function for Add a Text and Choice Question in the Section Question Area 
 function addNewQuestions(e, type)
 {   
+	
 	clone_id_time = e.target.id;
 	var clone_id = clone_id_time.split("_")[1];
 	var section_id = 'question_area_'+clone_id;
-
+	
 	if(type == 1){
 	  textQuestion(false, section_id);
 	}else if(type == 2){
@@ -1825,6 +2160,7 @@ function addNewQuestions(e, type)
 //Function For Add a Group Question in the Section Question Area
 function addNewGroupQuestions(e, type)
 {   
+	
 	clone_id_time = e.target.id;
 	var clone_id = clone_id_time.split("_")[1];
 	var group_question_area_id = 'group_question_area_'+clone_id;
@@ -1834,8 +2170,11 @@ function addNewGroupQuestions(e, type)
 		}else if(type == 2){
 			groupQuestion(false, false,  group_question_area_id);
 		}else {   
-			var question_group_id = 'question_area_'+clone_id;  
-			addQuestionGroup(question_group_id);
+			var question_group_id = 'question_area_'+clone_id; 
+
+			var addNewGroupQuestions_obj = { 'question_group_id': question_group_id }
+            addQuestionGroup(addNewGroupQuestions_obj);
+		
 		}
 }
 
diff --git a/html2json.js b/html2json.js
index d4b09c8..463f2a5 100644
--- a/html2json.js
+++ b/html2json.js
@@ -1,5 +1,5 @@
 function html2json() {
-    console.clear();
+    // console.clear();
 
     $.fn.getTextQuestion = function(element_id) {
         var questionTitle = document.getElementById('textQuestionName_' + element_id).querySelector('.ql-editor').innerHTML;
@@ -277,6 +277,6 @@ function html2json() {
     // console.log((formData));
     // console.log(JSON.stringify(formData, null, 1));
     localStorage.setItem("json", JSON.stringify((formData)));
-    console.log(JSON.stringify(formData));
+    // console.log(JSON.stringify(formData));
     // console.log(OBJtoXML(({'question_paper' : formData})));
 }
diff --git a/json2html_for_navigation.js b/html2json_for_navigation.js
similarity index 100%
rename from json2html_for_navigation.js
rename to html2json_for_navigation.js
diff --git a/json2html.js b/json2html.js
index e7ded0c..691f12b 100644
--- a/json2html.js
+++ b/json2html.js
@@ -51,6 +51,7 @@ function jsonToHtml(jsonData) {
 		var sectionDispalyMarks = section.section_display_marks;
 		var sectionAttemptAny = section.section_attempt_any;
 
+		
 	addSection(sectionTitle, sectionDescription, random_no, sectionUUID, sectionMarks, sectionDispalyMarks, sectionAttemptAny);
 
 	section.questions.forEach(function(Question, index) {
@@ -75,14 +76,6 @@ function jsonToHtml(jsonData) {
 	var questionDisplayMarks = Question.display_marks;
 	var Choice = Question.answers;
 	
-
-	var QuestionGroupTitle = Question.group_title;
-	var QuestionGroupDescription = Question.group_description;
-	var QuestionGroupMarks = Question.group_marks;
-	var QuestionGroupUUID = Question.attributes.Id;
-	var QuestionGroupDisplayMarks= Question.group_display_marks;
-	var QuestionGroupAttemptAny = Question.group_attempt_any;
-
 	var questionAreaId = 'question_area_'+random_no;
 				
 											
@@ -100,53 +93,14 @@ function jsonToHtml(jsonData) {
 		var choiceDescription = choicenames.choice_description;
 		var choiceID = choicenames.id;
 				
-		addNewChoice(false , choiceName, choiceDescription, random_no, questionRandomNo, false, choiceID, mathEnabled);
+		addNewChoice(false , choiceName, choiceDescription, questionRandomNo, false, choiceID, mathEnabled);
 
 		});
 	}
 	else if (questionType == 'question_group')
 	{   
-		var question_area_id = 'question_area_'+random_no;
-		addQuestionGroup(false, QuestionGroupTitle, QuestionGroupDescription, questionType, random_no, question_area_id, questionRandomNo, QuestionGroupMarks, QuestionGroupUUID, false, QuestionGroupDisplayMarks, QuestionGroupAttemptAny)
-		Question.questions.forEach(function(GroupQuestions, index) {
-			
-			const QuestionGroupRandomNo = Date.now();QuestionGroupUUID;
-											
-			var group_question_Title = GroupQuestions.question;
-			var group_question_Description = GroupQuestions.question_description;
-			var group_question_Type = GroupQuestions.question_type;
-			var group_questionSubType = GroupQuestions.question_sub_type;
-			var mathEnabled = GroupQuestions.is_math_enabled;
-			var group_question_marks = GroupQuestions.marks;
-			var group_question_uuid = GroupQuestions.attributes.Id;
-			var group_question_Display_Marks = GroupQuestions.display_marks;
-			
-			var Choice = GroupQuestions.answers;
-			var questionGroupId = 'group_question_area_'+questionRandomNo;
-										
-				
-			if(group_question_Type == 'text')
-			{ 
-				
-				textQuestion(false, false, false, group_question_Title, group_question_Description, group_question_Type, group_questionSubType, mathEnabled, random_no, false, questionGroupId, false, QuestionGroupRandomNo, false, false, group_question_marks, group_question_uuid, false, group_question_Display_Marks);
-
-			}
-			else if(group_question_Type == 'group')
-			{
-				
-				groupQuestion(false, false, false, group_question_Title, group_question_Description, group_question_Type, group_questionSubType, mathEnabled, Choice, random_no, false, questionGroupId, false, QuestionGroupRandomNo, false, false, group_question_marks, group_question_uuid, false, group_question_Display_Marks);
-				Choice = Choice.slice(1);
-				Choice.forEach(function(choicenames, index) {	
-				var choiceName = choicenames.choice_name;
-				var choiceDescription = choicenames.choice_description;
-				var choiceID = choicenames.id;
-						
-				addNewChoice(false , choiceName, choiceDescription, random_no, false, QuestionGroupRandomNo, choiceID, mathEnabled)
-				});
-				
-			}
-				
-		});
+		
+		generateGroupQuestion(Question, questionAreaId, questionRandomNo);
 		
 	}
 
@@ -156,3 +110,66 @@ function jsonToHtml(jsonData) {
 	})
 
 }
+
+
+function generateGroupQuestion(Question, questionAreaId, questionRandomNo)
+{
+   
+		var idObj = {
+			"section_question_area_id":questionAreaId,
+			'question_group_obj': Question ,
+			'questions_randon_id':questionRandomNo, 
+		};
+
+		addQuestionGroup(idObj);
+		
+		Question.questions.forEach(function(GroupQuestions, index) {
+			
+			const QuestionGroupRandomNo = Date.now();
+
+			console.log(GroupQuestions);				
+			console.log("**********************************");
+			// question level variables				
+			var group_question_Title = GroupQuestions.question;
+			var group_question_Description = GroupQuestions.question_description;
+			var group_question_Type = GroupQuestions.question_type;
+			var group_questionSubType = GroupQuestions.question_sub_type;
+			var mathEnabled = GroupQuestions.is_math_enabled;
+			var group_question_marks = GroupQuestions.marks;
+			var group_question_uuid = GroupQuestions.attributes.Id;
+			var group_question_Display_Marks = GroupQuestions.display_marks;
+
+			//
+			
+			var Choice = GroupQuestions.answers;
+			var questionGroupId = 'group_question_area_'+questionRandomNo;
+
+			
+			if(group_question_Type == 'text')
+			{ 
+				console.log('child gtext' + group_question_Title)
+				textQuestion(false, false, false, group_question_Title, group_question_Description, group_question_Type, group_questionSubType, mathEnabled, false, false, questionGroupId, false, QuestionGroupRandomNo, false, false, group_question_marks, group_question_uuid, false, group_question_Display_Marks);
+
+			}
+			else if(group_question_Type == 'group')
+			{
+				console.log('child ggroup'+group_question_Title)
+				groupQuestion(false, false, false, group_question_Title, group_question_Description, group_question_Type, group_questionSubType, mathEnabled, Choice, false, false, questionGroupId, false, QuestionGroupRandomNo, false, false, group_question_marks, group_question_uuid, false, group_question_Display_Marks);
+				Choice = Choice.slice(1);
+				Choice.forEach(function(choicenames, index) {	
+				var choiceName = choicenames.choice_name;
+				var choiceDescription = choicenames.choice_description;
+				var choiceID = choicenames.id;
+						
+				addNewChoice(false , choiceName, choiceDescription,  false, QuestionGroupRandomNo, choiceID, mathEnabled)
+				});
+				
+			}
+			else 
+			{
+				generateGroupQuestion(GroupQuestions, questionGroupId, QuestionGroupRandomNo);
+				// console.log('child group question'+group_question_Title)
+			}
+				
+		});
+}
diff --git a/json2xml.js b/json2xml.js
index 5f385d4..c8629fe 100644
--- a/json2xml.js
+++ b/json2xml.js
@@ -1,8 +1,8 @@
 function json2xml() {
     // console.clear();
     var obj = localStorage.getItem("json");
-    console.log(obj);
-    console.log('***********************************************************');
+    // console.log(obj);
+    // console.log('***********************************************************');
 
     function createXMLDocument(namespace = null) {
         if (typeof document.implementation.createDocument === 'function') {
@@ -88,6 +88,65 @@ function json2xml() {
 
     }
 
+    function getXMLNodesOfGroupQuestionData(singleQuestion){
+       
+        //create question group title related xml nodes
+        var {
+            doc,
+            element
+        } = createStandaloneXMLNode('Question', {
+            'xsi:type': 'QuestionGroup',
+            'Id': singleQuestion['group_uuid'],
+            'Type': 'QuestionGroup',
+            'No': singleQuestion['group_title'],
+            'Order': 0
+        }, '');
+
+
+    //    var groupQuestionElement = createElementWithText(xmlDoc, sectionElement, 'Question', '', {
+    //     'xsi:type': 'QuestionGroup',
+    //     'Id': singleQuestion['group_uuid'],
+    //     'Type': 'QuestionGroup',
+    //     'No': singleQuestion['group_title'],
+    //     'Order': 0
+    // });
+
+    var groupQuestionTitle = createElementWithText(doc, element, 'Text', singleQuestion['group_title']);
+    var groupQuestionDesc = createElementWithText(doc, element, 'Subtext', singleQuestion['group_description']);
+    var groupQuestionMarks = createElementWithText(doc, element, 'Marks', singleQuestion['group_marks']);
+    var groupQuestionMarks = createElementWithText(doc, element, 'DisplayMarks', (singleQuestion['group_display_marks']  === true ? 'true' : 'false' ));
+    var groupQuestionMarks = createElementWithText(doc, element, 'AttemptAny', singleQuestion['group_attempt_any']);
+    var groupQuestionItemsElement = createElementWithText(doc, element, 'Items', '');
+
+    //gather questions data inside question group
+    if (singleQuestion['questions'].length != 0) {
+        var tempGroupQuestions = singleQuestion['questions'];
+        //looping each questions indise question group and attach it to group items node
+        for (gquestion in tempGroupQuestions) {
+            var singleGQuestion = tempGroupQuestions[gquestion];
+            console.log('singleGQuestion-'+gquestion);
+            console.log(singleGQuestion);
+            console.log('***********************************');
+            if (singleGQuestion.hasOwnProperty('question_type')) // normal questions inside group questions
+            {
+                console.log('Single Question');
+                var singleGQuestionElement = getXMLNodesOfQuestionData(singleGQuestion);
+                //attach into group items node
+                groupQuestionItemsElement.appendChild(singleGQuestionElement);
+            }
+            else
+            {
+                console.log('Group Question');
+                var multiGQuestionElement = getXMLNodesOfGroupQuestionData(singleGQuestion);
+                groupQuestionItemsElement.appendChild(multiGQuestionElement);
+            }
+        }
+    }
+
+    return element;
+
+    }
+
     //start of the busi logic
     questionPaper = JSON.parse(obj);
     var ns1 = 'http://www.w3.org/2001/XMLSchema';
@@ -143,38 +202,7 @@ function json2xml() {
                     sectionItemElement.appendChild(singleQuestionElement);
                 } else // handle question group
                 {
-                    //create question group title related xml nodes
-                    var groupQuestionElement = createElementWithText(xmlDoc, sectionElement, 'Question', '', {
-                        'xsi:type': 'QuestionGroup',
-                        'Id': singleQuestion['group_uuid'],
-                        'Type': 'QuestionGroup',
-                        'No': singleQuestion['group_title'],
-                        'Order': 0
-                    });
-
-                    var groupQuestionTitle = createElementWithText(xmlDoc, groupQuestionElement, 'Text', singleQuestion['group_title']);
-                    var groupQuestionDesc = createElementWithText(xmlDoc, groupQuestionElement, 'Subtext', singleQuestion['group_description']);
-                    var groupQuestionMarks = createElementWithText(xmlDoc, groupQuestionElement, 'Marks', singleQuestion['group_marks']);
-                    var groupQuestionMarks = createElementWithText(xmlDoc, groupQuestionElement, 'DisplayMarks', (singleQuestion['group_display_marks']  === true ? 'true' : 'false' ));
-                    var groupQuestionMarks = createElementWithText(xmlDoc, groupQuestionElement, 'AttemptAny', singleQuestion['group_attempt_any']);
-                    var groupQuestionItemsElement = createElementWithText(xmlDoc, groupQuestionElement, 'Items', '');
-
-                    //gather questions data inside question group
-                    if (tempSection['questions'][question]['questions'].length != 0) {
-                        var tempGroupQuestions = tempSection['questions'][question]['questions'];
-                        //looping each questions indise question group and attach it to group items node
-                        for (gquestion in tempGroupQuestions) {
-                            var singleGQuestion = tempGroupQuestions[gquestion];
-                            if (singleGQuestion.hasOwnProperty('question_type')) // normal questions inside group questions
-                            {
-                                var singleGQuestionElement = getXMLNodesOfQuestionData(singleGQuestion);
-                                //attach into group items node
-                                groupQuestionItemsElement.appendChild(singleGQuestionElement);
-                            }
-                        }
-                    }
-
-                    //attach each group question into section item node
+                    var groupQuestionElement =  getXMLNodesOfGroupQuestionData(singleQuestion);
                     sectionItemElement.appendChild(groupQuestionElement);
                 }
 
diff --git a/package-lock.json b/package-lock.json
index b2d896c..c2029ff 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,11 +1,11 @@
 {
-  "name": "myapp",
+  "name": "project-b",
   "version": "1.0.0",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
-      "name": "myapp",
+      "name": "project-b",
       "version": "1.0.0",
       "license": "MIT",
       "dependencies": {
@@ -20,6 +20,7 @@
         "jquery": "^3.7.1",
         "jquery-ui": "^1.13.2",
         "jsdom": "^22.1.0",
+        "mathjax": "^3.2.2",
         "mathlive": "^0.95.5",
         "quill": "^1.3.6",
         "sweetalert2": "^11.6.13",
@@ -1420,6 +1421,11 @@
         "node": ">=10"
       }
     },
+    "node_modules/mathjax": {
+      "version": "3.2.2",
+      "resolved": "https://registry.npmjs.org/mathjax/-/mathjax-3.2.2.tgz",
+      "integrity": "sha512-Bt+SSVU8eBG27zChVewOicYs7Xsdt40qm4+UpHyX7k0/O9NliPc+x77k1/FEsPsjKPZGJvtRZM1vO+geW0OhGw=="
+    },
     "node_modules/mathlive": {
       "version": "0.95.5",
       "resolved": "https://registry.npmjs.org/mathlive/-/mathlive-0.95.5.tgz",
diff --git a/package.json b/package.json
index d7dfdba..525ae0e 100644
--- a/package.json
+++ b/package.json
@@ -24,6 +24,7 @@
     "jquery": "^3.7.1",
     "jquery-ui": "^1.13.2",
     "jsdom": "^22.1.0",
+    "mathjax": "^3.2.2",
     "mathlive": "^0.95.5",
     "quill": "^1.3.6",
     "sweetalert2": "^11.6.13",
diff --git a/rtc_hide_and_show.js b/rtc_hide_and_show.js
index 98ff090..cab9458 100644
--- a/rtc_hide_and_show.js
+++ b/rtc_hide_and_show.js
@@ -1,13 +1,29 @@
 function rtc_hide_and_show(rtcid) {
 	
-    console.log('show id :'+rtcid)
+    // console.log('show id :'+rtcid)
     var id = localStorage.getItem('rtc');
     var hideid = document.getElementById(id);
-    console.log('hide id :' + id)
+    // console.log('hide id :' + id)
     $(hideid).hide();
 
     var showid = document.getElementById(rtcid);    
     $(showid).show();
     localStorage.setItem('rtc',rtcid);
     
-};	
\ No newline at end of file
+};	
+
+
+function add_button_hide_and_show(BtnID){
+
+    // console.log('show id :'+BtnID)
+    var id = localStorage.getItem('btn');
+    var hideid = document.getElementById(id);
+    // console.log('hide id :' + id);
+    $(hideid).hide();
+
+    var showid = document.getElementById(BtnID);    
+    $(showid).show();
+    localStorage.setItem('btn',BtnID);
+
+
+}
\ No newline at end of file
diff --git a/style.css b/style.css
index 4761150..1d35a20 100644
--- a/style.css
+++ b/style.css
@@ -3274,8 +3274,8 @@ a.main_sticky {
     width: 100%;
     position: relative;
     padding: 25px 25px 25px 25px!important;
-    margin-left: 45px;
-    margin-right: 45px;
+    margin-left: 63px;
+    margin-right: 70px;
     margin-top: 50px;
     background-color: rgb(245, 245, 245);
     color:  #740fd6;
@@ -3285,8 +3285,8 @@ a.main_sticky {
 .question-pallete{
     width: 100%;
     position: relative;
-    margin-left: 45px;
-    margin-right: 45px;
+    margin-left: 63px;
+    margin-right: 70px;
     margin-top: 20px;
     margin-bottom: 45px;
 }
@@ -3507,6 +3507,45 @@ input:disabled {
   .comment{
     color: #6d6d6d;
   }
+
+
+.buttons i {
+    display: inline-block;
+    color: #fff;
+    font-weight: 900;
+    padding: 10px 0px;
+    text-transform: capitalize;
+    transition: 0.5s;
+    font-size: 15px;
+    position: relative;
+    z-index: 1;
+    border-radius: 5px;
+    overflow: hidden;
+    margin-top: 5px;
+    background: linear-gradient(to right,#00aaff,#00aaff);
+    border: none;
+    margin-right: 15px;
+    width: 40px;
+    padding-right: 12px;
+    margin-top: -5px;
+
+}
+.buttons i {
+    display: inline-block;
+    position: relative;
+    left: 5px;
+    font-weight: 600;
+    font-size: 20px;
+}
+.buttons i:hover {
+    color: #fff;
+    background: linear-gradient(to left, #533efe, #740fd6);
+    cursor: pointer;
+}
+
+
+
+
    
 
 
diff --git a/xml2json.js b/xml2json.js
index 99b2a39..6c5ae98 100644
--- a/xml2json.js
+++ b/xml2json.js
@@ -1,8 +1,8 @@
 
 function  xml2json(xmlData) {
 // console.clear();
-console.log('xml to json converstion');
-console.log(xmlData);
+// console.log('xml to json converstion');
+// console.log(xmlData);
 
 function getAttributesOfXMLNode(node)
 {
@@ -79,19 +79,23 @@ function getQuestionGroupNodes(questionGroup)
 				questionGroupObj['questions'] = [];
 				//handle questions
 				var questionList = questionGroup.childNodes[5].childNodes;
-				// console.log('No of quetions in GQ:' + questionList.length);
+				console.log('No of quetions in GQ:' + questionList.length);
 				for(let q = 0; q < questionList.length ;q++)
 				{
 						
 						var questionType = questionList[q].getAttribute("xsi:type");
-						// console.log(questionType);
 						if(questionType == 'DescriptiveQuestion')
-						{
-								questionGroupObj['questions'].push(getQuestionsNodes(questionList[q],1));
+						{   
+							questionGroupObj['questions'].push(getQuestionsNodes(questionList[q],1));
 						}
 						else if(questionType == 'MultiChoiceQuestion')
 						{
-								questionGroupObj['questions'].push(getQuestionsNodes(questionList[q],2));
+							questionGroupObj['questions'].push(getQuestionsNodes(questionList[q],2));
+						}
+						else
+						{
+							questionGroupObj['questions'].push(getQuestionGroupNodes(questionList[q]));
+							
 						}
 						
 				}
@@ -133,7 +137,7 @@ jsonObj['sections'] = [];
 		//handle questions
 		var questionList = sectionsList[i].childNodes[5].childNodes;
 		// console.log('No of quetions:' + questionList.length);
-		console.log(questionList);
+		// console.log(questionList);
 		for(let j = 0; j < questionList.length ;j++)
 		{
 				//check weather quesiotn or question grup
@@ -143,11 +147,11 @@ jsonObj['sections'] = [];
 				// console.log(questionType);
 				if(questionType == 'DescriptiveQuestion')
 				{
-						tempObj['questions'].push(getQuestionsNodes(questionList[j],1));
+					tempObj['questions'].push(getQuestionsNodes(questionList[j],1));
 				}
 				else if(questionType == 'MultiChoiceQuestion')
 				{
-						tempObj['questions'].push(getQuestionsNodes(questionList[j],2));
+					tempObj['questions'].push(getQuestionsNodes(questionList[j],2));
 				}
 				else if(questionType == 'QuestionGroup')
 				{
@@ -160,7 +164,7 @@ jsonObj['sections'] = [];
     var jsonData = JSON.stringify(jsonObj);
 	console.log('Xml to Json Conversion ');
 	console.log(jsonData);
-	console.log(jsonObj);
+	// console.log(jsonObj);
 	jsonToHtml(jsonObj);
 }