A Layout Editor for 2.0?

A Layout Editor for 2.0?

by Urs Hunkler -
Number of replies: 40
Picture of Core developers

I read about MS live.com and their web application approach and was curious what they are doing and where MS is going.

They are only starting but I am impressed how easy and comfortable it is to build one's own page. I arranged the different areas via drag & drop on the screen. No waiting for page refreshes at all. You can choose from 1 to 4 column layouts from a popup menu and immediately work with the new layout. Very strait forward. Learners and teachers will get used to this easy handling - an interesting challenge for Moodle.

MS offerers so called gadgets for live.com. To get many developers they started a contest. The standard approach for a commercial company to get programming work for free wink

By the way I was on the site with Firefox and everything I tried worked with FF. In the past I made quite different experiences concerning compatibility.

Urs

[Tags: Interface, Usability, AJAX]

Average of ratings: -
In reply to Urs Hunkler

Re: A Layout Editor for 2.0?

by Urs Hunkler -
Picture of Core developers

I just read in my Feeds that Yahoo offers the same functionality now for MyYahoo. And additionally offer the necessary UI JSscripts for free smile

I like this way of arranging blocks on the screen very much.

Urs

Average of ratings: -
In reply to Urs Hunkler

Re: A Layout Editor for 2.0?

by Nathanael Klassen -

I have implemented drag-and-drop blocks on our school's Moodle site using Script.aculo.us javascripts. You can drag the blocks around even if you aren't logged in to see how it looks. The positions are only saved (via an AJAX call) in edit mode, so they'll always revert to the default positions when you refresh.

I also changed the calendar block to use AJAX calls when changing months. You can try that as well. Within courses, I enabled drag-and-drop of activities so teachers can quickly move activities within or between sections.

All the hard work is handled by the script.aculo.us scripts, so I didn't have to write a lot of code, but it did require modifying a number of files throughout Moodle. I can try to pull together all my code changes (to 1.6dev) and share them if anyone is interested. I assume using the MyYahoo UI scripts shouldn't be too difficult either.

Nathanael

Average of ratings: -
In reply to Nathanael Klassen

Re: A Layout Editor for 2.0?

by Brian Sea -
If you have time, please do share your work.  I was actually starting on this functionality myself because I think it's more usable.  Though, we might want to keep the left/right arrow because dragging across the center block is a little  error-prone (unless we  can add blocks to the center block wink )
Average of ratings: -
In reply to Brian Sea

Re: A Layout Editor for 2.0?

by Julian Ridden -
Blocks are atored in moodle quite simply by a reference to their location. Eiethr "r" for right or "l" for left.

With a drag-n-drop interface to block placement I could conceivable see the adition of extra block locations maybe even at the theme level> Then just draggingto the correct location to drop your block.

Ohhhh..my mind is swirling with ideas. enter blocks, top blocks, bottom blocks. Ill have to do some meddling. :D
Average of ratings: -
In reply to Brian Sea

Re: A Layout Editor for 2.0?

by Nathanael Klassen -

Hi Brian,

What issues did you see when dragging blocks from one side to the other? Which browser are you using? I have really only tested the feature with IE on Windows, but dragging from one side to other works fine for me.

The only issue I've seen is that sometimes the blocks automatically resize to the new column width and sometimes they don't. I haven't been able to figure out why it's not consistent. Oh, and the changes I made to enable draggable blocks don't play well with the overlib.js script that displays the floating event windows on the calendar block. The floating window shows up off the screen. Haven't figured that one out either.

I will post the code changes when I can pull them together.

Nathanael

Average of ratings: -
In reply to Nathanael Klassen

Re: A Layout Editor for 2.0?

by Brian Sea -
Nathaniel:

It's not a coding issue at all (codewise everything works).  It's more of a useibility issue.  Crossing the center aisle is a long distance - the longer the distance the more error prone.  However, this error only really appears if one is using a tablet PC or a laptop with a glide pad.  The glide pad isn't big enough to span the space.  Also if the person has motor or visual disabilities, drag-n-drop is a nightmare. 

