Highlighted

Responsive project quiz formatting issues

Explorer ,
Sep 16, 2020

Copy link to clipboard

Copied

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

 

Image2.pngImage3.png

Most Valuable Participant
Correct answer by Lilybiri | Most Valuable Participant

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. 

 

Views

99

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more

Responsive project quiz formatting issues

Explorer ,
Sep 16, 2020

Copy link to clipboard

Copied

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

 

Image2.pngImage3.png

Most Valuable Participant
Correct answer by Lilybiri | Most Valuable Participant

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. 

 

Views

100

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Sep 16, 2020 0
Most Valuable Participant ,
Sep 16, 2020

Copy link to clipboard

Copied

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. 

 

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Sep 16, 2020 0
Explorer ,
Sep 16, 2020

Copy link to clipboard

Copied

Hi

 

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

 

Thanks

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Sep 16, 2020 0
Most Valuable Participant ,
Sep 16, 2020

Copy link to clipboard

Copied

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?

 

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Sep 16, 2020 0
Explorer ,
Sep 16, 2020

Copy link to clipboard

Copied

Hi,

 

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

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Sep 16, 2020 0
Most Valuable Participant ,
Sep 16, 2020

Copy link to clipboard

Copied

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...

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Sep 16, 2020 0
Explorer ,
Sep 16, 2020

Copy link to clipboard

Copied

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

 

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Sep 16, 2020 0
Advocate ,
Sep 16, 2020

Copy link to clipboard

Copied

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

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Sep 16, 2020 0
singru LATEST
Explorer ,
Sep 18, 2020

Copy link to clipboard

Copied

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.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Sep 18, 2020 1