Modify Text Attributes using JavaScript?

Yes, the HTML, JS and CSS approach will work in any browser (on any device) that supports HTML5. Deployment method doesn't effect functionality. This will work with responsive design as well so you can call it one-time coding. One of the best parts of utilizing external JavaScript and Styling is that they are re-usable. You can use the same JS and CSS files throughout your whole catalog. Styling stays consistent. The benefits go on and on. Let's say you set up an interaction that changes text from black to red. The lesson your working on has fifty pages and on each page you have at least one of these interactions. You just about finish your project when the customer says they prefer the color to change to blue instead. Simply edit the CSS file and change the color declaration in the class that gets applied and Bam, they all change. Okay, you might already know the benefits of external CSS so I'll stop there.

As far as learning goes, if you dig a little deeper into the forums you'll find that there are a lot of extremely helpful, more knowledgeable people than myself, here willing to help in almost any way. It is not unusual for JohnBlackmon, Chief Technical Officer, and other Trivantis employees like Wendy Miller to answer posts as well. Jennifer Valley is always helpful and doing a bang-up job of moderating the forums too. Your back is covered.

Besides the obvious digging around in Lectora, I strongly suggest anyone wanting to get the most out of ANY authoring application study web design. HTML and CSS first then add JavaScript. That's what we're building, web pages - with Lectora doing a lot of the heavy lifting.

Until I have time to write a tutorial on the sample I posted, feel free to fire away with any questions you have.

Oh, I almost forgot. I was once, a long time ago, a Flash programmer too. Rejoice in the fact that GSAP (GreenSock Animation Platform) for JavaScript fully integrates with Lectora. Because of this and the ability to use other external libraries there is very little that can't be replicated inside Lectora.

Good questions.

1. Yes.

2. You can use a text style. You can override Lectora's styles.

3. No, not really. You'll need to preview the code in the developers tools in a browser. I suggest Chrome

There are a few ways to accomplish what you are considering. Take a look at the attached examples. You can click the button or the image. I prefer the method used in the right example. It requires a little more coding but once you understand how it works you'll have more control and many more styling and interaction options. For instance, you can add visual cues to text like on the top right. Take a look at this post if you are interested in that effect. This topic is similar.

Are either of the examples what you are thinking?

Most people just find it easier to duplicate a textbox, color it whatever and set it to "initially hidden". Then on button click, hide the original textbox, show the colored textbox. No JS involved.

Thanks to both Darrel and Sergey for the responses.

