Formatting Date Variables

[donaldw30326818]

Hi All,

I want to insert a date into a project (Captivate 2019).

cpInfoCurrentLocaleDateString is very, VERY close to what I want. BUT... on my system it displays the date as "Tuesday May 16, 2023" when what I would REALLY like is just:

"May 16, 2023" 

The issue appears to be local, in that this is the way I have my long date display set up in the Windows Control Panel.

If I try to roll my own month, day, year concatinating:

$$cpInfoCurrentMonth$$ $$cpInfoCurrentDate$$ , $$cpInfoCurrentYear$$
I get: "05 16, 2023"

What I would like is for the cpInfoCurrentMonth to display as "May" not "05", so the result would be: "May 16, 2023".  Can I get the "05" to display as "May"?

This has been asked before, but the links in the older responses no longer work.

Many thanks!

[Lilybiri]

You could use JavaScript to convert the month number from the system variable to its name using an array. Just checked this out, using v_month as user variable to store the month name. I am sure the JS experts have much better solutions, but you'll have to wait. Here is my experiment:

const monthNames = ["January", "February", "March", "April", "May", "June",
"July", "August", "September", "October", "November", "December"];
const monthNumber = window.cpAPIInterface.getVariableValue("cpInfoCurrentMonth");
window.cpAPIInterface.setVariableValue("v_month", monthNames[monthNumber - 1]);

You'll use the concatenation:

$$v_month$$ $$cpInfoCurrentDate$$ , $$cpInfoCurrentYear$$

As for the Localestring variable: it may display differently depending on the setup of the system date on the learner's system.

[donaldw30326818]

Lilybiri -

Your array JS works beautifully! Thank you so much! Just what I needed!

The script seems resistant to selecting a different type face, but only I will be aware of that, and for the purpose the default sans serif typeface is more than adequate. 

Your solution solves an irk and vexation with the standard Captivate options, so again, thank you for taking the time to develop the JS array and drafting your how-to. 

This forum is a marvelous resource, thank you all!

Don

[Lilybiri]

You're welcome. You may have read why I choose for this workflow in my answer to @sabre123 . I am a bit confused because what you stated about the font? Font normally is defined in Captivate since you insert variable values which take on the font defined for the text container.

[donaldw30326818]

<<Font normally is defined in Captivate since you insert variable values which take on the font defined for the text container.>>

Yes, that is what I thought. When I used the cpInfoCurrentLocaleDateString  and specifed a type style in the box that contained that variable, the font held - in this case it was Copperplate Gothic Bold, 24pt.

When I used a variable based on JavaScript - either your's or Sabre123's, the bold and type size specification holds but not the typeface itself. It displays in my output as a standard sans serif.

Which is fine, I don't mind, but a curiousity I could not figure out. I assumed that by invoking a JavaScript, that this overrides what ever type style setting is placed in the shape holding the variable.

And thanks for the info that cpQuizInfoStudentName is automatically pulled from the LMS. In this case, the course is not being loaded on an LMS, so I guess in my case, using a TEB and then referring to that TEB on the "certificate" slide is as simple a way to go, and assigning TEB to cpQuizInfoStudentName is not necessary.

[Lilybiri]

It may be another reason: the font you used is not a websafe font. Is it an Adobe font? If not the reason for replacing the font can be due to that. Only websafe and Adobe fonts can be generated on runtime for all viewers. But if you use a system font that is not the case.

As for your TEB issue I propose another workflow. Instead of using the generic linked varaible (which has confusingly the same name as the TEB), link the TEB to the variable cpQuizInfoStudentName. 

No need to edit the certificate in that case.

PS in the last JS script by @sabre123  You may need to replace 'long' for month by 'short'... if you want to see Jan, not January.

[donaldw30326818]

Thank you, Lilybiri!

In my original stab at this I did link Text_Entry_Box_1 to cpQuizInfoStudentName, so if for some reason that is a better way to do this, I will revert back to that method.

The typestyle I was trying to employ is off of the Captivate offerings. The selected typestyle DID appear as desired when I was using the system variable $$cpInfoCurrentDateString$$, but this is the version in which the DAY + Month + Day + Year was displayed and all I really wanted was the Month + Day + Year.

It is when using the Javascript that the typestyle doesn't appear as selected. Not something I am losing sleep over, just an oddity.

And yes, the month fully spelled out is my desired format, so all is good there. Both solutions work for me.

[donaldw30326818]

Meant: cpInfoCurrentLocaleDateString instead of cpInfoCurrentDateString

Vexing, I can't find how to edit a post.

[Lilybiri]

