Create a phone simulation- dial a number

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

Good morning Will,

Actually, your method sounds pretty good, too! Personally, I prefer layers and triggers over variables. If you can, please share an example of what you accomplished. I'm sure others would love to see it - including me!

Thanks!

Christine

Hi,

I have attached the rough outline/idea for this part of my course.

Hope it is useful to people.

Will

That looks great, Will. Thanks so much for sharing

Thanks for sharing Will.  This is great!

Hi Will and Donna,

Just came across this thread and thought I'd mock something up quick.  It's a phone dial simulator that is set to the number 3-3-3-3

Thought you might find it helpful.

Mike

Hi Mike,

Thank you very much for that. Much much better than the one I had made- will have to examine 'counters' I think!

Thanks

Will

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

These are great - thanks for sharing!

Thank you Will and the great Storyline brains - your projects are great inspiration!

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.

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

Will,

No probs, I have refined it still further since the last post but still need to add the voice answering the phone

Paul

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.

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

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?

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! 

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. 

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! :) 

Hello,

I need a similar phone simulation, but two of the numbers will be the same, the other two will not (e.g. 7741). Any ideas on how to set up variables so the user will receive feedback if it was entered correctly and in the correct order?

Have a look at the attached and see if that would work for you. I adapted an old example, so that the first two digits are the same (1).

That's perfect! Thanks Michael!

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!

Thanks for sharing. This is exactly what I needed.
I only have to replace the interface of my Phone for my project.