Как сделать вариативность в данном квизе?

Question

[Jesse Pinkman]

Привет!
Есть такой пример: https://jsfiddle.net/h6nbzavw/

Мучаюсь и никак не могу понять, как мне с данного примера сделать вариативность, например, если в первом вопросе выбрать мотоцикл, то следующим показывать только вопрос про мотоцикл и пропустить про машину, так же для машины например. Перепробовал кучу "способов" (для каждого варианта писать свой if else, но это совсем дикость как мне кажется) но никак не смог такое сделать.

Прошу, помогите разобраться. Буду благодарен любой помощи: ссылки, алгоритмы, прямое решение, код и тд.

Спасибо!

Answer 1

[Сергей Соколов]

Такой квиз – это дерево. На каждом шаге выбирается одна из ветвей.

Можно добавлять ветви через поле типа "child" в каждом из вариантов:

spoiler

const quiz = {
  question: 'Выберите один вариант',
  choices: [
    {
      answer: 'мотоцикл',
      child: {
        question: 'Выберите модель мотоцикла',
        choices: [
          { answer: 'Гоночный', child: { ... } },
          { answer: 'Чоппер', child: { ... } }
        ]
      }
    },
    {
      answer: 'Машина',
      child: {
        question: 'Выберите модель машины',
        choices: [
          { answer: 'Ока', child: { ... } },
          { answer: 'Bentley', child: { ... } }
        ]
      }
    }
  ]
},

На практике не очень удобно описывать такую структуру глубоко – легко ошибиться со скобками и пр. В недавнем эксперименте я предпочёл описывать дерево в YAML – там просто отступами – и генерить скриптом из него уже нужную структуру в JSON.

Comments

[Jesse Pinkman]

Что-то такое ?

const list = [
    {
      title: 'Выберите один вариант',
      variant_list: [
          {
            variant_title: 'мотоцикл',
            next: "moto"
          },
          {
            variant_title: 'Машина',
            next: "car"
          }        
      ]
    },
    {
      car: {
        title: 'Выберите модель машины',
        variant_list: [
            {
              variant_title: 'Первый вариант машины',
            },
            {
              variant_title: 'Второй вариант машины',
            }        
        ]    
      },
      moto: {
        title: 'Выберите модель мотоцикла',
        variant_list: [
            {
              variant_title: 'Первый вариант мотоцикла',
            },
            {
              variant_title: 'Второй вариант мотоцикла',
            }        
        ]   
      },    

    },
  ];

У выбранного получить значение << next: "car" >> и следующим выводить только с учётом этого значения ?

Спасибо, что пытаетесь мне помочь!

[Сергей Соколов]

Jesse Pinkman, тоже обновил ответ примером структуры.

[Сергей Соколов]

Jesse Pinkman, Корневой элемент вряд ли должен быть массивом: ведь начальный вопрос всего 1.

Ваш вариант тоже вполне рабочий, надо только следить за уникальностью ключей.

[Jesse Pinkman]

Сергей Соколов,
Сейчас попробую сделать, мне надо такую дикость сделать нужно...

spoiler

Отмечу решением утром, Спасибо)

[Сергей Соколов]

Jesse Pinkman, тут есть закольцованность, поэтому просто-деревом не получится. Вы хороший вариант предложили, с уникальными id, когда из поля child берётся ключ следующего вопроса.

например

const quiz = {

  "start": {
    question: 'Выберите один вариант',
    choices: [
      { answer: 'мотоцикл', child: "moto" },    
      { answer: 'Машина', child: "car" },
    ]
  },
  
  "moto": {
    question: 'Выберите модель мотоцикла',
    choices: [
      { answer: 'Гоночный', child: "" },
      { answer: 'Чоппер', child: "" },
    ]
  },

  "car": {
    question: 'Выберите модель машины',
    choices: [
      { answer: 'Ока', child: "" },
      { answer: 'Bentley', child: "" }
    ]
  },
  
}

[Сергей Соколов]

Jesse Pinkman, если по этому опроснику надо будет двигаться и назад – запоминать в массиве «историю» похода..