Как установить последовательность вопросов на основе ответов, выбранных с помощью jQuery? ⇐ Jquery

[Гость]

У меня есть банк вопросов-ответов. Сначала из раскрывающегося списка выбирается вопрос, затем появляются ответы. Теперь рядом с каждым ответом появляются раскрывающиеся списки для выбора следующего вопроса. Таким образом, последовательность будет генерироваться по мере выбора вопроса или ответа. Бывший. Q1-A1-Q3-A4, Q1-A3-Q2-A1. Это должно продолжаться до тех пор, пока все вопросы не будут использованы в каждой последовательности.

Я изо всех сил старался заполнить вопросы и ответы на основе выбранных вариантов. Однако я не могу установить условия для достижения конца последовательности. Требуемые условия следующие: ни один вопрос не должен повторяться в последовательности, тогда как он может повторяться в нескольких последовательностях.

Скриншот желаемых результатов:



Обратите внимание: во фрагментах кода действуют ограничения на количество символов, поэтому для просмотра всего кода посетите раздел codepen.

Вот код того же самого:

https://codepen.io/Jagruti-S/pen/OJGJbJx

$(document).ready(function() { if ($('#default-sequence').length) { установитьПоследовательностьПо умолчанию(); $(document).on("изменить ввод", "ввод[name=sequence_order]", setDefaultSequence); } if ($("#тип-вопроса").length) { const singleSelect = $("#response-type-single").clone(); const multiSelect = $("#response-type-multiple").clone(); const trueFalseSelect = $("#ответ-тип-truefalse").clone(); if (!$("#тип-вопроса").val()) { $(".раздел-типа-ответа").remove(); } $(document).on("change", "#question-type", function() { $(".ответ-div").each(функция(индекс) { $(this).find('input').val("").trigger("change"); если (индекс >= 4) { $(это).удалить(); } }); $(".раздел-типа-ответа").remove(); переключатель ($(this).val()) { случай «истина или ложь»: $("#тип-ответа").append(trueFalseSelect) перерыв; случай «одиночный выбор»: $("#тип-ответа").append(singleSelect); перерыв; по умолчанию: $("#тип-ответа").append(multiSelect); } $(".ответ-тип-раздел").removeClass("d-none"); }); } if ($(".список-вопросов").длина) { вар вопросСчетчик = 0; $(".questions-list input").each(function() { $(this).change(function() { if ($(this).prop("проверено")) { $(this).closest(".custom-checkbox").removeClass("bg-dark").addClass("выбранный bg-черный"); $(this).parent().addClass("текст-белый"); вопросСчетчик++; } еще { $(this).closest(".custom-checkbox").removeClass("выбранный bg-black").addClass('bg-dark'); $(this).parent().removeClass("текст-белый"); вопросСчетчик--; } если (questionCounter > 10) { $("#questionLimit").modal("показать"); $(this).prop('проверено', ложь); $(this).closest(".custom-checkbox").removeClass("выбранный bg-black").addClass('bg-dark'); $(this).parent().removeClass("текст-белый"); вопросСчетчик--; } }); }); } if ($("#sequence-creator").length) { вар nextLevelQyesionBank = []; varsequenceTreeLevel = $(".sequence-tree").length; вар FinalSequences = []; const questionsBank = $(".question-text").map(function(index) { const ответы = $(this).parent().find(".вопрос-ответ").html().split(",").map(function(ответ) { вернуть ответ.trim(); }); возвращаться { идентификатор: "q" + (индекс + 1), вопрос: $(this).text(), ответы: ответы, отключено: ложь, тип: $(this).parent().find(".тип-вопроса").data('тип') }; }).получать(); var selectedQuestions = []; вар dataSeq = 1; функция updateQuestionDropdown() { if (selectedQuestions.length >= questionsBank.length) { $("#add-sequence-btn").removeAttr("отключено").removeClass("отключено"); } еще { $("#add-sequence-btn").attr("отключено", "отключено").addClass("отключено"); $(".question-parent").removeAttr("стиль"); $("#select-ques").empty().append(""); вопросBank.map(функция(вопрос) { если (selectedQuestions.includes(question.id)) { $("#select-ques").append("" + вопрос.вопрос + ""); } еще { $("#select-ques").append("" + вопрос.вопрос + ""); } }); } } функция updateAnswerDropdown(questionId) { $(".ответ-родитель").removeAttr("стиль"); вар вопрос = вопросBank.find(q => q.id === вопросId); если (вопрос && вопрос.ответы) { var AnswersDropdown = $("#select-ответ"); ответыDropdown.empty(); AnswerDropdown.append("Любой"); for (var я = 0; я < вопрос.ответы.длина; я++) { AnswerDropdown.append("" + вопрос.ответы + ""); } } } updateQuestionDropdown(); вар currentSelectQue; $(document).on("change", ".selection-row select", function() { если ($(this).val()) { вар mainQuestion = $(это); вар qId = $(this).val(); var qText = $(this).find('option:selected').text; вар вопрос = вопросBank.find(q => q.id === qId); //Если выбранный вопрос имеет одиночный выбор или true/false, то показать ответы, иначе показать следующий выбор вопроса if (question.type == 'true-false' || вопрос.type == 'single-select') { $("").insertBefore($( ".selection-row"); $(".new-tree").append("" + qId + "" + qText + "
"); если (вопрос && вопрос.ответы) { for (var я = 0; я < вопрос.ответы.длина; я++) { nextLevelQyesionBank = []; var ansDiv = "" + "a" + (i + 1) + "" + "
" + вопрос.ответы + "
" + "" + ""; вопросBank.map(функция(вопрос) { если (selectedQuestions.includes(question.id)) { ansDiv += "" + вопрос.вопрос + ""; } еще { nextLevelQyestionBank.push(question.id); ansDiv += "" + вопрос.вопрос + ""; } }); ansDiv += "" + "или" + "" + "порядок по умолчанию" + "" + "" + "" + "" + "" + ""; $(".new-tree").append(ansDiv); selectedQuestions = []; selectedQuestions.push(qId); } } } еще { $("").insertBefore ($(".selection-row")); $(".new-tree").append("" + qId + "
" + qText + "
"); var ansDiv = '' + ''; вопросBank.map(функция(вопрос) { если (selectedQuestions.includes(question.id)) { ansDiv += "" + вопрос.вопрос + ""; } еще { nextLevelQyestionBank.push(question.id); ansDiv += "" + вопрос.вопрос + ""; } }); ansDiv += "" + 'или' + '' + '' + 'порядок по умолчанию' + '' + '' + '' + '' + ''; $(".new-tree").append(ansDiv) } последовательностьДеревоУровень++; $(".sequence-tree").removeClass("новое-дерево"); } setTimeout(функция() { если (mainQuestion) { mainQuestion.val('').trigger('изменить'); mainQuestion.unbind('изменить'); } }, 1000); }); $(document).on("change", ".level-questions", function() { вар levelQuestion = $(это); вар qId = $(this).val(); var qText = $(this).find('option:selected').text; вар ansDiv = ''; вар вопрос = вопросBank.find(q => q.id === qId); если (qId) { levelQuestion.closest('.selected-ответ').removeClass("не выбрано-вопрос") } еще { levelQuestion.closest('.selected-ответ').addClass("нет-вопрос-выбран") } if ($(this).closest('.multi-select').length && $(this).closest('.multi-select').attr('уровень-последовательности данных') > 0) { var nextLEvel = "" $(nextLEvel).insertAfter($(this).closest(".multi-select")); } еще { var nextLEvel = "" $(nextLEvel).insertAfter($(this).closest(".следующий-вопрос-выбор"); } $(".new-tree").append("" + qId + "
" + qText + "
"); selectedQuestions[levelQuestion.attr("уровень данных-ответа")] = []; if (question.type == 'true-false' || вопрос.type == 'single-select') { если (вопрос && вопрос.ответы) { for (var i = 0; i < вопрос.ответы.длина; я++) { nextLevelQyesionBank = []; ansDiv = "" + "a" + (i + 1) + "" + "
" + вопрос.ответы + "
" + "" + ""; вопросBank.map(функция(вопрос) { если (selectedQuestions.includes(question.id)) { ansDiv += "" + вопрос.вопрос + ""; } еще { nextLevelQyestionBank.push(question.id); ansDiv += "" + вопрос.вопрос + ""; } }); ansDiv += "" + "или" + "" + "порядок по умолчанию" + "" + "" + "" + "" + "" + ""; $(".new-tree").append(ansDiv); selectedQuestions[levelQuestion.attr("уровень-ответа")] = []; selectedQuestions[levelQuestion.attr("уровень-ответа")][i].push(qId); } } } еще { $("").insertBefore ($(".selection-row")); $(".new-tree").append("" + qId + "
" + qText + "
"); ansDiv = '' + ''; вопросBank.map(функция(вопрос) { если (selectedQuestions.includes(question.id)) { ansDiv += "" + вопрос.вопрос + ""; } еще { nextLevelQyestionBank.push(question.id); ansDiv += "" + вопрос.вопрос + ""; } }); ansDiv += "" + 'или' + '' + '' + 'порядок по умолчанию' + '' + '' + '' + '' + ''; $(".new-tree").append(ansDiv) } последовательностьДеревоУровень++; $(".sequence-tree").removeClass('новое-дерево'); $("html").css('--sequenceBottom', ($("#sequence-outer > .sequence-tree").height() - $("#sequence-outer > .sequence-tree > .selected -ответ:last-child").height() - 35) + "px"); }); } }); функция setDefaultSequence() { $('#default-sequence').text(''); $("input[name=sequence_order]").each(function(index) { если (индекс > 0) { вар текст = "-q"; } еще { вар текст = "д"; } $('#default-sequence').text($('#default-sequence').text() + text + $(this).val()); });
:root { --bs-dark: #0c0c0c; --bs-dark-rgb: 12, 12, 12; --bs-dark-rgb: 15, 15, 15; --bs-primary: #f83881; --bs-primary-hover: #F40962; --bs-primary-rgb: 248, 56, 129; --bs-вторичный: #6e87ee; --bs-вторичный-hover: #4f62b0; --bs-вторичный-rgb: 110, 135, 238; --bs-успех: #1fdda1; --bs-success-rgb: 31, 221, 161; --bs-info: #7089f0; --bs-info-rgb: 112, 137, 240; --bs-body-color: #ccc; --bs-link-color: #ccc; --bs-link-color-rgb: 204 204 204; } HTML, тело { ширина: 100%; } тело { высота: 100вх; положение: относительное; Расстояние между буквами: 0,5 пикселей; } тело: до { содержание: ''; позиция: абсолютная; вставка: 0; фон: var (--bs-dark); непрозрачность: 0,97; } #основное содержание { разрыв: 30 пикселей; } #основной { переполнение: скрыто; } span.sequence-number { высота: 60 ​​пикселей; ширина: 60 ​​пикселей; фон: var (--bs-dark); дисплей: гибкий; выровнять-элементы: по центру; оправдание-содержание: центр; минимальная ширина: 60 ​​пикселей; граница: сплошная 1 пиксель; цвет: #fff; } .selected-question span.sequence-numbers { цвет границы: var (--bs-primary); } .selected-ответ span.sequence-numbers { цвет границы: var (--bs-вторичный); } .selected-вопрос { дисплей: гибкий; выровнять-элементы: по центру; разрыв: 15 пикселей; поле: 0 0 30 пикселей; } .selected-вопрос p { стиль шрифта: курсив; цвет: #666; маржа: 0; } .selected-ответ { дисплей: гибкий; разрыв: 15 пикселей; поле: 0 0 25 пикселей 60 пикселей; flex-wrap: обертка; положение: относительное; } .selected-ответ р { маржа: 0; стиль шрифта: курсив; цвет: #666; пробел: nowrap; } .дерево последовательности { положение: относительное; ширина: 100%; гибкость: 100%; flex-wrap: обертка; } .дерево последовательности:до { содержание: ''; дисплей: блок; ширина: 2 пикселя; позиция: абсолютная; верх: 75 пикселей; внизу: 175 пикселей; внизу: 90 пикселей; внизу: 0; внизу: Calc(1em + 30px); фон: линейный градиент (вниз, прозрачность 50 %, var (--bs-dark) 50 %), линейный градиент (вниз, #00b9ff, #59d941); размер фона: 100% 20 пикселей, 100% 7 пикселей; слева: 45 пикселей; } #sequence-outer > .sequence-tree:before { высота: var (--sequenceBottom); } .selected-ответ:до { содержание: ''; дисплей: блок; позиция: абсолютная; слева: -30 пикселей; высота: 2 пикселя; фон: линейный градиент (вправо, прозрачность 50%, #223049 50%), линейный градиент (вправо, #00b9ff, #59d941); размер фона: 16 пикселей 2 пикселя, 100% 2 пикселя; ширина: 30 пикселей; преобразование: TranslateY (30 пикселей); } .selected-ответ .sequence-tree { гибкость: 100%; поле слева: 45 пикселей; переполнение: видимое; } .selected-ответ > п { поле сверху: 18 пикселей; } .selected-ответ .selected-question span.sequence-numbers { цвет границы: var (--bs-primary); положение: относительное; } .selected-ответ .selected-question span.sequence-numbers:before { содержание: ''; дисплей: блок; позиция: абсолютная; слева: -30 пикселей; высота: 2 пикселя; фон: линейный градиент (вправо, прозрачность 50%, #223049 50%), линейный градиент (вправо, #00b9ff, #59d941); размер фона: 16 пикселей 2 пикселя, 100% 2 пикселя; ширина: 30 пикселей; преобразование: TranslateY (30 пикселей); верх: 0; } .selected-ответ:после { содержание: ''; дисплей: блок; ширина: 2 пикселя; позиция: абсолютная; верх: 60 пикселей; фон: линейный градиент (вниз, прозрачность 50 %, var (--bs-dark) 50 %), линейный градиент (вниз, #00b9ff, #59d941); размер фона: 100% 20 пикселей, 100% 7 пикселей; слева: 30 пикселей; высота: 65 пикселей; } .sequence-tree.multi-select, .selected-ответ .sequence-tree.multi-select { дисплей: гибкий; выровнять-элементы: гибкий старт; разрыв: 15 пикселей; } .sequence-tree.multi-select .next-question-selection, .selected-ответ .sequence-tree.multi-select .next-question-selection { поле: 10 пикселей 0 0; } .sequence-tree .form-check.form-checkbox label.form-check-label { пробел: nowrap; } .selected-question:last-child { поле: 0 0 15 пикселей; } .selected-question.last-question { маржа: 0; } .selected-ответ .sequence-tree.multi-select + .sequence-tree { поле слева: 120 пикселей; отступ: 0 !важно; } .selected-ответ .sequence-tree.multi-select .selected-question { маржа: 0; } .selected-ответ .sequence-tree.multi-select + .sequence-tree::before { слева: 25 пикселей; верх: 60 пикселей; } .selected-ответ .sequence-tree.multi-select + .sequence-tree::after { содержание: ''; дисплей: блок; ширина: 2 пикселя; позиция: абсолютная; верх: -27 пикселей; фон: линейный градиент (вниз, прозрачность 50 %, var (--bs-dark) 50 %), линейный градиент (вниз, #00b9ff, #59d941); размер фона: 100% 20 пикселей, 100% 7 пикселей; слева: -30 пикселей; высота: 60 ​​пикселей; } .selected-answer.no-question-selected:last-child { поле-дно: 0; } .selected-answer.no-question-selected:last-child:after { дисплей: нет; } .дерево последовательности > .дерево последовательности { поле слева: 45 пикселей; преобразование: TranslateY (-30 пикселей); вопросы на основе ролей последовательность по умолчанию: q1-q2-q3-q4- q5 введите порядковый номер напротив вопроса, чтобы установить последовательность вопросов по умолчанию SR. нет. вопрос тип вопроса ответы порядок 1 Вы сейчас работаете? Правда или ложь Да, нет 2 Какие у вас 5 лучших навыков? Множественный выбор Решение проблем, сбор требований, координация команды, управление проектами, реализация проектов, управление давлением, распределение задач, все вышеперечисленное 3 Какой самый большой размер команды вам до сих пор приходилось иметь дело? Один выбор 0–10, 10–30, 30–50, 50+ 4 Можете ли вы при необходимости переехать в другой город? Правда или ложь Да, нет 5 Каков ваш подход к многозадачному управлению? Один выбор Не могу решить, слежу за SDLC, Зависит от задачи Добавить пользовательскую последовательностьПримечание: для множественного выбора и выбор диапазона, разрешен прямой выбор вопроса. Для других типов вопрос можно выбрать для каждого ответа отдельно. выберите вопрос для НОВОЙ последовательности Вы сейчас работаете? Какие 5 ваших лучших навыков? Какой самый большой размер команды вам до сих пор приходилось иметь дело? Можете ли вы при необходимости переехать в другой город? Каков ваш подход к многозадачному управлению?