Skip to main content
I
iainiow
Participant
October 10, 2017
Question

Drag and drop text in to paragraph.. scaling issues

  • October 10, 2017
  • 1 reply
  • 207 views

Hi All,

I am creating a drag and drop slide where the user will be presented with a paragraph of text with some missing words. The missing words will be the drag sources with drag targets set to be the spaces in the paragraph of text.

I have got the functionality down just fine, but I am struggling with the presentation now. I created the slide mobile first but some users will use desktop. When the slide is scaled up to desktop size the missing word gaps scale up until I end up with massive unsightly gaps.

I am using captivate 2017, fluid boxes with a 2 column 3 row layout. My paragraph of text is in the 2nd row 2nd column and consists of text captions then smart shape drop zones. (so the flow goes:   text caption smart shape text caption ).

I feel I am missing a trick with my layout here, I either need to lock somehow those elements to the position they are laid on on the page or do it totally differently!

Any advice is greatly appreciated.

Many thanks

This topic has been closed for replies.

1 reply

Lilybiri
Lilybiri
Legend
October 10, 2017

Very difficult to offer tips based on just a textual explanation.

If you expected users on desktop/laptop screens you should have started setting up the Fluid boxes for them. To say it in a very simplied way, the setup for Fluid boxes define what has to happen with the layout when screens shrink, not when they 'grow'. That is the reason for the Wrap options. How did you set that option up, eventually in combination with Horizontal/Vertical settings and padding? Contrary to the alternative work flow with Fluid Boxes you cannot set up size and position for the different Breakpoint Views.  That alternative gives you more control, but it takes more time and you have to start with the primary view (desktop) because inheritance is downwards, not upwards neither.

I
iainiowAuthor
Participant
October 10, 2017

This image shows the situation a bit better. So the white area is a static FB, and I have highlighted the controls I have on the first line of the slide. I can get it right for ipad and I can get it right for desktop, but I can't get both :-(

My user base is both ipad and desktop hence taking the mobile first approach (I am .net developer by trade and am used to beautiful scaling bootstrap css)

Is there something better I can do or should I scrap this as an idea and do this exercise in some other way?

Terms & ConditionsAccessibility statement
Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices