Trying to create a interactive puzzle so the user can drag and drop the rectangles into the target surface but also that he will be able to rotate each piece from horizontal to vertical position by using one rotate button to all the pieces. Is it possible? Attached my experimental story.
Sounds and looks like an interesting need. Hopefully someone in the community will be able to chime in and assist with this design need.
Is the intent that the rotate button moves all of the rectangles at the same time or how will you designate which rectangle is to be adjusted? Wasn't sure that I was totally following along.
Well, what I wish for is that I could rotate each rectangle separately, cause sometimes the need is vertical, sometime horizontal. Exactly my problem is how to designate which one to rotate.
Actually I tried that but because of the drag and drop, once you drag the
shape you click on it and that also the trigger to rotate it and it can't
go together, that is why I thought about a separate button like you use in
ppt for example or any other software when you want to rotate a shape and
you use the rotate button placed in the toolbar.
I build something to test for you. It needs 7 trigger and 2 variables for 1 element to rotate.
Variables:
activate_rotate_item_1 is a true/false variable to activate/deactivate the rotation ability
rotate_item_1 is a numeric variable to change states
Trigger:
First you need is to activate and deactivate the rotation of the item. So when item 1 is dragged on the rotation platform it changes to true. True means you can rotate it, fals you can´t. When it goes off the rotation platform it changes back to false. (= trigger 1 and 2) And of course you need a trigger that adds 1 to the rotate_item_1 variable set on a rotation button. (= trigger 3)
Then you need in my case 3 (or how many rotation states you need) trigger. (= trigger 4,5 and 6) For every rotation state one trigger which changes the state of item 1 when the rotate_item_1 variable changes to the accordingly number. I did a loop, so every time its more than 2, it goes back to 0 which is also the normal state. (That would be trigger 7.)
This could end in an endless trigger list depending on how many items you have in your puzzle, but might be worth it if its a nice one. ;) I would test every item you do step by step to avoid making a mistake and have to go trough all the trigger in the end.
Only problem I see is when you want to show right away if its positioned right or not. Like highliting it in green or changing from black and white to coloured. That would be a massive act setting wrong conditions for every rotation state. But you could disable moving correct positioned items like hiding the dragged item and change the state of the drop item to the correct picture/puzzle piece. That´s how I would do it. :) So the user knows its right positioned when he can´t move it anymore. And you can even do the change from black and white dragged item to coloured right placed item (because its the drop item).
Hope that wasn´t too much input for you. :D And close to what you want to do as a puzzle.
7 Replies
Hi Betti!
Sounds and looks like an interesting need. Hopefully someone in the community will be able to chime in and assist with this design need.
Is the intent that the rotate button moves all of the rectangles at the same time or how will you designate which rectangle is to be adjusted? Wasn't sure that I was totally following along.
I've been inspired by jigsaw, puzzle and this article when designing puzzle-like drag and drop interactions
Hi Leslie!
Well, what I wish for is that I could rotate each rectangle separately, cause sometimes the need is vertical, sometime horizontal. Exactly my problem is how to designate which one to rotate.
Perhaps you could add the toggle to each rectangle with it's own variable, rather than utilizing one button.
Actually I tried that but because of the drag and drop, once you drag the
shape you click on it and that also the trigger to rotate it and it can't
go together, that is why I thought about a separate button like you use in
ppt for example or any other software when you want to rotate a shape and
you use the rotate button placed in the toolbar.
Oh, that makes sense Betti! Hopefully someone will be able to assist you with your design. Designer I am not :)
Hi Betti,
I build something to test for you. It needs 7 trigger and 2 variables for 1 element to rotate.
Variables:
activate_rotate_item_1 is a true/false variable to activate/deactivate the rotation ability
rotate_item_1 is a numeric variable to change states
Trigger:
First you need is to activate and deactivate the rotation of the item. So when item 1 is dragged on the rotation platform it changes to true. True means you can rotate it, fals you can´t. When it goes off the rotation platform it changes back to false. (= trigger 1 and 2) And of course you need a trigger that adds 1 to the rotate_item_1 variable set on a rotation button. (= trigger 3)
Then you need in my case 3 (or how many rotation states you need) trigger. (= trigger 4,5 and 6) For every rotation state one trigger which changes the state of item 1 when the rotate_item_1 variable changes to the accordingly number. I did a loop, so every time its more than 2, it goes back to 0 which is also the normal state. (That would be trigger 7.)
This could end in an endless trigger list depending on how many items you have in your puzzle, but might be worth it if its a nice one. ;) I would test every item you do step by step to avoid making a mistake and have to go trough all the trigger in the end.
Only problem I see is when you want to show right away if its positioned right or not. Like highliting it in green or changing from black and white to coloured. That would be a massive act setting wrong conditions for every rotation state. But you could disable moving correct positioned items like hiding the dragged item and change the state of the drop item to the correct picture/puzzle piece. That´s how I would do it. :) So the user knows its right positioned when he can´t move it anymore. And you can even do the change from black and white dragged item to coloured right placed item (because its the drop item).
Hope that wasn´t too much input for you. :D And close to what you want to do as a puzzle.
Susi
This discussion is closed. You can start a new discussion or contact Articulate Support.