Nuevo componente

Nueva sección

Headers tipo: Unidad / Tema / Lección

Copia el HTML de cada componente y pégalo en el editor HTML de tu curso. El código permanece oculto hasta que abras el desplegable.

Simple

 

UNIDAD 1: Título de la unidad

TEMA 1:
Título del tema

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

Ver código HTML
<header class="unidad-header">
  <div class="barra-lateral">&nbsp;</div>
  <div class="contenido">
    <p class="unidad">UNIDAD 1: Título de la unidad</p>
    <h1 class="tema">TEMA 1:<br>Título del tema</h1>
    <h2 class="leccion">LECCIÓN 1: Título de la lección</h2>
  </div>
</header>

Contenido de actividad

Bloque para presentar instrucciones y objetivos de una actividad.

Ejemplo

Actividad: Lee el recurso y responde las preguntas a continuación.
Ver código HTML
<div style="padding:22px; background:#f4f8f6; border-left:6px solid #76b89a;">
  <strong>Actividad:</strong> Lee el recurso y responde las preguntas a continuación.
</div>

Etiquetas de trabajo

Etiqueta visual para identificar el tipo de trabajo solicitado.

Ejemplo

Trabajo individual
Ver código HTML
<span style="display:inline-block; padding:8px 12px; color:#fff; background:#4b3470; border-radius:999px; font-weight:700;">Trabajo individual</span>

Enunciados

Bloque para destacar una pregunta o consigna.

Ejemplo

Pregunta: ¿Cuál es la idea principal del texto?
Ver código HTML
<div style="padding:18px; color:#4b3470; background:#f5f1fa; font-weight:700;">
  Pregunta: ¿Cuál es la idea principal del texto?
</div>

Textos útiles en preguntas

Texto de apoyo que acompaña una consigna.

Ejemplo

Recuerda fundamentar tu respuesta utilizando los conceptos revisados.
Ver código HTML
<p><em>Recuerda fundamentar tu respuesta utilizando los conceptos revisados.</em></p>

Cápsulas

Componente breve para destacar información relevante.

Ejemplo

Dato clave: Esta información te ayudará a realizar la actividad.
Ver código HTML
<div style="padding:15px; color:#345e4c; background:#edf8f1; border-left:5px solid #76b89a;">
  <strong>Dato clave:</strong> Esta información te ayudará a realizar la actividad.
</div>

Recuadros

Marco para resaltar conceptos o contenidos importantes.

Ejemplo

Importante: Revisa esta indicación antes de continuar.
Ver código HTML
<div style="padding:20px; border:2px solid #4b3470;">
  <strong>Importante:</strong> Revisa esta indicación antes de continuar.
</div>

Diálogos

Formato para representar una conversación entre participantes.

Ejemplo

Docente: ¿Qué observas en el ejemplo?

Estudiante: Observo una relación entre ambos conceptos.

Ver código HTML
<div style="padding:18px; background:#f5f5f7;">
  <p><strong>Docente:</strong> ¿Qué observas en el ejemplo?</p>
  <p><strong>Estudiante:</strong> Observo una relación entre ambos conceptos.</p>
</div>

Botón descargar

Botón para enlazar un documento o material descargable.

Ejemplo

Descargar archivo
Ver código HTML
<a href="URL-DEL-ARCHIVO" style="display:inline-block; padding:11px 16px; color:#fff; background:#4b3470; border-radius:4px; text-decoration:none; font-weight:700;">Descargar archivo</a>

Imágenes y videos

Contenedor para insertar recursos audiovisuales.

Ejemplo

IMAGEN O VIDEO
Ver código HTML
<img src="URL-DE-LA-IMAGEN" alt="Descripción de la imagen" style="display:block; max-width:100%; height:auto;">

Carruseles y tabs

Organiza contenido en pestañas visuales.

Ejemplo

Pestaña 1Pestaña 2Pestaña 3
Ver código HTML
<div style="display:flex; gap:8px; padding:12px; background:#f4f5f7;">
  <span style="padding:9px 12px; color:#fff; background:#4b3470;">Pestaña 1</span>
  <span style="padding:9px 12px; background:#fff; border:1px solid #e1e3e7;">Pestaña 2</span>
</div>

Tablas cloze

Tabla base para ejercicios de completar espacios.

Ejemplo

ConceptoRespuesta
Ejemplo_____
Ver código HTML
<table style="width:100%; border-collapse:collapse;">
  <tr><th style="padding:10px; color:#fff; background:#4b3470;">Concepto</th><th style="padding:10px; color:#fff; background:#4b3470;">Respuesta</th></tr>
  <tr><td style="padding:10px; border:1px solid #e1e3e7;">Ejemplo</td><td style="padding:10px; border:1px solid #e1e3e7;">_____</td></tr>
</table>

Dropdown

Menú desplegable para seleccionar una alternativa.

Ejemplo

Ver código HTML
<select style="width:100%; max-width:340px; padding:10px; border:1px solid #e1e3e7; border-radius:4px;">
  <option>Selecciona una opción</option>
  <option>Opción 1</option>
  <option>Opción 2</option>
</select>

Scripts

Ejemplo de bloque para incluir un comportamiento JavaScript.

Ejemplo

console.log('Componente cargado');
Ver código HTML
<script>
  console.log('Componente cargado');
</script>

Anti ctrl+c/ctrl+v

console.log('Componente cargado');
Ver código HTML
<script>
  console.log('Componente cargado');
</script>