const numberSteps = $('.quiz__step').length - 1;
let disableButtons = false;
$('.answer__input').on('change', function(e) {
if ($(this).next().children('.answer__tick').length > 0) {
return false
}
$(this).next().append(tick)
});
$('.navigation__btn--right').click(function(e) {
let currentIndex = Number($('.quiz__step--current').attr('data-question'));
if ($('.quiz__step--current input:checked').length == 0) {
//console.log('input empty');
return false;
}
//console.log({'currentIndex': currentIndex, 'numberSteps': numberSteps-1})
if (currentIndex == numberSteps + 1 || disableButtons == true) {
//console.log('last')
return false;
}
if (currentIndex + 1 == numberSteps + 1) {
$(this).addClass('navigation__btn--disabled');
}
if (currentIndex == numberSteps) {
$('.summary__item').remove();
$('.quiz__step:not(.quiz__summary)').each(function(index, item) {
console.log(item)
let icon = $(item).children('.question__emoji').text()
let answer = $(item).children('.answer').find('input:checked').val();
let node = '<div class="summary__item"><div class="question__emoji">' + icon + '</div>' + answer + '</div>'
$('#summary').append(node)
})
}
const percentage = (currentIndex * 100) / numberSteps;
$('.progress__inner').width(percentage + '%');
console.log('input ok')
$('.quiz__step--current').hide('300');
$('.quiz__step--current').removeClass('quiz__step--current');
$('.quiz__step--' + (currentIndex + 1)).show('300').addClass('quiz__step--current');
currentIndex = Number($('.quiz__step--current').attr('data-question'));
if (currentIndex > 1) {
$('.navigation__btn--left').removeClass('navigation__btn--disabled');
}
});
$('.navigation__btn--left').click(function(e) {
let currentIndex = Number($('.quiz__step--current').attr('data-question'));
console.log({
'currentIndex': currentIndex,
'numberSteps': numberSteps - 1
})
if (currentIndex == 1 || disableButtons == true) {
console.log('first')
$(this).addClass('navigation__btn--disabled');
return false;
}
$('.navigation__btn--right').removeClass('navigation__btn--disabled')
console.log('input ok')
$('.quiz__step--current').hide('300');
$('.quiz__step--current').removeClass('quiz__step--current');
$('.quiz__step--' + (currentIndex - 1)).show('300').addClass('quiz__step--current');
currentIndex = Number($('.quiz__step--current').attr('data-question'));
if (currentIndex == 1) {
$(this).addClass('navigation__btn--disabled');
}
const percentage = ((currentIndex - 1) * 100) / numberSteps + 1;
$('.progress__inner').width(percentage + '%');
$('.quiz__step--current').keyup(keypressEvent);
});
$('.submit').click(function(e) {
e.preventDefault();
$('.quiz').remove();
$(thanks).appendTo('.container');
disableButtons = true;
$('.navigation__btn').addClass('navigation__btn--disabled')
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section class="quiz">
<div class="quiz__inner">
<div data-question="1" class="quiz__step--1 quiz__step--current quiz__step">
<div class="breadcrumbs">
<div class="breadcrumbs__inner">
<span><a href="index.html">Главная </a>></span>
<span>Криосауны</span>
</div>
</div>
<h1 class="quiz__question">1 шаг</h1>
<div class="quiz__question-title">Куда?</div>
<div class="answer__inner">
<div class="answer">
<input data-char="65" class="answer__input" type="radio" id="answer_1" name="smoke">
<label class="answer__label" for="answer_1"><img src="images/home-quiz.png" alt=""></label>
<span>Домой</span>
</div>
<div class="answer">
<input data-char="66" class="answer__input" type="radio" id="answer_2" name="smoke">
<label class="answer__label" for="answer_2"><img src="images/home-quiz2.png" alt=""></label>
<span>В бизнесе</span>
</div>
<div class="answer">
<input data-char="67" class="answer__input" type="radio" id="answer_3" name="smoke">
<label class="answer__label" for="answer_3"><img src="images/home-quiz3.png" alt=""></label>
<span>Государственный заказчик</span>
</div>
</div>
</div>
<div data-question="2" class="quiz__step--2 quiz__step">
<div class="breadcrumbs">
<div class="breadcrumbs__inner">
<span><a href="index.html">Главная </a>></span>
<span>Криосауны</span>
</div>
</div>
<h1 class="quiz__question">2 шаг</h1>
<div class="quiz__question-title">Сколько? (количество процедур в день)</div>
<div class="answer__inner">
<div class="answer">
<input class="answer__input" type="radio" id="answer_4" name="pizza" value="Yes">
<label class="answer__label" for="answer_4"><img src="images/test/page2-1.png" alt=""></label>
<span>1-10</span>
</div>
<div class="answer">
<input class="answer__input" type="radio" id="answer_5" name="pizza" value="No">
<label class="answer__label" for="answer_5"><img src="images/test/page2-2.png" alt=""></label>
<span>20-30</span>
</div>
<div class="answer">
<input class="answer__input" type="radio" id="answer_6" name="pizza" value="No">
<label class="answer__label" for="answer_6"><img src="images/test/page2-3.png" alt=""></label>
<span>30-100</span>
</div>
</div>
</div>
<div data-question="3" class="quiz__step--3 quiz__step">
<div class="breadcrumbs">
<div class="breadcrumbs__inner">
<span><a href="index.html">Главная </a>></span>
<span>Криосауны</span>
</div>
</div>
<h1 class="quiz__question">3 шаг</h1>
<div class="quiz__question-title">Как? (планируете проводить процедуру)
</div>
<div class="answer__inner">
<div class="answer">
<input class="answer__input" type="radio" id="answer_7" name="aliens" value="Yes">
<label class="answer__label" for="answer_7"><img src="images/test/page3-1.png" alt=""></label>
<span>Поток</span>
</div>
<div class="answer">
<input class="answer__input" type="radio" id="answer_8" name="aliens" value="No">
<label class="answer__label" for="answer_8"><img src="images/test/page3-2.png" alt=""></label>
<span>По записи</span>
</div>
<div class="answer">
<input class="answer__input" type="radio" id="answer_9" name="aliens" value="No">
<label class="answer__label" for="answer_9"><img src="images/test/page3-3.png" alt=""></label>
<span>VIP</span>
</div>
</div>
</div>
<div data-question="4" class="quiz__step--4 quiz__step quiz__summary">
<div class="container__page">
<div class="breadcrumbs">
<div class="breadcrumbs__inner">
<span><a href="index.html">Главная </a>></span>
<span>Криосауны</span>
</div>
</div>
<div class="quiz__summary-title">Результат</div>
<div class="quiz__summary-inner">
<div class="variant__results">
<div class="result__item">
<h4>Комплектация «с цистерной»</h4>
<p>
Растущая популярность криотерапии в мире значительно увеличила интерес к процедуре в криосауне у пациентов. В последние годы количество пациентов в день у многих организаций эксплуатирующих криосауну превышает 15 человек, а в некоторых случаях доходит
до 60-70 человек в день. При таком потоке пациентов неизбежно приходится задумываться о расходе азота, схеме его доставки и хранения. Так, уже при 15 процедурах в день, общий объем азота потребляемого в месяц составляет более 1 500 литров,
для чего необходимо 60 сосудов Дьюара. При таких объемах, имея даже парк из 6 сосудов Дьюара, их придется заправлять через день, что само собой требует затрат времени и сил.
</p>
</div>
<div class="summary__item-img">
<img src="images/test/image.png" alt="">
</div>
</div>
<div class="variant__results">
<div class="result__item">
<h4>Комплектация Стандарт</h4>
<p>
Самая продаваемая комплектация криосаун КАЭКТ-01-«Крион» Стандарт, специально разработана, как оптимальное соотношение цена – качество. Рассчитана на проведение от 10 до 50 процедур в день. Данная комплектация криосауны позволяет существенно упростить
работу с ней и сделать требования для помещения, где она будет установлена, менее жесткими. Криосауна КАЭКТ- 01 «Крион» Стандарт подойдет абсолютно любым пациентам, независимо от их роста, веса и возраста.
</p>
<div class="summary__item-img">
<img src="images/test/image.png" alt="">
</div>
</div>
</div>
</div>
</div>
<div class="quiz__summary-inner">
<div class="item__icon">
<div class="item__icon-img">
<img src="images/test/summary1.png" alt="">
</div>
<span>В бизнесе</span>
</div>
<div class="item__icon">
<div class="item__icon-img">
<img src="images/test/summary2.png" alt="">
</div>
<span>10-30</span>
</div>
<div class="item__icon">
<div class="item__icon-img">
<img src="images/test/summary3.png" alt="">
</div>
<span>Поток</span>
</div>
<div class="item__icon">
<div class="item__icon-img">
<img src="images/test/summary4.png" alt="">
</div>
<span>Всего: 10 монеток</span>
</div>
</div>
<div class="results__form">
<div class="form__buttons">
<div class="dropdown__btn">
<span class="active" id="vid">Обратный звонок<i class="fas fa-chevron-up"></i></span>
<span id="artic">Написать на Email<i class="fas fa-chevron-up"></i></span>
<span id="pho">Написать в чат<i class="fas fa-chevron-up"></i></span>
</div>
<div class="buttons">
<button class="active" type="button" id="video"><i class="fas fa-phone-alt"></i>Обратный звонок</button>
<button type="button" id="article"><i class="fas fa-envelope"></i>Написать на Email</button>
<button type="button" id="photo"><i class="far fa-comments"></i>Написать в чат</button>
</div>
</div>
<form class="form_result">
<label class="label1">Оформить заказ</label>
<input type="text" placeholder="Имя">
<input id="email" type="text" placeholder="Email">
<input class="active" id="number" type="text" placeholder="Номер телефона">
<textarea placeholder="Ваше сообщение"></textarea>
<div class="form__check">
<input type="checkbox">
<span>Я согласен на обработку моих <a href="#">персональных данных.</a></span>
</div>
<div class="form__btn">
<button type="submit">Отправить</button>
</div>
</form>
</div>
</div>
</div>
</section>