Draggable Image Slider

We train Active Presenter to educators around the world. At the moment deaf educators in South America are big fans of Active Presenter and have created an AP training channel on YouTube.

Our feature request is to have a ‘Draggable Image Slider’ added to Active Presenter. This would open up a lot of educational game potential.

The frame should scroll and images should be clickable just like any other image in AP.
We’re very serious about this feature request and would be even willing to pay for development.

Keep up de good work!

Kind regards from Papua New Guinea

3 Likes

Hi @Koen,

We’re glad to know that our tool helps the deaf educators with meaningful work. They are truly superb people.

Regarding your request, could you kindly describe the ‘Draggable Image Slider’ further so we can better understand this feature? Any illustrated videos or game samples are much appreciated.

Best regards,
Quynh Anh

Dear Quynh Anh,

Thanks for the quick reply. Please find attached the approj file that is almost doing what I want.
My colleague added some javascript code and had the frame follow the slider. I would like pictures in the boxes.
The activity would then show a word, like pineapple, and the student need to search for the pineapple in the slider.
In this approj I can only slide the images by dragging the slider. It would be much more intuitive though, if the user could just drag on the images.

Thanks for thinking with me!

slider_test.approj (1.1 MB)

2 Likes

Hi Koen,

Sorry for my late reply as I somehow miss this thread.

For your information, you will not need to use the slider with JavaScript in this case.
Instead, you will do some tricks to make the width of the group object shorter than the total width of all 7 boxes to make a slider automatically appear and learners can scroll it to choose a box.
Please check this fixed project and preview it to better understand what I have fixed here.
slider_test.approj (1.1 MB)

In the original project, the width of the box group is 1910 px:
image
and the width of each box object is 250 px:
image

To make the width of the box group shorter than the total width of all 7 boxes, you will do some following steps:

  • Select the box group > Properties pane > Size & Properties tab > choose Flex > change Horizontal Align to Space Around and Overflow to Auto.
    image
  • Change the width of the object group to a smaller px. Here, I choose 1280 px, equal to the width of the slide.
    image
  • Now, you will see that each box has been resized as well to fit with the width of the whole box group (from 250 px to 183 px).
    I will change the width of each box back to 250 px by holding Ctrl and click each box to choose them all first.
    Then, I set Width for all of them as 250 px and choose Shrink as 0.
  • Finally, set Left Margin and Right Margin as 10 so that between each box will have space.

Now, the width of the box is 1280 px, smaller than the real width of all 7 boxes (7 x 250px + margin).
Thus, you will see the scroll automatically appear without having to add a slider and add script to it.

Thank you for your request with Draggable Image Slider.
We will look into it if there are more requests from other users with real examples and suggestions on how this feature should be executed.
However, currently, I believe this is the workaround to achieve what you want in your case.

BR,

Dear Quynh Anh,

Thank you very much for the wonderful help. Yes, this is good enough for now. I will turn this into a real educational example and get back to you soon.

Thanks again!!

1 Like

You’re welcome, Koen.

Please feel free to reach back at this thread if you have any other questions regarding this task, or open a new thread if you are in difficulty with any other feature.

Hope the results come well in this case.

Best regards,
Quynh Anh

Dear Quynh Anh,

We’ve managed to create a first educational activity with the slider.

My colleagues and I think it would be a wonderful addition to the built-in questions in Active Presenter.

Here is a link to an online book with this AP activity embedded.

Download the appproj file here: link

7 Likes

Thank you Koen for your wonderful effort with this project and for all of your feedback :smiling_face_with_three_hearts:

Don’t hesitate to discuss more on our community here, or make any other suggestion you find helpful in ActivePresenter.
We will note down all of the opinions and consider other requests from users to decide which should be prioritized to implement soon.

Thank you again for your contributing ideas. Keep up the good work with your team, Koen :muscle: :muscle: :muscle:

This is a great feature request if the draggable slider was built-in as part of the questions in Active Presenter. The way presented now is fine but it is quite time consuming to create the slider, I’d appreciate it if it were one of the built in questions. This will be so helpful for the work that I am doing with Active Presenter.

4 Likes