Freecodecamp: Hacer que el desafío "Aprenda cómo funciona FCC" sea más fácil de navegar (UX)

También creo que este desafío podría mejorar con algunas mejoras de UX. Para empezar, creo que todos estos desafíos deberían poder navegarse a través de las teclas de flecha. El problema con el desplazamiento también es molesto. Las imágenes probablemente podrían hacerse más pequeñas.

cc / @ FreeCodeCamp / issue-moderators

@atjonathan @oalhait sí, planeamos reducir significativamente la duración de estos. Si usáramos una altura fija para las imágenes y su texto, podríamos eliminar gran parte de la variabilidad en la altura.

Creo que la mejora más inmediata sería pasar al siguiente desafío con las flechas izquierda y derecha.

¡Me ocuparé del problema de la flecha izquierda / derecha! Sin embargo, una pregunta: ¿dónde encuentro el html / css / js del desafío específico?

Hola @oalhait, gracias por ayudarnos en UX.

Los desafíos ahora están en la infraestructura de reacción, la mayoría de las vistas / controladores están en /common/app , los desafíos son archivos json que se encuentran en el directorio /seed .

Las vistas son todas JSX, los estilos son MENOS

Mire las Pautas para Contribuir . ¡Feliz solución!

Y comuníquese con la sala de chat de colaboradores . para asistencia.

@oalhait - BTW - El enlace en la descripción del problema de los problemas apunta a localhost;)

@raisedadead gracias por los consejos, ¡estoy en eso ahora!
y @iamrudra HAHAHA

sugerencias necesarias para -

• qué hacer cuando al final del desafío ... pasar al siguiente desafío
• qué hacer cuando queremos que el usuario abra un enlace antes de pasar al siguiente desafío
• qué hacer con el texto que muestra la numeración de los pasos ... es decir, (4/12)
  @QuincyLarson @atjonathan

@sachinmour Oh, cuando dije las teclas de flecha, me refería al teclado, sin agregar elementos adicionales de la interfaz de usuario.

En lugar de agregar botones adicionales, creo que sería mejor asegurarse de que el botón del paso siguiente y los botones del paso anterior estén siempre en el mismo lugar (restringiendo la altura de las imágenes / texto) para que pueda hacer clic en ellos repetidamente.

Pero queremos agregar algunas teclas de acceso rápido. Las teclas de acceso rápido se encuentran en main.js

En cuanto a su pregunta sobre qué debería suceder si encuentran un paso en el que deben abrir un enlace antes de continuar, bueno, hacer clic en la tecla de flecha simplemente no los avanzaría y, en cambio, haría que el botón "abrir enlace en una nueva pestaña" se moviera de alguna manera a llamar la atención sobre él y notificar al usuario que no puede avanzar hasta que haga clic en él.

@QuincyLarson lo entendió ...

@QuincyLarson

¿Está resuelto el desafío?

¿Esto todavía no funciona? ¿Requiere ayuda?

Este problema está abierto como help wanted @ktajpuri , @ anush6533

Hemos hecho la transición a un conjunto de navegación más pequeño en la versión beta, supongo que podríamos cerrar esto @QuincyLarson .

@raisedadead Sí, no creo que valga la pena mejorar en este momento. Solo usamos algunos de estos desafíos de diapositivas, y son cortos; creo que el más largo es como 4 diapositivas.