<![CDATA[<style>
*
{outline:none!important;-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none; -webkit-tap-highlight-color: transparent;
outline: none;
-ms-touch-action: manipulation;
touch-action: manipulation;}
*, *:focus
{outline:none!important;-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
-webkit-tap-highlight-color: transparent;
-ms-touch-action: manipulation;
touch-action: manipulation;}
[name*="_submres"],
[name*="_var_"],
[name*="_showresult"],
[name*="_repeat"],
[name*="_social_"],
[name*="_icn_point_"],
[name*="_backbtn"],
[name*="_makeb"],
[name*="start_btn"]
{cursor:pointer!important;}
#article
{
height:850px;
transition:height 0.3s;
padding-bottom: 0px;
}
[name*="_icn_point_"] .content:before,
{
opacity:0;
transition:all 0.3s;
}
[name*="_icn_point_"]:hover .content:before,
[name*="_icn_point_"].hovered .content:before,
[name*="_icn_point_"].selected .content:before
{
content:"";
width: 12px;
height:12px;
position:absolute;
top:3px;
left:3px;
opacity:1;
transition:all 0.3s;
background:#1e4436;
border-radius:50%;
}
[name*="preload_numb"]
{
display:none;
}
[name*="preload_numb"].current
{
cursor:pointer;
}
[namae*="_girl"].show
{transition: all 0.3s;}
[name*="_var_f"].checked .content,
[name*="_var_f"].checked .content span,
[name*="_var_t"].checked .content,
[name*="_var_t"].checked .content span
{transition:all 0.3s;}
[name*="_var_f"]:hover .content,
[name*="_var_t"]:hover .content
{ background-color: rgb(205, 209, 246)!important;transition:all 0.3s;}
[name*="_var_f"].checked .content
{ background-color: rgb(116, 94, 255)!important;
border-color: rgb(116, 94, 255)!important;}
[name*="_var_t"].checked .content
{ background-color: rgb(31, 221, 123)!important;
border-color: rgb(31, 221, 123)!important;}
[data-vms-version="1"][data-vms-client="blueprint"] [name*="_var_f"].checked .content .editor span[style*="color: rgb(0, 0, 0)"]
{color:#fff!important;}
[data-vms-version="1"][data-vms-client="blueprint"] [name*="_var_t"].checked .content .editor span[style*="color: rgb(0, 0, 0)"]
{color:#fff!important;}
[name*="_var_f"].checked .content .editor span,
[name*="_var_t"].checked .content .editor span
{color:#fff!important;}
[name="start_btn"],
[name="start_btn"] .content
{transition:all 0.3s;}
[name="start_btn"]:hover .content,
[name*="_makeb"]:hover .content,
[name*="_backbtn"]:hover .content
{background-color: #fff!important;border-color: rgb(23, 170, 201)!important;transition:all 0.3s;}
[name="start_btn"]:hover .content,
[name*="_makeb"]:hover .content,
[name*="_backbtn"]:hover .content
{border-width: 1px!important;
border-style: solid!important;}
[name*="_repeat"]:hover .content,
[name*="_showresult"]:hover .content,
[name*="_submres"]:hover .content
{background-color: #fff!important;border-color: rgb(30, 68, 54)!important;border-width: 1px!important;
border-style: solid!important;transition:all 0.3s;}
[name="start_btn"]:hover .content span,
[name*="_makeb"]:hover .content span,
[name*="_backbtn"]:hover .content span
{color: rgb(23, 170, 201)!important;}
[name*="_submres"]:hover .content span,
[name*="_showresult"]:hover .content span,
[name*="_repeat"]:hover .content span
{color: rgb(30, 68, 54)!important;}
</style>
<script>
$(document).ready(function () {
// ----- GLOBAL STATE -----
let currentStep = 1;
const MAX_STEP = 6;
const OPTION_ACTIVE_CLASS = 'selected';
const OPTION_HOVER_CLASS = 'hovered';
let isTransitioning = false; // чтобы анимации не накладывались
// Рабочая область только внутри #article
const $root = $('#article .body');
// start
$('[name*="preload_img"], [name*="preload_numb_"]').attr('class', 'object').fadeIn(0).fadeOut(0);
// Старт теста — первый экран
$root.find('[name="start_btn"]').on('click', function () {
if (isTransitioning) return;
isTransitioning = true;
const $btn = $(this);
$btn.fadeOut(300);
currentStep = 1;
hidePreload().done(function () {
showItem(1);
isTransitioning = false;
});
});
// Клик по номеру шага или иконке на прелоадере (только до начала теста)
$root.find('[name^="preload_numb_"], [name^="preload_img_"]').on('click', function () {
if (isTransitioning) return;
if (currentStep !== 1) return; // не даём прыгать по шагам после старта
const nameAttr = $(this).attr('name'); // preload_numb_2 / preload_img_3
const parts = nameAttr.split('_');
const step = parseInt(parts[parts.length - 1], 10);
isTransitioning = true;
hidePreload().done(function () {
currentStep = step;
showItem(step);
isTransitioning = false;
});
});
// ----- ВАРИАНТЫ ОТВЕТА (var + icn) -----
// item_N_var_point_X и item_N_icn_point_X
function getOptionPair(qNum, idx) {
return $root.find(
`[name="item_${qNum}_var_point_${idx}"], [name="item_${qNum}_icn_point_${idx}"]`
);
}
function getQuestionOptions(qNum) {
return $root.find(
`[name^="item_${qNum}_var_point_"], [name^="item_${qNum}_icn_point_"]`
);
}
// Наведение + клик по ЛЮБОМУ из двух элементов (var или icn)
$root
.find('[name^="item_"][name*="_var_point_"], [name^="item_"][name*="_icn_point_"]')
// hover
.on('mouseenter', function () {
const nameAttr = $(this).attr('name'); // item_2_var_point_0
const match = nameAttr.match(/^item_(\d+)_(var|icn)_point_(\d+)$/);
if (!match) return;
const qNum = parseInt(match[1], 10);
const idx = match[3];
getOptionPair(qNum, idx).addClass(OPTION_HOVER_CLASS);
})
.on('mouseleave', function () {
const nameAttr = $(this).attr('name');
const match = nameAttr.match(/^item_(\d+)_(var|icn)_point_(\d+)$/);
if (!match) return;
const qNum = parseInt(match[1], 10);
const idx = match[3];
getOptionPair(qNum, idx).removeClass(OPTION_HOVER_CLASS);
})
// click
.on('click', function () {
const $this = $(this);
const nameAttr = $this.attr('name'); // item_2_var_point_0 / item_2_icn_point_3
const match = nameAttr.match(/^item_(\d+)_(var|icn)_point_(\d+)$/);
if (!match) return;
const qNum = parseInt(match[1], 10);
const idx = match[3];
// Снимаем выбранность со всех опций этого вопроса
getQuestionOptions(qNum).removeClass(OPTION_ACTIVE_CLASS);
// Добавляем выбранность только на текущую пару (var+icn)
getOptionPair(qNum, idx).addClass(OPTION_ACTIVE_CLASS);
// Показываем пояснительный текст
$root.find(`[name="item_${qNum}_text"]`).fadeIn(300);
// Кнопка "далее" для вопросов 1–5, либо спец-кнопка на 6-м
console.log(qNum);
if (qNum === MAX_STEP) {
$root.find('[name="item_6_showresult"]').fadeIn(300);
} else {
$root.find(`[name="item_${qNum}_submres"]`).fadeIn(300);
}
});
// Хелпер перехода между шагами (анимации не наслаиваются)
function goToStep(targetStep) {
if (isTransitioning) return;
isTransitioning = true;
hideItem().done(function () {
currentStep = targetStep;
showItem(currentStep);
isTransitioning = false;
});
}
// ----- КНОПКА "ДАЛЕЕ" (item_N_submres) -----
$root.find('[name^="item_"][name$="_submres"]').on('click', function () {
const nameAttr = $(this).attr('name'); // item_3_submres
const match = nameAttr.match(/^item_(\d+)_submres$/);
if (!match) return;
const qNum = parseInt(match[1], 10);
if (qNum >= MAX_STEP) return;
goToStep(qNum + 1);
});
// ----- КНОПКА "НАЗАД" (item_N_backbtn) -----
$root.find('[name^="item_"][name$="_backbtn"]').on('click', function () {
const nameAttr = $(this).attr('name'); // item_3_backbtn
const match = nameAttr.match(/^item_(\d+)_backbtn$/);
if (!match) return;
const qNum = parseInt(match[1], 10);
const prev = qNum - 1;
if (prev < 1) return;
goToStep(prev);
});
// Клик по "показать результат"
$root.find('[name*="_showresult"]').on('click', function () {
if (isTransitioning) return;
isTransitioning = true;
hideItem().done(function () {
showResult();
isTransitioning = false;
});
});
// ----- SOCIAL -----
$root.find('[name*="_social_vk"]').on('click', function (e) {
e.preventDefault();
const s_url = $(this).find('.content_link').attr('href');
window.open('https://vk.com/share.php?url=' + s_url, '', 'toolbar=0,status=0,width=626,height=436');
});
$root.find('[name*="_social_tg"]').on('click', function (e) {
e.preventDefault();
const s_url = $(this).find('.content_link').attr('href');
window.open('https://t.me/share/url?url=' + s_url);
});
// ----- REPEAT -----
// Кнопка "Пройти ещё раз"
$root.find('[name*="_repeat"]').on('click', function () {
if (isTransitioning) return;
isTransitioning = true;
$.when(
hideResultItem(1),
hideResultItem(2),
hideResultItem(3)
).done(function () {
resetGame();
isTransitioning = false;
});
});
// ----- PRELOAD -----
function hidePreload() {
// Скрываем элементы прелоадера и кнопку старта
return $root
.find('[name^="preload_numb_"], [name^="preload_"], [name^="preload_img_"], [name="start_btn"]')
.fadeOut(300)
.promise();
}
function showPreload(showStart) {
const $pre = $root.find('[name^="preload_numb_"], [name^="preload_"]:not([name^="preload_img_"])');
if (showStart) {
$root.find('[name="start_btn"]').fadeIn(300);
} else {
$root.find('[name="start_btn"]').hide();
}
return $pre.fadeIn(300).promise();
}
function updatePreloadState() {
for (let i = 1; i <= MAX_STEP; i++) {
const $num = $root.find(`[name="preload_numb_${i}"]`);
const $img = $root.find(`[name="preload_img_${i}"]`);
$num.removeClass('completed current future');
if (i < currentStep) {
$num.addClass('completed');
} else if (i === currentStep) {
$num.addClass('current');
} else {
$num.addClass('future');
}
if ($img.length) {
if (i === currentStep) {
$img.fadeIn(0);
} else {
$img.fadeOut(0);
}
}
}
}
// ----- QA -----
function showItem(id) {
const currentTopLine = $root.find(`.object[name="topline_${id}"]`);
const currentTopLineValue = parseInt(currentTopLine.css('top'), 10) || 0;
$root.find(`.object[name^="item_${id}"]`).each(function () {
const $element = $(this);
$element.fadeOut(0); // мгновенно спрятать для пересчёта позиции
let originalTop = parseInt($element.css('top'), 10) || 0;
if (!$element.data('original-top')) {
$element.data('original-top', originalTop);
}
let newTopValue = originalTop - currentTopLineValue;
$element.css('top', newTopValue + 67 + 'px').addClass('shown');
const nameAttr = $element.attr('name') || '';
// По умолчанию скрываем текст и "далее"/"показать результат",
// но НЕ скрываем back-кнопку (её покажем отдельно)
if (
nameAttr.indexOf('_text') !== -1 ||
nameAttr.indexOf('_submres') !== -1 ||
nameAttr === 'item_6_showresult'
) {
$element.hide();
} else {
$element.fadeIn(300);
}
});
// back-кнопка: показываем только начиная со 2-го шага
const $backBtn = $root.find(`[name="item_${id}_backbtn"]`);
if ($backBtn.length) {
if (id > 1) {
$backBtn.fadeIn(300);
} else {
$backBtn.hide();
}
}
// Кнопку "далее" и "показать результат" показываем только после выбора варианта,
// поэтому здесь принудительно прячем
$root.find(`[name="item_${id}_submres"]`).hide();
if (id === MAX_STEP) {
$root.find('[name="item_6_showresult"]').hide();
}
updatePreloadState();
$(window).trigger('scroll');
$(window).trigger('resize');
}
function hideItem() {
const $elements = $root.find('.object[name^="item_"].shown');
const animations = [];
$elements.each(function () {
const $element = $(this);
const originalTop = $element.data('original-top');
if (typeof originalTop !== 'undefined') {
const animation = $element
.removeClass('shown')
.fadeOut(300) // скрытие за 300
.promise()
.then(function () {
$element.css('top', originalTop + 'px');
return $.Deferred().resolve().promise();
});
animations.push(animation);
} else {
// если нет original-top, просто спрячем
const animation = $element.fadeOut(300).promise();
animations.push(animation);
}
});
return $.when.apply($, animations);
}
// ----- ПОДСЧЁТ ФИНАЛЬНЫХ БАЛЛОВ -----
function computeFinalScore() {
let total = 0;
for (let q = 1; q <= MAX_STEP; q++) {
// Берём выбранную иконку (icn), по ней читаем point
const $opt = $root.find(`[name^="item_${q}_icn_point_"].${OPTION_ACTIVE_CLASS}`).first();
if (!$opt.length) continue;
const nameAttr = $opt.attr('name'); // item_3_icn_point_5
const match = nameAttr.match(/^item_(\d+)_icn_point_(\d+)$/);
if (!match) continue;
const points = parseInt(match[2], 10);
if (!isNaN(points)) {
total += points;
}
}
return total;
}
// ----- RESULT -----
function showResult() {
const totalScore = computeFinalScore();
let resultId = 1;
// Результат 1 (20-30 баллов)
// Результат 2 (0-5 баллов)
// Результат 3 (6-19 баллов)
if (totalScore >= 20 && totalScore <= 30) {
resultId = 1;
} else if (totalScore >= 0 && totalScore <= 5) {
resultId = 2;
} else if (totalScore >= 6 && totalScore <= 19) {
resultId = 3;
}
showResultItem(resultId);
}
function showResultItem(id) {
const currentTopLine = $root.find(`.object[name="restopline_${id}"]`);
const currentTopLineValue = parseInt(currentTopLine.css('top'), 10) || 0;
$root.find(`.object[name^="result_${id}"]`).each(function () {
const $element = $(this);
$element.fadeOut(0);
let originalTop = parseInt($element.css('top'), 10) || 0;
if (!$element.data('original-top')) {
$element.data('original-top', originalTop);
}
let newTopValue = originalTop - currentTopLineValue;
$element.css('top', newTopValue + 67 + 'px');
$element.fadeIn(300); // показ результата за 300
});
// Счёт не показываем — если нужен текст по баллам, можно сюда добавить.
$(window).trigger('scroll');
$(window).trigger('resize');
}
function hideResultItem(id) {
const $elements = $root.find(`.object[name^="result_${id}"]`);
const animations = [];
$elements.each(function () {
const $element = $(this);
const originalTop = $element.data('original-top');
if (typeof originalTop !== 'undefined') {
const animation = $element
.removeClass('lined selected opac')
.fadeOut(300) // скрытие результатов тоже за 300
.promise()
.then(function () {
$element.css('top', originalTop + 'px');
return $.Deferred().resolve().promise();
});
animations.push(animation);
} else {
const animation = $element.fadeOut(300).promise();
animations.push(animation);
}
});
return $.when.apply($, animations);
}
// ----- RESET -----
function resetGame() {
currentStep = 1;
// Сброс выбранных вариантов
$root
.find('[name^="item_"][name*="_var_point_"], [name^="item_"][name*="_icn_point_"]')
.removeClass(OPTION_ACTIVE_CLASS + ' ' + OPTION_HOVER_CLASS);
// Скрываем тексты/кнопки
$root.find('[name$="_text"], [name$="_submres"], [name="item_6_showresult"]').hide();
updatePreloadState();
hideItem().done(function () {
showPreload(true); // первый экран со стартовой кнопкой
});
}
});
</script>
]]> 
