<?php
$id = $pagina[1];
$dia = 1;
$queryValidate = mysqli_query($connect, "SELECT * FROM Retos WHERE id_asistente = '" . $_SESSION['id_user'] . "' AND reto = '" . $id . "' AND tipo_juego = 1 ");
if ($queryValidate->num_rows > 0) {
echo '<script> window.location = "' . $url . '/concursos/1"; </script>';
}
?>
<style>
body {
background-size: cover;
background-position: center;
background-attachment: fixed;
/* background-image: url(<?php echo $url; ?>/img/bg_juegos.jpg); */
background-color: #939597;
}
</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.18/vue.min.js"></script>
<style>
/*Downloaded from https://www.codeseek.co/arandaschimpf/crucigrama-vRgKZP */
.container {
margin-top: 3vh;
}
.table-container {
display: flex;
flex-direction: column;
align-items: center;
}
table {
border-collapse: collapse;
font-size: 18px;
}
td {
width: 36px;
height: 36px;
border: 2px solid #ffffff;
text-align: center;
position: relative;
text-transform: uppercase;
font-family: arial;
}
td.empty {
background: #ff9f55;
background: rgba(0, 0, 0, 0);
border: 0;
}
td.selected {
background: rgb(0 0 0 / 57%);
}
td.start {
cursor: pointer;
}
td.start label {
position: absolute;
top: 0;
left: 2px;
text-align: left;
font-size: 15px;
color: #ffea00;
font-weight: bold;
}
td.start:hover {
background: #204d67;
}
td.start.selected:hover {
background: #ddf;
}
.mensaje {
position: absolute;
color: white;
text-align: center;
border-radius: 8px;
padding: 10px;
width: 50vw;
z-index: 1000;
background: #007eba;
}
.mensaje button {
margin-top: 10px;
}
</style>
<div class="col-md-12">
<div class="container">
<?php echo $rersp; ?>
<div class="row">
<div class="col-md-12" align="center">
<h1 style="color: #ffffff;">CRUCIGRAMA</h1>
</div>
<div class="col-md-7" align="center" style="color: #ffffff;">
<div id="app" class="container" @keyup.escape="selected = undefined">
<div class="table-container" style="display:none;" v-show="true">
<div class="timer">{{cronometro}}</div>
<div class="mensaje" v-if="mensaje !== undefined">
<div class="content">{{mensaje}}</div>
<button @click="mensaje = undefined" class="btn btn-primary">OK</button>
</div>
<table>
<tr v-for="(row, y) in matrix" :key="y">
<td v-for="(cell, x) in row" :class="{empty: cell.empty, start: !!cell.start, selected: cell.words.includes(selected)}" @click="selectWord(cell.start)">
<label v-if="!!cell.start">{{cell.start}}</label>
{{cell.words.some(i => completed[i]) ? cell.letter : ' '}}
</td>
</tr>
</table>
<div v-if="selected !== undefined" style="text-align: center;">
<p class="pista" v-if="pista">
{{pista}}
</p>
<input v-model="answer" ref="input" @keyup.enter="corregir" />
<button @click="corregir" class="btn btn-primary">Colocar</button>
<button @click="solucion" class="btn btn-danger" style="display:none">Pista</button>
</div>
<hr>
<button class="btn btn-primary" @click="finalizar" style="display: none">Finalizar</button>
</div>
<h3 v-show="false">Cargando....</h3>
</div>
<script src='https://unpkg.com/vue'></script>
<div align="center" style="display: none" id="boton_volver">
<a href="<?php echo $url; ?>/concursos/1">
<button class="btn btn-primary btn-block" style="margin-top: 35px;">
Volver
</button>
</a>
</div>
</div>
<div class="col-md-5" align="left" style="color: #fff;">
<p>Para completar el desafio solo debe dar click en el número y completar la palabras. Debe completar todas las palabra en el menor tiempo posible.</p>
<h3>Horizontales</h3>
<hr>
<ul>
<li>1. Nunca estaremos satisfechos y siempre buscaremos _________ para generar más valor.</li>
<li>2. Astellas buscará mejorar el valor de la empresa de una manera ___________</li>
<li>3. En nuestra filosofia, _________ es maximizar la creatividad a travez de la diversidad y comunicación </li>
<li>4. Foco y vision externa es estar un paso adelante del mercado atentos al __________ cambiante del sector salud</li>
<li>5. Un elemento importante de nuestra filofofía es… apoyar un estilo de vida ___________ en la gente de todo el mundo. </li>
<li>7. Uno de nuestras principios es… ____________</li>
</ul>
<h3>Verticales</h3>
<hr>
<ul>
<li>6. En nuestra creencias… Nunca estaremos satisfechos y siempre buscaremos innovar para generar más valor… esta relacionada con la.. ___________ </li>
<li>8. ¿Qué significa la abreviatura Trx utilizada en Astellas?</li>
</ul>
</div>
</div>
</div>
</div>
<script>
/*Downloaded from https://www.codeseek.co/arandaschimpf/crucigrama-vRgKZP */
// Arreglo de palabras indicando la posición de su inicio, su sentido (vertical u horizontal),
// la palabra en cuestión y la pista que se presenta al usuario
var correctas = 0;
var total_segundos = 0;
const palabras = [{
pos: [6, 7],
sentido: 0,
palabra: 'innovar',
pista: '1. Nunca estaremos satisfechos y siempre buscaremos _________ para generar más valor.'
},
{
pos: [10, 16],
sentido: 0,
palabra: 'sostenible',
pista: '2. Astellas buscará mejorar el valor de la empresa de una manera ___________'
},
{
pos: [0, 1],
sentido: 0,
palabra: 'apertura',
pista: '3. En nuestra filosofia, _________ es maximizar la creatividad a travez de la diversidad y comunicación '
},
{
pos: [5, 3],
sentido: 0,
palabra: 'panorama',
pista: '4. Foco y vision externa es estar un paso adelante del mercado atentos al __________ cambiante del sector salud'
},
{
pos: [2, 10],
sentido: 0,
palabra: 'saludable',
pista: '5. Un elemento importante de nuestra filofofía es… apoyar un estilo de vida ___________ en la gente de todo el mundo.'
},
{
pos: [6, 0],
sentido: 1,
palabra: 'creatividad',
pista: '6. En nuestra creencias… Nunca estaremos satisfechos y siempre buscaremos innovar para generar más valor… esta relacionada con la.. ___________ '
},
{
pos: [11, 13],
sentido: 0,
palabra: 'integridad',
pista: '7. Uno de nuestras principios es… ____________'
},
{
pos: [12, 6],
sentido: 1,
palabra: 'trasplantes',
pista: '8. ¿Qué significa la abreviatura Trx utilizada en Astellas?'
},
]
// Objeto default para celdas vacías de la grilla
const empty = {
start: false,
letter: '',
words: [],
empty: true
}
new Vue({
el: '#app',
data() {
return {
// Arreglo de booleanos indicando si una palabra fue completada
completed: Array(palabras.length).fill(false),
// Entero indicando la palabra que fue seleccionada para completar
selected: undefined,
// String donde se guarda lo que ingresa el usuario
answer: '',
// Cantidad de veces que se solicitó una pista
penalties: 0,
// Temporizador en segundos desde el comienzo de la partida. Comienza en 5 minutos.
timer: 60 * 5,
// La tabla que será armada al inicio, conteniendo todas las celdas
matrix: [],
// Mensaje final a mostrar
mensaje: undefined
}
},
created() {
// Creación de la tabla que contiene las celdas.
const width = palabras.reduce((max, cur) =>
Math.max(max, cur.pos[0] + (cur.sentido === 0 ? cur.palabra.length : 1)), 0)
const height = palabras.reduce((max, cur) =>
Math.max(max, cur.pos[1] + (cur.sentido === 1 ? cur.palabra.length : 1)), 0)
let matrix = Array(height).fill(0).map(() => Array(width).fill(null).map(() => empty))
palabras.forEach((palabra, index) => {
const [x, y] = palabra.pos
palabra.palabra.split('').forEach((l, i) => {
let cell = matrix[y + (palabra.sentido ? i : 0)][x + (palabra.sentido ? 0 : i)]
if (cell === empty) {
cell = matrix[y + (palabra.sentido ? i : 0)][x + (palabra.sentido ? 0 : i)] = {
words: []
}
}
cell.empty = false
cell.words.push(index)
if (i === 0) {
cell.start = index + 1
}
cell.letter = l
})
})
this.matrix = matrix
// Control del temporizador y disparador del evento final cuando éste se acabe
this.$options.interval = setInterval(() => {
this.timer--;
total_segundos++;
if (this.timer <= 0) {
//clearInterval(this.$options.interval)
this.finalizar();
$("#modal_general").modal("show");
$("#modal_body").html("El tiempo ha finalizado.");
}
}, 1000)
},
computed: {
// Contiene la pista de la palabra seleccionada
pista() {
if (this.selected === undefined) return undefined
return `${palabras[this.selected].sentido ? 'Vertical' : 'Horizontal'} ${this.selected + 1}: ${palabras[this.selected].pista}`
},
// Formato a mostrar del cronómetro
cronometro() {
const minutes = Math.floor(this.timer / 60).toString().padStart(2, '0')
const seconds = Math.floor(this.timer % 60).toString().padStart(2, '0')
return `${minutes}:${seconds}`
}
},
methods: {
selectWord(index) {
if (index > 0) {
this.selected = index - 1
this.answer = ''
setTimeout(() => this.$refs.input.focus(), 50)
}
},
// Se fija si la palabra ingresada es correcta y de ser así, modifica el arreglo de palabras completas
corregir() {
const solucion = palabras[this.selected].palabra
const answer = this.answer.toLowerCase()
if (answer === solucion) {
this.completed[this.selected] = true
this.selected = undefined;
correctas++;
if (correctas >= palabras.length) {
$("#modal_general").modal("show");
$("#modal_body").html("¡Felicitaciones!, ha completado el juego.");
this.finalizar();
}
} else {
$("#modal_general").modal("show");
$("#modal_body").html("¡Respuesta Incorrecta!<br>Intente de nuevo");
}
},
// Agrega una letra correcta más a la respuesta actual
solucion() {
const solucion = palabras[this.selected].palabra
const answer = this.answer.toLowerCase()
if (answer === solucion) {
return
}
if (answer !== solucion.slice(0, answer.length)) {
this.penalties++
this.answer = ''
}
this.answer = solucion.slice(0, this.answer.length + 1)
this.penalties++
},
// Calcula el puntaje final del jugador en base a las respuestas correctas y las penalidades por pistas
finalizar() {
const total = this.completed.reduce((total, current, i) => total + palabras[i].palabra.length, 0)
const completo = this.completed.reduce((total, current, i) => current ? total + palabras[i].palabra.length : total, 0)
const tempScore = Math.ceil(100 * completo / total)
const finalScore = Math.max(tempScore - this.penalties, 0)
if (tempScore < 100) {
this.penalties++
}
/*this.mensaje = `
Tu puntuación es ${finalScore}%.
`*/
clearInterval(this.$options.interval);
$("#boton_volver").show();
Guardar_Puntaje(0, 0, finalScore);
console.log(total);
}
}
})
</script>
<script>
var api = '<?php echo $url; ?>/api/';
function Guardar_Puntaje(acierto, numIntentos, porcentaje) {
data = {
id_user: <?php echo $_SESSION['id_user']; ?>,
tiempo: total_segundos,
porcentaje: porcentaje,
reto: <?php echo $id; ?>,
tipo_juego: 1,
dia: <?php echo $dia; ?>
};
jQuery.ajax({
url: api + "guardar_puntaje.php",
type: 'post',
data: data,
}).done(function(resp) {
$("#xscript").html(resp);
})
.fail(function(resp) {
console.log(resp);
})
.always(function(resp) {});
}
</script>
