Blogs
One tweak we did for the Redux theme, and the upcoming Hopper theme is that the "home" heading on course front pages are removed, while the headings for the other sections (forums, file storage etc.) are kept.
We find this better as we always make custom front pages on courses under magage -> preferences (the "banner" box), where we specify the course title. Having both "home" and our course title as headings does not look good. Also, if the front page has nothing but announcements on it, you get two headning: "home" + "announcements".
If you wish to have this tweak in the default theme as well, this is what you do:
Right below line 262 in themes/default/include/header.inc.php, insert this line:
<?php
// remove home title
$we_are_home = ($this->page_title == _AT('home'))?TRUE:FALSE;
?>the code block should now look something like:
<?php foreach ($this->top_level_pages as $page): ?>
<?php ++$accesscounter; $accesscounter = ($accesscounter == 10 ? 0 : $accesscounter); ?>
<?php $accesskey_text = ($accesscounter < 10 ? 'accesskey="'.$accesscounter.'"' : ''); ?>
<?php $accesskey_title = ($accesscounter < 10 ? ' Alt+'.$accesscounter : ''); ?>
<?php if ($page['url'] == $this->current_top_level_page): ?>
<?php // remove home title
$we_are_home = ($this->page_title == _AT('home'))?TRUE:FALSE; ?>
<li><a href="<?php echo $page['url']; ?>" <?php echo $accesskey_text; ?> title="<?php echo $page['title'] . $accesskey_title; ?>" class="active"><?php echo $page['title']; ?></a></li>Then, at the very end of the same file, where the page title is echoed, replace the line there with this one:
<!-- the page title -->
<h2><?php if(!$we_are_home) {echo $this->page_title; }?></h2>That's all!
Create a side menu toggle function with cookies in jquery
September 16, 2008 - 13:01 — Vegard A. JohansenThis one is for Google: I struggled for quite a bit to find a good way to create a togglable side menu for the new ATutor theme using jQuery, but finally got it right with the help of a tutorial by Matt Rossi.
I adapted this to fit my needs, which were:
- Having a togglable side menu ment that I had to manipulate the width of my main content to make space for the side menu, in addition to just showing and hiding the side menu itself.
- I also wanted the initial state of the menu to be showing, not hiding.
- ..and it needs to remember the users' choice when navigating through the site, using cookies.
You need
Link to these from the <head> of your site, and then place the following code underneath it (that is, still in the <head>, either as a link to a file or inline, but below the reference to the two above).
The code
<?php
// Author: Matt Rossi. Apated for ATutor by Vegard A. Johansen
// Links and info: http://atutor.no/2008/09/create-side-menu-toggle-function-cookies-jquery
$(document).ready(function() {
// set initial state: the main container has enough space, and the side menu shows.
$(".main-content-container").width("72%");
$("#side-menu-container").show();
// create a variable which is the link to toggle the menu
// this creates a link to # with the class "togglemenu"
var a = $("<a>toggle side menu</a>").attr('href','#').addClass("togglemenu");
// .. and place this link within the element with class "toggle-menu"
$('.toggle-menu').append(a);
// define a function when you click the link with the class togglemenu
$(".togglemenu").click(function(){
// if the menu is visible (initial state), the function allows you to hide it
// ..and sets the cookie to hidden after, so the state is remembered
if ($("#side-menu-container").is(":visible")) {
$("#side-menu-container").hide();
$(".main-content-container").width("98%");
$(this).addClass("active");
$.cookie('side-menu', 'hiding', {path: "/"});
return false;
} else {
// and if not visible, the function let's you show it
$("#side-menu-container").slideDown("fast");
$(".main-content-container").width("72%");
$(this).removeClass("active");
$.cookie('side-menu', 'showing', {path: "/"});
return false;
}
});
// cookie time!
// creates a variable with the contents of the cookie side-menu
var sidemenu = $.cookie('side-menu');
// if cookie says the menu is hiding, keep it hidden!
if (sidemenu == 'hiding') {
$("#side-menu-container").hide();
$(".main-content-container").width("98%");
$(".togglemenu").addClass("active");
};
}) // jquery ends
;
?>Do ignore the php start and end tags here, they are inserted by the code filter. Also feel free to remove my excessive commenting!
What the script does is:
- Manipulate the width of the div with class "main-content-container", and show the div with id "side-menu-container". This is the initial state.
- Create a variable with a link within it.
- Places this link within the div with class "toggle-menu" (not neccessary)
- Defines a function for what should happen when you click a link with the class of "togglemenu": a) if visible, the function can hide the menu, set the width of the main container to full, and write "hiding" to the cookie, so it remembers your choice. Then, if the menu isn't visible, the functon can make room for the menu, and show it.
- It then reads the cookie, and if the cookie says the menu is hiding (because the user changed it from the initial state) it simply keeps the menu hidden and lets the content take full width.
That's it! Thanks again to Matt Rossi for writing this down! The difference between his version and this is:
- The initial state shows the menu, not hides.
- This one also manipulates the width of the main-content-container which is not neccessary when it's not a side menu
- There's a path set on the cookie. I found this to be neccessary so the script doesn't set a new cookie for each directory you're in.
You see it in action at this site, hope it's usable for someone else too!
Browser compatibility
Works in IE 6+, Firefox 1,5+, Opera 7+, the current Safari (not tested lower versions) and Google Chrome.
Thus, does not work in IE 5.5 and below, as well as Opera 6 and below. If you have more test results leave it in the comments!
The observant reader will notice the redesign on these pages, which means it's theming time again!
The new Hopper theme for ATutor only exist at my localhost so far, but to get some initial feedback and to be able to test it on more browsers than those available on my localhost, I adapted some features from it here on the blog part of atutor.no (which is the Drupal part).
Background
The Redux theme was initially created to mimic the look and feel of the default theme for ATutor 1.5, in an effort to create a table free theme for that ATutor version. The Hopper theme is still based on much of Redux, but for other reasons. First of all it's not designed to mimic a look, but to create a new look, and maybe more important it will change some of the GUI elements we know from ATutor now, probably making it the most different ATutor theme when ready.
Why Hopper?
I don't really take theme names very seriously, but everything needs a name. This is named after the late great Edward Hopper, because I like his art, and I used his picture Nighthawks for the initial banner when I first started working on the new theme, and borrowing some colors from it.
(It's the banner you see here now, but it will not be the banner it ships with, nor the banner for these pages for a very long time, for obvious reasons).
Main changes
The new look will have stronger colors and contrast than Redux, and the whole top bar + banner section is higher, creating more air and giving us the possibility to use a bit larger banner images. Hoppers top section, banner, main and sub menu is around 180 pixels high, while the equivalent for Redux is around 140 pixels.
More important is that the javascript for the showing and hiding of the side menu is completely replaced and rewritten with the use of jQuery! This has some good sides and probably some bad sides too. First the good ones:
- jQuery is both cool and very elegant.
- ..and it's also included in ATutor by default, allthough I don't really know what it's used for (?)
- it's all in the head! all inline javascript that was used for the side menu is removed, and replaced with around 20 lines in the head, making the code less obtrusive, easier to understand, and also making it much simpler to create even new themes based on the Hopper theme.
- most important for us: the previous side menu would only work if the menu was absolute positioned in CSS, which had the side effect that you could only use a flexible site width in your themes, not a fixed one (like atutor.no is). With the new method you can use what you'd like, and the CSS is far simpler!
bad sides:
- This really doesn't matter much for me compared to the good sides, but there are some additional Kb's to load for the user. On the other hand, javascript is cached, and jQuery is good to have available anyways - we use it increasingly for course content too, now that the custom head feature is available in ATutor.
- Probably something else too - I haven't tested it on other browsers than Firefox 3 and Safari on Mac, which is where you can help!
Test it!
The only place it can be tested so far is here, on the blog part of atutor.no, and the only thing to test is how the the side menu works (click "toggle side menu" above the menu), and also see if the design burnes your eyes out or not! Comments are open and welcome, more posts to come as we go!
One more patch aimed at improving usability of ATutor. It enables group deletion of test submissions by replacing radio buttons with checkboxes and adding a "Select/unselect all" checkbox.
Also it fixes minor bugs found in that area (I've noticed as much as seven of them).
The change has already been included into the trunk for the next release, 1.6.2, while this patch allows users to benefit from it right now.
See the patch here: http://atutor.no/contribs/group-deletion-test-submissions-plus-bugfixes
Keeping track of comments can be hard, but in Drupal world there's a module for everything, and I just added two of them to this site!
Now you can subscribe to comments on specific posts by e-mail, by checking a box below the comment field on any page.
Personally I prefer RSS, and have added a comment RSS module as well. You can subscribe to all comments on atutor.no with this URL:
..or you can get comment RSS for specific posts - these are autodiscovered when wieving a post, and you'll find the subscribe icon in your browsers address bar, if using a proper browser.
Happy commenting!
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:
theme_advanced_buttons1 :
"pastetext,pasteword,|,bold,italic,bullist,numlist,link,unlink,
theme_advanced_buttons2 : "cut,copy,paste,|,search,replace,|,outdent,indent,|,undo,redo,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:
Recently we've seen some security-related features being added to ATutor. Here I suggest one more, encrypting the transmission client-side when a user or an admin changes his/her password.
This is an easy-to-debug draft implementation. One might want to see how the system works in detail, so I post this draft to avoid duplicating efforts.
To test it, you'll need to place it to a server where an ATutor is installed (I guess, any version since 1.5 would suffice). Then edit the path on the line that reads
define('AT_INCLUDE_PATH', '../atutor161pl1/include/');
The protocol:
Msg 1. S -> C: N
Msg 2. C -> S: { N, Pnew, MIC } Pold'
where
* h() means hashing;
* {}K means encryption under the key K;
* N is a nonce/token;
* Pold and Pnew are hashes of old and new passwords respectively;
* MIC = h(N, Pnew) is a Message Integrity Code.
JavaScript AES implementation is taken from http://www.hanewin.net/encrypt/aes/aes.htm .
There're much more comments and links in the source code, so you won't be lost.
If you test, please give me your feedback. I'm going to make it into real changes in ATutor code after I'm sure this implementation is the right way to go.
Update: The PHP file updated 2008-09-03 to fix a bug reported by Vegard. Also uncommented the piece that tries to mitigate weaknesses of ECB encryption mode (should go unnoticed by end users though).
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!
