Formatting in-line variables

lb1730
lb1730 Community Member Posts: 13
Hello,

I have been using Lectora for few months now and really enjoy the program. Recently, I discovered variables. This opened up so many possibilities for creating algorithmic questions. However, I am not able to find a way to format my in-line variables.

Based on my research, I have to use JavaScript in order to format them. Unfortunately, I am not a programmer and have no knowledge of JavaScript. I tried to find functions online that I can use, but I was not able to make them run in Lectora. I know how to add external HTML Extension and how to add action in order to run JavaScript. However, I do not know exactly how to make programs run.

For instance, I have a page with the text box that contains a variable and I would like to be able to do two things:
  • align the number to the right (in situations where the variable is the only item containing text box).
  • format the number with a comma as a thousand separator. I would like to be able to format both numbers with decimals and without decimals.
Let's say, I have a page with the text box (HTML name: text150301) with in-line variable A1. Is there a way to run JavaScript to format this variable? If so, do I need a separate program for every variable? Alternatively, is there a way to have an external HTML extension that contains the program that can format any variable in the title?

I apologize if my questions are not making sense. I am complete JavaScript novice. I would appreciate any help with this, as it opens up the possibility of creating virtually unlimited practice for my students.

Thank you in advance.

Comments

  • klaatu
    klaatu Community Member Posts: 988
    I think this does what you want. I grabbed a script from Stack Overflow (no sense in rebuilding the wheel) and ran the user created variable myNum through it. I then reassigned the formatted result back to the myNum variable.

    To make it right align I just changed the paragraph setting on the text box to align-right.

    The .awt file is in the zip as well. Hope this helps.

     

     
  • lb1730
    lb1730 Community Member Posts: 13
    Thank you for looking at this. And please forgive my ignorance. As I mentioned, JavaScript is a bit of a "black magic" for me at this time.

    It seems that in your file, the script "translate" the string of numbers into a formatted number while it is triggered by pressing of the button, the "event".  I tried to adjust it to use it in my file on "show", but I was unsuccessful. Again, probably because I am just learning, so please be patient with me.

    I need the number to be formatted in the text-box, when the question loads. Secondly, if I can format the input into the entry field triggered by the student just entering the number it would be perfect.

    I am not sure whether I am explaining this clearly, so I am attaching one of the questions I am working on, hopefully, that will help. In this question, I have inline variables A1 to A6 in the text-boxes. These variables will be used by the student to calculate the balance in the account. They are only displayed by the program. I hope to have them shown with the comma separators.

    Then student will input the answer into the entry field and I hope to have that field format the number automatically on input. So, the number would be shown with commas and aligned to the right. I was able to use your code to do that, however, it only works for numbers lower than 10,000. See the actions attached to Entry_DR_Bal. Perhaps, I changed something I should not have.

    Thank you so much for your help. I am so excited that it may be possible!

    Also, do I need to have the script written for every variable separately? or is there a way to have a "function" defined in the external HTML extension and run the option with the action for the specific text box. I am just hoping that there is a more efficient way to do this, because I may have quite a few variables and input boxes in the module.
  • klaatu
    klaatu Community Member Posts: 988
    Hi, Lydia. Thanks for posting the samples in both threads. I will have to pick these up again tomorrow as I am off to meetings for the rest of the day. Tim or Math, if they are around, will also be able to get you in the right direction.
  • lb1730
    lb1730 Community Member Posts: 13
    Thank you so much. I appreciate the help. Enjoy the meeting.
  • timk
    timk Community Member Posts: 1,195 ♦ Idol ♦
    I wouldn't format the actual variable value, you couldn't calculate with their values later on. Wouldn't it better to just format the text in the fields? Inline variable replacement may be difficult here.

    What is the correct answer to the question? You're calculating the correct answer in the variable A7? As the values on the debit side are always bigger than the credit values, the correct answer would be: No entry in the left field and the value of A7 in the right?
  • lb1730
    lb1730 Community Member Posts: 13
    Hi Tim,

    Formatting text in the text fields would work perfectly, as I just need the numbers to display as a number with comma as a separator. However, I believe that it would have to be done with JavaScript ,since Lectora does not give an option to format numbers with comma as a separator. At least I was not able to find it.

    The correct answer is A1+A2+A3-A4-A5-A6 and it is calculated in A7.  On  submit (not in the sample) A7 is compared to Entry_0001 (left field) and Entry_0002 (right field) is empty for this particular question.

    Thank you for looking at this.
  • timk
    timk Community Member Posts: 1,195 ♦ Idol ♦
    Hi Lydia,

    it has been more of a challenge than I thought (thanks for that) and I couldn't hold my promise to only format the text ;-)

     
  • klaatu
    klaatu Community Member Posts: 988
    Nice work, Tim.
  • lb1730
    lb1730 Community Member Posts: 13
    Tim,

    I appreciate the help.  Being able to do this, would open so many possibilities to create the content for the students that gives them unlimited practice.

    I hate to be a pain, but it seems like the form has to be reset to show the variables with comma separators. Is that correct? I need the variables in the text-box to show as numbers separated by the commas on page show.

    In my efforts to make the file smaller, I may have took out too much, so please see attached zip file with the entire question.

    I like how Darrel's code worked for the entry fields, as it formatted the text as the student typed, but it only worked for the numbers below 10,000. Is there a way to adjust it, so it works for larger numbers?

    Also, is there a way to format how the inline variables appear on page show? I have other questions that I am working on that have text and variable in the text box. Hopefully, with a HTML extension on the title or test level defining the function, that can then be easily called with action to "run JavaScript"...with time I am determined to learn JavaScript so I am comfortable with using it, but for now I am a complete novice. (lol)

    Sorry for all the questions. You guys are amazing for helping! Thank you :)
  • mnotermans5114
    mnotermans5114 Community Member Posts: 916
    Tim beat me... well here is my version ;-)
    https://community.trivantis.com/shared-content/formatting-input-fields-and-more/

    The open questions you had on Tim's latest version and the  > 10,000 thingy are solved in my solution.
    The > 10,000 was because of the RegEx you used. I am no RegEx expert either, so had to Google about it too...
    The RegEx you used, works on every 3 digits... so 1,00...next digit it triggers... and so on... some Googling got me
    too a solution using if/thens whenever you have more then 3 digits...

    For onShow you have to make sure you have all in 1 function...then you can call that onShow. Some delay needed i notice, and still not yet perfect....if you type quick...some letters wont count...

    Well not perfect yet, but also a step further...

    Kind regards,

    Math
  • lb1730
    lb1730 Community Member Posts: 13
    That is awesome Math. I am learning so much through this! Thank you.

    The function for the Entry filed formatting seems to be putting dots in unexpected places.

    For instance:
    • input: 5621235; output 5,621.235
    • input: 69852147; output: 6,985.214.7
    Could it be caused by the version of Lectora I am using? (18.0.2)

    Also, Renaming the fields to include the HTML name is brilliant!

    Thank you for the link to the resources on www.w3schools.com. :)
  • mnotermans5114
    mnotermans5114 Community Member Posts: 916
    I know, i made a mistake.. The dots are intended... i abusively interpreted it as , for thousands... and then . for lower values.... for sure something to learn from it, but Tim's sample better fits your needs. Trying to get some of the things from mine to Tims... to get the formatting in Tims on show...either add some delay or get rid of the pageTransition...
    That one prevents it...
  • mnotermans5114
    mnotermans5114 Community Member Posts: 916
    In fact only some minor changes to Tim's version and its exactly as you need/want.
    For your education... to ensure it has the proper format at show/start... the pageTransition ( a fade ) takes some time.
    So when a transition is running other functions wont work...so adding some time-delay to the initial functions made sure that onShow properly shows the proper format.

    Other change on Tim's version was in the 2 inputfields. The first one was set to 10 characters limit. Changing that to 40 and you can go zillions ;-)

    Thats all...
    Kind regards,
    Math
  • timk
    timk Community Member Posts: 1,195 ♦ Idol ♦
    Doesn't it work?

    There are some Reset form actions but these are not related to reformatting the numbers with commas. They exist to reset the entry fields to a value of "0", in case that is needed.  It is needed when a user removes all content from an entry field or clicks the "x" to clear the entry field. Then the script tries to calculate whith the new value and returns "NaN" because the empty field is Not a Number. Only then the field is reset to replace "NaN" with "0".
  • mnotermans5114
    mnotermans5114 Community Member Posts: 916
    @timk your pageTransition caused it to NaN at start... in my zip based on your version i just added some delay on those actions at show... and then it works perfectly.
  • lb1730
    lb1730 Community Member Posts: 13
    It works! All of you have been amazing! (I may be a bit too excited by this. Sorry...:D)

    It will take a bit of studying of the file on my part to be comfortable with the usage of these functions, but I think I can take it from here. I may ask you again if I can't make it run for a different question.

    Another problem: The way you formatted the number (ex A1) in the text box will only work if there is no other text in the text box, is this correct?  So if I have a question that contain more text in the text box with the variable, how can I make it format?

    Thank you again.
  • timk
    timk Community Member Posts: 1,195 ♦ Idol ♦
    @mnotermans5114

    Thanks. I didn't realize there was a transition in the sample when previewing the single page. I should have published. I used Lectora 17.0.6, maybe the transitions changed after that. I usually avoid all transitions whenever possible, too much effort for too little effect ;-)

    Another thing to learn from: You can test as much as you want on your side, there's no guarantee it'll work somewhere else ... and I couldn't count the number of times I pressed F5, to make A7 a negative value which only happens once in a 1,00,0 whiles.
  • lb1730
    lb1730 Community Member Posts: 13
    Apparently the transition was inherited from the template. Although, it does not seem like it is really making any difference to the view of feel of the page, so I may follow your example and take it out.

    Something new I have learned! Thanks Tim :)
  • mnotermans5114
    mnotermans5114 Community Member Posts: 916
    @timk Agree on all, and i could have known it wasnot your transition ;-) I too avoid them mostly. When testing your own work, at some point you get blind for other approaches. So always good to let others do some tests, you often encounter things you didnot think of :-)
  • lb1730
    lb1730 Community Member Posts: 13
    @mnotermans5114

    Math,

    I see in your file you use the "CSS Align Input fields to the right" to justify the input fields. This works great and even I can use it! However, it justifies all the entry fields on the page. Is there a way to target specific fields, but not others? And if so how would I go about it?

    Thank you so much!
  • carlfink
    carlfink Community Member Posts: 938 ♦ Idol ♦
    <span class="handle-sign">@&lt;/span>lb1730, Math hasn't been around much lately. I hope he returns!

    May I suggest assigning the entry fields you wish to justify to a class? See Trivantis' resource here.
  • lb1730
    lb1730 Community Member Posts: 13
    <span class="handle-sign">@&lt;/span>CarlFink

    I tried doing that based on this post, but it seems that the fields get justified, but the formatting brings all the other values back to the default (like entry field height etc). This creates whole bunch of other issues, because I need fields right justified that are of various sizes etc. (Perhaps, I did something wrong...I am unfamiliar with using CSS or Javascript, so it is very possible. lol)

    Math's code did exactly what I needed, but on the global scale. If I can use this code to target a specific field that would be perfect solution, as it seems easy to use.

    Any ideas?

    Thank you :)
  • mnotermans5114
    mnotermans5114 Community Member Posts: 916
    <span class="handle-sign">@&lt;/span>lb1730 Lidia, Carl's solution should work. you can target specific input- or textfields. Doublecheck anything you can find in the forum about CSS and classes... in the end that will help. Also important to watch the difference between Lectora 17 ( or before ), 18 and Lectora Online...all have differences... As Carl stated...i havenot been around a lot... one reason is offcourse work keeping me busy...

    I dont have L18... but in L17 and Lectora Online i can make a sample if time permits this week..  Let me know if you need it, and i see if i can make time...
  • lb1730
    lb1730 Community Member Posts: 13
    @mnotermans

    I really appreciate you taking the time to respond.

    I have search and tried, but I am afraid that my lack of knowledge is preventing me from getting it to work.

    I followed the instructions on the post mentioned by Carl and got the field to be right justified and used your code to add the commas as thousand separators, but the code changed the way the entry field looks. It took out all my other changes to the field and upon input it seems as it took the field back to default.

    Is it possible to alter your code to target specific field?

    Your code:

    <style>
    input{
    text-align:right;
    }
    </style>

    The above code justifies all the fields. I need to target the specific one.

    You also used this code to add commas as thousand separators:

    var theentry = document.getElementById("%HTMLNAME%id").value.replace(/,/g, '');
    document.getElementById("%HTMLNAME%id").value = parseFloat(theentry).toLocaleString('en');
    VarEntry_0001.set(document.getElementById("%HTMLNAME%id").value);

    Thank you again for that code! It works amazing and it is easy to use. Is there a way to add decimal places? I tried the currency, but it adds a dollar sign, which I do not want. I tried to add the minimum and maximumFractionDigits, but it disallowed number larger than one integer.

    If you are able to, I would appreciate any help you may offer. Thank you for responding either way Math.

     
  • klaatu
    klaatu Community Member Posts: 988
    Deja vu. Use search, we did this already.