2026-06-05 16:56:04 -06:00
<!doctype html>
2026-06-04 12:20:40 -06:00
< html >
2026-06-05 16:56:04 -06:00
< 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 : 25 px ;
border-top-right-radius : 25 px ;
}
. 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 : 25 px ;
}
. 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 : 10 px ;
cursor : pointer ;
padding-left : 18 px ;
}
. opcion : hover {
font-weight : bold ;
background-color : #d67e72 ;
}
. opcion : hover : before {
background-color : #fff ;
}
. opcion : before {
content : '' ;
position : absolute ;
width : 20 px ;
height : 20 px ;
border : 2 px solid #fff ;
top : 61 % ;
left : -13 px ;
border-radius : 25 px ;
transform : translateY ( -50 % ) ;
}
. opcion . selected : hover {
content : '' ;
position : absolute ;
background-image : url ( img/actividad/2.png ) ;
width : 52 px ;
height : 52 px ;
background-repeat : no-repeat ;
top : 0 ;
left : -60 px ;
}
. 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.2 rem ;
}
. cuadro_gris {
padding : 2 rem 1 rem 3 rem 1 rem ;
}
< / style >
< / head >
2026-06-04 12:20:40 -06:00
2026-06-05 16:56:04 -06:00
< 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 >
2026-06-04 12:20:40 -06:00
< / div >
< / div >
< / div >
2026-06-05 16:56:04 -06:00
< div class = "btn_" >
< img
src = "img/template/btn-comenzar.svg"
width = "223"
height = "76"
class = "btn_comenzar"
style = "display: none"
/ >
< / div >
2026-06-04 12:20:40 -06:00
< / div >
< / div >
< / div >
2026-06-05 16:56:04 -06:00
< / 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 >
2026-06-04 12:20:40 -06:00
< / div >
< / div >
2026-06-05 16:56:04 -06:00
< 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 >
2026-06-04 12:20:40 -06:00
< / div >
< / div >
< / div >
2026-06-05 16:56:04 -06:00
< / 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">
2026-06-04 12:20:40 -06:00
<img class="img_change">
</div> -->
2026-06-05 16:56:04 -06:00
< 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 >
2026-06-04 12:20:40 -06:00
< / div >
< / div >
2026-06-05 16:56:04 -06:00
< 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 >
2026-06-04 12:20:40 -06:00
< / div >
< / div >
2026-06-05 16:56:04 -06:00
< 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 >
2026-06-04 12:20:40 -06:00
< / div >
< / div >
2026-06-05 16:56:04 -06:00
< 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 >
2026-06-04 12:20:40 -06:00
< / div >
< / div >
< / div >
< / div >
< / div >
2026-06-05 16:56:04 -06:00
< 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 >
2026-06-04 12:20:40 -06:00
< / div >
< / div >
< / div >
2026-06-05 16:56:04 -06:00
< 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 >
2026-06-04 12:20:40 -06:00
< / div >
< / div >
2026-06-05 16:56:04 -06:00
< / section >
2026-06-04 12:20:40 -06:00
< / section >
2026-06-05 16:56:04 -06:00
< / 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 >
2026-06-04 12:20:40 -06:00
< / div >
< / div >
< / div >
2026-06-05 16:56:04 -06:00
< 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 >
2026-06-04 12:20:40 -06:00
< / div >
< / div >
< / div >
< / div >
< / html >
< script >
2026-06-05 16:56:04 -06:00
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 ( ) ;
2026-06-04 12:20:40 -06:00
} else {
2026-06-05 16:56:04 -06:00
var disponesde = Number ( max _intentos _mapfre - intentos ) ;
if ( disponesde == 1 ) {
$ ( '.intento' ) . html ( disponesde + ' intento restante' ) ;
} else {
$ ( '.intento' ) . html ( disponesde + ' intentos restantes' ) ;
}
stopAllSoundsAndPlay ( audio24 ) ;
2026-06-04 12:20:40 -06:00
}
2026-06-05 16:56:04 -06:00
} ,
each : function ( loaded , count , success ) {
var total = Math . floor ( ( loaded * 100 ) / count ) ;
$ ( '.wloader' ) . show ( ) ;
} ,
waitForAll : true
} ) ;
2026-06-04 12:20:40 -06:00
2026-06-05 16:56:04 -06:00
audio24 . on ( 'play' , function ( ) {
$ ( '.personaje' ) . addClass ( 'play' ) ;
} ) ;
2026-06-04 12:20:40 -06:00
2026-06-05 16:56:04 -06:00
audio24 . on ( 'end' , function ( ) {
$ ( '.personaje' ) . removeClass ( 'play' ) . addClass ( 'stop' ) ;
instruccion ( 2 ) ;
$ ( '.btn_comenzar' ) . show ( ) ;
$ ( '.btn_comenzar' ) . addClass ( 'animated pulse infinite' ) ;
} ) ;
2026-06-04 12:20:40 -06:00
2026-06-05 16:56:04 -06:00
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 ( ) ;
}
2026-06-04 12:20:40 -06:00
2026-06-05 16:56:04 -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 ) ;
} ) ;
}
2026-06-04 12:20:40 -06:00
2026-06-05 16:56:04 -06:00
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 ;
2026-06-04 12:20:40 -06:00
}
2026-06-05 16:56:04 -06:00
$ ( '.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 ( ) ;
2026-06-04 12:20:40 -06:00
} else {
2026-06-05 16:56:04 -06:00
siguientePregunta ( ) ;
2026-06-04 12:20:40 -06:00
}
}
2026-06-05 16:56:04 -06:00
console . log ( quiz _object . preguntaActual ) ;
2026-06-04 12:20:40 -06:00
2026-06-05 16:56:04 -06:00
$ ( '.btn-siguiente-quiz' ) . show ( ) ;
//quiz_object.preguntaActual++;
} ) ;
2026-06-04 12:20:40 -06:00
}
2026-06-05 16:56:04 -06:00
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 + '%' ) ;
2026-06-04 12:20:40 -06:00
2026-06-05 16:56:04 -06:00
intentos = getLocation ( ) ;
setScore ( calificacion ) ;
2026-06-04 12:20:40 -06:00
2026-06-05 16:56:04 -06:00
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' ) ;
2026-06-04 12:20:40 -06:00
} else {
2026-06-05 16:56:04 -06:00
$ ( '.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 ) ;
2026-06-04 12:20:40 -06:00
} else {
2026-06-05 16:56:04 -06:00
$ ( '.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 ) ;
2026-06-04 12:20:40 -06:00
}
}
2026-06-05 16:56:04 -06:00
}
2026-06-04 12:20:40 -06:00
2026-06-05 16:56:04 -06:00
$ ( '.btn_re' ) . click ( function ( event ) {
_ _click . play ( ) ;
_ _loadsco ( ) ;
2026-06-04 12:20:40 -06:00
} ) ;
2026-06-05 16:56:04 -06:00
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' ) ;
2026-06-04 12:20:40 -06:00
} else {
2026-06-05 16:56:04 -06:00
$ ( '.sec2' ) . addClass ( 'bad' ) ;
2026-06-04 12:20:40 -06:00
$ ( '.personaje_bad' ) . removeClass ( 'd-none' ) ;
2026-06-05 16:56:04 -06:00
$ ( '.txt_final' ) . addClass ( 'text-white' ) ;
$ ( '.leyenda' ) . addClass ( 'text-white mt-2' ) ;
2026-06-04 12:20:40 -06:00
}
2026-06-05 16:56:04 -06:00
instruccion ( 13 ) ;
2026-06-04 12:20:40 -06:00
}
} ) ;
2026-06-05 16:56:04 -06:00
< / script >
