El JavaScript del LMS: lms-scripts.js

Ya configuraste los colores del sitio. Ahora vamos a conocer el archivo que le da vida y movimiento al LMS. No te preocupes si nunca escribiste JavaScript — en esta lección solo vas a entender lo que hace el archivo, no escribirlo desde cero.

🎬

CSS es la ropa, JavaScript es el movimiento

CSS le dice al sitio cómo verse: colores, tamaños, formas. JavaScript le dice al sitio cómo comportarse: qué pasa cuando hacés clic, qué aparece cuando scrolleás, qué se anima cuando completás una lección. El archivo lms-scripts.js es el encargado de todo ese movimiento en tu LMS.

¿Dónde está el archivo?

📂 Ubicación:
wp-content/themes/divi-lms-child/assets/js/lms-scripts.js

lms-scripts.js

            assets > js > lms-scripts.js
        

            
                1

                /**
            
                2

                 * Divi LMS Child — lms-scripts.js
            
                3

                 * Archivo: wp-content/themes/divi-lms-child/assets/js/lms-scripts.js
            
                6

                 * Scripts del LMS para mejorar la experiencia del estudiante.
            
                7

                 * Se carga en el footer, DESPUÉS de que todo el HTML ya está listo.
            
                10

                 * ¿Qué hace este archivo?
            
                11

                 * 1. Muestra un botón flotante para volver arriba de la página
            
                12

                 * 2. Anima suavemente las barras de progreso de LearnPress
            
                13

                 * 3. Agrega un efecto visual cuando se completa una lección
            
                14

                 */
            
                15

                (function($) {
            
                16

                  ‘use strict’;
            
                18

                  $(document).ready(function() {
            
                24

                      console.log(‘%c✓ Divi LMS Child: scripts cargados correctamente’,
            
                26

                        ‘color: #2563eb; font-weight: bold; font-size: 13px;’
            
                31

                    iniciarBotonArriba();
            
                32

                    mejorarProgresoLP();
            
                33

                    animarLeccionCompletada();
            
                35

                  });
            
                126

                })(jQuery); // fin del wrapper

            Este archivo tiene 126 líneas — 3 funciones + el mensaje de confirmación en la consola
        

La estructura del archivo de un vistazo

El archivo está organizado en 4 bloques muy claros. Cada uno hace una sola cosa:

ENVOLTURA
(function($) { ... })(jQuery);

Protege el símbolo $ — evita conflictos con otros plugins de WordPress que también usan jQuery. Todo el código vive adentro de esta cáscara.

BLOQUE 1
$(document).ready(function() { ... })

Espera que la página cargue completamente, después ejecuta las 3 funciones y muestra el mensaje de confirmación en la consola.

FUNCIÓN 1
iniciarBotonArriba()

Crea el botón flotante «↑» en la esquina inferior derecha. Aparece solo cuando el estudiante baja más de 300px en la página. Al hacer clic, sube suavemente al inicio.

FUNCIÓN 2
mejorarProgresoLP()

Anima las barras de progreso de LearnPress. En vez de aparecer de golpe al 75%, la barra arranca en 0% y crece suavemente hasta el valor real. Mucho más profesional visualmente.

FUNCIÓN 3
animarLeccionCompletada()

Efecto visual al completar una lección. Cuando el estudiante hace clic en «Completar lección», el botón cambia al color verde de éxito (la clase CSS lms-completado que definimos en lms-styles.css).

Función 1 explicada: el botón «Volver arriba»

Cuando un estudiante lee una lección larga y llega al final, necesita volver al principio. En vez de scrollear todo de vuelta, el botón flotante lo sube de un clic.

Vista previa — Cómo se ve el botón en la página:

… contenido de la lección …

… el estudiante scrolleó más de 300px hacia abajo …

↑

El botón usa el color --color-primary que configuraste en variables.css

📄 Ver el código de iniciarBotonArriba() — Hacé clic para expandir

// Solo crear el botón si no existe ya en la página
if ($(‘#lms-btn-arriba’).length === 0) {
  $(‘body’).append(
    ‘<button id=»lms-btn-arriba»>↑</button>’
}
 
// Mostrar u ocultar según el scroll (más de 300px = visible)
$(window).on(‘scroll.lms’, function() {
  if ($(this).scrollTop() > 300) {
    $btn.addClass(‘visible’);
  } else {
    $btn.removeClass(‘visible’);
  }
});
 
// Al hacer clic → subir suavemente al inicio
$btn.on(‘click’, function() {
  $(‘html, body’).animate({ scrollTop: 0 }, 400);
});

Función 2 explicada: la barra de progreso animada

LearnPress ya tiene barras de progreso, pero aparecen de golpe. Esta función las hace arrancar desde cero y crecer suavemente hasta el porcentaje real.

Vista previa — Comparación:

❌ Sin animación (brusco)

Progreso del curso:

Aparece directo al 75% — sin transición

✅ Con animación (suave)

Progreso del curso:

Crece desde 0% hasta 75% suavemente

Función 3 explicada: el botón que cambia de color

Cuando el estudiante hace clic en «Completar lección», el botón se vuelve verde para dar una señal visual de éxito. Esto lo hace añadiendo la clase CSS lms-completado que ya definimos en lms-styles.css.

Vista previa — Efecto al completar:

Completar lección

Antes del clic

→

✓ Completar lección

Después del clic (500ms después)

La consola del navegador: tu herramienta de diagnóstico

La consola del navegador es la herramienta que te dice si el JavaScript se cargó bien o si hay errores. Aprendé a usarla — te va a salvar la vida muchas veces.

Cómo abrir la consola	Qué presionar
Atajo de teclado	F12 → hacé clic en la pestaña Console
Menú del navegador	Botón derecho en la página → Inspeccionar → pestaña Console
Atajo alternativo	Ctrl + Shift + J (abre directo en Console)

👁️ Así se ve la consola cuando todo funciona correctamente:

Elements

Console

Sources

Network

Performance

top ▼

🔍 Filter

Default levels ▼

No Issues

            
                JQMIGRATE: Migrate is installed, version 3.4.1

                jquery-migrate.min.js?ver=3.4.1:2
            
                ✓ Divi LMS Child: scripts cargados correctamente

                lms-scripts.js?ver=1.0.0:24
            
                ›

💡 ¿Qué significa cada mensaje?

JQMIGRATE: Migrate is installed… — Este mensaje es normal en WordPress. Significa que jQuery está cargado. No es un error.

✓ Divi LMS Child: scripts cargados correctamente — ¡Este es el nuestro! Aparece en azul porque le pusimos ese color en el código. Si ves este mensaje, el archivo JS se cargó perfectamente.

⚠️ ¿Qué pasa si ves mensajes en rojo? Los mensajes en rojo son errores. Si aparecen, copiá el texto y buscalo en Google — generalmente tienen solución simple. Lo importante por ahora es que no deberías ver ningún error rojo en este proyecto.

¿Por qué el archivo se carga en el footer?

En functions.php, el script se carga con el parámetro true al final. Eso significa «cargalo en el footer, no en el head».

wp_enqueue_script(
  ‘divi-lms-scripts’,
  get_stylesheet_directory_uri() . ‘/assets/js/lms-scripts.js’,
  array( ‘jquery’ ),
  ‘1.0.0’,
  true  ← esto significa «en el footer»
);

¿Por qué en el footer? Imaginate que el HTML de la página es una obra de teatro. El CSS se pone al principio (el decorado, ya tiene que estar listo). El JavaScript se pone al final (los actores entran cuando el escenario ya está montado). Si ponés el JS antes de que cargue el HTML, el script busca elementos que todavía no existen y da errores.

🎉 ¡Lo lograste! Resumen de la lección

Sabés que lms-scripts.js tiene 3 funciones: botón arriba, barra de progreso animada, efecto al completar lección
Entendés que el archivo se carga en el footer para que el HTML esté listo antes de ejecutarse
Aprendiste a abrir la consola del navegador con F12
Sabés identificar si el script cargó bien: buscás el mensaje azul «✓ Divi LMS Child: scripts cargados correctamente»
Entendés la diferencia entre un mensaje normal (blanco/negro) y un error (rojo)

✅ Verificación de la lección — Hacé esto ahora:

1. Abrí tu sitio en el navegador
2. Presioná F12 para abrir DevTools
3. Hacé clic en la pestaña Console
4. Recargá la página con Ctrl + F5
5. Buscá el mensaje azul: ✓ Divi LMS Child: scripts cargados correctamente
6. Confirmá que no hay mensajes en rojo

Si ves el mensaje azul y no hay errores rojos — ¡la lección está completada!

CSS es la ropa, JavaScript es el movimiento

¿Dónde está el archivo?

La estructura del archivo de un vistazo

Función 1 explicada: el botón «Volver arriba»

Función 2 explicada: la barra de progreso animada

Función 3 explicada: el botón que cambia de color

La consola del navegador: tu herramienta de diagnóstico

¿Por qué el archivo se carga en el footer?

🎉 ¡Lo lograste! Resumen de la lección

NOSOTROS

TÉRMINOS LEGALES

REDES SOCIALES

El JavaScript del LMS: lms-scripts.js

CSS es la ropa, JavaScript es el movimiento

¿Dónde está el archivo?

La estructura del archivo de un vistazo

Función 1 explicada: el botón «Volver arriba»

Función 2 explicada: la barra de progreso animada

Función 3 explicada: el botón que cambia de color

La consola del navegador: tu herramienta de diagnóstico

¿Por qué el archivo se carga en el footer?

🎉 ¡Lo lograste! Resumen de la lección

Deja una respuesta Cancelar la respuesta

NOSOTROS

TÉRMINOS LEGALES

REDES SOCIALES

Inicie sesión con tu cuenta:

Crear una cuenta

Modal title