javascript – Help with a "game" where the answer leads to other questions

Question:

Hello. The bottom line is this: there is a question and three answers. Each answer entails different questions and, accordingly, different answers, and different endings.

I made an array and this is html: (sorry, but a little too lazy to rewrite everything from Ukrainian to Russian)

 var data = [{ id: 1, questions: "Скільки простору маєте?", options: [{ userPick: "Чимало", moveTo: 2 }, { userPick: "Трохи маю", moveTo: 3 }, { userPick: "можу виділити лише куток у квартирі", moveTo: 4 } ] }, { id: 2, questions: "Яку користь хочете мати?", options: [{ userPick: "Пересування", moveTo: 5 }, { userPick: "Яйця", moveTo: 6 }, { userPick: "Молоко", moveTo: 7 } ] }, { id: 3, questions: "Шерсть потрібна?", options: [{ userPick: "Так", moveTo: 16 }, { userPick: "Ні", moveTo: 8 } ] }, { id: 4, questions: "Має бути з вухами?", options: [{ userPick: "Так", moveTo: 10 }, { userPick: "Ніяких вух", moveTo: 9 } ] }, { id: 5, result: "коня" }, { id: 6, questions: "Має хоть трохи літати?", options: [{ userPick: "Так", moveTo: 12 }, { userPick: "Ніяких літати", moveTo: 8 } ] }, { id: 7, questions: "Хочете мати можливість задіяти в ролику про шоколаду Milka?", options: [{ userPick: "Ні", moveTo: 14 }, { userPick: "Було б непогано", moveTo: 13 } ] }, { id: 8, questions: "Нічого що трошки агресивний?", options: [{ userPick: "Підійде", moveTo: 18 }, { userPick: "Не підійде", moveTo: 17 } ] }, { id: 9, questions: "Як щодо птиці?", options: [{ userPick: "Так", moveTo: 6 }, { userPick: "Не впевнений", moveTo: 11 } ] }, { id: 10, result: "кролика" }, { id: 11, result: "бджіл" }, { id: 12, result: "курку" }, { id: 13, result: "корову" }, { id: 14, questions: "Сусідів рогаті тварини не бентежать?", options: [{ userPick: "Все ок", moveTo: 15 }, { userPick: "Бентежать", moveTo: 16 } ] }, { id: 15, result: "козу" }, { id: 16, result: "вівцю" }, { id: 17, result: "качку" }, { id: 18, result: "індика" }, { id: 19, questions: "Потримати в руках?", options: [{ userPick: "Так", moveTo: 20 }, { userPick: "Ні", moveTo: 19 } ] }, { id: 20, result: "гусака" } ];
 <div id="require-questionnaire"> <div class="questionnaire"> <h3>Скільки простору маєте?</h3> <button class="option" data-move-to="2">Чимало</button> <button class="option" data-move-to="3">Трохи маю</button> <button class="option" data-move-to="4">можу виділити лише куток в квартирі</button> </div> </div>

And I can't figure out how to put it into practice. Writing a lot of ifs or case studies is far from an option.

Thank you for your attention

Answer:

Offhand, you can draw something like this:

 function nextQuestion(el, forceNext) { let next; if (forceNext) // параметр используется для инициализации HTML конкретным элементом из массива, если он передан, то первый параметр игнорируется. next = forceNext; else { let moveTo = el.getAttribute('data-move-to') next = data.find(item => item.id == moveTo); // находим в массиве следующий вопрос, базируясь на атрибуте data-move-to } if (next.result) { // если достигли конечного состояния, alert(next.result); // то выводим результат nextQuestion(null, data[0]); // и переходим снова к первому вопросу } else { document.getElementById('question').innerText = next.questions; // выводим текст следующего вопроса let html = '' next.options.forEach(opt => { // формируем html для кнопок с ответами html += `<button onclick="nextQuestion(this);" class="option" data-move-to="${opt.moveTo}">${opt.userPick}</button>` }) document.getElementById('answers').innerHTML = html; // вставляем полученный html } } var data = [{ id: 1, questions: "Скільки простору маєте?", options: [{ userPick: "Чимало", moveTo: 2 }, { userPick: "Трохи маю", moveTo: 3 }, { userPick: "можу виділити лише куток у квартирі", moveTo: 4 } ] }, { id: 2, questions: "Яку користь хочете мати?", options: [{ userPick: "Пересування", moveTo: 5 }, { userPick: "Яйця", moveTo: 6 }, { userPick: "Молоко", moveTo: 7 } ] }, { id: 3, questions: "Шерсть потрібна?", options: [{ userPick: "Так", moveTo: 16 }, { userPick: "Ні", moveTo: 8 } ] }, { id: 4, questions: "Має бути з вухами?", options: [{ userPick: "Так", moveTo: 10 }, { userPick: "Ніяких вух", moveTo: 9 } ] }, { id: 5, result: "коня" }, { id: 6, questions: "Має хоть трохи літати?", options: [{ userPick: "Так", moveTo: 12 }, { userPick: "Ніяких літати", moveTo: 8 } ] }, { id: 7, questions: "Хочете мати можливість задіяти в ролику про шоколаду Milka?", options: [{ userPick: "Ні", moveTo: 14 }, { userPick: "Було б непогано", moveTo: 13 } ] }, { id: 8, questions: "Нічого що трошки агресивний?", options: [{ userPick: "Підійде", moveTo: 18 }, { userPick: "Не підійде", moveTo: 17 } ] }, { id: 9, questions: "Як щодо птиці?", options: [{ userPick: "Так", moveTo: 6 }, { userPick: "Не впевнений", moveTo: 11 } ] }, { id: 10, result: "кролика" }, { id: 11, result: "бджіл" }, { id: 12, result: "курку" }, { id: 13, result: "корову" }, { id: 14, questions: "Сусідів рогаті тварини не бентежать?", options: [{ userPick: "Все ок", moveTo: 15 }, { userPick: "Бентежать", moveTo: 16 } ] }, { id: 15, result: "козу" }, { id: 16, result: "вівцю" }, { id: 17, result: "качку" }, { id: 18, result: "індика" }, { id: 19, questions: "Потримати в руках?", options: [{ userPick: "Так", moveTo: 20 }, { userPick: "Ні", moveTo: 19 } ] }, { id: 20, result: "гусака" } ] nextQuestion(null, data[0]); // выводим первый вопрос
 <div id="require-questionnaire"> <div class="questionnaire"> <h3 id="question"></h3> <div id="answers"> </div> </div>
Scroll to Top
AllEscort