ActivePresenter Saola Animate Pricing Download

Responsive Drag and Drop question

Hello everybody,

unfortunately the drag and drop quiz in your examples (Find the favorite foods for animals)
ist not responsive.

  1. Is there a responsive drag and drop example anywhere?

  2. Do all drag and drop boxes of a question have to be in the SAME container?
    Or is there a way to put them to different flexboxes? This would make the responsive work easier.

Hi Mike,

All drag and drop boxes of a question have to be in the same group/container. In the current version, there is no way to put them to different flex boxes.
Below is a responsive drag and drop project for your reference.

Regards

Drag-n-Drop_responsive.approj (3.9 MB)

Cool example. The layout works fine for me.

Unfortunately there is no Submit Button.
I need the same submit button like in the “Favorite foods for animals” example.

I added a new submit button but in the events panel I can not choose “Drag and drop question”.

How can I link the questions with the button?

Hi Mike,

In the previous project, I used Drop Area object to create drag-n-drop interaction, that’s why you didn’t see the Submit button.

Here is another project that I used Drag-n-Drop question to create. Please take a look at this and if you have any questions, kindly let me know.
Find_foods_animals_responsive.approj (3.6 MB)

Regards

Thanks for the new example.
How can the drag and drop box keep its size?

My Text Box does not grow/shrink. So should the drag/drop box.

I sent my work example in an email to support.

Hi,

If you want an object to keep its size, you have to set the width/height unit of that object to px in all layouts.
Otherwise, if you want an object to grow/shrink, you have to set its width/height unit to %.

In responsive project, you need to edit objects in each layout and then you can drag the handle along the responsive bar to preview the content.

Please refer to this tutorial to get detailed information:https://atomisystems.com/tutorials/ap8/how-to-insert-and-manage-objects-in-responsive-projects/

Regards

Thank you. That worked. Size is fix now. :slight_smile:

How can the drag and drop box keep its POSITION?
I want it to stay in the horizontal center when the browser gets smaller. Right now it starts moving to the left fromt 1240px to 1024px.

I could put the drag and drop box into a flexible box but then all objects positions and sizes get twisted.

Hi Mike,

If you want an object to keep its position, you need to set the position unit of that object to px in all layouts.

Here is a template that we put the drag-n-drop question into a Flex box. Check it out and if you have any questions, please let us know.
Drag_n_drop_responsive.approj (1.2 MB)

Regards

I like the example. I think this works for me now. Thank you very much.

Additional question:
Right now my dropbox has a background image and a Question Text “in the front”. Is it possible to put also a small “front” graphic over the background image?
I would like to have a small icon at the top and below the question text.

Hi,

I am glad to hear that you see the example helpful.
Regarding the additional question, please be noted that objects in Flex box are one dimensional, and they don’t overlap each other. So, it’s impossible to put an object over the others.

Regards

Hi.

The text and the icon graphic should not overlap each other (z-axis) in the drag box.

They both should only overlapp the background image. Icon graphic at the top (y-axis) and the text at the bottom (y-axis) of the drag box.

How can I do this?

Right now I can only insert an icon graphic OR a text in the “front” of the drag box. Not icon graphic AND text.

P.S.: With “front” I mean not in the background as backgroud image.

Hi Mike,

You can insert both icon graphic and text into the drag box. Please try the following steps:

  1. Double click the drag source to add text >> Use Enter or Space key to move the text to the position you want.
  2. You cannot insert an icon graphic on a background image in this case. However, you can insert a background image that contains an icon graphic inside it already as a workaround.
    Select Drag box >> In PROPERTIES-DRAG SOURCE, select Image Fill >> choose image that contains icon graphic from your computer.

Please see the image below for more information.
drag box

Regards

Thanks for the information.

I have a new question. :relaxed:

I want to set the top margin in the textboxes individually for different responsive views (mobile, tablet, …). How can I do that?

Right now the textbox margin value stays the same for ALL viewports.

Hi Mike,

I’m not sure whether you want to set Top Margin (which is in the property of the Flex Child - picture 1) or Top Margin (which is in the property of the Text Box - picture 2)

If you want to set Top Margin in picture 2 for different responsive layouts, unfortunately, the current version of ActivePresenter have not supported it yet.

In case you want to set Top Margin in picture 1, you need to set the top margin of the object in the smallest layout first then to the larger layouts. (Note that by default, a layout will inherit properties from a larger layout, which is called layout inheritance behavior in a responsive project.)

Regards

Unfortunately I meant top margin of the textbox (picture2 margin_textbox.jpg).

Additional question: An object can be hidden (“hidden in current layout”).
How can I hide an object INSIDE a flex box in the current layout? …

Hi,

At the current time, it’s impossible to do that.
We’ll consider supporting it in the future release.

Regards