410 lines
20 KiB
HTML
410 lines
20 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; }
|
|
.swal2-popup.popup-class { height: 100%;}
|
|
</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 actividad de Aprendizaje!</i></b></p>
|
|
</div>
|
|
<div class="col-12 mb-3">
|
|
<p>
|
|
Rubén nuevamente me ha solicitado ayuda con algunos reportes relacionados a más casos en los que se alerta una <b>Operación con recursos de procedencia ilícita.</b>
|
|
</p>
|
|
<p>
|
|
¿Puedes apoyarme a identificar el tipo de operación al que pertenecen? Para hacerlo, deberás leer cada una de las situaciones
|
|
y seleccionar la respuesta que consideres correcta.
|
|
</p>
|
|
<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-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"></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 mb-2">
|
|
<div class="txt_final"></div>
|
|
<div class="cuadro_gris py-5">
|
|
<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>
|
|
</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($) {
|
|
instruccion(0);
|
|
var audio20 = newSound("audio/Audio_20_Marcos.mp3");
|
|
var preguntas;
|
|
var quiz_object = new Object();
|
|
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();
|
|
stopAllSoundsAndPlay(audio20);
|
|
},
|
|
each: function(loaded, count, success) {
|
|
var total = Math.floor((loaded * 100) / count);
|
|
$(".wloader").show();
|
|
|
|
},
|
|
waitForAll: true
|
|
});
|
|
|
|
audio20.on("play",function(){
|
|
$(".personaje").addClass('play');
|
|
});
|
|
|
|
audio20.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/actividad_2.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();
|
|
$(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").html(pregunta.pregunta);
|
|
$(".numero").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) {
|
|
__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) {
|
|
var pop_bien = $("#pop0").html();
|
|
quiz_object.correctas++;
|
|
Swal.fire({
|
|
title: '',
|
|
html: pop_bien,
|
|
showCancelButton: false,
|
|
showCloseButton: true,
|
|
target: document.querySelector('.sco'),
|
|
//backdrop: ' #4F5159 url("img/actividad/6.png") left bottom no-repeat',
|
|
background: '#162844',
|
|
width:"100%",
|
|
padding: ".5rem .5rem .5rem .5rem",
|
|
customClass:{popup:'popup-class'},
|
|
allowOutsideClick: false,
|
|
allowEscapeKey: false,
|
|
allowEnterKey: false,
|
|
showConfirmButton: false,
|
|
closeButtonHtml: '<div><img src="img/template/close.png"></div>',
|
|
onBeforeOpen: function () {
|
|
},
|
|
onOpen: function () {
|
|
$(".swal2-popup.popup-class").closest('.swal2-container').css("z-index","998");
|
|
instruccion(7);
|
|
},
|
|
onRender: function () {},
|
|
onClose: function () {
|
|
if (quiz_object.preguntaActual >= quiz_object.maxPreguntas) {
|
|
finActividad();
|
|
} else {
|
|
siguientePregunta();
|
|
}
|
|
},
|
|
onAfterClose: function () {
|
|
}
|
|
|
|
});
|
|
} else {
|
|
quiz_object.incorrectas++;
|
|
var pop_mal = $("#pop1").html();
|
|
Swal.fire({
|
|
title: '',
|
|
html: pop_mal,
|
|
showCancelButton: false,
|
|
showCloseButton: true,
|
|
target: document.querySelector('.sco'),
|
|
//backdrop: ' #4F5159 url("img/actividad/6.png") left bottom no-repeat',
|
|
background: '#162844',
|
|
width:"100%",
|
|
padding: ".5rem .5rem .5rem .5rem",
|
|
customClass:{popup:'popup-class'},
|
|
allowOutsideClick: false,
|
|
allowEscapeKey: false,
|
|
allowEnterKey: false,
|
|
showConfirmButton: false,
|
|
closeButtonHtml: '<div><img src="img/template/close.png"></div>',
|
|
onBeforeOpen: function () {
|
|
},
|
|
onOpen: function () {
|
|
$(".swal2-popup.popup-class").closest('.swal2-container').css("z-index","998");
|
|
instruccion(7);
|
|
},
|
|
onRender: function () {},
|
|
onClose: function () {
|
|
if (quiz_object.preguntaActual >= quiz_object.maxPreguntas) {
|
|
finActividad();
|
|
} else {
|
|
siguientePregunta();
|
|
}
|
|
},
|
|
onAfterClose: function () {
|
|
}
|
|
|
|
});
|
|
}
|
|
$(".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 + "%");
|
|
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>¡Hemos conseguido resolver cada uno de los casos! ¡Ahora es tiempo de alertar a las autoridades correspondientes de estas irregularidades!</p>");
|
|
$('.personaje_good').removeClass('d-none');
|
|
instruccion(1);
|
|
} 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 hemos conseguido resolver los casos, pero no te preocupes, puedes intentarlo de nuevo</p>");
|
|
$('.personaje_bad').removeClass('d-none');
|
|
$(".btn_re").removeClass('d-none');
|
|
instruccion(15);
|
|
}
|
|
|
|
}
|
|
|
|
$(".btn_re").click(function(event) {
|
|
__click.play();
|
|
__loadsco();
|
|
});
|
|
|
|
});
|
|
</script> |