Create a phone simulation- dial a number

Hi,

Had a look and dont think this question has been asked before.

I am creating some learning on what staff should do if the encounter a fire. Rather than just telling them to dial '3333' I want this to be simulated using a phone key image that they can dial numbers on.

I have added several 'states' to the keypad to give the illusion of it being pressed, but am not sure how I can get the functionality that allows a learner to press the 3 button four times to then generate a message such as 'hello swtichboard'. I would if possible like the other buttons to work, so that if any other key is pressed an incorrect message would be generated.

Thanks in advance for any suggestions, solutions or ideas.

26 Replies
Christine Hendrickson

Hi Will. Welcome to E-Learning Heroes!

The only thing that comes to mind would be number variables. You could have the variable increase by "1" each time the user clicks the "3" button on the phone. Then, when the variable reaches the value of "3", it could display the switchboard message.

For the other numbers, you wouldn't really need to use the same method, because none of them will be correct. Right? You could just have a trigger on them for "on click" to display your feedback for the wrong numbers.

I like this idea. Let me know how it goes!

Will Bladon

Christine Hendrickson said:

Hi Will. Welcome to E-Learning Heroes!

The only thing that comes to mind would be number variables. You could have the variable increase by "1" each time the user clicks the "3" button on the phone. Then, when the variable reaches the value of "3", it could display the switchboard message.

For the other numbers, you wouldn't really need to use the same method, because none of them will be correct. Right? You could just have a trigger on them for "on click" to display your feedback for the wrong numbers.

I like this idea. Let me know how it goes!



Thank you for your reply Christine,

I wasn't really sure how to do number variables as per your suggestion. However, I did get around this problem in the end by having 4 buttons that were layered on top of each other (and were set to no fill colour, or border). The first three buttons were set to dissapear when clicked, and the fourth would bring up a message telling the learner this was correct. All the other phone buttons were then set to just bring up a 'wrong number' message if a learner clicked on them (as you suggested).

Will try and work out the number variable suggestion you gave, as that sounds simpler.

Thanks

Mike Enders

Will, 

The "counter" is simply a number variable that's keeping track of how many times a learner has clicked a key on the keypad. Let me know if you have any questions as you look through the set up.  There are a lot of triggers, but the underlying architecture is pretty straightforward.  And since you can copy and paste triggers, it's really easy to set this up. I created the triggers for the number "1" keypad button, and then copied and pasted them to the other number buttons and did a quick adjustment on each in the trigger panel area.

Mike

Paul Brennan

Will, I am fairly new to Storyline and was looking for exactly the same solution. As I still need to get my head around some of the more advanced interactions I found a simpler solution which is quite effective. It could be further modified by applying some of the interactions mentioned above. The number students need to identify is 2222. They are asked to click on the number they need to ring (4 times). If they press any other digit other than two a message comes up telling them they have the wrong number and the dial tone changes to the engaged tone. If they press 2 the phone starts ringing. The only thing missing from the attached project is I will be adding a voice at the end of the 2 rings.

Will Bladon

Hi Paul,

Thanks for posting your design. That is really awesome, I hadnt really thought about adding audio to it, but it definately improves it. Like the idea of adding speech at the end of the ring- rather than having my 'hello switchboard' text, will add this as speech.

Great ideas, and thanks again for posting.

Will

Daniel Bond

I stumbled across this thread while learning about using variables, and thought the attached might be useful to anyone wanting to do achieve this using variables and JavaScript rather than multiple buttons. My solution doesn't look anywhere near as good as yours, but hopefully it conveys the basic concept of how it would work. Note that it can be modified to work for any given value or length of number (or even allow a variable length, etc.) by modifying the Show Layer triggers.

Mike Enders

Welcome to the Heroes Community Daniel!

And thanks for posting this example.  

I was just thinking that there a lot of people like me who don't know much about Javascripting and would love to see how it helps your design on this project.  Would you be willing to create a Screenr (and post the link to this thread) to walk us through the dynamics and how Javascripting is working inside your design on this?   I think a lot of us would find it really helpful.  It could also serve as a great resource for people who visit this thread in the future.

Thanks for sharing and again, welcome to the community!  Great to have you here!

Mike

Jeremy Heersink

I'm looking to do something similar, but need to include a delete (or backspace) button.  I'd like to do this without using Javascript if possible.  I'm having them enter (using an onscreen keypad) a User ID number.  I've got it working to add the number, but am struggling with dropping off numbers if they want to delete.  

Here's how I'm adding the numbers.  Let's say they choose X as the number.  I take the current ID number, multiply by 10 then add X.  This will work for as long as you need it to be. 


I can divide by 10 to drop the last digit off, but it then gives me a decimal.  Any way to force a number variable into an integer?

Chris  Pearce

Hi Daniel, I love the functionality of this example! I don't know JavaScript yet (am learning) but have looked at the code and have figured out how, for instance, I'd have to modify the code to add a space bar function if I wanted to.

I've used an adjust variable trigger to create a functioning clear button, but would love to create a functioning backspace button, too.

Do you know how I would need to modify the JS built into your keypad buttons to create a backspace key? Any feedback would be very welcome! Thank you! 

Leslie McKerchie

Hi Chris!

This thread is pretty dated and I'm not sure that Daniel is still subscribed. JavaScript is not a specialty of mine nor is it supported by Articulate.

Hopefully someone in the community will be able to pop in and assist. You are also welcome to try to reach out to Daniel directly if need be via the 'Contact Me' option on the user profile if needed. 

Chris  Pearce

Thanks, Leslie! I reached out to him directly. I've also reached out to another member, Marco Faust, whose calculator on this thread seems to include a simple, functional backspace button. 

https://community.articulate.com/discussions/articulate-storyline/javascript-support-needed#reply-354648

I'm hoping someone from the community has a good tip! Thx! :) 

James Callender

Hey guys! What a life saver to find this thread. I looked before but must not have typed in the correct search terms. I am working on a replica HMI for some of our machines, and I need a way to make the number pad completely interactive. There are a few different number pads in the training, and each have different parameters; however, the appearance is the same on all of them.

I've attached a copy of what I'm working on right now. I found the sample Mike Enders made 5 years ago to be very near what I need, but I'm trying to see if it's the same philosophy. Also, if someone can explain to me the logic behind how they set it up, that would help me build other things in the future. Thank you all!