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

DRAGANDDROP : AADHAVAN

Browse Source
This commit is contained in:
aadhavan valli 2024-01-12 11:15:53 +05:30
parent 9797075e88
commit a580c841f6
9 changed files with 518 additions and 31 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
QuestionPaperPreview.js
View File

@ -71,6 +71,7 @@ function QuestionPaperPreview(jsonData){
const questionPaperTitle = data.question_paper_title; const questionPaperTitle = data.question_paper_title;
const questionPaperDescription = data.question_paper_description; const questionPaperDescription = data.question_paper_description;
console.log(data);
var title = removeHtmlTags(questionPaperTitle) var title = removeHtmlTags(questionPaperTitle)
// Wrap the heading elements in <div> elements with CSS for centering // Wrap the heading elements in <div> elements with CSS for centering
@ -231,12 +232,12 @@ function QuestionPaperPreview(jsonData){
// questionGroupMark = questionGroupMark.replace('<p id="group_marks">', '<p id="group_marks" hidden>') // questionGroupMark = questionGroupMark.replace('<p id="group_marks">', '<p id="group_marks" hidden>')
// } // }
questionPaper += `<div class="text-group-align" style="margin-left:0px;">${questionId})${questionGroupmodify}</div>` questionPaper += `<div class="textGroup"><div class="text-group-align" style="margin-left:0px;">${questionId})${questionGroupmodify}</div>`
questionPaper += `<div class="group_marks_attmpt">${questionGroupAttempt}${questionGroupMark}</div>`; questionPaper += `<div class="group_marks_attmpt">${questionGroupAttempt}${questionGroupMark}</div>`;
// questionPaper += `<div class="group_attempt_any">${questionGroupAttempt}</div>`; // questionPaper += `<div class="group_attempt_any">${questionGroupAttempt}</div>`;
questionPaper += `<div class="group-descrip" style="margin-left:${description_align}px">${questionGroupDescription}</div>`; questionPaper += `<div class="group-descrip" style="margin-left:${description_align}px">${questionGroupDescription}</div></div>`;
depth2++ depth2++
} else if (question.question) { } else if (question.question) {
@ -328,6 +329,7 @@ function QuestionPaperPreview(jsonData){
const alphabetOptions = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ'; // Define the alphabet options const alphabetOptions = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ'; // Define the alphabet options
for (let i = 0; i < answers.length; i++) { // change the i +=2 aadhavan for (let i = 0; i < answers.length; i++) { // change the i +=2 aadhavan
// console.log(answers);
const optionA = alphabetOptions[i]; const optionA = alphabetOptions[i];
// const optionB = alphabetOptions[i + 1]; // const optionB = alphabetOptions[i + 1];
@ -337,9 +339,9 @@ function QuestionPaperPreview(jsonData){
const answerA = answers[i] ? `${optionA}. ${convertToLatex(answers[i].choice_name, math)}` : ''; const answerA = answers[i] ? `${optionA}. ${convertToLatex(answers[i].choice_name, math)}` : '';
// const answerB = answers[i + 1] ? `${optionB}. ${convertToLatex(answers[i + 1].choice_name, mathstatus)}` : ''; // const answerB = answers[i + 1] ? `${optionB}. ${convertToLatex(answers[i + 1].choice_name, mathstatus)}` : '';
if (multipleAnswer == 'false') { if (multipleAnswer == 'false') {
questionPaper += `<div class="text-option-align" style="margin-left:${choisealgin}px"><input type="radio" name="answer" value="A"> <p class="ChoiceOption">${answerA.padEnd(10)}</p></div>`; questionPaper += `<div class="text-option-align" style="margin-left:${choisealgin}px"><input class="optionSelectArea" type="radio" name="answer" value="A"> <p class="ChoiceOption">${answerA.padEnd(10)}</p></div>`;
}else{ }else{
questionPaper += `<div class="text-option-align" style="margin-left:${choisealgin}px"><input type="checkbox" name="answer" value="A"> <p class="ChoiceOption"> ${answerA.padEnd(10)}</p></div>`; questionPaper += `<div class="text-option-align" style="margin-left:${choisealgin}px"><input class="optionSelectArea" type="checkbox" name="answer" value="A"> <p class="ChoiceOption">${answerA.padEnd(10)}</p></div>`;
} }
} }
} }

37
QuestionPreview.html
View File

@ -53,8 +53,25 @@
<style> <style>
/* .ChoiceOption{
position: absolute;
margin-top: 28px !important;
margin-left: -25px !important;
} */
.optionSelectArea{
position: absolute;
margin-top: 36px;
}
input[type=checkbox], input[type=radio] {
margin-left: -32px;
}
img{
margin-top: 20px;
}
.question_Text img{ .question_Text img{
margin-top: 25px; margin-top: 30px;
} }
@ -67,8 +84,13 @@
display: flex; display: flex;
} }
.ChoiceOption{ .ChoiceOption{
display: flex; /* display: flex; */
align-items: center; align-items: center;
display: inline;
/* margin-left: -6px !important; */
position: absolute;
margin-top: 28px !important;
margin-left: -25px !important;
} }
.ql-align-right.table-border{ .ql-align-right.table-border{
width: 167px !important; width: 167px !important;
@ -253,10 +275,10 @@
.MathJax.CtxtMenu_Attached_0{ .MathJax.CtxtMenu_Attached_0{
display: contents !important; display: contents !important;
} }
.text-qus-align{padding-right: 62px; } .text-qus-align{padding-right: 62px; margin-top: 37px; inline-size: 790px;}
.text-qus-align p{ margin:0; } .text-qus-align p{ margin:0; }
.text-des{ margin-left: 20px;margin-top: 0px;} /* Change there aadhavan top-6px*/ .text-des{ margin-left: 20px;margin-top: 10px; inline-size: 790px;} /* Change there aadhavan top-6px*/
.text-option-align{display:flex;margin-top: 0%;margin-left: 45px;} /* Change there aadhavan 10px*/ .text-option-align{display:flow-root;margin-top: -2%;margin-left: 45px; inline-size: 790px; } /* Change there aadhavan 10px*/
.text-option-align p{ margin:0; text-wrap: balance;} .text-option-align p{ margin:0; text-wrap: balance;}
/* #sectionTitle {border-top: 2px solid gray /* #sectionTitle {border-top: 2px solid gray
; width:99%;} */ ; width:99%;} */
@ -317,8 +339,9 @@
} }
.group-descrip{ .group-descrip{
position: relative; position: relative;
top: -21px; top: 15px;
margin-bottom: -20px; margin-bottom: -20px;
inline-size: 790px;
} }
/* p.question_Text:not(:first-of-type) { /* p.question_Text:not(:first-of-type) {
margin-left: 34px; margin-left: 34px;

54
addform.html
View File

@ -59,6 +59,15 @@
<script src="./node_modules/jodit/es2018/jodit.min.js"></script> <script src="./node_modules/jodit/es2018/jodit.min.js"></script>
<script src="./assets/js/custom-js-css/drag-drop.js"></script>
<link rel="stylesheet" href="./assets/js/custom-js-css/nav_pane_hover.css" />
<style>
</style>
<style> <style>
@ -421,7 +430,7 @@
overflow-x: clip; overflow-x: clip;
max-height: 532px; max-height: 532px;
padding:0 10px 20px; padding:0 10px 20px;
width: 285px; width: 314px;
height: -webkit-fill-available; height: -webkit-fill-available;
} }
@ -5067,7 +5076,7 @@ function removeNonExistentIds(arrayOfIds) {
</script> </script>
<script> <!-- <script>
let draggedItemGroup = null; let draggedItemGroup = null;
let draggedItemQuestion = null; let draggedItemQuestion = null;
let dropTarget = null; let dropTarget = null;
@ -5199,7 +5208,7 @@ console.error('No dragged item or drop target found.');
</script> </script> -->
<script> <script>
// Store a reference to the currently displayed div // Store a reference to the currently displayed div
@ -5730,5 +5739,44 @@ setInterval(removeNonExistentIdseveryTime, 1000)
</script> </script>
<script>
function removeNavContain() {
var classnames = document.querySelectorAll('.navContain')
classnames.forEach(function (classname) {
if (!classname.innerHTML) {
classname.remove();
}else{
var checkITag =classname.querySelector('i')
if (checkITag) {
} else {
const gripIcon = document.createElement('i');
gripIcon.className = 'fas fa-grip-horizontal';
gripIcon.style.position = 'fixed';
gripIcon.style.right = '1260px';
// gripIcon.setAttribute('draggable', 'true');
classname.appendChild(gripIcon);
}
}
})
}
setInterval(removeNavContain, 300)
</script>
</body> </body>
</html> </html>

4
assets/js/custom-js-css/drag-drop-css.js Normal file
View File

@ -0,0 +1,4 @@
var a =document.

271
assets/js/custom-js-css/drag-drop.js Normal file
View File

@ -0,0 +1,271 @@
var dragStartElement= null;
var dragDropElement=null;
var draggedItem = null;
//DragStart Function
function dragStart(a,e){
// console.log("Start->",a.id);
dragStartElement = a;
a.classList.add('draggedElementStart');
// draggedItem = this;
// e.dataTransfer.effectAllowed = 'move';
// e.dataTransfer.setData('text/html', this.innerHTML);
}
//DragOver Function
function dragOver(element , event) {
var sectionArea = element.parentNode.previousElementSibling
if (sectionArea.id.replace(/\d/g, '') == "nav_section_title_" || element.id.replace(/\d+/g, '') == "nav_section_title_") {
element.style.border = '2px solid rgba(255, 0, 0, 0.5)';
}else {
element.style.border = '2px solid rgba(128, 128, 128, 0.5)';
}
// console.log("Over -> ",element.id);
// element.classList.add("dragOverElement")
// if (element.id.replace(/\d/g, '') == "nav_removeAndCloneTextQuestion_" || element.id.replace(/\d/g, '') == 'nav_removeAndCloneQroupQuestion_') {
// element.style.border = '2px solid rgba(169, 169, 0, 0.5)';
// } else if(element.id.replace(/\d/g, '') == "nav_draggedGroup_"){
// element.style.border = '2px solid rgba(128, 128, 128, 0.5)';
// }else{
// element.style.border = '2px solid rgba(255, 0, 0, 0.5)';
// }
// console.log(element);
element.style.borderRadius = '5px';
dragDropElement = element;
if (event.preventDefault) {
event.preventDefault();
}
event.dataTransfer.dropEffect = 'move';
return false;
}
function dragLeave(element, event) {
element.style.border = 'none';
// element.classList.remove('dragOverElement');
}
//DragEnd Function
function dragEnd(element, e) {
// console.log("DragEnd -> ",element.id);
element.classList.remove('draggedElementStart');
// element.classList.remove('dragOverElement');
}
//DragDrop
async function dragDrop(element,e) {
element.style.border = 'none';
// element.classList.remove('dragOverElement');
// console.log("DragDrop -> ", element.id);
if (e.stopPropagation) {
e.stopPropagation();
}
//Nav Pane full Element
const container = document.getElementById('questionPaper');
const dropTarget = e.target;
if (container.contains(dropTarget)) {
//Before Insert OF the HTML Node
if (e.clientY < dropTarget.getBoundingClientRect().top + dropTarget.clientHeight / 2) {
console.log("BEFORE INSERTS....");
//Check Start And Drop Element true And Two Not equal to
if (dragStartElement && dragDropElement && dragStartElement !== dragDropElement) {
// var list = document.getElementById(dragDropElement.id);
//Check Drop Element is Group Question
if (dragDropElement.id.replace(/\d+/g, '') == "nav_draggedGroup_") {
//Check First Element is Group Question
if (dragStartElement.id.replace(/\d+/g, '') == "nav_draggedGroup_") {
var dragStartElementChild = dragStartElement.nextElementSibling;
// var addbefore = dragStartElement.previousElementSibling;
dragDropElement.parentNode.insertBefore(dragStartElement,dragDropElement);
// dragStartElement.parentNode.insertBefore(addbefore , dragStartElement)
dragDropElement.parentNode.insertBefore(dragStartElementChild , dragDropElement);
insertElement(dragStartElement, dragDropElement,"before")
} else {
dragDropElement.parentNode.insertBefore(dragStartElement,dragDropElement)
insertElement(dragStartElement, dragDropElement,"before")
}
}else if (dragDropElement.id.replace(/\d+/g, '') == "nav_section_title_") {
}
else {
dragDropElement.parentNode.insertBefore( dragStartElement, dragDropElement);
insertElement(dragStartElement,dragDropElement,"before");
}
}
}
//After Insert of the HTML Node
else {
console.log("AFTER INSERT .....");
//Check Start And Drop Element true And Two Not equal to
if (dragStartElement && dragDropElement && dragStartElement !== dragDropElement) {
// var list = document.getElementById(dragDropElement.id);
//Check Drop Element is Group Question
if (dragDropElement.id.replace(/\d+/g, '') == "nav_draggedGroup_") {
if (dragStartElement.id.replace(/\d+/g, '') == "nav_draggedGroup_") {
var dragDropElementChild = dragDropElement.nextElementSibling.dragStartElementChild;
var dragStartElementChild = dragStartElement.nextElementSibling;
if (dragDropElementChild) {
dragDropElementChild.parentNode.insertBefore(dragStartElement , dragDropElementChild)
dragDropElementChild.parentNode.insertBefore(dragStartElementChild, dragDropElementChild)
insertElement(dragStartElement,dragDropElement,"after")
} else {
dragDropElementChild = dragDropElement.nextElementSibling;
dragDropElementChild.appendChild(dragStartElement)
dragDropElementChild.appendChild(dragStartElementChild)
insertElement(dragStartElement, dragDropElement,"after")
// console.log(dragDropElementChild);
}
} else {
var dragDropElementNextElement=dragDropElement.nextElementSibling.firstChild;
if (dragDropElementNextElement) {
dragDropElementNextElement.parentNode.insertBefore(dragStartElement, dragDropElementNextElement)
insertElement(dragStartElement ,dragDropElement,"after")
} else {
dragDropElementNextElement = dragDropElement.nextElementSibling;
dragDropElementNextElement.appendChild(dragStartElement);
insertElement(dragStartElement , dragDropElement)
}
}
}
//Check Drop Element is Section
else if(dragDropElement.id.replace(/\d+/g, '') == "nav_section_title_"){
var dragDropElementChild = dragDropElement.nextElementSibling.firstChild;
if (dragDropElementChild) {
dragDropElementChild.parentNode.insertBefore(dragStartElement , dragDropElementChild);
insertElement(dragStartElement, dragDropElement);
} else {
if (dragStartElement.id.replace(/\d+/g, '') == "nav_draggedGroup_") {
var firstChild = dragStartElement.nextElementSibling;
dragDropElementChild = dragDropElement.nextElementSibling;
dragDropElementChild.appendChild(dragStartElement);
dragDropElementChild.appendChild(firstChild)
} else {
dragDropElementChild = dragDropElement.nextElementSibling;
dragDropElementChild.appendChild(dragStartElement);
insertElement(dragStartElement, dragDropElement);
}
}
}
//THis Entered in Text and Choice Question
else {
//Check the Start Element is Group Question
if (dragStartElement.id.replace(/\d+/g, '') == "nav_draggedGroup_") {
var parent = dragDropElement.parentNode;
var lastChild = parent.lastChild;
var dragStartElementChild = dragStartElement.nextElementSibling;
parent.insertBefore(dragStartElement, lastChild.nextElementSibling)
parent.insertBefore(dragStartElementChild , dragStartElement.nextElementSibling)
insertElement(dragStartElement , dragDropElement , "after")
}
// this Entered Text and Choice Question
else {
dragDropElement.parentNode.insertBefore( dragStartElement, dragDropElement.nextElementSibling);
insertElement(dragStartElement,dragDropElement,"after");
// dragStartElement = null;
// dragDropElement = null;
}
}
}
}
}
}
//THis function is Replicate the Nav Pane Change
function insertElement(dragStartElement, dragDropElement, position){
var mainpaneSection = document.getElementById('addNewSection')
//Check All is true this for
if (dragStartElement && dragDropElement && position) {
//Check IS before
if (position == "before") {
//Check DragFirst Element have id
if (!dragStartElement.id) {
var dragStartElementChild = dragStartElement.dragStartElementChild
var maindragStartElement = mainpaneSection.querySelector(`#${dragStartElementChild.id.replace(/^nav_/, '')}`);
var maindragDropElement = mainpaneSection.querySelector(`#${dragDropElement.id.replace(/^nav_/, '')}`);
if (maindragStartElement && maindragDropElement && maindragStartElement !== maindragDropElement) {
maindragDropElement.parentNode.insertBefore( maindragStartElement, maindragDropElement);
}
} else {
var maindragStartElement = mainpaneSection.querySelector(`#${dragStartElement.id.replace(/^nav_/, '')}`);
var maindragDropElement = mainpaneSection.querySelector(`#${dragDropElement.id.replace(/^nav_/, '')}`);
if (maindragStartElement && maindragDropElement && maindragStartElement !== maindragDropElement) {
maindragDropElement.parentNode.insertBefore( maindragStartElement, maindragDropElement);
}
}
}
// After element Node Added
else {
var maindragStartElement = mainpaneSection.querySelector(`#${dragStartElement.id.replace(/^nav_/, '')}`);
var maindragDropElement = mainpaneSection.querySelector(`#${dragDropElement.id.replace(/^nav_/, '')}`);
// End Element is Section
if (maindragDropElement.id.replace(/\d+/g, '') == "section_title_") {
//Check First Element is Group
if (maindragStartElement.id.replace(/\d+/g, '') == "draggedGroup_") {
var groupQuestionAddSection = maindragDropElement.nextElementSibling.querySelector('.section-question-area')
if (maindragStartElement && maindragDropElement && maindragStartElement !== maindragDropElement) {
groupQuestionAddSection.appendChild(maindragStartElement)
// test.parentNode.insertBefore(maindragStartElement, test)
}
} else {
var textAndChoiceAddSection = maindragDropElement.nextElementSibling.querySelector('.section-question-area');
if (maindragStartElement && maindragDropElement && maindragStartElement !== maindragDropElement) {
textAndChoiceAddSection.parentNode.insertBefore(maindragStartElement, textAndChoiceAddSection)
}
}
}
//Check the Second Element is Group Question
else if(maindragDropElement.id.replace(/\d+/g, '') == "draggedGroup_"){
//Check First Element is Group Question
if (maindragStartElement.id.replace(/\d+/g, '') == "draggedGroup_") {
var groupQuestionAddGroupQuestion = maindragDropElement.querySelector('.nested-sortable');
if (maindragStartElement && maindragDropElement && maindragStartElement !== maindragDropElement) {
groupQuestionAddGroupQuestion.appendChild(maindragStartElement)
}
}
//This allows Text and Choice
else {
var groupQuestionAddTextChoice= maindragDropElement.querySelector('.nested-sortable').dragStartElementChild;
if (groupQuestionAddTextChoice) {
groupQuestionAddTextChoice.parentNode.insertBefore(maindragStartElement , groupQuestionAddTextChoice)
} else {
var groupQuestionAdd = maindragDropElement.querySelector('.nested-sortable')
etest.appendChild(maindragStartElement)
// test.parentNode.insertBefore(maindragStartElement , test)
}
}
}else{
maindragDropElement.parentNode.insertBefore(maindragStartElement , maindragDropElement)
}
}
}
//no need
else {
var maindragStartElement = mainpaneSection.querySelector(`#${dragStartElement.id.replace(/^nav_/, '')}`);
var maindragDropElement = mainpaneSection.querySelector(`#${dragDropElement.id.replace(/^nav_/, '')}`);
if (maindragStartElement && maindragDropElement && maindragStartElement !== maindragDropElement) {
maindragDropElement.parentNode.insertBefore( maindragStartElement, maindragDropElement.nextElementSibling);
}
}
}

72
assets/js/custom-js-css/nav_pane_hover.css Normal file
View File

@ -0,0 +1,72 @@
/* .section.main-heading:hover{
background-color: gray;
color: #333;
} */
/* .sectionHoverClass:hover{
background-color: aquamarine;
} */
/* .sectionHoverClass {
width: 500px;
height: 30px;
background-color: white;
transition: background-color 0.3s ease;
}
.sectionHoverClass:active {
background-color: aquamarine;
}
.questionDragHover {
width: 500px;
height: 30px;
background-color: white;
transition: background-color 0.3s ease;
}
.questionDragHover:hover{
height: 60px;
}
.questionDragHover:active {
background-color: aquamarine;
} */
/* .draggedElementStart{
height: 30px;
font-weight: 50%;
} */
/* .draggedElementLeave{
background-color: #ccc;
} */
.dragOverElement{
/* width: 270px; */
/* padding: 40px 0px 0px 0px 0px ; */
/* margin-left: -20px; */
/* border: 2px solid #000; */
border: 2px solid rgba(0, 0, 0, 0.5);
border-radius: 10px;
/* height: 50px; */
/* padding-left: 200px; */
/* background-color: #ccc; */
}
.fa-grip-horizontal{
/* position: absolute; */
/* right: -72px !important; */
}

10
assets/js/takeNumberOnly/takeNumberOnly.js Normal file
View File

@ -0,0 +1,10 @@
module.exports.takeNumberOnly = function (text) {
let number = text.match(/\d+/)[0];
return number
}

82
nav_pane.js
View File

@ -1,6 +1,7 @@
// const { css } = require("jquery"); // const { css } = require("jquery");
// const mathJaxPath = require.resolve('./node_modules/mathjax/es5/latest.js'); // const mathJaxPath = require.resolve('./node_modules/mathjax/es5/latest.js');
// require(mathJaxPath); // require(mathJaxPath);
const takeNumberOnly = require('./assets/js/takeNumberOnly/takeNumberOnly')
// Initialize an array to store the expanded section data-ids // Initialize an array to store the expanded section data-ids
const expandedSections = []; const expandedSections = [];
@ -25,7 +26,7 @@ function navpane() {
var html = html.replace(/<[^>]*>/g, ''); var html = html.replace(/<[^>]*>/g, '');
if (html.length >= 30) { if (html.length >= 30) {
html=html.slice(0,30 ) + '...'; html=html.slice(0,24 ) + ''; // ...
} }
return html return html
@ -55,9 +56,9 @@ function navpane() {
// Truncate the content // Truncate the content
var truncatedContent = ""; var truncatedContent = "";
if(textContent.length > 30) if(textContent.length > 24)
{ {
truncatedContent = textContent.substring(0, maxLength) + '...'; truncatedContent = textContent.substring(0, maxLength) + ''; // ...
} }
else{ else{
truncatedContent = textContent; truncatedContent = textContent;
@ -89,6 +90,13 @@ function navpane() {
const sectionId = section.section_id;; const sectionId = section.section_id;;
sectionDiv.setAttribute('data-id', sectionId); sectionDiv.setAttribute('data-id', sectionId);
sectionDiv.className = 'section main-heading'; sectionDiv.className = 'section main-heading';
sectionDiv.setAttribute('id', `nav_section_title_${sectionId.match(/\d+/)[0]}`)
// sectionDiv.setAttribute('draggable', 'true');
sectionDiv.setAttribute("ondragstart" , "dragStart(this,event)");
sectionDiv.setAttribute("ondragend" , "dragEnd(this,event)");
sectionDiv.setAttribute("ondragover" , "dragOver(this,event)");
sectionDiv.setAttribute("ondrop" , "dragDrop(this,event)");
sectionDiv.setAttribute("ondragleave" ,"dragLeave(this,event)");
// console.log(section); // console.log(section);
// console.log(typeof sectionDiv); // console.log(typeof sectionDiv);
@ -296,23 +304,36 @@ function navpane() {
function createTreeNode(nodeData, parentNode) { function createTreeNode(nodeData, parentNode) {
const nodeDiv = document.createElement('div'); const nodeDiv = document.createElement('div');
const nodeDivChildForIconAlgin = document.createElement('div');
nodeDiv.className = "navContain"; nodeDiv.className = "navContain";
nodeDiv.classList.add('navDrag'); nodeDiv.classList.add('navDrag');
nodeDiv.appendChild(nodeDivChildForIconAlgin)
// nodeDiv.id = nodeData.textQuestion_Id || nodeData.choice_question_id; // nodeDiv.id = nodeData.textQuestion_Id || nodeData.choice_question_id;
const nodeDataId = nodeData.question_Id const nodeDataId = nodeData.question_Id
const nodeDataType = nodeData.question_type const nodeDataType = nodeData.question_type
// console.log('nodeDataType:',nodeDataType); // console.log('nodeDataType:',nodeDataType);
parentNode.appendChild(nodeDiv);
if (nodeDataId) {
var navPaneQuestionId = takeNumberOnly.takeNumberOnly(nodeDataId)
}
var bulletPoint = ""; var bulletPoint = "";
var dragIcon = "";
dragIcon = document.createElement('i');
dragIcon.className = 'fas fa-grip-horizontal';
dragIcon.style.position = '';
dragIcon.style.right = '1260px';
if (nodeData.question) { if (nodeData.question) {
parentNode.appendChild(nodeDiv);
var RawID = ""; var RawID = "";
if(nodeDataType == 'text') if(nodeDataType == 'text')
{ {
bulletPoint = document.createElement('img'); bulletPoint = document.createElement('img');
bulletPoint.src = 'assets/images/navtext.svg'; bulletPoint.src = 'assets/images/navtext.svg';
bulletPoint.style.marginRight = '5px'; bulletPoint.style.marginRight = '5px';
bulletPoint.style.width = '13px'; bulletPoint.style.width = '13px';
@ -320,7 +341,14 @@ function navpane() {
bulletPoint.style.color = '#00aaff'; bulletPoint.style.color = '#00aaff';
// bulletPoint.textContent = '\u2022'; // bulletPoint.textContent = '\u2022';
bulletPoint.setAttribute("title", "Descriptive"); bulletPoint.setAttribute("title", "Descriptive");
nodeDiv.appendChild(bulletPoint); nodeDivChildForIconAlgin.appendChild(bulletPoint);
nodeDiv.id =`nav_removeAndCloneTextQuestion_${navPaneQuestionId}`;
nodeDiv.setAttribute('draggable', 'true');
nodeDiv.setAttribute("ondragstart" , "dragStart(this,event)");
nodeDiv.setAttribute("ondragend" , "dragEnd(this,event)");
nodeDiv.setAttribute("ondragover" , "dragOver(this,event)");
nodeDiv.setAttribute("ondrop" , "dragDrop(this,event)");
nodeDiv.setAttribute("ondragleave" , "dragLeave(this , event)");
var splitedId = nodeDataId.split("_")[1]; var splitedId = nodeDataId.split("_")[1];
RawID = 'removeAndCloneTextQuestion_'+splitedId; RawID = 'removeAndCloneTextQuestion_'+splitedId;
@ -336,11 +364,18 @@ function navpane() {
bulletPoint.style.color = '#00aaff'; bulletPoint.style.color = '#00aaff';
bulletPoint.setAttribute("title", "MCQ"); bulletPoint.setAttribute("title", "MCQ");
// bulletPoint.textContent = '\u2022'; // bulletPoint.textContent = '\u2022';
nodeDiv.appendChild(bulletPoint); nodeDiv.id =`nav_removeAndCloneQroupQuestion_${navPaneQuestionId}`;
nodeDiv.setAttribute('draggable', 'true');
nodeDiv.setAttribute("ondragstart" , "dragStart(this,event)");
nodeDiv.setAttribute("ondragend" , "dragEnd(this,event)");
nodeDiv.setAttribute("ondragover" , "dragOver(this,event)");
nodeDiv.setAttribute("ondrop" , "dragDrop(this,event)");
nodeDiv.setAttribute("ondragleave" , "dragLeave(this , event)");
// nodeDiv.style.justifyContent= 'space-between'
nodeDivChildForIconAlgin.appendChild(bulletPoint);
var splitedId = nodeDataId.split("_")[1]; var splitedId = nodeDataId.split("_")[1];
RawID = 'removeAndCloneQroupQuestion_'+splitedId; RawID = 'removeAndCloneQroupQuestion_'+splitedId;
} }
var QuestionID = document.getElementById(RawID) var QuestionID = document.getElementById(RawID)
@ -403,7 +438,8 @@ function navpane() {
nodeDiv.style.color ='black'; nodeDiv.style.color ='black';
nodeDiv.style.marginLeft ='-67px'; nodeDiv.style.marginLeft ='-67px';
nodeDiv.style.paddingLeft='67px'; nodeDiv.style.paddingLeft='67px';
nodeDiv.style.marginRight= '-75px' // nodeDiv.style.marginRight= '-75px';
// nodeDiv.style.justifyContent= 'space-between';
QuestionID.style.fontWeight = '100'; QuestionID.style.fontWeight = '100';
currentlyHighlightedElement = nodeDiv; currentlyHighlightedElement = nodeDiv;
// nodeDiv.scrollIntoView({ behavior: 'smooth', block: 'start' }); // nodeDiv.scrollIntoView({ behavior: 'smooth', block: 'start' });
@ -431,6 +467,7 @@ function navpane() {
nodeDiv.style.color = ' black'; nodeDiv.style.color = ' black';
nodeDiv.style.marginLeft ='0px'; nodeDiv.style.marginLeft ='0px';
nodeDiv.style.paddingLeft='0px'; nodeDiv.style.paddingLeft='0px';
// nodeDiv.style.justifyContent= 'space-between'
currentlyHighlightedElement =null currentlyHighlightedElement =null
// nodeDiv.scrollIntoView({ behavior: 'smooth', block: 'start' }); // nodeDiv.scrollIntoView({ behavior: 'smooth', block: 'start' });
@ -471,8 +508,9 @@ function navpane() {
nodeDiv.style.color ='black'; nodeDiv.style.color ='black';
nodeDiv.style.marginLeft ='-67px'; nodeDiv.style.marginLeft ='-67px';
nodeDiv.style.paddingLeft='67px'; nodeDiv.style.paddingLeft='67px';
nodeDiv.style.marginRight= '-75px'; // nodeDiv.style.marginRight= '-75px';
nodeDiv.style.borderLeftWidth= '-75px'; nodeDiv.style.borderLeftWidth= '-75px';
// nodeDiv.style.justifyContent= 'space-between';
currentlyHighlightedElement = questionLink; currentlyHighlightedElement = questionLink;
}); });
questionLink.addEventListener('mouseout', function () { questionLink.addEventListener('mouseout', function () {
@ -489,6 +527,7 @@ function navpane() {
nodeDiv.style.color = ' black'; nodeDiv.style.color = ' black';
nodeDiv.style.marginLeft ='0px'; nodeDiv.style.marginLeft ='0px';
nodeDiv.style.paddingLeft='0px'; nodeDiv.style.paddingLeft='0px';
// nodeDiv.style.justifyContent= 'space-between';
currentlyHighlightedElement =null currentlyHighlightedElement =null
}); });
@ -518,12 +557,30 @@ function navpane() {
// console.log('questionLink : ', questionLink) // console.log('questionLink : ', questionLink)
nodeDiv.appendChild(questionLink); nodeDivChildForIconAlgin.appendChild(questionLink);
nodeDiv.appendChild(dragIcon)
} else if (nodeData.group_title) { } else if (nodeData.group_title) {
const groupTitleDiv = document.createElement('div'); const groupTitleDiv = document.createElement('div');
// const gripIcon = document.createElement('i');
// gripIcon.className = 'fas fa-grip-horizontal';
// gripIcon.style.position = 'fixed';
// gripIcon.style.right = '1260px';
// groupTitleDiv.appendChild(gripIcon);
const groupTitleId = nodeData.question_group_id; const groupTitleId = nodeData.question_group_id;
console.log(groupTitleId);
const getNumberOnlyGroupTitleId = takeNumberOnly.takeNumberOnly(groupTitleId)
groupTitleDiv.setAttribute('data-id', groupTitleId); groupTitleDiv.setAttribute('data-id', groupTitleId);
groupTitleDiv.setAttribute('id', `nav_draggedGroup_${getNumberOnlyGroupTitleId}`);
groupTitleDiv.className = 'question-group'; groupTitleDiv.className = 'question-group';
groupTitleDiv.setAttribute('draggable', 'true');
groupTitleDiv.setAttribute("ondragstart" , "dragStart(this,event)");
groupTitleDiv.setAttribute("ondragend" , "dragEnd(this , event)");
groupTitleDiv.setAttribute("ondragover" , "dragOver(this,event)");
groupTitleDiv.setAttribute("ondragleave" , "dragLeave(this , event)")
groupTitleDiv.setAttribute("ondrop" , "dragDrop(this , event)");
// console.log(groupTitleId); // console.log(groupTitleId);
@ -539,13 +596,11 @@ function navpane() {
} else { } else {
groupTitleDiv.classList.add('collapsed'); groupTitleDiv.classList.add('collapsed');
} }
if(editPage == 1 || editPage == null){ if(editPage == 1 || editPage == null){
groupTitleDiv.classList.add('collapsed'); groupTitleDiv.classList.add('collapsed');
} }
parentNode.appendChild(groupTitleDiv); parentNode.appendChild(groupTitleDiv);
const groupTitleArrow = document.createElement('span'); const groupTitleArrow = document.createElement('span');
@ -793,6 +848,7 @@ function navpane() {
}); });
parentNode.appendChild(groupQuestionsDiv); parentNode.appendChild(groupQuestionsDiv);
} }
} }
var questionPaperContainer = document.getElementById('questionPaper'); var questionPaperContainer = document.getElementById('questionPaper');

1
style.css
View File

@ -3612,6 +3612,7 @@ font-size: 14px;
display: flex; display: flex;
/* display: contents; */ /* display: contents; */
align-items: center; align-items: center;
justify-content: space-between;
} }