<section class="vb-q1z" data-vibeblock-unique-section="yes" data-section-name="Квиз подбора курса" aria-labelledby="vb-q1z-heading" style="padding-top: 150px; padding-bottom: 105px;">
<style>
.vb-q1z,
.vb-q1z * { box-sizing: border-box; }
.vb-q1z input,
.vb-q1z textarea,
.vb-q1z select { font: inherit; }
.vb-q1z {
position: relative;
font-family: var(--t-text-font);
color: #000;
background: #dceeb1;
overflow: hidden;
padding: 96px 24px;
}
/* Сдержанные языковые маркеры образуют единую диагональную композицию вокруг карточки. */
.vb-q1z__decor {
position: absolute;
display: grid;
place-items: center;
font-family: var(--t-headline-font);
font-weight: 540;
line-height: 1;
color: #000;
opacity: 1;
user-select: none;
pointer-events: none;
z-index: 1;
border: 1px solid #000;
}
.vb-q1z__decor--a {
top: 8%;
left: 8%;
width: clamp(56px, 6vw, 82px);
aspect-ratio: 1;
font-size: clamp(30px, 3.6vw, 46px);
color: #000;
background: #f08b5b;
border-radius: 8px;
transform: rotate(-8deg);
animation: vb-q1z-float-a 7s ease-in-out infinite;
}
.vb-q1z__decor--b {
top: 13%;
right: 9%;
width: clamp(58px, 6vw, 84px);
aspect-ratio: 1;
font-size: clamp(28px, 3.3vw, 42px);
color: #000;
background: #9abb43;
border-radius: 50%;
transform: rotate(7deg);
animation: vb-q1z-float-b 8s ease-in-out infinite;
}
.vb-q1z__decor--en {
bottom: 10%;
left: 10%;
min-width: 94px;
min-height: 58px;
padding: 12px 18px;
font-size: clamp(21px, 2.5vw, 30px);
color: #000;
background: #83b83c;
border-radius: 8px;
transform: rotate(5deg);
animation: vb-q1z-float-c 7.5s ease-in-out infinite;
}
.vb-q1z__decor--abc {
right: 8%;
bottom: 9%;
width: clamp(84px, 9vw, 116px);
aspect-ratio: 1.35;
font-size: clamp(22px, 2.7vw, 32px);
color: #000;
background: #e0b83f;
border-radius: 8px;
transform: rotate(-5deg);
animation: vb-q1z-float-d 8.5s ease-in-out infinite;
}
.vb-q1z__decor--hi {
top: 48%;
left: 2.5%;
min-width: 82px;
min-height: 52px;
padding: 10px 18px;
font-size: clamp(20px, 2.2vw, 28px);
color: #fff;
background: #000;
border: 0;
border-radius: 50px;
transform: rotate(-5deg);
animation: vb-q1z-float-e 7.5s ease-in-out infinite;
}
@keyframes vb-q1z-float-a {
0%, 100% { transform: rotate(-8deg) translateY(0); }
50% { transform: rotate(-6deg) translateY(-7px); }
}
@keyframes vb-q1z-float-b {
0%, 100% { transform: rotate(7deg) translateY(0); }
50% { transform: rotate(5deg) translateY(-8px); }
}
@keyframes vb-q1z-float-c {
0%, 100% { transform: rotate(5deg) translateY(0); }
50% { transform: rotate(3deg) translateY(-6px); }
}
@keyframes vb-q1z-float-d {
0%, 100% { transform: rotate(-5deg) translateY(0); }
50% { transform: rotate(-3deg) translateY(-7px); }
}
@keyframes vb-q1z-float-e {
0%, 100% { transform: rotate(-5deg) translateY(0); }
50% { transform: rotate(-3deg) translateY(-6px); }
}
@media (prefers-reduced-motion: reduce) {
.vb-q1z__decor { animation: none; }
}
.vb-q1z__wrap {
position: relative;
z-index: 2;
max-width: 860px;
margin: 0 auto;
}
.vb-q1z__card {
background: #ffffff;
border-radius: 24px;
padding: 56px 64px;
box-shadow: 0 4px 24px rgba(0,0,0,0.06);
}
.vb-q1z__title {
font-family: var(--t-headline-font);
font-size: clamp(36px, 5vw, 64px);
font-weight: 340;
line-height: 1.10;
letter-spacing: -0.96px;
text-wrap: balance;
color: #000;
margin: 0 0 8px;
}
.vb-q1z__title-accent {
font-weight: 540;
}
.vb-q1z__intro {
font-family: var(--t-text-font);
font-size: clamp(16px, 1.6vw, 20px);
font-weight: 330;
line-height: 1.40;
color: #000;
margin: 0 0 40px;
text-wrap: pretty;
max-width: 55ch;
}
.vb-q1z__progress {
margin-bottom: 36px;
}
.vb-q1z__progress-track {
height: 6px;
background: #f1f1f1;
border-radius: 50px;
overflow: hidden;
}
.vb-q1z__progress-fill {
height: 100%;
background: #000;
border-radius: 50px;
transition: width 0.5s cubic-bezier(0.25, 1, 0.5, 1);
}
.vb-q1z__progress-label {
display: block;
font-family: 'JetBrains Mono', 'SF Mono', menlo, monospace;
font-size: 12px;
font-weight: 400;
line-height: 1.0;
letter-spacing: 0.60px;
text-transform: uppercase;
margin-top: 12px;
color: #000;
}
.vb-q1z__viewport {
position: relative;
min-height: 240px;
}
.vb-q1z__slide {
border: none;
margin: 0;
padding: 0;
}
.vb-q1z__slide[hidden] {
display: none;
}
@keyframes vb-q1z-fade-in {
from { opacity: 0; transform: translateY(10px); }
to { opacity: 1; transform: translateY(0); }
}
.vb-q1z__slide:not([hidden]) {
animation: vb-q1z-fade-in 0.35s cubic-bezier(0.25, 1, 0.5, 1) both;
}
@media (prefers-reduced-motion: reduce) {
.vb-q1z__slide:not([hidden]) { animation: none; }
.vb-q1z__progress-fill { transition: none; }
}
.vb-q1z__question {
font-family: var(--t-headline-font);
font-size: clamp(22px, 2.4vw, 26px);
font-weight: 540;
line-height: 1.35;
letter-spacing: -0.26px;
color: #000;
margin: 0 0 24px;
text-wrap: balance;
}
.vb-q1z__options {
display: flex;
flex-direction: column;
gap: 12px;
}
.vb-q1z__option {
display: flex;
align-items: flex-start;
gap: 14px;
padding: 18px 22px;
border: 1px solid #e6e6e6;
border-radius: 8px;
cursor: pointer;
background: #fff;
transition: background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease, transform 0.18s ease;
}
.vb-q1z__option:hover {
background: #f7f7f5;
transform: translateY(-1px);
}
.vb-q1z__option--checked {
background: #000 !important;
border-color: #000 !important;
color: #fff !important;
transform: translateY(-1px);
}
.vb-q1z__radio {
position: absolute;
opacity: 0;
width: 1px;
height: 1px;
}
.vb-q1z__radio-fake {
width: 22px;
height: 22px;
border: 2px solid #e6e6e6;
border-radius: 50%;
flex-shrink: 0;
margin-top: 2px;
display: flex;
align-items: center;
justify-content: center;
transition: border-color 0.2s ease, background-color 0.2s ease;
}
.vb-q1z__option:hover .vb-q1z__radio-fake {
border-color: #000;
}
.vb-q1z__radio-fake::after {
content: '';
width: 10px;
height: 10px;
border-radius: 50%;
background: #fff;
transform: scale(0);
transition: transform 0.25s cubic-bezier(0.25, 1, 0.5, 1);
}
.vb-q1z__option--checked .vb-q1z__radio-fake {
border-color: #fff;
background: transparent;
}
.vb-q1z__option--checked .vb-q1z__radio-fake::after {
transform: scale(1);
background: #fff;
}
.vb-q1z__option-text {
font-family: var(--t-text-font);
font-size: clamp(15px, 1.4vw, 18px);
font-weight: 330;
line-height: 1.45;
letter-spacing: -0.14px;
flex: 1 1 auto;
}
.vb-q1z__nav {
display: flex;
gap: 12px;
margin-top: 36px;
}
.vb-q1z__btn {
flex: 1 1 auto;
min-height: 52px;
border-radius: 50px;
font-family: var(--t-text-font);
font-size: clamp(16px, 1.4vw, 20px);
font-weight: 480;
line-height: 1.40;
letter-spacing: -0.10px;
cursor: pointer;
padding: 10px 28px;
display: inline-flex;
align-items: center;
justify-content: center;
border: none;
transition: opacity 0.18s ease, transform 0.12s ease, background-color 0.18s ease;
}
.vb-q1z__btn:active {
transform: translateY(1px);
}
.vb-q1z__btn--next {
background: #000;
color: #fff;
}
.vb-q1z__btn--next:disabled {
opacity: 0.3;
cursor: not-allowed;
}
.vb-q1z__btn--back {
background: #f7f7f5;
color: #000;
}
.vb-q1z__btn--back:disabled {
opacity: 0.35;
cursor: not-allowed;
}
.vb-q1z__btn--submit {
background: #000;
color: #fff;
width: 100%;
margin-top: 8px;
}
.vb-q1z__result-heading {
font-family: var(--t-headline-font);
font-size: clamp(20px, 2vw, 26px);
font-weight: 540;
line-height: 1.35;
letter-spacing: -0.26px;
color: #000;
margin: 0 0 8px;
text-wrap: balance;
}
.vb-q1z__result-name {
font-family: var(--t-headline-font);
font-size: clamp(20px, 2.2vw, 24px);
font-weight: 700;
line-height: 1.45;
color: #000;
margin: 0 0 12px;
text-wrap: balance;
}
.vb-q1z__result-desc {
font-family: var(--t-text-font);
font-size: 18px;
font-weight: 320;
line-height: 1.45;
color: #000;
margin: 0 0 12px;
text-wrap: pretty;
}
.vb-q1z__result-reason {
font-family: var(--t-text-font);
font-size: 16px;
font-weight: 330;
line-height: 1.45;
color: #000;
margin: 0 0 36px;
text-wrap: pretty;
}
.vb-q1z__form {
font-family: var(--t-text-font);
}
.vb-q1z__form input,
.vb-q1z__form textarea,
.vb-q1z__form select { font: inherit; }
.vb-q1z__input-group {
margin-bottom: 20px;
}
.vb-q1z__label {
display: block;
font-family: 'JetBrains Mono', 'SF Mono', menlo, monospace;
font-size: 12px;
font-weight: 400;
line-height: 1.0;
letter-spacing: 0.60px;
text-transform: uppercase;
color: #000;
margin-bottom: 10px;
}
.vb-q1z__input {
width: 100%;
padding: 14px;
font-family: var(--t-text-font);
font-size: 18px;
font-weight: 320;
line-height: 1.45;
color: #000;
background: #fff;
border: 1px solid #e6e6e6;
border-radius: 8px;
outline: none;
transition: box-shadow 0.18s ease, border-color 0.18s ease;
}
.vb-q1z__input::placeholder {
color: #000;
opacity: 0.45;
}
.vb-q1z__input:focus {
border-color: #000;
box-shadow: 0 0 0 3px rgba(0,0,0,0.08);
}
.vb-q1z__input-group--error .vb-q1z__input {
border-color: #c41e3a;
}
.vb-q1z__input-group--error .t-input-error {
display: block;
font-family: var(--t-text-font);
font-size: 14px;
font-weight: 330;
line-height: 1.45;
color: #c41e3a;
margin-top: 8px;
}
.vb-q1z__notice {
background: #f7f7f5;
border: 1px solid #e6e6e6;
border-radius: 8px;
padding: 28px;
text-align: center;
font-family: var(--t-text-font);
font-size: 16px;
line-height: 1.45;
color: #000;
}
/* Responsive */
@media (max-width: 1199px) {
.vb-q1z__card { padding: 48px; }
}
@media (max-width: 959px) {
.vb-q1z { padding: 64px 24px; }
.vb-q1z__card { padding: 40px; border-radius: 24px; }
.vb-q1z__decor { display: none; }
}
@media (max-width: 767px) {
.vb-q1z { padding: 48px 0; }
.vb-q1z__card { border-radius: 0; margin: 0; padding: 36px 24px; box-shadow: none; }
.vb-q1z__wrap { max-width: 100%; }
}
@media (max-width: 639px) {
.vb-q1z__nav { flex-direction: column-reverse; }
.vb-q1z__btn { width: 100%; }
.vb-q1z__option { padding: 16px 18px; }
.vb-q1z__question { margin-bottom: 18px; }
}
@media (max-width: 479px) {
.vb-q1z__title { font-size: 34px; letter-spacing: -0.5px; }
.vb-q1z__question { font-size: 20px; }
.vb-q1z__result-heading { font-size: 20px; }
.vb-q1z__result-name { font-size: 20px; }
}
</style>
<!-- Decorative floating elements -->
<div class="vb-q1z__decor vb-q1z__decor--a" aria-hidden="true">A</div>
<div class="vb-q1z__decor vb-q1z__decor--b" aria-hidden="true">B</div>
<div class="vb-q1z__decor vb-q1z__decor--en" aria-hidden="true">EN</div>
<div class="vb-q1z__decor vb-q1z__decor--abc" aria-hidden="true">abc</div>
<div class="vb-q1z__decor vb-q1z__decor--hi" aria-hidden="true">Hi!</div>
<div class="vb-q1z__wrap">
<div class="vb-q1z__card">
<h2 id="vb-q1z-heading" class="vb-q1z__title">Подберём курс <span class="vb-q1z__title-accent">английского для вас</span></h2>
<p class="vb-q1z__intro">Ответьте на 5 коротких вопросов — и мы порекомендуем формат обучения, который подойдёт именно вам.</p>
<div class="vb-q1z__progress" role="progressbar" aria-valuemin="1" aria-valuemax="5" aria-valuenow="1" aria-label="Прогресс прохождения квиза">
<div class="vb-q1z__progress-track">
<div class="vb-q1z__progress-fill" style="width: 20%"></div>
</div>
<span class="vb-q1z__progress-label">Шаг 1 из 5</span>
</div>
<div class="vb-q1z__viewport" aria-live="polite">
<fieldset class="vb-q1z__slide" data-step="1">
<legend class="vb-q1z__question">Как вы оцениваете свой английский?</legend>
<div class="vb-q1z__options">
<label class="vb-q1z__option">
<input type="radio" name="q1" value="words" class="vb-q1z__radio">
<span class="vb-q1z__radio-fake" aria-hidden="true"></span>
<span class="vb-q1z__option-text">Я знаю только отдельные слова</span>
</label>
<label class="vb-q1z__option">
<input type="radio" name="q1" value="phrases" class="vb-q1z__radio">
<span class="vb-q1z__radio-fake" aria-hidden="true"></span>
<span class="vb-q1z__option-text">Понимаю простые фразы, но говорить сложно</span>
</label>
<label class="vb-q1z__option">
<input type="radio" name="q1" value="dialogue" class="vb-q1z__radio">
<span class="vb-q1z__radio-fake" aria-hidden="true"></span>
<span class="vb-q1z__option-text">Могу поддерживать разговор на знакомые темы</span>
</label>
<label class="vb-q1z__option">
<input type="radio" name="q1" value="confident" class="vb-q1z__radio">
<span class="vb-q1z__radio-fake" aria-hidden="true"></span>
<span class="vb-q1z__option-text">Уверенно общаюсь и хочу улучшить конкретные навыки</span>
</label>
</div>
</fieldset>
<fieldset class="vb-q1z__slide" data-step="2" hidden="">
<legend class="vb-q1z__question">Для чего вам английский?</legend>
<div class="vb-q1z__options">
<label class="vb-q1z__option">
<input type="radio" name="q2" value="travel" class="vb-q1z__radio">
<span class="vb-q1z__radio-fake" aria-hidden="true"></span>
<span class="vb-q1z__option-text">Для путешествий и повседневного общения</span>
</label>
<label class="vb-q1z__option">
<input type="radio" name="q2" value="work" class="vb-q1z__radio">
<span class="vb-q1z__radio-fake" aria-hidden="true"></span>
<span class="vb-q1z__option-text">Для работы</span>
</label>
<label class="vb-q1z__option">
<input type="radio" name="q2" value="relocation" class="vb-q1z__radio">
<span class="vb-q1z__radio-fake" aria-hidden="true"></span>
<span class="vb-q1z__option-text">Для переезда</span>
</label>
<label class="vb-q1z__option">
<input type="radio" name="q2" value="exam" class="vb-q1z__radio">
<span class="vb-q1z__radio-fake" aria-hidden="true"></span>
<span class="vb-q1z__option-text">Для экзамена</span>
</label>
</div>
</fieldset>
<fieldset class="vb-q1z__slide" data-step="3" hidden="">
<legend class="vb-q1z__question">Какой формат вам ближе?</legend>
<div class="vb-q1z__options">
<label class="vb-q1z__option">
<input type="radio" name="q3" value="group" class="vb-q1z__radio">
<span class="vb-q1z__radio-fake" aria-hidden="true"></span>
<span class="vb-q1z__option-text">Заниматься в небольшой группе</span>
</label>
<label class="vb-q1z__option">
<input type="radio" name="q3" value="individual" class="vb-q1z__radio">
<span class="vb-q1z__radio-fake" aria-hidden="true"></span>
<span class="vb-q1z__option-text">Заниматься индивидуально с преподавателем</span>
</label>
<label class="vb-q1z__option">
<input type="radio" name="q3" value="intensive" class="vb-q1z__radio">
<span class="vb-q1z__radio-fake" aria-hidden="true"></span>
<span class="vb-q1z__option-text">Хочу интенсивный формат с частыми занятиями</span>
</label>
</div>
</fieldset>
<fieldset class="vb-q1z__slide" data-step="4" hidden="">
<legend class="vb-q1z__question">Сколько времени вы готовы уделять занятиям?</legend>
<div class="vb-q1z__options">
<label class="vb-q1z__option">
<input type="radio" name="q4" value="1-2" class="vb-q1z__radio">
<span class="vb-q1z__radio-fake" aria-hidden="true"></span>
<span class="vb-q1z__option-text">1–2 часа в неделю</span>
</label>
<label class="vb-q1z__option">
<input type="radio" name="q4" value="3-4" class="vb-q1z__radio">
<span class="vb-q1z__radio-fake" aria-hidden="true"></span>
<span class="vb-q1z__option-text">3–4 часа в неделю</span>
</label>
<label class="vb-q1z__option">
<input type="radio" name="q4" value="5plus" class="vb-q1z__radio">
<span class="vb-q1z__radio-fake" aria-hidden="true"></span>
<span class="vb-q1z__option-text">5 часов и больше</span>
</label>
</div>
</fieldset>
<fieldset class="vb-q1z__slide" data-step="5" hidden="">
<legend class="vb-q1z__question">Когда хотелось бы заметить прогресс?</legend>
<div class="vb-q1z__options">
<label class="vb-q1z__option">
<input type="radio" name="q5" value="comfort" class="vb-q1z__radio">
<span class="vb-q1z__radio-fake" aria-hidden="true"></span>
<span class="vb-q1z__option-text">Без спешки, в комфортном темпе</span>
</label>
<label class="vb-q1z__option">
<input type="radio" name="q5" value="3-6" class="vb-q1z__radio">
<span class="vb-q1z__radio-fake" aria-hidden="true"></span>
<span class="vb-q1z__option-text">В течение 3–6 месяцев</span>
</label>
<label class="vb-q1z__option">
<input type="radio" name="q5" value="fast" class="vb-q1z__radio">
<span class="vb-q1z__radio-fake" aria-hidden="true"></span>
<span class="vb-q1z__option-text">Как можно скорее</span>
</label>
</div>
</fieldset>
<div class="vb-q1z__slide vb-q1z__slide--result" hidden="">
<h3 class="vb-q1z__result-heading">Рекомендуемый формат</h3>
<p class="vb-q1z__result-name" id="vb-q1z-result-name"></p>
<p class="vb-q1z__result-desc" id="vb-q1z-result-desc"></p>
<p class="vb-q1z__result-reason" id="vb-q1z-result-reason"></p>
<form id="vb-q1z-form" name="vb-q1z-form" class="vb-q1z__form t-form js-form-proccess" role="form" action="#" method="POST" data-vibeblock-form="true" data-inputbox=".vb-q1z__input-group" novalidate="">
<input type="hidden" name="quiz_answers" id="vb-q1z-answers-hidden" value="">
<div class="vb-q1z__input-group">
<label class="vb-q1z__label" for="vb-q1z-name">Имя</label>
<input type="text" id="vb-q1z-name" name="Name" class="js-tilda-rule vb-q1z__input" data-tilda-req="1" placeholder="Как к вам обращаться?">
<div class="t-input-error"></div>
</div>
<div class="vb-q1z__input-group">
<label class="vb-q1z__label" for="vb-q1z-contact">Телефон или электронная почта</label>
<input type="text" id="vb-q1z-contact" name="Contact" class="js-tilda-rule vb-q1z__input" data-tilda-req="1" placeholder="+7 (999) 000-00-00 или email@example.com">
<div class="t-input-error"></div>
</div>
<button type="submit" class="t-btnflex t-btnflex_md vb-q1z__btn vb-q1z__btn--submit">
<span class="t-btnflex__text">Получить консультацию</span>
</button>
</form>
</div>
</div>
<div class="vb-q1z__nav">
<button type="button" class="t-btnflex t-btnflex_md vb-q1z__btn vb-q1z__btn--back" disabled="">
<span class="t-btnflex__text">Назад</span>
</button>
<button type="button" class="t-btnflex t-btnflex_md vb-q1z__btn vb-q1z__btn--next" disabled="">
<span class="t-btnflex__text">Далее</span>
</button>
</div>
</div>
</div>
<script>
(function() {
'use strict';
var section = document.querySelector('.vb-q1z');
if (!section) return;
var slides = section.querySelectorAll('.vb-q1z__slide[data-step]');
var resultSlide = section.querySelector('.vb-q1z__slide--result');
var progressFill = section.querySelector('.vb-q1z__progress-fill');
var progressLabel = section.querySelector('.vb-q1z__progress-label');
var btnNext = section.querySelector('.vb-q1z__btn--next');
var btnBack = section.querySelector('.vb-q1z__btn--back');
var nav = section.querySelector('.vb-q1z__nav');
var progressWrap = section.querySelector('.vb-q1z__progress');
var form = section.querySelector('#vb-q1z-form');
var submitBtn = form ? form.querySelector('[type="submit"]') : null;
var contactInput = form ? form.querySelector('#vb-q1z-contact') : null;
var answersHidden = form ? form.querySelector('#vb-q1z-answers-hidden') : null;
var currentStep = 1;
var totalSteps = 5;
var answers = {};
function updateView() {
slides.forEach(function(s) { s.hidden = true; });
if (resultSlide) resultSlide.hidden = true;
if (currentStep <= totalSteps) {
var active = section.querySelector('.vb-q1z__slide[data-step="' + currentStep + '"]');
if (active) active.hidden = false;
progressFill.style.width = Math.round((currentStep / totalSteps) * 100) + '%';
progressLabel.textContent = 'Шаг ' + currentStep + ' из ' + totalSteps;
progressWrap.setAttribute('aria-valuenow', String(currentStep));
nav.hidden = false;
if (progressWrap) progressWrap.hidden = false;
} else {
showResult();
nav.hidden = true;
if (progressWrap) progressWrap.hidden = true;
}
updateNav();
}
function updateNav() {
btnNext.disabled = !answers[currentStep];
btnBack.disabled = currentStep === 1;
}
function goToStep(step) {
currentStep = Math.max(1, Math.min(step, totalSteps + 1));
updateView();
var activeSlide = section.querySelector('.vb-q1z__slide:not([hidden])');
if (activeSlide) {
var target = activeSlide.querySelector('.vb-q1z__question, legend');
if (target) target.focus();
}
}
function highlightOption(radio) {
var opts = radio.closest('.vb-q1z__options').querySelectorAll('.vb-q1z__option');
opts.forEach(function(opt) { opt.classList.remove('vb-q1z__option--checked'); });
radio.closest('.vb-q1z__option').classList.add('vb-q1z__option--checked');
}
function getRecommendation() {
var a1 = answers[1];
var a2 = answers[2];
var a3 = answers[3];
var a4 = answers[4];
var a5 = answers[5];
if (a2 === 'exam') {
return {
title: 'Индивидуальные занятия',
desc: 'Для подготовки к экзамену важна персональная стратегия и разбор ваших слабых мест. На консультации уточним цель и составим план подготовки.',
reason: 'Вы выбрали подготовку к экзамену — этот формат даёт максимальную гибкость и фокус на результат.'
};
}
if ((a2 === 'work' || a2 === 'relocation') && a5 === 'fast') {
if (a3 === 'intensive') {
return {
title: 'Интенсивная программа',
desc: 'Интенсив с частыми занятиями поможет быстро выйти на рабочий уровень или подготовиться к переезду.',
reason: 'Вашей цели и срокам соответствует формат с ускоренным темпом обучения.'
};
}
return {
title: 'Индивидуальные занятия',
desc: 'Персональный график и программа под ваши задачи в работе или переезде.',
reason: 'При сжатых сроках индивидуальный формат эффективнее группового.'
};
}
if (a3 === 'intensive' && a4 === '5plus') {
return {
title: 'Интенсивная программа',
desc: 'Вы готовы заниматься много и часто — наш интенсив разработан для такого режима.',
reason: 'Сочетание интенсивного формата и высокой загруженности гарантирует быстрый прогресс.'
};
}
if (a3 === 'group' && a4 === '3-4') {
return {
title: 'Регулярная группа',
desc: 'Групповые занятия 3–4 часа в неделю — комфортный ритм для стабильного прогресса.',
reason: 'Регулярная группа с умеренной нагрузкой лучше всего подходит под ваш график.'
};
}
if ((a1 === 'words' || a1 === 'phrases') && a2 === 'travel') {
return {
title: 'Базовый групповой курс «Start»',
desc: 'Начните с основ в дружеской атмосфере группы. Фокус — на живое общение в путешествиях и быту.',
reason: 'Базовый уровень и цель «для себя» лучше всего закрывают групповые курсы.'
};
}
return {
title: 'Консультация по подбору группы',
desc: 'По вашим ответам сложно выбрать один формат. Свяжемся с вами и подберём группу или индивидуальный курс под ваши цели.',
reason: 'Расскажите детали — мы предложим оптимальный вариант.'
};
}
function showResult() {
var rec = getRecommendation();
section.querySelector('#vb-q1z-result-name').textContent = rec.title;
section.querySelector('#vb-q1z-result-desc').textContent = rec.desc;
section.querySelector('#vb-q1z-result-reason').textContent = rec.reason;
if (resultSlide) resultSlide.hidden = false;
if (answersHidden) {
var lines = [];
for (var i = 1; i <= totalSteps; i++) {
var radio = section.querySelector('input[name="q' + i + '"][value="' + answers[i] + '"]');
var text = radio ? radio.nextElementSibling.nextElementSibling.textContent.trim() : answers[i];
lines.push('Шаг ' + i + ': ' + text);
}
answersHidden.value = lines.join('\n');
}
}
section.querySelectorAll('.vb-q1z__radio').forEach(function(radio) {
radio.addEventListener('change', function() {
var step = parseInt(this.closest('.vb-q1z__slide').dataset.step, 10);
answers[step] = this.value;
highlightOption(this);
updateNav();
setTimeout(function() {
if (step < totalSteps) {
goToStep(step + 1);
} else {
goToStep(totalSteps + 1);
}
}, 240);
});
});
btnNext.addEventListener('click', function() {
if (currentStep <= totalSteps) goToStep(currentStep + 1);
});
btnBack.addEventListener('click', function() {
goToStep(currentStep - 1);
});
if (form) {
form.addEventListener('submit', function(e) {
e.preventDefault();
if (typeof window.tildaForm !== 'undefined') {
window.tildaForm.hideErrors(form);
var errors = window.tildaForm.validate(form);
var hasErrors = window.tildaForm.showErrors(form, errors);
if (hasErrors) return;
}
if (contactInput) {
var val = contactInput.value.trim();
var emailRe = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
var digits = val.replace(/\D/g, '').length;
var valid = emailRe.test(val) || digits >= 7;
var group = contactInput.closest('.vb-q1z__input-group');
var errEl = group.querySelector('.t-input-error');
if (!valid) {
group.classList.add('vb-q1z__input-group--error');
if (errEl) {
errEl.textContent = 'Введите корректный email или номер телефона';
errEl.style.display = '';
}
return;
} else {
group.classList.remove('vb-q1z__input-group--error');
if (errEl) {
errEl.textContent = '';
errEl.style.display = 'none';
}
}
}
var receivers = form.querySelectorAll('input[name="formservices[]"]');
var hasReceivers = false;
if (receivers.length) {
for (var r = 0; r < receivers.length; r++) {
if (receivers[r].value && receivers[r].value.trim() !== '') {
hasReceivers = true;
break;
}
}
}
if (!hasReceivers) {
var notice = document.createElement('div');
notice.className = 'vb-q1z__notice';
notice.innerHTML = '<p style="font-weight:540; margin:0 0 8px;">Данные заполнены верно.</p><p style="margin:0; opacity:.8;">Отправка заявки станет доступна после подключения приёмника данных в редакторе Тильды.</p>';
form.parentNode.insertBefore(notice, form);
form.style.display = 'none';
return;
}
if (typeof window.t_forms__initBtnClick === 'function' && submitBtn) {
window.t_forms__initBtnClick({ target: submitBtn, srcElement: submitBtn, preventDefault: function(){} });
}
});
}
updateView();
})();
</script>
</section>