Darrel, both of these are exactly what I was thinking! I can follow much of the examples, except I am lost on how you are actually attaching the html/javascript code. (I can see the Custom DIV type and I know where to find the HTML Extension, but a lot of the details are well beyond where I'm at right now.) The "Lectora Information Center" PDF only mentions that a Custom DIV is used to insert custom html; there is no other instruction that I can find there. So at this time I have quite a few more questions. I will start with 2 at this time:

(1) In response to Sergey's suggestion, I totally agree that his method would be much simpler if I was developing only 1 frame or a very small course. However, I am testing Lectora's functionality to see if we can reproduce the functions we have now in our series of courses, most of which provide the student with 5-9 hours of continuing ed credits (meaning average time spent in the course is 5-9 HOURS). One of our courses offers over 40 HOURS of credit (all large, detailed, interactive college-level courses). We also are looking to produce at least some portions of these courses for mobile as well as PC/MAC/LMS. Based on something I saw on the Trivantis Community explaining how graphics/buttons are multiplied when using RCD, thereby substantially increasing response time, and considering the size of our courses, it is obvious to me that we would need to use alternate methods for buttons and multiple text field/graphics objects. Hence my first questions about using JavaScript with interactions. Does this Custom DIV/HTML/JavaScript method work for LMS as well as mobile (iOS/Android) and standard PC/MAC? Would we have to further customize any of the code to work on any of the output devices, or is it one-time coding?

(2) Our current courses are Flash-based and, in order to replicate much of the functionality we have now, it is evident to me that we will have to resort to JavaScript and other methods. While Lectora's native features are better than most other products I've reviewed, they are insufficient by themselves to reproduce our current interactivity. The great thing about Lectora is that it appears to be able to easily accommodate addition of this coding - assuming you know how to do it. I must admit that I find both the Trivantis Community and Lectora University sites rather difficult to use, but have tried searching for some instructional materials about learning how to add JavaScript, etc. I have found very little that is helpful. Are there some instructional materials available for this, or does this require attending a Lectora class? Or, any other suggestions on how to begin to dive in to this?

Agreed. If you're not looking to use JavaScript, want to affect all the text and have only a few to do, that's about as simple as it get's.

First, thanks for the GSAP tip. I just looked at the introduction on their web page and it looks great!

Just a couple more questions on your sample at this time. Do you create the Custom DIVs as html documents first and then somehow bring them in or link them to the page? I don't see a file referenced in the Lectora properties panel, so I am lost on this. When previewing in the browser, I can see the SPAN tag in the 2nd sample in the html code (allowing the javascript to set the color on just that section of the text), so at some point you must have to access the html code to insert a span or whatever tag is appropriate for the action.

I appreciate your affirmations of Lectora's capabilities. I will keep on plugging away and asking questions!

Darrel, I used part of the sample you sent to replicate a page from our existing course and was successful! I created my own CSS file, using yours as a starting pattern. The only thing is that I first created the page in the sample file you sent, then copied the page into the sample course I'm using for examples of Lectora capabilities relative to my company's needs. At that point, I did find it quite annoying to have to update all the JS code relative to the text fields, since Lectora renumbers the HTML name on the text fields. (But, at least I had read about that somewhere on the community - and remembered it - and knew how to fix it.) It was easy to link my CSS file following your instructions, and even easy to link the jquery file. However, use of the jquery file is totally by rote, not by understanding... I am sure these samples seem so easy and elementary for you, but they - and your time to provide them - are most certainly appreciated by someone like me.

Whether or not I develop outside of Lectora (I use Sublime Text 3 for web development) depends on the complexity of the code. For something like this I usually work right in Lectora.

To create the sample on the right that has only the one section of text (in a span) I added an HTML Extension (located in the Insert tab - web objects part of the ribbon). This inserts a placeholder in the main window. I left the type of HTML Extension as Custom Div and clicked Edit (in the ribbon). This opens a window for you to, in this instance, write HTML code to insert. There is no linked external HTML file, however, I do have my CSS linked via another HTML extension (cascading style sheet type) in the root of the project. I also had to link jQuery (HTML Extension Header Scripting type) to be able to use that library.

Back to the HTML I inserted. I assigned the "mary" class to the undefined an ID so I can access it with JavaScript. The span initially inherits the "mary" class styles. I then add a class (newStyle) to the span on click of the lamb image (via a Lectora action Run JavaScript attached to the lamb image) to change its styling apart from the rest of the paragraph.

One thing to point out. Lectora, to my dismay, almost exclusively uses inline styling. In order to be able to override styles that Lectora assigns you sometimes need to use the !important rule. This is usually a no-no in web design because it breaks the cascade however it exists for reasons like this and is usually safe because unlike designing a regular website, you probably wont have any unexpected conflicts. Don't worry if this sounds complicated, just keep in mind that if a style you apply does not seem to take and everything else looks right, it could be that you're trying to override an inline style. Chrome's developers tools will become your good friend.

I think that may answer your question? If not let me know. I will try to work on a tutorial today, time permitting.

One other thing I did not point out initially. If you open the .awt and preview in a browser you will notice that the graphic to the right of "cool effect" does not show (run the index.html file in the zip to see it). This is because it is added via my linked CSS file and Lectora has no way of knowing to place a copy of the graphic in the published output. In order to see something like this you need to publish once and manually copy the file to the correct location in the output files (in this case I placed it in the root - same level as the index.html). The good thing is that subsequent publishes will not overwrite the graphic and you'll see it in previews. I hope I explained that sufficiently. Again, I will really break everything down.

Darrel

Darrel, thanks for the excellent explanations. I followed everything in the first section, though not sure I could fully reproduce at this time. But, I plan to work my way through this and see if I can follow the process. However, I did not even see - nor would I have noticed without your pointing it out - the CSS-added graphic. I was able to see it when viewing the index.html, but I'm a little lost on the rest (starting with the "via linked CSS file"); totally due to my lack of knowledge of HTML/CSS/JavaScript and how they interact.

Thank you, Suzanne. I'm glad I was able to provide some assistance. This stuff will get easier in time the more you do it and I'm hoping to have something written this weekend to make it clearer.