Finding all drop targets and checking the drag source names

Problem: Would anyone know how to code a javascript function that finds all the dropTarget objects on a slide and checks the name of the drop target against the name of the drag source currently accepted? All of the drop targets have “Drop Target …” in their names. And all the drag sources have “Drag Source …” in their name. For example, I would like to ensure that all “Drop Target 7” objects have a “Drag Source 7” accepted in them.

I am creating a Sudoku exercise for students to use in learning math reasoning skills.

ActivePresenter version: 8.5.3

OS: Win 10

Notes: My apologies, but I am a complete Javascript novice.

Hi,

You can use Drag-n-Drop questions in ActivePresenter to do that, instead of javascript.
Just select any drag source and drop target, respectively.
Then, navigate to the Properties pane > Interactivity tab > General section and rename them.

Next, specify the accepted values and the correct values in the Accept List dialog:
image
For example, to make all “Drop Target 7” objects have a “Drag Source 7” accepted in them, just select the “Drop Target 7” object on the Canvas > Accept List dialog > tick the “Drag Source 7” Accept checkbox.

Check out this tutorial to know how to work with Drag-n-Drop question:

Regards,
Thuy

Hi,
I am also interested in finding a way to automatise that in JS.
I would like to have some JS code that starts on drag enter, then compares the name of shape that was dragged with the name of the drop target.

I could get the name of the object on drag start and store it in a variable and then compare the value of that variable to the name of the drop target on drag enter. But is there an easier way?

In short: is it possible to get the name of a drag source as soon as it enters the drop target?
Thanks, Rolf

Hi Rolf,

In every JS code for each event, you can use objects below:

  • this: the object on which the event occurs
  • prez: the presentation object
  • e: the event object

In case of the drag enter event of a drop target, this is the drop target, e.value is the drag source entering the drop target.
So the drag source name is e.value.name().

Regards

Thanks a lot. That’s EXACTLY what I was looking for.
Rolf

And another related question.
Is it possible to set the list of accepted and correct drag sources through JS?
Thanks, Rolf

Hi Rolf,

Unfortunately, it’s not possible to set the list of accepted and correct drag sources though JS.

Regards

Hi Rolf,

Don’t know if this helps, but we built a Sudoku game and consolidated all the checking logic into a single script fired from a CHECK ANSWER button.

It relies on the name of Drop Source object corresponding to the name of the Drop Target object. I’m sure it could be greatly simplified since I’m not a javascript person, but it works. The primary issue it addressed was that we didn’t know which drag source was going to be dropped on each target since we provided pools of each number.

In any case, here is the code:

var success = true;

prez.slide.children.forEach( function(child) {
    var childname = child.name();
	if(childname.match(/Drop Target /)){
		var dragSources = child.dropHelper.droppedObjects(); // dragSources is an array
		if (dragSources.length != 1 || (dragSources[0].name().substr(12, 1) != childname.substr(12, 1)) ) {
			success = false;
		};
	};
});

if (success) {
	prez.showFeedbackByName('Correct Feedback');
} else {
	prez.showFeedbackByName('Incorrect Feedback');
};

Hope it helps.
Keith

Thanks, Keith,

I’m not a programmer either, so I’m mighty impressed!!!