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.

Header (unidad / tema / lección)

Header (unidad / tema / lección)

 

UNIDAD 1: Título de la unidad

TEMA 1:
Título del tema

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

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

 
Trabajo individual

Etiqueta de docente

 
Docente

Etiqueta de toma nota

 
Toma nota

Etiqueta de anota en tu cuaderno

 
Anota en el cuaderno

Enunciados

Enunciados

#
Texto del enunciado

Textos utilies en preguntas

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

Cápsula: Ejemplo

Ejemplo

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ón descargar

Boton descargar

Descargar

Imágenes y videos

Imagen típica con fuente

Fuente: DEMRE (link)

Video típico

Solo la 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();
          }
        });
      });
    });