What data structure is suitable for a Trivia application?

Question

JavaScript

what data structure is suitable for a Trivia application, in which there will be the following flow:
First screen => world selection, when selected, the transition to the Second screen will take place.
Second screen => select the level, which will switch to the Third screen.
Third screen => level.

Thought to do:
Array with objects of the worlds.
Each pest will have an array of levels.
Each level will be an object of a question and 4 answers,

Any better suggestions? I'm getting a job, I need to do it better =]

Answer 1

When I wrote a text adventure game, I did it this way:

// Есть модули вида:
{
  title: '',
  text: '',
  img: '',
  buttons: [
    {title: 'bttn1', location: 'location_bttn1'},
    {title: 'bttn2', location: 'location_bttn2'}
  ]
}

// Эти модули складируются в один объект, т. е. не древовидная структура, а плоская,
// для скорости поиска.
// Сначала у меня для поиска использовалась рекурсия в древе,
// но это работало медленно и я пришел к плоской структуре.
// Нет ничего быстрее, чем обращение по ключу в объект)

const locations = {
  home: {
    title: 'home',
    text: 'home Page',
    img: '',
    buttons: [
      {title: 'bttn1', location: 'location_bttn1'}
    ]
  }
  location_bttn1: {
    title: 'bttn1',
    text: 'bttn1 Page',
    img: '',
    buttons: [
      {title: 'bttn2', location: 'location_bttn2'}
    ]
  }
  ...
}

In the rendering function, when called, the location_id is thrown.
According to this location_id, the renderer finds the required module in locations and renders it, attaching the rendering function with the location_id from the button object to the buttons.

Read more...

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

{
  title: '',
  text: '',
  img: '',
  buttons: [
    {title: 'bttn1', location: 'location_bttn1'},
    {title: 'bttn2', location: 'location_bttn2'}
  ],

  renderMode: 'firstScreen' // 'playBoard' || 'menu' || 'level' || ...
}

На месте можно сделать и заглушку для 404 экрана
Так-же это удобно, чтобы продолжить с последней локации после перезарузки страницы.
Просто при каждом переходе сохранете location_id в localStorage и берете оттуда, при запуске

Answer 2

Yes, and as an option to pass a specific array through route.params. and if there is a backend, then for good you need to receive requests by id