Styling of ChangeContent Text

elviszoparo
elviszoparo Community Member Posts: 16
Hello,

I was wondering how to style text used in ChangeContext action. Meaning I want to bold some words in text but not the whole text by styling Text Block in which this text is displayed, but indiwidual words, for example.
I want to bold some important definition in text.

Anybody known solution for this case.

Comments

  • klaatu
    klaatu Community Member Posts: 988
    You can use jQuery with a run JavaScript instead of change contents.

    See attached.

     
  • klaatu
    klaatu Community Member Posts: 988
    Additionally, if you want to have complete control over styling the text put it in a span with its own class and add a stylesheet.

    Darrel
  • mnotermans5114
    mnotermans5114 Community Member Posts: 916
    Another option is..use ChangeContents to keep that part in Lectora, thus making it easy for others to change content...and then after the content has changed, run a Javascript/CSS to set the style of the textfield. That way the content changes and your textfield keeps the style intended. You wont see it, so quick that goes, big benefit is... lesser Javascript/Css savvy developers can change the contents.

    Ignore my comment. Not appropriate to the question. This only works for textfields with all the same style.
  • jasonadal
    jasonadal Community Member Posts: 439 ♪ Opening Act ♪
    @klaatu - Is there a benefit to using jquery over straight javascript? You helped me with a similar solution that's worked marvelously in my courses that initially focused on adding bullets and hyperlinks in a Change Contents box.

    In that solution, we just used a RunJS to set the inner HTML combined with the CSS. I can reattach the other solution if that would be helpful. The only caveat with the innerHTML solution (and may be the same with this one) is that it has to be one contiguous statement. I tried breaking it up with carriage returns so I could more easily write bullet points, but that broke the hell out of it.
  • mnotermans5114
    mnotermans5114 Community Member Posts: 916
    Biggest plus of JQuery is easy selection of html-elements.
  • timk
    timk Community Member Posts: 1,176 ☆ Superstar ☆
    yes, in fact jQuery is straight while javascript is looping ;-)
  • jasonadal
    jasonadal Community Member Posts: 439 ♪ Opening Act ♪
    One day, I'll get there :) One thing I noticed when I have used a jQuery solution is that the header scripting HTML element works at the chapter level, but not at the title or AU level. Is this standard behavior or am I missing something that would cause it to break?
  • klaatu
    klaatu Community Member Posts: 988
    Jason, thank you for the kind words.

    You asked. Is there a benefit to using jquery over straight javascript?

    I hope you don't mind but I'm going to append your question by adding "in Lectora" before answering it with my opinion, okay?

    In my opinion, Yes, there's a benefit. The benefit when used with Lectora lies in a couple of area's. The first, as Math alluded to, is ease of use. Because jQuery uses the same powerful selectors as CSS it is much easier to target lectoras elements. Especially the ones that it nests, such a text.  A simple line of text is placed in a span, in a paragraph that is in a div that also contains an anchor. Some of these selectors provide the ability to directly target an element that would otherwise require iterating through a loop (very cute, Tim).

    Additionally, jQuery provides methods that can accomplish difficult programmatic goals with one simple, easy to read and understand line that if written in pure JavaScript would take multiple lines of complicated, hard to read and comprehend code.

    Another benefit is in how jQuery automatically handles cross-browser incompatibility issues.

    Keep in mind that using jQuery does not increase the efficiency of the published output. On the contrary, because you are adding a library, it may require additional server requests which could decrease efficiency. However, published Lectora output does not follow standard web design best practices so there is no cause for concern about the difference adding the minimized jQuery library could make.

    Does this mean you should always use jQuery? No. If you are doing something really simple that does not require the use of powerful CSS selectors or the built in additional functionality jQuery provides, go with pure JavaScript. You know, you can totally mix the syntax of the two together as well.

    Something else to keep in mind is that its not a good idea to build a dependency on jQuery. jQuery is just a framework written in JavaScript. It is not the actual language. Only understanding how to use some cool jQuery functions, methods and plugins without understanding the JavaScript behind it is like being able to regurgitate sentences from a second language by rote. Not truly understanding what your saying will eventually land you in a situation that you can't talk your way out of.

    Of course this is just my opinion which is only 3.14 away from being an onion. I know, bad, but I saw it posted somewhere else and it made me smile.

    By the way Jason, from some of the stuff I've seen you put together and the help you've provided in this forum, I think you're doing awesome. There hasn't been a day, nor will there ever be, that I haven't had to turn to Stack Overflow or MDN. No matter how much I try to keep on top of this tech it stays one step ahead.

    Regarding the breaking issue you described. I usually put my my header scripting at the title level just after any CSS I add. It shouldn't matter as long as the jQuery library is loaded before you use it. Try putting your custom scripts in a ready function to ensure jQuery is loaded before your scripts are attempted:

    $(document).ready(function() {  // You're scripts });

    Perhaps you're running into a seamless play issue? Anyone else? Math, Tim?

     
  • timk
    timk Community Member Posts: 1,176 ☆ Superstar ☆
    Not sure, what could cause this. Usually Title / Chapter level should only define to which pages the code is copied to but make no difference to the code. If the code refers to elements / variables that are only accessible in the chapter it may not work when outside.
    To test you could put it on title level and disinherit on all chapters / pages but the one, to see if it's really caused by the position in the title.
  • mnotermans5114
    mnotermans5114 Community Member Posts: 916
    As both Darrel and Tim say, should work like that. Inheritance and elements not being ready/present yet might cause issues. But i guess you doublechecked that. Or indeed maybe 'Seamless'...

    have you tried a simple console.log("my script starts now") to see if things are going as you think they are.

    I often use these to give myself clues at what point my code is..to ease up debugging.

     
  • jasonadal
    jasonadal Community Member Posts: 439 ♪ Opening Act ♪
    @klaatu - I appreciate your words and ongoing support as I crawl further and further down the developer rabbit hole :)

    @timk and @mnotermans5114 - I didn't have a ton of time to play/troubleshoot before I had to send the course to production. I'll take a look at the options and hopefully be able to narrow it down and perhaps better describe the "break" that happens. If I can get it working without having to do the inheritance piece, it may move me more to go with the jquery code, given what everyone has said about jquery v. javascript that applies to multiple objects.
  • mnotermans5114
    mnotermans5114 Community Member Posts: 916
    to production ? Nice... i have to do the production too ;-)
Sign In or Register to comment.

So You Wanna Be An eLearning ROCKSTAR?

We're all fans of eLearning here! Want to become an eLearning ROCKSTAR? Just click on one of the buttons below to start your rocking journey!