Modulo 2 – Conoscere il Territorio | Autonomia Portami Via<\/title>\n <style>\n * { margin: 0; padding: 0; box-sizing: border-box; }\n body {\n font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;\n background: linear-gradient(135deg, #11998e 0%, #38ef7d 100%);\n min-height: 100vh;\n padding: 20px;\n line-height: 1.6;\n }\n .container { max-width: 900px; margin: 0 auto; }\n .header {\n background: white;\n border-radius: 20px;\n padding: 30px;\n text-align: center;\n margin-bottom: 20px;\n box-shadow: 0 10px 40px rgba(0,0,0,0.2);\n }\n .header h1 { color: #11998e; font-size: 2em; margin-bottom: 10px; }\n .module-badge {\n display: inline-block;\n background: linear-gradient(135deg, #11998e, #38ef7d);\n color: white;\n padding: 8px 20px;\n border-radius: 20px;\n font-weight: bold;\n margin-bottom: 15px;\n }\n .tabs { display: flex; gap: 10px; margin-bottom: 20px; flex-wrap: wrap; }\n .tab {\n flex: 1;\n min-width: 140px;\n padding: 15px 20px;\n background: white;\n border: none;\n border-radius: 15px;\n cursor: pointer;\n font-size: 1em;\n font-weight: bold;\n color: #11998e;\n transition: all 0.3s;\n box-shadow: 0 4px 15px rgba(0,0,0,0.1);\n }\n .tab:hover { transform: translateY(-3px); }\n .tab.active {\n background: linear-gradient(135deg, #11998e, #38ef7d);\n color: white;\n }\n .content-section {\n background: white;\n border-radius: 20px;\n padding: 30px;\n margin-bottom: 20px;\n box-shadow: 0 10px 40px rgba(0,0,0,0.2);\n display: none;\n }\n .content-section.active {\n display: block;\n animation: fadeIn 0.5s ease;\n }\n @keyframes fadeIn {\n from { opacity: 0; transform: translateY(20px); }\n to { opacity: 1; transform: translateY(0); }\n }\n .lesson-card {\n background: #f0fff4;\n border-radius: 15px;\n padding: 25px;\n margin-bottom: 20px;\n border-left: 5px solid #11998e;\n }\n .lesson-card h3 {\n color: #11998e;\n margin-bottom: 15px;\n }\n .highlight-box {\n background: linear-gradient(135deg, #fff3cd, #ffeeba);\n border-radius: 10px;\n padding: 20px;\n margin: 15px 0;\n border-left: 4px solid #ffc107;\n }\n .highlight-box.tip {\n background: linear-gradient(135deg, #d4edda, #c3e6cb);\n border-left-color: #28a745;\n }\n .highlight-box.warning {\n background: linear-gradient(135deg, #f8d7da, #f5c6cb);\n border-left-color: #dc3545;\n }\n .highlight-box.info {\n background: linear-gradient(135deg, #d1ecf1, #bee5eb);\n border-left-color: #17a2b8;\n }\n h2 {\n color: #11998e;\n margin: 25px 0 15px 0;\n padding-bottom: 10px;\n border-bottom: 2px solid #e0e0e0;\n }\n ul, ol { margin-left: 25px; margin-bottom: 15px; }\n li { margin-bottom: 8px; }\n .service-grid {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));\n gap: 20px;\n margin: 20px 0;\n }\n .service-card {\n background: white;\n border-radius: 15px;\n padding: 20px;\n text-align: center;\n box-shadow: 0 5px 15px rgba(0,0,0,0.1);\n transition: all 0.3s;\n border: 2px solid transparent;\n cursor: pointer;\n }\n .service-card:hover {\n transform: translateY(-5px);\n border-color: #11998e;\n }\n .service-card .icon { font-size: 3em; margin-bottom: 15px; }\n .service-card h4 { color: #11998e; margin-bottom: 10px; }\n .service-card p { color: #666; font-size: 0.9em; }\n .matching-container {\n display: flex;\n gap: 30px;\n flex-wrap: wrap;\n justify-content: center;\n margin: 20px 0;\n }\n .matching-column { display: flex; flex-direction: column; gap: 10px; }\n .match-item {\n padding: 15px 25px;\n background: linear-gradient(135deg, #f0fff4, #e8f5e9);\n border: 3px solid #11998e;\n border-radius: 10px;\n cursor: pointer;\n transition: all 0.3s;\n font-weight: bold;\n text-align: center;\n min-width: 180px;\n }\n .match-item:hover { transform: scale(1.05); }\n .match-item.selected {\n background: linear-gradient(135deg, #11998e, #38ef7d);\n color: white;\n }\n .match-item.correct {\n background: #28a745;\n color: white;\n border-color: #28a745;\n }\n .match-item.wrong {\n background: #dc3545;\n color: white;\n border-color: #dc3545;\n animation: shake 0.5s;\n }\n @keyframes shake {\n 0%, 100% { transform: translateX(0); }\n 25% { transform: translateX(-10px); }\n 75% { transform: translateX(10px); }\n }\n .scenario-box {\n background: linear-gradient(135deg, #e8f5e9, #c8e6c9);\n border-radius: 15px;\n padding: 25px;\n margin: 20px 0;\n }\n .scenario-title {\n font-size: 1.3em;\n color: #11998e;\n margin-bottom: 15px;\n }\n .scenario-options { display: grid; gap: 10px; }\n .scenario-option {\n padding: 15px 20px;\n background: white;\n border: 2px solid #ddd;\n border-radius: 10px;\n cursor: pointer;\n transition: all 0.3s;\n }\n .scenario-option:hover {\n border-color: #11998e;\n transform: translateX(5px);\n }\n .scenario-option.correct { background: #d4edda; border-color: #28a745; }\n .scenario-option.wrong { background: #f8d7da; border-color: #dc3545; }\n .quiz-question {\n background: #f0fff4;\n border-radius: 15px;\n padding: 25px;\n margin-bottom: 20px;\n }\n .quiz-question h4 { color: #11998e; margin-bottom: 15px; }\n .quiz-options { display: grid; gap: 10px; }\n .quiz-option {\n padding: 15px 20px;\n background: white;\n border: 2px solid #ddd;\n border-radius: 10px;\n cursor: pointer;\n transition: all 0.3s;\n }\n .quiz-option:hover { border-color: #11998e; }\n .quiz-option.correct { background: #d4edda; border-color: #28a745; }\n .quiz-option.wrong { background: #f8d7da; border-color: #dc3545; }\n .quiz-feedback {\n margin-top: 15px;\n padding: 15px;\n border-radius: 10px;\n display: none;\n }\n .quiz-feedback.show { display: block; }\n .btn {\n padding: 12px 30px;\n border: none;\n border-radius: 10px;\n font-size: 1em;\n font-weight: bold;\n cursor: pointer;\n transition: all 0.3s;\n }\n .btn-primary {\n background: linear-gradient(135deg, #11998e, #38ef7d);\n color: white;\n }\n .btn-primary:hover {\n transform: translateY(-2px);\n box-shadow: 0 5px 20px rgba(17, 153, 142, 0.4);\n }\n .progress-bar {\n width: 100%;\n height: 10px;\n background: #e0e0e0;\n border-radius: 5px;\n margin: 20px 0;\n overflow: hidden;\n }\n .progress-fill {\n height: 100%;\n background: linear-gradient(90deg, #11998e, #38ef7d);\n border-radius: 5px;\n transition: width 0.5s ease;\n }\n .score-display {\n text-align: center;\n padding: 30px;\n background: linear-gradient(135deg, #11998e, #38ef7d);\n border-radius: 15px;\n color: white;\n }\n .phone-grid {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));\n gap: 15px;\n margin: 20px 0;\n }\n .phone-card {\n background: linear-gradient(135deg, #e8f5e9, #c8e6c9);\n border-radius: 10px;\n padding: 15px;\n text-align: center;\n }\n .phone-card .number {\n font-size: 1.8em;\n font-weight: bold;\n color: #11998e;\n }\n .phone-card .desc { color: #666; font-size: 0.9em; }\n .emoji-big { font-size: 3em; display: block; text-align: center; margin: 20px 0; }\n @media (max-width: 600px) {\n .header h1 { font-size: 1.5em; }\n .tab { min-width: 100%; }\n .matching-container { flex-direction: column; align-items: center; }\n }\n <\/style>\n<\/head>\n<body>\n <div class=\"container\">\n <div class=\"header\">\n <div class=\"module-badge\">📚 MODULO 2 – 12 ORE<\/div>\n <h1>🗺️ Conoscere il Territorio<\/h1>\n <p class=\"subtitle\">Scopri tutti i servizi che possono aiutarti nella tua citt\u00e0!<\/p>\n <\/div>\n \n <div class=\"tabs\">\n <button class=\"tab active\" onclick=\"showSection('dispensa')\">📖 Dispensa<\/button>\n <button class=\"tab\" onclick=\"showSection('servizi')\">🏛️ Servizi<\/button>\n <button class=\"tab\" onclick=\"showSection('abbina')\">🎯 Abbina<\/button>\n <button class=\"tab\" onclick=\"showSection('scenari')\">🎭 Scenari<\/button>\n <button class=\"tab\" onclick=\"showSection('quiz')\">❓ Quiz<\/button>\n <\/div>\n \n \n <div id=\"dispensa\" class=\"content-section active\">\n <h2>🎯 Cosa imparerai<\/h2>\n <p>In questo modulo scoprirai tutti i servizi che esistono nella tua citt\u00e0 e come usarli. \u00c8 come avere una mappa del tesoro!<\/p>\n \n <div class=\"lesson-card\">\n <h3>🏛️ I Servizi Pubblici<\/h3>\n <p>I servizi pubblici sono come degli aiutanti che lo Stato mette a disposizione di tutti.<\/p>\n <p><strong>Chi fa cosa?<\/strong><\/p>\n <ul>\n <li><strong>Il Comune<\/strong> = si occupa della tua citt\u00e0 (anagrafe, rifiuti, strade)<\/li>\n <li><strong>La Regione<\/strong> = si occupa di cose pi\u00f9 grandi (ospedali, trasporti)<\/li>\n <li><strong>Lo Stato<\/strong> = si occupa di tutto il Paese (documenti, sicurezza)<\/li>\n <\/ul>\n \n <div class=\"highlight-box info\">\n <h4>📋 L’Anagrafe<\/h4>\n <p>\u00c8 l’ufficio del Comune dove puoi: fare la carta d’identit\u00e0, cambiare indirizzo, richiedere certificati.<\/p>\n <\/div>\n <\/div>\n \n <div class=\"lesson-card\">\n <h3>🏥 Il Sistema Sanitario<\/h3>\n <p>In Italia la salute \u00e8 un DIRITTO. Puoi curarti anche se non hai molti soldi!<\/p>\n <ul>\n <li><strong>Medico di base<\/strong> = il tuo dottore personale. GRATIS!<\/li>\n <li><strong>Guardia medica<\/strong> = quando il medico non c’\u00e8 (sera, notte, weekend)<\/li>\n <li><strong>Pronto Soccorso<\/strong> = SOLO per emergenze gravi!<\/li>\n <\/ul>\n \n <div class=\"highlight-box warning\">\n <h4>⚠️ Importante!<\/h4>\n <p>Il Pronto Soccorso NON \u00e8 per il raffreddore! Per quelle cose vai dal medico di base.<\/p>\n <\/div>\n \n <div class=\"highlight-box tip\">\n <h4>💡 SPID e Tessera Sanitaria<\/h4>\n <p><strong>Tessera Sanitaria:<\/strong> portala SEMPRE quando vai dal dottore.<\/p>\n <p><strong>SPID:<\/strong> la tua identit\u00e0 digitale per fare tutto online senza code!<\/p>\n <\/div>\n <\/div>\n \n <div class=\"lesson-card\">\n <h3>🚌 Muoversi in Citt\u00e0<\/h3>\n <p><strong>Mezzi pubblici:<\/strong><\/p>\n <ul>\n <li><strong>Autobus e tram<\/strong> = il modo pi\u00f9 comune<\/li>\n <li><strong>Metro<\/strong> = velocissima (non c’\u00e8 ovunque)<\/li>\n <li><strong>Treno<\/strong> = per andare in altre citt\u00e0<\/li>\n <\/ul>\n <p><strong>Tip:<\/strong> Se usi i mezzi ogni giorno, l’abbonamento conviene!<\/p>\n <\/div>\n \n <div class=\"lesson-card\">\n <h3>💼 Formazione e Lavoro<\/h3>\n <ul>\n <li><strong>Centro per l’Impiego<\/strong> = ti aiutano a trovare lavoro GRATIS<\/li>\n <li><strong>Agenzie interinali<\/strong> = trovano lavoro per te<\/li>\n <li><strong>Corsi di formazione<\/strong> = spesso gratuiti!<\/li>\n <\/ul>\n <\/div>\n \n <h2>📞 Numeri da Salvare<\/h2>\n <div class=\"phone-grid\">\n <div class=\"phone-card\">\n <div class=\"number\">112<\/div>\n <div class=\"desc\">Emergenze (tutti)<\/div>\n <\/div>\n <div class=\"phone-card\">\n <div class=\"number\">118<\/div>\n <div class=\"desc\">Ambulanza<\/div>\n <\/div>\n <div class=\"phone-card\">\n <div class=\"number\">115<\/div>\n <div class=\"desc\">Vigili del Fuoco<\/div>\n <\/div>\n <div class=\"phone-card\">\n <div class=\"number\">113<\/div>\n <div class=\"desc\">Polizia<\/div>\n <\/div>\n <\/div>\n <\/div>\n \n \n <div id=\"servizi\" class=\"content-section\">\n <h2>🏛️ Mappa dei Servizi<\/h2>\n <p>Clicca su ogni servizio per scoprire cosa fa!<\/p>\n \n <div class=\"service-grid\">\n <div class=\"service-card\" onclick=\"showInfo('comune')\">\n <div class=\"icon\">🏛️<\/div>\n <h4>Comune<\/h4>\n <p>Documenti e residenza<\/p>\n <\/div>\n <div class=\"service-card\" onclick=\"showInfo('medico')\">\n <div class=\"icon\">👨‍⚕️<\/div>\n <h4>Medico<\/h4>\n <p>Il tuo dottore<\/p>\n <\/div>\n <div class=\"service-card\" onclick=\"showInfo('ospedale')\">\n <div class=\"icon\">🏥<\/div>\n <h4>Ospedale<\/h4>\n <p>Emergenze<\/p>\n <\/div>\n <div class=\"service-card\" onclick=\"showInfo('cpi')\">\n <div class=\"icon\">💼<\/div>\n <h4>Centro Impiego<\/h4>\n <p>Trovare lavoro<\/p>\n <\/div>\n <div class=\"service-card\" onclick=\"showInfo('biblioteca')\">\n <div class=\"icon\">📚<\/div>\n <h4>Biblioteca<\/h4>\n <p>Libri e studio<\/p>\n <\/div>\n <div class=\"service-card\" onclick=\"showInfo('caf')\">\n <div class=\"icon\">📋<\/div>\n <h4>CAF<\/h4>\n <p>Tasse e bonus<\/p>\n <\/div>\n <\/div>\n \n <div id=\"service-info\" class=\"highlight-box info\" style=\"display: none;\">\n <h4 id=\"service-title\"><\/h4>\n <div id=\"service-content\"><\/div>\n <\/div>\n <\/div>\n \n \n <div id=\"abbina\" class=\"content-section\">\n <h2>🎯 Abbina Problema e Servizio<\/h2>\n <p>Prima seleziona un problema, poi il servizio giusto!<\/p>\n \n <div class=\"matching-container\">\n <div class=\"matching-column\" id=\"problems\">\n <div class=\"match-item\" data-match=\"medico\" onclick=\"selectProblem(this)\">Ho la febbre<\/div>\n <div class=\"match-item\" data-match=\"comune\" onclick=\"selectProblem(this)\">Carta d’identit\u00e0<\/div>\n <div class=\"match-item\" data-match=\"cpi\" onclick=\"selectProblem(this)\">Cerco lavoro<\/div>\n <div class=\"match-item\" data-match=\"ps\" onclick=\"selectProblem(this)\">Braccio rotto<\/div>\n <div class=\"match-item\" data-match=\"caf\" onclick=\"selectProblem(this)\">Fare l’ISEE<\/div>\n <\/div>\n <div class=\"matching-column\" id=\"services-match\">\n <div class=\"match-item\" data-service=\"medico\" onclick=\"selectService(this)\">👨‍⚕️ Medico<\/div>\n <div class=\"match-item\" data-service=\"comune\" onclick=\"selectService(this)\">🏛️ Comune<\/div>\n <div class=\"match-item\" data-service=\"ps\" onclick=\"selectService(this)\">🏥 Pronto Soccorso<\/div>\n <div class=\"match-item\" data-service=\"cpi\" onclick=\"selectService(this)\">💼 Centro Impiego<\/div>\n <div class=\"match-item\" data-service=\"caf\" onclick=\"selectService(this)\">📋 CAF<\/div>\n <\/div>\n <\/div>\n \n <div style=\"text-align: center; margin-top: 20px;\">\n <p id=\"match-score\">Corretti: 0 \/ 5<\/p>\n <button class=\"btn btn-primary\" onclick=\"resetMatch()\">🔄 Ricomincia<\/button>\n <\/div>\n <\/div>\n \n \n <div id=\"scenari\" class=\"content-section\">\n <h2>🎭 Cosa Faccio Se…<\/h2>\n \n <div class=\"scenario-box\">\n <div class=\"scenario-title\">🤒 \u00c8 sabato notte, ho la febbre alta<\/div>\n <div class=\"scenario-options\">\n <div class=\"scenario-option\" onclick=\"checkScen(this, false)\">Vado al Pronto Soccorso<\/div>\n <div class=\"scenario-option\" onclick=\"checkScen(this, true)\">Chiamo la Guardia Medica<\/div>\n <div class=\"scenario-option\" onclick=\"checkScen(this, false)\">Aspetto luned\u00ec<\/div>\n <\/div>\n <\/div>\n \n <div class=\"scenario-box\">\n <div class=\"scenario-title\">📄 Ho cambiato casa, dove comunico l’indirizzo?<\/div>\n <div class=\"scenario-options\">\n <div class=\"scenario-option\" onclick=\"checkScen(this, false)\">In Questura<\/div>\n <div class=\"scenario-option\" onclick=\"checkScen(this, true)\">All’Anagrafe del Comune<\/div>\n <div class=\"scenario-option\" onclick=\"checkScen(this, false)\">Alle Poste<\/div>\n <\/div>\n <\/div>\n \n <div class=\"scenario-box\">\n <div class=\"scenario-title\">💼 Voglio trovare lavoro, dove vado GRATIS?<\/div>\n <div class=\"scenario-options\">\n <div class=\"scenario-option\" onclick=\"checkScen(this, true)\">Centro per l’Impiego<\/div>\n <div class=\"scenario-option\" onclick=\"checkScen(this, false)\">In banca<\/div>\n <div class=\"scenario-option\" onclick=\"checkScen(this, false)\">Dal commercialista<\/div>\n <\/div>\n <\/div>\n <\/div>\n \n \n <div id=\"quiz\" class=\"content-section\">\n <h2>❓ Quiz Finale<\/h2>\n \n <div class=\"progress-bar\">\n <div class=\"progress-fill\" id=\"quiz-progress\" style=\"width: 0%\"><\/div>\n <\/div>\n \n <div id=\"quiz-container\"><\/div>\n \n <div id=\"quiz-result\" class=\"score-display\" style=\"display: none;\">\n <h3>🎉 Completato!<\/h3>\n <p>Risposte corrette: <span id=\"score\">0<\/span>\/<span id=\"total\">5<\/span><\/p>\n <button class=\"btn\" style=\"background:white;color:#11998e;margin-top:15px\" onclick=\"resetQuiz()\">🔄 Rifai<\/button>\n <\/div>\n <\/div>\n <\/div>\n \n <script>\n function showSection(id) {\n document.querySelectorAll('.content-section').forEach(s => s.classList.remove('active'));\n document.querySelectorAll('.tab').forEach(t => t.classList.remove('active'));\n document.getElementById(id).classList.add('active');\n event.target.classList.add('active');\n }\n \n const infos = {\n comune: { title: '🏛️ Comune', content: '<p>Qui fai: carta d\\'identit\u00e0, cambio residenza, certificati. Prendi appuntamento online!<\/p>' },\n medico: { title: '👨‍⚕️ Medico di Base', content: '<p>Il tuo dottore GRATIS! Visite, ricette, certificati. Sceglilo all\\'ASL.<\/p>' },\n ospedale: { title: '🏥 Pronto Soccorso', content: '<p>SOLO emergenze gravi: incidenti, fratture, dolore forte al petto. NON per raffreddore!<\/p>' },\n cpi: { title: '💼 Centro Impiego', content: '<p>Ti aiutano GRATIS a: trovare lavoro, fare il CV, iscriverti a corsi.<\/p>' },\n biblioteca: { title: '📚 Biblioteca', content: '<p>GRATIS: libri, wifi, computer, spazi studio. Iscriviti con un documento!<\/p>' },\n caf: { title: '📋 CAF', content: '<p>Ti aiutano con: tasse (730), ISEE, bonus. Spesso gratis!<\/p>' }\n };\n \n function showInfo(key) {\n document.getElementById('service-title').textContent = infos[key].title;\n document.getElementById('service-content').innerHTML = infos[key].content;\n document.getElementById('service-info').style.display = 'block';\n }\n \n let selProblem = null, matchScore = 0, matched = new Set();\n \n function selectProblem(el) {\n if (matched.has(el.dataset.match)) return;\n document.querySelectorAll('#problems .match-item').forEach(i => i.classList.remove('selected'));\n el.classList.add('selected');\n selProblem = el;\n }\n \n function selectService(el) {\n if (!selProblem) { alert('Prima seleziona un problema!'); return; }\n if (selProblem.dataset.match === el.dataset.service) {\n selProblem.classList.add('correct');\n el.classList.add('correct');\n matchScore++;\n matched.add(selProblem.dataset.match);\n } else {\n el.classList.add('wrong');\n setTimeout(() => el.classList.remove('wrong'), 500);\n }\n selProblem.classList.remove('selected');\n selProblem = null;\n document.getElementById('match-score').textContent = `Corretti: ${matchScore} \/ 5`;\n }\n \n function resetMatch() {\n selProblem = null; matchScore = 0; matched = new Set();\n document.querySelectorAll('.match-item').forEach(i => i.classList.remove('selected','correct','wrong'));\n document.getElementById('match-score').textContent = 'Corretti: 0 \/ 5';\n }\n \n function checkScen(el, correct) {\n el.parentElement.querySelectorAll('.scenario-option').forEach(o => o.style.pointerEvents = 'none');\n el.classList.add(correct ? 'correct' : 'wrong');\n }\n \n const questions = [\n { q: \"Cos'\u00e8 lo SPID?\", opts: [\"Un documento cartaceo\", \"La tua identit\u00e0 digitale\", \"Una carta di credito\"], ans: 1 },\n { q: \"Quando vai al Pronto Soccorso?\", opts: [\"Per il raffreddore\", \"Per emergenze gravi\", \"Per un certificato\"], ans: 1 },\n { q: \"Dove fai la carta d'identit\u00e0?\", opts: [\"Questura\", \"Anagrafe Comune\", \"Poste\"], ans: 1 },\n { q: \"Cos'\u00e8 il CAF?\", opts: [\"Un bar\", \"Aiuto per tasse e bonus\", \"Una palestra\"], ans: 1 },\n { q: \"Numero emergenze in Italia?\", opts: [\"113\", \"112\", \"911\"], ans: 1 }\n ];\n \n let qIdx = 0, qScore = 0;\n \n function loadQuiz() {\n const c = document.getElementById('quiz-container');\n c.innerHTML = questions.map((q, i) => `\n <div class=\"quiz-question\" id=\"q${i}\" style=\"display:${i===0?'block':'none'}\">\n <h4>Domanda ${i+1}\/${questions.length}<\/h4>\n <p>${q.q}<\/p>\n <div class=\"quiz-options\">\n ${q.opts.map((o, j) => `<div class=\"quiz-option\" onclick=\"answer(${i},${j})\">${o}<\/div>`).join('')}\n <\/div>\n <\/div>\n `).join('');\n }\n \n function answer(qi, ai) {\n const opts = document.querySelectorAll(`#q${qi} .quiz-option`);\n opts.forEach((o, i) => {\n o.style.pointerEvents = 'none';\n if (i === questions[qi].ans) o.classList.add('correct');\n else if (i === ai) o.classList.add('wrong');\n });\n if (ai === questions[qi].ans) qScore++;\n document.getElementById('quiz-progress').style.width = ((qi+1)\/questions.length*100)+'%';\n setTimeout(() => {\n document.getElementById(`q${qi}`).style.display = 'none';\n if (qi < questions.length-1) document.getElementById(`q${qi+1}`).style.display = 'block';\n else {\n document.getElementById('quiz-container').style.display = 'none';\n document.getElementById('quiz-result').style.display = 'block';\n document.getElementById('score').textContent = qScore;\n document.getElementById('total').textContent = questions.length;\n }\n }, 1000);\n }\n \n function resetQuiz() {\n qScore = 0;\n document.getElementById('quiz-progress').style.width = '0%';\n document.getElementById('quiz-result').style.display = 'none';\n document.getElementById('quiz-container').style.display = 'block';\n loadQuiz();\n }\n \n loadQuiz();\n <\/script>\n<\/body>\n<\/html>\n\n","protected":false},"excerpt":{"rendered":"<p>Modulo 2 – Conoscere il Territorio | Autonomia Portami Via 📚 MODULO 2 – 12 ORE 🗺️ Conoscere il Territorio Scopri tutti i servizi che possono aiutarti nella tua citt\u00e0! 📖 Dispensa 🏛️ Servizi 🎯 Abbina 🎭 Scenari ❓ Quiz 🎯 Cosa imparerai In questo modulo scoprirai tutti i servizi che esistono nella tua citt\u00e0 … <a title=\"Conoscere il territorio\" class=\"read-more\" href=\"https:\/\/studikis.it\/?p=55\" aria-label=\"Read more about Conoscere il territorio\">Read more<\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-55","post","type-post","status-publish","format-standard","hentry","category-corsimarzogiugno26"],"_links":{"self":[{"href":"https:\/\/studikis.it\/index.php?rest_route=\/wp\/v2\/posts\/55","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/studikis.it\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/studikis.it\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/studikis.it\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/studikis.it\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=55"}],"version-history":[{"count":1,"href":"https:\/\/studikis.it\/index.php?rest_route=\/wp\/v2\/posts\/55\/revisions"}],"predecessor-version":[{"id":56,"href":"https:\/\/studikis.it\/index.php?rest_route=\/wp\/v2\/posts\/55\/revisions\/56"}],"wp:attachment":[{"href":"https:\/\/studikis.it\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=55"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/studikis.it\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=55"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/studikis.it\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=55"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

{"id":55,"date":"2026-03-10T09:22:22","date_gmt":"2026-03-10T09:22:22","guid":{"rendered":"https:\/\/studikis.it\/?p=55"},"modified":"2026-03-10T10:31:54","modified_gmt":"2026-03-10T10:31:54","slug":"conoscere-il-territorio","status":"publish","type":"post","link":"https:\/\/studikis.it\/?p=55","title":{"rendered":"Conoscere il territorio"},"content":{"rendered":"\n\n\n\n \n \n Modulo 2 – Conoscere il Territorio | Autonomia Portami Via<\/title>\n <style>\n * { margin: 0; padding: 0; box-sizing: border-box; }\n body {\n font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;\n background: linear-gradient(135deg, #11998e 0%, #38ef7d 100%);\n min-height: 100vh;\n padding: 20px;\n line-height: 1.6;\n }\n .container { max-width: 900px; margin: 0 auto; }\n .header {\n background: white;\n border-radius: 20px;\n padding: 30px;\n text-align: center;\n margin-bottom: 20px;\n box-shadow: 0 10px 40px rgba(0,0,0,0.2);\n }\n .header h1 { color: #11998e; font-size: 2em; margin-bottom: 10px; }\n .module-badge {\n display: inline-block;\n background: linear-gradient(135deg, #11998e, #38ef7d);\n color: white;\n padding: 8px 20px;\n border-radius: 20px;\n font-weight: bold;\n margin-bottom: 15px;\n }\n .tabs { display: flex; gap: 10px; margin-bottom: 20px; flex-wrap: wrap; }\n .tab {\n flex: 1;\n min-width: 140px;\n padding: 15px 20px;\n background: white;\n border: none;\n border-radius: 15px;\n cursor: pointer;\n font-size: 1em;\n font-weight: bold;\n color: #11998e;\n transition: all 0.3s;\n box-shadow: 0 4px 15px rgba(0,0,0,0.1);\n }\n .tab:hover { transform: translateY(-3px); }\n .tab.active {\n background: linear-gradient(135deg, #11998e, #38ef7d);\n color: white;\n }\n .content-section {\n background: white;\n border-radius: 20px;\n padding: 30px;\n margin-bottom: 20px;\n box-shadow: 0 10px 40px rgba(0,0,0,0.2);\n display: none;\n }\n .content-section.active {\n display: block;\n animation: fadeIn 0.5s ease;\n }\n @keyframes fadeIn {\n from { opacity: 0; transform: translateY(20px); }\n to { opacity: 1; transform: translateY(0); }\n }\n .lesson-card {\n background: #f0fff4;\n border-radius: 15px;\n padding: 25px;\n margin-bottom: 20px;\n border-left: 5px solid #11998e;\n }\n .lesson-card h3 {\n color: #11998e;\n margin-bottom: 15px;\n }\n .highlight-box {\n background: linear-gradient(135deg, #fff3cd, #ffeeba);\n border-radius: 10px;\n padding: 20px;\n margin: 15px 0;\n border-left: 4px solid #ffc107;\n }\n .highlight-box.tip {\n background: linear-gradient(135deg, #d4edda, #c3e6cb);\n border-left-color: #28a745;\n }\n .highlight-box.warning {\n background: linear-gradient(135deg, #f8d7da, #f5c6cb);\n border-left-color: #dc3545;\n }\n .highlight-box.info {\n background: linear-gradient(135deg, #d1ecf1, #bee5eb);\n border-left-color: #17a2b8;\n }\n h2 {\n color: #11998e;\n margin: 25px 0 15px 0;\n padding-bottom: 10px;\n border-bottom: 2px solid #e0e0e0;\n }\n ul, ol { margin-left: 25px; margin-bottom: 15px; }\n li { margin-bottom: 8px; }\n .service-grid {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));\n gap: 20px;\n margin: 20px 0;\n }\n .service-card {\n background: white;\n border-radius: 15px;\n padding: 20px;\n text-align: center;\n box-shadow: 0 5px 15px rgba(0,0,0,0.1);\n transition: all 0.3s;\n border: 2px solid transparent;\n cursor: pointer;\n }\n .service-card:hover {\n transform: translateY(-5px);\n border-color: #11998e;\n }\n .service-card .icon { font-size: 3em; margin-bottom: 15px; }\n .service-card h4 { color: #11998e; margin-bottom: 10px; }\n .service-card p { color: #666; font-size: 0.9em; }\n .matching-container {\n display: flex;\n gap: 30px;\n flex-wrap: wrap;\n justify-content: center;\n margin: 20px 0;\n }\n .matching-column { display: flex; flex-direction: column; gap: 10px; }\n .match-item {\n padding: 15px 25px;\n background: linear-gradient(135deg, #f0fff4, #e8f5e9);\n border: 3px solid #11998e;\n border-radius: 10px;\n cursor: pointer;\n transition: all 0.3s;\n font-weight: bold;\n text-align: center;\n min-width: 180px;\n }\n .match-item:hover { transform: scale(1.05); }\n .match-item.selected {\n background: linear-gradient(135deg, #11998e, #38ef7d);\n color: white;\n }\n .match-item.correct {\n background: #28a745;\n color: white;\n border-color: #28a745;\n }\n .match-item.wrong {\n background: #dc3545;\n color: white;\n border-color: #dc3545;\n animation: shake 0.5s;\n }\n @keyframes shake {\n 0%, 100% { transform: translateX(0); }\n 25% { transform: translateX(-10px); }\n 75% { transform: translateX(10px); }\n }\n .scenario-box {\n background: linear-gradient(135deg, #e8f5e9, #c8e6c9);\n border-radius: 15px;\n padding: 25px;\n margin: 20px 0;\n }\n .scenario-title {\n font-size: 1.3em;\n color: #11998e;\n margin-bottom: 15px;\n }\n .scenario-options { display: grid; gap: 10px; }\n .scenario-option {\n padding: 15px 20px;\n background: white;\n border: 2px solid #ddd;\n border-radius: 10px;\n cursor: pointer;\n transition: all 0.3s;\n }\n .scenario-option:hover {\n border-color: #11998e;\n transform: translateX(5px);\n }\n .scenario-option.correct { background: #d4edda; border-color: #28a745; }\n .scenario-option.wrong { background: #f8d7da; border-color: #dc3545; }\n .quiz-question {\n background: #f0fff4;\n border-radius: 15px;\n padding: 25px;\n margin-bottom: 20px;\n }\n .quiz-question h4 { color: #11998e; margin-bottom: 15px; }\n .quiz-options { display: grid; gap: 10px; }\n .quiz-option {\n padding: 15px 20px;\n background: white;\n border: 2px solid #ddd;\n border-radius: 10px;\n cursor: pointer;\n transition: all 0.3s;\n }\n .quiz-option:hover { border-color: #11998e; }\n .quiz-option.correct { background: #d4edda; border-color: #28a745; }\n .quiz-option.wrong { background: #f8d7da; border-color: #dc3545; }\n .quiz-feedback {\n margin-top: 15px;\n padding: 15px;\n border-radius: 10px;\n display: none;\n }\n .quiz-feedback.show { display: block; }\n .btn {\n padding: 12px 30px;\n border: none;\n border-radius: 10px;\n font-size: 1em;\n font-weight: bold;\n cursor: pointer;\n transition: all 0.3s;\n }\n .btn-primary {\n background: linear-gradient(135deg, #11998e, #38ef7d);\n color: white;\n }\n .btn-primary:hover {\n transform: translateY(-2px);\n box-shadow: 0 5px 20px rgba(17, 153, 142, 0.4);\n }\n .progress-bar {\n width: 100%;\n height: 10px;\n background: #e0e0e0;\n border-radius: 5px;\n margin: 20px 0;\n overflow: hidden;\n }\n .progress-fill {\n height: 100%;\n background: linear-gradient(90deg, #11998e, #38ef7d);\n border-radius: 5px;\n transition: width 0.5s ease;\n }\n .score-display {\n text-align: center;\n padding: 30px;\n background: linear-gradient(135deg, #11998e, #38ef7d);\n border-radius: 15px;\n color: white;\n }\n .phone-grid {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));\n gap: 15px;\n margin: 20px 0;\n }\n .phone-card {\n background: linear-gradient(135deg, #e8f5e9, #c8e6c9);\n border-radius: 10px;\n padding: 15px;\n text-align: center;\n }\n .phone-card .number {\n font-size: 1.8em;\n font-weight: bold;\n color: #11998e;\n }\n .phone-card .desc { color: #666; font-size: 0.9em; }\n .emoji-big { font-size: 3em; display: block; text-align: center; margin: 20px 0; }\n @media (max-width: 600px) {\n .header h1 { font-size: 1.5em; }\n .tab { min-width: 100%; }\n .matching-container { flex-direction: column; align-items: center; }\n }\n <\/style>\n<\/head>\n<body>\n <div class=\"container\">\n <div class=\"header\">\n <div class=\"module-badge\">📚 MODULO 2 – 12 ORE<\/div>\n <h1>🗺️ Conoscere il Territorio<\/h1>\n <p class=\"subtitle\">Scopri tutti i servizi che possono aiutarti nella tua citt\u00e0!<\/p>\n <\/div>\n \n <div class=\"tabs\">\n <button class=\"tab active\" onclick=\"showSection('dispensa')\">📖 Dispensa<\/button>\n <button class=\"tab\" onclick=\"showSection('servizi')\">🏛️ Servizi<\/button>\n <button class=\"tab\" onclick=\"showSection('abbina')\">🎯 Abbina<\/button>\n <button class=\"tab\" onclick=\"showSection('scenari')\">🎭 Scenari<\/button>\n <button class=\"tab\" onclick=\"showSection('quiz')\">❓ Quiz<\/button>\n <\/div>\n \n \n <div id=\"dispensa\" class=\"content-section active\">\n <h2>🎯 Cosa imparerai<\/h2>\n <p>In questo modulo scoprirai tutti i servizi che esistono nella tua citt\u00e0 e come usarli. \u00c8 come avere una mappa del tesoro!<\/p>\n \n <div class=\"lesson-card\">\n <h3>🏛️ I Servizi Pubblici<\/h3>\n <p>I servizi pubblici sono come degli aiutanti che lo Stato mette a disposizione di tutti.<\/p>\n <p><strong>Chi fa cosa?<\/strong><\/p>\n <ul>\n <li><strong>Il Comune<\/strong> = si occupa della tua citt\u00e0 (anagrafe, rifiuti, strade)<\/li>\n <li><strong>La Regione<\/strong> = si occupa di cose pi\u00f9 grandi (ospedali, trasporti)<\/li>\n <li><strong>Lo Stato<\/strong> = si occupa di tutto il Paese (documenti, sicurezza)<\/li>\n <\/ul>\n \n <div class=\"highlight-box info\">\n <h4>📋 L’Anagrafe<\/h4>\n <p>\u00c8 l’ufficio del Comune dove puoi: fare la carta d’identit\u00e0, cambiare indirizzo, richiedere certificati.<\/p>\n <\/div>\n <\/div>\n \n <div class=\"lesson-card\">\n <h3>🏥 Il Sistema Sanitario<\/h3>\n <p>In Italia la salute \u00e8 un DIRITTO. Puoi curarti anche se non hai molti soldi!<\/p>\n <ul>\n <li><strong>Medico di base<\/strong> = il tuo dottore personale. GRATIS!<\/li>\n <li><strong>Guardia medica<\/strong> = quando il medico non c’\u00e8 (sera, notte, weekend)<\/li>\n <li><strong>Pronto Soccorso<\/strong> = SOLO per emergenze gravi!<\/li>\n <\/ul>\n \n <div class=\"highlight-box warning\">\n <h4>⚠️ Importante!<\/h4>\n <p>Il Pronto Soccorso NON \u00e8 per il raffreddore! Per quelle cose vai dal medico di base.<\/p>\n <\/div>\n \n <div class=\"highlight-box tip\">\n <h4>💡 SPID e Tessera Sanitaria<\/h4>\n <p><strong>Tessera Sanitaria:<\/strong> portala SEMPRE quando vai dal dottore.<\/p>\n <p><strong>SPID:<\/strong> la tua identit\u00e0 digitale per fare tutto online senza code!<\/p>\n <\/div>\n <\/div>\n \n <div class=\"lesson-card\">\n <h3>🚌 Muoversi in Citt\u00e0<\/h3>\n <p><strong>Mezzi pubblici:<\/strong><\/p>\n <ul>\n <li><strong>Autobus e tram<\/strong> = il modo pi\u00f9 comune<\/li>\n <li><strong>Metro<\/strong> = velocissima (non c’\u00e8 ovunque)<\/li>\n <li><strong>Treno<\/strong> = per andare in altre citt\u00e0<\/li>\n <\/ul>\n <p><strong>Tip:<\/strong> Se usi i mezzi ogni giorno, l’abbonamento conviene!<\/p>\n <\/div>\n \n <div class=\"lesson-card\">\n <h3>💼 Formazione e Lavoro<\/h3>\n <ul>\n <li><strong>Centro per l’Impiego<\/strong> = ti aiutano a trovare lavoro GRATIS<\/li>\n <li><strong>Agenzie interinali<\/strong> = trovano lavoro per te<\/li>\n <li><strong>Corsi di formazione<\/strong> = spesso gratuiti!<\/li>\n <\/ul>\n <\/div>\n \n <h2>📞 Numeri da Salvare<\/h2>\n <div class=\"phone-grid\">\n <div class=\"phone-card\">\n <div class=\"number\">112<\/div>\n <div class=\"desc\">Emergenze (tutti)<\/div>\n <\/div>\n <div class=\"phone-card\">\n <div class=\"number\">118<\/div>\n <div class=\"desc\">Ambulanza<\/div>\n <\/div>\n <div class=\"phone-card\">\n <div class=\"number\">115<\/div>\n <div class=\"desc\">Vigili del Fuoco<\/div>\n <\/div>\n <div class=\"phone-card\">\n <div class=\"number\">113<\/div>\n <div class=\"desc\">Polizia<\/div>\n <\/div>\n <\/div>\n <\/div>\n \n \n <div id=\"servizi\" class=\"content-section\">\n <h2>🏛️ Mappa dei Servizi<\/h2>\n <p>Clicca su ogni servizio per scoprire cosa fa!<\/p>\n \n <div class=\"service-grid\">\n <div class=\"service-card\" onclick=\"showInfo('comune')\">\n <div class=\"icon\">🏛️<\/div>\n <h4>Comune<\/h4>\n <p>Documenti e residenza<\/p>\n <\/div>\n <div class=\"service-card\" onclick=\"showInfo('medico')\">\n <div class=\"icon\">👨‍⚕️<\/div>\n <h4>Medico<\/h4>\n <p>Il tuo dottore<\/p>\n <\/div>\n <div class=\"service-card\" onclick=\"showInfo('ospedale')\">\n <div class=\"icon\">🏥<\/div>\n <h4>Ospedale<\/h4>\n <p>Emergenze<\/p>\n <\/div>\n <div class=\"service-card\" onclick=\"showInfo('cpi')\">\n <div class=\"icon\">💼<\/div>\n <h4>Centro Impiego<\/h4>\n <p>Trovare lavoro<\/p>\n <\/div>\n <div class=\"service-card\" onclick=\"showInfo('biblioteca')\">\n <div class=\"icon\">📚<\/div>\n <h4>Biblioteca<\/h4>\n <p>Libri e studio<\/p>\n <\/div>\n <div class=\"service-card\" onclick=\"showInfo('caf')\">\n <div class=\"icon\">📋<\/div>\n <h4>CAF<\/h4>\n <p>Tasse e bonus<\/p>\n <\/div>\n <\/div>\n \n <div id=\"service-info\" class=\"highlight-box info\" style=\"display: none;\">\n <h4 id=\"service-title\"><\/h4>\n <div id=\"service-content\"><\/div>\n <\/div>\n <\/div>\n \n \n <div id=\"abbina\" class=\"content-section\">\n <h2>🎯 Abbina Problema e Servizio<\/h2>\n <p>Prima seleziona un problema, poi il servizio giusto!<\/p>\n \n <div class=\"matching-container\">\n <div class=\"matching-column\" id=\"problems\">\n <div class=\"match-item\" data-match=\"medico\" onclick=\"selectProblem(this)\">Ho la febbre<\/div>\n <div class=\"match-item\" data-match=\"comune\" onclick=\"selectProblem(this)\">Carta d’identit\u00e0<\/div>\n <div class=\"match-item\" data-match=\"cpi\" onclick=\"selectProblem(this)\">Cerco lavoro<\/div>\n <div class=\"match-item\" data-match=\"ps\" onclick=\"selectProblem(this)\">Braccio rotto<\/div>\n <div class=\"match-item\" data-match=\"caf\" onclick=\"selectProblem(this)\">Fare l’ISEE<\/div>\n <\/div>\n <div class=\"matching-column\" id=\"services-match\">\n <div class=\"match-item\" data-service=\"medico\" onclick=\"selectService(this)\">👨‍⚕️ Medico<\/div>\n <div class=\"match-item\" data-service=\"comune\" onclick=\"selectService(this)\">🏛️ Comune<\/div>\n <div class=\"match-item\" data-service=\"ps\" onclick=\"selectService(this)\">🏥 Pronto Soccorso<\/div>\n <div class=\"match-item\" data-service=\"cpi\" onclick=\"selectService(this)\">💼 Centro Impiego<\/div>\n <div class=\"match-item\" data-service=\"caf\" onclick=\"selectService(this)\">📋 CAF<\/div>\n <\/div>\n <\/div>\n \n <div style=\"text-align: center; margin-top: 20px;\">\n <p id=\"match-score\">Corretti: 0 \/ 5<\/p>\n <button class=\"btn btn-primary\" onclick=\"resetMatch()\">🔄 Ricomincia<\/button>\n <\/div>\n <\/div>\n \n \n <div id=\"scenari\" class=\"content-section\">\n <h2>🎭 Cosa Faccio Se…<\/h2>\n \n <div class=\"scenario-box\">\n <div class=\"scenario-title\">🤒 \u00c8 sabato notte, ho la febbre alta<\/div>\n <div class=\"scenario-options\">\n <div class=\"scenario-option\" onclick=\"checkScen(this, false)\">Vado al Pronto Soccorso<\/div>\n <div class=\"scenario-option\" onclick=\"checkScen(this, true)\">Chiamo la Guardia Medica<\/div>\n <div class=\"scenario-option\" onclick=\"checkScen(this, false)\">Aspetto luned\u00ec<\/div>\n <\/div>\n <\/div>\n \n <div class=\"scenario-box\">\n <div class=\"scenario-title\">📄 Ho cambiato casa, dove comunico l’indirizzo?<\/div>\n <div class=\"scenario-options\">\n <div class=\"scenario-option\" onclick=\"checkScen(this, false)\">In Questura<\/div>\n <div class=\"scenario-option\" onclick=\"checkScen(this, true)\">All’Anagrafe del Comune<\/div>\n <div class=\"scenario-option\" onclick=\"checkScen(this, false)\">Alle Poste<\/div>\n <\/div>\n <\/div>\n \n <div class=\"scenario-box\">\n <div class=\"scenario-title\">💼 Voglio trovare lavoro, dove vado GRATIS?<\/div>\n <div class=\"scenario-options\">\n <div class=\"scenario-option\" onclick=\"checkScen(this, true)\">Centro per l’Impiego<\/div>\n <div class=\"scenario-option\" onclick=\"checkScen(this, false)\">In banca<\/div>\n <div class=\"scenario-option\" onclick=\"checkScen(this, false)\">Dal commercialista<\/div>\n <\/div>\n <\/div>\n <\/div>\n \n \n <div id=\"quiz\" class=\"content-section\">\n <h2>❓ Quiz Finale<\/h2>\n \n <div class=\"progress-bar\">\n <div class=\"progress-fill\" id=\"quiz-progress\" style=\"width: 0%\"><\/div>\n <\/div>\n \n <div id=\"quiz-container\"><\/div>\n \n <div id=\"quiz-result\" class=\"score-display\" style=\"display: none;\">\n <h3>🎉 Completato!<\/h3>\n <p>Risposte corrette: <span id=\"score\">0<\/span>\/<span id=\"total\">5<\/span><\/p>\n <button class=\"btn\" style=\"background:white;color:#11998e;margin-top:15px\" onclick=\"resetQuiz()\">🔄 Rifai<\/button>\n <\/div>\n <\/div>\n <\/div>\n \n <script>\n function showSection(id) {\n document.querySelectorAll('.content-section').forEach(s => s.classList.remove('active'));\n document.querySelectorAll('.tab').forEach(t => t.classList.remove('active'));\n document.getElementById(id).classList.add('active');\n event.target.classList.add('active');\n }\n \n const infos = {\n comune: { title: '🏛️ Comune', content: '<p>Qui fai: carta d\\'identit\u00e0, cambio residenza, certificati. Prendi appuntamento online!<\/p>' },\n medico: { title: '👨‍⚕️ Medico di Base', content: '<p>Il tuo dottore GRATIS! Visite, ricette, certificati. Sceglilo all\\'ASL.<\/p>' },\n ospedale: { title: '🏥 Pronto Soccorso', content: '<p>SOLO emergenze gravi: incidenti, fratture, dolore forte al petto. NON per raffreddore!<\/p>' },\n cpi: { title: '💼 Centro Impiego', content: '<p>Ti aiutano GRATIS a: trovare lavoro, fare il CV, iscriverti a corsi.<\/p>' },\n biblioteca: { title: '📚 Biblioteca', content: '<p>GRATIS: libri, wifi, computer, spazi studio. Iscriviti con un documento!<\/p>' },\n caf: { title: '📋 CAF', content: '<p>Ti aiutano con: tasse (730), ISEE, bonus. Spesso gratis!<\/p>' }\n };\n \n function showInfo(key) {\n document.getElementById('service-title').textContent = infos[key].title;\n document.getElementById('service-content').innerHTML = infos[key].content;\n document.getElementById('service-info').style.display = 'block';\n }\n \n let selProblem = null, matchScore = 0, matched = new Set();\n \n function selectProblem(el) {\n if (matched.has(el.dataset.match)) return;\n document.querySelectorAll('#problems .match-item').forEach(i => i.classList.remove('selected'));\n el.classList.add('selected');\n selProblem = el;\n }\n \n function selectService(el) {\n if (!selProblem) { alert('Prima seleziona un problema!'); return; }\n if (selProblem.dataset.match === el.dataset.service) {\n selProblem.classList.add('correct');\n el.classList.add('correct');\n matchScore++;\n matched.add(selProblem.dataset.match);\n } else {\n el.classList.add('wrong');\n setTimeout(() => el.classList.remove('wrong'), 500);\n }\n selProblem.classList.remove('selected');\n selProblem = null;\n document.getElementById('match-score').textContent = `Corretti: ${matchScore} \/ 5`;\n }\n \n function resetMatch() {\n selProblem = null; matchScore = 0; matched = new Set();\n document.querySelectorAll('.match-item').forEach(i => i.classList.remove('selected','correct','wrong'));\n document.getElementById('match-score').textContent = 'Corretti: 0 \/ 5';\n }\n \n function checkScen(el, correct) {\n el.parentElement.querySelectorAll('.scenario-option').forEach(o => o.style.pointerEvents = 'none');\n el.classList.add(correct ? 'correct' : 'wrong');\n }\n \n const questions = [\n { q: \"Cos'\u00e8 lo SPID?\", opts: [\"Un documento cartaceo\", \"La tua identit\u00e0 digitale\", \"Una carta di credito\"], ans: 1 },\n { q: \"Quando vai al Pronto Soccorso?\", opts: [\"Per il raffreddore\", \"Per emergenze gravi\", \"Per un certificato\"], ans: 1 },\n { q: \"Dove fai la carta d'identit\u00e0?\", opts: [\"Questura\", \"Anagrafe Comune\", \"Poste\"], ans: 1 },\n { q: \"Cos'\u00e8 il CAF?\", opts: [\"Un bar\", \"Aiuto per tasse e bonus\", \"Una palestra\"], ans: 1 },\n { q: \"Numero emergenze in Italia?\", opts: [\"113\", \"112\", \"911\"], ans: 1 }\n ];\n \n let qIdx = 0, qScore = 0;\n \n function loadQuiz() {\n const c = document.getElementById('quiz-container');\n c.innerHTML = questions.map((q, i) => `\n <div class=\"quiz-question\" id=\"q${i}\" style=\"display:${i===0?'block':'none'}\">\n <h4>Domanda ${i+1}\/${questions.length}<\/h4>\n <p>${q.q}<\/p>\n <div class=\"quiz-options\">\n ${q.opts.map((o, j) => `<div class=\"quiz-option\" onclick=\"answer(${i},${j})\">${o}<\/div>`).join('')}\n <\/div>\n <\/div>\n `).join('');\n }\n \n function answer(qi, ai) {\n const opts = document.querySelectorAll(`#q${qi} .quiz-option`);\n opts.forEach((o, i) => {\n o.style.pointerEvents = 'none';\n if (i === questions[qi].ans) o.classList.add('correct');\n else if (i === ai) o.classList.add('wrong');\n });\n if (ai === questions[qi].ans) qScore++;\n document.getElementById('quiz-progress').style.width = ((qi+1)\/questions.length*100)+'%';\n setTimeout(() => {\n document.getElementById(`q${qi}`).style.display = 'none';\n if (qi < questions.length-1) document.getElementById(`q${qi+1}`).style.display = 'block';\n else {\n document.getElementById('quiz-container').style.display = 'none';\n document.getElementById('quiz-result').style.display = 'block';\n document.getElementById('score').textContent = qScore;\n document.getElementById('total').textContent = questions.length;\n }\n }, 1000);\n }\n \n function resetQuiz() {\n qScore = 0;\n document.getElementById('quiz-progress').style.width = '0%';\n document.getElementById('quiz-result').style.display = 'none';\n document.getElementById('quiz-container').style.display = 'block';\n loadQuiz();\n }\n \n loadQuiz();\n <\/script>\n<\/body>\n<\/html>\n\n","protected":false},"excerpt":{"rendered":"<p>Modulo 2 – Conoscere il Territorio | Autonomia Portami Via 📚 MODULO 2 – 12 ORE 🗺️ Conoscere il Territorio Scopri tutti i servizi che possono aiutarti nella tua citt\u00e0! 📖 Dispensa 🏛️ Servizi 🎯 Abbina 🎭 Scenari ❓ Quiz 🎯 Cosa imparerai In questo modulo scoprirai tutti i servizi che esistono nella tua citt\u00e0 … <a title=\"Conoscere il territorio\" class=\"read-more\" href=\"https:\/\/studikis.it\/?p=55\" aria-label=\"Read more about Conoscere il territorio\">Read more<\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-55","post","type-post","status-publish","format-standard","hentry","category-corsimarzogiugno26"],"_links":{"self":[{"href":"https:\/\/studikis.it\/index.php?rest_route=\/wp\/v2\/posts\/55","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/studikis.it\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/studikis.it\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/studikis.it\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/studikis.it\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=55"}],"version-history":[{"count":1,"href":"https:\/\/studikis.it\/index.php?rest_route=\/wp\/v2\/posts\/55\/revisions"}],"predecessor-version":[{"id":56,"href":"https:\/\/studikis.it\/index.php?rest_route=\/wp\/v2\/posts\/55\/revisions\/56"}],"wp:attachment":[{"href":"https:\/\/studikis.it\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=55"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/studikis.it\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=55"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/studikis.it\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=55"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}