---
# System prepended metadata

title: Untitled

---

## **Descripción/contexto**

Abordarmos la primera versión del plugin de Learning Paths con su pieza más atómica “módulos”.

En esta primera épica nos vamos a centrar en la “Creación y edición” mientras cerramos la definición de asignación y ejecución.

Los módulos son agrupaciones de actividades, contenidos y recursos multimedia, que pueden asignarse de forma conjunta y que conllevan dependencia/secuencialidad (opcional u obligatoria).

Si hay diferentes actividades puntuables dentro de un módulo, el módulo devolverá una nota media (de aquellas calificables) dentro de Scores, y será posible “expandir” el contenido para ver el detalle de cada una de estas puntuaciones (calificable y no-calificables).

El módulo modificará también el frontal del OnGoing, de manera que debemos poder anidar varias actividades/contenidos/recursos multi-media en dicho OnGoing.

## Prototipo de FIGMA

[https://www.figma.com/file/mgbCZ6EIOUurtNBFI7v9z3/%5BF003%5D-Learning-Paths-1.0---Modules?node-id=372%3A24571&t=yBO4S9NSNRbGtiZx-4](https://www.figma.com/file/mgbCZ6EIOUurtNBFI7v9z3/%5BF003%5D-Learning-Paths-1.0---Modules?node-id=372%3A24571&t=yBO4S9NSNRbGtiZx-4)

## Documentación de referencia/discovery

[Learning Paths 1.0 (Modules)](https://miro.com/app/board/uXjVPEd3ZtM=/?share_link_id=658088365985)

## Criterios de aceptación

### Caso de uso 1

Ruta: Menú> Recorridos educativos

Especificación: 

- Se ha creado una sección en el menú llamada
    - ES: Recorridos educativos
    - EN: Learning Paths
- Icono: Hasta que tengamos la Librería de iconos de BB2. Usamos este en svg:

[modules_library_icon.svg](https://s3-us-west-2.amazonaws.com/secure.notion-static.com/223a0df4-0510-4824-a03d-1f1eda9b7e4f/modules_library_icon.svg)

- Submenú:
    - Librería de módulos (Empty si nunca se ha creado un módulo)
    - Nuevo módulo

### Caso de uso 2

Ruta: Recorridos educativos > Nuevo módulo > Step 1

Especificación: Datos básicos está compuesto por los siguientes componentes:

- Header
    - Icon: El mismo de la sección del menú
    - Title: Nuevo Módulo
    - Button: Guardar borrador
- Subheader
    - Stepper horizontal con 3 pasos:
        - Datos básicos
        - Configuración
        - Estructura
    - Estados: Se mantiene activo el step actual para informar al usuario
- Body
    - Datos básicos
        - Nombre (obligatorio)
        - Subtítulo (obligatorio)
        - Descripción
    - Portada
        - Vista previa
        - Color
        - Imagen destacada
        - Tags
- Footer: Button “Siguiente”

### Caso de uso 3

Ruta: Recorridos educativos > Nuevo módulo > Step 2

Especificación: Configuración está compuesto por los siguientes componentes:

- Header
    - Icon: El mismo de la sección del menú
    - Title: Nombre del módulo que el usuario ha introducido en el step 1.
    - Button: Guardar borrador
- Subheader
    - Stepper horizontal con 3 pasos:
        - Datos básicos
        - Configuración
        - Estructura
    - Estados: Se mantiene activo el step actual para informar al usuario
- Body
    - Programa: Selector
    - Alert message
        - Icon alert
        - Texto: Esta configuración filtrará los contenidos y actividades que podrás incluir en este módulo.
    - Asignaturas
        - Select: Asignatura
        - Select: Nivel
        - Button: Añadir
        - Fila: Label con opciones añadidas + icon eliminar
        - Toggle: Añadir otras asignaturas en las que colaboro
- Footer:
    - Button left: “Anterior”
    - Button right: “Siguiente”

### Caso de uso 4

Ruta: Recorridos educativos > Nuevo módulo > Step 3

Especificación: Estructura está compuesto por los siguientes componentes:

- Header
    - Icon: El mismo de la sección del menú
    - Title: Nombre del módulo que el usuario ha introducido en el step 1.
    - Button: Guardar borrador
- Subheader
    - Stepper horizontal con 3 pasos:
        - Datos básicos
        - Configuración
        - Estructura
    - Estados: Se mantiene activo el step actual para informar al usuario
- Body - Estados
    - **Estado inicial o Empty state:**
        - Título: “¡Empecemos a crear!”
        - Descripción: “Añade recursos de la librería y ordénalos según desees que le aparezcan al estudiante.”
        - Button: Icon “+” + Nuevo recurso
    - **1 o más recursos añadidos:**
        - Tipo: Listado
        - Columnas:
            - Recurso
                - Preview Recurso
                - Icono tipo de recurso
                - Título del recurso + elipsis a partir de 40-48 caracteres
                - Descripción del recurso + elipsis a partir de 40-48 caracteres
            - Tipo
                - Toggle:
                - Activado: Obligatorio
                    - Se oculta en la última fila
                - Desactivado: Opcional
            - Acciones
                - Para recursos tipo test: Editar > Abre drawer con la configuración de ese test
                - Para resto de recursos: Sin acciones
            - Acción principal: Icono “+” + Añadir recurso > Abre drawer de Library
- Footer:
    - Button left: Anterior
    - Button right:
        - Publicar
            - Disabled: No se han añadido recursos
                - Hover: Añade 2 o más recursos para publicar
            - Active: Se han añadido 2 o más recursos
        - ~~Publicar y asignar:~~ Esta opción se incluye en otra tarea
        
        [Learning Paths 1.0 - Modules - Asignación](https://www.notion.so/Learning-Paths-1-0-Modules-Asignaci-n-f6af40cd6fc847eeb3f6663aefe60423)
        

### Caso de uso 5

Ruta: Recorridos educativos > Nuevo módulo > Step 3 > Añadir recurso

Especificación: Al clicar sobre “Añadir recurso” en el paso 3 “Estructura”, se abre un drawer con lo siguiente:

- Título: Icon + Library
- Secciones (tabs)
    - Librería
    - Nuevo recurso
- Subsecciones
    - Contenidos
    - Actividades
    - Multimedia
- Filtros
    - Input: Buscador
    - Select: Tipo de recurso
        - Contenidos: Documentos
        - Actividades: Test, tareas, encuestas
        - Multimedia: Vídeo, audio…
- Vista: Listado
    - Imagen destacada
    - Icono tipo de recurso
    - Nombre del recurso
- Footer: Sin acciones. El recurso se añade directamente al hacer clic sobre él.

### Caso de uso 6

Ruta: Recorridos educativos > Nuevo módulo > Guardar borrador

Especificación: 

- El módulo se guarda correctamente
- Se muestra la card en Librería de módulos > Borradores

### Caso de uso 7

Ruta: Recorridos educativos > Nuevo módulo > Publicar

Especificación: 

- El módulo se publica correctamente
- Se muestra la card en Librería de módulos > Publicados

### Caso de uso 8

Ruta: Recorridos educativos > Librería de módulos > Clic en una card

Especificación: 

- Se abre el drawer con más detalle de la card
- Al clicar sobre editar el módulo se abre correctamente en el step 3 “Estructura” con los recursos cargados.
- Permite edición

### Especificaciones de DS/ Responsive

*Detalles de como funcionan nuevos componentes de Bubbles 2.0 o especificaciones de comportamientos de interacción/maquetación en pantallas grandes/pequeñas, etc…*

<aside>
🗒️ **INSTRUCCIONES PARA QA**
*Se incluyen instrucciones detalladas de cómo preparar el entorno para poder probar los criterios: que programa usar, con qué usuario, que debe crearse o asignarse, si se debe subir un recurso, etc…*

</aside>

## Tareas técnicas

- [ ]  Tarea 1
- [ ]  Tarea 2
- [ ]  Tarea 3

## Dependencias

*Las dependencias deben estar mapeadas en la propiedad “pulgin dependency”, pero aquí debemos especificar qué dependencia tenemos a nivel técnico o funcional.*

## Bloqueos

*Por ejemplo los accesos a la API o un tema de infraestructura o actualizaciones de librerías que deben resolverse previamente.*

## Declaración de deuda técnica

- *Design System (A pelo > Bubbles 1.0 > Bubbles 2. 0)*
- *Performance/ Optimización*
- *Deuda de UX por degradación técnica*

## Documentación técnica y/o funcional en GitHub Pages

 *Añadir aquí la URL de la/s páginas de GitHub pages*

---

---

## Definition of Ready

- [ ]  **1.** Contiene las pantallas de Figma, con sus detalles y aclaraciones, así como todos los estados y el orden que va a ver el usuario.
- [ ]  **2.** Las pantallas de Figma contienen las vistas de usuario y admin diferenciadas, detalle de permisos por perfil.
- [ ]  **3.** Incluye la descripción y criterios de aceptación, con  el detalle funcional y especificaciones técnicas, de forma entendible por cualquier miembro del equipo.
- [ ]  **4.** No tiene bloqueos que impidan su desarrollo, como por ejemplo acceso al servicio (API) si es desarrollo Backend.
- [ ]  **5.** Si hay dependencias de otros plugins, están identificadas y resueltas.
- [ ]  **6.** Las tareas tienen un tamaño.
- [ ]  **7.** Puede ser probada por el QA durante el sprint.
- [ ]  **8.** Se ha incluido documentación en MIRO de referencia.

## Definition of Done

- [ ]  **1.** Todas las pruebas unitarias y funcionales están pasadas y OK
- [ ]  **2.** Pruebas en dispositivos / navegadores pasadas y OK *(falta definirlo)*
- [ ]  **3.** Pruebas de rendimiento pasadas y OK *(falta definirlo)*
- [ ]  **4.** Componentes correctamente integrados desde StoryBook *(verificar si el componente es la versión Bubbles 2.0, documentar deuda técnica en caso contrario)*
- [ ]  **5.** Casos borde (empty states, numerales, faltas de conexión, etc...) pasados y OK
- [ ]  **6.** Todos los criterios de aceptación validados por QA
- [ ]  **7.** Pruebas end to end, para validar que no hay errores por dependencias, pasadas y OK *(definir bien estas pruebas cuando hay más de un plugin implicado)*
- [ ]  **8.** Se han incluido los eventos de Elasticsearch
- [ ]  **9.** Se ha subido el código a Github
- [ ]  **10.** Se ha creado la documentación técnica y subido al repositorio *(Docusaurus → GithubPages?)*

## Notas de la sesión de refinamiento

- Épicas con dependencia (se separan de esta épica)
    - Se prioriza refactor del formulario de creación de assets antes de empezar esta épica
    - Drawer con el refactor (3 tabs contenidos, actividades, multimedia)
    - Refactor de asignables
- Deuda UI @Marta
    - Drawer: Nueva versión MVP con selector de categorías
    - Librería de módulos (y general): añadir selector “programa” y “asignatura”
    - Refactor Configuración (step 1)