Для реализации опросника с возможностью навигации по дереву JSON в обоих направлениях (вперед и назад) можно использовать подход, который включает в себя хранение контекста текущего состояния опроса. Вот один из способов, как вы можете организовать свое JSON дерево и реализовать логику поведения:
### Структура JSON
Предположим, у вас есть JSON-структура, которая выглядит следующим образом:
```json
{
"question": "Какой у вас любимый цвет?",
"options": [
{
"text": "Красный",
"next": {
"question": "Почему именно красный?",
"options": [
{
"text": "Это мой любимый цвет",
"next": null
},
{
"text": "Он привлекает внимание",
"next": null
}
]
}
},
{
"text": "Синий",
"next": {
"question": "Почему именно синий?",
"options": [
{
"text": "Он успокаивает",
"next": null
},
{
"text": "Это цвет неба",
"next": null
}
]
}
}
]
}
```
### Логика навигации
1. **Перемещение вперед:** Вы можете просто переходить на `next` элемент при выборе варианта ответа. В коде это будет выглядеть примерно так:
```javascript
let currentNode = json; // Начальный узел
function answerQuestion(optionIndex) {
if (currentNode.options[optionIndex].next) {
currentNode = currentNode.options[optionIndex].next;
displayQuestion(currentNode);
} else {
console.log("Это конец опроса.");
}
}
```
2. **Возврат назад:** Чтобы реализовать функцию возврата, вам нужно будет хранить информацию о предыдущих узлах. Один из способов - это использовать стек для хранения истории:
```javascript
let history = [];
function answerQuestion(optionIndex) {
history.push(currentNode); // Сохраняем текущий узел в истории
if (currentNode.options[optionIndex].next) {
currentNode = currentNode.options[optionIndex].next;
displayQuestion(currentNode);
} else {
console.log("Это конец опроса.");
}
}
function goBack() {
if (history.length > 0) {
currentNode = history.pop(); // Восстанавливаем предыдущий узел
displayQuestion(currentNode);
} else {
console.log("Это начало опроса.");
}
}
```
3. **Функция отображения вопроса:** Это функция, которая отображает текущий вопрос и варианты ответов. Например:
```javascript
function displayQuestion(node) {
console.log(node.question);
node.options.forEach((option, index) => {
console.log(`${index}: ${option.text}`);
});
}
```
### Заключение
Таким образом, вы можете организовать простую логику навигации по дереву вопросов в JSON-формате. Храните предыдущие элементы в стеке (или массиве), чтобы вы могли вернуться на один уровень вверх в структуре дерева. Это простое и эффективное решение, которое позволяет вам управлять состоянием опроса.