<?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"; </script>';
}
?>
<style>
body{
background-size: cover;
background-position: center;
background-attachment: fixed;
background-image: url(<?php echo $url; ?>/img/bg_juegos.jpg);
}
</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">
<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. Vargatef (OFEV) tiene una indicación recientemente lanzada en Perú para _ _ _ _ _ _ _ _ _ sistémica con compromiso pulmonar.</li>
<li>2. El CSF2 de Jardiance trata de establecer la importancia e interconexión del sistema cardio, ____ , metabólico</li>
<li>3. Frase que se repitió durante todas las ponencias y nos guía en el 2021: _____ lo podemos lograr.</li>
<li>4. Para el segmento porcino se prepara el lanzamiento de _____</li>
</ul>
<h3>Verticales</h3>
<hr>
<ul>
<li>5. GP / Endo ________________ es el segmento B de Jardiance.</li>
<li>6. Uno de los productos competitive en Cluster con el cuál en el 2021 tenemos una nueva fuerza de ventas y objetivos bien retadores es _ _ _ _ _ _ _ _</li>
<li>7. _ _ _ _ _ _ y Accountability, son dos de nuestros comportamientos AAI.</li>
<li>8. Para mayor agilidad en el análisis de indicadores y toma de decisiones, este año contaremos con _ _ _ _ _ _ </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: [0, 1],
sentido: 0,
palabra: 'esclerosis',
pista: '1. Vargatef (OFEV) tiene una indicación recientemente lanzada en Perú para _ _ _ _ _ _ _ _ _ sistémica con compromiso pulmonar.'
},
{
pos: [1, 7],
sentido: 0,
palabra: 'reno',
pista: '2. El CSF2 de Jardiance trata de establecer la importancia e interconexión del sistema cardio, ____ , metabólico'
},
{
pos: [6, 8],
sentido: 0,
palabra: 'juntos',
pista: '3. Frase que se repitió durante todas las ponencias y nos guía en el 2021: _____ lo podemos lograr.'
},
{
pos: [10, 4],
sentido: 0,
palabra: 'frevax',
pista: '4. Para el segmento porcino se prepara el lanzamiento de _____'
},
{
pos: [11, 0],
sentido: 1,
palabra: 'progresista',
pista: '5. GP / Endo ________________ es el segmento B de Jardiance.'
},
{
pos: [2, 0],
sentido: 1,
palabra: 'actilyse',
pista: '6. Uno de los productos competitive en Cluster con el cuál en el 2021 tenemos una nueva fuerza de ventas y objetivos bien retadores es _ _ _ _ _ _ _ _'
},
{
pos: [14, 4],
sentido: 1,
palabra: 'agility',
pista: '7. _ _ _ _ _ _ y Accountability, son dos de nuestros comportamientos AAI.'
},
{
pos: [4, 0],
sentido: 1,
palabra: 'delfos',
pista: '8. Para mayor agilidad en el análisis de indicadores y toma de decisiones, este año contaremos con _ _ _ _ _ _ '
},
]
// 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>
