Template Post when clicking "Ask for Help" in Responsive Web Development

[alfonsusac]

Describe the Issue

I feel like the base template for asking help in the Responsive Web Development Certification is a bit unintuitive.

First let me point out a couple of points:

1. The code block of HTML starts with /* file: index.html */ as opposed to the HTML comments of <!-- file: index.html -->. This will makes it harder to copy paste people's code and find the problem as some may overlook this comment which can cause the checker to fail (As seen in this post https://forum.freecodecamp.org/t/learn-css-colors-by-building-a-set-of-colored-markers-step-7/551034).
2. Some text that I assume function as a heading uses inconsistent formatting. Such as how **Tell us What's happening:** is different from **Your code so far** (there is a tab which can look like a code block after posting it.

Template:

**Tell us what's happening:**
Describe your issue in detail here.


      **Your code so far**
      
```html
/* file: index.html */

```

```css
/* file: styles.css */

```




      **Your browser information:**

User Agent is: <code>Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/105.0.0.0 Safari/537.36</code>

**Challenge:**  Learn More About CSS Pseudo Selectors By Building A Balance Sheet - Step 22

**Link to the challenge:**
https://www.freecodecamp.org/learn/2022/responsive-web-design/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/step-22

What I propose:

### Tell us what's happening:
Describe your issue in detail here.


### Your code so far
```html
<!-- file: index.html -->

```

```css
/* file: styles.css */

```




### Your browser information:

User Agent is: <code>Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/105.0.0.0 Safari/537.36</code>

### Challenge:
Learn More About CSS Pseudo Selectors By Building A Balance Sheet - Step 22

### Link to the challenge:
https://www.freecodecamp.org/learn/2022/responsive-web-design/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/step-22

Affected Page

https://forum.freecodecamp.org/c/html-css/423

Steps to Reproduce

1. Go to 'Any step in Responsive Web Development'
2. Check the code several times until the "Ask for Help" appears
3. Click on 'Create a help post in the forum'
4. Minor Inconvenience

Expected behavior

It should be intuitive and consistent such that the user won't be confused to how to format the page. At least that's what I'm hoping

Screenshots

No response

System

• Device: [e.g. iPhone 6, Laptop]
• OS: [e.g. iOS 14, Windows 10, Ubuntu 20.04]
• Browser: [e.g. Chrome, Safari]
• Version: [e.g. 22]

Additional context

No response

[ShaunSHamilton]

Some text that I assume function as a heading uses inconsistent formatting. Such as how Tell us What's happening: is different from Your code so far (there is a tab which can look like a code block after posting it.

We have tried fixing this multiple times:

freeCodeCamp/client/src/templates/Challenges/redux/create-question-epic.js

Lines 63 to 76 in 921a8fd

	let textMessage = dedent(`${i18next.t(
	'forum-help.whats-happening'
	)}\n${i18next.t('forum-help.describe')}\n\n
	${
	projectFormValues.length
	? `${i18next.t('forum-help.camper-project')}\n`
	: i18next.t('forum-help.camper-code')
	}
	${
	projectFormValues
	?.map(([key, val]) => `${key}: ${transformEditorLink(val)}\n`)
	?.join('') || filesToMarkdown(challengeFiles)
	}\n\n
	${endingText}`);

It is caused by the dedent function, and I have never found a reliable way around it.

[ilenia-magoni]

<!-- file: index.html -->

This can probably be obteined changing here

freeCodeCamp/client/src/templates/Challenges/redux/create-question-epic.js

Lines 17 to 29 in 921a8fd

	function filesToMarkdown(challengeFiles = {}) {
	const moreThanOneFile = challengeFiles?.length > 1;
	return challengeFiles.reduce((fileString, challengeFile) => {
	if (!challengeFile) {
	return fileString;
	}
	const fileName = moreThanOneFile
	? `/* file: ${challengeFile.name}.${challengeFile.ext} */\n`
	: '';
	const fileType = challengeFile.ext;
	return `${fileString}\`\`\`${fileType}\n${fileName}${challengeFile.contents}\n\`\`\`\n\n`;
	}, '\n');
	}

Changing the fileName definition on lines 23-25 with a different behaviour if fileType === 'html'.

At this point it shouldn't be a ternary anymore, nested ternaries are pretty difficult to read.

Something like

let fileName;
if (!moreThanOneFile) {
   fileName = "";
} else if (fileType === 'html') {
   fileName =  `<!-- file: ${challengeFile.name}.${challengeFile.ext} -->\n`;
} else {
   fileName =  `/* file: ${challengeFile.name}.${challengeFile.ext} */\n`;
}

maybe there are better solutions 🤷

[bbsmooth]

Just a thought. Do we need to allow the user to even edit their "code so far"? A lot of times they will delete it for some reason and then we just end up asking them to put it back in. Maybe don't give them the chance in the first place? Then the only thing we would be asking them for is a description of their problem. And a lot of times they just skip over this completely and we just end up asking them to tell us what their problem is. So we could do a check to make sure they at least added some original text for the description when they submit.