I would really keep both of the options open, because it is indeed a great feature. (As is the parent feature - which I was also looking into implementing).

--sea
Average of ratings: -
In reply to Brian Sea

Re: A Layout Editor for 2.0?

by Brian Sea -
The script.aculo.us scripts are very nice. There is an auto-complete feature also that might be nice to integrate and the sortable lists (for the assignments in the center block).  Also, the transistions are cool. Thanks for point out these scripts... when I get time, I might try to integrate some of their other features.

It's an MIT-style license, so if anyone uses these, just make sure to maintain the copyrights.


--sea
Average of ratings: -
In reply to Brian Sea

Re: A Layout Editor for 2.0?

by Andrew Walker -
It's not a problem at the moment since the scripts are currently not being used at the same time, but I don't think the prototype.js library will play nicely with the HTML editor used in moodle. I seem to remember having found that the HTML editor makes use of for in loops to iterate through arrays - this behaviour will be broken by having things added into Array.prototype - something which this script seems to make use of.
Average of ratings: -
In reply to Andrew Walker

Re: A Layout Editor for 2.0?

by Urs Hunkler -
Picture of Core developers

After I implemented this drag&drop feature on the Chameleon site in the "Drag the Sideblocks" course I read Andy's posting. Knowing about Andy's competence I decided not to post my approaches here. Today I searched for this Array.prototype problem and found these two articles explaining the problem:

Why I Don't Use The prototype.js JavaScript Library

Why I Still Won't Use The prototype.js JavaScript Library

My hands on experiences with the drag&drop sideblocks and my experiences with other RIA applications convince me that RIA functionality will enhance Moodle a lot. I believe Moodle should either offer RIA functionality from core or offer a "gateway" to use a RIA library when someone wants to add it without the need to patch Moodle code. But I do not know how.

Does anybody have any ideas?

Urs

Average of ratings: -
In reply to Urs Hunkler

Re: A Layout Editor for 2.0?

by Nathanael Klassen -

I did run into the issue with prototype.js messing up the HTML editor when I was adding the ability to drag blocks. Originally I had put the link to prototype.js and scriptaculous.js in the lib/javascript.php file where the other Javascript files are loaded. To solve the issue I only loaded prototype.js on the index.php page, which doesn't use the HTML editor and so didn't have the conflict.

Urs, I looked at the links you posted. In the comments someone had suggested a workaround for the issue the author was complaining about. I took a look at the htmleditor.php file, and it may not be too hard to patch it to work properly with prototype.js.

I haven't tested this extensively, but simply adding the following if block around lines 536-550 seemed to allow the HTML editor to load together with prototype.js:

if (group.propertyIsEnumerable(j)) { }

I haven't tested this with all the features of the editor, so please try it out and see if there are still other incompatibilities. I have attached the modified htmlarea.php. It's from 1.6dev, but I also compared it to the 1.5 version and the only difference was the version number in the comments.

Possibly prototype.js and Scriptaculous aren't the best long-term solution. I just used them because they allowed me to quickly add some features I wanted.

Nathanael

Average of ratings: -
In reply to Nathanael Klassen

Re: A Layout Editor for 2.0?

by Sigurdur Jonsson -
Hi Nathanael,

This is so cool. I for one would really like to see this functionality in Moodle 1.6.

regards,
S.Fjalar
Average of ratings: -
In reply to Nathanael Klassen

Re: A Layout Editor for 2.0?-Theme

by Bhupinder Singh -

Hi Nathanael,

Nice usage it will be a useful addon.

By the way what is the theme you are using on your site??

Garry

Average of ratings: -
In reply to Bhupinder Singh

Re: A Layout Editor for 2.0?-Theme

by Nathanael Klassen -

Hi Garry,

It's a custom theme I made based on our school logo.

