Clik general functionality AP9

Hello everyone. I have this problem.
If you normally click on any button - everything works correctly. However, if you click with a short drag, which happens mainly on tablets or phones - the button not working. I can solve this problem with javascript. However, I don’t want to write a separate event for each button. Is there any global solution to solve this problem?

You can Try on any button. Přess the button and make short drag befor mouse up.

Users often click like this and then it looks like an error.

Thanks in advance for your ideas.
Lukas

2 Likes

@mpluky - I can replicate what you describe above.
Please do not think me rude for saying this but I might say that this is really more a user problem than a designer problem.

I do commend you for trying to remedy the issue from within but I wonder if it really would be best for the learner - who will likely come across other projects where this type of error checking is not put in place - to improve their ability to simply click/tap without dragging.

I am curious though - you say that it looks like an error. Do you have some sort of action that is triggering on failure to click? I would see greater need to rectify the issue in that case - but I still see it as user issue.

I wonder if - in a future version - that there was a separate action for mousedown and mouseup so that if you do drag a little but mouseup while still over the button that it would work fine…?

It sounds like you have a working solution already - though I might suggest you’re not obligated to implement - but I would be curious as well to know if there is another answer here. I look forward to what staff has to say.

1 Like

My customer is right. AP button is behaving little incorrectly. If you click in the browser (in normal HTML) on any button (Input type button or a href) and at the same time do a short drag and then mouse up, the action will be executed. In AP not. I think… Thre behavior of the buttons in the standard browsers must really be considered as standard.

Browser: hold mouse down → do short drag in the button the area → leave mouse up (working)
AP: hold mouse down → do short drag in the button the area → leave mouse up (not working)

I already have several cases where students report that they have to click multiple times :frowning:

Lukas

1 Like

You know - the more I reflect on this - I totally agree.

I have seen this many times in my own projects.
It usually happens to me when I am testing and am trying to move quickly.

Is your JavaScript solution to implement a mouseup listener? Or what are you doing there?

I wonder about using a generic code snippet that will fetch the name of the button so that the exact same code can be used for all buttons.

Hmm…

1 Like

Now I have a very simple… one button solution.

var button = prez.object(‘START’);

$(button.node).on(‘pointerup’, function() {
console.log(“mouseUp”);

setTimeout(function() {
prez.runAction(‘CONTINUE’,{}, e); // My Own Action
}, 200);

});

I haven’t thought of a universal solution yet…

Lukas

1 Like

Hi,

For your information, with HTML elements, mouse down and then mouse up within the element area will have a click event, regardless of whether there is drag or not between mouse down and up.
However, in addition to clicking, objects in ActivePresenter can be dragged to select text or have swipe events, etc. so we set a limit on dragging beyond the limit, a click will not occur.
Users can reset this limit by adding a script to the project On Load event, for example, allowing a 5px drag still counts as a click:
AP.ClickMaxDistance = 5;

Hope this helps.
BR,
Thuy

5 Likes

@PhuongThuy_Le
…and this post wins the Internet today!
Gold

2 Likes

Hello,
If the element is a drag drop, it should some distance have a limit. But if the element has a click , it must not have any limit… I thing…

AP.ClickMaxDistance = 50;
Maybee I negatively affect the dragndrop functionality of objects by setting it?

Thanks Lukas

Hi,

An ActivePresenter object can handle many events simultaneously, so it is not worth checking the limit when using only clicks.
Furthermore, this is to create a good experience for users when they use the click event. It doesn’t affect anything else.

For example, if you set the max distance as 50, dragging or swiping works ok.
Only dragging within 50px will still have a click event.
This may bring not a good experience to users.

BR,

now it works fine
:grinning: thanks

1 Like

Dear Thuy,

We only recently discovered this discussion on the forum. We agree with @Gregs that your solution is Gold!

Our AP creations now work so much better on tablets and phones, because a normal touch or mouse click is so easily moved.
Since many other AP users might have also missed this discussion, we would love to see this code implemented into AP by default, instead of having to copy/ paste it into all our existing and future projects.

Highly appreciated!!

Kind regards,

On behalf of the Education for Life team,
Koen
www.mytalkingbooks.org

2 Likes

Dear Koen,

Thank you for your kind words!
We’re delighted to hear that the solution positively impacted your projects, especially on tablets and phones, where input behavior can be tricky.

Regarding your suggestion, this depends on the content the user creates to choose the appropriate value, so we cannot change the default in ActivePresenter.
Instead of copying/pasting across projects, you can set up the scripts into one project > save that project as a theme/template > and then create a new project from there.

Kindly take a look at this tutorial for details: How to Save and Use Custom Themes in ActivePresenter 9

Have a great time :slight_smile:
BR,
Thuy

The ClickMaxDistance solves the problem when the user clicks a button but drags it slightly at the same time.
But.. the fix only works when you use a mouse, it doesn’t work when you interact with it on a smartphone.

Here is a Fractions Game that we build with Active Presenter. It works great when I play it on my laptop, but when playing it on my phone, the click still needs to be a pure click, no drag is allowed!

Hi Koen,

In this case, it’s not recommended to modify it so that an off-target tap would also be considered a click. A native HTML button on mobile doesn’t behave that way either. But if you still want to make the change, please take a look at this project:

custom click event.approj (1.6 MB)

Hope this helps!

Hi Hang,

Yes!! This works great! With this code I can turn my AP10 projects in Android apps, where children would have no difficulty pressing on buttons anymore. Thank you!

I thought you had applied the code to the project properties, project-on load, but I saw that you added it to the page-on load. You also specified the new click behavior to 2 specific shapes.
Would it be possible to apply it to every button, shape or image that has an on-click action?
I already asked AI, but I can’t get working code from AI.

Thanks so much for your help!
On behalf of the Education for Life team,
Koen den Hartogh

1 Like

Hi,

Please find a sample project attached for your reference.

custom click event v2.approj (1.1 MB)

Have a great day!

Hi Hang,

Thanks so much for this new code! You are about to solve one of our big issues with Active Presenter: Drag-intolerant clicks!

Your new code works wonderful on any shape that has a click action attached to it.
Would it be possible to apply this new click behavior to any click event, especially buttons?

Thanks so much on behalf of our team and three Ministries of Education in the Pacific that will be learning Active Presenter next month!

Kind regards,
Koen

1 Like