Страницы

Поиск по вопросам

понедельник, 18 февраля 2019 г.

Помощь с “игрой”, где ответ влечет за собою другие вопросы

Здравствуйте. Суть вот в чём: есть вопрос и три ответа. Каждый ответ влечет за собою разные вопросы и, соответственно, разные ответы, и разные концовки.
Я сделала массив и вот такой 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: "гусака" } ];

Скільки простору маєте?


И никак не могу понять как это вообразить в жизнь. Писать множество ифов или кейсов далеко не вариант.
Спасибо за внимание


Ответ

Навскидку, можно изобразить что-нибудь вроде этого:
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 += `` }) 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]); // выводим первый вопрос


Комментариев нет:

Отправить комментарий