Files
LMS-Estafeta/admin/evaluaciones.html
T

1662 lines
56 KiB
HTML

<style type="text/css">
body.dragging, body.dragging * {
cursor: move !important;
}
.dragged {
position: absolute;
opacity: 0.5;
z-index: 2000;
}
ol.list-preguntas li.placeholder {
position: relative;
/** More li styles **/
}
ol.list-preguntas li.placeholder:before {
position: absolute;
/** Define arrowhead **/
}
</style>
<section class="py-md-4 py-2">
<div class="container-fluid">
<div class="row">
<div class="col-12">
<h1 class="text-secondary font-weight-bolder">Evaluaciones</h1>
<p>Sistema de gestión de evaluaciones, se pueden agregar evaluaciones, desactivar evaluaciones y modificar evaluaciones.</p>
</div>
</div>
</div>
</section>
<!--------------------------------------------------------------------------------
------------------------- TABLA DE EVALUACIONES ----------------------------------
--------------------------------------------------------------------------------->
<section class="py-md-4 py-2 controller">
<div class="container-fluid">
<div class="row align-items-center align-self-center">
<div class="col-12">
<table id="datatable" class="display table table-striped table-bordered" cellspacing="0" width="100%">
<thead>
<tr></tr>
</thead>
</table>
</div>
</div>
</div>
</section>
<!--------------------------------------------------------------------------------
------------------------- PANEL DE EVALUACIONES ----------------------------------
--------------------------------------------------------------------------------->
<section class="py-md-4 py-2 editor" style="display: none;">
<div class="container-fluid">
<div class="row align-items-center justify-content-start">
<div class="col-12 text-left my-4">
<h3 class="title-cat edit" style="display: none;">Editar evaluación</h3>
<h3 class="title-cat crear" style="display: none;">Crear evaluación</h3>
</div>
<div class="col-12 col-md-10">
<form class="formcontroller">
<input type="hidden" name="idevaluacion" id="idevaluacion" value="">
<input type="hidden" name="urlimgevaluacion" id="urlimgevaluacion" value="">
<div class="form-group row">
<label for="catsuperior" class="col-lg-2 col-lg-2 col-md-2 col-12 col-form-label">Categoría</label>
<div class="col-lg-8 col-md-10 col-12">
<select id="catsuperior" name="catsuperior" required="required" class="form-control col-12" data-live-search="true">
</select>
</div>
</div>
<div class="form-group row">
<label class="col-lg-2 col-md-2 col-12 col-form-label" for="titulo">Titulo</label>
<div class="col-lg-8 col-md-10 col-12">
<input id="titulo" name="titulo" placeholder="Titulo" type="text" class="form-control" required="required">
</div>
</div>
<div class="form-group row">
<label for="desc" class="col-lg-2 col-md-2 col-12 col-form-label">Descripción</label>
<div class="col-lg-8 col-md-10 col-12">
<textarea id="desc" name="desc" cols="40" rows="5" class="form-control"></textarea>
</div>
</div>
<div class="form-group row">
<label for="instrucciones" class="col-lg-2 col-md-2 col-12 col-form-label">Instrucciones</label>
<div class="col-lg-8 col-md-10 col-12">
<textarea id="inst" name="inst" cols="40" rows="5" class="form-control"></textarea>
</div>
</div>
<div class="form-group row">
<label class="col-lg-2 col-md-2 col-12 col-form-label" for="orden">Orden</label>
<div class="col-lg-8 col-md-10 col-12">
<input id="orden" name="orden" placeholder="Orden" type="text" class="form-control">
</div>
</div>
<div class="form-group row">
<label for="tipointentos" class="col-lg-2 col-md-2 col-12 col-form-label">Intentos</label>
<div class="col-lg-8 col-md-10 col-12">
<select id="tipointentos" name="tipointentos" class="custom-select" required="required">
<option selected disabled>Selecciona una opción</option>
<option value="Libre">Libre</option>
<option value="Limitado">Limitado</option>
</select>
</div>
</div>
<div class="form-group row cont_intentos" style="display: none;">
<label class="col-lg-2 col-md-2 col-12 col-form-label" for="intentos">Número de intentos</label>
<div class="col-lg-8 col-md-10 col-12">
<input id="intentos" name="intentos" placeholder="Número de intentos" type="text" class="form-control" required="required">
</div>
</div>
<div class="form-group row">
<label for="tipotiempo" class="col-lg-2 col-md-2 col-12 col-form-label">Tiempo</label>
<div class="col-lg-8 col-md-10 col-12">
<select id="tipotiempo" name="tipotiempo" class="custom-select" required="required">
<option selected disabled>Selecciona una opción</option>
<option value="Libre">Libre</option>
<option value="Limitado">Limitado</option>
</select>
</div>
</div>
<div class="form-group row cont_tiempo" style="display: none;">
<label class="col-lg-2 col-md-2 col-12 col-form-label" for="tiempo">Límite de tiempo (minutos)</label>
<div class="col-lg-8 col-md-10 col-12">
<input id="tiempo" name="tiempo" placeholder="Límite de tiempo (minutos)" type="text" class="form-control" required="required">
</div>
</div>
<div class="form-group row">
<label for="tipopreguntas" class="col-lg-2 col-md-2 col-12 col-form-label">Modo de preguntas</label>
<div class="col-lg-8 col-md-10 col-12">
<select id="tipopreguntas" name="tipopreguntas" class="custom-select" required="required">
<option selected disabled>Selecciona una opción</option>
<option value="Ordenado">Ordenado</option>
<option value="Aleatorio">Aleatorio</option>
</select>
</div>
</div>
<div class="form-group row">
<label class="col-lg-2 col-md-2 col-12 col-form-label" for="calificacion">Calificación aprobatoria</label>
<div class="col-lg-8 col-md-10 col-12">
<input id="calificacion" name="calificacion" placeholder="Calificación" type="number" class="form-control" required="required">
</div>
</div>
<div class="form-group row">
<label for="retro" class="col-lg-2 col-md-2 col-12 col-form-label">Retroalimentación</label>
<div class="col-lg-8 col-md-10 col-12">
<select id="retro" name="retro" class="custom-select" required="required">
<option value="Desactivado">Desactivado</option>
<option value="Activado">Activado</option>
</select>
</div>
</div>
<div class="form-group row">
<label for="habilitado" class="col-lg-2 col-md-2 col-12 col-form-label">Habilitado</label>
<div class="col-lg-8 col-md-10 col-12">
<select id="habilitado" name="habilitado" class="custom-select" required="required">
<option value="1">HABILITADO</option>
<option value="0">DESHABILITADO</option>
</select>
</div>
</div>
<div class="form-group row">
<label class="col-lg-2 col-md-2 col-12 col-form-label">Imagen</label>
<div class="col-lg-8 col-md-10 col-12">
<div class="row">
<div class="col-lg-12 col-md-12 col-12">
<p class="text-dark font-weight-bold">Se recomienda usar png y un tamaño de 512 x 512 px</p>
</div>
<div class="col-12 col-md-6 py-2 py-md-0">
<div class="UppyDragDrop"></div>
<div class="w-100 my-3">
<div class="for-ProgressBar"></div>
</div>
</div>
<div class="col-12 col-md-6 py-2 py-md-0 preview" style="display: none;">
<div class="card h-100">
<div class="card-body text-center">
<div class="ThumbnailGenerator"></div>
<div class="uploaded-files text-secondary">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="form-group row justify-content-center">
<div class="col-12 col-md-6 text-right">
<div class="btn btn-warning btn_cancelar">Cancelar</div>
<button name="Enviar" type="submit" value="Enviar" class="btn btn-primary">Enviar</button>
</div>
</div>
</form>
</div>
</div>
</div>
</section>
<!--------------------------------------------------------------------------------
------------------------- TABLA DE PREGUNTAS ------------------------------------
--------------------------------------------------------------------------------->
<section class="py-md-4 py-2 controller-preguntas" style="display: none;">
<div class="container-fluid">
<div class="col-lg-12 col-md-12 col-12">
<h4>Listado de preguntas</h4>
</div>
<div class="row align-items-center align-self-center">
<div class="col-12">
<table id="datatable-preguntas" class="display table table-striped table-bordered" cellspacing="0" width="100%">
<thead>
<tr></tr>
</thead>
</table>
</div>
<div class="col-10 col-md-10 mt-3 text-right">
<div class="btn btn-warning btn_cancelar">Cancelar</div>
</div>
</div>
</div>
</section>
<!--------------------------------------------------------------------------------
------------------------- PANEL DE PREGUNTA ------------------------------------
--------------------------------------------------------------------------------->
<section class="py-md-4 py-2 editor-preguntas" style="display: none;">
<div class="container-fluid">
<div class="row align-items-center justify-content-start">
<div class="col-12 text-left my-4">
<h3 class="title-cat edit-options" style="display: none;">Editar preguntas</h3>
<h3 class="title-cat crear-options" style="display: none;">Crear preguntas</h3>
</div>
<div class="col-12 col-md-10">
<form class="formcontroller-options">
<input type="hidden" name="idevaluacion-options" id="idevaluacion-options" value="">
<input type="hidden" name="idpregunta" id="idpregunta" value="">
<div class="form-group row">
<label for="desc" class="col-md-2 col-12 col-form-label">Pregunta</label>
<div class="col-8">
<textarea id="pregunta" name="pregunta" cols="10" rows="2" class="form-control" placeholder="Pregunta" required="required"></textarea>
</div>
</div>
<div class="form-group row">
<label for="desc" class="col-md-2 col-12 col-form-label">Descripción de la pregunta</label>
<div class="col-8">
<textarea id="desc_pregunta" name="desc_pregunta" cols="40" rows="5" class="form-control" placeholder="Descripción de la pregunta"></textarea>
</div>
</div>
<div class="form-group row">
<label class="col-md-2 col-12 col-form-label" for="puntos">Puntos de la pregunta</label>
<div class="col-8">
<input id="puntos" name="puntos" placeholder="Puntos de la pregunta" type="number" class="form-control" required="required">
</div>
</div>
<div class="form-group row d-none">
<label class="col-md-2 col-12 col-form-label" for="orden_p">Número de pregunta</label>
<div class="col-8">
<input id="orden_p" name="orden_p" placeholder="Número de pregunta" type="text" class="form-control">
</div>
</div>
<div class="form-group row">
<label for="tipo" class="col-md-2 col-12 col-form-label">Tipo de respuesta</label>
<div class="col-8">
<select id="tipo_p" name="tipo_p" class="custom-select" required="required">
<option selected disabled>Selecciona una opción</option>
<option value="textarea">Abierta</option>
<option value="radio">Opción multiple</option>
<option value="checkbox">Selección multiple</option>
</select>
</div>
</div>
<div class="form-group row">
<label for="habilitado-option" class="col-md-2 col-12 col-form-label">Habilitado</label>
<div class="col-8">
<select id="habilitado-options" name="habilitado-options" class="custom-select" required="required">
<option value="1">HABILITADO</option>
<option value="0">DESHABILITADO</option>
</select>
</div>
</div>
<div class="form-group row justify-content-center">
<div class="col-12 col-md-6 text-right">
<div class="btn btn-warning btn_cancelar_preguntas">Cancelar</div>
<button name="Enviar" type="submit" value="Enviar" class="btn btn-primary">Guardar y continuar</button>
</div>
</div>
</form>
</div>
</div>
</section>
<!--------------------------------------------------------------------------------
-------------------------- ORDEN DE PREGUNTAS ------------------------------------
--------------------------------------------------------------------------------->
<section class="py-md-4 py-2 order-preguntas" style="display: none;">
<div class="container-fluid">
<div class="col-lg-12 col-md-12 col-12">
<h4>Ordenar preguntas</h4>
<p>Arrastra las preguntas de acuerdo al orden que desees.</p>
</div>
<div class="row align-items-center align-self-center">
<div class="col-lg-12 col-md-12 col-12">
<ol class='list-preguntas'>
</ol>
</div>
<div class="col-lg-12 col-md-12 col-12 mt-3">
<div class="form-group row justify-content-center">
<div class="col-12 col-md-6 text-right">
<div class="btn btn-warning btn_cancelar_preguntas">Cancelar</div>
<button name="Enviar" type="button" value="Enviar" class="btn-order btn btn-primary">Reordenar</button>
</div>
</div>
</div>
</div>
</div>
</section>
<!--------------------------------------------------------------------------------
------------------------ TABLA DE RESPUESTAS ------------------------------------
--------------------------------------------------------------------------------->
<section class="py-md-4 py-2 controller-respuestas" style="display: none;">
<div class="container-fluid">
<div class="col-lg-12 col-md-12 col-12">
<h4>Listado de respuestas</h4>
</div>
<div class="alert alert-success">
<h5 class="exa_pregunta">Pregunta</h5>
</div>
<div class="row align-items-center align-self-center">
<div class="col-lg-12 col-md-12 col-12">
<table id="datatable-respuestas" class="display table table-striped table-bordered" cellspacing="0" width="100%">
<thead>
<tr></tr>
</thead>
</table>
</div>
<div class="col-10 col-md-10 mt-3 text-right">
<div class="btn btn-warning btn_cancelar_preguntas">Cancelar</div>
</div>
</div>
</div>
</section>
<!--------------------------------------------------------------------------------
------------------------- PANEL DE RESPUESTAS ------------------------------------
--------------------------------------------------------------------------------->
<section class="editor-respuestas" style="display: none;">
<div class="container-fluid">
<div class="container-fluid">
<div class="alert alert-success">
<h5 class="exa_pregunta">Pregunta</h5>
</div>
<div class="row align-items-center justify-content-start">
<div class="col-12 text-left my-4">
<h3 class="title-cat editor-respuesta" style="display: none;">Editar respuesta</h3>
<h3 class="title-cat crear-respuesta" style="display: none;">Crear respuesta</h3>
</div>
<div class="col-12 col-md-10">
<form class="formcontroller-respuesta">
<input type="hidden" name="idpreguntarespuesta" id="idpreguntarespuesta" value="">
<input type="hidden" name="idrespuesta" id="idrespuesta" value="">
<div class="form-group row">
<label for="respuesta" class="col-md-2 col-12 col-form-label">Respuesta</label>
<div class="col-8">
<textarea id="respuesta" name="respuesta" cols="10" rows="2" class="form-control" placeholder="Respuesta" required="required"></textarea>
</div>
</div>
<div class="form-group row">
<label for="valor" class="col-md-2 col-12 col-form-label">Correcto/Incorrecto</label>
<div class="col-8">
<select id="valor" name="valor" class="custom-select" required="required">
<option selected disabled>Selecciona una opción</option>
<option value="1">Correcto</option>
<option value="0">Incorrecto</option>
</select>
</div>
</div>
<div class="form-group row">
<label for="habilitado-option" class="col-md-2 col-12 col-form-label">Habilitado</label>
<div class="col-8">
<select id="habilitado-respuesta" name="habilitado-respuesta" class="custom-select" required="required">
<option value="1">HABILITADO</option>
<option value="0">DESHABILITADO</option>
</select>
</div>
</div>
<div class="form-group row justify-content-center">
<div class="col-12 col-md-6 text-right">
<div class="btn btn-warning btn_cancelar_respuestas">Cancelar</div>
<button name="Enviar" type="submit" value="Enviar" class="btn btn-primary">Guardar</button>
</div>
</div>
</form>
</div>
</div>
</section>
<script type="text/javascript">
$(".layer-load").show();
var table;
var tableOptions;
var tableRespuestas;
jQuery(document).ready(function ($) {
function parseJSON(resp) {
if (resp == null) return null;
if (typeof resp === 'object') return resp;
try { return JSON.parse(resp); }
catch (e) { console.error('Respuesta no-JSON del servidor:', String(resp).substring(0, 300)); return null; }
}
/**********************************************************************/
/****************** UPLOAD ********************************************/
/**********************************************************************/
var uppy = Uppy.Core({
debug: false,
autoProceed: true,
allowMultipleUploads: true,
locale: Uppy.locales.Spanish,
restrictions: {
allowedFileTypes: ['image/*']
}
});
uppy.use(Uppy.DragDrop, {
target: '.UppyDragDrop',
locale: {
strings: {
browse: 'Buscar',
dropHereOr: "Arrastra el archivo aqu\xed o %{browse}",
dropHint: "Arrastra el archivo aqu\xed",
dropPaste: "Arrastra el archivo aqu\xed, pegar o %{browse}",
dropPasteImport: "Arrastra el archivo aqu\xed, pegar, %{browse} o importar desde",
}
}
}).use(Uppy.XHRUpload, {
headers: { 'X-CSRF-Token': window.CSRF_TOKEN },
endpoint: "evaluaciones_upload.php",
formData: true,
method: 'post',
fieldName: 'files[]'
}).use(Uppy.ProgressBar, { target: '.for-ProgressBar', hideAfterFinish: false }).on('upload-success', function (file, response) { onUploadSuccess(file, response) });
function onUploadSuccess(file, response) {
if (response.uploadURL) {
var url = response.uploadURL;
$("#urlimgevaluacion").val(url);
var fileName = file.name;
$(".preview").show();
$(".uploaded-files").show().addClass('newimg');
$(".uploaded-files").html("");
$(".uploaded-files").html('<a class="btn-link" href="' + response.uploadURL + '" target="_blank">' +
'<img class="img-fluid" src="' + response.uploadURL + '"><br>' + fileName + '</a>');
} else {
Swal.fire(
'',
response.body.txt,
'error'
)
uppy.reset();
}
}
/**********************************************************************/
/****************** DATATABLE *****************************************/
/**********************************************************************/
function getData() {
listadoDeCategorias();
$("#datatable").html('<thead><tr></tr></thead>');
$.ajax({
url: 'evaluaciones.php'
}).done(function (data) {
var _data = JSON.parse(data);
var tableName = "#datatable";
var str;
$.each(_data.columns, function (k, colObj) {
str = '<th>' + colObj + '</th>';
$(str).appendTo(tableName + '>thead>tr');
});
table = $('#datatable').DataTable({
dom: "Bfrtip",
responsive: true,
"drawCallback": function (settings) {
$("#btn_edit, #btn_habilitar, #btn_edit_options").addClass('disabled');
addEventsCheck();
},
buttons: [{
extend: 'excel',
text: 'Exportar a Excel'
},
{
text: 'Ver preguntas',
action: function (e, dt, node, config) {
editar_preguntas_select(e, dt, node, config);
},
attr: {
class:'btn btn-warning',
id: 'btn_edit_options'
}
},
{
text: 'Editar evaluación',
action: function (e, dt, node, config) {
editar(e, dt, node, config);
},
attr: {
id: 'btn_edit'
}
},
{
text: 'Alternar habilitar',
action: function (e, dt, node, config) {
deshabilitar(e, dt, node, config)
},
attr: {
id: 'btn_habilitar'
}
},
{
text: 'Crear evaluación',
action: function (e, dt, node, config) {
crear();
},
attr: {
id: 'btn_crear'
}
}
],
'columnDefs': [{
'targets': 0,
'checkboxes': { 'selectRow': true }
}],
'order': [
[1, 'asc']
],
data: _data.datos,
"language": {
"url": "../json/Spanish.json"
}
});
$(".layer-load").hide();
})
.fail(function () {
})
.always(function () {
table.columns.adjust().draw();
$(window).resize(function (event) {
/* Act on the event */
table.columns.adjust().draw();
});
});
}
function reloadData() {
listadoDeCategorias();
$.ajax({
url: 'evaluaciones.php'
})
.done(function (data) {
var NewlyCreatedData = JSON.parse(data);
table.clear();
table.rows.add(NewlyCreatedData.datos); // Add new data
table.columns.adjust().draw(); // Redraw the DataTable
table.column(0).checkboxes.deselectAll();
})
.fail(function () {
//console.log("error");
})
.always(function () {
//console.log("complete");
});
}
function addEventsCheck() {
$("#datatable_wrapper input[type='checkbox']").on('change', function (e) {
setTimeout(function (){
//console.log($("#datatable_wrapper input[type='checkbox']:checked").length);
if (table.column(0).checkboxes.selected().length == 0) {
$("#btn_edit, #btn_habilitar, #btn_edit_options").addClass('disabled');
} else if (table.column(0).checkboxes.selected().length == 1) {
$("#btn_edit, #btn_habilitar, #btn_edit_options").removeClass('disabled');
} else if (table.column(0).checkboxes.selected().length > 1) {
$("#btn_edit, #btn_edit_options").addClass('disabled');
$("#btn_habilitar").removeClass('disabled');
}
}, 150);
});
}
/**********************************************************************/
/****************** Editar, Deshabilitar, Crear ***********************/
/**********************************************************************/
function listadoDeCategorias() {
$(".layer-load").show();
$.ajax({
url: 'categorias_list.php',
type: 'POST'
})
.done(function (response) {
var _data = parseJSON(response);
if (_data.code == "1") {
$("#catsuperior").html("");
var _padres = _.filter(_data.datos, function (n) {
return n.padre == 0;
});
var _datos = _.groupBy(_data.datos, function (n) {
return n.padre;
});
$.each(_padres, function (index, val1) {
$("#catsuperior").append('<option disabled style="background-color: #959595; color: white;">' + val1.nombre + '</option>');
$.each(_datos, function (index, cats) {
$.each(cats, function (index, val) {
if (val.padre == val1.id || val.nombre == val1.nombre) {
if (val.nombre == val1.nombre) {
//$("[label='" + val1.nombre + "']").append('<option class="font-weight-bold" value="' + val.id + '">' + val.nombre + '</option>');
} else {
$("#catsuperior").append('<option value="' + val.id + '">' + val.nombre + '</option>');
}
}
});
});
});
} else {
Swal.fire({
html: "Sin categorias",
icon: "error",
onBeforeOpen: function () {},
onOpen: function () {},
onRender: function () {},
onClose: function () {
$(".btn_cancelar").click();
},
onAfterClose: function () {}
});
}
$(".layer-load").hide();
})
.fail(function () {
})
.always(function () {
});
}
function editar(e, dt, node, config) {
var $table = table.table().node();
var $chkbox_checked = $('tbody input[type="checkbox"]:checked', $table);
$($chkbox_checked).closest('tr')
var data = table.row($($chkbox_checked).closest('tr')).data();
$("#idevaluacion").val(data[0]);
$("#catsuperior").val(data[1]);
$("#titulo").val(data[3]);
$("#desc").val(data[4]);
$("#desc").trumbowyg('html',data[4]);
$("#inst").val(data[5]);
$("#inst").trumbowyg('html',data[5]);
$("#orden").val(data[6]);
$("#tipointentos").val(data[7]);
//console.log(data[6]);
if (data[7] == 'Limitado') {
$(".cont_intentos").show();
$("#intentos").val(data[8]);
}else{
$("#intentos").val(0);
}
$("#tipotiempo").val(data[9]);
if (data[9] == 'Limitado') {
$(".cont_tiempo").show();
$("#tiempo").val(data[10]);
}else{
$("#tiempo").val(0);
}
$("#calificacion").val(data[11]);
$("#tipopreguntas").val(data[12]);
$("#retro").val(data[14]);
if (data[16] != null) {
var name = String(data[16]).split('/');
$(".preview").show();
$(".uploaded-files").html('<a class="btn-link" href="' + data[16] + '" target="_blank">' +
'<img class="img-fluid" src="' + data[16] + '"><br>' + name[name.length - 1] + '</a>');
$("#urlimgevaluacion").val(data[16]);
}
$("#habilitado").find('option').each(function (index, el) {
if ($(this).text() == data[15]) {
$("#habilitado").val($(this).attr('value'));
}
});
$(".newimg").removeClass('newimg');
$(".controller").hide();
$(".editor").show();
$(".edit").show();
$(".crear").hide();
}
function editar_preguntas_select(e, dt, node, config) {
$('.controller-preguntas').show();
var $table = table.table().node();
var $chkbox_checked = $('tbody input[type="checkbox"]:checked', $table);
$($chkbox_checked).closest('tr')
var data = table.row($($chkbox_checked).closest('tr')).data();
loadOptions(data[0]);
}
function deshabilitar(e, dt, node, config) {
var rows_selected = table.column(0).checkboxes.selected();
var ids = new Array();
$.each(rows_selected, function (index, rowId) {
ids.push(rowId);
});
$(".layer-load").show();
$.ajax({
url: 'evaluaciones_delete.php',
type: 'POST',
data: { ids: ids },
})
.done(function (response) {
Swal.fire({
html: response,
icon: "success",
onBeforeOpen: function () {},
onOpen: function () {},
onRender: function () {},
onClose: function () {
reloadData();
},
onAfterClose: function () {}
});
})
.fail(function () {
})
.always(function () {
$(".layer-load").hide();
});
}
function crear() {
$('#catsuperior').prop('selectedIndex',1);
$("#idevaluacion").val("");
$("#titulo").val("");
$("#desc").val("");
$('#desc').trumbowyg('empty');
$("#orden").val("");
$('#tipointentos').prop('selectedIndex',0);
$('.cont_intentos').hide();
$("#intentos").val("");
$('#tipotiempo').prop('selectedIndex',0);
$('.cont_tiempo').hide();
$("#tiempo").val("");
$("#calificacion").val("");
$('#tipopreguntas').prop('selectedIndex',0);
$('#retro').prop('selectedIndex',0);
$("#habilitado").val(1);
$("#urlimgevaluacion").val("");
$(".newimg").removeClass('newimg');
$(".controller").hide();
$(".editor").show();
$(".edit").hide();
$(".crear").show();
}
$(".btn_cancelar").click(function (event) {
//$(".newimg").removeClass('newimg');
if ($(".uploaded-files").hasClass('newimg')) {
$(".layer-load").show();
$.ajax({
url: 'evaluaciones_deletefile.php',
type: 'POST',
data: { file: $(".uploaded-files a").attr('href') },
})
.done(function (response) {
})
.fail(function (error) {
})
.always(function () {
$(".layer-load").hide();
$(".preview").hide();
$(".ThumbnailGenerator, .uploaded-files").html("");
uppy.reset();
$(".controller").show();
$(".editor").hide();
$(".editor-preguntas").hide();
$(".controller-preguntas").hide();
$(".uploaded-files").removeClass('newimg');
});
} else {
$(".preview").hide();
$(".ThumbnailGenerator, .uploaded-files").html("");
uppy.reset();
$(".preview").hide();
$(".controller").show();
$(".editor").hide();
$(".editor-preguntas").hide();
$(".controller-preguntas").hide();
}
reloadData();
});
$("#tipointentos").change(function(){
if($(this).val() == 'Limitado') {
$('.cont_intentos').show();
}else{
$('.cont_intentos').hide();
}
});
$("#tipotiempo").change(function(){
if($(this).val() == 'Limitado') {
$('.cont_tiempo').show();
}else{
$('.cont_tiempo').hide();
}
});
$.validator.addMethod('validUrl', function(value, element) {
var url = $.validator.methods.url.bind(this);
var pattern = new RegExp("^(?:https?://|s?ftps?://)?(?!www | www\.)[A-Za-z0-9_-]+\.+[A-Za-z0-9.\/%&=\?_:;-]+$");
return pattern.test("http://localhost/git/estafeta-lms360/site/pkg/scorm_check/index.html");
}, 'Por favorsss, escribe una URL válida.');
$(".formcontroller").validate({
submitHandler: function (form) {
$('.layer-load').show();
var controller = 'evaluaciones_update.php';
if ($(".crear").css("display") == "block") {
controller = 'evaluaciones_add.php';
}
$.ajax({
url: controller,
type: 'POST',
data: $(".formcontroller").serializeArray(),
})
.done(function (response) {
var _data = parseJSON(response);
if (_data.code == '200') {
$(".newimg").removeClass('newimg');
loadOptions(_data.idevaluacion);
}else{
Swal.fire({
html: _data.msg,
icon: 'error',
onBeforeOpen: function () {},
onOpen: function () {
$('.layer-load').hide();
},
onRender: function () {},
onClose: function () {
reloadData();
},
onAfterClose: function () {}
});
}
})
.fail(function () {
//console.log("error");
})
.always(function () {
//console.log("complete");
});
},
rules: {
titulo: {
required: true,
maxlength: 254,
minlength: 2,
normalizer: function( value ) {
return $.trim( value );
}
}
}
});
/**********************************************************************/
/**************** DATATABLE PREGUNTAS *********************************/
/**********************************************************************/
function getDataPreguntas(evaluacion) {
$("#datatable-preguntas").html('<thead><tr></tr></thead>');
$.ajax({
url: 'evaluaciones_preguntas.php',
type:'POST',
data:{idevaluacion:evaluacion}
}).done(function (data) {
var _data = JSON.parse(data);
var tableNameOptions = "#datatable-preguntas";
var strOptions;
$.each(_data.columns, function (k, colObj) {
strOptions = '<th>' + colObj + '</th>';
$(strOptions).appendTo(tableNameOptions + '>thead>tr');
});
tableOptions = $('#datatable-preguntas').DataTable({
dom: "Bfrtip",
responsive: false,
"drawCallback": function (settings) {
$("#btn_edit_pregunta, #btn_habilitar_pregunta, #btn_edit_respuestas").addClass('disabled');
addEventsCheckOptions();
},
buttons: [{
extend: 'excel',
text: 'Exportar a Excel'
},
{
text: 'Ordenar preguntas',
action: function (e, dt, node, config) {
sortable_preguntas($('#idevaluacion-options').val());
},
attr: {
id: 'btn_order_preguntas',
class:'btn btn-info',
}
},
{
text: 'Ver respuestas',
action: function (e, dt, node, config) {
editar_respuestas_panel(e, dt, node, config);
},
attr: {
id: 'btn_edit_respuestas',
class:'btn btn-warning',
}
},
{
text: 'Editar pregunta',
action: function (e, dt, node, config) {
editar_preguntas(e, dt, node, config);
},
attr: {
id: 'btn_edit_pregunta'
}
},
{
text: 'Alternar habilitar',
action: function (e, dt, node, config) {
deshabilitar_pregunta(e, dt, node, config)
},
attr: {
id: 'btn_habilitar_pregunta'
}
},
{
text: 'Agregar pregunta',
action: function (e, dt, node, config) {
crear_pregunta();
},
attr: {
id: 'btn_crear_pregunta'
}
}
],
'columnDefs': [{
'targets': 0,
'checkboxes': { 'selectRow': true }
}],
'order': [
[4, 'asc']
],
data: _data.datos,
"language": {
"url": "../json/Spanish.json"
}
});
$(".layer-load").hide();
})
.fail(function () {
})
.always(function () {
tableOptions.columns.adjust().draw();
$(window).resize(function (event) {
/* Act on the event */
tableOptions.columns.adjust().draw();
});
});
}
function reloadDataPreguntas(evaluacion) {
$.ajax({
url: 'evaluaciones_preguntas.php',
type:'POST',
data:{idevaluacion:evaluacion}
})
.done(function (data) {
$('.editor-preguntas').hide(300);
$('.order-preguntas').hide(300);
$('.controller-preguntas').show(300);
var NewlyCreatedData = JSON.parse(data);
tableOptions.clear();
tableOptions.rows.add(NewlyCreatedData.datos); // Add new data
tableOptions.columns.adjust().draw(); // Redraw the DataTable
tableOptions.column(0).checkboxes.deselectAll();
})
.fail(function () {
//console.log("error");
})
.always(function () {
//console.log("complete");
});
}
function addEventsCheckOptions() {
$("#datatable-preguntas input[type='checkbox']").on('change', function (e) {
setTimeout(function (){
//console.log($("#datatable-preguntas input[type='checkbox']:checked").length);
if (tableOptions.column(0).checkboxes.selected().length == 0) {
$("#btn_edit_pregunta, #btn_habilitar_pregunta, #btn_edit_respuestas").addClass('disabled');
} else if (tableOptions.column(0).checkboxes.selected().length == 1) {
$("#btn_edit_pregunta, #btn_habilitar_pregunta, #btn_edit_respuestas").removeClass('disabled');
} else if (tableOptions.column(0).checkboxes.selected().length > 1) {
$("#btn_edit_pregunta").addClass('disabled');
$("#btn_edit_respuestas").addClass('disabled');
$("#btn_habilitar_pregunta").removeClass('disabled');
}
}, 150);
});
}
function loadOptions(evaluacion){
$('html, body').animate({
scrollTop: $(".navbar").offset().top
}, 1000);
if ($('#datatable-preguntas').hasClass('Initialize')) {
reloadDataPreguntas(evaluacion);
}else{
getDataPreguntas(evaluacion);
$('#datatable-preguntas').addClass('Initialize');
}
$('#idevaluacion-options').val(evaluacion);
$('.controller').hide(300);
$('.editor').hide(300);
$('.controller-preguntas').show(300);
$('.layer-load').hide();
}
function editar_respuestas_panel(e, dt, node, config) {
var $tableOptions = tableOptions.table().node();
var $chkbox_checkedOptions = $('tbody input[type="checkbox"]:checked', $tableOptions);
$($chkbox_checkedOptions).closest('tr')
var dataP = tableOptions.row($($chkbox_checkedOptions).closest('tr')).data();
$('.controller-preguntas').hide();
$('#idpreguntarespuesta').val(dataP[0]);
$('.exa_pregunta').html(dataP[1]);
loadRespuestas(dataP[0]);
}
function sortable_preguntas(evaluacion){
$('.controller-preguntas').hide();
$('.order-preguntas').show();
$.ajax({
url: 'evaluaciones_list_preguntas.php',
data:{idevaluacion:evaluacion},
type:'POST',
success: function(respuesta) {
var _data = JSON.parse(respuesta);
if (_data.code == '200') {
$('.list-preguntas').html('');
var list = '';
$.each(_data.datos, function (index,val) {
list = '';
list = '<li data-id="'+val.idpregunta+'" class="shadow border border-danger rounded mt-3 p-2"><p>Pregunta:<b>'+val.titulo+'</b></p><p>orden anterior: <b>'+val.orden+'</b></p></li>';
$('ol.list-preguntas').append(list);
});
$("ol.list-preguntas").sortable();
}else{
$('.list-preguntas').html('');
Swal.fire({
html: _data.msg,
icon: _data.icon,
onBeforeOpen: function () {},
onOpen: function () {},
onRender: function () {
$('.layer-load').hide();
},
onClose: function () {
reloadDataPreguntas($('#idevaluacion-options').val());
},
onAfterClose: function () {}
});
}
},
error: function() {
$('.list-preguntas').html('');
Swal.fire({
html: _data.msg,
icon: _data.icon,
onBeforeOpen: function () {},
onOpen: function () {},
onRender: function () {
$('.layer-load').hide();
},
onClose: function () {
reloadDataPreguntas($('#idevaluacion-options').val());
},
onAfterClose: function () {}
});
}
});
}
/**********************************************************************/
/************* Editar, Deshabilitar, Crear Opciones *******************/
/**********************************************************************/
function crear_pregunta() {
$("#idpregunta").val("");
$('#pregunta').val("");
$('#pregunta').trumbowyg('empty');
$('#desc_pregunta').val("");
$('#desc_pregunta').trumbowyg('empty');
$('#puntos').val("");
$('#orden_p').val("");
$('#tipo_p').prop('selectedIndex',0);
$("#habilitado").val(1);
$(".controller-preguntas").hide();
$(".editor-preguntas").show();
$(".edit-options").hide();
$(".crear-options").show();
}
function editar_preguntas(e, dt, node, config) {
var $tableOptions = tableOptions.table().node();
var $chkbox_checkedOptions = $('tbody input[type="checkbox"]:checked', $tableOptions);
$($chkbox_checkedOptions).closest('tr')
var dataOptions = tableOptions.row($($chkbox_checkedOptions).closest('tr')).data();
$("#idpregunta").val(dataOptions[0]);
$("#idpreguntarespuesta").val(dataOptions[0]);
$("#pregunta").val(dataOptions[1]);
$("#pregunta").trumbowyg('html',dataOptions[1]);
$("#desc_pregunta").val(dataOptions[2]);
$("#desc_pregunta").trumbowyg('html',dataOptions[2]);
$("#puntos").val(dataOptions[3]);
$("#orden_p").val(dataOptions[4]);
$("#tipo_p").val(dataOptions[5]);
$("#habilitado").find('option').each(function (index, el) {
if ($(this).text() == dataOptions[6]) {
$("#habilitado").val($(this).attr('value'));
}
});
$(".controller-preguntas").hide();
$(".editor-preguntas").show();
$(".edit-options").show();
$(".crear-options").hide();
}
function deshabilitar_pregunta(e, dt, node, config) {
var rows_selected = tableOptions.column(0).checkboxes.selected();
var ids = new Array();
$.each(rows_selected, function (index, rowId) {
ids.push(rowId);
});
$(".layer-load").show();
$.ajax({
url: 'evaluaciones_preguntas_delete.php',
type: 'POST',
data: { ids: ids },
})
.done(function (response) {
Swal.fire({
html: response,
icon: "success",
onBeforeOpen: function () {},
onOpen: function () {},
onRender: function () {},
onClose: function () {
loadOptions($('#idevaluacion-options').val());
},
onAfterClose: function () {}
});
})
.fail(function () {
})
.always(function () {
$(".layer-load").hide();
});
}
$(".btn-order").click(function(){
var idorder = new Array();
$(".list-preguntas li").each(function(){
var id = $(this).attr('data-id');
console.log(id);
idorder.push(id);
});
$.ajax({
url: 'evaluaciones_preguntas_reorder.php',
type:'POST',
data:{ ids: idorder },
success: function(respuesta) {
var _data = JSON.parse(respuesta);
Swal.fire({
html: _data.msg,
icon: _data.icon,
onBeforeOpen: function () {},
onOpen: function () {},
onRender: function () {
$('.layer-load').hide();
},
onClose: function () {
reloadDataPreguntas($('#idevaluacion-options').val());
},
onAfterClose: function () {}
});
},
error: function() {
Swal.fire({
html: _data.msg,
icon: _data.icon,
onBeforeOpen: function () {},
onOpen: function () {},
onRender: function () {
$('.layer-load').hide();
},
onClose: function () {
reloadDataPreguntas($('#idevaluacion-options').val());
},
onAfterClose: function () {}
});
}
});
});
$(".btn_cancelar_preguntas").click(function (event) {
$('.editor-preguntas').hide(300);
$('.editor-respuestas').hide(300);
$('.order-preguntas').hide(300);
$('.controller-respuestas').hide(300);
$('.controller-preguntas').show(300);
reloadDataPreguntas($('#idevaluacion-options').val());
});
$(".formcontroller-options").validate({
submitHandler: function (form) {
$('.layer-load').show();
var controller = 'evaluaciones_preguntas_update.php';
if ($(".crear-options").css("display") == "block") {
controller = 'evaluaciones_preguntas_add.php';
}
$.ajax({
url: controller,
type: 'POST',
data: $(".formcontroller-options").serializeArray(),
})
.done(function (response) {
var _data = parseJSON(response);
if (_data.code == '200') {
$('.exa_pregunta').html($('#pregunta').val());
$('#idpreguntarespuesta').val(_data.pregunta);
loadRespuestas(_data.pregunta);
}else{
Swal.fire({
html: _data.msg,
icon: _data.icon,
onBeforeOpen: function () {},
onOpen: function () {},
onRender: function () {
$('.layer-load').hide();
},
onClose: function () {
reloadDataPreguntas($('#idevaluacion-options').val());
},
onAfterClose: function () {}
});
}
})
.fail(function () {
//console.log("error");
})
.always(function () {
//console.log("complete");
});
},
rules: {
pregunta: {
required: true,
minlength: 2,
normalizer: function( value ) {
return $.trim( value );
}
}
}
});
/**********************************************************************/
/**************** DATATABLE RESPUESTAS ********************************/
/**********************************************************************/
function getDataRespuestas(pregunta) {
$("#datatable-respuestas").html('<thead><tr></tr></thead>');
$.ajax({
url: 'evaluaciones_respuestas.php',
type:'POST',
data:{idpregunta:pregunta}
}).done(function (data) {
var _data = JSON.parse(data);
var tableNameRespuestas = "#datatable-respuestas";
var strRespuestas;
$.each(_data.columns, function (k, colObj) {
strRespuestas = '<th>' + colObj + '</th>';
$(strRespuestas).appendTo(tableNameRespuestas + '>thead>tr');
});
tableRespuestas = $('#datatable-respuestas').DataTable({
dom: "Bfrtip",
responsive: false,
"drawCallback": function (settings) {
$("#btn_edit_respuesta, #btn_habilitar_respuesta").addClass('disabled');
addEventsCheckRespuestas();
},
buttons: [{
extend: 'excel',
text: 'Exportar a Excel'
},
{
text: 'Editar respuesta',
action: function (e, dt, node, config) {
editar_respuesta(e, dt, node, config);
},
attr: {
id: 'btn_edit_respuesta'
}
},
{
text: 'Alternar habilitar',
action: function (e, dt, node, config) {
deshabilitar_respuestas(e, dt, node, config)
},
attr: {
id: 'btn_habilitar_respuesta'
}
},
{
text: 'Agregar respuesta',
action: function (e, dt, node, config) {
crear_respuesta();
},
attr: {
id: 'btn_crear_respuesta'
}
}
],
'columnDefs': [{
'targets': 0,
'checkboxes': { 'selectRow': true }
}],
'order': [
[4, 'asc']
],
data: _data.datos,
"language": {
"url": "../json/Spanish.json"
},
rowCallback: function(row, data, index){
if(data[2] == 'Correcto'){
$(row).find('td:eq(2)').css('background-color', '#a4d7b9');
}
if(data[2] == 'Incorrecto'){
$(row).find('td:eq(2)').css('background-color', '#f25050');
}
}
});
$(".layer-load").hide();
})
.fail(function () {
})
.always(function () {
tableRespuestas.columns.adjust().draw();
$(window).resize(function (event) {
/* Act on the event */
tableRespuestas.columns.adjust().draw();
});
});
}
function reloadDataRespuestas(pregunta) {
$.ajax({
url: 'evaluaciones_respuestas.php',
type:'POST',
data:{idpregunta:pregunta}
})
.done(function (data) {
$('.editor-respuestas').hide(300);
$('.controller-respuestas').show(300);
var NewlyCreatedData = JSON.parse(data);
tableRespuestas.clear();
tableRespuestas.rows.add(NewlyCreatedData.datos); // Add new data
tableRespuestas.columns.adjust().draw(); // Redraw the DataTable
tableRespuestas.column(0).checkboxes.deselectAll();
})
.fail(function () {
//console.log("error");
})
.always(function () {
//console.log("complete");
});
}
function addEventsCheckRespuestas() {
$("#datatable-respuestas input[type='checkbox']").on('change', function (e) {
setTimeout(function (){
//console.log($("#datatable-preguntas input[type='checkbox']:checked").length);
if (tableRespuestas.column(0).checkboxes.selected().length == 0) {
$("#btn_edit_respuesta, #btn_habilitar_respuesta").addClass('disabled');
} else if (tableRespuestas.column(0).checkboxes.selected().length == 1) {
$("#btn_edit_respuesta, #btn_habilitar_respuesta").removeClass('disabled');
} else if (tableRespuestas.column(0).checkboxes.selected().length > 1) {
$("#btn_edit_respuesta").addClass('disabled');
$("#btn_habilitar_respuesta").removeClass('disabled');
}
}, 150);
});
}
function loadRespuestas(pregunta){
$('html, body').animate({
scrollTop: $(".navbar").offset().top
}, 1000);
if ($('#datatable-respuestas').hasClass('Initialize')) {
reloadDataRespuestas(pregunta);
}else{
getDataRespuestas(pregunta);
$('#datatable-respuestas').addClass('Initialize');
}
//$('#idevaluacion-options').val(evaluacion);
//$('.controller').hide(300);
$('.editor-preguntas').hide(300);
$('.controller-respuestas').show(300);
$('.layer-load').hide();
}
/**********************************************************************/
/****************** Editar, Deshabilitar, Crear ***********************/
/**********************************************************************/
function crear_respuesta() {
$("#idrespuesta").val("");
$('#respuesta').val("");
$('#respuesta').trumbowyg('empty');
$('#valor').prop('selectedIndex',0);
$("#habilitado").val(1);
$(".controller-respuestas").hide();
$(".editor-respuestas").show();
$(".editor-respuesta").hide();
$(".crear-respuesta").show();
}
function editar_respuesta(e, dt, node, config) {
var $tableRespuestas = tableRespuestas.table().node();
var $chkbox_checkedRespuesta = $('tbody input[type="checkbox"]:checked', $tableRespuestas);
$($chkbox_checkedRespuesta).closest('tr')
var dataR = tableRespuestas.row($($chkbox_checkedRespuesta).closest('tr')).data();
$("#idrespuesta").val(dataR[0]);
$("#respuesta").val(dataR[1]);
$("#respuesta").trumbowyg('html',dataR[1]);
$("#valor").find('option').each(function (index, el) {
if ($(this).text() == dataR[2]) {
$("#valor").val($(this).attr('value'));
}
});
$("#habilitado").find('option').each(function (index, el) {
if ($(this).text() == dataR[3]) {
$("#habilitado").val($(this).attr('value'));
}
});
$(".controller-respuestas").hide();
$(".editor-respuestas").show();
$(".editor-respuesta").show();
$(".crear-respuesta").hide();
}
function deshabilitar_respuestas(e, dt, node, config) {
var rows_selected = tableRespuestas.column(0).checkboxes.selected();
var ids = new Array();
$.each(rows_selected, function (index, rowId) {
ids.push(rowId);
});
$(".layer-load").show();
$.ajax({
url: 'evaluaciones_respuestas_delete.php',
type: 'POST',
data: { ids: ids },
})
.done(function (response) {
Swal.fire({
html: response,
icon: "success",
onBeforeOpen: function () {},
onOpen: function () {},
onRender: function () {},
onClose: function () {
loadRespuestas($('#idpreguntarespuesta').val());
},
onAfterClose: function () {}
});
})
.fail(function () {
})
.always(function () {
$(".layer-load").hide();
});
}
$(".btn_cancelar_respuestas").click(function (event) {
$('.editor-respuestas').hide(300);
$('.controller-respuestas').show(300);
});
$(".formcontroller-respuesta").validate({
submitHandler: function (form) {
$('.layer-load').show();
var controller = 'evaluaciones_respuestas_update.php';
if ($(".crear-respuesta").css("display") == "block") {
controller = 'evaluaciones_respuestas_add.php';
}
$.ajax({
url: controller,
type: 'POST',
data: $(".formcontroller-respuesta").serializeArray(),
})
.done(function (response) {
var _data = parseJSON(response);
Swal.fire({
html: _data.msg,
icon: _data.icon,
onBeforeOpen: function () {},
onOpen: function () {},
onRender: function () {
$('.layer-load').hide();
},
onClose: function () {
loadRespuestas($('#idpreguntarespuesta').val());
},
onAfterClose: function () {}
});
})
.fail(function () {
//console.log("error");
})
.always(function () {
//console.log("complete");
});
},
rules: {
pregunta: {
required: true,
maxlength: 254,
minlength: 2,
normalizer: function( value ) {
return $.trim( value );
}
}
}
});
/**********************************************************************/
/*************************** Configuraciones **************************/
/**********************************************************************/
$("#desc, #inst, #desc_pregunta, #pregunta, #respuesta").trumbowyg({
lang: 'es',
btns: [
['viewHTML'],
['formatting'],
['strong', 'em', 'del'],
['superscript', 'subscript'],
['justifyLeft', 'justifyCenter', 'justifyRight', 'justifyFull'],
['unorderedList', 'orderedList'],
['removeformat']
]
});
getData();
});
</script>