Квиз (quiz custom)

HTML

<div class="quiz">
    <div class="container">
        <div class="content-title">Выберите стиль который вам нравится <br>и узнайте <b>стоимость дома за 5 минут!</b></div>
        <form class="quiz_block" id="quiz-form">
            <div class="quiz-item quiz-item--1">
                <div class="text">
                    <div class="title-block">
                        <div class="num">01</div>
                        Есть ли у вас участок?
                    </div>
                    <label class="quiz-var">
                        <input type="radio" name="var1" value="Есть участок">
                        <span class="title-label">
                            <div class="miniature">
                                <img src="https://146128.selcdn.ru/vdvrus.ru/files/items/b9/1b/b91ba1a91fc18309f90345fb6a408a06_1624105488.jpeg" alt="">
                            </div>
                            Да
                        </span>
                    </label>
                    <label class="quiz-var">
                        <input type="radio" name="var1" value="Нет участка">
                        <span class="title-label">
                            <div class="miniature miniature--none-image">
                                <img src="https://146128.selcdn.ru/vdvrus.ru/files/items/b9/1b/b91ba1a91fc18309f90345fb6a408a06_1624105488.jpeg" alt="">
                            </div>
                            Нет
                        </span>
                    </label>
                </div>
                <div class="btn-block">
                    <a class="btn btn-quiz btn-quiz--1" href="#"><span>Далее</span></a>
                </div>
            </div>
            
            <div class="quiz-item quiz-item--2">
                <div class="text">
                    <div class="title-block">
                        <div class="num">02</div>
                        На какую площадь дома вы рассчитываете?
                    </div>
                    <label class="quiz-var">
                        <input type="radio" name="var2" value="до 100 м2">
                        <span class="title-label">
                            <div class="miniature">
                                <img src="https://asdomoy.ru/wp-content/uploads/2021/10/Б.2.16446-2.jpg" alt="">
                            </div>
                            до 100 м2
                        </span>
                    </label>
                    <label class="quiz-var">
                        <input type="radio" name="var2" value="100-150 м2">
                        <span class="title-label">
                            <div class="miniature">
                                <img src="https://asdomoy.ru/wp-content/uploads/2021/10/1_Photo-1.jpg" alt="">
                            </div>
                            100-150 м2
                        </span>
                    </label>
                    <label class="quiz-var">
                        <input type="radio" name="var2" value="150-250 м2">
                        <span class="title-label">
                            <div class="miniature">
                                <img src="https://asdomoy.ru/wp-content/uploads/2021/10/1-1.jpg" alt="">
                            </div>
                            150-250 м2
                        </span>
                    </label>
                    <label class="quiz-var">
                        <input type="radio" name="var2" value="от 250 м2">
                        <span class="title-label">
                            <div class="miniature">
                                <img src="https://asdomoy.ru/wp-content/uploads/2021/10/Денвер-1.jpg" alt="">
                            </div>
                            от 250 м2
                        </span>
                    </label>
                </div>
                <div class="btn-block">
                    <a class="btn btn-border btn-quiz--2--prev" href="#"><span>Предыдущий</span></a>
                    <a class="btn btn-quiz btn-quiz--2" href="#"><span>Следующий</span></a>
                </div>
            </div>
            
            <div class="quiz-item quiz-item--3">
                <div class="text">
                    <div class="title-block">
                        <div class="num">03</div>
                        Сколько этажей будет в вашем доме?
                    </div>
                    <label class="quiz-var">
                        <input type="radio" name="var3" value="1 этаж">
                        <span class="title-label">
                            <div class="miniature">
                                <img src="https://asdomoy.ru/wp-content/uploads/2021/10/Денвер-1.jpg" alt="">
                            </div>
                            1 этаж
                        </span>
                    </label>
                    <label class="quiz-var">
                        <input type="radio" name="var3" value="2 этажа">
                        <span class="title-label">
                            <div class="miniature">
                                <img src="https://asdomoy.ru/wp-content/uploads/2021/10/Ф-28824-2-1.jpg" alt="">
                            </div>
                            2 этажа
                        </span>
                    </label>
                    <label class="quiz-var">
                        <input type="radio" name="var3" value="Больше">
                        <span class="title-label">
                            <div class="miniature">
                                <img src="https://legir-mk.ru/wp-content/uploads/trehe-tazhnyiy-dom-31.jpg" alt="">
                            </div>
                            Больше
                        </span>
                    </label>
                </div>
                <div class="btn-block">
                    <a class="btn btn-border btn-quiz--3--prev" href="#"><span>Предыдущий</span></a>
                    <a class="btn btn-quiz btn-quiz--3" href="#"><span>Следующий</span></a>
                </div>
            </div>
            
            <div class="quiz-item quiz-item--4">
                <div class="text">
                    <div class="title-block">
                        <div class="num">04</div>
                        У вас есть проект дома?
                    </div>
                    <label class="quiz-var">
                        <input type="radio" name="var4" value="Да, есть готовый проект">
                        <span class="title-label">
                            <div class="miniature">
                                <img src="https://asdomoy.ru/wp-content/uploads/2021/10/Б.2.56187-1-scaled-1.jpg" alt="">
                            </div>
                            Да, есть готовый проект
                        </span>
                    </label>
                    <label class="quiz-var">
                        <input type="radio" name="var4" value="Есть эскизы и наброски">
                        <span class="title-label">
                            <div class="miniature">
                                <img src="https://m-strana.ru/upload/resize_cache/medialibrary/628/830_830_1/skolko-stoit-proekt-doma-poetapnyy-raschet-5.jpg" alt="">
                            </div>
                            Есть эскизы и наброски
                        </span>
                    </label>
                    <label class="quiz-var">
                        <input type="radio" name="var4" value="Представляю в общих чертах, нужна консультация">
                        <span class="title-label">
                            <div class="miniature">
                                <img src="http://asdomoy.ru/wp-content/uploads/2021/11/2021-11-22_14-39-20.png" alt="">
                            </div>
                            Представляю в общих чертах, нужна консультация
                        </span>
                    </label>
                </div>
                <div class="btn-block">
                    <a class="btn btn-border btn-quiz--4--prev" href="#"><span>Предыдущий</span></a>
                    <a class="btn btn-quiz btn-quiz--4" href="#"><span>Следующий</span></a>
                </div>
            </div>
            
            <div class="quiz-item quiz-item--5">
                <div class="text">
                    <div class="title-block">
                        <div class="num">05</div>
                        Заполните форму и получите каталог! 
                    </div>
                    <div class="form-item">
                        <input type="text" name="name" placeholder="Имя" maxlength="15">
                        <input type="text" name="phone" placeholder="Ваш телефон*" maxlength="15" minlength="8" required>
                        <label class="polit-form">
                            <input name="polit" type="checkbox" checked="checked" required>
                            <span class="checkmark">Я ознакомился с <a href="/privacy-policy/" target="_blank">политикой конфиденциальности</a></span>
                        </label>
                        <input type="hidden" name="formData" value="Заполнили квиз со страницы <?php the_title(); ?>, с сайта <?php echo get_home_url(); ?>">
                    </div>
                </div>
                <div class="btn-block">
                    <a class="btn btn-border btn-quiz--5--prev" href="#"><span>Предыдущий</span></a>
                    <button class="btn"><span>Получить</span></button>
                </div>
            </div>
        </form>
    </div>
