Freecodecamp: [Applied Visual Design - FCC(Beta)]: Common Mistake

[Brekmister]

Challenge create-movement-using-css-animation has an issue.
User Agent is: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/56.0.2924.87 Safari/537.36 OPR/43.0.2442.1144.
Please describe how to reproduce this issue, and include links to screenshots if possible.

<style>
  div{
    height:40px;
    width: 70%;
    background:black;
    margin: 50 auto;
    border-radius: 5px;
    position: relative;
  }

#rect {
  animation-name: rainbow;
  animation-duration: 4s;
}

@keyframes rainbow {
  0% {
    background-color: blue;
    left: 0px;
  }
  50% {
    background-color: green;
    left: 25px;
  }
  100% {
    background-color: yellow;
    left: -25px;
  }
}
</style>

<div id="rect"></div>

console result:

• The @keyframes rule for 0% should use the left offset of 0px.
• The @keyframes rule for 50% should use the left offset of 25px.
• The @keyframes rule for 100% should use the left offset of -25px.

Sure enough, the left properties are all there. He/she is missing the top property as shown in the css code. These errors do not reflect on what the user has done wrong.

suggestion result:

• The @keyframes rule for 0% should use the top offset of 0px.
• The @keyframes rule for 50% should use the top offset of 50px.
• The @keyframes rule for 100% should use the top offset of 0px.

^^^ This will get these people thinking ^^^

or

warn the user that the challenge asks that the user should add the left offset to the @keyframes rule, not replace the top offset with the left offset

[cdrani]

@Brekmister: The challenge code actually includes the top property at all 3 keyframe stages, therefore the tests are right in checking only for the inclusion of the left property at the keyframe stages. Even with the suggestive empty space below the top property to place the left property, and the instruction text:

Add a horizontal motion to the div animation. Using the left offset property, add to the @keyframes rule so rainbow starts at 0 pixels at 0%, moves to 25 pixels at 50%, and ends at -25 pixels at 100%.

maybe it would be wise to place a note/comment to strictly add a left property and not replace the top property, or any other code for that matter, as a reminder. A simple comment in the challenge code would suffice. The tests should not have to be rewritten or modified for this challenge.

[Brekmister]

@cdrainxv I completely agree with you on that. I would personally just change the text of the error output on possibilities on what the user possibly did wrong instead of giving the output it already is if, I only understood that the tests returns only true for passing and false for failing.

If it is such the case of true and false, why are they telling the users what is wrong in the code when the website only knows whether the code passed or not? That actually doesn't sit that well with me although that may be the way that it has to be.

[cdrani]

@Brekmister: There's no way to account for all the possibilities of wrong answers a user could have typed in. The current regex test works just fine because it is only testing for the presence of the left property with the correct values according to the instructions provided. The browser doesn't need to know if your code is correct or not, it will either compile what is in the editor if the syntax is correct and display it on the iframe, or it will not, but only the test can confirm if the code you have written is correct.

Take a look at how the challenges are tested to get the overall idea of how they work and the reason for their specificity.

You can see that the test messages must reflect the assert test. The message only highlights what you did wrong according to the constraints of the test itself. As the top property was not meant to be changed, then only the left property must be the source of error (according to how the message is written). Assert tests only return booleans (true or false), and the message is to inform you what the reason could be for the failure or serve as a starting point for debugging your code.

With your route of providing several possibilities of what a camper could have done incorrectly, that could lead down a rabbit hole where a camper might not emerge from, as they can't be too sure which one of the (countless) possible errors they could have included in their code -- unless specific ones have been pointed out for them, as in the test messages. If the error doesn't coincide with their code, then there's always the help rooms available to seek help or guidance.

With the whole instruction setup and the example provided, the test messages seem appropriate for this challenge. I hope that kind of clears up the reasoning behind how the tests are written and how the messages are worded. 😄

[Brekmister]

@cdrainxv That does clear things up. ^_^

Since that is the case scenario, I have to agree that your solution is currently the best one.

it would be wise to place a note/comment to strictly add a left property and not replace the top property, or any other code for that matter, as a reminder. A simple comment in the challenge code would suffice.

I hope you can agree with me that this is a very common mistake and perhaps people like me are going to get tired real quick of people making that mistake

[HKuz]

@Brekmister thanks for raising this issue, and @cdrainxv that was an great explanation of the tests and clarification of the challenge. We can add a sentence at the end of the instructions to remind folks not to remove anything.

Suggested instructions:

Add a horizontal motion to the div animation. Using the left offset property, add to the @keyframes rule so rainbow starts at 0 pixels at 0%, moves to 25 pixels at 50%, and ends at -25 pixels at 100%. Don't replace the top property in the editor - the animation should have both vertical and horizontal motion.

For anyone who would like to make this change, please review the Contributor's Guide and feel free to ask any questions in the Contributor's chat room. You can find the code to make this change here. Thank you! 🎉 🔥 🎆

[DenizDI7]

How the fuck am i supposed to type it then. This is my code and ive done the right things im supposed to do, but it still says im wrong?????????????????????????????????????