Responsive Drag and Drop question

mike55 · June 26, 2020, 4:24pm

Hello everybody,

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

Is there a responsive drag and drop example anywhere?
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.

thunt · June 29, 2020, 8:32am

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)

mike55 · June 29, 2020, 1:24pm

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?

thunt · June 30, 2020, 4:46am

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

mike55 · July 1, 2020, 12:45pm

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.

thunt · July 2, 2020, 3:47am

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

mike55 · July 3, 2020, 1:56pm

Thank you. That worked. Size is fix now.

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.

thunt · July 6, 2020, 6:35am

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

mike55 · July 6, 2020, 2:58pm

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.

thunt · July 7, 2020, 3:10am

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

mike55 · July 7, 2020, 12:41pm

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.

thunt · July 8, 2020, 4:20am

Hi Mike,

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

Double click the drag source to add text >> Use Enter or Space key to move the text to the position you want.
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

mike55 · July 21, 2020, 2:17pm

Thanks for the information.

I have a new question.

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.

thunt · July 22, 2020, 2:26am

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

mike55 · July 22, 2020, 8:49pm

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? …

thunt · July 23, 2020, 1:59am

Hi,

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

Regards