Modulo 3 – Educazione Civica | 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, #ee0979 0%, #ff6a00 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: #ee0979; font-size: 2em; margin-bottom: 10px; }\n .module-badge {\n display: inline-block;\n background: linear-gradient(135deg, #ee0979, #ff6a00);\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; min-width: 140px; padding: 15px 20px;\n background: white; border: none; border-radius: 15px;\n cursor: pointer; font-size: 1em; font-weight: bold;\n color: #ee0979; 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 { background: linear-gradient(135deg, #ee0979, #ff6a00); color: white; }\n .content-section {\n background: white; border-radius: 20px; padding: 30px;\n margin-bottom: 20px; box-shadow: 0 10px 40px rgba(0,0,0,0.2);\n display: none;\n }\n .content-section.active { display: block; animation: fadeIn 0.5s ease; }\n @keyframes fadeIn { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }\n .lesson-card {\n background: #fff5f5; border-radius: 15px; padding: 25px;\n margin-bottom: 20px; border-left: 5px solid #ee0979;\n }\n .lesson-card h3 { color: #ee0979; margin-bottom: 15px; }\n .highlight-box {\n background: linear-gradient(135deg, #fff3cd, #ffeeba);\n border-radius: 10px; padding: 20px; margin: 15px 0;\n border-left: 4px solid #ffc107;\n }\n .highlight-box.tip { background: linear-gradient(135deg, #d4edda, #c3e6cb); border-left-color: #28a745; }\n .highlight-box.warning { background: linear-gradient(135deg, #f8d7da, #f5c6cb); border-left-color: #dc3545; }\n .highlight-box.info { background: linear-gradient(135deg, #ffe0e6, #ffb3c1); border-left-color: #ee0979; }\n h2 { color: #ee0979; margin: 25px 0 15px 0; padding-bottom: 10px; border-bottom: 2px solid #e0e0e0; }\n ul, ol { margin-left: 25px; margin-bottom: 15px; }\n li { margin-bottom: 8px; }\n .article-card {\n background: linear-gradient(135deg, #fff5f5, #ffe0e6);\n border-radius: 15px; padding: 20px; margin: 15px 0;\n border: 2px solid #ee0979; cursor: pointer; transition: all 0.3s;\n }\n .article-card:hover { transform: scale(1.02); box-shadow: 0 5px 20px rgba(238,9,121,0.3); }\n .article-card .number {\n font-size: 2em; font-weight: bold; color: #ee0979;\n display: inline-block; width: 60px;\n }\n .article-card .title { font-weight: bold; color: #333; }\n .article-card .text { color: #666; font-size: 0.95em; margin-top: 10px; display: none; }\n .article-card.open .text { display: block; }\n .institution-grid {\n display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));\n gap: 20px; margin: 20px 0;\n }\n .institution-card {\n background: white; border-radius: 15px; padding: 20px; text-align: center;\n box-shadow: 0 5px 15px rgba(0,0,0,0.1); transition: all 0.3s;\n border: 2px solid transparent; cursor: pointer;\n }\n .institution-card:hover { border-color: #ee0979; transform: translateY(-5px); }\n .institution-card .icon { font-size: 3em; margin-bottom: 10px; }\n .institution-card h4 { color: #ee0979; margin-bottom: 5px; }\n .voting-sim {\n background: linear-gradient(135deg, #fff5f5, #ffe0e6);\n border-radius: 15px; padding: 25px; margin: 20px 0;\n }\n .candidate {\n background: white; border-radius: 10px; padding: 15px; margin: 10px 0;\n display: flex; align-items: center; gap: 15px; cursor: pointer;\n border: 3px solid #ddd; transition: all 0.3s;\n }\n .candidate:hover { border-color: #ee0979; }\n .candidate.selected { border-color: #ee0979; background: #ffe0e6; }\n .candidate .avatar { font-size: 2.5em; }\n .candidate .info h4 { margin: 0; color: #333; }\n .candidate .info p { margin: 5px 0 0; color: #666; font-size: 0.9em; }\n .quiz-question { background: #fff5f5; border-radius: 15px; padding: 25px; margin-bottom: 20px; }\n .quiz-question h4 { color: #ee0979; margin-bottom: 15px; }\n .quiz-options { display: grid; gap: 10px; }\n .quiz-option {\n padding: 15px 20px; background: white; border: 2px solid #ddd;\n border-radius: 10px; cursor: pointer; transition: all 0.3s;\n }\n .quiz-option:hover { border-color: #ee0979; }\n .quiz-option.correct { background: #d4edda; border-color: #28a745; }\n .quiz-option.wrong { background: #f8d7da; border-color: #dc3545; }\n .btn {\n padding: 12px 30px; border: none; border-radius: 10px;\n font-size: 1em; font-weight: bold; cursor: pointer; transition: all 0.3s;\n }\n .btn-primary { background: linear-gradient(135deg, #ee0979, #ff6a00); color: white; }\n .btn-primary:hover { transform: translateY(-2px); box-shadow: 0 5px 20px rgba(238,9,121,0.4); }\n .progress-bar {\n width: 100%; height: 10px; background: #e0e0e0;\n border-radius: 5px; margin: 20px 0; overflow: hidden;\n }\n .progress-fill {\n height: 100%; background: linear-gradient(90deg, #ee0979, #ff6a00);\n border-radius: 5px; transition: width 0.5s ease;\n }\n .score-display {\n text-align: center; padding: 30px;\n background: linear-gradient(135deg, #ee0979, #ff6a00);\n border-radius: 15px; color: white;\n }\n .rights-list { display: grid; gap: 10px; margin: 20px 0; }\n .right-item {\n background: white; border-radius: 10px; padding: 15px;\n display: flex; align-items: center; gap: 15px;\n border-left: 4px solid #ee0979;\n }\n .right-item .icon { font-size: 2em; }\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 }\n <\/style>\n<\/head>\n<body>\n <div class=\"container\">\n <div class=\"header\">\n <div class=\"module-badge\">📚 MODULO 3 – 14 ORE<\/div>\n <h1>🏛️ Educazione Civica<\/h1>\n <p class=\"subtitle\">Conosci i tuoi diritti e doveri di cittadino!<\/p>\n <\/div>\n \n <div class=\"tabs\">\n <button class=\"tab active\" onclick=\"showSection('dispensa')\">📖 Dispensa<\/button>\n <button class=\"tab\" onclick=\"showSection('costituzione')\">📜 Costituzione<\/button>\n <button class=\"tab\" onclick=\"showSection('istituzioni')\">🏛️ Istituzioni<\/button>\n <button class=\"tab\" onclick=\"showSection('voto')\">🗳️ Simula il Voto<\/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 come funziona l’Italia, quali sono i tuoi diritti e cosa significa essere un buon cittadino. \u00c8 come imparare le regole di un gioco, ma il gioco \u00e8 la vita insieme agli altri!<\/p>\n \n <div class=\"lesson-card\">\n <h3>📜 La Costituzione Italiana<\/h3>\n <p>La Costituzione \u00e8 come il “libretto delle istruzioni” dell’Italia. \u00c8 nata nel 1948, dopo la Seconda Guerra Mondiale, scritta da persone che volevano un’Italia migliore.<\/p>\n \n <div class=\"highlight-box info\">\n <h4>🔑 Cos’\u00e8 la Costituzione?<\/h4>\n <p>\u00c8 la legge pi\u00f9 importante d’Italia. TUTTE le altre leggi devono rispettarla. Dice quali sono i nostri diritti e come funziona lo Stato.<\/p>\n <\/div>\n \n <p><strong>I valori fondamentali:<\/strong><\/p>\n <ul>\n <li><strong>Democrazia<\/strong> = il potere appartiene al popolo<\/li>\n <li><strong>Uguaglianza<\/strong> = tutti hanno gli stessi diritti<\/li>\n <li><strong>Lavoro<\/strong> = l’Italia si fonda sul lavoro<\/li>\n <li><strong>Pace<\/strong> = l’Italia rifiuta la guerra<\/li>\n <\/ul>\n <\/div>\n \n <div class=\"lesson-card\">\n <h3>⚖️ Diritti e Doveri<\/h3>\n <p>In Italia hai dei DIRITTI (cose che puoi fare\/avere) ma anche dei DOVERI (cose che devi fare).<\/p>\n \n <div class=\"rights-list\">\n <div class=\"right-item\">\n <span class=\"icon\">🗣️<\/span>\n <div><strong>Libert\u00e0 di parola<\/strong> – Puoi dire quello che pensi<\/div>\n <\/div>\n <div class=\"right-item\">\n <span class=\"icon\">🏥<\/span>\n <div><strong>Diritto alla salute<\/strong> – Puoi curarti anche gratis<\/div>\n <\/div>\n <div class=\"right-item\">\n <span class=\"icon\">📚<\/span>\n <div><strong>Diritto all’istruzione<\/strong> – Puoi andare a scuola<\/div>\n <\/div>\n <div class=\"right-item\">\n <span class=\"icon\">💼<\/span>\n <div><strong>Diritto al lavoro<\/strong> – Puoi cercare lavoro e lavorare<\/div>\n <\/div>\n <div class=\"right-item\">\n <span class=\"icon\">🗳️<\/span>\n <div><strong>Diritto di voto<\/strong> – Puoi scegliere chi governa (dai 18 anni)<\/div>\n <\/div>\n <\/div>\n \n <p><strong>I doveri principali:<\/strong><\/p>\n <ul>\n <li>Rispettare le leggi<\/li>\n <li>Pagare le tasse (quando lavori)<\/li>\n <li>Difendere la Patria (se necessario)<\/li>\n <li>Rispettare gli altri<\/li>\n <\/ul>\n <\/div>\n \n <div class=\"lesson-card\">\n <h3>🏛️ Come Funziona l’Italia<\/h3>\n <p>L’Italia \u00e8 una <strong>Repubblica Parlamentare<\/strong>. Cosa significa?<\/p>\n <ul>\n <li><strong>Repubblica<\/strong> = non c’\u00e8 un re, il capo dello Stato viene eletto<\/li>\n <li><strong>Parlamentare<\/strong> = il Parlamento (eletto dai cittadini) fa le leggi<\/li>\n <\/ul>\n \n <p><strong>I tre poteri:<\/strong><\/p>\n <ul>\n <li><strong>Potere Legislativo<\/strong> (Parlamento) = fa le leggi<\/li>\n <li><strong>Potere Esecutivo<\/strong> (Governo) = applica le leggi<\/li>\n <li><strong>Potere Giudiziario<\/strong> (Magistratura) = controlla che le leggi siano rispettate<\/li>\n <\/ul>\n \n <div class=\"highlight-box tip\">\n <h4>💡 Perch\u00e9 tre poteri separati?<\/h4>\n <p>Per evitare che una sola persona abbia tutto il potere. \u00c8 come un gioco dove nessuno pu\u00f2 barare perch\u00e9 gli altri controllano!<\/p>\n <\/div>\n <\/div>\n \n <div class=\"lesson-card\">\n <h3>🗳️ Il Voto<\/h3>\n <p>Votare \u00e8 un <strong>diritto e un dovere<\/strong>. Quando voti, scegli chi prender\u00e0 le decisioni per tutti.<\/p>\n \n <p><strong>Quando si vota:<\/strong><\/p>\n <ul>\n <li><strong>Elezioni politiche<\/strong> = scegli il Parlamento (ogni 5 anni circa)<\/li>\n <li><strong>Elezioni regionali<\/strong> = scegli chi governa la tua regione<\/li>\n <li><strong>Elezioni comunali<\/strong> = scegli il sindaco della tua citt\u00e0<\/li>\n <li><strong>Referendum<\/strong> = decidi tu su una questione specifica<\/li>\n <\/ul>\n \n <div class=\"highlight-box warning\">\n <h4>⚠️ Importante!<\/h4>\n <p>Per votare devi avere 18 anni e la cittadinanza italiana. Il voto \u00e8 SEGRETO: nessuno pu\u00f2 sapere cosa hai votato!<\/p>\n <\/div>\n <\/div>\n <\/div>\n \n \n <div id=\"costituzione\" class=\"content-section\">\n <h2>📜 Gli Articoli della Costituzione<\/h2>\n <p>Clicca su ogni articolo per leggere cosa dice (in parole semplici)!<\/p>\n \n <div class=\"article-card\" onclick=\"toggleArticle(this)\">\n <span class=\"number\">Art. 1<\/span>\n <span class=\"title\">L’Italia \u00e8 una Repubblica fondata sul lavoro<\/span>\n <p class=\"text\">L’Italia \u00e8 una democrazia dove il potere appartiene al popolo. Il lavoro \u00e8 importante: non siamo fondati sulla ricchezza o sulla nascita, ma su quello che facciamo.<\/p>\n <\/div>\n \n <div class=\"article-card\" onclick=\"toggleArticle(this)\">\n <span class=\"number\">Art. 2<\/span>\n <span class=\"title\">Diritti inviolabili dell’uomo<\/span>\n <p class=\"text\">Tutti hanno dei diritti che nessuno pu\u00f2 togliere. Ma abbiamo anche dei doveri verso gli altri: dobbiamo essere solidali e aiutarci.<\/p>\n <\/div>\n \n <div class=\"article-card\" onclick=\"toggleArticle(this)\">\n <span class=\"number\">Art. 3<\/span>\n <span class=\"title\">Tutti i cittadini sono uguali<\/span>\n <p class=\"text\">Non importa se sei maschio o femmina, ricco o povero, di qualsiasi religione o idea politica. Davanti alla legge siamo tutti uguali. Lo Stato deve aiutare chi \u00e8 in difficolt\u00e0.<\/p>\n <\/div>\n \n <div class=\"article-card\" onclick=\"toggleArticle(this)\">\n <span class=\"number\">Art. 4<\/span>\n <span class=\"title\">Diritto al lavoro<\/span>\n <p class=\"text\">Tutti hanno diritto di lavorare. Lo Stato deve creare le condizioni perch\u00e9 tutti possano trovare un lavoro. Ma lavorare \u00e8 anche un dovere: ognuno deve fare la sua parte per il bene di tutti.<\/p>\n <\/div>\n \n <div class=\"article-card\" onclick=\"toggleArticle(this)\">\n <span class=\"number\">Art. 11<\/span>\n <span class=\"title\">L’Italia rifiuta la guerra<\/span>\n <p class=\"text\">L’Italia non usa la guerra per attaccare altri paesi o togliere loro la libert\u00e0. Accetta di limitare un po’ della sua libert\u00e0 per stare in pace con gli altri paesi (come l’Unione Europea).<\/p>\n <\/div>\n \n <div class=\"article-card\" onclick=\"toggleArticle(this)\">\n <span class=\"number\">Art. 21<\/span>\n <span class=\"title\">Libert\u00e0 di pensiero e parola<\/span>\n <p class=\"text\">Puoi pensare quello che vuoi e dirlo a tutti, con la parola, con gli scritti, o in qualsiasi modo. Nessuno pu\u00f2 censurarti (ma non puoi offendere o dire bugie sugli altri).<\/p>\n <\/div>\n \n <div class=\"article-card\" onclick=\"toggleArticle(this)\">\n <span class=\"number\">Art. 32<\/span>\n <span class=\"title\">Diritto alla salute<\/span>\n <p class=\"text\">La salute \u00e8 un diritto fondamentale. Lo Stato deve garantire cure gratuite a chi non pu\u00f2 permettersele. Nessuno pu\u00f2 obbligarti a curarti, tranne in casi particolari previsti dalla legge.<\/p>\n <\/div>\n \n <div class=\"article-card\" onclick=\"toggleArticle(this)\">\n <span class=\"number\">Art. 34<\/span>\n <span class=\"title\">Diritto all’istruzione<\/span>\n <p class=\"text\">La scuola \u00e8 aperta a tutti. L’istruzione di base \u00e8 obbligatoria e gratuita. Chi \u00e8 bravo e merita ha diritto di studiare anche se non ha soldi: lo Stato deve aiutarlo con borse di studio.<\/p>\n <\/div>\n <\/div>\n \n \n <div id=\"istituzioni\" class=\"content-section\">\n <h2>🏛️ Le Istituzioni Italiane<\/h2>\n <p>Clicca per scoprire cosa fa ogni istituzione!<\/p>\n \n <div class=\"institution-grid\">\n <div class=\"institution-card\" onclick=\"showInst('parlamento')\">\n <div class=\"icon\">🏛️<\/div>\n <h4>Parlamento<\/h4>\n <p>Fa le leggi<\/p>\n <\/div>\n <div class=\"institution-card\" onclick=\"showInst('governo')\">\n <div class=\"icon\">👔<\/div>\n <h4>Governo<\/h4>\n <p>Governa il Paese<\/p>\n <\/div>\n <div class=\"institution-card\" onclick=\"showInst('presidente')\">\n <div class=\"icon\">🎖️<\/div>\n <h4>Presidente<\/h4>\n <p>Rappresenta l’Italia<\/p>\n <\/div>\n <div class=\"institution-card\" onclick=\"showInst('magistratura')\">\n <div class=\"icon\">⚖️<\/div>\n <h4>Magistratura<\/h4>\n <p>Fa giustizia<\/p>\n <\/div>\n <div class=\"institution-card\" onclick=\"showInst('regione')\">\n <div class=\"icon\">🗺️<\/div>\n <h4>Regione<\/h4>\n <p>Governa la regione<\/p>\n <\/div>\n <div class=\"institution-card\" onclick=\"showInst('comune')\">\n <div class=\"icon\">🏘️<\/div>\n <h4>Comune<\/h4>\n <p>Governa la citt\u00e0<\/p>\n <\/div>\n <\/div>\n \n <div id=\"inst-info\" class=\"highlight-box info\" style=\"display: none;\">\n <h4 id=\"inst-title\"><\/h4>\n <div id=\"inst-content\"><\/div>\n <\/div>\n <\/div>\n \n \n <div id=\"voto\" class=\"content-section\">\n <h2>🗳️ Simulazione: Come si Vota<\/h2>\n <p>Proviamo insieme come funziona votare! Leggi i programmi e scegli.<\/p>\n \n <div class=\"voting-sim\">\n <h3 style=\"color: #ee0979; margin-bottom: 15px;\">Elezione del Rappresentante di Classe<\/h3>\n <p>Leggi cosa propone ogni candidato e scegli quello che ti convince di pi\u00f9:<\/p>\n \n <div class=\"candidate\" onclick=\"selectCandidate(this, 'marco')\">\n <span class=\"avatar\">👨‍🎓<\/span>\n <div class=\"info\">\n <h4>Marco Rossi<\/h4>\n <p>“Voglio creare un gruppo studio per aiutarci a vicenda e organizzare pi\u00f9 gite!”<\/p>\n <\/div>\n <\/div>\n \n <div class=\"candidate\" onclick=\"selectCandidate(this, 'sara')\">\n <span class=\"avatar\">👩‍🎓<\/span>\n <div class=\"info\">\n <h4>Sara Bianchi<\/h4>\n <p>“Propongo di migliorare la comunicazione con i prof e avere pi\u00f9 pause durante le lezioni lunghe.”<\/p>\n <\/div>\n <\/div>\n \n <div class=\"candidate\" onclick=\"selectCandidate(this, 'ali')\">\n <span class=\"avatar\">🧑‍🎓<\/span>\n <div class=\"info\">\n <h4>Ali Hassan<\/h4>\n <p>“Voglio che tutti si sentano inclusi e creare attivit\u00e0 che uniscano la classe.”<\/p>\n <\/div>\n <\/div>\n \n <div style=\"text-align: center; margin-top: 20px;\">\n <button class=\"btn btn-primary\" onclick=\"confermaVoto()\">🗳️ Conferma il Voto<\/button>\n <\/div>\n \n <div id=\"voto-result\" class=\"highlight-box tip\" style=\"display: none; margin-top: 20px;\">\n <h4>✅ Hai votato!<\/h4>\n <p id=\"voto-msg\"><\/p>\n <\/div>\n <\/div>\n \n <div class=\"highlight-box\">\n <h4>📝 Ricorda:<\/h4>\n <ul>\n <li>Il voto \u00e8 <strong>segreto<\/strong>: nessuno deve sapere chi hai votato<\/li>\n <li>Il voto \u00e8 <strong>libero<\/strong>: nessuno pu\u00f2 obbligarti a votare qualcuno<\/li>\n <li>Il voto \u00e8 <strong>uguale<\/strong>: il voto di tutti vale lo stesso<\/li>\n <li>Votare \u00e8 un <strong>diritto e un dovere<\/strong>!<\/li>\n <\/ul>\n <\/div>\n <\/div>\n \n \n <div id=\"quiz\" class=\"content-section\">\n <h2>❓ Quiz di Verifica<\/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>🎉 Quiz 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:#ee0979;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 function toggleArticle(el) {\n el.classList.toggle('open');\n }\n \n const institutions = {\n parlamento: { title: '🏛️ Parlamento', content: '<p><strong>Camera dei Deputati + Senato<\/strong><\/p><p>\u00c8 eletto dai cittadini. Fa le leggi, approva il bilancio dello Stato, d\u00e0 la fiducia al Governo. I membri si chiamano deputati e senatori.<\/p>' },\n governo: { title: '👔 Governo', content: '<p><strong>Presidente del Consiglio + Ministri<\/strong><\/p><p>Governa il Paese: applica le leggi, gestisce i servizi pubblici, prende decisioni quotidiane. Il capo si chiama Presidente del Consiglio (o Premier).<\/p>' },\n presidente: { title: '🎖️ Presidente della Repubblica', content: '<p>\u00c8 il capo dello Stato. Rappresenta l\\'unit\u00e0 nazionale, firma le leggi, nomina il Governo. \u00c8 eletto dal Parlamento e dura in carica 7 anni. Deve essere super partes (non fare politica di parte).<\/p>' },\n magistratura: { title: '⚖️ Magistratura', content: '<p>I giudici. Controllano che le leggi siano rispettate, giudicano chi le viola, proteggono i diritti dei cittadini. Sono indipendenti: nessuno pu\u00f2 dire loro cosa decidere.<\/p>' },\n regione: { title: '🗺️ Regione', content: '<p>Ogni regione ha un Presidente e un Consiglio eletti dai cittadini. Si occupa di sanit\u00e0, trasporti regionali, territorio. L\\'Italia ha 20 regioni.<\/p>' },\n comune: { title: '🏘️ Comune', content: '<p>Il Sindaco e il Consiglio comunale. Si occupano della citt\u00e0: strade, rifiuti, anagrafe, scuole. \u00c8 l\\'istituzione pi\u00f9 vicina ai cittadini!<\/p>' }\n };\n \n function showInst(key) {\n document.getElementById('inst-title').textContent = institutions[key].title;\n document.getElementById('inst-content').innerHTML = institutions[key].content;\n document.getElementById('inst-info').style.display = 'block';\n }\n \n let selectedCand = null;\n function selectCandidate(el, name) {\n document.querySelectorAll('.candidate').forEach(c => c.classList.remove('selected'));\n el.classList.add('selected');\n selectedCand = name;\n }\n \n function confermaVoto() {\n if (!selectedCand) { alert('Seleziona un candidato!'); return; }\n const msgs = {\n marco: 'Hai votato Marco! La sua idea di gruppo studio pu\u00f2 aiutare tutti.',\n sara: 'Hai votato Sara! Migliorare la comunicazione \u00e8 importante.',\n ali: 'Hai votato Ali! L\\'inclusione rende la classe pi\u00f9 forte.'\n };\n document.getElementById('voto-msg').textContent = msgs[selectedCand] + ' Ricorda: nelle elezioni vere il tuo voto \u00e8 segreto!';\n document.getElementById('voto-result').style.display = 'block';\n document.querySelectorAll('.candidate').forEach(c => c.style.pointerEvents = 'none');\n }\n \n const questions = [\n { q: \"Cos'\u00e8 la Costituzione?\", opts: [\"Un libro di storia\", \"La legge pi\u00f9 importante d'Italia\", \"Un partito politico\"], ans: 1 },\n { q: \"Chi fa le leggi in Italia?\", opts: [\"Il Presidente\", \"Il Parlamento\", \"I Carabinieri\"], ans: 1 },\n { q: \"A che et\u00e0 si pu\u00f2 votare?\", opts: [\"16 anni\", \"18 anni\", \"21 anni\"], ans: 1 },\n { q: \"Cosa dice l'articolo 3?\", opts: [\"L'Italia rifiuta la guerra\", \"Tutti sono uguali davanti alla legge\", \"La scuola \u00e8 obbligatoria\"], ans: 1 },\n { q: \"Chi \u00e8 il capo del Governo?\", opts: [\"Il Presidente della Repubblica\", \"Il Presidente del Consiglio\", \"Il Papa\"], ans: 1 }\n ];\n \n let 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 style=\"font-size:1.1em;margin-bottom:15px\">${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 3 – Educazione Civica | Autonomia Portami Via 📚 MODULO 3 – 14 ORE 🏛️ Educazione Civica Conosci i tuoi diritti e doveri di cittadino! 📖 Dispensa 📜 Costituzione 🏛️ Istituzioni 🗳️ Simula il Voto ❓ Quiz 🎯 Cosa imparerai In questo modulo scoprirai come funziona l’Italia, quali sono i tuoi diritti e cosa … <a title=\"Educazione Civica\" class=\"read-more\" href=\"https:\/\/studikis.it\/?p=51\" aria-label=\"Read more about Educazione Civica\">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-51","post","type-post","status-publish","format-standard","hentry","category-corsimarzogiugno26"],"_links":{"self":[{"href":"https:\/\/studikis.it\/index.php?rest_route=\/wp\/v2\/posts\/51","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=51"}],"version-history":[{"count":1,"href":"https:\/\/studikis.it\/index.php?rest_route=\/wp\/v2\/posts\/51\/revisions"}],"predecessor-version":[{"id":52,"href":"https:\/\/studikis.it\/index.php?rest_route=\/wp\/v2\/posts\/51\/revisions\/52"}],"wp:attachment":[{"href":"https:\/\/studikis.it\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=51"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/studikis.it\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=51"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/studikis.it\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=51"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

