Freecodecamp: Applied Visual Design: Modify Fill Mode of an Animation - Not accepting all valid answers

[zandthecoder]

Challenge Name

Applied Visual Design: Modify Fill Mode of an Animation

Issue Description

If you insert the "animation-fill-mode: forwards;" between "animation-name: background-color;" and "animation-duration: 500ms;" or above "animation-name: background-color;", the behavior is exactly what is expected of the challenge, however the test fails stating:

message: button:hover should have a animation-fill-mode property with a value of forwards.

Inserting the line at the end of both statements allows you to pass the test.

Browser Information

• Browser Name, Version: Opera (identified as Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/63.0.3239.132 Safari/537.36 OPR/50.0.2762.58), Version 50.0
• Operating System: Windows 10 64-bit (WoW64)
• Mobile, Desktop, or Tablet: Desktop

Your Code

Screenshot

[huyenltnguyen]

@zandthecoder Thanks for reporting the issue.

This challenge's test strictly checks if we type the correct code && in the exact order.
https://github.com/freeCodeCamp/freeCodeCamp/blob/b1b8074733f2eba996383df4d2f7dfd7aecb23d5/seed/challenges/01-responsive-web-design/applied-visual-design.json#L2092
It shouldn't be that rigid. I'll raise a PR for this one later today.
Happy coding!

[nicandromts]

Hi, do u guys still think this is an issue? any updates? I tried to reproduce the error but couldn't see it

[raisedadead]

@nicandromts, I think @huyenltnguyen plans to take this on.

But,

I tried to reproduce the error but couldn't see it

Can you elaborate the steps you followed?

[huyenltnguyen]

@nicandromts, I was in the middle of something when I read your comment, and totally forgot to reply you, so sorry. Would you mind posting your code here, maybe I missed something?

@zandthecoder and @raisedadead, I have a second thought on this. I'm not convinced the test needs to be changed. This challenge is very straightforward: 'here is the code, copy and paste it to the editor and see the result'. Thus, there is no need to move the code around. Also, the challenge creator was kind enough to add an empty line in the challenge template to let users know where to put the code in, so one couldn't go wrong with that, could they?

[ahmadabdolsaheb]

@huyenltnguyen @nicandromts @zandthecoder @raisedadead i have been surprised a lot with what the users can do. adding a comment to show where the user needs to insert the code would be a good compromise. in either case, I would be happy to redo the test or add the comment. please let me know what you think.

[raisedadead]

Actually we need both of the things:

1. Add a hint where the code goes like @ahmadabdolsaheb has intended
   

2. We still need the tests to be allowing, the CSS properties to be in a different order, because its still valid and should be acceptable.

[raisedadead]

This is just to make this friendly for anyone and everyone.

[ahmadabdolsaheb]

I'm on it

[ahmadabdolsaheb]

@raisedadead done.