
Испытание на честность! Прояви себя, ответь на вопрос, ничегошеньки не тая и тогда ты получишь заветные баллы, которые сможешь потратить на артефакты. И, конечно же, ты докажешь всем, что у тебя нет секретов и тебя ничем не проймёшь!
Каждый ответ на вопрос даст 10 баллов!
Каждый персонаж может ответить на каждый вопрос лишь один раз.
[html]<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Хэллоуинская Викторина</title>
<style>
/* =========================================================
* --- ЦВЕТОВАЯ СХЕМА ---
* ========================================================= */
:root {
--pumpkin-orange: #FF8C00;
--dark-hat-blue: #36454F;
--light-cream: #FDFBF2;
--dark-text-color: #282828;
--inactive-gray: #666;
--tooltip-width: 180px; /* Фиксированная ширина тултипа */
}
body {
font-family: 'Arial', sans-serif;
margin: 0;
padding: 0;
background-color: transparent;
color: var(--light-cream);
box-sizing: border-box;
text-align: left;
}
/* =========================================================
* --- КОНТЕЙНЕР СЕТКИ ---
* ========================================================= */
.grid-board-container {
width: 550px;
height: 550px;
margin: 40px 0 0 0;
display: grid;
grid-template-columns: repeat(5, 1fr);
grid-template-rows: repeat(5, 1fr);
}
/* =========================================================
* --- ЯЧЕЙКА / ТОЧКА (ТЫКОВКА) ---
* ========================================================= */
.point {
display: flex;
align-items: center;
justify-content: center;
position: relative;
}
.point.active {
filter: drop-shadow(0 0 5px var(--pumpkin-orange));
}
.pumpkin-icon {
font-size: 40px;
transition: transform 0.2s;
cursor: pointer;
line-height: 1;
}
.point.inactive .pumpkin-icon {
cursor: default;
}
.point.active:hover .pumpkin-icon {
transform: scale(1.1); /* Анимация по наведению */
}
.point.inactive .pumpkin-icon {
opacity: 0.3;
filter: grayscale(100%);
}
/* =========================================================
* --- ВСПЛЫВАЮЩИЕ ПОДСКАЗКИ (TOOLTIP) ---
* ========================================================= */
.tooltip-text {
visibility: hidden;
width: var(--tooltip-width);
background-color: var(--dark-hat-blue);
color: var(--light-cream);
text-align: center;
border-radius: 6px;
padding: 8px;
position: absolute;
z-index: 200;
/* КЛЮЧЕВОЕ ИЗМЕНЕНИЕ: margin-bottom отрицательный */
bottom: 100%;
margin-bottom: -5px; /* ОТСТУП: Опускает тултип так, чтобы он наползал на тыкву */
left: 50%;
transform: translateX(-50%);
opacity: 0;
transition: opacity 0.3s;
pointer-events: none;
font-size: 0.8em;
border: 2px solid var(--pumpkin-orange);
box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}
/* Стрелка подсказки: указывает вниз */
.tooltip-text::after {
content: "";
position: absolute;
top: 100%;
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: var(--dark-hat-blue) transparent transparent transparent;
}
/* СТИЛИ ДЛЯ КРАЙНЕЙ ЛЕВОЙ КОЛОНКИ (1-я) */
.grid-board-container div:nth-child(5n+1) .tooltip-text {
left: 0;
transform: none;
text-align: left;
}
.grid-board-container div:nth-child(5n+1) .tooltip-text::after {
left: 50%;
}
/* СТИЛИ ДЛЯ КРАЙНЕЙ ПРАВОЙ КОЛОНКИ (5-я) */
.grid-board-container div:nth-child(5n) .tooltip-text {
left: auto;
right: 0;
transform: none;
text-align: right;
}
.grid-board-container div:nth-child(5n) .tooltip-text::after {
left: auto;
right: 50%;
}
/* Показываем подсказку при наведении на АКТИВНЫЙ элемент */
.point.active:hover .tooltip-text {
visibility: visible;
opacity: 1;
}
</style>
</head>
<body>
<div class="grid-board-container" id="quizBoard">
<div id="q1" class="point active">
<span class="pumpkin-icon">🎃</span>
<span class="tooltip-text">
**Вопрос 1:** Если бы персонаж вырезал тыкву для Хэллоуина, то как бы она выглядела?
</span>
</div>
<div id="q2" class="point active">
<span class="pumpkin-icon">🎃</span>
<span class="tooltip-text">
**Вопрос 2:** Наряд какого фантазма хотелось бы примерить?
</span>
</div>
<div id="q3" class="point active">
<span class="pumpkin-icon">🎃</span>
<span class="tooltip-text">
**Вопрос 3:** Кого бы пошли пугать на Хэллоуин?
</span>
</div>
<div id="q4" class="point active">
<span class="pumpkin-icon">🎃</span>
<span class="tooltip-text">
**Вопрос 4:** Как ваш персонаж отмечал Хэллоуин год назад.
</span>
</div>
<div id="q5" class="point active">
<span class="pumpkin-icon">🎃</span>
<span class="tooltip-text">
**Вопрос 5:** Верит ли персонаж в мистику, помимо очевидной и существующей в Годфри?
</span>
</div>
<div id="q6" class="point active">
<span class="pumpkin-icon">🎃</span>
<span class="tooltip-text">
**Вопрос 6:** Какая самая безумная теория заговора, которую мог бы слышать ваш персонаж?
</span>
</div>
<div id="q7" class="point active">
<span class="pumpkin-icon">🎃</span>
<span class="tooltip-text">
**Вопрос 7:** Хэллоуин – это праздник? Или день, когда стоит запереть все окна и двери, засев в дальнем углу дома с дробашом?
</span>
</div>
<div id="q8" class="point active">
<span class="pumpkin-icon">🎃</span>
<span class="tooltip-text">
**Вопрос 8:** Если бы хэллоуинский фонарь вырезали не из тыквы, то из чего?
</span>
</div>
<div id="q9" class="point active">
<span class="pumpkin-icon">🎃</span>
<span class="tooltip-text">
**Вопрос 9:** Как бы поступил персонаж, оказавшись в густом непроглядном тумане посреди леса?
</span>
</div>
<div id="q10" class="point active">
<span class="pumpkin-icon">🎃</span>
<span class="tooltip-text">
**Вопрос 10:** Кто нравится больше: вампиры или оборотни? Почему?
</span>
</div>
<div id="q11" class="point active">
<span class="pumpkin-icon">🎃</span>
<span class="tooltip-text">
**Вопрос 11:** Самый большой страх вашего персонажа.
</span>
</div>
<div id="q12" class="point active">
<span class="pumpkin-icon">🎃</span>
<span class="tooltip-text">
**Вопрос 12:** Какую бы страшилку рассказал ваш персонаж?
</span>
</div>
<div id="q13" class="point active">
<span class="pumpkin-icon">🎃</span>
<span class="tooltip-text">
**Вопрос 13:** Самое жуткое место, в котором персонажу доводилось бывать?
</span>
</div>
<div id="q14" class="point active">
<span class="pumpkin-icon">🎃</span>
<span class="tooltip-text">
**Вопрос 14:** В Хэллоуин ваш персонаж предпочтёт раздавать сладости или собирать?
</span>
</div>
<div id="q15" class="point active">
<span class="pumpkin-icon">🎃</span>
<span class="tooltip-text">
**Вопрос 15:** Какие сладости больше всего нравятся вашему персонажу?
</span>
</div>
<div id="q16" class="point active">
<span class="pumpkin-icon">🎃</span>
<span class="tooltip-text">
**Вопрос 16:** Как бы ваш персонаж украсил дом на День всех святых?
</span>
</div>
<div id="q17" class="point active">
<span class="pumpkin-icon">🎃</span>
<span class="tooltip-text">
**Вопрос 17:** Опишите самый запомнившийся персонажу Хэллоуин.
</span>
</div>
<div id="q18" class="point active">
<span class="pumpkin-icon">🎃</span>
<span class="tooltip-text">
**Вопрос 18:** Какую бы хэллоуинскую вечеринку организовал персонаж? Кого бы на неё пригласил?
</span>
</div>
<div id="q19" class="point active">
<span class="pumpkin-icon">🎃</span>
<span class="tooltip-text">
**Вопрос 19:** С кем бы из усопших ваш персонаж хотел бы повидаться?
</span>
</div>
<div id="q20" class="point active">
<span class="pumpkin-icon">🎃</span>
<span class="tooltip-text">
**Вопрос 20:** Кого из усопших ваш персонаж никогда не пожелал бы встретить снова?
</span>
</div>
<div id="q21" class="point active">
<span class="pumpkin-icon">🎃</span>
<span class="tooltip-text">
**Вопрос 21:** Проходил ли персонаж когда-нибудь «испытание на храбрость»? Где и как это было?
</span>
</div>
<div id="q22" class="point active">
<span class="pumpkin-icon">🎃</span>
<span class="tooltip-text">
**Вопрос 22:** Что вашему персонажу предпочтительнее: бессмертие или вечный покой?
</span>
</div>
<div id="q23" class="point active">
<span class="pumpkin-icon">🎃</span>
<span class="tooltip-text">
**Вопрос 23:** Где и как ваш персонаж хотел бы встретить Хэллоуин в следующем году?
</span>
</div>
<div id="q24" class="point active">
<span class="pumpkin-icon">🎃</span>
<span class="tooltip-text">
**Вопрос 24:** Придумайте смешную расшифровку аббревиатуры: СПУКИ (можно не на хэллоуинскую тематику).
</span>
</div>
<div id="q25" class="point active">
<span class="pumpkin-icon">🎃</span>
<span class="tooltip-text">
**Вопрос 25:** Как бы выглядело идеальное надгробие для персонажа?
</span>
</div>
</div>
</body>
</html>[/html]
