РАЗНОЕ / КВИЗ

Заметка создана: 25 марта 2024 г.
Образец Квиза на сайте  https: // ambrela102 .ru

HTML код квиза

"http://www.w3.org/2000/svg" viewBox="0 0 448 512" width="24px" height="16px"><path class="red" d="M231.536 475.535l7.071-7.07c4.686-4.686 4.686-12.284 0-16.971L60.113 273H436c6.627 0 12-5.373 12-12v-10c0-6.627-5.373-12-12-12H60.113L238.607 60.506c4.686-4.686 4.686-12.284 0-16.971l-7.071-7.07c-4.686-4.686-12.284-4.686-16.97 0L3.515 247.515c-4.686 4.686-4.686 12.284 0 16.971l211.051 211.05c4.686 4.686 12.284 4.686 16.97-.001z"/></svg>
                     </button> 
                     <button type="button" class="btn btn-primary quiz-next" data-next-step="step3" data-current-step="step2" data-progress="3">Далее <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" width="24px" height="16px"><path class="fil0" d="M216.464 36.465l-7.071 7.07c-4.686 4.686-4.686 12.284 0 16.971L387.887 239H12c-6.627 0-12 5.373-12 12v10c0 6.627 5.373 12 12 12h375.887L209.393 451.494c-4.686 4.686-4.686 12.284 0 16.971l7.071 7.07c4.686 4.686 12.284 4.686 16.97 0l211.051-211.05c4.686-4.686 4.686-12.284 0-16.971L233.434 36.465c-4.686-4.687-12.284-4.687-16.97 0z"/></svg></button>
                    </div>
                </div> 
                    
                    
                <!-- Шаг 3 - Покрытие фасада -->
                <div id="step3" class="quiz-step">
                    <div class="step-title fs-2">Покрытие фасадов</div>  
                
                    <div class="form-field-group">
                    <div class="form-field-item"> 
                        <input type="radio" class="form-field-input" name="form_step3" value="Прямая" id="variant3-01"> 
                        <label for="variant3-01">
                            <div class="form-field-image">
                                    <img alt="" src="/images/icons/fasad-glossy.jpg">
                            </div> 
                            <span class="form-field-text">Глянцевое</span>  
                        </label> 
                    </div>
                    
                    <div class="form-field-item"> 
                        <input type="radio" class="form-field-input" name="form_step3" value="Угловая" id="variant3-02"> 
                         <label for="variant3-02">
                            <div class="form-field-image">
                                    <img alt="" src="/images/icons/fasad-matt.jpg">
                            </div> 
                            <span class="form-field-text">Матовое</span>  
                        </label> 
                    </div>
                    
                    <div class="form-field-item"> 
                        <input type="radio" class="form-field-input" name="form_step3" value="Ещё думаю" id="variant3-03"> 
                        <label for="variant3-03">
                            <div class="form-field-image">
                                    <img alt="" src="/images/icons/man-thinking.jpg">
                            </div> 
                            <span class="form-field-text">Ещё думаю</span>  
                        </label> 
                    </div>
                    </div>
                    
                    <div class="quiz-actions show-prev">
                      <button type="button" class="btn btn-transparent quiz-prev" title="На предыдущий шаг" data-prev-step="step2" data-current-step="step3" data-progress="2">
                         <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" width="24px" height="16px"><path class="red" d="M231.536 475.535l7.071-7.07c4.686-4.686 4.686-12.284 0-16.971L60.113 273H436c6.627 0 12-5.373 12-12v-10c0-6.627-5.373-12-12-12H60.113L238.607 60.506c4.686-4.686 4.686-12.284 0-16.971l-7.071-7.07c-4.686-4.686-12.284-4.686-16.97 0L3.515 247.515c-4.686 4.686-4.686 12.284 0 16.971l211.051 211.05c4.686 4.686 12.284 4.686 16.97-.001z"/></svg>
                     </button> 
                      <button type="button" class="btn btn-primary quiz-next" data-next-step="step4" data-current-step="step3" data-progress="4">Далее <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" width="24px" height="16px"><path class="fil0" d="M216.464 36.465l-7.071 7.07c-4.686 4.686-4.686 12.284 0 16.971L387.887 239H12c-6.627 0-12 5.373-12 12v10c0 6.627 5.373 12 12 12h375.887L209.393 451.494c-4.686 4.686-4.686 12.284 0 16.971l7.071 7.07c4.686 4.686 12.284 4.686 16.97 0l211.051-211.05c4.686-4.686 4.686-12.284 0-16.971L233.434 36.465c-4.686-4.687-12.284-4.687-16.97 0z"/></svg></button>
                    </div>
                </div> 
                
                
                <!-- Шаг 4 - Длина кухни -->
                <div id="step4" class="quiz-step">
                    <div class="step-title fs-2">Выберите примерную длину кухонного гарнитура</div>  
                    
                    <div class="form-check-group">
                    <div class="form-check"> 
                        <input type="radio" class="form-check-input" name="form_step4" value="до 3-х метров" id="variant4-01"> 
                        <label class="form-check-label" for="variant4-01">до 3-х метров</span>  
                        </label> 
                    </div>
                    
                    <div class="form-check"> 
                        <input type="radio" class="form-check-input" name="form_step4" value="от 3-х до 4-х метров" id="variant4-01"> 
                        <label class="form-check-label" for="variant4-01">от 3-х до 4-х метров</span>  
                        </label> 
                    </div>
                    
                    <div class="form-check"> 
                        <input type="radio" class="form-check-input" name="form_step4" value="от 4-х до 5-и метров" id="variant4-01"> 
                        <label class="form-check-label" for="variant4-01">от 4-х до 5-и метров</span>  
                        </label> 
                    </div>
                    
                    <div class="form-check"> 
                        <input type="radio" class="form-check-input" name="form_step4" value="от 5-и до до 3-и метров" id="variant4-01"> 
                        <label class="form-check-label" for="variant4-01">от 5-и до до 3-и метров</span>  
                        </label> 
                    </div>
                    
                    <div class="form-check"> 
                        <input type="radio" class="form-check-input" name="form_step4" value="от 6-и до до 7-и метров" id="variant4-01"> 
                        <label class="form-check-label" for="variant4-01">от 6-и до до 7-и метров</span>  
                        </label> 
                    </div>
                    
                    <div class="form-check"> 
                        <input type="radio" class="form-check-input" name="form_step4" value="от 7-и до до 8-и метров" id="variant4-01"> 
                        <label class="form-check-label" for="variant4-01">от 7-и до до 8-и метров</span>  
                        </label> 
                    </div>
                    
                    <div class="form-check"> 
                        <input type="radio" class="form-check-input" name="form_step4" value="более 8-и метров" id="variant4-01"> 
                        <label class="form-check-label" for="variant4-01">более 8-и метров</span>  
                        </label> 
                    </div>
                    
                    <div class="form-check"> 
                        <input type="radio" class="form-check-input" name="form_step4" value="Укажу позже" id="variant4-01"> 
                        <label class="form-check-label" for="variant4-01">Укажу позже</span>  
                        </label> 
                    </div>
                    </div>
                    
                    <div class="quiz-actions show-prev">
                      <button type="button" class="btn btn-transparent quiz-prev" title="На предыдущий шаг" data-prev-step="step3" data-current-step="step4" data-progress="3">
                         <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" width="24px" height="16px"><path class="red" d="M231.536 475.535l7.071-7.07c4.686-4.686 4.686-12.284 0-16.971L60.113 273H436c6.627 0 12-5.373 12-12v-10c0-6.627-5.373-12-12-12H60.113L238.607 60.506c4.686-4.686 4.686-12.284 0-16.971l-7.071-7.07c-4.686-4.686-12.284-4.686-16.97 0L3.515 247.515c-4.686 4.686-4.686 12.284 0 16.971l211.051 211.05c4.686 4.686 12.284 4.686 16.97-.001z"/></svg>
                     </button> 
                      <button type="button" class="btn btn-primary quiz-next" data-next-step="step5" data-current-step="step4" data-progress="5">Далее <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" width="24px" height="16px"><path class="fil0" d="M216.464 36.465l-7.071 7.07c-4.686 4.686-4.686 12.284 0 16.971L387.887 239H12c-6.627 0-12 5.373-12 12v10c0 6.627 5.373 12 12 12h375.887L209.393 451.494c-4.686 4.686-4.686 12.284 0 16.971l7.071 7.07c4.686 4.686 12.284 4.686 16.97 0l211.051-211.05c4.686-4.686 4.686-12.284 0-16.971L233.434 36.465c-4.686-4.687-12.284-4.687-16.97 0z"/></svg></button>
                    </div>
                </div> 
                
                
                <!-- Шаг 5 - Высота модулей-->
                <div id="step5" class="quiz-step">
                    <div class="step-title fs-2">Выберите высоту верхних модулей</div>  
                
                    <div class="form-field-group">
                    <div class="form-field-item"> 
                        <input type="radio" class="form-field-input" name="form_step5" value="Стандартная высота 72 см (эконом)" id="variant5-01"> 
                        <label for="variant5-01">
                            <div class="form-field-image">
                                    <img alt="" src="/images/icons/72-kitchen.jpg">
                            </div> 
                            <span class="form-field-text">Стандартная высота 72 см (эконом)</span>  
                        </label> 
                    </div>
                    
                    <div class="form-field-item"> 
                        <input type="radio" class="form-field-input" name="form_step5" value="Высота 92 см" id="variant5-02"> 
                         <label for="variant5-02">
                            <div class="form-field-image">
                                    <img alt="" src="/images/icons/92-kitchen.jpg">
                            </div> 
                            <span class="form-field-text">Высота 92 см</span>  
                        </label> 
                    </div>
                    
                    <div class="form-field-item"> 
                        <input type="radio" class="form-field-input" name="form_step5" value="Под потолок (рекомендуем)" id="variant5-03"> 
                         <label for="variant5-03">
                            <div class="form-field-image">
                                    <img alt="" src="/images/icons/ceiling-mounted-kitchen.jpg">
                            </div> 
                            <span class="form-field-text">Под потолок (рекомендуем)</span>  
                        </label> 
                    </div>
                    
                    <div class="form-field-item"> 
                        <input type="radio" class="form-field-input" name="form_step5" value="Под потолок + глубокие антресоли" id="variant5-04"> 
                         <label for="variant5-04">
                            <div class="form-field-image">
                                    <img alt="" src="/images/icons/mezzanines-kitchen.jpg">
                            </div> 
                            <span class="form-field-text">Под потолок + глубокие антресоли</span>  
                        </label> 
                    </div>
                    
                    <div class="form-field-item"> 
                        <input type="radio" class="form-field-input" name="form_step5" value="Ещё думаю" id="variant5-05"> 
                        <label for="variant5-05">
                            <div class="form-field-image">
                                    <img alt="" src="/images/icons/man-thinking.jpg">
                            </div> 
                            <span class="form-field-text">Ещё думаю</span>  
                        </label> 
                    </div>
                    </div>
                    
                    <div class="quiz-actions show-prev">
                      <button type="button" class="btn btn-transparent quiz-prev" title="На предыдущий шаг" data-prev-step="step4" data-current-step="step5" data-progress="4">
                         <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" width="24px" height="16px"><path class="red" d="M231.536 475.535l7.071-7.07c4.686-4.686 4.686-12.284 0-16.971L60.113 273H436c6.627 0 12-5.373 12-12v-10c0-6.627-5.373-12-12-12H60.113L238.607 60.506c4.686-4.686 4.686-12.284 0-16.971l-7.071-7.07c-4.686-4.686-12.284-4.686-16.97 0L3.515 247.515c-4.686 4.686-4.686 12.284 0 16.971l211.051 211.05c4.686 4.686 12.284 4.686 16.97-.001z"/></svg>
                     </button> 
                      <button type="button" class="btn btn-primary quiz-next" data-next-step="step6" data-current-step="step5" data-progress="6">Далее <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" width="24px" height="16px"><path class="fil0" d="M216.464 36.465l-7.071 7.07c-4.686 4.686-4.686 12.284 0 16.971L387.887 239H12c-6.627 0-12 5.373-12 12v10c0 6.627 5.373 12 12 12h375.887L209.393 451.494c-4.686 4.686-4.686 12.284 0 16.971l7.071 7.07c4.686 4.686 12.284 4.686 16.97 0l211.051-211.05c4.686-4.686 4.686-12.284 0-16.971L233.434 36.465c-4.686-4.687-12.284-4.687-16.97 0z"/></svg></button>
                    </div>
                </div> 
                
                
                <!-- Шаг 6 - вариант фурнитуры-->
                <div id="step6" class="quiz-step">
                    <div class="step-title fs-2">Выберите вариант фурнитуры</div>  
                    
                    <div class="form-check-group">
                    <div class="form-check"> 
                        <input type="radio" class="form-check-input" name="form_step6" value="Экономная" id="variant6-01"> 
                        <label class="form-check-label" for="variant6-01"><span class="form-field-text">Экономная</span>  
                        </label> 
                    </div>
                    
                    <div class="form-check"> 
                        <input type="radio" class="form-check-input" name="form_step6" value="Недорогая, но качественная" id="variant6-02"> 
                        <label class="form-check-label" for="variant6-02"><span class="form-field-text">Недорогая, но качественная</span>  
                        </label> 
                    </div>
                    
                    <div class="form-check"> 
                        <input type="radio" class="form-check-input" name="form_step6" value="Качественная с большим сроком службы" id="variant6-03"> 
                        <label class="form-check-label" for="variant6-03"><span class="form-field-text">Качественная с большим сроком службы</span>  
                        </label> 
                    </div>
                    
                    <div class="form-check"> 
                        <input type="radio" class="form-check-input" name="form_step6" value="Дорогая с электроприводами открывания фасадов и ящиков" id="variant6-04"> 
                        <label class="form-check-label" for="variant6-04"><span class="form-field-text">Дорогая с электроприводами открывания фасадов и ящиков</span>  
                        </label> 
                    </div>
                    </div>
                    
                    <div class="quiz-actions show-prev">
                      <button type="button" class="btn btn-transparent quiz-prev" title="На предыдущий шаг" data-prev-step="step5" data-current-step="step6" data-progress="5">
                         <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" width="24px" height="16px"><path class="red" d="M231.536 475.535l7.071-7.07c4.686-4.686 4.686-12.284 0-16.971L60.113 273H436c6.627 0 12-5.373 12-12v-10c0-6.627-5.373-12-12-12H60.113L238.607 60.506c4.686-4.686 4.686-12.284 0-16.971l-7.071-7.07c-4.686-4.686-12.284-4.686-16.97 0L3.515 247.515c-4.686 4.686-4.686 12.284 0 16.971l211.051 211.05c4.686 4.686 12.284 4.686 16.97-.001z"/></svg>
                     </button> 
                      <button type="button" class="btn btn-primary quiz-next" data-next-step="step7" data-current-step="step6" data-progress="7">Далее <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" width="24px" height="16px"><path class="fil0" d="M216.464 36.465l-7.071 7.07c-4.686 4.686-4.686 12.284 0 16.971L387.887 239H12c-6.627 0-12 5.373-12 12v10c0 6.627 5.373 12 12 12h375.887L209.393 451.494c-4.686 4.686-4.686 12.284 0 16.971l7.071 7.07c4.686 4.686 12.284 4.686 16.97 0l211.051-211.05c4.686-4.686 4.686-12.284 0-16.971L233.434 36.465c-4.686-4.687-12.284-4.687-16.97 0z"/></svg></button>
                    </div>
                </div> 
                
                
                <!-- Шаг 7- Дополнительные элементы -->
                <div id="step7" class="quiz-step">
                    <div class="step-title fs-2">Выберите дополнительные элементы <br>или встраиваемую технику</div>  
                    
                    <div class="form-check-group">
                    <div class="form-check"> 
                        <input type="checkbox" class="form-check-input" name="form_step7" value="Ничего не нужно" id="variant7-0" checked="checked"> 
                        <label class="form-check-label" for="variant7-0"><span class="form-field-text">Ничего не нужно</span>  
                        </label> 
                    </div>
                    
                    <div class="form-check"> 
                        <input type="checkbox" class="form-check-input" name="form_step7" value="Раковина (искуственный камень) + смеситель" id="variant7-01"> 
                        <label class="form-check-label" for="variant7-01"><span class="form-field-text">Раковина (искуственный камень) + смеситель</span>  
                        </label> 
                    </div>
                    
                    <div class="form-check"> 
                        <input type="checkbox" class="form-check-input" name="form_step7" value="Раковина (метал) + смеситель" id="variant7-02"> 
                        <label class="form-check-label" for="variant7-02"><span class="form-field-text">Раковина (метал) + смеситель</span>  
                        </label> 
                    </div>
                    
                    <div class="form-check"> 
                        <input type="checkbox" class="form-check-input" name="form_step7" value="Вытяжка" id="variant7-03"> 
                        <label class="form-check-label" for="variant7-03"><span class="form-field-text">Вытяжка</span>  
                        </label> 
                    </div>
                    
                    <div class="form-check"> 
                        <input type="checkbox" class="form-check-input" name="form_step7" value="Светодиодная подсветка" id="variant7-04"> 
                        <label class="form-check-label" for="variant7-04"><span class="form-field-text">Светодиодная подсветка</span>  
                        </label> 
                    </div>
                    
                    <div class="form-check"> 
                        <input type="checkbox" class="form-check-input" name="form_step7" value="Посудомоечная машина" id="variant7-05"> 
                        <label class="form-check-label" for="variant7-05"><span class="form-field-text">Посудомоечная машина</span>  
                        </label> 
                    </div>
                    
                    <div class="form-check"> 
                        <input type="checkbox" class="form-check-input" name="form_step7" value="Варочная панель (газовая)" id="variant7-06"> 
                        <label class="form-check-label" for="variant7-06"><span class="form-field-text">Варочная панель (газовая)</span>  
                        </label> 
                    </div>
                    
                    <div class="form-check"> 
                        <input type="checkbox" class="form-check-input" name="form_step7" value="Варочная панель (индукционная)" id="variant7-07"> 
                        <label class="form-check-label" for="variant7-07"><span class="form-field-text">Варочная панель (индукционная)</span>  
                        </label> 
                    </div>
                    
                    <div class="form-check"> 
                        <input type="checkbox" class="form-check-input" name="form_step7" value="уховой шкаф" id="variant7-08"> 
                        <label class="form-check-label" for="variant7-08"><span class="form-field-text">Духовой шкаф</span>  
                        </label> 
                    </div>
                    
                    <div class="form-check"> 
                        <input type="checkbox" class="form-check-input" name="form_step7" value="Отдельно стоящая плита" id="variant7-09"> 
                        <label class="form-check-label" for="variant7-09"><span class="form-field-text">Отдельно стоящая плита</span>  
                        </label> 
                    </div>
                    
                   <div class="form-check"> 
                        <input type="checkbox" class="form-check-input" name="form_step7" value="Измельчитель отходов" id="variant7-10"> 
                        <label class="form-check-label" for="variant7-10"><span class="form-field-text">Измельчитель отходов</span>  
                        </label> 
                    </div>
                    
                    <div class="form-check"> 
                        <input type="checkbox" class="form-check-input" name="form_step7" value="Встраиваемая микроволновая печь" id="variant7-11"> 
                        <label class="form-check-label" for="variant7-11"><span class="form-field-text">Встраиваемая микроволновая печь</span>  
                        </label> 
                    </div>
                    
                    <div class="form-check"> 
                        <input type="checkbox" class="form-check-input" name="form_step7" value="Встраиваемая кофемашина" id="variant7-12"> 
                        <label class="form-check-label" for="variant7-12"><span class="form-field-text">Встраиваемая кофемашина</span>  
                        </label> 
                    </div>
                    
                    <div class="form-check"> 
                        <input type="checkbox" class="form-check-input" name="form_step7" value="Встраиваемый холодильник" id="variant7-13"> 
                        <label class="form-check-label" for="variant7-13"><span class="form-field-text">Встраиваемый холодильник</span>  
                        </label> 
                    </div>
                    
                    <div class="form-check"> 
                        <input type="checkbox" class="form-check-input" name="form_step7" value="Отдельно стоящий холодильник" id="variant7-14"> 
                        <label class="form-check-label" for="variant7-14"><span class="form-field-text">Отдельно стоящий холодильник</span>  
                        </label> 
                    </div>
                    
                    <div class="form-check"> 
                        <input type="checkbox" class="form-check-input" name="form_step7" value="Стиральная машина" id="variant7-15"> 
                        <label class="form-check-label" for="variant7-15"><span class="form-field-text">Стиральная машина</span>  
                        </label> 
                    </div>
                    
                    <div class="form-check"> 
                        <input type="checkbox" class="form-check-input" name="form_step7" value="Винный шках" id="variant7-16"> 
                        <label class="form-check-label" for="variant7-16"><span class="form-field-text">Винный шках</span>  
                        </label> 
                    </div>
                    </div>
                    
                    <div class="quiz-actions show-prev">
                      <button type="button" class="btn btn-transparent quiz-prev" title="На предыдущий шаг" data-prev-step="step6" data-current-step="step7" data-progress="6">
                         <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" width="24px" height="16px"><path class="red" d="M231.536 475.535l7.071-7.07c4.686-4.686 4.686-12.284 0-16.971L60.113 273H436c6.627 0 12-5.373 12-12v-10c0-6.627-5.373-12-12-12H60.113L238.607 60.506c4.686-4.686 4.686-12.284 0-16.971l-7.071-7.07c-4.686-4.686-12.284-4.686-16.97 0L3.515 247.515c-4.686 4.686-4.686 12.284 0 16.971l211.051 211.05c4.686 4.686 12.284 4.686 16.97-.001z"/></svg>
                     </button> 
                      <button type="button" class="btn btn-primary quiz-next" data-next-step="step8" data-current-step="step7" data-progress="8">Далее <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" width="24px" height="16px"><path class="fil0" d="M216.464 36.465l-7.071 7.07c-4.686 4.686-4.686 12.284 0 16.971L387.887 239H12c-6.627 0-12 5.373-12 12v10c0 6.627 5.373 12 12 12h375.887L209.393 451.494c-4.686 4.686-4.686 12.284 0 16.971l7.071 7.07c4.686 4.686 12.284 4.686 16.97 0l211.051-211.05c4.686-4.686 4.686-12.284 0-16.971L233.434 36.465c-4.686-4.687-12.284-4.687-16.97 0z"/></svg></button>
                    </div>
                </div> 
                
                
                <!-- Шаг 8 - Срочность изготовления-->
                <div id="step8" class="quiz-step">
                    <div class="step-title fs-2">Укажите срочность изготовления кухни<br>(это влияет на стоимость)</div>  
                    
                    <div class="form-check-group">
                    <div class="form-check"> 
                        <input type="radio" class="form-check-input" name="form_step8" value="Чем быстрее, тем лучше" id="variant8-01"> 
                        <label class="form-check-label" for="variant8-01"><span class="form-field-text">Чем быстрее, тем лучше</span>  
                        </label> 
                    </div>
                    
                    <div class="form-check"> 
                        <input type="radio" class="form-check-input" name="form_step8" value="В ближайшие 1-3 месяца" id="varian8-02"> 
                        <label class="form-check-label" for="variant8-02"><span class="form-field-text">В ближайшие 1-3 месяца</span>  
                        </label> 
                    </div>
                    
                    <div class="form-check"> 
                        <input type="radio" class="form-check-input" name="form_step8" value="В ближайшие 6 месяцев" id="variant8-03"> 
                        <label class="form-check-label" for="variant8-03"><span class="form-field-text">В ближайшие 6 месяцев</span>  
                        </label> 
                    </div>
                    
                    <div class="form-check"> 
                        <input type="radio" class="form-check-input" name="form_step8" value="Более 6 месяцев" id="variant8-04"> 
                        <label class="form-check-label" for="variant8-04"><span class="form-field-text">Более 6 месяцев</span>  
                        </label> 
                    </div>
                    </div>
                    
                    <div class="quiz-actions show-prev">
                      <button type="button" class="btn btn-transparent quiz-prev" title="На предыдущий шаг" data-prev-step="step7" data-current-step="step8" data-progress="7">
                         <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" width="24px" height="16px"><path class="red" d="M231.536 475.535l7.071-7.07c4.686-4.686 4.686-12.284 0-16.971L60.113 273H436c6.627 0 12-5.373 12-12v-10c0-6.627-5.373-12-12-12H60.113L238.607 60.506c4.686-4.686 4.686-12.284 0-16.971l-7.071-7.07c-4.686-4.686-12.284-4.686-16.97 0L3.515 247.515c-4.686 4.686-4.686 12.284 0 16.971l211.051 211.05c4.686 4.686 12.284 4.686 16.97-.001z"/></svg>
                     </button> 
                      <button type="button" class="btn btn-primary quiz-next" data-next-step="step9" data-current-step="step8" data-progress="9">Далее <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" width="24px" height="16px"><path class="fil0" d="M216.464 36.465l-7.071 7.07c-4.686 4.686-4.686 12.284 0 16.971L387.887 239H12c-6.627 0-12 5.373-12 12v10c0 6.627 5.373 12 12 12h375.887L209.393 451.494c-4.686 4.686-4.686 12.284 0 16.971l7.071 7.07c4.686 4.686 12.284 4.686 16.97 0l211.051-211.05c4.686-4.686 4.686-12.284 0-16.971L233.434 36.465c-4.686-4.687-12.284-4.687-16.97 0z"/></svg></button>
                    </div>
                </div> 
                
                
                
                <!-- Шаг 9 - Дополнительные услуги-->
                <div id="step9" class="quiz-step">
                    <div class="step-title fs-2">Дополнительные услуги</div>  
                    
                    <div class="form-check-group">
                    <div class="form-check"> 
                        <input type="checkbox" class="form-check-input" name="form_step9" value="Не нужны" id="variant9-0" checked="checked" > 
                        <label class="form-check-label" for="variant9-0"><span class="form-field-text">Не нужны</span>  
                        </label> 
                    </div>
                    
                    <div class="form-check"> 
                        <input type="checkbox" class="form-check-input" name="form_step9" value="Рассрочка 0% до 6 месяцев" id="variant9-01"> 
                        <label class="form-check-label" for="variant9-01"><span class="form-field-text">Рассрочка 0% до 6 месяцев</span>  
                        </label> 
                    </div>
                    
                    <div class="form-check"> 
                        <input type="checkbox" class="form-check-input" name="form_step9" value="Технический проект кухни - электрика, вентиляция, сантехника" id="variant9-02"> 
                        <label class="form-check-label" for="variant9-02"><span class="form-field-text">Технический проект кухни - электрика, вентиляция, сантехника</span>  
                        </label> 
                    </div>
                    </div>
                    
                    <div class="quiz-actions show-prev">
                      <button type="button" class="btn btn-transparent quiz-prev" title="На предыдущий шаг" data-prev-step="step8" data-current-step="step9" data-progress="8">
                         <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" width="24px" height="16px"><path class="red" d="M231.536 475.535l7.071-7.07c4.686-4.686 4.686-12.284 0-16.971L60.113 273H436c6.627 0 12-5.373 12-12v-10c0-6.627-5.373-12-12-12H60.113L238.607 60.506c4.686-4.686 4.686-12.284 0-16.971l-7.071-7.07c-4.686-4.686-12.284-4.686-16.97 0L3.515 247.515c-4.686 4.686-4.686 12.284 0 16.971l211.051 211.05c4.686 4.686 12.284 4.686 16.97-.001z"/></svg>
                     </button> 
                      <button type="button" class="btn btn-primary quiz-next" data-next-step="step10" data-current-step="step9" data-progress="10">Далее <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" width="24px" height="16px"><path class="fil0" d="M216.464 36.465l-7.071 7.07c-4.686 4.686-4.686 12.284 0 16.971L387.887 239H12c-6.627 0-12 5.373-12 12v10c0 6.627 5.373 12 12 12h375.887L209.393 451.494c-4.686 4.686-4.686 12.284 0 16.971l7.071 7.07c4.686 4.686 12.284 4.686 16.97 0l211.051-211.05c4.686-4.686 4.686-12.284 0-16.971L233.434 36.465c-4.686-4.687-12.284-4.687-16.97 0z"/></svg></button>
                    </div>
                </div> 
                
                
                <!-- Шаг 10 - Способ связи с Заказчиком-->
                <div id="step10" class="quiz-step">
                    <div class="step-title fs-2">Укажите удобный для вас способ связи,<br>чтобы мы выслали НЕСКОЛЬКО разных вариантов комплектаций вашей будущей кухни</div>  
                    
                    <div class="form-check-group">
                    <div class="form-check"> 
                        <input type="radio" class="form-check-input" name="form_step10" value="Whatsapp" id="variant10-01"> 
                        <label class="form-check-label" for="variant10-01"><span class="form-field-text">Whatsapp</span>  
                        </label> 
                    </div>
                    
                    <div class="form-check"> 
                        <input type="radio" class="form-check-input" name="form_step10" value="Telegram" id="varian10-02"> 
                        <label class="form-check-label" for="variant10-02"><span class="form-field-text">Telegram</span>  
                        </label> 
                    </div>
                    
                    <div class="form-check"> 
                        <input type="radio" class="form-check-input" name="form_step10" value="Перезвоните, есть вопросы" id="variant10-03"> 
                        <label class="form-check-label" for="variant10-03"><span class="form-field-text">Перезвоните, есть вопросы</span>  
                        </label> 
                    </div>
                    </div>
                    
                    <div class="quiz-actions show-prev">
                      <button type="button" class="btn btn-transparent quiz-prev" title="На предыдущий шаг" data-prev-step="step9" data-current-step="step10" data-progress="9">
                         <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" width="24px" height="16px"><path class="red" d="M231.536 475.535l7.071-7.07c4.686-4.686 4.686-12.284 0-16.971L60.113 273H436c6.627 0 12-5.373 12-12v-10c0-6.627-5.373-12-12-12H60.113L238.607 60.506c4.686-4.686 4.686-12.284 0-16.971l-7.071-7.07c-4.686-4.686-12.284-4.686-16.97 0L3.515 247.515c-4.686 4.686-4.686 12.284 0 16.971l211.051 211.05c4.686 4.686 12.284 4.686 16.97-.001z"/></svg>
                     </button> 
                      <button type="button" class="btn btn-primary quiz-next" data-next-step="step11" data-current-step="step10" data-progress="11">Далее <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" width="24px" height="16px"><path class="fil0" d="M216.464 36.465l-7.071 7.07c-4.686 4.686-4.686 12.284 0 16.971L387.887 239H12c-6.627 0-12 5.373-12 12v10c0 6.627 5.373 12 12 12h375.887L209.393 451.494c-4.686 4.686-4.686 12.284 0 16.971l7.071 7.07c4.686 4.686 12.284 4.686 16.97 0l211.051-211.05c4.686-4.686 4.686-12.284 0-16.971L233.434 36.465c-4.686-4.687-12.284-4.687-16.97 0z"/></svg></button>
                    </div>
                </div> 
                
                
                <!-- Шаг 11 -->
                <div id="step11" class="quiz-step">
                    <div class="step-title fs-2">Ожидайте нашего сообщения или звонка<br>(конфиденциальность контактных данных гарантируем)</div>  
                    
                    <div class="form-input-group">
                        <div class="form-input"> 
                            <input type="phone" class="form-control" name="phone" id="phone"> 
                            <label class="form-label" for="phone"><span class="form-field-text">Whatsapp, Telegram или Телефон</span></label> 
                        </div>
                    </div>
                    
                    <div id="quizStepsFormSuccessful"></div>
                    
                    <div class="quiz-actions show-prev">
                      <button type="button" class="btn btn-transparent quiz-prev" title="На предыдущий шаг" data-prev-step="step10" data-current-step="step11" data-progress="10">
                         <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" width="24px" height="16px"><path class="red" d="M231.536 475.535l7.071-7.07c4.686-4.686 4.686-12.284 0-16.971L60.113 273H436c6.627 0 12-5.373 12-12v-10c0-6.627-5.373-12-12-12H60.113L238.607 60.506c4.686-4.686 4.686-12.284 0-16.971l-7.071-7.07c-4.686-4.686-12.284-4.686-16.97 0L3.515 247.515c-4.686 4.686-4.686 12.284 0 16.971l211.051 211.05c4.686 4.686 12.284 4.686 16.97-.001z"/></svg>
                     </button> 
                      <button type="submit" class="btn btn-primary quiz-submit" onclick="document.getElementById('quizСheck').value = 'stopSpam';">Далее <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" width="24px" height="16px"><path class="fil0" d="M216.464 36.465l-7.071 7.07c-4.686 4.686-4.686 12.284 0 16.971L387.887 239H12c-6.627 0-12 5.373-12 12v10c0 6.627 5.373 12 12 12h375.887L209.393 451.494c-4.686 4.686-4.686 12.284 0 16.971l7.071 7.07c4.686 4.686 12.284 4.686 16.97 0l211.051-211.05c4.686-4.686 4.686-12.284 0-16.971L233.434 36.465c-4.686-4.687-12.284-4.687-16.97 0z"/></svg></button>
                    </div>
                </div> 
                
                
        </div> 
    </form>

 </div>

