{"id":387,"date":"2022-12-10T22:50:28","date_gmt":"2022-12-10T22:50:28","guid":{"rendered":"https:\/\/turismobaterno.es\/?page_id=387"},"modified":"2023-08-22T00:01:14","modified_gmt":"2023-08-21T23:01:14","slug":"ejemplo-cuestionario","status":"publish","type":"page","link":"https:\/\/turismobaterno.es\/?page_id=387","title":{"rendered":"CUESTIONARIO"},"content":{"rendered":"<p>[et_pb_section fb_built=&#8221;1&#8243; _builder_version=&#8221;4.19.1&#8243; _module_preset=&#8221;default&#8221; custom_padding=&#8221;0px|||||&#8221; global_colors_info=&#8221;{}&#8221;][et_pb_row _builder_version=&#8221;4.19.1&#8243; _module_preset=&#8221;default&#8221; width=&#8221;100%&#8221; min_height=&#8221;742.4px&#8221; custom_padding=&#8221;||0px|||&#8221; global_colors_info=&#8221;{}&#8221;][et_pb_column type=&#8221;4_4&#8243; _builder_version=&#8221;4.19.1&#8243; _module_preset=&#8221;default&#8221; global_colors_info=&#8221;{}&#8221;][et_pb_code disabled_on=&#8221;off|off|off&#8221; admin_label=&#8221;Pregunta&#8221; _builder_version=&#8221;4.19.1&#8243; _module_preset=&#8221;default&#8221; display_conditions=&#8221;W10=&#8221; hover_enabled=&#8221;0&#8243; global_colors_info=&#8221;{}&#8221; sticky_enabled=&#8221;0&#8243;]<style>\r\n\r\n        body{\r\n            background: white;\r\n            padding: 0;\r\n            margin: 0;\r\n            text-align: center;\r\n            justify-content: center;\r\n            min-height: 100vh;\r\n        }\r\n        .contenedor {\r\n            width: 100%;\r\n            height: 100%;\r\n            display: inline-flex;\r\n            flex-direction: column;\r\n            justify-content: center;\r\n            align-items: center;\r\n            margin: 10px;\r\n            border-radius: 15px;\r\n        }\r\n        .encabezado {\r\n            background: rgba(56,131,193,0.2);\r\n            min-width: 200px;\r\n            width: 70%;\r\n            max-width: 600px;\r\n            border-radius: 15px;\r\n            \r\n        }\r\n        .pregunta {\r\n            padding: 15px;\r\n            margin: 15px;\r\n            border-radius: 15px;\r\n            \r\n        }\r\n        .imagen {\r\n            object-fit: cover;\r\n            height: 200px;\r\n            width: 90%;\r\n            background: slategray;\r\n            border-radius: 15px;\r\n            margin: 10px;\r\n        }\r\n        .btn {\r\n            background: rgba(56,131,193,0.2);\r\n            width: 60%;\r\n            padding: 10px;\r\n            margin: 5px;\r\n            border-radius: 15px;\r\n            transition: all 0.3s\r\n            \r\n        }\r\n        .btn:hover {\r\n            background: orange;\r\n            cursor: pointer;\r\n            transform: scale(1.05);\r\n        }\r\n    \r\n        .modal {\r\n            display: none; \/* Hidden by default *\/\r\n            position: fixed; \/* Stay in place *\/\r\n            z-index: 1; \/* Sit on top *\/\r\n            padding-top: 100px; \/* Location of the box *\/\r\n            left: 0;\r\n            top: 0;\r\n            width: 100%; \/* Full width *\/\r\n            height: 100%; \/* Full height *\/\r\n            overflow: auto; \/* Enable scroll if needed *\/\r\n            background-color: rgb(0,0,0); \/* Fallback color *\/\r\n            background-color: rgba(0,0,0,0.4); \/* Black w\/ opacity *\/\r\n            cursor: pointer;\r\n        }\r\n\r\n\r\n        .modal-content {\r\n            background-color: #fefefe;\r\n            margin: auto;\r\n            padding: 20px;\r\n            border: 1px solid #888;\r\n            width: 80%;\r\n            border-radius:15px;\r\n        }\r\n\r\n        .close {\r\n            color: #aaaaaa;\r\n            float: right;\r\n            font-size: 28px;\r\n            font-weight: bold;\r\n        }\r\n\r\n        .close:hover,\r\n        .close:focus {\r\n            color: #000;\r\n            text-decoration: none;\r\n            cursor: pointer;\r\n        }\r\n\r\n        \r\n        \r\n       \r\n    <\/style>\r\n    \r\n    \r\n    <div class=\"contenedor\">\r\n        <div class=\"encabezado\">\r\n            <div class=\"pregunta\" id=\"pregunta\">\r\n                <span>Pregunta<\/span>\r\n                <br>\r\n            <\/div>\r\n            <img decoding=\"async\" src=\"\" class=\"imagen\" id=\"imagen\">\r\n        <\/div>\r\n            <div class=\"btn\" id=\"btn1\" onclick=\"oprimir_btn (0)\">\r\n                Opci\u00f3n 1\r\n            <\/div>\r\n            <div class=\"btn\" id=\"btn2\" onclick=\"oprimir_btn (1)\">\r\n                Opci\u00f3n 2\r\n            <\/div>\r\n            <div class=\"btn\" id=\"btn3\" onclick=\"oprimir_btn (2)\">\r\n                Opci\u00f3n 3\r\n            <\/div>\r\n            <div class=\"btn\" id=\"btn4\" onclick=\"oprimir_btn (3)\">\r\n                Opci\u00f3n 4\r\n            <\/div>\r\n    <\/div>\r\n    \r\n    \r\n    <script src=\"base_Baterno.js\"><\/script>\r\n    \r\n    <script>\r\n    \r\n    \r\n    window.onload = function (){\r\n    base_preguntas = readText (\"base_Baterno.json\");\r\n    interprete_bp = JSON.parse (base_preguntas);\r\n    \r\n    \r\n    }\r\n    \r\n    let objetoPregunta;\r\n    let posibilidades;\r\n    let preguntaSeleccionada;\r\n    btn_correspondiente = [\r\n    selec_id(\"btn1\"),\r\n    selec_id(\"btn2\"),\r\n    selec_id(\"btn3\"),\r\n    selec_id(\"btn4\")\r\n    ]\r\n    escogerPregunta ( numPregunta() );\r\n    \r\n    function numPregunta() {\r\n      const myQuery = window.location.search;\r\n\t\t\tconst myParams = new URLSearchParams(myQuery);\r\n\t\t\tconst preguntaSeleccionada = myParams.get('quest');\r\n\t\t\tconsole.log(preguntaSeleccionada);\r\n      return preguntaSeleccionada;\r\n    }\r\n    numPregunta();\r\n    function escogerPregunta(index) {\r\n    objetoPregunta = base_preguntas [index];\r\n    \r\n    posibilidades = [ ...objetoPregunta.otras];\r\n    \r\n    posibilidades.push (objetoPregunta.respuesta);\r\n    \r\n    for (let i = 0; i < 4; i++) {\r\n        posibilidades.sort(()=> Math.random()-0.5);\r\n    \r\n    }\r\n    \r\n    selec_id(\"pregunta\").innerHTML=objetoPregunta.pregunta;\r\n    selec_id(\"imagen\").setAttribute (\"src\",objetoPregunta.imagen)\r\n    selec_id(\"btn1\").innerHTML=posibilidades[0];\r\n    selec_id(\"btn2\").innerHTML=posibilidades[1];\r\n    selec_id(\"btn3\").innerHTML=posibilidades[2];\r\n    selec_id(\"btn4\").innerHTML=posibilidades[3];\r\n       \r\n    }   \r\n    let suspender_botones=false;\r\n    \r\n    function oprimir_btn (i) {\r\n    if(suspender_botones) {\r\n        return;\r\n    }\r\n    suspender_botones = true;\r\n    if (posibilidades[i] == objetoPregunta.respuesta) {\r\n        btn_correspondiente[i].style.background =\"lightgreen\";\r\n    } else {\r\n        btn_correspondiente[i].style.background = \"lightpink\";\r\n    }\r\n    for(let j = 0; j< 4; j++) {\r\n        if (posibilidades [j] == objetoPregunta.respuesta) {\r\n            btn_correspondiente [j].style.background =\"lightgreen\";\r\n            break;\r\n        }\r\n    }\r\n    setTimeout (()=> {\r\n        reiniciar();\r\n        suspender_botones=false;\r\n    }, 3000);\r\n    }\r\n    \r\n    function selec_id (id) {\r\n    return document.getElementById (id);\r\n    }\r\n    \r\n    function style (id) {\r\n    return selec_id(id).style;\r\n    }\r\n    \r\n    function readText (ruta_local) {\r\n    var texto = null;\r\n    var xmlhttp = new XMLHttpRequest();\r\n    xmlhttp.open(\"GET\", ruta_local, false);\r\n    xmlhttp.send();\r\n    if (xmlhttp.status == 200 ) {\r\n        texto = xmlhttp.responseText;\r\n    }\r\n    return texto;\r\n    }\r\n    \r\n    <\/script>\r\n    \r\n    \r\n    \r\n    <button id=\"myBtn\" class=\"et_pb_button et_pb_button_0 et_pb_bg_layout_light\">M\u00e1s info<\/button>\r\n\r\n\r\n<div id=\"myModal\" class=\"modal\">\r\n\r\n\r\n  <div class=\"modal-content\">\r\n    <span class=\"close\">\u00d7<\/span>\r\n        <p id=\"justif1\"> \r\n          <script>\r\n          return objetoPregunta.justif1\r\n            <\/script><\/p>\r\n        <img id=\"justif_img\" class=\"imagen\">\r\n        <p id=\"justif2\"><\/p>\r\n  <\/div>\r\n\r\n<\/div>\r\n\r\n<script>\r\n\r\n\r\nvar modal = document.getElementById(\"myModal\");\r\n\r\n\r\nvar btn = document.getElementById(\"myBtn\");\r\n\r\n\r\nvar span = document.getElementsByClassName(\"close\")[0];\r\n\r\n\r\nbtn.onclick = function() {\r\nmodal.style.display = \"block\";\r\nselec_id(\"justif1\").innerHTML = objetoPregunta.justif1;\r\nselec_id(\"justif_img\").setAttribute (\"src\",objetoPregunta.justif_imagen);\r\nselec_id(\"justif2\").innerHTML = objetoPregunta.justif2;\r\n}\r\n  \r\n\r\nspan.onclick = function() {\r\n  modal.style.display = \"none\";\r\n}\r\n\r\n\r\nwindow.onclick = function(event) {\r\n  if (event.target == modal) {\r\n    modal.style.display = \"none\";\r\n  }\r\n}\r\n<\/script>\r\n<!-- [et_pb_line_break_holder] -->    <!-- [et_pb_line_break_holder] -->    [\/et_pb_code][\/et_pb_column][\/et_pb_row][et_pb_row _builder_version=&#8221;4.19.1&#8243; _module_preset=&#8221;default&#8221; background_color=&#8221;#FFFFFF&#8221; positioning=&#8221;fixed&#8221; position_origin_f=&#8221;bottom_center&#8221; z_index=&#8221;500&#8243; width=&#8221;100%&#8221; max_width=&#8221;2560px&#8221; height=&#8221;70px&#8221; global_colors_info=&#8221;{}&#8221;][et_pb_column type=&#8221;4_4&#8243; _builder_version=&#8221;4.19.1&#8243; _module_preset=&#8221;default&#8221; global_colors_info=&#8221;{}&#8221;][et_pb_code _builder_version=&#8221;4.19.1&#8243; _module_preset=&#8221;default&#8221; positioning=&#8221;fixed&#8221; position_origin_f=&#8221;bottom_center&#8221; vertical_offset=&#8221;10px&#8221; z_index=&#8221;500&#8243; global_colors_info=&#8221;{}&#8221;]<\/p>\n<div class=\"et_pb_button_module_wrapper et_pb_button_0_wrapper et_pb_module\"><!-- [et_pb_line_break_holder] -->\t<a class=\"et_pb_button et_pb_button_0 et_pb_bg_layout_light\" href=\"javascript: history.go(-2)\">Atr\u00e1s<\/a><!-- [et_pb_line_break_holder] --><\/div>\n<p>[\/et_pb_code][\/et_pb_column][\/et_pb_row][\/et_pb_section]<\/p>\n","protected":false},"excerpt":{"rendered":"<style>\r\n\r\n        body{\r\n            background: white;\r\n            padding: 0;\r\n            margin: 0;\r\n            text-align: center;\r\n            justify-content: center;\r\n            min-height: 100vh;\r\n        }\r\n        .contenedor {\r\n            width: 100%;\r\n            height: 100%;\r\n            display: inline-flex;\r\n            flex-direction: column;\r\n            justify-content: center;\r\n            align-items: center;\r\n            margin: 10px;\r\n            border-radius: 15px;\r\n        }\r\n        .encabezado {\r\n            background: rgba(56,131,193,0.2);\r\n            min-width: 200px;\r\n            width: 70%;\r\n            max-width: 600px;\r\n            border-radius: 15px;\r\n            \r\n        }\r\n        .pregunta {\r\n            padding: 15px;\r\n            margin: 15px;\r\n            border-radius: 15px;\r\n            \r\n        }\r\n        .imagen {\r\n            object-fit: cover;\r\n            height: 200px;\r\n            width: 90%;\r\n            background: slategray;\r\n            border-radius: 15px;\r\n            margin: 10px;\r\n        }\r\n        .btn {\r\n            background: rgba(56,131,193,0.2);\r\n            width: 60%;\r\n            padding: 10px;\r\n            margin: 5px;\r\n            border-radius: 15px;\r\n            transition: all 0.3s\r\n            \r\n        }\r\n        .btn:hover {\r\n            background: orange;\r\n            cursor: pointer;\r\n            transform: scale(1.05);\r\n        }\r\n    \r\n        .modal {\r\n            display: none; \/* Hidden by default *\/\r\n            position: fixed; \/* Stay in place *\/\r\n            z-index: 1; \/* Sit on top *\/\r\n            padding-top: 100px; \/* Location of the box *\/\r\n            left: 0;\r\n            top: 0;\r\n            width: 100%; \/* Full width *\/\r\n            height: 100%; \/* Full height *\/\r\n            overflow: auto; \/* Enable scroll if needed *\/\r\n            background-color: rgb(0,0,0); \/* Fallback color *\/\r\n            background-color: rgba(0,0,0,0.4); \/* Black w\/ opacity *\/\r\n            cursor: pointer;\r\n        }\r\n\r\n\r\n        .modal-content {\r\n            background-color: #fefefe;\r\n            margin: auto;\r\n            padding: 20px;\r\n            border: 1px solid #888;\r\n            width: 80%;\r\n            border-radius:15px;\r\n        }\r\n\r\n        .close {\r\n            color: #aaaaaa;\r\n            float: right;\r\n            font-size: 28px;\r\n            font-weight: bold;\r\n        }\r\n\r\n        .close:hover,\r\n        .close:focus {\r\n            color: #000;\r\n            text-decoration: none;\r\n            cursor: pointer;\r\n        }\r\n\r\n        \r\n        \r\n       \r\n    <\/style>\r\n    \r\n    \r\n    <div class=\"contenedor\">\r\n        <div class=\"encabezado\">\r\n            <div class=\"pregunta\" id=\"pregunta\">\r\n                <span>Pregunta<\/span>\r\n                <br>\r\n            <\/div>\r\n            <img decoding=\"async\" src=\"\" class=\"imagen\" id=\"imagen\">\r\n        <\/div>\r\n            <div class=\"btn\" id=\"btn1\" onclick=\"oprimir_btn (0)\">\r\n                Opci\u00f3n 1\r\n            <\/div>\r\n            <div class=\"btn\" id=\"btn2\" onclick=\"oprimir_btn (1)\">\r\n                Opci\u00f3n 2\r\n            <\/div>\r\n            <div class=\"btn\" id=\"btn3\" onclick=\"oprimir_btn (2)\">\r\n                Opci\u00f3n 3\r\n            <\/div>\r\n            <div class=\"btn\" id=\"btn4\" onclick=\"oprimir_btn (3)\">\r\n                Opci\u00f3n 4\r\n            <\/div>\r\n    <\/div>\r\n    \r\n    \r\n    <script src=\"base_Baterno.js\"><\/script>\r\n    \r\n    <script>\r\n    \r\n    \r\n    window.onload = function (){\r\n    base_preguntas = readText (\"base_Baterno.json\");\r\n    interprete_bp = JSON.parse (base_preguntas);\r\n    \r\n    \r\n    }\r\n    \r\n    let objetoPregunta;\r\n    let posibilidades;\r\n    let preguntaSeleccionada;\r\n    btn_correspondiente = [\r\n    selec_id(\"btn1\"),\r\n    selec_id(\"btn2\"),\r\n    selec_id(\"btn3\"),\r\n    selec_id(\"btn4\")\r\n    ]\r\n    escogerPregunta ( numPregunta() );\r\n    \r\n    function numPregunta() {\r\n      const myQuery = window.location.search;\r\n\t\t\tconst myParams = new URLSearchParams(myQuery);\r\n\t\t\tconst preguntaSeleccionada = myParams.get('quest');\r\n\t\t\tconsole.log(preguntaSeleccionada);\r\n      return preguntaSeleccionada;\r\n    }\r\n    numPregunta();\r\n    function escogerPregunta(index) {\r\n    objetoPregunta = base_preguntas [index];\r\n    \r\n    posibilidades = [ ...objetoPregunta.otras];\r\n    \r\n    posibilidades.push (objetoPregunta.respuesta);\r\n    \r\n    for (let i = 0; i < 4; i++) {\r\n        posibilidades.sort(()=> Math.random()-0.5);\r\n    \r\n    }\r\n    \r\n    selec_id(\"pregunta\").innerHTML=objetoPregunta.pregunta;\r\n    selec_id(\"imagen\").setAttribute (\"src\",objetoPregunta.imagen)\r\n    selec_id(\"btn1\").innerHTML=posibilidades[0];\r\n    selec_id(\"btn2\").innerHTML=posibilidades[1];\r\n    selec_id(\"btn3\").innerHTML=posibilidades[2];\r\n    selec_id(\"btn4\").innerHTML=posibilidades[3];\r\n       \r\n    }   \r\n    let suspender_botones=false;\r\n    \r\n    function oprimir_btn (i) {\r\n    if(suspender_botones) {\r\n        return;\r\n    }\r\n    suspender_botones = true;\r\n    if (posibilidades[i] == objetoPregunta.respuesta) {\r\n        btn_correspondiente[i].style.background =\"lightgreen\";\r\n    } else {\r\n        btn_correspondiente[i].style.background = \"lightpink\";\r\n    }\r\n    for(let j = 0; j< 4; j++) {\r\n        if (posibilidades [j] == objetoPregunta.respuesta) {\r\n            btn_correspondiente [j].style.background =\"lightgreen\";\r\n            break;\r\n        }\r\n    }\r\n    setTimeout (()=> {\r\n        reiniciar();\r\n        suspender_botones=false;\r\n    }, 3000);\r\n    }\r\n    \r\n    function selec_id (id) {\r\n    return document.getElementById (id);\r\n    }\r\n    \r\n    function style (id) {\r\n    return selec_id(id).style;\r\n    }\r\n    \r\n    function readText (ruta_local) {\r\n    var texto = null;\r\n    var xmlhttp = new XMLHttpRequest();\r\n    xmlhttp.open(\"GET\", ruta_local, false);\r\n    xmlhttp.send();\r\n    if (xmlhttp.status == 200 ) {\r\n        texto = xmlhttp.responseText;\r\n    }\r\n    return texto;\r\n    }\r\n    \r\n    <\/script>\r\n    \r\n    \r\n    \r\n    <button id=\"myBtn\" class=\"et_pb_button et_pb_button_0 et_pb_bg_layout_light\">M\u00e1s info<\/button>\r\n\r\n\r\n<div id=\"myModal\" class=\"modal\">\r\n\r\n\r\n  <div class=\"modal-content\">\r\n    <span class=\"close\">\u00d7<\/span>\r\n        <p id=\"justif1\"> \r\n          <script>\r\n          return objetoPregunta.justif1\r\n            <\/script><\/p>\r\n        <img id=\"justif_img\" class=\"imagen\">\r\n        <p id=\"justif2\"><\/p>\r\n  <\/div>\r\n\r\n<\/div>\r\n\r\n<script>\r\n\r\n\r\nvar modal = document.getElementById(\"myModal\");\r\n\r\n\r\nvar btn = document.getElementById(\"myBtn\");\r\n\r\n\r\nvar span = document.getElementsByClassName(\"close\")[0];\r\n\r\n\r\nbtn.onclick = function() {\r\nmodal.style.display = \"block\";\r\nselec_id(\"justif1\").innerHTML = objetoPregunta.justif1;\r\nselec_id(\"justif_img\").setAttribute (\"src\",objetoPregunta.justif_imagen);\r\nselec_id(\"justif2\").innerHTML = objetoPregunta.justif2;\r\n}\r\n  \r\n\r\nspan.onclick = function() {\r\n  modal.style.display = \"none\";\r\n}\r\n\r\n\r\nwindow.onclick = function(event) {\r\n  if (event.target == modal) {\r\n    modal.style.display = \"none\";\r\n  }\r\n}\r\n<\/script>\r\n\n","protected":false},"author":2,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"partials\/template-cuestionario.php","meta":{"_acf_changed":false,"_et_pb_use_builder":"on","_et_pb_old_content":"","_et_gb_content_width":"","footnotes":""},"class_list":["post-387","page","type-page","status-publish","hentry"],"acf":[],"_links":{"self":[{"href":"https:\/\/turismobaterno.es\/index.php?rest_route=\/wp\/v2\/pages\/387","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/turismobaterno.es\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/turismobaterno.es\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/turismobaterno.es\/index.php?rest_route=\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/turismobaterno.es\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=387"}],"version-history":[{"count":79,"href":"https:\/\/turismobaterno.es\/index.php?rest_route=\/wp\/v2\/pages\/387\/revisions"}],"predecessor-version":[{"id":3277,"href":"https:\/\/turismobaterno.es\/index.php?rest_route=\/wp\/v2\/pages\/387\/revisions\/3277"}],"wp:attachment":[{"href":"https:\/\/turismobaterno.es\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=387"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}