Add progress indicators to maps

[moT01]

Here's some mocks:

[bbsmooth]

Hey @moT01 I'm sure you probably discussed this in meetings and such, but could you give a brief overview of what the purpose of this feature is for? It would help in determining the accessibility issues that need to be considered.

[moT01]

Mainly, to clarify the order of how to go through the curriculum. It also splits the superblocks/buttons up into sections, which gives some more context to the buttons. It also shows a small overview of your progress - e.g. if you earn a cert, the number turns into a cert icon (tentative plan anyway).

[ahmaxed]

How does this feature affects https://github.com/freeCodeCamp/freeCodeCamp/issues/41403? If they overlap, we could use superblock section of the proposed pr to display user progress.

[moT01]

Here's some more details of what I think we want here. We want the superblock buttons arranged into four (five with upcoming) groups:



Stage 1: Front End Development

1 Responsive Web Design Certification
2 Javascript Algorithms and Data Structures Certification
3 Front End Development Libraries Certification
4 Data Visualization Certification



Stage 2: Back End Development


5 Relational Database Certification
6 Back End Development and APIs Certification
7 Quality Assurance Certification
8 Information Security Certification



Stage 3: Python & AI


9 Scientific Computing with Python Certification
10 Data Analysis with Python Certification
11 Machine Learning with Python Certification
12 College Algebra with Python Certification

Stage 4: Extra Learning
- Coding Interview Prep
- Project Euler
- Legacy Responsive Web Design

Upcoming Curriculum
- Javascript Algorithms and Data Structures (Beta) Certification
- The Odin Project
- Example Certification

Note that the Upcoming Curriculum section is hidden in production.

The first three stages above should have icons next to them, similar to this: 
 
 
 


If they have the certification, they get the icon with the ribbons. If not, they get the icon without. 
The last two groups of buttons do not need any icons.
 The buttons can then be the full width. There is potentially something on this issue and its associated PR we can use for that icon. 


 


Between the numbered icons should be the dashed arrows, as in the image.

The icons within the buttons should stay on the left.

---

Some questions: Do we want different icons next to the last two groups, maybe continue with the numbers or just plain circles, so the buttons are the same width? What do we want for the heading of stage 4?

Does this all sound good @ahmadabdolsaheb? Is there anything else you can add?

[bbsmooth]

I kind of envision the semantics as follows:

• Each stage heading would be an h2 and would need an id attribute
• The list of courses underneath each heading would be an ol or ul (depending if they are numbered or not)
• Each list would be named using aria-labelledby pointing to the id of its heading
• We would need to add the appropriate sr-only text so that screen reader users hear the number, the status, and the name of the course. For example, "Course 1, Responsive Web Design Certification, Completed", or "Course 2, Javascript Algorithms and Data Structures Certification, not completed".

Since these numbers are just the suggested order for beginners and do not have to be followed, I would recommend we add a brief paragraph explaining that above the first stage heading.

[moT01]

Thanks for the accessibility guidance on this @bbsmooth. I would vote not to add that extra paragraph - "people don't read" is what we often say, so we want to keep things minimal when we can.

[bbsmooth]

Well, just to be clear, while I said paragraph, I didn't actually mean a ton of text. Perhaps two simple sentences. One explaining that this is the suggested path for beginners but you don't have to follow this order. A second explaining that you can get a certification for a course even if you haven't completed the certification for the previous courses.

I understand the notion that "people don't read" and I tend to agree, but I also worry that it can be taken to the extreme. And I think adding numbers/arrows to these courses changes the perception of them quite a bit. It seems much more authoritative and restrictive and thus I am anticipating that we will get more questions in the forum about whether they can skip courses and if that will affect their ability to get certifications.

Another option might be to get rid of the stage numbers. Maybe refer to them as tracks instead? "Front End Development Track", "Back End Development Track". Also, maybe start the numbering at 1 for each track. I think this would make it clearer that these are sort of self-contained units that don't necessarily need to be done in a specific order.

But I suppose it depends on what you are really trying to communicate here. If the primary message is "Hey beginners, this is the best way to complete your journey in FCC" then the numbering as you have proposed might be the best option. I just think we need to make it clear that it isn't required to follow this order if you are only interested in learning python or you already know the basics of HTML/CSS.

[moT01]

I will bring up the paragraph at the next meeting. I don't personally like it on the landing page - maybe the /learn page. But I think you might be onto something. If we need a paragraph to explain what the things mean, maybe we aren't communicating it good enough through the UI. We are trying to communicate the suggested order.

[ahmaxed]

@bbsmooth, I understand your concern. When users signup, they are shown a few paragraphs. One of them says the followings: "If you are new to programming, we recommend you start at the beginning and earn these certifications in order." I am making that whole section a bit more concise, so we might be able to squeeze a sentence there to make things clearer.

@moT01, Thanks for putting requirements together. I don't think we should have a stage 4. Might also be a good idea to give the Legacy Responsive Web Design the ribbon since it is/was a certification.

[ahmaxed]

@moT01, I was wondering if there are any updates for the requirements ?

[moT01]

No @ahmaxed. We don't necessarily have every detail figured out, but I think we're close enough that we can open this up to contributors and refine things on the PR.

[moT01]

I could mention that I made a mock of this some time back, you can see the code here.

It looks like this

Note that this is not how we want it to look - we want it to look like we discussed above. But some of the code may be able to be reused - not sure. It may be better to just start from scratch.

[CallmeHongmaybe]

So which design are we going to move on with ? IMHO the very first design looks nicest.

[moT01]

We decided on the one in this comment @CallmeHongmaybe. I think we can change it in the future if we want. The important thing we want to try and communicate with this is the suggested order of the curriculum. The numbers should do that, regardless of what design we use.

[CallmeHongmaybe]

Thanks for replying back. I was wondering how you made the mocks for the suggested design, just to be sure not to do any duplicate work and waste anyone's time :)

If the mock is produced from shuffling the same code in the mock you shared, can you let me know what has not been done ?

[moT01]

The mock for the suggested design is an image created by @ahmaxed - so the code for that isn't created yet. I don't see a whole lot that can be reused from the code I shared, maybe some of the map logic/rendering and possibly some of the CSS.

[CallmeHongmaybe]

Thanks. I'll see where I can add for the mock.

[CallmeHongmaybe]

So here's the rough draft built with here. Let me know what should be changed in the design, and how do we retrieve data for the users' number of fully completed lessons and the users' current certification ?

[ahmaxed]

Thanks for working on this feature, @CallmeHongmaybe. Here is the design we are going with: https://github.com/freeCodeCamp/freeCodeCamp/issues/50412#issuecomment-1585086022 Please use the same font state title, decorate the completion state accordingly and use a dashed line for the arrows.

The state of the certifications could be pulled from the userSelector from redux like this: https://github.com/freeCodeCamp/freeCodeCamp/blob/120ad721a3f96431adc1c3f1ba0718a667b82bc0/client/src/client-only-routes/show-settings.tsx#L24

[CallmeHongmaybe]

@ahmaxed if you don't mind can you provide me the svg or the CSS code of the ribbon ?

[CallmeHongmaybe]

Also, is it true that only signed-in users can see the ribbons ?

[ahmaxed]

Yes, only signed in users with completed certifications see the ribbons.

[ahmaxed]

Here is the ribbon SVG:

<svg xmlns="http://www.w3.org/2000/svg" width="45" height="50" viewBox="0 0 45 50" fill="none">
<path d="M25 35.3418L35.4851 28L44.5957 41.0113L36.2658 39.7151L34.1106 48.353L25 35.3418Z" fill="black"/>
<path d="M9.11059 29L19.5957 36.3418L10.4851 49.353L8.85418 41.0821L-4.67677e-07 42.0113L9.11059 29Z" fill="black"/>
<circle cx="21.9999" cy="21" r="20" stroke="black" stroke-width="2"/>
<circle cx="21.9999" cy="21" r="17.5" fill="black" stroke="white" stroke-width="3"/>
<path d="M23.9709 13.4545V28H22.2095V15.3011H22.1243L18.5732 17.6591V15.8693L22.2095 13.4545H23.9709Z" fill="white"/>
</svg>

The last path is the number. Feel free to remove or replace it a dynamic number.

[CallmeHongmaybe]

Thank you. I've tried the steps below to seed the database with certified user but when I opened the localhost, the page shows nothing and when I click the menu button the Profile <li> isn't even there. pnpm run create:config pnpm run seed:certified-user pnpm run develop

[ahmaxed]

You probably need to sign in.

If you cannot find what you are looking for in the documentation, feel free to ask for help in:

The Contributors category of our community forum. The #Contributors channel on our chat server.

[CallmeHongmaybe]

Will have this discussed on the chat server.

[jeremylt]

It was in the shuffle, but I liked @bbsmooth suggestion that we call them "Track 1" etc instead of "Stage 1", especially since many of these are fine to do in a different order.

Also, one of these days we should really revisit the "Scientific Computing" name of that python certificate, because its contents absolutely are not "Scientific Computing".

[CallmeHongmaybe]

Okay I'll change the titles from Stage to Track. And is it appropriate to rename "Scientific Computing" to "General Python Programming" ?

[ahmaxed]

Great naming suggestions. There might already be a renaming in the works for the Scientific Computing. Since the renaming is a bit involved for a certification, let's make a separate issue to track the feedback the progress on that.

We can move forward with "Stage" for now until we hear back from @QuincyLarson about using "Track".

[Amit-Morade]

I would like to work on this