design – How to display the user ordered correct or wrong order of elements?

I think, before you study the colors and positions, you should know all the possibilities of error.

In the example of the question, no clarification is required, if there are only two wrong positions, one must be in the position of the other and vice versa.

The real problem with only five possible answers is:

  • three mistakes
  • four mistakes
  • Five mistakes

From here, you must create a visual code to indicate the correct position.

Three wrong answers

This is not the most complicated case. A simple visual code of how many steps the user has to take to find the right position is sufficient:

Enter image description here

Four wrong answers

You can specify a color code along with the characters that indicate the severity of the error. In this example, white is a slight error, blue is a medium error, and black is a high error:

Enter image description here

Five wrong answers

Personally, I would cause the user to repeat the test for two reasons:

  • Prevent the user from feeling frustrated and therefore stop the test
  • Avoid filling out the answers with colors and location codes

Enter image description here