Blogs
We have used Flowplayer as our preferred movie player in ATutor for a long time now, and I have written a post about how you can integrate it in you install.
That was for version 2.2.1 of Flowplayer, but we're now at version 3 (3.0.7 at the time of writing). Flowplayer is now more elegant, and you have to integrate it in a different way.
Again, first thing is to download the player.
Then, copy the js file you need to your server, and add a reference to it in you theme file (/your_theme_path/header.tmpl.php):
<script type="text/javascript" src="/flowplayer307/flowplayer-3.0.6.min.js"></script>
This file will be in the example folder when you download it, and yes the version number for the js is 3.0.6 even though the player is at 3.0.7.
Third, edit your include/lib/output.inc.php. Around line 650, add the following to get ATutor to output the right code when it finds a .flv file inside the media tag:
<?php
// .flv - uses Flowplayer 3.0 from flowplayer.org (playing file via full URL)
preg_match_all("#\[media[0-9a-z\|]*\]http://([\w\./-]+)\.flv\[/media\]#i",$text,$media_matches[11],PREG_SET_ORDER);
$media_replace[11] ="<a class=\"flowplayerholder\"
style=\"display:block;width:##WIDTH##px;height:##HEIGHT##px;\"
href=\"http://##MEDIA1##.flv\">
</a>";
// .flv - uses Flowplayer 3.0 from flowplayer.org (playing file from AT_content_dir)
preg_match_all("#\[media[0-9a-z\|]*\]([\w\./-]+)\.flv\[/media\]#i",$text,$media_matches[12],PREG_SET_ORDER);
$media_replace[12] ="<a class=\"flowplayerholder\"
style=\"display:block;width:##WIDTH##px;height:##HEIGHT##px;\"
href=\"".AT_BASE_HREF."get.php/##MEDIA1##.flv\">
</a>"; ;
?>(not including the php start and stop tags!)
That's it for the output.inc.php, no more changes needed! Note that the earlier inline javascript Flowplayer needed now is gone, and all it inserts is a slighty styled link.
You do however need to change one more file to compensate for this, and that is your theme's footer.tmlp.php. Add this at the top of it:
<script language="JavaScript">
window.onload = function() {
// for Flowplayer
$f("a.flowplayerholder", "/flowplayer307/flowplayer-3.0.7.swf", {
clip: { autoPlay: false, autoBuffering: true },
plugins: {
controls: {
all: false,
play: true,
scrubber: true,
fullscreen:true
}
}
});
}
</script>For those of you familiar with the magic that is jQuery you will recognize the syntax. This basically says that the Flowplayer (flowplayer-3.0.7.swf) should load whenever the page finds an a-element with the class "flowplayerholder", and it passes some instructions that you can change to your liking by looking at the Flowplayer documentation.
To make ATutor insert .flv files in the media tag I suggest you read about the changes done in include/html/filemanager_display.inc.php that I described in my original post.
To have a look at the new player, have a look-see here!

Improving the test submissions page! (or, review my code)
March 12, 2009 - 16:03 — Vegard A. JohansenI am not in any way a programmer, but I'm slowly learning some php, and today I actually made something useful for ATutor that has been requested by several of our instructors!
The code now work just as it should, but I can see that it might be a smarter way of solving this, without all the redundant lines! Also, I have some other plans to further expand this before I will wrap it all up in a patch.
Problem is this
For tests you can set no pass score, a pass score in points or a pass percent. This is good, but when an instructor views the test submissions on a test it isn't reflected anywhere wether the student passed or failed. This is what the results table looks like:

