In a web-app quiz form used to add new questions (with answers) for the app, how should I indicate to the user to mark an answer as correct?

enter image description here

Currently you mark an answer as correct by clicking the radio element on the left of it.

Any suggestions are more than welcome.

  • 7
    If only there was a website with questions and multiple answers that allowed to mark one of the answers as correct... :) Jun 23 '12 at 17:42
  • @VitalyMijiritsky The question is about a ui used to add multiple choice questions to an online quiz. I see the similarity to stackOverflow but think it's a different case.
    – AturSams
    Jun 18 '14 at 7:11
  • @zehelvion, Another suggestion is to use a checkbox instead of radio buttons.
    – Pacerier
    Nov 8 '15 at 0:15

If this is an administrator function for a multiple-choice quiz, I would make it clear to the user that a correct answer is required, and allow the addition of one or more decoy answers. (Choose your own terminology for "decoy answer".)


download bmml source – Wireframes created with Balsamiq Mockups

The application itself would randomise the question's answers when presenting them to students.

  • Wow! This is great! I wish I could give more than 1 upvote. Anyone answering after Andrew is wasting their time.
    – dnbrv
    Jun 23 '12 at 18:41
  • This is very inspiring and completely different than what I had originally thought to do.
    – AturSams
    Jun 24 '12 at 23:52
  • While this makes sense when answers are exclusively right or wrong, how would this work for when 2 answers are correct? Example: "D) Both A and C are correct."
    – KOVIKO
    Jul 10 '12 at 19:09
  • @Koviko That wasn't part of the requirement (which used radio buttons), but you could have more "Correct answer" fields and make one required, just as there are multiple "Decoy answer" fields with one of those required. Jul 12 '12 at 16:23

Have the first answer selected by default and integrate a correct answer wrapper around it for feedback/affordance.

enter image description here

  • What do you mean by 'wrapper around it'? :)
    – AturSams
    Jun 23 '12 at 17:25
  • The green visual wrapper in the mockup. Jun 23 '12 at 17:26
  • @LukeCharde: How do you afford for the quiz creator's desire to mix right and wrong answers?
    – dnbrv
    Jun 23 '12 at 18:40
  • @dnbrv I was thinking that the radio buttons were enough - that the [Correct Answer] treatment functions as the missing radio label. Drag-and-drop ordering might be good. What are your thoughts? Jun 23 '12 at 18:54
  • @LukeCharde Andrew Leach's solution above is far more elegant than anyone can propose.
    – dnbrv
    Jun 23 '12 at 19:02

Or make two headings. One that says correct answer: above the radio buttons. Then move the "answers" header to the right above the input boxes.

  • This is exactly what the selected answer suggested.
    – dnbrv
    Jun 28 '12 at 4:47

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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