This post is inspired by a question posed in the community. You may read the original post at the following link.

https://elearning.adobe.com/2019/02/get-name-object

In a way – this question touches on some things I have done in other projects but this was a nice idea and chose to expand on this further for Mike.

I believe I have captured the essence of what Mike is trying to do. (Although I did expand on it a bit further by adding some additional features.) As with the majority of my projects – I used JavaScript to build the actions.

This project uses only a single variable called   position   to track the currently active character in the word being built. The default value is  1.

I also created a small triangle marker which will move above the currently selected character to provide better visualization of where you are in the word.

I chose to layout the letters in a keyboard fashion – but of course, they can be positioned however someone wants.

I also added a space bar, a delete key, and a button to clear the entire word and start over. As another bonus, I added the ability for the letter position to advance automatically but you can still select whatever position you want manually. The delete key functions much like a backspace. I suppose I could have just named it that way.

The Code

Code can be found in two places.

1. For the selection of each letter
2. For each button in the keyboard

Letter Position Selection

For each letter – the code is essentially the same and does two things. Below is the example for the first letter.

cp.changeState(“marker”,”pos1″);
position=1;

We set the position of the marker above the letter being clicked on and set the   position    variable to reflect the position of the letter in the word appropriately.

Letter Choice

The keyboard selections can be broken down into two parts. Keeping to the request of the original post requires a single line of code on each button. Below is the example for the “Q” button. This is the first part.

cp.changeState(“letter”.concat(position),”charQ”);

I took advantage of JavaScript’s ability to concatenate to help change the state of the selected position. I named each of my ten letters as letter1, letter2, letter3, etc. This way the letter change will always track with the current value of the   position   variable.

The second part is adding the ability for the marker and position to advance automatically.

++position;
if (position==11) {
position=10;
}
cp.changeState(“marker”,”pos”.concat(position));

After changing the character, we increment the   position   variable, make sure that we do not keep incrementing past a value of 10, and then change the position of the marker to match.

Here is the working project.
Enjoy!