.elementor-widget-container .premium-global-badge-{{ID}} .premium-badge-container{background-color:var( --e-global-color-primary );}.elementor-widget-container .premium-global-cursor-{{ID}}{color:var( --e-global-color-primary );fill:var( --e-global-color-primary );}.elementor-widget-container.premium-cursor-ftext .premium-global-cursor-{{ID}} .premium-cursor-follow-text{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-weight:var( --e-global-typography-primary-font-weight );}.elementor-widget-container .premium-global-badge-{{ID}} .premium-badge-text{color:var( --e-global-color-secondary );}.elementor-widget-container .premium-global-badge-{{ID}} .premium-badge-icon{color:var( --e-global-color-secondary );fill:var( --e-global-color-secondary );}.elementor-391 .elementor-element.elementor-element-28c0a6c{--display:flex;--overlay-opacity:0.5;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:80px;--padding-bottom:80px;--padding-left:0px;--padding-right:0px;}.elementor-391 .elementor-element.elementor-element-28c0a6c:not(.elementor-motion-effects-element-type-background), .elementor-391 .elementor-element.elementor-element-28c0a6c > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#E4ECF7;}.elementor-391 .elementor-element.elementor-element-28c0a6c::before, .elementor-391 .elementor-element.elementor-element-28c0a6c > .elementor-background-video-container::before, .elementor-391 .elementor-element.elementor-element-28c0a6c > .e-con-inner > .elementor-background-video-container::before, .elementor-391 .elementor-element.elementor-element-28c0a6c > .elementor-background-slideshow::before, .elementor-391 .elementor-element.elementor-element-28c0a6c > .e-con-inner > .elementor-background-slideshow::before, .elementor-391 .elementor-element.elementor-element-28c0a6c > .elementor-motion-effects-container > .elementor-motion-effects-layer::before{--background-overlay:'';}.elementor-391 .elementor-element.elementor-element-2c35657{--display:flex;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:50px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-391 .elementor-element.elementor-element-2c35657:not(.elementor-motion-effects-element-type-background), .elementor-391 .elementor-element.elementor-element-2c35657 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#E4ECF7;}.elementor-391 .elementor-element.elementor-element-faedf7e{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--margin-top:0%;--margin-bottom:0%;--margin-left:0%;--margin-right:0%;--padding-top:0%;--padding-bottom:0%;--padding-left:0%;--padding-right:10%;}.elementor-391 .elementor-element.elementor-element-07534fb{--display:flex;}.elementor-391 .elementor-element.elementor-element-07534fb.e-con{--flex-grow:0;--flex-shrink:0;}.elementor-391 .elementor-element.elementor-element-660eff9{--display:flex;--border-radius:22px 22px 22px 22px;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:41px;--padding-right:0px;}.elementor-391 .elementor-element.elementor-element-660eff9:not(.elementor-motion-effects-element-type-background), .elementor-391 .elementor-element.elementor-element-660eff9 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:var( --e-global-color-secondary );}.elementor-widget-spacer .premium-global-badge-{{ID}} .premium-badge-container{background-color:var( --e-global-color-primary );}.elementor-widget-spacer .premium-global-cursor-{{ID}}{color:var( --e-global-color-primary );fill:var( --e-global-color-primary );}.elementor-widget-spacer.premium-cursor-ftext .premium-global-cursor-{{ID}} .premium-cursor-follow-text{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-weight:var( --e-global-typography-primary-font-weight );}.elementor-widget-spacer .premium-global-badge-{{ID}} .premium-badge-text{color:var( --e-global-color-secondary );}.elementor-widget-spacer .premium-global-badge-{{ID}} .premium-badge-icon{color:var( --e-global-color-secondary );fill:var( --e-global-color-secondary );}.elementor-391 .elementor-element.elementor-element-f4ee947{--spacer-size:35px;}.elementor-391 .elementor-element.elementor-element-11c8081{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;}.elementor-widget-heading .premium-global-badge-{{ID}} .premium-badge-container{background-color:var( --e-global-color-primary );}.elementor-widget-heading .premium-global-cursor-{{ID}}{color:var( --e-global-color-primary );fill:var( --e-global-color-primary );}.elementor-widget-heading.premium-cursor-ftext .premium-global-cursor-{{ID}} .premium-cursor-follow-text{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-weight:var( --e-global-typography-primary-font-weight );}.elementor-widget-heading .premium-global-badge-{{ID}} .premium-badge-text{color:var( --e-global-color-secondary );}.elementor-widget-heading .premium-global-badge-{{ID}} .premium-badge-icon{color:var( --e-global-color-secondary );fill:var( --e-global-color-secondary );}.elementor-widget-heading .elementor-heading-title{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-weight:var( --e-global-typography-primary-font-weight );color:var( --e-global-color-primary );}.elementor-391 .elementor-element.elementor-element-ea4dda3{width:var( --container-widget-width, 75% );max-width:75%;--container-widget-width:75%;--container-widget-flex-grow:0;text-align:center;}.elementor-391 .elementor-element.elementor-element-ea4dda3 > .elementor-widget-container{background-image:url("https://vivirsindiscriminacion.com/wp-content/uploads/2024/06/Recurso-4.png");margin:0% 0% 0% 0%;padding:13px 13px 13px 13px;background-position:center center;background-repeat:no-repeat;background-size:contain;}.elementor-391 .elementor-element.elementor-element-ea4dda3.elementor-element{--align-self:flex-start;}.elementor-391 .elementor-element.elementor-element-ea4dda3 .elementor-heading-title{font-family:"Roboto", Sans-serif;font-size:35px;font-weight:900;color:var( --e-global-color-37e181d );}.elementor-widget-image .premium-global-badge-{{ID}} .premium-badge-container{background-color:var( --e-global-color-primary );}.elementor-widget-image .premium-global-cursor-{{ID}}{color:var( --e-global-color-primary );fill:var( --e-global-color-primary );}.elementor-widget-image.premium-cursor-ftext .premium-global-cursor-{{ID}} .premium-cursor-follow-text{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-weight:var( --e-global-typography-primary-font-weight );}.elementor-widget-image .premium-global-badge-{{ID}} .premium-badge-text{color:var( --e-global-color-secondary );}.elementor-widget-image .premium-global-badge-{{ID}} .premium-badge-icon{color:var( --e-global-color-secondary );fill:var( --e-global-color-secondary );}.elementor-widget-image .widget-image-caption{color:var( --e-global-color-text );font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-weight:var( --e-global-typography-text-font-weight );}.elementor-391 .elementor-element.elementor-element-2174d7c{width:var( --container-widget-width, 15% );max-width:15%;--container-widget-width:15%;--container-widget-flex-grow:0;text-align:right;}.elementor-391 .elementor-element.elementor-element-2174d7c img{width:100%;}.elementor-widget-html .premium-global-badge-{{ID}} .premium-badge-container{background-color:var( --e-global-color-primary );}.elementor-widget-html .premium-global-cursor-{{ID}}{color:var( --e-global-color-primary );fill:var( --e-global-color-primary );}.elementor-widget-html.premium-cursor-ftext .premium-global-cursor-{{ID}} .premium-cursor-follow-text{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-weight:var( --e-global-typography-primary-font-weight );}.elementor-widget-html .premium-global-badge-{{ID}} .premium-badge-text{color:var( --e-global-color-secondary );}.elementor-widget-html .premium-global-badge-{{ID}} .premium-badge-icon{color:var( --e-global-color-secondary );fill:var( --e-global-color-secondary );}.elementor-391 .elementor-element.elementor-element-4fa3319{--spacer-size:35px;}.elementor-391 .elementor-element.elementor-element-de5f017{--display:flex;}.elementor-391 .elementor-element.elementor-element-de5f017:not(.elementor-motion-effects-element-type-background), .elementor-391 .elementor-element.elementor-element-de5f017 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-image:url("https://vivirsindiscriminacion.com/wp-content/uploads/2024/07/PERSONAJE-2.001-1-e1720052845990.png");background-position:center center;background-repeat:no-repeat;background-size:contain;}.elementor-391 .elementor-element.elementor-element-de5f017.e-con{--flex-grow:0;--flex-shrink:0;}.elementor-391 .elementor-element.elementor-element-8ea7afe{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}:root{--page-title-display:none;}@media(min-width:768px){.elementor-391 .elementor-element.elementor-element-07534fb{--width:13.986%;}.elementor-391 .elementor-element.elementor-element-de5f017{--width:24%;}}/* Start custom CSS for html, class: .elementor-element-c1938ca */<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Cuestionario de Conciencia</title>
<style>
/* Estilos para el cuestionario y el termómetro */

