Food \u00b7 English Grammar Practice<\/title>\n<script src=\"https:\/\/cdn.jsdelivr.net\/npm\/canvas-confetti@1.9.2\/dist\/confetti.browser.min.js\"><\/script>\n<style>\n :root {\n \/* Food Palette: Warm colors (Orange\/Red\/Green) *\/\n --bg-1: #fff3e0; \/* Creamy Orange *\/\n --bg-2: #ffccbc; \/* Light Peach *\/\n --bg-3: #c8e6c9; \/* Fresh Green *\/\n --bg-4: #ffe0b2; \/* Soft Apricot *\/\n \n --accent: #d84315; \/* Burnt Orange *\/\n --accent-2: #2e7d32; \/* Forest Green *\/\n --ok: #2e7d32;\n --err: #c62828;\n \n --ink: #1a1a1a; \/* Almost Black for max contrast *\/\n --ink-soft: #424242; \/* Dark Grey *\/\n --card: #ffffff;\n --shadow: 0 12px 30px rgba(46, 125, 50, 0.15);\n --radius: 22px;\n }\n\n * { box-sizing: border-box; }\n\n html, body {\n margin: 0;\n padding: 0;\n min-height: 100%;\n font-family: 'Segoe UI', 'Nunito', system-ui, -apple-system, sans-serif;\n color: var(--ink);\n background: linear-gradient(135deg, var(--bg-1), var(--bg-2), var(--bg-3), var(--bg-4));\n background-size: 400% 400%;\n animation: bgShift 20s ease infinite;\n }\n\n @keyframes bgShift {\n 0% { background-position: 0% 50%; }\n 50% { background-position: 100% 50%; }\n 100% { background-position: 0% 50%; }\n }\n\n .wrap {\n max-width: 900px;\n margin: 0 auto;\n padding: 28px 18px 60px;\n }\n\n header {\n text-align: center;\n margin-bottom: 22px;\n }\n\n header h1 {\n margin: 0 0 6px;\n font-size: clamp(1.5rem, 3.5vw, 2.1rem);\n letter-spacing: .5px;\n background: linear-gradient(90deg, var(--accent), var(--accent-2));\n -webkit-background-clip: text;\n background-clip: text;\n color: transparent;\n font-weight: 800;\n }\n\n header p {\n margin: 0;\n color: var(--ink-soft);\n font-size: 1rem;\n font-weight: 600;\n }\n\n .card {\n background: var(--card);\n border-radius: var(--radius);\n box-shadow: var(--shadow);\n padding: 24px;\n margin-bottom: 20px;\n border: 1px solid rgba(0,0,0,0.05);\n }\n\n .progress-wrap {\n display: flex;\n align-items: center;\n gap: 12px;\n margin-bottom: 16px;\n }\n\n .progress-bar {\n flex: 1;\n height: 12px;\n background: #f0f0f0;\n border-radius: 999px;\n overflow: hidden;\n border: 1px solid #e0e0e0;\n }\n\n .progress-fill {\n height: 100%;\n width: 0%;\n background: linear-gradient(90deg, var(--accent), var(--accent-2));\n border-radius: 999px;\n transition: width .45s cubic-bezier(.4, 0, .2, 1);\n }\n\n .progress-label {\n font-size: 0.9rem;\n font-weight: 700;\n color: var(--ink-soft);\n white-space: nowrap;\n }\n\n .question {\n font-size: 1.1rem;\n color: var(--ink);\n margin: 0 0 18px;\n font-weight: 700;\n }\n\n .options {\n display: grid;\n grid-template-columns: 1fr 1fr;\n gap: 16px;\n }\n\n @media (max-width: 620px) {\n .options { grid-template-columns: 1fr; }\n \n .option {\n color: #000000 !important;\n background: #ffffff;\n border-color: #bdbdbd;\n }\n }\n\n .option {\n border: 2px solid #eeeeee;\n background: #fafafa;\n border-radius: 16px;\n padding: 20px 18px;\n font-size: 1.05rem;\n line-height: 1.5;\n text-align: left;\n cursor: pointer;\n color: #000000 !important;\n font-weight: 600;\n transition: transform .18s ease, border-color .18s ease, background .18s ease, box-shadow .18s ease;\n font-family: inherit;\n }\n\n .option:hover:not(:disabled) {\n transform: translateY(-3px);\n border-color: var(--accent-2);\n background: #e8f5e9;\n box-shadow: 0 8px 18px rgba(46, 125, 50, 0.15);\n }\n\n .option:disabled {\n cursor: default;\n opacity: .6;\n }\n\n .option .badge {\n display: inline-block;\n font-size: .75rem;\n font-weight: 800;\n letter-spacing: .8px;\n text-transform: uppercase;\n color: #fff;\n background: linear-gradient(90deg, var(--accent), var(--accent-2));\n padding: 4px 10px;\n border-radius: 999px;\n margin-bottom: 10px;\n }\n\n .text-area {\n min-height: 150px;\n border-radius: 16px;\n background: #fffdf7;\n border: 2px dashed #d7ccc8;\n padding: 20px;\n font-size: 1.1rem;\n line-height: 1.8;\n color: var(--ink);\n }\n\n .text-area .placeholder {\n color: #8d6e63;\n font-style: italic;\n }\n\n .text-area p {\n margin: 0 0 10px;\n }\n\n .text-area p:last-child { margin-bottom: 0; }\n\n .err {\n text-decoration: underline wavy var(--err);\n text-decoration-thickness: 2px;\n text-underline-offset: 4px;\n color: var(--err);\n font-weight: 700;\n }\n\n .err-note {\n display: block;\n font-size: .9rem;\n color: var(--ok);\n font-weight: 700;\n margin-top: 4px;\n }\n\n .err-note::before {\n content: \"\u2713 \";\n }\n\n .actions {\n display: flex;\n justify-content: center;\n gap: 12px;\n margin-top: 20px;\n flex-wrap: wrap;\n }\n\n button.btn {\n font-family: inherit;\n border: none;\n border-radius: 999px;\n padding: 14px 28px;\n font-size: 1rem;\n font-weight: 800;\n letter-spacing: .3px;\n cursor: pointer;\n color: #fff;\n background: linear-gradient(90deg, var(--accent), var(--accent-2));\n box-shadow: 0 8px 20px rgba(216, 67, 21, 0.25);\n transition: transform .18s ease, box-shadow .18s ease, opacity .18s ease;\n }\n\n button.btn:hover { transform: translateY(-2px); box-shadow: 0 12px 26px rgba(216, 67, 21, 0.35); }\n button.btn:active { transform: translateY(0); }\n \n button.btn.ghost {\n background: #fff;\n color: var(--accent-2);\n border: 2px solid var(--accent-2);\n box-shadow: none;\n }\n button.btn.ghost:hover { background: #e8f5e9; }\n\n .result {\n text-align: center;\n padding: 30px;\n border-radius: var(--radius);\n background: linear-gradient(135deg, #ffffff, #fff3e0);\n border: 2px solid #ffe0b2;\n display: none;\n animation: pop .5s cubic-bezier(.2, 1.4, .4, 1);\n }\n\n @keyframes pop {\n 0% { transform: scale(.9); opacity: 0; }\n 100% { transform: scale(1); opacity: 1; }\n }\n\n .result h2 {\n margin: 0 0 10px;\n font-size: 1.6rem;\n background: linear-gradient(90deg, var(--accent), var(--accent-2));\n -webkit-background-clip: text;\n background-clip: text;\n color: transparent;\n }\n\n .result p { margin: 0 0 8px; color: var(--ink-soft); font-weight: 600; }\n\n .score {\n display: inline-block;\n margin: 12px 0 6px;\n padding: 10px 20px;\n border-radius: 999px;\n background: #fff;\n font-weight: 800;\n color: var(--accent-2);\n box-shadow: 0 6px 16px rgba(46, 125, 50, 0.15);\n border: 1px solid #c8e6c9;\n }\n\n footer {\n text-align: center;\n font-size: .85rem;\n color: var(--ink-soft);\n margin-top: 24px;\n font-weight: 500;\n }\n\n .hidden { display: none !important; }\n<\/style>\n<\/head>\n<body>\n<div class=\"wrap\">\n <header>\n <h1>\ud83c\udf55 Food \u00b7 Grammar Practice<\/h1>\n <p>Scegli la frase corretta e crea il tuo menu perfetto!<\/p>\n <\/header>\n\n \n <section class=\"card\" id=\"questionCard\">\n <div class=\"progress-wrap\">\n <div class=\"progress-bar\"><div class=\"progress-fill\" id=\"progressFill\"><\/div><\/div>\n <div class=\"progress-label\" id=\"progressLabel\">Frase 1 di 15<\/div>\n <\/div>\n <p class=\"question\">Quale frase \u00e8 grammaticalmente corretta? \ud83d\udc47<\/p>\n <div class=\"options\" id=\"options\"><\/div>\n <\/section>\n\n \n <section class=\"card\">\n <h2 style=\"margin:0 0 12px; font-size:1.2rem; color:var(--accent-2);\">\ud83d\udcdd Il tuo racconto culinario<\/h2>\n <div class=\"text-area\" id=\"textArea\">\n <span class=\"placeholder\">Il tuo testo apparir\u00e0 qui\u2026<\/span>\n <\/div>\n <div class=\"actions\" id=\"actions\" style=\"display:none;\">\n <button class=\"btn\" id=\"restartBtn\">\ud83d\udd04 Ricomincia<\/button>\n <\/div>\n <\/section>\n\n \n <section class=\"result\" id=\"result\">\n <h2 id=\"resultTitle\"><\/h2>\n <div class=\"score\" id=\"scoreBox\"><\/div>\n <p id=\"resultMsg\"><\/p>\n <\/section>\n\n <footer>Livello A2\/B1 \u00b7 Grammatica Inglese<\/footer>\n<\/div>\n\n<script>\n\/* ---------- DATI (15 Frasi, Tema: Food) ---------- *\/\nconst coppie = [\n {\n corretta: \"I usually eat breakfast at 7 o'clock.\",\n sbagliata: \"I am usually eating breakfast at 7 o'clock.\",\n tipo: \"Simple Present (Habits)\"\n },\n {\n corretta: \"My brother doesn't like spicy food.\",\n sbagliata: \"My brother don't like spicy food.\",\n tipo: \"Simple Present (Negative)\"\n },\n {\n corretta: \"Do you prefer pizza or pasta?\",\n sbagliata: \"Are you prefer pizza or pasta?\",\n tipo: \"Simple Present (Questions)\"\n },\n {\n corretta: \"Yesterday, I cooked a delicious lasagna.\",\n sbagliata: \"Yesterday, I cook a delicious lasagna.\",\n tipo: \"Simple Past (Positive)\"\n },\n {\n corretta: \"We didn't go to that new restaurant last night.\",\n sbagliata: \"We didn't went to that new restaurant last night.\",\n tipo: \"Simple Past (Negative)\"\n },\n {\n corretta: \"Did you enjoy the dinner party?\",\n sbagliata: \"Did you enjoyed the dinner party?\",\n tipo: \"Simple Past (Questions)\"\n },\n {\n corretta: \"If I have time, I will bake a cake.\",\n sbagliata: \"If I will have time, I bake a cake.\",\n tipo: \"First Conditional\"\n },\n {\n corretta: \"If I were you, I would try the sushi.\",\n sbagliata: \"If I was you, I will try the sushi.\",\n tipo: \"Second Conditional\"\n },\n {\n corretta: \"I have just finished my lunch.\",\n sbagliata: \"I have just finish my lunch.\",\n tipo: \"Present Perfect (Just)\"\n },\n {\n corretta: \"Have you ever eaten snails?\",\n sbagliata: \"Did you ever ate snails?\",\n tipo: \"Present Perfect (Experience)\"\n },\n {\n corretta: \"She hasn't bought any milk yet.\",\n sbagliata: \"She haven't bought some milk yet.\",\n tipo: \"Present Perfect (Negative)\"\n },\n {\n corretta: \"There isn't much sugar in the jar.\",\n sbagliata: \"There isn't many sugar in the jar.\",\n tipo: \"Quantifiers (Much\/Uncountable)\"\n },\n {\n corretta: \"How many apples do we need for the pie?\",\n sbagliata: \"How much apples do we need for the pie?\",\n tipo: \"Quantifiers (Many\/Countable)\"\n },\n {\n corretta: \"There are a lot of people in the kitchen.\",\n sbagliata: \"There is a lot of people in the kitchen.\",\n tipo: \"Quantifiers (A lot of)\"\n },\n {\n corretta: \"Would you like something to drink?\",\n sbagliata: \"Would you like anything to drink?\",\n tipo: \"Indefinite Pronouns (Offers)\"\n }\n];\n\n\/* ---------- STATO ---------- *\/\nlet currentIndex = 0;\nlet scelte = []; \/\/ { testo, corretta: bool }\nlet finito = false;\n\n\/* ---------- RIFERIMENTI DOM ---------- *\/\nconst optionsEl = document.getElementById('options');\nconst textAreaEl = document.getElementById('textArea');\nconst progressFill = document.getElementById('progressFill');\nconst progressLabel = document.getElementById('progressLabel');\nconst actionsEl = document.getElementById('actions');\nconst resultEl = document.getElementById('result');\nconst resultTitle = document.getElementById('resultTitle');\nconst resultMsg = document.getElementById('resultMsg');\nconst scoreBox = document.getElementById('scoreBox');\nconst restartBtn = document.getElementById('restartBtn');\nconst questionCard = document.getElementById('questionCard');\n\n\/* ---------- UTILS ---------- *\/\nfunction shuffle(a) {\n const arr = a.slice();\n for (let i = arr.length - 1; i > 0; i--) {\n const j = Math.floor(Math.random() * (i + 1));\n [arr[i], arr[j]] = [arr[j], arr[i]];\n }\n return arr;\n}\n\nfunction updateProgress() {\n const done = currentIndex;\n const total = coppie.length;\n const pct = (done \/ total) * 100;\n progressFill.style.width = pct + '%';\n progressLabel.textContent = done < total\n ? `Frase ${done + 1} di ${total}`\n : `Completato \u00b7 ${total} di ${total}`;\n}\n\n\/* ---------- RENDER ---------- *\/\nfunction renderQuestion() {\n if (currentIndex >= coppie.length) {\n finish();\n return;\n }\n updateProgress();\n\n const coppia = coppie[currentIndex];\n \/\/ mescola l'ordine delle due opzioni\n const opzioni = shuffle([\n { testo: coppia.corretta, corretta: true },\n { testo: coppia.sbagliata, corretta: false }\n ]);\n\n optionsEl.innerHTML = '';\n opzioni.forEach((op, i) => {\n const btn = document.createElement('button');\n btn.className = 'option';\n btn.innerHTML = `<span class=\"badge\">Opzione ${i + 1}<\/span><br>${op.testo}`;\n btn.addEventListener('click', () => scegli(op, btn));\n optionsEl.appendChild(btn);\n });\n}\n\nfunction scegli(op, btn) {\n if (finito) return;\n\n \/\/ blocca entrambe le opzioni\n [...optionsEl.querySelectorAll('.option')].forEach(b => b.disabled = true);\n\n scelte.push({ testo: op.testo, corretta: op.corretta });\n aggiungiAlTesto(op.testo, false);\n\n currentIndex++;\n \/\/ piccola pausa per far vedere la selezione, poi avanti\n setTimeout(() => {\n renderQuestion();\n }, 320);\n}\n\nfunction aggiungiAlTesto(frase, isErrore, correzione) {\n if (textAreaEl.querySelector('.placeholder')) {\n textAreaEl.innerHTML = '';\n }\n const p = document.createElement('p');\n if (isErrore) {\n p.innerHTML = `<span class=\"err\">${frase}<\/span>`;\n if (correzione) {\n const note = document.createElement('span');\n note.className = 'err-note';\n note.textContent = correzione;\n p.appendChild(note);\n }\n } else {\n p.textContent = frase;\n }\n textAreaEl.appendChild(p);\n textAreaEl.scrollTop = textAreaEl.scrollHeight;\n}\n\n\/* ---------- FINE ---------- *\/\nfunction finish() {\n finito = true;\n updateProgress();\n\n \/\/ nascondi la card domanda, mostra il risultato\n questionCard.classList.add('hidden');\n actionsEl.style.display = 'flex';\n\n const totale = coppie.length;\n const giuste = scelte.filter(s => s.corretta).length;\n\n \/\/ ricostruisci il testo finale con eventuali errori evidenziati\n textAreaEl.innerHTML = '';\n scelte.forEach((s, i) => {\n const p = document.createElement('p');\n if (s.corretta) {\n p.textContent = s.testo;\n } else {\n const corretta = coppie[i].corretta;\n p.innerHTML = `<span class=\"err\">${s.testo}<\/span>`;\n const note = document.createElement('span');\n note.className = 'err-note';\n note.textContent = corretta;\n p.appendChild(note);\n }\n textAreaEl.appendChild(p);\n });\n\n \/\/ risultato\n resultEl.style.display = 'block';\n scoreBox.textContent = `${giuste} \/ ${totale} corrette`;\n\n if (giuste === totale) {\n resultTitle.textContent = \"\ud83c\udf89 Delicious! Testo perfetto!\";\n resultMsg.textContent = \"Hai scelto tutte le frasi corrette. Sei un vero chef della grammatica!\";\n lanciaCoriandoli();\n } else if (giuste >= totale * 0.7) {\n resultTitle.textContent = \"\ud83d\udc4f Very Tasty!\";\n resultMsg.textContent = \"Ottimo lavoro! Dai un'occhiata alle frasi sottolineate in rosso qui sopra per perfezionare la ricetta.\";\n lanciaCoriandoli(true);\n } else {\n resultTitle.textContent = \"\ud83d\udcaa Keep Cooking!\";\n resultMsg.textContent = \"La ricetta ha bisogno di qualche aggiustamento. Guarda le correzioni verdi e riprova!\";\n }\n\n \/\/ scroll dolce al risultato\n setTimeout(() => resultEl.scrollIntoView({ behavior: 'smooth', block: 'center' }), 200);\n}\n\n\/* ---------- CORIANDOLI ---------- *\/\nfunction lanciaCoriandoli(soft) {\n const durata = soft ? 1500 : 3000;\n const fine = Date.now() + durata;\n\n (function frame() {\n confetti({\n particleCount: soft ? 3 : 6,\n startVelocity: 34,\n spread: 360,\n ticks: 70,\n origin: { x: Math.random(), y: Math.random() * 0.4 },\n colors: ['#d84315', '#2e7d32', '#fbc02d', '#ffffff', '#ff7043']\n });\n if (Date.now() < fine) requestAnimationFrame(frame);\n })();\n}\n\n\/* ---------- RESET ---------- *\/\nfunction reset() {\n currentIndex = 0;\n scelte = [];\n finito = false;\n\n textAreaEl.innerHTML = '<span class=\"placeholder\">Il tuo testo apparir\u00e0 qui\u2026<\/span>';\n resultEl.style.display = 'none';\n actionsEl.style.display = 'none';\n questionCard.classList.remove('hidden');\n\n progressFill.style.width = '0%';\n renderQuestion();\n window.scrollTo({ top: 0, behavior: 'smooth' });\n}\n\nrestartBtn.addEventListener('click', reset);\n\n\/* ---------- AVVIO ---------- *\/\nrenderQuestion();\n<\/script>\n<\/body>\n<\/html>\n\t\t\t\t<\/div>\n\t\t\n<\/div>\n\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Food \u00b7 English Grammar Practice \ud83c\udf55 Food \u00b7 Grammar Practice Scegli la frase corretta e crea il tuo menu perfetto! […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"site-sidebar-layout":"no-sidebar","site-content-layout":"","ast-site-content-layout":"full-width-container","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"disabled","ast-breadcrumbs-content":"","ast-featured-img":"disabled","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"class_list":["post-594","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/www.profdifaziodonato.it\/index.php?rest_route=\/wp\/v2\/pages\/594","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.profdifaziodonato.it\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.profdifaziodonato.it\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.profdifaziodonato.it\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.profdifaziodonato.it\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=594"}],"version-history":[{"count":4,"href":"https:\/\/www.profdifaziodonato.it\/index.php?rest_route=\/wp\/v2\/pages\/594\/revisions"}],"predecessor-version":[{"id":598,"href":"https:\/\/www.profdifaziodonato.it\/index.php?rest_route=\/wp\/v2\/pages\/594\/revisions\/598"}],"wp:attachment":[{"href":"https:\/\/www.profdifaziodonato.it\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=594"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

