[LEARN] features / UI updates V3.0

[Sembauke]

Design link- https://www.figma.com/file/4XPlUi8QGWsmyV7hA8r86m/learn-mobile

PhoneIDE

• Make it possible to highlight a certain region in the editor with displaying a colored bar. This bar should be colorable depending on the status of the tests and should imply which region is editable. #570
• Make highlighting more accessible by preventing line-breaking (Which would break the highlighting in the entire file) this will make everything more visible.
• An option to select a certain type of language in the code editor which will enable highlighting for that programming language.
• Make it possible to highlight a certain piece of code with giving it a custom background color. #569

Learn

Required before release

• Gatekeep users if the app is not in latest version

Updated tasks

• Update code for forum question creation once Template Post when clicking "Ask for Help" in Responsive Web Development freeCodeCamp#47452 is closed

Challenge

Header

• It should be possible to view a dropdown which shows all openable files in the current challenge, if there is not more than one file available there should be text instead displaying the file name.
• It should have a preview which displays the current project

Instructions Pane - #481

• When starting a new challenge, a pop-up should appear with the current instructions.
• The instructions should close if the user presses a cross icon in the upper-right corner.
• Under the title "Instructions" there should be a progress indicator which displays the number of steps completed and the total number of steps e.g., Step 45 out of 100.

Hint Pane

• When a user fails to pass the tests, a pop-up should appear which shows a hint, and indicates what the user needs to do to pass the tests
• The hint should close if the user presses a cross icon in the upper-right corner.
• There should be a button the user can use to reset the challenge
• There should be a button that the user can click to take them to the forum to get external help
• There should be a button to preview the project the user is developing.
• The instructions and hints should cover the same amount of the screen regardless of their content. If the content is larger than the element, it should be scrollable.

Pass Pane

• The pass pane should show up a challenge is completed successfully
• Inside the past pane there should be a motivational quote
• The pass pane should have a progress bar that displays the amount completed percent in the current project
• The progress bar should have a text-indicator which displays the number of percent completed
• [learn] the pass pane should have a share button which implements the ability to make Twitter cards #688

Lower function bar

• There should be a functional bar that includes multiple buttons to execute actions
• There should be a button that hides and opens the instruction pane, when the pane is active the color of the button should change to indicate that the button is active.
• There should be a button to test the challenges.
• The test button should turn green when the challenge passes and indicates that the user can move to the next challenge.
• There should be a button that hides the header which includes the preview and editor dropdown when the user is editing.
• When the user is on the preview pane a button should appear that gives the user the ability to move back to the editor.

Superblock

• When a superblock is not available yet there should be a snack-bar which indicates it.

Block pages

• The user should have the ability to see their progress on the new RWD which has a grid-based challenge layout instead of a list layout (The list layout already has progress indication)
• The block description should not be visible when the block is closed.

This includes minimal viable product and extra's, this may be discussed publicly. Please if I missed something you would like to see add a comment below.

---

Problems and features found/needed in development

This space will be updated with bugs or UI fixes which we come across while making this component

Features

• When instructions/hint/success panel is open, text and line numbers are not aligned
• Sign in button on pass panel when the user is not signed in
• improve styling for the preview button so that it looks like a toggle button

Bugs and Flutter errors

• WebView.destroy() called while WebView is still attached to window.
  • This appears when closing a challenge
  • Toggling back to editor from preview
• For a challenge with single file, clicking the editor tab shouldn't refresh the challenge view nor should the user be asked to choose a file. Basically remove the dropdown for single file challenges.

[ahmaxed]

cc @ahmadabdolsaheb :)

[ahmaxed]

Thanks for putting this detailed list together. Here are a few points worth mentioning:

• On the success, hint, and instructions states, the editor should shrink and only show one or two lines above and below the active line on the editor. That way the user can select different lines, open the instructions, or hint and compare their answer.
• It might be helpful to think of success, hint, and instructions not as overlays or pop ops since they are placed on the top of the editor rather than covering it (similar to flash messages).
• Initially a line in the editable region is selected.
• The new editor is ideal for the new responsive web design. It would need some changes to be usable for the older and legacy certificates.
• The help and reset button both should show a pop up to confirm the user's intention
• The lower function bar can be shorter on editing mode to open up more space for editing.
• The editor button on the lower function bar of the preview should take the user back to the editor on editing mode where the previous selected line is selected. That button should be displayed when the user is on non editor tab (preview, console, etc). That should save the user a couple of taps.

[Nirajn2311]

Under the title "Instructions" there should be a progress indicator which displays the number of steps completed and the total number of steps e.g., Step 45 out of 100.

Is this just for the new challenges?

[ahmaxed]

Yes for now, until we redesign the editor for the older curriculum.

[Sembauke]

I think it is fine to do on the old and the new challenges as it's basically the same.

[ahmaxed]

I agree, I think the design is mainly usable for older challenges but there are a few points to keep in mind for the new RWD.

1. Editable regions notify the editor where to focus.
2. The challenges are shorter
3. I think the tests are written in order. That is why showing the first failing test would make sense.

If it is a high priority, I will mock the older RWD.

[Nirajn2311]

I wouldn't say it's high priority as finishing off the current design would take some time but it would be great to have that also.

[ahmaxed]

awesome, let's get this in and see the feedback. We could redesign the old RWD accordingly.

[Nirajn2311]

It should be possible to view a dropdown which shows all openable files in the current challenge, if there is not more than one file available there should be text instead displaying the file name.

@ahmadabdolsaheb In the design link, the dropdown text is just Editors. If there is multiple files then the text should be the currently shown file right? Also what about the case of one file, will the text be "Editors" or the file?

[ahmaxed]

So that is an accessibility consideration. Not sure if it applies to mobile. Feel free to look up best practices.
If there is one file, showing the name of the file is fine.

[Nirajn2311]

Pass Pane - The pane should have a share button which implements the ability to make Twitter cards

What exactly should be in the twitter card?

[ahmaxed]

Good question. This feature needs more research to see what the convention is. We can initially only show the button when the block is completed and share a link to the block with a meaningful predesigned OG image.

Ultimately we would need to have a dynamic twitter cards similar to freeCodeCamp/freeCodeCamp#47085

Feel free to post pond this feature until we finalize the functionality on the learn repo.

[ahmaxed]

For the last action item:

• improve styling for the preview button so that it looks like a toggle button.
  I think we can keep them as tabs( no toggling)
  On the other hand, we can add a contextual button to the code editing view that switches between editing and preview

[ahmaxed]

[ahmaxed]

Although I am not sure why we would need a toggle at the first place.

1. if users are editing and want to go to preview, they could click on the 'preview'
2. if they want to go from the 'preview tab' to editing, they could tap on the button the lower navigation

[ahmaxed]

How about grouping the console and the preview under the eye icon since both of those panes are only observable and not editable. That way we could remove the dropdown from the editors tabs and just have them side by side.

That way the lower buttons would be views, but not toggles. Here is a mock, thoughts:

[Sembauke]

This looks solid Ahmad. If wee keep the amount of files under four it should be good.

[ahmaxed]

Here is the next iteration

[ahmaxed]

I worked a little more on the mocks and this one seems to look alright. The border around the baby editor are still the same color as the background of the editor.