Problem here is that the the student needs 15 points to pass so three of these student failed and three passed, but the table doesn't tell the instructor this. And quite naturally, many of them wish to see this information!
So I set out to change the tools/tests/results.php to fix this problem. Here's what I did:
Line 86 looks like this:
<?php
//get test info
// [SQL]
$out_of = $row['out_of'];
$anonymous = $row['anonymous'];
$random = $row['random'];
$title = $row['title'];
?>But we need to use the pass percent and pass score info from the database too, so I added these two values as variables for simplicity:
<?php
//get test info
// [SQL]
$out_of = $row['out_of'];
$anonymous = $row['anonymous'];
$random = $row['random'];
$title = $row['title'];
$passscore = $row['passscore'];
$passpercent = $row['passpercent'];
?>So far so good, now our page knows this info too and we can use them later!
Move down to lije 223 and we find the table row with the test result data:
<td align="center">
<?php if ($out_of) {
if ($random) {
$out_of = get_random_outof($tid, $row['result_id']);
}
if ($row['final_score'] != '') {
echo $row['final_score'].'/'.$out_of;
} else {
echo _AT('unmarked');
}
} else {
echo _AT('na');
}
?>
</td>(intendation is better, blame my editor here). Now, this presents the score if the questions in the test has scores, but we want it to also say if the student passed or not, and make it work both for pass scores and pass percents, so I changed it all too:
<?php
$user_percent_score = $row['final_score'] / $out_of * 100;
// if the questions has points
if ($out_of) {
// same if it uses random questions
if ($random) {
$out_of = get_random_outof($tid, $row['result_id']);
}
// added by vegard
// if student has points and pass percent is set
if ($row['final_score'] != '' && $passpercent != '0' && $passscore == "0") {
// and the user percent score is larger than the pass percent
if ($user_percent_score >= $passpercent) {
echo "<span class=\"test_passed\">" .
$row['final_score'] . " / " .
$out_of . "
<img src=\"".$_base_path . "images/checkmark.gif" . "\">
</span>";
} else {
echo "<span class=\"test_failed\">" .
$row['final_score'] . ' / ' .
$out_of . "
<img src=\"".$_base_path . "images/x.gif" . "\">
</span>";
}
}
// elseif, students has points and pass points is set
elseif ($row['final_score'] != '' && $passscore != '0' && $passpercent == "0") {
// and the user point score is larger than the pass score
if ($row['final_score'] >= $passscore) {
echo "<span class=\"test_passed\">" .
$row['final_score']. ' / ' .
$out_of . "
<img src=\"".$_base_path . "images/checkmark.gif" . "\">
</span>";
} else {
echo "<span class=\"test_failed\">" .
$row['final_score'].' / ' .
$out_of . "
<img src=\"".$_base_path . "images/x.gif" . "\">
</span>";
}
}
// elseif, no pass score or pass percent is set, show raw score
elseif ($passscore == "0" && $passpercent == "0") {
echo $row['final_score'] . " / " . $out_of;
}
}
// else, mark is not applicable
else { echo _AT('na'); }
?>(Again, intendation is better) - now this actually works great, but as I'm repeating two chunks of pass / fail html code there must be a more elegant way of doing it, right?
Anyhow, the end result after these changes are:

I used existing graphics from ATutor so nothing new is added, and I made some styles that can be improved on, but atleast it works!
Further expansion
This solves some problems, but the submissions page can still be improved, and the first things I wish to do is add two more filters to it:
- You need to be able to filter by pass or fail too, so an instructor can choose to only see the ones that passed a test or failed a test.
- ..and more importaint: we need a way to hide redundant scores. The situation for many of our tests now is that the users can try many times to get it right, so you can easily get 300 submissions on a page for say 50 students. Now, the instructors are most often only interested in the 50 students, and wether they pass or fail, so we need a filter that only gets the best score a student has achieved, and then only displays that one result per student, making the instructor able to easily see which of his students passed or failed, without caring how many tries they have used.
Any ideas for this, and also other ways to improve this page are appreciated! I add the modified results.php page here so you can try it on your own install, but do take a backup!