\n\t\t\t\t

\n \t\t

\n\t\t\t\t\t\n\n\n\n\nFood \u00b7 English Grammar Practice<\/title>\n<script src=\"https:\/\/cdn.jsdelivr.net\/npm\/canvas-confetti@1.9.2\/dist\/confetti.browser.min.js\"><\/script>\n<style>\n :root {\n \/* Food Palette: Warm colors (Orange\/Red\/Green) *\/\n --bg-1: #fff3e0; \/* Creamy Orange *\/\n --bg-2: #ffccbc; \/* Light Peach *\/\n --bg-3: #c8e6c9; \/* Fresh Green *\/\n --bg-4: #ffe0b2; \/* Soft Apricot *\/\n \n --accent: #d84315; \/* Burnt Orange *\/\n --accent-2: #2e7d32; \/* Forest Green *\/\n --ok: #2e7d32;\n --err: #c62828;\n \n --ink: #1a1a1a; \/* Almost Black for max contrast *\/\n --ink-soft: #424242; \/* Dark Grey *\/\n --card: #ffffff;\n --shadow: 0 12px 30px rgba(46, 125, 50, 0.15);\n --radius: 22px;\n }\n\n * { box-sizing: border-box; }\n\n html, body {\n margin: 0;\n padding: 0;\n min-height: 100%;\n font-family: 'Segoe UI', 'Nunito', system-ui, -apple-system, sans-serif;\n color: var(--ink);\n background: linear-gradient(135deg, var(--bg-1), var(--bg-2), var(--bg-3), var(--bg-4));\n background-size: 400% 400%;\n animation: bgShift 20s ease infinite;\n }\n\n @keyframes bgShift {\n 0% { background-position: 0% 50%; }\n 50% { background-position: 100% 50%; }\n 100% { background-position: 0% 50%; }\n }\n\n .wrap {\n max-width: 900px;\n margin: 0 auto;\n padding: 28px 18px 60px;\n }\n\n header {\n text-align: center;\n margin-bottom: 22px;\n }\n\n header h1 {\n margin: 0 0 6px;\n font-size: clamp(1.5rem, 3.5vw, 2.1rem);\n letter-spacing: .5px;\n background: linear-gradient(90deg, var(--accent), var(--accent-2));\n -webkit-background-clip: text;\n background-clip: text;\n color: transparent;\n font-weight: 800;\n }\n\n header p {\n margin: 0;\n color: var(--ink-soft);\n font-size: 1rem;\n font-weight: 600;\n }\n\n .card {\n background: var(--card);\n border-radius: var(--radius);\n box-shadow: var(--shadow);\n padding: 24px;\n margin-bottom: 20px;\n border: 1px solid rgba(0,0,0,0.05);\n }\n\n .progress-wrap {\n display: flex;\n align-items: center;\n gap: 12px;\n margin-bottom: 16px;\n }\n\n .progress-bar {\n flex: 1;\n height: 12px;\n background: #f0f0f0;\n border-radius: 999px;\n overflow: hidden;\n border: 1px solid #e0e0e0;\n }\n\n .progress-fill {\n height: 100%;\n width: 0%;\n background: linear-gradient(90deg, var(--accent), var(--accent-2));\n border-radius: 999px;\n transition: width .45s cubic-bezier(.4, 0, .2, 1);\n }\n\n .progress-label {\n font-size: 0.9rem;\n font-weight: 700;\n color: var(--ink-soft);\n white-space: nowrap;\n }\n\n .question {\n font-size: 1.1rem;\n color: var(--ink);\n margin: 0 0 18px;\n font-weight: 700;\n }\n\n .options {\n display: grid;\n grid-template-columns: 1fr 1fr;\n gap: 16px;\n }\n\n @media (max-width: 620px) {\n .options { grid-template-columns: 1fr; }\n \n .option {\n color: #000000 !important;\n background: #ffffff;\n border-color: #bdbdbd;\n }\n }\n\n .option {\n border: 2px solid #eeeeee;\n background: #fafafa;\n border-radius: 16px;\n padding: 20px 18px;\n font-size: 1.05rem;\n line-height: 1.5;\n text-align: left;\n cursor: pointer;\n color: #000000 !important;\n font-weight: 600;\n transition: transform .18s ease, border-color .18s ease, background .18s ease, box-shadow .18s ease;\n font-family: inherit;\n }\n\n .option:hover:not(:disabled) {\n transform: translateY(-3px);\n border-color: var(--accent-2);\n background: #e8f5e9;\n box-shadow: 0 8px 18px rgba(46, 125, 50, 0.15);\n }\n\n .option:disabled {\n cursor: default;\n opacity: .6;\n }\n\n .option .badge {\n display: inline-block;\n font-size: .75rem;\n font-weight: 800;\n letter-spacing: .8px;\n text-transform: uppercase;\n color: #fff;\n background: linear-gradient(90deg, var(--accent), var(--accent-2));\n padding: 4px 10px;\n border-radius: 999px;\n margin-bottom: 10px;\n }\n\n .text-area {\n min-height: 150px;\n border-radius: 16px;\n background: #fffdf7;\n border: 2px dashed #d7ccc8;\n padding: 20px;\n font-size: 1.1rem;\n line-height: 1.8;\n color: var(--ink);\n }\n\n .text-area .placeholder {\n color: #8d6e63;\n font-style: italic;\n }\n\n .text-area p {\n margin: 0 0 10px;\n }\n\n .text-area p:last-child { margin-bottom: 0; }\n\n .err {\n text-decoration: underline wavy var(--err);\n text-decoration-thickness: 2px;\n text-underline-offset: 4px;\n color: var(--err);\n font-weight: 700;\n }\n\n .err-note {\n display: block;\n font-size: .9rem;\n color: var(--ok);\n font-weight: 700;\n margin-top: 4px;\n }\n\n .err-note::before {\n content: \"\u2713 \";\n }\n\n .actions {\n display: flex;\n justify-content: center;\n gap: 12px;\n margin-top: 20px;\n flex-wrap: wrap;\n }\n\n button.btn {\n font-family: inherit;\n border: none;\n border-radius: 999px;\n padding: 14px 28px;\n font-size: 1rem;\n font-weight: 800;\n letter-spacing: .3px;\n cursor: pointer;\n color: #fff;\n background: linear-gradient(90deg, var(--accent), var(--accent-2));\n box-shadow: 0 8px 20px rgba(216, 67, 21, 0.25);\n transition: transform .18s ease, box-shadow .18s ease, opacity .18s ease;\n }\n\n button.btn:hover { transform: translateY(-2px); box-shadow: 0 12px 26px rgba(216, 67, 21, 0.35); }\n button.btn:active { transform: translateY(0); }\n \n button.btn.ghost {\n background: #fff;\n color: var(--accent-2);\n border: 2px solid var(--accent-2);\n box-shadow: none;\n }\n button.btn.ghost:hover { background: #e8f5e9; }\n\n .result {\n text-align: center;\n padding: 30px;\n border-radius: var(--radius);\n background: linear-gradient(135deg, #ffffff, #fff3e0);\n border: 2px solid #ffe0b2;\n display: none;\n animation: pop .5s cubic-bezier(.2, 1.4, .4, 1);\n }\n\n @keyframes pop {\n 0% { transform: scale(.9); opacity: 0; }\n 100% { transform: scale(1); opacity: 1; }\n }\n\n .result h2 {\n margin: 0 0 10px;\n font-size: 1.6rem;\n background: linear-gradient(90deg, var(--accent), var(--accent-2));\n -webkit-background-clip: text;\n background-clip: text;\n color: transparent;\n }\n\n .result p { margin: 0 0 8px; color: var(--ink-soft); font-weight: 600; }\n\n .score {\n display: inline-block;\n margin: 12px 0 6px;\n padding: 10px 20px;\n border-radius: 999px;\n background: #fff;\n font-weight: 800;\n color: var(--accent-2);\n box-shadow: 0 6px 16px rgba(46, 125, 50, 0.15);\n border: 1px solid #c8e6c9;\n }\n\n footer {\n text-align: center;\n font-size: .85rem;\n color: var(--ink-soft);\n margin-top: 24px;\n font-weight: 500;\n }\n\n .hidden { display: none !important; }\n<\/style>\n<\/head>\n<body>\n<div class=\"wrap\">\n <header>\n <h1>\ud83c\udf55 Food \u00b7 Grammar Practice<\/h1>\n <p>Scegli la frase corretta e crea il tuo menu perfetto!<\/p>\n <\/header>\n\n \n <section class=\"card\" id=\"questionCard\">\n <div class=\"progress-wrap\">\n <div class=\"progress-bar\"><div class=\"progress-fill\" id=\"progressFill\"><\/div><\/div>\n <div class=\"progress-label\" id=\"progressLabel\">Frase 1 di 15<\/div>\n <\/div>\n <p class=\"question\">Quale frase \u00e8 grammaticalmente corretta? \ud83d\udc47<\/p>\n <div class=\"options\" id=\"options\"><\/div>\n <\/section>\n\n \n <section class=\"card\">\n <h2 style=\"margin:0 0 12px; font-size:1.2rem; color:var(--accent-2);\">\ud83d\udcdd Il tuo racconto culinario<\/h2>\n <div class=\"text-area\" id=\"textArea\">\n <span class=\"placeholder\">Il tuo testo apparir\u00e0 qui\u2026<\/span>\n <\/div>\n <div class=\"actions\" id=\"actions\" style=\"display:none;\">\n <button class=\"btn\" id=\"restartBtn\">\ud83d\udd04 Ricomincia<\/button>\n <\/div>\n <\/section>\n\n \n <section class=\"result\" id=\"result\">\n <h2 id=\"resultTitle\"><\/h2>\n <div class=\"score\" id=\"scoreBox\"><\/div>\n <p id=\"resultMsg\"><\/p>\n <\/section>\n\n <footer>Livello A2\/B1 \u00b7 Grammatica Inglese<\/footer>\n<\/div>\n\n<script>\n\/* ---------- DATI (15 Frasi, Tema: Food) ---------- *\/\nconst coppie = [\n {\n corretta: \"I usually eat breakfast at 7 o'clock.\",\n sbagliata: \"I am usually eating breakfast at 7 o'clock.\",\n tipo: \"Simple Present (Habits)\"\n },\n {\n corretta: \"My brother doesn't like spicy food.\",\n sbagliata: \"My brother don't like spicy food.\",\n tipo: \"Simple Present (Negative)\"\n },\n {\n corretta: \"Do you prefer pizza or pasta?\",\n sbagliata: \"Are you prefer pizza or pasta?\",\n tipo: \"Simple Present (Questions)\"\n },\n {\n corretta: \"Yesterday, I cooked a delicious lasagna.\",\n sbagliata: \"Yesterday, I cook a delicious lasagna.\",\n tipo: \"Simple Past (Positive)\"\n },\n {\n corretta: \"We didn't go to that new restaurant last night.\",\n sbagliata: \"We didn't went to that new restaurant last night.\",\n tipo: \"Simple Past (Negative)\"\n },\n {\n corretta: \"Did you enjoy the dinner party?\",\n sbagliata: \"Did you enjoyed the dinner party?\",\n tipo: \"Simple Past (Questions)\"\n },\n {\n corretta: \"If I have time, I will bake a cake.\",\n sbagliata: \"If I will have time, I bake a cake.\",\n tipo: \"First Conditional\"\n },\n {\n corretta: \"If I were you, I would try the sushi.\",\n sbagliata: \"If I was you, I will try the sushi.\",\n tipo: \"Second Conditional\"\n },\n {\n corretta: \"I have just finished my lunch.\",\n sbagliata: \"I have just finish my lunch.\",\n tipo: \"Present Perfect (Just)\"\n },\n {\n corretta: \"Have you ever eaten snails?\",\n sbagliata: \"Did you ever ate snails?\",\n tipo: \"Present Perfect (Experience)\"\n },\n {\n corretta: \"She hasn't bought any milk yet.\",\n sbagliata: \"She haven't bought some milk yet.\",\n tipo: \"Present Perfect (Negative)\"\n },\n {\n corretta: \"There isn't much sugar in the jar.\",\n sbagliata: \"There isn't many sugar in the jar.\",\n tipo: \"Quantifiers (Much\/Uncountable)\"\n },\n {\n corretta: \"How many apples do we need for the pie?\",\n sbagliata: \"How much apples do we need for the pie?\",\n tipo: \"Quantifiers (Many\/Countable)\"\n },\n {\n corretta: \"There are a lot of people in the kitchen.\",\n sbagliata: \"There is a lot of people in the kitchen.\",\n tipo: \"Quantifiers (A lot of)\"\n },\n {\n corretta: \"Would you like something to drink?\",\n sbagliata: \"Would you like anything to drink?\",\n tipo: \"Indefinite Pronouns (Offers)\"\n }\n];\n\n\/* ---------- STATO ---------- *\/\nlet currentIndex = 0;\nlet scelte = []; \/\/ { testo, corretta: bool }\nlet finito = false;\n\n\/* ---------- RIFERIMENTI DOM ---------- *\/\nconst optionsEl = document.getElementById('options');\nconst textAreaEl = document.getElementById('textArea');\nconst progressFill = document.getElementById('progressFill');\nconst progressLabel = document.getElementById('progressLabel');\nconst actionsEl = document.getElementById('actions');\nconst resultEl = document.getElementById('result');\nconst resultTitle = document.getElementById('resultTitle');\nconst resultMsg = document.getElementById('resultMsg');\nconst scoreBox = document.getElementById('scoreBox');\nconst restartBtn = document.getElementById('restartBtn');\nconst questionCard = document.getElementById('questionCard');\n\n\/* ---------- UTILS ---------- *\/\nfunction shuffle(a) {\n const arr = a.slice();\n for (let i = arr.length - 1; i > 0; i--) {\n const j = Math.floor(Math.random() * (i + 1));\n [arr[i], arr[j]] = [arr[j], arr[i]];\n }\n return arr;\n}\n\nfunction updateProgress() {\n const done = currentIndex;\n const total = coppie.length;\n const pct = (done \/ total) * 100;\n progressFill.style.width = pct + '%';\n progressLabel.textContent = done < total\n ? `Frase ${done + 1} di ${total}`\n : `Completato \u00b7 ${total} di ${total}`;\n}\n\n\/* ---------- RENDER ---------- *\/\nfunction renderQuestion() {\n if (currentIndex >= coppie.length) {\n finish();\n return;\n }\n updateProgress();\n\n const coppia = coppie[currentIndex];\n \/\/ mescola l'ordine delle due opzioni\n const opzioni = shuffle([\n { testo: coppia.corretta, corretta: true },\n { testo: coppia.sbagliata, corretta: false }\n ]);\n\n optionsEl.innerHTML = '';\n opzioni.forEach((op, i) => {\n const btn = document.createElement('button');\n btn.className = 'option';\n btn.innerHTML = `<span class=\"badge\">Opzione ${i + 1}<\/span><br>${op.testo}`;\n btn.addEventListener('click', () => scegli(op, btn));\n optionsEl.appendChild(btn);\n });\n}\n\nfunction scegli(op, btn) {\n if (finito) return;\n\n \/\/ blocca entrambe le opzioni\n [...optionsEl.querySelectorAll('.option')].forEach(b => b.disabled = true);\n\n scelte.push({ testo: op.testo, corretta: op.corretta });\n aggiungiAlTesto(op.testo, false);\n\n currentIndex++;\n \/\/ piccola pausa per far vedere la selezione, poi avanti\n setTimeout(() => {\n renderQuestion();\n }, 320);\n}\n\nfunction aggiungiAlTesto(frase, isErrore, correzione) {\n if (textAreaEl.querySelector('.placeholder')) {\n textAreaEl.innerHTML = '';\n }\n const p = document.createElement('p');\n if (isErrore) {\n p.innerHTML = `<span class=\"err\">${frase}<\/span>`;\n if (correzione) {\n const note = document.createElement('span');\n note.className = 'err-note';\n note.textContent = correzione;\n p.appendChild(note);\n }\n } else {\n p.textContent = frase;\n }\n textAreaEl.appendChild(p);\n textAreaEl.scrollTop = textAreaEl.scrollHeight;\n}\n\n\/* ---------- FINE ---------- *\/\nfunction finish() {\n finito = true;\n updateProgress();\n\n \/\/ nascondi la card domanda, mostra il risultato\n questionCard.classList.add('hidden');\n actionsEl.style.display = 'flex';\n\n const totale = coppie.length;\n const giuste = scelte.filter(s => s.corretta).length;\n\n \/\/ ricostruisci il testo finale con eventuali errori evidenziati\n textAreaEl.innerHTML = '';\n scelte.forEach((s, i) => {\n const p = document.createElement('p');\n if (s.corretta) {\n p.textContent = s.testo;\n } else {\n const corretta = coppie[i].corretta;\n p.innerHTML = `<span class=\"err\">${s.testo}<\/span>`;\n const note = document.createElement('span');\n note.className = 'err-note';\n note.textContent = corretta;\n p.appendChild(note);\n }\n textAreaEl.appendChild(p);\n });\n\n \/\/ risultato\n resultEl.style.display = 'block';\n scoreBox.textContent = `${giuste} \/ ${totale} corrette`;\n\n if (giuste === totale) {\n resultTitle.textContent = \"\ud83c\udf89 Delicious! Testo perfetto!\";\n resultMsg.textContent = \"Hai scelto tutte le frasi corrette. Sei un vero chef della grammatica!\";\n lanciaCoriandoli();\n } else if (giuste >= totale * 0.7) {\n resultTitle.textContent = \"\ud83d\udc4f Very Tasty!\";\n resultMsg.textContent = \"Ottimo lavoro! Dai un'occhiata alle frasi sottolineate in rosso qui sopra per perfezionare la ricetta.\";\n lanciaCoriandoli(true);\n } else {\n resultTitle.textContent = \"\ud83d\udcaa Keep Cooking!\";\n resultMsg.textContent = \"La ricetta ha bisogno di qualche aggiustamento. Guarda le correzioni verdi e riprova!\";\n }\n\n \/\/ scroll dolce al risultato\n setTimeout(() => resultEl.scrollIntoView({ behavior: 'smooth', block: 'center' }), 200);\n}\n\n\/* ---------- CORIANDOLI ---------- *\/\nfunction lanciaCoriandoli(soft) {\n const durata = soft ? 1500 : 3000;\n const fine = Date.now() + durata;\n\n (function frame() {\n confetti({\n particleCount: soft ? 3 : 6,\n startVelocity: 34,\n spread: 360,\n ticks: 70,\n origin: { x: Math.random(), y: Math.random() * 0.4 },\n colors: ['#d84315', '#2e7d32', '#fbc02d', '#ffffff', '#ff7043']\n });\n if (Date.now() < fine) requestAnimationFrame(frame);\n })();\n}\n\n\/* ---------- RESET ---------- *\/\nfunction reset() {\n currentIndex = 0;\n scelte = [];\n finito = false;\n\n textAreaEl.innerHTML = '<span class=\"placeholder\">Il tuo testo apparir\u00e0 qui\u2026<\/span>';\n resultEl.style.display = 'none';\n actionsEl.style.display = 'none';\n questionCard.classList.remove('hidden');\n\n progressFill.style.width = '0%';\n renderQuestion();\n window.scrollTo({ top: 0, behavior: 'smooth' });\n}\n\nrestartBtn.addEventListener('click', reset);\n\n\/* ---------- AVVIO ---------- *\/\nrenderQuestion();\n<\/script>\n<\/body>\n<\/html>\n\t\t\t\t<\/div>\n\t\t\n<\/div>\n\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Food \u00b7 English Grammar Practice \ud83c\udf55 Food \u00b7 Grammar Practice Scegli la frase corretta e crea il tuo menu perfetto! […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"site-sidebar-layout":"no-sidebar","site-content-layout":"","ast-site-content-layout":"full-width-container","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"disabled","ast-breadcrumbs-content":"","ast-featured-img":"disabled","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"class_list":["post-594","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/www.profdifaziodonato.it\/index.php?rest_route=\/wp\/v2\/pages\/594","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.profdifaziodonato.it\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.profdifaziodonato.it\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.profdifaziodonato.it\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.profdifaziodonato.it\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=594"}],"version-history":[{"count":4,"href":"https:\/\/www.profdifaziodonato.it\/index.php?rest_route=\/wp\/v2\/pages\/594\/revisions"}],"predecessor-version":[{"id":598,"href":"https:\/\/www.profdifaziodonato.it\/index.php?rest_route=\/wp\/v2\/pages\/594\/revisions\/598"}],"wp:attachment":[{"href":"https:\/\/www.profdifaziodonato.it\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=594"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}