david.martinez/Maphre-PLD-2026
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
main
Maphre-PLD-2026/contenido/28.html
T

425 lines
20 KiB
HTML
Raw Permalink Normal View History

update
2026-06-04 12:20:40 -06:00
<!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; }
update
2026-08-13 17:51:46 -06:00
.bg_actividad { background: #FF002D;
background: linear-gradient(to right, #FF002D 30%, #D90026 70%, #D90026 100%);
border-top-right-radius: 25px;}
update
2026-06-04 12:20:40 -06:00
.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; }
update
2026-08-13 17:51:46 -06:00
.text-rojo-1 { color: #FF002D; font-weight: bold; }
update
2026-06-04 12:20:40 -06:00
.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;
update
2026-08-13 17:51:46 -06:00
quiz_object.maxPreguntas = 3;
update
2026-06-04 12:20:40 -06:00
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 });
transformer_options();
update
2026-08-13 17:51:46 -06:00
quiz_object.preguntas = seleccionarPreguntas(preguntas);
quiz_object.maxPreguntas = 3;
update
2026-06-04 12:20:40 -06:00
}
oReq.send();
}
update
2026-08-13 17:51:46 -06:00
function seleccionarPreguntas(pool) {
var grupos = { 'Inusual': [], 'Como una operación Relevante': [], 'Interna preocupante': [] };
$.each(pool, function(i, p) {
var keys = Object.keys(p);
var correctaKey = keys.find(function(k){ return k.toLowerCase().indexOf('correcta') >= 0; });
var val = correctaKey ? p[correctaKey] : '';
if (grupos[val] !== undefined) grupos[val].push(p);
});
var seleccion = [];
$.each(grupos, function(tipo, lista) {
seleccion.push(lista[Math.floor(Math.random() * lista.length)]);
});
return shuffleArray(seleccion);
}
update
2026-06-04 12:20:40 -06:00
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,
update
2026-08-13 17:51:46 -06:00
closeButtonHtml: '<div><img src="img/template/close.svg" width = "50"></div>',
update
2026-06-04 12:20:40 -06:00
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,
update
2026-08-13 17:51:46 -06:00
closeButtonHtml: '<div><img src="img/template/close.svg" width = "50"></div>',
update
2026-06-04 12:20:40 -06:00
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>
Reference in New Issue Copy Permalink