<style>
body {
background-size: cover;
background-position: center;
background-attachment: fixed;
/* background-image: url(<?php echo $url; ?>/img/img_wd/bg_dia.png); */
}
.text-j {
text-align: justify !important;
}
.color-p {
color: #b2003eff !important;
}
.color-s {
color: #adacb2ff !important;
}
.pie {
font-size: 15px;
}
.size-22 {
font-size: 22px;
}
.size-12 {
font-size: 12px;
}
.size-16 {
font-size: 16px;
}
.btn-send {
border-radius: 25px;
margin-bottom: 15px;
padding: 5px 30px;
color: #fafafa;
font-size: 15px;
background-color: #b2003eff;
border: 0;
font-family: S-Core-CoreSansBold;
}
.btn-send:hover {
color: #fdd300;
}
.header1 {
background: #b2003eff;
text-align: center;
color: #ffffff;
}
</style>
<?php
function generateRandomString($length = 10)
{
return substr(str_shuffle("0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ_-"), 0, $length);
}
if (!isset($_SESSION['id_user']) || $_SESSION['id_user'] == '') {
echo '<script> window.location = "' . $url . '/home"; </script>';
}
$id = $pagina[1];
$cuenta = mysqli_query($connect, "SELECT count(*) as cuenta FROM juego_virtual;");
$cuenta_data = mysqli_fetch_array($cuenta);
if (intval($id) > $cuenta_data['cuenta']) {
echo '
<script>
window.location = "/ranking_trip";
</script>
';
}
$query = mysqli_query($connect, "SELECT * FROM Asistentes WHERE id = " . $_SESSION['id_user']);
$data = mysqli_fetch_array($query);
$count = "SELECT
CASE
WHEN (select count(*) from juego_virtual) = (select count(*) from respuesta_map where equipo='" . $data['equipo'] . "') THEN
true
ELSE
false
END as cuenta
";
$query_count = mysqli_query($connect, $count);
$count_res = mysqli_fetch_array($query_count);
if ($count_res['cuenta'] == 1) {
echo '
<script>
window.location = "/ranking_trip";
</script>
';
}
$query_horainicio = mysqli_query($connect, "select hora_fin, juego_id from respuesta_map where equipo='" . $data['equipo'] . "' and hora_fin = (select max(hora_fin) from respuesta_map where equipo= '" . $data['equipo'] . "');");
$hora_inicio = mysqli_fetch_array($query_horainicio);
$inicio = null;
if ($hora_inicio['hora'] == null) {
$inicio = date('H:i:s', time());
} else {
$inicio = $hora_inicio['hora'];
}
$query_suma = mysqli_query($connect, "select SEC_TO_TIME(sum(TIME_TO_SEC(subtime(hora_fin, hora_inicia)))) as sum from respuesta_map WHERE equipo= '" . $data['equipo'] . "';");
$tiempo = mysqli_fetch_array($query_suma);
$ahora = '00:00:00';
if ($tiempo['sum'] != null) {
$ahora = $tiempo['sum'];
}
if (intval(explode(':', $ahora)[0]) >= 1 || intval(explode(':', $ahora)[1]) >= 45) {
echo '
<script>
window.location = "/lobby";
</script>
';
} else {
if ($hora_inicio['juego_id'] != null) {
if (intval($hora_inicio['juego_id']) >= intval($id)) {
echo '
<script>
window.location = "/juego/' . ($hora_inicio['juego_id'] + 1) . '";
</script>
';
}
}
}
$query = mysqli_query($connect, "SELECT * FROM juego_virtual WHERE id = " . $id);
$juego = mysqli_fetch_array($query);
$moderador = true;
if ($data['rol'] == "JUGADOR") {
$moderador = false;
}
if ($moderador) {
if (isset($_POST["btn_form"])) {
if ($_POST['termina'] == '') {
$dir = $_SERVER["DOCUMENT_ROOT"] . "/img_juego/";
$dir1 = "/img_juego/";
$nombreArchivo = $_FILES['image']['name'];
$imagen = $_FILES['image']['tmp_name'];
$exp = explode('.', $nombreArchivo);
$name = generateRandomString(30) . '.' . $exp[sizeof($exp) - 1];
$ubi = $dir . $name;
$url = $dir1 . $name;
if (!move_uploaded_file($imagen, $ubi)) {
echo "error en la subida de la foto";
exit;
}
/* $image = $_FILES['image']['tmp_name'];
$imgContenido = addslashes(file_get_contents($image)); */
} else {
$url = null;
}
$cont = 0;
$query = mysqli_query($connect, "SELECT * FROM preguntas_google WHERE juego_virtual_id = " . $juego['id']);
$aux = 0;
while ($pregunta = mysqli_fetch_array($query)) {
$aux += 1;
if ($pregunta['respuesta'] == $_POST['check' . $aux]) {
if ($aux == 1) {
$cont += 5;
}
$cont += 5;
}
}
$sh1 = $_POST['check1'];
$sh2 = $_POST['check2'];
$sh3 = $_POST['check3'];
$sh4 = $_POST['check4'];
$ini = $_POST['inicio'];
$fin = $_POST['fin'];
$e = $data['equipo'];
$i = "insert into respuesta_map(res_1, res_2, res_3, res_4, puntaje, equipo, juego_id, imagen, hora_inicia) values('$sh1','$sh2','$sh3','$sh4',$cont,'$e',$id, '$url', '$ini');";
$insertar = mysqli_query($connect, $i);
if ($insertar) {
if ($_POST['termina'] == '') {
echo "<script>alert('Se subieron los datos correctamente. Continuemos con el viaje.')</script>";
echo '
<script>
window.location = "/juego/' . ($id + 1) . '";
</script>
';
} else {
echo "<script>alert('El viaje ha terminado');</script>";
echo '
<script>
window.location = "/ranking_trip";
</script>
';
}
} else {
if ($_POST['termina'] == '') {
echo "<script>alert('No se guardaron los datos. Lena los campos e intentalo de nuevo');</script>";
} else {
echo "<script>alert('El viaje ha terminado');</script>";
echo '
<script>
window.location = "/ranking_trip";
</script>
';
}
}
// Sie el usuario no selecciona ninguna imagen
}
}
?>
<div class="modal fade" id="modal_instrucciones" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Instrucciones de la dinámica:</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body" align="left">
Yesid Madrid, [23/04/2021, 8:55:24 a. m.]:
<ol>
<li> Perteneces a un equipo, cuyo objetivo es completar la visita a 15 destinos diferentes, ubicados en nuestros tres países. La estrategia de juego que hagan como equipo puede hacer la diferencia para ganar </li>
<li> En el viaje que vas a realizar con tu equipo, visitarán lugares emblemáticos de nuestros 3 países y deberán responderán preguntas y realizar acciones relacionadas con los mismos. </li>
<li> En el equipo existen dos tipos de roles en cada uno de los equipos: Los jugadores y un moderador. </li>
<li> Cuando des clic en el botón “Ir al viaje” después de conocer el equipo con el cuál realizarás tu Virtual Trip, llegarás a un módulo en donde encontrarás lo siguiente:</li>
<li> Si se te ha asignado el rol de jugador, encontrarás en tu pantalla:
<ul>
<li> Una serie de pistas relacionadas con los 15 destinos que deberán encontrar y tres preguntas de cultura general relacionadas con cada uno de estos lugares.</li>
<li> Un chat privado que les permitirá comunicarse como equipo.</li>
<li> Un contador de tiempo que les irá mostrando el tiempo que llevan realizando el juego.</li>
<li> Una pantalla de streaming en donde la presentadora les irá narrando los sucesos que van pasando en el juego, así como el avance de los demás equipos.</li>
<li> Un mapa de Google Maps en donde deberán buscar cada una de las coordenadas que se les reseñarán como “pistas” para poder viajar a cada uno de los 15 destinos de nuestro Virtual Trip.</li>
<li> Un botón de “Continuar viaje” que solo les permitirá avanzar, cuando el moderador complete las respuestas en la plataforma de juego y haya realizado el “cargue” de una imagen relacionada con el sitio que visitaron.</li>
</ul>
</li>
<li> Si se te ha asignado el rol de moderador, encontrarás en tu pantalla:
<ul>
<li> Las diferentes opciones de respuesta a cada una de las preguntas realizadas por cada una de las pistas. Para responder, solo debes dar clic en la casilla que consideres como respuesta correcta.</li>
<li> Un chat privado que les permitirá comunicarse como equipo. A través de este chat podrás comunicarte con tu equipo y así ir recibiendo información de los demás miembros de tu equipo para avanzar rápidamente. Recuerda, este juego lo gana el equipo que haga su Virtual Trip en el menor tiempo con la mayor cantidad de aciertos. </li>
<li> Un contador de tiempo que te irá mostrando el tiempo que llevan realizando el juego.</li>
<li> Una pantalla de streaming en donde la presentadora les irá narrando los sucesos que van pasando en el juego, así como el avance de los demás equipos.</li>
<li> Un botón de cargar archivo en donde deberás anexar y subir una imagen relacionada con el sitio que visitaron, la cual debe haber sido previamente concertada con los miembros del equipo a través del chat.</li>
<li> Cuando el moderador haya contestado las tres preguntas de cada destino y cargado la imagen de este mismo lugar, deberá dar “clic” en el botón “Enviar”. Esto le permitirá al equipo continuar el viaje hacia el próximo destino hasta haber visitado los 15 lugares de los que se compone el Virtual Trip.</li>
</ul>
</li>
<li> Como equipo (Jugadores + Moderador), para visitar estos quince (15) destinos tienen un tiempo máximo de 45 minutos. </li>
<li> Si logran visitar todos los destinos antes del tiempo establecido, el sistema ya no le arrojará más destinos y habrá terminado el juego. Si cumplido el tiempo como equipo no han visitado el 100% de las lugares, el juego se interrumpirá de manera automática. </li>
<li> El puntaje obtenido será grupal y el resultado se dará a conocer al finalizar todos los equipos su viaje a través del Virtual Trip.</li>
</ol>
</div>
</div>
</div>
</div>
<div class="container-fluid">
<div class="row">
<div class="col-12" align="right">
<button type="button" class="btn btn_juegos" style="margin-top: 30px;" data-toggle="modal" data-target="#modal_instrucciones">
Ver Instruccines
</button>
</div>
</div>
<div class="row">
<div class="col-12" align="center">
<h3>
VIRTUAL TRIP - PLATAFORMA <?php echo $data['rol']; ?> <br> <span id="tiempo"></span>
</h3>
</div>
</div>
<div class="row" style="padding-top: 10px;">
<?php
$stream = "https://vimeo.com/event/919789/embed";
if (!$moderador) {
?>
<div class="col-8">
<iframe width="100%" height="100%" class="streaming_auditorio" src="<?php echo $stream; ?>" frameborder="0" allow="autoplay; fullscreen; picture-in-picture" allowfullscreen></iframe>
</div>
<div class="col-4">
<div class="header1">
Chatea con tu equipo
</div>
<div class="col-12" style="height: 350px; overflow: scroll; overflow-x: hidden;">
<?php include("chat.php"); ?>
</div>
</div>
<div id="qwerty" class="col-4" style="padding-top: 40px;">
<h2 class="text-center color-p size-22"><?php echo 'Pista: ' . $juego['id']; ?> </h2>
<p class="size-18 text-justify"> <?php echo $juego['descripcion']; ?> </p>
<br>
</div>
<div class="col-8" style="padding-left: 40px; padding-top: 40px;">
<h3 class="color-p text-center size-22">Preguntas</h3><br>
<div class="row">
<?php
$query = mysqli_query($connect, "SELECT * FROM preguntas_google WHERE juego_virtual_id = " . $juego['id']);
$aux = 0;
while ($pregunta = mysqli_fetch_array($query)) {
$aux += 1;
echo '<div class="col-6 ">';
echo '<b class="text-center size-20">' . ($aux == 1 ? '' : ($aux - 1)) . ' - ' . $pregunta['pregunta'] . "</b><br><br>";
echo "</div>";
}
?>
</div>
</div>
<div class="col-12 text-center" style="padding-bottom: 25px;">
<b class="pie color-p">Visita la siguiente latitud y longitud en Google Maps: <?php echo $juego['lugar']; ?></b>
</div>
<div class="col-12" style="height: 400px; width: 250px; overflow-x: hidden;">
<?php include("mapa.php"); ?>
</div>
<?php } else { ?>
<div class="col-8" style="overflow-x: hidden; ">
<iframe width="100%" height="100%" class="streaming_auditorio" src="<?php echo $stream; ?>" frameborder="0" allow="autoplay; fullscreen; picture-in-picture" allowfullscreen></iframe>
</div>
<div class="col-4">
<div class="header1">
Chatea con tu equipo
</div>
<div class="col-12" style="height: 350px; overflow: scroll; overflow-x: hidden;">
<?php include("chat.php"); ?>
</div>
</div>
<div class="col-12" style=" padding-left: 40px; padding-top: 10px;">
<h3 class="color-p text-center size-22">Preguntas - Pista <?php echo $juego['id']; ?> </h3><br>
<form id="formulario" action="" method="post" enctype="multipart/form-data">
<input type="hidden" name="inicio" value="<?php echo $inicio; ?>">
<input type="hidden" id="fin" name="fin" value="">
<input type="hidden" id="termina" name="termina" value="">
<div class="row">
<?php
$query = mysqli_query($connect, "SELECT * FROM preguntas_google WHERE juego_virtual_id = " . $juego['id']);
$aux = 0;
while ($pregunta = mysqli_fetch_array($query)) {
$aux += 1;
echo '<div class="col-3 ">';
$item = "";
if ($aux == 1) {
$item = "Sitio visitado";
} else {
$item = "Pregunta " . ($aux - 1);
}
echo '<b class="text-center size-22"> ' . $item . "</b><br><br>";
?>
<div class="form-check">
<input class="form-check-input " style="font-size: 15px; transform: scale(1.5);" type="radio" name="check<?php echo $aux; ?>" value="1" required />
<label class="form-check-label" style="font-size: 15px;" for="flexCheckDefault">
<?php echo $pregunta['op_1']; ?>
</label>
</div>
<div class="form-check">
<input class="form-check-input" style="font-size: 15px; transform: scale(1.5);" type="radio" name="check<?php echo $aux; ?>" value="2" required />
<label class="form-check-label" style="font-size: 15px;" for="flexCheckDefault">
<?php echo $pregunta['op_2']; ?>
</label>
</div>
<div class="form-check">
<input class="form-check-input" style="font-size: 15px; transform: scale(1.5);" type="radio" name="check<?php echo $aux; ?>" value="3" required />
<label class="form-check-label" style="font-size: 15px;" for="flexCheckDefault">
<?php echo $pregunta['op_3']; ?>
</label>
</div>
<div class="form-check">
<input class="form-check-input" style="font-size: 15px; transform: scale(1.5);" type="radio" name="check<?php echo $aux; ?>" value="4" required />
<label class="form-check-label" style="font-size: 15px;" for="flexCheckDefault">
<?php echo $pregunta['op_4']; ?>
</label>
</div>
<br>
<?php
echo "</div>";
}
?>
</div>
<div class="form-group">
<label class="color-p" for="Subirimagen">Subir imagen (recuerda que deberán cargar una imagen relacionada con el sitio que visitaron)</label>
<input id="image" type="file" name="image" accept="image/*" class="form-control-file" id="Subirimagen" required>
</div>
<button id="btn_form" name="btn_form" type="submit" class="btn btn-send btn-block" style="margin-bottom: 70px; ">
Enviar Respuestas <i class="fa fa-arrow-right" aria-hidden="true" style="margin-left: 8px;"></i>
</button>
</form>
</div>
<?php } ?>
<div class="col-12">
<h2 align="center">Equipo <?php echo $data['equipo']; ?> </h2>
<?php
$query1 = mysqli_query($connect, "select * from Asistentes where equipo = '" . $data['equipo'] . "';");
$aux = "";
$col1 = "<ul>";
$col2 = "<ul>";
$col3 = "<ul>";
$col4 = "<ul>";
$cont = 0;
while ($data1 = mysqli_fetch_array($query1)) {
$cont += 1;
if ($data1['rol'] == 'JUGADOR') {
$aux = "<li>" . $data1['nombre'] . " " . $data1["apellidos"] . "</li>";
} else {
$aux .= "<li>" . $data1['nombre'] . " " . $data1["apellidos"] . " - Moderador </li>";
}
if ($cont == 1) {
$col1 .= $aux;
}
if ($cont == 2) {
$col2 .= $aux;
}
if ($cont == 3) {
$col3 .= $aux;
}
if ($cont == 4) {
$col4 .= $aux;
$cont = 0;
}
}
$col1 .= "</ul>";
$col2 .= "</ul>";
$col3 .= "</ul>";
$col4 .= "</ul>";
?>
<div class="row" style="margin-bottom: 25px;">
<div class="col-3">
<?php echo $col1; ?>
</div>
<div class="col-3">
<?php echo $col2; ?>
</div>
<div class="col-3">
<?php echo $col3; ?>
</div>
<div class="col-3">
<?php echo $col4; ?>
</div>
</div>
</div>
</div>
<?php if (!$moderador) { ?>
<div style="text-align: right; margin-top: 5px;">
<!-- <a href="<?php echo $url . '/juego/' . ($id + 1); ?>"> -->
<button type="button" onclick="avanzar(<?php echo $id; ?>)" class="btn-send btn-block" style="margin-top: 20px;">
Continuar con el viaje
</button>
<!-- </a> -->
</div>
<?php } ?>
</div>
<script>
$('#formulario').submit(function() {
var aho = (new Date()).toLocaleTimeString();
document.getElementById('fin').value = aho;
return true; // return false to cancel form action
})
function avanzar(id) {
<?php
$query = mysqli_query($connect, "SELECT * FROM respuesta_map WHERE equipo = " . $data['equipo'] . " and juego_id = " . $id);
if ($query->num_rows > 0) {
?>
window.location = "/juego/" + (id + 1);
<?php
} else {
?>
alert('No se ha terminado de responder esta sección.');
<?php
}
?>
}
// Milliseconds for the calculations
const MILLISECONDS_OF_A_SECOND = 1000;
var ahora = "<?php echo $ahora; ?>".split(':');
var inicio = "<?php echo $inicio; ?>".split(':');
const DATE_TARGET = new Date();
const DATE_INICIO = new Date();
const DAY_ACTUAL = new Date();
DATE_TARGET.setHours(Number(ahora[0]), Number(ahora[1]), Number(ahora[2]));
DATE_INICIO.setHours(Number(inicio[0]), Number(inicio[1]), Number(inicio[2]));
const dif = Math.floor((DAY_ACTUAL - DATE_INICIO));
DATE_TARGET.setMilliseconds(DATE_TARGET.getMilliseconds() + dif);
const SPAN_SECONDS = document.getElementById("tiempo");
function updateCountdown() {
// Calcs
DATE_TARGET.setMilliseconds(MILLISECONDS_OF_A_SECOND);
SPAN_SECONDS.textContent = DATE_TARGET.toLocaleTimeString();
if (DATE_TARGET.getHours() > 0 || DATE_TARGET.getMinutes() >= 45) {
if (document.getElementsByName('check1').value == undefined) {
document.getElementsByName('check1').value = '*';
}
if (document.getElementsByName('check2').value == undefined) {
document.getElementsByName('check2').value = '*';
}
if (document.getElementsByName('check3').value == undefined) {
document.getElementsByName('check3').value = '*';
}
if (document.getElementsByName('check4').value == undefined) {
document.getElementsByName('check4').value = '*';
}
if (document.getElementsByName('image').value == undefined) {
document.getElementById('image').type = 'text';
document.getElementById('image').value = '*';
}
document.getElementById('termina').value = "termino";
document.getElementById('btn_form').click();
clearInterval(inter);
}
}
var inter = setInterval(updateCountdown, MILLISECONDS_OF_A_SECOND);
</script>
