My Digital Key 1 \u00b7 Lecci\u00f3n 1<\/title>\n\n<style>\n\n:root{\n --purple:#4B169B;\n --purple-dark:#32106d;\n --purple-soft:#F5F0FC;\n --yellow:#F7B51B;\n --text:#2b2633;\n --gray:#6f6878;\n --line:#DDD2EF;\n --white:#ffffff;\n}\n\n*{\n box-sizing:border-box;\n}\n\nbody{\n margin:0;\n background:#faf9fc;\n color:var(--text);\n font-family:Arial, Helvetica, sans-serif;\n}\n\n#digital-key{\n width:min(960px, calc(100% - 24px));\n margin:25px auto;\n background:#ffffff;\n border:1px solid var(--line);\n border-radius:24px;\n overflow:hidden;\n box-shadow:0 12px 35px rgba(75,22,155,.10);\n}\n\n\/* =========================\nHEADER\n========================= *\/\n\n.header{\n padding:24px 28px 20px;\n border-bottom:1px solid var(--line);\n}\n\n.top{\n display:flex;\n justify-content:space-between;\n align-items:center;\n gap:15px;\n}\n\n.brand{\n background:var(--purple);\n color:#ffffff !important;\n -webkit-text-fill-color:#ffffff !important;\n padding:8px 14px;\n border-radius:30px;\n font-size:13px;\n font-weight:bold;\n}\n\n.step{\n color:var(--purple);\n font-weight:bold;\n}\n\n#digital-key h1{\n color:var(--purple) !important;\n font-size:38px;\n margin:18px 0 5px;\n line-height:1.1;\n}\n\n.subtitle{\n color:var(--gray);\n margin:0;\n font-size:17px;\n}\n\n.progress{\n height:8px;\n background:#eee7f7;\n border-radius:10px;\n margin-top:18px;\n overflow:hidden;\n}\n\n.progress-bar{\n height:100%;\n width:20%;\n background:var(--purple);\n transition:.3s;\n}\n\n\/* =========================\nCONTENIDO\n========================= *\/\n\n.content{\n min-height:520px;\n padding:32px 28px;\n}\n\n.screen{\n display:none;\n}\n\n.screen.active{\n display:block;\n}\n\n.section-label{\n display:flex;\n align-items:center;\n gap:10px;\n color:var(--purple);\n font-weight:bold;\n margin-bottom:12px;\n}\n\n.number{\n width:35px;\n height:35px;\n background:var(--purple);\n color:#ffffff !important;\n -webkit-text-fill-color:#ffffff !important;\n border-radius:50%;\n display:flex;\n align-items:center;\n justify-content:center;\n flex-shrink:0;\n}\n\n#digital-key h2{\n color:var(--purple-dark) !important;\n font-size:28px;\n margin:10px 0;\n line-height:1.25;\n}\n\n.instructions{\n line-height:1.6;\n max-width:760px;\n font-size:17px;\n color:var(--text);\n}\n\n\/* =========================\nHISTORIA\n========================= *\/\n\n.story{\n border:1px solid var(--line);\n border-radius:18px;\n padding:18px;\n display:grid;\n grid-template-columns:65px 1fr;\n gap:15px;\n align-items:center;\n margin:18px 0;\n background:#ffffff;\n}\n\n.avatar{\n width:60px;\n height:60px;\n border-radius:50%;\n background:var(--purple-soft);\n display:flex;\n align-items:center;\n justify-content:center;\n font-size:30px;\n}\n\n.story p{\n margin:0;\n line-height:1.6;\n color:var(--text);\n}\n\n.story strong{\n color:var(--purple-dark) !important;\n}\n\n.callout{\n border-left:5px solid var(--yellow);\n background:#fffaf0;\n padding:15px;\n border-radius:12px;\n line-height:1.5;\n margin-top:20px;\n color:var(--text);\n}\n\n\/* =========================\nDATOS\n========================= *\/\n\n.data-grid{\n display:grid;\n grid-template-columns:repeat(3,1fr);\n gap:12px;\n margin:20px 0;\n}\n\n#digital-key .data{\n background:#ffffff !important;\n border:2px solid var(--line) !important;\n border-radius:15px !important;\n padding:14px !important;\n cursor:pointer;\n min-height:85px;\n text-align:left !important;\n transition:.2s;\n color:#2b2633 !important;\n -webkit-text-fill-color:#2b2633 !important;\n opacity:1 !important;\n font-weight:500 !important;\n box-shadow:none !important;\n}\n\n#digital-key .data:hover{\n border-color:var(--purple) !important;\n background:#fbf9ff !important;\n}\n\n#digital-key .data.selected{\n border-color:var(--purple) !important;\n background:var(--purple-soft) !important;\n color:#2b2633 !important;\n -webkit-text-fill-color:#2b2633 !important;\n}\n\n.icon{\n display:block;\n font-size:24px;\n margin-bottom:7px;\n}\n\n\/* =========================\nOPCIONES\n========================= *\/\n\n.choice-grid{\n display:grid;\n grid-template-columns:repeat(2,1fr);\n gap:14px;\n margin-top:20px;\n}\n\n#digital-key .choice{\n border:2px solid var(--line) !important;\n background:#ffffff !important;\n border-radius:17px !important;\n padding:17px !important;\n min-height:100px;\n cursor:pointer;\n text-align:left !important;\n transition:.2s;\n color:#2b2633 !important;\n -webkit-text-fill-color:#2b2633 !important;\n opacity:1 !important;\n box-shadow:none !important;\n line-height:1.5;\n}\n\n#digital-key .choice:hover{\n border-color:var(--purple) !important;\n background:#fbf9ff !important;\n}\n\n#digital-key .choice.selected{\n border-color:var(--purple) !important;\n background:var(--purple-soft) !important;\n color:#2b2633 !important;\n -webkit-text-fill-color:#2b2633 !important;\n}\n\n#digital-key .choice.correct{\n background:#f1faf5 !important;\n border-color:#72a98b !important;\n color:#245b41 !important;\n -webkit-text-fill-color:#245b41 !important;\n}\n\n#digital-key .choice.warning{\n background:#fff9ed !important;\n border-color:#d7a84d !important;\n color:#765018 !important;\n -webkit-text-fill-color:#765018 !important;\n}\n\n#digital-key .choice strong{\n display:block;\n color:#32106d !important;\n -webkit-text-fill-color:#32106d !important;\n margin-bottom:7px;\n}\n\n\/* =========================\nRETROALIMENTACI\u00d3N\n========================= *\/\n\n.feedback{\n display:none;\n margin-top:18px;\n padding:16px;\n border-radius:15px;\n line-height:1.5;\n}\n\n.feedback.show{\n display:block;\n}\n\n.feedback.good{\n background:#f1faf5 !important;\n border:1px solid #b8ddc8;\n color:#245b41 !important;\n -webkit-text-fill-color:#245b41 !important;\n}\n\n.feedback.good strong{\n color:#245b41 !important;\n -webkit-text-fill-color:#245b41 !important;\n}\n\n.feedback.think{\n background:#fff9ed !important;\n border:1px solid #ecd39f;\n color:#765018 !important;\n -webkit-text-fill-color:#765018 !important;\n}\n\n.feedback.think strong{\n color:#765018 !important;\n -webkit-text-fill-color:#765018 !important;\n}\n\n\/* =========================\nREGLAS\n========================= *\/\n\n.rules{\n display:grid;\n grid-template-columns:repeat(3,1fr);\n gap:12px;\n margin-top:25px;\n}\n\n.rule{\n border:1px solid var(--line);\n border-radius:16px;\n padding:17px;\n line-height:1.5;\n background:#ffffff;\n color:var(--text);\n}\n\n.rule .emoji{\n font-size:28px;\n display:block;\n margin-bottom:8px;\n}\n\n.rule strong{\n color:var(--purple) !important;\n}\n\n\/* =========================\nREFLEXI\u00d3N\n========================= *\/\n\n.reflection-options{\n display:grid;\n gap:10px;\n margin:18px 0;\n}\n\n#digital-key .reflection-option{\n border:1px solid var(--line) !important;\n border-radius:14px !important;\n background:#ffffff !important;\n padding:14px !important;\n cursor:pointer;\n text-align:left !important;\n color:#2b2633 !important;\n -webkit-text-fill-color:#2b2633 !important;\n opacity:1 !important;\n box-shadow:none !important;\n line-height:1.5;\n}\n\n#digital-key .reflection-option:hover{\n border-color:var(--purple) !important;\n background:#fbf9ff !important;\n}\n\n#digital-key .reflection-option.selected{\n background:var(--purple-soft) !important;\n border-color:var(--purple) !important;\n color:var(--purple-dark) !important;\n -webkit-text-fill-color:var(--purple-dark) !important;\n font-weight:bold;\n}\n\n#digital-key textarea{\n width:100%;\n min-height:110px;\n border:2px solid var(--line) !important;\n border-radius:15px !important;\n padding:15px !important;\n resize:vertical;\n font-size:16px !important;\n margin-top:10px;\n background:#ffffff !important;\n color:#2b2633 !important;\n -webkit-text-fill-color:#2b2633 !important;\n}\n\n#digital-key textarea:focus{\n border-color:var(--purple) !important;\n outline:none !important;\n}\n\n#digital-key textarea::placeholder{\n color:#8f8799 !important;\n opacity:1 !important;\n}\n\n.summary{\n margin-top:20px;\n border:2px solid var(--purple);\n border-radius:20px;\n padding:22px;\n background:#fbf8ff;\n color:var(--text);\n}\n\n#digital-key .summary h3{\n color:var(--purple) !important;\n margin-top:0;\n}\n\n.summary li{\n margin:8px 0;\n}\n\n\/* =========================\nBOTONES\n========================= *\/\n\n#digital-key button{\n font-family:Arial, Helvetica, sans-serif !important;\n opacity:1 !important;\n text-shadow:none !important;\n}\n\n#digital-key .check-button{\n border:0 !important;\n border-radius:30px !important;\n padding:12px 20px !important;\n font-weight:bold !important;\n cursor:pointer;\n background:var(--purple) !important;\n color:#ffffff !important;\n -webkit-text-fill-color:#ffffff !important;\n}\n\n#digital-key .check-button:hover{\n background:var(--purple-dark) !important;\n}\n\n#digital-key .nav-button{\n border:0 !important;\n border-radius:30px !important;\n padding:12px 20px !important;\n font-weight:bold !important;\n cursor:pointer;\n}\n\n#digital-key .next{\n background:var(--purple) !important;\n color:#ffffff !important;\n -webkit-text-fill-color:#ffffff !important;\n}\n\n#digital-key .next:hover{\n background:var(--purple-dark) !important;\n}\n\n#digital-key .previous{\n background:#eee7f7 !important;\n color:var(--purple) !important;\n -webkit-text-fill-color:var(--purple) !important;\n}\n\n#digital-key .previous:disabled{\n opacity:.4 !important;\n cursor:not-allowed;\n}\n\n#digital-key .reset-button{\n background:#ffffff !important;\n color:var(--purple) !important;\n -webkit-text-fill-color:var(--purple) !important;\n border:1px solid var(--line) !important;\n border-radius:30px !important;\n padding:12px 20px !important;\n font-weight:bold !important;\n cursor:pointer;\n margin-top:10px;\n}\n\n\/* =========================\nNAVEGACI\u00d3N\n========================= *\/\n\n.navigation{\n padding:20px 28px 25px;\n border-top:1px solid var(--line);\n display:flex;\n justify-content:space-between;\n background:#fcfaff;\n}\n\n\/* =========================\nRESPONSIVE\n========================= *\/\n\n@media(max-width:760px){\n\n #digital-key{\n width:calc(100% - 12px);\n margin:6px auto;\n }\n\n #digital-key h1{\n font-size:29px;\n }\n\n #digital-key h2{\n font-size:23px;\n }\n\n .data-grid{\n grid-template-columns:repeat(2,1fr);\n }\n\n .choice-grid,\n .rules{\n grid-template-columns:1fr;\n }\n}\n\n@media(max-width:460px){\n\n .data-grid{\n grid-template-columns:1fr;\n }\n\n .navigation{\n flex-direction:column-reverse;\n gap:10px;\n }\n\n .nav-button{\n width:100%;\n }\n}\n\n<\/style>\n<\/head>\n\n\n<body>\n\n<div id=\"digital-key\">\n\n<header class=\"header\">\n\n<div class=\"top\">\n\n<div class=\"brand\">\n🔐 MY DIGITAL KEY – 1\n<\/div>\n\n<div class=\"step\" id=\"stepLabel\">\n1 de 5\n<\/div>\n\n<\/div>\n\n<h1>LECCI\u00d3N 1 \u00b7 MI MUNDO DIGITAL<\/h1>\n\n<p class=\"subtitle\">\nPienso antes de compartir informaci\u00f3n en l\u00ednea.\n<\/p>\n\n<div class=\"progress\">\n<div class=\"progress-bar\" id=\"progressBar\"><\/div>\n<\/div>\n\n<\/header>\n\n\n<main class=\"content\">\n\n\n\n\n\n\n<section class=\"screen active\">\n\n<div class=\"section-label\">\n\n<span class=\"number\">1<\/span>\n\nLa situaci\u00f3n\n\n<\/div>\n\n<h2>\nKeyla quiere crear un p\u00f3ster.\n<\/h2>\n\n<p class=\"instructions\">\nAntes de comenzar, aparece una situaci\u00f3n que necesita pensar.\n<\/p>\n\n\n<div class=\"story\">\n\n<div class=\"avatar\">\n👧\n<\/div>\n\n<p>\n\nKeyla quiere usar Canva para crear un p\u00f3ster sobre\n<strong>sus actividades favoritas.<\/strong>\n\nAl entrar, una aplicaci\u00f3n le pide varios datos antes de continuar.\n\n<\/p>\n\n<\/div>\n\n\n<div class=\"story\">\n\n<div class=\"avatar\">\n💬\n<\/div>\n\n<p>\n\nUn compa\u00f1ero le dice:\n\n<strong>\u201cPon todo r\u00e1pido para empezar.\u201d<\/strong>\n\nKeyla quiere comenzar su p\u00f3ster, pero no est\u00e1 segura de que todos esos datos sean necesarios.\n\n<\/p>\n\n<\/div>\n\n\n<div class=\"callout\">\n\n<strong>Tu misi\u00f3n:<\/strong>\n\nAyuda a Keyla a pensar qu\u00e9 informaci\u00f3n puede usar,\nqu\u00e9 informaci\u00f3n debe cuidar y qu\u00e9 puede hacer cuando tenga una duda.\n\n<\/div>\n\n<\/section>\n\n\n\n\n\n\n<section class=\"screen\">\n\n<div class=\"section-label\">\n\n<span class=\"number\">2<\/span>\n\nAntes de compartir\n\n<\/div>\n\n<h2>\n\u00bfQu\u00e9 informaci\u00f3n usar\u00edas?\n<\/h2>\n\n<p class=\"instructions\">\n\nKeyla quiere hacer un p\u00f3ster sobre sus gustos.\n\nToca \u00fanicamente los datos que consideres adecuados para ese p\u00f3ster.\n\nPuedes elegir m\u00e1s de uno.\n\n<\/p>\n\n\n<div class=\"data-grid\">\n\n\n<button type=\"button\" class=\"data\" data-safe=\"false\">\n\n<span class=\"icon\">\n🪪\n<\/span>\n\nMi nombre completo\n\n<\/button>\n\n\n<button type=\"button\" class=\"data\" data-safe=\"false\">\n\n<span class=\"icon\">\n🏫\n<\/span>\n\nMi escuela\n\n<\/button>\n\n\n<button type=\"button\" class=\"data\" data-safe=\"false\">\n\n<span class=\"icon\">\n📧\n<\/span>\n\nMi correo personal\n\n<\/button>\n\n\n<button type=\"button\" class=\"data\" data-safe=\"true\">\n\n<span class=\"icon\">\n🎨\n<\/span>\n\nMi color favorito\n\n<\/button>\n\n\n<button type=\"button\" class=\"data\" data-safe=\"true\">\n\n<span class=\"icon\">\n🍕\n<\/span>\n\nMi comida favorita\n\n<\/button>\n\n\n<button type=\"button\" class=\"data\" data-safe=\"true\">\n\n<span class=\"icon\">\n🐾\n<\/span>\n\nMi animal favorito\n\n<\/button>\n\n\n<button type=\"button\" class=\"data\" data-safe=\"false\">\n\n<span class=\"icon\">\n🔑\n<\/span>\n\nMi contrase\u00f1a\n\n<\/button>\n\n\n<button type=\"button\" class=\"data\" data-safe=\"true\">\n\n<span class=\"icon\">\n✏️\n<\/span>\n\nUn dibujo que hice\n\n<\/button>\n\n\n<button type=\"button\" class=\"data\" data-safe=\"false\">\n\n<span class=\"icon\">\n📍\n<\/span>\n\nLa ciudad donde vivo\n\n<\/button>\n\n\n<\/div>\n\n\n<button type=\"button\" class=\"check-button\" id=\"checkData\">\n\nRevisar mi elecci\u00f3n\n\n<\/button>\n\n\n<div class=\"feedback\" id=\"dataFeedback\"><\/div>\n\n<\/section>\n\n\n\n\n\n\n<section class=\"screen\">\n\n<div class=\"section-label\">\n\n<span class=\"number\">3<\/span>\n\nTomo una decisi\u00f3n\n\n<\/div>\n\n<h2>\nAhora la aplicaci\u00f3n pide m\u00e1s informaci\u00f3n.\n<\/h2>\n\n<p class=\"instructions\">\n\nAparecen espacios para escribir:\n\n<strong>\nnombre completo, escuela, correo y contrase\u00f1a.\n<\/strong>\n\nPero Keyla solamente quiere crear un p\u00f3ster sobre sus actividades favoritas.\n\n<\/p>\n\n\n<div class=\"choice-grid\" id=\"decisionChoices\">\n\n\n<button type=\"button\" class=\"choice\" data-value=\"risk\">\n\n<strong>\nA. Escribo todo.\n<\/strong>\n\nAs\u00ed puedo comenzar r\u00e1pidamente.\n\n<\/button>\n\n\n<button type=\"button\" class=\"choice\" data-value=\"safe\">\n\n<strong>\nB. Me detengo y pregunto.\n<\/strong>\n\nReviso con un adulto de confianza qu\u00e9 informaci\u00f3n es realmente necesaria.\n\n<\/button>\n\n\n<button type=\"button\" class=\"choice\" data-value=\"think\">\n\n<strong>\nC. Invento los datos.\n<\/strong>\n\nAs\u00ed la aplicaci\u00f3n me deja continuar.\n\n<\/button>\n\n\n<button type=\"button\" class=\"choice\" data-value=\"think\">\n\n<strong>\nD. Comparto solamente mi contrase\u00f1a.\n<\/strong>\n\nEs un solo dato, as\u00ed que parece menos importante.\n\n<\/button>\n\n\n<\/div>\n\n\n<div class=\"feedback\" id=\"decisionFeedback\"><\/div>\n\n<\/section>\n\n\n\n\n\n\n<section class=\"screen\">\n\n<div class=\"section-label\">\n\n<span class=\"number\">4<\/span>\n\nPienso un poco m\u00e1s\n\n<\/div>\n\n\n<h2>\n\u00bfQu\u00e9 puedo preguntarme antes de compartir?\n<\/h2>\n\n<p class=\"instructions\">\n\nNo siempre necesitamos memorizar una lista.\n\nTambi\u00e9n podemos aprender a hacernos buenas preguntas antes de compartir informaci\u00f3n.\n\nToca las preguntas que creas que ayudan a tomar una buena decisi\u00f3n.\n\n<\/p>\n\n\n<div class=\"choice-grid\" id=\"thinkChoices\">\n\n\n<button type=\"button\" class=\"choice\" data-value=\"good\">\n\n<strong>\n\u00bfNecesito compartir este dato para hacer la actividad?\n<\/strong>\n\nSi no lo necesito, puedo cuidarlo.\n\n<\/button>\n\n\n<button type=\"button\" class=\"choice\" data-value=\"good\">\n\n<strong>\n\u00bfEste dato ayuda a que alguien sepa exactamente qui\u00e9n soy?\n<\/strong>\n\nSi me identifica, debo pensar con m\u00e1s cuidado.\n\n<\/button>\n\n\n<button type=\"button\" class=\"choice\" data-value=\"good\">\n\n<strong>\n\u00bfUn adulto de confianza sabe que voy a compartirlo?\n<\/strong>\n\nPedir ayuda tambi\u00e9n puede ser una buena decisi\u00f3n.\n\n<\/button>\n\n\n<button type=\"button\" class=\"choice\" data-value=\"risk\">\n\n<strong>\n\u00bfMe deja avanzar m\u00e1s r\u00e1pido?\n<\/strong>\n\nIr r\u00e1pido no significa que sea una decisi\u00f3n segura.\n\n<\/button>\n\n\n<\/div>\n\n\n<div class=\"rules\">\n\n\n<div class=\"rule\">\n\n<span class=\"emoji\">\n🔎\n<\/span>\n\n<strong>\n\u00bfEs necesario?\n<\/strong>\n\n<br>\n\nComparto solamente lo que la actividad realmente necesita.\n\n<\/div>\n\n\n<div class=\"rule\">\n\n<span class=\"emoji\">\n🛡️\n<\/span>\n\n<strong>\n\u00bfMe identifica?\n<\/strong>\n\n<br>\n\nCuido la informaci\u00f3n que puede decir qui\u00e9n soy.\n\n<\/div>\n\n\n<div class=\"rule\">\n\n<span class=\"emoji\">\n🙋\n<\/span>\n\n<strong>\n\u00bfTengo una duda?\n<\/strong>\n\n<br>\n\nPuedo detenerme y preguntar a un adulto de confianza.\n\n<\/div>\n\n\n<\/div>\n\n<\/section>\n\n\n\n\n\n\n<section class=\"screen\">\n\n<div class=\"section-label\">\n\n<span class=\"number\">5<\/span>\n\nMi reflexi\u00f3n\n\n<\/div>\n\n\n<h2>\n\u00bfQu\u00e9 quiero recordar?\n<\/h2>\n\n<p class=\"instructions\">\n\nElige una idea que te parezca importante.\n\nDespu\u00e9s escribe tu propia decisi\u00f3n.\n\n<\/p>\n\n\n<div class=\"reflection-options\">\n\n\n<button type=\"button\" class=\"reflection-option\">\n\nAntes de compartir, pienso si ese dato es realmente necesario.\n\n<\/button>\n\n\n<button type=\"button\" class=\"reflection-option\">\n\nSi una app pide informaci\u00f3n personal, no tengo que responder r\u00e1pido.\n\n<\/button>\n\n\n<button type=\"button\" class=\"reflection-option\">\n\nCuando no estoy seguro, puedo pedir ayuda a un adulto de confianza.\n\n<\/button>\n\n\n<\/div>\n\n\n<label for=\"reflection\">\n\n<strong>\nCompleta:\n<\/strong>\n\n\u201cEn mi mundo digital, yo voy a\u2026\u201d\n\n<\/label>\n\n\n<textarea\nid=\"reflection\"\nmaxlength=\"220\"\nplaceholder=\"Escribe aqu\u00ed tu decisi\u00f3n...\"><\/textarea>\n\n\n<div class=\"summary\">\n\n<h3>\nMi Digital Key de hoy 🔐\n<\/h3>\n\n<p>\n\nNo necesito compartir todos mis datos para participar en una actividad digital.\n\nAntes de continuar puedo detenerme, pensar y pedir ayuda.\n\n<\/p>\n\n\n<ul>\n\n<li>\nComparto solamente lo necesario.\n<\/li>\n\n<li>\nCuido los datos que pueden identificarme.\n<\/li>\n\n<li>\nPregunto cuando tengo una duda.\n<\/li>\n\n<\/ul>\n\n\n<button type=\"button\" class=\"reset-button\" id=\"reset\">\n\nVolver a empezar\n\n<\/button>\n\n<\/div>\n\n<\/section>\n\n\n<\/main>\n\n\n<footer class=\"navigation\">\n\n\n<button\ntype=\"button\"\nclass=\"nav-button previous\"\nid=\"previous\"\ndisabled>\n\n\u2190 Anterior\n\n<\/button>\n\n\n<button\ntype=\"button\"\nclass=\"nav-button next\"\nid=\"next\">\n\nContinuar \u2192\n\n<\/button>\n\n\n<\/footer>\n\n<\/div>\n\n\n<script>\n\n(function(){\n\nconst root =\ndocument.getElementById(\"digital-key\");\n\nif(!root){\nreturn;\n}\n\n\nconst screens =\nArray.from(\nroot.querySelectorAll(\".screen\")\n);\n\n\nconst previous =\ndocument.getElementById(\"previous\");\n\n\nconst next =\ndocument.getElementById(\"next\");\n\n\nconst progress =\ndocument.getElementById(\"progressBar\");\n\n\nconst stepLabel =\ndocument.getElementById(\"stepLabel\");\n\n\nlet current = 0;\n\n\n\/* =========================================\nNAVEGACI\u00d3N\n========================================= *\/\n\nfunction showScreen(index){\n\ncurrent =\nMath.max(\n0,\nMath.min(\nindex,\nscreens.length-1\n)\n);\n\n\nscreens.forEach(\nfunction(screen,i){\n\nscreen.classList.toggle(\n\"active\",\ni===current\n);\n\n}\n);\n\n\nconst percent =\n((current+1)\/screens.length)*100;\n\n\nprogress.style.width =\npercent+\"%\";\n\n\nstepLabel.textContent =\n(current+1)+\" de \"+screens.length;\n\n\nprevious.disabled =\ncurrent===0;\n\n\nif(current===screens.length-1){\n\nnext.style.display =\n\"none\";\n\n}else{\n\nnext.style.display =\n\"inline-block\";\n\n}\n\n\nsetTimeout(function(){\n\nroot.scrollIntoView({\nbehavior:\"smooth\",\nblock:\"start\"\n});\n\n},50);\n\n}\n\n\nprevious.addEventListener(\n\"click\",\nfunction(){\n\nshowScreen(\ncurrent-1\n);\n\n}\n);\n\n\nnext.addEventListener(\n\"click\",\nfunction(){\n\nshowScreen(\ncurrent+1\n);\n\n}\n);\n\n\n\/* =========================================\nPANTALLA 2\nDATOS\n========================================= *\/\n\nconst dataButtons =\nArray.from(\nroot.querySelectorAll(\".data\")\n);\n\n\nconst checkData =\ndocument.getElementById(\"checkData\");\n\n\nconst dataFeedback =\ndocument.getElementById(\"dataFeedback\");\n\n\ndataButtons.forEach(\nfunction(button){\n\nbutton.addEventListener(\n\"click\",\nfunction(){\n\nbutton.classList.toggle(\n\"selected\"\n);\n\n}\n);\n\n}\n);\n\n\ncheckData.addEventListener(\n\"click\",\nfunction(){\n\n\nconst selected =\ndataButtons.filter(\nfunction(button){\n\nreturn button.classList.contains(\n\"selected\"\n);\n\n}\n);\n\n\nif(selected.length===0){\n\ndataFeedback.className =\n\"feedback think show\";\n\ndataFeedback.innerHTML =\n\"<strong>Primero elige.<\/strong> Toca la informaci\u00f3n que pondr\u00edas en el p\u00f3ster.\";\n\nreturn;\n\n}\n\n\nconst unsafe =\nselected.some(\nfunction(button){\n\nreturn button.dataset.safe===\"false\";\n\n}\n);\n\n\nconst safeCount =\nselected.filter(\nfunction(button){\n\nreturn button.dataset.safe===\"true\";\n\n}\n).length;\n\n\nif(!unsafe && safeCount>=2){\n\ndataFeedback.className =\n\"feedback good show\";\n\ndataFeedback.innerHTML =\n\"<strong>Buena decisi\u00f3n.<\/strong> Elegiste informaci\u00f3n sobre gustos y creaciones sin incluir datos personales que no son necesarios para el p\u00f3ster.\";\n\n}else{\n\ndataFeedback.className =\n\"feedback think show\";\n\ndataFeedback.innerHTML =\n\"<strong>Pi\u00e9nsalo otra vez.<\/strong> Para hablar de tus gustos no necesitas compartir tu nombre completo, escuela, ciudad, correo ni contrase\u00f1a. Preg\u00fantate: \u00bfrealmente necesito compartir este dato?\";\n\n}\n\n}\n);\n\n\n\/* =========================================\nPANTALLA 3\nDECISI\u00d3N\n========================================= *\/\n\nconst decisionChoices =\nArray.from(\nroot.querySelectorAll(\n\"#decisionChoices .choice\"\n)\n);\n\n\nconst decisionFeedback =\ndocument.getElementById(\n\"decisionFeedback\"\n);\n\n\ndecisionChoices.forEach(\nfunction(button){\n\nbutton.addEventListener(\n\"click\",\nfunction(){\n\n\ndecisionChoices.forEach(\nfunction(other){\n\nother.classList.remove(\n\"selected\",\n\"correct\",\n\"warning\"\n);\n\n}\n);\n\n\nbutton.classList.add(\n\"selected\"\n);\n\n\nif(\nbutton.dataset.value===\"safe\"\n){\n\nbutton.classList.add(\n\"correct\"\n);\n\ndecisionFeedback.className =\n\"feedback good show\";\n\ndecisionFeedback.innerHTML =\n\"<strong>Buena decisi\u00f3n.<\/strong> Detenerse y preguntar permite revisar si la informaci\u00f3n realmente es necesaria antes de compartirla.\";\n\n}\n\n\nelse if(\nbutton.dataset.value===\"risk\"\n){\n\nbutton.classList.add(\n\"warning\"\n);\n\ndecisionFeedback.className =\n\"feedback think show\";\n\ndecisionFeedback.innerHTML =\n\"<strong>Ir r\u00e1pido puede hacernos compartir informaci\u00f3n que no necesitamos compartir.<\/strong> Antes de escribir datos personales conviene detenerse y revisar.\";\n\n}\n\n\nelse{\n\nbutton.classList.add(\n\"warning\"\n);\n\ndecisionFeedback.className =\n\"feedback think show\";\n\ndecisionFeedback.innerHTML =\n\"<strong>Eso tampoco soluciona el problema.<\/strong> Inventar informaci\u00f3n o compartir una contrase\u00f1a no es la mejor opci\u00f3n. Si tenemos dudas, podemos detenernos y pedir ayuda.\";\n\n}\n\n}\n);\n\n}\n);\n\n\n\/* =========================================\nPANTALLA 4\nPREGUNTAS PARA PENSAR\n========================================= *\/\n\nconst thinkChoices =\nArray.from(\nroot.querySelectorAll(\n\"#thinkChoices .choice\"\n)\n);\n\n\nthinkChoices.forEach(\nfunction(button){\n\nbutton.addEventListener(\n\"click\",\nfunction(){\n\n\nbutton.classList.toggle(\n\"selected\"\n);\n\n\nif(\nbutton.dataset.value===\"risk\" &&\nbutton.classList.contains(\n\"selected\"\n)\n){\n\nbutton.classList.add(\n\"warning\"\n);\n\n}else{\n\nbutton.classList.remove(\n\"warning\"\n);\n\n}\n\n}\n);\n\n}\n);\n\n\n\/* =========================================\nPANTALLA 5\nREFLEXI\u00d3N FINAL\n========================================= *\/\n\nconst reflectionOptions =\nArray.from(\nroot.querySelectorAll(\n\".reflection-option\"\n)\n);\n\n\nconst reflection =\ndocument.getElementById(\n\"reflection\"\n);\n\n\nreflectionOptions.forEach(\nfunction(button){\n\nbutton.addEventListener(\n\"click\",\nfunction(){\n\n\nreflectionOptions.forEach(\nfunction(other){\n\nother.classList.remove(\n\"selected\"\n);\n\n}\n);\n\n\nbutton.classList.add(\n\"selected\"\n);\n\n\nif(\nreflection.value.trim()===\"\"\n){\n\nreflection.value =\nbutton.textContent.trim();\n\n}\n\n\nreflection.focus();\n\n}\n);\n\n}\n);\n\n\n\/* =========================================\nREINICIAR\n========================================= *\/\n\ndocument\n.getElementById(\"reset\")\n.addEventListener(\n\"click\",\nfunction(){\n\n\ndataButtons.forEach(\nfunction(button){\n\nbutton.classList.remove(\n\"selected\"\n);\n\n}\n);\n\n\ndecisionChoices.forEach(\nfunction(button){\n\nbutton.classList.remove(\n\"selected\",\n\"correct\",\n\"warning\"\n);\n\n}\n);\n\n\nthinkChoices.forEach(\nfunction(button){\n\nbutton.classList.remove(\n\"selected\",\n\"warning\"\n);\n\n}\n);\n\n\nreflectionOptions.forEach(\nfunction(button){\n\nbutton.classList.remove(\n\"selected\"\n);\n\n}\n);\n\n\ndataFeedback.className =\n\"feedback\";\n\n\ndataFeedback.innerHTML =\n\"\";\n\n\ndecisionFeedback.className =\n\"feedback\";\n\n\ndecisionFeedback.innerHTML =\n\"\";\n\n\nreflection.value =\n\"\";\n\n\nshowScreen(0);\n\n}\n);\n\n\nshowScreen(0);\n\n\n})();\n\n<\/script>\n\n\n<\/body>\n<\/html>\n","protected":false},"excerpt":{"rendered":"<p>My Digital Key 1 \u00b7 Lecci\u00f3n 1 🔐 MY DIGITAL KEY – 1 1 de 5 LECCI\u00d3N 1 \u00b7 MI MUNDO DIGITAL Pienso antes de […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-1820","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/cuentoskecuentan.com\/index.php?rest_route=\/wp\/v2\/pages\/1820","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/cuentoskecuentan.com\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/cuentoskecuentan.com\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/cuentoskecuentan.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/cuentoskecuentan.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=1820"}],"version-history":[{"count":3,"href":"https:\/\/cuentoskecuentan.com\/index.php?rest_route=\/wp\/v2\/pages\/1820\/revisions"}],"predecessor-version":[{"id":1825,"href":"https:\/\/cuentoskecuentan.com\/index.php?rest_route=\/wp\/v2\/pages\/1820\/revisions\/1825"}],"wp:attachment":[{"href":"https:\/\/cuentoskecuentan.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=1820"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

{"id":1820,"date":"2026-09-01T00:00:44","date_gmt":"2026-09-01T00:00:44","guid":{"rendered":"https:\/\/cuentoskecuentan.com\/?page_id=1820"},"modified":"2026-09-01T01:04:07","modified_gmt":"2026-09-01T01:04:07","slug":"lecion-1-my-digital-key-1","status":"publish","type":"page","link":"https:\/\/cuentoskecuentan.com\/?page_id=1820","title":{"rendered":"Leci\u00f3n 1. My Digital Key 1."},"content":{"rendered":"\n\n\n\n\n\n\nMy Digital Key 1 \u00b7 Lecci\u00f3n 1<\/title>\n\n<style>\n\n:root{\n --purple:#4B169B;\n --purple-dark:#32106d;\n --purple-soft:#F5F0FC;\n --yellow:#F7B51B;\n --text:#2b2633;\n --gray:#6f6878;\n --line:#DDD2EF;\n --white:#ffffff;\n}\n\n*{\n box-sizing:border-box;\n}\n\nbody{\n margin:0;\n background:#faf9fc;\n color:var(--text);\n font-family:Arial, Helvetica, sans-serif;\n}\n\n#digital-key{\n width:min(960px, calc(100% - 24px));\n margin:25px auto;\n background:#ffffff;\n border:1px solid var(--line);\n border-radius:24px;\n overflow:hidden;\n box-shadow:0 12px 35px rgba(75,22,155,.10);\n}\n\n\/* =========================\nHEADER\n========================= *\/\n\n.header{\n padding:24px 28px 20px;\n border-bottom:1px solid var(--line);\n}\n\n.top{\n display:flex;\n justify-content:space-between;\n align-items:center;\n gap:15px;\n}\n\n.brand{\n background:var(--purple);\n color:#ffffff !important;\n -webkit-text-fill-color:#ffffff !important;\n padding:8px 14px;\n border-radius:30px;\n font-size:13px;\n font-weight:bold;\n}\n\n.step{\n color:var(--purple);\n font-weight:bold;\n}\n\n#digital-key h1{\n color:var(--purple) !important;\n font-size:38px;\n margin:18px 0 5px;\n line-height:1.1;\n}\n\n.subtitle{\n color:var(--gray);\n margin:0;\n font-size:17px;\n}\n\n.progress{\n height:8px;\n background:#eee7f7;\n border-radius:10px;\n margin-top:18px;\n overflow:hidden;\n}\n\n.progress-bar{\n height:100%;\n width:20%;\n background:var(--purple);\n transition:.3s;\n}\n\n\/* =========================\nCONTENIDO\n========================= *\/\n\n.content{\n min-height:520px;\n padding:32px 28px;\n}\n\n.screen{\n display:none;\n}\n\n.screen.active{\n display:block;\n}\n\n.section-label{\n display:flex;\n align-items:center;\n gap:10px;\n color:var(--purple);\n font-weight:bold;\n margin-bottom:12px;\n}\n\n.number{\n width:35px;\n height:35px;\n background:var(--purple);\n color:#ffffff !important;\n -webkit-text-fill-color:#ffffff !important;\n border-radius:50%;\n display:flex;\n align-items:center;\n justify-content:center;\n flex-shrink:0;\n}\n\n#digital-key h2{\n color:var(--purple-dark) !important;\n font-size:28px;\n margin:10px 0;\n line-height:1.25;\n}\n\n.instructions{\n line-height:1.6;\n max-width:760px;\n font-size:17px;\n color:var(--text);\n}\n\n\/* =========================\nHISTORIA\n========================= *\/\n\n.story{\n border:1px solid var(--line);\n border-radius:18px;\n padding:18px;\n display:grid;\n grid-template-columns:65px 1fr;\n gap:15px;\n align-items:center;\n margin:18px 0;\n background:#ffffff;\n}\n\n.avatar{\n width:60px;\n height:60px;\n border-radius:50%;\n background:var(--purple-soft);\n display:flex;\n align-items:center;\n justify-content:center;\n font-size:30px;\n}\n\n.story p{\n margin:0;\n line-height:1.6;\n color:var(--text);\n}\n\n.story strong{\n color:var(--purple-dark) !important;\n}\n\n.callout{\n border-left:5px solid var(--yellow);\n background:#fffaf0;\n padding:15px;\n border-radius:12px;\n line-height:1.5;\n margin-top:20px;\n color:var(--text);\n}\n\n\/* =========================\nDATOS\n========================= *\/\n\n.data-grid{\n display:grid;\n grid-template-columns:repeat(3,1fr);\n gap:12px;\n margin:20px 0;\n}\n\n#digital-key .data{\n background:#ffffff !important;\n border:2px solid var(--line) !important;\n border-radius:15px !important;\n padding:14px !important;\n cursor:pointer;\n min-height:85px;\n text-align:left !important;\n transition:.2s;\n color:#2b2633 !important;\n -webkit-text-fill-color:#2b2633 !important;\n opacity:1 !important;\n font-weight:500 !important;\n box-shadow:none !important;\n}\n\n#digital-key .data:hover{\n border-color:var(--purple) !important;\n background:#fbf9ff !important;\n}\n\n#digital-key .data.selected{\n border-color:var(--purple) !important;\n background:var(--purple-soft) !important;\n color:#2b2633 !important;\n -webkit-text-fill-color:#2b2633 !important;\n}\n\n.icon{\n display:block;\n font-size:24px;\n margin-bottom:7px;\n}\n\n\/* =========================\nOPCIONES\n========================= *\/\n\n.choice-grid{\n display:grid;\n grid-template-columns:repeat(2,1fr);\n gap:14px;\n margin-top:20px;\n}\n\n#digital-key .choice{\n border:2px solid var(--line) !important;\n background:#ffffff !important;\n border-radius:17px !important;\n padding:17px !important;\n min-height:100px;\n cursor:pointer;\n text-align:left !important;\n transition:.2s;\n color:#2b2633 !important;\n -webkit-text-fill-color:#2b2633 !important;\n opacity:1 !important;\n box-shadow:none !important;\n line-height:1.5;\n}\n\n#digital-key .choice:hover{\n border-color:var(--purple) !important;\n background:#fbf9ff !important;\n}\n\n#digital-key .choice.selected{\n border-color:var(--purple) !important;\n background:var(--purple-soft) !important;\n color:#2b2633 !important;\n -webkit-text-fill-color:#2b2633 !important;\n}\n\n#digital-key .choice.correct{\n background:#f1faf5 !important;\n border-color:#72a98b !important;\n color:#245b41 !important;\n -webkit-text-fill-color:#245b41 !important;\n}\n\n#digital-key .choice.warning{\n background:#fff9ed !important;\n border-color:#d7a84d !important;\n color:#765018 !important;\n -webkit-text-fill-color:#765018 !important;\n}\n\n#digital-key .choice strong{\n display:block;\n color:#32106d !important;\n -webkit-text-fill-color:#32106d !important;\n margin-bottom:7px;\n}\n\n\/* =========================\nRETROALIMENTACI\u00d3N\n========================= *\/\n\n.feedback{\n display:none;\n margin-top:18px;\n padding:16px;\n border-radius:15px;\n line-height:1.5;\n}\n\n.feedback.show{\n display:block;\n}\n\n.feedback.good{\n background:#f1faf5 !important;\n border:1px solid #b8ddc8;\n color:#245b41 !important;\n -webkit-text-fill-color:#245b41 !important;\n}\n\n.feedback.good strong{\n color:#245b41 !important;\n -webkit-text-fill-color:#245b41 !important;\n}\n\n.feedback.think{\n background:#fff9ed !important;\n border:1px solid #ecd39f;\n color:#765018 !important;\n -webkit-text-fill-color:#765018 !important;\n}\n\n.feedback.think strong{\n color:#765018 !important;\n -webkit-text-fill-color:#765018 !important;\n}\n\n\/* =========================\nREGLAS\n========================= *\/\n\n.rules{\n display:grid;\n grid-template-columns:repeat(3,1fr);\n gap:12px;\n margin-top:25px;\n}\n\n.rule{\n border:1px solid var(--line);\n border-radius:16px;\n padding:17px;\n line-height:1.5;\n background:#ffffff;\n color:var(--text);\n}\n\n.rule .emoji{\n font-size:28px;\n display:block;\n margin-bottom:8px;\n}\n\n.rule strong{\n color:var(--purple) !important;\n}\n\n\/* =========================\nREFLEXI\u00d3N\n========================= *\/\n\n.reflection-options{\n display:grid;\n gap:10px;\n margin:18px 0;\n}\n\n#digital-key .reflection-option{\n border:1px solid var(--line) !important;\n border-radius:14px !important;\n background:#ffffff !important;\n padding:14px !important;\n cursor:pointer;\n text-align:left !important;\n color:#2b2633 !important;\n -webkit-text-fill-color:#2b2633 !important;\n opacity:1 !important;\n box-shadow:none !important;\n line-height:1.5;\n}\n\n#digital-key .reflection-option:hover{\n border-color:var(--purple) !important;\n background:#fbf9ff !important;\n}\n\n#digital-key .reflection-option.selected{\n background:var(--purple-soft) !important;\n border-color:var(--purple) !important;\n color:var(--purple-dark) !important;\n -webkit-text-fill-color:var(--purple-dark) !important;\n font-weight:bold;\n}\n\n#digital-key textarea{\n width:100%;\n min-height:110px;\n border:2px solid var(--line) !important;\n border-radius:15px !important;\n padding:15px !important;\n resize:vertical;\n font-size:16px !important;\n margin-top:10px;\n background:#ffffff !important;\n color:#2b2633 !important;\n -webkit-text-fill-color:#2b2633 !important;\n}\n\n#digital-key textarea:focus{\n border-color:var(--purple) !important;\n outline:none !important;\n}\n\n#digital-key textarea::placeholder{\n color:#8f8799 !important;\n opacity:1 !important;\n}\n\n.summary{\n margin-top:20px;\n border:2px solid var(--purple);\n border-radius:20px;\n padding:22px;\n background:#fbf8ff;\n color:var(--text);\n}\n\n#digital-key .summary h3{\n color:var(--purple) !important;\n margin-top:0;\n}\n\n.summary li{\n margin:8px 0;\n}\n\n\/* =========================\nBOTONES\n========================= *\/\n\n#digital-key button{\n font-family:Arial, Helvetica, sans-serif !important;\n opacity:1 !important;\n text-shadow:none !important;\n}\n\n#digital-key .check-button{\n border:0 !important;\n border-radius:30px !important;\n padding:12px 20px !important;\n font-weight:bold !important;\n cursor:pointer;\n background:var(--purple) !important;\n color:#ffffff !important;\n -webkit-text-fill-color:#ffffff !important;\n}\n\n#digital-key .check-button:hover{\n background:var(--purple-dark) !important;\n}\n\n#digital-key .nav-button{\n border:0 !important;\n border-radius:30px !important;\n padding:12px 20px !important;\n font-weight:bold !important;\n cursor:pointer;\n}\n\n#digital-key .next{\n background:var(--purple) !important;\n color:#ffffff !important;\n -webkit-text-fill-color:#ffffff !important;\n}\n\n#digital-key .next:hover{\n background:var(--purple-dark) !important;\n}\n\n#digital-key .previous{\n background:#eee7f7 !important;\n color:var(--purple) !important;\n -webkit-text-fill-color:var(--purple) !important;\n}\n\n#digital-key .previous:disabled{\n opacity:.4 !important;\n cursor:not-allowed;\n}\n\n#digital-key .reset-button{\n background:#ffffff !important;\n color:var(--purple) !important;\n -webkit-text-fill-color:var(--purple) !important;\n border:1px solid var(--line) !important;\n border-radius:30px !important;\n padding:12px 20px !important;\n font-weight:bold !important;\n cursor:pointer;\n margin-top:10px;\n}\n\n\/* =========================\nNAVEGACI\u00d3N\n========================= *\/\n\n.navigation{\n padding:20px 28px 25px;\n border-top:1px solid var(--line);\n display:flex;\n justify-content:space-between;\n background:#fcfaff;\n}\n\n\/* =========================\nRESPONSIVE\n========================= *\/\n\n@media(max-width:760px){\n\n #digital-key{\n width:calc(100% - 12px);\n margin:6px auto;\n }\n\n #digital-key h1{\n font-size:29px;\n }\n\n #digital-key h2{\n font-size:23px;\n }\n\n .data-grid{\n grid-template-columns:repeat(2,1fr);\n }\n\n .choice-grid,\n .rules{\n grid-template-columns:1fr;\n }\n}\n\n@media(max-width:460px){\n\n .data-grid{\n grid-template-columns:1fr;\n }\n\n .navigation{\n flex-direction:column-reverse;\n gap:10px;\n }\n\n .nav-button{\n width:100%;\n }\n}\n\n<\/style>\n<\/head>\n\n\n<body>\n\n<div id=\"digital-key\">\n\n<header class=\"header\">\n\n<div class=\"top\">\n\n<div class=\"brand\">\n🔐 MY DIGITAL KEY – 1\n<\/div>\n\n<div class=\"step\" id=\"stepLabel\">\n1 de 5\n<\/div>\n\n<\/div>\n\n<h1>LECCI\u00d3N 1 \u00b7 MI MUNDO DIGITAL<\/h1>\n\n<p class=\"subtitle\">\nPienso antes de compartir informaci\u00f3n en l\u00ednea.\n<\/p>\n\n<div class=\"progress\">\n<div class=\"progress-bar\" id=\"progressBar\"><\/div>\n<\/div>\n\n<\/header>\n\n\n<main class=\"content\">\n\n\n\n\n\n\n<section class=\"screen active\">\n\n<div class=\"section-label\">\n\n<span class=\"number\">1<\/span>\n\nLa situaci\u00f3n\n\n<\/div>\n\n<h2>\nKeyla quiere crear un p\u00f3ster.\n<\/h2>\n\n<p class=\"instructions\">\nAntes de comenzar, aparece una situaci\u00f3n que necesita pensar.\n<\/p>\n\n\n<div class=\"story\">\n\n<div class=\"avatar\">\n👧\n<\/div>\n\n<p>\n\nKeyla quiere usar Canva para crear un p\u00f3ster sobre\n<strong>sus actividades favoritas.<\/strong>\n\nAl entrar, una aplicaci\u00f3n le pide varios datos antes de continuar.\n\n<\/p>\n\n<\/div>\n\n\n<div class=\"story\">\n\n<div class=\"avatar\">\n💬\n<\/div>\n\n<p>\n\nUn compa\u00f1ero le dice:\n\n<strong>\u201cPon todo r\u00e1pido para empezar.\u201d<\/strong>\n\nKeyla quiere comenzar su p\u00f3ster, pero no est\u00e1 segura de que todos esos datos sean necesarios.\n\n<\/p>\n\n<\/div>\n\n\n<div class=\"callout\">\n\n<strong>Tu misi\u00f3n:<\/strong>\n\nAyuda a Keyla a pensar qu\u00e9 informaci\u00f3n puede usar,\nqu\u00e9 informaci\u00f3n debe cuidar y qu\u00e9 puede hacer cuando tenga una duda.\n\n<\/div>\n\n<\/section>\n\n\n\n\n\n\n<section class=\"screen\">\n\n<div class=\"section-label\">\n\n<span class=\"number\">2<\/span>\n\nAntes de compartir\n\n<\/div>\n\n<h2>\n\u00bfQu\u00e9 informaci\u00f3n usar\u00edas?\n<\/h2>\n\n<p class=\"instructions\">\n\nKeyla quiere hacer un p\u00f3ster sobre sus gustos.\n\nToca \u00fanicamente los datos que consideres adecuados para ese p\u00f3ster.\n\nPuedes elegir m\u00e1s de uno.\n\n<\/p>\n\n\n<div class=\"data-grid\">\n\n\n<button type=\"button\" class=\"data\" data-safe=\"false\">\n\n<span class=\"icon\">\n🪪\n<\/span>\n\nMi nombre completo\n\n<\/button>\n\n\n<button type=\"button\" class=\"data\" data-safe=\"false\">\n\n<span class=\"icon\">\n🏫\n<\/span>\n\nMi escuela\n\n<\/button>\n\n\n<button type=\"button\" class=\"data\" data-safe=\"false\">\n\n<span class=\"icon\">\n📧\n<\/span>\n\nMi correo personal\n\n<\/button>\n\n\n<button type=\"button\" class=\"data\" data-safe=\"true\">\n\n<span class=\"icon\">\n🎨\n<\/span>\n\nMi color favorito\n\n<\/button>\n\n\n<button type=\"button\" class=\"data\" data-safe=\"true\">\n\n<span class=\"icon\">\n🍕\n<\/span>\n\nMi comida favorita\n\n<\/button>\n\n\n<button type=\"button\" class=\"data\" data-safe=\"true\">\n\n<span class=\"icon\">\n🐾\n<\/span>\n\nMi animal favorito\n\n<\/button>\n\n\n<button type=\"button\" class=\"data\" data-safe=\"false\">\n\n<span class=\"icon\">\n🔑\n<\/span>\n\nMi contrase\u00f1a\n\n<\/button>\n\n\n<button type=\"button\" class=\"data\" data-safe=\"true\">\n\n<span class=\"icon\">\n✏️\n<\/span>\n\nUn dibujo que hice\n\n<\/button>\n\n\n<button type=\"button\" class=\"data\" data-safe=\"false\">\n\n<span class=\"icon\">\n📍\n<\/span>\n\nLa ciudad donde vivo\n\n<\/button>\n\n\n<\/div>\n\n\n<button type=\"button\" class=\"check-button\" id=\"checkData\">\n\nRevisar mi elecci\u00f3n\n\n<\/button>\n\n\n<div class=\"feedback\" id=\"dataFeedback\"><\/div>\n\n<\/section>\n\n\n\n\n\n\n<section class=\"screen\">\n\n<div class=\"section-label\">\n\n<span class=\"number\">3<\/span>\n\nTomo una decisi\u00f3n\n\n<\/div>\n\n<h2>\nAhora la aplicaci\u00f3n pide m\u00e1s informaci\u00f3n.\n<\/h2>\n\n<p class=\"instructions\">\n\nAparecen espacios para escribir:\n\n<strong>\nnombre completo, escuela, correo y contrase\u00f1a.\n<\/strong>\n\nPero Keyla solamente quiere crear un p\u00f3ster sobre sus actividades favoritas.\n\n<\/p>\n\n\n<div class=\"choice-grid\" id=\"decisionChoices\">\n\n\n<button type=\"button\" class=\"choice\" data-value=\"risk\">\n\n<strong>\nA. Escribo todo.\n<\/strong>\n\nAs\u00ed puedo comenzar r\u00e1pidamente.\n\n<\/button>\n\n\n<button type=\"button\" class=\"choice\" data-value=\"safe\">\n\n<strong>\nB. Me detengo y pregunto.\n<\/strong>\n\nReviso con un adulto de confianza qu\u00e9 informaci\u00f3n es realmente necesaria.\n\n<\/button>\n\n\n<button type=\"button\" class=\"choice\" data-value=\"think\">\n\n<strong>\nC. Invento los datos.\n<\/strong>\n\nAs\u00ed la aplicaci\u00f3n me deja continuar.\n\n<\/button>\n\n\n<button type=\"button\" class=\"choice\" data-value=\"think\">\n\n<strong>\nD. Comparto solamente mi contrase\u00f1a.\n<\/strong>\n\nEs un solo dato, as\u00ed que parece menos importante.\n\n<\/button>\n\n\n<\/div>\n\n\n<div class=\"feedback\" id=\"decisionFeedback\"><\/div>\n\n<\/section>\n\n\n\n\n\n\n<section class=\"screen\">\n\n<div class=\"section-label\">\n\n<span class=\"number\">4<\/span>\n\nPienso un poco m\u00e1s\n\n<\/div>\n\n\n<h2>\n\u00bfQu\u00e9 puedo preguntarme antes de compartir?\n<\/h2>\n\n<p class=\"instructions\">\n\nNo siempre necesitamos memorizar una lista.\n\nTambi\u00e9n podemos aprender a hacernos buenas preguntas antes de compartir informaci\u00f3n.\n\nToca las preguntas que creas que ayudan a tomar una buena decisi\u00f3n.\n\n<\/p>\n\n\n<div class=\"choice-grid\" id=\"thinkChoices\">\n\n\n<button type=\"button\" class=\"choice\" data-value=\"good\">\n\n<strong>\n\u00bfNecesito compartir este dato para hacer la actividad?\n<\/strong>\n\nSi no lo necesito, puedo cuidarlo.\n\n<\/button>\n\n\n<button type=\"button\" class=\"choice\" data-value=\"good\">\n\n<strong>\n\u00bfEste dato ayuda a que alguien sepa exactamente qui\u00e9n soy?\n<\/strong>\n\nSi me identifica, debo pensar con m\u00e1s cuidado.\n\n<\/button>\n\n\n<button type=\"button\" class=\"choice\" data-value=\"good\">\n\n<strong>\n\u00bfUn adulto de confianza sabe que voy a compartirlo?\n<\/strong>\n\nPedir ayuda tambi\u00e9n puede ser una buena decisi\u00f3n.\n\n<\/button>\n\n\n<button type=\"button\" class=\"choice\" data-value=\"risk\">\n\n<strong>\n\u00bfMe deja avanzar m\u00e1s r\u00e1pido?\n<\/strong>\n\nIr r\u00e1pido no significa que sea una decisi\u00f3n segura.\n\n<\/button>\n\n\n<\/div>\n\n\n<div class=\"rules\">\n\n\n<div class=\"rule\">\n\n<span class=\"emoji\">\n🔎\n<\/span>\n\n<strong>\n\u00bfEs necesario?\n<\/strong>\n\n<br>\n\nComparto solamente lo que la actividad realmente necesita.\n\n<\/div>\n\n\n<div class=\"rule\">\n\n<span class=\"emoji\">\n🛡️\n<\/span>\n\n<strong>\n\u00bfMe identifica?\n<\/strong>\n\n<br>\n\nCuido la informaci\u00f3n que puede decir qui\u00e9n soy.\n\n<\/div>\n\n\n<div class=\"rule\">\n\n<span class=\"emoji\">\n🙋\n<\/span>\n\n<strong>\n\u00bfTengo una duda?\n<\/strong>\n\n<br>\n\nPuedo detenerme y preguntar a un adulto de confianza.\n\n<\/div>\n\n\n<\/div>\n\n<\/section>\n\n\n\n\n\n\n<section class=\"screen\">\n\n<div class=\"section-label\">\n\n<span class=\"number\">5<\/span>\n\nMi reflexi\u00f3n\n\n<\/div>\n\n\n<h2>\n\u00bfQu\u00e9 quiero recordar?\n<\/h2>\n\n<p class=\"instructions\">\n\nElige una idea que te parezca importante.\n\nDespu\u00e9s escribe tu propia decisi\u00f3n.\n\n<\/p>\n\n\n<div class=\"reflection-options\">\n\n\n<button type=\"button\" class=\"reflection-option\">\n\nAntes de compartir, pienso si ese dato es realmente necesario.\n\n<\/button>\n\n\n<button type=\"button\" class=\"reflection-option\">\n\nSi una app pide informaci\u00f3n personal, no tengo que responder r\u00e1pido.\n\n<\/button>\n\n\n<button type=\"button\" class=\"reflection-option\">\n\nCuando no estoy seguro, puedo pedir ayuda a un adulto de confianza.\n\n<\/button>\n\n\n<\/div>\n\n\n<label for=\"reflection\">\n\n<strong>\nCompleta:\n<\/strong>\n\n\u201cEn mi mundo digital, yo voy a\u2026\u201d\n\n<\/label>\n\n\n<textarea\nid=\"reflection\"\nmaxlength=\"220\"\nplaceholder=\"Escribe aqu\u00ed tu decisi\u00f3n...\"><\/textarea>\n\n\n<div class=\"summary\">\n\n<h3>\nMi Digital Key de hoy 🔐\n<\/h3>\n\n<p>\n\nNo necesito compartir todos mis datos para participar en una actividad digital.\n\nAntes de continuar puedo detenerme, pensar y pedir ayuda.\n\n<\/p>\n\n\n<ul>\n\n<li>\nComparto solamente lo necesario.\n<\/li>\n\n<li>\nCuido los datos que pueden identificarme.\n<\/li>\n\n<li>\nPregunto cuando tengo una duda.\n<\/li>\n\n<\/ul>\n\n\n<button type=\"button\" class=\"reset-button\" id=\"reset\">\n\nVolver a empezar\n\n<\/button>\n\n<\/div>\n\n<\/section>\n\n\n<\/main>\n\n\n<footer class=\"navigation\">\n\n\n<button\ntype=\"button\"\nclass=\"nav-button previous\"\nid=\"previous\"\ndisabled>\n\n\u2190 Anterior\n\n<\/button>\n\n\n<button\ntype=\"button\"\nclass=\"nav-button next\"\nid=\"next\">\n\nContinuar \u2192\n\n<\/button>\n\n\n<\/footer>\n\n<\/div>\n\n\n<script>\n\n(function(){\n\nconst root =\ndocument.getElementById(\"digital-key\");\n\nif(!root){\nreturn;\n}\n\n\nconst screens =\nArray.from(\nroot.querySelectorAll(\".screen\")\n);\n\n\nconst previous =\ndocument.getElementById(\"previous\");\n\n\nconst next =\ndocument.getElementById(\"next\");\n\n\nconst progress =\ndocument.getElementById(\"progressBar\");\n\n\nconst stepLabel =\ndocument.getElementById(\"stepLabel\");\n\n\nlet current = 0;\n\n\n\/* =========================================\nNAVEGACI\u00d3N\n========================================= *\/\n\nfunction showScreen(index){\n\ncurrent =\nMath.max(\n0,\nMath.min(\nindex,\nscreens.length-1\n)\n);\n\n\nscreens.forEach(\nfunction(screen,i){\n\nscreen.classList.toggle(\n\"active\",\ni===current\n);\n\n}\n);\n\n\nconst percent =\n((current+1)\/screens.length)*100;\n\n\nprogress.style.width =\npercent+\"%\";\n\n\nstepLabel.textContent =\n(current+1)+\" de \"+screens.length;\n\n\nprevious.disabled =\ncurrent===0;\n\n\nif(current===screens.length-1){\n\nnext.style.display =\n\"none\";\n\n}else{\n\nnext.style.display =\n\"inline-block\";\n\n}\n\n\nsetTimeout(function(){\n\nroot.scrollIntoView({\nbehavior:\"smooth\",\nblock:\"start\"\n});\n\n},50);\n\n}\n\n\nprevious.addEventListener(\n\"click\",\nfunction(){\n\nshowScreen(\ncurrent-1\n);\n\n}\n);\n\n\nnext.addEventListener(\n\"click\",\nfunction(){\n\nshowScreen(\ncurrent+1\n);\n\n}\n);\n\n\n\/* =========================================\nPANTALLA 2\nDATOS\n========================================= *\/\n\nconst dataButtons =\nArray.from(\nroot.querySelectorAll(\".data\")\n);\n\n\nconst checkData =\ndocument.getElementById(\"checkData\");\n\n\nconst dataFeedback =\ndocument.getElementById(\"dataFeedback\");\n\n\ndataButtons.forEach(\nfunction(button){\n\nbutton.addEventListener(\n\"click\",\nfunction(){\n\nbutton.classList.toggle(\n\"selected\"\n);\n\n}\n);\n\n}\n);\n\n\ncheckData.addEventListener(\n\"click\",\nfunction(){\n\n\nconst selected =\ndataButtons.filter(\nfunction(button){\n\nreturn button.classList.contains(\n\"selected\"\n);\n\n}\n);\n\n\nif(selected.length===0){\n\ndataFeedback.className =\n\"feedback think show\";\n\ndataFeedback.innerHTML =\n\"<strong>Primero elige.<\/strong> Toca la informaci\u00f3n que pondr\u00edas en el p\u00f3ster.\";\n\nreturn;\n\n}\n\n\nconst unsafe =\nselected.some(\nfunction(button){\n\nreturn button.dataset.safe===\"false\";\n\n}\n);\n\n\nconst safeCount =\nselected.filter(\nfunction(button){\n\nreturn button.dataset.safe===\"true\";\n\n}\n).length;\n\n\nif(!unsafe && safeCount>=2){\n\ndataFeedback.className =\n\"feedback good show\";\n\ndataFeedback.innerHTML =\n\"<strong>Buena decisi\u00f3n.<\/strong> Elegiste informaci\u00f3n sobre gustos y creaciones sin incluir datos personales que no son necesarios para el p\u00f3ster.\";\n\n}else{\n\ndataFeedback.className =\n\"feedback think show\";\n\ndataFeedback.innerHTML =\n\"<strong>Pi\u00e9nsalo otra vez.<\/strong> Para hablar de tus gustos no necesitas compartir tu nombre completo, escuela, ciudad, correo ni contrase\u00f1a. Preg\u00fantate: \u00bfrealmente necesito compartir este dato?\";\n\n}\n\n}\n);\n\n\n\/* =========================================\nPANTALLA 3\nDECISI\u00d3N\n========================================= *\/\n\nconst decisionChoices =\nArray.from(\nroot.querySelectorAll(\n\"#decisionChoices .choice\"\n)\n);\n\n\nconst decisionFeedback =\ndocument.getElementById(\n\"decisionFeedback\"\n);\n\n\ndecisionChoices.forEach(\nfunction(button){\n\nbutton.addEventListener(\n\"click\",\nfunction(){\n\n\ndecisionChoices.forEach(\nfunction(other){\n\nother.classList.remove(\n\"selected\",\n\"correct\",\n\"warning\"\n);\n\n}\n);\n\n\nbutton.classList.add(\n\"selected\"\n);\n\n\nif(\nbutton.dataset.value===\"safe\"\n){\n\nbutton.classList.add(\n\"correct\"\n);\n\ndecisionFeedback.className =\n\"feedback good show\";\n\ndecisionFeedback.innerHTML =\n\"<strong>Buena decisi\u00f3n.<\/strong> Detenerse y preguntar permite revisar si la informaci\u00f3n realmente es necesaria antes de compartirla.\";\n\n}\n\n\nelse if(\nbutton.dataset.value===\"risk\"\n){\n\nbutton.classList.add(\n\"warning\"\n);\n\ndecisionFeedback.className =\n\"feedback think show\";\n\ndecisionFeedback.innerHTML =\n\"<strong>Ir r\u00e1pido puede hacernos compartir informaci\u00f3n que no necesitamos compartir.<\/strong> Antes de escribir datos personales conviene detenerse y revisar.\";\n\n}\n\n\nelse{\n\nbutton.classList.add(\n\"warning\"\n);\n\ndecisionFeedback.className =\n\"feedback think show\";\n\ndecisionFeedback.innerHTML =\n\"<strong>Eso tampoco soluciona el problema.<\/strong> Inventar informaci\u00f3n o compartir una contrase\u00f1a no es la mejor opci\u00f3n. Si tenemos dudas, podemos detenernos y pedir ayuda.\";\n\n}\n\n}\n);\n\n}\n);\n\n\n\/* =========================================\nPANTALLA 4\nPREGUNTAS PARA PENSAR\n========================================= *\/\n\nconst thinkChoices =\nArray.from(\nroot.querySelectorAll(\n\"#thinkChoices .choice\"\n)\n);\n\n\nthinkChoices.forEach(\nfunction(button){\n\nbutton.addEventListener(\n\"click\",\nfunction(){\n\n\nbutton.classList.toggle(\n\"selected\"\n);\n\n\nif(\nbutton.dataset.value===\"risk\" &&\nbutton.classList.contains(\n\"selected\"\n)\n){\n\nbutton.classList.add(\n\"warning\"\n);\n\n}else{\n\nbutton.classList.remove(\n\"warning\"\n);\n\n}\n\n}\n);\n\n}\n);\n\n\n\/* =========================================\nPANTALLA 5\nREFLEXI\u00d3N FINAL\n========================================= *\/\n\nconst reflectionOptions =\nArray.from(\nroot.querySelectorAll(\n\".reflection-option\"\n)\n);\n\n\nconst reflection =\ndocument.getElementById(\n\"reflection\"\n);\n\n\nreflectionOptions.forEach(\nfunction(button){\n\nbutton.addEventListener(\n\"click\",\nfunction(){\n\n\nreflectionOptions.forEach(\nfunction(other){\n\nother.classList.remove(\n\"selected\"\n);\n\n}\n);\n\n\nbutton.classList.add(\n\"selected\"\n);\n\n\nif(\nreflection.value.trim()===\"\"\n){\n\nreflection.value =\nbutton.textContent.trim();\n\n}\n\n\nreflection.focus();\n\n}\n);\n\n}\n);\n\n\n\/* =========================================\nREINICIAR\n========================================= *\/\n\ndocument\n.getElementById(\"reset\")\n.addEventListener(\n\"click\",\nfunction(){\n\n\ndataButtons.forEach(\nfunction(button){\n\nbutton.classList.remove(\n\"selected\"\n);\n\n}\n);\n\n\ndecisionChoices.forEach(\nfunction(button){\n\nbutton.classList.remove(\n\"selected\",\n\"correct\",\n\"warning\"\n);\n\n}\n);\n\n\nthinkChoices.forEach(\nfunction(button){\n\nbutton.classList.remove(\n\"selected\",\n\"warning\"\n);\n\n}\n);\n\n\nreflectionOptions.forEach(\nfunction(button){\n\nbutton.classList.remove(\n\"selected\"\n);\n\n}\n);\n\n\ndataFeedback.className =\n\"feedback\";\n\n\ndataFeedback.innerHTML =\n\"\";\n\n\ndecisionFeedback.className =\n\"feedback\";\n\n\ndecisionFeedback.innerHTML =\n\"\";\n\n\nreflection.value =\n\"\";\n\n\nshowScreen(0);\n\n}\n);\n\n\nshowScreen(0);\n\n\n})();\n\n<\/script>\n\n\n<\/body>\n<\/html>\n","protected":false},"excerpt":{"rendered":"<p>My Digital Key 1 \u00b7 Lecci\u00f3n 1 🔐 MY DIGITAL KEY – 1 1 de 5 LECCI\u00d3N 1 \u00b7 MI MUNDO DIGITAL Pienso antes de […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-1820","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/cuentoskecuentan.com\/index.php?rest_route=\/wp\/v2\/pages\/1820","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/cuentoskecuentan.com\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/cuentoskecuentan.com\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/cuentoskecuentan.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/cuentoskecuentan.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=1820"}],"version-history":[{"count":3,"href":"https:\/\/cuentoskecuentan.com\/index.php?rest_route=\/wp\/v2\/pages\/1820\/revisions"}],"predecessor-version":[{"id":1825,"href":"https:\/\/cuentoskecuentan.com\/index.php?rest_route=\/wp\/v2\/pages\/1820\/revisions\/1825"}],"wp:attachment":[{"href":"https:\/\/cuentoskecuentan.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=1820"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}