<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">
<ol>
<li> Perteneces a un equipo cuyo objetivo es completar la visita de 15 destinos por tres países diferentes. </li>
<li> En el viaje que vas a realizar con tu equipo, visitarán una serie de lugares y responderán a preguntas relacionadas con los mismos. </li>
<li> En el equipo existen dos tipos de roles: Los jugadores y el moderador. </li>
<li> Van a trabajar como individuos que hacen parte de un equipo, recuerden que deben aportar de manera individual para lograr los objetivos del</li>
<li> Cuando des clic en el botón ir al viaje, después de conocer el equipo con el cuál vivirás la experiencia, llegaras a un módulo en donde encontraras lo siguiente. </li>
<li> Si se te ha asignado el rol de jugador encontraras en tu pantalla:
<ul>
<li> Una serie de pistas relacionadas con los 15 sitios que deberán encontrar y tres preguntas de cultura general relacionadas con cada uno de los sitios.</li>
<li> Un chat que les permitirá comunicarse como equipo, no se podrán comunicar por ningún otro medio de comunicación diferente.</li>
<li> Un contador de tiempo que les ira mostrando el tiempo que llevan realizando el juego.</li>
<li> Una pantalla de streaming en donde la presentadora les ira contando 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 podrán buscar unas coordenadas que se les han colocado a las pistas de cada sitio.</li>
<li> Un botón de continuar viaje que solo les permitirá continuar, cuando el moderador complete las respuestas y cargue una imagen relacionada con el sitio que visitaron.</li>
</ul>
</li>
<li> Si se te ha asignado el rol de moderador encontraras en tu pantalla:
<ul>
<li> Las opciones de respuesta que van a responder frente a las pistas y las preguntas de cultura general de los sitios que van a visitar; para responder solo debes dar clic en la casilla que consideren, es la respuesta correcta.</li>
<li> Un chat que les permitirá comunicarse como equipo, no se podrán comunicar por ningún otro medio de comunicación diferente.</li>
<li> Un contador de tiempo que les ira mostrando el tiempo que llevan realizando el juego.</li>
<li> Una pantalla de streaming en donde la presentadora les ira contando 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án cargar una imagen relacionada con el sitio que visitaron y la cuál debe ser concertada con los miembros del equipo a través del chat.</li>
<li> Cuando el moderador haya seleccionado el sitio que visitaron, contestado las tres preguntas y cargado la imagen del sitio; deberá dar clic en el botón enviar y esto le permitirá al equipo continuar el viaje y visitar el siguiente sitio.</li>
</ul>
</li>
<li> Para visitar estos quince (15) destinos; tienen un tiempo máximo de 45 minutos. Si logran visitar todos los destinos antes del tiempo establecido, el sistema ya no le mostrará más destinos y habrá terminado la dinámica. </li>
<li> El puntaje de resultados, se dará a la totalidad del equipo; cada sitio que encuentren y visiten de manera correcta les dará 10 puntos y cada pista que respondan correctamente les dará 5 puntos, además se tendrá en cuenta el tiempo total que el equipo se demore en visitar los sitios y responder las preguntas. </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>
