{"id":1993,"date":"2026-10-08T19:18:20","date_gmt":"2026-10-08T19:18:20","guid":{"rendered":"https:\/\/cuentoskecuentan.com\/?page_id=1993"},"modified":"2026-10-08T19:21:25","modified_gmt":"2026-10-08T19:21:25","slug":"my-digital-key-1-4","status":"publish","type":"page","link":"https:\/\/cuentoskecuentan.com\/?page_id=1993","title":{"rendered":"My digital key 1.4"},"content":{"rendered":"\n<style>\n\n\/* =========================================================\n   MY DIGITAL KEY 1\n   LECCI\u00d3N 4 \u00b7 CREO MI PRIMER KAHOOT\n   WORDPRESS \u00b7 SIN JAVASCRIPT\n   RETROALIMENTACI\u00d3N INMEDIATA\n========================================================= *\/\n\n#mdk4{\n  --purple:#42158f;\n  --purple2:#5c2aa3;\n  --purple-soft:#f7f2fc;\n  --purple-line:#d9cbed;\n  --yellow:#f5b700;\n  --yellow-soft:#fff8df;\n  --text:#29252d;\n  --gray:#716b76;\n\n  width:min(100%,1050px);\n  margin:0 auto;\n  background:#fff;\n  color:var(--text);\n\n  font-family:\n    \"Trebuchet MS\",\n    Arial,\n    sans-serif;\n\n  box-sizing:border-box;\n}\n\n#mdk4 *,\n#mdk4 *::before,\n#mdk4 *::after{\n  box-sizing:border-box;\n}\n\n\n\/* =========================================================\n   CONTROLES DE NAVEGACI\u00d3N\n========================================================= *\/\n\n#mdk4 > input.mdk4-nav-control{\n  position:absolute;\n  left:-9999px;\n}\n\n#mdk4 .mdk4-shell{\n  width:100%;\n  background:#fff;\n  overflow:hidden;\n}\n\n\n\/* =========================================================\n   ENCABEZADO\n========================================================= *\/\n\n#mdk4 .mdk4-topbar{\n  display:flex;\n  justify-content:flex-end;\n  padding:20px 28px 3px;\n}\n\n#mdk4 .mdk4-brand{\n  display:inline-block;\n  background:var(--purple);\n  color:#fff;\n  padding:9px 17px;\n  border-radius:9px;\n  font-size:13px;\n  font-weight:900;\n  letter-spacing:.6px;\n}\n\n\n\/* =========================================================\n   HERO\n========================================================= *\/\n\n#mdk4 .mdk4-hero{\n  padding:15px 34px 25px;\n}\n\n#mdk4 .mdk4-title{\n  margin:0;\n  text-align:center;\n  color:var(--purple);\n  font-size:clamp(34px,5vw,56px);\n  line-height:1.05;\n  font-weight:900;\n}\n\n#mdk4 .mdk4-subtitle{\n  max-width:760px;\n  margin:12px auto 0;\n  text-align:center;\n  font-size:18px;\n  line-height:1.45;\n}\n\n\n\/* =========================================================\n   META Y COMPRENDO\n========================================================= *\/\n\n#mdk4 .mdk4-goals{\n  max-width:900px;\n  margin:27px auto 0;\n  display:grid;\n  grid-template-columns:1fr 1fr;\n  gap:17px;\n}\n\n#mdk4 .mdk4-goal{\n  border:2px solid var(--purple-line);\n  border-radius:18px;\n  padding:16px 18px;\n  background:#fff;\n\n  display:grid;\n  grid-template-columns:62px 1fr;\n  gap:14px;\n  align-items:center;\n}\n\n#mdk4 .mdk4-goal-icon{\n  width:58px;\n  height:58px;\n  border-radius:50%;\n\n  display:flex;\n  align-items:center;\n  justify-content:center;\n\n  font-size:27px;\n  font-weight:900;\n}\n\n#mdk4 .mdk4-goal:first-child .mdk4-goal-icon{\n  background:var(--yellow);\n  color:#fff;\n}\n\n#mdk4 .mdk4-goal:last-child .mdk4-goal-icon{\n  background:var(--purple);\n  color:#fff;\n}\n\n#mdk4 .mdk4-goal h3{\n  margin:0 0 4px;\n  color:var(--purple);\n  font-size:21px;\n}\n\n#mdk4 .mdk4-goal p{\n  margin:0;\n  font-size:14px;\n  line-height:1.4;\n}\n\n\n\/* =========================================================\n   PROGRESO\n========================================================= *\/\n\n#mdk4 .mdk4-progress-wrap{\n  padding:0 34px 22px;\n}\n\n#mdk4 .mdk4-progress-info{\n  display:flex;\n  justify-content:space-between;\n  color:var(--purple);\n  font-size:13px;\n  font-weight:900;\n  margin-bottom:8px;\n}\n\n#mdk4 .mdk4-step-text{\n  display:none;\n}\n\n#mdk4-screen1:checked ~ .mdk4-shell .step1,\n#mdk4-screen2:checked ~ .mdk4-shell .step2,\n#mdk4-screen3:checked ~ .mdk4-shell .step3,\n#mdk4-screen4:checked ~ .mdk4-shell .step4{\n  display:inline;\n}\n\n#mdk4 .mdk4-progress{\n  display:grid;\n  grid-template-columns:repeat(4,1fr);\n  gap:5px;\n}\n\n#mdk4 .mdk4-progress span{\n  height:9px;\n  border-radius:999px;\n  background:#eee7f7;\n}\n\n#mdk4-screen1:checked ~ .mdk4-shell .p1{\n  background:var(--purple);\n}\n\n#mdk4-screen2:checked ~ .mdk4-shell .p1,\n#mdk4-screen2:checked ~ .mdk4-shell .p2{\n  background:var(--purple);\n}\n\n#mdk4-screen3:checked ~ .mdk4-shell .p1,\n#mdk4-screen3:checked ~ .mdk4-shell .p2,\n#mdk4-screen3:checked ~ .mdk4-shell .p3{\n  background:var(--purple);\n}\n\n#mdk4-screen4:checked ~ .mdk4-shell .mdk4-progress span{\n  background:var(--purple);\n}\n\n\n\/* =========================================================\n   PANTALLAS\n========================================================= *\/\n\n#mdk4 .mdk4-stage{\n  padding:0 34px 34px;\n}\n\n#mdk4 .mdk4-screen{\n  display:none;\n}\n\n#mdk4-screen1:checked ~ .mdk4-shell .screen1,\n#mdk4-screen2:checked ~ .mdk4-shell .screen2,\n#mdk4-screen3:checked ~ .mdk4-shell .screen3,\n#mdk4-screen4:checked ~ .mdk4-shell .screen4{\n  display:block;\n}\n\n\n\/* =========================================================\n   ENCABEZADOS DE SECCI\u00d3N\n========================================================= *\/\n\n#mdk4 .mdk4-section-head{\n  display:flex;\n  align-items:center;\n  gap:12px;\n  margin-bottom:19px;\n}\n\n#mdk4 .mdk4-number{\n  width:43px;\n  height:43px;\n  min-width:43px;\n\n  border-radius:50%;\n  background:var(--purple);\n  color:#fff;\n\n  display:flex;\n  align-items:center;\n  justify-content:center;\n\n  font-size:20px;\n  font-weight:900;\n}\n\n#mdk4 .mdk4-section-head h2{\n  margin:0;\n  color:var(--purple);\n  font-size:27px;\n  line-height:1.15;\n}\n\n#mdk4 .mdk4-instruction{\n  margin:0 0 20px;\n  font-size:17px;\n  line-height:1.5;\n}\n\n\n\/* =========================================================\n   HISTORIA\n========================================================= *\/\n\n#mdk4 .mdk4-story{\n  display:grid;\n  grid-template-columns:1.05fr .95fr;\n  gap:22px;\n}\n\n#mdk4 .mdk4-story-text{\n  border:2px solid var(--purple-line);\n  border-radius:20px;\n  padding:22px;\n}\n\n#mdk4 .mdk4-story-text p{\n  margin:0 0 14px;\n  font-size:16px;\n  line-height:1.58;\n}\n\n#mdk4 .mdk4-story-text p:last-child{\n  margin-bottom:0;\n}\n\n#mdk4 .mdk4-story-text strong{\n  color:var(--purple);\n}\n\n\n\/* =========================================================\n   CHAT VISUAL\n========================================================= *\/\n\n#mdk4 .mdk4-chat-zone{\n  min-height:355px;\n  border:2px solid #eee5f8;\n  border-radius:20px;\n  background:var(--purple-soft);\n  padding:22px;\n\n  display:flex;\n  flex-direction:column;\n  align-items:center;\n  justify-content:center;\n}\n\n#mdk4 .mdk4-chat-zone h3{\n  margin:0 0 16px;\n  color:var(--purple);\n  font-size:22px;\n  text-align:center;\n}\n\n#mdk4 .mdk4-device{\n  width:min(100%,330px);\n  border:7px solid #48454b;\n  border-radius:10px;\n  background:#fff;\n  overflow:hidden;\n}\n\n#mdk4 .mdk4-chat-header{\n  background:var(--purple);\n  color:#fff;\n  padding:9px 12px;\n  font-size:14px;\n  font-weight:900;\n}\n\n#mdk4 .mdk4-chat{\n  padding:13px;\n}\n\n#mdk4 .mdk4-bubble{\n  width:88%;\n  margin-bottom:10px;\n  border-radius:13px;\n  padding:9px 11px;\n  font-size:12px;\n  line-height:1.35;\n}\n\n#mdk4 .other{\n  background:#eee7f7;\n  color:#28232e;\n}\n\n#mdk4 .gift{\n  background:#fff8df;\n  border:1px solid #ecd275;\n}\n\n#mdk4 .warning-bubble{\n  background:#fff2dc;\n  border:1px solid #e6b75f;\n}\n\n#mdk4 .mdk4-chat-callout{\n  margin-top:20px;\n  width:100%;\n  padding:13px;\n\n  border:2px solid var(--purple);\n  border-radius:14px;\n\n  background:#fff;\n  color:var(--purple);\n\n  text-align:center;\n  font-size:15px;\n  font-weight:900;\n  line-height:1.4;\n}\n\n\n\/* =========================================================\n   PREGUNTAS Y OPCIONES\n========================================================= *\/\n\n#mdk4 .mdk4-question,\n#mdk4 .mdk4-case{\n  margin-top:20px;\n  border:2px solid var(--purple-line);\n  border-radius:19px;\n  padding:18px;\n}\n\n#mdk4 .mdk4-question h3,\n#mdk4 .mdk4-case h3{\n  margin:0 0 14px;\n  color:var(--purple);\n  font-size:18px;\n  line-height:1.4;\n}\n\n#mdk4 .mdk4-options{\n  display:grid;\n  grid-template-columns:repeat(3,1fr);\n  gap:10px;\n}\n\n#mdk4 .mdk4-options input{\n  position:absolute;\n  opacity:0;\n}\n\n#mdk4 .mdk4-choice{\n  min-height:70px;\n  border:2px solid #ddd1ee;\n  border-radius:13px;\n  background:#fff;\n  padding:11px;\n\n  display:flex;\n  justify-content:center;\n  align-items:center;\n\n  text-align:center;\n  cursor:pointer;\n  font-size:14px;\n  line-height:1.35;\n}\n\n#mdk4 .mdk4-options input:checked + .mdk4-choice{\n  background:var(--purple);\n  border-color:var(--purple);\n  color:#fff;\n  font-weight:900;\n}\n\n\n\/* =========================================================\n   RETROALIMENTACI\u00d3N\n========================================================= *\/\n\n#mdk4 .feedback{\n  display:none;\n  grid-column:1 \/ -1;\n  margin-top:3px;\n  padding:13px 15px;\n  border-radius:12px;\n  font-size:14px;\n  line-height:1.45;\n}\n\n#mdk4 .feedback.good{\n  background:var(--purple-soft);\n  border:1px solid var(--purple-line);\n  color:var(--purple);\n}\n\n#mdk4 .feedback.think{\n  background:var(--yellow-soft);\n  border:1px solid #ead272;\n  color:#554300;\n}\n\n\n\/* PREGUNTA INICIAL *\/\n\n#l4introa:checked ~ .l4introfa,\n#l4introb:checked ~ .l4introfb,\n#l4introc:checked ~ .l4introfc{\n  display:block;\n}\n\n\n\/* =========================================================\n   PANTALLA 2\n========================================================= *\/\n\n#mdk4 .mdk4-signal-list{\n  display:grid;\n  gap:15px;\n}\n\n#mdk4 .mdk4-signal{\n  border:2px solid var(--purple-line);\n  border-radius:18px;\n  padding:17px;\n  background:#fff;\n}\n\n#mdk4 .mdk4-signal-question{\n  color:var(--purple);\n  font-size:17px;\n  font-weight:900;\n  margin-bottom:12px;\n}\n\n#mdk4 .mdk4-two-options{\n  display:grid;\n  grid-template-columns:1fr 1fr;\n  gap:10px;\n}\n\n#mdk4 .mdk4-two-options input{\n  position:absolute;\n  opacity:0;\n}\n\n#mdk4 .mdk4-two-choice{\n  min-height:55px;\n  border:2px solid #ddd1ee;\n  border-radius:12px;\n\n  display:flex;\n  align-items:center;\n  justify-content:center;\n\n  padding:10px;\n  text-align:center;\n  cursor:pointer;\n  font-size:14px;\n}\n\n#mdk4 .mdk4-two-options input:checked + .mdk4-two-choice{\n  background:var(--purple);\n  border-color:var(--purple);\n  color:#fff;\n  font-weight:900;\n}\n\n#l4s1a:checked ~ .l4s1fa,\n#l4s1b:checked ~ .l4s1fb,\n\n#l4s2a:checked ~ .l4s2fa,\n#l4s2b:checked ~ .l4s2fb,\n\n#l4s3a:checked ~ .l4s3fa,\n#l4s3b:checked ~ .l4s3fb,\n\n#l4s4a:checked ~ .l4s4fa,\n#l4s4b:checked ~ .l4s4fb{\n  display:block;\n}\n\n\n\/* =========================================================\n   REGLA\n========================================================= *\/\n\n#mdk4 .mdk4-rule{\n  margin-top:21px;\n  padding:17px 19px;\n\n  border:2px solid var(--purple-line);\n  border-radius:17px;\n\n  background:var(--purple-soft);\n}\n\n#mdk4 .mdk4-rule h3{\n  margin:0 0 7px;\n  color:var(--purple);\n  font-size:18px;\n}\n\n#mdk4 .mdk4-rule p{\n  margin:0;\n  font-size:15px;\n  line-height:1.5;\n}\n\n\n\/* =========================================================\n   PANTALLA 3\n========================================================= *\/\n\n#l4case1a:checked ~ .l4case1fa,\n#l4case1b:checked ~ .l4case1fb,\n#l4case1c:checked ~ .l4case1fc,\n\n#l4case2a:checked ~ .l4case2fa,\n#l4case2b:checked ~ .l4case2fb,\n#l4case2c:checked ~ .l4case2fc,\n\n#l4case3a:checked ~ .l4case3fa,\n#l4case3b:checked ~ .l4case3fb,\n#l4case3c:checked ~ .l4case3fc{\n  display:block;\n}\n\n\n\/* =========================================================\n   PROYECTO\n========================================================= *\/\n\n#mdk4 .mdk4-project{\n  display:grid;\n  grid-template-columns:1fr .9fr;\n  gap:22px;\n}\n\n#mdk4 .mdk4-form{\n  border:2px solid var(--purple);\n  border-radius:20px;\n  padding:20px;\n}\n\n#mdk4 .mdk4-form label{\n  display:block;\n  margin-bottom:7px;\n  color:var(--purple);\n  font-size:16px;\n  font-weight:900;\n}\n\n#mdk4 .mdk4-form input,\n#mdk4 .mdk4-form textarea{\n  width:100%;\n  margin-bottom:17px;\n  padding:11px;\n  border:2px solid #ded2ed;\n  border-radius:12px;\n  font:inherit;\n  font-size:15px;\n}\n\n#mdk4 .mdk4-form input:focus,\n#mdk4 .mdk4-form textarea:focus{\n  outline:none;\n  border-color:var(--purple);\n}\n\n#mdk4 .mdk4-form textarea{\n  min-height:77px;\n  resize:vertical;\n}\n\n\n\/* =========================================================\n   MINI KAHOOT\n========================================================= *\/\n\n#mdk4 .mdk4-game-preview{\n  background:var(--purple-soft);\n  border-radius:20px;\n  padding:21px;\n\n  display:flex;\n  flex-direction:column;\n  align-items:center;\n  justify-content:center;\n}\n\n#mdk4 .mdk4-game-preview h3{\n  color:var(--purple);\n  margin:0 0 14px;\n  font-size:20px;\n}\n\n#mdk4 .mdk4-kahoot{\n  width:100%;\n  max-width:340px;\n  border:6px solid #49464c;\n  border-radius:10px;\n  background:#fff;\n  overflow:hidden;\n}\n\n#mdk4 .mdk4-kahoot-head{\n  background:var(--purple);\n  color:#fff;\n  text-align:center;\n  padding:12px;\n  font-size:19px;\n  font-weight:900;\n}\n\n#mdk4 .mdk4-kahoot-question{\n  padding:15px 12px 10px;\n  text-align:center;\n  font-weight:900;\n  color:var(--purple);\n  font-size:15px;\n}\n\n#mdk4 .mdk4-kahoot-options{\n  padding:0 12px 14px;\n  display:grid;\n  grid-template-columns:1fr 1fr;\n  gap:8px;\n}\n\n#mdk4 .mdk4-k-option{\n  min-height:56px;\n  border-radius:9px;\n  padding:9px;\n  display:flex;\n  align-items:center;\n  justify-content:center;\n  text-align:center;\n  font-size:12px;\n  font-weight:900;\n}\n\n#mdk4 .k1{\n  background:#f5eaf9;\n  color:var(--purple);\n}\n\n#mdk4 .k2{\n  background:#fff3d0;\n  color:#655000;\n}\n\n#mdk4 .k3{\n  background:#eee8f8;\n  color:var(--purple);\n}\n\n#mdk4 .k4{\n  background:#f8f4fc;\n  color:#4b3a59;\n}\n\n#mdk4 .mdk4-project-note{\n  margin-top:21px;\n  padding:17px;\n  border:2px solid var(--purple-line);\n  border-radius:16px;\n  background:#fff8df;\n  font-size:14px;\n  line-height:1.5;\n}\n\n\n\/* =========================================================\n   CIERRE\n========================================================= *\/\n\n#mdk4 .mdk4-final{\n  margin-top:21px;\n  padding:21px;\n  border-radius:20px;\n  background:var(--purple-soft);\n  text-align:center;\n}\n\n#mdk4 .mdk4-final-icon{\n  width:58px;\n  height:58px;\n  margin:0 auto 10px;\n  border-radius:50%;\n  background:var(--purple);\n  color:#fff;\n\n  display:flex;\n  align-items:center;\n  justify-content:center;\n\n  font-size:27px;\n  font-weight:900;\n}\n\n#mdk4 .mdk4-final h3{\n  margin:0 0 8px;\n  color:var(--purple);\n  font-size:23px;\n}\n\n#mdk4 .mdk4-final p{\n  max-width:680px;\n  margin:0 auto;\n  font-size:15px;\n  line-height:1.55;\n}\n\n\n\/* =========================================================\n   NAVEGACI\u00d3N\n========================================================= *\/\n\n#mdk4 .mdk4-nav{\n  margin-top:25px;\n  padding-top:20px;\n  border-top:1px solid #eee7f6;\n\n  display:flex;\n  justify-content:space-between;\n  align-items:center;\n  gap:12px;\n}\n\n#mdk4 .mdk4-nav-button{\n  display:inline-flex;\n  justify-content:center;\n  align-items:center;\n\n  min-width:145px;\n  padding:13px 21px;\n\n  border-radius:40px;\n\n  font-size:15px;\n  font-weight:900;\n\n  cursor:pointer;\n  user-select:none;\n}\n\n#mdk4 .mdk4-next{\n  background:var(--purple);\n  color:#fff;\n  border:2px solid var(--purple);\n}\n\n#mdk4 .mdk4-back{\n  background:#fff;\n  color:var(--purple);\n  border:2px solid var(--purple);\n}\n\n\n\/* =========================================================\n   RESPONSIVE\n========================================================= *\/\n\n@media(max-width:800px){\n\n  #mdk4 .mdk4-goals,\n  #mdk4 .mdk4-story,\n  #mdk4 .mdk4-project{\n    grid-template-columns:1fr;\n  }\n\n  #mdk4 .mdk4-options{\n    grid-template-columns:1fr;\n  }\n\n}\n\n@media(max-width:520px){\n\n  #mdk4 .mdk4-topbar{\n    padding:15px 17px 2px;\n  }\n\n  #mdk4 .mdk4-hero,\n  #mdk4 .mdk4-stage{\n    padding-left:17px;\n    padding-right:17px;\n  }\n\n  #mdk4 .mdk4-progress-wrap{\n    padding-left:17px;\n    padding-right:17px;\n  }\n\n  #mdk4 .mdk4-title{\n    font-size:34px;\n  }\n\n  #mdk4 .mdk4-subtitle{\n    font-size:16px;\n  }\n\n  #mdk4 .mdk4-two-options{\n    grid-template-columns:1fr;\n  }\n\n  #mdk4 .mdk4-nav-button{\n    flex:1;\n    min-width:0;\n  }\n\n}\n\n<\/style>\n\n\n<div id=\"mdk4\">\n\n\n<!-- =====================================================\n     NAVEGACI\u00d3N PRINCIPAL\n===================================================== -->\n\n<input\n  type=\"radio\"\n  class=\"mdk4-nav-control\"\n  name=\"mdk4-navigation\"\n  id=\"mdk4-screen1\"\n  checked>\n\n<input\n  type=\"radio\"\n  class=\"mdk4-nav-control\"\n  name=\"mdk4-navigation\"\n  id=\"mdk4-screen2\">\n\n<input\n  type=\"radio\"\n  class=\"mdk4-nav-control\"\n  name=\"mdk4-navigation\"\n  id=\"mdk4-screen3\">\n\n<input\n  type=\"radio\"\n  class=\"mdk4-nav-control\"\n  name=\"mdk4-navigation\"\n  id=\"mdk4-screen4\">\n\n\n<div class=\"mdk4-shell\">\n\n\n<!-- =====================================================\n     ENCABEZADO\n===================================================== -->\n\n<div class=\"mdk4-topbar\">\n\n  <span class=\"mdk4-brand\">\n    MY DIGITAL KEY &#8211; 1\n  <\/span>\n\n<\/div>\n\n\n<header class=\"mdk4-hero\">\n\n  <h1 class=\"mdk4-title\">\n    CREO MI PRIMER KAHOOT\n  <\/h1>\n\n  <p class=\"mdk4-subtitle\">\n    No todo lo que parece amable en internet\n    significa que sea seguro.\n  <\/p>\n\n\n  <div class=\"mdk4-goals\">\n\n    <div class=\"mdk4-goal\">\n\n      <div class=\"mdk4-goal-icon\">\n        \u25ce\n      <\/div>\n\n      <div>\n\n        <h3>Mi meta<\/h3>\n\n        <p>\n          Analizar una situaci\u00f3n digital\n          y planear un Kahoot sobre\n          decisiones seguras.\n        <\/p>\n\n      <\/div>\n\n    <\/div>\n\n\n    <div class=\"mdk4-goal\">\n\n      <div class=\"mdk4-goal-icon\">\n        \u25a4\n      <\/div>\n\n      <div>\n\n        <h3>Comprendo<\/h3>\n\n        <p>\n          Puedo reconocer que los regalos,\n          los secretos y la presi\u00f3n tambi\u00e9n\n          pueden ser se\u00f1ales de riesgo.\n        <\/p>\n\n      <\/div>\n\n    <\/div>\n\n  <\/div>\n\n<\/header>\n\n\n<!-- =====================================================\n     PROGRESO\n===================================================== -->\n\n<div class=\"mdk4-progress-wrap\">\n\n  <div class=\"mdk4-progress-info\">\n\n    <span>\n\n      <span class=\"mdk4-step-text step1\">\n        1 de 4\n      <\/span>\n\n      <span class=\"mdk4-step-text step2\">\n        2 de 4\n      <\/span>\n\n      <span class=\"mdk4-step-text step3\">\n        3 de 4\n      <\/span>\n\n      <span class=\"mdk4-step-text step4\">\n        4 de 4\n      <\/span>\n\n    <\/span>\n\n    <span>\n      My Digital Key\n    <\/span>\n\n  <\/div>\n\n\n  <div class=\"mdk4-progress\">\n\n    <span class=\"p1\"><\/span>\n    <span class=\"p2\"><\/span>\n    <span class=\"p3\"><\/span>\n    <span class=\"p4\"><\/span>\n\n  <\/div>\n\n<\/div>\n\n\n<main class=\"mdk4-stage\">\n\n\n<!-- =====================================================\n     PANTALLA 1\n===================================================== -->\n\n<section class=\"mdk4-screen screen1\">\n\n  <div class=\"mdk4-section-head\">\n\n    <span class=\"mdk4-number\">\n      1\n    <\/span>\n\n    <h2>\n      Analiza la situaci\u00f3n\n    <\/h2>\n\n  <\/div>\n\n\n  <div class=\"mdk4-story\">\n\n\n    <div class=\"mdk4-story-text\">\n\n      <p>\n        <strong>\n          Keyla y Leo est\u00e1n creando ideas\n          para un pr\u00f3ximo Kahoot\n          sobre seguridad digital.\n        <\/strong>\n      <\/p>\n\n      <p>\n        Leo les cuenta que, mientras jugaba\n        en l\u00ednea, conoci\u00f3 a un usuario llamado\n        <strong>\u201cMaxTurbo\u201d<\/strong>.\n      <\/p>\n\n      <p>\n        Al principio esa persona fue amable.\n        Le ayud\u00f3 en el juego y tambi\u00e9n\n        le regal\u00f3 algunos objetos virtuales.\n      <\/p>\n\n      <p>\n        Despu\u00e9s comenz\u00f3 a escribirle:\n        <strong>\n          \u201cEres mi mejor amigo en el juego\u201d.\n        <\/strong>\n      <\/p>\n\n      <p>\n        M\u00e1s tarde le pidi\u00f3 una fotograf\u00eda\n        y le ofreci\u00f3 darle m\u00e1s regalos\n        a cambio.\n      <\/p>\n\n      <p>\n        Finalmente agreg\u00f3:\n        <strong>\n          \u201cNo se lo digas a nadie\u201d.\n        <\/strong>\n      <\/p>\n\n      <p>\n        Leo se siente confundido.\n        La otra persona parece amable,\n        pero algo de la conversaci\u00f3n\n        ya no le parece correcto.\n      <\/p>\n\n    <\/div>\n\n\n    <div class=\"mdk4-chat-zone\">\n\n      <h3>\n        Leo observa los mensajes\n      <\/h3>\n\n      <div class=\"mdk4-device\">\n\n        <div class=\"mdk4-chat-header\">\n          Chat del juego\n        <\/div>\n\n        <div class=\"mdk4-chat\">\n\n          <div class=\"mdk4-bubble other\">\n            Te ayudo a ganar.\n          <\/div>\n\n          <div class=\"mdk4-bubble gift\">\n            Te doy regalos.\n          <\/div>\n\n          <div class=\"mdk4-bubble gift\">\n            Eres mi mejor amigo aqu\u00ed.\n          <\/div>\n\n          <div class=\"mdk4-bubble warning-bubble\">\n            M\u00e1ndame una foto tuya.\n          <\/div>\n\n          <div class=\"mdk4-bubble warning-bubble\">\n            No se lo digas a nadie.\n          <\/div>\n\n        <\/div>\n\n      <\/div>\n\n      <div class=\"mdk4-chat-callout\">\n        Un regalo o un secreto\n        tambi\u00e9n puede ser una se\u00f1al de riesgo.\n      <\/div>\n\n    <\/div>\n\n  <\/div>\n\n\n  <div class=\"mdk4-question\">\n\n    <h3>\n      \u00bfQu\u00e9 deber\u00eda hacer que Leo\n      se detenga antes de responder?\n    <\/h3>\n\n\n    <div class=\"mdk4-options\">\n\n      <input\n        type=\"radio\"\n        name=\"l4intro\"\n        id=\"l4introa\">\n\n      <label\n        for=\"l4introa\"\n        class=\"mdk4-choice\">\n\n        La persona le ayud\u00f3\n        a ganar una partida.\n\n      <\/label>\n\n\n      <input\n        type=\"radio\"\n        name=\"l4intro\"\n        id=\"l4introb\">\n\n      <label\n        for=\"l4introb\"\n        class=\"mdk4-choice\">\n\n        Le pide una foto\n        y le dice que guarde\n        el secreto.\n\n      <\/label>\n\n\n      <input\n        type=\"radio\"\n        name=\"l4intro\"\n        id=\"l4introc\">\n\n      <label\n        for=\"l4introc\"\n        class=\"mdk4-choice\">\n\n        Tiene un nombre\n        divertido en el juego.\n\n      <\/label>\n\n\n      <div class=\"feedback think l4introfa\">\n\n        Observa c\u00f3mo cambia la conversaci\u00f3n.\n        Ayudar en una partida no es el problema.\n        La se\u00f1al aparece cuando empieza\n        a pedir algo personal.\n\n      <\/div>\n\n\n      <div class=\"feedback good l4introfb\">\n\n        <strong>\u00a1Muy bien!<\/strong>\n\n        Pedir una fotograf\u00eda y despu\u00e9s pedir\n        que la conversaci\u00f3n permanezca en secreto\n        son se\u00f1ales para detenerse y pedir ayuda.\n\n      <\/div>\n\n\n      <div class=\"feedback think l4introfc\">\n\n        Un nombre de usuario no nos dice\n        si alguien es seguro.\n\n        Lo importante es observar\n        <strong>lo que pide y c\u00f3mo act\u00faa.<\/strong>\n\n      <\/div>\n\n    <\/div>\n\n  <\/div>\n\n\n  <div class=\"mdk4-nav\">\n\n    <span><\/span>\n\n    <label\n      for=\"mdk4-screen2\"\n      class=\"mdk4-nav-button mdk4-next\">\n\n      Continuar \u2192\n\n    <\/label>\n\n  <\/div>\n\n<\/section>\n\n\n<!-- =====================================================\n     PANTALLA 2\n===================================================== -->\n\n<section class=\"mdk4-screen screen2\">\n\n  <div class=\"mdk4-section-head\">\n\n    <span class=\"mdk4-number\">\n      2\n    <\/span>\n\n    <h2>\n      \u00bfEst\u00e1 bien o no est\u00e1 bien?\n    <\/h2>\n\n  <\/div>\n\n\n  <p class=\"mdk4-instruction\">\n\n    Lee cada situaci\u00f3n y decide\n    si parece segura o si es una se\u00f1al\n    para detenerte y pedir ayuda.\n\n  <\/p>\n\n\n  <div class=\"mdk4-signal-list\">\n\n\n    <div class=\"mdk4-signal\">\n\n      <div class=\"mdk4-signal-question\">\n        \u201cTe regalo cosas para que mires\n        una foto que quiero enviarte.\u201d\n      <\/div>\n\n      <div class=\"mdk4-two-options\">\n\n        <input\n          type=\"radio\"\n          name=\"l4s1\"\n          id=\"l4s1a\">\n\n        <label\n          for=\"l4s1a\"\n          class=\"mdk4-two-choice\">\n\n          Est\u00e1 bien\n\n        <\/label>\n\n\n        <input\n          type=\"radio\"\n          name=\"l4s1\"\n          id=\"l4s1b\">\n\n        <label\n          for=\"l4s1b\"\n          class=\"mdk4-two-choice\">\n\n          Se\u00f1al de alerta\n\n        <\/label>\n\n\n        <div class=\"feedback think l4s1fa\">\n\n          Cuidado. Un regalo no obliga\n          a aceptar algo que te incomoda.\n\n        <\/div>\n\n\n        <div class=\"feedback good l4s1fb\">\n\n          <strong>Correcto.<\/strong>\n\n          Si alguien usa regalos para conseguir\n          algo de ti, puedes detenerte.\n\n        <\/div>\n\n      <\/div>\n\n    <\/div>\n\n\n    <div class=\"mdk4-signal\">\n\n      <div class=\"mdk4-signal-question\">\n        \u201cSi algo me incomoda,\n        se lo digo a un adulto\n        en quien conf\u00edo.\u201d\n      <\/div>\n\n      <div class=\"mdk4-two-options\">\n\n        <input\n          type=\"radio\"\n          name=\"l4s2\"\n          id=\"l4s2a\">\n\n        <label\n          for=\"l4s2a\"\n          class=\"mdk4-two-choice\">\n\n          Est\u00e1 bien\n\n        <\/label>\n\n\n        <input\n          type=\"radio\"\n          name=\"l4s2\"\n          id=\"l4s2b\">\n\n        <label\n          for=\"l4s2b\"\n          class=\"mdk4-two-choice\">\n\n          Est\u00e1 mal\n\n        <\/label>\n\n\n        <div class=\"feedback good l4s2fa\">\n\n          <strong>Muy bien.<\/strong>\n\n          Pedir ayuda a un adulto de confianza\n          es una decisi\u00f3n segura.\n\n        <\/div>\n\n\n        <div class=\"feedback think l4s2fb\">\n\n          Si algo te preocupa o incomoda,\n          no tienes que resolverlo solo.\n\n        <\/div>\n\n      <\/div>\n\n    <\/div>\n\n\n    <div class=\"mdk4-signal\">\n\n      <div class=\"mdk4-signal-question\">\n        \u201cGuarda este secreto para que\n        nadie se entere.\u201d\n      <\/div>\n\n      <div class=\"mdk4-two-options\">\n\n        <input\n          type=\"radio\"\n          name=\"l4s3\"\n          id=\"l4s3a\">\n\n        <label\n          for=\"l4s3a\"\n          class=\"mdk4-two-choice\">\n\n          Est\u00e1 bien\n\n        <\/label>\n\n\n        <input\n          type=\"radio\"\n          name=\"l4s3\"\n          id=\"l4s3b\">\n\n        <label\n          for=\"l4s3b\"\n          class=\"mdk4-two-choice\">\n\n          Se\u00f1al de alerta\n\n        <\/label>\n\n\n        <div class=\"feedback think l4s3fa\">\n\n          Si alguien te pide ocultar\n          una conversaci\u00f3n que te incomoda,\n          es importante contarlo.\n\n        <\/div>\n\n\n        <div class=\"feedback good l4s3fb\">\n\n          <strong>Exacto.<\/strong>\n\n          Pedir guardar un secreto puede ser\n          una se\u00f1al para detenerte\n          y buscar ayuda.\n\n        <\/div>\n\n      <\/div>\n\n    <\/div>\n\n\n    <div class=\"mdk4-signal\">\n\n      <div class=\"mdk4-signal-question\">\n        \u201cComparto mi direcci\u00f3n de casa\n        o mi escuela con alguien\n        que solo conozco en l\u00ednea.\u201d\n      <\/div>\n\n      <div class=\"mdk4-two-options\">\n\n        <input\n          type=\"radio\"\n          name=\"l4s4\"\n          id=\"l4s4a\">\n\n        <label\n          for=\"l4s4a\"\n          class=\"mdk4-two-choice\">\n\n          Est\u00e1 bien\n\n        <\/label>\n\n\n        <input\n          type=\"radio\"\n          name=\"l4s4\"\n          id=\"l4s4b\">\n\n        <label\n          for=\"l4s4b\"\n          class=\"mdk4-two-choice\">\n\n          No es seguro\n\n        <\/label>\n\n\n        <div class=\"feedback think l4s4fa\">\n\n          Esa informaci\u00f3n es privada\n          y no es necesaria para jugar.\n\n        <\/div>\n\n\n        <div class=\"feedback good l4s4fb\">\n\n          <strong>Muy bien.<\/strong>\n\n          Tu direcci\u00f3n y tu escuela\n          son datos que debes proteger.\n\n        <\/div>\n\n      <\/div>\n\n    <\/div>\n\n  <\/div>\n\n\n  <div class=\"mdk4-rule\">\n\n    <h3>\n      Una idea que me ayuda\n    <\/h3>\n\n    <p>\n\n      Que alguien sea amable,\n      me ayude o me d\u00e9 un regalo\n      <strong>\n        no significa que yo tenga que hacer\n        lo que esa persona me pide.\n      <\/strong>\n\n    <\/p>\n\n  <\/div>\n\n\n  <div class=\"mdk4-nav\">\n\n    <label\n      for=\"mdk4-screen1\"\n      class=\"mdk4-nav-button mdk4-back\">\n\n      \u2190 Anterior\n\n    <\/label>\n\n\n    <label\n      for=\"mdk4-screen3\"\n      class=\"mdk4-nav-button mdk4-next\">\n\n      Continuar \u2192\n\n    <\/label>\n\n  <\/div>\n\n<\/section>\n\n\n<!-- =====================================================\n     PANTALLA 3\n===================================================== -->\n\n<section class=\"mdk4-screen screen3\">\n\n  <div class=\"mdk4-section-head\">\n\n    <span class=\"mdk4-number\">\n      3\n    <\/span>\n\n    <h2>\n      Elijo una decisi\u00f3n segura\n    <\/h2>\n\n  <\/div>\n\n\n  <p class=\"mdk4-instruction\">\n\n    Ahora piensa qu\u00e9 har\u00edas t\u00fa\n    en cada situaci\u00f3n.\n\n  <\/p>\n\n\n  <div class=\"mdk4-case\">\n\n    <h3>\n      Alguien que conociste en un juego\n      te ofrece regalos y despu\u00e9s\n      te pide una fotograf\u00eda.\n    <\/h3>\n\n    <div class=\"mdk4-options\">\n\n      <input\n        type=\"radio\"\n        name=\"l4case1\"\n        id=\"l4case1a\">\n\n      <label\n        for=\"l4case1a\"\n        class=\"mdk4-choice\">\n\n        Env\u00edo la foto\n        porque me dio regalos.\n\n      <\/label>\n\n\n      <input\n        type=\"radio\"\n        name=\"l4case1\"\n        id=\"l4case1b\">\n\n      <label\n        for=\"l4case1b\"\n        class=\"mdk4-choice\">\n\n        No env\u00edo la foto\n        y pido ayuda.\n\n      <\/label>\n\n\n      <input\n        type=\"radio\"\n        name=\"l4case1\"\n        id=\"l4case1c\">\n\n      <label\n        for=\"l4case1c\"\n        class=\"mdk4-choice\">\n\n        Le env\u00edo m\u00e1s\n        informaci\u00f3n sobre m\u00ed.\n\n      <\/label>\n\n\n      <div class=\"feedback think l4case1fa\">\n\n        Un regalo no significa\n        que tengas que enviar\n        una fotograf\u00eda.\n\n      <\/div>\n\n\n      <div class=\"feedback good l4case1fb\">\n\n        <strong>\u00a1Excelente!<\/strong>\n\n        Puedes decir que no,\n        detenerte y pedir ayuda.\n\n      <\/div>\n\n\n      <div class=\"feedback think l4case1fc\">\n\n        Compartir m\u00e1s informaci\u00f3n\n        puede aumentar el riesgo.\n\n      <\/div>\n\n    <\/div>\n\n  <\/div>\n\n\n  <div class=\"mdk4-case\">\n\n    <h3>\n      Una persona te dice:\n      \u201cNo cuentes a nadie\n      lo que hablamos\u201d.\n    <\/h3>\n\n    <div class=\"mdk4-options\">\n\n      <input\n        type=\"radio\"\n        name=\"l4case2\"\n        id=\"l4case2a\">\n\n      <label\n        for=\"l4case2a\"\n        class=\"mdk4-choice\">\n\n        Guardo el secreto.\n\n      <\/label>\n\n\n      <input\n        type=\"radio\"\n        name=\"l4case2\"\n        id=\"l4case2b\">\n\n      <label\n        for=\"l4case2b\"\n        class=\"mdk4-choice\">\n\n        Se lo cuento\n        a un adulto de confianza.\n\n      <\/label>\n\n\n      <input\n        type=\"radio\"\n        name=\"l4case2\"\n        id=\"l4case2c\">\n\n      <label\n        for=\"l4case2c\"\n        class=\"mdk4-choice\">\n\n        Sigo hablando\n        como si nada.\n\n      <\/label>\n\n\n      <div class=\"feedback think l4case2fa\">\n\n        Si el secreto tiene que ver\n        con algo que te preocupa,\n        es mejor pedir ayuda.\n\n      <\/div>\n\n\n      <div class=\"feedback good l4case2fb\">\n\n        <strong>Correcto.<\/strong>\n\n        Un adulto de confianza\n        puede ayudarte a decidir\n        qu\u00e9 hacer.\n\n      <\/div>\n\n\n      <div class=\"feedback think l4case2fc\">\n\n        Si algo no se siente bien,\n        no tienes que continuar\n        la conversaci\u00f3n.\n\n      <\/div>\n\n    <\/div>\n\n  <\/div>\n\n\n  <div class=\"mdk4-case\">\n\n    <h3>\n      Una conversaci\u00f3n en l\u00ednea\n      comienza a hacerte sentir inc\u00f3modo.\n    <\/h3>\n\n    <div class=\"mdk4-options\">\n\n      <input\n        type=\"radio\"\n        name=\"l4case3\"\n        id=\"l4case3a\">\n\n      <label\n        for=\"l4case3a\"\n        class=\"mdk4-choice\">\n\n        Sigo conversando\n        para no ser grosero.\n\n      <\/label>\n\n\n      <input\n        type=\"radio\"\n        name=\"l4case3\"\n        id=\"l4case3b\">\n\n      <label\n        for=\"l4case3b\"\n        class=\"mdk4-choice\">\n\n        Me detengo\n        y pido ayuda.\n\n      <\/label>\n\n\n      <input\n        type=\"radio\"\n        name=\"l4case3\"\n        id=\"l4case3c\">\n\n      <label\n        for=\"l4case3c\"\n        class=\"mdk4-choice\">\n\n        Hago lo que me pide\n        para que no se enoje.\n\n      <\/label>\n\n\n      <div class=\"feedback think l4case3fa\">\n\n        No tienes que continuar\n        una conversaci\u00f3n que te incomoda.\n\n      <\/div>\n\n\n      <div class=\"feedback good l4case3fb\">\n\n        <strong>Muy buena decisi\u00f3n.<\/strong>\n\n        Detenerte y buscar apoyo\n        tambi\u00e9n es cuidarte.\n\n      <\/div>\n\n\n      <div class=\"feedback think l4case3fc\">\n\n        Tu seguridad es m\u00e1s importante\n        que complacer a otra persona.\n\n      <\/div>\n\n    <\/div>\n\n  <\/div>\n\n\n  <div class=\"mdk4-rule\">\n\n    <h3>\n      Conf\u00eda en lo que sientes\n    <\/h3>\n\n    <p>\n\n      Si algo te incomoda,\n      te presiona o te pide guardar un secreto,\n      <strong>\n        detente y habla con un adulto\n        de confianza.\n      <\/strong>\n\n    <\/p>\n\n  <\/div>\n\n\n  <div class=\"mdk4-nav\">\n\n    <label\n      for=\"mdk4-screen2\"\n      class=\"mdk4-nav-button mdk4-back\">\n\n      \u2190 Anterior\n\n    <\/label>\n\n\n    <label\n      for=\"mdk4-screen4\"\n      class=\"mdk4-nav-button mdk4-next\">\n\n      Continuar \u2192\n\n    <\/label>\n\n  <\/div>\n\n<\/section>\n\n\n<!-- =====================================================\n     PANTALLA 4\n===================================================== -->\n\n<section class=\"mdk4-screen screen4\">\n\n  <div class=\"mdk4-section-head\">\n\n    <span class=\"mdk4-number\">\n      4\n    <\/span>\n\n    <h2>\n      Planeo mi Kahoot\n    <\/h2>\n\n  <\/div>\n\n\n  <p class=\"mdk4-instruction\">\n\n    Ahora prepara una pregunta\n    para crear un Kahoot\n    sobre decisiones seguras.\n\n  <\/p>\n\n\n  <div class=\"mdk4-project\">\n\n\n    <div class=\"mdk4-form\">\n\n      <label>\n        Tema de mi Kahoot\n      <\/label>\n\n      <input\n        type=\"text\"\n        placeholder=\"Ejemplo: Decisiones seguras\">\n\n\n      <label>\n        Mi pregunta\n      <\/label>\n\n      <textarea\n        placeholder=\"Escribe una pregunta clara...\"><\/textarea>\n\n\n      <label>\n        Respuesta correcta\n      <\/label>\n\n      <input\n        type=\"text\"\n        placeholder=\"Escribe la respuesta segura\">\n\n\n      <label>\n        Mi consejo de seguridad\n      <\/label>\n\n      <textarea\n        placeholder=\"\u00bfQu\u00e9 quiero ense\u00f1ar a otros?\"><\/textarea>\n\n    <\/div>\n\n\n    <div class=\"mdk4-game-preview\">\n\n      <h3>\n        Mi ejemplo\n      <\/h3>\n\n      <div class=\"mdk4-kahoot\">\n\n        <div class=\"mdk4-kahoot-head\">\n          Kahoot!\n        <\/div>\n\n        <div class=\"mdk4-kahoot-question\">\n          \u00bfQu\u00e9 hago si alguien\n          me pide guardar un secreto?\n        <\/div>\n\n        <div class=\"mdk4-kahoot-options\">\n\n          <div class=\"mdk4-k-option k1\">\n            Lo guardo.\n          <\/div>\n\n          <div class=\"mdk4-k-option k2\">\n            Sigo hablando.\n          <\/div>\n\n          <div class=\"mdk4-k-option k3\">\n            Pido ayuda.\n          <\/div>\n\n          <div class=\"mdk4-k-option k4\">\n            Doy m\u00e1s datos.\n          <\/div>\n\n        <\/div>\n\n      <\/div>\n\n    <\/div>\n\n  <\/div>\n\n\n  <div class=\"mdk4-project-note\">\n\n    <strong>\n      Para crear tu Kahoot:\n    <\/strong>\n\n    usa preguntas claras y ejemplos seguros.\n    No escribas nombres completos,\n    fotograf\u00edas, direcci\u00f3n, escuela,\n    tel\u00e9fono ni otros datos privados.\n\n  <\/div>\n\n\n  <div class=\"mdk4-final\">\n\n    <div class=\"mdk4-final-icon\">\n      \u2713\n    <\/div>\n\n    <h3>\n      Mi Digital Key de hoy\n    <\/h3>\n\n    <p>\n\n      Ser amable, ayudarme o darme regalos\n      no da derecho a otra persona\n      a pedirme algo que me incomoda.\n\n      <strong>\n        Si alguien me presiona,\n        pide una foto, quiere guardar secretos\n        o algo no se siente bien,\n        me detengo y pido ayuda.\n      <\/strong>\n\n    <\/p>\n\n  <\/div>\n\n\n  <div class=\"mdk4-nav\">\n\n    <label\n      for=\"mdk4-screen3\"\n      class=\"mdk4-nav-button mdk4-back\">\n\n      \u2190 Anterior\n\n    <\/label>\n\n\n    <label\n      for=\"mdk4-screen1\"\n      class=\"mdk4-nav-button mdk4-next\">\n\n      Volver al inicio \u21bb\n\n    <\/label>\n\n  <\/div>\n\n<\/section>\n\n\n<\/main>\n\n<\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>MY DIGITAL KEY &#8211; 1 CREO MI PRIMER KAHOOT No todo lo que parece amable en internet significa que sea seguro. \u25ce Mi meta Analizar [&hellip;]<\/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-1993","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/cuentoskecuentan.com\/index.php?rest_route=\/wp\/v2\/pages\/1993","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=1993"}],"version-history":[{"count":2,"href":"https:\/\/cuentoskecuentan.com\/index.php?rest_route=\/wp\/v2\/pages\/1993\/revisions"}],"predecessor-version":[{"id":1997,"href":"https:\/\/cuentoskecuentan.com\/index.php?rest_route=\/wp\/v2\/pages\/1993\/revisions\/1997"}],"wp:attachment":[{"href":"https:\/\/cuentoskecuentan.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=1993"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}