</div>

jQuery

//квиз
(function(){
    $(document).ready(function(){
        //шаг 1
        setInterval(function(){
            if ($('input[name="var1"]').is(':checked')){
                $('.btn-quiz--1').removeClass('btn-disable');
            } else {
                $('.btn-quiz--1').addClass('btn-disable');
            }
        });
        $('.btn-quiz--1').click(function(){
            if ($('input[name="var1"]').is(':checked')){
                $('.quiz-item--1').fadeOut(0);
                $('.quiz-item--2').fadeIn(300);
                $('.btn-quiz').removeClass('btn-disable');
            } else {
                $('.btn-quiz').addClass('btn-disable');
            }
            return false;
        });
        //шаг 1
        
        //шаг 2
        setInterval(function(){
            if ($('input[name="var2"]').is(':checked')){
                $('.btn-quiz--2').removeClass('btn-disable');
            } else {
                $('.btn-quiz--2').addClass('btn-disable');
            }
        });
        $('.btn-quiz--2').click(function(){
            if ($('input[name="var2"]').is(':checked')){
                $('.quiz-item--2').fadeOut(0);
                $('.quiz-item--3').fadeIn(300);
                $('.btn-quiz').removeClass('btn-disable');
            } else {
                $('.btn-quiz').addClass('btn-disable');
            }
            return false;
        });
        $('.btn-quiz--2--prev').click(function(){
            $('.quiz-item--2').fadeOut(0);
            $('.quiz-item--1').fadeIn(300);
            return false;
        });
        //шаг 2
        
        //шаг 3
        setInterval(function(){
            if ($('input[name="var3"]').is(':checked')){
                $('.btn-quiz--3').removeClass('btn-disable');
            } else {
                $('.btn-quiz--3').addClass('btn-disable');
            }
        });
        $('.btn-quiz--3').click(function(){
            if ($('input[name="var3"]').is(':checked')){
                $('.quiz-item--3').fadeOut(0);
                $('.quiz-item--4').fadeIn(300);
                $('.btn-quiz').removeClass('btn-disable');
            } else {
                $('.btn-quiz').addClass('btn-disable');
            }
            return false;
        });
        $('.btn-quiz--3--prev').click(function(){
            $('.quiz-item--3').fadeOut(0);
            $('.quiz-item--2').fadeIn(300);
            return false;
        });
        //шаг 3
        
        //шаг 4
        setInterval(function(){
            if ($('input[name="var4"]').is(':checked')){
                $('.btn-quiz--4').removeClass('btn-disable');
            } else {
                $('.btn-quiz--4').addClass('btn-disable');
            }
        });
        $('.btn-quiz--4').click(function(){
            if ($('input[name="var4"]').is(':checked')){
                $('.quiz-item--4').fadeOut(0);
                $('.quiz-item--5').fadeIn(300);
                $('.btn-quiz').removeClass('btn-disable');
            } else {
                $('.btn-quiz').addClass('btn-disable');
            }
            return false;
        });
        $('.btn-quiz--4--prev').click(function(){
            $('.quiz-item--4').fadeOut(0);
            $('.quiz-item--3').fadeIn(300);
            return false;
        });
        //шаг 4
        
        //последний шаг
        $('.btn-quiz--5--prev').click(function(){
            $('.quiz-item--5').fadeOut(0);
            $('.quiz-item--4').fadeIn(300);
            return false;
        });
        //последний шаг
    });
})();
//квиз

