How to correctly write a program for testing?

Question

JavaScript

So I came up with a task for the weekend) In the morning I stumbled upon this picture and thought "why not write a program for such a task?"

At the moment, I think that it would be better to describe this whole scheme in json format, you will get a tree structure. The user clicks on options, some function parses a certain piece of json and returns the next options. And all these people are interested in the opinion of javascript programmers. What technical solution would you choose for such a task?

Answer 1

An ordinary tree is a question, a list of possible answers with transitions to the next nodes or leaves. It can be presented in any way, through JSON, XML, a pre-prepared array, etc.
You can place all the blocks on the page at once in nested divs and open / close the ones you need as you select answers.
You can draw a diagram as an SVG and handle clicks on select elements by highlighting the path traveled.

Answer 2

Check out the State Machine pattern. There are ready-made implementations, for example https://github.com/jakesgordon/javascript-state-machine

Answer 3

Wrote like a mobile application for surveys. The polls themselves with answer options and all branches were stored in json (an array of objects). The format is something like this:

[
  {
    id: 1,
    title: 'Итак, тебе нужен шрифт',
    desc: 'Начни с того для чего он тебе нужен',
    answers: [
      {
        title: 'Логотип',
        nextQuestion: 2
      },
      {
        title: 'Газета',
        nextQuestion: 3
      },
      {
        title: 'Приглашение',
        nextQuestion: 4
      },
      {
        title: 'Инфографика',
        nextQuestion: 5
      }  
    ]
  },
  {
    id: 2,
    answers: [
      {
        title: 'Без засечек, наверно?',
        nextQuestion: 6
      },
      {
        title: 'Или возможно с засечками?',
        nextQuestion: 7
      } 
    ]
  },
  {
    id: 3,
    answers: [
      title: 'Какого типа газета должна быть?',
      {
        title: 'Текстовая',
        nextQuestion: 8
      },
      {
        title: 'Визуальная',
        nextQuestion: 9
      },
      {
        title: 'Смесь',
        nextQuestion: 10
      } 
    ]
  },
  ........................
]

those. this is a linear array, in each object there are answer options that refer to the next question object. Each question can optionally contain a title and desc to describe the question in more detail.