University of Derby

Unistats: Joint Honours 

<div class="text-block">
    '
    <section class="unistats">
        <h2 id="unistats">Unistats</h2>

        <section class="accordion">
            <div class="accordion-tablist" role="tablist">
                <div class="accordion-tab">
                    <a id="full-time-with-analytics-label" href="#full-time-with-analytics" class="accordion-tab-title-container collapse-toggle active" data-collapse role="tab" aria-expanded="true" aria-controls="full-time-with-analytics">
                        <h4 class="accordion-tab-title">
                            Full time with Analytics
                            <span class="accordion-tab-title-indicator">
                        <i class="uod-icons uod-icons-chevron-down"></i>
                    </span>
                        </h4>
                    </a>
                    <div id="full-time-with-analytics" class="accordion-tab-content collapse active" role="tabpanel" aria-labelledby="full-time-with-analytics-label">
                        <div class="accordion-tab-content-inner">
                            <div class="unistats-widget-wrapper">
                                <p><iframe id="unistats-widget-frame" title="Unistats KIS Widget" src="about:blank" scrolling="no" data-index="0" data-course="SANJAGJ" data-mode="FullTime" class="unistats-widget"></iframe></p>
                                <p>
                                    <a href="https://www.derby.ac.uk/undergraduate/computing-courses/analytics-joint-honours/" class="button-outline" title="View Full time with Analytics" role="button" tabindex="0" data-scroll>
        View course
            <span class="button-overlay"><span>
                        View course
                    </span></span></a> </p>
                            </div>

                        </div>
                    </div>
                </div>
                <div class="accordion-tab">
                    <a id="part-time-with-analytics-label" href="#part-time-with-analytics" class="accordion-tab-title-container collapse-toggle" data-collapse role="tab" aria-expanded="false" aria-controls="part-time-with-analytics">
                        <h4 class="accordion-tab-title">
                            Part time with Analytics
                            <span class="accordion-tab-title-indicator">
                        <i class="uod-icons uod-icons-chevron-down"></i>
                    </span>
                        </h4>
                    </a>
                    <div id="part-time-with-analytics" class="accordion-tab-content collapse" role="tabpanel" aria-labelledby="part-time-with-analytics-label">
                        <div class="accordion-tab-content-inner">
                            <div class="unistats-widget-wrapper">
                                <p><iframe id="unistats-widget-frame" title="Unistats KIS Widget" src="about:blank" scrolling="no" data-index="1" data-course="SANJAGJ" data-mode="PartTime" class="unistats-widget"></iframe></p>
                                <p>
                                    <a href="https://www.derby.ac.uk/undergraduate/computing-courses/analytics-joint-honours/" class="button-outline" title="View Part time with Analytics" role="button" tabindex="0" data-scroll>
        View course
            <span class="button-overlay"><span>
                        View course
                    </span></span></a> </p>
                            </div>

                        </div>
                    </div>
                </div>
                <div class="accordion-tab">
                    <a id="entrepreneurship-label" href="#entrepreneurship" class="accordion-tab-title-container collapse-toggle" data-collapse role="tab" aria-expanded="false" aria-controls="entrepreneurship">
                        <h4 class="accordion-tab-title">
                            Entrepreneurship
                            <span class="accordion-tab-title-indicator">
                        <i class="uod-icons uod-icons-chevron-down"></i>
                    </span>
                        </h4>
                    </a>
                    <div id="entrepreneurship" class="accordion-tab-content collapse" role="tabpanel" aria-labelledby="entrepreneurship-label">
                        <div class="accordion-tab-content-inner">
                            <div class="unistats-widget-wrapper">
                                <p>For this combination Unistats does not have enough data to publish a widget. It is important to note that this is not a reflection on the quality of the course.</p>
                                <p>
                                    <a href="https://www.derby.ac.uk/undergraduate/business-courses/entrepreneurship-joint-honours/" class="button-outline" title="View Entrepreneurship" role="button" tabindex="0" data-scroll>
        View course
            <span class="button-overlay"><span>
                        View course
                    </span></span></a> </p>
                            </div>

                        </div>
                    </div>
                </div>
                <div class="accordion-tab">
                    <a id="full-time-with-business-management-label" href="#full-time-with-business-management" class="accordion-tab-title-container collapse-toggle" data-collapse role="tab" aria-expanded="false" aria-controls="full-time-with-business-management">
                        <h4 class="accordion-tab-title">
                            Full time with Business Management
                            <span class="accordion-tab-title-indicator">
                        <i class="uod-icons uod-icons-chevron-down"></i>
                    </span>
                        </h4>
                    </a>
                    <div id="full-time-with-business-management" class="accordion-tab-content collapse" role="tabpanel" aria-labelledby="full-time-with-business-management-label">
                        <div class="accordion-tab-content-inner">
                            <div class="unistats-widget-wrapper">
                                <p><iframe id="unistats-widget-frame" title="Unistats KIS Widget" src="about:blank" scrolling="no" data-index="3" data-course="AAGJBNJ" data-mode="FullTime" class="unistats-widget"></iframe></p>
                                <p>
                                    <a href="https://www.derby.ac.uk/undergraduate/business-courses/business-management-joint-honours/" class="button-outline" title="View Full time with Business Management" role="button" tabindex="0" data-scroll>
        View course
            <span class="button-overlay"><span>
                        View course
                    </span></span></a> </p>
                            </div>

                        </div>
                    </div>
                </div>
                <div class="accordion-tab">
                    <a id="part-time-with-business-management-label" href="#part-time-with-business-management" class="accordion-tab-title-container collapse-toggle" data-collapse role="tab" aria-expanded="false" aria-controls="part-time-with-business-management">
                        <h4 class="accordion-tab-title">
                            Part time with Business Management
                            <span class="accordion-tab-title-indicator">
                        <i class="uod-icons uod-icons-chevron-down"></i>
                    </span>
                        </h4>
                    </a>
                    <div id="part-time-with-business-management" class="accordion-tab-content collapse" role="tabpanel" aria-labelledby="part-time-with-business-management-label">
                        <div class="accordion-tab-content-inner">
                            <div class="unistats-widget-wrapper">
                                <p><iframe id="unistats-widget-frame" title="Unistats KIS Widget" src="about:blank" scrolling="no" data-index="4" data-course="AAGJBNJ" data-mode="PartTime" class="unistats-widget"></iframe></p>
                                <p>
                                    <a href="https://www.derby.ac.uk/undergraduate/business-courses/business-management-joint-honours/" class="button-outline" title="View Part time with Business Management" role="button" tabindex="0" data-scroll>
        View course
            <span class="button-overlay"><span>
                        View course
                    </span></span></a> </p>
                            </div>

                        </div>
                    </div>
                </div>
            </div>
        </section>

        <style type="text/css">
            #udol-course-taster-exercise .accordion-tab:after {
                display: inline-block;
                transform: translate(0, 0);
                text-rendering: auto;
                font: normal normal 400 14px/1 uod-icons;
                font-size: inherit;
                -moz-osx-font-smoothing: grayscale;
                -webkit-font-smoothing: antialiased;
                content: "\ea0d";
                font-size: 2em;
                color: #101d49;
                width: 100%;
                text-align: center;
                padding-top: 20px;
            }

            #udol-course-taster-exercise .accordion-tab:last-child:after {
                content: '';
                padding-top: 0;
            }
        </style>
    </section>
