Explore the community Forums Lectora Lectora Questions & Answers Formatting in-line variables

Viewing 15 posts - 1 through 15 (of 20 total)
  • Author
    Posts
  • #421507 Score: 0
    Profile photo of Lydia B
    Lydia B
    Member
    beginner
    intermediate
    curious george
    wise owl
    friend finder
    contributor
    @lb1730

    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.

    #421575 Score: 1
    Profile photo of Darrel Somoza
    Darrel Somoza
    Member
    contributor
    friend finder
    beginner
    intermediate
    junior moderator
    advanced
    wise owl
    curious george
    profile
    197 pts
    @Klaatu

    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.

     

     

    This post has received 1 vote up.
    #421606 Score: 0
    Profile photo of Lydia B
    Lydia B
    Member
    beginner
    intermediate
    curious george
    wise owl
    friend finder
    contributor
    @lb1730

    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.

    Attachments:
    1. Mod2_3.zip
    #421614 Score: 0
    Profile photo of Darrel Somoza
    Darrel Somoza
    Member
    contributor
    friend finder
    beginner
    intermediate
    junior moderator
    advanced
    wise owl
    curious george
    profile
    197 pts
    @Klaatu

    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.

    #421616 Score: 0
    Profile photo of Lydia B
    Lydia B
    Member
    beginner
    intermediate
    curious george
    wise owl
    friend finder
    contributor
    @lb1730

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

    #421675 Score: 0
    Profile photo of Tim K
    Tim K
    Member
    contributor
    beginner
    intermediate
    advanced
    friend finder
    junior moderator
    advocate
    wise owl
    curious george
    Group Member
    302 pts
    @timk

    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?

    #421768 Score: 0
    Profile photo of Lydia B
    Lydia B
    Member
    beginner
    intermediate
    curious george
    wise owl
    friend finder
    contributor
    @lb1730

    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.

    #421777 Score: 2
    Profile photo of Tim K
    Tim K
    Member
    contributor
    beginner
    intermediate
    advanced
    friend finder
    junior moderator
    advocate
    wise owl
    curious george
    Group Member
    302 pts
    @timk

    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 😉

     

    This post has received 2 votes up.
    Attachments:
    1. Mod2_4.zip
    #421784 Score: 0
    Profile photo of Darrel Somoza
    Darrel Somoza
    Member
    contributor
    friend finder
    beginner
    intermediate
    junior moderator
    advanced
    wise owl
    curious george
    profile
    197 pts
    @Klaatu

    Nice work, Tim.

    #421788 Score: 0
    Profile photo of Lydia B
    Lydia B
    Member
    beginner
    intermediate
    curious george
    wise owl
    friend finder
    contributor
    @lb1730

    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 🙂

    Attachments:
    1. Mod2_3-1.zip
    #421812 Score: 1
    Profile photo of Math Notermans
    Math Notermans
    Member
    contributor
    intermediate
    advanced
    friend finder
    junior moderator
    advocate
    LUC16 Attendee
    LUC16
    wise owl
    curious george
    117 pts
    @mnotermans5114

    Tim beat me… well here is my version 😉

    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

    This post has received 1 vote up.
    #421827 Score: 0
    Profile photo of Lydia B
    Lydia B
    Member
    beginner
    intermediate
    curious george
    wise owl
    friend finder
    contributor
    @lb1730

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

    #421829 Score: 0
    Profile photo of Math Notermans
    Math Notermans
    Member
    contributor
    intermediate
    advanced
    friend finder
    junior moderator
    advocate
    LUC16 Attendee
    LUC16
    wise owl
    curious george
    117 pts
    @mnotermans5114

    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…

    #421831 Score: 1
    Profile photo of Math Notermans
    Math Notermans
    Member
    contributor
    intermediate
    advanced
    friend finder
    junior moderator
    advocate
    LUC16 Attendee
    LUC16
    wise owl
    curious george
    117 pts
    @mnotermans5114

    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

    This post has received 1 vote up.
    Attachments:
    1. Mod2_5.zip
    #421835 Score: 1
    Profile photo of Tim K
    Tim K
    Member
    contributor
    beginner
    intermediate
    advanced
    friend finder
    junior moderator
    advocate
    wise owl
    curious george
    Group Member
    302 pts
    @timk

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

    This post has received 1 vote up.
Viewing 15 posts - 1 through 15 (of 20 total)

You must be logged in to reply to this topic.