4

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

Я сделала массив и вот такой 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: "гусака"
  }
];
<div id="require-questionnaire">
  <div class="questionnaire">
    <h3>Скільки простору маєте?</h3>
    <button class="option" data-move-to="2">Чимало</button>
    <button class="option" data-move-to="3">Трохи маю</button>
    <button class="option" data-move-to="4">можу виділити лише куток в квартирі</button>
  </div>
</div>

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

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

6
  • Сточки зрения быстроты или чего то другого вообще нет разницы, хочешь switch if или тернарный оператор... Что больше нравиться... Лично я люблю if
    – Air
    Commented 29 янв. 2018 в 12:14
  • @Air, но тогда их надо очень много. Это возможно написать с помощью какой-то функции?
    – Bipa
    Commented 29 янв. 2018 в 12:22
  • На сколько я знаю, тебе в любом случае придется писать условия, если есть другие методы в js я не знаю.... Честно...
    – Air
    Commented 29 янв. 2018 в 12:43
  • @Air, хм, хорошо, даже если использовать if-и, можете показать как, пожалуйста?
    – Bipa
    Commented 29 янв. 2018 в 12:44
  • Показать конечно можно, но я з української не розумію. ты хотя бы объясни, что за слова
    – Air
    Commented 29 янв. 2018 в 13:12

2 ответа 2

3

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

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 += `<button onclick="nextQuestion(this);" class="option" data-move-to="${opt.moveTo}">${opt.userPick}</button>`
    })
    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]); // выводим первый вопрос
<div id="require-questionnaire">
  <div class="questionnaire">
    <h3 id="question"></h3>
    <div id="answers">
    </div>
  </div>

10
  • Вы бы хоть описали кратко принцип действия функции))
    – DaemonHK
    Commented 29 янв. 2018 в 13:34
  • ох, на мой уровень еще немного сложно >< но спасибо, сейчас попробую разобраться)
    – Bipa
    Commented 29 янв. 2018 в 13:54
  • @DaemonHK Добавил комментарии, но вроде там и так ничего сильно непонятного быть не должно :)
    – Yaant
    Commented 29 янв. 2018 в 13:54
  • @Біпач Я там добавил комментарии к коду, если что-то вдруг окажется непонятно, спрашивайте. :)
    – Yaant
    Commented 29 янв. 2018 в 13:56
  • @Yaant, еще раз спасибо) просто я еще не пользовалась такими конструкциями
    – Bipa
    Commented 29 янв. 2018 в 13:58
1

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

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)
<div id="pollBlock"></div>

2
  • В таком варианте могут возникнуть сложности, если к одному и тому же результату могут приводить разные пути. :)
    – Yaant
    Commented 30 янв. 2018 в 10:11
  • @Yaant согласен что вариант не такой гибкий, но на то он и как один из вариантов) да и может этого хватало автору
    – webDev_
    Commented 30 янв. 2018 в 10:48

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.