JavaScript / jQuery

//
// JQuery, который отслеживает сделанный Пользователем выбор,
// проверяет введённые данные и скрывает или показывает блоки Квиза
//
$(function() {
$.fn.extend({
addTemporaryClass: function(className, duration) {
var elements = this;
setTimeout(function() {
elements.removeClass(className);
}, duration);
return this.each(function() {
$(this).addClass(className);
});
}
});
$('.quiz-next').on('click', function() {
let nextStep = $(this).attr('data-next-step');
let currentStep = $(this).attr('data-current-step');
let progressScale = $(this).attr('data-progress');
console.log(currentStep);
if($('#'+currentStep+' input.form-field-input').is(':checked') || $('#'+currentStep+' input.form-check-input').is(':checked')) {
$('#'+currentStep).removeClass('active');
$('#'+nextStep).addClass('active');
$('#quizProgress .progress-bar').attr('aria-valuenow', progressScale).removeClass(function (index, className) {
return (className.match (/(^|\s)scale-\S+/g) || []).join(' '); }).addClass('scale-'+progressScale).html(progressScale);
$('html, body').animate({
scrollTop: $('#'+nextStep).offset().top - 150
}, 200);
}
else
{
$('#'+currentStep).addTemporaryClass('form-field-error', 1000);
}
});
$('.quiz-prev').on('click', function() {
let prevtStep = $(this).attr('data-prev-step');
let currentStep = $(this).attr('data-current-step');
let progressScale = $(this).attr('data-progress');
//console.log(prevtStep + currentStep);
$('#'+currentStep).removeClass('active');
$('#'+prevtStep).addClass('active');
$('#quizProgress .progress-bar').attr('aria-valuenow', progressScale).removeClass(function (index, className) {
return (className.match (/(^|\s)scale-\S+/g) || []).join(' '); }).addClass('scale-'+progressScale).html(progressScale);
$('html, body').animate({
scrollTop: $('#'+prevtStep).offset().top - 150
}, 200);
});
var errorTxt = 'Ошибка отправки формы';
// ЗАЯВКА
$('#quizStepsForm').validate({
rules: {
phone: "required"
},
messages: {
phone: "Заполните это поле"
},
focusInvalid: true,
errorClass: "input_error",
submitHandler: function(form){
var form = document.forms.quizStepsForm,
formData = new FormData(form),
xhr = new XMLHttpRequest();
xhr.open("POST", "/mform/quizStepsForm.php");
xhr.onreadystatechange = function() {
if (xhr.readyState == 4) {
if(xhr.status == 200) {
$("#quizStepsFormSuccessful").html('<p class="h6 text-center">Ваша заявка принята! Ответим вам в самое ближайшее время.<p>');
setTimeout(function(){
location.reload();
}, 3000);
}
}
};
xhr.send(formData);
}
});
});

