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