I’ve got a drag and drop quiz with 4 questions. Each drop target must be able to accept all 4 drag sources even though there is only one correct answer. The user presses a button to submit all interactions. It calls a feedback page if there are any errors. After the ‘Try Again’ button is pressed on the feedback page, I want it to clear user input only for the incorrectly placed drag sources. The correct ones should remain in place. This way, the user can identify where their error is.
Any ideas how I can do this? I know that I can run the following JS to clear individually dropped items:
prez.object('Drop Target').clear();
But there’s nothing in the API documentation to give me an idea of system variable/method names for active presenter correct/incorrect answers so I can create a conditional with the clear() method.
What I might do is to have my own tracking with a variable for each target.
If correct - set variable equal to 1
If incorrect - do nothing (leave as 0)
When learner submits - perform the conditional.
if correct - do nothing
if incorrect - clear target
Perform the check on each target
Another approach might be to have other visual feedback such as a green check and red X to indicate the correct and incorrect responses and then simply let them rearrange as needed.
When they resubmit - update the feedback.
I’m totally with you here Greg. Your suggestion is a version of how I was envisioning it. But do you know within the ActivePresenter API how it determines what is correct? It’s not in the documentation and the ‘On Correct’ and ‘On Incorrect’ events are written into the GUI so I don’t know how to make the conditional. One way of running this hypothetical script (with the elements that are missing) would look something like this.
let answerCorrect = false;
let drag_object1 = prez.object('drag_object1');
let drag_object2 = prez.object('drag_object2');
let drag_object3 = prez.object('drag_object3');
let drag_object4 = prez.object('drag_object4');
/*This would set correct/incorrect on release anytime the drag object is released
onto any target.. but I don't know the right method names in active presenter to
make this work. onrelease is wrong here... this.correct is also wrong.*/
function handleImageRelease(drag_object) {
drag_object.on('release', function(event) {
if (this.correct) {
answerCorrect = true;
} else {
answerCorrect = false;
}
});
}
// Apply the function to each drag_object
handleImageRelease(drag_object1);
handleImageRelease(drag_object2);
handleImageRelease(drag_object3);
handleImageRelease(drag_object4);
And then on Submit, something like this (presuming the same variables):
// Declare drop_target variables
let drop_target1 = prez.object('drop_target1');
let drop_target2 = prez.object('drop_target2');
let drop_target3 = prez.object('drop_target3');
let drop_target4 = prez.object('drop_target4');
// Check and clear drop_target variables if false
if (drag_object1 === false) {
drop_target1.clear();
}
if (drag_object2 === false) {
drop_target2.clear();
}
if (drag_object3 === false) {
drop_target3.clear();
}
if (drag_object4 === false) {
drop_target4.clear();
}
Edit: I added a submit button with clear action if the wrong object is in the drop target.
I am not sure what the API connection is here either so that is why I said I would make my own variable to track it.
When the drop target accepts the correct drag object just update your own variable. Likewise, if folks are allowed to redrag, you’ll want to change the variable again if an incorrect object is accepted.
Suppose I create my own variable for drop target 1 - lets call it drop1
onAccept of a correct response prez.variable("drop1",1);
onAccept of an incorrect response prez.variable("drop1",0);
create similar setups for each of your drop targets.
Now you can do your conditionals
if (prez.variable("drop1") == 0) {
// clear it
}
See attached file for example of what I am thinking you’re trying to do.
Perhaps it will help.
Thanks Greg. That worked great. The pic was really helpful too. Unobservant me…I hadn’t realized that ‘drag source’ was a conditional element in the GUI drop down menu.
