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.
- 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));
- 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.
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
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.
You must be logged in to post a comment.