Nathanael

Average of ratings: -
In reply to Nathanael Klassen

Re: A Layout Editor for 2.0?

by Julian Ridden -
Now that is REALLY nice!!

Culd you share the code? I would love to see this on The Playpen
Average of ratings: -
In reply to Julian Ridden

Draggable Blocks

by Nathanael Klassen -

The attached file includes the scripts and instructions for draggable blocks. I listed the code changes to the core Moodle files rather than including the modified files themselves. This makes installation a bit more effort, but you can implement the changes in whatever Moodle version you are using.

I believe the installation instructions in the README.TXT are complete. It is possible, however, that I missed something. Let me know if you have trouble getting it to work.

I should point out again that all the hard work for this cool feature was done by Thomas Fuchs who wrote the Script.aculo.us scripts. I just added a few lines of code to use it in Moodle.

Nathanael

Average of ratings: -
In reply to Nathanael Klassen

Re: Draggable Blocks

by Karl Linne -
Hi,
I installed the feature as explained in the "readme". Everything seems to work fine, but the new positions are not remembered, even in edit mode.

This is how I proceed: I enter edit mode, I drag blocks, I exit edit mode... and the blocks are back in their old positions.

What am I doing wrong?

Regards Karl


Average of ratings: -
In reply to Karl Linne

This forum post has been removed

The content of this forum post has been removed and can no longer be accessed.
In reply to Deleted user

Re: Draggable Blocks

by Nathanael Klassen -

Sorry. Looks like I missed one little step in the README.

In blocks/moodleblock.class.php you must also change the following function: 

    function html_attributes() {
        return array('id' => 'inst'.$this->instance->id, 'class' => 'block_'. $this->name());
    }

The only difference is the underscore, but without this character the scripts won't pass the correct data to be saved. I think this is all you'll need to change to get it working.

Nathanael

Average of ratings: -
In reply to Nathanael Klassen

Re: Draggable Blocks

by Frank Frank -

Hi Kathanael,

Thank you for sharing your code with us!!

I tried it out, but got a error:

"Parse error: syntax error, unexpected $end in C:\Program Files\moodle\moodle\lib\weblib.php on line 4514"

Any idea?

Thank you.

Average of ratings: -
In reply to Deleted user

This forum post has been removed

The content of this forum post has been removed and can no longer be accessed.
In reply to Nathanael Klassen

Re: A Layout Editor for 2.0?

by Colin McQueen -
Hi

This usability feature is great. I too hope it can be brought into version 1.6 or later.

Can I ask about your authentication at your site? I see that you have Parent access organised so you a parent can get read only access to their child's courses via linking it to the child's id. How have you done this?

This is exactly what we need here in the UK for schools so Moodle can meet requirements for the DfES/Becta Learning Platform agenda. See Moodleforge - Learning Platform Consultations (needs registration) or MOoM - Learning Platforms (guest access) for more info.

Moodle is competing with Learning Platforms like NetMedia's MyGrid4Learning and those based on Sharepoint Portal Server such as Microsoft Learning Gateway, Capita SIMS.net Learning Gateway and RM kaleidos Portal Plus. In most cases they have this Parent access to their child's learning and it is quite a selling point for them. We are in danger in losing out to these big companies if we don't ensure Moodle can adapted in this way.

I'm not sure how far the development of roles for Moodle is going? See Implementation Plan for Roles
Average of ratings: -
In reply to Colin McQueen

Re: A Layout Editor for 2.0?

by Nathanael Klassen -

For the parent access feature I used Rob Barreca's code from this thread: http://moodle.org/mod/forum/discuss.php?d=6250

The thread was started almost 2 years ago and is very long. Here's a direct link to the posting with the download: http://moodle.org/mod/forum/discuss.php?d=6250&parent=145583

I just finished adding the code recently, so we haven't actually begun giving parents access to Moodle.

It will be nice when Moodle has support for roles. As you can see from the thread above, this feature has been discussed for a long time. I think it may still be a while before it's ready.

