CP9 JavaScript and Retrieving Numeric Values

[BubbaRB]

I have a slide with a text entry field for entering the last 4 digits of their telephone number.  I need to have an edit which makes sure that they entered only numbers and that they entered all 4 digits.

When I was using Captivate 8, I was able to use the following JavaScript code to get and check the variable information which had been entered on the screen for various user variables:

function getTheCourseVariable(variableName) {

  var holdValue = null;

  if (window.cpAPIInterface) {

       holdValue = window.cpAPIInterface.getVariableValue(variableName);

  } else {

       var cpFlash = document.Captivate;

       if (cpFlash) {

           holdValue = cpFlash.cpEIGetValue('m_VarHandle.' + variableName);

       } else {

           holdValue = cp.variablesManager.getVariableValue(variableName);

    }

  }

  return holdValue;

}

This would return the value of this 4 position "phone" field, with leading zeros and everything.  I was then able to check the length of the variable to see if they enter all 4 positions (such as "0001").

Since I started using Captivate 9, if the student enters "0001" in the field, when I use this function, it returns a value 1 with a length of 1 (ie: it removes all leading zeros).  This makes it impossible for me to check the length for 4 positions.

What is really strange is when I displayed this value on a later screen (if I let it go past my edits), the value does displays as "0001".

One time I entered "123" and before leaving that slide set the value of this field in JavaScript to "0123", but on the later screen this user variable displayed the same way that it did as I entered it on the previous screen ("123"), like it was ignoring the fact that I had used the Setter method of the Common JS Interface to change it's value.

This happens no matter if I have the field defined as Numbers under the More Options buttons or the "All" option.  They have a Maximum Length value on the More Options sub-menu.  Is there some type of "Minimum Length" that they can have which will leave the leading zeros of a user variable, even if the values are numeric?

I just need to make sure that this field is present, all numeric and all 4 positions are filled in.  Is there some way to do this within Captivate?

Is there a special call or parameter that I can use so that this value comes back to me as text, versus a truncated numeric value?

Using JavaScript, I have even tried "padding" the front with zeros in JavaScript, but when I set the variable and get it again, the leading zeros are truncated again.  I even tried padding like: "T001" and it remained "T001" (with a length of 4), but when I tried it with "0001" it always came back as 1 with a length of 1.

Right now it looks like I might have to go back to using Captivate 8 until this problem is solved.

Any help or advice would be greatly appreciated.

Thank you for your time.

Randy

[TLCMediaDesign]

Are you executing this in the script window or in an actual HTML or JavaScript file?

[BubbaRB]

I have the Javascript in a script window which is part of an advanced action.  This advanced action is what gets kicked off when the student clicks the "Continue" button at the bottom of the screen.

The logic that I have set up (and works fine in courses created in Captivate 8) is:

var studentPhoAllPassFail = 1;

  var studentPhone1 = getTheCourseVariable('studentPhone1');

  var studentPhone2 = getTheCourseVariable('studentPhone2');

  var studentPhone3 = getTheCourseVariable('studentPhone3');

  var studentPhone1Str1 = studentPhone1.toString();

  var studentPhone1Str2 = studentPhone2.toString();

  var studentPhone1Str3 = studentPhone3.toString();

  if (studentPhone1Str1 && studentPhone1Str1.length == 3) {

  setTheCourseVariable('studentPh1PassFail', 1);

  } else {

  setTheCourseVariable('studentPh1PassFail', 0);

  studentPhoAllPassFail = 0;

  }

  if (studentPhone1Str2 && studentPhone1Str2.length == 3) {

  setTheCourseVariable('studentPh2PassFail', 1);

  } else {

  setTheCourseVariable('studentPh2PassFail', 0);

  studentPhoAllPassFail = 0;

  }

  if (studentPhone1Str3 && studentPhone1Str3.length == 4) {

  setTheCourseVariable('studentPh3PassFail', 1);

  } else {

  setTheCourseVariable('studentPh3PassFail', 0);

  studentPhoAllPassFail = 0;

  }

  setTheCourseVariable('studentPhoAllPassFail', studentPhoAllPassFail);

I just got done verifying that this does work as expected using Captivate 8, but works differently when creating a course with Captivate 9.

Let me know if you would like to see the variable Setter code.

Randy

[TLCMediaDesign]

You seem to have some issues, especially since the code is executed in captivates scope.

With the lines like this:  var studentPhone1 = getTheCourseVariable('studentPhone1');

you are setting studentPhone1 with studentPhone1.

I would like to look in the CPM.js and see how CP is handling this.

Your get function can return a string by using:

return holdValue.toString();

You seem to be jumping through a lot of hoops to find the length of the variable.

variables are general run through a cp.ho function in captivate to do string/numeric conversion. This is where the issue could be taking place.

In JavaScript you cannot have number with leading zeroes. You have to convert to a string and pad it.

[corbinm75746610]

I was looking into the underlying issue of leading zeros and text fields. I made a post describing the code that is causing Randy's issue mentioned above here: Text entry box code - destroys leading zeros

Any thoughts on this? I have trouble seeing how this would be the default functionality they would chose for a generated web application.

Thanks,

Corbin

[Jim_Leichliter]

This has been an issue as far back as Cp 6... maybe farther.  The fix I've implemented is to do what TLCMediaDesign is suggesting by converting it to a string in your own JS code. 

[corbinm75746610]

Thanks for the response Jim. Helps to know that at this point the issue is more of a feature, rather than an issue if it has been the case for so long...

I will probably stick to the change of removing those two lines I mentioned from their generated javascript, because in our application a user can hop back to previous screens. So even if we were to convert the variable value to a string on our own, the text box code would still convert that string of "001" to 1 when it pre filled itself on slide load.

Unless... the other option we considered was using local storage for ever variable in our own javascript. Which I might look into going forward come the next course launch. The potential issue we were seeing with this though, was that the "On Enter" event for a slide seems to fire before the DOM is constructed, which would make pre filling the text fields myself with local storage values difficult since they would not yet be rendered. Did I just not look far enough into the possible events?

Thanks again.

[Lilybiri]

Do you need the TEB to be scored? I often replace TEB's by scrolling text interactions.

[corbinm75746610]

Good question. Just jumped in on this. I do not think so; however, I will verify.

Just made a quick test project using a scrolling text interaction and it did maintain leading zeros with no extra work. If I can remove the scroll feature and style it slightly this might be a viable solution for us. Thanks for the heads up!

[Lilybiri]

I have several examples on my blog where I preferred to use that interaction. The scrolling bar is not always visible. Look at this blog post:

Custom Short Answer Question - Captivate blog

The included movie is SWF, you'll need a SWF enabled browser. All text fields are scrolling text interactions.

[corbinm75746610]

The forum doesn't lie. You are the real MVP

That demo is enough to prove to me it is probably the best option so far. Thanks!