Quick and dirty trick to add a class to content links (and use grep!)
February 16, 2009 - 11:31 — Vegard A. JohansenWe've had several requests from clients that wants certain content pages stand out more than other content pages. This is easy to do with CSS, but then you need a hook to hang the CSS on, which is not available by default in ATutors content navigation.
I decided to have a closer look at this today, and my goal was adding an unique class to each content link in the side meny.
What you do is:
find include/classes/ContentManager.class.php
and within this file you need to find a link to content, I found one at line 696 that I got to work. It looks like:
<?php
$link .= $img_link . '<a href="'.$_base_path.url_rewrite($in_link).'" title="';
?>(not including the php start and end tag)
I'll be honest and say that I don't know if this is the best line to alter, but at least the end result works in all my tests. I changed the line to:
<?php
$link .= $img_link . '<a class="cid-'.$content['content_id'].'" href="'.$_base_path.url_rewrite($in_link).'" title="';
?>(again, not including the php start and end tag)
that is, adding class="cid-'.$content['content_id'].'" which will create an end result like <a class="cid-123" href=".." when you view source, which you can use to style!
Bonus tip
Finding code you wish to alter is easy if you have a terminal (which means you use Mac or Linux), and I'll write down here how you can use the grep command in a terminal to find this, mostly because I need a place where I can look it up myself:
Go to the directory where you wish to start searching, and fire away:
grep -R "I am the eggman!" test/*You will now search for I am the eggman! recursively within all the files in the test directory.
To find HTML code you will probably find that you need to search for the "-character too, and then you need to escape them. Here's what I used to find the file with the code I needed to change in the example above:
grep -R 'alt=\"\" class=\"img-size-tree\"' atutor/*Hat tip to Lon, the terminal ninja, for helping me with this
Hello! My name is Håvard Pedersen and I am the new web developer at NST. I am excited to get this opportunity to contribute to a open source project, and started off with a fairly simple project.
The glossary module used an old library called overlib for it's tooltips. Unfortunately, that library failed on IE6 and needed replacement.
What I did was essentially adding the jQuery tooltip plugin, removing the old overlib library and simplifying the markup. The tooltips are now stylable by adding a jquery.tooltip.css to your template directory in the following format (shown here is the default style):
#tooltip {
position: absolute;
z-index: 3000;
border: 1px solid #111;
background-color: #eee;
padding: 5px;
}
#tooltip h3, #tooltip div { margin: 0; }This patch only patches the default theme, so if you want to use it with another theme, you need to do the following...
Add the following somewhere in the <head> section of header.tmpl.php:
<style type="text/css">
#tooltip {
position: absolute;
z-index: 3000;
border: 1px solid #111;
background-color: #eee;
padding: 5px;
opacity: 0.85;
}
#tooltip h3, #tooltip div { margin: 0; }
</style>
<link rel="stylesheet" href="<?php echo $this->base_path.'themes/'.$this->theme; ?>/jquery.tooltip.css" type="text/css" />
<script src="<?php echo $this->base_path; ?>jquery.bgiframe.js" type="text/javascript"></script>
<script src="<?php echo $this->base_path; ?>jquery.dimensions.js" type="text/javascript"></script>
<script src="<?php echo $this->base_path; ?>jquery.tooltip.js" type="text/javascript"></script>
<script type="text/javascript">
$(function() {$('a.tooltip').tooltip({
showBody: ": ",
showURL: false
});});
</script>And remove the following from the same file:
<div id="overDiv" style="position:absolute; visibility:hidden; z-index:1000;"></div>
The patch is downloadable at http://atutor.no/contribs/jquery-tooltips-glossary-module
Happy 2009 to everyone in the community!
I wish all of you love, peace and success, no matter the difficulties. May the next year be better and brighter than you could ever imagine. :)
Happy New Year!

Include jquery in ATutor default theme! Getting ready for 1.6.2
December 16, 2008 - 14:54 — Vegard A. JohansenWe're hard at work updating our contributions to work with 1.6.2, and as we have hired a new developer we'll also improve on the patches, to hopefully get them included in the 1.6.3 core!
BTW: We will only maintain patches for whatever is the latest version of ATutor, so if you need any for 1.6.1 you will have to hurry to get them before they are updated to 1.6.2!
We will also soon replace the dated overlib.js that is used for the hover effect on glossary terms.
To make these contributions as good as they can be, I am now introducing a patch that many other patches will be dependent on, which is a patch that includes the jquery library in the default ATutor theme. Jquery is actually bundled with ATutor 1.6.2 allready, but not all themes make use of it.
This patch will simply include jquery in the default theme, and you will have to install it first to make many other patches work. For the Redux theme I will include jquery by default.
Atutor 1.6.2 was released Thursday, and you can get it at atutor.ca!
Here are the new features:
IMS AccessForAll & ISO FDIS 24751 Accessibility
AccessForAll support provides authors the means to add alternate forms of content to their content packages. Learners can define in their preferences how the ATutor environment is displayed, and define which forms of content they prefer, so content adapts to individual users' learning preferences. (Contributed in part by the Department of Computer Science at the University of Bologna)
See ATutor AccessForAll Wiki Page for more details.
IMS QTI Test Interoperability
QTI test exporting was introduced in the previous version of ATutor, and in this version QTI test importing has been introduced, allowing test developers to backup tests, move them, or share them with others. (Contributed in part by the Andrew W. Mellon Foundation)
See ATutor QTI Wiki Page for more details.
Integrated Content Packaging
Content packaging has been upgraded (IMS CP v1.1.4), and AccessForAll content and QTI tests have been integrated with content packaging so alternate formats and tests can all be exported and imported together.(Contributed in part by the Andrew W. Mellon Foundation)
Gradebook Integration
The ATutor Gradebook, available as an extra module for ATutor 1.6/1.6.1 has been fully integrated into ATutor, becoming a standard module. (Contributed in part by the Andrew W. Mellon Foundation)
New System Preferences
Administrators can now set the local time zone offset for ATutor, and users can set their own local time zone if it differs. Administrators can turn public registration on or off, turn the student's Unenroll feature on or off, and can turn instructor requests on or off.
Guest Test Data Collection
Instructors can now create public, guest accessible tests, and collect data and personal information from guest submitters for review and data analysis. (Contributed in part by the Norwegian Centre for Telemedicine)
Module Import/Export
All ATutor maintained extra modules are now available on update.atutor.ca, and can be imported through the ATutor Module Manager directly from the module repository. Developers can use the module Export tool to package up modules for redistribution. Modules have now been extended with a module uninstall feature, so it is no longer necessary to remove modules manually.
Themes Import/Export
All ATutor maintained themes are now available on update.atutor.ca, and can be imported through the ATutor Theme Manager directly from the theme repository. Designers can export themes for redistribution, and submit them to the theme repository.
Theme Designer Documentation
The ATutor Theme Designer Documentation has been integrated into the ATutor Handbook.
Fluid Multi-File Uploader
The Fluid multi-file upload utility has been added to the ATutor File Manager so now instructors, and content authors, can upload batches of files on one step. The Fluid libraries have been upgraded to v0.5. (Contributed in part by the Andrew W. Mellon Foundation)
See Fluid Multi-File Uploader Wiki Page for more details.
New Modules
Merlot Repository
The Merlot module has been upgraded to take advantage of the new Web services being offered through the repository. Merlot provides multimedia educational resources licensed under creative commons that ATutor course designers can include with their course content.
So we're just back from Online Educa Berlin, which is the largest e-learning conference in Europe, placed in the coolest city in Europe, IMNSHO.
Sadly I didn't get to see that many presentations, so I cannot give a good overview of the conference, but I did get to see quite a bit of the exhibition. Main topics were "generation Y" and how they will learn, a also (not surprisingly) web 2.0 and how social networking tools, sharing practises, mash-ups etc. will / can effect learning in the future.
I'm personally not a particular fan of the "2.0" label on the web, but I do agree that much of the online learning world, and LMS-es, are very firmly rooted in a "1.0" world. ATutor as well as our competitors / colleagues.
ATutor did get it's one slide of fame at the conference, which was during our presentation (not done by me), and this was it:

Online Educa Berlin is quite rooted in the large scale business and educational world, and while there was quite a bit of talk about open source (though only Moodle and Sakai), the business here is pretty much for large closed source vendors.
Moodle stickers and signs were seen many places, and there was also a large Moodle stand. Sadly I didn't get to talk to them as it was pretty busy, but it seemed to me it was a German company offering Moodle services that had set it up.
Other that that Docebo had a stand, but the ones I talked to focused more on their SCO objects and business offering than on their platform, even when asked specifically. As Docebo has both a commercial business and an open source community this is understandable.
So what to take home? Well, first, Berlin is still a fantastic city. Second, open source offerings are visible, but it's an industry pretty much dominated by closed source. Third, we are all struggling on getting online learning as a whole, and LMSes specifically, to be used in more engaging ways, and less used for storing Powerpoints.
Personally I believe open source LMSes may be more likely to drive e-learning into a, gah, 2.0 world than closed source ones. Mainly as the focus for closed source vendors is much more on enterprise level administration and integration, and less on the user experience for the end users.
(yes, that's a quite bold statement, and we would have to start working very hard, very soon, to make it true! :))
Just a short note to reasure you that this blog is in fact not dead, even though it looks like it!
The reason for the lack of posts lately are partly because I have been in Argentina eating beef for a few weeks, and partly because I've been busy with other non-ATutor related work. However, the NST are soonish starting to roll out our new theme, meaning we will stop using the Redux theme and port all courses to the Hopper theme. After that there is the new 1.6.2 version coming up which will be exiting to see!
The NST has also hired a new developer starting early December who will work mostly on ATutor, which also should boost posts here a bit!
The NST will also attend Online Educa Berlin in early December, so you might look forward to some reports from that too! If you're in Berlin, be sure to visit our stand!
Something we've gotten quite a lot of feedback on is that the boxes for uploading new files and / or creating new folders in the file storage isn't obvious. People have a tendency to not see or ignore the "new file" and "create folder" boxes, and don't understand why they have to click the boxes to open them.
And, when thinking about it, I don't know why they should have to click these boxes to open them either. In addition the alignment of these boxes has been changed in newer ATutor versions, so this is what meets you in the file stoarage tool when using the default (and also Redux) theme:
So, two boxes, not aligned, which the user will have to click to open before they can start creating folders or files.
I created a patch that changes this. This patch does a few things:
- Removes the boxes completely, and wraps the two boxes in two fieldsets instead, which also blends better in with ATutors' way of doing forms, and are more in line with accessibility guidelines.
- Earlier this, technically, was one form. To make it validate it is now two forms - one for creating folders and one for uploading files.
- The inline javascript is removes, as well as the javascript "body onload" states.
- A few lines are added to the CSS, to make it look better.
In the default theme the end result is the following:

Now the boxes are always open, and wrapped in fieldsets. This solution takes up a tiny bit more screen estate (37 pixels more in height to be exact), but will probably be less confusing for the users. In addition, the file_storage/index.php is around 80 lines shorter!
The patch adds the neccessary styles to the default theme, and the next version of the Redux theme will have this included by default. If you wish to use it in other themes, please add the following to your themes' CSS file:
.file-storage-uploads {
padding: 10px;
margin: 0 auto;
margin-bottom: 40px;
display: table;
}
fieldset.file-storage-new-folder {
float: left;
margin-right: 30px;
padding: 10px;
border: 1px solid #E0E0E0;
}
fieldset.file-storage-new-file {
float: left;
padding: 10px;
border: 1px solid #E0E0E0;
width: 40%;
}Patch is tested in IE 5.5+, Firefox 2 and Opera 9 with no side effects so far, please post additional test results or other comments below!

