How to display interactive true/false questions for learning?

Question

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

1. let the user know whether their chosen answer is correct, and
2. 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"

1. Statement is true and user chooses true: big green check mark superimposed over the correct statement
2. 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."

3. 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?
4. 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?

Answer 1

Currently working on "True/False" and "multiple selections" layouts for an elearning app & ran into this issue as well.

The trouble with using "Check" and "X" is exactly as you stated, that you risk confusing the "correctness" of what the user selected with the "truthiness" of the chosen statement.

You need to separately display 3 concepts:

1. which option the user selected
2. the correctness of that selection (possibly optional/implied)
3. whether the statement itself is true or false (ideally w/an explanation of why)

In a multi-question T/F table layout we use a blue check to indicate the user's choice, regardless which column it's in. An "outline" check indicates "not selected". This objectively separates "user selection" from both "correctness of selection" and "validity of statement." It only indicates their selection & nothing more.

Feedback to address #2 and #3 in this layout is displayed in a modal pop-up that states "Correct" or "Incorrect", with an explanation that "The statement is [true or false] because blah blah blah".

In your case, if you only show a single question at a time you could just leave the chosen button highlighted to indicate user selection until feedback is dismissed or the user moves to the next question. That takes care of #1.

You could combine #2 and #3 by displaying feedback text above/below the statement that begins by confirming the "validity of the statement" and then offers an explanation of why it is true or false.

It should be clear at this point, since you left the user's selection highlighted, whether they were correct or incorrect. To further clarify this, you only need 1 "Check" displayed over the "correct" answer. A "check" is positive & this avoids the impression of being overly negative/critical of the user's incorrect choice.

Answer 2

If webpage is interactive then it drags user towards it. I recommend using words that interacts with users.