Average of ratings: -
In reply to Nathanael Klassen

Re: A Layout Editor for 2.0?

by Colin McQueen -
I think the role work is being accelerated by the Open University developments. See  this thread

Thanks for the info on the parent bit. I will look into it.

Also are you aware of the other layout code that gives drag and drop? See this thread  and this thread

These are old threads though?

BTW with your code, I can get the drag and drop working on courses and the frontpage but I get an error on the admin pages now about the print_heading function being missing.

Fatal error: Call to undefined function: print_heading() in /home/hiasict/public_html/moodle/admin/users.php on line 21

Any ideas?
Average of ratings: -
In reply to Colin McQueen

Re: A Layout Editor for 2.0?

by Nathanael Klassen -

Yes, I have seen the drag and drop layout editor in the threads you mentioned.  There is a more recent thread on Audun Hauge's layout editor here. It has more features and is doesn't require changes to as many files. Overall a better solution. But I still like dragging blocks around on the main page without switching to a special layout view. smile

About your error, the print_heading() function should be in lib/weblib.php and should not have been modified to use my code. Search your weblib.php file for "function print_heading". You should have the functions print_heading(), followed by print_heading_with_help(), followed by print_heading_block(). The last function is the only one that needed to be modified for my dragblock code. Check that the print_heading() function wasn't accidently replaced instead of the print_heading_block() function.

HTH,
Nathanael

Average of ratings: -
In reply to Nathanael Klassen

Re: A Layout Editor for 2.0?

by Colin McQueen -
I must admit I do like how immediate your solution is.

Thanks for the help regarding the error. I had done exactly that (replaced the wrong function) and didn't spot it till later.
Average of ratings: -
In reply to Colin McQueen

Re: A Layout Editor for 2.0?

by Michael Penney -
If you need parental access in Moodle immediately, I would contact Rob Barreca of SchoolEngine.com. He has also made his code available as a download.

Personally, since it is fairly non-standard code, I wouldn't use it without Rob on a support contractsmile, however he seems to have reasonable rates.


Average of ratings: -
In reply to Nathanael Klassen

Re: A Layout Editor for 2.0?

by Karl Linne -
The calendar and drag-activities features are not in the dragblocks.zip, are they?
Are they as easy to install? Could you share the code, pleeease?

Karl
Average of ratings: -
In reply to Karl Linne

Re: A Layout Editor for 2.0? - Draggable Activities

by Nathanael Klassen -

Hi Karl,

Attached are instructions for the modifications needed to enable draggable activities in courses.  Again, it's quite possible that I missed a step, so let me know if you have problems. Test after each step to make sure courses still display correctly.

Nathanael

Average of ratings: -
In reply to Karl Linne

Re: A Layout Editor for 2.0? - AJAXified Calendar Block

by Nathanael Klassen -

Attached are the modifications I made to the calendar block so that switching the month doesn't force the whole page to refresh. This code requires the Script.aculo.us scripts so it will only work if you have already installed my draggable blocks modifications.

Nathanael

Average of ratings: -
In reply to Nathanael Klassen

Re: A Layout Editor for 2.0? - AJAXified Calendar Block

by Deon Metelski -
Hi Nathanael,

I just tried to install you r draggable activities mod and I can't get it to work. blush

I downloaded the lib scripts from the draggable blocks. Do I also have to do the modifications in the draggable readme in order for the draggable activities to work? That is the only thing I did not do. My course page shows fine, I turn editing on and the default way to move blocks still works. I am using the most recent firefox.

Thanks,
Deon
Average of ratings: -
In reply to Deon Metelski

Re: A Layout Editor for 2.0? - AJAXified Calendar Block

by Nathanael Klassen -

Hello Deon,

Are you using the latest beta of 1.6? Some changes were made to course/lib.php in the beta versions that affected my modifications for draggable activities. If that's the issue for you, you should be able to use the attached file which is 1.6beta4 code including the necessary changes. I've tried it in both IE and Firefox, and it is working on both.

