Answering incorrectly should not display the correct answer in green.

[kevinYCKim33]

Currently when users submit an answer, the correct answer turns green, and if the user chose an incorrect answer, that answer would turn red.

// Question.js

              {question.answers.map((answer, i) => {
                let answerColor;
                if (answerSubmitted) {
                  if (question.correctAnswerId === answer.id) {
                    answerColor = { color: 'green' };
                  }
                  if (
                    userAnswerId == answer.id &&
                    !(question.correctAnswerId === answer.id)
                  ) {
                    answerColor = { color: 'red' };
                  }
                }

Then each answer is rendered via this line of code:

<span style={answerColor}>{answer.text}</span>

But since we'd like the users to be able to retry for the right answer, the correct answer should not change to green when users select an incorrect answer.

Please update the corresponding tests as well under src/__tests__/Question.js

[austintackaberry]

Here is a good article on testing: https://blog.kentcdodds.com/write-tests-not-too-many-mostly-integration-5e8c7fff591c

We should maybe look into react-testing-library which tries to prevent you from testing implementation details.

As for this issue...

I would argue that answers changing color is still valuable. Perhaps when you answer incorrectly, your answer turns red (without changing the text of the correct answer to green), and when you answer correctly, the answer text turns green.

As for now, I think it's fine to just change the functionality to fix this issue, and then change the tests, so that they pass.

[nikrb]

thanx for the link on testing. I agree with turning just the wrong answer to red and just fixing it for now.

[kevinYCKim33]

Yes, agree with the tweak in color displays. And thanks so much for that testing article. I've updated the title of the issue to reflect this along with the accompanying comment.

[kevinYCKim33]

https://github.com/austintackaberry/ydkjs-exercises/pull/80