Find Differences game, using SVGs, couple of user variables, one shared action and two simple advanced actions.
Have some fun with this game:
Hope you can reach the final view! SVGs were taken from one Adobe Stock image, using Export Assets in Adobe Illustrator. Some SVGs are used as buttons. Multistate objects, one shared action and two small advanced actions + two variables is all you need. No JS, but I’m sure this can be done with JS as well.
The usual white screen with grey arrow is replaced by a poster image. After the mysterious title slide game, progress bar and end image are all on one slide.
Since I have stacked objects, this would not be possible to replicate in a Fluid Boxes project.
Nice game, love these playful things in learning applications.
You say: “Since I have stacked objects, this would not be possible to replicate in a Fluid Boxes project”. I think it would. Maybe not precisely the same, but close. If you would use (a) Fluid Box(es) set to Static in the Properties Panel. Then you can stack objects as well. Even responsive.
Sure, but static fluid boxes have a lot of issues. Did you ever try them? In most cases it really messes up the ‘fluid’ layout on all screens. I try to avoid static fluid boxes whenever possible. One useful example are the feedback messages in the Quiz master slides. But that is a very strict layout, working fine on all browser resolutions.
I did try them. In my experience using text captions in static fluid boxes is not a good idea. Text doesn’t scale when the viewport shrinks. But if one sticks to smart shapes (without text of course), svgs and bitmaps, it works quite well responsively.
But in this case I am using Multiple SVGs on top of a big SVG. And include an action showing yet another bigger SVG when a correct difference is clicked. I don’t think putting this in one static fluid box will have an advantage over the scalable version (non-responsive) which I used. Those are not shapes at all because I need the unique functionality of SVG-buttons to limit the clickable area to the image itself instead of the bounding box.
I take your point. Have to admit that so far I’ve never worked with scalable (non-responsive) Cp modules. First it was breakpoints in 2017 with a trial version (just a month) and then restarting in 2019, it was all responsive and fluid boxes. Compared to you I still have a lot to learn .
You can still use Breakpoints, they give you a lot more control as developer than Fluid Boxes, but mean a lot more work as well. When Fluid Boxes workflow was released in 2017 (and Breakpoints became hidden, although not deprecated) I wrote this comparison (includes scalable projects):
http://blog.lilybiri.com/fluid-boxes-or-breakpoint-views
Thanks, Lieve, that I already knew. But as you say, breakpoints mean much more work. One has to design and consider several viewports. At least three. And after a lot of struggle, fluid boxes come handy. Coming back to your game: The brown whiskers on the rat to right took me a while to spot.
Yes, that was meant to be the tough one. A game cannot be too easy, needs some challenges.
This was one of my first games using SVGs, have been asked to create more and you can find a lot more. After all, gaming is attractive for most people, notwithstanding their age.
Great !
Great, very funny!
Got all 7 .. it was fun.. I may have to look at captivate again.
Thanks
If it has been a while since you used Captivate, you may be in for a pleasant surprise. I published a couple of games using the new features of SVGs in 11.5 but there is a lot more to discover.
If you want to learn more about the setup of this game, have a look at:
https://elearning.adobe.com/2020/01/find-differences-game-setup/
Nice example.
I could only get 5! Very good. Thank you.
I didn’t provide a cheat sheet
If you have a look at the Setup blog, maybe you’ll find another hotspot?
https://elearning.adobe.com/2020/01/find-differences-game-setup/
Bonne Année, Ludovic!
Je n’avais pas l’intention d’expliquer, parce qu’il me semble que les blogues dans cette communauté n’ont plus de visiteurs. Pas de commentaires, quelques ‘likes’ mais ou je ne suis pas même convaincu qu’ils ont lu le texte. Puisque donner un ‘like’ résulte dans l’augmentation du score de celui qui donne, pas celui qui a pris la peine d’écrire. Essayez de me convaincre, pour la partie de Captivate, pas d’Illustrator qui m’a pris la plupart du temps.
J’ai plutôt des affinités avec le bouddhisme Tibétain, mais je ne voulais pas détruire un mandala ou autre image de mon tanka….
Merci Lieve !…
Et super merci pour ton dernier blog ! (http://blog.lilybiri.com/find-the-differences-game)
😉
…
Je ne savais pas que tu avais aussi des affinités avec Confucius ?!…
Super cet exemple de game !… J’espère que tu développeras prochainement un peu plus sa réalisation ???…
En tout cas je te souhaite une super bonne année !…
…
Can you share it, please?
Thank you 😀
Can you share your project with me, please?
Did you see any user sharing a cptx project? Sorry will not share it, one of the reasons is that it has a licensed Adobe Stock image used all over the project.
The full setup is explained in a blog post:
https://elearning.adobe.com/2020/01/find-differences-game-setup/
You must be logged in to post a comment.
