Force uppercase in textbox

tbanninga2873
tbanninga2873 Community Member Posts: 22
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

Comments

  • mnotermans5114
    mnotermans5114 Community Member Posts: 916
    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...
  • tbanninga2873
    tbanninga2873 Community Member Posts: 22
    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
  • cainam
    cainam Community Member Posts: 361 ♦ Idol ♦
    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
    - Adam Cain
  • mnotermans5114
    mnotermans5114 Community Member Posts: 916
    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
  • cainam
    cainam Community Member Posts: 361 ♦ Idol ♦
    ahh, thank <span class="bbp-user-nicename"><span class="handle-sign">@&lt;/span>mnotermans5114, I didn't realize this was a Lectora Online specific question.  Next stop: reading class. ; )</span>
    - Adam Cain
  • mnotermans5114
    mnotermans5114 Community Member Posts: 916
    @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.
  • tbanninga2873
    tbanninga2873 Community Member Posts: 22
    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
  • mnotermans5114
    mnotermans5114 Community Member Posts: 916
    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
  • mnotermans5114
    mnotermans5114 Community Member Posts: 916
    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.
  • tbanninga2873
    tbanninga2873 Community Member Posts: 22
    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
  • mnotermans5114
    mnotermans5114 Community Member Posts: 916
    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
  • tbanninga2873
    tbanninga2873 Community Member Posts: 22
    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