https://elearning.adobe.com/2020/01/captivate-elearning-challenge-003-building-a-better-button/

A while ago, in an attempt to teach myself complex interaction building in Captivate, I tried to build a Captivate version of the MasterMind game that some of you might know. If you don’t, e.g. see here. Hope I’m not breaking any copyright with this.

In a nutshell, a player tries to crack a color code, that the other player (in my representation the computer) generates, by making a series of more and more educated guesses and deductions, receiving feedback on the way. To do that he repeatedly places an array of color pegs on the board, which will then get compared to the hidden code and evaluated for feedback.

One of the challenges was how to represent the color peg selection on the board. Drag and Drop from a pool would have probably matched the experience from the original board game best, but would not necessarily provide the best user experience in the electronic version. Therefore I decided to represent them as buttons of some sort, that when clicked, cycle from an initial empty state through all available colors.

As mentioned, this was solely meant to be an exercise for myself, and was not meant to be published anywhere, so be warned that it takes a long time to load and that there are some bugs! Oh, and don’t expect a polished UI either (the color pegs and the feedback pegs are actually the only things that are styled).

It’s non-responsive and has been solely tested on a Windows desktop computer with Chrome. No idea how it would work for any other setup.

Try it here.

If you want to take a look under the hood, you can download the project file under the link below.

MasterMind_Cp11_5

Sorry, it’s a mess  since unfortunately I didn’t really document anything.