Квиз подбора стиля интерьера для Tilda

<section class="vbkps">
  <div class="vbkps-wrap">
    <div class="vbkps-head">
      <h2 class="vbkps-h2">Какой стиль подойдёт вашей квартире</h2>
      <p class="vbkps-lead">Четыре вопроса про жильё, привычки и цвет. В ответ стиль, палитра и срок проекта.</p>
    </div>

    <div class="vbkps-box">
      <div class="vbkps-top">
        <span class="vbkps-num" id="vbkps-num">Шаг 1 из 4</span>
        <div class="vbkps-segs" id="vbkps-segs" aria-hidden="true"></div>
      </div>

      <div class="vbkps-stage" id="vbkps-stage" aria-live="polite"></div>

      <div class="vbkps-foot">
        <button type="button" class="vbkps-back" id="vbkps-back" hidden>Назад</button>
        <span class="vbkps-hint" id="vbkps-hint">Ответы остаются в браузере</span>
      </div>
    </div>
  </div>
</section>

<style>
.vbkps, .vbkps *, .vbkps *::before, .vbkps *::after { box-sizing: border-box; }
.vbkps {
  --acc: #8d7a5e; --acc-dark: #74634a; --ink: #26231e; --muted: #7a736a; --line: #e6e0d6; --soft: #f7f4ef;
  --f: var(--t-text-font, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif);
  --fh: var(--t-headline-font, var(--f));
  background: #fff; color: var(--ink); font-family: var(--f); padding: clamp(38px, 5.4vw, 88px) 20px;
}
.vbkps-wrap { max-width: 980px; margin: 0 auto; padding: 0 clamp(0px, 2vw, 36px); }
.vbkps-head { max-width: 40em; margin-bottom: clamp(22px, 3vw, 34px); }
.vbkps-h2 { font-family: var(--fh); font-size: clamp(26px, 3.4vw, 40px); line-height: 1.1; font-weight: 600; letter-spacing: -.02em; margin: 0 0 12px; }
.vbkps-lead { font-size: 16px; line-height: 1.62; color: var(--muted); margin: 0; }

