javascript Quize
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了javascript Quize相关的知识，希望对你有一定的参考价值。
<div id="wizard">
<h3>1</h3>
<div>
<div class="lead mb-4">Вы строите дом для сезонного или постоянного проживания?</div>
<div>
<input name="season" type="radio" value="Сезонный" id="season1" class="radio-img next start"><label for="season1" class="mr-lg-4"><img src="<?php echo get_template_directory_uri() ?>/images/img-5233.svg" class="shadow-sm"></label>
<input name="season" type="radio" value="Постоянный" id="season2" class="radio-img next start"><label for="season2"><img src="<?php echo get_template_directory_uri() ?>/images/img-5234.svg" class="shadow-sm"></label>
</div>
<!-- <a href="" class="js-finish">Закончить</a> -->
</div>
<h3>2</h3>
<div>
<div class="lead mb-4">Укажите параметры дома</div>
<div class="row mb-4">
<div class="col-lg-3">
<div class="h4 mb-4">Площадь дома</div>
<input name="s-living" type="radio" value="менее 80" id="s-living1" class="radio"><label for="s-living1">до 80 м<sup>2</sup></label><br/>
<input name="s-living" type="radio" value="80-170" id="s-living2" class="radio"><label for="s-living2">80-170 м<sup>2</sup></label><br/>
<input name="s-living" type="radio" value="более 170" id="s-living3" class="radio"><label for="s-living3">более 170 м<sup>2</sup></label><br/>
</div>
<div class="col-lg-3 mt-lg-0 mt-4">
<div class="h4 mb-4">Этажность</div>
<input name="floors" type="radio" value="1 этаж" id="floors1" class="radio"><label for="floors1">1 этаж</label><br/>
<input name="floors" type="radio" value="2 этажа" id="floors2" class="radio"><label for="floors2">2 этажа</label><br/>
<!-- <input name="floors" type="radio" value="3 этажа" id="floors3" class="radio"><label for="floors3">3 этажа</label> -->
</div>
<!-- <div class="col-lg-3 mt-lg-0 mt-4">
<div class="h4 mb-4">Размеры основания дома</div>
<div>от <input name="s-building" type="number" min="3" value="3" class="form-control-sm w-25"> <span aria-hidden="true">×</span> <input name="s-building" type="number" min="3" value="3" class="form-control-sm w-25"></div>
<div>до <input name="s-building" type="number" min="3" value="4" class="form-control-sm w-25"> <span aria-hidden="true">×</span> <input name="s-building" type="number" min="3" value="4" class="form-control-sm w-25"></div>
</div> -->
</div>
<a href="" class="btn btn-primary next-btn">Далее</a>
</div>
<h3>3</h3>
<div>
<div class="lead mb-2">Дома в какой ценовой категории вы рассматриваете?</div>
<p class="mb-4">Наши цены указаны «под ключ» и включают фундамент, все материалы, доставку и работы по строительству.</p>
<div class="h4 mb-4">Цена</div>
<input name="price" type="radio" value="до 1 млн" id="price1" class="radio next"><label for="price1">до 1 000 т.р.</label><br/>
<input name="price" type="radio" value="1-4 млн" id="price2" class="radio next"><label for="price2">1 000-4 000 т.р.</label><br/>
<input name="price" type="radio" value="более 4 млн" id="price3" class="radio next"><label for="price3">более 4 000 т.р.</label>
</div>
<h3>4</h3>
<div>
<div class="lead mb-4">Вам нужна помощь с подбором и оформлением кредита?</div>
<input name="credit" type="radio" value="Рассматриваю кредит" id="credit1" class="radio next"><label for="credit1">Да, мне были бы интересны предложения по кредитам от 12%</label><br/>
<input name="credit" type="radio" value="Не рассматриваю кредит" id="credit2" class="radio next"><label for="credit2">Нет</label><br/>
</div>
<h3>5</h3>
<div>
<div class="lead mb-4">Вам нужно обустройство участка: малые строения, ограждения?</div>
<input name="arrangement" type="radio" value="Нужно обустройство" id="arrangement1" class="radio next"><label for="arrangement1">Да, я хочу обустроить участок или построить гараж, беседку, баню</label><br/>
<input name="arrangement" type="radio" value="Не нужно обустройство" id="arrangement2" class="radio next"><label for="arrangement2">Нет</label><br/>
</div>
<h3>6</h3>
<div>
<div class="lead mb-2">Когда вы планируете начать строительство?</div>
<p class="mb-4">Обычно мы строим дом в течение 45 дней, гарантированно — в течение 3-х месяцев. Строим круглый год.</p>
<div class="h4 mb-4">Начало строительства</div>
<input name="start" type="radio" value="3 месяца" id="start1" class="radio finish"><label for="start1">В течение 3-х месяцев, до <?php echo me_time('do', 3); ?>.</label><br/>
<input name="start" type="radio" value="Полгода" id="start2" class="radio finish"><label for="start2">В течение полугода.</label><br/>
<input name="start" type="radio" value="Год и более" id="start3" class="radio finish"><label for="start3">В течение года или позже.</label><br/>
</div>
</div>$( document ).ready(function() {
console.log("DOM Ready");
var settings = {
/* Appearance */
headerTag: "h3",
bodyTag: "div",
contentContainerTag: "div",
actionContainerTag: "div",
stepsContainerTag: "div",
cssClass: "wizard",
stepsOrientation: $.fn.steps.stepsOrientation.horizontal,
/* Templates */
titleTemplate: '<span class="number">#index#</span>',
loadingTemplate: '<span class="spinner"></span> #text#',
/* Behaviour */
autoFocus: true,
// enableAllSteps: false,
// enableKeyNavigation: true,
enablePagination: false,
suppressPaginationOnFocus: false,
// enableContentCache: true,
// enableCancelButton: true,
enableFinishButton: false,
// preloadContent: false,
// showFinishButtonAlways: false,
// forceMoveForward: false,
// saveState: false,
startIndex: 0,
/* Transition Effects */
transitionEffect: $.fn.steps.transitionEffect.fade,
// transitionEffect: $.fn.steps.transitionEffect.slideLeft,
transitionEffectSpeed: 200,
/* Labels */
labels: {
cancel: "Отменить",
current: "",
pagination: "Pagination",
finish: "Закончить",
next: "Далее",
previous: "Назад",
loading: "Загрузка ...",
},
onFinishing: function (event, currentIndex) {
console.log("Finished");
var floor = $('input[name="floors"]:checked').val();
var area = $('input[name="s-living"]:checked').val();
var price = $('input[name="price"]:checked').val();
var season = $('input[name="season"]:checked').val();
switch (area) {
case 'менее 80':
area = 'less-80';
break;
case '80-170':
area = '80-170';
break;
case 'более 170':
area = 'above-170';
break;
default:
area = 'living-area';
};
switch (floor) {
case '1 этаж':
floor = '1-floor';
break;
case '2 этажа':
floor = '2-floor';
break;
default:
floor = 'floor';
};
switch (price) {
case 'до 1 млн':
price = 'less-1-mln';
break;
case '1-4 млн':
price = '1-4-mln';
break;
case 'более 4 млн':
price = 'above-4-mln';
break;
default:
price = 'price';
};
switch (season) {
case 'Сезонный':
season = 'summer';
break;
case 'Постоянный':
season = 'winter';
break;
default:
season = 'summer';
};
getProjects( 20, floor, area, price, season );
// Если критериев мало и проектов много?
$("#s9322").fadeOut(function() {
$('#s8922').fadeIn(function(){
smothScrollTo('#s8922');
});
});
setForm();
redBoxClose();
var url = 'http://terem.loc/?proj_floor=' + floor + '&proj_area=' + area + '&proj_price=' + price;
$('input[name="h-url"]').val(url);
console.log(url);
console.log('FINISHQUIZE');
yaCounter51427798.reachGoal('FINISHQUIZE');
return true;
}
};
$("#wizard").steps( settings );
function stepNext() {
$("#wizard").steps("next");
}
function stepFinish() {
$("#wizard").steps("finish");
}
$(".next").change(function(e) {
setTimeout( stepNext, 500);
});
$(".start").change(function(e) {
console.log("Начали квиз");
// redBoxClose();
yaCounter51427798.reachGoal('STARTQUIZE');
});
$(".next-btn").click(function(e) {
e.preventDefault();
stepNext();
});
$(".finish").change(function(e) {
setTimeout( stepFinish, 500);
});
$('.js-finish').click(function(e) {
e.preventDefault();
setTimeout( stepFinish, 500);
});
});以上是关于javascript Quize的主要内容，如果未能解决你的问题，请参考以下文章
javascript JavaScript isset（）等效： - JavaScript
JavaScript 使用JavaScript更改CSS（JavaScript）