Responsive project quiz formatting issues

[singru]

Hi,

I'm working on a responsive project which has quiz questions. The client wants to see the answer choices in one single line, instead of multiple lines. When I enlarge the textbox to accommodate the answer in one line, it looks fine in the desktop version. But when I test in the mobile version, the formatting gets messed up. I have included screenshots below. Anyway to resolve this issue? Thanks

[Lilybiri · Accepted solution]

Are you using fluid boxes? In that case you cannot force the answers to one line if the space available on the mobile device is too small. You can decrease the minimum font size (default = 14pt, but you can decrease to 10 or even 8) but at a certain width of the browser (which can be as low as 320px) will still be insufficient. 

[singru]

Hi

 The three answer options are all in one fluid box, not in three separate fluid boxes.

Thanks

[Lilybiri]

I know very well the setup of master slides in a Fluid Boxes project, as you may read in these blog posts:

http://blog.lilybiri.com/fluid-boxes-and-master-slides

http://blog.lilybiri.com/quiz-slides-with-fluid-boxes

Did you try my suggestion for decreasing the minimum font size?

[singru]

Hi,

Yes I can do that, however the client does not want a smaller font size:((

[Lilybiri]

I may be wrong, but I have a suspicion that you are new to responsive project design. You seem not to understand that the font size IS adapted to the available space anyway in fluid boxes. To decrease the MINIMUM font size you allow the font size to become smaller when the browser resolution is much smaller like on phones.  Desktop font size will remain.

How can you pack the same amount of people when you switch from a large car with 50 seats to a car with 5 seats? Ask your client...

[singru]

Thanks for that tip -- appreciate it very much! Yes I am very new to responsive design..

[kdmemory]

Hi Singru,

first of all, Lilibiri is right. When you have long text and the viewport gets smaller, the text MUST break into more lines. If your client really demands to keep it still in one line, well, that's Mission Impossible.

Then, secondly, where did you test the shrinking of the viewport (screen)? Is your screenshot from Captivate or from some mobile simulator in your browser, like for example Responsive Design Mode in Firefox? I guess you should test the particular viewport output on a genuine device like tablet (i.e. iPad) or mobile phone to see a realistic result. I'm saying this because I can't believe that i.e. in the second line of the third answer option, where the words ".. and other" do not break to the next line are really from a genuine device.

Furthermore, and this seems to me most essential, in my experience as an instructional designer questions and answers in a test should be as concise as possible. The question here and especially the answers are too wordy, too wounded. This can annoy and confuse test participants. It all depends of course on the overall context, what was before and what come after. But I'm convinced that short and sweet is always better.

So, just as an alternative approach within the given context, as far as I can tell, the options to select could be simply:

Question: blah blah blah .. who should be introduced first to the new software?

• the team member with the highest experience level
• the youngest team member
• all team members simultaneously

Think the question context through once again and dicuss it with your client.

Klaus

[singru]

Hi Klaus,

These are fantastic suggestions for someone like me who is a beginner in Captivate.  I agree that the questions and answers are too wordy. I will communicate this point to our researches who develops the quiz content. Really appreciate your advice!

Yes, I agree with all of Lilibiri's points. Her suggestions always help beginners like me immensely! Her suggestion about the minimum font size solved a lot of my formatting issues. So thanks again, Lilibiri.