TABINDEX : AADHAVAN

This commit is contained in:
aadhavan valli 2024-02-13 11:26:56 +05:30
parent 92aa201002
commit 254a0a1ae0
2 changed files with 148 additions and 70 deletions

View File

@ -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>

View File

@ -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';