Tutorial: Resaltar las respuestas correctas en Moodle

A medida que se ha ido modernizando los métodos de enseñanzas, he encontrado diferentes LMS (Learning Management System) como Chamilio, Lifter LMS y Moodle, donde este último es el más frecuente de todos. Cada uno tiene sus fortalezas y debilidades, pero he elegido Moodle para mis actividades de enseñanza debido a su modularidad y escalabilidad. Esto significa también que he encontrado problemas de diferentes magnitudes donde es necesario intervenir un poco en el código del sistema, siendo el caso de hoy presente, el tener que resaltar las respuestas correctas en Moodle.

Tabla de Contenidos

Introducción

Una de las cosas que mas me esta gustando de CSS es la posibilidad de aplicar cambios a estilos que no me gustan o no satisfacen mis necesidades. La libertad que ofrece esto es algo que no conocía cuando comencé a interesarme en la programación y que por mucho tiempo permaneció como una limitante debido al alto coste de rendimiento que esto tenia en mis legendarios equipos. Ahora todo es mas fácil.

El articulo actual esta relacionado con otros en los que uso CSS para resolver algunos problemas que vaya encontrando, como este, que uso para hacer traducciones de emergencias en plugin sin localización y conforme vaya encontrando mas cosas que hacer, las iré publicando.

El problema que resolveremos hoy, probablemente pase desapercibido por muchos, pero es uno relacionado a la accesibilidad. Algunos temas lo resuelve, pero el predeterminado y algunos otros carecen de esta opción.

Resaltar las respuestas correctas en Moodle

Al hacer un cuestionario, moodle da la opción de marcar las respuestas correctas e incorrectas, destacando con tan solo un check los resultados. Una mejora de accesibilidad sería el resaltar toda la fila, puesto que esto hace más fácil la lectura. para esto, tenemos que hacer lo siguiente:

Buscamos en la administración del sitio, en la subsección de apariencia, el tema que tengamos activo. En este caso, mi tema activo es el predeterminado para mi versión, llamado Boost.

Dentro del tema, vamos a los ajustes avanzados y agregamos en «SCSS sin modificar» agregamos el siguiente selector de cascada:

.answer .correct{
    background-color: mediumspringgreen;
    border-radius: 35px;
}

Y listo, tenemos resaltado la respuesta correcta con un bonito color verde claro. Eso sí, resaltar la respuesta incorrecta requiere algo más elaborado, pero lo dejaré para la próxima ocasión.