The Course Page

As you probably know from the Degree Schemes page the way get Jekyll to generate a page for a degree scheme is to get the user to create a file and provide three pieces of information:

---
layout: course
short: <degree-scheme>
lang: <language-code>
---

So that means for us we have to somehow take just these three bits of information and generate everything we need not only information for visitors to the site, but also enough structure for our Javascript to handle Module Selection.

Getting the Course Details

We are only given a short code representing the degree scheme, we need to get the full record from the database. Thankfully as this code is unique we can simply go through each record until we find the right one:

{% for c in site.data.courses %}
    {% if c.short == page.short %}
        {% assign course = c %}
    {% endif %}
{% endfor %}

You can find more information about the course object’s structure on the Degree Schemes page

Choosing Appropriate Translations

We need to make sure we choose the right set of translations for all our titles and headers, so like above it’s just a case of searching the database for the right record:

{% for l in site.data.language %}
    {% if page.lang == l.short %}
        {% assign lang = l%}
    {% endif %}
{% endfor %}

Writing the HTML

Now we have all we need it’s time to write the HTML for the page we start off by including The Planner Header which contains the clear all selected modules button and options like the theme and language:

{% include planner_header.html %}

Now we wrap everything that follows in a div element with the planner class so we can find everything we need in the Javascript later. We start out each year with writing its name and adding a counter which will keep track of the number of credits that have been chosen by the user:

<div class="planner">

{% for year in course.modules %}
    <div class="year" id="year{{forloop.index}}">
         <h1>{{lang.year}} {{forloop.index}}</h1>
         <h3>{{lang.credits-chosen}}: <span class="credit"></span></h3>

Notice how we don’t specify an initial value for the number of chosen credits, that’s because we set this from the Javascript as the initial value will be dependent on the number of core modules for the course in this year.

Next we list out each of the core modules:

<div class="core">
{% for code in year.core %}

    <div class="module selected" id="{{code}}">
        {% include module_info.html %}
    </div>
{% endfor %}
</div>

The HTML for the module information and layout is handled by the _includes/module_info.html template which you can find more information about it on The Module HTML page. Since core modules are mandatory we add the selected class to the div element surrounding each module, so that our Javascript knows that these modules have already been selected.

Next we list out all the optional modules for the year:

<div class="optional">
{% for code in year.optional %}

    <div class="module" id="{{code}}">
        {% include module_info.html %}
    </div>
{% endfor %}
</div>

All that’s left to do is to close the remaining div elements and the main for loop which I will omit from this page. You can find all of the above code in context by looking at the _layouts/course.html file.