Стили CSS

#quizStepsForm .quiz-step, #quizStepsForm .form-field-input {
display:none
}
#quizStepsForm .quiz-step.active {
display:block
}
#quizStepsForm .step-title {
text-align:center;
margin:0 auto 20px;
max-width:70%;
line-height: 1.1;
}
#quizStepsForm .form-field-group {
position: relative;
display: flex;
justify-content: center;
flex-flow: row wrap;
}
#quizStepsForm .form-check-group, #quizStepsForm .form-input-group {
position: relative;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
#quizStepsForm .form-field-group .form-field-item {
display: block;
width: 25%;
padding: 15px 25px;
flex-shrink: 0;
font-size: 16px;
line-height: 1.625;
letter-spacing: .3px;
cursor: pointer;
text-align:center
}
#quizStepsForm .form-check-group .form-check {
max-width:400px;
}
#quizStepsForm .form-check-group .form-check {
display: block;
padding: 8px 0 8px 60px;
width: 100%;
text-align:left
}
#quizStepsForm .form-input-group .form-input {
width:100%;
max-width:500px;
padding: 15px 0 10px;
}
#quizStepsForm .form-field-item label {
cursor:pointer;
}
#quizStepsForm .form-field-item label > .form-field-image {
border:4px solid transparent
}
#quizStepsForm label:not(.form-check-label) .form-field-text {
display:block;
padding-top:15px;
}
#quizStepsForm .quiz-actions {
display: flex;
align-items: center;
justify-content: center;
max-width: 100%;
width: 100%;
pointer-events: all;
margin-top:25px;
}
#quizStepsForm .quiz-actions .btn {
margin:0 10px;
}
#quizStepsForm input.form-field-input:checked + label > .form-field-image {
border-color: #FFA529 !important
}
#quizStepsForm .quiz-prev[data-step=step-0] {
display:none
}
#quizStepsForm .btn.quiz-prev {
padding:14px 30px 14px
}
#quizStepsForm .btn.quiz-next, #quizStepsForm .btn.quiz-submit {
padding:14px 40px 14px 55px
}
#quizStepsForm .form-field-error {
animation: 1.2s ease-in-out 0s normal none infinite running trambling-animation;
}
@keyframes trambling-animation {
0%, 50%, 100% {
transform: rotate(0deg);
}
10%, 30% {
transform: rotate(-1deg);
}
20%, 40% {
transform: rotate(1deg);
}
}
#quizProgress.progress {
margin-top:15px;
margin-bottom:30px;
}
#quizProgress > .progress-bar {
background-color: #FFA529 !important;
}
#quizProgress .progress-bar.scale-1 {
width:9.09%
}
#quizProgress .progress-bar.scale-2 {
width:18.18%
}
#quizProgress .progress-bar.scale-3 {
width:27.27%
}
#quizProgress .progress-bar.scale-4 {
width:36.36%
}
#quizProgress .progress-bar.scale-5 {
width:45.45%
}
#quizProgress .progress-bar.scale-6 {
width:54.54%
}
#quizProgress .progress-bar.scale-7 {
width:63.63%
}
#quizProgress .progress-bar.scale-8 {
width:72.72%
}
#quizProgress .progress-bar.scale-9 {
width:81.81%
}
#quizProgress .progress-bar.scale-10 {
width:90.90%
}
#quizProgress .progress-bar.scale-11 {
width:100%
}
@media (max-width:767.98px) {
#quizStepsForm .form-field-group .form-field-item {
flex:1 50%;
max-width:50%
}
#quizStepsForm .btn.quiz-next, #quizStepsForm .btn.quiz-submit {
padding: 12px 30px 12px 45px;
}
}
Квиз