{"id":51,"date":"2026-03-10T09:21:01","date_gmt":"2026-03-10T09:21:01","guid":{"rendered":"https:\/\/studikis.it\/?p=51"},"modified":"2026-03-10T10:32:17","modified_gmt":"2026-03-10T10:32:17","slug":"educazione-civica","status":"publish","type":"post","link":"https:\/\/studikis.it\/?p=51","title":{"rendered":"Educazione Civica"},"content":{"rendered":"\n\n\n\n \n \n Modulo 3 – Educazione Civica | 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, #ee0979 0%, #ff6a00 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: #ee0979; font-size: 2em; margin-bottom: 10px; }\n .module-badge {\n display: inline-block;\n background: linear-gradient(135deg, #ee0979, #ff6a00);\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; min-width: 140px; padding: 15px 20px;\n background: white; border: none; border-radius: 15px;\n cursor: pointer; font-size: 1em; font-weight: bold;\n color: #ee0979; 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 { background: linear-gradient(135deg, #ee0979, #ff6a00); color: white; }\n .content-section {\n background: white; border-radius: 20px; padding: 30px;\n margin-bottom: 20px; box-shadow: 0 10px 40px rgba(0,0,0,0.2);\n display: none;\n }\n .content-section.active { display: block; animation: fadeIn 0.5s ease; }\n @keyframes fadeIn { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }\n .lesson-card {\n background: #fff5f5; border-radius: 15px; padding: 25px;\n margin-bottom: 20px; border-left: 5px solid #ee0979;\n }\n .lesson-card h3 { color: #ee0979; margin-bottom: 15px; }\n .highlight-box {\n background: linear-gradient(135deg, #fff3cd, #ffeeba);\n border-radius: 10px; padding: 20px; margin: 15px 0;\n border-left: 4px solid #ffc107;\n }\n .highlight-box.tip { background: linear-gradient(135deg, #d4edda, #c3e6cb); border-left-color: #28a745; }\n .highlight-box.warning { background: linear-gradient(135deg, #f8d7da, #f5c6cb); border-left-color: #dc3545; }\n .highlight-box.info { background: linear-gradient(135deg, #ffe0e6, #ffb3c1); border-left-color: #ee0979; }\n h2 { color: #ee0979; margin: 25px 0 15px 0; padding-bottom: 10px; border-bottom: 2px solid #e0e0e0; }\n ul, ol { margin-left: 25px; margin-bottom: 15px; }\n li { margin-bottom: 8px; }\n .article-card {\n background: linear-gradient(135deg, #fff5f5, #ffe0e6);\n border-radius: 15px; padding: 20px; margin: 15px 0;\n border: 2px solid #ee0979; cursor: pointer; transition: all 0.3s;\n }\n .article-card:hover { transform: scale(1.02); box-shadow: 0 5px 20px rgba(238,9,121,0.3); }\n .article-card .number {\n font-size: 2em; font-weight: bold; color: #ee0979;\n display: inline-block; width: 60px;\n }\n .article-card .title { font-weight: bold; color: #333; }\n .article-card .text { color: #666; font-size: 0.95em; margin-top: 10px; display: none; }\n .article-card.open .text { display: block; }\n .institution-grid {\n display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));\n gap: 20px; margin: 20px 0;\n }\n .institution-card {\n background: white; border-radius: 15px; padding: 20px; text-align: center;\n box-shadow: 0 5px 15px rgba(0,0,0,0.1); transition: all 0.3s;\n border: 2px solid transparent; cursor: pointer;\n }\n .institution-card:hover { border-color: #ee0979; transform: translateY(-5px); }\n .institution-card .icon { font-size: 3em; margin-bottom: 10px; }\n .institution-card h4 { color: #ee0979; margin-bottom: 5px; }\n .voting-sim {\n background: linear-gradient(135deg, #fff5f5, #ffe0e6);\n border-radius: 15px; padding: 25px; margin: 20px 0;\n }\n .candidate {\n background: white; border-radius: 10px; padding: 15px; margin: 10px 0;\n display: flex; align-items: center; gap: 15px; cursor: pointer;\n border: 3px solid #ddd; transition: all 0.3s;\n }\n .candidate:hover { border-color: #ee0979; }\n .candidate.selected { border-color: #ee0979; background: #ffe0e6; }\n .candidate .avatar { font-size: 2.5em; }\n .candidate .info h4 { margin: 0; color: #333; }\n .candidate .info p { margin: 5px 0 0; color: #666; font-size: 0.9em; }\n .quiz-question { background: #fff5f5; border-radius: 15px; padding: 25px; margin-bottom: 20px; }\n .quiz-question h4 { color: #ee0979; margin-bottom: 15px; }\n .quiz-options { display: grid; gap: 10px; }\n .quiz-option {\n padding: 15px 20px; background: white; border: 2px solid #ddd;\n border-radius: 10px; cursor: pointer; transition: all 0.3s;\n }\n .quiz-option:hover { border-color: #ee0979; }\n .quiz-option.correct { background: #d4edda; border-color: #28a745; }\n .quiz-option.wrong { background: #f8d7da; border-color: #dc3545; }\n .btn {\n padding: 12px 30px; border: none; border-radius: 10px;\n font-size: 1em; font-weight: bold; cursor: pointer; transition: all 0.3s;\n }\n .btn-primary { background: linear-gradient(135deg, #ee0979, #ff6a00); color: white; }\n .btn-primary:hover { transform: translateY(-2px); box-shadow: 0 5px 20px rgba(238,9,121,0.4); }\n .progress-bar {\n width: 100%; height: 10px; background: #e0e0e0;\n border-radius: 5px; margin: 20px 0; overflow: hidden;\n }\n .progress-fill {\n height: 100%; background: linear-gradient(90deg, #ee0979, #ff6a00);\n border-radius: 5px; transition: width 0.5s ease;\n }\n .score-display {\n text-align: center; padding: 30px;\n background: linear-gradient(135deg, #ee0979, #ff6a00);\n border-radius: 15px; color: white;\n }\n .rights-list { display: grid; gap: 10px; margin: 20px 0; }\n .right-item {\n background: white; border-radius: 10px; padding: 15px;\n display: flex; align-items: center; gap: 15px;\n border-left: 4px solid #ee0979;\n }\n .right-item .icon { font-size: 2em; }\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 }\n <\/style>\n<\/head>\n<body>\n <div class=\"container\">\n <div class=\"header\">\n <div class=\"module-badge\">📚 MODULO 3 – 14 ORE<\/div>\n <h1>🏛️ Educazione Civica<\/h1>\n <p class=\"subtitle\">Conosci i tuoi diritti e doveri di cittadino!<\/p>\n <\/div>\n \n <div class=\"tabs\">\n <button class=\"tab active\" onclick=\"showSection('dispensa')\">📖 Dispensa<\/button>\n <button class=\"tab\" onclick=\"showSection('costituzione')\">📜 Costituzione<\/button>\n <button class=\"tab\" onclick=\"showSection('istituzioni')\">🏛️ Istituzioni<\/button>\n <button class=\"tab\" onclick=\"showSection('voto')\">🗳️ Simula il Voto<\/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 come funziona l’Italia, quali sono i tuoi diritti e cosa significa essere un buon cittadino. \u00c8 come imparare le regole di un gioco, ma il gioco \u00e8 la vita insieme agli altri!<\/p>\n \n <div class=\"lesson-card\">\n <h3>📜 La Costituzione Italiana<\/h3>\n <p>La Costituzione \u00e8 come il “libretto delle istruzioni” dell’Italia. \u00c8 nata nel 1948, dopo la Seconda Guerra Mondiale, scritta da persone che volevano un’Italia migliore.<\/p>\n \n <div class=\"highlight-box info\">\n <h4>🔑 Cos’\u00e8 la Costituzione?<\/h4>\n <p>\u00c8 la legge pi\u00f9 importante d’Italia. TUTTE le altre leggi devono rispettarla. Dice quali sono i nostri diritti e come funziona lo Stato.<\/p>\n <\/div>\n \n <p><strong>I valori fondamentali:<\/strong><\/p>\n <ul>\n <li><strong>Democrazia<\/strong> = il potere appartiene al popolo<\/li>\n <li><strong>Uguaglianza<\/strong> = tutti hanno gli stessi diritti<\/li>\n <li><strong>Lavoro<\/strong> = l’Italia si fonda sul lavoro<\/li>\n <li><strong>Pace<\/strong> = l’Italia rifiuta la guerra<\/li>\n <\/ul>\n <\/div>\n \n <div class=\"lesson-card\">\n <h3>⚖️ Diritti e Doveri<\/h3>\n <p>In Italia hai dei DIRITTI (cose che puoi fare\/avere) ma anche dei DOVERI (cose che devi fare).<\/p>\n \n <div class=\"rights-list\">\n <div class=\"right-item\">\n <span class=\"icon\">🗣️<\/span>\n <div><strong>Libert\u00e0 di parola<\/strong> – Puoi dire quello che pensi<\/div>\n <\/div>\n <div class=\"right-item\">\n <span class=\"icon\">🏥<\/span>\n <div><strong>Diritto alla salute<\/strong> – Puoi curarti anche gratis<\/div>\n <\/div>\n <div class=\"right-item\">\n <span class=\"icon\">📚<\/span>\n <div><strong>Diritto all’istruzione<\/strong> – Puoi andare a scuola<\/div>\n <\/div>\n <div class=\"right-item\">\n <span class=\"icon\">💼<\/span>\n <div><strong>Diritto al lavoro<\/strong> – Puoi cercare lavoro e lavorare<\/div>\n <\/div>\n <div class=\"right-item\">\n <span class=\"icon\">🗳️<\/span>\n <div><strong>Diritto di voto<\/strong> – Puoi scegliere chi governa (dai 18 anni)<\/div>\n <\/div>\n <\/div>\n \n <p><strong>I doveri principali:<\/strong><\/p>\n <ul>\n <li>Rispettare le leggi<\/li>\n <li>Pagare le tasse (quando lavori)<\/li>\n <li>Difendere la Patria (se necessario)<\/li>\n <li>Rispettare gli altri<\/li>\n <\/ul>\n <\/div>\n \n <div class=\"lesson-card\">\n <h3>🏛️ Come Funziona l’Italia<\/h3>\n <p>L’Italia \u00e8 una <strong>Repubblica Parlamentare<\/strong>. Cosa significa?<\/p>\n <ul>\n <li><strong>Repubblica<\/strong> = non c’\u00e8 un re, il capo dello Stato viene eletto<\/li>\n <li><strong>Parlamentare<\/strong> = il Parlamento (eletto dai cittadini) fa le leggi<\/li>\n <\/ul>\n \n <p><strong>I tre poteri:<\/strong><\/p>\n <ul>\n <li><strong>Potere Legislativo<\/strong> (Parlamento) = fa le leggi<\/li>\n <li><strong>Potere Esecutivo<\/strong> (Governo) = applica le leggi<\/li>\n <li><strong>Potere Giudiziario<\/strong> (Magistratura) = controlla che le leggi siano rispettate<\/li>\n <\/ul>\n \n <div class=\"highlight-box tip\">\n <h4>💡 Perch\u00e9 tre poteri separati?<\/h4>\n <p>Per evitare che una sola persona abbia tutto il potere. \u00c8 come un gioco dove nessuno pu\u00f2 barare perch\u00e9 gli altri controllano!<\/p>\n <\/div>\n <\/div>\n \n <div class=\"lesson-card\">\n <h3>🗳️ Il Voto<\/h3>\n <p>Votare \u00e8 un <strong>diritto e un dovere<\/strong>. Quando voti, scegli chi prender\u00e0 le decisioni per tutti.<\/p>\n \n <p><strong>Quando si vota:<\/strong><\/p>\n <ul>\n <li><strong>Elezioni politiche<\/strong> = scegli il Parlamento (ogni 5 anni circa)<\/li>\n <li><strong>Elezioni regionali<\/strong> = scegli chi governa la tua regione<\/li>\n <li><strong>Elezioni comunali<\/strong> = scegli il sindaco della tua citt\u00e0<\/li>\n <li><strong>Referendum<\/strong> = decidi tu su una questione specifica<\/li>\n <\/ul>\n \n <div class=\"highlight-box warning\">\n <h4>⚠️ Importante!<\/h4>\n <p>Per votare devi avere 18 anni e la cittadinanza italiana. Il voto \u00e8 SEGRETO: nessuno pu\u00f2 sapere cosa hai votato!<\/p>\n <\/div>\n <\/div>\n <\/div>\n \n \n <div id=\"costituzione\" class=\"content-section\">\n <h2>📜 Gli Articoli della Costituzione<\/h2>\n <p>Clicca su ogni articolo per leggere cosa dice (in parole semplici)!<\/p>\n \n <div class=\"article-card\" onclick=\"toggleArticle(this)\">\n <span class=\"number\">Art. 1<\/span>\n <span class=\"title\">L’Italia \u00e8 una Repubblica fondata sul lavoro<\/span>\n <p class=\"text\">L’Italia \u00e8 una democrazia dove il potere appartiene al popolo. Il lavoro \u00e8 importante: non siamo fondati sulla ricchezza o sulla nascita, ma su quello che facciamo.<\/p>\n <\/div>\n \n <div class=\"article-card\" onclick=\"toggleArticle(this)\">\n <span class=\"number\">Art. 2<\/span>\n <span class=\"title\">Diritti inviolabili dell’uomo<\/span>\n <p class=\"text\">Tutti hanno dei diritti che nessuno pu\u00f2 togliere. Ma abbiamo anche dei doveri verso gli altri: dobbiamo essere solidali e aiutarci.<\/p>\n <\/div>\n \n <div class=\"article-card\" onclick=\"toggleArticle(this)\">\n <span class=\"number\">Art. 3<\/span>\n <span class=\"title\">Tutti i cittadini sono uguali<\/span>\n <p class=\"text\">Non importa se sei maschio o femmina, ricco o povero, di qualsiasi religione o idea politica. Davanti alla legge siamo tutti uguali. Lo Stato deve aiutare chi \u00e8 in difficolt\u00e0.<\/p>\n <\/div>\n \n <div class=\"article-card\" onclick=\"toggleArticle(this)\">\n <span class=\"number\">Art. 4<\/span>\n <span class=\"title\">Diritto al lavoro<\/span>\n <p class=\"text\">Tutti hanno diritto di lavorare. Lo Stato deve creare le condizioni perch\u00e9 tutti possano trovare un lavoro. Ma lavorare \u00e8 anche un dovere: ognuno deve fare la sua parte per il bene di tutti.<\/p>\n <\/div>\n \n <div class=\"article-card\" onclick=\"toggleArticle(this)\">\n <span class=\"number\">Art. 11<\/span>\n <span class=\"title\">L’Italia rifiuta la guerra<\/span>\n <p class=\"text\">L’Italia non usa la guerra per attaccare altri paesi o togliere loro la libert\u00e0. Accetta di limitare un po’ della sua libert\u00e0 per stare in pace con gli altri paesi (come l’Unione Europea).<\/p>\n <\/div>\n \n <div class=\"article-card\" onclick=\"toggleArticle(this)\">\n <span class=\"number\">Art. 21<\/span>\n <span class=\"title\">Libert\u00e0 di pensiero e parola<\/span>\n <p class=\"text\">Puoi pensare quello che vuoi e dirlo a tutti, con la parola, con gli scritti, o in qualsiasi modo. Nessuno pu\u00f2 censurarti (ma non puoi offendere o dire bugie sugli altri).<\/p>\n <\/div>\n \n <div class=\"article-card\" onclick=\"toggleArticle(this)\">\n <span class=\"number\">Art. 32<\/span>\n <span class=\"title\">Diritto alla salute<\/span>\n <p class=\"text\">La salute \u00e8 un diritto fondamentale. Lo Stato deve garantire cure gratuite a chi non pu\u00f2 permettersele. Nessuno pu\u00f2 obbligarti a curarti, tranne in casi particolari previsti dalla legge.<\/p>\n <\/div>\n \n <div class=\"article-card\" onclick=\"toggleArticle(this)\">\n <span class=\"number\">Art. 34<\/span>\n <span class=\"title\">Diritto all’istruzione<\/span>\n <p class=\"text\">La scuola \u00e8 aperta a tutti. L’istruzione di base \u00e8 obbligatoria e gratuita. Chi \u00e8 bravo e merita ha diritto di studiare anche se non ha soldi: lo Stato deve aiutarlo con borse di studio.<\/p>\n <\/div>\n <\/div>\n \n \n <div id=\"istituzioni\" class=\"content-section\">\n <h2>🏛️ Le Istituzioni Italiane<\/h2>\n <p>Clicca per scoprire cosa fa ogni istituzione!<\/p>\n \n <div class=\"institution-grid\">\n <div class=\"institution-card\" onclick=\"showInst('parlamento')\">\n <div class=\"icon\">🏛️<\/div>\n <h4>Parlamento<\/h4>\n <p>Fa le leggi<\/p>\n <\/div>\n <div class=\"institution-card\" onclick=\"showInst('governo')\">\n <div class=\"icon\">👔<\/div>\n <h4>Governo<\/h4>\n <p>Governa il Paese<\/p>\n <\/div>\n <div class=\"institution-card\" onclick=\"showInst('presidente')\">\n <div class=\"icon\">🎖️<\/div>\n <h4>Presidente<\/h4>\n <p>Rappresenta l’Italia<\/p>\n <\/div>\n <div class=\"institution-card\" onclick=\"showInst('magistratura')\">\n <div class=\"icon\">⚖️<\/div>\n <h4>Magistratura<\/h4>\n <p>Fa giustizia<\/p>\n <\/div>\n <div class=\"institution-card\" onclick=\"showInst('regione')\">\n <div class=\"icon\">🗺️<\/div>\n <h4>Regione<\/h4>\n <p>Governa la regione<\/p>\n <\/div>\n <div class=\"institution-card\" onclick=\"showInst('comune')\">\n <div class=\"icon\">🏘️<\/div>\n <h4>Comune<\/h4>\n <p>Governa la citt\u00e0<\/p>\n <\/div>\n <\/div>\n \n <div id=\"inst-info\" class=\"highlight-box info\" style=\"display: none;\">\n <h4 id=\"inst-title\"><\/h4>\n <div id=\"inst-content\"><\/div>\n <\/div>\n <\/div>\n \n \n <div id=\"voto\" class=\"content-section\">\n <h2>🗳️ Simulazione: Come si Vota<\/h2>\n <p>Proviamo insieme come funziona votare! Leggi i programmi e scegli.<\/p>\n \n <div class=\"voting-sim\">\n <h3 style=\"color: #ee0979; margin-bottom: 15px;\">Elezione del Rappresentante di Classe<\/h3>\n <p>Leggi cosa propone ogni candidato e scegli quello che ti convince di pi\u00f9:<\/p>\n \n <div class=\"candidate\" onclick=\"selectCandidate(this, 'marco')\">\n <span class=\"avatar\">👨‍🎓<\/span>\n <div class=\"info\">\n <h4>Marco Rossi<\/h4>\n <p>“Voglio creare un gruppo studio per aiutarci a vicenda e organizzare pi\u00f9 gite!”<\/p>\n <\/div>\n <\/div>\n \n <div class=\"candidate\" onclick=\"selectCandidate(this, 'sara')\">\n <span class=\"avatar\">👩‍🎓<\/span>\n <div class=\"info\">\n <h4>Sara Bianchi<\/h4>\n <p>“Propongo di migliorare la comunicazione con i prof e avere pi\u00f9 pause durante le lezioni lunghe.”<\/p>\n <\/div>\n <\/div>\n \n <div class=\"candidate\" onclick=\"selectCandidate(this, 'ali')\">\n <span class=\"avatar\">🧑‍🎓<\/span>\n <div class=\"info\">\n <h4>Ali Hassan<\/h4>\n <p>“Voglio che tutti si sentano inclusi e creare attivit\u00e0 che uniscano la classe.”<\/p>\n <\/div>\n <\/div>\n \n <div style=\"text-align: center; margin-top: 20px;\">\n <button class=\"btn btn-primary\" onclick=\"confermaVoto()\">🗳️ Conferma il Voto<\/button>\n <\/div>\n \n <div id=\"voto-result\" class=\"highlight-box tip\" style=\"display: none; margin-top: 20px;\">\n <h4>✅ Hai votato!<\/h4>\n <p id=\"voto-msg\"><\/p>\n <\/div>\n <\/div>\n \n <div class=\"highlight-box\">\n <h4>📝 Ricorda:<\/h4>\n <ul>\n <li>Il voto \u00e8 <strong>segreto<\/strong>: nessuno deve sapere chi hai votato<\/li>\n <li>Il voto \u00e8 <strong>libero<\/strong>: nessuno pu\u00f2 obbligarti a votare qualcuno<\/li>\n <li>Il voto \u00e8 <strong>uguale<\/strong>: il voto di tutti vale lo stesso<\/li>\n <li>Votare \u00e8 un <strong>diritto e un dovere<\/strong>!<\/li>\n <\/ul>\n <\/div>\n <\/div>\n \n \n <div id=\"quiz\" class=\"content-section\">\n <h2>❓ Quiz di Verifica<\/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>🎉 Quiz 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:#ee0979;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 function toggleArticle(el) {\n el.classList.toggle('open');\n }\n \n const institutions = {\n parlamento: { title: '🏛️ Parlamento', content: '<p><strong>Camera dei Deputati + Senato<\/strong><\/p><p>\u00c8 eletto dai cittadini. Fa le leggi, approva il bilancio dello Stato, d\u00e0 la fiducia al Governo. I membri si chiamano deputati e senatori.<\/p>' },\n governo: { title: '👔 Governo', content: '<p><strong>Presidente del Consiglio + Ministri<\/strong><\/p><p>Governa il Paese: applica le leggi, gestisce i servizi pubblici, prende decisioni quotidiane. Il capo si chiama Presidente del Consiglio (o Premier).<\/p>' },\n presidente: { title: '🎖️ Presidente della Repubblica', content: '<p>\u00c8 il capo dello Stato. Rappresenta l\\'unit\u00e0 nazionale, firma le leggi, nomina il Governo. \u00c8 eletto dal Parlamento e dura in carica 7 anni. Deve essere super partes (non fare politica di parte).<\/p>' },\n magistratura: { title: '⚖️ Magistratura', content: '<p>I giudici. Controllano che le leggi siano rispettate, giudicano chi le viola, proteggono i diritti dei cittadini. Sono indipendenti: nessuno pu\u00f2 dire loro cosa decidere.<\/p>' },\n regione: { title: '🗺️ Regione', content: '<p>Ogni regione ha un Presidente e un Consiglio eletti dai cittadini. Si occupa di sanit\u00e0, trasporti regionali, territorio. L\\'Italia ha 20 regioni.<\/p>' },\n comune: { title: '🏘️ Comune', content: '<p>Il Sindaco e il Consiglio comunale. Si occupano della citt\u00e0: strade, rifiuti, anagrafe, scuole. \u00c8 l\\'istituzione pi\u00f9 vicina ai cittadini!<\/p>' }\n };\n \n function showInst(key) {\n document.getElementById('inst-title').textContent = institutions[key].title;\n document.getElementById('inst-content').innerHTML = institutions[key].content;\n document.getElementById('inst-info').style.display = 'block';\n }\n \n let selectedCand = null;\n function selectCandidate(el, name) {\n document.querySelectorAll('.candidate').forEach(c => c.classList.remove('selected'));\n el.classList.add('selected');\n selectedCand = name;\n }\n \n function confermaVoto() {\n if (!selectedCand) { alert('Seleziona un candidato!'); return; }\n const msgs = {\n marco: 'Hai votato Marco! La sua idea di gruppo studio pu\u00f2 aiutare tutti.',\n sara: 'Hai votato Sara! Migliorare la comunicazione \u00e8 importante.',\n ali: 'Hai votato Ali! L\\'inclusione rende la classe pi\u00f9 forte.'\n };\n document.getElementById('voto-msg').textContent = msgs[selectedCand] + ' Ricorda: nelle elezioni vere il tuo voto \u00e8 segreto!';\n document.getElementById('voto-result').style.display = 'block';\n document.querySelectorAll('.candidate').forEach(c => c.style.pointerEvents = 'none');\n }\n \n const questions = [\n { q: \"Cos'\u00e8 la Costituzione?\", opts: [\"Un libro di storia\", \"La legge pi\u00f9 importante d'Italia\", \"Un partito politico\"], ans: 1 },\n { q: \"Chi fa le leggi in Italia?\", opts: [\"Il Presidente\", \"Il Parlamento\", \"I Carabinieri\"], ans: 1 },\n { q: \"A che et\u00e0 si pu\u00f2 votare?\", opts: [\"16 anni\", \"18 anni\", \"21 anni\"], ans: 1 },\n { q: \"Cosa dice l'articolo 3?\", opts: [\"L'Italia rifiuta la guerra\", \"Tutti sono uguali davanti alla legge\", \"La scuola \u00e8 obbligatoria\"], ans: 1 },\n { q: \"Chi \u00e8 il capo del Governo?\", opts: [\"Il Presidente della Repubblica\", \"Il Presidente del Consiglio\", \"Il Papa\"], ans: 1 }\n ];\n \n let 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 style=\"font-size:1.1em;margin-bottom:15px\">${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 3 – Educazione Civica | Autonomia Portami Via 📚 MODULO 3 – 14 ORE 🏛️ Educazione Civica Conosci i tuoi diritti e doveri di cittadino! 📖 Dispensa 📜 Costituzione 🏛️ Istituzioni 🗳️ Simula il Voto ❓ Quiz 🎯 Cosa imparerai In questo modulo scoprirai come funziona l’Italia, quali sono i tuoi diritti e cosa … <a title=\"Educazione Civica\" class=\"read-more\" href=\"https:\/\/studikis.it\/?p=51\" aria-label=\"Read more about Educazione Civica\">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-51","post","type-post","status-publish","format-standard","hentry","category-corsimarzogiugno26"],"_links":{"self":[{"href":"https:\/\/studikis.it\/index.php?rest_route=\/wp\/v2\/posts\/51","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=51"}],"version-history":[{"count":1,"href":"https:\/\/studikis.it\/index.php?rest_route=\/wp\/v2\/posts\/51\/revisions"}],"predecessor-version":[{"id":52,"href":"https:\/\/studikis.it\/index.php?rest_route=\/wp\/v2\/posts\/51\/revisions\/52"}],"wp:attachment":[{"href":"https:\/\/studikis.it\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=51"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/studikis.it\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=51"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/studikis.it\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=51"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}