Note: You are currently viewing documentation for Moodle 2.0. Up-to-date documentation for the latest stable version is available here: DicoTrad block.

DicoTrad block: Difference between revisions

From MoodleDocs
Line 405: Line 405:


== How to remove a dictionary ? ==
== How to remove a dictionary ? ==
This operation is relatively easy to do. It's necessary to open the file dicotraden.php with an editor. It will be necessary to remove lines of codes located at two places in script. Let's say we want to remove the "antonym" dictionary.
This operation is relatively easy to do. It is necessary to open the file dicotraden.php with a PHP editor. It will be necessary to remove lines of codes located at two places in script. Let us say we want to remove the "antonym" dictionary.


Go to around line 53 and delete these lines:
Go to around line 53 and delete these lines:

Revision as of 10:32, 29 January 2007

What's DicoTrad ?

DicoTrad is a Moodle block with linguistic tools. It provides, by querying webservers, the following functionalities:

dicotraden0.jpg
  • Definition; Wordreference and Merriam-Webster dictionaries
  • Synonym
  • Antonym
  • Etymology
  • Wikipedia; search and consult
  • Translation; English - French, German, Italian, Spanish, Portuguese, Norsk, Russian, Svenska, Chinese, Japanese and vice versa.

Available versions

  • For Moodle 1.6, dicotraden16.zip : link
  • For Moodle 1.7 and above, dicotraden17.zip: link

There is also a French version available here:

  • For Moodle 1.6, dicotradfr16.zip : link
  • For Moodle 1.7 and above, dicotradfr17.zip: link

Forum thread for this block here:

Archive content

  • Readme.txt
  • block_dicotraden.php (source code of the block)
  • tree.css (style sheet for the tree (menu))
  • treeview folder (images of the tree)
  • yui (a part of the yahoo user interface. Note that YUI comes with Moodle 1.7 so that dicotrad17.zip doesn't need this folder)

Configuration requirements

  • Moodle 1.6 or 1.7 and above
  • The block is not visible in the tests.
  • I recommend to use at least a screen resolution of 1024x768
  • Works on Firefox 1.5 / Internet Explorer 7

Installation

1. Download dicotraden16.zip or dicotraden17.zip

dicotraden1.jpg

2. Unzip the file named dicotraden16.zip/dicotraden17.zip.

dicotraden2.jpg

3. Copy the folder dicotraden and its content to your blocks folder (moodle/blocks).

File:dicotraden3.jpg

4. Connect to your Moodle site with an administrator account.

5. Go to the Moodle administration's page (http://yourwebsite/moodle/admin). If everything is ok you'll get the following message:

"DicoTrad tables have been set up correctly"

6. Go to your site homepage or in the course you want to display the block. Turn editing on, click Add in the block "blocks" and select DicoTrad.

dicotraden4.jpg

7. You can customize the name of the block by clicking the hand under the title's block (turn editing on).

dicotraden5.jpg

8. dicotraden6.jpg

9. Now the block has a custom name.

dicotraden7.jpg

Now let's see how it works !

Using the block

dicotradenuse.jpg
  1. Enter a word in the field.
  2. Hit the arrow on the right of the field or hit the Enter key, this will generate links.
  3. Click the link(s) you are interested in (i.e. Merriam-Webster) and/or choose a language for translation. Each click will open the result in a new window.

Known problems

  • It is possible to collapse some menu elements by clicking on them (Dictionaries, Wikipedia, Translate). Notwithstanding, the menu is expanded at every reloading of the page and on every user submission. Because of it, we suggest you to collapse the whole block when you don't use it.
  • As you submit a word the page reload. For this, we recommend you to put the block at the top of the page to avoid jumps from bottom to top.
  • It is not possible to have multiple version of DicoTrad on the same page. I.e. you cannot run the French and the English versions on the same page.

How to add a dictionary ?

At first sight, this work can appear long and tiresome. However with some practice you will be able to add, test or remove a dictionary in a few minutes! The addition or the removal of a dictionary requires the modification of the source code of the block (block_dicotraden.php). For that, it is necessary to use an editor PHP such as for example PHP Designer.

Generally, this work can be broken up as follows:

  1. Retrieving information about the site to add.
    • URL structure.
    • Server encoding.
  2. Add some lines in the source code.
  3. Display the new dictionary in the block.
  4. Test under Moodle.

We will make an example in which we add a function of Google research to our block.

Retrieving information about the site to add

The GET and POST methods

Before starting you should be aware that certain sites will not function with this block. DicoTrad contains an HTML form that collect the user request through a field. There are two HTML methods to send data to a server:

  • The GET method writes the data in the URL so they can be seen in the navigation bar of a browser. For example, if you search the word "bird" in google, the following URL will appear in your browser:
http://www.google.com/search?hl=en&q=bird&btnG=Google+Search
As you can see, "bird" and other information appear in the URL. Dicotrad is using the GET method.
  • With the POST method, the data of the form are not written in the URL. It's a safer method used for example at the time of subscribing a new user to a website. Babelfish is a good online example of the POST method. Any translation will return the same URL in your browser: http://babelfish.altavista.com/tr

DicoTrad is using the GET method, as a result it is impossible to add sites working with the POST method.

Identifying the root of the link

Let's say we want to add a website uses the GET method, for example Google. Our first step is to identify the part of the URL that remains the same whatsoever the request is. We will name it "the root of the link". If we search the words Moodle and then LMS we got the following URL:

Moodle:
http://www.google.com/search?hl=en&q=moodle&btnG=Google+Search

LMS:
http://www.google.com/search?hl=en&q=LMS&btnG=Google+Search

We can see that both URL look very similar, only the word of the request change. The structure of the link is:
http://www.google.com/search?hl=en&q=YOUR_REQUEST&btnG=Google+Search

You can try to submit a new request by modifying the URL (without using the Google field). For example put "apple" in the URL and hit the Enter key:
http://www.google.com/search?hl=en&lr=&q=apple&btnG=Google+Search

Playing a little more with the URL show that it also works like this:
http://www.google.com/search?hl=en&lr=&q=apple

The structure of the link is :
http://www.google.com/search?hl=en&lr=&q=YOUR_REQUEST

The root of the link is:
http://www.google.com/search?hl=en&lr=&q= 

Server encoding

Another important step consists in knowing the server encoding. Moodle uses UTF-8 that is universal. I.e. it is able to encode the characters of many languages. For now many websites are encoded in other format that are, usually, identified by the browser. ISO 8859-1 is one of them. It is widespread and contains the Latin alphabet. It's used in the Americas, Western Europe, Oceania, and much of Africa.
The main function of DicoTrad is to create URLs that contain the user request. As this work is done in Moodle environment, the URL will be encoded in UTF-8. Everything is all right if the queried server is also in UTF-8. But when it's not the case (i.e ISO 8859-1), the queried server won't understand the request. We will see later how we can deal with such cases.
There is an easy way to know the encoding of a server. We will just enter an accentuated character and see how it appears in the browser navigation bar.

Let's search "é" in Google:
http://www.google.com/search?hl=en&q=%C3%A9&btnG=Google+Search
"é" is encoded by %C3%A9, this is UTF-8.

On ebay: http://search.ebay.com/search/search.dll?from=R40&satitle=%E9
"é" is encoded by %E9, this is ISO 8859-1.

Many other encodings exist. Unfortunately most of them won't work or will display some errors with DicoTrad. The only way to know if they will work is to try them !

Add a dictionnary in the source code of DicoTrad

To perform this step you need to edit the file block_dicotraden.php with an editor (like PHP editor). This file can be found in moodle/blocks/dicotraden/

The code of block_dicotraden.php has the following structure:

  1. Declaration of the block for Moodle.
  2. The form that include the field for the user request and a submit button.
  3. URL encoding of the dictionaries.
  4. Display of the dictionaries in the block.
  5. Visibility of the block in the Moodle environment.

Only the points 3 and 4 are involved in adding a dictionary or any other search engine. We will now focus on point 3.

We previously saw that the encoding of Google website was UTF-8 and that the root of the link is:
http://www.google.com/search?hl=en&lr=&q=

We have first to locate the URL encoding of the Etymology dictionary in block_dicotraden.php. You will find it at around line number 55:

//Etymology
  $urletym='http://www.etymonline.com/index.php?search='.urlencode(utf8_decode($word));

We will add this:

//Google
  $urlgoogle='http://www.google.com/search?hl=en&lr=&q='.urlencode($word);

Let's decrypt this code:

  • //Google is a comment to tell the programmer which URL is encoded.
  • $urlgoogle is a PHP variable.
  • http://www.google.com/search?hl=en&lr=&q= is the root of the link
  • urlencode($word). $word contains the user request (a string). The function urlencode will convert the word submitted by the user into a compatible URL format. For example the character "é" is converted into %C3%A9 (UTF -8).
  • If we look to the encoding of the Etymology dictionary, we can see urlencode(utf8_decode($word)) instead of urlencode($word). It is because www.etymonline.com doesn't work with UTF-8 but with ISO-8859-1. We have to decode the variable $word (UTF-8) prior to urlencode it.

We can summarize what we said:

If the website we want to add is using UTF-8 (é = %C3%A9). We have the following URL encoding: 
$urlnameofthevariable='rootofthelink'.urlencode($word);
If the website we want to add is using ISO-8859-1 (é = %E9), then :
$urlnameofthevariable='rootofthelink'.urlencode(utf8_decode($word));
If you don't know the server encoding, or if the server ain't UTF-8/ ISO-8859-1, you should try both solutions.

We just saw how to create an URL to send request to google ($urlgoogle). Save your work on the same filename : block_dicotraden.php. Do not rename or move the file to another folder. If you go back to Moodle and display the DicoTrad block, surprise ! Nothing happens, it should appear and function in the same way as before. This is normal; we didn't tell the code to display the Google link we have created.

Displaying a dictionary in DicoTrad

The display of a dictionary (= encoded URL) is done in the same file as before: block_dicotraden.php. At around line 154 we can see:

//Creating the nodes

//"Dictionaries"
   var Node1 = new YAHOO.widget.CustomCssTextNode("dico-", { label: "Dictionaries" }, root, true);
	 
//"Wordreference"
   var Node11 = new YAHOO.widget.CustomCssTextNode("dico-", { label: "Wordreference" }, Node1, false);
	 
//Opening the encoded url (wordreference dictionary) in a new window
  Node11.onLabelClick = function(open){  window.open(\''.$urlwordref.'\',"","width=670,height=850,left=0,top=18,scrollbars=yes,resizable=yes"); };

and so on...

All these lines display a tree of all the categories ("Dictionaries", "Wikipedia" and "Translate") and their subcategories ("Wordreference", "Merriam-Webster",..,"Search", "Consult", "from english to" and "from". We have the following relationship between source code and display.

Treecodemenu.jpg

  • Dictionaries (category) matches var Node1.
  • Wordreference matches var Node11.
  • Merriam-Webster matches var Node12.
  • ...
  • Etymology matches var Node15.
  • Wikipedia (category) matches var Node2.
  • Search matches var Node21.
  • Consult matches var Node22.
  • Translate (category) matches var Node3.
  • From english to matches var Node31.
  • Select box matches var Node32.
  • From matches var Node33.
  • Second select box matches var Node34.

Let's look closely at the "Dictionaries" category (around line 154):

//"Dictionaries"
  var Node1 = new YAHOO.widget.CustomCssTextNode("dico-", { label: "Dictionaries" }, root, true);
  • var Node1 is a variable name given to the "Dictionaries" category.
  • new YAHOO.widget.CustomCssTextNode("dico-", creates a CSS class prefix. It is used to display icons. All the attributs of the dico- CSS prefix can be found in the tree.css file.
  • { label: "Dictionaries" }. What is written in the " " will appear in the block.
  • root means that this node will refer to the root of the tree (= category).
  • true shows all the subcategories of the node. False would collapse the node.

Let's look closely at the "Wordreference" subcategory (around line 157)

//"Wordreference"
  var Node11 = new YAHOO.widget.CustomCssTextNode("dico-", { label: "Wordreference" }, Node1, false);
  • var Node11 is a variable name given to the "Wordreference" subcategory.
  • { label: "Wordreference" }. What is written in the " " will appear in the block.
  • Node1, means that this node will be a subcategory of Node 1
  • false. This node does not have any other subcategory so we can collapse it.
//Opening the encoded url (wordreference dictionary) in a new window
  Node11.onLabelClick = function(open){
  window.open(\''.$urlwordref.'\',"","width=670,height=850,left=0,top=18,scrollbars=yes,resizable=yes"); };
  • Node11.onLabelClick defines the action to be carried out when the user clicks the label (here: "Wordreference"). Each click will open a new window (function window.open).
  • $urlwordref. This variable is the encoded URL (line 47) we want to open in a new window.
  • Dimensions (width=670,height=850) and position (left=0,top=18) of the new window. The user sees scrollbars (scrollbars=yes) and is able to resize (resizable=yes) the window.

After these explanations we can come back to our Google addition. We previously created the variable $urlgoogle which is an encoded URL containing the root of the link (website) and the request of the user. We will first display Google after the Etymology dictionary. In a second time we will add a new category named Search engine that includes Google.

As we want to add a new subcategory, we have to add a new node to the tree. We will copy and past the following lines (175):

//"Etymology"
   var Node15 = new YAHOO.widget.CustomCssTextNode("dico-", { label: "Etymology" }, Node1, false);
   Node15.onLabelClick = function(open){
   window.open(\''.$urletym.'\',"","width=700,height=700,left=0,top=72,scrollbars=yes,resizable=yes"); };

We will make the following modifications (in red)

//"Google"
   var Node16 = new YAHOO.widget.CustomCssTextNode("dico-", { label: "Google" }, Node1, false);
   Node16.onLabelClick = function(open){
   window.open(\''.$urlgoogle.'\',"","width=700,height=700,left=0,top=72,scrollbars=yes,resizable=yes"); };

Congratulations ! Just save the file and have a look at your DicoTrad block in Moodle (reload the block). If all the modifications have been done correctly you should have a Google subcategory. If not watch your code again, be sure there are no typing error.
If not, try to download the code of the example and compare it to yours.

We have to mention another important point. For example we want to display "Google" between the Merriam-Webster and the synonym dictionary. We will have the following code:

//"Merriam-Webster"
   var Node12 = new YAHOO.widget.CustomCssTextNode("dico-", { label: "Merriam-Webster" }, Node1, false);
   Node12.onLabelClick = function(open){
   window.open(\''.$urlmerriam.'\',"","width=720,height=850,left=0,top=36,scrollbars=yes,resizable=yes"); };

//"Google"
  var Node16 = new YAHOO.widget.CustomCssTextNode("dico-", { label: "Google" }, Node1, false);
  Node16.onLabelClick = function(open){
  window.open(\''.$urlgoogle.'\',"","width=700,height=700,left=0,top=72,scrollbars=yes,resizable=yes");
	 
//"Synonym"	 
   var Node13 = new YAHOO.widget.CustomCssTextNode("dico-", { label: "Synonym" }, Node1, false);
   Node13.onLabelClick = function(open){
   window.open(\''.$urlsyno.'\',"","width=900,height=800,left=0,top=54,scrollbars=yes,resizable=yes"); };

It means that only the order of appearance in the code matter ! In this case var Node16 will be displayed before Node13, even if its node number is higher.

How to add a category ?

To explain how to do this job, we will go on with the Google example. Insofar as Google is not a dictionary but a search engine, we will add a suitable category named "Search engines". Let us recall that the categories are defined in the code by var Node1, var Node2 and var Node3. Whereas their subcategories are var Node11, var Node12,...,var Node21, etc... DicoTrad has already 3 categories so we are going to add a fourth named Node4. We will display it after "Wikipedia". Let us mention once again that the display of the categories & subcategories follows the order of appearance in script and not the number of the node.

First copy an existing category, for example "Dictionaries" (~line 157) and paste it just before (~line 185) "Wikipedia" as shown below:

//"Dictionaries"
  var Node1 = new YAHOO.widget.CustomCssTextNode("dico-", { label: "Dictionaries" }, root, true);  
       
//"Wikipedia"
  var Node2 = new YAHOO.widget.CustomCssTextNode("wiki-", { label: "Wikipedia" }, root, true);

Next, modify the copy of "Dictionaries":

//"Search engines"
  var Node4 = new YAHOO.widget.CustomCssTextNode("dico-", { label: "Search engines" }, root, true);

Save the file (dicotraden.php). The new category should now appear in the block.

We can now add subcategories. Our Google script we wrote previously should work perfectly:

//"Google"
  var Node16 = new YAHOO.widget.CustomCssTextNode("dico-", { label: "Google" }, Node1, false);
  Node16.onLabelClick = function(open){
  window.open(\''.$urlgoogle.'\',"","width=700,height=700,left=0,top=72,scrollbars=yes,resizable=yes"); };

We have to change the following parameters:

//"Search engines"
  var Node4 = new YAHOO.widget.CustomCssTextNode("dico-", { label: "Search engines" }, root, true);
  
//"Google"
  var Node41 = new YAHOO.widget.CustomCssTextNode("dico-", { label: "Google" }, Node4, false);
  Node41.onLabelClick = function(open){
  window.open(\''.$urlgoogle.'\',"","width=700,height=700,left=0,top=72,scrollbars=yes,resizable=yes"); };

Save the file and reload a Moodle page that display DicoTrad. Congratulations ! You should see "Search engines" and "Google" in the block.
If not, try to download the code of the example and compare it to yours.

Download examples

  • Google as a subcategory of "dictionaries"
  • New "Search engines" category with Google subcategory.

How to change the icons of the block ?

This work is hard, only people having the practice of the CSS should do it. We will give some information about the icons of DicoTrad, this is not a tutorial.

  • The icons are located in : dicotraden/treeview/assets
  • The CSS file is treeview.css and is located in the dicotraden folder. The script is well-commented
  • There are 3 CSS prefix which can be use by categories and subcategories:
    • "dico-" for the "Dictionaries" category
    • "wiki-" for the "Wikipedia" category
    • "trad-" for the "Translate" category
  • Each prefix can be applied to CSS classes as shown below. You may also refer to the tree.css file or to the YUI treeview documentation.
  • All these prefixes are created in the dicotraden.php file. For example (~line 157)
//"Dictionaries"
  var Node1 = new YAHOO.widget.CustomCssTextNode("dico-", { label: "Dictionaries" }, root, true);

This means that Node1 will use all the "dico-" parameters defined in treeview.css.

If we want to create a new prefix (google-), for example for our search engine category, we should write this:

//"Search engines"
  var Node4 = new YAHOO.widget.CustomCssTextNode("google-", { label: "Search engines" }, root, true);
  
//"Google"
  var Node41 = new YAHOO.widget.CustomCssTextNode("google-", { label: "Google" }, Node4, false);
  Node41.onLabelClick = function(open){
  window.open(\''.$urlgoogle.'\',"","width=700,height=700,left=0,top=72,scrollbars=yes,resizable=yes"); };

After that we have to work on the CSS file to apply our google- prefix to classes.

The display of DicoTrad is a tree with categories and subcategories. Each category can hold 4 icons related to 4 situations

  • The node (category) is opened → the subcategories are expanded
  • The node is opened → the subcategories are expanded and the cursor passes over the node (hover)
  • The node is closed → the subcategories are collapsed
  • The node is closed → the subcategories are collapsed and the cursor passes over the node (hover)

Each subcategory can have only one icon.

Here is the link between the menu and the CSS script for the extended tree

Dicotradcsstree.jpg

Collapsed tree

Dicotradcsstree2.jpg

We notice that first (Dictionaries) and middle (Wikipedia) category of the tree are ygtvtm (expanded) and ygtvtp (collapsed). The last category (Translate) is ygtvlm (expanded) and ygtvlp (collapsed). For subcategories, there is also a distinction between first/middle (ygtvtn) and last (ygtvln). "From" of the translate category ain't ygtvln because of following select box.

Let us watch the Wikipedia category. According to the picture above the Wikipedia node should have 4 classes:

  • .wiki-ygtvtm (expanded)
  • .wiki-ygtvtmh (expanded hover, not shown here)
  • .wiki-ygtvtp (collapsed)
  • .wiki-ygtvtph (collapsed hover, not shown here)

We can find all of them in the tree.css. They always appear twice in the code. For example .wiki-ygtvtmh as to be defined at line 56:

/* first or middle sibling, collapsable. Dictionaries, Wikipedia when they are expanded and when the mouse pass  over it (hover)!*/
.dico-ygtvtmh,
.wiki-ygtvtmh,
.ygtvtmh {
  width:16px; height:22px;
  cursor:pointer ;
  background: url(treeview/assets/tmh.gif) 0 0 no-repeat; 
} 

Parameters for wiki-ygtvtmh are written at line 72:

/* Wikipedia when it's expanded - hover. */
.wiki-ygtvtmh {
  width:20px; height:22px;
  cursor:pointer ;
  background: url(treeview/assets/wiki2.jpg) 0 0 no-repeat;
}
  • Width and height define the place available for the icon. You may experience some troubles with icon bigger than 20px x 20px.
  • background: url(treeview/assets/wiki2.jpg) is the path of the icon.

If we want to add icons to our search engine category we will have to define: If it's before the translate category:

  • google-ygtvtm
  • google-ygtvtmh
  • google-ygtvtp
  • google-ygtvtph

Our google subcategory will be google-ygtvtn..

Good luck :)

How to remove a dictionary ?

This operation is relatively easy to do. It is necessary to open the file dicotraden.php with a PHP editor. It will be necessary to remove lines of codes located at two places in script. Let us say we want to remove the "antonym" dictionary.

Go to around line 53 and delete these lines:

//Antonym
  $urlant='http://www.synonym.com/antonym/'.urlencode(utf8_decode($word));

Go to line 172 and delete these lines:

//"Antonym"	 
  var Node14 = new YAHOO.widget.CustomCssTextNode("dico-", { label: "Antonym" }, Node1, false);
  Node14.onLabelClick = function(open){ window.open(\''.$urlant.'\' ,"","width=900,height=800,left=0,top=54,scrollbars=yes,resizable=yes"); };

How to remove a category ?

To succeed in this work we have to edit the dicotraden.php file with an editor. We have to remove lines of codes located at two places in script. Let us say we want to remove the Wikipedia category. Delete the following lines (~59)

//Wikipedia
 
//Search
  $urlwikisearch='http://en.wikipedia.org/wiki/Special:Search?search='.urlencode($word).'&fulltext=Chercher'; 
//Consult
  $urlwikiconsult='http://en.wikipedia.org/wiki/'.urlencode($word); 

And the following ones (~ 180)

//"Wikipedia"
  var Node2 = new YAHOO.widget.CustomCssTextNode("wiki-", { label: "Wikipedia" }, root, true);
 
//"Search"
  var Node21 = new YAHOO.widget.CustomCssTextNode("wiki-", { label: "Search" }, Node2, false);
  Node21.onLabelClick = function(open){ window.open(\''.$urlwikisearch.'\',"","width=800,height=800,left=0,top=72,scrollbars=yes,resizable=yes"); };
	    
//"Consult"
  var Node22 = new YAHOO.widget.CustomCssTextNode("wiki-", { label: "Consult" }, Node2, false);
  Node22.onLabelClick = function(open){ window.open(\''.$urlwikiconsult.'\',"","width=800,height=800,left=0,top=90,scrollbars=yes,resizable=yes"); };

Save your file and the Wikipedia will be removed from the block.