.vbkps-box { background: var(--soft); border-radius: 8px; padding: clamp(22px, 3vw, 40px); }
.vbkps-top { display: flex; align-items: center; gap: 18px; margin-bottom: 26px; }
.vbkps-num { font-size: 13px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); white-space: nowrap; }
.vbkps-segs { display: flex; gap: 6px; flex: 1 1 auto; }
.vbkps-segs i { display: block; height: 3px; flex: 1 1 0; background: #ded7ca; border-radius: 3px; transition: background .3s ease; }
.vbkps-segs i.vbkps-on { background: var(--acc); }

.vbkps-q { font-family: var(--fh); font-size: clamp(19px, 2.2vw, 26px); line-height: 1.25; font-weight: 600; margin: 0 0 20px; }
.vbkps-opts { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 10px; }
.vbkps-opt { display: block; width: 100%; text-align: left; border: 1px solid var(--line); margin: 0; padding: 18px 20px;
  -webkit-appearance: none; appearance: none; font: inherit; cursor: pointer; border-radius: 6px;
  background: #fff !important; color: var(--ink) !important; transition: border-color .18s ease, transform .18s ease; }
.vbkps-opt:hover { border-color: var(--acc); }
.vbkps-opt b { display: block; font-size: 15.5px; font-weight: 600; line-height: 1.35; }
.vbkps-opt span { display: block; font-size: 13px; line-height: 1.5; color: var(--muted); margin-top: 6px; }

.vbkps-foot { display: flex; align-items: center; gap: 16px; margin-top: 24px; }
.vbkps-back { border: 0; margin: 0; padding: 0; -webkit-appearance: none; appearance: none; background: none !important;
  cursor: pointer; font: inherit; font-size: 14px; color: var(--muted) !important; text-decoration: underline; }
.vbkps-back:hover { color: var(--acc) !important; }
.vbkps-hint { margin-left: auto; font-size: 12.5px; color: #9d968c; }

.vbkps-res__tag { display: inline-block; font-size: 12px; letter-spacing: .08em; color: var(--acc); margin-bottom: 12px; }
.vbkps-res__ttl { font-family: var(--fh); font-size: clamp(23px, 3vw, 34px); line-height: 1.14; font-weight: 600; margin: 0 0 14px; }
.vbkps-pal { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 18px; }
.vbkps-pal i { display: block; width: 34px; height: 34px; border-radius: 50%; border: 1px solid rgba(0,0,0,.08); }
.vbkps-pal em { font-style: normal; font-size: 13px; color: var(--muted); margin-left: 4px; }
.vbkps-res__txt { font-size: 16px; line-height: 1.65; color: var(--muted); margin: 0 0 20px; max-width: 38em; }
.vbkps-facts { list-style: none; margin: 0 0 24px; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 10px; }
.vbkps-facts li { background: #fff; border-radius: 6px; padding: 15px 18px; }
.vbkps-facts b { display: block; font-family: var(--fh); font-size: 19px; font-weight: 600; }
.vbkps-facts span { display: block; font-size: 12.5px; color: var(--muted); margin-top: 4px; }
.vbkps-acts { display: flex; flex-wrap: wrap; gap: 10px; }
.vbkps-cta, .vbkps-cta:link, .vbkps-cta:visited, .vbkps-cta:active, .vbkps-cta:focus { display: inline-flex; align-items: center;
  justify-content: center; min-height: 54px; padding: 0 28px; border-radius: 4px; font-size: 16px; font-weight: 600;
  background: var(--acc); color: #fff !important; text-decoration: none !important; }
.vbkps-cta:hover { background: var(--acc-dark); color: #fff !important; }
.vbkps-again { min-height: 54px; padding: 0 24px; border: 1px solid var(--line); margin: 0; -webkit-appearance: none; appearance: none;
  font: inherit; font-size: 16px; cursor: pointer; border-radius: 4px; background: #fff !important; color: var(--ink) !important; }
.vbkps-again:hover { border-color: var(--acc); }

@media (max-width: 560px) { .vbkps-top { flex-direction: column; align-items: stretch; gap: 12px; } .vbkps-segs { width: 100%; } }
@media (prefers-reduced-motion: reduce) { .vbkps * { transition: none !important; } }
</style>

<script>
(function () {
  var STEPS = [
    { q: 'Какое жильё оформляем?', opts: [
      { t: 'Студия или однокомнатная', d: 'До 45 м², важен метр', p: { min: 2, scandi: 2, classic: 0, loft: 1 } },
      { t: 'Двух- или трёхкомнатная', d: 'Типовой этаж', p: { min: 1, scandi: 2, classic: 2, loft: 1 } },
      { t: 'Дом или таунхаус', d: 'Несколько уровней', p: { min: 1, scandi: 1, classic: 3, loft: 1 } },
      { t: 'Новостройка с высокими потолками', d: 'От 3 метров, панорамные окна', p: { min: 2, scandi: 0, classic: 1, loft: 3 } }
    ]},
    { q: 'Кто будет здесь жить?', opts: [
      { t: 'Один человек', d: 'Гостей принимаю редко', p: { min: 3, scandi: 1, classic: 0, loft: 2 } },
      { t: 'Пара без детей', d: 'Готовим и работаем дома', p: { min: 2, scandi: 2, classic: 1, loft: 2 } },
      { t: 'Семья с детьми', d: 'Стойкие поверхности', p: { min: 1, scandi: 3, classic: 2, loft: 0 } },
      { t: 'Семья и питомцы', d: 'Покрытия под износ', p: { min: 0, scandi: 3, classic: 2, loft: 1 } }
    ]},
    { q: 'Как вы относитесь к цвету?', opts: [
      { t: 'Чем спокойнее, тем лучше', d: 'Белый, серый, бежевый', p: { min: 3, scandi: 2, classic: 1, loft: 0 } },
      { t: 'Светлая база и деревянные акценты', d: 'Тепло без пестроты', p: { min: 1, scandi: 3, classic: 1, loft: 1 } },
      { t: 'Глубокие тона и благородные оттенки', d: 'Зелёный, винный, латунь', p: { min: 0, scandi: 0, classic: 3, loft: 2 } },
      { t: 'Люблю контраст и фактуру', d: 'Кирпич, бетон, металл', p: { min: 1, scandi: 0, classic: 1, loft: 3 } }
    ]},
    { q: 'Что для вас важнее в квартире?', opts: [
      { t: 'Хранение', d: 'Всё убрано за фасады', p: { min: 3, scandi: 2, classic: 1, loft: 0 } },
      { t: 'Свет', d: 'Дневной свет и подсветка', p: { min: 2, scandi: 3, classic: 1, loft: 1 } },
      { t: 'Простор', d: 'Открытая планировка и проходы', p: { min: 2, scandi: 1, classic: 0, loft: 3 } },
      { t: 'Уют и приём гостей', d: 'Большой стол и мягкая зона', p: { min: 0, scandi: 2, classic: 3, loft: 1 } }
    ]}
  ];

  var STYLES = {
    min: { ttl: 'Минимализм', href: '#raschet',
      pal: ['#f2f0eb', '#d9d5cc', '#a9a49a', '#54524d', '#232220'], palName: 'белый, песочный, графит',
      txt: 'Хранение уходит за гладкие фасады без ручек, на квартиру остаётся два-три материала. Интерьер требует точных чертежей: кривая стена сразу заметна.',
      facts: [['6 недель', 'срок проекта'], ['от 2 400 ₽', 'за м² проекта'], ['3 материала', 'в основной отделке']] },
    scandi: { ttl: 'Сканди', href: '#raschet',
      pal: ['#f7f4ee', '#e3d5c1', '#c39b6d', '#8ea08c', '#3d3a34'], palName: 'молочный, дуб, шалфей',
      txt: 'Светлая база, много дерева и текстиля, мебель простых форм. Стиль прощает жизнь с детьми и питомцами и хорошо ложится на типовые квартиры.',
      facts: [['5 недель', 'срок проекта'], ['от 2 400 ₽', 'за м² проекта'], ['70%', 'светлых поверхностей']] },
    classic: { ttl: 'Современная классика', href: '#raschet',
      pal: ['#f0ece4', '#cdbba0', '#8d7a5e', '#3f4f46', '#26231e'], palName: 'слоновая кость, латунь, хвоя',
      txt: 'Симметрия, молдинги и мебель с характером, без завитков. Тут больше всего чертежей: филёнки и карнизы рисуются в развёртках подробно.',
      facts: [['8 недель', 'срок проекта'], ['от 2 900 ₽', 'за м² проекта'], ['на 30%', 'больше развёрток']] },
    loft: { ttl: 'Мягкий лофт', href: '#raschet',
      pal: ['#efece7', '#c8b6a6', '#9b6f52', '#6d6f70', '#2a2826'], palName: 'кирпич, бетон, тёплый серый',
      txt: 'Открытая планировка, фактура кирпича и бетона, тёплый текстиль с деревом для баланса. Просит высоких потолков: открытые коммуникации видно.',
      facts: [['7 недель', 'срок проекта'], ['от 2 700 ₽', 'за м² проекта'], ['2 зоны', 'без перегородок']] }
  };

  var roots = document.querySelectorAll('.vbkps');
  for (var i = 0; i < roots.length; i++) init(roots[i]);

  function init(root) {
    if (root.__vb) return; root.__vb = 1;
    var stage = root.querySelector('#vbkps-stage'), segs = root.querySelector('#vbkps-segs');
    var back = root.querySelector('#vbkps-back'), num = root.querySelector('#vbkps-num');
    var hint = root.querySelector('#vbkps-hint'), HINT = hint.textContent;
    var idx = 0, score, trail;

    function reset() { idx = 0; score = { min: 0, scandi: 0, classic: 0, loft: 0 }; trail = []; }

    function paint(done) {
      var h = '';
      for (var j = 0; j < STEPS.length; j++) h += '<i class="' + (j < done ? 'vbkps-on' : '') + '"><\/i>';
      segs.innerHTML = h;
    }

    function drawStep() {
      var s = STEPS[idx];
      paint(idx);
      num.textContent = 'Шаг ' + (idx + 1) + ' из ' + STEPS.length;
      back.hidden = idx === 0;
      hint.textContent = HINT;
      var h = '<h3 class="vbkps-q">' + s.q + '<\/h3><div class="vbkps-opts">';
      for (var j = 0; j < s.opts.length; j++) {
        h += '<button type="button" class="vbkps-opt" data-i="' + j + '"><b>' + s.opts[j].t + '<\/b><span>' + s.opts[j].d + '<\/span><\/button>';
      }
      stage.innerHTML = h + '<\/div>';
      var btns = stage.querySelectorAll('.vbkps-opt');
      for (var k = 0; k < btns.length; k++) btns[k].onclick = pick;
    }

    function pick() {
      var o = STEPS[idx].opts[+this.getAttribute('data-i')];
      trail.push(o.p);
      for (var key in o.p) { if (o.p.hasOwnProperty(key)) score[key] += o.p[key]; }
      idx++;
      if (idx < STEPS.length) drawStep(); else drawResult();
    }

    function drawResult() {
      paint(STEPS.length);
      num.textContent = 'Результат';
      back.hidden = false;
      hint.textContent = 'Подобрано по вашим ответам';
      var win = 'min', best = -1;
      for (var key in score) { if (score.hasOwnProperty(key) && score[key] > best) { best = score[key]; win = key; } }
      var st = STYLES[win];
      var pal = '';
      for (var j = 0; j < st.pal.length; j++) pal += '<i style="background:' + st.pal[j] + '"><\/i>';
      var facts = '';
      for (var m = 0; m < st.facts.length; m++) facts += '<li><b>' + st.facts[m][0] + '<\/b><span>' + st.facts[m][1] + '<\/span><\/li>';
      stage.innerHTML = '<div class="vbkps-res"><span class="vbkps-res__tag">Ваш стиль<\/span>' +
        '<h3 class="vbkps-res__ttl">' + st.ttl + '<\/h3>' +
        '<div class="vbkps-pal">' + pal + '<em>' + st.palName + '<\/em><\/div>' +
        '<p class="vbkps-res__txt">' + st.txt + '<\/p>' +
        '<ul class="vbkps-facts">' + facts + '<\/ul>' +
        '<div class="vbkps-acts"><a class="vbkps-cta" href="' + st.href + '">Рассчитать проект в этом стиле<\/a>' +
        '<button type="button" class="vbkps-again">Пройти заново<\/button><\/div><\/div>';
      var again = stage.querySelector('.vbkps-again');
      if (again) again.onclick = function () { reset(); drawStep(); };
    }

    back.onclick = function () {
      if (idx > 0 && idx >= STEPS.length) { idx = STEPS.length - 1; }
      else if (idx > 0) { idx--; }
      else { return; }
      var p = trail.pop();
      if (p) { for (var key in p) { if (p.hasOwnProperty(key)) score[key] -= p[key]; } }
      drawStep();
    };

    reset();
    drawStep();
  }
})();
</script>

Вставляется целиком в блок T123 «HTML-код». Внутри уже есть стили и скрипт, подключать ничего не нужно.