[ShaunSHamilton]

@bbsmooth Currently, without writing a Discourse plugin, we cannot do any validation on the submissions.

[naomi-lgbt]

without writing a Discourse plugin

From what I have read, we can't install more plugins on a managed instance anyway.

[moT01]

The above PR fixed the comments in the code snippets. Looks like we just need to update the template to use headings.

Here's what the template currently look like:

Here's what @alfonsusac's suggestion would look like:

I would maybe change them to level 2 headings and add a semi-colon after "Your code so far":

I am in favor of this change. I like the last suggestion there, but @alfonsusac's works for me. What do you all think?

[ShaunSHamilton]

I am happy with changing them to level 2 headings. Personally, they look a bit big, but otherwise it makes sense.

However, this does not solve the dedent issue:

[alfonsusac]

I prefer them at level 3 headings. When I open a person's post asking for help in HTML and and see the template I just want to look at the content as soon as possible lol. This will make it so that the headings does not take much attention but still separated with other content.

Man, wish I know how to use redux, I've just barely started learning full stack noode.js and I wish I know how to try to look at the dedent issue

Additionally I think its a marginally better to combine the Challenge and Link to Challenge section such as:

### Challenge information:
Learn More About CSS Pseudo Selectors By Building A Balance Sheet - Step 22
https://www.freecodecamp.org/learn/2022/responsive-web-design/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/step-22

Preview:

Challenge information:

Learn More About CSS Pseudo Selectors By Building A Balance Sheet - Step 22
https://www.freecodecamp.org/learn/2022/responsive-web-design/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/step-22

---

Another Issue I am having with the "Code is too long" template is:

• The "Describe your issue." text is missing
• The content of the warning section is TOO long, some might not bother to read them... (However this is a general UX issue)

(I don't know to make a new issue for this so I will post it here)

Here is the given template:

**Tell us what's happening:**



**Your code so far**

WARNING

The challenge seed code and/or your solution exceeded the maximum length we can port over from the challenge.

You will need to take an additional step here so the code you wrote presents in an easy to read format.

Please copy/paste all the editor code showing in the challenge from where you just linked.

```
Replace these two sentences with your copied code.
Please leave the ``` line above and the ``` line below,
because they allow your code to properly format in the post.

```
**Your browser information:**

User Agent is: <code>Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/105.0.0.0 Safari/537.36</code>

**Challenge:**  Learn CSS Transforms by Building a Penguin - Step 104

**Link to the challenge:**
https://www.freecodecamp.org/learn/2022/responsive-web-design/learn-css-transforms-by-building-a-penguin/step-104

Here is what I propose (as well as with the new headings)

### Tell us what's happening:

Describe your issue in detail here.


### Your code so far

```html
<!-- file: index.html -->

Paste your html code here

```

```css
/* file: styles.css */

Paste your html code here

```

### Your browser information:

User Agent is: <code>Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/105.0.0.0 Safari/537.36</code>

### Challenge information:
Learn More About CSS Pseudo Selectors By Building A Balance Sheet - Step 22
https://www.freecodecamp.org/learn/2022/responsive-web-design/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/step-22

Preview:

[bbsmooth]

I just want to point out that heading levels should not be determined by looks but rather by their position in the heading hierarchy. If a heading looks out of place or is distracting in some way then this can be fixed with CSS. But the actual heading level number should be appropriate for where it is on the page.

[ilenia-magoni]

I think that with #47578 this can be considered fixed

[moT01]

Do we still want to add the headings or is this fixed? I'm in favor of the headings I think, not quite sure what the appropriate level is. That should be the last thing though - adding a help wanted label.

[KSSaiTeja]

i'm interested on this issue. please tell me how can i start working on this

[ilenia-magoni]

@bbsmooth I think this needs one last look from you, what level of headings are semantically appropriate?

[bbsmooth]

Based on the current heading structure that is used when you view the actual post, I would suggest that these headings should be h3.

[ilenia-magoni]

Additionally I think its a marginally better to combine the Challenge and Link to Challenge section such as:

### Challenge information:
Learn More About CSS Pseudo Selectors By Building A Balance Sheet - Step 22
https://www.freecodecamp.org/learn/2022/responsive-web-design/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/step-22

Preview:

Challenge information:

Learn More About CSS Pseudo Selectors By Building A Balance Sheet - Step 22 https://www.freecodecamp.org/learn/2022/responsive-web-design/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/step-22

What do we think of this? Would this make sense as a change?

[Dario-DC]

### Challenge information:
Learn More About CSS Pseudo Selectors By Building A Balance Sheet - Step 22
https://www.freecodecamp.org/learn/2022/responsive-web-design/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/step-22

It looks good 👍

[ilenia-magoni]

Ok, I will make that change, and finally make the PR, thank you for your input