Как динамически у квиза вывести шаги и давать класс активному?

Для динамического вывода шагов и определения активного класса в квизе на JavaScript, вам понадобится использовать DOM-манипуляции и работать с событиями.

Первым шагом будет создание структуры HTML для квиза. Вы можете использовать <ul> с <li> элементами для шагов, например:

<ul id="quizSteps">
  <li class="step">Шаг 1</li>
  <li class="step">Шаг 2</li>
  <li class="step">Шаг 3</li>
</ul>

Затем, в JavaScript, вам нужно получить ссылки на элементы шагов и добавить обработчики событий для определения активного класса. Вы можете использовать querySelectorAll для выбора всех элементов с классом "step":

const steps = document.querySelectorAll('.step');

steps.forEach((step, index) => {
  step.addEventListener('click', () => {
    // Удаление активного класса со всех шагов
    steps.forEach((step) => {
      step.classList.remove('active');
    });

    // Добавление активного класса к текущему выбранному шагу
    step.classList.add('active');
    
    // Тут может быть логика для отображения соответствующего содержимого шага

    // Вывод номера активного шага
    console.log('Активный шаг:', index + 1);
  });
});

В этом коде мы добавляем обработчик событий "click" для каждого шага квиза. При клике на шаг, все элементы с классом "step" теряют активный класс, а выбранный шаг получает активный класс. Вы также можете добавить логику для отображения соответствующего содержимого каждого шага в зависимости от активного класса.

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

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