body {
  background-color: #1a1a1a;
  font-family: Arial, sans-serif;
  color: #fff;
}

#quiz-container {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  text-align: center;
  margin-bottom: 20px;
}

#pregunta {
  background-color: white;
  color: black;
  margin-bottom: 30px;
  padding: 25px;
  border-radius: 18px;
  text-align: justify !important;
  font-size: 16px;
  line-height: 1.2;
}

#opciones button {
  margin-bottom: 10px;
  width: 200px;
  display: block;
}

.mainquiz {
  display: flex;
  justify-content: center;
  align-items: center;
}

.mainquiz1 {
  flex: 8; /* Ocupa el 80% del espacio */
}

.mainquiz2 {
  flex: 2; /* Ocupa el 20% del espacio */
  margin-left: 30px;
}

#termometro-container {
  position: relative;
  height: 300px;
  width: 50px;
  background-color: #ccc;
  border-radius: 25px;
  overflow: hidden;
}

#termometro {
  position: absolute;
  bottom: 0;
  height: 100%;
  width: 100%;
  background: linear-gradient(to top, green, yellow, red); /* Verde abajo → Rojo arriba */
  border: 1px solid #000;
  border-radius: 25px;
}

#indicador {
  position: absolute;
  left: 100%;
  bottom: 50%;
  width: 0;
  height: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-bottom: 10px solid black;
  transform: translateX(-50%);
  transition: bottom 0.5s ease;
}

