Componentes para montaje de cursos en Moodle MatCon CMMEdu

Copia cada bloque y pégalo en tu curso. Debajo de cada componente tienes un botón Copiar.

Headers tipo: Unidad / Tema / Lección

Simple

 

UNIDAD 1: Título de la unidad

TEMA 1:
Título del tema

LECCIÓN 1: Título de la lección

Herramientas digitiales

Lección de herramientas digitales

 

UNIDAD 1 Título de la unidad

TEMA 1:
Título del tema

LECCIÓN 1: Título de la lección

Práctica

Lección de práctica

 

UNIDAD 1 Título de la unidad

TEMA 1:
Título del tema

LECCIÓN 1: Título de la lección

Header Evaluación

Evaluación Unidad X

Contenido de actividad

Contenido

Texto

con listas

Texto

  • lista 1
  • lista 2
  1. lista 1
  2. lista 2

Etiquetas de trabajo

Etiqueta de trabajo en grupo

 
Trabajo en grupo

Etiqueta de trabajo en pareja

 
Trabajo en pareja

Etiqueta de trabajo individual

 
Trabajo individual

Etiqueta de docente

 
Docente

Etiqueta de toma nota

 
Toma nota

Etiqueta de anota en tu cuaderno

 
Anota en el cuaderno

Etiqueta de pregunta PAES

 
Pregunta tipo PAES

Enunciados

Enunciado

#
Texto del enunciado

Práctica

#
Texto del enunciado

Evaluación

#
Texto del enunciado

Textos utilies en preguntas

Respuesta

Respuesta: 1, 2 ,3 y 4 respectivamente.

Pregunta abierta

Su respuesta ha sido enviada.

Subir archivo

Su archivo ha sido enviado.

Subir imagen

Su imagen ha sido enviada.

Subir archivo

Su documento ha sido enviado.

Subir audio

Su audio ha sido enviado.

Cápsulas

Cápsula: Exploremos

Exploremos una posible respuesta

Contenido de la capsula

Cápsula: Objetivos de aprendizaje

Objetivos de aprendizaje

Contenido de la capsula

Cápsula: Recordemos

Recordemos

Contenido de la capsula

Cápsula: Contenido

Contenido

Contenido de la capsula

Cápsula: Observación

Observación

Contenido de la capsula

Cápsula: Instrucción

Instrucción

Contenido de la capsula

Recuadros

Recuadro rosado

Contenido del recuadro

Recuadro azul

Contenido del recuadro

Diálogos

Diálogos de personajes

Thiare
Contenido del dialogo
Laura
Contenido del dialogo

Botónes

Boton descargar

Descargar

Boton modal

Ver gráfico

Boton tabla

Mes Asistencia
Enero 120
Febrero 135
Ver tabla

Imágenes y videos

Imagen

Video típico

Fuente

Fuente: DEMRE (link)

Hasta 5 imágenes en fila (responsive)

Carousel

Carousel de carpetas

Dropdown

Dropdown

Scripts

Script para Carousel / Tabs (incluir una vez en la página)

<script>
$(document).ready(function () {
  $('.carouselSYS').each(function () {
    var $carousel = $(this);
    var slides = $carousel.find('.carouselSYS-slide');
    var slidesCount = slides.length;
    var currentIndex = 0;
    $(slides[currentIndex]).show();
    function updateIndicator() {
      $carousel.find('.current-slide').text(currentIndex + 1);
      $carousel.find('.total-slides').text(slidesCount);
    }
    function updateButtons() {
      $carousel.find('.carouselSYS-prev').toggleClass('disabled', currentIndex === 0);
      $carousel.find('.carouselSYS-next').toggleClass('disabled', currentIndex === slidesCount - 1);
    }
    function showSlide(index) {
      slides.hide();
      $(slides[index]).show();
      updateIndicator();
      updateButtons();
    }
    $carousel.find('.carouselSYS-next').click(function () {
      if (currentIndex < slidesCount - 1) { currentIndex++; showSlide(currentIndex); }
    });
    $carousel.find('.carouselSYS-prev').click(function () {
      if (currentIndex > 0) { currentIndex--; showSlide(currentIndex); }
    });
    updateIndicator();
    updateButtons();
  });
  $('.carouselSYStable').each(function () {
    var $carousel = $(this);
    var slides = $carousel.find('.carouselSYStable-slide');
    var slidesCount = slides.length;
    var currentIndex = 0;
    $(slides[currentIndex]).show();
    function updateIndicator() {
      $carousel.find('.current-slide').text(currentIndex + 1);
      $carousel.find('.total-slides').text(slidesCount);
    }
    function updateButtons() {
      $carousel.find('.carouselSYStable-prev').toggleClass('disabled', currentIndex === 0);
      $carousel.find('.carouselSYStable-next').toggleClass('disabled', currentIndex === slidesCount - 1);
    }
    function showSlide(index) {
      slides.hide();
      $(slides[index]).show();
      updateIndicator();
      updateButtons();
    }
    $carousel.find('.carouselSYStable-next').click(function () {
      if (currentIndex < slidesCount - 1) { currentIndex++; showSlide(currentIndex); }
    });
    $carousel.find('.carouselSYStable-prev').click(function () {
      if (currentIndex > 0) { currentIndex--; showSlide(currentIndex); }
    });
    updateIndicator();
    updateButtons();
  });
  $('.carousel-carpeta').each(function () {
    var $carousel = $(this);
    var slides = $carousel.find('.carousel-carpeta-slide');
    var tabs = $carousel.find('.carousel-carpeta-tab');
    $(slides[0]).show();
    $(tabs[0]).addClass('active');
    function showSlide(index) {
      slides.hide();
      $(slides[index]).show();
      tabs.removeClass('active');
      $(tabs[index]).addClass('active');
    }
    tabs.click(function () { showSlide(tabs.index(this)); });
  });
  $('.tablatabSYS').each(function () {
    var $tabsContainer = $(this);
    var tabs = $tabsContainer.find('.tabhead a');
    var contents = $tabsContainer.find('.tab-content');
    $(tabs[0]).addClass('active');
    $(contents[0]).addClass('active');
    function showContent(index) {
      tabs.removeClass('active');
      contents.removeClass('active');
      $(tabs[index]).addClass('active');
      $(contents[index]).addClass('active');
    }
    tabs.click(function (e) {
      e.preventDefault();
      showContent(tabs.index(this));
    });
  });
});
</script>

Script para Dropdown

document.addEventListener("DOMContentLoaded", function() {
      document.querySelectorAll(".dropdownSYS-toggle").forEach(toggle => {

        const toggleContent = () => {
          const content = toggle.nextElementSibling;
          const expanded = toggle.getAttribute("aria-expanded") ===
            "true";

          toggle.setAttribute("aria-expanded", !expanded);
          content.hidden = expanded;

          if (!expanded && window.MathJax) {
            MathJax.typesetPromise([content]);
          }
        };

        toggle.addEventListener("click", toggleContent);

        toggle.addEventListener("keydown", e => {
          if (e.key === "Enter" || e.key === " ") {
            e.preventDefault();
            toggleContent();
          }
        });
      });
    });