New "Structured" Format

New "Structured" Format

by Alexis Maldonado -
Number of replies: 56
Im working on creating a new format for moodle.  This format uses a dynamic dhtml tree to load everything on it.
The tree is amazing it will work on any browser perfectly..

The problem:

I would like to know if its possible to add a section title.
Looking at "mdl_course_sections" I was wondering if its possible to add a title field.

If this is possible what other changes do i need to do to get this working?

My aim is to use the section title to build the tree on the left using that title..
So if i change the title for section 1 to "something" on the left tree i will see "something" listed.

Thanks..

Attachment snapshot1.png
Average of ratings: -
In reply to Alexis Maldonado

Re: New "Structured" Format

by Alexis Maldonado -
this is how the tree looks expanded..
Attachment snapshot2.png
In reply to Alexis Maldonado

Re: New "Structured" Format

by Ger Tielemans -
Did you see the subsections proposal? Your tree could help to keep overview...
In reply to Ger Tielemans

Re: New "Structured" Format

by Alexis Maldonado -
Ok.. found the subsections proposal..
Its cool but its not really what im looking for, although subsections under topics would show up in the tree also..

In my picture the "Lessons" are actually links to the topics..
I have 10 topics so there are 10 lessons listed there.
What i want to do is populate the tree with a section/topic title instead of my hard coded "Lesson $section" title.
That way i can name my topics and they would appear in the tree under that name..
but right now you can't add a title to a lesson so...
In reply to Alexis Maldonado

Re: New "Structured" Format

by Martin Dougiamas -
Picture of Core developers Picture of Documentation writers Picture of Moodle HQ Picture of Particularly helpful Moodlers Picture of Plugin developers Picture of Testers
Interesting ... which DHTML tree software are you using?

You don't need to add a new field ... you can use the "summary" field from "course_sections".
In reply to Martin Dougiamas

Re: New "Structured" Format

by Alexis Maldonado -
I'm using a very nice GPL tree at:
http://webfx.eae.net/dhtml/xtree/

Already created functions under course lib to build the tree: you could also build the tree using an xml file but konqueror cannot handle those xml calls so.. i went back to building the tree using javascript..


keeping in mind that i'm just a hacker and this is my first php hack ever.. this is how the code looks in course/lib.php:

function print_xtree_start($treename){
    echo chr(13)."".chr(13);
    /// Define look and feel for the tree.
    echo "webFXTreeConfig.rootIcon = "../xtree/images/xp/folder.png";".chr(13);
    echo "webFXTreeConfig.rootIcon = "../xtree/images/xp/folder.png";".chr(13);
    echo "webFXTreeConfig.openRootIcon = "../xtree/images/xp/openfolder.png";".chr(13);
    echo "webFXTreeConfig.folderIcon = "../xtree/images/xp/folder.png";".chr(13);
    echo "webFXTreeConfig.openFolderIcon = "../xtree/images/xp/openfolder.png";".chr(13);
    echo "webFXTreeConfig.fileIcon = "../xtree/images/xp/file.png";".chr(13);
    echo "webFXTreeConfig.lMinusIcon = "../xtree/images/xp/Lminus.png";".chr(13);
    echo "webFXTreeConfig.lPlusIcon = "../xtree/images/xp/Lplus.png";".chr(13);
    echo "webFXTreeConfig.tMinusIcon = "../xtree/images/xp/Tminus.png";".chr(13);
    echo "webFXTreeConfig.tPlusIcon = "../xtree/images/xp/Tplus.png";".chr(13);
    echo "webFXTreeConfig.iIcon = "../xtree/images/xp/I.png";".chr(13);
    echo "webFXTreeConfig.lIcon = "../xtree/images/xp/L.png";".chr(13);
    echo "webFXTreeConfig.tIcon = "../xtree/images/xp/T.png";".chr(13);
    echo "webFXTreeConfig.blankIcon = "../xtree/images/blank.png";".chr(13);
    echo "var tree = new WebFXTree("$treename");".chr(13);
    echo "tree.setBehavior("classic");".chr(13).chr(13);

}

function print_xtree_item($indexitem,$itemid,$itemtext,$action="",$parent="",$icon="",$openicon=""){
    ///make sure parent is sent as a reference if its not empty
    if( $parent != ""){
       echo "var $itemid = new WebFXTreeItem('$itemtext','$action',$parent,'$icon','$openicon');".chr(13);
    }
    else{
       echo "var $itemid = new WebFXTreeItem('$itemtext','$action','$parent','$icon','$openicon');".chr(13);    
    }
    echo "$indexitem.add($itemid);".chr(13);
}


function print_xtree_end(){
    echo "document.write(tree);".chr(13);
    echo "".chr(13);
}

usage:
print_xtree_start();

print_xtree_start("TEST1301");

// add an item to the main tree

print_xtree_item("tree","folder","anytext","url",parent,"iconPath","closedIconPath");
     
// add an item to the folder
       print_xtree_item("folder","item1","item1text","url",parent,"iconPath","closedIconPath");

print_xtree_end();

pointers or tips on coding?
HMN.. i will use the summary then.. but how do i make the summary field just a normal text field so that users don't enter too much text?
In reply to Alexis Maldonado

Re: New "Structured" Format

by Paul Duff -

Hi Alexis

That possibility occurred to me when I saw the graphics.  In an environment where the tree menu was used, one could hope that good practice would prevail and editors would resist the temptation to enter long texts - after all, they could use a label to add a paragraph after the topic title.  Alternatively, without adding a new field, you could consider:-

  • Pick off the first nn characters
  • Pick off at the space nearest the nnth character
  • Pick off first nn characters and add some dots  ..........
  • Accommodate any length and break lines at spaces (I think Martin does this with loooooooooong forum post subjects in the Activity panel)

Even with these limitations, the tree looks excellent.  Could one day be used ON the topic panels as well to break up long lists of resources ........ but that's another story.

Paul

PS You could also consider adding the MyCourses list into the menu.

In reply to Alexis Maldonado

Re: New "Structured" Format

by Eloy Lafuente (stronk7) -
Picture of Core developers Picture of Documentation writers Picture of Moodle HQ Picture of Peer reviewers Picture of Plugin developers Picture of Testers
Hi Alexis,

pretty nice trees. smile

Only one sugestion, could it be possible to "parametrize" your "structured" format" to decide if you want the tree (currently) at the left (as showed) or/and at the center (replacing the topic outline) showing every activity grouped (under your great tree) within topics, showing edit buttons as necessary, hidding thigs if necessary...(ie, with all the current functionality stuff)?

Sorry (only a crazy idea) and ciao smile
In reply to Eloy Lafuente (stronk7)

Re: New "Structured" Format

by Alexis Maldonado -
Im sure this can be arranged ..
although i dont know how good it would look smile..
In reply to Alexis Maldonado

Re: New "Structured" Format

by Paul Duff -

10/10 - Good work - must do more ................. hopefully, it may find its way into 1.3 or v2.

Paul

In reply to Alexis Maldonado

Re: New "Structured" Format

by Alexis Maldonado -
Ok did some advances today..

Changes:

1) now using summary for topic title. If no summary is entered it just lists topic #.
2) if a topic has activities they are listed under that topic.

Bugs:

I think i forgot to do something because when i edit a summary it says "Summary of namestructured 1" on top. Help.!!

Thoughts:

I dont know if to add the courses on the tree. I would have to pre-load each course tree. It could be done but i think it might confuse the students to be able to open more than one course at the same time.

Other option would be just to put a folder in the tree with just the course listing..

After fixing the namestructured problem i dont think there is anything else i need to hack. Where can i publish my work so that you all can start testing?


here is a new pic:
Attachment snapshot1.png
In reply to Alexis Maldonado

Re: New "Structured" Format

by Gustav W Delius -

Alexis, that looks very nice. Why don't you attach the code to a forum post as a zip file to start with?

Will the menu remember which folders were expanded on a user's previous visit to the course home page? How does it do that?

Is there anything in your code that makes it specific to the topics format or would it work equally well with the weekly format?

In reply to Gustav W Delius

Re: New "Structured" Format

by Alexis Maldonado -
Will do..

I have not looked exactly at how the menu remembers the tree status, but i know that it remembers everything up until you close the browser. Do we need to make it so that it remembers for next login? if so i will look into it.

There is little or now code linking the tree directly to topic format. In fact the functions that create the tree are completely in the courses/lib and they have no references to topics. I could easily port this to weekly format. If included in next moodle it would be best to have an option by the select format dropdown so that you can switch any format from "classic" to "tree" ?
In reply to Alexis Maldonado

Release..

by Alexis Maldonado -
Ok.. here it is.
Instead of creating 1 "structured" format..
I created 2 alternate formats..

Topics format (with tree)
and
Weekly format (with tree)

Both work exactly like their parent format but with the tree menu.

Input would be greatly appreciated...

INSTALL:
README_courses_formats_tree:

Just extract files to your moodle directory replacing any old ones.

Files that will be updated/replaced:

moodle/lib/javascript.php
moodle/lang/en/moodle.php
moodle/lang/en/help/courseformats.html


New Files:

moodle/lib/xtree/*
moodle/course/xtree.php
moodle/course/format/topicstree/format.php
moodle/course/format/weekstree/format.php
In reply to Alexis Maldonado

Re: Release..

by W Page -
Hi!

Thank you for this "jazzy" update to Moodle.

Are the following to remain in place?
moodle/course/format/topics/format.php
moodle/course/format/weeks/format.php

There is no note above to indicate that they are needed after the installation of,
moodle/course/format/topicstree/format.php
moodle/course/format/weekstree/format.php

WP1
In reply to W Page

Re: Release..

by Alexis Maldonado -
I think that as long as you switch the courses to the new formats moodle should not bark and you could delete them..
I keep them because its the classic format smile.

In reply to Alexis Maldonado

Re: Release..

by W Page -
Hi Alexis!

Very, very nice.

WP1

Attachment smooth_menu.gif
In reply to W Page

Re: Release..

by Ger Tielemans -

Not for me, I get (under windows2000/easyphp1-7) an error on page and an empty menu..

error on line 138: looks in the debugger as if part of the string is moved to the new line and that causes the error?? (amateur anlasysis)

var tree = new WebFXTree("ELO demo","","","",""); var week1 = new WebFXTreeItem('Studiewijzerplus HERE GOES IT TO THE NEW LINE

 ...','http://127.0.0.1/moodle/course/view.php?id=5&week=1','','',''); tree.add(week1);

In reply to Ger Tielemans

Re: Release..

by Gustav W Delius -

I have the same problem when viewing a course in IE6 or Netscape 7.1 using your new formats: there is a javascript error and the menu is empty.

In reply to Ger Tielemans

Re: Release..

by Alexis Maldonado -
Hmn.. you are right.. its the new line character that is killing the tree.. i forgot to strip it.. will do !! that should fix it..
In reply to Ger Tielemans

Re: Release..

by Alexis Maldonado -
fixed.. try the bug fix release bellow tell me if it works..

Also i have a question about weekly format users..

Right now the tree populates using the summary for each week as the title. If the summary is empty then it will post week #. Would it be better to just say week # instead? or the dates for that week ? what do you think ?
In reply to W Page

Re: Release..

by Genner Cerna -
Its nice really, but does it support cross-platform browser?
In reply to Genner Cerna

Re: Release..

by Alexis Maldonado -
I've used it on :

Mozilla 1.6,
Konqueror 3.2,
IE 6.0,

Its worked great on all of them..

From the creator Emil A Eklund about xtree ( http://webfx.eae.net/dhtml/xtree/ ) :

Another thing I can mention from a historical point of view is that this is the first complex script that I have created that works under two different browsers without the use of browser detection, the same code is actually used for ie5 and mozilla. clown
In reply to Alexis Maldonado

Re: Release..

by Eloy Lafuente (stronk7) -
Picture of Core developers Picture of Documentation writers Picture of Moodle HQ Picture of Peer reviewers Picture of Plugin developers Picture of Testers
I've used it on :

Mozilla 1.6,
Konqueror 3.2,
IE 6.0


Note: Seems to work fine under Safari too (Konqueror based).

Ciao smile
In reply to Alexis Maldonado

New Bugfix Release

by Alexis Maldonado -
*Fixed problems with carriage returns not being stripped off the summary causing a javascript error.
In reply to Alexis Maldonado

Re: New Bugfix Release

by Gustav W Delius -

That appears to have made no difference. I still get a javascript error in line 141 character 5 saying:

Error: Expected Identifyer
Code: 0

The line is

var nameweekstree1 = new WebFXTreeItem('I have copied this to a html r...','http://aim.york.ac.uk/moodle/course/view.php?id=7&;nameweekstree=1','','','');
In reply to Gustav W Delius

Re: New Bugfix Release

by Alexis Maldonado -
what language are you using ?

if you are using something other than en or en_us make sure that these lines exist in your moodle/lang/"your language"/moodle.php

$string['nameweekstree'] = 'week';
$string['nametopicstree'] = 'topic';
$string['formattopicstree'] = 'Topics format (with tree)';
$string['formatweekstree'] = 'Weekly format (with tree)';
In reply to Alexis Maldonado

Re: New Bugfix Release

by Gustav W Delius -

Ah, thanks, I was a bit lazy there and thought for testing purposes I wouldn't have to worry about language strings.

I now still have an error and an empty menu and I traced the problem to a single quote in an activity name. Perhaps you have to escape them with addslashes. The offending line in the page source is

var mod1479 = new WebFXTreeItem('Animation of Euler's method','http://aim.york.ac.uk/moodle/mod/resource/view.php?id=1479','','http://aim.york.ac.uk/moodle/theme/york/pix/mod/resource/icon.gif','');

Note the ' in Euler's method.

In reply to Gustav W Delius

Re: New Bugfix Release

by Alexis Maldonado -
Yes that quote would do it..
Great.. now we are doing some good debug smile..

now.. i dont know if there is a function in moodle that already does this.. im gonna have to look around.. else i'll just hard code it..
In reply to Alexis Maldonado

Bug in Recent Activity?

by Zbigniew Fiedorowicz -
I am seeing Gustav's post , but not Alexis' reply above in "Recent Activity" here on moodle.org
In reply to Zbigniew Fiedorowicz

Re: Bug in Recent Activity?

by Alexis Maldonado -
i can see your post and my post.. weird..
In reply to Alexis Maldonado

Re: Bug in Recent Activity?

by Zbigniew Fiedorowicz -
I don't see this post of yours in Recent Activity, nor that one . Also these posts aren't showing up in my email either.
In reply to Alexis Maldonado

Let there be light Release..

by Alexis Maldonado -
This should fix all the javascript/"php newbie coder" problems.

If you can think of anything other than:

single quotes,
carriage returns,
slashes

that can kill the tree let me know.. smile
In reply to Alexis Maldonado

more addslashes needed and hiding hidden sections

by Gustav W Delius -

You should add addslashes() around all strings that you print to the menu and that could potentially contain single quotes. There are many such places in course/lib/xtree.php.

Your menu is currently showing hidden sections in the same way as unhidden ones. Hidden sections and activities should not be shown to students and should be greyed out for teachers.

In reply to Gustav W Delius

Re: more addslashes needed and hiding hidden sections

by Alexis Maldonado -
Hmn.. Yes you are right.. will fix ASAP..

i thought i fixed the hidden sections / activities.. oh well i will fix it..
In reply to Alexis Maldonado

Re: Let there be light Release..

by Gustav W Delius -

In IE6 for some reason some of the menu items are blue and others are black. I can see no particular rhyme to it. See for yourself on the attached screenshot. Do you have any idea what might be causing this? In Netscape all items are black until the mouse hovers over them when they turn blue which I guess was the intended behaviour.

By the way: the hidden week 1 shows up at the top of the menu but not as a folder.

Attachment menu.gif
In reply to Gustav W Delius

Re: Let there be light Release..

by Alexis Maldonado -
yes on IE visited links show up as blue.. is this too annoying? if so i can see how to fix..

any topics/weeks that don't have activities will show up as a file. This is so that the user does not think that it contains any additional content.. There is a way to make them all look like folders.

change:

print_xtree_start("$course->shortname");

to:

print_xtree_start("$course->shortname","","explorer");

on weekstree/format.php
In reply to Alexis Maldonado

Re: Let there be light Release..

by Gustav W Delius -

All links in blue would be fine. But some blue and some black is not nice.

Displaying empty activities as files makes them stand out too much and thereby draws attention to them. A folder without a + sign next to them would work better.

While we are discussing these finer points: I think the names of the menu items should stay as close to the traditional Moodle names as possible. Thus "User" should be "People" and "Controls" should be "Administration". That makes it easier for older Moodlers like me to find things in the menu.

Could you perhaps also collect all the topic folders as subfolders into a "Topics" folder. This folder should be expanded by default so that the appearance is almost like at the moment but it would allow the user to collapse it, thereby saving space on screen. The same should apply to the weekly format: all weekly sections should become subfolders of a "Weekly sections" folder.

In reply to Gustav W Delius

Re: Let there be light Release..

by Alexis Maldonado -
another question..

When hiding a section do we want to keep that section viewable to the instructor in the tree but with a gray folder icon or should i just remove it?
In reply to Alexis Maldonado

Re: Let there be light Release..

by Gustav W Delius -
I think all hidden sections AND hidden activities should be gray for the instructor, simply for consistency with how hidden things are dealt with in the rest of Moodle.
In reply to Alexis Maldonado

Re: Let there be light Release..

by Martin Dougiamas -
Picture of Core developers Picture of Documentation writers Picture of Moodle HQ Picture of Particularly helpful Moodlers Picture of Plugin developers Picture of Testers
Alexis, rather than posting this repeatedly here, let's get this into CVS so you can update it there.  Can you please email me your sourceforge username?
In reply to Martin Dougiamas

Re: Let there be light Release.. - Updating a Mod (What Procedure??)

by W Page -
Hello All!

How can I update just one mod or part of Moodle via SSH?

More specifically, I  know how to get into the Moodle folder but what command do I use to get a specific mod to update?

Thanks in advance for any and all responses.

WP1

In reply to Alexis Maldonado

Re: New "Structured" Format

by Gustav W Delius -
Alexis, are you planning to release your menu as a block so that it will work in Moodle 1.3?
In reply to Alexis Maldonado

Re: New "Structured" Format

by Jean-Pierre Pawlak -

What hapened to the structured format? Can't find it in CVS...

Is there another way to show the structure of a course (topics, resources, ...)?