Formatting in-line variables

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.

Thank you so much. I appreciate the help. Enjoy the meeting.

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.

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.

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

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!

<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

@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.