<![CDATA[<style>
[name="start_btn"],
[name="back_btn"],
[name="repeat_text"],
[name="share"]
{cursor:pointer;}
[name*="start_"].hide
{
z-index:-1!important;
left:-1000px;
}
[name*="start_btn"]
{
z-index:220;
}
[name^="st_"][name$="_desc"].active {left:52px!important;}
[name^="st_"][name$="_more"].active {left:52px!important; cursor:pointer;}
[name^="st_"][name$="_qtitle"].active {left:57px!important; }
[name^="st_"][name*="_qlist_i_"].active {left:57px!important; cursor:pointer;}
[name^="st_"][name*="_qlist_v_"].active {left:104px!important; cursor:pointer;}
[name^="st_"][name$="_back"].active {left:66px!important; cursor:pointer;}
[name^="st_"][name$="_restitle"].active {left:57px!important;}
[name^="st_"][name$="_rdesc"].active {left:57px!important;}
[name^="st_"][name$="_next"].active {left:57px!important; cursor:pointer;}
[name="qbrdr"] {left: 31px!important; z-index: 10!important;}
[name="hor_line"].active {left: 31px!important; z-index: 10!important;}
[name="count_steps"].active {left: 50px!important;}
.opacity
{
opacity:0.3;
transition:all 0.3s;
}
[name="st_1_1_img"].active,
[name="st_1_2_img"].active
{
left: 623px!important;
}
[name="st_2_1_img"].active,
[name="st_2_2_img"].active
{
left: 623px!important;
}
[name="st_3_1_img"].active
{
left: 623px!important;
}
[name="st_3_2_img"].active
{
left: 649px !important;
}
[name="st_3_3_img"].active
{
left: 664px!important;
}
[name="st_3_4_img"].active
{
left: 792px!important;
}
[name="st_3_5_img"].active
{
left: 1052px!important;
}
[name="st_3_6_img"].active
{
left: 1017px!important;
}
[name="st_4_1_img"].active
{
left: 623px!important;
}
[name="st_4_2_img"].active
{
left: 623px!important;
}
[name="st_4_3_img"].active
{
left: 623px!important;
}
[name="st_5_1_img"].active
{
left: 623px!important;
}
[name="st_5_2_img"].active
{
left: 604px!important;
}
[name="st_5_3_img"].active
{
left: 710px!important;
}
[name="st_6_1_img"].active
{
left: 623px!important;
}
[name="st_6_2_img"].active
{
left: 643px!important;
}
[name="show_result"].active
{left:57px!important; cursor: pointer;}
[name^="result_"][name$="_title"].active {left:57px!important;}
[name^="result_"][name$="_desc"].active {left:57px!important;}
[name^="result_"][name*="_img_"].active {left:623px!important;}
[name="share_btn"].active {left: 303px!important; cursor:pointer;}
[name="repeat_btn"].active {left: 52px!important; cursor:pointer;}
[name^="st_"][name*="_qlist_i_"].active:hover,
[name^="st_"][name$="_more"].active:hover,
[name^="st_"][name$="_back"].active:hover,
[name^="st_"][name$="_next"].active:hover,
[name="show_result"].active:hover,
[name="repeat_btn"].active:hover
{background-color:rgb(236, 213, 242)!important;border-radius: 146px;transition: color 0.3s ease, background-color 0.3s ease;}
[name^="st_"][name*="_qlist_i_"].active:hover span,
[name^="st_"][name$="_more"].active:hover span,
[name^="st_"][name$="_back"].active:hover span,
[name^="st_"][name$="_next"].active:hover span,
[name="show_result"].active:hover span,
[name="start_btn"]:hover span,
[name="repeat_btn"].active:hover span
{color:rgb(7, 38, 40)!important;}
[name="start_btn"]
{
background-color:#072628!important;border-radius: 146px;transition: color 0.3s ease, background-color 0.3s ease;
}
[name="start_btn"]:hover
{
background-color:rgb(236, 213, 242)!important;border-radius: 146px;transition: color 0.3s ease, background-color 0.3s ease;
}
.highlight {
background-color: rgb(236, 213, 242) !important;
border-radius: 50%;
color:rgb(7, 38, 40)!important;
transition: color 0.3s ease, background-color 0.3s ease;
}
</style>
<script>
$('[name^="st_"][name*="_qlist_v_"]').hover(
function() {
var name = $(this).attr('name');
var relatedName = name.replace('_v_', '_i_');
$('[name="' + relatedName + '"]').addClass('highlight');
}, function() {
var name = $(this).attr('name');
var relatedName = name.replace('_v_', '_i_');
$('[name="' + relatedName + '"]').removeClass('highlight');
}
);
$(
'#article [name*="repeat_"], #article [name*="share_"], #article [name*="st_"], #article [name*="result_"], [name="count_steps"], [name="hor_line"], [name="bottom_info"]'
).fadeOut(0);
jQuery('#article').on('click', '[name="start_btn"]', function() {
jQuery('[name*="start_"]').addClass('hide').fadeOut(0);
nextStep(1);
});
var currentStep = 1;
var allResult = [0,0,0,0];
var last_c = 0;
var elements = $('[name*="_sub_3_next"]');
jQuery(elements).on('click', function() {
jQuery('[name^="st_' + currentStep + '"][name$="_img"]').fadeOut().delay(300).queue(function(next) {
jQuery(this).removeClass('active');
next();
});
nextStep(++currentStep);
});
// Когда нажимаем на кнопку - что вы можете предпринять?
jQuery('[name^="st_"][name$="_more"]').on('click', function() {
jQuery('[name="st_' + currentStep + '_sub_1_desc"], [name="st_' + currentStep + '_sub_1_more"]').fadeOut().delay(300).queue(function(next) {
jQuery(this).removeClass('active');
jQuery('[name^="st_' + currentStep + '"][name$="_qtitle"]').addClass('active').fadeIn();
jQuery('[name^="st_' + currentStep + '"][name*="_qlist_i_"]').addClass('active').fadeIn();
jQuery('[name^="st_' + currentStep + '"][name*="_qlist_v_"]').addClass('active').fadeIn();
jQuery('[name^="st_' + currentStep + '"][name$="_back"]').addClass('active').fadeIn();
next();
});
});
// Когда нажимаем на кнопку - назад к загадке
jQuery('[name^="st_"][name$="_back"]').on('click', function() {
jQuery('[name^="st_' + currentStep + '"][name$="_qtitle"], [name^="st_' + currentStep + '"][name*="_qlist_i_"], [name^="st_' + currentStep + '"][name*="_qlist_v_"], [name^="st_' + currentStep + '"][name$="_back"]').fadeOut().delay(300).queue(function(next) {
jQuery(this).removeClass('active');
jQuery('[name="st_' + currentStep + '_sub_1_desc"], [name="st_' + currentStep + '_sub_1_more"]').addClass('active').fadeIn();
next();
});
});
// Когда нажимаем на вариант ответа
jQuery('[name^="st_"][name*="_qlist_i_"], [name^="st_"][name*="_qlist_v_"]').on('click', function() {
var nameAttr = jQuery(this).attr('name');
currentSubStep = nameAttr.charAt(nameAttr.length - 1);
allResult[currentSubStep]++;
last_c = currentSubStep;
jQuery('[name^="st_' + currentStep + '"][name$="_qtitle"], [name^="st_' + currentStep + '"][name*="_qlist_i_"], [name^="st_' + currentStep + '"][name*="_qlist_v_"], [name^="st_' + currentStep + '"][name$="_back"]').fadeOut().delay(300).queue(function(next) {
jQuery(this).removeClass('active');
jQuery('[name="st_' + currentStep + '_sub_3_' + currentSubStep + '_restitle"], [name="st_' + currentStep + '_sub_3_' + currentSubStep + '_rdesc"], [name="st_' + currentStep + '_sub_3_next"]').addClass('active').fadeIn();
next();
});
});
jQuery('#article').on('click', '[name="show_result"]', function() {
showResult();
});
function nextStep(id)
{
if(id == 6)
{
hideStep(id - 1);
setTimeout(function() {
jQuery('[name="count_steps"] span').text(id + '/6');
jQuery('[name="count_steps"], [name="hor_line"]').fadeIn();
jQuery('[name^="st_' + id + '"][name$="_img"]').addClass('active').fadeIn();
jQuery('[name="st_' + id + '_sub_1_desc"]').addClass('active').fadeIn();
jQuery('[name="show_result"]').addClass('active').fadeIn();
}, 400);
} else {
hideStep(id - 1);
setTimeout(function() {
jQuery('[name="count_steps"] span').text(id + '/6');
jQuery('[name="count_steps"], [name="hor_line"]').addClass('active').fadeIn();
jQuery('[name^="st_' + id + '"][name$="_img"]').addClass('active').fadeIn();
jQuery('[name="st_' + id + '_sub_1_desc"]').addClass('active').fadeIn();
jQuery('[name="st_' + id + '_sub_1_more"]').addClass('active').fadeIn();
}, 400);
}
}
function hideStep(id)
{
jQuery('[name*="st_' + id + '"], [name="count_steps"], [name="hor_line"]').fadeOut();
setTimeout(function() {
jQuery('[name*="st_' + id + '"]').removeClass('active');
}, 400);
}
var totalResult = '';
function showResult(){
$('[name*="st_"], [name*="show_result"], [name="count_steps"], [name="hor_line"]').removeClass('active').fadeOut();
var items = allResult;
totalResult = Object.keys(items)
.reduce(function(keya, keyb) {
return items[keya] > items[keyb] ? keya : keyb;
});
console.log(totalResult);
setTimeout(function() {
jQuery('[name="bottom_info"]').fadeIn();
jQuery('[name="count_steps"] span').text('итог');
jQuery('[name*="result_'+ totalResult + '"]').addClass('active');
jQuery('[name*="result_'+ totalResult + '"]').fadeIn();
jQuery('[name*="repeat_"], [name*="share"]').addClass('active').fadeIn();
}, 600);
}
jQuery('[name="repeat_btn"]').on('click', function(){
jQuery('[name*="result_"]').fadeOut();
jQuery('[name="bottom_info"]').fadeOut();
jQuery('[name*="repeat"], [name*="share"]').fadeOut();
setTimeout(function() {
jQuery('[name*="result_"]').removeClass('active');
jQuery('[name="repeat_text"], [name*="share"]').removeClass('active');
jQuery('[name*="start_"]').delay(400).fadeIn().removeClass('hide').addClass('active');
currentStep = 1;
}, 600);
});
jQuery('[name*="share"]').on('click', function(e){
e.preventDefault();
var s_url = 'https://vk.com/share.php?url=https://theblueprint.ru/culture/special/okko-test-detektiv?customshare=v' + totalResult;
window.open(s_url, '', 'toolbar=0,status=0,width=626,height=436');
});
</script>]]> 
