<?php

	defined('_JEXEC') or die;

?>
<div id="quizz" class="mdl-quizz sect-xs-3 sect-lg-5 sect-xl-7"> 
	<div id="quizz-box" class="quizz-box"> 
		<form class="form quizz__inner tab-content h-100" action="#">
		<div class="quizz__cont">
			<div class="row">
				<div class="quizz__left col-12 col-xl-7">
					<div class=" quizz__inner">
						<div class="quizz_info">
							<div class="title">Ответьте на 6мис вопросов и узнайте стоимость вашего ремонта</div>
						</div>
						
							<div id="quizz-content-1" class="quizz-tab quizz-1">
								<div class="d-flex flex-column h-100">
									<div class="meter blue nostripes d-none">
										<span style="width:17%"></span>
									</div>
									<div class="progressbar">  
										<span style="width: 17%"></span>
										<text>Вопрос 1 из 5</text>
									</div>
									<div class="quizz__name tac">Ремонт какого объекта вам нужен?</div>
									<div class="quizz__answer">
										<div class="row ans__row">
											<div class="ans__outer ans__1 col-6 col-sm-6 col-md-4">
												<label class="ans__item"> 
													<input name="animal1" type="radio" value="Новостройка" /> 
													<div class="ans__inner">
														<span class="ans__img"> 
															<img loading="lazy" src="images/quizz/1/1.jpg" alt="Новостройка" /> 
														</span>  
														<div class="mdl-hdr d-flex align-items-center">
															<span class="ans__check_pos"> 
																<span class="ans__check"></span>
															</span>
															<span class="ans__title">Новостройка</span>
														</div>
													</div> 
												</label>
											</div>
											<div class="ans__outer ans__2 col-6 col-sm-6 col-md-4">
												<label class="ans__item"> 
													<input name="animal1" type="radio" value="Вторичка" /> 
													<div class="ans__inner">  
														<span class="ans__img"> 
															<img loading="lazy" src="images/quizz/1/2.jpg" alt="Вторичка" /> 
														</span>
														<div class="mdl-hdr d-flex align-items-center">
															<span class="ans__check_pos">
																<span class="ans__check"></span>	
															</span>	
															<span class="ans__title">Вторичка</span>
														</div>
													</div> 
												</label>
											</div> 
											<div class="ans__outer ans__3 col-6 col-sm-6 col-md-4">
												<label class="ans__item"> 
													<input name="animal1" type="radio" value="Дом, коттедж" /> 
													<div class="ans__inner">
														<span class="ans__img"> 
															<img loading="lazy" src="images/quizz/1/3.jpg" alt="Дом, коттедж" /> 
														</span>
														<div class="mdl-hdr d-flex align-items-center">
														<span class="ans__check_pos">
															<span class="ans__check"></span> 
														</span> 
														<span class="ans__title">Дом, коттедж</span>
														</div>
													</div> 
												</label>
											</div>
											<!-- # ITEM -->
											<div class="quizz__btn col-12 d-flex ailin-items-center justify-content-between">
												<p><b>Выберите вариант ответа</b> и нажмите кнопку “Далее”</p>
												<a class="button next" hrf="#quizz-content-2">
													<span>Далее</span>
												</a>
											</div>
										</div>
									</div>
								</div>
							</div>
							<!-- # quizz 1 --> <!-- quizz 2 -->
							<div id="quizz-content-2" class="quizz-tab quizz-2">
								<div class="d-flex flex-column h-100">
									<div class="meter blue nostripes d-none">
										<span style="width:34%"></span>
									</div>
									<div class="progressbar"> 
										<span style="width: 34%"></span>
										<text>Вопрос 2 из 5</text>
									</div>
									<div class="quizz__name tac">Укажите площадь</div>
									<div class="quizz__answer check">
										<div class="row ans__row">
											<div class="ans__outer ans__2 col-12 col-sm-6">
												<label class="ans__item"> 
													<input name="animal2" type="checkbox" value="до 50 кв.м." />
													<div class="ans__inner">
														<span class="ans__check_pos"> 
															<span class="ans__check"></span>
														</span>
														<span class="ans__title">До 50 м<sup>2</sup></span> 
													</div> 
												</label>
											</div>
											<div class="ans__outer ans__2 col-12 col-sm-6">
												<label class="ans__item"> 
													<input name="animal2" type="checkbox" value="50-75 кв.м." /> 
													<div class="ans__inner"> 
														<span class="ans__check_pos">
															<span class="ans__check"></span>	
														</span>	
														<span class="ans__title">50-75 м<sup>2</sup></span>
													</div> 
												</label>
											</div> 
											<div class="ans__outer ans__2 col-12 col-sm-6">
												<label class="ans__item"> 
													<input name="animal2" type="checkbox" value="75-100 кв.м." /> 
													<div class="ans__inner"> 
														<span class="ans__check_pos">
															<span class="ans__check"></span> 
														</span> 
														<span class="ans__title">75-100 м<sup>2</sup></span> 
													</div> 
												</label>
											</div>
											<div class="ans__outer ans__2 col-12 col-sm-6">
												<label class="ans__item"> 
													<input name="animal2" type="checkbox" value="100-120 кв.м." /> 
													<div class="ans__inner"> 
														<span class="ans__check_pos">
															<span class="ans__check"></span> 
														</span> 
														<span class="ans__title">100-120 м<sup>2</sup></span> 
													</div> 
												</label>
											</div>	
											<div class="ans__outer ans__2 col-12 col-sm-6">
												<label class="ans__item"> 
													<input name="animal2" type="checkbox" value="Более 120 кв.м." /> 
													<div class="ans__inner"> 
														<span class="ans__check_pos">
															<span class="ans__check"></span> 
														</span>				
														<span class="ans__title">Более 120 м<sup>2</sup></span> 
													</div> 
												</label>
											</div>	 
											<div class="ans__outer ans__2 col-12 col-sm-6">
												<label class="ans__item"> 
													<input name="animal2" type="checkbox" value="Не знаю, нужен замер" /> 
													<div class="ans__inner"> 
														<span class="ans__check_pos">
															<span class="ans__check"></span> 
														</span> 
														<span class="ans__title">Не знаю, нужен замер</span>
													</div> 
												</label>
											</div>
											<!-- # ITEM -->
											<div class="quizz__btn col-12 d-flex ailin-items-center justify-content-between">
												<a class="button prev" hrf="#quizz-content-1" >
													<span>Назад</span>
												</a>
												<a class="button next" hrf="#quizz-content-3" >
													<span>Далее</span>
												</a>
											</div>
										</div>
									</div>
								</div>
							</div>
							<!-- # quizz 2 --> <!-- quizz 3 -->
							<div id="quizz-content-3" class="quizz-tab quizz-3">
								<div class="d-flex flex-column h-100">
									<div class="meter blue nostripes d-none">
										<span style="width:50%"></span>
									</div>
									<div class="progressbar"> 
										<span style="width: 50%"></span>
										<text>Вопрос 3 из 5</text>
									</div>
									<div class="quizz__name tac">Какое текущее состояние объекта?</div>
									<div class="quizz__answer">
										<div class="row ans__row">
											<div class="ans__outer ans__3 col-6 col-sm-6">
												<label class="ans__item"> 
													<input name="animal3" type="radio" value="Без отделки" /> 
													<div class="ans__inner">
														<span class="ans__img"> 
															<img class="small-img" loading="lazy" src="images/quizz/3/1.jpg" alt="Без отделки" /> 
														</span>  
														<div class="mdl-hdr d-flex align-items-center">
															<span class="ans__check_pos"> 
																<span class="ans__check"></span>
															</span>
															<span class="ans__title">Без отделки</span>
														</div>
													</div> 
												</label>
											</div>		
											<div class="ans__outer ans__3 col-6 col-sm-6">
												<label class="ans__item"> 
													<input name="animal3" type="radio" value="Черновая отделка (штукатурка, стяжка)" /> 
													<div class="ans__inner">
														<span class="ans__img"> 
															<img class="small-img" loading="lazy" src="images/quizz/3/2.jpg" alt="Черновая отделка (штукатурка, стяжка)" /> 
														</span>  
														<div class="mdl-hdr d-flex align-items-center">
															<span class="ans__check_pos"> 
																<span class="ans__check"></span>
															</span>
															<span class="ans__title">Черновая отделка (штукатурка, стяжка)</span>
														</div>
													</div> 
												</label>
											</div>
											<div class="ans__outer ans__3 col-6 col-sm-6">
												<label class="ans__item"> 
													<input name="animal3" type="radio" value="Получистовая отделка “White Box”" /> 
													<div class="ans__inner">
														<span class="ans__img"> 
															<img class="small-img" loading="lazy" src="images/quizz/3/3.jpg" alt="Получистовая отделка “White Box”" /> 
														</span>  
														<div class="mdl-hdr d-flex align-items-center">
															<span class="ans__check_pos"> 
																<span class="ans__check"></span>
															</span>
															<span class="ans__title">Получистовая отделка “White Box”</span>
														</div>
													</div> 
												</label>
											</div>	
											<div class="ans__outer ans__3 col-6 col-sm-6">
												<label class="ans__item"> 
													<input name="animal3" type="radio" value="Чистовая отделка от застройщика	" /> 
													<div class="ans__inner">
														<span class="ans__img"> 
															<img class="small-img" loading="lazy" src="images/quizz/3/4.jpg" alt="Чистовая отделка от застройщика	" /> 
														</span>  
														<div class="mdl-hdr d-flex align-items-center">
															<span class="ans__check_pos"> 
																<span class="ans__check"></span>
															</span>
															<span class="ans__title">Чистовая отделка от застройщика	</span>
														</div>
													</div> 
												</label>
											</div>					
											<!-- # ITEM -->
											<div class="quizz__btn col-12 d-flex ailin-items-center justify-content-between">
												<a class="button prev" hrf="#quizz-content-2" >
													<span>Назад</span>
												</a>
												<a class="button next" hrf="#quizz-content-4" >
													<span>Далее</span>
												</a>
											</div>
										</div>
									</div>
								</div>
							</div>
							<!-- # quizz 3 --> <!-- quizz 4 -->
							<div id="quizz-content-4" class="quizz-tab quizz-4">
								<div class="d-flex flex-column h-100">
									<div class="meter blue nostripes d-none">
										<span style="width:66%"></span>
									</div>
									<div class="progressbar"> 
										<span style="width: 66%"></span>
										<text>Вопрос 4 из 5</text>
									</div>
									<div class="quizz__name tac">Есть ли дизайн-проект?</div>
									<div class="quizz__answer check">
										<div class="row ans__row">
											<div class="ans__outer ans__4 col-12 col-sm-6">
												<label class="ans__item"> 
													<input name="animal4" type="checkbox" value="Да, есть" />
													<div class="ans__inner">
														<span class="ans__check_pos"> 
															<span class="ans__check"></span>
														</span>
														<span class="ans__title">Да, есть</span> 
													</div> 
												</label>
											</div>
											<div class="ans__outer ans__4 col-12 col-sm-6">
												<label class="ans__item"> 
													<input name="animal4" type="checkbox" value="Будет, пока разрабатываем" />
													<div class="ans__inner">
														<span class="ans__check_pos"> 
															<span class="ans__check"></span>
														</span>
														<span class="ans__title">Будет, пока разрабатываем</span> 
													</div> 
												</label>
											</div>
											<div class="ans__outer ans__4 col-12 col-sm-6">
												<label class="ans__item"> 
													<input name="animal4" type="checkbox" value="Нет, но понадобится" />
													<div class="ans__inner">
														<span class="ans__check_pos"> 
															<span class="ans__check"></span>
														</span>
														<span class="ans__title">Нет, но понадобится</span> 
													</div> 
												</label>
											</div>
											<div class="ans__outer ans__4 col-12 col-sm-6">
												<label class="ans__item"> 
													<input name="animal4" type="checkbox" value="Еще не определились" />
													<div class="ans__inner">
														<span class="ans__check_pos"> 
															<span class="ans__check"></span>
														</span>
														<span class="ans__title">Еще не определились</span> 
													</div> 
												</label>
											</div>
											<div class="ans__outer ans__4 col-12 col-sm-6">
												<label class="ans__item"> 
													<input name="animal4" type="checkbox" value="Нет, он не нужен" />
													<div class="ans__inner">
														<span class="ans__check_pos"> 
															<span class="ans__check"></span>
														</span>
														<span class="ans__title">Нет, он не нужен</span> 
													</div> 
												</label>
											</div>
											<!-- # ITEM -->
											<div class="quizz__btn col-12 d-flex ailin-items-center justify-content-between">
												<a class="button prev" hrf="#quizz-content-3" >
													<span>Назад</span>
												</a>
												<a class="button next" hrf="#quizz-content-5" >
													<span>Далее</span>
												</a>
											</div>
										</div>
									</div>
								</div>
							</div>
							<!-- # quizz 4 --> <!-- # quizz 5 -->
							<div id="quizz-content-5" class="quizz-tab quizz-5">
								<div class="d-flex flex-column h-100">
									<div class="meter blue nostripes d-none">
										<span style="width:82%"></span>
									</div>
									<div class="progressbar"> 
										<span style="width: 82%"></span>
										<text>Вопрос 5 из 5</text>
									</div>
									<div class="quizz__name tac">Когда хотите приступить к ремонту?</div>
									<div class="quizz__answer check">
										<div class="row ans__row">
											<div class="ans__outer ans__5 col-12 col-sm-6">
												<label class="ans__item"> 
													<input name="animal5" type="checkbox" value="Как можно скорее" />
													<div class="ans__inner">
														<span class="ans__check_pos"> 
															<span class="ans__check"></span>
														</span>
														<span class="ans__title">Как можно скорее</span> 
													</div> 
												</label>
											</div>
											<div class="ans__outer ans__5 col-12 col-sm-6">
												<label class="ans__item"> 
													<input name="animal5" type="checkbox" value="В течение месяца" />
													<div class="ans__inner">
														<span class="ans__check_pos"> 
															<span class="ans__check"></span>
														</span>
														<span class="ans__title">В течение месяца</span> 
													</div> 
												</label>
											</div>
											<div class="ans__outer ans__5 col-12 col-sm-6">
												<label class="ans__item"> 
													<input name="animal5" type="checkbox" value="В течение 3 месяцев" />
													<div class="ans__inner">
														<span class="ans__check_pos"> 
															<span class="ans__check"></span>
														</span>
														<span class="ans__title">В течение 3 месяцев</span> 
													</div> 
												</label>
											</div>
											<div class="ans__outer ans__5 col-12 col-sm-6">
												<label class="ans__item"> 
													<input name="animal5" type="checkbox" value="Ждем ключи от квартиры" />
													<div class="ans__inner">
														<span class="ans__check_pos"> 
															<span class="ans__check"></span>
														</span>
														<span class="ans__title">Ждем ключи от квартиры</span> 
													</div> 
												</label>
											</div>
											<div class="ans__outer ans__5 col-12 col-sm-6">
												<label class="ans__item"> 
													<input name="animal5" type="checkbox" value="Просто интересуюсь" />
													<div class="ans__inner">
														<span class="ans__check_pos"> 
															<span class="ans__check"></span>
														</span>
														<span class="ans__title">Просто интересуюсь</span> 
													</div> 
												</label>
											</div>
											<!-- # ITEM -->
											<div class="quizz__btn col-12 d-flex ailin-items-center justify-content-between">
												<a class="button prev" hrf="#quizz-content-4" >
													<span>Назад</span>
												</a>
												<a class="button next" hrf="#quizz-content-final" >
													<span>Далее</span>
												</a>
											</div>
										</div>
									</div>
								</div>
							</div>
							<!-- # quizz 3 --> <!-- FINAL -->
							<div id="quizz-content-final" class="quizz-tab quizz-final">
								<div class="d-flex flex-column align-items-center h-100"> 
									<div class="meter blue nostripes d-none">
										<span style="width:100%"></span>
									</div>
									<div class="progressbar"> 
										<span style="width: 100%"></span>
										<text>Опрос пройден</text>
									</div>
									<div class="final__cont">
										<div class="final__title">Оставьте номер телефона, чтобы получить расчет сметы на ремонт.</div>
										<div class="final__inp">
											<div class="final__label">Выберите удобный способ связи:</div>
											<div class="final__vals">
												<label class="final__item">
													<input type="checkbox" name="connect[]" value="Телефон">
													<span class="final__in">
														<i class="fas fa-phone"></i>
													</span>
												</label>
												<label class="final__item">
													<input type="checkbox" name="connect[]" value="Whatsapp">
													<span class="final__in">
														<i class="fab fa-whatsapp"></i>
													</span>
												</label>
												<label class="final__item">
													<input type="checkbox" name="connect[]" value="Viber">
													<span class="final__in">
														<i class="fab fa-viber"></i>
													</span>
												</label>
												<label class="final__item">
													<input type="checkbox" name="connect[]" value="Telegram">
													<span class="final__in">
														<i class="fab fa-telegram-plane"></i>
													</span>
												</label>
											</div>
										</div>
										<div class="final__bottom">
											<div class="form__inp">
												<input class="form__input" name="phone" type="tel" placeholder="+7 (___) ___ - -__ - __" />
											</div>
											<div class="form__subm quizz__btn">
												<button class="button button_big form__submit" type="submit"> 
													<span>Отправить заявку </span> 
												</button>
											</div>
										</div>
									</div>
								</div>
							</div>
							<div class="quizz-err col-12" style="display:none;">
								Выберите вариант ответа
							</div>
							<div id="quizz-content-thanks" class="quizz-final quizz-tab">
								<div class="d-flex flex-column justify-content-center align-items-center h-100">
									<div class="meter blue nostripes d-none">
										<span style="width:100%"></span>
									</div>
									<div class="progressbar"> 
										<span style="width: 100%"></span>
									</div>
									<div class="final__title">Заявка отправлена! </div>
									<div class="final__sub"></div>
								</div>
							</div>
							<!-- # FINAL --> 
							<input name="form" type="hidden" value="Квиз" />
						
					</div>
				</div>
				<div class="right col-xl-5 d-none d-xl-block">
					<div class="right__inner">
						<img src="modules/mod_quiz/images/quizz_boss.jpg" alt="quizz_boss" />
						<span>Ответьте на вопросы, чтобы получить смету и сроки будущего ремонта, а также консультацию нашего прораба</span>
					</div>
				</div>
			</div>
		</div>
		<section class="preloader hidden">
			<div class='sk-folding-cube'>
				<div class='sk-cube sk-cube-1'></div>
				<div class='sk-cube sk-cube-2'></div>
				<div class='sk-cube sk-cube-4'></div>
				<div class='sk-cube sk-cube-3'></div>
			</div>
		</section>	
		<div class="preloader-bg hidden"></div>
		</form>
	</div>
</div>