.division {
  height: 7.14%; /* 100% / 14 divisiones */
  border-bottom: 1px solid #000;
  box-sizing: border-box;
}

#resultado {
  display: none;
  margin-top: 20px;
  text-align: justify !important;
  color: white;
  margin: 8px;
}

#reiniciar {
  display: none;
  margin-top: 20px;
}
</style>
</head>
<body>
    
<div class="mainquiz">
  <div class="mainquiz1">
    <div id="quiz-container">
      <div id="pregunta"></div>
      <div id="opciones"></div>
      <div id="resultado"></div>
      <button id="reiniciar">Reiniciar Test</button>
    </div>
  </div>

  <div class="mainquiz2">
    <div id="termometro-container">
      <div id="termometro">
        <div class="division"></div>
        <div class="division"></div>
        <div class="division"></div>
        <div class="division"></div>
        <div class="division"></div>
        <div class="division"></div>
        <div class="division"></div>
        <div class="division"></div>
        <div class="division"></div>
        <div class="division"></div>
        <div class="division"></div>
        <div class="division"></div>
        <div class="division"></div>
        <div class="division"></div>
      </div>
      <div id="indicador"></div>
    </div>
  </div>
</div>

<script>
// Preguntas y respuestas del cuestionario
const preguntas = [
  { pregunta: "El estigma y la discriminación (S+D) afecta el desarrollo humano y el disfrute de derechos fundamentales de las personas.", opciones: ["Verdadero", "Falso"], respuestaCorrecta: "Verdadero" },
  { pregunta: "Una persona que viven con VIH está obligada a informar a su empleador de su condición de vivir con VIH", opciones: ["Verdadero", "Falso"], respuestaCorrecta: "Falso" },
  { pregunta: "El Estigma y la discriminación (S+D) relacionada con VIH aumenta la vulnerabilidad de algunos grupos poblacionales a infectarse del virus.", opciones: ["Verdadero", "Falso"], respuestaCorrecta: "Verdadero" },
  { pregunta: "El VIH puede transmitirse a través de lágrimas, sudor, mosquitos, piscinas, en el transporte público o el contacto casual.", opciones: ["Verdadero", "Falso"], respuestaCorrecta: "Falso" },
  { pregunta: "Soy una mujer que vive con VIH y puedo tener el número de hijos que desee.", opciones: ["Verdadero", "Falso"], respuestaCorrecta: "Verdadero" },
  { pregunta: "El VIH solo lo adquieren las parejas homosexuales.", opciones: ["Verdadero", "Falso"], respuestaCorrecta: "Falso" },
  { pregunta: "Las personas promiscuas están en mayor riesgo de infectarse con el VIH.", opciones: ["Verdadero", "Falso"], respuestaCorrecta: "Falso" },
  { pregunta: "La penetración anal sin el uso de protección es la de mayor riesgo tanto para personas homosexuales como heterosexuales.", opciones: ["Verdadero", "Falso"], respuestaCorrecta: "Verdadero" },
  { pregunta: "Tener pareja estable protege de la infección por VIH.", opciones: ["Verdadero", "Falso"], respuestaCorrecta: "Falso" }
];

