READMEs for exercises: Self Checks should be hidden / in a drop-down

[Eduardo06sp]

• [x] I have thoroughly read and understand The Odin Project Contributing Guide
• [x] The title of this issue is similar to the file, exercise/lesson, or folder: brief description of request format, e.g. Global SCSS file: Buttons should have XYZ

• [x] I would like to be assigned this issue to work on it

1. Description of the Feature Request

I think it'd be a good idea to put the Self Checks in a collapsed (by default) drop-down list. This would help users avoid accidentally reading hints as they're reading the instructions, before completing the exercises.

2. Additional Information

The drop-down list is already collapsed by default. Example code to implement this as seen in the screenshot above:

### Self Check

<details>
  <summary>View self check list</summary>

  - The header is at the top of the page, the footer is at the bottom, and they stay in place if you resize your screen.
  - The header and footer have padding.
  - The links in the header and footer are pushed to either side.
  - There is space between the links in the header and footer.
  - The footer has a light gray background (`#eeeeee`).
  - The logo, input and buttons are centered in the screen.
  - The buttons have an appropriate amount of padding.
  - There is space between the logo, input and buttons.

</details>

[thatblindgeye]

I'm not entirely sure whether putting those items in a collapsed details element would really deter people from viewing hints/possible answers before making their own attempt.

What do you think of adding in some verbaige after the Self Check heading and before the bulleted list, or even in this repo's README itself? "Once you finish your attempt at an exercise, be sure that your solution passes the exercise's Self Check" or something?

[Eduardo06sp]

@thatblindgeye maybe I'm just overthinking it, but even as I read the instructions, I easily catch a glimpse of the self checks which can be very strong hints (and some users may not want), hence the suggestion to hide in a dropdown

if that's still deemed unnecessary, that little note would definitely be very helpful. Some are unsure if they should try first, then look at the Self Check! Let me know and I will gladly make a PR :}

[thatblindgeye]

Maybe the self checks could be looked over again and made sure whether users should be checking them after, before, or during their attempt. Some early ones are more "make sure you use flexbox", but then quickly the self check turns into something that actually has important information ("make sure X is 8px....").

I'm thinking that if there's information that is more necessary (like exact px values or something), it should be included in the Desired Outcome section. The self check I'm thinking should be more "once you're finished, make sure these statements are true for your solution" or something, but I would have to go through some more to check whether that should be the case.

[Eduardo06sp]

That's an excellent idea, if you need help with anything from here, I'll gladly give it a shot. :}

[thatblindgeye]

Right now I have this as a discussion so neither moving forward nor anything blocking from doing so, but I don't think there is exactly a surefire solution. If you'd like to take a look through some of the Self Checks and you get some ideas of how they could be improved/updated with a more proper goal, definitely feel free! 🙂

[thatblindgeye]

@Eduardo06sp just wanted to check in and see if you had any additional comments regarding this discussion?

[Eduardo06sp]

@thatblindgeye honestly not really, just thought of it as a small enhancement, but I think it's find how it is, just adding a heads up or more consistency to the purpose of self-checks would definitely be beneficial

(e.g. state before each self check something like "after you've finished, make sure you review these")

[thatblindgeye]

Gonna close this for now. We can reopen or open a new issue if we want to move forward with an idea regarding this.