Maybe I was not clear enough. Is that an Adobe font or a System font?  You say 'Captivate offering' but it will show you also all your System fonts. Fonts are grouped: Theme fonts, Adobe fonts, Websafe fonts, System fonts.

[donaldw30326818]

HAH! You know, I frankly had never noticed that distinction. The font I had selected was a SYSTEM font, Copperplate Gothic Bold. I was looking for some type of script typeface. NBD, I will stick with Arial and be happy. But thanks for pointing out the distinction, that frankly I had always blown past, since I usually use Arial and rarely need anything zippier.

[Lilybiri]

Please, you may get more discoveries in this blog:

https://blog.lilybiri.com/fonts-in-captivate

[sabre123]

Another Javascript option would be to use the JS Date object:

1. Create a Captivate variable. For this example it is named, myDate
2. Next create a text caption, select the insert variable button, and choose the myDate var
3. Then select Execute JavaScript from the On Enter drop down and add the following JS (including the Captivate cpAPIInterface function call to set the value of myDate to the value of the today var):

const today = new Date().toLocaleDateString('en-us', { year:"numeric", month:"short", day:"numeric"}) ;

window.cpAPIInterface.setVariableValue("myDate", today);

There are certainly other ways to do it using JS, but that was one I'm familiar with...

[Lilybiri]

@sabre123 I have been using Date object as well, but was wondering what happens when the learner overrides the default setting for the System date? It is the reason why I also hesitate to use the system variable with LocalDateString. Please correct me, you are the JS expert.

My second reason was that I often have to localise, and only the month needs to be changed. It is sufficient to replace the array by an array in the appropriate language. Of course that can also be done by replacing the 'en-us' in your solution. Probably less work.

[sabre123]

 You bring up a valid point in terms of the JS Date obj pulling in the user's (possibly altered) system date. We are at the mercy of the user using the Date obj.

You are correct regarding changing the lanuage in the Date object when you need to localise. The language displayed is pulled in via the locales parameter ('en-us' in this case). 

[donaldw30326818]

Thank you all for your time on an issue that is an irritant, but hardly critical. My ignorance now will be in full display.

If the JS Date obj relies upon the user's system time and format, then how does this differ from the cpInfoCurrentLocaleDateString  variable already in Captivate?

As I understand it, the way MY system date display is set up is what is causing the resulting day of week to appear along with the month, day, year.

And since I have expert eyes looking at a minor query:

The way I had been including the name of the user on the completion form was to create an editable text field on a screen, "Text_Entry_Box_1".

I then added an Advanced Action to:
Assign  cpQuizInfoStudentName   with    Text_Entry_Box_1.

On the certificate page then, I had a smart shape that had inserted the user variable cpQuizInfoStudentName  and this works to display the name.

BUT...I also found that if I just insert the variable "Text_Entry_Box_1", this ALSO inserts the user's name.

So by going the Assign   cpQuizInfoStudentName   with    Text_Entry_Box_1 route, am I making things more complex than necessary if I  just insert the "Text_Entry_Box_1" variable _without_ going through the ASSIGN action?   

Again, my appreciation for the assistance!

Don

[sabre123]

I keyed in on the month number to month name issue. You could force a particular format for the Date object like this:

function formatDate(date, languageCode) {
  const day = date.toLocaleString(languageCode, {day: '2-digit'});
  const month = date.toLocaleString(languageCode, {month: 'long'});
  const year = date.toLocaleString(languageCode, {year: 'numeric'});

  return `${month} ${day}, ${year}`;
}
const dt = new Date();
window.cpAPIInterface.setVariableValue("myDate", formatDate(dt, 'en-us'));

The function takes in the Date object and the language as parameters. 

The return statement represents your preferred order. I used a JS template literal, but it's doing the same thing as if you would use a traditional concatenation:

return month + ' ' + day + ', ' + year;

[donaldw30326818]

Very helpful, sabre123. You keyed in on exactly my primary concern. I have a chance to have this beta tested by a number of users before release so that will give me a chance to see which version of the solution works best.

Youall are wonderful!

Don

[Lilybiri]

You may have seen my reasons for the array approach, and why I compared the system variable cpInfoCurrentDateLocaleString with the JS object, since that variable is clearly using that object. Since I am always tweaking system setups I warned about that possibility for learners.

Some more info about the user variable (it is not a system variable, which is confusing) cpQuizInfoStudentName.  Like cpQuizInfoStudentID it is automatically created in each project, because their value will be retrieved from the LMS login account for the user. This means that except for LMSs which do not support it, you don't need to ask for the learner's name using a TEB.

[donaldw30326818]

And Sabre123, I tried your solution and that works beautifully also! And it is shorter than the array approach. So I have two working solutions, a rare occurance in my life.

Thank you again for your time on this!

Don