April 6, 2018
Expanding on the Concatenate Technique
Comments
(4)
April 6, 2018
Expanding on the Concatenate Technique
I am currently a provider of technical training and support in the electronic manufacturing industry. My prior training and work experience as a teacher, network administrator, web design, and instructional design make me well prepared to design it, develop it, and deliver it. I am a father of five, a US Army veteran, and I enjoy playing the guitar as well as performing in local community theater. 
Legend 99 posts
Followers: 153 people
(4)

In my last post on concatenating, we looked at how to change states based on two variables.

This time, I wanted to expand on the technique a little bit to show another usage and application to fuel your own creative thinking.

In this example, the scenario is that we have a new employee joining the team and they need to access all of their training materials within the locked briefcase – they just need to open it.

Now – you could create whatever clever means for the new person to acquire the codes to unlock each side of the briefcase but I will simply give them to you.

The left lock is code 348

The right lock is code 682

This project has two concatenations going on.

  1. I concatenate the word “dial” with the value 0 through 9 to create “dial0, dial1, dial2, etc” for each of the number wheels.

    cp.changeState(“wheel1″,”dial”.concat(dialA));

  2. Then I concatenate the three variables for the the wheels on the left and the three wheels on the right separately.

    window.comboLeft=String(window.dialA).concat(window.dialB).concat(window.dialC);

    This is so that I can have a check for the whole code to unlock that side.

    If (comboLeft==348) {
    cp.changeState(“leftLock”,”open”);
    }

As you can see, the concatenation portion of this looks different which is one reason I wanted to have this second example.

In this case, I take the number values from the variables and convert them to a string so they can be easily put together.

I do the same for comboRight on the other side but with dialD, dialE, and dialF.

window.comboRight=String(window.dialD).concat(window.dialE).concat(window.dialF);

Here is the link  to see the briefcase in action.

https://s3.us-east-2.amazonaws.com/captivateshare/briefcase/index.html

As always, I am interested to know how you might implement a technique such as this.

4 Comments
2018-04-06 19:55:50
2018-04-06 19:55:50

Great idea. This may solve a problem I’ve been pondering.

Like
2018-04-06 10:54:22
2018-04-06 10:54:22

This is really neat. Thank you for sharing the idea. Great inspiration!

Like
2018-04-06 08:53:16
2018-04-06 08:53:16

Greg, nice piece of work, how does the script recognise the image as a value? I think this could be useful in a fact finding onboarding ‘mission’ I imagine the learner finding info about the company and ‘hidden’ in the info is the date the company started xx/xx/xx

Interesting stuff( I need to learn javascript!)
Chris

Like
(1)
>
Christian Lee
's comment
2018-04-06 10:41:52
2018-04-06 10:41:52
>
Christian Lee
's comment

For each of the number wheels there are 10 states for the numbers 0 thru 9.

Each state has the name of dial0, dial1, dial2, etc.

In an advanced action we would set up a change state by choosing change state, then selecting the name of the object you want to change, then choosing the name of the state you want to change it to.

The code does the same thing but I need to have them change based on a changing variable as the user clicks the same button over and over. Concatenating lets me put two or more things together. In this case, we put together the word “dial” with the changing variable as the wheels are spun.

Hope that makes more sense of it.

Like
Add Comment