How do you add JS and CSS to Lectora?

Ok, so you use meta tags like this as a personal preference. It might not be a big point but keep in mind this does not follow W3C standards and may, if checked, not validate properly. It's not too much of a big deal because if it works cross-browser, it works.

Thanks for sharing.

 

"Since using Ext HTML Object set to META TAGS is the only way in Lectora to place anything inside HEAD, it is THE place for adding SCRIPT, LINK, STYLE and of course META tags."

I respectfully disagree with this statement. Add an external JS file using Header Script and add a CSS sheet using the Cascading Style Sheet and you will see that they both are included in the Head of the exported HTML. "Only" is incorrect. I'm too lazy to make a movie.

If the Meta tag type HTML Object was designed in Inspire to be used to inject JavaScript and CSS even though the manual says it is for meta data, such as the authors name,  then why is it that there are Header Type and Cascading Style Sheet type objects as well?

While it is true that when you select the Inspire Meta tag type HTML Object and either type in it or point to a text file it will place whatever it finds in the head of the compiled HTML page, coming from a web and application development background, I do not recommend it for JS or CSS. I'm not saying it is wrong or won't work, I am saying I do not recommend it personally. Here's why. When you keep the CSS and JS* separate from the HTML you can use the same file for any number of web sites (or eLearning lessons). This is an incredibly powerful feature and should not be overlooked. For example, let's say you develop a website with 20 different pages or you have 20 different Inspire lessons. If you keep their CSS separate and have all link to the one file then if you need to make a style change you only have do it once on the linked CSS. If you put the CSS in each HTML page, as what happens  using the Meta tag, you would have to make 20 changes to Meta data and re-publish each! Additionally, keeping styling separate makes it simple to maintain the clients desired look (colors, font style, sizes, etc) across multiple projects. The time savings alone make it worth it.

I placed an asterisk by the JS above because I noticed that instead of linking to an external JavaScript file, the Header Script copies the entire .js and places it within script tags in the head of the HTML page. This is exactly the behavior of the Meta tag and I believe it should be changed to a link using src. Not only for the reasons above but because JavaScript functions become deprecated over time and future browsers may balk at old code. Using an external file, or better yet linking via a Content Delivery Network (CDN), means always having the newest versions of JavaScript libraries.

There are usually many ways to accomplish a similar goal. How you go about it is a personal preference. Sergey's use of the Meta tag is quite clever. My preference is to keep things separate. I guess I'm lazy. I like to do things once and reuse.

By the way, W3C and "standards" was mentioned a few times. W3C stands for World Wide Web Consortium (3 W's and a C) and they develop the standards that all web browsers are supposed to follow. You can "validate" your web application by running the file through a web markup validation service. This will tell you if what you wrote meets the W3C standard and, therefore, will work on all browsers.

Like Sergey pointed out, Inspire doesn't put the information you insert using the Meta tag HTML Object type inside a <meta> tag even though the User guide indicates it's for meta data. If you actually want to include meta data (some LMS may make use of it) you need to begin the meta data with a <meta> tag. No closing tag required.

DRS