/**
*
* Despegable HTML5
*
* @version: 1.1
* @Fecha 2020-11-17
*/
var data;
var correctAnswer = 0;
var grownAnswer = 0;
var totalAnswers = 0;
//Obtenemos valores del json
var json;
//imagaen de fondo
var imgBack ;
//elements valores id y texto
var elm;
//boxes valore id
var box;
var respuestas = [];
var rCorrectas = 0;
var rErrores = 0;
var datosrespuesta;
function inicializarVarsActividad(tipo){
data = datos;
json = $.each( data, function( key, val ) { data = val });
//imagen de fondo ........
//imgBack = 'style="background:url('+data.parameters.image._href+') no-repeat; background-size: 70%"';
//Ajuste para concidencia con el Flash
//no-repeat; background-size: contain;background-position-x: 50%;
imgBack = 'style="background:url('+data.parameters.image._href+') no-repeat; background-size: contain;background-position-x: 50%"';
//elements valores id y texto
elm = data.parameters.elements.element;
//boxes valore id
box = data.parameters.boxes.box;
titulo = data.wording;
}
function inicializarActiviadad(){
//$('#exit').append($('<div id="cerrar">Cerrar <i class="fa fa-close"></i></div>'));
$('#cerrar').click(function(){
window.close();
});
if ($modulo == "rceAssessManager"){
//crear boton de envÃo
$('#exit').append($('<div id="guardar">Guardar <i class="fa fa-save"></i></div>'));
$("#guardar").one("click", guardar);
$("#guardar").addClass($plantilla);
}else{
//crear boton de Solución
$('#exit').append($('<div id="solucion">Solución <i class="fa fa-question-circle"></i></div>'));
$("#solucion").one("click", eventOne);
$("#solucion").addClass($plantilla);
}
//crear tÃtulo de actividad
$('#exit').append($('<h1 class="titulo"><i class="fa fa-info-circle" aria-hidden="true"></i> ' + titulo + '</h1>'));
//crear div de salida de resultados
$('#exit').append($('<div id="salida-resultados"></div>'));
//craer contenedor drag and drop
$('#exit').append($('<div id="draganddrop"><div id="boxes" '+ imgBack +'></div><div id="elements"></div></div>'));
//inicializamos el drag and drop
$(init);
}
function init() {
$('#salida-resultados').hide();
// Reset a cero al iniciar el juego
correctAnswer = 0;
grownAnswer = 0;
totalAnswers = 0;
answers = [];
var maxlargo = 0;
$('#elements').html( '' );
$('#boxes').html( '' );
//Crear las cajas de los elementos para Drag
for ( var i=0; i<elm.length; i++ ) {
$('<div class="elmdrag" style="width:130px; font-size: small;">' + elm[i].text + '</div>').data( 'number', elm[i]._id ).attr( 'id', elm[i]._id ).appendTo( '#elements' ).draggable( {
containment: '#draganddrop',
stack: '#elements div',
cursor: 'move',
revert: false
//revert: true
} );
//console.log($('<div class="pdrag">' + numbers[i] + '</div>').data( 'number', numbers[i] ));
$("#" + elm[i]._id).one("click", activardrag);
}
//Evalua cual es el largo maximo de los campos
for ( var y=0; y<elm.length; y++ ) {
if(maxlargo < elm[y].text.length){
maxlargo = elm[y].text.length;
console.log("Largo Maximo:"+ maxlargo);
}
}
//Creamos los elementos para Drop
for ( var i=0; i<box.length; i++ ) {
var marriba = Number(box[i]._y);
var mizquierda = Number(box[i]._x);
var sube = 0;
var izquierda = 25;
var tamano = 130;
if(maxlargo >= 1 && maxlargo <=3){
tamano = 55;
}
if(maxlargo >= 4 && maxlargo <=7){
tamano = 70;
}
if (maxlargo > 7 && maxlargo <= 10){
tamano = 80;
}
if (maxlargo > 10 && maxlargo <= 13){
tamano = 90;
}
if (maxlargo > 13 && maxlargo <= 16){
tamano = 100;
}
if (maxlargo > 16 && maxlargo <= 20){
tamano = 110;
}
if (maxlargo > 20 && maxlargo <= 25){
tamano = 140;
}
if (maxlargo > 25 && maxlargo <= 30){
tamano = 160;
}
if (maxlargo > 30 ){
tamano = 260;
}
if (maxlargo > 40){
tamano = 320;
}
var ajustex = 0;
ajustex += Math.round(130/2);
var mtop = Number(box[i]._y);
var mleft = Number(box[i]._x) + ajustex;
$('<div class="boxdrop" style="top:'+mtop+'px;left:'+mleft+'px; width:'+ tamano +'px; font-size: 70%; color: black; height: 25px"></div>').data( 'number', box[i]._id ).attr( 'id', box[i]._id ).appendTo( '#boxes' ).droppable( {
accept: '#elements div',
hoverClass: 'hovered',
drop: handleCardDrop //Función a realizar en el evento drop
} );
}
function handleCardDrop( event, ui ) {
//Obtenemos la data id de los elemnts y boxes
var boxDrop = $(this).data( 'number' );
var elmDrag = ui.draggable.data( 'number' );
var textom = ui.draggable.text();
console.log(textom);
$(this).empty();
$(this).append(textom);
// --Cambio
//Deshabilitamos el drag and drop para usarse solo una vez por elemento
// $(this).droppable( 'disable' );
ui.draggable.draggable( 'disable' );
// ui.draggable.draggable( 'option', 'revert', false );
_top = $(this).css("top");
_left = $(this).css("left");
ui.draggable.one("click", activardrag);
//ui.draggable.css({'top': _top ,'left': _left, 'position':'absolute'});
if ( boxDrop == elmDrag ) {
correctAnswer++;
console.log('Correct = ' + 'Box: ' + boxDrop + ' ' + 'Elment: ' + elmDrag + ' ' + correctAnswer);
answers.push(elmDrag);
console.log(answers);
var ofs = $(this).offsetWidth;
//var x = ui.draggable.find('div')
var x = ui.draggable.find('div').clone();
$(this).append(x);
x.css('width', '230px');
} else {
grownAnswer++;
console.log('Grown = ' + 'Box: ' + boxDrop + ' ' + 'Elment: ' + elmDrag + ' ' + grownAnswer);
answers.push(elmDrag);
console.log(answers);
}
console.log(correctAnswer + grownAnswer);
//Salida de resuttados
// if ( answers.length == elm.length ) {
// $('#salida-resultados').show();
// $('#salida-resultados').animate( {
// opacity: 1
// }, 'slow' );
// $('.yes').css('background', 'green');
// $('.boxdrop').css('background', 'transparent');
// if(correctAnswer > 1) {
// $('#salida-resultados').removeClass('bummer').addClass('good').html(correctAnswer + ' ' + 'respuestas correctas.');
// } else if(correctAnswer < 1) {
// $('#salida-resultados').removeClass('good').addClass('bummer').html(correctAnswer + ' ' + 'respuestas correctas.');
// } else {
// $('#salida-resultados').removeClass('bummer').addClass('good').html(correctAnswer + ' ' + 'respuesta correcta.');
// }
// } Salida de resultados
}
} //init
function activardrag(){
$(this).draggable( 'enable' );
//$(this).draggable( 'option', 'revert', true );
}
function solutions() {
$("i").remove(".fa-check-circle");
$("i").remove(".fa-times-circle");
for ( var i=0; i<box.length; i++ ) {
var idCaja = box[i]._id
for (var j=0; j<elm.length; j++){
var idElemento = elm[j]._id;
var textoelm = "";
textoelm = elm[j].text;
if(idCaja == idElemento){
$('div#boxes div#'+ box[i]._id)[0].innerText = textoelm;
}
}//for j
}// for i
}
function eventOne() {
console.log('Change One');
$("#solucion").text("Ocultar Solución");
solutions();
$("#solucion").one("click", eventTwo);
}
function eventTwo() {
console.log('Change Two');
$("#solucion").text("Solución");
colocarAnswers(datosrespuesta);
calificarRespuesta(datos);
$("#solucion").one("click", eventOne);
}
function calculaLargo(maxlargo){
console.log("Entrada:"+ maxlargo);
if(maxlargo > 20){
//maxlargo = (maxlargo * 6)/9;
maxlargo = 320;
}
//return Math.round(maxlargo);
console.log("Salida:"+ maxlargo);
return maxlargo;
}
function leerRespuestas(){
respuestas=[];
for ( var i=0; i<box.length; i++ ) {
var textocaja = "";
textocaja = $('div#boxes div#'+ box[i]._id)[0].innerText;
console.log({ caja: box[i]._id, texto: textocaja});
for (var j=0; j<elm.length; j++){
var textoelm = "";
textoelm = elm[j].text;
if(textocaja == textoelm){
respuestas.push([box[i]._id,elm[j]._id]);
console.log({ caja: box[i]._id, elemento: elm[j]._id});
//Verifica si la respuesta es correcta
var boxDrop = box[i]._id;
var elmDrag = elm[j]._id;
if(boxDrop == elmDrag){
rCorrectas++;
}
console.log({Correctas: rCorrectas});
}
}//for j
}// for i
}
function guardar(){
var correctas = 0;
var totalPreguntas = 0;
var x2js = new X2JS();
var respuestasLongitud = 0;
var respuestajson = {"activity-result":{"score":{"correct":"0","over":"0"},"answer":{"drags":{"drag":[]}}}}
leerRespuestas();
respuestasLongitud = respuestas.length;
totalPreguntas = elm.length;
correctas = rCorrectas;
for ( r = 0; r < respuestasLongitud; r++) {
var respuestaval = {"_id-box":respuestas[r][0],"_id-element":respuestas[r][1]};
respuestajson["activity-result"].answer.drags.drag.push(
respuestaval
);
}
respuestajson["activity-result"].score.correct = correctas;
respuestajson["activity-result"].score.over = totalPreguntas;
var xml = "<?xml version=\"1.0\" encoding=\"UTF-8\"?>"
xml = xml + x2js.json2xml_str(respuestajson);
console.log("guardado en json");
console.log(respuestajson);
console.log("guardado en xml");
console.log(x2js.json2xml_str(respuestajson));
$.ajax({
url: $guardarurl, //archivo de ejemplo
type: "POST",
data: {
input: xml,
timeStamp: $tmsActividad[1]
},
cache: false,
success: function(respuestaxml) {
//mensaje de éxito
console.log(respuestaxml.childNodes[0].childNodes[0].data);
alert(respuestaxml.childNodes[0].childNodes[0].data);
// Comentario para prueba window.close();
doFinish();
},
error: function(e, xhr, opt) {
// mensaje de error
alert("Error requesting " + opt.url + ": " + xhr.status + " " + xhr.statusText);
//alert('Ha ocurrido un error, intenta nuevamente.');
},
})
}
function colocarAnswers(datos){
var respuestasAlumno = [];
if(typeof datos["activity-result"] === 'undefined'){
respuestasAlumno = datos.answers.answer.drags.drag;
console.log("Sin: activity-result");
}else{
if(typeof datos["activity-result"].answer.drags.drag === 'undefined'){
}else{
respuestasAlumno = datos["activity-result"].answer.drags.drag;
}
}
for (var i = 0; i < respuestasAlumno.length; i++) {
//var idCajaresp = respuestasAlumno[i]._id-box;
var idCajaresp = respuestasAlumno[i]["_id-box"];
var idElemntoresp = respuestasAlumno[i]["_id-element"];
$('div#boxes div#'+ idCajaresp)[0].innerText = "";
for (var j = 0; j < elm.length; j++) {
var idElementoAct = elm[j]._id;
if(idElemntoresp == idElementoAct){
$('div#boxes div#'+ idCajaresp)[0].innerText = elm[j].text;
}
}
}
}
function calificarRespuesta(){
respuestas=[];
for ( var i=0; i<box.length; i++ ) {
var textocaja = "";
textocaja = $('div#boxes div#'+ box[i]._id)[0].innerText;
console.log({ caja: box[i]._id, texto: textocaja});
var rCalifica = false;
for (var j=0; j<elm.length; j++){
var textoelm = "";
textoelm = elm[j].text;
if(textocaja == textoelm){
respuestas.push([box[i]._id,elm[j]._id]);
console.log({ caja: box[i]._id, elemento: elm[j]._id});
//Verifica si la respuesta es correcta
var boxDrop = box[i]._id;
var elmDrag = elm[j]._id;
if(boxDrop == elmDrag){
rCorrectas++;
//$('div#boxes div#'+ elmDrag)[0].after('<i class="fa fa-check-circle"></i>');
//$('div#boxes div#'+ elmDrag).append($('<i class="fa fa-check-circle"></i>'));
rCalifica = true;
}
console.log({Correctas: rCorrectas});
}
}//for j
if(rCalifica){
$('div#boxes div#'+ elmDrag).append($('<i class="fa fa-check-circle"></i>'));
}else{
$('div#boxes div#'+ elmDrag).append($('<i class="fa fa-times-circle"></i>'));
}
}// for i
}