[Certification Projects] Update the instruction to mention that the users need to manually save their code

[huyenltnguyen]

Description

On practice challenge pages, the code is automatically saved to the browser storage when the user clicks the test button. This isn't the case with the certification project pages, the code is not saved unless the user clicks the "Save your Code" button.

We have received multiple reports of users losing their code changes after they closed the tab or navigated away from the page, without pressing the save button.

I think one way to prevent this is to update the instruction text and mention that the user needs to manually save their progress.

Though I'm not sure where the text should be added. Perhaps at the end of the instruction and as a note?

Fulfill the user stories and pass all the tests below to complete this project. Give it your own personal style. Happy Coding!

Notes:
- [Other notes related to the project requirements]
- Your code is not automatically saved. Be sure to click the "Save your Code" button to save your progress.

Affected pages

Certification projects.

Example: https://www.freecodecamp.org/learn/2022/responsive-web-design/build-a-survey-form-project/build-a-survey-form

Additional context

Other UI/UX improvements are discussed in #53000.

[naomi-lgbt]

What if we add a beforeUnload event? https://developer.mozilla.org/en-US/docs/Web/API/Window/beforeunload_event

[huyenltnguyen]

Yup, that works, but we need a little more than that.

The beforeunload event can only handle the case where the user is closing to the tab, but not if the user is navigating away from the page by clicking a link (say, the block or superblock link in the breadcrumb). Link navigation is handled by @reach/router, but the library explicitly states that it doesn't support navigation blocking. I could find a workaround, and it seems to work as intended.

I have the implementation somewhat ready. Though we talked a bit about this change in the team huddle, and Quincy suggested finding other alternatives to prompts. So I think adding a note to the instruction could help a bit (while I'm figuring out what else we can do).

[ojeytonwilliams]

Even if we're not blocking navigation, which we probably shouldn't, can we save on navigation? That combined with saving on beforeunload should prevent learners from losing their work most of the time.

[a2937]

Why don't we use the visibilitychange instead of beforeunload? https://developer.mozilla.org/en-US/docs/Web/API/Document/visibilitychange_event

I mean it's just as likely to trigger and seems more reliable according to what I read.

Edit: This article also says the unload event is being depreciated for Google Chrome. https://developer.chrome.com/docs/web-platform/deprecating-unload