Make "Learn how FCC Works" challenge easier to navigate (UX)

[oalhait]

Challenge Name

Learn how Free Code Camp Works

Issue Description

Going through the 12 slide slideshow is a bit tedious, as you have to keep pressing "Go to my next step" (as opposed to pressing arrow keys to navigate between slides). The image sizes are also not relative to the screen height, so if your window is small you'll have to scroll down every time to read the text/switch between slides.

Screenshot

[ghost]

I also think that this challenge could do with some UX improvements. To start, I think all of these challenges should be able to be navigated via the arrow keys. The issue with scrolling is annoying also. The images could probably be made smaller.

cc / @FreeCodeCamp/issue-moderators

[QuincyLarson]

@atjonathan @oalhait yes - we plan to significantly reduce the length of these. If we used a fixed height for the images and their text, we could eliminate a lot of the variability in height.

I think the most immediate improvement would be to go to the next challenge with the left and right arrows.

[oalhait]

I'll take on the left/right arrow issue! One question though: where do I find the html/css/js of the specific challenge?

[raisedadead]

Hi @oalhait thanks for helping out on the UX.

The challenges are now on react infrastructure, most of the views/controllers are in the /common/app, challenges are json files that are in the /seed directory.

The views are all JSX, styles are LESS

Do look a the Guidelines for Contributing., happy fixing!

And reach out to the Contributors Chat room. for assistance.

[viditmaniyar]

@oalhait - BTW - The link in your issue description of the issues points to localhost ;)

[oalhait]

@raisedadead thanks for the tips, I'm on it now!
and @IamRudra HAHAHA oops, was viewing on my local instance

[sachinmour]

suggestions needed for -

• what to do when at the end of the challenge.. go to next challenge
• what to do when we want user to open a link before proceeding to next challenge
• what to do for the text which shows numbering of the steps...ie..(4/12)
  @QuincyLarson @atjonathan

[QuincyLarson]

@sachinmour Oh - when I said arrow keys I meant on the keyboard - not adding additional UI elements.

Rather than add additional buttons, I think it would be better to ensure that the next step button and previous step buttons are always in the same place (by constraining the height of images/text) so you could just click them repeatedly.

But we do want to add some hotkeys. The hotkeys are located in main.js

As for your question about what should happen if they encounter a step where they must open a link before proceeding, well, clicking the arrow key simply wouldn't advance them and would instead make the "open link in new tab" button move somehow to draw attention to it and notify the user that they can't advance until they click it.

[sachinmour]

@QuincyLarson got it..

[sachinmour]

@QuincyLarson

[anushreddy]

Is the challenge solved ?

[ktajpuri]

This doesn't work yet?? Does it require some help?

[ghost]

This issue is open as help wanted @ktajpuri, @anush6533

[raisedadead]

We have transitioned to a smaller set of navigation on the beta, I guess we could close this @QuincyLarson ?

[QuincyLarson]

@raisedadead Yes - I don't think it's worth improving at this point. We only use a few of these slide challenges, and they're short - I think the longest one is like 4 slides.