LESS

//квиз
.quiz{
    padding-bottom: 150px;
    
    @media (max-width: 1000px){
        padding-bottom: 70px;
    }
    .quiz-item{
        padding: 100px;
        background: @bg;
        display: none;
        
        @media (max-width: 1000px){
            padding: 50px 30px;
            padding-bottom: 20px;
        }
        &:nth-child(1){
            display: block;
        }
        
        .text{
            .title-block{
                margin-bottom: 30px;
                
                .num{
                    display: inline;
                    margin-right: 20px;
                    color: @color-1;
                }
            }
            .quiz-var{
                display: inline-block;
                vertical-align: text-top;
                width: 250px;
                margin-right: 30px;
                cursor: pointer;
                
                @media (max-width: 1000px){
                    width: 100%;
                    margin-right: 0;
                    margin-bottom: 30px;
                }
                .title-label{
                    display: block;
                    transition: 0.3s all;
                }
                .miniature{
                    display: block;
                    height: 150px;
                    margin-bottom: 20px;
                    position: relative;
                    overflow: hidden;
                    
                    &::before{
                        content: '';
                        position: absolute;
                        left: 0;
                        top: 0;
                        width: 100%;
                        height: 100%;
                        background: rgba(0, 0, 0, 0.7) url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='1' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='M22 11.08V12a10 10 0 1 1-5.93-9.14'%3e%3c/path%3e%3cpolyline points='22 4 12 14.01 9 11.01'%3e%3c/polyline%3e%3c/svg%3e") no-repeat 50% 50%;
                        transition: 0.3s all;
                        opacity: 0;
                        z-index: 2;
                    }
                    img{
                        transition: 0.3s all;
                    }
                    &:hover img{
                        transform: scale(1.1);
                    }
                }
                input{
                    display: none;
                    
                    &:checked ~ .title-label{
                        color: @color-1;
                        
                        .miniature::before{
                            opacity: 1;
                        }
                    }
                }
            }
        }
        .btn-block{
            .btn{
                @media (max-width: 600px){
                    width: 100%;
                    margin: 0;
                }
            }
            .btn-border{
                margin-right: 20px;
                
                @media (max-width: 600px){
                    margin-right: 0;
                    margin-bottom: 20px;
                }
            }
            .btn-disable{
                background: @text;
                opacity: 0.5;
                cursor: default;
            }
        }
    }
    
    .form-item{
        width: 400px;
    }
}
//квиз