</div>
 
{#
<script>
(function (d) {
"use strict";
var widgetScript = d.createElement('script');
widgetScript.id = 'unistats-widget-script';
widgetScript.src = '//discoveruni.gov.uk/widget/embed-script';
var scriptTags = d.getElementsByTagName('script')[0];
if (d.getElementById('unistats-widget-script')) { return; }
scriptTags.parentNode.insertBefore(widgetScript, scriptTags);
} (document));
</script>
<div class="kis-widget" data-institution="10007851" data-course="G1203" data-kismode="FullTime" data-orientation="responsive" data-language="en-GB"></div>
#}
<div class="text-block">'
    <section class="unistats">
        <h2 id="unistats">Unistats</h2>
        {% set contents = [] %}
        {% for index, course in courses %}
            {% set content %}
                <div class="unistats-widget-wrapper">
                    {% if course.code %}
                        <p><iframe id="unistats-widget-frame" title="Unistats KIS Widget" src="about:blank" scrolling="no" data-index="{{index}}" data-course="{{course.code}}" data-mode="{{course.mode}}" class="unistats-widget"></iframe></p>
                    {% else %}
                        <p>For this combination Unistats does not have enough data to publish a widget. It is important to note that this is not a reflection on the quality of the course.</p>
                    {% endif %}
                    {% if course.courseUrl %}
                        <p>
                            {% include '@button' with {
                                label: 'View course',
                                href: course.courseUrl,
                                title: 'View ' ~ course.label,
                            } %}
                        </p>
                    {% endif %}
                </div>
            {% endset %}
            {% set contents = contents|merge([{ label: course.label, tag: course.label|lower|replace({' ':'-'}), expanded: index == 0, content: content }]) %}
        {% endfor %}
        
        {% include '@accordion' with {
            contents: contents,
            modal: modal
        } %}
    </section>
</div>
 
{
  "courses": [
    {
      "code": "SANJAGJ",
      "mode": "FullTime",
      "label": "Full time with Analytics",
      "courseUrl": "https://www.derby.ac.uk/undergraduate/computing-courses/analytics-joint-honours/"
    },
    {
      "code": "SANJAGJ",
      "mode": "PartTime",
      "label": "Part time with Analytics",
      "courseUrl": "https://www.derby.ac.uk/undergraduate/computing-courses/analytics-joint-honours/"
    },
    {
      "code": null,
      "mode": null,
      "label": "Entrepreneurship",
      "courseUrl": "https://www.derby.ac.uk/undergraduate/business-courses/entrepreneurship-joint-honours/"
    },
    {
      "code": "AAGJBNJ",
      "mode": "FullTime",
      "label": "Full time with Business Management",
      "courseUrl": "https://www.derby.ac.uk/undergraduate/business-courses/business-management-joint-honours/"
    },
    {
      "code": "AAGJBNJ",
      "mode": "PartTime",
      "label": "Part time with Business Management",
      "courseUrl": "https://www.derby.ac.uk/undergraduate/business-courses/business-management-joint-honours/"
    }
  ],
  "modal": null
}
  • Content: 
    // Kick off the load on page open to load any open accordion items
(function(){

	$('.unistats').find('.accordion-tab').each(function() {

		if ($(this).find('.accordion-tab-content').first().height()) {
			loadUnistats($(this));
		}
	});
})();


$('.unistats').find('.accordion-tab').on('click', function(e) {

	if ($(this).find('.unistats-widget').first().attr('src') === 'about:blank') {
		loadUnistats($(this));
	}
});

/**
 * loadUnitstats - lazy load the Unistats iframe by changing the src attribute.
 * This needs to be set to "about:blank" initially as a blank src is not valid
 * and will result in the iframe loading the containing page.
 * 
 * @param  tab - Object - jQuery element representing the accorion tab
 */
function loadUnistats(tab) {
	var target   		 = $(tab).find('.unistats-widget').first();
	var course 			 = target.data('course');
	var mode 			 = target.data('mode');
	var targetUri      	 = 'https://discoveruni.gov.uk/widget/10007851/' + course + '/responsive/small/en_GB/' + mode;

	target.attr('src', targetUri);
}
  • URL: /components/raw/unistats/unistats.js
  • Filesystem Path: components/components/unistats/unistats.js
  • Size: 1 KB
  • Content: 
    .unistats-widget {
    overflow: hidden;
    border: 0px none transparent;
    width: 100%;
    background: $mid-grey;

    &-wrapper {
    	width: 100%;
    }
}

.unistats {
    .accordion-tab-content-inner {
        display: flex;
        justify-content: center
    }
}
  • URL: /components/raw/unistats/unistats.scss
  • Filesystem Path: components/components/unistats/unistats.scss
  • Size: 277 Bytes

Unistats Component

Displays the Unistats banners for a course in an Accordion component, and automatically switches between the horizontal and vertical version of the banner according to the viewport dimensions. Must be supplied the unique course code and valid modes for the course.

Key Features

  • Display of banner contents within Accordion component
  • Automatically opens the first Accordion panel, unless hotlinking directly to a panel
  • Optional specification of modal / plural panel mode for the accordion component

Properties

  • course [required, Array of CourseObject]
  • modal [optional, Boolean, default false]

CourseObject

  • code [required, string]
  • mode [required, string, usually “Part time” or “Full time”]
  • label [required, string]