update
This commit is contained in:
@@ -0,0 +1,434 @@
|
||||
<!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: .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>
|
||||
Reference in New Issue
Block a user