Let me know if that is not the problem or if you encounter other issues.

Nathanael

Average of ratings: -
In reply to Nathanael Klassen

Re: A Layout Editor for 2.0? - AJAXified Calendar Block

by Deon Metelski -
Hi Nathanael,

I am using the current 1.5.3. Do I need to be using 1.6 for this to work?

Thanks,
Deon
Average of ratings: -
In reply to Deon Metelski

Re: A Layout Editor for 2.0? - AJAXified Calendar Block

by Nathanael Klassen -

Hi Deon,

No, you don't need 1.6. The original instructions should have worked with 1.5.3. If you check the Javascript Console in Firefox, do you see any script errors?

If you send me your course/lib.php and course/format/xxxx/format.php files, I can try to see what's wrong.

Nathanael

Average of ratings: -
In reply to Nathanael Klassen

Re: A Layout Editor for 2.0? - AJAXified Calendar Block

by Julian Ridden -
Can you attach either a new version against the latest beta 5 or possibly a patch file.

Many thanks
Average of ratings: -
In reply to Julian Ridden

Re: A Layout Editor for 2.0? - AJAXified Calendar Block

by Mat Cannings -
I have only just found this thread with a search for AJAX and although a little late I have tried this hack for the calender block and think it represents everything that is good about AJAX.

One of the things that most annoys(annoyed now big grin) me with Moodle was the way that the whole page refreshes when only a part of a block changes. Although I am not a fan of trying to add AJAX to everything I think that the calender and the drag and drop block/course ordering are perfect for this type of treatment.

One thing that does bother me with this change to the calender is that it no longer functions properly with Javascript turned off (and possibly older and/or accessibility browsers, I imagine).

To this end I have followed all the steps above and then made a couple of extra changes to the moodle\calendar\lib.php file changes detailed above.

My function calendar_get_link_tag is now contains
   
    $href = calendar_get_link_href($linkbase, $d, $m, $y);
    $temppath = ''.$CFG->wwwroot.'/calendar/mini.php';
    $link = 'new Ajax.Updater("minical", "'.$temppath.'", '.
        '{parameters: "cal_m='.$m.'&cal_y='.$y.'"});return false;';
    return "<a href=$href onclick='".$link."'>".$text."</a>";


Without the $href bits the prev and next links pointed nowhere when javascript was turned off. Now the block functions as originally intended when javascript is disabled.

angryan X keeps showing up infront of onclick on the last line when I save this post, please ignore the X angry
Average of ratings: -
In reply to Nathanael Klassen

Re: A Layout Editor for 2.0?

by Tony Hursh -
Sadly, this doesn't seem to work at all in Safari. Either the block won't drag at all, or it disappears.

It's odd, because the script.aculo.us demos all seem to work in Safari.

It works great in Firefox, though!

Average of ratings: -
In reply to Nathanael Klassen

Re: A Layout Editor for 2.0?

by J.Lluís Milà -
Hello, Nathanael, your implementation could have similar functionalities like my project or this other ? How it works, in terms of compatibility?

J.LL.
Average of ratings: -
In reply to J.Lluís Milà

Re: A Layout Editor for 2.0?

by Nathanael Klassen -

Hi J.LL.

A couple months ago I started working on a course format that incorporates the draggable blocks and activities features as well as dynamically loading sections and blocks rather than refreshing the page each time.

I haven't gotten very far with it. At the moment the only thing it does (besides loading slow) is allow you to switch between viewing one or all sections without reloading the page. I don't have time at the moment to take it further, but I'll attach the code so you can take a look. 

Just extract the files to a new course/format/dynamic folder. This course format does depend on the prototype.js and scriptaculous.js scripts. I haven't included them again, so you'll have to get them from my other posting.

Hope this can help with your project.

Nathanael

Average of ratings: -