545 lines
19 KiB
HTML
545 lines
19 KiB
HTML
<!doctype html>
|
|
<html>
|
|
<head>
|
|
<style>
|
|
.sec0 {
|
|
background-image: url(img/fondos/bg7.jpg);
|
|
background-repeat: no-repeat;
|
|
background-size: cover;
|
|
background-position: center;
|
|
}
|
|
.sec1 {
|
|
background-image: url(img/fondos/bg6.jpg);
|
|
background-repeat: no-repeat;
|
|
background-size: cover;
|
|
background-position: center;
|
|
}
|
|
.sco .swal2-container {
|
|
background-color: rgba(22, 40, 68, 1) !important;
|
|
}
|
|
.btn_ {
|
|
position: absolute;
|
|
bottom: -11%;
|
|
left: 72%;
|
|
}
|
|
.card_intro {
|
|
background-image: linear-gradient(to bottom, #ffffff, #fafaff, #f3f5ff, #ebf0ff, #e1ecff);
|
|
border: 0;
|
|
border-top-left-radius: 25px;
|
|
border-top-right-radius: 25px;
|
|
}
|
|
.bg-blanco {
|
|
background-image: url(img/fondos/bg0.png);
|
|
background-repeat: no-repeat;
|
|
background-size: cover;
|
|
background-position: center;
|
|
}
|
|
.bg_actividad {
|
|
background-image: linear-gradient(to right, #b9230f, #ad210e, #a21e0d, #961c0c, #8b1a0b);
|
|
border-top-right-radius: 25px;
|
|
}
|
|
.bg-gris {
|
|
background-image: url(img/actividad/bg_gris.png);
|
|
background-repeat: no-repeat;
|
|
background-size: cover;
|
|
background-position: center;
|
|
}
|
|
.cuadro_gris {
|
|
position: relative;
|
|
background-image: url(img/actividad/gris.png);
|
|
background-repeat: no-repeat;
|
|
background-size: 100% 100%;
|
|
margin: 0 auto;
|
|
}
|
|
.opcion {
|
|
position: relative;
|
|
padding-top: 10px;
|
|
cursor: pointer;
|
|
padding-left: 18px;
|
|
}
|
|
.opcion:hover {
|
|
font-weight: bold;
|
|
background-color: #d67e72;
|
|
}
|
|
.opcion:hover:before {
|
|
background-color: #fff;
|
|
}
|
|
.opcion:before {
|
|
content: '';
|
|
position: absolute;
|
|
width: 20px;
|
|
height: 20px;
|
|
border: 2px solid #fff;
|
|
top: 61%;
|
|
left: -13px;
|
|
border-radius: 25px;
|
|
transform: translateY(-50%);
|
|
}
|
|
.opcion.selected:hover {
|
|
content: '';
|
|
position: absolute;
|
|
background-image: url(img/actividad/2.png);
|
|
width: 52px;
|
|
height: 52px;
|
|
background-repeat: no-repeat;
|
|
top: 0;
|
|
left: -60px;
|
|
}
|
|
.sec2.good {
|
|
background-image: url(img/fondos/bg8.jpg);
|
|
background-repeat: no-repeat;
|
|
background-size: cover;
|
|
background-position: center;
|
|
}
|
|
.sec2.bad {
|
|
background-image: url(img/fondos/bg9.jpg);
|
|
background-repeat: no-repeat;
|
|
background-size: cover;
|
|
background-position: center;
|
|
}
|
|
.text-rojo-1 {
|
|
color: #b9230f;
|
|
font-weight: bold;
|
|
}
|
|
.txt_final p,
|
|
h4 {
|
|
margin-bottom: 0.2rem;
|
|
}
|
|
.cuadro_gris {
|
|
padding: 2rem 1rem 3rem 1rem;
|
|
}
|
|
</style>
|
|
</head>
|
|
|
|
<body>
|
|
<section class="section_charge w-100 h-100">
|
|
<section id="sec0" class="sec0 w-100 h-100 px-3">
|
|
<div class="container h-100">
|
|
<div class="row align-items-center h-100">
|
|
<div class="col-4 align-self-end animated bounceInLeft">
|
|
<img src="img/sprites/h3.png" class="mx-auto d-block" alt="" />
|
|
</div>
|
|
<div class="col-8 animated zoomIn">
|
|
<div class="card card_intro shadow p-3">
|
|
<div class="row">
|
|
<div class="col-12 mb-2 text-center">
|
|
<p class="text-rojo-1 f33">
|
|
<b><i>¡Bienvenido a la Evaluación final!</i></b>
|
|
</p>
|
|
</div>
|
|
<div class="col-12 mb-3">
|
|
<p>
|
|
Para concluir con tu curso, queremos invitarte a resolver la siguiente
|
|
<b>evaluación</b>
|
|
, en la cual deberás tomar la
|
|
<b>mejor decisión</b>
|
|
.
|
|
</p>
|
|
<p>Para hacerlo, lee con atención cada pregunta y selecciona la opción que consideres correcta.</p>
|
|
<div class="w-100 text-center mb-3">
|
|
<div class="badge badge-secondary mx-auto intento text-center">1 de 6</div>
|
|
</div>
|
|
<p class="text-center f30 text-rojo-1"><b>¡Éxito!</b></p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="btn_">
|
|
<img
|
|
src="img/template/btn-comenzar.svg"
|
|
width="223"
|
|
height="76"
|
|
class="btn_comenzar"
|
|
style="display: none"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<section id="sec1" class="sec1 w-100 h-100 px-3 pt-4">
|
|
<div class="container">
|
|
<div class="row justify-content-center">
|
|
<div class="col-12 mb-1 mt-3">
|
|
<p>
|
|
<b class="text-rojo-2">Instrucciones:</b>
|
|
lee atentamente cada una de las situaciones que se te presentan y selecciona el tipo de operación al
|
|
cual corresponden.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-7 bg_actividad text-white py-3">
|
|
<div class="qtxt d-flex flex-row">
|
|
<div
|
|
class="number px-3 font-weight-bold f28"
|
|
style="padding-right: 10px; text-align: center; padding-left: 1px"
|
|
></div>
|
|
<div class="txt"></div>
|
|
</div>
|
|
<div class="row wopciones mt-3"></div>
|
|
</div>
|
|
<div class="col-5">
|
|
<div class="col-4 text-center">
|
|
<img src="img/sprites/marcos_actividad.png" alt="" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<section id="sec2" class="sec2 w-100 h-100 px-3" style="display: none">
|
|
<div class="container h-100">
|
|
<div class="row align-items-center h-100">
|
|
<div class="col-7">
|
|
<div class="card bg-transparent p-2 shadow-none border-0">
|
|
<div class="row">
|
|
<!-- <div class="col-12 text-center mb-2">
|
|
<img class="img_change">
|
|
</div> -->
|
|
<div class="col-12 text-center">
|
|
<div class="txt_final"></div>
|
|
<div class="cuadro_gris wcars">
|
|
<div class="row">
|
|
<div class="col-12 mb-2">
|
|
<div class="cuadro_naranja pl-1">
|
|
<div class="row align-items-center justify-content-center w-100 h-100">
|
|
<div class="col-7 text-left">Total de preguntas:</div>
|
|
<div id="totalp" class="col-3"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-12 mb-2">
|
|
<div class="cuadro_naranja">
|
|
<div class="row align-items-center justify-content-center w-100 h-100">
|
|
<div class="col-7 text-left">Correctas:</div>
|
|
<div id="totalc" class="col-3"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-12 mb-2">
|
|
<div class="cuadro_naranja">
|
|
<div class="row align-items-center justify-content-center w-100 h-100">
|
|
<div class="col-7 text-left">Incorrectas:</div>
|
|
<div id="totali" class="col-3"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-12 mb-2">
|
|
<div class="cuadro_naranja">
|
|
<div class="row align-items-center justify-content-center w-100 h-100">
|
|
<div class="col-7 text-left">Calificación:</div>
|
|
<div id="cal" class="col-3"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-12 text-center">
|
|
<img src="img/actividad/btn_reintentar.svg" width="367" height="87" class="btn_re d-none" />
|
|
</div>
|
|
<div class="col-12 leyenda" style="font-size: 16px">
|
|
<p>
|
|
<em>
|
|
Mapfre México S.A. / Mapfre Fianzas S.A., emite el presente certificado en cumplimiento a
|
|
las Disposiciones Quincuagésima Segunda, en relación con la Quincuagésima
|
|
Primera, del acuerdo por el que se emiten las disposiciones de Carácter General a que se
|
|
refiere el Art. 492 de la Ley de Instituciones de Seguros y de Fianzas aplicables a
|
|
instituciones y sociedades mutualistas de seguros, publicado en el Diario Oficial de la
|
|
Federación el 19 de Noviembre del 2020.
|
|
</em>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-5 text-center align-self-end">
|
|
<img src="img/sprites/h3.png" class="personaje_good d-none" alt="" />
|
|
<img src="img/sprites/h6.png" class="personaje_bad d-none" alt="" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</section>
|
|
</body>
|
|
<div class="d-none">
|
|
<div id="pop0" class="w-100 h-100">
|
|
<div class="container-fluid pt-2">
|
|
<div class="row w-100 h-100 align-items-center justify-content-center">
|
|
<div class="col-12 text-white text-center">
|
|
<img src="img/actividad/3.png" alt="" />
|
|
</div>
|
|
<div class="col-8 text-white mt-3">
|
|
<h4 class="text-center">¡Muy bien!</h4>
|
|
<div class="txt_retro_bien"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div id="pop1" class="w-100 h-100">
|
|
<div class="container-fluid pt-2">
|
|
<div class="row w-100 h-100 align-items-center justify-content-center">
|
|
<div class="col-12 text-white text-center">
|
|
<img src="img/actividad/4.png" alt="" />
|
|
</div>
|
|
<div class="col-8 text-white mt-3">
|
|
<h4 class="text-center">¡Incorrecto!</h4>
|
|
<div class="txt_retro_mal"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</html>
|
|
<script>
|
|
jQuery(document).ready(function ($) {
|
|
/**************************************/
|
|
var max_intentos_mapfre = 6;
|
|
var intentos = getLocation();
|
|
var score = getScore();
|
|
/****************************************/
|
|
var preguntas;
|
|
var quiz_object = new Object();
|
|
instruccion(0);
|
|
var audio24 = newSound('audio/Audio_24_Marcos.mp3');
|
|
|
|
quiz_object.preguntaActual = 0;
|
|
quiz_object.maxPreguntas = 0;
|
|
quiz_object.correctas = 0;
|
|
quiz_object.incorrectas = 0;
|
|
quiz_object.oportunidades = 2;
|
|
$('.layer-load').show();
|
|
$(document.querySelector('.wcontainer')).waitForImages({
|
|
finished: function () {
|
|
$('.section_charge').css('visibility', 'visible');
|
|
$('.wloader').hide();
|
|
if (intentos >= max_intentos_mapfre || score >= 80) {
|
|
resumen();
|
|
} else {
|
|
var disponesde = Number(max_intentos_mapfre - intentos);
|
|
if (disponesde == 1) {
|
|
$('.intento').html(disponesde + ' intento restante');
|
|
} else {
|
|
$('.intento').html(disponesde + ' intentos restantes');
|
|
}
|
|
stopAllSoundsAndPlay(audio24);
|
|
}
|
|
},
|
|
each: function (loaded, count, success) {
|
|
var total = Math.floor((loaded * 100) / count);
|
|
$('.wloader').show();
|
|
},
|
|
waitForAll: true
|
|
});
|
|
|
|
audio24.on('play', function () {
|
|
$('.personaje').addClass('play');
|
|
});
|
|
|
|
audio24.on('end', function () {
|
|
$('.personaje').removeClass('play').addClass('stop');
|
|
instruccion(2);
|
|
$('.btn_comenzar').show();
|
|
$('.btn_comenzar').addClass('animated pulse infinite');
|
|
});
|
|
|
|
ImportFile();
|
|
function ImportFile() {
|
|
$('.quiz-loader').show();
|
|
var excelUrl = 'excel/evaluacion.xlsx';
|
|
var oReq = new XMLHttpRequest();
|
|
oReq.open('GET', excelUrl, true);
|
|
oReq.responseType = 'arraybuffer';
|
|
oReq.onload = function (e) {
|
|
var arraybuffer = oReq.response;
|
|
var data = new Uint8Array(arraybuffer);
|
|
var arr = new Array();
|
|
for (var i = 0; i != data.length; ++i) arr[i] = String.fromCharCode(data[i]);
|
|
var bstr = arr.join('');
|
|
var workbook = XLSX.read(bstr, { type: 'binary' });
|
|
var first_sheet_name = workbook.SheetNames[0];
|
|
var worksheet = workbook.Sheets[first_sheet_name];
|
|
preguntas = XLSX.utils.sheet_to_json(worksheet, { raw: false });
|
|
//shuffleArray(preguntas);
|
|
transformer_options();
|
|
quiz_object.preguntas = preguntas;
|
|
//console.dir(quiz_object.preguntas);
|
|
if (quiz_object.maxPreguntas == 0) {
|
|
quiz_object.maxPreguntas = quiz_object.preguntas.length;
|
|
}
|
|
};
|
|
oReq.send();
|
|
}
|
|
|
|
function transformer_options() {
|
|
$.each(preguntas, function (index, pregunta) {
|
|
var opciones = new Array();
|
|
$.each(Object.keys(pregunta), function (index, key) {
|
|
if (key.toLowerCase().indexOf('opcion') >= 0) {
|
|
var opcion = new Object();
|
|
opcion.text = pregunta[key];
|
|
if (key.toLowerCase().indexOf('correcta') >= 0) {
|
|
opcion.valor = 1;
|
|
} else {
|
|
opcion.valor = 0;
|
|
}
|
|
opciones.push(opcion);
|
|
}
|
|
});
|
|
pregunta.opciones = shuffleArray(opciones);
|
|
});
|
|
}
|
|
|
|
function shuffleArray(array) {
|
|
for (var i = array.length - 1; i > 0; i--) {
|
|
var j = Math.floor(Math.random() * (i + 1));
|
|
var temp = array[i];
|
|
array[i] = array[j];
|
|
array[j] = temp;
|
|
}
|
|
return array;
|
|
}
|
|
|
|
$('.btn_comenzar').click(function (event) {
|
|
__click.play();
|
|
setLocation(Number(intentos + 1));
|
|
$(this).removeClass('animated pulse infinite');
|
|
instruccion(8);
|
|
$('.sec0').hide();
|
|
$('.sec1').show();
|
|
|
|
siguientePregunta();
|
|
});
|
|
|
|
function siguientePregunta() {
|
|
// body...
|
|
instruccion(8);
|
|
var pregunta = quiz_object.preguntas[quiz_object.preguntaActual];
|
|
$('.qtxt').find('.txt').html(pregunta.pregunta);
|
|
$('.number').html(quiz_object.preguntaActual + 1);
|
|
$('.wopciones').html('');
|
|
$('.btn-enviar').hide();
|
|
$('.btn-siguiente-quiz').hide();
|
|
$.each(pregunta.opciones, function (index, opcion) {
|
|
$('.wopciones').append(
|
|
'<div class="col-12 pl-4 wopciones-info mb-1" style="opacity:0;">' +
|
|
'<div data-val="' +
|
|
opcion.valor +
|
|
'" class="opcion">' +
|
|
opcion.text +
|
|
'</div></div>'
|
|
);
|
|
});
|
|
TweenMax.staggerFromTo('.wopciones-info', 0.5, { opacity: 0, x: -250 }, { opacity: 1, x: 0 }, 0.25);
|
|
$('.opcion').click(function (event) {
|
|
quiz_object.preguntaActual++;
|
|
__click.play();
|
|
$('.opcion').removeClass('selected');
|
|
$(this).addClass('selected');
|
|
$('.txt_retro_bien').html(pregunta.retro_correcta);
|
|
$('.txt_retro_mal').html(pregunta.retro_incorrecta);
|
|
var valor = $(this).data('val');
|
|
if (Number(valor) > 0) {
|
|
quiz_object.correctas++;
|
|
if (quiz_object.preguntaActual >= quiz_object.maxPreguntas) {
|
|
finActividad();
|
|
} else {
|
|
siguientePregunta();
|
|
}
|
|
} else {
|
|
quiz_object.incorrectas++;
|
|
if (quiz_object.preguntaActual >= quiz_object.maxPreguntas) {
|
|
finActividad();
|
|
} else {
|
|
siguientePregunta();
|
|
}
|
|
}
|
|
console.log(quiz_object.preguntaActual);
|
|
|
|
$('.btn-siguiente-quiz').show();
|
|
//quiz_object.preguntaActual++;
|
|
});
|
|
}
|
|
|
|
function finActividad() {
|
|
// body...
|
|
$('.sec1').hide();
|
|
$('.sec2').show();
|
|
var calificacion = (quiz_object.correctas * 100) / quiz_object.maxPreguntas;
|
|
calificacion = Math.floor(Math.round(calificacion * 100) / 100);
|
|
$('#totalp').html(quiz_object.maxPreguntas);
|
|
$('#totalc').html(quiz_object.correctas);
|
|
$('#totali').html(quiz_object.incorrectas);
|
|
$('#cal').html(calificacion + '%');
|
|
|
|
intentos = getLocation();
|
|
setScore(calificacion);
|
|
|
|
if (calificacion >= 80) {
|
|
$('.sec2').addClass('good');
|
|
//$(".img_change").attr("src","img/actividad2/7.png");
|
|
$('.txt_final').html(
|
|
"<h4 class='text-rojo-1 text-center'>¡Felicidades!</h4><p>¡Has conseguido responder correctamente tu evaluación! Estamos seguros que con tu ayuda podremos prevenir y detectar operaciones con recursos de procedencia ilícita.</p>"
|
|
);
|
|
$('.personaje_good').removeClass('d-none');
|
|
$('.leyenda').addClass('mt-2');
|
|
$('.leyenda').css('color', '#333');
|
|
instruccion(1);
|
|
instruccion(13);
|
|
setLessonStatus('completed');
|
|
} else {
|
|
$('.leyenda').addClass('text-white');
|
|
if (intentos >= max_intentos_mapfre) {
|
|
setLessonStatus('completed');
|
|
//setLessonStatus("c");
|
|
$('.sec2').addClass('bad');
|
|
//$(".img_change").attr("src","img/actividad2/6.png");
|
|
$('.txt_final').html(
|
|
"<h4 class='text-rojo-1 text-center'>Lo sentimos</h4><p class='text-white'>, se han agotado los intentos.</p>"
|
|
);
|
|
$('.personaje_bad').removeClass('d-none');
|
|
$('.leyenda').addClass('mt-2');
|
|
$('.leyenda').css('color', '#333');
|
|
//$(".btn_re").removeClass('d-none');
|
|
instruccion(1);
|
|
instruccion(13);
|
|
} else {
|
|
$('.sec2').addClass('bad');
|
|
//$(".img_change").attr("src","img/actividad2/6.png");
|
|
$('.txt_final').html(
|
|
"<h4 class='text-rojo-1 text-center'>Lo sentimos</h4><p class='text-white'>En esta oportunidad no has conseguido responder de manera exitosa la evaluación, pero no te preocupes, puedes intentarlo de nuevo.</p>"
|
|
);
|
|
$('.personaje_bad').removeClass('d-none');
|
|
$('.leyenda').addClass('text-white');
|
|
$('.btn_re').removeClass('d-none');
|
|
instruccion(15);
|
|
}
|
|
}
|
|
}
|
|
|
|
$('.btn_re').click(function (event) {
|
|
__click.play();
|
|
__loadsco();
|
|
});
|
|
|
|
function resumen() {
|
|
$('.sec0, .wcars').hide();
|
|
$('.sec1').hide();
|
|
$('.sec2').show();
|
|
var score = getScore();
|
|
$('.txt_final').html('<p>Calificación reportada: <b>' + score + '%</b></p>');
|
|
if (score >= 80) {
|
|
$('.sec2').addClass('good');
|
|
$('.personaje_good').removeClass('d-none');
|
|
$('.leyenda').addClass('mt-2');
|
|
$('.leyenda').css('color', '#333');
|
|
} else {
|
|
$('.sec2').addClass('bad');
|
|
$('.personaje_bad').removeClass('d-none');
|
|
$('.txt_final').addClass('text-white');
|
|
$('.leyenda').addClass('text-white mt-2');
|
|
}
|
|
instruccion(13);
|
|
}
|
|
});
|
|
</script>
|