Modulo 1 – Educazione Finanziaria | Autonomia Portami Via<\/title>\n <style>\n * {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n }\n \n body {\n font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;\n background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);\n min-height: 100vh;\n padding: 20px;\n line-height: 1.6;\n }\n \n .container {\n max-width: 900px;\n margin: 0 auto;\n }\n \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 \n .header h1 {\n color: #667eea;\n font-size: 2em;\n margin-bottom: 10px;\n }\n \n .header .subtitle {\n color: #666;\n font-size: 1.1em;\n }\n \n .module-badge {\n display: inline-block;\n background: linear-gradient(135deg, #667eea, #764ba2);\n color: white;\n padding: 8px 20px;\n border-radius: 20px;\n font-weight: bold;\n margin-bottom: 15px;\n }\n \n .tabs {\n display: flex;\n gap: 10px;\n margin-bottom: 20px;\n flex-wrap: wrap;\n }\n \n .tab {\n flex: 1;\n min-width: 150px;\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: #667eea;\n transition: all 0.3s;\n box-shadow: 0 4px 15px rgba(0,0,0,0.1);\n }\n \n .tab:hover {\n transform: translateY(-3px);\n box-shadow: 0 6px 20px rgba(0,0,0,0.15);\n }\n \n .tab.active {\n background: linear-gradient(135deg, #667eea, #764ba2);\n color: white;\n }\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 \n .content-section.active {\n display: block;\n animation: fadeIn 0.5s ease;\n }\n \n @keyframes fadeIn {\n from { opacity: 0; transform: translateY(20px); }\n to { opacity: 1; transform: translateY(0); }\n }\n \n .lesson-card {\n background: #f8f9ff;\n border-radius: 15px;\n padding: 25px;\n margin-bottom: 20px;\n border-left: 5px solid #667eea;\n }\n \n .lesson-card h3 {\n color: #667eea;\n margin-bottom: 15px;\n display: flex;\n align-items: center;\n gap: 10px;\n }\n \n .lesson-card h3 .icon {\n font-size: 1.5em;\n }\n \n .lesson-card p {\n color: #444;\n margin-bottom: 10px;\n }\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 \n .highlight-box.tip {\n background: linear-gradient(135deg, #d4edda, #c3e6cb);\n border-left-color: #28a745;\n }\n \n .highlight-box.warning {\n background: linear-gradient(135deg, #f8d7da, #f5c6cb);\n border-left-color: #dc3545;\n }\n \n .highlight-box h4 {\n margin-bottom: 10px;\n display: flex;\n align-items: center;\n gap: 8px;\n }\n \n \/* BUDGET SIMULATOR *\/\n .budget-simulator {\n background: #f0f4ff;\n border-radius: 15px;\n padding: 25px;\n margin: 20px 0;\n }\n \n .budget-header {\n display: flex;\n justify-content: space-between;\n align-items: center;\n margin-bottom: 20px;\n flex-wrap: wrap;\n gap: 10px;\n }\n \n .budget-total {\n font-size: 2em;\n font-weight: bold;\n color: #667eea;\n }\n \n .budget-remaining {\n font-size: 1.5em;\n padding: 10px 20px;\n border-radius: 10px;\n font-weight: bold;\n }\n \n .budget-remaining.positive {\n background: #d4edda;\n color: #155724;\n }\n \n .budget-remaining.negative {\n background: #f8d7da;\n color: #721c24;\n }\n \n .expense-category {\n background: white;\n border-radius: 10px;\n padding: 15px;\n margin-bottom: 10px;\n display: flex;\n justify-content: space-between;\n align-items: center;\n flex-wrap: wrap;\n gap: 10px;\n }\n \n .expense-category label {\n font-weight: bold;\n color: #333;\n display: flex;\n align-items: center;\n gap: 10px;\n }\n \n .expense-category input {\n width: 100px;\n padding: 10px;\n border: 2px solid #ddd;\n border-radius: 8px;\n font-size: 1em;\n text-align: center;\n }\n \n .expense-category input:focus {\n border-color: #667eea;\n outline: none;\n }\n \n \/* QUIZ STYLES *\/\n .quiz-question {\n background: #f8f9ff;\n border-radius: 15px;\n padding: 25px;\n margin-bottom: 20px;\n }\n \n .quiz-question h4 {\n color: #667eea;\n margin-bottom: 15px;\n font-size: 1.2em;\n }\n \n .quiz-options {\n display: grid;\n gap: 10px;\n }\n \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 display: flex;\n align-items: center;\n gap: 10px;\n }\n \n .quiz-option:hover {\n border-color: #667eea;\n transform: translateX(5px);\n }\n \n .quiz-option.selected {\n border-color: #667eea;\n background: #f0f4ff;\n }\n \n .quiz-option.correct {\n border-color: #28a745;\n background: #d4edda;\n }\n \n .quiz-option.wrong {\n border-color: #dc3545;\n background: #f8d7da;\n }\n \n .quiz-feedback {\n margin-top: 15px;\n padding: 15px;\n border-radius: 10px;\n display: none;\n }\n \n .quiz-feedback.show {\n display: block;\n animation: fadeIn 0.3s ease;\n }\n \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 \n .btn-primary {\n background: linear-gradient(135deg, #667eea, #764ba2);\n color: white;\n }\n \n .btn-primary:hover {\n transform: translateY(-2px);\n box-shadow: 0 5px 20px rgba(102, 126, 234, 0.4);\n }\n \n .btn-success {\n background: #28a745;\n color: white;\n }\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 \n .progress-fill {\n height: 100%;\n background: linear-gradient(90deg, #667eea, #764ba2);\n border-radius: 5px;\n transition: width 0.5s ease;\n }\n \n .score-display {\n text-align: center;\n padding: 30px;\n background: linear-gradient(135deg, #667eea, #764ba2);\n border-radius: 15px;\n color: white;\n margin-top: 20px;\n }\n \n .score-display h3 {\n font-size: 2em;\n margin-bottom: 10px;\n }\n \n \/* DRAG AND DROP *\/\n .drag-container {\n display: flex;\n gap: 20px;\n flex-wrap: wrap;\n margin: 20px 0;\n }\n \n .drag-zone {\n flex: 1;\n min-width: 250px;\n min-height: 200px;\n background: #f0f4ff;\n border: 3px dashed #667eea;\n border-radius: 15px;\n padding: 15px;\n }\n \n .drag-zone h4 {\n text-align: center;\n color: #667eea;\n margin-bottom: 15px;\n padding-bottom: 10px;\n border-bottom: 2px solid #667eea;\n }\n \n .drag-item {\n background: white;\n padding: 12px 15px;\n border-radius: 8px;\n margin-bottom: 8px;\n cursor: grab;\n box-shadow: 0 2px 5px rgba(0,0,0,0.1);\n transition: all 0.3s;\n border-left: 4px solid #667eea;\n }\n \n .drag-item:hover {\n transform: scale(1.02);\n box-shadow: 0 4px 10px rgba(0,0,0,0.15);\n }\n \n .drag-item.dragging {\n opacity: 0.5;\n cursor: grabbing;\n }\n \n .drag-zone.drag-over {\n background: #e0e7ff;\n border-style: solid;\n }\n \n \/* CALCULATOR *\/\n .calculator-box {\n background: linear-gradient(135deg, #f0f4ff, #e8ecff);\n border-radius: 15px;\n padding: 25px;\n margin: 20px 0;\n }\n \n .calc-row {\n display: flex;\n gap: 15px;\n margin-bottom: 15px;\n align-items: center;\n flex-wrap: wrap;\n }\n \n .calc-row label {\n min-width: 150px;\n font-weight: bold;\n }\n \n .calc-row input {\n flex: 1;\n min-width: 120px;\n padding: 12px;\n border: 2px solid #ddd;\n border-radius: 8px;\n font-size: 1em;\n }\n \n .calc-result {\n background: white;\n border-radius: 10px;\n padding: 20px;\n text-align: center;\n margin-top: 20px;\n }\n \n .calc-result .big-number {\n font-size: 2.5em;\n font-weight: bold;\n color: #667eea;\n }\n \n \/* FLASHCARDS *\/\n .flashcard-container {\n perspective: 1000px;\n margin: 20px 0;\n }\n \n .flashcard {\n width: 100%;\n height: 200px;\n position: relative;\n transform-style: preserve-3d;\n transition: transform 0.6s;\n cursor: pointer;\n }\n \n .flashcard.flipped {\n transform: rotateY(180deg);\n }\n \n .flashcard-front, .flashcard-back {\n position: absolute;\n width: 100%;\n height: 100%;\n backface-visibility: hidden;\n border-radius: 15px;\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 20px;\n text-align: center;\n }\n \n .flashcard-front {\n background: linear-gradient(135deg, #667eea, #764ba2);\n color: white;\n font-size: 1.3em;\n font-weight: bold;\n }\n \n .flashcard-back {\n background: white;\n border: 3px solid #667eea;\n transform: rotateY(180deg);\n color: #333;\n }\n \n .flashcard-nav {\n display: flex;\n justify-content: center;\n gap: 15px;\n margin-top: 15px;\n }\n \n .nav-btn {\n padding: 10px 20px;\n background: #f0f4ff;\n border: 2px solid #667eea;\n border-radius: 8px;\n cursor: pointer;\n font-weight: bold;\n color: #667eea;\n transition: all 0.3s;\n }\n \n .nav-btn:hover {\n background: #667eea;\n color: white;\n }\n \n .card-counter {\n text-align: center;\n margin-top: 10px;\n color: #666;\n }\n \n \/* RESPONSIVE *\/\n @media (max-width: 600px) {\n .header h1 {\n font-size: 1.5em;\n }\n \n .tab {\n min-width: 100%;\n }\n \n .budget-header {\n flex-direction: column;\n text-align: center;\n }\n }\n \n .emoji-big {\n font-size: 3em;\n display: block;\n text-align: center;\n margin: 20px 0;\n }\n \n ul, ol {\n margin-left: 25px;\n margin-bottom: 15px;\n }\n \n li {\n margin-bottom: 8px;\n }\n \n h2 {\n color: #667eea;\n margin: 25px 0 15px 0;\n padding-bottom: 10px;\n border-bottom: 2px solid #e0e0e0;\n }\n <\/style>\n<\/head>\n<body>\n <div class=\"container\">\n <div class=\"header\">\n <div class=\"module-badge\">📚 MODULO 1 – 14 ORE<\/div>\n <h1>💰 Educazione Finanziaria<\/h1>\n <p class=\"subtitle\">Impara a gestire i tuoi soldi in modo intelligente!<\/p>\n <\/div>\n \n <div class=\"tabs\">\n <button class=\"tab active\" onclick=\"showSection('dispensa')\">📖 Dispensa<\/button>\n <button class=\"tab\" onclick=\"showSection('budget')\">🧮 Simulatore Budget<\/button>\n <button class=\"tab\" onclick=\"showSection('gioco')\">🎯 Bisogni vs Desideri<\/button>\n <button class=\"tab\" onclick=\"showSection('quiz')\">❓ Quiz<\/button>\n <button class=\"tab\" onclick=\"showSection('flashcard')\">🎴 Flashcard<\/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 il denaro e come usarlo bene. \u00c8 un po’ come imparare a guidare una bicicletta: all’inizio sembra difficile, ma poi diventa naturale!<\/p>\n \n <div class=\"lesson-card\">\n <h3><span class=\"icon\">💵<\/span> Il valore del denaro<\/h3>\n <p><strong>Cos’\u00e8 il denaro?<\/strong> Il denaro \u00e8 uno strumento che usiamo per scambiare cose. Tanto tempo fa, le persone scambiavano direttamente oggetti (per esempio, due galline per un sacco di grano). Oggi usiamo i soldi perch\u00e9 \u00e8 pi\u00f9 semplice.<\/p>\n \n <div class=\"highlight-box tip\">\n <h4>💡 Ricorda<\/h4>\n <p>I soldi non crescono sugli alberi! Arrivano dal lavoro o da chi si prende cura di noi. Per questo \u00e8 importante usarli con attenzione.<\/p>\n <\/div>\n \n <p><strong>Entrate e uscite:<\/strong><\/p>\n <ul>\n <li><strong>Entrate<\/strong> = soldi che arrivano (stipendio, paghetta, regali)<\/li>\n <li><strong>Uscite<\/strong> = soldi che escono (spese, acquisti, bollette)<\/li>\n <\/ul>\n <p>Se le uscite sono pi\u00f9 delle entrate, hai un problema! \u00c8 come una vasca da bagno: se esce pi\u00f9 acqua di quella che entra, prima o poi si svuota.<\/p>\n <\/div>\n \n <div class=\"lesson-card\">\n <h3><span class=\"icon\">📊<\/span> Il Budget Personale<\/h3>\n <p><strong>Cos’\u00e8 un budget?<\/strong> \u00c8 un piano per i tuoi soldi. Ti aiuta a capire quanto puoi spendere senza restare senza niente.<\/p>\n \n <p><strong>Come fare un budget semplice:<\/strong><\/p>\n <ol>\n <li>Scrivi quanto denaro hai (o ricevi al mese)<\/li>\n <li>Fai una lista delle spese che DEVI fare (cibo, trasporti, telefono)<\/li>\n <li>Sottrai le spese obbligatorie<\/li>\n <li>Quello che resta puoi usarlo per altro o risparmiarlo!<\/li>\n <\/ol>\n \n <div class=\"highlight-box\">\n <h4>📌 La regola del 50-30-20<\/h4>\n <p>Un modo semplice per dividere i soldi:<\/p>\n <ul>\n <li><strong>50%<\/strong> per le cose necessarie (affitto, cibo, bollette)<\/li>\n <li><strong>30%<\/strong> per le cose che ti piacciono (uscite, hobby)<\/li>\n <li><strong>20%<\/strong> da mettere da parte (risparmio)<\/li>\n <\/ul>\n <\/div>\n <\/div>\n \n <div class=\"lesson-card\">\n <h3><span class=\"icon\">🐷<\/span> Risparmiare<\/h3>\n <p><strong>Perch\u00e9 risparmiare?<\/strong> Per avere soldi quando ne hai bisogno! Pu\u00f2 servire per:<\/p>\n <ul>\n <li>Un’emergenza (si rompe il telefono, devi andare dal dottore)<\/li>\n <li>Qualcosa di grande che desideri (viaggio, corso, motorino)<\/li>\n <li>Stare tranquillo e non avere paura del futuro<\/li>\n <\/ul>\n \n <div class=\"highlight-box tip\">\n <h4>🎯 Trucco per risparmiare<\/h4>\n <p>Appena ricevi i soldi, metti SUBITO da parte la parte per il risparmio. Se aspetti la fine del mese, non rester\u00e0 niente!<\/p>\n <\/div>\n <\/div>\n \n <div class=\"lesson-card\">\n <h3><span class=\"icon\">🏦<\/span> La Banca<\/h3>\n <p><strong>Cos’\u00e8 una banca?<\/strong> \u00c8 un posto sicuro dove tenere i soldi. La banca ti d\u00e0 una <strong>carta<\/strong> per usarli e un <strong>conto<\/strong> dove puoi vedere quanto hai.<\/p>\n \n <p><strong>Tipi di carta:<\/strong><\/p>\n <ul>\n <li><strong>Carta di debito<\/strong> = spendi i soldi che hai sul conto (come usare contanti)<\/li>\n <li><strong>Carta di credito<\/strong> = la banca ti presta i soldi, ma poi devi restituirli (attenzione!)<\/li>\n <li><strong>Carta prepagata<\/strong> = puoi spendere solo quello che hai caricato<\/li>\n <\/ul>\n \n <div class=\"highlight-box warning\">\n <h4>⚠️ Attenzione<\/h4>\n <p>La carta di credito NON \u00e8 denaro gratis! Quello che spendi lo devi restituire, spesso con gli interessi (cio\u00e8 paghi di pi\u00f9).<\/p>\n <\/div>\n <\/div>\n \n <div class=\"lesson-card\">\n <h3><span class=\"icon\">🚨<\/span> Truffe e Pericoli<\/h3>\n <p><strong>Come riconoscere una truffa?<\/strong><\/p>\n <ul>\n <li>Ti promettono soldi facili e veloci<\/li>\n <li>Ti mettono fretta (“decidi SUBITO!”)<\/li>\n <li>Ti chiedono i codici della carta o le password<\/li>\n <li>Arrivano messaggi strani dalla “banca” con link<\/li>\n <\/ul>\n \n <div class=\"highlight-box warning\">\n <h4>🛡️ Regola d’oro<\/h4>\n <p>La banca NON ti chieder\u00e0 MAI le tue password o i codici per email o telefono. Se qualcuno lo fa, \u00e8 una truffa!<\/p>\n <\/div>\n \n <p><strong>Cosa evitare:<\/strong><\/p>\n <ul>\n <li><strong>Prestiti da sconosciuti<\/strong> = possono essere usurai (interessi altissimi e illegali)<\/li>\n <li><strong>Gioco d’azzardo<\/strong> = sembra un modo per fare soldi, ma perdi quasi sempre<\/li>\n <li><strong>Investimenti miracolosi<\/strong> = se sembra troppo bello per essere vero, probabilmente \u00e8 una truffa<\/li>\n <\/ul>\n <\/div>\n \n <div class=\"emoji-big\">🎓<\/div>\n <p style=\"text-align: center; font-size: 1.2em; color: #667eea;\"><strong>Ora sei pronto per le attivit\u00e0 pratiche!<\/strong><\/p>\n <\/div>\n \n \n <div id=\"budget\" class=\"content-section\">\n <h2>🧮 Simulatore Budget Mensile<\/h2>\n <p>Immagina di avere 500\u20ac al mese. Prova a gestirli!<\/p>\n \n <div class=\"budget-simulator\">\n <div class=\"budget-header\">\n <div class=\"budget-total\">💰 Budget: \u20ac500<\/div>\n <div id=\"budget-remaining\" class=\"budget-remaining positive\">Rimangono: \u20ac500<\/div>\n <\/div>\n \n <div class=\"expense-category\">\n <label>🏠 Contributo casa\/affitto<\/label>\n <input type=\"number\" id=\"exp-casa\" value=\"0\" min=\"0\" max=\"500\" onchange=\"calcolaBudget()\">\n <\/div>\n \n <div class=\"expense-category\">\n <label>🍕 Cibo e spesa<\/label>\n <input type=\"number\" id=\"exp-cibo\" value=\"0\" min=\"0\" max=\"500\" onchange=\"calcolaBudget()\">\n <\/div>\n \n <div class=\"expense-category\">\n <label>🚌 Trasporti (bus, metro)<\/label>\n <input type=\"number\" id=\"exp-trasporti\" value=\"0\" min=\"0\" max=\"500\" onchange=\"calcolaBudget()\">\n <\/div>\n \n <div class=\"expense-category\">\n <label>📱 Telefono<\/label>\n <input type=\"number\" id=\"exp-telefono\" value=\"0\" min=\"0\" max=\"500\" onchange=\"calcolaBudget()\">\n <\/div>\n \n <div class=\"expense-category\">\n <label>🎉 Uscite e divertimento<\/label>\n <input type=\"number\" id=\"exp-uscite\" value=\"0\" min=\"0\" max=\"500\" onchange=\"calcolaBudget()\">\n <\/div>\n \n <div class=\"expense-category\">\n <label>👕 Vestiti<\/label>\n <input type=\"number\" id=\"exp-vestiti\" value=\"0\" min=\"0\" max=\"500\" onchange=\"calcolaBudget()\">\n <\/div>\n \n <div class=\"expense-category\">\n <label>🐷 Risparmio<\/label>\n <input type=\"number\" id=\"exp-risparmio\" value=\"0\" min=\"0\" max=\"500\" onchange=\"calcolaBudget()\">\n <\/div>\n <\/div>\n \n <div id=\"budget-feedback\" class=\"highlight-box\" style=\"display: none;\"><\/div>\n \n <div style=\"text-align: center; margin-top: 20px;\">\n <button class=\"btn btn-primary\" onclick=\"suggerisciBudget()\">💡 Suggeriscimi un budget<\/button>\n <\/div>\n <\/div>\n \n \n <div id=\"gioco\" class=\"content-section\">\n <h2>🎯 Bisogni vs Desideri<\/h2>\n <p>Trascina ogni oggetto nella categoria giusta. I <strong>bisogni<\/strong> sono cose di cui hai BISOGNO per vivere. I <strong>desideri<\/strong> sono cose che vorresti avere ma puoi vivere senza.<\/p>\n \n <div class=\"drag-container\">\n <div class=\"drag-zone\" id=\"zone-items\">\n <h4>📦 Oggetti<\/h4>\n <div class=\"drag-item\" draggable=\"true\" data-type=\"bisogno\">🍞 Pane e cibo<\/div>\n <div class=\"drag-item\" draggable=\"true\" data-type=\"desiderio\">🎮 PlayStation 5<\/div>\n <div class=\"drag-item\" draggable=\"true\" data-type=\"bisogno\">💊 Medicine<\/div>\n <div class=\"drag-item\" draggable=\"true\" data-type=\"desiderio\">👟 Scarpe di marca<\/div>\n <div class=\"drag-item\" draggable=\"true\" data-type=\"bisogno\">🚌 Abbonamento bus<\/div>\n <div class=\"drag-item\" draggable=\"true\" data-type=\"desiderio\">📱 Ultimo iPhone<\/div>\n <div class=\"drag-item\" draggable=\"true\" data-type=\"bisogno\">💡 Bolletta luce<\/div>\n <div class=\"drag-item\" draggable=\"true\" data-type=\"desiderio\">🎧 Cuffie wireless<\/div>\n <div class=\"drag-item\" draggable=\"true\" data-type=\"bisogno\">🏠 Affitto<\/div>\n <div class=\"drag-item\" draggable=\"true\" data-type=\"desiderio\">☕ Caff\u00e8 al bar ogni giorno<\/div>\n <\/div>\n \n <div class=\"drag-zone\" id=\"zone-bisogni\">\n <h4>✅ BISOGNI<\/h4>\n <\/div>\n \n <div class=\"drag-zone\" id=\"zone-desideri\">\n <h4>💭 DESIDERI<\/h4>\n <\/div>\n <\/div>\n \n <div style=\"text-align: center; margin-top: 20px;\">\n <button class=\"btn btn-primary\" onclick=\"verificaDragDrop()\">✔️ Verifica<\/button>\n <button class=\"btn nav-btn\" onclick=\"resetDragDrop()\">🔄 Ricomincia<\/button>\n <\/div>\n \n <div id=\"drag-feedback\" class=\"highlight-box\" style=\"display: none; margin-top: 20px;\"><\/div>\n <\/div>\n \n \n <div id=\"quiz\" class=\"content-section\">\n <h2>❓ Quiz di Verifica<\/h2>\n <p>Metti alla prova quello che hai imparato!<\/p>\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\">\n \n <\/div>\n \n <div id=\"quiz-result\" class=\"score-display\" style=\"display: none;\">\n <h3>🎉 Quiz completato!<\/h3>\n <p>Hai risposto correttamente a <span id=\"score\">0<\/span> domande su <span id=\"total\">5<\/span><\/p>\n <button class=\"btn btn-primary\" onclick=\"resetQuiz()\" style=\"margin-top: 15px;\">🔄 Rifai il quiz<\/button>\n <\/div>\n <\/div>\n \n \n <div id=\"flashcard\" class=\"content-section\">\n <h2>🎴 Flashcard – Parole Importanti<\/h2>\n <p>Clicca sulla carta per vedere la definizione. Impara queste parole!<\/p>\n \n <div class=\"flashcard-container\">\n <div class=\"flashcard\" id=\"flashcard-card\" onclick=\"flipCard()\">\n <div class=\"flashcard-front\">\n <span id=\"flashcard-term\">Budget<\/span>\n <\/div>\n <div class=\"flashcard-back\">\n <span id=\"flashcard-def\">Un piano che ti aiuta a decidere come spendere i tuoi soldi. \u00c8 come una mappa per i tuoi soldi!<\/span>\n <\/div>\n <\/div>\n <\/div>\n \n <div class=\"card-counter\">\n Carta <span id=\"current-card\">1<\/span> di <span id=\"total-cards\">8<\/span>\n <\/div>\n \n <div class=\"flashcard-nav\">\n <button class=\"nav-btn\" onclick=\"prevCard()\">⬅️ Precedente<\/button>\n <button class=\"nav-btn\" onclick=\"nextCard()\">Successiva ➡️<\/button>\n <\/div>\n <\/div>\n <\/div>\n \n <script>\n \/\/ Tab navigation\n function showSection(sectionId) {\n document.querySelectorAll('.content-section').forEach(s => s.classList.remove('active'));\n document.querySelectorAll('.tab').forEach(t => t.classList.remove('active'));\n document.getElementById(sectionId).classList.add('active');\n event.target.classList.add('active');\n }\n \n \/\/ Budget Calculator\n function calcolaBudget() {\n const budget = 500;\n const casa = parseInt(document.getElementById('exp-casa').value) || 0;\n const cibo = parseInt(document.getElementById('exp-cibo').value) || 0;\n const trasporti = parseInt(document.getElementById('exp-trasporti').value) || 0;\n const telefono = parseInt(document.getElementById('exp-telefono').value) || 0;\n const uscite = parseInt(document.getElementById('exp-uscite').value) || 0;\n const vestiti = parseInt(document.getElementById('exp-vestiti').value) || 0;\n const risparmio = parseInt(document.getElementById('exp-risparmio').value) || 0;\n \n const totaleSpese = casa + cibo + trasporti + telefono + uscite + vestiti + risparmio;\n const rimanente = budget - totaleSpese;\n \n const remainingEl = document.getElementById('budget-remaining');\n remainingEl.textContent = `Rimangono: \u20ac${rimanente}`;\n remainingEl.className = 'budget-remaining ' + (rimanente >= 0 ? 'positive' : 'negative');\n \n const feedbackEl = document.getElementById('budget-feedback');\n if (rimanente < 0) {\n feedbackEl.innerHTML = '<h4>⚠️ Attenzione!<\/h4><p>Stai spendendo pi\u00f9 di quello che hai! Devi ridurre qualche spesa.<\/p>';\n feedbackEl.className = 'highlight-box warning';\n feedbackEl.style.display = 'block';\n } else if (risparmio >= 100) {\n feedbackEl.innerHTML = '<h4>🎉 Ottimo!<\/h4><p>Stai risparmiando bene! Il 20% o pi\u00f9 \u00e8 perfetto.<\/p>';\n feedbackEl.className = 'highlight-box tip';\n feedbackEl.style.display = 'block';\n } else if (risparmio > 0) {\n feedbackEl.innerHTML = '<h4>👍 Bene!<\/h4><p>Stai risparmiando qualcosa. Prova ad arrivare a \u20ac100 (20% del budget)!<\/p>';\n feedbackEl.className = 'highlight-box';\n feedbackEl.style.display = 'block';\n } else if (rimanente === 0) {\n feedbackEl.innerHTML = '<h4>⚠️ Attenzione!<\/h4><p>Hai usato tutto! Non hai messo niente da parte per il risparmio o le emergenze.<\/p>';\n feedbackEl.className = 'highlight-box warning';\n feedbackEl.style.display = 'block';\n } else {\n feedbackEl.style.display = 'none';\n }\n }\n \n function suggerisciBudget() {\n document.getElementById('exp-casa').value = 150;\n document.getElementById('exp-cibo').value = 120;\n document.getElementById('exp-trasporti').value = 35;\n document.getElementById('exp-telefono').value = 15;\n document.getElementById('exp-uscite').value = 60;\n document.getElementById('exp-vestiti').value = 20;\n document.getElementById('exp-risparmio').value = 100;\n calcolaBudget();\n }\n \n \/\/ Drag and Drop\n let draggedItem = null;\n \n document.querySelectorAll('.drag-item').forEach(item => {\n item.addEventListener('dragstart', function(e) {\n draggedItem = this;\n this.classList.add('dragging');\n });\n \n item.addEventListener('dragend', function() {\n this.classList.remove('dragging');\n });\n });\n \n document.querySelectorAll('.drag-zone').forEach(zone => {\n zone.addEventListener('dragover', function(e) {\n e.preventDefault();\n this.classList.add('drag-over');\n });\n \n zone.addEventListener('dragleave', function() {\n this.classList.remove('drag-over');\n });\n \n zone.addEventListener('drop', function(e) {\n e.preventDefault();\n this.classList.remove('drag-over');\n if (draggedItem && this.id !== 'zone-items') {\n this.appendChild(draggedItem);\n }\n });\n });\n \n function verificaDragDrop() {\n const bisogniZone = document.getElementById('zone-bisogni');\n const desideriZone = document.getElementById('zone-desideri');\n let correct = 0;\n let total = 0;\n \n bisogniZone.querySelectorAll('.drag-item').forEach(item => {\n total++;\n if (item.dataset.type === 'bisogno') {\n item.style.background = '#d4edda';\n correct++;\n } else {\n item.style.background = '#f8d7da';\n }\n });\n \n desideriZone.querySelectorAll('.drag-item').forEach(item => {\n total++;\n if (item.dataset.type === 'desiderio') {\n item.style.background = '#d4edda';\n correct++;\n } else {\n item.style.background = '#f8d7da';\n }\n });\n \n const feedback = document.getElementById('drag-feedback');\n if (total === 0) {\n feedback.innerHTML = '<h4>🤔 Nessun oggetto!<\/h4><p>Trascina gli oggetti nelle zone giuste prima di verificare.<\/p>';\n feedback.className = 'highlight-box';\n } else if (correct === total) {\n feedback.innerHTML = '<h4>🎉 Perfetto!<\/h4><p>Hai classificato tutto correttamente! Hai capito la differenza tra bisogni e desideri.<\/p>';\n feedback.className = 'highlight-box tip';\n } else {\n feedback.innerHTML = `<h4>👍 Ci sei quasi!<\/h4><p>Hai indovinato ${correct} su ${total}. Gli elementi in rosso sono sbagliati.<\/p>`;\n feedback.className = 'highlight-box';\n }\n feedback.style.display = 'block';\n }\n \n function resetDragDrop() {\n const itemsZone = document.getElementById('zone-items');\n document.querySelectorAll('.drag-item').forEach(item => {\n item.style.background = 'white';\n itemsZone.appendChild(item);\n });\n document.getElementById('drag-feedback').style.display = 'none';\n }\n \n \/\/ Quiz\n const quizQuestions = [\n {\n question: \"Cos'\u00e8 un budget?\",\n options: [\n \"Un tipo di carta di credito\",\n \"Un piano per gestire i soldi\",\n \"Un conto in banca\",\n \"Un prestito\"\n ],\n correct: 1,\n explanation: \"Il budget \u00e8 un piano che ti aiuta a decidere come usare i tuoi soldi!\"\n },\n {\n question: \"Qual \u00e8 la differenza tra carta di debito e carta di credito?\",\n options: [\n \"Nessuna differenza\",\n \"La carta di debito usa i tuoi soldi, la carta di credito usa soldi prestati\",\n \"La carta di credito \u00e8 gratuita\",\n \"La carta di debito si usa solo online\"\n ],\n correct: 1,\n explanation: \"Con la carta di debito spendi i TUOI soldi. Con la carta di credito la banca ti presta i soldi e poi devi restituirli!\"\n },\n {\n question: \"Nella regola 50-30-20, quanto dovresti risparmiare?\",\n options: [\n \"50%\",\n \"30%\",\n \"20%\",\n \"10%\"\n ],\n correct: 2,\n explanation: \"La regola suggerisce di risparmiare il 20% dei tuoi soldi!\"\n },\n {\n question: \"Quale di questi \u00e8 un BISOGNO e non un desiderio?\",\n options: [\n \"L'ultimo modello di smartphone\",\n \"Scarpe firmate\",\n \"Cibo per mangiare\",\n \"Abbonamento Netflix\"\n ],\n correct: 2,\n explanation: \"Il cibo \u00e8 un bisogno essenziale per vivere. Gli altri sono desideri: puoi vivere senza!\"\n },\n {\n question: \"La banca ti manda un messaggio che chiede la tua password. Cosa fai?\",\n options: [\n \"La invio subito\",\n \"Chiamo il numero nel messaggio\",\n \"Non rispondo, \u00e8 sicuramente una truffa\",\n \"La invio ma poi cambio password\"\n ],\n correct: 2,\n explanation: \"Le banche NON chiedono MAI password per messaggio o email. \u00c8 sempre una truffa!\"\n }\n ];\n \n let currentQuestion = 0;\n let score = 0;\n let answered = [];\n \n function loadQuiz() {\n const container = document.getElementById('quiz-container');\n container.innerHTML = '';\n \n quizQuestions.forEach((q, index) => {\n const questionDiv = document.createElement('div');\n questionDiv.className = 'quiz-question';\n questionDiv.id = `question-${index}`;\n questionDiv.style.display = index === 0 ? 'block' : 'none';\n \n let optionsHTML = q.options.map((opt, i) => \n `<div class=\"quiz-option\" onclick=\"selectOption(${index}, ${i})\">${opt}<\/div>`\n ).join('');\n \n questionDiv.innerHTML = `\n <h4>Domanda ${index + 1} di ${quizQuestions.length}<\/h4>\n <p style=\"font-size: 1.1em; margin-bottom: 15px;\">${q.question}<\/p>\n <div class=\"quiz-options\">${optionsHTML}<\/div>\n <div class=\"quiz-feedback\" id=\"feedback-${index}\"><\/div>\n <button class=\"btn btn-primary\" id=\"next-${index}\" style=\"display: none; margin-top: 15px;\" onclick=\"nextQuestion(${index})\">\n ${index === quizQuestions.length - 1 ? 'Vedi risultato' : 'Prossima domanda'} ➡️\n <\/button>\n `;\n \n container.appendChild(questionDiv);\n });\n \n updateProgress();\n }\n \n function selectOption(qIndex, optIndex) {\n if (answered[qIndex] !== undefined) return;\n \n answered[qIndex] = optIndex;\n const question = quizQuestions[qIndex];\n const options = document.querySelectorAll(`#question-${qIndex} .quiz-option`);\n \n options.forEach((opt, i) => {\n opt.style.pointerEvents = 'none';\n if (i === question.correct) {\n opt.classList.add('correct');\n } else if (i === optIndex) {\n opt.classList.add('wrong');\n }\n });\n \n if (optIndex === question.correct) {\n score++;\n }\n \n const feedback = document.getElementById(`feedback-${qIndex}`);\n feedback.innerHTML = optIndex === question.correct \n ? `<p style=\"color: #155724;\">✅ Corretto! ${question.explanation}<\/p>`\n : `<p style=\"color: #721c24;\">❌ Sbagliato. ${question.explanation}<\/p>`;\n feedback.className = 'quiz-feedback show';\n feedback.style.background = optIndex === question.correct ? '#d4edda' : '#f8d7da';\n \n document.getElementById(`next-${qIndex}`).style.display = 'inline-block';\n updateProgress();\n }\n \n function nextQuestion(currentIndex) {\n document.getElementById(`question-${currentIndex}`).style.display = 'none';\n \n if (currentIndex < quizQuestions.length - 1) {\n document.getElementById(`question-${currentIndex + 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 = score;\n document.getElementById('total').textContent = quizQuestions.length;\n }\n }\n \n function updateProgress() {\n const progress = (answered.filter(a => a !== undefined).length \/ quizQuestions.length) * 100;\n document.getElementById('quiz-progress').style.width = progress + '%';\n }\n \n function resetQuiz() {\n currentQuestion = 0;\n score = 0;\n answered = [];\n document.getElementById('quiz-result').style.display = 'none';\n document.getElementById('quiz-container').style.display = 'block';\n loadQuiz();\n }\n \n \/\/ Flashcards\n const flashcards = [\n { term: \"Budget\", def: \"Un piano che ti aiuta a decidere come spendere i tuoi soldi. \u00c8 come una mappa per i tuoi soldi!\" },\n { term: \"Risparmio\", def: \"Soldi che metti da parte per il futuro. Come un salvadanaio!\" },\n { term: \"Entrate\", def: \"Tutti i soldi che arrivano a te: stipendio, paghetta, regali.\" },\n { term: \"Uscite\", def: \"Tutti i soldi che spendi: affitto, cibo, trasporti, divertimento.\" },\n { term: \"Conto corrente\", def: \"Un posto sicuro in banca dove tenere i tuoi soldi e da cui puoi prenderli quando vuoi.\" },\n { term: \"Interesse\", def: \"Soldi extra che devi pagare quando prendi in prestito denaro. O che la banca ti d\u00e0 se lasci i soldi da loro.\" },\n { term: \"Truffa (Phishing)\", def: \"Quando qualcuno cerca di rubarti i dati fingendo di essere la banca o un sito famoso.\" },\n { term: \"Bisogno vs Desiderio\", def: \"Bisogno = serve per vivere (cibo, casa). Desiderio = lo vuoi ma puoi vivere senza (ultimo telefono).\" }\n ];\n \n let currentCard = 0;\n \n function updateFlashcard() {\n const card = flashcards[currentCard];\n document.getElementById('flashcard-term').textContent = card.term;\n document.getElementById('flashcard-def').textContent = card.def;\n document.getElementById('current-card').textContent = currentCard + 1;\n document.getElementById('total-cards').textContent = flashcards.length;\n document.getElementById('flashcard-card').classList.remove('flipped');\n }\n \n function flipCard() {\n document.getElementById('flashcard-card').classList.toggle('flipped');\n }\n \n function nextCard() {\n currentCard = (currentCard + 1) % flashcards.length;\n updateFlashcard();\n }\n \n function prevCard() {\n currentCard = (currentCard - 1 + flashcards.length) % flashcards.length;\n updateFlashcard();\n }\n \n \/\/ Initialize\n loadQuiz();\n updateFlashcard();\n <\/script>\n<\/body>\n<\/html>\n\n","protected":false},"excerpt":{"rendered":"<p>Modulo 1 – Educazione Finanziaria | Autonomia Portami Via 📚 MODULO 1 – 14 ORE 💰 Educazione Finanziaria Impara a gestire i tuoi soldi in modo intelligente! 📖 Dispensa 🧮 Simulatore Budget 🎯 Bisogni vs Desideri ❓ Quiz 🎴 Flashcard 🎯 Cosa imparerai In questo modulo scoprirai come funziona il denaro e come usarlo bene. … <a title=\"Educazione finanziaria\" class=\"read-more\" href=\"https:\/\/studikis.it\/?p=45\" aria-label=\"Read more about Educazione finanziaria\">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-45","post","type-post","status-publish","format-standard","hentry","category-corsimarzogiugno26"],"_links":{"self":[{"href":"https:\/\/studikis.it\/index.php?rest_route=\/wp\/v2\/posts\/45","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=45"}],"version-history":[{"count":2,"href":"https:\/\/studikis.it\/index.php?rest_route=\/wp\/v2\/posts\/45\/revisions"}],"predecessor-version":[{"id":47,"href":"https:\/\/studikis.it\/index.php?rest_route=\/wp\/v2\/posts\/45\/revisions\/47"}],"wp:attachment":[{"href":"https:\/\/studikis.it\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=45"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/studikis.it\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=45"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/studikis.it\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=45"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

{"id":45,"date":"2026-03-10T09:16:17","date_gmt":"2026-03-10T09:16:17","guid":{"rendered":"https:\/\/studikis.it\/?p=45"},"modified":"2026-03-10T10:32:43","modified_gmt":"2026-03-10T10:32:43","slug":"educazione-finanziaria","status":"publish","type":"post","link":"https:\/\/studikis.it\/?p=45","title":{"rendered":"Educazione finanziaria"},"content":{"rendered":"\n\n\n\n \n \n Modulo 1 – Educazione Finanziaria | Autonomia Portami Via<\/title>\n <style>\n * {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n }\n \n body {\n font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;\n background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);\n min-height: 100vh;\n padding: 20px;\n line-height: 1.6;\n }\n \n .container {\n max-width: 900px;\n margin: 0 auto;\n }\n \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 \n .header h1 {\n color: #667eea;\n font-size: 2em;\n margin-bottom: 10px;\n }\n \n .header .subtitle {\n color: #666;\n font-size: 1.1em;\n }\n \n .module-badge {\n display: inline-block;\n background: linear-gradient(135deg, #667eea, #764ba2);\n color: white;\n padding: 8px 20px;\n border-radius: 20px;\n font-weight: bold;\n margin-bottom: 15px;\n }\n \n .tabs {\n display: flex;\n gap: 10px;\n margin-bottom: 20px;\n flex-wrap: wrap;\n }\n \n .tab {\n flex: 1;\n min-width: 150px;\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: #667eea;\n transition: all 0.3s;\n box-shadow: 0 4px 15px rgba(0,0,0,0.1);\n }\n \n .tab:hover {\n transform: translateY(-3px);\n box-shadow: 0 6px 20px rgba(0,0,0,0.15);\n }\n \n .tab.active {\n background: linear-gradient(135deg, #667eea, #764ba2);\n color: white;\n }\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 \n .content-section.active {\n display: block;\n animation: fadeIn 0.5s ease;\n }\n \n @keyframes fadeIn {\n from { opacity: 0; transform: translateY(20px); }\n to { opacity: 1; transform: translateY(0); }\n }\n \n .lesson-card {\n background: #f8f9ff;\n border-radius: 15px;\n padding: 25px;\n margin-bottom: 20px;\n border-left: 5px solid #667eea;\n }\n \n .lesson-card h3 {\n color: #667eea;\n margin-bottom: 15px;\n display: flex;\n align-items: center;\n gap: 10px;\n }\n \n .lesson-card h3 .icon {\n font-size: 1.5em;\n }\n \n .lesson-card p {\n color: #444;\n margin-bottom: 10px;\n }\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 \n .highlight-box.tip {\n background: linear-gradient(135deg, #d4edda, #c3e6cb);\n border-left-color: #28a745;\n }\n \n .highlight-box.warning {\n background: linear-gradient(135deg, #f8d7da, #f5c6cb);\n border-left-color: #dc3545;\n }\n \n .highlight-box h4 {\n margin-bottom: 10px;\n display: flex;\n align-items: center;\n gap: 8px;\n }\n \n \/* BUDGET SIMULATOR *\/\n .budget-simulator {\n background: #f0f4ff;\n border-radius: 15px;\n padding: 25px;\n margin: 20px 0;\n }\n \n .budget-header {\n display: flex;\n justify-content: space-between;\n align-items: center;\n margin-bottom: 20px;\n flex-wrap: wrap;\n gap: 10px;\n }\n \n .budget-total {\n font-size: 2em;\n font-weight: bold;\n color: #667eea;\n }\n \n .budget-remaining {\n font-size: 1.5em;\n padding: 10px 20px;\n border-radius: 10px;\n font-weight: bold;\n }\n \n .budget-remaining.positive {\n background: #d4edda;\n color: #155724;\n }\n \n .budget-remaining.negative {\n background: #f8d7da;\n color: #721c24;\n }\n \n .expense-category {\n background: white;\n border-radius: 10px;\n padding: 15px;\n margin-bottom: 10px;\n display: flex;\n justify-content: space-between;\n align-items: center;\n flex-wrap: wrap;\n gap: 10px;\n }\n \n .expense-category label {\n font-weight: bold;\n color: #333;\n display: flex;\n align-items: center;\n gap: 10px;\n }\n \n .expense-category input {\n width: 100px;\n padding: 10px;\n border: 2px solid #ddd;\n border-radius: 8px;\n font-size: 1em;\n text-align: center;\n }\n \n .expense-category input:focus {\n border-color: #667eea;\n outline: none;\n }\n \n \/* QUIZ STYLES *\/\n .quiz-question {\n background: #f8f9ff;\n border-radius: 15px;\n padding: 25px;\n margin-bottom: 20px;\n }\n \n .quiz-question h4 {\n color: #667eea;\n margin-bottom: 15px;\n font-size: 1.2em;\n }\n \n .quiz-options {\n display: grid;\n gap: 10px;\n }\n \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 display: flex;\n align-items: center;\n gap: 10px;\n }\n \n .quiz-option:hover {\n border-color: #667eea;\n transform: translateX(5px);\n }\n \n .quiz-option.selected {\n border-color: #667eea;\n background: #f0f4ff;\n }\n \n .quiz-option.correct {\n border-color: #28a745;\n background: #d4edda;\n }\n \n .quiz-option.wrong {\n border-color: #dc3545;\n background: #f8d7da;\n }\n \n .quiz-feedback {\n margin-top: 15px;\n padding: 15px;\n border-radius: 10px;\n display: none;\n }\n \n .quiz-feedback.show {\n display: block;\n animation: fadeIn 0.3s ease;\n }\n \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 \n .btn-primary {\n background: linear-gradient(135deg, #667eea, #764ba2);\n color: white;\n }\n \n .btn-primary:hover {\n transform: translateY(-2px);\n box-shadow: 0 5px 20px rgba(102, 126, 234, 0.4);\n }\n \n .btn-success {\n background: #28a745;\n color: white;\n }\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 \n .progress-fill {\n height: 100%;\n background: linear-gradient(90deg, #667eea, #764ba2);\n border-radius: 5px;\n transition: width 0.5s ease;\n }\n \n .score-display {\n text-align: center;\n padding: 30px;\n background: linear-gradient(135deg, #667eea, #764ba2);\n border-radius: 15px;\n color: white;\n margin-top: 20px;\n }\n \n .score-display h3 {\n font-size: 2em;\n margin-bottom: 10px;\n }\n \n \/* DRAG AND DROP *\/\n .drag-container {\n display: flex;\n gap: 20px;\n flex-wrap: wrap;\n margin: 20px 0;\n }\n \n .drag-zone {\n flex: 1;\n min-width: 250px;\n min-height: 200px;\n background: #f0f4ff;\n border: 3px dashed #667eea;\n border-radius: 15px;\n padding: 15px;\n }\n \n .drag-zone h4 {\n text-align: center;\n color: #667eea;\n margin-bottom: 15px;\n padding-bottom: 10px;\n border-bottom: 2px solid #667eea;\n }\n \n .drag-item {\n background: white;\n padding: 12px 15px;\n border-radius: 8px;\n margin-bottom: 8px;\n cursor: grab;\n box-shadow: 0 2px 5px rgba(0,0,0,0.1);\n transition: all 0.3s;\n border-left: 4px solid #667eea;\n }\n \n .drag-item:hover {\n transform: scale(1.02);\n box-shadow: 0 4px 10px rgba(0,0,0,0.15);\n }\n \n .drag-item.dragging {\n opacity: 0.5;\n cursor: grabbing;\n }\n \n .drag-zone.drag-over {\n background: #e0e7ff;\n border-style: solid;\n }\n \n \/* CALCULATOR *\/\n .calculator-box {\n background: linear-gradient(135deg, #f0f4ff, #e8ecff);\n border-radius: 15px;\n padding: 25px;\n margin: 20px 0;\n }\n \n .calc-row {\n display: flex;\n gap: 15px;\n margin-bottom: 15px;\n align-items: center;\n flex-wrap: wrap;\n }\n \n .calc-row label {\n min-width: 150px;\n font-weight: bold;\n }\n \n .calc-row input {\n flex: 1;\n min-width: 120px;\n padding: 12px;\n border: 2px solid #ddd;\n border-radius: 8px;\n font-size: 1em;\n }\n \n .calc-result {\n background: white;\n border-radius: 10px;\n padding: 20px;\n text-align: center;\n margin-top: 20px;\n }\n \n .calc-result .big-number {\n font-size: 2.5em;\n font-weight: bold;\n color: #667eea;\n }\n \n \/* FLASHCARDS *\/\n .flashcard-container {\n perspective: 1000px;\n margin: 20px 0;\n }\n \n .flashcard {\n width: 100%;\n height: 200px;\n position: relative;\n transform-style: preserve-3d;\n transition: transform 0.6s;\n cursor: pointer;\n }\n \n .flashcard.flipped {\n transform: rotateY(180deg);\n }\n \n .flashcard-front, .flashcard-back {\n position: absolute;\n width: 100%;\n height: 100%;\n backface-visibility: hidden;\n border-radius: 15px;\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 20px;\n text-align: center;\n }\n \n .flashcard-front {\n background: linear-gradient(135deg, #667eea, #764ba2);\n color: white;\n font-size: 1.3em;\n font-weight: bold;\n }\n \n .flashcard-back {\n background: white;\n border: 3px solid #667eea;\n transform: rotateY(180deg);\n color: #333;\n }\n \n .flashcard-nav {\n display: flex;\n justify-content: center;\n gap: 15px;\n margin-top: 15px;\n }\n \n .nav-btn {\n padding: 10px 20px;\n background: #f0f4ff;\n border: 2px solid #667eea;\n border-radius: 8px;\n cursor: pointer;\n font-weight: bold;\n color: #667eea;\n transition: all 0.3s;\n }\n \n .nav-btn:hover {\n background: #667eea;\n color: white;\n }\n \n .card-counter {\n text-align: center;\n margin-top: 10px;\n color: #666;\n }\n \n \/* RESPONSIVE *\/\n @media (max-width: 600px) {\n .header h1 {\n font-size: 1.5em;\n }\n \n .tab {\n min-width: 100%;\n }\n \n .budget-header {\n flex-direction: column;\n text-align: center;\n }\n }\n \n .emoji-big {\n font-size: 3em;\n display: block;\n text-align: center;\n margin: 20px 0;\n }\n \n ul, ol {\n margin-left: 25px;\n margin-bottom: 15px;\n }\n \n li {\n margin-bottom: 8px;\n }\n \n h2 {\n color: #667eea;\n margin: 25px 0 15px 0;\n padding-bottom: 10px;\n border-bottom: 2px solid #e0e0e0;\n }\n <\/style>\n<\/head>\n<body>\n <div class=\"container\">\n <div class=\"header\">\n <div class=\"module-badge\">📚 MODULO 1 – 14 ORE<\/div>\n <h1>💰 Educazione Finanziaria<\/h1>\n <p class=\"subtitle\">Impara a gestire i tuoi soldi in modo intelligente!<\/p>\n <\/div>\n \n <div class=\"tabs\">\n <button class=\"tab active\" onclick=\"showSection('dispensa')\">📖 Dispensa<\/button>\n <button class=\"tab\" onclick=\"showSection('budget')\">🧮 Simulatore Budget<\/button>\n <button class=\"tab\" onclick=\"showSection('gioco')\">🎯 Bisogni vs Desideri<\/button>\n <button class=\"tab\" onclick=\"showSection('quiz')\">❓ Quiz<\/button>\n <button class=\"tab\" onclick=\"showSection('flashcard')\">🎴 Flashcard<\/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 il denaro e come usarlo bene. \u00c8 un po’ come imparare a guidare una bicicletta: all’inizio sembra difficile, ma poi diventa naturale!<\/p>\n \n <div class=\"lesson-card\">\n <h3><span class=\"icon\">💵<\/span> Il valore del denaro<\/h3>\n <p><strong>Cos’\u00e8 il denaro?<\/strong> Il denaro \u00e8 uno strumento che usiamo per scambiare cose. Tanto tempo fa, le persone scambiavano direttamente oggetti (per esempio, due galline per un sacco di grano). Oggi usiamo i soldi perch\u00e9 \u00e8 pi\u00f9 semplice.<\/p>\n \n <div class=\"highlight-box tip\">\n <h4>💡 Ricorda<\/h4>\n <p>I soldi non crescono sugli alberi! Arrivano dal lavoro o da chi si prende cura di noi. Per questo \u00e8 importante usarli con attenzione.<\/p>\n <\/div>\n \n <p><strong>Entrate e uscite:<\/strong><\/p>\n <ul>\n <li><strong>Entrate<\/strong> = soldi che arrivano (stipendio, paghetta, regali)<\/li>\n <li><strong>Uscite<\/strong> = soldi che escono (spese, acquisti, bollette)<\/li>\n <\/ul>\n <p>Se le uscite sono pi\u00f9 delle entrate, hai un problema! \u00c8 come una vasca da bagno: se esce pi\u00f9 acqua di quella che entra, prima o poi si svuota.<\/p>\n <\/div>\n \n <div class=\"lesson-card\">\n <h3><span class=\"icon\">📊<\/span> Il Budget Personale<\/h3>\n <p><strong>Cos’\u00e8 un budget?<\/strong> \u00c8 un piano per i tuoi soldi. Ti aiuta a capire quanto puoi spendere senza restare senza niente.<\/p>\n \n <p><strong>Come fare un budget semplice:<\/strong><\/p>\n <ol>\n <li>Scrivi quanto denaro hai (o ricevi al mese)<\/li>\n <li>Fai una lista delle spese che DEVI fare (cibo, trasporti, telefono)<\/li>\n <li>Sottrai le spese obbligatorie<\/li>\n <li>Quello che resta puoi usarlo per altro o risparmiarlo!<\/li>\n <\/ol>\n \n <div class=\"highlight-box\">\n <h4>📌 La regola del 50-30-20<\/h4>\n <p>Un modo semplice per dividere i soldi:<\/p>\n <ul>\n <li><strong>50%<\/strong> per le cose necessarie (affitto, cibo, bollette)<\/li>\n <li><strong>30%<\/strong> per le cose che ti piacciono (uscite, hobby)<\/li>\n <li><strong>20%<\/strong> da mettere da parte (risparmio)<\/li>\n <\/ul>\n <\/div>\n <\/div>\n \n <div class=\"lesson-card\">\n <h3><span class=\"icon\">🐷<\/span> Risparmiare<\/h3>\n <p><strong>Perch\u00e9 risparmiare?<\/strong> Per avere soldi quando ne hai bisogno! Pu\u00f2 servire per:<\/p>\n <ul>\n <li>Un’emergenza (si rompe il telefono, devi andare dal dottore)<\/li>\n <li>Qualcosa di grande che desideri (viaggio, corso, motorino)<\/li>\n <li>Stare tranquillo e non avere paura del futuro<\/li>\n <\/ul>\n \n <div class=\"highlight-box tip\">\n <h4>🎯 Trucco per risparmiare<\/h4>\n <p>Appena ricevi i soldi, metti SUBITO da parte la parte per il risparmio. Se aspetti la fine del mese, non rester\u00e0 niente!<\/p>\n <\/div>\n <\/div>\n \n <div class=\"lesson-card\">\n <h3><span class=\"icon\">🏦<\/span> La Banca<\/h3>\n <p><strong>Cos’\u00e8 una banca?<\/strong> \u00c8 un posto sicuro dove tenere i soldi. La banca ti d\u00e0 una <strong>carta<\/strong> per usarli e un <strong>conto<\/strong> dove puoi vedere quanto hai.<\/p>\n \n <p><strong>Tipi di carta:<\/strong><\/p>\n <ul>\n <li><strong>Carta di debito<\/strong> = spendi i soldi che hai sul conto (come usare contanti)<\/li>\n <li><strong>Carta di credito<\/strong> = la banca ti presta i soldi, ma poi devi restituirli (attenzione!)<\/li>\n <li><strong>Carta prepagata<\/strong> = puoi spendere solo quello che hai caricato<\/li>\n <\/ul>\n \n <div class=\"highlight-box warning\">\n <h4>⚠️ Attenzione<\/h4>\n <p>La carta di credito NON \u00e8 denaro gratis! Quello che spendi lo devi restituire, spesso con gli interessi (cio\u00e8 paghi di pi\u00f9).<\/p>\n <\/div>\n <\/div>\n \n <div class=\"lesson-card\">\n <h3><span class=\"icon\">🚨<\/span> Truffe e Pericoli<\/h3>\n <p><strong>Come riconoscere una truffa?<\/strong><\/p>\n <ul>\n <li>Ti promettono soldi facili e veloci<\/li>\n <li>Ti mettono fretta (“decidi SUBITO!”)<\/li>\n <li>Ti chiedono i codici della carta o le password<\/li>\n <li>Arrivano messaggi strani dalla “banca” con link<\/li>\n <\/ul>\n \n <div class=\"highlight-box warning\">\n <h4>🛡️ Regola d’oro<\/h4>\n <p>La banca NON ti chieder\u00e0 MAI le tue password o i codici per email o telefono. Se qualcuno lo fa, \u00e8 una truffa!<\/p>\n <\/div>\n \n <p><strong>Cosa evitare:<\/strong><\/p>\n <ul>\n <li><strong>Prestiti da sconosciuti<\/strong> = possono essere usurai (interessi altissimi e illegali)<\/li>\n <li><strong>Gioco d’azzardo<\/strong> = sembra un modo per fare soldi, ma perdi quasi sempre<\/li>\n <li><strong>Investimenti miracolosi<\/strong> = se sembra troppo bello per essere vero, probabilmente \u00e8 una truffa<\/li>\n <\/ul>\n <\/div>\n \n <div class=\"emoji-big\">🎓<\/div>\n <p style=\"text-align: center; font-size: 1.2em; color: #667eea;\"><strong>Ora sei pronto per le attivit\u00e0 pratiche!<\/strong><\/p>\n <\/div>\n \n \n <div id=\"budget\" class=\"content-section\">\n <h2>🧮 Simulatore Budget Mensile<\/h2>\n <p>Immagina di avere 500\u20ac al mese. Prova a gestirli!<\/p>\n \n <div class=\"budget-simulator\">\n <div class=\"budget-header\">\n <div class=\"budget-total\">💰 Budget: \u20ac500<\/div>\n <div id=\"budget-remaining\" class=\"budget-remaining positive\">Rimangono: \u20ac500<\/div>\n <\/div>\n \n <div class=\"expense-category\">\n <label>🏠 Contributo casa\/affitto<\/label>\n <input type=\"number\" id=\"exp-casa\" value=\"0\" min=\"0\" max=\"500\" onchange=\"calcolaBudget()\">\n <\/div>\n \n <div class=\"expense-category\">\n <label>🍕 Cibo e spesa<\/label>\n <input type=\"number\" id=\"exp-cibo\" value=\"0\" min=\"0\" max=\"500\" onchange=\"calcolaBudget()\">\n <\/div>\n \n <div class=\"expense-category\">\n <label>🚌 Trasporti (bus, metro)<\/label>\n <input type=\"number\" id=\"exp-trasporti\" value=\"0\" min=\"0\" max=\"500\" onchange=\"calcolaBudget()\">\n <\/div>\n \n <div class=\"expense-category\">\n <label>📱 Telefono<\/label>\n <input type=\"number\" id=\"exp-telefono\" value=\"0\" min=\"0\" max=\"500\" onchange=\"calcolaBudget()\">\n <\/div>\n \n <div class=\"expense-category\">\n <label>🎉 Uscite e divertimento<\/label>\n <input type=\"number\" id=\"exp-uscite\" value=\"0\" min=\"0\" max=\"500\" onchange=\"calcolaBudget()\">\n <\/div>\n \n <div class=\"expense-category\">\n <label>👕 Vestiti<\/label>\n <input type=\"number\" id=\"exp-vestiti\" value=\"0\" min=\"0\" max=\"500\" onchange=\"calcolaBudget()\">\n <\/div>\n \n <div class=\"expense-category\">\n <label>🐷 Risparmio<\/label>\n <input type=\"number\" id=\"exp-risparmio\" value=\"0\" min=\"0\" max=\"500\" onchange=\"calcolaBudget()\">\n <\/div>\n <\/div>\n \n <div id=\"budget-feedback\" class=\"highlight-box\" style=\"display: none;\"><\/div>\n \n <div style=\"text-align: center; margin-top: 20px;\">\n <button class=\"btn btn-primary\" onclick=\"suggerisciBudget()\">💡 Suggeriscimi un budget<\/button>\n <\/div>\n <\/div>\n \n \n <div id=\"gioco\" class=\"content-section\">\n <h2>🎯 Bisogni vs Desideri<\/h2>\n <p>Trascina ogni oggetto nella categoria giusta. I <strong>bisogni<\/strong> sono cose di cui hai BISOGNO per vivere. I <strong>desideri<\/strong> sono cose che vorresti avere ma puoi vivere senza.<\/p>\n \n <div class=\"drag-container\">\n <div class=\"drag-zone\" id=\"zone-items\">\n <h4>📦 Oggetti<\/h4>\n <div class=\"drag-item\" draggable=\"true\" data-type=\"bisogno\">🍞 Pane e cibo<\/div>\n <div class=\"drag-item\" draggable=\"true\" data-type=\"desiderio\">🎮 PlayStation 5<\/div>\n <div class=\"drag-item\" draggable=\"true\" data-type=\"bisogno\">💊 Medicine<\/div>\n <div class=\"drag-item\" draggable=\"true\" data-type=\"desiderio\">👟 Scarpe di marca<\/div>\n <div class=\"drag-item\" draggable=\"true\" data-type=\"bisogno\">🚌 Abbonamento bus<\/div>\n <div class=\"drag-item\" draggable=\"true\" data-type=\"desiderio\">📱 Ultimo iPhone<\/div>\n <div class=\"drag-item\" draggable=\"true\" data-type=\"bisogno\">💡 Bolletta luce<\/div>\n <div class=\"drag-item\" draggable=\"true\" data-type=\"desiderio\">🎧 Cuffie wireless<\/div>\n <div class=\"drag-item\" draggable=\"true\" data-type=\"bisogno\">🏠 Affitto<\/div>\n <div class=\"drag-item\" draggable=\"true\" data-type=\"desiderio\">☕ Caff\u00e8 al bar ogni giorno<\/div>\n <\/div>\n \n <div class=\"drag-zone\" id=\"zone-bisogni\">\n <h4>✅ BISOGNI<\/h4>\n <\/div>\n \n <div class=\"drag-zone\" id=\"zone-desideri\">\n <h4>💭 DESIDERI<\/h4>\n <\/div>\n <\/div>\n \n <div style=\"text-align: center; margin-top: 20px;\">\n <button class=\"btn btn-primary\" onclick=\"verificaDragDrop()\">✔️ Verifica<\/button>\n <button class=\"btn nav-btn\" onclick=\"resetDragDrop()\">🔄 Ricomincia<\/button>\n <\/div>\n \n <div id=\"drag-feedback\" class=\"highlight-box\" style=\"display: none; margin-top: 20px;\"><\/div>\n <\/div>\n \n \n <div id=\"quiz\" class=\"content-section\">\n <h2>❓ Quiz di Verifica<\/h2>\n <p>Metti alla prova quello che hai imparato!<\/p>\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\">\n \n <\/div>\n \n <div id=\"quiz-result\" class=\"score-display\" style=\"display: none;\">\n <h3>🎉 Quiz completato!<\/h3>\n <p>Hai risposto correttamente a <span id=\"score\">0<\/span> domande su <span id=\"total\">5<\/span><\/p>\n <button class=\"btn btn-primary\" onclick=\"resetQuiz()\" style=\"margin-top: 15px;\">🔄 Rifai il quiz<\/button>\n <\/div>\n <\/div>\n \n \n <div id=\"flashcard\" class=\"content-section\">\n <h2>🎴 Flashcard – Parole Importanti<\/h2>\n <p>Clicca sulla carta per vedere la definizione. Impara queste parole!<\/p>\n \n <div class=\"flashcard-container\">\n <div class=\"flashcard\" id=\"flashcard-card\" onclick=\"flipCard()\">\n <div class=\"flashcard-front\">\n <span id=\"flashcard-term\">Budget<\/span>\n <\/div>\n <div class=\"flashcard-back\">\n <span id=\"flashcard-def\">Un piano che ti aiuta a decidere come spendere i tuoi soldi. \u00c8 come una mappa per i tuoi soldi!<\/span>\n <\/div>\n <\/div>\n <\/div>\n \n <div class=\"card-counter\">\n Carta <span id=\"current-card\">1<\/span> di <span id=\"total-cards\">8<\/span>\n <\/div>\n \n <div class=\"flashcard-nav\">\n <button class=\"nav-btn\" onclick=\"prevCard()\">⬅️ Precedente<\/button>\n <button class=\"nav-btn\" onclick=\"nextCard()\">Successiva ➡️<\/button>\n <\/div>\n <\/div>\n <\/div>\n \n <script>\n \/\/ Tab navigation\n function showSection(sectionId) {\n document.querySelectorAll('.content-section').forEach(s => s.classList.remove('active'));\n document.querySelectorAll('.tab').forEach(t => t.classList.remove('active'));\n document.getElementById(sectionId).classList.add('active');\n event.target.classList.add('active');\n }\n \n \/\/ Budget Calculator\n function calcolaBudget() {\n const budget = 500;\n const casa = parseInt(document.getElementById('exp-casa').value) || 0;\n const cibo = parseInt(document.getElementById('exp-cibo').value) || 0;\n const trasporti = parseInt(document.getElementById('exp-trasporti').value) || 0;\n const telefono = parseInt(document.getElementById('exp-telefono').value) || 0;\n const uscite = parseInt(document.getElementById('exp-uscite').value) || 0;\n const vestiti = parseInt(document.getElementById('exp-vestiti').value) || 0;\n const risparmio = parseInt(document.getElementById('exp-risparmio').value) || 0;\n \n const totaleSpese = casa + cibo + trasporti + telefono + uscite + vestiti + risparmio;\n const rimanente = budget - totaleSpese;\n \n const remainingEl = document.getElementById('budget-remaining');\n remainingEl.textContent = `Rimangono: \u20ac${rimanente}`;\n remainingEl.className = 'budget-remaining ' + (rimanente >= 0 ? 'positive' : 'negative');\n \n const feedbackEl = document.getElementById('budget-feedback');\n if (rimanente < 0) {\n feedbackEl.innerHTML = '<h4>⚠️ Attenzione!<\/h4><p>Stai spendendo pi\u00f9 di quello che hai! Devi ridurre qualche spesa.<\/p>';\n feedbackEl.className = 'highlight-box warning';\n feedbackEl.style.display = 'block';\n } else if (risparmio >= 100) {\n feedbackEl.innerHTML = '<h4>🎉 Ottimo!<\/h4><p>Stai risparmiando bene! Il 20% o pi\u00f9 \u00e8 perfetto.<\/p>';\n feedbackEl.className = 'highlight-box tip';\n feedbackEl.style.display = 'block';\n } else if (risparmio > 0) {\n feedbackEl.innerHTML = '<h4>👍 Bene!<\/h4><p>Stai risparmiando qualcosa. Prova ad arrivare a \u20ac100 (20% del budget)!<\/p>';\n feedbackEl.className = 'highlight-box';\n feedbackEl.style.display = 'block';\n } else if (rimanente === 0) {\n feedbackEl.innerHTML = '<h4>⚠️ Attenzione!<\/h4><p>Hai usato tutto! Non hai messo niente da parte per il risparmio o le emergenze.<\/p>';\n feedbackEl.className = 'highlight-box warning';\n feedbackEl.style.display = 'block';\n } else {\n feedbackEl.style.display = 'none';\n }\n }\n \n function suggerisciBudget() {\n document.getElementById('exp-casa').value = 150;\n document.getElementById('exp-cibo').value = 120;\n document.getElementById('exp-trasporti').value = 35;\n document.getElementById('exp-telefono').value = 15;\n document.getElementById('exp-uscite').value = 60;\n document.getElementById('exp-vestiti').value = 20;\n document.getElementById('exp-risparmio').value = 100;\n calcolaBudget();\n }\n \n \/\/ Drag and Drop\n let draggedItem = null;\n \n document.querySelectorAll('.drag-item').forEach(item => {\n item.addEventListener('dragstart', function(e) {\n draggedItem = this;\n this.classList.add('dragging');\n });\n \n item.addEventListener('dragend', function() {\n this.classList.remove('dragging');\n });\n });\n \n document.querySelectorAll('.drag-zone').forEach(zone => {\n zone.addEventListener('dragover', function(e) {\n e.preventDefault();\n this.classList.add('drag-over');\n });\n \n zone.addEventListener('dragleave', function() {\n this.classList.remove('drag-over');\n });\n \n zone.addEventListener('drop', function(e) {\n e.preventDefault();\n this.classList.remove('drag-over');\n if (draggedItem && this.id !== 'zone-items') {\n this.appendChild(draggedItem);\n }\n });\n });\n \n function verificaDragDrop() {\n const bisogniZone = document.getElementById('zone-bisogni');\n const desideriZone = document.getElementById('zone-desideri');\n let correct = 0;\n let total = 0;\n \n bisogniZone.querySelectorAll('.drag-item').forEach(item => {\n total++;\n if (item.dataset.type === 'bisogno') {\n item.style.background = '#d4edda';\n correct++;\n } else {\n item.style.background = '#f8d7da';\n }\n });\n \n desideriZone.querySelectorAll('.drag-item').forEach(item => {\n total++;\n if (item.dataset.type === 'desiderio') {\n item.style.background = '#d4edda';\n correct++;\n } else {\n item.style.background = '#f8d7da';\n }\n });\n \n const feedback = document.getElementById('drag-feedback');\n if (total === 0) {\n feedback.innerHTML = '<h4>🤔 Nessun oggetto!<\/h4><p>Trascina gli oggetti nelle zone giuste prima di verificare.<\/p>';\n feedback.className = 'highlight-box';\n } else if (correct === total) {\n feedback.innerHTML = '<h4>🎉 Perfetto!<\/h4><p>Hai classificato tutto correttamente! Hai capito la differenza tra bisogni e desideri.<\/p>';\n feedback.className = 'highlight-box tip';\n } else {\n feedback.innerHTML = `<h4>👍 Ci sei quasi!<\/h4><p>Hai indovinato ${correct} su ${total}. Gli elementi in rosso sono sbagliati.<\/p>`;\n feedback.className = 'highlight-box';\n }\n feedback.style.display = 'block';\n }\n \n function resetDragDrop() {\n const itemsZone = document.getElementById('zone-items');\n document.querySelectorAll('.drag-item').forEach(item => {\n item.style.background = 'white';\n itemsZone.appendChild(item);\n });\n document.getElementById('drag-feedback').style.display = 'none';\n }\n \n \/\/ Quiz\n const quizQuestions = [\n {\n question: \"Cos'\u00e8 un budget?\",\n options: [\n \"Un tipo di carta di credito\",\n \"Un piano per gestire i soldi\",\n \"Un conto in banca\",\n \"Un prestito\"\n ],\n correct: 1,\n explanation: \"Il budget \u00e8 un piano che ti aiuta a decidere come usare i tuoi soldi!\"\n },\n {\n question: \"Qual \u00e8 la differenza tra carta di debito e carta di credito?\",\n options: [\n \"Nessuna differenza\",\n \"La carta di debito usa i tuoi soldi, la carta di credito usa soldi prestati\",\n \"La carta di credito \u00e8 gratuita\",\n \"La carta di debito si usa solo online\"\n ],\n correct: 1,\n explanation: \"Con la carta di debito spendi i TUOI soldi. Con la carta di credito la banca ti presta i soldi e poi devi restituirli!\"\n },\n {\n question: \"Nella regola 50-30-20, quanto dovresti risparmiare?\",\n options: [\n \"50%\",\n \"30%\",\n \"20%\",\n \"10%\"\n ],\n correct: 2,\n explanation: \"La regola suggerisce di risparmiare il 20% dei tuoi soldi!\"\n },\n {\n question: \"Quale di questi \u00e8 un BISOGNO e non un desiderio?\",\n options: [\n \"L'ultimo modello di smartphone\",\n \"Scarpe firmate\",\n \"Cibo per mangiare\",\n \"Abbonamento Netflix\"\n ],\n correct: 2,\n explanation: \"Il cibo \u00e8 un bisogno essenziale per vivere. Gli altri sono desideri: puoi vivere senza!\"\n },\n {\n question: \"La banca ti manda un messaggio che chiede la tua password. Cosa fai?\",\n options: [\n \"La invio subito\",\n \"Chiamo il numero nel messaggio\",\n \"Non rispondo, \u00e8 sicuramente una truffa\",\n \"La invio ma poi cambio password\"\n ],\n correct: 2,\n explanation: \"Le banche NON chiedono MAI password per messaggio o email. \u00c8 sempre una truffa!\"\n }\n ];\n \n let currentQuestion = 0;\n let score = 0;\n let answered = [];\n \n function loadQuiz() {\n const container = document.getElementById('quiz-container');\n container.innerHTML = '';\n \n quizQuestions.forEach((q, index) => {\n const questionDiv = document.createElement('div');\n questionDiv.className = 'quiz-question';\n questionDiv.id = `question-${index}`;\n questionDiv.style.display = index === 0 ? 'block' : 'none';\n \n let optionsHTML = q.options.map((opt, i) => \n `<div class=\"quiz-option\" onclick=\"selectOption(${index}, ${i})\">${opt}<\/div>`\n ).join('');\n \n questionDiv.innerHTML = `\n <h4>Domanda ${index + 1} di ${quizQuestions.length}<\/h4>\n <p style=\"font-size: 1.1em; margin-bottom: 15px;\">${q.question}<\/p>\n <div class=\"quiz-options\">${optionsHTML}<\/div>\n <div class=\"quiz-feedback\" id=\"feedback-${index}\"><\/div>\n <button class=\"btn btn-primary\" id=\"next-${index}\" style=\"display: none; margin-top: 15px;\" onclick=\"nextQuestion(${index})\">\n ${index === quizQuestions.length - 1 ? 'Vedi risultato' : 'Prossima domanda'} ➡️\n <\/button>\n `;\n \n container.appendChild(questionDiv);\n });\n \n updateProgress();\n }\n \n function selectOption(qIndex, optIndex) {\n if (answered[qIndex] !== undefined) return;\n \n answered[qIndex] = optIndex;\n const question = quizQuestions[qIndex];\n const options = document.querySelectorAll(`#question-${qIndex} .quiz-option`);\n \n options.forEach((opt, i) => {\n opt.style.pointerEvents = 'none';\n if (i === question.correct) {\n opt.classList.add('correct');\n } else if (i === optIndex) {\n opt.classList.add('wrong');\n }\n });\n \n if (optIndex === question.correct) {\n score++;\n }\n \n const feedback = document.getElementById(`feedback-${qIndex}`);\n feedback.innerHTML = optIndex === question.correct \n ? `<p style=\"color: #155724;\">✅ Corretto! ${question.explanation}<\/p>`\n : `<p style=\"color: #721c24;\">❌ Sbagliato. ${question.explanation}<\/p>`;\n feedback.className = 'quiz-feedback show';\n feedback.style.background = optIndex === question.correct ? '#d4edda' : '#f8d7da';\n \n document.getElementById(`next-${qIndex}`).style.display = 'inline-block';\n updateProgress();\n }\n \n function nextQuestion(currentIndex) {\n document.getElementById(`question-${currentIndex}`).style.display = 'none';\n \n if (currentIndex < quizQuestions.length - 1) {\n document.getElementById(`question-${currentIndex + 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 = score;\n document.getElementById('total').textContent = quizQuestions.length;\n }\n }\n \n function updateProgress() {\n const progress = (answered.filter(a => a !== undefined).length \/ quizQuestions.length) * 100;\n document.getElementById('quiz-progress').style.width = progress + '%';\n }\n \n function resetQuiz() {\n currentQuestion = 0;\n score = 0;\n answered = [];\n document.getElementById('quiz-result').style.display = 'none';\n document.getElementById('quiz-container').style.display = 'block';\n loadQuiz();\n }\n \n \/\/ Flashcards\n const flashcards = [\n { term: \"Budget\", def: \"Un piano che ti aiuta a decidere come spendere i tuoi soldi. \u00c8 come una mappa per i tuoi soldi!\" },\n { term: \"Risparmio\", def: \"Soldi che metti da parte per il futuro. Come un salvadanaio!\" },\n { term: \"Entrate\", def: \"Tutti i soldi che arrivano a te: stipendio, paghetta, regali.\" },\n { term: \"Uscite\", def: \"Tutti i soldi che spendi: affitto, cibo, trasporti, divertimento.\" },\n { term: \"Conto corrente\", def: \"Un posto sicuro in banca dove tenere i tuoi soldi e da cui puoi prenderli quando vuoi.\" },\n { term: \"Interesse\", def: \"Soldi extra che devi pagare quando prendi in prestito denaro. O che la banca ti d\u00e0 se lasci i soldi da loro.\" },\n { term: \"Truffa (Phishing)\", def: \"Quando qualcuno cerca di rubarti i dati fingendo di essere la banca o un sito famoso.\" },\n { term: \"Bisogno vs Desiderio\", def: \"Bisogno = serve per vivere (cibo, casa). Desiderio = lo vuoi ma puoi vivere senza (ultimo telefono).\" }\n ];\n \n let currentCard = 0;\n \n function updateFlashcard() {\n const card = flashcards[currentCard];\n document.getElementById('flashcard-term').textContent = card.term;\n document.getElementById('flashcard-def').textContent = card.def;\n document.getElementById('current-card').textContent = currentCard + 1;\n document.getElementById('total-cards').textContent = flashcards.length;\n document.getElementById('flashcard-card').classList.remove('flipped');\n }\n \n function flipCard() {\n document.getElementById('flashcard-card').classList.toggle('flipped');\n }\n \n function nextCard() {\n currentCard = (currentCard + 1) % flashcards.length;\n updateFlashcard();\n }\n \n function prevCard() {\n currentCard = (currentCard - 1 + flashcards.length) % flashcards.length;\n updateFlashcard();\n }\n \n \/\/ Initialize\n loadQuiz();\n updateFlashcard();\n <\/script>\n<\/body>\n<\/html>\n\n","protected":false},"excerpt":{"rendered":"<p>Modulo 1 – Educazione Finanziaria | Autonomia Portami Via 📚 MODULO 1 – 14 ORE 💰 Educazione Finanziaria Impara a gestire i tuoi soldi in modo intelligente! 📖 Dispensa 🧮 Simulatore Budget 🎯 Bisogni vs Desideri ❓ Quiz 🎴 Flashcard 🎯 Cosa imparerai In questo modulo scoprirai come funziona il denaro e come usarlo bene. … <a title=\"Educazione finanziaria\" class=\"read-more\" href=\"https:\/\/studikis.it\/?p=45\" aria-label=\"Read more about Educazione finanziaria\">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-45","post","type-post","status-publish","format-standard","hentry","category-corsimarzogiugno26"],"_links":{"self":[{"href":"https:\/\/studikis.it\/index.php?rest_route=\/wp\/v2\/posts\/45","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=45"}],"version-history":[{"count":2,"href":"https:\/\/studikis.it\/index.php?rest_route=\/wp\/v2\/posts\/45\/revisions"}],"predecessor-version":[{"id":47,"href":"https:\/\/studikis.it\/index.php?rest_route=\/wp\/v2\/posts\/45\/revisions\/47"}],"wp:attachment":[{"href":"https:\/\/studikis.it\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=45"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/studikis.it\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=45"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/studikis.it\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=45"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}