<?php
$dia = $pagina[1];
$queryPregunta = mysqli_query($connect, "SELECT * FROM Desafio_Preguntas WHERE dia = '" . $dia . "' ORDER BY orden ASC ");
$dataPregunta = mysqli_fetch_array($queryPregunta);
$queryRespuestas = mysqli_query($connect, "SELECT * FROM Desafio_Respuestas WHERE id_asistente = '" . $_SESSION['id_user'] . "' AND dia = '" . $dia . "' ");
//$dataValidate = mysqli_fetch_array($queryRespuestas);
?>
<style>
body {
background-size: cover;
background-position: center;
background-attachment: fixed;
background-image: url(<?php echo $url; ?>/img/img_wd/bg_dia.png);
}
</style>
<div class="col-md-12">
<div class="container">
<?php echo $rersp; ?>
<div class="row">
<!-- PRESENTACION -->
<div class="col-md-12 paginas" align="center" id="home">
<div class="card">
<div class="card-body">
<h2 style="margin-top: 3%; color: #a62b4e;">TRIVIA</h2>
<div align="left">
<p>
<b>Instrucciones:</b><br>
1. De clic en el boton Realizar Juego<br>
2. A continuación encontrara una serie de preguntas con múltiples opciones de respuesta; de clic sobre la opción de respuesta que considere correcta. <br>
3. Recuerde que deberá contestar las preguntas antes que el contador de tiempo pare. <br>
4. Tiene un máximo de 1 minuto para contestar cada una de las preguntas presentadas.<br>
5. Cuando responda cada pregunta, el sistema lo pasará automáticamente a la siguiente.<br>
6. Cuando haya terminado, el sistema le mostrará su puntaje, y le permitirá ver el ranking de los jugadores con mayor puntaje en el juego. <br><br>
<h3>¡Muchos Éxitos!</h3>
</p>
<button type="button" onClick="Jugar()" class="btn btn-dark btn-block btn_item_menu" style="margin-bottom: 15px">
Iniciar juego
</button>
<button type="button" onClick="RankingGeneral()" class="btn btn-warning btn-block " style="margin-top: 20px">
Ver Ranking
</button>
</div>
</div>
</div>
<!-- <img src="<?php echo $url; ?>/img/desafio/logo_desafio.png" style="width: 100%; max-width: 400px; margin-top: 3%" ><br> -->
<!-- <img src="<?php echo $url; ?>/img/desafio/bt_jugar.png" width="200" style="padding: 10px" onClick="Jugar()" class="bt_interface">
<img src="<?php echo $url; ?>/img/desafio/bt_general.png" width="200" style="padding: 10px" onClick="RankingGeneral()" class="bt_interface"> -->
<!-- <img src="<?php echo $url; ?>/img/desafio/bt_equipo.png" width="200" style="padding: 10px" onClick="RankingPorEquipos()" class="bt_interface"> -->
</div>
<!-- JUEGO -->
<div class="col-md-12 paginas" align="center" id="juego" style="display: none">
<div class="row" style="color: #ffffff; margin-top: 25px" id="contenedor_preguntas">
Cargando...
</div>
</div>
<!-- RANKING -->
<div class="col-md-12 paginas" align="center" id="ranking" style="display: none; ">
<h3 style=" color: #ffffff; margin-top: 20px;">RANKING GENERAL</h3>
<div align="center">
<img src="<?php echo $url; ?>/img/img_wd/bt_back.png" width="130" style="padding: 10px" onClick="Home()" class="bt_interface">
</div>
<div id="cont_ranking" style="background-color: #fff; border-radius: 12px; overflow: hidden; max-width: 800px; padding: 5px 30px;">
</div>
</div>
<!-- RANKING -->
<div class="col-md-12 paginas" align="center" id="ranking_equipos" style="display: none">
<h3 style=" color: #ffffff; margin-top: 20px;">RANKING POR EQUIPOS</h3>
<div id="cont_ranking_equipos" style="background-color: #fff; border-radius: 12px; overflow: hidden; max-width: 800px; padding: 5px 30px;">
</div>
<div align="center">
<img src="<?php echo $url; ?>/img/desafio/bt_volver.png" width="200" style="padding: 10px" onClick="Home()" class="bt_interface">
</div>
</div>
</div>
</div>
</div>
<script>
var api = '<?php echo $api; ?>';
function CargarPregunta() {
data = {
id_user: <?php echo $_SESSION['id_user']; ?>,
dia: <?php echo $dia; ?>
};
jQuery.ajax({
url: api + "cargar_pregunta_desafio.php",
type: 'post',
data: data,
}).done(function(resp) {
$("#contenedor_preguntas").html(resp);
})
.fail(function(resp) {
console.log(resp);
})
.always(function(resp) {});
}
function GuardarRespuesta(val, elem) {
cr = $("#cr").val();
$(".opciones").attr("style", "pointer-events:none");
if (cr == val) {
$("#opt_" + cr).addClass("opciones_correcta");
} else {
$(elem).addClass("opciones_incorrecta");
$("#opt_" + cr).addClass("opciones_correcta");
}
parar();
setTimeout(function() {
data = {
id_user: <?php echo $_SESSION['id_user']; ?>,
pregunta: $("#pregunta").val(),
respuesta: val,
total_segundos: total_segundos,
dia: <?php echo $dia; ?>
};
jQuery.ajax({
url: api + "guardar_respuesta_desafio.php",
type: 'post',
data: data,
}).done(function(resp) {
$("#contenedor_preguntas").html(resp);
})
.fail(function(resp) {
console.log(resp);
})
.always(function(resp) {});
}, 1500);
}
function Home() {
$(".paginas").hide();
$("#home").show();
}
function Jugar() {
$(".paginas").hide();
$("#juego").show();
CargarPregunta();
}
function RankingGeneral() {
$(".paginas").hide();
$("#ranking").show();
jQuery.ajax({
url: api + "ranking_desafio.php",
type: 'post',
data: {
id: 0
},
}).done(function(resp) {
$("#cont_ranking").html(resp);
})
.fail(function(resp) {
console.log(resp);
})
.always(function(resp) {});
}
function RankingPorEquipos() {
$(".paginas").hide();
$("#ranking_equipos").show();
jQuery.ajax({
url: api + "ranking_desafio_equipos.php",
type: 'post',
data: {
id: 0
},
}).done(function(resp) {
$("#cont_ranking_equipos").html(resp);
})
.fail(function(resp) {
console.log(resp);
})
.always(function(resp) {});
}
</script>
<style>
.opciones {
background-color: #ffffff;
color: #006db7;
margin-bottom: 20px;
width: 97%;
cursor: pointer;
}
.opciones:hover {
background-color: #fff498;
color: #006db7;
margin-bottom: 20px;
width: 97%;
}
.opciones_correcta {
background-color: #c6ff84 !important;
}
.opciones_incorrecta {
background-color: #ffb6b1;
}
.bt_interface {
cursor: pointer;
transition: 0.5s all;
}
.bt_interface:hover {
transform: scale(1.1);
}
</style>
<script>
$(document).ready(function() {
$("#bt_desafio").addClass("btn_item_menu_active");
});
</script>
<script>
var total_segundos = 0;
h = 0;
m = 0;
s = 0;
window.onload = init;
function init() {
h = 0;
m = 0;
s = 0;
}
function cronometrar() {
total_segundos = 0;
escribir();
id = setInterval(escribir, 1000);
}
function escribir() {
var hAux, mAux, sAux;
s++;
if (s > 59) {
m++;
s = 0;
}
if (m > 59) {
h++;
m = 0;
}
if (h > 24) {
h = 0;
}
if (s < 10) {
sAux = "0" + s;
} else {
sAux = s;
}
if (m < 10) {
mAux = "0" + m;
} else {
mAux = m;
}
if (h < 10) {
hAux = "0" + h;
} else {
hAux = h;
}
document.getElementById("hms").innerHTML = hAux + ":" + mAux + ":" + sAux;
total_segundos++;
if (total_segundos > 120) {
GuardarRespuesta(0, 0, 0);
total_segundos = 0;
}
}
function parar() {
clearInterval(id);
}
function reiniciar() {
clearInterval(id);
document.getElementById("hms").innerHTML = "00:00:00";
h = 0;
m = 0;
s = 0;
}
$(document).ready(function() {
});
</script>
