Shopping \u00b7 English Grammar Practice<\/title>\r\n<script src=\"https:\/\/cdn.jsdelivr.net\/npm\/canvas-confetti@1.9.2\/dist\/confetti.browser.min.js\"><\/script>\r\n<style>\r\n :root {\r\n \/* Shopping Palette: Chic & Modern (Purple\/Pink\/Teal) *\/\r\n --bg-1: #f3e5f5; \/* Light Purple *\/\r\n --bg-2: #e1bee7; \/* Medium Purple *\/\r\n --bg-3: #b2dfdb; \/* Soft Teal *\/\r\n --bg-4: #ffffff; \/* White *\/\r\n \r\n --accent: #8e24aa; \/* Deep Purple *\/\r\n --accent-2: #00897b; \/* Teal *\/\r\n --ok: #00897b;\r\n --err: #d32f2f;\r\n \r\n --ink: #1a1a1a; \/* High contrast black *\/\r\n --ink-soft: #37474f; \/* Blue Grey *\/\r\n --card: #ffffff;\r\n --shadow: 0 12px 30px rgba(142, 36, 170, 0.15);\r\n --radius: 22px;\r\n }\r\n\r\n * { box-sizing: border-box; }\r\n\r\n html, body {\r\n margin: 0;\r\n padding: 0;\r\n min-height: 100%;\r\n font-family: 'Segoe UI', 'Nunito', system-ui, -apple-system, sans-serif;\r\n color: var(--ink);\r\n background: linear-gradient(135deg, var(--bg-1), var(--bg-2), var(--bg-3), var(--bg-4));\r\n background-size: 400% 400%;\r\n animation: bgShift 20s ease infinite;\r\n }\r\n\r\n @keyframes bgShift {\r\n 0% { background-position: 0% 50%; }\r\n 50% { background-position: 100% 50%; }\r\n 100% { background-position: 0% 50%; }\r\n }\r\n\r\n .wrap {\r\n max-width: 900px;\r\n margin: 0 auto;\r\n padding: 28px 18px 60px;\r\n }\r\n\r\n header {\r\n text-align: center;\r\n margin-bottom: 22px;\r\n }\r\n\r\n header h1 {\r\n margin: 0 0 6px;\r\n font-size: clamp(1.5rem, 3.5vw, 2.1rem);\r\n letter-spacing: .5px;\r\n background: linear-gradient(90deg, var(--accent), var(--accent-2));\r\n -webkit-background-clip: text;\r\n background-clip: text;\r\n color: transparent;\r\n font-weight: 800;\r\n }\r\n\r\n header p {\r\n margin: 0;\r\n color: var(--ink-soft);\r\n font-size: 1rem;\r\n font-weight: 600;\r\n }\r\n\r\n .card {\r\n background: var(--card);\r\n border-radius: var(--radius);\r\n box-shadow: var(--shadow);\r\n padding: 24px;\r\n margin-bottom: 20px;\r\n border: 1px solid rgba(0,0,0,0.05);\r\n }\r\n\r\n .progress-wrap {\r\n display: flex;\r\n align-items: center;\r\n gap: 12px;\r\n margin-bottom: 16px;\r\n }\r\n\r\n .progress-bar {\r\n flex: 1;\r\n height: 12px;\r\n background: #f0f0f0;\r\n border-radius: 999px;\r\n overflow: hidden;\r\n border: 1px solid #e0e0e0;\r\n }\r\n\r\n .progress-fill {\r\n height: 100%;\r\n width: 0%;\r\n background: linear-gradient(90deg, var(--accent), var(--accent-2));\r\n border-radius: 999px;\r\n transition: width .45s cubic-bezier(.4, 0, .2, 1);\r\n }\r\n\r\n .progress-label {\r\n font-size: 0.9rem;\r\n font-weight: 700;\r\n color: var(--ink-soft);\r\n white-space: nowrap;\r\n }\r\n\r\n .question {\r\n font-size: 1.1rem;\r\n color: var(--ink);\r\n margin: 0 0 18px;\r\n font-weight: 700;\r\n }\r\n\r\n .options {\r\n display: grid;\r\n grid-template-columns: 1fr 1fr;\r\n gap: 16px;\r\n }\r\n\r\n @media (max-width: 620px) {\r\n .options { grid-template-columns: 1fr; }\r\n \r\n .option {\r\n color: #000000 !important;\r\n background: #ffffff;\r\n border-color: #bdbdbd;\r\n }\r\n }\r\n\r\n .option {\r\n border: 2px solid #eeeeee;\r\n background: #fafafa;\r\n border-radius: 16px;\r\n padding: 20px 18px;\r\n font-size: 1.05rem;\r\n line-height: 1.5;\r\n text-align: left;\r\n cursor: pointer;\r\n color: #000000 !important;\r\n font-weight: 600;\r\n transition: transform .18s ease, border-color .18s ease, background .18s ease, box-shadow .18s ease;\r\n font-family: inherit;\r\n }\r\n\r\n .option:hover:not(:disabled) {\r\n transform: translateY(-3px);\r\n border-color: var(--accent);\r\n background: #f3e5f5;\r\n box-shadow: 0 8px 18px rgba(142, 36, 170, 0.15);\r\n }\r\n\r\n .option:disabled {\r\n cursor: default;\r\n opacity: .6;\r\n }\r\n\r\n .option .badge {\r\n display: inline-block;\r\n font-size: .75rem;\r\n font-weight: 800;\r\n letter-spacing: .8px;\r\n text-transform: uppercase;\r\n color: #fff;\r\n background: linear-gradient(90deg, var(--accent), var(--accent-2));\r\n padding: 4px 10px;\r\n border-radius: 999px;\r\n margin-bottom: 10px;\r\n }\r\n\r\n .text-area {\r\n min-height: 150px;\r\n border-radius: 16px;\r\n background: #fffdfd;\r\n border: 2px dashed #d1c4e9;\r\n padding: 20px;\r\n font-size: 1.1rem;\r\n line-height: 1.8;\r\n color: var(--ink);\r\n }\r\n\r\n .text-area .placeholder {\r\n color: #7e57c2;\r\n font-style: italic;\r\n }\r\n\r\n .text-area p {\r\n margin: 0 0 10px;\r\n }\r\n\r\n .text-area p:last-child { margin-bottom: 0; }\r\n\r\n .err {\r\n text-decoration: underline wavy var(--err);\r\n text-decoration-thickness: 2px;\r\n text-underline-offset: 4px;\r\n color: var(--err);\r\n font-weight: 700;\r\n }\r\n\r\n .err-note {\r\n display: block;\r\n font-size: .9rem;\r\n color: var(--ok);\r\n font-weight: 700;\r\n margin-top: 4px;\r\n }\r\n\r\n .err-note::before {\r\n content: \"\u2713 \";\r\n }\r\n\r\n .actions {\r\n display: flex;\r\n justify-content: center;\r\n gap: 12px;\r\n margin-top: 20px;\r\n flex-wrap: wrap;\r\n }\r\n\r\n button.btn {\r\n font-family: inherit;\r\n border: none;\r\n border-radius: 999px;\r\n padding: 14px 28px;\r\n font-size: 1rem;\r\n font-weight: 800;\r\n letter-spacing: .3px;\r\n cursor: pointer;\r\n color: #fff;\r\n background: linear-gradient(90deg, var(--accent), var(--accent-2));\r\n box-shadow: 0 8px 20px rgba(142, 36, 170, 0.25);\r\n transition: transform .18s ease, box-shadow .18s ease, opacity .18s ease;\r\n }\r\n\r\n button.btn:hover { transform: translateY(-2px); box-shadow: 0 12px 26px rgba(142, 36, 170, 0.35); }\r\n button.btn:active { transform: translateY(0); }\r\n \r\n button.btn.ghost {\r\n background: #fff;\r\n color: var(--accent);\r\n border: 2px solid var(--accent);\r\n box-shadow: none;\r\n }\r\n button.btn.ghost:hover { background: #f3e5f5; }\r\n\r\n .result {\r\n text-align: center;\r\n padding: 30px;\r\n border-radius: var(--radius);\r\n background: linear-gradient(135deg, #ffffff, #f3e5f5);\r\n border: 2px solid #e1bee7;\r\n display: none;\r\n animation: pop .5s cubic-bezier(.2, 1.4, .4, 1);\r\n }\r\n\r\n @keyframes pop {\r\n 0% { transform: scale(.9); opacity: 0; }\r\n 100% { transform: scale(1); opacity: 1; }\r\n }\r\n\r\n .result h2 {\r\n margin: 0 0 10px;\r\n font-size: 1.6rem;\r\n background: linear-gradient(90deg, var(--accent), var(--accent-2));\r\n -webkit-background-clip: text;\r\n background-clip: text;\r\n color: transparent;\r\n }\r\n\r\n .result p { margin: 0 0 8px; color: var(--ink-soft); font-weight: 600; }\r\n\r\n .score {\r\n display: inline-block;\r\n margin: 12px 0 6px;\r\n padding: 10px 20px;\r\n border-radius: 999px;\r\n background: #fff;\r\n font-weight: 800;\r\n color: var(--accent);\r\n box-shadow: 0 6px 16px rgba(142, 36, 170, 0.15);\r\n border: 1px solid #e1bee7;\r\n }\r\n\r\n footer {\r\n text-align: center;\r\n font-size: .85rem;\r\n color: var(--ink-soft);\r\n margin-top: 24px;\r\n font-weight: 500;\r\n }\r\n\r\n .hidden { display: none !important; }\r\n<\/style>\r\n<\/head>\r\n<body>\r\n<div class=\"wrap\">\r\n <header>\r\n <h1>\ud83d\udecd\ufe0f Shopping \u00b7 Grammar Practice<\/h1>\r\n <p>Scegli la frase corretta e organizza la tua giornata di shopping!<\/p>\r\n <\/header>\r\n\r\n \r\n <section class=\"card\" id=\"questionCard\">\r\n <div class=\"progress-wrap\">\r\n <div class=\"progress-bar\"><div class=\"progress-fill\" id=\"progressFill\"><\/div><\/div>\r\n <div class=\"progress-label\" id=\"progressLabel\">Frase 1 di 15<\/div>\r\n <\/div>\r\n <p class=\"question\">Quale frase \u00e8 grammaticalmente corretta? \ud83d\udc47<\/p>\r\n <div class=\"options\" id=\"options\"><\/div>\r\n <\/section>\r\n\r\n \r\n <section class=\"card\">\r\n <h2 style=\"margin:0 0 12px; font-size:1.2rem; color:var(--accent);\">\ud83d\udcdd Il tuo diario dello shopping<\/h2>\r\n <div class=\"text-area\" id=\"textArea\">\r\n <span class=\"placeholder\">Il tuo testo apparir\u00e0 qui\u2026<\/span>\r\n <\/div>\r\n <div class=\"actions\" id=\"actions\" style=\"display:none;\">\r\n <button class=\"btn\" id=\"restartBtn\">\ud83d\udd04 Ricomincia<\/button>\r\n <\/div>\r\n <\/section>\r\n\r\n \r\n <section class=\"result\" id=\"result\">\r\n <h2 id=\"resultTitle\"><\/h2>\r\n <div class=\"score\" id=\"scoreBox\"><\/div>\r\n <p id=\"resultMsg\"><\/p>\r\n <\/section>\r\n\r\n <footer>Livello A2 \u00b7 Grammatica Inglese<\/footer>\r\n<\/div>\r\n\r\n<script>\r\n\/* ---------- DATI (15 Frasi, Tema: Shopping) ---------- *\/\r\nconst coppie = [\r\n {\r\n corretta: \"This shirt is cheaper than that one.\",\r\n sbagliata: \"This shirt is more cheap than that one.\",\r\n tipo: \"Comparatives\"\r\n },\r\n {\r\n corretta: \"These are the most expensive shoes in the shop.\",\r\n sbagliata: \"These are the expensivest shoes in the shop.\",\r\n tipo: \"Superlatives\"\r\n },\r\n {\r\n corretta: \"Can I try on this jacket, please?\",\r\n sbagliata: \"Can I try this jacket on, please?\", \/\/ Technically okay but 'try on' is better taught as unit or split correctly. Let's make wrong one clearly wrong.\r\n \/\/ Better wrong: \"Can I try this jacket?\" (missing phrasal verb nuance) or \"Can I wear on...?\"\r\n \/\/ Let's stick to standard error:\r\n sbagliata: \"Can I wear on this jacket, please?\", \r\n tipo: \"Phrasal Verbs (Try on)\"\r\n },\r\n {\r\n corretta: \"It\u2019s too tight. Do you have a larger size?\",\r\n sbagliata: \"It\u2019s too tight. Do you have a more large size?\",\r\n tipo: \"Adjectives (Tight\/Large)\"\r\n },\r\n {\r\n corretta: \"These jeans are too loose for me.\",\r\n sbagliata: \"These jeans are too lose for me.\",\r\n tipo: \"Vocabulary (Loose vs Lose)\"\r\n },\r\n {\r\n corretta: \"Is there a discount on this coat?\",\r\n sbagliata: \"Is there a money off on this coat?\",\r\n tipo: \"Vocabulary (Discount)\"\r\n },\r\n {\r\n corretta: \"I\u2019ll take them. How much are they?\",\r\n sbagliata: \"I\u2019ll take it. How many are they?\",\r\n tipo: \"Questions (Price\/Quantity)\"\r\n },\r\n {\r\n corretta: \"Can I pay by card or only in cash?\",\r\n sbagliata: \"Can I pay with card or only with cash?\",\r\n tipo: \"Prepositions (Pay by\/in)\"\r\n },\r\n {\r\n corretta: \"The changing rooms are over there.\",\r\n sbagliata: \"The changing rooms are on there.\",\r\n tipo: \"Prepositions of Place\"\r\n },\r\n {\r\n corretta: \"I\u2019m looking for a gift for my sister.\",\r\n sbagliata: \"I\u2019m finding a gift for my sister.\",\r\n tipo: \"Vocabulary (Look for vs Find)\"\r\n },\r\n {\r\n corretta: \"Have you got this in medium?\",\r\n sbagliata: \"Have you got this in average?\",\r\n tipo: \"Sizes (Medium)\"\r\n },\r\n {\r\n corretta: \"It fits me perfectly.\",\r\n sbagliata: \"It suits me perfectly.\", \/\/ Context: Size vs Style. 'Fits' is better for size context usually implied by previous Qs. But 'Suits' is valid. Let's make clear grammar\/vocab error.\r\n \/\/ Better: \"It matches me perfectly.\" (Wrong context)\r\n sbagliata: \"It matches me perfectly.\",\r\n tipo: \"Vocabulary (Fit vs Match)\"\r\n },\r\n {\r\n corretta: \"I\u2019ll think about it and come back later.\",\r\n sbagliata: \"I\u2019ll think it and come back later.\",\r\n tipo: \"Phrasal Verbs (Think about)\"\r\n },\r\n {\r\n corretta: \"These trousers don't fit me well.\",\r\n sbagliata: \"These trousers doesn't fit me well.\",\r\n tipo: \"Subject-Verb Agreement (Plural nouns)\"\r\n },\r\n {\r\n corretta: \"Would you like a bag for your purchases?\",\r\n sbagliata: \"Would you like a bag to your purchases?\",\r\n tipo: \"Prepositions (For)\"\r\n }\r\n];\r\n\r\n\/\/ Correction for item 3 in logic above to be clearer\r\ncoppie[2].sbagliata = \"Can I put on this jacket in the shop?\"; \/\/ 'Put on' is action, 'Try on' is test.\r\n\r\n\/* ---------- STATO ---------- *\/\r\nlet currentIndex = 0;\r\nlet scelte = []; \/\/ { testo, corretta: bool }\r\nlet finito = false;\r\n\r\n\/* ---------- RIFERIMENTI DOM ---------- *\/\r\nconst optionsEl = document.getElementById('options');\r\nconst textAreaEl = document.getElementById('textArea');\r\nconst progressFill = document.getElementById('progressFill');\r\nconst progressLabel = document.getElementById('progressLabel');\r\nconst actionsEl = document.getElementById('actions');\r\nconst resultEl = document.getElementById('result');\r\nconst resultTitle = document.getElementById('resultTitle');\r\nconst resultMsg = document.getElementById('resultMsg');\r\nconst scoreBox = document.getElementById('scoreBox');\r\nconst restartBtn = document.getElementById('restartBtn');\r\nconst questionCard = document.getElementById('questionCard');\r\n\r\n\/* ---------- UTILS ---------- *\/\r\nfunction shuffle(a) {\r\n const arr = a.slice();\r\n for (let i = arr.length - 1; i > 0; i--) {\r\n const j = Math.floor(Math.random() * (i + 1));\r\n [arr[i], arr[j]] = [arr[j], arr[i]];\r\n }\r\n return arr;\r\n}\r\n\r\nfunction updateProgress() {\r\n const done = currentIndex;\r\n const total = coppie.length;\r\n const pct = (done \/ total) * 100;\r\n progressFill.style.width = pct + '%';\r\n progressLabel.textContent = done < total\r\n ? `Frase ${done + 1} di ${total}`\r\n : `Completato \u00b7 ${total} di ${total}`;\r\n}\r\n\r\n\/* ---------- RENDER ---------- *\/\r\nfunction renderQuestion() {\r\n if (currentIndex >= coppie.length) {\r\n finish();\r\n return;\r\n }\r\n updateProgress();\r\n\r\n const coppia = coppie[currentIndex];\r\n \/\/ mescola l'ordine delle due opzioni\r\n const opzioni = shuffle([\r\n { testo: coppia.corretta, corretta: true },\r\n { testo: coppia.sbagliata, corretta: false }\r\n ]);\r\n\r\n optionsEl.innerHTML = '';\r\n opzioni.forEach((op, i) => {\r\n const btn = document.createElement('button');\r\n btn.className = 'option';\r\n btn.innerHTML = `<span class=\"badge\">Opzione ${i + 1}<\/span><br>${op.testo}`;\r\n btn.addEventListener('click', () => scegli(op, btn));\r\n optionsEl.appendChild(btn);\r\n });\r\n}\r\n\r\nfunction scegli(op, btn) {\r\n if (finito) return;\r\n\r\n \/\/ blocca entrambe le opzioni\r\n [...optionsEl.querySelectorAll('.option')].forEach(b => b.disabled = true);\r\n\r\n scelte.push({ testo: op.testo, corretta: op.corretta });\r\n aggiungiAlTesto(op.testo, false);\r\n\r\n currentIndex++;\r\n \/\/ piccola pausa per far vedere la selezione, poi avanti\r\n setTimeout(() => {\r\n renderQuestion();\r\n }, 320);\r\n}\r\n\r\nfunction aggiungiAlTesto(frase, isErrore, correzione) {\r\n if (textAreaEl.querySelector('.placeholder')) {\r\n textAreaEl.innerHTML = '';\r\n }\r\n const p = document.createElement('p');\r\n if (isErrore) {\r\n p.innerHTML = `<span class=\"err\">${frase}<\/span>`;\r\n if (correzione) {\r\n const note = document.createElement('span');\r\n note.className = 'err-note';\r\n note.textContent = correzione;\r\n p.appendChild(note);\r\n }\r\n } else {\r\n p.textContent = frase;\r\n }\r\n textAreaEl.appendChild(p);\r\n textAreaEl.scrollTop = textAreaEl.scrollHeight;\r\n}\r\n\r\n\/* ---------- FINE ---------- *\/\r\nfunction finish() {\r\n finito = true;\r\n updateProgress();\r\n\r\n \/\/ nascondi la card domanda, mostra il risultato\r\n questionCard.classList.add('hidden');\r\n actionsEl.style.display = 'flex';\r\n\r\n const totale = coppie.length;\r\n const giuste = scelte.filter(s => s.corretta).length;\r\n\r\n \/\/ ricostruisci il testo finale con eventuali errori evidenziati\r\n textAreaEl.innerHTML = '';\r\n scelte.forEach((s, i) => {\r\n const p = document.createElement('p');\r\n if (s.corretta) {\r\n p.textContent = s.testo;\r\n } else {\r\n const corretta = coppie[i].corretta;\r\n p.innerHTML = `<span class=\"err\">${s.testo}<\/span>`;\r\n const note = document.createElement('span');\r\n note.className = 'err-note';\r\n note.textContent = corretta;\r\n p.appendChild(note);\r\n }\r\n textAreaEl.appendChild(p);\r\n });\r\n\r\n \/\/ risultato\r\n resultEl.style.display = 'block';\r\n scoreBox.textContent = `${giuste} \/ ${totale} corrette`;\r\n\r\n if (giuste === totale) {\r\n resultTitle.textContent = \"\ud83c\udf89 Amazing! Shopping Spree riuscita!\";\r\n resultMsg.textContent = \"Hai scelto tutte le frasi corrette. Sei pronto per i saldi!\";\r\n lanciaCoriandoli();\r\n } else if (giuste >= totale * 0.7) {\r\n resultTitle.textContent = \"\ud83d\udc4f Great Choice!\";\r\n resultMsg.textContent = \"Ottimo lavoro! Dai un'occhiata alle frasi sottolineate in rosso qui sopra per migliorare il tuo stile.\";\r\n lanciaCoriandoli(true);\r\n } else {\r\n resultTitle.textContent = \"\ud83d\udcaa Keep Browsing!\";\r\n resultMsg.textContent = \"Non hai trovato tutto quello che cercavi. Guarda le correzioni verdi e riprova!\";\r\n }\r\n\r\n \/\/ scroll dolce al risultato\r\n setTimeout(() => resultEl.scrollIntoView({ behavior: 'smooth', block: 'center' }), 200);\r\n}\r\n\r\n\/* ---------- CORIANDOLI ---------- *\/\r\nfunction lanciaCoriandoli(soft) {\r\n const durata = soft ? 1500 : 3000;\r\n const fine = Date.now() + durata;\r\n\r\n (function frame() {\r\n confetti({\r\n particleCount: soft ? 3 : 6,\r\n startVelocity: 34,\r\n spread: 360,\r\n ticks: 70,\r\n origin: { x: Math.random(), y: Math.random() * 0.4 },\r\n colors: ['#8e24aa', '#00897b', '#fbc02d', '#ffffff', '#ff4081']\r\n });\r\n if (Date.now() < fine) requestAnimationFrame(frame);\r\n })();\r\n}\r\n\r\n\/* ---------- RESET ---------- *\/\r\nfunction reset() {\r\n currentIndex = 0;\r\n scelte = [];\r\n finito = false;\r\n\r\n textAreaEl.innerHTML = '<span class=\"placeholder\">Il tuo testo apparir\u00e0 qui\u2026<\/span>';\r\n resultEl.style.display = 'none';\r\n actionsEl.style.display = 'none';\r\n questionCard.classList.remove('hidden');\r\n\r\n progressFill.style.width = '0%';\r\n renderQuestion();\r\n window.scrollTo({ top: 0, behavior: 'smooth' });\r\n}\r\n\r\nrestartBtn.addEventListener('click', reset);\r\n\r\n\/* ---------- AVVIO ---------- *\/\r\nrenderQuestion();\r\n<\/script>\r\n<\/body>\r\n<\/html>\r\n\t\t\t\t<\/div>\n\t\t\n<\/div>\n\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Shopping \u00b7 English Grammar Practice \ud83d\udecd\ufe0f Shopping \u00b7 Grammar Practice Scegli la frase corretta e organizza la tua giornata di […]<\/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-619","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/www.profdifaziodonato.it\/index.php?rest_route=\/wp\/v2\/pages\/619","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=619"}],"version-history":[{"count":4,"href":"https:\/\/www.profdifaziodonato.it\/index.php?rest_route=\/wp\/v2\/pages\/619\/revisions"}],"predecessor-version":[{"id":623,"href":"https:\/\/www.profdifaziodonato.it\/index.php?rest_route=\/wp\/v2\/pages\/619\/revisions\/623"}],"wp:attachment":[{"href":"https:\/\/www.profdifaziodonato.it\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=619"}],"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\r\n\r\n\r\n\r\n\r\nShopping \u00b7 English Grammar Practice<\/title>\r\n<script src=\"https:\/\/cdn.jsdelivr.net\/npm\/canvas-confetti@1.9.2\/dist\/confetti.browser.min.js\"><\/script>\r\n<style>\r\n :root {\r\n \/* Shopping Palette: Chic & Modern (Purple\/Pink\/Teal) *\/\r\n --bg-1: #f3e5f5; \/* Light Purple *\/\r\n --bg-2: #e1bee7; \/* Medium Purple *\/\r\n --bg-3: #b2dfdb; \/* Soft Teal *\/\r\n --bg-4: #ffffff; \/* White *\/\r\n \r\n --accent: #8e24aa; \/* Deep Purple *\/\r\n --accent-2: #00897b; \/* Teal *\/\r\n --ok: #00897b;\r\n --err: #d32f2f;\r\n \r\n --ink: #1a1a1a; \/* High contrast black *\/\r\n --ink-soft: #37474f; \/* Blue Grey *\/\r\n --card: #ffffff;\r\n --shadow: 0 12px 30px rgba(142, 36, 170, 0.15);\r\n --radius: 22px;\r\n }\r\n\r\n * { box-sizing: border-box; }\r\n\r\n html, body {\r\n margin: 0;\r\n padding: 0;\r\n min-height: 100%;\r\n font-family: 'Segoe UI', 'Nunito', system-ui, -apple-system, sans-serif;\r\n color: var(--ink);\r\n background: linear-gradient(135deg, var(--bg-1), var(--bg-2), var(--bg-3), var(--bg-4));\r\n background-size: 400% 400%;\r\n animation: bgShift 20s ease infinite;\r\n }\r\n\r\n @keyframes bgShift {\r\n 0% { background-position: 0% 50%; }\r\n 50% { background-position: 100% 50%; }\r\n 100% { background-position: 0% 50%; }\r\n }\r\n\r\n .wrap {\r\n max-width: 900px;\r\n margin: 0 auto;\r\n padding: 28px 18px 60px;\r\n }\r\n\r\n header {\r\n text-align: center;\r\n margin-bottom: 22px;\r\n }\r\n\r\n header h1 {\r\n margin: 0 0 6px;\r\n font-size: clamp(1.5rem, 3.5vw, 2.1rem);\r\n letter-spacing: .5px;\r\n background: linear-gradient(90deg, var(--accent), var(--accent-2));\r\n -webkit-background-clip: text;\r\n background-clip: text;\r\n color: transparent;\r\n font-weight: 800;\r\n }\r\n\r\n header p {\r\n margin: 0;\r\n color: var(--ink-soft);\r\n font-size: 1rem;\r\n font-weight: 600;\r\n }\r\n\r\n .card {\r\n background: var(--card);\r\n border-radius: var(--radius);\r\n box-shadow: var(--shadow);\r\n padding: 24px;\r\n margin-bottom: 20px;\r\n border: 1px solid rgba(0,0,0,0.05);\r\n }\r\n\r\n .progress-wrap {\r\n display: flex;\r\n align-items: center;\r\n gap: 12px;\r\n margin-bottom: 16px;\r\n }\r\n\r\n .progress-bar {\r\n flex: 1;\r\n height: 12px;\r\n background: #f0f0f0;\r\n border-radius: 999px;\r\n overflow: hidden;\r\n border: 1px solid #e0e0e0;\r\n }\r\n\r\n .progress-fill {\r\n height: 100%;\r\n width: 0%;\r\n background: linear-gradient(90deg, var(--accent), var(--accent-2));\r\n border-radius: 999px;\r\n transition: width .45s cubic-bezier(.4, 0, .2, 1);\r\n }\r\n\r\n .progress-label {\r\n font-size: 0.9rem;\r\n font-weight: 700;\r\n color: var(--ink-soft);\r\n white-space: nowrap;\r\n }\r\n\r\n .question {\r\n font-size: 1.1rem;\r\n color: var(--ink);\r\n margin: 0 0 18px;\r\n font-weight: 700;\r\n }\r\n\r\n .options {\r\n display: grid;\r\n grid-template-columns: 1fr 1fr;\r\n gap: 16px;\r\n }\r\n\r\n @media (max-width: 620px) {\r\n .options { grid-template-columns: 1fr; }\r\n \r\n .option {\r\n color: #000000 !important;\r\n background: #ffffff;\r\n border-color: #bdbdbd;\r\n }\r\n }\r\n\r\n .option {\r\n border: 2px solid #eeeeee;\r\n background: #fafafa;\r\n border-radius: 16px;\r\n padding: 20px 18px;\r\n font-size: 1.05rem;\r\n line-height: 1.5;\r\n text-align: left;\r\n cursor: pointer;\r\n color: #000000 !important;\r\n font-weight: 600;\r\n transition: transform .18s ease, border-color .18s ease, background .18s ease, box-shadow .18s ease;\r\n font-family: inherit;\r\n }\r\n\r\n .option:hover:not(:disabled) {\r\n transform: translateY(-3px);\r\n border-color: var(--accent);\r\n background: #f3e5f5;\r\n box-shadow: 0 8px 18px rgba(142, 36, 170, 0.15);\r\n }\r\n\r\n .option:disabled {\r\n cursor: default;\r\n opacity: .6;\r\n }\r\n\r\n .option .badge {\r\n display: inline-block;\r\n font-size: .75rem;\r\n font-weight: 800;\r\n letter-spacing: .8px;\r\n text-transform: uppercase;\r\n color: #fff;\r\n background: linear-gradient(90deg, var(--accent), var(--accent-2));\r\n padding: 4px 10px;\r\n border-radius: 999px;\r\n margin-bottom: 10px;\r\n }\r\n\r\n .text-area {\r\n min-height: 150px;\r\n border-radius: 16px;\r\n background: #fffdfd;\r\n border: 2px dashed #d1c4e9;\r\n padding: 20px;\r\n font-size: 1.1rem;\r\n line-height: 1.8;\r\n color: var(--ink);\r\n }\r\n\r\n .text-area .placeholder {\r\n color: #7e57c2;\r\n font-style: italic;\r\n }\r\n\r\n .text-area p {\r\n margin: 0 0 10px;\r\n }\r\n\r\n .text-area p:last-child { margin-bottom: 0; }\r\n\r\n .err {\r\n text-decoration: underline wavy var(--err);\r\n text-decoration-thickness: 2px;\r\n text-underline-offset: 4px;\r\n color: var(--err);\r\n font-weight: 700;\r\n }\r\n\r\n .err-note {\r\n display: block;\r\n font-size: .9rem;\r\n color: var(--ok);\r\n font-weight: 700;\r\n margin-top: 4px;\r\n }\r\n\r\n .err-note::before {\r\n content: \"\u2713 \";\r\n }\r\n\r\n .actions {\r\n display: flex;\r\n justify-content: center;\r\n gap: 12px;\r\n margin-top: 20px;\r\n flex-wrap: wrap;\r\n }\r\n\r\n button.btn {\r\n font-family: inherit;\r\n border: none;\r\n border-radius: 999px;\r\n padding: 14px 28px;\r\n font-size: 1rem;\r\n font-weight: 800;\r\n letter-spacing: .3px;\r\n cursor: pointer;\r\n color: #fff;\r\n background: linear-gradient(90deg, var(--accent), var(--accent-2));\r\n box-shadow: 0 8px 20px rgba(142, 36, 170, 0.25);\r\n transition: transform .18s ease, box-shadow .18s ease, opacity .18s ease;\r\n }\r\n\r\n button.btn:hover { transform: translateY(-2px); box-shadow: 0 12px 26px rgba(142, 36, 170, 0.35); }\r\n button.btn:active { transform: translateY(0); }\r\n \r\n button.btn.ghost {\r\n background: #fff;\r\n color: var(--accent);\r\n border: 2px solid var(--accent);\r\n box-shadow: none;\r\n }\r\n button.btn.ghost:hover { background: #f3e5f5; }\r\n\r\n .result {\r\n text-align: center;\r\n padding: 30px;\r\n border-radius: var(--radius);\r\n background: linear-gradient(135deg, #ffffff, #f3e5f5);\r\n border: 2px solid #e1bee7;\r\n display: none;\r\n animation: pop .5s cubic-bezier(.2, 1.4, .4, 1);\r\n }\r\n\r\n @keyframes pop {\r\n 0% { transform: scale(.9); opacity: 0; }\r\n 100% { transform: scale(1); opacity: 1; }\r\n }\r\n\r\n .result h2 {\r\n margin: 0 0 10px;\r\n font-size: 1.6rem;\r\n background: linear-gradient(90deg, var(--accent), var(--accent-2));\r\n -webkit-background-clip: text;\r\n background-clip: text;\r\n color: transparent;\r\n }\r\n\r\n .result p { margin: 0 0 8px; color: var(--ink-soft); font-weight: 600; }\r\n\r\n .score {\r\n display: inline-block;\r\n margin: 12px 0 6px;\r\n padding: 10px 20px;\r\n border-radius: 999px;\r\n background: #fff;\r\n font-weight: 800;\r\n color: var(--accent);\r\n box-shadow: 0 6px 16px rgba(142, 36, 170, 0.15);\r\n border: 1px solid #e1bee7;\r\n }\r\n\r\n footer {\r\n text-align: center;\r\n font-size: .85rem;\r\n color: var(--ink-soft);\r\n margin-top: 24px;\r\n font-weight: 500;\r\n }\r\n\r\n .hidden { display: none !important; }\r\n<\/style>\r\n<\/head>\r\n<body>\r\n<div class=\"wrap\">\r\n <header>\r\n <h1>\ud83d\udecd\ufe0f Shopping \u00b7 Grammar Practice<\/h1>\r\n <p>Scegli la frase corretta e organizza la tua giornata di shopping!<\/p>\r\n <\/header>\r\n\r\n \r\n <section class=\"card\" id=\"questionCard\">\r\n <div class=\"progress-wrap\">\r\n <div class=\"progress-bar\"><div class=\"progress-fill\" id=\"progressFill\"><\/div><\/div>\r\n <div class=\"progress-label\" id=\"progressLabel\">Frase 1 di 15<\/div>\r\n <\/div>\r\n <p class=\"question\">Quale frase \u00e8 grammaticalmente corretta? \ud83d\udc47<\/p>\r\n <div class=\"options\" id=\"options\"><\/div>\r\n <\/section>\r\n\r\n \r\n <section class=\"card\">\r\n <h2 style=\"margin:0 0 12px; font-size:1.2rem; color:var(--accent);\">\ud83d\udcdd Il tuo diario dello shopping<\/h2>\r\n <div class=\"text-area\" id=\"textArea\">\r\n <span class=\"placeholder\">Il tuo testo apparir\u00e0 qui\u2026<\/span>\r\n <\/div>\r\n <div class=\"actions\" id=\"actions\" style=\"display:none;\">\r\n <button class=\"btn\" id=\"restartBtn\">\ud83d\udd04 Ricomincia<\/button>\r\n <\/div>\r\n <\/section>\r\n\r\n \r\n <section class=\"result\" id=\"result\">\r\n <h2 id=\"resultTitle\"><\/h2>\r\n <div class=\"score\" id=\"scoreBox\"><\/div>\r\n <p id=\"resultMsg\"><\/p>\r\n <\/section>\r\n\r\n <footer>Livello A2 \u00b7 Grammatica Inglese<\/footer>\r\n<\/div>\r\n\r\n<script>\r\n\/* ---------- DATI (15 Frasi, Tema: Shopping) ---------- *\/\r\nconst coppie = [\r\n {\r\n corretta: \"This shirt is cheaper than that one.\",\r\n sbagliata: \"This shirt is more cheap than that one.\",\r\n tipo: \"Comparatives\"\r\n },\r\n {\r\n corretta: \"These are the most expensive shoes in the shop.\",\r\n sbagliata: \"These are the expensivest shoes in the shop.\",\r\n tipo: \"Superlatives\"\r\n },\r\n {\r\n corretta: \"Can I try on this jacket, please?\",\r\n sbagliata: \"Can I try this jacket on, please?\", \/\/ Technically okay but 'try on' is better taught as unit or split correctly. Let's make wrong one clearly wrong.\r\n \/\/ Better wrong: \"Can I try this jacket?\" (missing phrasal verb nuance) or \"Can I wear on...?\"\r\n \/\/ Let's stick to standard error:\r\n sbagliata: \"Can I wear on this jacket, please?\", \r\n tipo: \"Phrasal Verbs (Try on)\"\r\n },\r\n {\r\n corretta: \"It\u2019s too tight. Do you have a larger size?\",\r\n sbagliata: \"It\u2019s too tight. Do you have a more large size?\",\r\n tipo: \"Adjectives (Tight\/Large)\"\r\n },\r\n {\r\n corretta: \"These jeans are too loose for me.\",\r\n sbagliata: \"These jeans are too lose for me.\",\r\n tipo: \"Vocabulary (Loose vs Lose)\"\r\n },\r\n {\r\n corretta: \"Is there a discount on this coat?\",\r\n sbagliata: \"Is there a money off on this coat?\",\r\n tipo: \"Vocabulary (Discount)\"\r\n },\r\n {\r\n corretta: \"I\u2019ll take them. How much are they?\",\r\n sbagliata: \"I\u2019ll take it. How many are they?\",\r\n tipo: \"Questions (Price\/Quantity)\"\r\n },\r\n {\r\n corretta: \"Can I pay by card or only in cash?\",\r\n sbagliata: \"Can I pay with card or only with cash?\",\r\n tipo: \"Prepositions (Pay by\/in)\"\r\n },\r\n {\r\n corretta: \"The changing rooms are over there.\",\r\n sbagliata: \"The changing rooms are on there.\",\r\n tipo: \"Prepositions of Place\"\r\n },\r\n {\r\n corretta: \"I\u2019m looking for a gift for my sister.\",\r\n sbagliata: \"I\u2019m finding a gift for my sister.\",\r\n tipo: \"Vocabulary (Look for vs Find)\"\r\n },\r\n {\r\n corretta: \"Have you got this in medium?\",\r\n sbagliata: \"Have you got this in average?\",\r\n tipo: \"Sizes (Medium)\"\r\n },\r\n {\r\n corretta: \"It fits me perfectly.\",\r\n sbagliata: \"It suits me perfectly.\", \/\/ Context: Size vs Style. 'Fits' is better for size context usually implied by previous Qs. But 'Suits' is valid. Let's make clear grammar\/vocab error.\r\n \/\/ Better: \"It matches me perfectly.\" (Wrong context)\r\n sbagliata: \"It matches me perfectly.\",\r\n tipo: \"Vocabulary (Fit vs Match)\"\r\n },\r\n {\r\n corretta: \"I\u2019ll think about it and come back later.\",\r\n sbagliata: \"I\u2019ll think it and come back later.\",\r\n tipo: \"Phrasal Verbs (Think about)\"\r\n },\r\n {\r\n corretta: \"These trousers don't fit me well.\",\r\n sbagliata: \"These trousers doesn't fit me well.\",\r\n tipo: \"Subject-Verb Agreement (Plural nouns)\"\r\n },\r\n {\r\n corretta: \"Would you like a bag for your purchases?\",\r\n sbagliata: \"Would you like a bag to your purchases?\",\r\n tipo: \"Prepositions (For)\"\r\n }\r\n];\r\n\r\n\/\/ Correction for item 3 in logic above to be clearer\r\ncoppie[2].sbagliata = \"Can I put on this jacket in the shop?\"; \/\/ 'Put on' is action, 'Try on' is test.\r\n\r\n\/* ---------- STATO ---------- *\/\r\nlet currentIndex = 0;\r\nlet scelte = []; \/\/ { testo, corretta: bool }\r\nlet finito = false;\r\n\r\n\/* ---------- RIFERIMENTI DOM ---------- *\/\r\nconst optionsEl = document.getElementById('options');\r\nconst textAreaEl = document.getElementById('textArea');\r\nconst progressFill = document.getElementById('progressFill');\r\nconst progressLabel = document.getElementById('progressLabel');\r\nconst actionsEl = document.getElementById('actions');\r\nconst resultEl = document.getElementById('result');\r\nconst resultTitle = document.getElementById('resultTitle');\r\nconst resultMsg = document.getElementById('resultMsg');\r\nconst scoreBox = document.getElementById('scoreBox');\r\nconst restartBtn = document.getElementById('restartBtn');\r\nconst questionCard = document.getElementById('questionCard');\r\n\r\n\/* ---------- UTILS ---------- *\/\r\nfunction shuffle(a) {\r\n const arr = a.slice();\r\n for (let i = arr.length - 1; i > 0; i--) {\r\n const j = Math.floor(Math.random() * (i + 1));\r\n [arr[i], arr[j]] = [arr[j], arr[i]];\r\n }\r\n return arr;\r\n}\r\n\r\nfunction updateProgress() {\r\n const done = currentIndex;\r\n const total = coppie.length;\r\n const pct = (done \/ total) * 100;\r\n progressFill.style.width = pct + '%';\r\n progressLabel.textContent = done < total\r\n ? `Frase ${done + 1} di ${total}`\r\n : `Completato \u00b7 ${total} di ${total}`;\r\n}\r\n\r\n\/* ---------- RENDER ---------- *\/\r\nfunction renderQuestion() {\r\n if (currentIndex >= coppie.length) {\r\n finish();\r\n return;\r\n }\r\n updateProgress();\r\n\r\n const coppia = coppie[currentIndex];\r\n \/\/ mescola l'ordine delle due opzioni\r\n const opzioni = shuffle([\r\n { testo: coppia.corretta, corretta: true },\r\n { testo: coppia.sbagliata, corretta: false }\r\n ]);\r\n\r\n optionsEl.innerHTML = '';\r\n opzioni.forEach((op, i) => {\r\n const btn = document.createElement('button');\r\n btn.className = 'option';\r\n btn.innerHTML = `<span class=\"badge\">Opzione ${i + 1}<\/span><br>${op.testo}`;\r\n btn.addEventListener('click', () => scegli(op, btn));\r\n optionsEl.appendChild(btn);\r\n });\r\n}\r\n\r\nfunction scegli(op, btn) {\r\n if (finito) return;\r\n\r\n \/\/ blocca entrambe le opzioni\r\n [...optionsEl.querySelectorAll('.option')].forEach(b => b.disabled = true);\r\n\r\n scelte.push({ testo: op.testo, corretta: op.corretta });\r\n aggiungiAlTesto(op.testo, false);\r\n\r\n currentIndex++;\r\n \/\/ piccola pausa per far vedere la selezione, poi avanti\r\n setTimeout(() => {\r\n renderQuestion();\r\n }, 320);\r\n}\r\n\r\nfunction aggiungiAlTesto(frase, isErrore, correzione) {\r\n if (textAreaEl.querySelector('.placeholder')) {\r\n textAreaEl.innerHTML = '';\r\n }\r\n const p = document.createElement('p');\r\n if (isErrore) {\r\n p.innerHTML = `<span class=\"err\">${frase}<\/span>`;\r\n if (correzione) {\r\n const note = document.createElement('span');\r\n note.className = 'err-note';\r\n note.textContent = correzione;\r\n p.appendChild(note);\r\n }\r\n } else {\r\n p.textContent = frase;\r\n }\r\n textAreaEl.appendChild(p);\r\n textAreaEl.scrollTop = textAreaEl.scrollHeight;\r\n}\r\n\r\n\/* ---------- FINE ---------- *\/\r\nfunction finish() {\r\n finito = true;\r\n updateProgress();\r\n\r\n \/\/ nascondi la card domanda, mostra il risultato\r\n questionCard.classList.add('hidden');\r\n actionsEl.style.display = 'flex';\r\n\r\n const totale = coppie.length;\r\n const giuste = scelte.filter(s => s.corretta).length;\r\n\r\n \/\/ ricostruisci il testo finale con eventuali errori evidenziati\r\n textAreaEl.innerHTML = '';\r\n scelte.forEach((s, i) => {\r\n const p = document.createElement('p');\r\n if (s.corretta) {\r\n p.textContent = s.testo;\r\n } else {\r\n const corretta = coppie[i].corretta;\r\n p.innerHTML = `<span class=\"err\">${s.testo}<\/span>`;\r\n const note = document.createElement('span');\r\n note.className = 'err-note';\r\n note.textContent = corretta;\r\n p.appendChild(note);\r\n }\r\n textAreaEl.appendChild(p);\r\n });\r\n\r\n \/\/ risultato\r\n resultEl.style.display = 'block';\r\n scoreBox.textContent = `${giuste} \/ ${totale} corrette`;\r\n\r\n if (giuste === totale) {\r\n resultTitle.textContent = \"\ud83c\udf89 Amazing! Shopping Spree riuscita!\";\r\n resultMsg.textContent = \"Hai scelto tutte le frasi corrette. Sei pronto per i saldi!\";\r\n lanciaCoriandoli();\r\n } else if (giuste >= totale * 0.7) {\r\n resultTitle.textContent = \"\ud83d\udc4f Great Choice!\";\r\n resultMsg.textContent = \"Ottimo lavoro! Dai un'occhiata alle frasi sottolineate in rosso qui sopra per migliorare il tuo stile.\";\r\n lanciaCoriandoli(true);\r\n } else {\r\n resultTitle.textContent = \"\ud83d\udcaa Keep Browsing!\";\r\n resultMsg.textContent = \"Non hai trovato tutto quello che cercavi. Guarda le correzioni verdi e riprova!\";\r\n }\r\n\r\n \/\/ scroll dolce al risultato\r\n setTimeout(() => resultEl.scrollIntoView({ behavior: 'smooth', block: 'center' }), 200);\r\n}\r\n\r\n\/* ---------- CORIANDOLI ---------- *\/\r\nfunction lanciaCoriandoli(soft) {\r\n const durata = soft ? 1500 : 3000;\r\n const fine = Date.now() + durata;\r\n\r\n (function frame() {\r\n confetti({\r\n particleCount: soft ? 3 : 6,\r\n startVelocity: 34,\r\n spread: 360,\r\n ticks: 70,\r\n origin: { x: Math.random(), y: Math.random() * 0.4 },\r\n colors: ['#8e24aa', '#00897b', '#fbc02d', '#ffffff', '#ff4081']\r\n });\r\n if (Date.now() < fine) requestAnimationFrame(frame);\r\n })();\r\n}\r\n\r\n\/* ---------- RESET ---------- *\/\r\nfunction reset() {\r\n currentIndex = 0;\r\n scelte = [];\r\n finito = false;\r\n\r\n textAreaEl.innerHTML = '<span class=\"placeholder\">Il tuo testo apparir\u00e0 qui\u2026<\/span>';\r\n resultEl.style.display = 'none';\r\n actionsEl.style.display = 'none';\r\n questionCard.classList.remove('hidden');\r\n\r\n progressFill.style.width = '0%';\r\n renderQuestion();\r\n window.scrollTo({ top: 0, behavior: 'smooth' });\r\n}\r\n\r\nrestartBtn.addEventListener('click', reset);\r\n\r\n\/* ---------- AVVIO ---------- *\/\r\nrenderQuestion();\r\n<\/script>\r\n<\/body>\r\n<\/html>\r\n\t\t\t\t<\/div>\n\t\t\n<\/div>\n\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Shopping \u00b7 English Grammar Practice \ud83d\udecd\ufe0f Shopping \u00b7 Grammar Practice Scegli la frase corretta e organizza la tua giornata di […]<\/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-619","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/www.profdifaziodonato.it\/index.php?rest_route=\/wp\/v2\/pages\/619","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=619"}],"version-history":[{"count":4,"href":"https:\/\/www.profdifaziodonato.it\/index.php?rest_route=\/wp\/v2\/pages\/619\/revisions"}],"predecessor-version":[{"id":623,"href":"https:\/\/www.profdifaziodonato.it\/index.php?rest_route=\/wp\/v2\/pages\/619\/revisions\/623"}],"wp:attachment":[{"href":"https:\/\/www.profdifaziodonato.it\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=619"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}