Explore the community Forums Lectora Lectora Questions & Answers Force uppercase in textbox

Viewing 13 posts - 1 through 13 (of 13 total)
  • Author
    Posts
  • #409558 Score: 0
    Profile photo of Tanya Banninga
    Tanya Banninga
    Member
    beginner
    intermediate
    friend finder
    picture perfect
    curious george
    wise owl
    contributor
    @tbanninga2873

    Hi

     

    I am new to Lectora Online and will admit I don’t know where all the options are and what is possible/not possible.

    I was hoping for some help on automatically making a text box all uppercase. It contains a variable that is an input field on the previous page to get the user name, and I can’t see a way for the user to be forced to input their name in uppercase.

    I have tried to add a HTML extension, set to meta, to use CSS to transform the text to uppercase but it seem to have no effect…

    Code:

    <Style>

    p{

    text-transform: uppercase

    }

    <Style>

     

    Thanks for the help!

    Tanya

    #409573 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
    106 pts
    @mnotermans5114

    Hi Tanya,

    At least a good start, but some slight things need to change to get this to work.
    Just tried your code in Lectora Online.
    With these changes it works…
    <style>
    p{
    text-transform: uppercase;
    }
    </style>

    Changes were:
    <Style> -> <style>
    closing tag = <Style> -> </style>

    Further i removed some spaces, but that should be no issue.
    Then it works.

    Kind regards,
    Math

    PS: and a semicolon ( ; ) behind uppercase…

    #409691 Score: 0
    Profile photo of Tanya Banninga
    Tanya Banninga
    Member
    beginner
    intermediate
    friend finder
    picture perfect
    curious george
    wise owl
    contributor
    @tbanninga2873

    Hi Math

    Thank you for your reply. I just realised I have made some obvious mistakes in that code when I typed it….it was way to late in the day! I did have the semicolon and the style tags as you’ve shown them when I tried this in the course.

    Just to be sure I copied your code and saved it in a html extension which I named TextTransform. I placed this in the Chapter where i wanted it to apply, however it did not work. I then moved it to the top level just incase it had something to do with that, but unfortunately no joy.

    Perhaps it has to do with how I target the text? I’m sure the text is a paragraph tag but, is there a way to identify a specific text block?

    Kind Regards

    Tanya

    #409898 Score: 0
    Profile photo of Adam Cain
    Adam Cain
    Member
    beginner
    intermediate
    profile
    picture perfect
    wise owl
    friend finder
    Group Member
    curious george
    contributor
    3 pts
    @cainam

    I believe you can find the HTML Name to tag by clicking the text box > Properties > bottom of the 2nd column (where it has checkboxes for Wrap Text, Vertical Scroll, Convert To Image), there is a small flyout arrow that will show you the HTML Name.

    (works the same for an image, expect the arrow flyout is in the first column for the HTML Name

    #409905 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
    106 pts
    @mnotermans5114

    Copying and pasting from the forum often doesnot work because the ” get converted somehow.
    So either retype everything…or when copying and pasting go through all “s and replace them to appropriate “s in your code.

    HTMLnames in Lectora Online dont stay the same as mentioned by @cainam.
    For Lectora Publisher and Inspire they do. So when to check a HTMLname in Lectora Online use your developertools in the browser to see the actual names… If you check my posts you surely find more about that.. out of my memory Lectora Online replaces the naming somewhat…
    Imagine you have a picture in Inspire or Publisher  with a HTML-name of ‘image12665’.
    When you package that and import it into LO the HTML-name will change to ‘tobj12665’
    If you aint aware of that, none of your scripts will work anymore.

    I do love Lectora Online, biggest plus its cooperative options. But big changes when working with Javascript in it… be aware that things working in Publisher or Inspire with Javascript have to be adapted for use in Lectora Online.
    Did make some setups in the desktop versions that work perfectly in Online.

    Kind regards,

    Math

    #409909 Score: 0
    Profile photo of Adam Cain
    Adam Cain
    Member
    beginner
    intermediate
    profile
    picture perfect
    wise owl
    friend finder
    Group Member
    curious george
    contributor
    3 pts
    @cainam

    ahh, thank <span class=”bbp-user-nicename”><span class=”handle-sign”>@</span>mnotermans5114, I didn’t realize this was a Lectora Online specific question.  Next stop: reading class. ; )</span>

    #409914 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
    106 pts
    @mnotermans5114

    @cainam In fact it shouldnt matter if you use Online or Desktop. It mainly matters when using Javascript and personally i dont like that you cannot use desktop versions with Javascript as is in Online. I do hope they fixed that in Lectora 18 that is now in beta.

    #410084 Score: 0
    Profile photo of Tanya Banninga
    Tanya Banninga
    Member
    beginner
    intermediate
    friend finder
    picture perfect
    curious george
    wise owl
    contributor
    @tbanninga2873

    Hiya

    I have managed to find the textbox id in the properties, thanks @adam. See the attached screenshot if you want to know where.

    I still have not got the html extension to work. I have tested the syntax on w3schools with no issues… I’m not sure why I can’t get this to work. I’ve attached a title with the extension. Perhaps you could have a look and see what I’m doing wrong?

     

    Kind Regards

    Tanya

    #410092 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
    106 pts
    @mnotermans5114

    Hi Tanya,

    Some small issues in your file.

    Fixed them and explained them a bit in this title i add.

    2 things to watch…
    – 2 ways of using CSS…either as real CSS and link a local file or as Metatags, benefit its inline editable but you do need the <style></style>-tags then, else it will not be recognized as CSS. The latter you omitted.
    – As explained before in Lectora Online you cannot trust the HTML-name you see under the small triangle. As you can see in my sample title, the text23 textfield gets converted to tobj23 when Lectora publishes. So always use the console and inspector in a browser to check your HTML-names till you know by heart how to use selectors in Lectora….and then even now and then you bang your head to your monitorscreen…why is it not working 😉

    Kind regards,
    Math

    #410109 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
    106 pts
    @mnotermans5114

    Actually for targetting page-elements you best use CSS-classnames. The small triangle next to the HTML-name is for the CSS classname. You either can give a specific element a classname, or all the elements the same name. Based upon that you can do anything you want with CSS or Javascript. Main advantage with CSS Classnames is they stay exact the same when copying from one page to another or to a complete new title. HTML-names change with every new page and you need to check them. You can use “%HTMLName%” Token replacement for HTML-names. The syntax before will be replaced by the actual HTML-name of an element when you use it like this.

    #410397 Score: 0
    Profile photo of Tanya Banninga
    Tanya Banninga
    Member
    beginner
    intermediate
    friend finder
    picture perfect
    curious george
    wise owl
    contributor
    @tbanninga2873

    Hi Math

    Sorry I feel like I’m waisting your time when I make these mistakes sending over the wrong code…I swear I had those tags in my project (if you are still inclined to believe me).

    I now see where you find the HTML name, that is a great help thanks. I’ll start playing around with classes when I find where to define a class 🙂

    As it is, on my side in Lectora Online the text is still not getting transformed to uppercase from the file you sent over. I figured it has to be working for you so there must be something wrong on my side. I then tried a few different browsers just in case that had an influence but it stayed the same.

    Finally I decided to run the page preview and there it was all working! I tried this in my project but I kept getting an ‘element not found’ error so I wan’t able to test it there.

    It seems my problem all along was it doesn’t actually show the CSS implemented in Lectora Online…

    Thank you for your patience Math. I have learned a lot with this.

    Kind Regards

    Tanya

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

    Hi Tanya,
    Dont worry, no waste of time at all. I still learn too. Questions are good… answers not always 😉
    So im not quite sure whats going wrong on your side. Let me check my Lectora Online…. ah yes i do understand now.
    You can test and run a course in several ways in Lectora. Run Mode (F10), this runs the course in the editor. Use this only for basic testing. I actually seldom use this, mainly because CSS and Javascript get ignored in this mode, and i do use that a lot. I do think you tested it in Run Mode. I use Page Preview Mode (F9) all the time when testing..you can view a single page that way including all Javascripts and CSS etc. you added. Best way of checking a single page. If you however need to test transitions and multiple pages AND Javascript and CSS, well then you need to publish the complete title…review that one…either on a LMS or straight from Lectora.
    Kind regards,
    Math

    This post has received 2 votes up.
    #410689 Score: 0
    Profile photo of Tanya Banninga
    Tanya Banninga
    Member
    beginner
    intermediate
    friend finder
    picture perfect
    curious george
    wise owl
    contributor
    @tbanninga2873

    Thanks Math 🙂

    I was just expecting the uppercase transform to immediately show without preview of any kind. Now I understand how this works. It is good I learned this early on!

    Thanks for your help again.

    On to the next challenge to figure out.

    Kind Regards

    Tanya

Viewing 13 posts - 1 through 13 (of 13 total)

You must be logged in to reply to this topic.