Add a new step 1 to better explain what the pyramid generator is about

[hbar1st]

Describe the Issue

For absolute coding newbies, a 'pyramid generator' will not conjure up anything meaningful and may leave users in the dark about where this project is headed (unless they have the foresight to click on the last step to see the final results), therefore it would be great to demo this in the very first step so everyone knows what the problem/goal is before starting this project.

First discussed on the forum here:
https://forum.freecodecamp.org/t/way-of-learning/689345/4

Affected Page

https://www.freecodecamp.org/learn/javascript-algorithms-and-data-structures-v8/learn-introductory-javascript-by-building-a-pyramid-generator/step-1

Your code

N/A

Expected behavior

t.b.d.

Screenshots

No response

System

N/A

Additional context

No response

[jdwilkin4]

We could add a drawing at the top of the JS file to show them what they will build.
Then when they start building the pyramid, we could add the actual explanation of what they are going to build.

console.log(`
Let's build a pyramid using JavaScript basics:
    #
   ###
  #####
 #######
#########

`)

Adding more to the explanation in step 1 is going to make it to long.
Unfortunately, most campers don't read directions when the directions are long. They skim through things and miss important details.
So it is best to keep the text on the minimal side when possible.
So it would be better to have the explanation of what the pyramid is going to be about when they actually start building it. I don't know which step that is but is probably somewhere in the 20's

[hbar1st]

Is there a way to show a pyramid similar to how the html/css projects preview their final results at the start of the project?

[jdwilkin4]

Is there a way to show a pyramid similar to how the html/css projects preview their final results at the start of the project?

Short answer, yes.
All of the files are markdown files.
So it would be mean adding HTML and CSS markers to the seed code here

https://github.com/freeCodeCamp/freeCodeCamp/blob/main/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-introductory-javascript-by-building-a-pyramid-generator/660ee6e3a242da6bd579de69.md?plain=1

However, this does create a new issue where the console is closed by default for projects that have HTML, CSS and JavaScript.
This issue has not been resolved as of today

#52802

So I am going to tag @ojeytonwilliams because he knows more about the editor then I do and if something like having the console open for HTML, CSS and JS projects is possible.

If it turns out, this is possible then I am for this change.

If it turns out this is not possible, then I am 100% against this change.
because even when we say in other projects, "open the console" a lot, campers don't always follow those directions.

We have seen a huge increase on the forum in campers checking the console more because it is always open and they can see their results immediately on the right hand side.
They are asking better questions about the output and learning about what their code is doing.
By keeping it closed by default, then I fear they will regress to checking it sometimes and go back to guessing what their code is doing instead of seeing it for themselves.

[hbar1st]

Another option is to use Jessica's suggestion but to have that intro (to what a pyramid gen is) as the first step ahead of the current "step 1". Unless a step absolutely must have the learner change something in order to allow them to move on?

[jdwilkin4]

Unless a step absolutely must have the learner change something in order to allow them to move on?

It looks like it works locally.
So perhaps it would be the same in production. Someone else from the team would need to confirm that though since I am not 100% sure.

The hints section would just be blank and automated test suite still passes

# --hints--

Test 1

```js

```

[ojeytonwilliams]

I like the idea of adding a 'preview' step, mostly because it means we don't have to create a special case to handle the one project that wants console output as a preview.

So perhaps it would be the same in production. Someone else from the team would need to confirm that though since I am not 100% sure.

It should be fine in production. The only issue I can think of is that it might not pass in CI, since the tests are expected to fail on the seed content.

I'll have a quick play with this and see if that's the case and, if so, what needs to be done.

[jdwilkin4]

because it means we don't have to create a special case to handle the one project that wants console output as a preview.

Technically we have two projects that fall in this category

The pyramid project and this gradebook app project
https://www.freecodecamp.org/learn/javascript-algorithms-and-data-structures-v8/review-js-fundamentals-by-building-a-gradebook-app/step-1

[ojeytonwilliams]

Ah, good point, I'd missed that one.

I'm not sure it makes sense to create a preview, though, since it would just be some console output without any context. The 'preview step' is nicer, imo, since it can include that context.

Anyways, I've checked the tests and CI should be fine. The kind of challenge you wrote, @jdwilkin4, passes all the tests. Also, if you want, you can skip the hints section entirely.

[jdwilkin4]

ok cool.
We will go ahead with the preview step outlined here

#54801 (comment)

I will go ahead and open this up for help wanted contribution