Реализация проекта поэтапной диагностики, как лучше?

Question

[jonghi]

Добрый вечер, подскажите как можно быстрее и удобнее сделать диагностику с поэтапным выявлением проектом.
Примерно как это будет выглядеть:



P.S. сильно не бейте, я не особо программист.

Comments

[Виталий Артемьев]

Расскажи подробнее что имеется в виду под диагностикой с поэтапным выявлением проекта?

[jonghi]

На скриншоте видно. Это структурирование информационной базы по тем или иным вопросам.
Например, для поддержки. Нужно выявить проблему и предоставить решение.
К примеру, обращается клиент и говорит мне нужна инструкция как пользоваться. По факту для разных ОС, браузеров разные инструкции (абстрактно). И тут поможет такая диагностика. По ней оператору предлагается задать нужный вопрос + перейти в раздел к которому относиться этот вопрос. Например: "Спроси у клиента пользуется он планшетом, телефоном или ПК?" и 3 варианта, соответственно сузив круг и дойдя до последнего вопроса диагностика тебе предоставит тот вариант инструкции, который тебе нужно отправить клиенту.

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

в каком виде хранятся вопросы, варианты, ответы? Хочется всё держать в веб-страничке сразу, или на каждом этапе бомбить запросом сервер?

[jonghi]

Сергей Соколов, не так много вопросов чтобы бомбить сервер))

Answer 1

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

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

Что-то типа

const knowledge = [
  {id: "0", title: "Как начать пользоваться сервисом", description: "", prev: null, next: ["0.0", "0.1" ]},
    {id: "0.0", title: "Упрощенная инструкция", description: "для новых пользователей", prev: "0", next: []}
    {id: "0.1", title: "Продвинутая", description: "для клиентов, чьи познания больше", prev: "0", next: []},
  {id: "1", title: "Пользуется ПК", description: "", prev: null, next: ["1.1", ]},
  {id: "2", title: "Браузер Google Chrome", description: "", prev: null, next: ["2.1", ]},
  {id: "3", title: "Версия последняя", description: "", prev: null, next: ["3.1", ]},

];

Состояние страницы характериуется текущим активным элементом: показан он и возможные дальнейшие пути, и известно, куда вернуться шаг назад. Если в один вопрос можно прийти несколькими путями, надо запоминать в массиве пройденный путь, и тогда шаг назад брать из него.

Answer 2

[Aricus]

Есть два варианта. Первый - воспользоваться каким-нибудь конструктором квиза, ведь, по сути, это он. Второй - прописать всё ручками.
Каждая кнопка - это post-форма, можно на ту же страницу. В hidden-поле нужно записать ответ, а номер стадии лучше передать в url (чтобы можно было вернуться к предыдущей стадии просто по ссылке). Сама кнопка - submit. Ответы на прошлые вопросы лучше записывать в cookie. В зависимости от этих данных формируются новые формы. А в конце вместо форм - конечные результаты.