Atutor.no

Slowly getting back in track after the holidays, and starting off with a small howto on how you can edit and alter the tools available in TinyMCE in ATutor.

It's very simple, just edit the atutor/include/lib/tinymce.inc.php: around lines 68 - 70 you see something like:

This shows line one and two in my newly edited file, and should be quite easy to understand. Move the tools to where you like to have them, and save the file.

In our case I've moved the tools I find most important for our users to line one, starting with the new "paste as plain text" and "paste from Word" tools. I've also removed the font family drop down (no Comic Sans Serif, kthxbai) and some other tools. The screenshots below show the original and my edited TinyMCE:

After a few buzy weeks here at atutor.no, there will be around 3 very slow weeks now, as we're either on a beach, in Dublin or Copenhagen, thinking of everything but ATutor and web development!

Tada till then!

Just a small note to announce our contributions list. This is where you will easily find the patches, modules and howtos we produce, and where we will update them if bugs are found. They will also link to any blog posts we might have written about them.

In this way you can follow the blog if you'd like, but also have a way to easy get the goods without following the blog!

We'd be happy to accept contributions here from others, and also to test them out and spotlight them on the demo server!

Internationalisation is hard, but luckily ATutor has a good system for translating the application, which is translated to almost 30 languages allready!

This is however only the interface, that is the menues, tools, messages etc. There is no way now to translate what you actually put into a course, the content, so in this way ATutor isn't a truly multi-language application.

That's no big deal though, if you need a course in two languages, you just create two courses. Most ATutor installs probably only use one language anyway, so this isn't even an issue.

Our situation is that we have some pure English courses, where most of the users only speak English, then we have a bunch of Norwegian courses with only Norwegian speaking users, and because of this we've expereinced several problems and annoyances for us:

• Norwegian users are confused over the English interface, and we have to teach them to click "translate" (nobody sees this option) when they shouldn't have to.
• English users does not even understand the interface.
• Instructors, like me, enroll new users without paying attention to the language they use. This has caused English speaking users to get confirmation e-mails in Norwegian and vice versa.

So Gorzan created a patch to help us with this. This patch forces the language of the user to be the same as the primary language in a course. For example, in a Norwegian course the interface will be in Norwegian, and you are not able to change it, and vice versa for English courses. For pages outside of courses the user still has a choice.

The functionality can be expanded in the future, for instance I'd like to change the "Primary language" property to an "Available language" property. Then, if more than one language is available in a course, the user can switch between them, and if only one is available this language is forced.

Till then, this one helps us a lot!

Flowplayer is a great player for Flash video files (.flv) which we have used quite a lot the last six months, and will use a lot more in the coming months. As of ATutor 1.6.1 the media tag has improved so much that I wanted to add Flowplayer as an integrated part of the ATutor content creation process.

I've decided not to create this as a patch or module, as there are many different ways you can make use of Flowplayer in ATutor, and because we will probably improve on this integration in the future as well.

I am however describing it all in detail here, so you should be able to set this up yourself quite easily!

The first thing you have to do is download Flowplayer (this tutorial tested with version 2.2.1 of Flowplayer, but any version should work).

I unzipped and uploaded the whole folder at root level on my server, so it will always be there regardless of me upgrading ATutor or not.

The second thing you will have to do is refer to the flowplayer.min.js file in your theme's header. I'm using the Redux theme, so I edit the atutor/themes/Atutor-redux/include/header.inc.php file, and add the following within head:

Note that the default path for this file in Flowplayer is /flowplayer/examples/js/flowplayer.min.js, I just moved it down a few directories.

Now, save this, and we are ready to continue. This time we first have to edit atutor/include/lib/output.inc.php to make ATutor insert the appropriate flowplayer code when wrapping a .flv file in the media tag. At around line 650, right after the 6 lines of code for the .mid format, and before the comment that reads // Executing the replace, add:

