I am designing a widget to appear on a health-related website and present health-related true/false questions. The goal is to engage visitors and help them learn some potentially useful things. Brief statements will be displayed, together with two buttons, "True" and "False."
Because the goal is learning, I want to
- let the user know whether their chosen answer is correct, and
- display a correct statement if the original statement was false
I'm trying to figure out a good way to convey some of the four possibilities:
True statement: e.g., "Breast-fed babies are less likely to be obese as adults"
- Statement is true and user chooses true: big green check mark superimposed over the correct statement
- Statement is true and user chooses false: how to indicate that the choice was wrong, but the statement is true? I'm thinking about a red X over the incorrectly chosen "False" button, and a green check over the correct statement.
False statement: "Breast-fed babies need formula or sugar water to supplement their diet." Accompanying true statement: "Breast-feeding provides all the nutrition an infant needs for the first 6 months of life."
- Statement is false and user chooses false: Maybe a red X over the false statement, and then display the correct statement below. Doesn't clearly show that the user made the correct choice. Maybe a check mark over the chosen button?
- Statement is false and user chooses true: Not sure what to do here. Definitely X out the incorrect statement and display the correct one. Maybe X over the incorrectly chosen button, and check on the correct "False" button? Too many X's and checks?