Квиз по профориентации для онлайн-школы

<section class="vbkpf">
  <div class="vbkpf-wrap">
    <div class="vbkpf-box">
      <div class="vbkpf-head">
        <h2 class="vbkpf-h2" id="vbkpf-title">Куда вам идти в цифре</h2>
        <p class="vbkpf-lead" id="vbkpf-sub">Пять вопросов о том, как вы думаете и что вам нравится делать. В конце — направление и программа под него.</p>
      </div>

      <div class="vbkpf-progress"><i id="vbkpf-fill"></i></div>
      <div class="vbkpf-stage" id="vbkpf-stage" aria-live="polite"></div>
      <div class="vbkpf-foot">
        <button type="button" class="vbkpf-back" id="vbkpf-back" hidden>Назад</button>
        <span class="vbkpf-num" id="vbkpf-num"></span>
      </div>
    </div>
  </div>
</section>

<style>
.vbkpf, .vbkpf *, .vbkpf *::before, .vbkpf *::after { box-sizing: border-box; }
.vbkpf {
  --acc: #4b56d2; --acc-dark: #3d47b5; --ink: #191b2e; --muted: #5f6280; --line: #e3e4ef; --soft: #f4f4fb;
  --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(36px, 5vw, 80px) 20px;
}
.vbkpf-wrap { max-width: 860px; margin: 0 auto; padding: 0 clamp(0px, 2vw, 40px); }
.vbkpf-box { background: var(--soft); border-radius: 28px; padding: clamp(24px, 3.2vw, 44px); }
.vbkpf-head { margin-bottom: 24px; }
.vbkpf-h2 { font-family: var(--fh); font-size: clamp(24px, 3vw, 36px); line-height: 1.12; font-weight: 700; letter-spacing: -.02em; margin: 0 0 10px; }
.vbkpf-lead { font-size: 16px; line-height: 1.6; color: var(--muted); margin: 0; }
.vbkpf-progress { height: 4px; border-radius: 4px; background: #e0e1ee; overflow: hidden; margin-bottom: 26px; }
.vbkpf-progress i { display: block; height: 100%; width: 0; border-radius: 4px; background: var(--acc); transition: width .35s cubic-bezier(.22,1,.36,1); }

.vbkpf-q { font-family: var(--fh); font-size: clamp(19px, 2vw, 24px); line-height: 1.3; font-weight: 600; margin: 0 0 18px; }
.vbkpf-opts { display: grid; gap: 9px; }
.vbkpf-opt { display: flex; align-items: center; gap: 14px; width: 100%; border: 1.5px solid var(--line); margin: 0;
  -webkit-appearance: none; appearance: none; font: inherit; cursor: pointer; text-align: left;
  background: #fff !important; color: var(--ink) !important; border-radius: 14px; padding: 16px 18px; transition: .18s ease; }
.vbkpf-opt:hover { border-color: var(--acc); }
.vbkpf-opt__k { flex: 0 0 28px; width: 28px; height: 28px; display: flex; align-items: center; justify-content: center;
  border-radius: 8px; background: var(--soft); font-size: 13px; font-weight: 600; color: var(--muted); }
.vbkpf-opt:hover .vbkpf-opt__k { background: var(--acc); color: #fff; }
.vbkpf-opt__t { font-size: 15.5px; line-height: 1.45; }

.vbkpf-foot { display: flex; align-items: center; gap: 16px; margin-top: 22px; }
.vbkpf-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; }
.vbkpf-back:hover { color: var(--acc) !important; }
.vbkpf-num { margin-left: auto; font-size: 13px; color: var(--muted); }

.vbkpf-res__tag { display: inline-block; font-size: 12px; font-weight: 600; color: var(--acc); background: #fff; border-radius: 999px; padding: 6px 14px; margin-bottom: 14px; }
.vbkpf-res__ttl { font-family: var(--fh); font-size: clamp(23px, 2.8vw, 32px); line-height: 1.15; font-weight: 700; margin: 0 0 12px; }
.vbkpf-res__txt { font-size: 16px; line-height: 1.65; color: var(--muted); margin: 0 0 20px; }
.vbkpf-res__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin-bottom: 22px; }
.vbkpf-res__grid div { background: #fff; border-radius: 14px; padding: 16px 18px; }
.vbkpf-res__grid b { display: block; font-family: var(--fh); font-size: 20px; font-weight: 700; }
.vbkpf-res__grid span { display: block; font-size: 12.5px; color: var(--muted); margin-top: 4px; }
.vbkpf-acts { display: flex; flex-wrap: wrap; gap: 10px; }
.vbkpf-cta, .vbkpf-cta:link, .vbkpf-cta:visited, .vbkpf-cta:active, .vbkpf-cta:focus { display: inline-flex; align-items: center; justify-content: center;
  min-height: 54px; padding: 0 28px; border-radius: 12px; font-size: 16px; font-weight: 600;
  background: var(--acc); color: #fff !important; text-decoration: none !important; }
.vbkpf-cta:hover { background: var(--acc-dark); color: #fff !important; }
.vbkpf-again { min-height: 54px; padding: 0 24px; border: 1.5px solid var(--line); margin: 0; -webkit-appearance: none; appearance: none;
  font: inherit; font-size: 16px; cursor: pointer; border-radius: 12px; background: #fff !important; color: var(--ink) !important; }
.vbkpf-again:hover { border-color: var(--acc); }

@media (prefers-reduced-motion: reduce) { .vbkpf * { transition: none !important; } }
</style>

<script>
(function () {
  /* ── ВОПРОСЫ: p — очки направлениям ── */
  var QUESTIONS = [
    { q: 'Что вам ближе в работе с задачей?', opts: [
      { t: 'Разобрать по цифрам и найти закономерность', p: { data: 2, dev: 0, design: 0 } },
      { t: 'Собрать работающий механизм своими руками', p: { data: 0, dev: 2, design: 0 } },
      { t: 'Придумать, как это должно выглядеть и ощущаться', p: { data: 0, dev: 0, design: 2 } }
    ]},
    { q: 'Как вы относитесь к таблицам?', opts: [
      { t: 'Люблю, в них всё видно', p: { data: 2, dev: 1, design: 0 } },
      { t: 'Терплю, если нужно для дела', p: { data: 1, dev: 1, design: 1 } },
      { t: 'Избегаю, мне ближе картинки', p: { data: 0, dev: 0, design: 2 } }
    ]},
    { q: 'Что вас раздражает сильнее всего?', opts: [
      { t: 'Решения на глазок, без данных', p: { data: 2, dev: 1, design: 0 } },
      { t: 'Кривой интерфейс, в котором ничего не найти', p: { data: 0, dev: 1, design: 2 } },
      { t: 'Ручная работа, которую можно автоматизировать', p: { data: 1, dev: 2, design: 0 } }
    ]},
    { q: 'Как вы учитесь новому?', opts: [
      { t: 'Читаю документацию и пробую по шагам', p: { data: 1, dev: 2, design: 0 } },
      { t: 'Смотрю чужие примеры и повторяю', p: { data: 0, dev: 1, design: 2 } },
      { t: 'Иду от задачи: беру реальную и решаю', p: { data: 2, dev: 1, design: 1 } }
    ]},
    { q: 'Каким видите свой рабочий день?', opts: [
      { t: 'Гипотезы, выгрузки, отчёты и выводы', p: { data: 2, dev: 0, design: 0 } },
      { t: 'Код, ревью, разбор багов', p: { data: 0, dev: 2, design: 0 } },
      { t: 'Макеты, интервью с пользователями, правки', p: { data: 0, dev: 0, design: 2 } }
    ]}
  ];

  /* ── НАПРАВЛЕНИЯ ── */
  var PATHS = {
    data: { ttl: 'Аналитик данных', href: '#kurs-analitik',
      txt: 'Вам нравится доказывать, а не убеждать. Аналитик — та роль, где решение принимается на цифрах, и вы приносите эти цифры. Порог входа ниже, чем у разработки, а спрос стабильный: аналитик нужен и продукту, и маркетингу, и финансам.',
      facts: [['8 месяцев', 'длительность'], ['от 90 000 ₽', 'зарплата джуна'], ['SQL, Python', 'основной стек']] },
    dev: { ttl: 'Backend-разработчик', href: '#kurs-backend',
      txt: 'Вам важно, чтобы работало, а не выглядело. Backend — про логику, устойчивость и понятную обратную связь: код либо проходит тесты, либо нет. Здесь дольше учиться, но и потолок выше.',
      facts: [['12 месяцев', 'длительность'], ['от 110 000 ₽', 'зарплата джуна'], ['Python, SQL', 'основной стек']] },
    design: { ttl: 'Продуктовый дизайнер', href: '#kurs-design',
      txt: 'Вы замечаете, что удобно, а что нет, раньше остальных. Продуктовый дизайн — не про красоту, а про то, чтобы человек дошёл до цели. Хорошая точка входа, если вы не хотите писать код, но хотите влиять на продукт.',
      facts: [['9 месяцев', 'длительность'], ['от 85 000 ₽', 'зарплата джуна'], ['Figma, CJM', 'основной стек']] }
  };

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

  function init(root) {
    if (root.__vb) return; root.__vb = 1;
    var idx = 0, score = { data: 0, dev: 0, design: 0 }, trail = [];
    var stage = root.querySelector('#vbkpf-stage'), fill = root.querySelector('#vbkpf-fill');
    var back = root.querySelector('#vbkpf-back'), num = root.querySelector('#vbkpf-num');
    var KEYS = ['A', 'B', 'C', 'D'];

    function drawStep() {
      var s = QUESTIONS[idx];
      fill.style.width = (idx / QUESTIONS.length * 100) + '%';
      num.textContent = 'Вопрос ' + (idx + 1) + ' из ' + QUESTIONS.length;
      back.hidden = idx === 0;
      stage.innerHTML = '<h3 class="vbkpf-q">' + s.q + '<\/h3><div class="vbkpf-opts">' +
        s.opts.map(function (o, i) {
          return '<button type="button" class="vbkpf-opt" data-i="' + i + '">' +
            '<span class="vbkpf-opt__k">' + KEYS[i] + '<\/span><span class="vbkpf-opt__t">' + o.t + '<\/span><\/button>';
        }).join('') + '<\/div>';
      stage.querySelectorAll('.vbkpf-opt').forEach(function (b) {
        b.addEventListener('click', function () {
          var o = s.opts[+b.dataset.i];
          trail.push(o.p);
          Object.keys(o.p).forEach(function (k) { score[k] += o.p[k]; });
          idx++;
          if (idx < QUESTIONS.length) drawStep(); else drawResult();
        });
      });
    }

    function drawResult() {
      fill.style.width = '100%';
      num.textContent = 'Результат';
      back.hidden = false;
      var win = Object.keys(score).sort(function (a, b) { return score[b] - score[a]; })[0];
      var p = PATHS[win];
      stage.innerHTML = '<div class="vbkpf-res"><span class="vbkpf-res__tag">Вам подходит<\/span>' +
        '<h3 class="vbkpf-res__ttl">' + p.ttl + '<\/h3>' +
        '<p class="vbkpf-res__txt">' + p.txt + '<\/p>' +
        '<div class="vbkpf-res__grid">' + p.facts.map(function (f) {
          return '<div><b>' + f[0] + '<\/b><span>' + f[1] + '<\/span><\/div>';
        }).join('') + '<\/div>' +
        '<div class="vbkpf-acts"><a class="vbkpf-cta" href="' + p.href + '">Смотреть программу<\/a>' +
        '<button type="button" class="vbkpf-again">Пройти заново<\/button><\/div><\/div>';
      var again = stage.querySelector('.vbkpf-again');
      if (again) again.addEventListener('click', function () {
        idx = 0; score = { data: 0, dev: 0, design: 0 }; trail = []; drawStep();
      });
    }

    back.addEventListener('click', function () {
      if (idx === 0) return;
      idx--;
      var p = trail.pop();
      if (p) Object.keys(p).forEach(function (k) { score[k] -= p[k]; });
      drawStep();
    });

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

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