Квиз показывает по одному вопросу за раз. Пользователь выбирает один из вариантов ответа и нажимает кнопку «Далее». Шаги идут последовательно, прогресс-бар сверху заполняется, а после последнего вопроса все ответы собираются в объект и выводятся в формате JSON (сейчас — в консоль браузера).

Где менять вопросы и ответы

Все вопросы и варианты ответов хранятся в массиве formSteps в блоке JavaScript. Каждый шаг — это объект с полями question и answers:

const formSteps = [
  {
    question: "Что для вас является самым важным при выборе недвижимости?",
    answers: [
      "Близость к работе или учебе",
      "Тихий район и хорошие соседи",
      "Развитая инфраструктура и удобства",
      "Инвестиционная привлекательность",
    ],
  },
  // другие шаги
];

Чтобы настроить квиз под себя, сделайте следующее:

• измените текст в question — это сам вопрос;
• обновите массив answers — это варианты ответа для этого вопроса;
• можно добавлять новые шаги (объекты) или удалять лишние — логика квиза подстроится автоматически;
• количество вопросов можно менять без дополнительного кода.

Пример своего шага

Например, чтобы добавить вопрос про бюджет, можно дописать шаг в массив:

formSteps.push({
  question: "Какой диапазон бюджета вы рассматриваете?",
  answers: [
    "До 1 000 000",
    "1 000 000 – 3 000 000",
    "3 000 000 – 5 000 000",
    "Более 5 000 000",
  ],
});

Как работает прогресс-бар

Прогресс-бар заполняется в зависимости от текущего шага. В функции renderStep() используется формула:

const progress = ((currentStep + 1) / formSteps.length) * 100;
progressFill.style.width = progress + "%";

Это значит:

• на первом вопросе полоска почти пустая;
• к последнему вопросу она заполняется почти полностью;
• значение всегда считается автоматически от общего количества шагов.

Если вы добавляете или удаляете вопросы, прогресс-бар всё равно останется корректным — формула привязана к длине массива formSteps.

Как меняется внешний вид квиза

Основные стили настроены в блоке <style>. Главное, что можно быстро поменять:

• фон страницы — в селекторе body;
• ширину и тень карточки квиза — в .quiz__form;
• сетку ответов (2 колонки или 1) — в .quiz__answer;
• цвета границ и фона вариантов — в .quiz__answer-item;
• цвет и фон кнопки — в .quiz__button.

Фон страницы

Фон сейчас задаётся картинкой:

body {
  background-image: url("images/low-angle-office.webp");
  background-attachment: fixed;
  background-size: cover;
  background-position: center;
}

Замените путь в url("...") на свою картинку или уберите background-image, если хотите однотонный фон.

Сетка ответов

За количество колонок отвечает блок:

.quiz__answer {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

Если нужны ответы в одну колонку и на десктопе, замените значение:

grid-template-columns: 1fr;

Цвета вариантов ответов

Внешний вид карточек ответов настраивается здесь:

.quiz__answer-item {
  border: 1px solid #cbd5e1;
  background-color: #ffffff;
}

.quiz__answer-item:hover {
  border-color: #2684bb;
  background-color: #f8fafc;
}

Цвет границы и фона можно заменить на свои корпоративные цвета.

Кнопка «Далее»

Стиль кнопки меняется в классе .quiz__button:

.quiz__button {
  background: linear-gradient(45deg, #1fadff 0, #2684bb 100%);
  border-radius: 999px;
}

Вы можете задать любой другой градиент или сделать кнопку однотонной:

background: #2563eb;

Как изменить текст и аватар оператора

В блоке <legend> можно настроить то, что отображается в «шапке» квиза:

<legend class="quiz__legend">
  <img src="images/ava.webp" alt="avatar" class="quiz__ava" />
  <div class="quiz__question">
    <p>Оператор</p>
    <p id="question-text"></p>
  </div>
</legend>

Что можно поменять:

• картинку аватара — замените путь в src="images/ava.webp";
• подпись «Оператор» на любое другое слово или имя;
• при желании добавить ещё строки, например статус или название компании.

Как забрать результаты в JSON и отправить на сервер

Все ответы собираются в массив selectedAnswers. На последнем шаге формируется объект resultData и передаётся в функцию sendResults:

const resultData = {
  timestamp: new Date().toISOString(),
  answers: selectedAnswers,
};

sendResults(resultData);

Сейчас внутри sendResults данные просто выводятся в консоль:

function sendResults(data) {
  console.log("Отправляем данные квиза (JSON)...");
  console.log(JSON.stringify(data, null, 2));
}

Чтобы отправить данные на сервер, можно заменить содержимое функции, например на fetch:

function sendResults(data) {
  fetch("/quiz-endpoint", {
    method: "POST",
    headers: { "Content-Type": "application/json" },
    body: JSON.stringify(data),
  });
}

Адрес "/quiz-endpoint" замените на свой URL, где сервер принимает данные. Структура объекта остаётся удобной: дата прохождения и массив вопросов с выбранными ответами.