const letras = ['a', 'b'];
let indiceActual = 0;
let posicionIndicador = 50; // Inicialmente en el medio (50%)

function actualizarTermometro() {
    const indicador = document.getElementById('indicador');
    indicador.style.bottom = `${posicionIndicador}%`;
}

function mostrarPregunta() {
    const preguntaDiv = document.getElementById('pregunta');
    const opcionesDiv = document.getElementById('opciones');
    const resultadoDiv = document.getElementById('resultado');
    const reiniciarBtn = document.getElementById('reiniciar');

    preguntaDiv.textContent = preguntas[indiceActual].pregunta;

    opcionesDiv.innerHTML = '';

    preguntas[indiceActual].opciones.forEach((opcion, index) => {
        const botonOpcion = document.createElement('button');
        botonOpcion.textContent = `${letras[index]}. ${opcion}`;
        botonOpcion.onclick = () => responder(opcion);
        opcionesDiv.appendChild(botonOpcion);
    });

    resultadoDiv.style.display = 'none';
    reiniciarBtn.style.display = 'none';
    preguntaDiv.style.display = 'block';
    opcionesDiv.style.display = 'block';
}

function responder(respuesta) {
    if (preguntas[indiceActual].respuestaCorrecta !== respuesta) {
        posicionIndicador += 7.14; // ❌ Incorrecta → sube (hacia rojo)
        if (posicionIndicador > 100) posicionIndicador = 100;
    } else {
        posicionIndicador -= 7.14; // ✅ Correcta → baja (hacia verde)
        if (posicionIndicador < 0) posicionIndicador = 0;
    }

    actualizarTermometro();
    indiceActual++;

    if (indiceActual >= preguntas.length) {
        mostrarResultado();
    } else {
        mostrarPregunta();
    }
}

function mostrarResultado() {
    const preguntaDiv = document.getElementById('pregunta');
    const opcionesDiv = document.getElementById('opciones');
    const resultadoDiv = document.getElementById('resultado');
    const reiniciarBtn = document.getElementById('reiniciar');

    preguntaDiv.style.display = 'none';
    opcionesDiv.style.display = 'none';

    let mensaje = '';
    if (posicionIndicador <= 33.33) {
        mensaje = '<span style="font-size: 2em; font-weight: bold; color: white;">¡GENIAL!</span> Comprender los efectos del estigma y la discriminación, y trabajar para reducir estos, es responsabilidad de todas y todos. Recuerda: eres una pieza importante para acabar con el estigma y la discriminación.';
    } else if (posicionIndicador <= 66.67) {
        mensaje = 'Aunque reconoces el efecto de la discriminación en las personas que la sufren, es fundamental profundizar en cómo afecta a todas las personas, independientemente de su condición. Te invitamos a explorar este portal para que te informes y compartas nuestros contenidos. Queremos crear conciencia sobre la importancia de erradicar el estigma y la discriminación en todas sus formas. Recuerda: Tú eres una pieza importante en la lucha contra el estigma y la discriminación. Juntos podemos hacer la diferencia.';
    } else {
        mensaje = 'El estigma y la discriminación tienen un impacto profundo en la salud mental, la calidad de vida, posibilidades para acceder a trabajo, salud, educación y las oportunidades de las personas que viven con VIH y las poblaciones más afectadas por la epidemia. Te invitamos a explorar nuestro portal para informarte y compartir nuestros contenidos. Juntos, podemos crear conciencia y promover el cambio. Cada voz cuenta en la lucha contra el estigma y la discriminación. Recuerda: Eres una pieza importante para acabar con el estigma y la discriminación.';
    }

    resultadoDiv.innerHTML = mensaje;
    resultadoDiv.style.display = 'block';
    reiniciarBtn.style.display = 'block';
}

function reiniciarTest() {
    indiceActual = 0;
    posicionIndicador = 50; // Reiniciar al medio

    actualizarTermometro();
    mostrarPregunta();
}

document.getElementById('reiniciar').onclick = reiniciarTest;

// Iniciar cuestionario mostrando la primera pregunta
mostrarPregunta();
</script>

</body>
</html>/* End custom CSS */