Appending QR Codes to Moodle output

I've recently been working as the technical lead for a project at the University of Bath to investigate the use of QR Codes to support mobile users.

Moodle pages have long, crufty URLs that would be difficult to enter into a mobile browser. To help these users, a QR Code encoding of the current Moodle page URL was appended to printed output using a little bit of PHP and CSS.

To append a QR Code to your Moodle pages, add the following code to your Moodle theme footer template (./moodle-root/themes/theme-name/footer.html):

 
<?php
	if (empty($_SERVER['HTTPS'])) {
		$url = "http://" . $_SERVER['HTTP_HOST'] . $_SERVER['REQUEST_URI'];
?>
<div class="qrcode print">
<h3>Mobile Barcode</h3>
 
    <img class="qrcode print" src="http://go.bath.ac.uk/qr/download?DATA=
            <?php echo(urlencode($url)); ?>" alt="QR Code for this Moodle Page." />
</div>
 
<?php
	}
?>

Hide the QR Code in normal screen output:

div.qrcode.print {
    display: none;
}

... and add a little styling to the print stylesheet as follows:

div.qrcode.print {
    border-top: 1px black solid;
    margin-top: 1em;
    padding-top: 1em;
    text-align: center;
    display: block;
    font-size: 90%;
}
img.qrcode.print {
    padding: 1em;
}

See it in action at the Bath University Moodle installation (login required).

One Response to “Appending QR Codes to Moodle output”

  1. Phil Wilson Says:

    I look forward to being able to stalk you online from here ;)

Leave a Reply