Cardinal or Ordinal - English Grammar Practice<\/title>\r\n<style>\r\n * {\r\n margin: 0;\r\n padding: 0;\r\n box-sizing: border-box;\r\n font-family: 'Segoe UI', 'Trebuchet MS', system-ui, sans-serif;\r\n }\r\n\r\n body {\r\n min-height: 100vh;\r\n background: linear-gradient(160deg, #1f7a6e 0%, #145a8a 100%);\r\n display: flex;\r\n justify-content: center;\r\n align-items: flex-start;\r\n padding: 18px 12px 40px;\r\n }\r\n\r\n .app {\r\n width: 100%;\r\n max-width: 780px;\r\n display: flex;\r\n flex-direction: column;\r\n gap: 18px;\r\n }\r\n\r\n \/* ---------- HEADER ---------- *\/\r\n header {\r\n text-align: center;\r\n }\r\n\r\n \/* ---------- CONTATORI ---------- *\/\r\n .counters {\r\n display: flex;\r\n justify-content: center;\r\n flex-wrap: wrap;\r\n gap: 10px;\r\n }\r\n\r\n .counter {\r\n background: rgba(255, 255, 255, 0.14);\r\n border: 1px solid rgba(255, 255, 255, 0.35);\r\n border-radius: 12px;\r\n padding: 8px 14px;\r\n min-width: 88px;\r\n text-align: center;\r\n color: #ffffff;\r\n backdrop-filter: blur(6px);\r\n box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);\r\n }\r\n\r\n .counter .label {\r\n display: block;\r\n font-size: 0.68rem;\r\n text-transform: uppercase;\r\n letter-spacing: 0.7px;\r\n opacity: 0.9;\r\n margin-bottom: 2px;\r\n }\r\n\r\n .counter .value {\r\n font-size: 1.25rem;\r\n font-weight: 800;\r\n }\r\n\r\n .counter.green .value { color: #7CFC9B; }\r\n .counter.red .value { color: #ff8f9c; }\r\n .counter.blue .value { color: #8fd3ff; }\r\n .counter.gray .value { color: #e2d9ff; }\r\n\r\n \/* ---------- CARD ---------- *\/\r\n .card-wrap { perspective: 1200px; }\r\n\r\n .card {\r\n background: #d8f0e0;\r\n border-radius: 24px;\r\n padding: 42px 26px;\r\n min-height: 250px;\r\n display: flex;\r\n flex-direction: column;\r\n justify-content: center;\r\n align-items: center;\r\n text-align: center;\r\n box-shadow: 0 18px 40px rgba(0, 0, 0, 0.32);\r\n border: 3px solid rgba(255, 255, 255, 0.6);\r\n transition: transform 0.35s ease, background 0.3s ease;\r\n }\r\n\r\n .card.animating { transform: rotateY(90deg); }\r\n\r\n .card .sentence {\r\n font-size: clamp(1.35rem, 4.2vw, 1.9rem);\r\n font-weight: 700;\r\n color: #143b32;\r\n line-height: 1.55;\r\n }\r\n\r\n .blank {\r\n display: inline-block;\r\n min-width: 90px;\r\n border-bottom: 4px dashed #145a8a;\r\n color: #145a8a;\r\n font-weight: 800;\r\n padding: 0 6px;\r\n transition: color 0.25s;\r\n }\r\n\r\n .blank.filled {\r\n border-bottom: 4px solid transparent;\r\n color: #0e7a3c;\r\n }\r\n\r\n .blank.filled.wrong { color: #c62828; }\r\n\r\n .card .hint {\r\n margin-top: 18px;\r\n font-size: 0.9rem;\r\n font-weight: 600;\r\n color: #3d6b5a;\r\n letter-spacing: 0.4px;\r\n }\r\n\r\n \/* ---------- OPZIONI ---------- *\/\r\n .options {\r\n display: flex;\r\n gap: 16px;\r\n justify-content: center;\r\n flex-wrap: wrap;\r\n }\r\n\r\n .option-btn {\r\n flex: 1 1 180px;\r\n max-width: 300px;\r\n padding: 20px 12px;\r\n font-size: 1.4rem;\r\n font-weight: 800;\r\n border: none;\r\n border-radius: 16px;\r\n cursor: pointer;\r\n color: #ffffff;\r\n letter-spacing: 0.5px;\r\n box-shadow: 0 8px 0 rgba(0, 0, 0, 0.18), 0 10px 22px rgba(0, 0, 0, 0.25);\r\n transition: transform 0.12s, filter 0.2s, box-shadow 0.12s;\r\n }\r\n\r\n .option-btn.optA { background: linear-gradient(145deg, #ff8a5b, #f2643a); }\r\n .option-btn.optB { background: linear-gradient(145deg, #4aa8e0, #2d7fc0); }\r\n\r\n .option-btn:hover:not(:disabled) { filter: brightness(1.08); }\r\n .option-btn:active:not(:disabled) {\r\n transform: translateY(5px);\r\n box-shadow: 0 3px 0 rgba(0, 0, 0, 0.18), 0 5px 12px rgba(0, 0, 0, 0.25);\r\n }\r\n\r\n .option-btn:disabled { opacity: 0.45; cursor: not-allowed; }\r\n\r\n .option-btn.correct { outline: 4px solid #21c05a; outline-offset: 3px; }\r\n .option-btn.wrong { outline: 4px solid #e53935; outline-offset: 3px; }\r\n\r\n \/* ---------- CONTROLLI ---------- *\/\r\n .controls {\r\n display: flex;\r\n justify-content: center;\r\n gap: 12px;\r\n flex-wrap: wrap;\r\n }\r\n\r\n .ctrl-btn {\r\n padding: 14px 26px;\r\n font-size: 1.05rem;\r\n font-weight: 700;\r\n border: none;\r\n border-radius: 14px;\r\n cursor: pointer;\r\n color: #ffffff;\r\n background: rgba(255, 255, 255, 0.22);\r\n border: 1.5px solid rgba(255, 255, 255, 0.55);\r\n backdrop-filter: blur(6px);\r\n transition: background 0.2s, transform 0.12s, opacity 0.2s;\r\n min-width: 108px;\r\n }\r\n\r\n .ctrl-btn:hover:not(:disabled) { background: rgba(255, 255, 255, 0.36); }\r\n .ctrl-btn:active:not(:disabled) { transform: scale(0.96); }\r\n .ctrl-btn:disabled { opacity: 0.35; cursor: not-allowed; }\r\n\r\n .ctrl-btn.next { background: linear-gradient(145deg, #2bb673, #1e8f59); border-color: transparent; }\r\n .ctrl-btn.skip { background: linear-gradient(145deg, #8d8d8d, #6b6b6b); border-color: transparent; }\r\n\r\n \/* ---------- POPUP ---------- *\/\r\n .overlay {\r\n position: fixed;\r\n inset: 0;\r\n background: rgba(15, 12, 35, 0.68);\r\n backdrop-filter: blur(4px);\r\n display: flex;\r\n justify-content: center;\r\n align-items: center;\r\n padding: 20px;\r\n opacity: 0;\r\n pointer-events: none;\r\n transition: opacity 0.3s ease;\r\n z-index: 100;\r\n }\r\n\r\n .overlay.show { opacity: 1; pointer-events: auto; }\r\n\r\n .popup {\r\n background: #ffffff;\r\n border-radius: 22px;\r\n max-width: 480px;\r\n width: 100%;\r\n padding: 28px 26px;\r\n text-align: center;\r\n box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45);\r\n transform: translateY(30px) scale(0.95);\r\n transition: transform 0.35s cubic-bezier(0.18, 0.89, 0.32, 1.28);\r\n border-top: 10px solid #e53935;\r\n }\r\n\r\n .overlay.show .popup { transform: translateY(0) scale(1); }\r\n\r\n .popup .icon { font-size: 3rem; margin-bottom: 8px; line-height: 1; }\r\n\r\n .popup h2 {\r\n font-size: 1.5rem;\r\n color: #c62828;\r\n margin-bottom: 14px;\r\n }\r\n\r\n .popup .error-box {\r\n background: #fdecea;\r\n border-left: 6px solid #e53935;\r\n border-radius: 10px;\r\n padding: 14px 16px;\r\n text-align: left;\r\n font-size: 1rem;\r\n color: #7f1d1d;\r\n font-weight: 600;\r\n line-height: 1.5;\r\n margin-bottom: 16px;\r\n }\r\n\r\n .popup .correct-box {\r\n background: #e8f8ee;\r\n border-left: 6px solid #21c05a;\r\n border-radius: 10px;\r\n padding: 14px 16px;\r\n text-align: left;\r\n font-size: 1.05rem;\r\n color: #0e5c30;\r\n font-weight: 700;\r\n line-height: 1.5;\r\n margin-bottom: 20px;\r\n }\r\n\r\n .popup button {\r\n padding: 13px 34px;\r\n font-size: 1.05rem;\r\n font-weight: 700;\r\n border: none;\r\n border-radius: 12px;\r\n cursor: pointer;\r\n color: #ffffff;\r\n background: linear-gradient(145deg, #4a6ee0, #3450b0);\r\n box-shadow: 0 6px 16px rgba(52, 80, 176, 0.45);\r\n transition: transform 0.12s, filter 0.2s;\r\n }\r\n\r\n .popup button:hover { filter: brightness(1.1); }\r\n .popup button:active { transform: scale(0.96); }\r\n\r\n \/* ---------- RISULTATO FINALE ---------- *\/\r\n .final-screen {\r\n display: none;\r\n background: #ffffff;\r\n border-radius: 24px;\r\n padding: 40px 26px;\r\n text-align: center;\r\n box-shadow: 0 18px 40px rgba(0, 0, 0, 0.32);\r\n }\r\n\r\n .final-screen.show { display: block; }\r\n\r\n .final-screen h2 {\r\n font-size: 2rem;\r\n color: #143b32;\r\n margin-bottom: 10px;\r\n }\r\n\r\n .final-screen .score {\r\n font-size: 3.4rem;\r\n font-weight: 900;\r\n color: #2bb673;\r\n margin: 10px 0;\r\n }\r\n\r\n .final-screen p {\r\n font-size: 1.1rem;\r\n color: #555;\r\n margin-bottom: 24px;\r\n }\r\n\r\n .final-screen button {\r\n padding: 15px 40px;\r\n font-size: 1.1rem;\r\n font-weight: 700;\r\n border: none;\r\n border-radius: 14px;\r\n cursor: pointer;\r\n color: #fff;\r\n background: linear-gradient(145deg, #1f7a6e, #145a8a);\r\n box-shadow: 0 8px 20px rgba(20, 90, 138, 0.4);\r\n transition: transform 0.12s, filter 0.2s;\r\n }\r\n\r\n .final-screen button:hover { filter: brightness(1.1); }\r\n .final-screen button:active { transform: scale(0.96); }\r\n\r\n \/* =====================================================\r\n FORZATURA COLORE TITOLO\r\n ===================================================== *\/\r\n #mainTitle,\r\n #mainTitle *,\r\n h1#mainTitle {\r\n color: #ffffff !important;\r\n -webkit-text-fill-color: #ffffff !important;\r\n background: none !important;\r\n }\r\n<\/style>\r\n<\/head>\r\n<body>\r\n\r\n<div class=\"app\">\r\n\r\n \r\n <header>\r\n <h1 id=\"mainTitle\" style=\"color:#ffffff !important; -webkit-text-fill-color:#ffffff !important; font-size: clamp(1.6rem, 5vw, 2.4rem); font-weight: 800; letter-spacing: 1px; text-shadow: 0 3px 10px rgba(0,0,0,0.55); margin-bottom: 14px;\">Cardinal or Ordinal?<\/h1>\r\n <div class=\"counters\">\r\n <div class=\"counter green\">\r\n <span class=\"label\">Giuste<\/span>\r\n <span class=\"value\" id=\"counterCorrect\">0<\/span>\r\n <\/div>\r\n <div class=\"counter red\">\r\n <span class=\"label\">Sbagliate<\/span>\r\n <span class=\"value\" id=\"counterWrong\">0<\/span>\r\n <\/div>\r\n <div class=\"counter blue\">\r\n <span class=\"label\">Domanda<\/span>\r\n <span class=\"value\"><span id=\"counterCurrent\">1<\/span>\/<span id=\"counterTotal\">20<\/span><\/span>\r\n <\/div>\r\n <div class=\"counter gray\">\r\n <span class=\"label\">Skippate<\/span>\r\n <span class=\"value\" id=\"counterSkipped\">0<\/span>\r\n <\/div>\r\n <\/div>\r\n <\/header>\r\n\r\n \r\n <div class=\"card-wrap\" id=\"cardWrap\">\r\n <div class=\"card\" id=\"card\">\r\n <p class=\"sentence\" id=\"sentenceText\"><\/p>\r\n <p class=\"hint\" id=\"hintText\">Scegli la parola corretta<\/p>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"options\" id=\"options\">\r\n <button class=\"option-btn optA\" id=\"btnOptA\" onclick=\"selectOption('A')\"><\/button>\r\n <button class=\"option-btn optB\" id=\"btnOptB\" onclick=\"selectOption('B')\"><\/button>\r\n <\/div>\r\n\r\n \r\n <div class=\"controls\">\r\n <button class=\"ctrl-btn\" id=\"btnBack\" onclick=\"goBack()\">← Indietro<\/button>\r\n <button class=\"ctrl-btn next\" id=\"btnNext\" onclick=\"goNext()\" disabled>Avanti →<\/button>\r\n <button class=\"ctrl-btn skip\" id=\"btnSkip\" onclick=\"skipQuestion()\">Skip<\/button>\r\n <\/div>\r\n\r\n \r\n <div class=\"final-screen\" id=\"finalScreen\">\r\n <h2>Esercitazione completata!<\/h2>\r\n <div class=\"score\" id=\"finalScore\">0\/20<\/div>\r\n <p id=\"finalMessage\"><\/p>\r\n <button onclick=\"restartApp()\">Ricomincia<\/button>\r\n <\/div>\r\n\r\n<\/div>\r\n\r\n\r\n<div class=\"overlay\" id=\"overlay\">\r\n <div class=\"popup\">\r\n <div class=\"icon\">❌<\/div>\r\n <h2>Ops! Errore<\/h2>\r\n <div class=\"error-box\" id=\"popupError\"><\/div>\r\n <div class=\"correct-box\" id=\"popupCorrect\"><\/div>\r\n <button onclick=\"closePopup()\">Ho capito<\/button>\r\n <\/div>\r\n<\/div>\r\n\r\n<script>\r\n\/* =========================================================\r\n DATI: 20 FRASI \"CARDINAL vs ORDINAL\"\r\n Ogni domanda ha DUE opzioni: una cardinale e una ordinale.\r\n La posizione (A\/B) \u00e8 variabile per evitare che l'utente\r\n impari \"la prima \u00e8 sempre cardinale\".\r\n ========================================================= *\/\r\nconst questions = [\r\n {\r\n before: \"Today is my\",\r\n after: \"day at this school.\",\r\n optionA: \"one\",\r\n optionB: \"first\",\r\n correct: \"B\",\r\n explanation: \"'first' \u00e8 un numero ORDINALE: indica l'ordine\/posizione (il 1\u00b0 giorno). 'one' \u00e8 cardinale: indica la quantit\u00e0.\",\r\n correctSentence: \"Today is my <b>first<\/b> day at this school.\"\r\n },\r\n {\r\n before: \"My classroom is on the\",\r\n after: \"floor.\",\r\n optionA: \"second\",\r\n optionB: \"two\",\r\n correct: \"A\",\r\n explanation: \"'second' \u00e8 un numero ORDINALE: indica il piano (2\u00b0 piano). 'two' \u00e8 cardinale: indica la quantit\u00e0.\",\r\n correctSentence: \"My classroom is on the <b>second<\/b> floor.\"\r\n },\r\n {\r\n before: \"I sit in the\",\r\n after: \"row.\",\r\n optionA: \"three\",\r\n optionB: \"third\",\r\n correct: \"B\",\r\n explanation: \"'third' \u00e8 un numero ORDINALE: indica la posizione nella fila (3\u00aa fila). 'three' \u00e8 cardinale.\",\r\n correctSentence: \"I sit in the <b>third<\/b> row.\"\r\n },\r\n {\r\n before: \"There are\",\r\n after: \"books in my bag.\",\r\n optionA: \"five\",\r\n optionB: \"fifth\",\r\n correct: \"A\",\r\n explanation: \"'five' \u00e8 un numero CARDINALE: dice QUANTI libri ci sono. 'fifth' \u00e8 ordinale: indica la posizione (5\u00b0).\",\r\n correctSentence: \"There are <b>five<\/b> books in my bag.\"\r\n },\r\n {\r\n before: \"He finished\",\r\n after: \"in the running race.\",\r\n optionA: \"fifth\",\r\n optionB: \"five\",\r\n correct: \"A\",\r\n explanation: \"'fifth' \u00e8 un numero ORDINALE: indica la posizione in classifica (5\u00b0). 'five' \u00e8 cardinale.\",\r\n correctSentence: \"He finished <b>fifth<\/b> in the running race.\"\r\n },\r\n {\r\n before: \"This is the\",\r\n after: \"time I ask you!\",\r\n optionA: \"six\",\r\n optionB: \"sixth\",\r\n correct: \"B\",\r\n explanation: \"'sixth' \u00e8 un numero ORDINALE: indica quante volte (la 6\u00aa volta). 'six' \u00e8 cardinale.\",\r\n correctSentence: \"This is the <b>sixth<\/b> time I ask you!\"\r\n },\r\n {\r\n before: \"My sister is in the\",\r\n after: \"grade.\",\r\n optionA: \"seventh\",\r\n optionB: \"seven\",\r\n correct: \"A\",\r\n explanation: \"'seventh' \u00e8 un numero ORDINALE: indica l'anno di scuola (7\u00b0 grado). 'seven' \u00e8 cardinale.\",\r\n correctSentence: \"My sister is in the <b>seventh<\/b> grade.\"\r\n },\r\n {\r\n before: \"We have\",\r\n after: \"minutes of break.\",\r\n optionA: \"ten\",\r\n optionB: \"tenth\",\r\n correct: \"A\",\r\n explanation: \"'ten' \u00e8 un numero CARDINALE: dice QUANTI minuti di pausa. 'tenth' \u00e8 ordinale: indica la posizione (10\u00b0).\",\r\n correctSentence: \"We have <b>ten<\/b> minutes of break.\"\r\n },\r\n {\r\n before: \"This is the\",\r\n after: \"question of the test.\",\r\n optionA: \"ten\",\r\n optionB: \"tenth\",\r\n correct: \"B\",\r\n explanation: \"'tenth' \u00e8 un numero ORDINALE: indica l'ordine delle domande (10\u00aa). 'ten' \u00e8 cardinale.\",\r\n correctSentence: \"This is the <b>tenth<\/b> question of the test.\"\r\n },\r\n {\r\n before: \"The\",\r\n after: \"student in line is my friend.\",\r\n optionA: \"eleventh\",\r\n optionB: \"eleven\",\r\n correct: \"A\",\r\n explanation: \"'eleventh' \u00e8 un numero ORDINALE: indica la posizione nella fila (11\u00b0). 'eleven' \u00e8 cardinale.\",\r\n correctSentence: \"The <b>eleventh<\/b> student in line is my friend.\"\r\n },\r\n {\r\n before: \"December is the\",\r\n after: \"month of the year.\",\r\n optionA: \"twelve\",\r\n optionB: \"twelfth\",\r\n correct: \"B\",\r\n explanation: \"'twelfth' \u00e8 un numero ORDINALE: indica il mese (12\u00b0). 'twelve' \u00e8 cardinale. Attenzione allo spelling: twelfth!\",\r\n correctSentence: \"December is the <b>twelfth<\/b> month of the year.\"\r\n },\r\n {\r\n before: \"My locker is number\",\r\n after: \".\",\r\n optionA: \"thirteen\",\r\n optionB: \"thirteenth\",\r\n correct: \"A\",\r\n explanation: \"'thirteen' \u00e8 un numero CARDINALE: indica il NUMERO dell'armadietto. 'thirteenth' \u00e8 ordinale (13\u00b0).\",\r\n correctSentence: \"My locker is number <b>thirteen<\/b>.\"\r\n },\r\n {\r\n before: \"She lives on the\",\r\n after: \"floor.\",\r\n optionA: \"thirteen\",\r\n optionB: \"thirteenth\",\r\n correct: \"B\",\r\n explanation: \"'thirteenth' \u00e8 un numero ORDINALE: indica il piano (13\u00b0). 'thirteen' \u00e8 cardinale.\",\r\n correctSentence: \"She lives on the <b>thirteenth<\/b> floor.\"\r\n },\r\n {\r\n before: \"The\",\r\n after: \"of February is Valentine's Day.\",\r\n optionA: \"fourteenth\",\r\n optionB: \"fourteen\",\r\n correct: \"A\",\r\n explanation: \"'fourteenth' \u00e8 un numero ORDINALE: per le date si usa l'ordinale (14). 'fourteen' \u00e8 cardinale.\",\r\n correctSentence: \"The <b>fourteenth<\/b> of February is Valentine's Day.\"\r\n },\r\n {\r\n before: \"This is my\",\r\n after: \"English exercise today.\",\r\n optionA: \"fifteen\",\r\n optionB: \"fifteenth\",\r\n correct: \"B\",\r\n explanation: \"'fifteenth' \u00e8 un numero ORDINALE: indica quante volte (15\u00b0). 'fifteen' \u00e8 cardinale.\",\r\n correctSentence: \"This is my <b>fifteenth<\/b> English exercise today.\"\r\n },\r\n {\r\n before: \"Our school has\",\r\n after: \"classrooms.\",\r\n optionA: \"twenty\",\r\n optionB: \"twentieth\",\r\n correct: \"A\",\r\n explanation: \"'twenty' \u00e8 un numero CARDINALE: dice QUANTE aule. 'twentieth' \u00e8 ordinale (20\u00b0).\",\r\n correctSentence: \"Our school has <b>twenty<\/b> classrooms.\"\r\n },\r\n {\r\n before: \"He was the\",\r\n after: \"in the spelling competition.\",\r\n optionA: \"twenty\",\r\n optionB: \"twentieth\",\r\n correct: \"B\",\r\n explanation: \"'twentieth' \u00e8 un numero ORDINALE: indica la posizione in classifica (20\u00b0). 'twenty' \u00e8 cardinale.\",\r\n correctSentence: \"He was the <b>twentieth<\/b> in the spelling competition.\"\r\n },\r\n {\r\n before: \"I have\",\r\n after: \"new pencils in my pencil case.\",\r\n optionA: \"three\",\r\n optionB: \"third\",\r\n correct: \"A\",\r\n explanation: \"'three' \u00e8 un numero CARDINALE: dice QUANTE matite. 'third' \u00e8 ordinale (3\u00b0).\",\r\n correctSentence: \"I have <b>three<\/b> new pencils in my pencil case.\"\r\n },\r\n {\r\n before: \"Tomorrow is the\",\r\n after: \"of May.\",\r\n optionA: \"three\",\r\n optionB: \"third\",\r\n correct: \"B\",\r\n explanation: \"'third' \u00e8 un numero ORDINALE: per le date si usa l'ordinale (3). 'three' \u00e8 cardinale.\",\r\n correctSentence: \"Tomorrow is the <b>third<\/b> of May.\"\r\n },\r\n {\r\n before: \"My brother is\",\r\n after: \"years old.\",\r\n optionA: \"nine\",\r\n optionB: \"ninth\",\r\n correct: \"A\",\r\n explanation: \"'nine' \u00e8 un numero CARDINALE: dice QUANTI anni ha. 'ninth' \u00e8 ordinale (9\u00b0).\",\r\n correctSentence: \"My brother is <b>nine<\/b> years old.\"\r\n }\r\n];\r\n\r\n\/* =========================================================\r\n STATO DELL'APP\r\n ========================================================= *\/\r\nlet currentIndex = 0;\r\nlet correctCount = 0;\r\nlet wrongCount = 0;\r\nlet skippedCount = 0;\r\nlet userAnswers = new Array(questions.length).fill(null); \/\/ 'A' | 'B' | 'skipped' | null\r\nlet answered = false;\r\n\r\nconst totalQuestions = questions.length;\r\n\r\n\/* =========================================================\r\n RIFERIMENTI DOM\r\n ========================================================= *\/\r\nconst sentenceText = document.getElementById('sentenceText');\r\nconst hintText = document.getElementById('hintText');\r\nconst card = document.getElementById('card');\r\nconst cardWrap = document.getElementById('cardWrap');\r\nconst btnOptA = document.getElementById('btnOptA');\r\nconst btnOptB = document.getElementById('btnOptB');\r\nconst btnBack = document.getElementById('btnBack');\r\nconst btnNext = document.getElementById('btnNext');\r\nconst btnSkip = document.getElementById('btnSkip');\r\nconst counterCorrect = document.getElementById('counterCorrect');\r\nconst counterWrong = document.getElementById('counterWrong');\r\nconst counterCurrent = document.getElementById('counterCurrent');\r\nconst counterTotal = document.getElementById('counterTotal');\r\nconst counterSkipped = document.getElementById('counterSkipped');\r\nconst overlay = document.getElementById('overlay');\r\nconst popupError = document.getElementById('popupError');\r\nconst popupCorrect = document.getElementById('popupCorrect');\r\nconst finalScreen = document.getElementById('finalScreen');\r\nconst finalScore = document.getElementById('finalScore');\r\nconst finalMessage = document.getElementById('finalMessage');\r\n\r\n\/* =========================================================\r\n SUPPORTO\r\n ========================================================= *\/\r\nfunction escapeHtml(str) {\r\n return str.replace(\/[&<>]\/g, function(m) {\r\n if (m === '&') return '&';\r\n if (m === '<') return '<';\r\n if (m === '>') return '>';\r\n return m;\r\n });\r\n}\r\n\r\nfunction getOptionText(q, letter) {\r\n return letter === 'A' ? q.optionA : q.optionB;\r\n}\r\n\r\n\/* =========================================================\r\n RENDER DELLA DOMANDA CORRENTE\r\n ========================================================= *\/\r\nfunction renderQuestion() {\r\n const q = questions[currentIndex];\r\n const saved = userAnswers[currentIndex];\r\n\r\n \/\/ Testi dei due bottoni\r\n btnOptA.textContent = q.optionA;\r\n btnOptB.textContent = q.optionB;\r\n\r\n \/\/ Reset classi\r\n btnOptA.classList.remove('correct', 'wrong');\r\n btnOptB.classList.remove('correct', 'wrong');\r\n\r\n \/\/ Frasi \/ blank\r\n let blankContent = '________';\r\n let blankClass = 'blank';\r\n\r\n if (saved === 'A' || saved === 'B') {\r\n const chosenText = getOptionText(q, saved);\r\n const isCorrect = saved === q.correct;\r\n blankContent = chosenText;\r\n blankClass = 'blank filled' + (isCorrect ? '' : ' wrong');\r\n }\r\n\r\n sentenceText.innerHTML =\r\n escapeHtml(q.before) + ' <span class=\"' + blankClass + '\">' + escapeHtml(blankContent) + '<\/span> ' + escapeHtml(q.after);\r\n\r\n \/\/ Stato bottoni\r\n if (saved === 'A' || saved === 'B') {\r\n btnOptA.disabled = true;\r\n btnOptB.disabled = true;\r\n answered = true;\r\n\r\n if (saved === q.correct) {\r\n if (q.correct === 'A') btnOptA.classList.add('correct');\r\n else btnOptB.classList.add('correct');\r\n } else {\r\n if (saved === 'A') btnOptA.classList.add('wrong');\r\n else btnOptB.classList.add('wrong');\r\n if (q.correct === 'A') btnOptA.classList.add('correct');\r\n else btnOptB.classList.add('correct');\r\n }\r\n } else if (saved === 'skipped') {\r\n btnOptA.disabled = true;\r\n btnOptB.disabled = true;\r\n answered = true;\r\n } else {\r\n btnOptA.disabled = false;\r\n btnOptB.disabled = false;\r\n answered = false;\r\n }\r\n\r\n \/\/ Hint\r\n if (saved === 'skipped') {\r\n hintText.textContent = 'Domanda skippata';\r\n } else if (saved) {\r\n hintText.textContent = saved === q.correct ? '\u2714 Risposta corretta!' : '\u2718 Risposta sbagliata';\r\n } else {\r\n hintText.textContent = 'Scegli la parola corretta';\r\n }\r\n\r\n \/\/ Controlli\r\n btnNext.disabled = !answered;\r\n btnBack.disabled = currentIndex === 0;\r\n btnSkip.disabled = answered;\r\n\r\n \/\/ Contatori\r\n counterCurrent.textContent = currentIndex + 1;\r\n counterTotal.textContent = totalQuestions;\r\n counterCorrect.textContent = correctCount;\r\n counterWrong.textContent = wrongCount;\r\n counterSkipped.textContent = skippedCount;\r\n}\r\n\r\n\/* =========================================================\r\n SELEZIONE DI UN'OPZIONE\r\n ========================================================= *\/\r\nfunction selectOption(letter) {\r\n if (answered) return;\r\n\r\n const q = questions[currentIndex];\r\n userAnswers[currentIndex] = letter;\r\n answered = true;\r\n\r\n btnOptA.disabled = true;\r\n btnOptB.disabled = true;\r\n\r\n const chosenText = getOptionText(q, letter);\r\n const correctText = getOptionText(q, q.correct);\r\n\r\n if (letter === q.correct) {\r\n correctCount++;\r\n if (letter === 'A') btnOptA.classList.add('correct');\r\n else btnOptB.classList.add('correct');\r\n hintText.textContent = '\u2714 Risposta corretta!';\r\n } else {\r\n wrongCount++;\r\n if (letter === 'A') btnOptA.classList.add('wrong');\r\n else btnOptB.classList.add('wrong');\r\n if (q.correct === 'A') btnOptA.classList.add('correct');\r\n else btnOptB.classList.add('correct');\r\n hintText.textContent = '\u2718 Risposta sbagliata';\r\n showErrorPopup(q, chosenText, correctText);\r\n }\r\n\r\n \/\/ Aggiorna il blank nella frase\r\n let blankClass = 'blank filled' + (letter === q.correct ? '' : ' wrong');\r\n sentenceText.innerHTML =\r\n escapeHtml(q.before) + ' <span class=\"' + blankClass + '\">' + escapeHtml(chosenText) + '<\/span> ' + escapeHtml(q.after);\r\n\r\n btnNext.disabled = false;\r\n btnSkip.disabled = true;\r\n\r\n updateCounters();\r\n}\r\n\r\n\/* =========================================================\r\n POPUP ERRORE\r\n ========================================================= *\/\r\nfunction showErrorPopup(q, chosenText, correctText) {\r\n popupError.innerHTML =\r\n 'Hai scelto <b>\"' + escapeHtml(chosenText) + '\"<\/b> ma la parola corretta \u00e8 <b>\"' + escapeHtml(correctText) + '\"<\/b>.<br><br>' +\r\n q.explanation;\r\n\r\n popupCorrect.innerHTML = 'Frase corretta:<br>' + q.correctSentence;\r\n overlay.classList.add('show');\r\n}\r\n\r\nfunction closePopup() {\r\n overlay.classList.remove('show');\r\n}\r\n\r\n\/* =========================================================\r\n NAVIGAZIONE\r\n ========================================================= *\/\r\nfunction goNext() {\r\n if (!answered) return;\r\n\r\n if (currentIndex < totalQuestions - 1) {\r\n card.classList.add('animating');\r\n setTimeout(() => {\r\n currentIndex++;\r\n answered = (userAnswers[currentIndex] !== null);\r\n renderQuestion();\r\n card.classList.remove('animating');\r\n }, 200);\r\n } else {\r\n showFinalScreen();\r\n }\r\n}\r\n\r\nfunction goBack() {\r\n if (currentIndex === 0) return;\r\n\r\n card.classList.add('animating');\r\n setTimeout(() => {\r\n currentIndex--;\r\n answered = (userAnswers[currentIndex] !== null);\r\n renderQuestion();\r\n card.classList.remove('animating');\r\n }, 200);\r\n}\r\n\r\nfunction skipQuestion() {\r\n if (answered) return;\r\n\r\n userAnswers[currentIndex] = 'skipped';\r\n skippedCount++;\r\n answered = true;\r\n\r\n btnOptA.disabled = true;\r\n btnOptB.disabled = true;\r\n btnSkip.disabled = true;\r\n\r\n hintText.textContent = 'Domanda skippata';\r\n updateCounters();\r\n\r\n btnNext.disabled = false;\r\n}\r\n\r\n\/* =========================================================\r\n CONTATORI\r\n ========================================================= *\/\r\nfunction updateCounters() {\r\n counterCorrect.textContent = correctCount;\r\n counterWrong.textContent = wrongCount;\r\n counterSkipped.textContent = skippedCount;\r\n counterCurrent.textContent = currentIndex + 1;\r\n}\r\n\r\n\/* =========================================================\r\n SCHERMATA FINALE\r\n ========================================================= *\/\r\nfunction showFinalScreen() {\r\n cardWrap.style.display = 'none';\r\n document.getElementById('options').style.display = 'none';\r\n document.querySelector('.controls').style.display = 'none';\r\n finalScreen.classList.add('show');\r\n\r\n finalScore.textContent = correctCount + '\/' + totalQuestions;\r\n\r\n const percentage = (correctCount \/ totalQuestions) * 100;\r\n let msg = '';\r\n if (percentage >= 90) msg = 'Eccellente! Distingui perfettamente CARDINAL e ORDINAL! \ud83c\udf1f';\r\n else if (percentage >= 70) msg = 'Molto bene! Continua cos\u00ec! \ud83d\udc4d';\r\n else if (percentage >= 50) msg = 'Buon lavoro! Ripassa un po\\' le regole. \ud83d\udcda';\r\n else msg = 'Non scoraggiarti! Rivedi la differenza tra cardinal e ordinal e riprova. \ud83d\udcaa';\r\n\r\n finalMessage.textContent = msg;\r\n}\r\n\r\n\/* =========================================================\r\n RICOMINCIA\r\n ========================================================= *\/\r\nfunction restartApp() {\r\n currentIndex = 0;\r\n correctCount = 0;\r\n wrongCount = 0;\r\n skippedCount = 0;\r\n userAnswers = new Array(questions.length).fill(null);\r\n answered = false;\r\n\r\n cardWrap.style.display = '';\r\n document.getElementById('options').style.display = '';\r\n document.querySelector('.controls').style.display = '';\r\n finalScreen.classList.remove('show');\r\n\r\n btnOptA.classList.remove('correct', 'wrong');\r\n btnOptB.classList.remove('correct', 'wrong');\r\n\r\n renderQuestion();\r\n}\r\n\r\n\/* =========================================================\r\n AVVIO\r\n ========================================================= *\/\r\nrenderQuestion();\r\n<\/script>\r\n\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\n<\/div>\n\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Cardinal or Ordinal – English Grammar Practice Cardinal or Ordinal? Giuste 0 Sbagliate 0 Domanda 1\/20 Skippate 0 Scegli la […]<\/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-520","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/www.profdifaziodonato.it\/index.php?rest_route=\/wp\/v2\/pages\/520","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=520"}],"version-history":[{"count":4,"href":"https:\/\/www.profdifaziodonato.it\/index.php?rest_route=\/wp\/v2\/pages\/520\/revisions"}],"predecessor-version":[{"id":524,"href":"https:\/\/www.profdifaziodonato.it\/index.php?rest_route=\/wp\/v2\/pages\/520\/revisions\/524"}],"wp:attachment":[{"href":"https:\/\/www.profdifaziodonato.it\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=520"}],"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\nCardinal or Ordinal - English Grammar Practice<\/title>\r\n<style>\r\n * {\r\n margin: 0;\r\n padding: 0;\r\n box-sizing: border-box;\r\n font-family: 'Segoe UI', 'Trebuchet MS', system-ui, sans-serif;\r\n }\r\n\r\n body {\r\n min-height: 100vh;\r\n background: linear-gradient(160deg, #1f7a6e 0%, #145a8a 100%);\r\n display: flex;\r\n justify-content: center;\r\n align-items: flex-start;\r\n padding: 18px 12px 40px;\r\n }\r\n\r\n .app {\r\n width: 100%;\r\n max-width: 780px;\r\n display: flex;\r\n flex-direction: column;\r\n gap: 18px;\r\n }\r\n\r\n \/* ---------- HEADER ---------- *\/\r\n header {\r\n text-align: center;\r\n }\r\n\r\n \/* ---------- CONTATORI ---------- *\/\r\n .counters {\r\n display: flex;\r\n justify-content: center;\r\n flex-wrap: wrap;\r\n gap: 10px;\r\n }\r\n\r\n .counter {\r\n background: rgba(255, 255, 255, 0.14);\r\n border: 1px solid rgba(255, 255, 255, 0.35);\r\n border-radius: 12px;\r\n padding: 8px 14px;\r\n min-width: 88px;\r\n text-align: center;\r\n color: #ffffff;\r\n backdrop-filter: blur(6px);\r\n box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);\r\n }\r\n\r\n .counter .label {\r\n display: block;\r\n font-size: 0.68rem;\r\n text-transform: uppercase;\r\n letter-spacing: 0.7px;\r\n opacity: 0.9;\r\n margin-bottom: 2px;\r\n }\r\n\r\n .counter .value {\r\n font-size: 1.25rem;\r\n font-weight: 800;\r\n }\r\n\r\n .counter.green .value { color: #7CFC9B; }\r\n .counter.red .value { color: #ff8f9c; }\r\n .counter.blue .value { color: #8fd3ff; }\r\n .counter.gray .value { color: #e2d9ff; }\r\n\r\n \/* ---------- CARD ---------- *\/\r\n .card-wrap { perspective: 1200px; }\r\n\r\n .card {\r\n background: #d8f0e0;\r\n border-radius: 24px;\r\n padding: 42px 26px;\r\n min-height: 250px;\r\n display: flex;\r\n flex-direction: column;\r\n justify-content: center;\r\n align-items: center;\r\n text-align: center;\r\n box-shadow: 0 18px 40px rgba(0, 0, 0, 0.32);\r\n border: 3px solid rgba(255, 255, 255, 0.6);\r\n transition: transform 0.35s ease, background 0.3s ease;\r\n }\r\n\r\n .card.animating { transform: rotateY(90deg); }\r\n\r\n .card .sentence {\r\n font-size: clamp(1.35rem, 4.2vw, 1.9rem);\r\n font-weight: 700;\r\n color: #143b32;\r\n line-height: 1.55;\r\n }\r\n\r\n .blank {\r\n display: inline-block;\r\n min-width: 90px;\r\n border-bottom: 4px dashed #145a8a;\r\n color: #145a8a;\r\n font-weight: 800;\r\n padding: 0 6px;\r\n transition: color 0.25s;\r\n }\r\n\r\n .blank.filled {\r\n border-bottom: 4px solid transparent;\r\n color: #0e7a3c;\r\n }\r\n\r\n .blank.filled.wrong { color: #c62828; }\r\n\r\n .card .hint {\r\n margin-top: 18px;\r\n font-size: 0.9rem;\r\n font-weight: 600;\r\n color: #3d6b5a;\r\n letter-spacing: 0.4px;\r\n }\r\n\r\n \/* ---------- OPZIONI ---------- *\/\r\n .options {\r\n display: flex;\r\n gap: 16px;\r\n justify-content: center;\r\n flex-wrap: wrap;\r\n }\r\n\r\n .option-btn {\r\n flex: 1 1 180px;\r\n max-width: 300px;\r\n padding: 20px 12px;\r\n font-size: 1.4rem;\r\n font-weight: 800;\r\n border: none;\r\n border-radius: 16px;\r\n cursor: pointer;\r\n color: #ffffff;\r\n letter-spacing: 0.5px;\r\n box-shadow: 0 8px 0 rgba(0, 0, 0, 0.18), 0 10px 22px rgba(0, 0, 0, 0.25);\r\n transition: transform 0.12s, filter 0.2s, box-shadow 0.12s;\r\n }\r\n\r\n .option-btn.optA { background: linear-gradient(145deg, #ff8a5b, #f2643a); }\r\n .option-btn.optB { background: linear-gradient(145deg, #4aa8e0, #2d7fc0); }\r\n\r\n .option-btn:hover:not(:disabled) { filter: brightness(1.08); }\r\n .option-btn:active:not(:disabled) {\r\n transform: translateY(5px);\r\n box-shadow: 0 3px 0 rgba(0, 0, 0, 0.18), 0 5px 12px rgba(0, 0, 0, 0.25);\r\n }\r\n\r\n .option-btn:disabled { opacity: 0.45; cursor: not-allowed; }\r\n\r\n .option-btn.correct { outline: 4px solid #21c05a; outline-offset: 3px; }\r\n .option-btn.wrong { outline: 4px solid #e53935; outline-offset: 3px; }\r\n\r\n \/* ---------- CONTROLLI ---------- *\/\r\n .controls {\r\n display: flex;\r\n justify-content: center;\r\n gap: 12px;\r\n flex-wrap: wrap;\r\n }\r\n\r\n .ctrl-btn {\r\n padding: 14px 26px;\r\n font-size: 1.05rem;\r\n font-weight: 700;\r\n border: none;\r\n border-radius: 14px;\r\n cursor: pointer;\r\n color: #ffffff;\r\n background: rgba(255, 255, 255, 0.22);\r\n border: 1.5px solid rgba(255, 255, 255, 0.55);\r\n backdrop-filter: blur(6px);\r\n transition: background 0.2s, transform 0.12s, opacity 0.2s;\r\n min-width: 108px;\r\n }\r\n\r\n .ctrl-btn:hover:not(:disabled) { background: rgba(255, 255, 255, 0.36); }\r\n .ctrl-btn:active:not(:disabled) { transform: scale(0.96); }\r\n .ctrl-btn:disabled { opacity: 0.35; cursor: not-allowed; }\r\n\r\n .ctrl-btn.next { background: linear-gradient(145deg, #2bb673, #1e8f59); border-color: transparent; }\r\n .ctrl-btn.skip { background: linear-gradient(145deg, #8d8d8d, #6b6b6b); border-color: transparent; }\r\n\r\n \/* ---------- POPUP ---------- *\/\r\n .overlay {\r\n position: fixed;\r\n inset: 0;\r\n background: rgba(15, 12, 35, 0.68);\r\n backdrop-filter: blur(4px);\r\n display: flex;\r\n justify-content: center;\r\n align-items: center;\r\n padding: 20px;\r\n opacity: 0;\r\n pointer-events: none;\r\n transition: opacity 0.3s ease;\r\n z-index: 100;\r\n }\r\n\r\n .overlay.show { opacity: 1; pointer-events: auto; }\r\n\r\n .popup {\r\n background: #ffffff;\r\n border-radius: 22px;\r\n max-width: 480px;\r\n width: 100%;\r\n padding: 28px 26px;\r\n text-align: center;\r\n box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45);\r\n transform: translateY(30px) scale(0.95);\r\n transition: transform 0.35s cubic-bezier(0.18, 0.89, 0.32, 1.28);\r\n border-top: 10px solid #e53935;\r\n }\r\n\r\n .overlay.show .popup { transform: translateY(0) scale(1); }\r\n\r\n .popup .icon { font-size: 3rem; margin-bottom: 8px; line-height: 1; }\r\n\r\n .popup h2 {\r\n font-size: 1.5rem;\r\n color: #c62828;\r\n margin-bottom: 14px;\r\n }\r\n\r\n .popup .error-box {\r\n background: #fdecea;\r\n border-left: 6px solid #e53935;\r\n border-radius: 10px;\r\n padding: 14px 16px;\r\n text-align: left;\r\n font-size: 1rem;\r\n color: #7f1d1d;\r\n font-weight: 600;\r\n line-height: 1.5;\r\n margin-bottom: 16px;\r\n }\r\n\r\n .popup .correct-box {\r\n background: #e8f8ee;\r\n border-left: 6px solid #21c05a;\r\n border-radius: 10px;\r\n padding: 14px 16px;\r\n text-align: left;\r\n font-size: 1.05rem;\r\n color: #0e5c30;\r\n font-weight: 700;\r\n line-height: 1.5;\r\n margin-bottom: 20px;\r\n }\r\n\r\n .popup button {\r\n padding: 13px 34px;\r\n font-size: 1.05rem;\r\n font-weight: 700;\r\n border: none;\r\n border-radius: 12px;\r\n cursor: pointer;\r\n color: #ffffff;\r\n background: linear-gradient(145deg, #4a6ee0, #3450b0);\r\n box-shadow: 0 6px 16px rgba(52, 80, 176, 0.45);\r\n transition: transform 0.12s, filter 0.2s;\r\n }\r\n\r\n .popup button:hover { filter: brightness(1.1); }\r\n .popup button:active { transform: scale(0.96); }\r\n\r\n \/* ---------- RISULTATO FINALE ---------- *\/\r\n .final-screen {\r\n display: none;\r\n background: #ffffff;\r\n border-radius: 24px;\r\n padding: 40px 26px;\r\n text-align: center;\r\n box-shadow: 0 18px 40px rgba(0, 0, 0, 0.32);\r\n }\r\n\r\n .final-screen.show { display: block; }\r\n\r\n .final-screen h2 {\r\n font-size: 2rem;\r\n color: #143b32;\r\n margin-bottom: 10px;\r\n }\r\n\r\n .final-screen .score {\r\n font-size: 3.4rem;\r\n font-weight: 900;\r\n color: #2bb673;\r\n margin: 10px 0;\r\n }\r\n\r\n .final-screen p {\r\n font-size: 1.1rem;\r\n color: #555;\r\n margin-bottom: 24px;\r\n }\r\n\r\n .final-screen button {\r\n padding: 15px 40px;\r\n font-size: 1.1rem;\r\n font-weight: 700;\r\n border: none;\r\n border-radius: 14px;\r\n cursor: pointer;\r\n color: #fff;\r\n background: linear-gradient(145deg, #1f7a6e, #145a8a);\r\n box-shadow: 0 8px 20px rgba(20, 90, 138, 0.4);\r\n transition: transform 0.12s, filter 0.2s;\r\n }\r\n\r\n .final-screen button:hover { filter: brightness(1.1); }\r\n .final-screen button:active { transform: scale(0.96); }\r\n\r\n \/* =====================================================\r\n FORZATURA COLORE TITOLO\r\n ===================================================== *\/\r\n #mainTitle,\r\n #mainTitle *,\r\n h1#mainTitle {\r\n color: #ffffff !important;\r\n -webkit-text-fill-color: #ffffff !important;\r\n background: none !important;\r\n }\r\n<\/style>\r\n<\/head>\r\n<body>\r\n\r\n<div class=\"app\">\r\n\r\n \r\n <header>\r\n <h1 id=\"mainTitle\" style=\"color:#ffffff !important; -webkit-text-fill-color:#ffffff !important; font-size: clamp(1.6rem, 5vw, 2.4rem); font-weight: 800; letter-spacing: 1px; text-shadow: 0 3px 10px rgba(0,0,0,0.55); margin-bottom: 14px;\">Cardinal or Ordinal?<\/h1>\r\n <div class=\"counters\">\r\n <div class=\"counter green\">\r\n <span class=\"label\">Giuste<\/span>\r\n <span class=\"value\" id=\"counterCorrect\">0<\/span>\r\n <\/div>\r\n <div class=\"counter red\">\r\n <span class=\"label\">Sbagliate<\/span>\r\n <span class=\"value\" id=\"counterWrong\">0<\/span>\r\n <\/div>\r\n <div class=\"counter blue\">\r\n <span class=\"label\">Domanda<\/span>\r\n <span class=\"value\"><span id=\"counterCurrent\">1<\/span>\/<span id=\"counterTotal\">20<\/span><\/span>\r\n <\/div>\r\n <div class=\"counter gray\">\r\n <span class=\"label\">Skippate<\/span>\r\n <span class=\"value\" id=\"counterSkipped\">0<\/span>\r\n <\/div>\r\n <\/div>\r\n <\/header>\r\n\r\n \r\n <div class=\"card-wrap\" id=\"cardWrap\">\r\n <div class=\"card\" id=\"card\">\r\n <p class=\"sentence\" id=\"sentenceText\"><\/p>\r\n <p class=\"hint\" id=\"hintText\">Scegli la parola corretta<\/p>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"options\" id=\"options\">\r\n <button class=\"option-btn optA\" id=\"btnOptA\" onclick=\"selectOption('A')\"><\/button>\r\n <button class=\"option-btn optB\" id=\"btnOptB\" onclick=\"selectOption('B')\"><\/button>\r\n <\/div>\r\n\r\n \r\n <div class=\"controls\">\r\n <button class=\"ctrl-btn\" id=\"btnBack\" onclick=\"goBack()\">← Indietro<\/button>\r\n <button class=\"ctrl-btn next\" id=\"btnNext\" onclick=\"goNext()\" disabled>Avanti →<\/button>\r\n <button class=\"ctrl-btn skip\" id=\"btnSkip\" onclick=\"skipQuestion()\">Skip<\/button>\r\n <\/div>\r\n\r\n \r\n <div class=\"final-screen\" id=\"finalScreen\">\r\n <h2>Esercitazione completata!<\/h2>\r\n <div class=\"score\" id=\"finalScore\">0\/20<\/div>\r\n <p id=\"finalMessage\"><\/p>\r\n <button onclick=\"restartApp()\">Ricomincia<\/button>\r\n <\/div>\r\n\r\n<\/div>\r\n\r\n\r\n<div class=\"overlay\" id=\"overlay\">\r\n <div class=\"popup\">\r\n <div class=\"icon\">❌<\/div>\r\n <h2>Ops! Errore<\/h2>\r\n <div class=\"error-box\" id=\"popupError\"><\/div>\r\n <div class=\"correct-box\" id=\"popupCorrect\"><\/div>\r\n <button onclick=\"closePopup()\">Ho capito<\/button>\r\n <\/div>\r\n<\/div>\r\n\r\n<script>\r\n\/* =========================================================\r\n DATI: 20 FRASI \"CARDINAL vs ORDINAL\"\r\n Ogni domanda ha DUE opzioni: una cardinale e una ordinale.\r\n La posizione (A\/B) \u00e8 variabile per evitare che l'utente\r\n impari \"la prima \u00e8 sempre cardinale\".\r\n ========================================================= *\/\r\nconst questions = [\r\n {\r\n before: \"Today is my\",\r\n after: \"day at this school.\",\r\n optionA: \"one\",\r\n optionB: \"first\",\r\n correct: \"B\",\r\n explanation: \"'first' \u00e8 un numero ORDINALE: indica l'ordine\/posizione (il 1\u00b0 giorno). 'one' \u00e8 cardinale: indica la quantit\u00e0.\",\r\n correctSentence: \"Today is my <b>first<\/b> day at this school.\"\r\n },\r\n {\r\n before: \"My classroom is on the\",\r\n after: \"floor.\",\r\n optionA: \"second\",\r\n optionB: \"two\",\r\n correct: \"A\",\r\n explanation: \"'second' \u00e8 un numero ORDINALE: indica il piano (2\u00b0 piano). 'two' \u00e8 cardinale: indica la quantit\u00e0.\",\r\n correctSentence: \"My classroom is on the <b>second<\/b> floor.\"\r\n },\r\n {\r\n before: \"I sit in the\",\r\n after: \"row.\",\r\n optionA: \"three\",\r\n optionB: \"third\",\r\n correct: \"B\",\r\n explanation: \"'third' \u00e8 un numero ORDINALE: indica la posizione nella fila (3\u00aa fila). 'three' \u00e8 cardinale.\",\r\n correctSentence: \"I sit in the <b>third<\/b> row.\"\r\n },\r\n {\r\n before: \"There are\",\r\n after: \"books in my bag.\",\r\n optionA: \"five\",\r\n optionB: \"fifth\",\r\n correct: \"A\",\r\n explanation: \"'five' \u00e8 un numero CARDINALE: dice QUANTI libri ci sono. 'fifth' \u00e8 ordinale: indica la posizione (5\u00b0).\",\r\n correctSentence: \"There are <b>five<\/b> books in my bag.\"\r\n },\r\n {\r\n before: \"He finished\",\r\n after: \"in the running race.\",\r\n optionA: \"fifth\",\r\n optionB: \"five\",\r\n correct: \"A\",\r\n explanation: \"'fifth' \u00e8 un numero ORDINALE: indica la posizione in classifica (5\u00b0). 'five' \u00e8 cardinale.\",\r\n correctSentence: \"He finished <b>fifth<\/b> in the running race.\"\r\n },\r\n {\r\n before: \"This is the\",\r\n after: \"time I ask you!\",\r\n optionA: \"six\",\r\n optionB: \"sixth\",\r\n correct: \"B\",\r\n explanation: \"'sixth' \u00e8 un numero ORDINALE: indica quante volte (la 6\u00aa volta). 'six' \u00e8 cardinale.\",\r\n correctSentence: \"This is the <b>sixth<\/b> time I ask you!\"\r\n },\r\n {\r\n before: \"My sister is in the\",\r\n after: \"grade.\",\r\n optionA: \"seventh\",\r\n optionB: \"seven\",\r\n correct: \"A\",\r\n explanation: \"'seventh' \u00e8 un numero ORDINALE: indica l'anno di scuola (7\u00b0 grado). 'seven' \u00e8 cardinale.\",\r\n correctSentence: \"My sister is in the <b>seventh<\/b> grade.\"\r\n },\r\n {\r\n before: \"We have\",\r\n after: \"minutes of break.\",\r\n optionA: \"ten\",\r\n optionB: \"tenth\",\r\n correct: \"A\",\r\n explanation: \"'ten' \u00e8 un numero CARDINALE: dice QUANTI minuti di pausa. 'tenth' \u00e8 ordinale: indica la posizione (10\u00b0).\",\r\n correctSentence: \"We have <b>ten<\/b> minutes of break.\"\r\n },\r\n {\r\n before: \"This is the\",\r\n after: \"question of the test.\",\r\n optionA: \"ten\",\r\n optionB: \"tenth\",\r\n correct: \"B\",\r\n explanation: \"'tenth' \u00e8 un numero ORDINALE: indica l'ordine delle domande (10\u00aa). 'ten' \u00e8 cardinale.\",\r\n correctSentence: \"This is the <b>tenth<\/b> question of the test.\"\r\n },\r\n {\r\n before: \"The\",\r\n after: \"student in line is my friend.\",\r\n optionA: \"eleventh\",\r\n optionB: \"eleven\",\r\n correct: \"A\",\r\n explanation: \"'eleventh' \u00e8 un numero ORDINALE: indica la posizione nella fila (11\u00b0). 'eleven' \u00e8 cardinale.\",\r\n correctSentence: \"The <b>eleventh<\/b> student in line is my friend.\"\r\n },\r\n {\r\n before: \"December is the\",\r\n after: \"month of the year.\",\r\n optionA: \"twelve\",\r\n optionB: \"twelfth\",\r\n correct: \"B\",\r\n explanation: \"'twelfth' \u00e8 un numero ORDINALE: indica il mese (12\u00b0). 'twelve' \u00e8 cardinale. Attenzione allo spelling: twelfth!\",\r\n correctSentence: \"December is the <b>twelfth<\/b> month of the year.\"\r\n },\r\n {\r\n before: \"My locker is number\",\r\n after: \".\",\r\n optionA: \"thirteen\",\r\n optionB: \"thirteenth\",\r\n correct: \"A\",\r\n explanation: \"'thirteen' \u00e8 un numero CARDINALE: indica il NUMERO dell'armadietto. 'thirteenth' \u00e8 ordinale (13\u00b0).\",\r\n correctSentence: \"My locker is number <b>thirteen<\/b>.\"\r\n },\r\n {\r\n before: \"She lives on the\",\r\n after: \"floor.\",\r\n optionA: \"thirteen\",\r\n optionB: \"thirteenth\",\r\n correct: \"B\",\r\n explanation: \"'thirteenth' \u00e8 un numero ORDINALE: indica il piano (13\u00b0). 'thirteen' \u00e8 cardinale.\",\r\n correctSentence: \"She lives on the <b>thirteenth<\/b> floor.\"\r\n },\r\n {\r\n before: \"The\",\r\n after: \"of February is Valentine's Day.\",\r\n optionA: \"fourteenth\",\r\n optionB: \"fourteen\",\r\n correct: \"A\",\r\n explanation: \"'fourteenth' \u00e8 un numero ORDINALE: per le date si usa l'ordinale (14). 'fourteen' \u00e8 cardinale.\",\r\n correctSentence: \"The <b>fourteenth<\/b> of February is Valentine's Day.\"\r\n },\r\n {\r\n before: \"This is my\",\r\n after: \"English exercise today.\",\r\n optionA: \"fifteen\",\r\n optionB: \"fifteenth\",\r\n correct: \"B\",\r\n explanation: \"'fifteenth' \u00e8 un numero ORDINALE: indica quante volte (15\u00b0). 'fifteen' \u00e8 cardinale.\",\r\n correctSentence: \"This is my <b>fifteenth<\/b> English exercise today.\"\r\n },\r\n {\r\n before: \"Our school has\",\r\n after: \"classrooms.\",\r\n optionA: \"twenty\",\r\n optionB: \"twentieth\",\r\n correct: \"A\",\r\n explanation: \"'twenty' \u00e8 un numero CARDINALE: dice QUANTE aule. 'twentieth' \u00e8 ordinale (20\u00b0).\",\r\n correctSentence: \"Our school has <b>twenty<\/b> classrooms.\"\r\n },\r\n {\r\n before: \"He was the\",\r\n after: \"in the spelling competition.\",\r\n optionA: \"twenty\",\r\n optionB: \"twentieth\",\r\n correct: \"B\",\r\n explanation: \"'twentieth' \u00e8 un numero ORDINALE: indica la posizione in classifica (20\u00b0). 'twenty' \u00e8 cardinale.\",\r\n correctSentence: \"He was the <b>twentieth<\/b> in the spelling competition.\"\r\n },\r\n {\r\n before: \"I have\",\r\n after: \"new pencils in my pencil case.\",\r\n optionA: \"three\",\r\n optionB: \"third\",\r\n correct: \"A\",\r\n explanation: \"'three' \u00e8 un numero CARDINALE: dice QUANTE matite. 'third' \u00e8 ordinale (3\u00b0).\",\r\n correctSentence: \"I have <b>three<\/b> new pencils in my pencil case.\"\r\n },\r\n {\r\n before: \"Tomorrow is the\",\r\n after: \"of May.\",\r\n optionA: \"three\",\r\n optionB: \"third\",\r\n correct: \"B\",\r\n explanation: \"'third' \u00e8 un numero ORDINALE: per le date si usa l'ordinale (3). 'three' \u00e8 cardinale.\",\r\n correctSentence: \"Tomorrow is the <b>third<\/b> of May.\"\r\n },\r\n {\r\n before: \"My brother is\",\r\n after: \"years old.\",\r\n optionA: \"nine\",\r\n optionB: \"ninth\",\r\n correct: \"A\",\r\n explanation: \"'nine' \u00e8 un numero CARDINALE: dice QUANTI anni ha. 'ninth' \u00e8 ordinale (9\u00b0).\",\r\n correctSentence: \"My brother is <b>nine<\/b> years old.\"\r\n }\r\n];\r\n\r\n\/* =========================================================\r\n STATO DELL'APP\r\n ========================================================= *\/\r\nlet currentIndex = 0;\r\nlet correctCount = 0;\r\nlet wrongCount = 0;\r\nlet skippedCount = 0;\r\nlet userAnswers = new Array(questions.length).fill(null); \/\/ 'A' | 'B' | 'skipped' | null\r\nlet answered = false;\r\n\r\nconst totalQuestions = questions.length;\r\n\r\n\/* =========================================================\r\n RIFERIMENTI DOM\r\n ========================================================= *\/\r\nconst sentenceText = document.getElementById('sentenceText');\r\nconst hintText = document.getElementById('hintText');\r\nconst card = document.getElementById('card');\r\nconst cardWrap = document.getElementById('cardWrap');\r\nconst btnOptA = document.getElementById('btnOptA');\r\nconst btnOptB = document.getElementById('btnOptB');\r\nconst btnBack = document.getElementById('btnBack');\r\nconst btnNext = document.getElementById('btnNext');\r\nconst btnSkip = document.getElementById('btnSkip');\r\nconst counterCorrect = document.getElementById('counterCorrect');\r\nconst counterWrong = document.getElementById('counterWrong');\r\nconst counterCurrent = document.getElementById('counterCurrent');\r\nconst counterTotal = document.getElementById('counterTotal');\r\nconst counterSkipped = document.getElementById('counterSkipped');\r\nconst overlay = document.getElementById('overlay');\r\nconst popupError = document.getElementById('popupError');\r\nconst popupCorrect = document.getElementById('popupCorrect');\r\nconst finalScreen = document.getElementById('finalScreen');\r\nconst finalScore = document.getElementById('finalScore');\r\nconst finalMessage = document.getElementById('finalMessage');\r\n\r\n\/* =========================================================\r\n SUPPORTO\r\n ========================================================= *\/\r\nfunction escapeHtml(str) {\r\n return str.replace(\/[&<>]\/g, function(m) {\r\n if (m === '&') return '&';\r\n if (m === '<') return '<';\r\n if (m === '>') return '>';\r\n return m;\r\n });\r\n}\r\n\r\nfunction getOptionText(q, letter) {\r\n return letter === 'A' ? q.optionA : q.optionB;\r\n}\r\n\r\n\/* =========================================================\r\n RENDER DELLA DOMANDA CORRENTE\r\n ========================================================= *\/\r\nfunction renderQuestion() {\r\n const q = questions[currentIndex];\r\n const saved = userAnswers[currentIndex];\r\n\r\n \/\/ Testi dei due bottoni\r\n btnOptA.textContent = q.optionA;\r\n btnOptB.textContent = q.optionB;\r\n\r\n \/\/ Reset classi\r\n btnOptA.classList.remove('correct', 'wrong');\r\n btnOptB.classList.remove('correct', 'wrong');\r\n\r\n \/\/ Frasi \/ blank\r\n let blankContent = '________';\r\n let blankClass = 'blank';\r\n\r\n if (saved === 'A' || saved === 'B') {\r\n const chosenText = getOptionText(q, saved);\r\n const isCorrect = saved === q.correct;\r\n blankContent = chosenText;\r\n blankClass = 'blank filled' + (isCorrect ? '' : ' wrong');\r\n }\r\n\r\n sentenceText.innerHTML =\r\n escapeHtml(q.before) + ' <span class=\"' + blankClass + '\">' + escapeHtml(blankContent) + '<\/span> ' + escapeHtml(q.after);\r\n\r\n \/\/ Stato bottoni\r\n if (saved === 'A' || saved === 'B') {\r\n btnOptA.disabled = true;\r\n btnOptB.disabled = true;\r\n answered = true;\r\n\r\n if (saved === q.correct) {\r\n if (q.correct === 'A') btnOptA.classList.add('correct');\r\n else btnOptB.classList.add('correct');\r\n } else {\r\n if (saved === 'A') btnOptA.classList.add('wrong');\r\n else btnOptB.classList.add('wrong');\r\n if (q.correct === 'A') btnOptA.classList.add('correct');\r\n else btnOptB.classList.add('correct');\r\n }\r\n } else if (saved === 'skipped') {\r\n btnOptA.disabled = true;\r\n btnOptB.disabled = true;\r\n answered = true;\r\n } else {\r\n btnOptA.disabled = false;\r\n btnOptB.disabled = false;\r\n answered = false;\r\n }\r\n\r\n \/\/ Hint\r\n if (saved === 'skipped') {\r\n hintText.textContent = 'Domanda skippata';\r\n } else if (saved) {\r\n hintText.textContent = saved === q.correct ? '\u2714 Risposta corretta!' : '\u2718 Risposta sbagliata';\r\n } else {\r\n hintText.textContent = 'Scegli la parola corretta';\r\n }\r\n\r\n \/\/ Controlli\r\n btnNext.disabled = !answered;\r\n btnBack.disabled = currentIndex === 0;\r\n btnSkip.disabled = answered;\r\n\r\n \/\/ Contatori\r\n counterCurrent.textContent = currentIndex + 1;\r\n counterTotal.textContent = totalQuestions;\r\n counterCorrect.textContent = correctCount;\r\n counterWrong.textContent = wrongCount;\r\n counterSkipped.textContent = skippedCount;\r\n}\r\n\r\n\/* =========================================================\r\n SELEZIONE DI UN'OPZIONE\r\n ========================================================= *\/\r\nfunction selectOption(letter) {\r\n if (answered) return;\r\n\r\n const q = questions[currentIndex];\r\n userAnswers[currentIndex] = letter;\r\n answered = true;\r\n\r\n btnOptA.disabled = true;\r\n btnOptB.disabled = true;\r\n\r\n const chosenText = getOptionText(q, letter);\r\n const correctText = getOptionText(q, q.correct);\r\n\r\n if (letter === q.correct) {\r\n correctCount++;\r\n if (letter === 'A') btnOptA.classList.add('correct');\r\n else btnOptB.classList.add('correct');\r\n hintText.textContent = '\u2714 Risposta corretta!';\r\n } else {\r\n wrongCount++;\r\n if (letter === 'A') btnOptA.classList.add('wrong');\r\n else btnOptB.classList.add('wrong');\r\n if (q.correct === 'A') btnOptA.classList.add('correct');\r\n else btnOptB.classList.add('correct');\r\n hintText.textContent = '\u2718 Risposta sbagliata';\r\n showErrorPopup(q, chosenText, correctText);\r\n }\r\n\r\n \/\/ Aggiorna il blank nella frase\r\n let blankClass = 'blank filled' + (letter === q.correct ? '' : ' wrong');\r\n sentenceText.innerHTML =\r\n escapeHtml(q.before) + ' <span class=\"' + blankClass + '\">' + escapeHtml(chosenText) + '<\/span> ' + escapeHtml(q.after);\r\n\r\n btnNext.disabled = false;\r\n btnSkip.disabled = true;\r\n\r\n updateCounters();\r\n}\r\n\r\n\/* =========================================================\r\n POPUP ERRORE\r\n ========================================================= *\/\r\nfunction showErrorPopup(q, chosenText, correctText) {\r\n popupError.innerHTML =\r\n 'Hai scelto <b>\"' + escapeHtml(chosenText) + '\"<\/b> ma la parola corretta \u00e8 <b>\"' + escapeHtml(correctText) + '\"<\/b>.<br><br>' +\r\n q.explanation;\r\n\r\n popupCorrect.innerHTML = 'Frase corretta:<br>' + q.correctSentence;\r\n overlay.classList.add('show');\r\n}\r\n\r\nfunction closePopup() {\r\n overlay.classList.remove('show');\r\n}\r\n\r\n\/* =========================================================\r\n NAVIGAZIONE\r\n ========================================================= *\/\r\nfunction goNext() {\r\n if (!answered) return;\r\n\r\n if (currentIndex < totalQuestions - 1) {\r\n card.classList.add('animating');\r\n setTimeout(() => {\r\n currentIndex++;\r\n answered = (userAnswers[currentIndex] !== null);\r\n renderQuestion();\r\n card.classList.remove('animating');\r\n }, 200);\r\n } else {\r\n showFinalScreen();\r\n }\r\n}\r\n\r\nfunction goBack() {\r\n if (currentIndex === 0) return;\r\n\r\n card.classList.add('animating');\r\n setTimeout(() => {\r\n currentIndex--;\r\n answered = (userAnswers[currentIndex] !== null);\r\n renderQuestion();\r\n card.classList.remove('animating');\r\n }, 200);\r\n}\r\n\r\nfunction skipQuestion() {\r\n if (answered) return;\r\n\r\n userAnswers[currentIndex] = 'skipped';\r\n skippedCount++;\r\n answered = true;\r\n\r\n btnOptA.disabled = true;\r\n btnOptB.disabled = true;\r\n btnSkip.disabled = true;\r\n\r\n hintText.textContent = 'Domanda skippata';\r\n updateCounters();\r\n\r\n btnNext.disabled = false;\r\n}\r\n\r\n\/* =========================================================\r\n CONTATORI\r\n ========================================================= *\/\r\nfunction updateCounters() {\r\n counterCorrect.textContent = correctCount;\r\n counterWrong.textContent = wrongCount;\r\n counterSkipped.textContent = skippedCount;\r\n counterCurrent.textContent = currentIndex + 1;\r\n}\r\n\r\n\/* =========================================================\r\n SCHERMATA FINALE\r\n ========================================================= *\/\r\nfunction showFinalScreen() {\r\n cardWrap.style.display = 'none';\r\n document.getElementById('options').style.display = 'none';\r\n document.querySelector('.controls').style.display = 'none';\r\n finalScreen.classList.add('show');\r\n\r\n finalScore.textContent = correctCount + '\/' + totalQuestions;\r\n\r\n const percentage = (correctCount \/ totalQuestions) * 100;\r\n let msg = '';\r\n if (percentage >= 90) msg = 'Eccellente! Distingui perfettamente CARDINAL e ORDINAL! \ud83c\udf1f';\r\n else if (percentage >= 70) msg = 'Molto bene! Continua cos\u00ec! \ud83d\udc4d';\r\n else if (percentage >= 50) msg = 'Buon lavoro! Ripassa un po\\' le regole. \ud83d\udcda';\r\n else msg = 'Non scoraggiarti! Rivedi la differenza tra cardinal e ordinal e riprova. \ud83d\udcaa';\r\n\r\n finalMessage.textContent = msg;\r\n}\r\n\r\n\/* =========================================================\r\n RICOMINCIA\r\n ========================================================= *\/\r\nfunction restartApp() {\r\n currentIndex = 0;\r\n correctCount = 0;\r\n wrongCount = 0;\r\n skippedCount = 0;\r\n userAnswers = new Array(questions.length).fill(null);\r\n answered = false;\r\n\r\n cardWrap.style.display = '';\r\n document.getElementById('options').style.display = '';\r\n document.querySelector('.controls').style.display = '';\r\n finalScreen.classList.remove('show');\r\n\r\n btnOptA.classList.remove('correct', 'wrong');\r\n btnOptB.classList.remove('correct', 'wrong');\r\n\r\n renderQuestion();\r\n}\r\n\r\n\/* =========================================================\r\n AVVIO\r\n ========================================================= *\/\r\nrenderQuestion();\r\n<\/script>\r\n\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\n<\/div>\n\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Cardinal or Ordinal – English Grammar Practice Cardinal or Ordinal? Giuste 0 Sbagliate 0 Domanda 1\/20 Skippate 0 Scegli la […]<\/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-520","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/www.profdifaziodonato.it\/index.php?rest_route=\/wp\/v2\/pages\/520","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=520"}],"version-history":[{"count":4,"href":"https:\/\/www.profdifaziodonato.it\/index.php?rest_route=\/wp\/v2\/pages\/520\/revisions"}],"predecessor-version":[{"id":524,"href":"https:\/\/www.profdifaziodonato.it\/index.php?rest_route=\/wp\/v2\/pages\/520\/revisions\/524"}],"wp:attachment":[{"href":"https:\/\/www.profdifaziodonato.it\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=520"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}