Project-Based Curriculum Features

Migrating this information from a spreadsheet to an issue, to facilitate discussion and keep everything in one place. This is a mono-issue for the client-side features related to the new project based curriculum.

Features 🏆

SEO

Do we want to add canonical links from the legacy superblocks to their replacements? Specifically, if we keep the legacy curriculum on https://www.freecodecamp.org/learn/responsive-web-design/ should that point to the new version? Even if we use a new path for the legacy curriculum, it might be best to let search engines know that they should pay more attention to the new curriculum.

Notes Tab (MVP) (https://github.com/freeCodeCamp/freeCodeCamp/pull/44247) @moT01

We need to add a notes tab to the editor (on the preview side) to display additional information, complete test list, and solution section.

The solution for the current step should only include code between the ERMs in the next step (unless last step of course). This will make the Solution section on the Notes tab much smaller and focused. Take diff of two seed codes as alternative

Dynamic Hint Text (MVP) (https://github.com/freeCodeCamp/freeCodeCamp/pull/44279) @ojeytonwilliams

Need the ability to add dynamic content in a test’s text value. This would allow us to give better hints as to what is wrong with a user’s code. Instead of just telling them it is wrong and making some suggestion of what to look for, we could say “Expected to see value X but seeing Y instead”. It might work like template literals do, where we could write ${someVariableOrExpression} to display a value of an expression or a variable created in the testString, code in the Before/After Test sections, or code in the editor (for JavaScript projects)

We can, in principle, go back and add these to responsive web design, but it’s unlikely to be very valuable. Given how everything you do is already visible in the preview.

Post-MVP

Automatically show ‘Expected x, but got y’ output in the JavaScript console? This would only really make sense if the Notes tab included the testStrings, as x and y likely don’t mean much out of context.

Automatic Removal of Comments

Need to remove all applicable code comments from the global code variable (when running tests) by default except for steps where we do not want. This functionality is needed not only in the new project-based curriculum, but also the current curriculum. The purpose of removing all comments is to prevent any tests looking for specific text not to be in the editor, to be ignored. There are only a few times when we would want to not remove the comments. If we were wanting to check that the user was using a comment as part of a step, then we would need the tests to not remove comments.

This could be achieved by using a helper function (currently a WIP) that performs this task for all steps unless the step’s frontmatter has a key named keepComments set to true.

Already implemented for JS challenges in the existing curriculum, but we want to do this for script.js, so that any comments a user adds for their own edification don’t break our tests.

Final Projects (MVP) @moT01

For the final projects It needs to be possible to store the code from all (three) editors in the db (directly attached to the user record? Probably not, since that gets requested all the time). For the practice projects local storage should be fine. Nice to have: multiple versions of the code, so the user can revert if needed.

Could we make the legacy editor available as ‘accessibility mode’? That way everything can be reached via keyboard navigation and there would be no need to have a mismatch between what’s displayed and what’s read aloud (something that could potentially be confusing for partially sighted users)

Will need a way to render the camper’s completed project without all of our editor fluff - for the certification view.

Cert Project User Stories

Tentative plan: display a different version of the editor where there is no editable region and the notes tab has the instructions, tests + feedback on them (pass/fail) and the run the tests button

Convert Cert Projects

Will also need to actually convert the cert projects

Legacy Editor (MVP) (https://github.com/freeCodeCamp/freeCodeCamp/pull/44291) @ojeytonwilliams

Since the current challenges have a lot of text, we can’t reasonably insert that into the editor. As such we should maintain a ‘legacy’ editor that can display those challenges. In practice there should be a redux variable ‘legacy’ and single Editor component that optionally toggles on/off the description inside the editor based on the ‘legacy’ value and the Show component should show or hide the description based on ‘legacy’ as well.

Currently if you turn on SHOW_UPCOMING_CHANGES the legacy editor still works, but it gets a (useless) index.html tab.

Update: with https://github.com/freeCodeCamp/freeCodeCamp/pull/44291, the tabs are hidden on legacy challenges. I’m not sure we need/want this to be toggleable.

Multi-file Editor Accessibility (MVP @moT01 - https://github.com/freeCodeCamp/freeCodeCamp/pull/44425)

We know that the current Show classic component is reasonably accessible (we have people using it via screen readers). The updated Show component with the multi file editor should behave the same way from a screen-reader’s perspective. One worry is the buttons inside the editor, they are not going to be part of the keyboard navigation. We can make the functionality available by hotkeys, but not via tab navigation.

When we’re checking a11y compliance we see if https://github.com/freeCodeCamp/freeCodeCamp/issues/39135 is a problem for either editor.

More accessibility

The preview isn’t screen reader accessible, the one next to the editor or the one in the modal

Practice Project Preview (https://github.com/freeCodeCamp/freeCodeCamp/pull/43967)

It could be useful/motivational to show the user what they’re going to build at the very start. For the practice projects at least.

Showing the user the finished code before they start is probably discouraging, so we should just preview the result. The question is where to put it and how to integrate seamlessly with the rest of the flow. Ideas: small preview on superblock, first challenge is a special preview only challenge.

Noticeable editor (#44519 @ahmadabdolsaheb )

[edited by Ahmad] The editor should be the focal point of the page so new users can start interacting with the code immediately. In order to achieve that we either need to make the cursor/editable region/jaws more visible by changing their color pallet or adding an initial animation such as flashing the editable region for the first time users to direct their attention.

Highlighting

We could re-adjust the contrast around the editable region and play around with the borders to see if it would look better, but that should be straight forward. https://github.com/freeCodeCamp/freeCodeCamp/pull/44123#issuecomment-962419550

After preview

Any animation should be delayed until the preview modal leaves the page.

Super Block page layout (MVP - @ojeytonwilliams)

We will need to figure out and adjust what the superblock pages look like. e.g. Do we want the legacy lessons on the same page, elsewhere? Maybe a tab to switch between the old and new. I’m guessing we will want the cert projects mixed in the middle of the lessons as we have been planning. So we will probably need a slight adjustment in how the cert projects are displayed on the superblock page.

Alternatively:

Should they get their own super block like Coding Interview Prep?

What’s the order? Coding Interview Prep -> Legacy or vice versa? Or, could they be part of the new RWD block?

Write intros for all the blocks (https://github.com/freeCodeCamp/freeCodeCamp/pull/44183 - @nhcarrigan)

The practice projects mostly all need some intro text

Bugs 🕷️

JS Console adds vertical scroll bar and could be a little better

This isn’t that big of a deal - not sure if it’s really a bug or just something that could use some improvements - I don’t think it’s an MVP issue

CSS Filename tab doesn’t align with the file you link to @ojeytonwilliams (https://github.com/freeCodeCamp/freeCodeCamp/pull/44356)

The CSS filename tab is index.css - styles only get applied when the <link> element points to styles.css Not sure if this is a problem everywhere, Ahmad’s screen shot below has the correct filename tab. The other few I looked at just now use index.css

Instructions are off screen when at top of seed code and there’s enough seed that is scrolls

Initial load has :root at the top, then I have to scroll up to instructions

Progress lost when closing/opening files

Go to a step Enter correct code Run the tests and see green check mark Close/hide the editor tab/file with the instructions and code Open the tab back up Code is gone, have to start over

Task list for initial release

-Finish Markers project -Merge last few practice projects -Write intros for each practice project -Nick’s last PR will order the blocks, create UI (+ other for legacy) -Fix index.css filename tab -Mix cert projects into middle of block order -Get in existing PR’s related to editor (not necessarily MVP, but might as well) -Add solution to final step in each project

[moT01]

I vote to remove the motivational text in the hints.

Instead of

X Almost there, here's a hint:
You should have a `<head>` element

just do

X You should have a `<head>` element

Not sure if that’s exactly how it’s displayed, but you get the idea.

[ahmadabdolsaheb]

An initial flash should be sufficient to grab the user’s attention to the description.

@QuincyLarson, we are developing the challenge note functionality. I just wanted to double check to see if the spec are still the same as the ones demonstrated in the mock above.

The notes section includes the followings: Notes: -Useful Syntax (general notes): —Syntax(if applicable) —Syntax example(if applicable) -Tests Used(list of tests): —Test description —Test -Solution(always collapsed): —solution