Certification Onboarding Block for React

Edit EXAMS, lowest first. Each has an id, a name, what it covers, its hours, questions, minutes, a pass mark and a practice question with its answers, the id of the one that is correct and a why sentence. The path is every exam up to the chosen one, and its hours are the sum; keep three so the stair keeps its shape.

The chosen step and every step below it, by a small pure function: "Advanced path: 2 exams, about 24 hours. Fundamentals comes first." The steps below get a tint and "Required first"; the exams above are dimmed in the list and marked "not in this path" for a screen reader.

No. Picking an answer says at once whether it is right and why, in the panel and in the status line, and picking another answer says it again. Nothing is counted, saved or sent, and changing the certificate clears the answer.

No. It is fictional course content and says so under the path: the certificates are course badges, not an accreditation or a professional credential. Keep a line like that, or replace it with your own true statement, when you use it.

Continue stays in the tab order and looks quiet. Pressing it says "Pick a certificate to continue." under the stair and puts focus on the first step. Both tabs hold one height, so switching between them moves nothing.

Everything: Continue says it saved in this demo and enrols nobody. In your app send the chosen exam id to your server where submit says so, and enrol the learner in the exams on its path.