(don't paste in the php start and end tag)

around 20 lines further down the code you will have to add the line

so the end result is:

This ensures that you can have more that one Flowplayer video in any content page, as they all get an unique ID.

This should add Flowplayer to ATutor, and you can test it by uploading a demo.flv file in your file manager and manually wrap it in in the media tag!

However, it's better that ATutor wraps the file in the media tag for you, and to make that happen, edit the include/html/filemanager_display.inc.php file. At around line 350 here you will see:

which basically tells the filemanager to wrap the extensions listed in the media tag. Here we have to add .flv as one of these extensions, so simply add || ext == "flv" here. The end result should be something like:

Assuming that you have done this, uploaded a .flv file called ubuntucast.flv to your course file manageer and clicked "insert", you would see this in your content editor:

[media]ubuntucast.flv[/media]

Assuming you wish this to display in 550 x 400 pixels rather than the default 425 x 350, you would edit this into the media tag, like:

[media|550|400]ubuntucast.flv[/media]

..and the video would show up like this in the content:

Note that this file is 22 Mb, so let me know if you cannot see it. Also note that in this example I have removed the embedCode: \"can not be embedded\", from output.inc.php, just to demonstrate how you can use Flowplayer to embed videos in other pages! (Hat tip: check the bottom right icon).

Or, check it out in an ATutor content page!

Further configuration of Flowplayer

Flowplayer is highly configurable, for instance you edit the look and feel by simply configuring which parameters to add in output.inc.php. Above I chose to have the controls over the video to start, and auto hide them by adding controlsOverVideo: 'ease' to the file. In addition there are tons of other options, including integration with streaming server and using playlists etc.

Enjoy!

Edit by Håvard Pedersen jan 09: Added support for playing flv files from external domains.

Some time ago we added a small modification to the forum listings in ATutor, which adds a small visual cue to whether you are subscribed to a forum or not.

It's best explained by example. This is the way forums look by default:

While you see the "Subscribe" / "Unsubscribe" text, it's not very easy to see which you are subscribed to and which not at a glance.

Our modification changes this listing to:

..so there's a small envelope showing if you are not subscribed, and a stop sign if you are. It's a detail, but has proved to be quite useful - have a look at our demo server! (note: you have to be registered and enrolled to see it).

Today I made this as a patch so yo can add it yourself. The patch changes the forum/list.php and adds the two small icons to the same folder.

Finally we have our own demo server up! We will use this primarily to test our own features, modifications and themes, and also to have an additional place to show off ATutor!

As of now there are two demo courses available, the first is the Look at me, I'm a course! course where you can check out the very cool directory improvements that Gorzan made! (Note, you will have to register at the platform to see this).

In this course there is also the testing the test features tests, which is a small test where all question possibilities in ATutor is added.

The other course is Module 3 of the Medical Peace Work course that we made. Note that it's only used for demonstration features here, so see medicalpeacework.org if you wish to take the whole course. I've added this course as it has a distinct look and feel, and uses the "banner" feature on the front page, which the "look and me" course does not.

Please register on the demo server, and enroll in the courses! As of now we have not created an open demo account, nor an open instructor account, as this can be used at the official ATutor demo site. If you'd like this, or have any other comments, comment away, either in the blog comments here, or in the forums at the demo server!

TinyMCE, the default visual HTML editor in ATutor, has a nice feature that lets you add custom styles to your content from a drop down menu. Only problem is that there are no styles to choose from by default in ATutor.

Today I needed that feature, and had to find out how to add some styles here, and after poking around a bit I found that there are two possibilities:

The first is finding the /atutor/jscripts/tiny_mce/themes/advanced/skins/default/content.css file, and add styles there. I didn't really like this solution.

The second solution is a tiny bit more complicated, but suited my need better. You will first have to edit the atutor/include/lib/tinymce.inc.php:

Around line 58 you will see something like this:

What I added here is the:

..where the path is the path to the CSS file you wish TinyMCE to use. I placed a file called tinystyles.css in my themes folder.

The second step is making this file available in your theme as well, so the browser can read the styles, and not only TinyMCE. Simply add the line:

<link rel="stylesheet" href="/atutor/themes/Atutor-redux/tinystyles.css" type="text/css" />

to your themes' header.inc.php file, along with the other CSS files.

The result is the following:

One important note: In Firefox, and possibly other browsers, you have to clear your browser cache to see the changes you do. Click tools -> Clear private data, and select cache

Allthough you can argue that each user should always choose for himself / herself which media player to use to play sound and video files over the web, this has several downsides too.

One downside is that it's hard to include a player you don't know the apperance of in your content design, and another (more important) downside is that many users does not have any media players set up on their computers. So they will be asked to configure iTunes / Windows Media Player / whatever just to listen to one small embedded file.

So, we created a patch that changes the way the media tag in ATutor works. If you add a mp3 file to your content with the media tag, this will open in a nice and small embedded Flash player created by 1 Pixel Out, and available under a generous Creative Commons license.

The patch changes include/lib/output.inc.php and themes/default/include/header.inc.php, adds a javascript file to jscripts and a .swf file to include.

It looks like this:

Thanks to Bob Dylan for letting us use one of his nicest songs to demonstrate this! Ahm.

For those wishing to install this without the patch, say to have the player files located outside the ATutor installation, here's how output.lib.php looks now:

Change the data and value references to your liking, manually upload the javascript file and refer to it from your theme.

Or, just run the patch!

The updated ATutor Redux theme for 1.6.1 is now available for download! Please note that the Redux theme for 1.6 will not work on 1.6.1, so you need this update!

We have created a dedicated page for our theme work where you always will be able to find the latest version of the theme, as well as provide feedback on what you like and dislike about it.

The Redux theme is also the basis for this blog, which is based on Drupal, and we will have a demo site of Atutor with the theme up and running shortly!

Changelog for 1.6.1

• Qstats is now a part of ATutor 1.6.1 so all theme files under test_questions are removed, as well as a few other redundant files.
• login.tmpl.php is updated to work with the new password encryption method in 1.6.1
• If the patch for announcement subscribe (watch this space in the coming days!) is installed, this will work in the theme.