Blueprint
<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>
T

специальный проект

 Детективная история

{"points":[{"id":1,"properties":{"x":0,"y":0,"z":0,"opacity":1,"scaleX":1,"scaleY":1,"rotationX":0,"rotationY":0,"rotationZ":-25}},{"id":3,"properties":{"x":-99,"y":-19,"z":0,"opacity":1,"scaleX":1,"scaleY":1,"rotationX":0,"rotationY":0,"rotationZ":-25}}],"steps":[{"id":2,"properties":{"duration":0.8,"delay":0,"bezier":[],"ease":"Sine.easeInOut","automatic_duration":true}}],"transform_origin":{"x":0.5,"y":0.5}}

Узнайте загадочного вора винтажных очков

Иллюстрации: Юлия Завтур

Текст: Алексей Свиридов

Редактор: Арина Крайних

Последние годы на мировом и отечественном телевидении — бум детективных сериалов. Раст Коул охотится за Мориарти… Или как там? Мы уже порядком запутались, но одно можно сказать точно — детективные истории про остроумных сыщиков, кажется, никогда не выйдут из моды. Попробуйте и вы себя в этой роли. Пройдите тест-расследование, который мы подготовили совместно с онлайн-кинотеатром Okko, и заодно узнайте, какой психологический образ детектива вам ближе всего.

Реклама · ООО «окко»

14 июня 2024

Начать тест

Узнайте, какой вы детектив


Если слова «психология» и «детектив» сколько-нибудь точно описывают ваши интересы, вам наверняка понравится новый сериал «Калимба», который уже доступен в онлайн-кинотеатре Okko. Это жуткая и запутанная история об опасном эксперименте, проводимом странным профессором психиатрии (Федор Бондарчук). В замкнутом пространстве он решил собрать жертв и их обидчиков, для того, чтобы... А вот для чего именно — главная загадка, которую предстоит разгадать не только подопытным, но и самому профессору, являющемуся, по-видимому, пешкой в чьей-то большой и жестокой игре. Вдумчивое расследование постарается пролить свет на истинные мотивы профессора и его покровителей, а также связать воедино запутанные истории всех участников эксперимента. Если, конечно, кто-то из них останется в живых...


{"width":1200,"column_width":600,"columns_n":2,"gutter":0,"line":40}
false
767
1300
false
true
true
{"mode":"page","transition_type":"slide","transition_direction":"horizontal","transition_look":"belt","slides_form":{}}
{"css":".editor {font-family: tautz; font-size: 16px; font-weight: 400; line-height: 21px;}"}