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

#javascript #html #массивы #if #case

Здравствуйте. Суть вот в чём: есть вопрос и три ответа. Каждый ответ влечет за собою
разные вопросы и, соответственно, разные ответы, и разные концовки. 

Я сделала массив и вот такой 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: "гусака"
  }
];

  

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





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

Спасибо за внимание
    

Ответы

Ответ 1

Навскидку, можно изобразить что-нибудь вроде этого:



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]); // выводим первый вопрос

  

    

    

    
  


Ответ 2

Можно испытать вложения



let data = {
    question: "Язык программирования?",
    options: [
        {
            title: "JS",
            result: {
                question: "Вы уверены?",
                options: [
                    {
                        title: "Да",
                        result: "JS"
                    }, {
                        title: "Нет",
                        result: "Ну ок"
                    }
                ]
            }
        }, {
            title: "PHP",
            result: {
                question: "Вы уверены?",
                options: [
                    {
                        title: "Да",
                        result: "PHP"
                    }, {
                        title: "Нет",
                        result: "Ну ок"
                    }
                ]
            }
        }
    ]
};

function poll(data) {
    if (typeof data == "string") { alert(data); return }
    
    pollBlock.innerHTML = "";
    
    let h2 = document.createElement("h2");
    h2.innerText = data.question;
    pollBlock.appendChild(h2)
    
    for (let v of data.options) {
        let button = document.createElement("button");
        button.innerText = v.title;
        button.addEventListener("click", ()=>poll(v.result));
        pollBlock.appendChild(button)
    }
};

poll(data)