Skip to content

Instantly share code, notes, and snippets.

@fhdez

fhdez/nuevoNME.html

Last active September 18, 2018 16:43
Show Gist options
  • Save fhdez/89f0dce519214a3f32aee1d0a4fcdb70 to your computer and use it in GitHub Desktop.
Save fhdez/89f0dce519214a3f32aee1d0a4fcdb70 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
nuevoNME.html
{% extends 'website/base.html' %}
{% load staticfiles static %}
{% block page_title %}
{% if object %}Editar{% else %}Enviar{% endif %} Material Educativo Digital
{% endblock %}
{% block content %}
<div
id="top"
data-ng-controller="CreateMEDnmeCtrl"
{% if med %}data-ng-init="MEDid = {{ med.id }}"{% endif %}>
<div class="cabecera">
<h1>
{% if object %}Editar{% else %}Enviar{% endif %} Material Educativo Digital
</h1>
</div>
{% verbatim %}
<div class="success-create" data-ng-show="submitted && formSucess" data-ng-cloak >
<h2>{{ topMessage }}</h2>
</div>
<div class="alert alert-danger" data-ng-cloak data-ng-show="submitted && !formSucess">
<p>{{ topMessage }}</p>
</div>
<div class="row" id="enviar-med" data-ng-show="!formSucess">
<div class="col-md-12">
<div class="legend-title">
<p>
<strong class="rojo">LLENA LOS DATOS PARA ENVIAR TU MED</strong>
</p>
<p>Los campos marcados con * son obligatorios</p>
</div>
<div class="row">
<div class="col-md-10 col-md-offset-1">
<form
novalidate
name="MEDForm"
class="med-form">
{% endverbatim %}
{% csrf_token %}
<input type="hidden" data-ng-model="staticRoute" data-ng-init="staticRoute = '{% static '' %}'" />
{% verbatim %}
<div class="row">
<div class="col-md-8">
<div class="form-group">
<label>Nombre*</label>
<input
type="text"
name="nombre_del_documento"
class="form-control"
data-ng-model="med.nombre_del_documento"
placeholder="Ej. Cálculo de distancias"
required>
<p class="error-message">
<strong>Este campo es obligatorio.</strong>
</p>
</div>
<div class="form-group">
<label>Breve descripción*</label>
<textarea
rows="3"
name="descripcion_del_documento"
class="form-control"
data-ng-model="med.descripcion_del_documento"
placeholder="Ej. Interactivo para trabajar y practicar con el cálculo de las distancias"
required></textarea>
<p class="error-message">
<strong>Este campo es obligatorio.</strong>
</p>
</div>
<div class="form-group">
<input
id="id_is_evaluacion"
data-ng-click="resetLevelMenu()"
data-ng-model="med.is_evaluacion"
data-ng-checked="med.is_evaluacion"
type="checkbox" />
<label>¿Es MED de evaluación docente?</label>
</div>
</div>
<!-- Image Container -->
<div id="med-image-container" class="col-md-4">
<!-- Loading Image -->
<div id="med-image-spin">
<img data-ng-src="{{ staticRoute }}images/loading-square.gif" alt="Loading">
<p>Cargando tu imágen...</p>
</div>
<!-- END Loading Image -->
<!-- Med Image Dropzone -->
<div id="med-image" data-ng-class="{true: 'has-error'}[submitted && !med.imagen]" >
<div class="form-group">
<label>Imagen*</label>
</div>
<div
id="med-image-dropzone"
class="dropzone fileupload imageupload"
data-imageupload="/api/v1/web/med/imagen/"
data-changed="med.change_image"
data-med-imagen="med.imagen"
data-preview-imagen="previewImagen">
<div class="imageupload-placeholder" style="background-image: url({{ previewImagen }})">
</div>
<button id="med-image-button" type="button" class="btn btn-default btn-xs">
<span class="fa fa-image"></span>
Seleccionar imagen
</button>
<input type="file" />
</div>
<input
name="imagen"
class="imageupload-input third-party-field"
type="hidden"
data-ng-model="med.imagen"
required />
<p class="error-message">
<strong>Este campo es obligatorio.</strong>
</p>
</div>
<!-- END Med Image Dropzone -->
</div>
<!-- END Image Container -->
</div>
<div class="row">
<div class="col-md-12">
<div
class="form-group">
<label>Sugerencia de uso*</label>
<textarea
rows="3"
name="descripcionFormaDeUso"
class="form-control third-party-field"
data-ng-model="med.descripcion_forma_de_uso"
placeholder="Escriba la sugerencia de uso"
required></textarea>
<p class="error-message">
<strong>Este campo es obligatorio.</strong>
</p>
</div>
</div>
</div>
<!--Categorizacion-->
<div ng-show='med.is_evaluacion'>
<div class="row">
<div class="col-md-6">
<div class="form-group">
<select
name="level"
class="select-gray"
data-ng-model="categorization.selectedItems.idLevel"
data-ng-options="level.id as level.nombre for level in categorization.levels"
data-ng-change="setGradeOptions()"
required>
<option value="">Nivel*</option>
</select>
<p class="error-message">
<strong>Este campo es obligatorio.</strong>
</p>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<select
name="grade"
class="select-gray"
data-ng-model="categorization.selectedItems.idGrade"
data-ng-options="grade.id as grade.nombre for grade in categorization.grades"
data-ng-change="setSubjectOptions()"
data-ng-disabled="categorization.grades.length === 0"
required>
<option value="">Grado*</option>
</select>
<p class="error-message">
<strong>Este campo es obligatorio.</strong>
</p>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="form-group">
<select
name="subject"
class="select-gray"
data-ng-model="categorization.selectedItems.idSubject"
data-ng-options="subject.id as subject.nombre for subject in categorization.subjects"
data-ng-change="setBlockOptions()"
data-ng-disabled="categorization.subjects.length === 0"
required>
<option value="">Asignatura*</option>
</select>
<p class="error-message">
<strong>Este campo es obligatorio.</strong>
</p>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<select
class="select-gray"
name="block"
data-ng-model="categorization.selectedItems.idBlock"
data-ng-options="block.id as block.nombre for block in categorization.blocks"
data-ng-change="setTopicOptions()"
data-ng-disabled="categorization.blocks.length === 0"
required>
<option value="">Bloque*</option>
</select>
<p class="error-message">
<strong>Este campo es obligatorio.</strong>
</p>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="form-group">
<select
name="block"
class="select-gray"
data-ng-model="categorization.selectedItems.idTopic"
data-ng-options="topic.id as topic.nombre for topic in categorization.topics"
data-ng-change="updateMedTopic()"
data-ng-disabled="categorization.topics.length === 0"
required>
<option value="">Tema*</option>
</select>
<p class="error-message">
<strong>Este campo es obligatorio.</strong>
</p>
</div>
</div>
</div>
</div>
<!--Categorizacion planeacion fin-->
<!-- Med de nuevo modelo- aprendizajes aprendidos -->
<div ng-hide='med.is_evaluacion'>
<div class="row">
<div class="col-md-6">
<div class="form-group">
<select
name="level"
class="select-gray"
data-ng-model="categorization.selectedItems.idLevel"
data-ng-options="level.id as level.nombre for level in categorization.levels"
data-ng-change="setGradeOptions()"
required>
<option value="">Nivel*</option>
</select>
<p class="error-message">
<strong>Este campo es obligatorio.</strong>
</p>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<select
name="grade"
class="select-gray"
data-ng-model="categorization.selectedItems.idGrade"
data-ng-options="grade.id as grade.nombre for grade in categorization.grades"
data-ng-change="setSubjectsNME()"
data-ng-disabled="categorization.grades.length === 0"
required>
<option value="">Grado*</option>
</select>
<p class="error-message">
<strong>Este campo es obligatorio.</strong>
</p>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<select
name="subjectnme"
class="select-gray"
data-ng-model="categorization.selectedItems.idSubjectNME"
data-ng-options="subject.id as subject.nombre for subject in categorization.subjectsNME"
data-ng-change="setModulesNME()"
data-ng-disabled="categorization.subjectsNME.length === 0"
required>
<option value="">Asignatura*</option>
</select>
<p class="error-message">
<strong>Este campo es obligatorio.</strong>
</p>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<select
class="select-gray"
name="modulenme"
data-ng-model="categorization.selectedItems.idModuleNME"
data-ng-options="module.id as module.nombre for module in categorization.modulesNME"
data-ng-change="setTopicsNME()"
data-ng-disabled="categorization.modulesNME.length === 0"
required>
<option value="">{{moduleLabel}}*</option>
</select>
<p class="error-message">
<strong>Este campo es obligatorio.</strong>
</p>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="form-group">
<select
class="select-gray"
name="topicnme"
data-ng-model="categorization.selectedItems.idTopicNME"
data-ng-options="topicnme.id as topicnme.nombre for topicnme in categorization.topicsNME"
data-ng-change="setObjectivesNME()"
data-ng-disabled="categorization.topicsNME.length === 0"
required>
<option value="">{{topicLabel}}*</option>
</select>
<p class="error-message">
<strong>Este campo es obligatorio.</strong>
</p>
</div>
</div>
<div class="col-md-6">
<div class="form-group" ng-if="!isEnglish">
<select
class="select-gray"
name="objetivonme"
data-ng-model="categorization.selectedItems.idObjectiveNME"
data-ng-options="objetivonme.id as objetivonme.nombre for objetivonme in categorization.objectivesNME"
data-ng-change="setLearningsNME()"
data-ng-disabled="categorization.objectivesNME.length === 0"
required>
<option value="">{{objectiveLabel}}*</option>
</select>
<p class="error-message">
<strong>Este campo es obligatorio.</strong>
</p>
</div>
<div class="form-group" ng-if="isEnglish">
<select
class="select-gray"
name="objetivonme"
data-ng-model="categorization.selectedItems.idObjectiveNME"
data-ng-options="objetivonme.id as objetivonme.nombre for objetivonme in categorization.objectivesNME"
data-ng-change="setPracticesNME()"
data-ng-disabled="categorization.objectivesNME.length === 0"
required>
<option value="">{{objectiveLabel}}*</option>
</select>
<p class="error-message">
<strong>Este campo es obligatorio.</strong>
</p>
</div>
</div>
</div>
<div class="row" ng-if="isEnglish">
<div class="col-md-12">
<div class="form-group">
<select
name="practicenme"
class="select-gray"
data-ng-model="categorization.selectedItems.idPracticeNME"
data-ng-options="practicenme.id as practicenme.nombre for practicenme in categorization.practicesNME"
data-ng-change="setLearningsNME()"
data-ng-disabled="categorization.practicesNME.length === 0"
required>
<option value="">Práctica social del lenguaje*</option>
</select>
<p class="error-message">
<strong>Este campo es obligatorio.</strong>
</p>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="form-group">
<select
name="learningnme"
class="select-gray"
data-ng-model="categorization.selectedItems.idLearningNME"
data-ng-options="learning.id as learning.nombre for learning in categorization.learningsNME"
data-ng-change="updateMedLearning()"
data-ng-disabled="categorization.learningsNME.length === 0"
required>
<option value="">{{aprendizajeLabel}}*</option>
</select>
<p class="error-message">
<strong>Este campo es obligatorio.</strong>
</p>
</div>
</div>
</div>
</div>
<!-- Nuevo modelo educativo -->
<div class="comments-heading">
<h2>Recursos:</h2>
</div>
<div class="alert alert-danger"
data-ng-show="submitted && !validations.resources">
<p>Debes incluir por lo menos un archivo, video, slide o enlace.</p>
</div>
<div class="row">
<div class="col-md-10 col-md-offset-1">
<div>
<p class="text-danger"><span class="glyphicon glyphicon-warning-sign"></span>
<strong>Archivos menores a 10MB.</strong></p>
<p class="text-danger">
<span class="glyphicon glyphicon-warning-sign"></span>
<strong>Si eliminas archivos, será necesario guardar el MED para ver reflejados los cambios.</strong>
</p>
<div class="form-group">
<label>Archivos</label>
</div>
<div ng-if="errorSize">
<span style="color: red">¡Debes agregar un archivo con tamaño menor a 10MB!</span>
</div>
</div>
<div class="row bottom-buffer">
<div class="col-md-6">
<div class="dropzone fileupload">
<div class="fileupload">
<button type="button" class="btn btn-default btn-xs"><span class="glyphicon glyphicon-upload"></span> Seleccionar archivo</button>
<span data-ng-if="progress > 0">{{ progress }}%</span>
<input
type="file"
data-med-form-file-upload-field
data-archivos="med.archivos"
data-progress="progress"
/>
</div>
</div>
</div>
<div class="col-md-6">
<ul class="list-group">
<li class="list-group-item relative" data-ng-repeat="file in med.archivos">
<span class="fa fa-{{ file.archivo | parse_type }}"></span>
<strong>{{ file.archivo | parse_name }}</strong>
<div class="file-actions list-group-item text-right">
<a href="{{ file.archivo }}" target="_blank"><span class="glyphicon glyphicon-eye-open"></span></a>
<a href="" data-ng-click="removeFile( $index )"><span class="glyphicon glyphicon-trash"></span></a>
</div>
</li>
</ul>
</div>
</div>
<div>
<div
class="form-group link-object"
data-ng-repeat="enlace in med.enlaces" >
<label>Vínculo {{ $index + 1 }}</label>
<div clas="col-md-12">
<div class="input-group">
<input
type="url"
class="form-control"
data-ng-model="enlace.url"
data-ng-click="addLink($index + 1)"
placeholder="Ej. https://www.redmagisterial.com/"/>
<p class="error-message">
<strong>Ingrese una URL válida.</strong>
</p>
<span class="input-group-addon offline-resource-check">
<input
type="checkbox"
data-ng-model="enlace.recursos_offline"
data-ng-checked="enlace.enlaces_offline.length > 0 || enlace.archivos_offline.length > 0"
data-ng-change="toogleOfflineResources(enlace, enlace.recursos_offline)"
>
<small>Recursos offline</small>
</span>
</div><!-- /input-group -->
<div class="col-md-12 offline-resources" data-ng-show="enlace.enlaces_offline.length > 0 || enlace.archivos_offline.length > 0">
<div class="col-md-12 description">
<label class="title">Recursos offline de vinculo {{ $index + 1 }}</label>
<p>Recursos que se visualizarán en CAP, deben ser equivalentes a la información del vinculo.</p>
</div>
<div class="col-md-12" data-ng-repeat="enlaceOffline in enlace.enlaces_offline">
<label class="subtitle">Vínculo Offline {{ $index + 1 }}</label>
<input
type="url"
class="form-control"
data-ng-model="enlaceOffline.url"
data-ng-click="addOfflineResource(enlace, $index + 1)"
placeholder="Ej. https://www.redmagisterial.com/"/>
<p class="error-message">
<strong>Ingrese una URL válida.</strong>
</p>
</div>
<div class="col-md-12"><hr/></div>
<div class="col-md-12">
<label class="subtitle">Archivos Offline</label>
<p class="text-danger">
<span class="glyphicon glyphicon-warning-sign"></span>
<strong>Si eliminas archivos, será necesario guardar el MED para ver reflejados los cambios.</strong>
</p>
<div class="row bottom-buffer">
<div class="col-md-12">
<div class="dropzone fileupload">
<div class="fileupload">
<button type="button" class="btn btn-default btn-xs">
<span class="glyphicon glyphicon-upload"></span>
Seleccionar archivo
</button>
<span data-ng-if="enlace.progress > 0">{{ enlace.progress }}%</span>
<input
type="file"
data-med-form-file-upload-field
data-archivos="enlace.archivos_offline"
data-progress="enlace.progress"
/>
</div>
</div>
</div>
<div class="col-md-12">
<ul class="list-group">
<li class="list-group-item relative" data-ng-repeat="archivoOffline in enlace.archivos_offline">
<span class="fa fa-{{ archivoOffline.archivo | parse_type }}"></span>
<strong>{{ archivoOffline.archivo | parse_name }}</strong>
<div class="file-actions list-group-item text-right">
<a href="{{ archivoOffline.archivo }}" target="_blank">
<span class="glyphicon glyphicon-eye-open"></span>
</a>
<a href="" data-ng-click="removeFileOffline( enlace, $index )">
<span class="glyphicon glyphicon-trash"></span>
</a>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<hr/>
<p class="text-danger">
<span class="glyphicon glyphicon-warning-sign"></span> <strong>Para insertar un vídeo utiliza la dirección de Youtube o Vimeo.</strong>
</p>
<div>
<div
class="form-group link-object"
data-ng-repeat="video in med.videos" >
<label>Video {{ $index + 1 }}</label>
<div clas="col-md-12">
<div class="input-group">
<input
type="url"
class="form-control"
data-ng-model="video.url"
data-ng-click="addVideo($index + 1)"
pattern="http(s)*://(www\.)*youtube\.com\/watch\?v=([a-zA-Z0-9\-_]+)"
placeholder="Ej. https://www.youtube.com/watch?v=a7kTABPrJic" />
<p class="error-message">
<strong>Ingrese una URL válida.</strong>
</p>
<span class="input-group-addon offline-resource-check">
<input
type="checkbox"
data-ng-model="video.recursos_offline"
data-ng-checked="video.enlaces_offline.length > 0 || video.archivos_offline.length > 0"
data-ng-change="toogleOfflineResources(video, video.recursos_offline)"
>
<small>Recursos offline</small>
</span>
</div><!-- /input-group -->
<div class="col-md-12 offline-resources" data-ng-show="video.enlaces_offline.length > 0 || video.archivos_offline.length > 0">
<div class="col-md-12 description">
<label class="title">Recursos offline del video {{ $index + 1 }}</label>
<p>Recursos que se visualizarán en CAP, deben ser equivalentes a la información del video.</p>
</div>
<div class="col-md-12" data-ng-repeat="enlaceOffline in video.enlaces_offline">
<label class="subtitle">Vínculo Offline {{ $index + 1 }}</label>
<input
type="url"
class="form-control"
data-ng-model="enlaceOffline.url"
data-ng-click="addOfflineResource(video, $index + 1)"
placeholder="Ej. https://www.redmagisterial.com/"/>
<p class="error-message">
<strong>Ingrese una URL válida.</strong>
</p>
</div>
<div class="col-md-12"><hr/></div>
<div class="col-md-12">
<label class="subtitle">Archivos Offline</label>
<p class="text-danger">
<span class="glyphicon glyphicon-warning-sign"></span>
<strong>Si eliminas archivos, será necesario guardar el MED para ver reflejados los cambios.</strong>
</p>
<div class="row bottom-buffer">
<div class="col-md-12">
<div class="dropzone fileupload">
<div class="fileupload">
<button type="button" class="btn btn-default btn-xs">
<span class="glyphicon glyphicon-upload"></span>
Seleccionar archivo
</button>
<span data-ng-if="video.progress > 0">{{ video.progress }}%</span>
<input
type="file"
data-med-form-file-upload-field
data-archivos="video.archivos_offline"
data-progress="video.progress"
/>
</div>
</div>
</div>
<div class="col-md-12">
<ul class="list-group">
<li class="list-group-item relative" data-ng-repeat="archivoOffline in video.archivos_offline">
<span class="fa fa-{{ archivoOffline.archivo | parse_type }}"></span>
<strong>{{ archivoOffline.archivo | parse_name }}</strong>
<div class="file-actions list-group-item text-right">
<a href="{{ archivoOffline.archivo }}" target="_blank">
<span class="glyphicon glyphicon-eye-open"></span>
</a>
<a href="" data-ng-click="removeFileOffline( video, $index )">
<span class="glyphicon glyphicon-trash"></span>
</a>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<hr/>
<!-- Slideshare -->
<p class="text-danger">
<span class="glyphicon glyphicon-warning-sign"></span>
<strong>Para insertar una presentación utiliza la dirección de Slideshare</strong>
</p>
<div>
<div
class="form-group"
data-ng-repeat="slide in med.slides">
<label>Slideshare {{ $index + 1 }}</label>
<div class="input-group">
<input
type="url"
class="form-control"
data-ng-model="slide.url"
data-ng-click="addSlide($index + 1)"
pattern="http://(es\.)*(www\.)*slideshare\.net\/([a-zA-Z0-9\-\/_]+)"
placeholder="Ej. http://www.slideshare.net/usuario/presentacion" />
<p class="error-message">
<strong>Ingrese una URL válida.</strong>
</p>
<span class="input-group-addon offline-resource-check">
<input
type="checkbox"
data-ng-model="slide.recursos_offline"
data-ng-checked="slide.enlaces_offline.length > 0 || slide.archivos_offline.length > 0"
data-ng-change="toogleOfflineResources(slide, slide.recursos_offline)">
<small>Recursos offline</small>
</span>
</div>
<div class="col-md-12 offline-resources" data-ng-show="slide.enlaces_offline.length > 0 || slide.archivos_offline.length > 0">
<div class="col-md-12 description">
<label class="title">Recursos offline del slide {{ $index + 1 }}</label>
<p>Recursos que se visualizarán en CAP, deben ser equivalentes a la información del slide.</p>
</div>
<div class="col-md-12" data-ng-repeat="enlaceOffline in slide.enlaces_offline">
<label class="subtitle">Vínculo Offline {{ $index + 1 }}</label>
<input
type="url"
class="form-control"
data-ng-model="enlaceOffline.url"
data-ng-click="addOfflineResource(slide, $index + 1)"
placeholder="Ej. https://www.redmagisterial.com/"/>
<p class="error-message">
<strong>Ingrese una URL válida.</strong>
</p>
</div>
<div class="col-md-12"><hr/></div>
<div class="col-md-12">
<label class="subtitle">Archivos Offline</label>
<p class="text-danger">
<span class="glyphicon glyphicon-warning-sign"></span>
<strong>Si eliminas archivos, será necesario guardar el MED para ver reflejados los cambios.</strong>
</p>
<div class="row bottom-buffer">
<div class="col-md-12">
<div class="dropzone fileupload">
<div class="fileupload">
<button type="button" class="btn btn-default btn-xs">
<span class="glyphicon glyphicon-upload"></span>
Seleccionar archivo
</button>
<span data-ng-if="slide.progress > 0">{{ slide.progress }}%</span>
<input
type="file"
data-med-form-file-upload-field
data-archivos="slide.archivos_offline"
data-progress="slide.progress"
/>
</div>
</div>
</div>
<div class="col-md-12">
<ul class="list-group">
<li class="list-group-item relative" data-ng-repeat="archivoOffline in slide.archivos_offline">
<span class="fa fa-{{ archivoOffline.archivo | parse_type }}"></span>
<strong>{{ archivoOffline.archivo | parse_name }}</strong>
<div class="file-actions list-group-item text-right">
<a href="{{ archivoOffline.archivo }}" target="_blank">
<span class="glyphicon glyphicon-eye-open"></span>
</a>
<a href="" data-ng-click="removeFileOffline( slide, $index )">
<span class="glyphicon glyphicon-trash"></span>
</a>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<!-- End Slideshare -->
<!-- Nearpods -->
<p class="text-danger">
<span class="glyphicon glyphicon-warning-sign"></span>
<strong>Para insertar una presentación utiliza la dirección de Nearpod</strong>
</p>
<div>
<div
class="form-group"
data-ng-repeat="nearpods in med.nearpods">
<label>Nearpod {{ $index + 1 }}</label>
<input
type="url"
class="form-control"
data-ng-model="nearpods.url"
data-ng-click="addNearpod($index + 1)"
pattern="(https|http):\/\/app.nearpod.com\/market\?view=npPreview&id=[\w]{32}&element=npp"
placeholder="Ej. https://app.nearpod.com/market?view=npPreview&id=IddelNearpod&element=npp" />
<p class="error-message">
<strong>Ingrese una URL válida.</strong>
</p>
</div>
</div>
<!-- End Of Nearpod -->
<p class="text-danger"><span class="glyphicon glyphicon-warning-sign"></span>
<strong>Debes seleccionar al menos un formato de MED (archivo, vínculo, video, slideshare, nearpod) para que tu aporte sea
validado por el sistema.</strong></p>
</div>
</div>
<div class="comments-heading">
<h2>Este MED concuerda con este tipo de Inteligencia:
<a href="#modalInteligencias" data-toggle="modal" class="pull-right right-buffer"><span class="glyphicon glyphicon-question-sign"></span> </a></h2>
</div>
<div class="row form-inteligencias">
<div class="col-md-10 col-md-offset-1">
<p class="bottom-buffer"> </p>
<div class="row bottom-double-buffer">
<div class="form-group inteligencia-group">
<div class="col-md-5">
<label class="inteligencia-label">
<span class="inteligencia inteligencia_linguistica" title="Inteligencia Lingüística"></span>
<strong>Inteligencia Lingüística</strong>
</label>
</div>
<div class="col-md-7">
<input
data-slider-widget="{'content': 'La inteligencia lingüística se manifiesta en las conversaciones y explicaciones, con una exposición oral o jugando con rimas, historias, etc.', 'title': 'Inteligencia Lingüística'}"
data-value="med.inteligencia_linguistica"
type="text"
class="form-control"
style="display: none;">
</div>
</div>
</div>
<div class="row bottom-double-buffer">
<div class="form-group inteligencia-group">
<div class="col-md-5">
<label class="inteligencia-label">
<span class="inteligencia inteligencia_logica_matematica" title="Inteligencia Lógico-Matemática"></span>
<strong>Inteligencia Lógico-Matemática</strong>
</label>
</div>
<div class="col-md-7">
<input
data-slider-widget="{'content': 'La inteligencia lógico-matemática está en actividades que requieren abstracción. En especial cálculos veloces y acertijos numéricos.', 'title': 'Inteligencia Lógico-Matemática'}"
data-value="med.inteligencia_logica_matematica"
type="text"
class="form-control"
style="display: none;">
</div>
</div>
</div>
<div class="row bottom-double-buffer">
<div class="form-group inteligencia-group">
<div class="col-md-5">
<label class="inteligencia-label">
<span class="inteligencia inteligencia_espacial" title="Inteligencia Espacial"></span>
<strong>Inteligencia Espacial</strong>
</label>
</div>
<div class="col-md-7">
<input
data-slider-widget="{'content': 'La inteligencia espacial está en el reconocimiento visual, proyección mental y en el espacio. Los rompecabezas son estimulantes para ésta.', 'title': 'Inteligencia Espacial'}"
data-value="med.inteligencia_espacial"
type="text"
class="form-control"
style="display: none;">
</div>
</div>
</div>
<div class="row bottom-double-buffer">
<div class="form-group inteligencia-group">
<div class="col-md-5">
<label class="inteligencia-label">
<span class="inteligencia inteligencia_corporal_cinestesica" title="Inteligencia Corporal-Cinestésica"></span>
<strong>Inteligencia Corporal-Cinestésica</strong>
</label>
</div>
<div class="col-md-7">
<input
data-slider-widget="{'content': 'La inteligencia corporal-cinestésica está en coordinar movimientos. Los niños pueden desarrollarla con juegos para el control psicomotriz.', 'title': 'Inteligencia Corporal-Cinestésica'}"
data-value="med.inteligencia_corporal_cinestesica"
type="text"
class="form-control"
style="display: none;">
</div>
</div>
</div>
<div class="row bottom-double-buffer">
<div class="form-group inteligencia-group">
<div class="col-md-5">
<label class="inteligencia-label">
<span class="inteligencia inteligencia_interpersonal" title="Inteligencia Interpersonal"></span>
<strong>Inteligencia Interpersonal</strong>
</label>
</div>
<div class="col-md-7">
<input
data-slider-widget="{'content': 'La inteligencia interpersonal es la capacidad para comprender las intenciones, motivaciones y deseos de otras personas.', 'title': 'Inteligencia Interpersonal'}"
data-value="med.inteligencia_interpersonal"
type="text"
class="form-control"
style="display: none;">
</div>
</div>
</div>
<div class="row bottom-double-buffer">
<div class="form-group inteligencia-group">
<div class="col-md-5">
<label class="inteligencia-label">
<span class="inteligencia inteligencia_intrapersonal" title="Inteligencia Intrapersonal"></span>
<strong>Inteligencia Intrapersonal</strong>
</label>
</div>
<div class="col-md-7">
<input
data-slider-widget="{'content': 'La inteligencia intrapersonal es la capacidad de conocerse a uno mismo, los sentimientos, temores y motivaciones propios.', 'title': 'Inteligencia Intrapersonal'}"
data-value="med.inteligencia_intrapersonal"
type="text"
class="form-control"
style="display: none;">
</div>
</div>
</div>
<div class="row bottom-double-buffer">
<div class="form-group inteligencia-group">
<div class="col-md-5">
<label class="inteligencia-label">
<span class="inteligencia inteligencia_musical" title="Inteligencia Musical"></span>
<strong>Inteligencia Musical</strong>
</label>
</div>
<div class="col-md-7">
<input
data-slider-widget="{'content': 'La inteligencia musical es la aptitud de percibir y expresarse a través del lenguaje musical. Toda persona puede vincularse con la música. ', 'title': 'Inteligencia Musical'}"
data-value="med.inteligencia_musical"
type="text"
class="form-control"
style="display: none;">
</div>
</div>
</div>
<div class="row bottom-double-buffer">
<div class="form-group inteligencia-group">
<div class="col-md-5">
<label class="inteligencia-label">
<span class="inteligencia inteligencia_naturalista" title="Inteligencia Naturalista"></span>
<strong>Inteligencia Naturalista</strong>
</label>
</div>
<div class="col-md-7">
<input
data-slider-widget="{'content': 'La inteligencia naturalista est\u00e1 en conocer la flora y fauna, para establecer distinciones en el mundo natural y aprovechar sus recursos. ', 'title': 'Inteligencia Naturalista'}"
data-value="med.inteligencia_naturalista"
type="text"
class="form-control"
style="display: none;">
</div>
</div>
</div>
</div> <!--row form-inteligencias-->
</div> <!--col-md-10 col-md-offset-1-->
<div class="comments-heading">
<h2>Este MED es principalmente para:</h2>
</div>
<div class="alert alert-danger"
data-ng-show="submitted && !validations.types">
<p>Debes incluir por lo menos un Tipo de trabajo y un Tipo de MED.</p>
</div>
<div class="row">
<div class="col-md-5 col-md-offset-1">
<div class="form-group">
<label>Tipos de trabajo*</label>
<!--Tipos de trabajo options-->
<div class="checkbox" data-ng-repeat="workType in types.workTypes">
<label>
<input
type="checkbox"
data-ng-model="workType.selected"
data-ng-change="saveWorkType(workType)">
<strong>{{ workType.texto }}</strong>
</label>
</div>
<!--Tipos de trabajo options end-->
</div>
</div>
<div class="col-md-5">
<div class="form-group">
<label>Tipos de MED*</label>
<!--Tipos de med options-->
<div class="checkbox" data-ng-repeat="medType in types.medTypes">
<label>
<input
type="checkbox"
data-ng-model="medType.selected"
data-ng-change="saveMedTypes(medType)">
<strong>{{ medType.texto }}</strong>
</label>
</div>
<!--Tipos de med options end-->
</div>
</div>
</div>
<div class="comments-heading">
<h2>Recomiendo usar este MED cuando el grupo está:
<a href="#modalAnimos" data-toggle="modal" class="pull-right right-buffer"><span class="glyphicon glyphicon-question-sign"></span></a></h2>
</div>
<div class="row form-emoticons">
<div class="col-md-10 col-md-offset-1" data-emotions>
<p class="bottom-buffer"><em>Puedes escoger máximo 3 estados de ánimo</em></p>
<div class="col-md-4 bottom-double-buffer">
<span class="emoticon e_aburrido"></span>
<input
data-ng-model="med.estados.aburrido"
id="id_aburrido"
name="aburrido"
type="checkbox">
<label class="emoticon" for="id_aburrido">Aburrido</label>
</div>
<div class="col-md-4 bottom-double-buffer">
<span class="emoticon e_inquieto"></span>
<input
data-ng-model="med.estados.inquieto"
id="id_inquieto"
name="inquieto"
type="checkbox">
<label class="emoticon" for="id_inquieto">Inquieto</label>
</div>
<div class="col-md-4 bottom-double-buffer">
<span class="emoticon e_creativo"></span>
<input
data-ng-model="med.estados.creativo"
id="id_creativo"
name="creativo"
type="checkbox">
<label class="emoticon" for="id_creativo">Creativo</label>
</div>
<div class="col-md-4 bottom-double-buffer">
<span class="emoticon e_jugueton"></span>
<input
data-ng-model="med.estados.jugueton"
id="id_jugueton"
name="jugueton"
type="checkbox">
<label class="emoticon" for="id_jugueton">Jugueton</label>
</div>
<div class="col-md-4 bottom-double-buffer">
<span class="emoticon e_distraido"></span>
<input
data-ng-model="med.estados.distraido"
id="id_distraido"
name="distraido"
type="checkbox">
<label class="emoticon" for="id_distraido">Distraido</label>
</div>
<div class="col-md-4 bottom-double-buffer">
<span class="emoticon e_contento"></span>
<input
data-ng-model="med.estados.contento"
id="id_contento"
name="contento"
type="checkbox">
<label class="emoticon" for="id_contento">Contento</label>
</div>
<div class="col-md-4 bottom-double-buffer">
<span class="emoticon e_sereno"></span>
<input
data-ng-model="med.estados.sereno"
id="id_sereno" name="sereno" type="checkbox">
<label class="emoticon" for="id_sereno">Sereno</label>
</div>
<div class="col-md-4 bottom-double-buffer">
<span class="emoticon e_excitado"></span>
<input
data-ng-model="med.estados.excitado"
id="id_excitado"
name="excitado"
type="checkbox">
<label class="emoticon" for="id_excitado">Excitado</label>
</div>
<div class="col-md-4 bottom-double-buffer">
<span class="emoticon e_impaciente"></span>
<input
data-ng-model="med.estados.impaciente"
id="id_impaciente"
name="impaciente"
type="checkbox">
<label class="emoticon" for="id_impaciente">Impaciente</label>
</div>
<div class="col-md-4 bottom-double-buffer">
<span class="emoticon e_atento"></span>
<input
data-ng-model="med.estados.atento"
id="id_atento" name="atento" type="checkbox">
<label class="emoticon" for="id_atento">Atento</label>
</div>
<div class="col-md-4 bottom-double-buffer">
<span class="emoticon e_curioso"></span>
<input
data-ng-model="med.estados.curioso"
id="id_curioso"
name="curioso"
type="checkbox">
<label class="emoticon" for="id_curioso">Curioso</label>
</div>
<div class="col-md-4 bottom-double-buffer">
<span class="emoticon e_participativo"></span>
<input
data-ng-model="med.estados.participativo"
id="id_participativo"
name="participativo"
type="checkbox">
<label class="emoticon" for="id_participativo">Participativo</label>
</div>
</div>
</div>
<div class="comments-heading">
<h2>Etiquetas:</h2>
</div>
<div class="row">
<div class="col-md-10 col-md-offset-1">
<p><em>Puedes agregar etiquetas para
ayudar a los usuarios a encontrar tu MED más fácilmente</em></p>
<div class="form-group">
<input
class="form-control tagit-hidden-field"
data-tagit="{singleField: true}"
data-ng-model="med.tags"
type="text">
</div>
</div>
</div>
<hr>
<p class="text-center">
<img
data-ng-show="formSpinner"
data-ng-src="{{ staticRoute }}images/loading-square.gif"
alt="Loading...">
{% endverbatim %}
<button
type="submit"
class="btn btn-success btn-xs"
data-ng-click="submitted = true; saveMED()"
>
<span class="glyphicon glyphicon-ok"></span>
{% if object %}Guardar{% else %}Enviar{% endif %} Material
</button>
</p>
</form>
</div>
</div>
</div>
</div>
<div class="modal fade" id="modalInteligencias">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
<h3>Tipo de inteligencia</h3>
</div>
<div class="modal-body">
<p>Aquí es donde Red Magisterial se distingue de cualquier otra red social de objetos de enseñanza
digitales. Eso es porque nuestra filosofía aborda el aprendizaje desde el punto de vista de las
inteligencias múltiples. ¿Esto qué significa? El Doctor Howard Gardner creó una teoría según la cual, el
ser humano posee no solamente un tipo de inteligencia, sino diferentes capacidades, habilidades y
aptitudes para realizar actividades diversas y a cada una de ellas la llamó "inteligencia" así creó la
teoría de las inteligencias múltiples.</p>
<p>Cuando toques cada control deslizante, podrás ver una breve descripción de la inteligencia a la que se
refiere ese control. Los valores de estos controles no pueden repetirse, así que piensa en tus opciones
y las cualidades de tu MED.</p>
<p>Eso es lo que vemos aquí en nuestra zona de tipos de inteligencia y queremos que nos cuentes si tu
Material Educativo Digital puede estimular a cada una de esas inteligencias y en qué grado. Por ejemplo,
si tu MED es sobre el Teorema de Pitágoras, probablemente estimula de manera preponderante la
inteligencia lógico-matemática... en segundo lugar, estimularía la inteligencia espacial, ya que los
aspectos geométricos involucrados en el teorema implican que el niño haga una proyección mental y en el
espacio de ciertas propiedades geométricas. Así puedes ir deslizando los controles y acomodándolos en
orden según la inteligencia que más estimulan hasta llegar a la que menos estimulan.</p>
</div>
</div>
</div>
</div>
<div class="modal fade" id="modalAnimos">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
<h3>Estados de ánimo</h3>
</div>
<div class="modal-body">
<p>¿En qué estado de ánimo debería estar el grupo cuando use tu MED para aprovecharlo mejor? Tal vez tu MED
es un juego, o una actividad que divierta a los alumnos y entonces podría ser bueno usarlo cuando el
grupo esté aburrido para sacarlo de ese estado de ánimo. O bien, podría ser un ejercicio que requiera de
toda su atención, en ese caso deberías marcar los estados de ánimo "sereno" y "atento". Elige hasta tres
opciones.</p>
</div>
</div>
</div>
</div>
</div><!--end Controller-->
{% endblock content %}
{% block javascripts %}
<script src="{% static 'ckeditor/ckeditor.js' %}"></script>
<script src="{% static 'javascripts/vendor/mathquill.min.js' %}"></script>
<script type="text/javascript">
{% include "utils/plugins-ckeditor.html" %}
CKEDITOR.replace('descripcionFormaDeUso', {
customConfig: '/static/javascripts/vendor/ckeditor/config.js'
});
</script>
{% endblock %}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment