How do you add JS and CSS to Lectora?

ssneg Community Member Posts: 1,456 ♪ Opening Act ♪
Again, someone asked me this question and I wanted to reply publicly so more people can weigh in.
Is this a personal preference over the Header Scripting type for JS and Cascading Style Sheet type for CSS or do you find there is a specific Inspire related benefit? I am so ingrained in doing things a certain way I don’t want to miss out on anything.
My way of working with JS/CSS is to create an external HTML object, set it to Meta tags, edit it and paste the following code:
/* whatever quick styles I want to add */
<link rel="stylesheet" type="text/css" href="/custom/custom.css">
//whatever quick JS I want to add here
<script src="/custom/custom.js"></script>

The above setup allows me to quickly edit CSS and JS inside Lectora if I need to (e.g. for debugging). It also links two (or more) files that are attached to the title. The files contain 99% of my custom code and I edit them outside of Lectora, directly in my favourite text editor (which is Sublime on Mac and Notepad++ on Windows).

I find linking external CSS files via the Ext HTML Object set to CSS is too cumbersome. This way I have ONE ext HTML object on title level and I always know where to look for adding/removing/editing my code.


  • klaatu
    klaatu Community Member Posts: 986 ☆ Roadie ☆
    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.

  • ssneg
    ssneg Community Member Posts: 1,456 ♪ Opening Act ♪
    No. Let me re-phrase. Anything you write in Lectora's HTML Object set to META tags is included in the HTML HEAD tag. It is absolutely 100% fully entirely W3C compliant to include SCRIPT tags, STYLE tags and LINK tags inside HEAD. In fact, that is probably the right way to do that. This is where they should be.

    What's confusing is that Lectora actually calls this "META tags". Yes, meta tags should be placed in this title using this feature but it isn't exclusively for meta tags.

    To make things a bit more confusing, Lectora has Ext HTML Object's mode called "HEADER SCRIPTING", which allows you to type in some scripts that will be executed after most (not all of) Lectora scripts run. And of course, it is also placed inside a SCRIPT element in the HEAD element.
  • ssneg
    ssneg Community Member Posts: 1,456 ♪ Opening Act ♪
    In case anyone is interested, I took time to refresh W3C spec in my memory (see and here's what I found:
    QUOTE: The SCRIPT element places a script within a document. This element may appear any number of times in the HEAD or BODY of an HTML document. (
    QUOTE (on LINK tag): This element defines a link. Unlike A, it may only appear in the HEAD section of a document. (
    QUOTE: 14.2.3 Header style information: the STYLE element. The STYLE element allows authors to put style sheet rules in the head of the document.
    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 highly recommend anyone interested in the subject of adding custom code to Lectora to play with it:
    1. Create Ext HTML Object set to Meta Tags
    2. Add any text inside it (e.g. type zzz)
    3. Publish the page, open its source in Notepad and see where zzz appears.

    Some time ago I did this for all types of Ext Objects to find out where exactly the content goes and what it is wrapped in.
  • ssneg
    ssneg Community Member Posts: 1,456 ♪ Opening Act ♪
    And this is the video for the above experiment :)
  • klaatu
    klaatu Community Member Posts: 986 ☆ Roadie ☆
    "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.

  • ssneg
    ssneg Community Member Posts: 1,456 ♪ Opening Act ♪
    I guess what is great about Lectora is its ability to achieve the same result in multiple ways so everyone can fine-tune it to their exact needs.