I am designing a fill-in-the-blanks quizz. I start with paragraphs, and for each paragraph I append some buttons below which are the possible answers for the blanks.

Please see http://wikilearner.net/wiki/

The problem is that, because there are multiple paragraphs, it becomes easy to get confused about which paragraph the buttons correspond to.

I want to make it visually obvious that the two are linked. I have tried using a single line/double line on the left, but it doesn't look good. Any other suggestions?

  • Can you post a screenshot or wireframe of the the interface as it was when you asked this question? (I don't know if you've already made changes in response to feedback.) We've recently adopted a policy that questions asking to critique a specific interface are good, but the question should have enough detail that we can understand it without actually visiting your site. Commented Sep 9, 2011 at 17:21
  • BTW, Wikilearner is a really cool idea! Commented Sep 9, 2011 at 17:22

4 Answers 4


First of all: I think it is already pretty awesome and quite usable - it already works quite intuitively (several ways to interact) and just needs a bit of finetuning.

To answer the specific question to make visual distinction between paragraphs: 1. more space between the buttons and the next paragraph. 2. a line between the buttons and the next paragraph 3. highlight the active paragraph and the corresponding buttons (on hover or selected field)

Most of those effects don't need much to work, they can be subtle, just a slightly different shade.

One more thing you could do is use the statistics to help grouping, for example by placing them under the buttons, still right aligned. It will serve as a natural separator. I think those need to be clearly separated in style from the buttons and the text to indicate it is meta-data.

Some more feedback on the page itself: I would make the buttons just a bit more distinct from the normal text: at this moment it is all the same font, colour and size, and that gives the impression that the (unused) buttons are part of the normal text flow. You could break this up by using a different font (serif vs sans serif), displaying it in italics, using a different font size, using a different color and background color. There's a balance to be found: it needs to be distinct enough to not confuse it in the overal flow, and yet not so distinct as to completely seperate itself.

I would also display the dropdown menu on arrow down, and move the items in the dropdown menu a bit closer together. Perhaps indicate the dropdown functionality with a small light-grew arrow on the right side of the field that has focus to make it more discoverable.


What about something like this:

enter image description here

  • Use an interaction model that users expect; treat the missing words as a control panel that sits above the content
  • Change the colour from grey to yellow (or any colour), draw a relationship between interaction and result
  • Background colour can help separate control and content
  • Thin stroke can help encompass your 'visual block'
  • Slightly exaggerate the space between each 'visual block'

Perhaps something like this instead:

enter image description here

I do have a few comments on other aspects of the design:

  • The "answers" look too much like buttons. I clicked a couple of times before I realized that I needed to drag and drop.
  • Dragging and dropping takes time so the time to complete is going to include a lot of drag and drop time, and, in the first section, some possible "click time".
  • The right/wrong answer, time, and % look a lot like the "answer" buttons.
  • The text boxes within the text make the paragraph difficult to read.
  • The red/green feedback are very close in contrast making it difficult for a person with red/green colorblindness.
  • It will be pretty difficult to make this design accessible.

It could be that a standard true/false or multiple choice quiz would be a better alternative.

  • Thanks for the feedback! I will make changes accordingly. Actually, the "answers" are buttons. They need to be double-clicked to put the answer in the (focused) blank. Regarding drag-and-drop, you can also type (with autosuggestions), or double click as explained above. What you do mean by "it will be pretty difficult to make this design accessible"?
    – Randomblue
    Commented Sep 6, 2011 at 4:19
  • Accessible for people who cannot use the mouse or see the screen. Drag and drop interfaces, in my experience, are difficult to make accessible. However, the typing/autosuggestion will help.
    – eBeth
    Commented Sep 6, 2011 at 13:20

Regarding how to make things look like they are grouped properly, you can sometimes use alternations of background colors rather than drawing lines. Note for instance my answer to this question uses color instead of boxes. Similar but more subtle techniques might help:

How to create bands of number ranges for a field?

Other thoughts: This is neat. However, it does not seem like a good Fitt [sic] for drag & drop. You've got a better thing going with the type & suggest interface, and I'd focus on refining that. Perhaps even to the point of disabling the drag and drop, to keep people from thinking that's the right way of doing this...especially if they're being timed! Even "click on blank and then click on the word button to fill it with" would be faster and easier, as well as letting you quickly try an alternative after a wrong answer.

The suggester drop-down adds visual noise and you really don't need it. People already have to keep their eyes on your list of "word buttons" to know what the possibilities are. It would be better to have those light up to reflect the list of candidates as they narrow, and when there's only one candidate left have an alert appear like "press [Enter] or [Tab] to accept".

Your scoring and timer information should be visually different from the "word buttons". And there's no reason to make it look like buttons at all. For starters you can try making it read-only information in a panel with a different background color, that is consistent and over to the right of a vertical stack of the paragraph and the word buttons.

  • If the timing isn't crucial (like a grade depending on it) I think there is no reason to limit the options. They are not confusing or interfering with each other. I even think some people will consider drag&drop less like learning and more like playing a game. It also appeals to people with more visually oriented learning styles. Both effects can be beneficial to the learning experience.
    – Inca
    Commented Sep 6, 2011 at 19:01
  • I'd argue if the "fun" part of a game is dependent on the awkward and repetitive task of guiding blobs over distances into small slots, then the game design needs to be revisited! Learning styles can be catered to more adeptly and entertainingly than that. This is a good video to watch for inspiration if you haven't seen it yet: gigaom.com/2010/02/22/… Commented Sep 6, 2011 at 19:11
  • There is a third way to enter the words by double-clicking them when the input box is focused. I see your point about the drag-and-drop, but my feelings for now are more inline with Inca. As for the suggestion to remove the suggester drop-down, that is an awesome idea, thanks! I'm also working on the scoring and timer.
    – Randomblue
    Commented Sep 6, 2011 at 19:16
  • Just saw your last comment. Will reconsider.
    – Randomblue
    Commented Sep 6, 2011 at 19:17
  • It doesn't have to be your way of fun... different people have different preferences, and some hate to type, or have difficulty. I just don't see any point in limiting options when they are working fine and not interfering. I can't watch the video somehow.
    – Inca
    Commented Sep 6, 2011 at 19:23

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.