Menu

Can I add extra subsections to my course?

Currently courses can be divided into chapters and lessons, but if you're looking to divide your content up further we do have a few different options/recommendations for that:


1. Consider splitting your content out into separate courses - If your course is particularly long, it may actually work better as separate courses or modules. To sell the whole thing as a package, you are able to bundle courses as part of any paid plan. More info here


2. Use numbering in your chapter and lesson names to define subsections - Add numbers to your chapter and lesson titles to make it clear which section each piece of content belongs to. E.g. Your first chapter could include lessons 1.1.1, 1.2, 1.3, lessons 2.1, 2.2, 2.3, and so on.


3. Add some custom code to your site - we do also have a pretty nifty workaround for adding some "subchapter styling" to lesson titles. This allows you to make some of your lesson titles bold, giving them the appearance of subchapter headings.


To have this option on your own Thinkific site, you'll need to paste the following script under Advanced Settings > Site Footer Code on your admin dashboard:

 

<script>
   function updateCoursePlayer() {
     var sections = $("h6:contains('<<')");
     sections.css({"font-weight": "bold"});
     sections.each(function(index, item) {
       var section = $(item);
       var text = $.trim(section.text());
       section.text(text.slice(2));
       section.siblings(".content-item__type").remove();
     });
   }

  function updateCoursePlayerNav() {
    self = this;
    Ember.run.later(this, function() {
      self.updateCoursePlayer();
     }, 10);
  }

 $(function() {
//course page
    sections = $(".chapter-list-item *:contains('<<')");
    sections.css({"font-weight": "bold"});
    sections.attr("href", "#");
    sections.find(".label-free").remove();
    sections.each(function(index, item) {
        var section = $(item);
        var text = $.trim(section.text());
        section.text(text.slice(2));
        section.addClass("section");
        section.siblings(":last").remove();
    });

  //enrollment page
  $(".content-counter").hide();
  sections = $(".contents a:contains('<<')");
  sections.attr("href", "#");
  sections.css({"font-weight": "bold"});
  sections.each(function(index, item) {
      var section = $(item);
      var parent = section.parents("li");
      var text = $.trim(section.text());
      section.text(text.slice(2));
      section.addClass("section");
      parent.find("div.right").remove();
      setTimeout(function() {
        parent.find("i").remove();
      }, 500);
    });

     //course player
     if(typeof(Ember) !== 'undefined') {
        var self = window;
        CoursePlayer.reopen({
           ready: function() {
               this._super();
               var ChapterView = this.__container__.lookupFactory("view:course/left-nav-chapter");
               ChapterView.reopen( {
                 toggle: function() {
                   this._super();
                   var expanded = this.get("expanded");
                   if(expanded) {
                     self.updateCoursePlayerNav();
                   } 
                }
              });
           }
       });

     
     }
});
</script>

 

Once you've done that, from now on you simply need to add << to the beginning of a lesson title to make it appear in bold anywhere that it appears on your Thinkific site (e.g. the curriculum on your landing page, within the course player, etc).


Here's an example:


Step 1. << is added to the beginning of the lesson title.




Step 2. That lesson title is now bold!



Can the <script> be updated? Meaning:
 - Code #1: Keep as the current code, but include a 'margin-left' indentation (so bold + margin-left for the css style). This could serve as the 'header'/'intro' to topic.
 - Code #2: Only have a 'margin-left' css. This could serve as the topic content.

With the current code you might could use 2 variables: "<<" for non-bolded indents, and "<<+" for bolded indents.

Code might could go 3 levels deep ("<<<" and "<<<+"), though not recommended.

Hi Chellie!


This certainly sounds possible, so if you're familiar with Javascript and wanted to try it out you could just update the existing script and paste it under Advanced Settings > Site Footer Code.


Please let me know how you get on - I'd be interested to know if it works!


Cheers,

Catherine

Hi,


I can't get this to work. Can you help? Any ideas?


- I copied the code to Advanced Settings/Site Footer Code

- I typed my Chapter name as <<Section 1: Lifestyle

- And that's exactly how it appears. :-/


image


Hi Tonya,


I took a look at your site and it looks this is because you're using our new beta Course Player.


That code must be specific to the older Course Player.


I'll flag this for the team and see if it's possible to do this with the new one.


Please allow a little bit of time whilst we get this together for you - I'll aim to have an update for you next week.


And we're to help if you have any other questions in the meantime.


Thanks!

Catherine

HI Catherine,

   Could you see if is possible to apply extra configuration using the new beta Course Player?

   Thanks,

Jorge

Hi Jorge!


You can send this request directly to our product team through this link: https://portal.prodpad.com/18563 


Our product team will then look into it this and see if it is possible.


Thanks!


Oliver

Login to post a comment