[html]<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Эмодзи-викторина: Осенние фильмы (ввод ответа)</title>
<style>
:root{
--bg:#1b1726; --card:#261e36; --ink:#f7f2e8; --muted:#cfc6b4;
--line:#3a2f4d; --accent:#f0a202; --accent-2:#d97706; --ok:#50c878; --warn:#ef4444;
}
html,body{height:100%}
body{
margin:0; background:
radial-gradient(1200px 800px at 20% -10%, #2a223e 0%, var(--bg) 60%),
linear-gradient(180deg, #1b1726, #161225);
color:var(--ink); font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Inter, Arial, sans-serif;
}
.wrap{max-width:960px; margin:32px auto; padding:16px}
.card{
background:var(--card); border:1px solid var(--line); border-radius:16px;
box-shadow:0 10px 30px rgba(0,0,0,.25); overflow:hidden;
}
.header{padding:18px 20px; background:linear-gradient(90deg,#3a2f4d, #2a223e); border-bottom:1px solid var(--line)}
.header h1{margin:0; font-size:20px}
.sub{margin:6px 0 0; color:var(--muted); font-size:13px}
.meta{
display:flex; gap:12px; align-items:center; flex-wrap:wrap;
background:rgba(240,162,2,.08); border-top:1px dashed var(--accent-2);
padding:10px 16px; font-size:13px;
}
.pill{display:inline-flex; align-items:center; gap:8px; padding:6px 10px; border:1px solid var(--line);
border-radius:999px; background:rgba(0,0,0,.15)}
.pill b{color:var(--accent)}
.list{padding:12px 14px 18px}
.row{
display:grid; grid-template-columns: 34px 140px 1fr auto; gap:10px; align-items:center;
border:1px solid var(--line); border-radius:12px; padding:8px 10px; margin:10px 0; background:rgba(255,255,255,0.02)
}
.idx{font-variant-numeric: tabular-nums; opacity:.8}
.emoji{font-size:20px}
.ansbox{display:flex; gap:8px; align-items:center;}
.input{
width:100%; padding:8px 10px; border-radius:10px; border:1px solid var(--line);
background:#1f1830; color:var(--ink); font-size:14px;
}
.btn{
cursor:pointer; border:1px solid var(--accent-2); background:rgba(240,162,2,.12);
color:var(--ink); padding:8px 10px; border-radius:10px; font-size:13px; white-space:nowrap;
}
.btn:hover{background:rgba(240,162,2,.2)}
.status{font-size:13px; color:var(--muted)}
.status.ok{color:var(--ok)}
.status.bad{color:var(--warn)}
.hint{font-size:12px; color:var(--muted); margin-left:8px}
.row.solved{
background:linear-gradient(0deg, rgba(80,200,120,.08), rgba(80,200,120,.04));
border-color: rgba(80,200,120,.45);
}
@media (max-width:720px){
.row{grid-template-columns:28px 120px 1fr}
.btn{margin-top:6px}
.status{grid-column: 2 / -1}
.ansbox{flex-wrap:wrap}
}
/* Модалка */
.modal-backdrop{
position:fixed; inset:0; background:rgba(0,0,0,.55);
display:none; align-items:center; justify-content:center; z-index:50;
}
.modal{
background:var(--card); border:1px solid var(--line); border-radius:16px; padding:20px;
max-width:520px; width:calc(100% - 24px); box-shadow:0 20px 60px rgba(0,0,0,.45); text-align:center;
}
.modal h2{margin:0 0 8px; font-size:20px}
.modal p{margin:6px 0 16px; color:var(--muted)}
</style>
</head>
<body>
<div class="wrap">
<div class="card">
<div class="header">
<h1>🍂 Эмодзи-викторина: осенние фильмы</h1>
<div class="sub">Впиши название фильма (рус/англ допустимо) и нажми «Проверить». После 3-х неудач появится первая буква.</div>
</div>
<div class="meta">
<span class="pill">Всего заданий: <b id="total">0</b></span>
<span class="pill">Решено: <b id="solved">0</b></span>
<span class="pill">Попыток: <b id="tries">0</b></span>
<button class="btn" id="reset">Сбросить всё</button>
</div>
<div class="list" id="quiz"><!-- сюда вставятся ряды --></div>
</div>
</div>
<!-- Модальное окно поздравления -->
<div class="modal-backdrop" id="modal">
<div class="modal">
<h2>🎉 Поздравляем!</h2>
<p id="modalText">Вы разгадали все фильмы.</p>
<button class="btn" id="playAgain">Сыграть снова</button>
</div>
</div>
<script>
(function(){
// ДАННЫЕ: эмодзи + набор допустимых ответов (вариантов). Первый вариант — основной (для подсказки).
const DATA = [
{ emoji:"🌲🌙🪓🐎👻", answers:["Сонная лощина","Sleepy Hollow"] },
{ emoji:"👒🎩💌❤️🔥", answers:["Гордость и предубеждение","Pride and Prejudice"] },
{ emoji:"🧙♀️✨🔮", answers:["Колдовство","The Craft"] },
{ emoji:"🎭🍁👩🦰👨🦳", answers:["Сентябрь","September"] },
{ emoji:"☔👧🏻🎶", answers:["Поющие под дождём","Поющие под дождем","Singin in the Rain","Singing in the Rain","Singin' in the Rain"] },
{ emoji:"🍂🏙️👫", answers:["Осень в Нью-Йорке","Осень в Нью Йорке","Autumn in New York"] },
{ emoji:"🎓📖🍁👨🏫", answers:["Общество мёртвых поэтов","Общество мертвых поэтов","Dead Poets Society"] },
{ emoji:"👩👩👧👦🌙🔮", answers:["Практическая магия","Practical Magic"] },
{ emoji:"💀🏠👨👩👧👦", answers:["Семейка Аддамс","The Addams Family","Addams Family"] },
{ emoji:"⚡🧹🏰", answers:[
"Гарри Поттер и Философский камень","Гарри Поттер и Филосовский камень",
"Harry Potter and the Philosophers Stone","Harry Potter and the Philosopher's Stone",
"Harry Potter and the Sorcerers Stone","Harry Potter and the Sorcerer's Stone"
]},
{ emoji:"🌲🌌🧛♂️👩🏻", answers:["Сумерки","Twilight"] },
{ emoji:"🔥📚🍷🍂", answers:["Когда Гарри встретил Салли","When Harry Met Sally","When Harry Met Sally!"] },
{ emoji:"🦊🍂🎩", answers:["Бесподобный мистер Фокс","Fantastic Mr Fox","Fantastic Mr. Fox"] },
{ emoji:"🎃🕷️🧙♀️👩🏻", answers:["Коралина","Coraline"] },
{ emoji:"🎃🕷️🧙♀️👩🏻", answers:["Коралина","Коралина в Стране Кошмаров","Coraline"] },
{ emoji:"👩🏼🦇🏠⚰️", answers:["Интервью с вампиром","Interview with the Vampire","Interview with a Vampire"] },
];
// Нормализация ввода: нижний регистр, е/ё, убираем кавычки/знаки, схлопываем пробелы
const normalize = (s) => (s||"")
.toLowerCase()
.replace(/ё/g,"е")
.replace(/[«»“”"'\u2019]/g,"")
.replace(/[^a-zа-я0-9\s-]/g," ")
.replace(/\s+/g," ")
.trim();
// Преднормализуем варианты ответов и первую букву для подсказки
DATA.forEach(d => {
d.norm = d.answers.map(a => normalize(a));
// первая буква подсказки — из первого (основного) варианта
const main = normalize(d.answers[0]);
d.firstLetter = main.charAt(0).toUpperCase();
// если первая "буква" вдруг пробел/не буква — ищем первую букву/цифру
const m = main.match(/[a-zа-я0-9]/);
if(m) d.firstLetter = m[0].toUpperCase();
});
const quizEl = document.getElementById('quiz');
const totalEl = document.getElementById('total');
const solvedEl = document.getElementById('solved');
const triesEl = document.getElementById('tries');
const resetBtn = document.getElementById('reset');
const modal = document.getElementById('modal');
const modalText= document.getElementById('modalText');
const playAgain= document.getElementById('playAgain');
let tries = 0;
let solved = 0;
function showModal(){
// небольшая задержка для приятности
setTimeout(()=>{ modal.style.display = 'flex'; }, 200);
}
function hideModal(){ modal.style.display = 'none'; }
function makeRow(idx, item){
const row = document.createElement('div');
row.className = 'row';
row.innerHTML = `
<div class="idx">${idx+1}</div>
<div class="emoji">${item.emoji}</div>
<div class="ansbox">
<input type="text" class="input" placeholder="Введите название фильма…" aria-label="Ответ на задание ${idx+1}">
<button class="btn checkbtn">Проверить</button>
</div>
<div class="status" aria-live="polite"></div>
`;
const input = row.querySelector('.input');
const btn = row.querySelector('.checkbtn');
const status = row.querySelector('.status');
let badAttempts = 0; // счётчик НЕудачных попыток для этого задания
let hintShown = false; // показана ли уже подсказка
const maybeShowHint = ()=>{
if(!hintShown && badAttempts >= 3){
const hint = document.createElement('span');
hint.className = 'hint';
hint.textContent = ` Подсказка: первая буква — «${item.firstLetter}»`;
status.appendChild(hint);
hintShown = true;
}
};
const check = ()=>{
const val = normalize(input.value);
if(!val){ status.textContent = "Введите вариант ответа"; status.className="status"; return; }
tries++;
triesEl.textContent = tries;
const ok = item.norm.some(acc => acc === val);
if(ok){
status.textContent = "Верно! ✅";
status.className = "status ok";
row.classList.add('solved');
input.disabled = true;
btn.disabled = true;
solved++;
solvedEl.textContent = solved;
if(solved === DATA.length){
modalText.textContent = `Вы разгадали все ${DATA.length} фильмов за ${tries} попыток!`;
showModal();
}
} else {
badAttempts++;
status.textContent = "Неверно, попробуйте ещё.";
status.className = "status bad";
maybeShowHint();
}
};
btn.addEventListener('click', check);
input.addEventListener('keydown', (e)=>{ if(e.key === 'Enter') check(); });
return row;
}
function render(){
quizEl.innerHTML = '';
DATA.forEach((item, i) => quizEl.appendChild(makeRow(i, item)));
totalEl.textContent = DATA.length;
solved = 0; tries = 0;
solvedEl.textContent = solved;
triesEl.textContent = tries;
}
// Сброс и модалка
resetBtn.addEventListener('click', ()=>{ hideModal(); render(); });
playAgain.addEventListener('click', ()=>{ hideModal(); render(); });
modal.addEventListener('click', (e)=>{ if(e.target === modal) hideModal(); });
// Инициализация
render();
})();
</script>
</body>
</html>
[/html]
