Javascript Support Needed

Apr 30, 2014

Marco Faust
By Marco Faust

Is there any way to know the names of individual objects and fields within the player and access them directly with Javascript?  

I am trying to create a simple calculator that can work within Storyline.  In order to do that, I need to access a data entry field and enter information at the cursor location.  I can't find any documentation on how to access these through javascript.  It seems the only thing they want us to be able to do is alter variable values, and that isn't enough to accomplish this.  A good calculator will allow data entry wherever the cursor is positioned.

Any hints or advice would be greatly appreciated.

11 Replies
Cheng Li
almost 10 years ago04/30/14 at 11:15 am (UTC)

Hi Marco,

I assume this is what you wanted...

You can write the following JS code: 

      var player = GetPlayer();

      var a = player.GetVar("TextEntry");     //Here TextEntry is the variable associated with the text entry box.

      alert("This is variable " + a);

The code can grasp the value of the entrybox and give it to variable a.

Cheng

Marco Faust
almost 10 years ago04/30/14 at 11:56 am (UTC)

Thanks Cheng, but that isn't it.  The TextEntry variable is created when the DataEntry field is created.  What I want to do is place the cursor at some point in the middle of an existing string (in the DataEntry box) and enter whatever I want at that location with Javascript.  I can't seem to find anything that tells the javascript function WHERE in the string the cursor is located.  In order to do that, I have to access the DOM of the player and call out the text field by name.  It is as if Articulate wants to keep that a secret from me.  I know it is there, but nothing seems to allow me access to information as to the field's name.

Marco Faust
almost 10 years ago04/30/14 at 5:21 pm (UTC)

Hi Cheng,

In slightly better calculators, the user can put the blinking cursor into the string of characters in the viewing window and enter another number or an algebraic symbol, or parentheses, etc.  The keys have to be able to put the characters into that place.  Using a dataentry field does allow the cursor to be positioned as necessary.  The problem is getting the numbers and symbols entered at the cursor from the "keyboard."

In order to do that, I need to use javascript when keys on the calculator are clicked.  With javascript, the only thing I seem to be able to access is the string of characters that are currently in the dataentry field/box.  I cannot access information (in javascript) as to where the cursor is currently located.  If I knew that, I could then insert the characters that are clicked by the user on the calculator buttons.

I have built a version of my calculator with both a rectangle with the variable displayed in it (top) and with a dataentry region with the same variable connected to it.  You will see that you cannot click in the upper display at all.  You can click in the lower one and get the cursor to appear anywhere.  However, when you click the keys, the data always inserts at the end of the string.

www.chronodex.com/articulate/calculator/story.html

Click on the "Show Calculator" button to see.  Please ignore the "test" button for now.

Cheng Li
almost 10 years ago05/01/14 at 10:02 am (UTC)

Hi Marco,

Try the following code:

//////

<!DOCTYPE html>

<html>

<body>

<input type="text" id="txt" value=""/>

<p>Append Number to Existing Number</p>

<button onclick="myFunction()">1</button>

<script>

function myFunction() {

    var caretPos = document.getElementById("txt").selectionStart;

    var textAreaTxt = document.getElementById("txt").value;

    var txtToAdd = "1";

    var x = textAreaTxt.substring (0, caretPos);

    var y = textAreaTxt.substring(caretPos);

    textAreaTxt = x + txtToAdd + y;

    document.getElementById("txt").value = textAreaTxt;

}

</script>

</body>

</html>

There is one problem with the code: Once the button is clicked, the input box loses focus, which result in adding number at the end of the existing number. I will follow up with this problem later.

Thanks

Chris Pearce
almost 8 years ago05/17/16 at 5:27 pm (UTC)

Hi there Marco,

I saw calculator you posted here and was wondering if you could post the file to show how you created the backspace key.

I'm not creating a calculator but rather a password keypad simulation and want to be able to create a functioning backspace key.

I don't know JavaScript but am modifying a file from Daniel Bond found in this thread: (https://community.articulate.com/discussions/articulate-storyline/create-a-phone-simulation-dial-a-number#reply-354630) .

I'm thinking there's a simple way to modify the JavaScript built into his file that would create a backspace function, but it looks like you've got a solution. Any feedback you could provide would be greatly appreciated.

Thank you!

Sincerely,
Chris Pearce

P.S. Cool profile pic!

This discussion is closed. You can start a new discussion or contact Articulate Support.