1. One way is to show the users response and the correct answer as two columns. In this case, in the 'response' column, all options are shown and the selected response is highlighted, whereas the others disabled. An 'X' indication shows whether the answer was right or wrong.

  1. Another way is to show all the options listed, with the selected option highlighted. And finally, show an icon for the right answer. The main concern, in this case, is that we are not showing whether the user's result is right or wrong.

P.S: I have a colour constraint with the texts.Text can't be coloured green/red. But there can be coloured icons or Text shading (black/grey/white).

I think that option 1 is better than 2 ( as 2 has some shortcomings). Please mention if a better way is possible to show the details. i.e:-

  1. All Options

  2. Users selection

  3. Correct Answer

  4. Result.

2 Answers 2


Use radio buttons to indicate the choice, use strikethrough to indicate the wrong answers.

Quiz result

  • Second approach looks simpler to me with a little change. See attached image which provides more clarification.

enter image description here

  • See a sample image from Interaction Design Foundation Quizzes (https://www.interaction-design.org). The way they are showing correct and incorrect answers is really user-friendly.

enter image description here

  • I have a color constraint with the texts. The problem is that text can't be colored green/red. It affects the readability of my application. But there can be coloured icons or Text shading (black/grey/white).
    – Kish
    Dec 13, 2017 at 12:08

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.