JavaScript Algorithms and DataStructures (beta): console tab is always closed by default

[AndreyDmitriev39r]

Describe the Issue

If the student opened console tab while doing some challenge step
then, after submitting correct solution for the step, and being redirected to next challenge step,
they will end up with the console tab being closed.

Such flow may be considered not the best user experience, especially for users, who would prefer to have the console tab always opened while working with JavaScript code.

Affected Page

https://www.freecodecamp.org/learn/javascript-algorithms-and-data-structures-v8

Steps to Reproduce

1. Go to some challenge step. I guess any would do, but I will drop a link to one of them. https://www.freecodecamp.org/learn/javascript-algorithms-and-data-structures-v8/learn-basic-string-and-array-methods-by-building-a-music-player/step-35
2. Open the console.
3. Complete the challenge. The correct solution for the one mentioned above is to add the line pauseButton.addEventListener("click", pauseSong);
4. Hit the Submit and go to next challenge button.
5. After being redirected to the next step's page, you should see that the console is closed again.

Expected behavior

I see two possible options for the expected behaviour:

To make console be opened always by default

My personal opinion is that it would be more comfortable for working with JS, rather than have console closed by default. This is subjective though. It may be not the best experience for those who would prefer to use console only from time to time while going through lessons.
As an example of such experience, the old JS course or React lesson from Front End Development libraries course may be used.
https://www.freecodecamp.org/learn/javascript-algorithms-and-data-structures/
https://www.freecodecamp.org/learn/front-end-development-libraries/#react

To make console be opened or closed based on the console state from previous challenge

If I would have the console opened while doing this step https://www.freecodecamp.org/learn/javascript-algorithms-and-data-structures-v8/learn-basic-string-and-array-methods-by-building-a-music-player/step-35,
after completing challenge and going for next one (https://www.freecodecamp.org/learn/javascript-algorithms-and-data-structures-v8/learn-basic-string-and-array-methods-by-building-a-music-player/step-36),
console should be also opened.

Screenshots

No response

System

• Device: Laptop
• OS: Windows 10
• Browser: Chrome
• Version: [e.g. 22]

Additional context

No response

[Piyush-onGIT]

I also faced the same issue, so I would like to work on this.

[huyenltnguyen]

I personally would support this change. There is an issue regarding syntax error being hidden as the console is closed by default (#52749), so having the console open by default would help address that.

I think the expected behavior could be:

• The console is open by default
• When the user clicks the console toggle, the console's open state is saved to browser local storage, similar to how we are saving editor content
• If the console is closed and there is a syntax error, automatically open the console. The console is closed when the user goes to the next challenge (they shouldn't need to close it themselves since they didn't open it)

A small note here is that, if we decide to implement this change, the code changes should include sufficient tests to lock in the behavior.

I'll wait for others to chime in before opening this up for contribution.

[ShaunSHamilton]

I see two PRs here:

1. Default the console to open for JS curriculum
2. Save controls (tabs) state to browser local storage

To close this issue, I suggest we just go with 1. The second will require more discussion about priority.

---

@scissorsneedfoodtoo Do you have an opinion about defaulting the console to be open for the new JS stuff?

[scissorsneedfoodtoo]

Thanks for the mention, @ShaunSHamilton.

A contributor who reviewed very early versions of the project-based JS curriculum suggested that we keep the console open by default for all the new JS projects, and I agree. Many include steps that involve logging things to the console, and learners can any syntax errors more easily.

Like you mentioned, this can be handled with at least two PRs. The first can keep the console open by default for the JS curriculum, and the second can deal with storing learner preferences for the console state to local storage. I do like the behavior suggested by @huyenltnguyen, too, though it will require more discussion.

[naomi-lgbt]

Rather than defaulting to the console being open, which is not something we can do on mobile, I think the instructions should be updated to explicitly mention how to check the console.