I would like to realise a puzzle. Therefore, I have cut the final picture into several smaller ones and positioned them on the slide.
Each one is a drag source.
Additionally, I have rotated them, so that they are turned upside down and the like.
If the player clicks on a puzzle piece it rotates.
(On click JS: prez.object(‘Drag Source_4’).rotateBy(90); )
The drop targets are ordinary placeholders (no pictures) which are larger than the puzzle pieces.
Now, I would like the player to be able to rotate the pictures, position them on the targets and see if he was right, and change it as long as it takes to find out the right position and rotation.
Unfortunately, each time that a source is dropped to a target, it rotates into its proper angle, so that it is automatically correct.
Is it possible to deactivate this?
I hope, my descripton was clear enough to explain what I am trying to achieve.
Once dropped into a drop target, the drag source will have the same rotation angle as the drop target.
It’s not possible to disable this feature.
However, you can add script to the drag source On Drag End event, or the drop target On Accept event (with a Drag Source condition) to rotate the drag source back.
that sounds like a good solution. I have tried it, but unfortunately couldn’t get it to work properly.
But, I am only a beginner to JS.
I used the following code: var rotationvalue = prez.object(‘Drag Source_Name’).rotate(); //to get the current rotation in degrees prez.variable(‘rotation’,rotationvalue); // to see in a textbox the degree → works prez.object(‘Drag Source_Name’).rotateBy(rotationvalue); // to attribute the degree to the object → does not work
It does not work. Neither with On Drag End nor On Accept.
And it does work if I use ‘rotate’ instead of ‘rotateBy’ as well.
The drag source will have the same rotation angle with the drop target when it’s dropped so prez.object('Drag Source_Name').rotate() in On Drag End or On Accept will be the rotation of the drop target, not the drag source.
You should get and store the drag source rotation before it’s dropped and set it again when it’s dropped.
For example:
\\ in On Drag Start:
this.myRotation = this.rotate(); // this is the current drag source
\\ in On Drag End:
this.rotate(this.myRotation);
Of course if the rotation keeps remain unchanged (e.g. always 90 deg), you can set that value directly instead of getting it from the drag source.
You should use rotate(degree) function in this case. rotateBy(deltaDegree) will rotate the object by an additional deltaDegree. For example, if the object rotation is 20 degree, rotateBy(30) will make the rotation become 50.
Now, I am facing the following problem:
All drag sources are accepted by all drop targets → that’s the way I want it
Only one drag source is correct with one drop target → that’s ok
Yet, I want it only to be ‘correct’ if the rotation degree is correct as well.
So, the correct drag source is only really correct if its degree is, for example, 180 deg.
Is there a way to realise that?
I thought about addin a condition to the ‘On Correct’-Event of the ‘Drag-n-Drop Question’.
Yet, I have no idea how.
Does it need a variable for each drag source that gets and stores the rotation of the source?
How could I realise that?
It’s not possible to change the question result (correct or incorrect in the report) based on the drag source angle.
If you need to change only the feedback message, you can use JavaScript, object states or variables.
You’re using JavaScript to rotate the drag sources so you should also use JavaScript to check the correct angles:
// remove Show correct feedback action in the question On Correct event
// and add the script below
// update sourceAngles by your drag source names and angles
var sourceAngles = {
'Drag source name 1': 90,
'Drag source name 2': 0
};
// check angles
var correct = true;
for (var name in sourceAngles) {
var dragSource = prez.object(name);
if (!dragSource) {
alert('Invalid drag source name: ' + name);
return;
}
if (dragSource.rotate() != sourceAngles[name]) {
correct = false;
break;
}
}
// show feedbacks
if (correct)
prez.showFeedbackByName('Correct Feedback');
else
prez.showFeedbackByName('Try Again Feedback');
this looks great. Thank you very much.
Unfortunately, as soon as I add the script, without any changes, and try to preview the slide, I get an error message from the Browser: “Error parsing the presentation. Check the browser console for more information.”
It is definitely the script. Because as soon as I delete it, the preview works again.
Best regards,
Augustin
------ UPDATE ------
After trying it several times, the preview now works.
Yet, the submit button does not show the ‘correct feedback’, even if everything is correct.
------UPDATE 2------
I have just emailed the project file.
The retry button in the Incorrect Feedback, does not work either. The slide does not restart.
I’m sorry I typed incorrect characters for JS comments so the parsing error.
In your project, the drag source names in the script are incorrect so the script doesn’t work.
I’ve also updated the script to show the Try Again feedback, and set the question Max Attempts to infinite to make the try again button work.
Please check the project I’ve sent back to your email.