diff --git a/resources/library/interactivities/Etudier.wgt/img/slate-help-white.png b/resources/library/interactivities/Etudier.wgt/img/slate-help-white.png
new file mode 100644
index 00000000..7b5ebfd8
Binary files /dev/null and b/resources/library/interactivities/Etudier.wgt/img/slate-help-white.png differ
diff --git a/resources/library/interactivities/Etudier.wgt/img/slate-help.png b/resources/library/interactivities/Etudier.wgt/img/slate-help.png
new file mode 100644
index 00000000..069052d0
Binary files /dev/null and b/resources/library/interactivities/Etudier.wgt/img/slate-help.png differ
diff --git a/resources/library/interactivities/Ordre images.wgt/css/basic.css b/resources/library/interactivities/Ordre images.wgt/css/basic.css
index 5ee47f9a..cc891579 100644
--- a/resources/library/interactivities/Ordre images.wgt/css/basic.css	
+++ b/resources/library/interactivities/Ordre images.wgt/css/basic.css	
@@ -4,6 +4,7 @@ html, body{
     margin: 0;
     padding: 0;    
     border-radius: 50px;
+    overflow: hidden;
 }
 
 body{
@@ -240,7 +241,6 @@ body{
 
 #wgt_name{
     height: 44px;
-    width: 300px;
     margin: 10px 10px 0 10px;
     padding: 0;
     float: left;
@@ -249,9 +249,8 @@ body{
     color: #8c5730;
 }
 
-#wgt_reload, #wgt_edit, #wgt_display{
+#wgt_reload, #wgt_edit, #wgt_display, #wgt_help{
     cursor: pointer;
-    width: 80px;
     height: 44px;
     margin: 10px 10px 0 0;
     float: right;
@@ -261,7 +260,6 @@ body{
 }
 
 #wgt_display{
-    width: 100px;
     padding-left: 40px;
     background-image: url(../img/slate-edit.png);
     background-repeat: no-repeat;
@@ -270,7 +268,6 @@ body{
 }
 
 #wgt_edit{    
-    width: 100px;
     padding-left: 40px;
     background-image: url(../img/slate-edit.png);
     background-repeat: no-repeat;
@@ -362,4 +359,28 @@ body{
     background-color: #333 !important;
     color: white !important;
     background-image: url(../img/ar_down_white.png) !important;
+}
+
+.pad_help{
+    background-image: url(../img/slate-help-white.png) !important;
+}
+
+#wgt_help{
+    padding-left: 32px;
+    background-image: url(../img/slate-help.png);
+    background-repeat: no-repeat;
+    background-position: top 0;
+}
+
+#help{
+    width: 100%;
+    height: 100%;    
+    overflow: auto;
+    display: none;
+    background-color: #ccc;
+    padding: 5px;
+}
+
+.open{
+    
 }
\ No newline at end of file
diff --git a/resources/library/interactivities/Ordre images.wgt/img/slate-help-white.png b/resources/library/interactivities/Ordre images.wgt/img/slate-help-white.png
new file mode 100644
index 00000000..7b5ebfd8
Binary files /dev/null and b/resources/library/interactivities/Ordre images.wgt/img/slate-help-white.png differ
diff --git a/resources/library/interactivities/Ordre images.wgt/img/slate-help.png b/resources/library/interactivities/Ordre images.wgt/img/slate-help.png
new file mode 100644
index 00000000..069052d0
Binary files /dev/null and b/resources/library/interactivities/Ordre images.wgt/img/slate-help.png differ
diff --git a/resources/library/interactivities/Ordre images.wgt/index.html b/resources/library/interactivities/Ordre images.wgt/index.html
index 4719f037..53ab2c3d 100644
--- a/resources/library/interactivities/Ordre images.wgt/index.html	
+++ b/resources/library/interactivities/Ordre images.wgt/index.html	
@@ -48,6 +48,7 @@
                 <td class="b_top_left">&nbsp;</td>
                 <td class="b_top_center">
                     <div id="wgt_name"></div>
+                    <div id="wgt_help"></div> 
                     <div id="wgt_reload"></div>                    
                     <div id="wgt_display" class="selected"></div>
                     <div id="wgt_edit"></div>
@@ -59,17 +60,18 @@
                 </td>
                 <td class="b_top_right">&nbsp;</td>
             </tr>
-
+       
             <tr>
                 <td class="b_center_left">&nbsp;</td>
                 <td>
+                    <div id="help"></div>
                     <div id="data">
-
+                        
                     </div>
                 </td>
                 <td class="b_center_right">&nbsp;</td>
             </tr>     
-
+        
             <tr style="height: 54px;">
                 <td class="b_bottom_left">&nbsp;</td>
                 <td class="b_bottom_center">&nbsp;</td>
diff --git a/resources/library/interactivities/Ordre images.wgt/js/script.js b/resources/library/interactivities/Ordre images.wgt/js/script.js
index 791b9d28..f0a4ca0c 100644
--- a/resources/library/interactivities/Ordre images.wgt/js/script.js	
+++ b/resources/library/interactivities/Ordre images.wgt/js/script.js	
@@ -8,7 +8,9 @@ var sankoreLang = {
     reload: "Reload",
     slate: "Wood",
     pad: "Pad",
-    none: "None"
+    none: "None",
+    help: "Help",
+    help_content: "This is an example of help content ..."
 };
 
 //main function
@@ -18,6 +20,8 @@ function start(){
     $("#wgt_edit").text(sankoreLang.edit);
     $("#wgt_name").text(sankoreLang.wgt_name);
     $("#wgt_reload").text(sankoreLang.reload);
+    $("#wgt_help").text(sankoreLang.help);
+    $("#help").html(sankoreLang.help_content);
     $(".style_select option[value='1']").text(sankoreLang.slate);
     $(".style_select option[value='2']").text(sankoreLang.pad);
     $(".style_select option[value='3']").text(sankoreLang.none);
@@ -40,6 +44,21 @@ function start(){
         }
     }
     
+    $("#wgt_help").click(function(){
+        var tmp = $(this);
+        if($(this).hasClass("open")){
+            $("#help").slideUp("100", function(){
+                tmp.removeClass("open");
+                $("#data").show();
+            });
+        } else {            
+            $("#data").hide();
+            $("#help").slideDown("100", function(){
+                tmp.addClass("open");
+            });
+        }
+    });
+    
     $("#wgt_reload").click(function(){
         if($("#wgt_display").hasClass("selected")){
             $("#wgt_edit").trigger("click");
@@ -255,7 +274,7 @@ function importData(data){
             for(var j in data[i].imgs){
                 var img_block = $("<div class='img_block' style='text-align: center;'>");
                 var img = $("<img src='" + data[i].imgs[j].link + "' style='display: inline;'>");
-                img.height(data[i].imgs[j].ht).width(data[i].imgs[j].wd);
+                img.height(data[i].imgs[j].ht);
                 if((120 - data[i].imgs[j].ht) > 0)
                     img.css("margin",(120 - data[i].imgs[j].ht)/2 + "px 0");
                 var hidden_input = $("<input type='hidden'>").val(data[i].imgs[j].value);
@@ -430,6 +449,7 @@ function changeStyle(val){
             $(".b_bottom_left").removeClass("bbl_pad").removeClass("without_back");
             $(".b_bottom_center").removeClass("bbc_pad").removeClass("without_back");
             $("#wgt_reload").removeClass("pad_color").removeClass("pad_reload");
+            $("#wgt_help").removeClass("pad_color").removeClass("pad_help");
             $("#wgt_edit").removeClass("pad_color").removeClass("pad_edit");
             $("#wgt_display").removeClass("pad_color").removeClass("pad_edit");
             $("#wgt_name").removeClass("pad_color");
@@ -446,6 +466,7 @@ function changeStyle(val){
             $(".b_bottom_left").addClass("bbl_pad").removeClass("without_back");
             $(".b_bottom_center").addClass("bbc_pad").removeClass("without_back");
             $("#wgt_reload").addClass("pad_color").addClass("pad_reload");
+            $("#wgt_help").addClass("pad_color").addClass("pad_help");
             $("#wgt_edit").addClass("pad_color").addClass("pad_edit");
             $("#wgt_display").addClass("pad_color").addClass("pad_edit");
             $("#wgt_name").addClass("pad_color");
@@ -461,6 +482,7 @@ function changeStyle(val){
             $(".b_bottom_right").addClass("without_back").removeClass("bbr_pad");
             $(".b_bottom_left").addClass("without_back").removeClass("bbl_pad");
             $(".b_bottom_center").addClass("without_back").removeClass("bbc_pad");
+            $("#wgt_help").addClass("pad_color").addClass("pad_help");
             $("#wgt_reload").addClass("pad_color").addClass("pad_reload");
             $("#wgt_edit").addClass("pad_color").addClass("pad_edit");
             $("#wgt_display").addClass("pad_color").addClass("pad_edit");
@@ -500,9 +522,10 @@ function onDropTarget(obj, event) {
                 tmp_img.attr("height", "120");
             else{
                 tmp_img.attr("width","120");
+                var h = tmp_img.height();
+                tmp_img.attr("height",h);
                 tmp_img.css("margin",(120 - tmp_img.height())/2 + "px 0");
             }
-            exportData();
         }, 6)
     }
     else {
diff --git a/resources/library/interactivities/Ordre images.wgt/locales/fr/index.html b/resources/library/interactivities/Ordre images.wgt/locales/fr/index.html
index 144a3b3a..6151ae43 100644
--- a/resources/library/interactivities/Ordre images.wgt/locales/fr/index.html	
+++ b/resources/library/interactivities/Ordre images.wgt/locales/fr/index.html	
@@ -22,6 +22,7 @@
                 <td class="b_top_left">&nbsp;</td>
                 <td class="b_top_center">
                     <div id="wgt_name"></div>
+                    <div id="wgt_help"></div> 
                     <div id="wgt_reload"></div>                    
                     <div id="wgt_display" class="selected"></div>
                     <div id="wgt_edit"></div>
@@ -37,6 +38,7 @@
             <tr>
                 <td class="b_center_left">&nbsp;</td>
                 <td>
+                    <div id="help"></div>
                     <div id="data">
                         
                     </div>
diff --git a/resources/library/interactivities/Ordre images.wgt/locales/fr/js/script.js b/resources/library/interactivities/Ordre images.wgt/locales/fr/js/script.js
index 02b392b9..c0620f09 100644
--- a/resources/library/interactivities/Ordre images.wgt/locales/fr/js/script.js	
+++ b/resources/library/interactivities/Ordre images.wgt/locales/fr/js/script.js	
@@ -9,7 +9,9 @@ var sankoreLang = {
     reload: "Recharger",
     slate: "ardoise",
     pad: "tablette",
-    none: "aucun"
+    none: "aucun",
+    help: "aide",
+    help_content: "Ceci est un exemple de contenu de l'aide ..."
 };
 
 //main function
@@ -19,6 +21,8 @@ function start(){
     $("#wgt_edit").text(sankoreLang.edit);
     $("#wgt_name").text(sankoreLang.wgt_name);
     $("#wgt_reload").text(sankoreLang.reload);
+    $("#wgt_help").text(sankoreLang.help);
+    $("#help").html(sankoreLang.help_content);
     $(".style_select option[value='1']").text(sankoreLang.slate);
     $(".style_select option[value='2']").text(sankoreLang.pad);
     $(".style_select option[value='3']").text(sankoreLang.none);
@@ -41,6 +45,21 @@ function start(){
         }
     }
     
+    $("#wgt_help").click(function(){
+        var tmp = $(this);
+        if($(this).hasClass("open")){
+            $("#help").slideUp("100", function(){
+                tmp.removeClass("open");
+                $("#data").show();
+            });
+        } else {            
+            $("#data").hide();
+            $("#help").slideDown("100", function(){
+                tmp.addClass("open");
+            });
+        }
+    });
+    
     $("#wgt_reload").click(function(){
         if($("#wgt_display").hasClass("selected")){
             $("#wgt_edit").trigger("click");
@@ -248,7 +267,7 @@ function importData(data){
             for(var j in data[i].imgs){
                 var img_block = $("<div class='img_block' style='text-align: center;'>");
                 var img = $("<img src='../../" + data[i].imgs[j].link + "' style='display: inline;'>");
-                img.height(data[i].imgs[j].ht).width(data[i].imgs[j].wd);
+                img.height(data[i].imgs[j].ht);
                 if((120 - data[i].imgs[j].ht) > 0)
                     img.css("margin",(120 - data[i].imgs[j].ht)/2 + "px 0");
                 var hidden_input = $("<input type='hidden'>").val(data[i].imgs[j].value);
@@ -349,7 +368,7 @@ function addContainer(){
 
 //add new img block
 function addImgBlock(dest){
-    var img_block = $("<div class='img_block' ondragenter='return false;' ondragleave='$(this).css(\"background-color\",\"white\"); return false;' ondragover='$(this).css(\"background-color\",\"#ccc\"); return false;' ondrop='$(this).css(\"background-color\",\"white\"); return onDropTarget(this,event);' style='text-align: center;'></div>").insertBefore(dest);
+    var img_block = $("<div class='img_block' ondragenter='return false;' ondragleave='$(this).css(\"background-color\",\"\"); return false;' ondragover='$(this).css(\"background-color\",\"#ccc\"); return false;' ondrop='$(this).css(\"background-color\",\"\"); return onDropTarget(this,event);' style='text-align: center;'></div>").insertBefore(dest);
     var tmp_counter = dest.parent().find(".img_block").size();
     $("<div class='close_img'>").appendTo(img_block);
     $("<div class='clear_img'>").appendTo(img_block);
@@ -422,6 +441,7 @@ function changeStyle(val){
             $(".b_bottom_left").removeClass("bbl_pad").removeClass("without_back");
             $(".b_bottom_center").removeClass("bbc_pad").removeClass("without_back");
             $("#wgt_reload").removeClass("pad_color").removeClass("pad_reload");
+            $("#wgt_help").removeClass("pad_color").removeClass("pad_help");
             $("#wgt_edit").removeClass("pad_color").removeClass("pad_edit");
             $("#wgt_display").removeClass("pad_color").removeClass("pad_edit");
             $("#wgt_name").removeClass("pad_color");
@@ -438,6 +458,7 @@ function changeStyle(val){
             $(".b_bottom_left").addClass("bbl_pad").removeClass("without_back");
             $(".b_bottom_center").addClass("bbc_pad").removeClass("without_back");
             $("#wgt_reload").addClass("pad_color").addClass("pad_reload");
+            $("#wgt_help").addClass("pad_color").addClass("pad_help");
             $("#wgt_edit").addClass("pad_color").addClass("pad_edit");
             $("#wgt_display").addClass("pad_color").addClass("pad_edit");
             $("#wgt_name").addClass("pad_color");
@@ -453,6 +474,7 @@ function changeStyle(val){
             $(".b_bottom_right").addClass("without_back").removeClass("bbr_pad");
             $(".b_bottom_left").addClass("without_back").removeClass("bbl_pad");
             $(".b_bottom_center").addClass("without_back").removeClass("bbc_pad");
+            $("#wgt_help").addClass("pad_color").addClass("pad_help");
             $("#wgt_reload").addClass("pad_color").addClass("pad_reload");
             $("#wgt_edit").addClass("pad_color").addClass("pad_edit");
             $("#wgt_display").addClass("pad_color").addClass("pad_edit");
@@ -492,9 +514,10 @@ function onDropTarget(obj, event) {
                 tmp_img.attr("height", "120");
             else{
                 tmp_img.attr("width","120");
+                var h = tmp_img.height();
+                tmp_img.attr("height",h);
                 tmp_img.css("margin",(120 - tmp_img.height())/2 + "px 0");
             }
-            exportData();
         }, 6)
     }
     else {
diff --git a/resources/library/interactivities/Ordre images.wgt/locales/ru/index.html b/resources/library/interactivities/Ordre images.wgt/locales/ru/index.html
index 144a3b3a..6151ae43 100644
--- a/resources/library/interactivities/Ordre images.wgt/locales/ru/index.html	
+++ b/resources/library/interactivities/Ordre images.wgt/locales/ru/index.html	
@@ -22,6 +22,7 @@
                 <td class="b_top_left">&nbsp;</td>
                 <td class="b_top_center">
                     <div id="wgt_name"></div>
+                    <div id="wgt_help"></div> 
                     <div id="wgt_reload"></div>                    
                     <div id="wgt_display" class="selected"></div>
                     <div id="wgt_edit"></div>
@@ -37,6 +38,7 @@
             <tr>
                 <td class="b_center_left">&nbsp;</td>
                 <td>
+                    <div id="help"></div>
                     <div id="data">
                         
                     </div>
diff --git a/resources/library/interactivities/Ordre images.wgt/locales/ru/js/script.js b/resources/library/interactivities/Ordre images.wgt/locales/ru/js/script.js
index d033c1b0..4f709a3c 100644
--- a/resources/library/interactivities/Ordre images.wgt/locales/ru/js/script.js	
+++ b/resources/library/interactivities/Ordre images.wgt/locales/ru/js/script.js	
@@ -9,7 +9,9 @@ var sankoreLang = {
     reload: "Обновить",
     slate: "Узор",
     pad: "Планшет",
-    none: "Нет"
+    none: "Нет",
+    help: "Помощь",
+    help_content: "Пример текста помощи ..."
 };
 
 //main function
@@ -19,6 +21,8 @@ function start(){
     $("#wgt_edit").text(sankoreLang.edit);
     $("#wgt_name").text(sankoreLang.wgt_name);
     $("#wgt_reload").text(sankoreLang.reload);
+    $("#wgt_help").text(sankoreLang.help);
+    $("#help").html(sankoreLang.help_content);
     $(".style_select option[value='1']").text(sankoreLang.slate);
     $(".style_select option[value='2']").text(sankoreLang.pad);
     $(".style_select option[value='3']").text(sankoreLang.none);
@@ -41,6 +45,21 @@ function start(){
         }
     }
     
+    $("#wgt_help").click(function(){
+        var tmp = $(this);
+        if($(this).hasClass("open")){
+            $("#help").slideUp("100", function(){
+                tmp.removeClass("open");
+                $("#data").show();
+            });
+        } else {            
+            $("#data").hide();
+            $("#help").slideDown("100", function(){
+                tmp.addClass("open");
+            });
+        }
+    });
+    
     $("#wgt_reload").click(function(){
         if($("#wgt_display").hasClass("selected")){
             $("#wgt_edit").trigger("click");
@@ -248,7 +267,7 @@ function importData(data){
             for(var j in data[i].imgs){
                 var img_block = $("<div class='img_block' style='text-align: center;'>");
                 var img = $("<img src='../../" + data[i].imgs[j].link + "' style='display: inline;'>");
-                img.height(data[i].imgs[j].ht).width(data[i].imgs[j].wd);
+                img.height(data[i].imgs[j].ht);
                 if((120 - data[i].imgs[j].ht) > 0)
                     img.css("margin",(120 - data[i].imgs[j].ht)/2 + "px 0");
                 var hidden_input = $("<input type='hidden'>").val(data[i].imgs[j].value);
@@ -349,7 +368,7 @@ function addContainer(){
 
 //add new img block
 function addImgBlock(dest){
-    var img_block = $("<div class='img_block' ondragenter='return false;' ondragleave='$(this).css(\"background-color\",\"white\"); return false;' ondragover='$(this).css(\"background-color\",\"#ccc\"); return false;' ondrop='$(this).css(\"background-color\",\"white\"); return onDropTarget(this,event);' style='text-align: center;'></div>").insertBefore(dest);
+    var img_block = $("<div class='img_block' ondragenter='return false;' ondragleave='$(this).css(\"background-color\",\"\"); return false;' ondragover='$(this).css(\"background-color\",\"#ccc\"); return false;' ondrop='$(this).css(\"background-color\",\"\"); return onDropTarget(this,event);' style='text-align: center;'></div>").insertBefore(dest);
     var tmp_counter = dest.parent().find(".img_block").size();
     $("<div class='close_img'>").appendTo(img_block);
     $("<div class='clear_img'>").appendTo(img_block);
@@ -422,6 +441,7 @@ function changeStyle(val){
             $(".b_bottom_left").removeClass("bbl_pad").removeClass("without_back");
             $(".b_bottom_center").removeClass("bbc_pad").removeClass("without_back");
             $("#wgt_reload").removeClass("pad_color").removeClass("pad_reload");
+            $("#wgt_help").removeClass("pad_color").removeClass("pad_help");
             $("#wgt_edit").removeClass("pad_color").removeClass("pad_edit");
             $("#wgt_display").removeClass("pad_color").removeClass("pad_edit");
             $("#wgt_name").removeClass("pad_color");
@@ -438,6 +458,7 @@ function changeStyle(val){
             $(".b_bottom_left").addClass("bbl_pad").removeClass("without_back");
             $(".b_bottom_center").addClass("bbc_pad").removeClass("without_back");
             $("#wgt_reload").addClass("pad_color").addClass("pad_reload");
+            $("#wgt_help").addClass("pad_color").addClass("pad_help");
             $("#wgt_edit").addClass("pad_color").addClass("pad_edit");
             $("#wgt_display").addClass("pad_color").addClass("pad_edit");
             $("#wgt_name").addClass("pad_color");
@@ -453,6 +474,7 @@ function changeStyle(val){
             $(".b_bottom_right").addClass("without_back").removeClass("bbr_pad");
             $(".b_bottom_left").addClass("without_back").removeClass("bbl_pad");
             $(".b_bottom_center").addClass("without_back").removeClass("bbc_pad");
+            $("#wgt_help").addClass("pad_color").addClass("pad_help");
             $("#wgt_reload").addClass("pad_color").addClass("pad_reload");
             $("#wgt_edit").addClass("pad_color").addClass("pad_edit");
             $("#wgt_display").addClass("pad_color").addClass("pad_edit");
@@ -492,6 +514,8 @@ function onDropTarget(obj, event) {
                 tmp_img.attr("height", "120");
             else{
                 tmp_img.attr("width","120");
+                var h = tmp_img.height();
+                tmp_img.attr("height",h);
                 tmp_img.css("margin",(120 - tmp_img.height())/2 + "px 0");
             }
             exportData();
diff --git a/resources/library/interactivities/Ordre lettres.wgt/css/basic.css b/resources/library/interactivities/Ordre lettres.wgt/css/basic.css
index 1bcdec7b..6830edb2 100644
--- a/resources/library/interactivities/Ordre lettres.wgt/css/basic.css	
+++ b/resources/library/interactivities/Ordre lettres.wgt/css/basic.css	
@@ -4,6 +4,7 @@ html, body{
     margin: 0;
     padding: 0;
     border-radius: 50px;
+    overflow: hidden;
 }
 
 body{
@@ -286,7 +287,6 @@ body{
 
 #wgt_name{
     height: 44px;
-    width: 300px;
     margin: 10px 10px 0 10px;
     padding: 0;
     float: left;
@@ -295,9 +295,8 @@ body{
     color: #8c5730;
 }
 
-#wgt_reload, #wgt_edit, #wgt_display{
+#wgt_reload, #wgt_edit, #wgt_display, #wgt_help{
     cursor: pointer;
-    width: 80px;
     height: 44px;
     margin: 10px 10px 0 0;
     float: right;
@@ -307,7 +306,6 @@ body{
 }
 
 #wgt_display{
-    width: 100px;
     padding-left: 40px;
     background-image: url(../img/slate-edit.png);
     background-repeat: no-repeat;
@@ -316,7 +314,6 @@ body{
 }
 
 #wgt_edit{    
-    width: 100px;
     padding-left: 40px;
     background-image: url(../img/slate-edit.png);
     background-repeat: no-repeat;
@@ -408,4 +405,28 @@ body{
     background-color: #333 !important;
     color: white !important;
     background-image: url(../img/ar_down_white.png) !important;
+}
+
+.pad_help{
+    background-image: url(../img/slate-help-white.png) !important;
+}
+
+#wgt_help{
+    padding-left: 32px;
+    background-image: url(../img/slate-help.png);
+    background-repeat: no-repeat;
+    background-position: top 0;
+}
+
+#help{
+    width: 100%;
+    height: 100%;    
+    overflow: auto;
+    display: none;
+    background-color: #ccc;
+    padding: 5px;
+}
+
+.open{
+    
 }
\ No newline at end of file
diff --git a/resources/library/interactivities/Ordre lettres.wgt/img/slate-help-white.png b/resources/library/interactivities/Ordre lettres.wgt/img/slate-help-white.png
new file mode 100644
index 00000000..7b5ebfd8
Binary files /dev/null and b/resources/library/interactivities/Ordre lettres.wgt/img/slate-help-white.png differ
diff --git a/resources/library/interactivities/Ordre lettres.wgt/img/slate-help.png b/resources/library/interactivities/Ordre lettres.wgt/img/slate-help.png
new file mode 100644
index 00000000..069052d0
Binary files /dev/null and b/resources/library/interactivities/Ordre lettres.wgt/img/slate-help.png differ
diff --git a/resources/library/interactivities/Ordre lettres.wgt/index.html b/resources/library/interactivities/Ordre lettres.wgt/index.html
index 0715e1a6..1aec98d8 100644
--- a/resources/library/interactivities/Ordre lettres.wgt/index.html	
+++ b/resources/library/interactivities/Ordre lettres.wgt/index.html	
@@ -48,6 +48,7 @@
                 <td class="b_top_left">&nbsp;</td>
                 <td class="b_top_center">
                     <div id="wgt_name"></div>
+                    <div id="wgt_help"></div> 
                     <div id="wgt_reload"></div>                    
                     <div id="wgt_display" class="selected"></div>
                     <div id="wgt_edit"></div>
@@ -63,6 +64,7 @@
             <tr>
                 <td class="b_center_left">&nbsp;</td>
                 <td>
+                    <div id="help"></div>
                     <div id="data">
                         
                     </div>
diff --git a/resources/library/interactivities/Ordre lettres.wgt/js/script.js b/resources/library/interactivities/Ordre lettres.wgt/js/script.js
index 32c7f1df..66e9855f 100644
--- a/resources/library/interactivities/Ordre lettres.wgt/js/script.js	
+++ b/resources/library/interactivities/Ordre lettres.wgt/js/script.js	
@@ -9,7 +9,9 @@ var sankoreLang = {
     reload: "Reload",
     slate: "Wood",
     pad: "Pad",
-    none: "None"
+    none: "None",
+    help: "Help",
+    help_content: "This is an example of help content ..."
 };
 
 //main function
@@ -19,6 +21,8 @@ function start(){
     $("#wgt_edit").text(sankoreLang.edit);
     $("#wgt_name").text(sankoreLang.wgt_name);
     $("#wgt_reload").text(sankoreLang.reload);
+    $("#wgt_help").text(sankoreLang.help);
+    $("#help").html(sankoreLang.help_content);
     $(".style_select option[value='1']").text(sankoreLang.slate);
     $(".style_select option[value='2']").text(sankoreLang.pad);
     $(".style_select option[value='3']").text(sankoreLang.none);
@@ -46,6 +50,21 @@ function start(){
         }
     }
     
+    $("#wgt_help").click(function(){
+        var tmp = $(this);
+        if($(this).hasClass("open")){
+            $("#help").slideUp("100", function(){
+                tmp.removeClass("open");
+                $("#data").show();
+            });
+        } else {            
+            $("#data").hide();
+            $("#help").slideDown("100", function(){
+                tmp.addClass("open");
+            });
+        }
+    });
+    
     $("#wgt_reload").click(function(){
         if($("#wgt_display").hasClass("selected")){
             $("#wgt_edit").trigger("click");
@@ -340,16 +359,16 @@ function showExample(){
 }
 
 //check result
-function checkResult(event)
-{
-    var str = "";
-    var right_str = $(event.target).find("input").val();
-    $(event.target).find(".img_block").each(function(){
-        str += $(this).find("input").val() + "*";
-    });
-    if(str == right_str)
-        $(event.target).css("background-color","#9f9");
-}
+//function checkResult(event)
+//{
+//    var str = "";
+//    var right_str = $(event.target).find("input").val();
+//    $(event.target).find(".img_block").each(function(){
+//        str += $(this).find("input").val() + "*";
+//    });
+//    if(str == right_str)
+//        $(event.target).css("background-color","#9f9");
+//}
 
 //add new container
 function addContainer(){
@@ -414,8 +433,7 @@ function checkResult(event)
         .addClass("imgs_answers_green");
     else
         $(event.target).removeClass("imgs_answers_gray")
-        .removeClass("imgs_answers_green")
-        .addClass("imgs_answers_red");
+        .removeClass("imgs_answers_green");
 }
 
 function stringToXML(text){
@@ -443,6 +461,7 @@ function changeStyle(val){
             $(".b_bottom_left").removeClass("bbl_pad").removeClass("without_back");
             $(".b_bottom_center").removeClass("bbc_pad").removeClass("without_back");
             $("#wgt_reload").removeClass("pad_color").removeClass("pad_reload");
+            $("#wgt_help").removeClass("pad_color").removeClass("pad_help");
             $("#wgt_edit").removeClass("pad_color").removeClass("pad_edit");
             $("#wgt_display").removeClass("pad_color").removeClass("pad_edit");
             $("#wgt_name").removeClass("pad_color");
@@ -459,6 +478,7 @@ function changeStyle(val){
             $(".b_bottom_left").addClass("bbl_pad").removeClass("without_back");
             $(".b_bottom_center").addClass("bbc_pad").removeClass("without_back");
             $("#wgt_reload").addClass("pad_color").addClass("pad_reload");
+            $("#wgt_help").addClass("pad_color").addClass("pad_help");
             $("#wgt_edit").addClass("pad_color").addClass("pad_edit");
             $("#wgt_display").addClass("pad_color").addClass("pad_edit");
             $("#wgt_name").addClass("pad_color");
@@ -474,6 +494,7 @@ function changeStyle(val){
             $(".b_bottom_right").addClass("without_back").removeClass("bbr_pad");
             $(".b_bottom_left").addClass("without_back").removeClass("bbl_pad");
             $(".b_bottom_center").addClass("without_back").removeClass("bbc_pad");
+            $("#wgt_help").addClass("pad_color").addClass("pad_help");
             $("#wgt_reload").addClass("pad_color").addClass("pad_reload");
             $("#wgt_edit").addClass("pad_color").addClass("pad_edit");
             $("#wgt_display").addClass("pad_color").addClass("pad_edit");
diff --git a/resources/library/interactivities/Ordre lettres.wgt/locales/fr/index.html b/resources/library/interactivities/Ordre lettres.wgt/locales/fr/index.html
index 1ab412a3..38c7a8c7 100644
--- a/resources/library/interactivities/Ordre lettres.wgt/locales/fr/index.html	
+++ b/resources/library/interactivities/Ordre lettres.wgt/locales/fr/index.html	
@@ -22,6 +22,7 @@
                 <td class="b_top_left">&nbsp;</td>
                 <td class="b_top_center">
                     <div id="wgt_name"></div>
+                    <div id="wgt_help"></div> 
                     <div id="wgt_reload"></div>                    
                     <div id="wgt_display" class="selected"></div>
                     <div id="wgt_edit"></div>
@@ -37,6 +38,7 @@
             <tr>
                 <td class="b_center_left">&nbsp;</td>
                 <td>
+                    <div id="help"></div>
                     <div id="data">
                         
                     </div>
diff --git a/resources/library/interactivities/Ordre lettres.wgt/locales/fr/js/script.js b/resources/library/interactivities/Ordre lettres.wgt/locales/fr/js/script.js
index 3584f83f..83a1edf0 100644
--- a/resources/library/interactivities/Ordre lettres.wgt/locales/fr/js/script.js	
+++ b/resources/library/interactivities/Ordre lettres.wgt/locales/fr/js/script.js	
@@ -9,7 +9,9 @@ var sankoreLang = {
     reload: "Recharger",
     slate: "Bois",
     pad: "Pad",
-    none: "Aucun"
+    none: "Aucun",
+    help: "Aide",
+    help_content: "Ceci est un exemple de contenu de l'aide ..."
 };
 
 //main function
@@ -19,6 +21,8 @@ function start(){
     $("#wgt_edit").text(sankoreLang.edit);
     $("#wgt_name").text(sankoreLang.wgt_name);
     $("#wgt_reload").text(sankoreLang.reload);
+    $("#wgt_help").text(sankoreLang.help);
+    $("#help").html(sankoreLang.help_content);
     $(".style_select option[value='1']").text(sankoreLang.slate);
     $(".style_select option[value='2']").text(sankoreLang.pad);
     $(".style_select option[value='3']").text(sankoreLang.none);
@@ -46,6 +50,21 @@ function start(){
         }
     }
     
+    $("#wgt_help").click(function(){
+        var tmp = $(this);
+        if($(this).hasClass("open")){
+            $("#help").slideUp("100", function(){
+                tmp.removeClass("open");
+                $("#data").show();
+            });
+        } else {            
+            $("#data").hide();
+            $("#help").slideDown("100", function(){
+                tmp.addClass("open");
+            });
+        }
+    });
+    
     $("#wgt_reload").click(function(){
         if($("#wgt_display").hasClass("selected")){
             $("#wgt_edit").trigger("click");
@@ -334,16 +353,16 @@ function showExample(){
 }
 
 //check result
-function checkResult(event)
-{
-    var str = "";
-    var right_str = $(event.target).find("input").val();
-    $(event.target).find(".img_block").each(function(){
-        str += $(this).find("input").val() + "*";
-    });
-    if(str == right_str)
-        $(event.target).css("background-color","#9f9");
-}
+//function checkResult(event)
+//{
+//    var str = "";
+//    var right_str = $(event.target).find("input").val();
+//    $(event.target).find(".img_block").each(function(){
+//        str += $(this).find("input").val() + "*";
+//    });
+//    if(str == right_str)
+//        $(event.target).css("background-color","#9f9");
+//}
 
 //add new container
 function addContainer(){
@@ -408,8 +427,7 @@ function checkResult(event)
         .addClass("imgs_answers_green");
     else
         $(event.target).removeClass("imgs_answers_gray")
-        .removeClass("imgs_answers_green")
-        .addClass("imgs_answers_red");
+        .removeClass("imgs_answers_green");
 }
 
 function stringToXML(text){
@@ -437,6 +455,7 @@ function changeStyle(val){
             $(".b_bottom_left").removeClass("bbl_pad").removeClass("without_back");
             $(".b_bottom_center").removeClass("bbc_pad").removeClass("without_back");
             $("#wgt_reload").removeClass("pad_color").removeClass("pad_reload");
+            $("#wgt_help").removeClass("pad_color").removeClass("pad_help");
             $("#wgt_edit").removeClass("pad_color").removeClass("pad_edit");
             $("#wgt_display").removeClass("pad_color").removeClass("pad_edit");
             $("#wgt_name").removeClass("pad_color");
@@ -453,6 +472,7 @@ function changeStyle(val){
             $(".b_bottom_left").addClass("bbl_pad").removeClass("without_back");
             $(".b_bottom_center").addClass("bbc_pad").removeClass("without_back");
             $("#wgt_reload").addClass("pad_color").addClass("pad_reload");
+            $("#wgt_help").addClass("pad_color").addClass("pad_help");
             $("#wgt_edit").addClass("pad_color").addClass("pad_edit");
             $("#wgt_display").addClass("pad_color").addClass("pad_edit");
             $("#wgt_name").addClass("pad_color");
@@ -468,6 +488,7 @@ function changeStyle(val){
             $(".b_bottom_right").addClass("without_back").removeClass("bbr_pad");
             $(".b_bottom_left").addClass("without_back").removeClass("bbl_pad");
             $(".b_bottom_center").addClass("without_back").removeClass("bbc_pad");
+            $("#wgt_help").addClass("pad_color").addClass("pad_help");
             $("#wgt_reload").addClass("pad_color").addClass("pad_reload");
             $("#wgt_edit").addClass("pad_color").addClass("pad_edit");
             $("#wgt_display").addClass("pad_color").addClass("pad_edit");
diff --git a/resources/library/interactivities/Ordre lettres.wgt/locales/ru/index.html b/resources/library/interactivities/Ordre lettres.wgt/locales/ru/index.html
index 192e73cf..1fb435c9 100644
--- a/resources/library/interactivities/Ordre lettres.wgt/locales/ru/index.html	
+++ b/resources/library/interactivities/Ordre lettres.wgt/locales/ru/index.html	
@@ -22,6 +22,7 @@
                 <td class="b_top_left">&nbsp;</td>
                 <td class="b_top_center">
                     <div id="wgt_name"></div>
+                    <div id="wgt_help"></div> 
                     <div id="wgt_reload"></div>                    
                     <div id="wgt_display" class="selected"></div>
                     <div id="wgt_edit"></div>
@@ -37,6 +38,7 @@
             <tr>
                 <td class="b_center_left">&nbsp;</td>
                 <td>
+                    <div id="help"></div>
                     <div id="data">
                         
                     </div>
diff --git a/resources/library/interactivities/Ordre lettres.wgt/locales/ru/js/script.js b/resources/library/interactivities/Ordre lettres.wgt/locales/ru/js/script.js
index befb959f..c12ef6eb 100644
--- a/resources/library/interactivities/Ordre lettres.wgt/locales/ru/js/script.js	
+++ b/resources/library/interactivities/Ordre lettres.wgt/locales/ru/js/script.js	
@@ -9,7 +9,9 @@ var sankoreLang = {
     reload: "Обновить",
     slate: "Узор",
     pad: "Планшет",
-    none: "Нет"
+    none: "Нет",
+    help: "Помощь",
+    help_content: "Пример текста помощи ..."
 };
 
 
@@ -20,6 +22,8 @@ function start(){
     $("#wgt_edit").text(sankoreLang.edit);
     $("#wgt_name").text(sankoreLang.wgt_name);
     $("#wgt_reload").text(sankoreLang.reload);
+    $("#wgt_help").text(sankoreLang.help);
+    $("#help").html(sankoreLang.help_content);
     $(".style_select option[value='1']").text(sankoreLang.slate);
     $(".style_select option[value='2']").text(sankoreLang.pad);
     $(".style_select option[value='3']").text(sankoreLang.none);
@@ -47,6 +51,21 @@ function start(){
         }
     }
     
+    $("#wgt_help").click(function(){
+        var tmp = $(this);
+        if($(this).hasClass("open")){
+            $("#help").slideUp("100", function(){
+                tmp.removeClass("open");
+                $("#data").show();
+            });
+        } else {            
+            $("#data").hide();
+            $("#help").slideDown("100", function(){
+                tmp.addClass("open");
+            });
+        }
+    });
+    
     $("#wgt_reload").click(function(){
         if($("#wgt_display").hasClass("selected")){
             $("#wgt_edit").trigger("click");
@@ -335,16 +354,16 @@ function showExample(){
 }
 
 //check result
-function checkResult(event)
-{
-    var str = "";
-    var right_str = $(event.target).find("input").val();
-    $(event.target).find(".img_block").each(function(){
-        str += $(this).find("input").val() + "*";
-    });
-    if(str == right_str)
-        $(event.target).css("background-color","#9f9");
-}
+//function checkResult(event)
+//{
+//    var str = "";
+//    var right_str = $(event.target).find("input").val();
+//    $(event.target).find(".img_block").each(function(){
+//        str += $(this).find("input").val() + "*";
+//    });
+//    if(str == right_str)
+//        $(event.target).css("background-color","#9f9");
+//}
 
 //add new container
 function addContainer(){
@@ -409,8 +428,7 @@ function checkResult(event)
         .addClass("imgs_answers_green");
     else
         $(event.target).removeClass("imgs_answers_gray")
-        .removeClass("imgs_answers_green")
-        .addClass("imgs_answers_red");
+        .removeClass("imgs_answers_green");
 }
 
 function stringToXML(text){
@@ -438,6 +456,7 @@ function changeStyle(val){
             $(".b_bottom_left").removeClass("bbl_pad").removeClass("without_back");
             $(".b_bottom_center").removeClass("bbc_pad").removeClass("without_back");
             $("#wgt_reload").removeClass("pad_color").removeClass("pad_reload");
+            $("#wgt_help").removeClass("pad_color").removeClass("pad_help");
             $("#wgt_edit").removeClass("pad_color").removeClass("pad_edit");
             $("#wgt_display").removeClass("pad_color").removeClass("pad_edit");
             $("#wgt_name").removeClass("pad_color");
@@ -454,6 +473,7 @@ function changeStyle(val){
             $(".b_bottom_left").addClass("bbl_pad").removeClass("without_back");
             $(".b_bottom_center").addClass("bbc_pad").removeClass("without_back");
             $("#wgt_reload").addClass("pad_color").addClass("pad_reload");
+            $("#wgt_help").addClass("pad_color").addClass("pad_help");
             $("#wgt_edit").addClass("pad_color").addClass("pad_edit");
             $("#wgt_display").addClass("pad_color").addClass("pad_edit");
             $("#wgt_name").addClass("pad_color");
@@ -469,6 +489,7 @@ function changeStyle(val){
             $(".b_bottom_right").addClass("without_back").removeClass("bbr_pad");
             $(".b_bottom_left").addClass("without_back").removeClass("bbl_pad");
             $(".b_bottom_center").addClass("without_back").removeClass("bbc_pad");
+            $("#wgt_help").addClass("pad_color").addClass("pad_help");
             $("#wgt_reload").addClass("pad_color").addClass("pad_reload");
             $("#wgt_edit").addClass("pad_color").addClass("pad_edit");
             $("#wgt_display").addClass("pad_color").addClass("pad_edit");
diff --git a/resources/library/interactivities/Ordre mots.wgt/img/slate-help-white.png b/resources/library/interactivities/Ordre mots.wgt/img/slate-help-white.png
new file mode 100644
index 00000000..7b5ebfd8
Binary files /dev/null and b/resources/library/interactivities/Ordre mots.wgt/img/slate-help-white.png differ
diff --git a/resources/library/interactivities/Ordre mots.wgt/img/slate-help.png b/resources/library/interactivities/Ordre mots.wgt/img/slate-help.png
new file mode 100644
index 00000000..069052d0
Binary files /dev/null and b/resources/library/interactivities/Ordre mots.wgt/img/slate-help.png differ
diff --git a/resources/library/interactivities/Ordre mots.wgt/index.html b/resources/library/interactivities/Ordre mots.wgt/index.html
index 9a7cb14b..80615e61 100644
--- a/resources/library/interactivities/Ordre mots.wgt/index.html	
+++ b/resources/library/interactivities/Ordre mots.wgt/index.html	
@@ -59,6 +59,7 @@
                 <td class="b_top_left">&nbsp;</td>
                 <td class="b_top_center">
                     <div id="wgt_name"></div>
+                    <div id="wgt_help"></div> 
                     <div id="wgt_reload"></div>                    
                     <div id="wgt_display" class="selected"></div>
                     <div id="wgt_edit"></div>
@@ -74,6 +75,7 @@
             <tr>
                 <td class="b_center_left">&nbsp;</td>
                 <td>
+                    <div id="help"></div>
                     <div id="ub-widget">
 
                     </div>
diff --git a/resources/library/interactivities/Ordre mots.wgt/locales/fr/index.html b/resources/library/interactivities/Ordre mots.wgt/locales/fr/index.html
index 09bf56aa..8918641f 100644
--- a/resources/library/interactivities/Ordre mots.wgt/locales/fr/index.html	
+++ b/resources/library/interactivities/Ordre mots.wgt/locales/fr/index.html	
@@ -30,6 +30,7 @@
                 <td class="b_top_left">&nbsp;</td>
                 <td class="b_top_center">
                     <div id="wgt_name"></div>
+                    <div id="wgt_help"></div> 
                     <div id="wgt_reload"></div>                    
                     <div id="wgt_display" class="selected"></div>
                     <div id="wgt_edit"></div>
@@ -45,6 +46,7 @@
             <tr>
                 <td class="b_center_left">&nbsp;</td>
                 <td>
+                    <div id="help"></div>
                     <div id="ub-widget">
 
                     </div>
diff --git a/resources/library/interactivities/Ordre mots.wgt/locales/fr/scripts/template2.js b/resources/library/interactivities/Ordre mots.wgt/locales/fr/scripts/template2.js
index 70e765b7..08499234 100644
--- a/resources/library/interactivities/Ordre mots.wgt/locales/fr/scripts/template2.js	
+++ b/resources/library/interactivities/Ordre mots.wgt/locales/fr/scripts/template2.js	
@@ -34,7 +34,9 @@ var sankoreLang = {
     reload: "Recharger",
     slate: "ardoise",
     pad: "tablette",
-    none: "aucun"
+    none: "aucun",
+    help: "aide",
+    help_content: "Ceci est un exemple de contenu de l'aide ..."
 };
 
 var word = "";
@@ -73,8 +75,12 @@ $(document).ready(function(){
             changeStyle("3")
     } else 
         changeStyle("3")
+    
     $("#wgt_display").text(sankoreLang.view);
     $("#wgt_edit").text(sankoreLang.edit);
+    $("#wgt_help").text(sankoreLang.help);
+    $("#help").html(sankoreLang.help_content);
+    
     $("#wgt_display, #wgt_edit").click(function(event){
         if(this.id == "wgt_display"){
             if(!$(this).hasClass("selected")){                
@@ -99,6 +105,21 @@ $(document).ready(function(){
     
     $("#wgt_name").text(sankoreLang.wgt_name);
     
+    $("#wgt_help").click(function(){
+        var tmp = $(this);
+        if($(this).hasClass("open")){
+            $("#help").slideUp("100", function(){
+                tmp.removeClass("open");
+                $("#ub-widget").show();
+            });
+        } else {            
+            $("#ub-widget").hide();
+            $("#help").slideDown("100", function(){
+                tmp.addClass("open");
+            });
+        }
+    });
+    
     $("#wgt_reload").text(sankoreLang.reload).click(function(){
         if(wgtState)
             $("#wgt_display").trigger("click");
@@ -202,6 +223,7 @@ function changeStyle(val){
             $(".b_bottom_left").removeClass("bbl_pad").removeClass("without_back");
             $(".b_bottom_center").removeClass("bbc_pad").removeClass("without_back");
             $("#wgt_reload").removeClass("pad_color").removeClass("pad_reload");
+            $("#wgt_help").removeClass("pad_color").removeClass("pad_help");
             $("#wgt_edit").removeClass("pad_color").removeClass("pad_edit");
             $("#wgt_display").removeClass("pad_color").removeClass("pad_edit");
             $("#wgt_name").removeClass("pad_color");
@@ -218,6 +240,7 @@ function changeStyle(val){
             $(".b_bottom_left").addClass("bbl_pad").removeClass("without_back");
             $(".b_bottom_center").addClass("bbc_pad").removeClass("without_back");
             $("#wgt_reload").addClass("pad_color").addClass("pad_reload");
+            $("#wgt_help").addClass("pad_color").addClass("pad_help");
             $("#wgt_edit").addClass("pad_color").addClass("pad_edit");
             $("#wgt_display").addClass("pad_color").addClass("pad_edit");
             $("#wgt_name").addClass("pad_color");
@@ -233,6 +256,7 @@ function changeStyle(val){
             $(".b_bottom_right").addClass("without_back").removeClass("bbr_pad");
             $(".b_bottom_left").addClass("without_back").removeClass("bbl_pad");
             $(".b_bottom_center").addClass("without_back").removeClass("bbc_pad");
+            $("#wgt_help").addClass("pad_color").addClass("pad_help");
             $("#wgt_reload").addClass("pad_color").addClass("pad_reload");
             $("#wgt_edit").addClass("pad_color").addClass("pad_edit");
             $("#wgt_display").addClass("pad_color").addClass("pad_edit");
diff --git a/resources/library/interactivities/Ordre mots.wgt/locales/ru/index.html b/resources/library/interactivities/Ordre mots.wgt/locales/ru/index.html
index 09bf56aa..8918641f 100644
--- a/resources/library/interactivities/Ordre mots.wgt/locales/ru/index.html	
+++ b/resources/library/interactivities/Ordre mots.wgt/locales/ru/index.html	
@@ -30,6 +30,7 @@
                 <td class="b_top_left">&nbsp;</td>
                 <td class="b_top_center">
                     <div id="wgt_name"></div>
+                    <div id="wgt_help"></div> 
                     <div id="wgt_reload"></div>                    
                     <div id="wgt_display" class="selected"></div>
                     <div id="wgt_edit"></div>
@@ -45,6 +46,7 @@
             <tr>
                 <td class="b_center_left">&nbsp;</td>
                 <td>
+                    <div id="help"></div>
                     <div id="ub-widget">
 
                     </div>
diff --git a/resources/library/interactivities/Ordre mots.wgt/locales/ru/scripts/template2.js b/resources/library/interactivities/Ordre mots.wgt/locales/ru/scripts/template2.js
index 5a7e095e..3b267590 100644
--- a/resources/library/interactivities/Ordre mots.wgt/locales/ru/scripts/template2.js	
+++ b/resources/library/interactivities/Ordre mots.wgt/locales/ru/scripts/template2.js	
@@ -34,7 +34,9 @@ var sankoreLang = {
     reload: "Обновить",
     slate: "Узор",
     pad: "Планшет",
-    none: "Нет"
+    none: "Нет",
+    help: "Помощь",
+    help_content: "Пример текста помощи ..."
 };
 
 var word = "";
@@ -75,6 +77,9 @@ $(document).ready(function(){
         changeStyle("3")
     $("#wgt_display").text(sankoreLang.view);
     $("#wgt_edit").text(sankoreLang.edit);
+    $("#wgt_help").text(sankoreLang.help);
+    $("#help").html(sankoreLang.help_content);
+    
     $("#wgt_display, #wgt_edit").click(function(event){
         if(this.id == "wgt_display"){
             if(!$(this).hasClass("selected")){                
@@ -99,6 +104,21 @@ $(document).ready(function(){
     
     $("#wgt_name").text(sankoreLang.wgt_name);
     
+    $("#wgt_help").click(function(){
+        var tmp = $(this);
+        if($(this).hasClass("open")){
+            $("#help").slideUp("100", function(){
+                tmp.removeClass("open");
+                $("#ub-widget").show();
+            });
+        } else {            
+            $("#ub-widget").hide();
+            $("#help").slideDown("100", function(){
+                tmp.addClass("open");
+            });
+        }
+    });
+    
     $("#wgt_reload").text(sankoreLang.reload).click(function(){
         if(wgtState)
             $("#wgt_display").trigger("click");
@@ -202,6 +222,7 @@ function changeStyle(val){
             $(".b_bottom_left").removeClass("bbl_pad").removeClass("without_back");
             $(".b_bottom_center").removeClass("bbc_pad").removeClass("without_back");
             $("#wgt_reload").removeClass("pad_color").removeClass("pad_reload");
+            $("#wgt_help").removeClass("pad_color").removeClass("pad_help");
             $("#wgt_edit").removeClass("pad_color").removeClass("pad_edit");
             $("#wgt_display").removeClass("pad_color").removeClass("pad_edit");
             $("#wgt_name").removeClass("pad_color");
@@ -218,6 +239,7 @@ function changeStyle(val){
             $(".b_bottom_left").addClass("bbl_pad").removeClass("without_back");
             $(".b_bottom_center").addClass("bbc_pad").removeClass("without_back");
             $("#wgt_reload").addClass("pad_color").addClass("pad_reload");
+            $("#wgt_help").addClass("pad_color").addClass("pad_help");
             $("#wgt_edit").addClass("pad_color").addClass("pad_edit");
             $("#wgt_display").addClass("pad_color").addClass("pad_edit");
             $("#wgt_name").addClass("pad_color");
@@ -233,6 +255,7 @@ function changeStyle(val){
             $(".b_bottom_right").addClass("without_back").removeClass("bbr_pad");
             $(".b_bottom_left").addClass("without_back").removeClass("bbl_pad");
             $(".b_bottom_center").addClass("without_back").removeClass("bbc_pad");
+            $("#wgt_help").addClass("pad_color").addClass("pad_help");
             $("#wgt_reload").addClass("pad_color").addClass("pad_reload");
             $("#wgt_edit").addClass("pad_color").addClass("pad_edit");
             $("#wgt_display").addClass("pad_color").addClass("pad_edit");
diff --git a/resources/library/interactivities/Ordre mots.wgt/scripts/template2.js b/resources/library/interactivities/Ordre mots.wgt/scripts/template2.js
index ef75b7ce..db966b89 100644
--- a/resources/library/interactivities/Ordre mots.wgt/scripts/template2.js	
+++ b/resources/library/interactivities/Ordre mots.wgt/scripts/template2.js	
@@ -34,7 +34,9 @@ var sankoreLang = {
     reload: "Reload",
     slate: "Wood",
     pad: "Pad",
-    none: "None"
+    none: "None",
+    help: "Help",
+    help_content: "This is an example of help content ..."
 };
 
 var word = "";
@@ -75,6 +77,9 @@ $(document).ready(function(){
         changeStyle("3")
     $("#wgt_display").text(sankoreLang.view);
     $("#wgt_edit").text(sankoreLang.edit);
+    $("#wgt_help").text(sankoreLang.help);
+    $("#help").html(sankoreLang.help_content);
+    
     $("#wgt_display, #wgt_edit").click(function(event){
         if(this.id == "wgt_display"){
             if(!$(this).hasClass("selected")){                
@@ -99,6 +104,21 @@ $(document).ready(function(){
     
     $("#wgt_name").text(sankoreLang.wgt_name);
     
+    $("#wgt_help").click(function(){
+        var tmp = $(this);
+        if($(this).hasClass("open")){
+            $("#help").slideUp("100", function(){
+                tmp.removeClass("open");
+                $("#ub-widget").show();
+            });
+        } else {            
+            $("#ub-widget").hide();
+            $("#help").slideDown("100", function(){
+                tmp.addClass("open");
+            });
+        }
+    });
+    
     $("#wgt_reload").text(sankoreLang.reload).click(function(){
         if(wgtState)
             $("#wgt_display").trigger("click");
@@ -202,6 +222,7 @@ function changeStyle(val){
             $(".b_bottom_left").removeClass("bbl_pad").removeClass("without_back");
             $(".b_bottom_center").removeClass("bbc_pad").removeClass("without_back");
             $("#wgt_reload").removeClass("pad_color").removeClass("pad_reload");
+            $("#wgt_help").removeClass("pad_color").removeClass("pad_help");
             $("#wgt_edit").removeClass("pad_color").removeClass("pad_edit");
             $("#wgt_display").removeClass("pad_color").removeClass("pad_edit");
             $("#wgt_name").removeClass("pad_color");
@@ -218,6 +239,7 @@ function changeStyle(val){
             $(".b_bottom_left").addClass("bbl_pad").removeClass("without_back");
             $(".b_bottom_center").addClass("bbc_pad").removeClass("without_back");
             $("#wgt_reload").addClass("pad_color").addClass("pad_reload");
+            $("#wgt_help").addClass("pad_color").addClass("pad_help");
             $("#wgt_edit").addClass("pad_color").addClass("pad_edit");
             $("#wgt_display").addClass("pad_color").addClass("pad_edit");
             $("#wgt_name").addClass("pad_color");
@@ -233,6 +255,7 @@ function changeStyle(val){
             $(".b_bottom_right").addClass("without_back").removeClass("bbr_pad");
             $(".b_bottom_left").addClass("without_back").removeClass("bbl_pad");
             $(".b_bottom_center").addClass("without_back").removeClass("bbc_pad");
+            $("#wgt_help").addClass("pad_color").addClass("pad_help");
             $("#wgt_reload").addClass("pad_color").addClass("pad_reload");
             $("#wgt_edit").addClass("pad_color").addClass("pad_edit");
             $("#wgt_display").addClass("pad_color").addClass("pad_edit");
diff --git a/resources/library/interactivities/Ordre mots.wgt/styles/of_puppets.css b/resources/library/interactivities/Ordre mots.wgt/styles/of_puppets.css
index 0a1c5924..111e3199 100644
--- a/resources/library/interactivities/Ordre mots.wgt/styles/of_puppets.css	
+++ b/resources/library/interactivities/Ordre mots.wgt/styles/of_puppets.css	
@@ -4,6 +4,7 @@ html, body{
     margin: 0;
     padding: 0;    
     border-radius: 50px;
+    overflow: hidden;
 }
 
 body{
@@ -135,7 +136,6 @@ body{
 
 #wgt_name{
     height: 44px;
-    width: 300px;
     margin: 10px 10px 0 10px;
     padding: 0;
     float: left;
@@ -144,9 +144,8 @@ body{
     color: #8c5730;
 }
 
-#wgt_reload, #wgt_edit, #wgt_display{
+#wgt_reload, #wgt_edit, #wgt_display, #wgt_help{
     cursor: pointer;
-    width: 80px;
     height: 44px;
     margin: 10px 10px 0 0;
     float: right;
@@ -156,7 +155,6 @@ body{
 }
 
 #wgt_display{
-    width: 100px;
     padding-left: 40px;
     background-image: url(../img/slate-edit.png);
     background-repeat: no-repeat;
@@ -165,7 +163,6 @@ body{
 }
 
 #wgt_edit{    
-    width: 100px;
     padding-left: 40px;
     background-image: url(../img/slate-edit.png);
     background-repeat: no-repeat;
@@ -257,4 +254,28 @@ body{
     background-color: #333 !important;
     color: white !important;
     background-image: url(../img/ar_down_white.png) !important;
+}
+
+.pad_help{
+    background-image: url(../img/slate-help-white.png) !important;
+}
+
+#wgt_help{
+    padding-left: 32px;
+    background-image: url(../img/slate-help.png);
+    background-repeat: no-repeat;
+    background-position: top 0;
+}
+
+#help{
+    width: 100%;
+    height: 100%;    
+    overflow: auto;
+    display: none;
+    background-color: #ccc;
+    padding: 5px;
+}
+
+.open{
+    
 }
\ No newline at end of file
diff --git a/resources/library/interactivities/Ordre phrase.wgt/img/slate-help-white.png b/resources/library/interactivities/Ordre phrase.wgt/img/slate-help-white.png
new file mode 100644
index 00000000..7b5ebfd8
Binary files /dev/null and b/resources/library/interactivities/Ordre phrase.wgt/img/slate-help-white.png differ
diff --git a/resources/library/interactivities/Ordre phrase.wgt/img/slate-help.png b/resources/library/interactivities/Ordre phrase.wgt/img/slate-help.png
new file mode 100644
index 00000000..069052d0
Binary files /dev/null and b/resources/library/interactivities/Ordre phrase.wgt/img/slate-help.png differ
diff --git a/resources/library/interactivities/Ordre phrase.wgt/index.html b/resources/library/interactivities/Ordre phrase.wgt/index.html
index b360cad9..48305e39 100644
--- a/resources/library/interactivities/Ordre phrase.wgt/index.html	
+++ b/resources/library/interactivities/Ordre phrase.wgt/index.html	
@@ -56,6 +56,7 @@
                 <td class="b_top_left">&nbsp;</td>
                 <td class="b_top_center">
                     <div id="wgt_name"></div>
+                    <div id="wgt_help"></div> 
                     <div id="wgt_reload"></div>                    
                     <div id="wgt_display" class="selected"></div>
                     <div id="wgt_edit"></div>
@@ -67,17 +68,18 @@
                 </td>
                 <td class="b_top_right">&nbsp;</td>
             </tr>
-       
+
             <tr>
                 <td class="b_center_left">&nbsp;</td>
                 <td>
+                    <div id="help"></div>
                     <div id="ub-widget">
-                        
+
                     </div>
                 </td>
                 <td class="b_center_right">&nbsp;</td>
             </tr>     
-        
+
             <tr style="height: 54px;">
                 <td class="b_bottom_left">&nbsp;</td>
                 <td class="b_bottom_center">&nbsp;</td>
diff --git a/resources/library/interactivities/Ordre phrase.wgt/locales/fr/index.html b/resources/library/interactivities/Ordre phrase.wgt/locales/fr/index.html
index 33f1b81b..763aa128 100644
--- a/resources/library/interactivities/Ordre phrase.wgt/locales/fr/index.html	
+++ b/resources/library/interactivities/Ordre phrase.wgt/locales/fr/index.html	
@@ -32,6 +32,7 @@
                 <td class="b_top_left">&nbsp;</td>
                 <td class="b_top_center">
                     <div id="wgt_name"></div>
+                    <div id="wgt_help"></div> 
                     <div id="wgt_reload"></div>                    
                     <div id="wgt_display" class="selected"></div>
                     <div id="wgt_edit"></div>
@@ -47,6 +48,7 @@
             <tr>
                 <td class="b_center_left">&nbsp;</td>
                 <td>
+                    <div id="help"></div>
                     <div id="ub-widget">
 
                     </div>
diff --git a/resources/library/interactivities/Ordre phrase.wgt/locales/fr/script/template2.js b/resources/library/interactivities/Ordre phrase.wgt/locales/fr/script/template2.js
index 2afb7f67..1ef09c29 100644
--- a/resources/library/interactivities/Ordre phrase.wgt/locales/fr/script/template2.js	
+++ b/resources/library/interactivities/Ordre phrase.wgt/locales/fr/script/template2.js	
@@ -33,7 +33,9 @@ var sankoreLang = {
     reload: "Recharger",
     slate: "ardoise",
     pad: "tablette",
-    none: "aucun"
+    none: "aucun",
+    help: "aide",
+    help_content: "Ceci est un exemple de contenu de l'aide ..."
 };
 
 
@@ -71,8 +73,12 @@ $(document).ready(function(){
         $(".style_select").val(sankore.preference("ord_phrases_style",""));
     } else
         changeStyle("3")
+    
     $("#wgt_display").text(sankoreLang.view);
     $("#wgt_edit").text(sankoreLang.edit);
+    $("#wgt_help").text(sankoreLang.help);
+    $("#help").html(sankoreLang.help_content);
+    
     $("#wgt_display, #wgt_edit").click(function(event){
         if(this.id == "wgt_display"){
             if(!$(this).hasClass("selected")){                
@@ -94,8 +100,24 @@ $(document).ready(function(){
             }
         }
     });
+    
     $("#wgt_name").text(sankoreLang.wgt_name);
     
+    $("#wgt_help").click(function(){
+        var tmp = $(this);
+        if($(this).hasClass("open")){
+            $("#help").slideUp("100", function(){
+                tmp.removeClass("open");
+                $("#ub-widget").show();
+            });
+        } else {            
+            $("#ub-widget").hide();
+            $("#help").slideDown("100", function(){
+                tmp.addClass("open");
+            });
+        }
+    });
+    
     $("#wgt_reload").text(sankoreLang.reload).click(function(){
         if(wgtState)
             $("#wgt_display").trigger("click");
@@ -192,6 +214,7 @@ function changeStyle(val){
             $(".b_bottom_left").removeClass("bbl_pad").removeClass("without_back");
             $(".b_bottom_center").removeClass("bbc_pad").removeClass("without_back");
             $("#wgt_reload").removeClass("pad_color").removeClass("pad_reload");
+            $("#wgt_help").removeClass("pad_color").removeClass("pad_help");
             $("#wgt_edit").removeClass("pad_color").removeClass("pad_edit");
             $("#wgt_display").removeClass("pad_color").removeClass("pad_edit");
             $("#wgt_name").removeClass("pad_color");
@@ -208,6 +231,7 @@ function changeStyle(val){
             $(".b_bottom_left").addClass("bbl_pad").removeClass("without_back");
             $(".b_bottom_center").addClass("bbc_pad").removeClass("without_back");
             $("#wgt_reload").addClass("pad_color").addClass("pad_reload");
+            $("#wgt_help").addClass("pad_color").addClass("pad_help");
             $("#wgt_edit").addClass("pad_color").addClass("pad_edit");
             $("#wgt_display").addClass("pad_color").addClass("pad_edit");
             $("#wgt_name").addClass("pad_color");
@@ -223,6 +247,7 @@ function changeStyle(val){
             $(".b_bottom_right").addClass("without_back").removeClass("bbr_pad");
             $(".b_bottom_left").addClass("without_back").removeClass("bbl_pad");
             $(".b_bottom_center").addClass("without_back").removeClass("bbc_pad");
+            $("#wgt_help").addClass("pad_color").addClass("pad_help");
             $("#wgt_reload").addClass("pad_color").addClass("pad_reload");
             $("#wgt_edit").addClass("pad_color").addClass("pad_edit");
             $("#wgt_display").addClass("pad_color").addClass("pad_edit");
diff --git a/resources/library/interactivities/Ordre phrase.wgt/locales/ru/index.html b/resources/library/interactivities/Ordre phrase.wgt/locales/ru/index.html
index 33f1b81b..763aa128 100644
--- a/resources/library/interactivities/Ordre phrase.wgt/locales/ru/index.html	
+++ b/resources/library/interactivities/Ordre phrase.wgt/locales/ru/index.html	
@@ -32,6 +32,7 @@
                 <td class="b_top_left">&nbsp;</td>
                 <td class="b_top_center">
                     <div id="wgt_name"></div>
+                    <div id="wgt_help"></div> 
                     <div id="wgt_reload"></div>                    
                     <div id="wgt_display" class="selected"></div>
                     <div id="wgt_edit"></div>
@@ -47,6 +48,7 @@
             <tr>
                 <td class="b_center_left">&nbsp;</td>
                 <td>
+                    <div id="help"></div>
                     <div id="ub-widget">
 
                     </div>
diff --git a/resources/library/interactivities/Ordre phrase.wgt/locales/ru/script/template2.js b/resources/library/interactivities/Ordre phrase.wgt/locales/ru/script/template2.js
index f5c72ca3..8163d8af 100644
--- a/resources/library/interactivities/Ordre phrase.wgt/locales/ru/script/template2.js	
+++ b/resources/library/interactivities/Ordre phrase.wgt/locales/ru/script/template2.js	
@@ -33,7 +33,9 @@ var sankoreLang = {
     reload: "Обновить",
     slate: "Узор",
     pad: "Планшет",
-    none: "Нет"
+    none: "Нет",
+    help: "Помощь",
+    help_content: "Пример текста помощи ..."
 }
 
 
@@ -71,8 +73,12 @@ $(document).ready(function(){
         $(".style_select").val(sankore.preference("ord_phrases_style",""));
     } else
         changeStyle("3")
+    
     $("#wgt_display").text(sankoreLang.view);
     $("#wgt_edit").text(sankoreLang.edit);
+    $("#wgt_help").text(sankoreLang.help);
+    $("#help").html(sankoreLang.help_content);
+    
     $("#wgt_display, #wgt_edit").click(function(event){
         if(this.id == "wgt_display"){
             if(!$(this).hasClass("selected")){                
@@ -94,8 +100,24 @@ $(document).ready(function(){
             }
         }
     });
+    
     $("#wgt_name").text(sankoreLang.wgt_name);
     
+    $("#wgt_help").click(function(){
+        var tmp = $(this);
+        if($(this).hasClass("open")){
+            $("#help").slideUp("100", function(){
+                tmp.removeClass("open");
+                $("#ub-widget").show();
+            });
+        } else {            
+            $("#ub-widget").hide();
+            $("#help").slideDown("100", function(){
+                tmp.addClass("open");
+            });
+        }
+    });
+    
     $("#wgt_reload").text(sankoreLang.reload).click(function(){
         if(wgtState)
             $("#wgt_display").trigger("click");
@@ -192,6 +214,7 @@ function changeStyle(val){
             $(".b_bottom_left").removeClass("bbl_pad").removeClass("without_back");
             $(".b_bottom_center").removeClass("bbc_pad").removeClass("without_back");
             $("#wgt_reload").removeClass("pad_color").removeClass("pad_reload");
+            $("#wgt_help").removeClass("pad_color").removeClass("pad_help");
             $("#wgt_edit").removeClass("pad_color").removeClass("pad_edit");
             $("#wgt_display").removeClass("pad_color").removeClass("pad_edit");
             $("#wgt_name").removeClass("pad_color");
@@ -208,6 +231,7 @@ function changeStyle(val){
             $(".b_bottom_left").addClass("bbl_pad").removeClass("without_back");
             $(".b_bottom_center").addClass("bbc_pad").removeClass("without_back");
             $("#wgt_reload").addClass("pad_color").addClass("pad_reload");
+            $("#wgt_help").addClass("pad_color").addClass("pad_help");
             $("#wgt_edit").addClass("pad_color").addClass("pad_edit");
             $("#wgt_display").addClass("pad_color").addClass("pad_edit");
             $("#wgt_name").addClass("pad_color");
@@ -223,6 +247,7 @@ function changeStyle(val){
             $(".b_bottom_right").addClass("without_back").removeClass("bbr_pad");
             $(".b_bottom_left").addClass("without_back").removeClass("bbl_pad");
             $(".b_bottom_center").addClass("without_back").removeClass("bbc_pad");
+            $("#wgt_help").addClass("pad_color").addClass("pad_help");
             $("#wgt_reload").addClass("pad_color").addClass("pad_reload");
             $("#wgt_edit").addClass("pad_color").addClass("pad_edit");
             $("#wgt_display").addClass("pad_color").addClass("pad_edit");
diff --git a/resources/library/interactivities/Ordre phrase.wgt/scripts/template2.js b/resources/library/interactivities/Ordre phrase.wgt/scripts/template2.js
index d55f26eb..99241058 100644
--- a/resources/library/interactivities/Ordre phrase.wgt/scripts/template2.js	
+++ b/resources/library/interactivities/Ordre phrase.wgt/scripts/template2.js	
@@ -34,7 +34,9 @@ var sankoreLang = {
     reload: "Reload",
     slate: "Wood",
     pad: "Pad",
-    none: "None"
+    none: "None",
+    help: "Help",
+    help_content: "This is an example of help content ..."
 }
 
 
@@ -73,8 +75,12 @@ $(document).ready(function(){
             $(".style_select").val(sankore.preference("ord_phrases_style",""));
         } else
             changeStyle("3")
+        
     $("#wgt_display").text(sankoreLang.view);
     $("#wgt_edit").text(sankoreLang.edit);
+    $("#wgt_help").text(sankoreLang.help);
+    $("#help").html(sankoreLang.help_content);
+    
     $("#wgt_display, #wgt_edit").click(function(event){
         if(this.id == "wgt_display"){
             if(!$(this).hasClass("selected")){                
@@ -96,8 +102,24 @@ $(document).ready(function(){
             }
         }
     });
+    
     $("#wgt_name").text(sankoreLang.wgt_name);
     
+    $("#wgt_help").click(function(){
+        var tmp = $(this);
+        if($(this).hasClass("open")){
+            $("#help").slideUp("100", function(){
+                tmp.removeClass("open");
+                $("#ub-widget").show();
+            });
+        } else {            
+            $("#ub-widget").hide();
+            $("#help").slideDown("100", function(){
+                tmp.addClass("open");
+            });
+        }
+    });
+    
     $("#wgt_reload").text(sankoreLang.reload).click(function(){
         if(wgtState)
             $("#wgt_display").trigger("click");
@@ -194,6 +216,7 @@ function changeStyle(val){
             $(".b_bottom_left").removeClass("bbl_pad").removeClass("without_back");
             $(".b_bottom_center").removeClass("bbc_pad").removeClass("without_back");
             $("#wgt_reload").removeClass("pad_color").removeClass("pad_reload");
+            $("#wgt_help").removeClass("pad_color").removeClass("pad_help");
             $("#wgt_edit").removeClass("pad_color").removeClass("pad_edit");
             $("#wgt_display").removeClass("pad_color").removeClass("pad_edit");
             $("#wgt_name").removeClass("pad_color");
@@ -210,6 +233,7 @@ function changeStyle(val){
             $(".b_bottom_left").addClass("bbl_pad").removeClass("without_back");
             $(".b_bottom_center").addClass("bbc_pad").removeClass("without_back");
             $("#wgt_reload").addClass("pad_color").addClass("pad_reload");
+            $("#wgt_help").addClass("pad_color").addClass("pad_help");
             $("#wgt_edit").addClass("pad_color").addClass("pad_edit");
             $("#wgt_display").addClass("pad_color").addClass("pad_edit");
             $("#wgt_name").addClass("pad_color");
@@ -225,6 +249,7 @@ function changeStyle(val){
             $(".b_bottom_right").addClass("without_back").removeClass("bbr_pad");
             $(".b_bottom_left").addClass("without_back").removeClass("bbl_pad");
             $(".b_bottom_center").addClass("without_back").removeClass("bbc_pad");
+            $("#wgt_help").addClass("pad_color").addClass("pad_help");
             $("#wgt_reload").addClass("pad_color").addClass("pad_reload");
             $("#wgt_edit").addClass("pad_color").addClass("pad_edit");
             $("#wgt_display").addClass("pad_color").addClass("pad_edit");
diff --git a/resources/library/interactivities/Ordre phrase.wgt/styles/of_puppets.css b/resources/library/interactivities/Ordre phrase.wgt/styles/of_puppets.css
index d99114b6..6589dcef 100644
--- a/resources/library/interactivities/Ordre phrase.wgt/styles/of_puppets.css	
+++ b/resources/library/interactivities/Ordre phrase.wgt/styles/of_puppets.css	
@@ -4,6 +4,7 @@ html, body{
     margin: 0;
     padding: 0;    
     border-radius: 50px;
+    overflow: hidden;
 }
 
 body{
@@ -40,6 +41,13 @@ body{
     background-color: #cfb;
 }
 
+textarea{
+    font: 32px tahoma;
+    letter-spacing: 0.1em;
+    width: 98%;
+    min-height: 200px;
+    resize: vertical;
+}
 
 
 #mp_setup{
@@ -139,7 +147,6 @@ body{
 
 #wgt_name{
     height: 44px;
-    width: 300px;
     margin: 10px 10px 0 10px;
     padding: 0;
     float: left;
@@ -148,9 +155,8 @@ body{
     color: #8c5730;
 }
 
-#wgt_reload, #wgt_edit, #wgt_display{
+#wgt_reload, #wgt_edit, #wgt_display, #wgt_help{
     cursor: pointer;
-    width: 80px;
     height: 44px;
     margin: 10px 10px 0 0;
     float: right;
@@ -160,7 +166,6 @@ body{
 }
 
 #wgt_display{
-    width: 100px;
     padding-left: 40px;
     background-image: url(../img/slate-edit.png);
     background-repeat: no-repeat;
@@ -169,7 +174,6 @@ body{
 }
 
 #wgt_edit{    
-    width: 100px;
     padding-left: 40px;
     background-image: url(../img/slate-edit.png);
     background-repeat: no-repeat;
@@ -261,4 +265,28 @@ body{
     background-color: #333 !important;
     color: white !important;
     background-image: url(../img/ar_down_white.png) !important;
+}
+
+.pad_help{
+    background-image: url(../img/slate-help-white.png) !important;
+}
+
+#wgt_help{
+    padding-left: 32px;
+    background-image: url(../img/slate-help.png);
+    background-repeat: no-repeat;
+    background-position: top 0;
+}
+
+#help{
+    width: 100%;
+    height: 100%;    
+    overflow: auto;
+    display: none;
+    background-color: #ccc;
+    padding: 5px;
+}
+
+.open{
+    
 }
\ No newline at end of file
diff --git a/resources/library/interactivities/Selectionner.wgt/css/basic.css b/resources/library/interactivities/Selectionner.wgt/css/basic.css
index 75e7c3aa..63a3511a 100644
--- a/resources/library/interactivities/Selectionner.wgt/css/basic.css
+++ b/resources/library/interactivities/Selectionner.wgt/css/basic.css
@@ -4,6 +4,7 @@ html, body{
     margin: 0;
     padding: 0;    
     border-radius: 50px;
+    overflow: hidden;
 }
 
 body{
@@ -132,13 +133,13 @@ body{
     border: 1px solid #ccc;
     -moz-box-shadow: #ccc -1px 0 4px;
     -webkit-box-shadow: #ccc -1px 0 4px;
-    box-shadow: #ccc -1px 0 4px;
-    background-color: white;
+    box-shadow: #ccc -1px 0 4px;    
 }
 
 .text_block{    
     display: table;
     text-align: center;
+    background-color: white;
 }
 
 .audio_block{
@@ -317,7 +318,6 @@ body{
 
 #wgt_name{
     height: 44px;
-    width: 200px;
     margin: 10px 10px 0 10px;
     padding: 0;
     float: left;
@@ -326,9 +326,8 @@ body{
     color: #8c5730;
 }
 
-#wgt_reload, #wgt_edit, #wgt_display{
+#wgt_reload, #wgt_edit, #wgt_display, #wgt_help{
     cursor: pointer;
-    width: 80px;
     height: 44px;
     margin: 10px 10px 0 0;
     float: right;
@@ -338,7 +337,6 @@ body{
 }
 
 #wgt_display{
-    width: 100px;
     padding-left: 40px;
     background-image: url(../img/slate-edit.png);
     background-repeat: no-repeat;
@@ -347,7 +345,6 @@ body{
 }
 
 #wgt_edit{    
-    width: 100px;
     padding-left: 40px;
     background-image: url(../img/slate-edit.png);
     background-repeat: no-repeat;
@@ -439,4 +436,28 @@ body{
     background-color: #333 !important;
     color: white !important;
     background-image: url(../img/ar_down_white.png) !important;
+}
+
+.pad_help{
+    background-image: url(../img/slate-help-white.png) !important;
+}
+
+#wgt_help{
+    padding-left: 32px;
+    background-image: url(../img/slate-help.png);
+    background-repeat: no-repeat;
+    background-position: top 0;
+}
+
+#help{
+    width: 100%;
+    height: 100%;    
+    overflow: auto;
+    display: none;
+    background-color: #ccc;
+    padding: 5px;
+}
+
+.open{
+    
 }
\ No newline at end of file
diff --git a/resources/library/interactivities/Selectionner.wgt/img/slate-help-white.png b/resources/library/interactivities/Selectionner.wgt/img/slate-help-white.png
new file mode 100644
index 00000000..7b5ebfd8
Binary files /dev/null and b/resources/library/interactivities/Selectionner.wgt/img/slate-help-white.png differ
diff --git a/resources/library/interactivities/Selectionner.wgt/img/slate-help.png b/resources/library/interactivities/Selectionner.wgt/img/slate-help.png
new file mode 100644
index 00000000..069052d0
Binary files /dev/null and b/resources/library/interactivities/Selectionner.wgt/img/slate-help.png differ
diff --git a/resources/library/interactivities/Selectionner.wgt/index.html b/resources/library/interactivities/Selectionner.wgt/index.html
index 2d064cae..688bb52f 100644
--- a/resources/library/interactivities/Selectionner.wgt/index.html
+++ b/resources/library/interactivities/Selectionner.wgt/index.html
@@ -48,6 +48,7 @@
                 <td class="b_top_left">&nbsp;</td>
                 <td class="b_top_center">
                     <div id="wgt_name"></div>
+                    <div id="wgt_help"></div> 
                     <div id="wgt_reload"></div>                    
                     <div id="wgt_display" class="selected"></div>
                     <div id="wgt_edit"></div>
@@ -63,6 +64,7 @@
             <tr>
                 <td class="b_center_left">&nbsp;</td>
                 <td>
+                    <div id="help"></div>
                     <div id="data">
                         
                     </div>
diff --git a/resources/library/interactivities/Selectionner.wgt/js/script.js b/resources/library/interactivities/Selectionner.wgt/js/script.js
index b8c299fa..f8a5f9a2 100644
--- a/resources/library/interactivities/Selectionner.wgt/js/script.js
+++ b/resources/library/interactivities/Selectionner.wgt/js/script.js
@@ -13,7 +13,9 @@ var sankoreLang = {
     reload: "Reload",
     slate: "Wood",
     pad: "Pad",
-    none: "None"
+    none: "None",
+    help: "Help",
+    help_content: "This is an example of help content ..."
 };
 
 //main function
@@ -23,6 +25,8 @@ function start(){
     $("#wgt_edit").text(sankoreLang.edit);
     $("#wgt_name").text(sankoreLang.wgt_name);
     $("#wgt_reload").text(sankoreLang.reload);
+    $("#wgt_help").text(sankoreLang.help);
+    $("#help").html(sankoreLang.help_content);
     $(".style_select option[value='1']").text(sankoreLang.slate);
     $(".style_select option[value='2']").text(sankoreLang.pad);
     $(".style_select option[value='3']").text(sankoreLang.none);
@@ -50,6 +54,21 @@ function start(){
         }
     }
     
+    $("#wgt_help").click(function(){
+        var tmp = $(this);
+        if($(this).hasClass("open")){
+            $("#help").slideUp("100", function(){
+                tmp.removeClass("open");
+                $("#data").show();
+            });
+        } else {            
+            $("#data").hide();
+            $("#help").slideDown("100", function(){
+                tmp.addClass("open");
+            });
+        }
+    });
+    
     $("#wgt_reload").click(function(){
         if($("#wgt_display").hasClass("selected")){
             $(".cont").each(function(){
@@ -252,7 +271,7 @@ function exportData(){
                 tmp_block.src = $(this).find("source").attr("src");
                 tmp_block.hidden = $(this).parent().find("input:hidden").val();
                 tmp_block.type = "audio";
-                tmp_block.checked = $(this).find("input:checkbox").attr("checked");
+                tmp_block.checked = $(this).parent().find("input:checkbox").attr("checked");
             }
             if($(this).hasClass("text_block")){
                 tmp_block.text = $(this).find(".text_subblock").text();
@@ -294,7 +313,10 @@ function importData(data){
                     var img_block = $("<div class='img_block' style='text-align: center;'></div>").insertBefore(imgs_container.find(".clear"));
                     $("<input type='hidden' value='" + data[i].blocks[j].hidden + "'/>").appendTo(img_block); 
                     $("<input type='checkbox' class='ch_box'/>").attr("checked",(data[i].blocks[j].state == "display")?((data[i].blocks[j].checked == "checked")?true:false):false).appendTo(img_block)
-                    $("<img src=\"" + data[i].blocks[j].src + "\" width='" + data[i].blocks[j].w + "' height='" + data[i].blocks[j].h + "' style=\"display: inline;\"/>").appendTo(img_block);
+                    var img = $("<img src=\"" + data[i].blocks[j].src + "\" style=\"display: inline;\"/>").appendTo(img_block);
+                    img.height(data[i].blocks[j].h);
+                    if((120 - data[i].blocks[j].h) > 0)
+                        img.css("margin",(120 - data[i].blocks[j].h)/2 + "px 0");
                     break;
                 case "audio":
                     var img_tmp = $("<div class='img_block'>").insertBefore(imgs_container.find(".clear"));
@@ -422,6 +444,7 @@ function changeStyle(val){
             $(".b_bottom_left").removeClass("bbl_pad").removeClass("without_back");
             $(".b_bottom_center").removeClass("bbc_pad").removeClass("without_back");
             $("#wgt_reload").removeClass("pad_color").removeClass("pad_reload");
+            $("#wgt_help").removeClass("pad_color").removeClass("pad_help");
             $("#wgt_edit").removeClass("pad_color").removeClass("pad_edit");
             $("#wgt_display").removeClass("pad_color").removeClass("pad_edit");
             $("#wgt_name").removeClass("pad_color");
@@ -438,6 +461,7 @@ function changeStyle(val){
             $(".b_bottom_left").addClass("bbl_pad").removeClass("without_back");
             $(".b_bottom_center").addClass("bbc_pad").removeClass("without_back");
             $("#wgt_reload").addClass("pad_color").addClass("pad_reload");
+            $("#wgt_help").addClass("pad_color").addClass("pad_help");
             $("#wgt_edit").addClass("pad_color").addClass("pad_edit");
             $("#wgt_display").addClass("pad_color").addClass("pad_edit");
             $("#wgt_name").addClass("pad_color");
@@ -453,6 +477,7 @@ function changeStyle(val){
             $(".b_bottom_right").addClass("without_back").removeClass("bbr_pad");
             $(".b_bottom_left").addClass("without_back").removeClass("bbl_pad");
             $(".b_bottom_center").addClass("without_back").removeClass("bbc_pad");
+            $("#wgt_help").addClass("pad_color").addClass("pad_help");
             $("#wgt_reload").addClass("pad_color").addClass("pad_reload");
             $("#wgt_edit").addClass("pad_color").addClass("pad_edit");
             $("#wgt_display").addClass("pad_color").addClass("pad_edit");
@@ -495,6 +520,8 @@ function onDropTarget(obj, event) {
                     tmp_img.attr("height", "120");
                 else{
                     tmp_img.attr("width","120");
+                    var h = tmp_img.height();
+                    tmp_img.attr("height",h);
                     tmp_img.css("margin",(120 - tmp_img.height())/2 + "px 0");
                 }
             }, 6);
diff --git a/resources/library/interactivities/Selectionner.wgt/locales/fr/index.html b/resources/library/interactivities/Selectionner.wgt/locales/fr/index.html
index ce540ec1..218567a2 100644
--- a/resources/library/interactivities/Selectionner.wgt/locales/fr/index.html
+++ b/resources/library/interactivities/Selectionner.wgt/locales/fr/index.html
@@ -22,6 +22,7 @@
                 <td class="b_top_left">&nbsp;</td>
                 <td class="b_top_center">
                     <div id="wgt_name"></div>
+                    <div id="wgt_help"></div> 
                     <div id="wgt_reload"></div>                    
                     <div id="wgt_display" class="selected"></div>
                     <div id="wgt_edit"></div>
@@ -37,6 +38,7 @@
             <tr>
                 <td class="b_center_left">&nbsp;</td>
                 <td>
+                    <div id="help"></div>
                     <div id="data">
                         
                     </div>
diff --git a/resources/library/interactivities/Selectionner.wgt/locales/fr/js/script.js b/resources/library/interactivities/Selectionner.wgt/locales/fr/js/script.js
index b798bdfb..465f601e 100644
--- a/resources/library/interactivities/Selectionner.wgt/locales/fr/js/script.js
+++ b/resources/library/interactivities/Selectionner.wgt/locales/fr/js/script.js
@@ -13,7 +13,9 @@ var sankoreLang = {
     reload: "Recharger",
     slate: "ardoise",
     pad: "tablette",
-    none: "aucun"
+    none: "aucun",
+    help: "aide",
+    help_content: "Ceci est un exemple de contenu de l'aide ..."
 };
 
 //main function
@@ -23,6 +25,8 @@ function start(){
     $("#wgt_edit").text(sankoreLang.edit);
     $("#wgt_name").text(sankoreLang.wgt_name);
     $("#wgt_reload").text(sankoreLang.reload);
+    $("#wgt_help").text(sankoreLang.help);
+    $("#help").html(sankoreLang.help_content);
     $(".style_select option[value='1']").text(sankoreLang.slate);
     $(".style_select option[value='2']").text(sankoreLang.pad);
     $(".style_select option[value='3']").text(sankoreLang.none);
@@ -50,8 +54,33 @@ function start(){
         }
     }
     
+    $("#wgt_help").click(function(){
+        var tmp = $(this);
+        if($(this).hasClass("open")){
+            $("#help").slideUp("100", function(){
+                tmp.removeClass("open");
+                $("#data").show();
+            });
+        } else {            
+            $("#data").hide();
+            $("#help").slideDown("100", function(){
+                tmp.addClass("open");
+            });
+        }
+    });
+    
     $("#wgt_reload").click(function(){
-        window.location.reload();
+        if($("#wgt_display").hasClass("selected")){
+            $(".cont").each(function(){
+                var container = $(this);
+                container.find(".img_block, .text_block").each(function(){
+                    $(this).find("input:checkbox").removeAttr("checked");
+                    $(this).find("input:checkbox").parent().parent().removeClass("right");
+                });          
+            });
+        }
+        else
+            $("#wgt_display").trigger("click");
     });
     
     $(".style_select").change(function (event){
@@ -149,31 +178,31 @@ function start(){
             if($(this).is(":checked"))
                 $(this).parent().find("input:hidden").val(1);
             else
-                $(this).parent().find("input:hidden").val(0);
-        }
-    });
+            $(this).parent().find("input:hidden").val(0);
+            }
+            });
     
-    //play/pause event
-    $(".play, .stop").live("click", function(){
-        var tmp_audio = $(this);
-        var audio = tmp_audio.parent().find("audio").get(0);
-        if($(this).hasClass("play")){            
+        //play/pause event
+        $(".play, .stop").live("click", function(){
+            var tmp_audio = $(this);
+            var audio = tmp_audio.parent().find("audio").get(0);
+            if($(this).hasClass("play")){            
             if(tmp_audio.parent().find("source").attr("src")){
-                tmp_audio.removeClass("play").addClass("stop");
-                var id = setInterval(function(){
-                    if(audio.currentTime == audio.duration){
-                        clearInterval(id);
-                        tmp_audio.removeClass("stop").addClass("play");
-                    }
+            tmp_audio.removeClass("play").addClass("stop");
+            var id = setInterval(function(){
+                if(audio.currentTime == audio.duration){
+                clearInterval(id);
+                tmp_audio.removeClass("stop").addClass("play");
+                }
                 }, 10);
-                tmp_audio.parent().find("input").val(id);
-                audio.play();
+            tmp_audio.parent().find("input").val(id);
+            audio.play();
             }
-        } else {
-            $(this).removeClass("stop").addClass("play");
-            clearInterval( tmp_audio.parent().find("input").val())
-            audio.pause();
-        }
+            } else {
+        $(this).removeClass("stop").addClass("play");
+        clearInterval( tmp_audio.parent().find("input").val())
+        audio.pause();
+    }
     });
     
     $(".replay").live("click", function(){
@@ -240,7 +269,7 @@ function exportData(){
                 tmp_block.src = $(this).find("source").attr("src").replace("../../","");
                 tmp_block.hidden = $(this).parent().find("input:hidden").val();
                 tmp_block.type = "audio";
-                tmp_block.checked = $(this).find("input:checkbox").attr("checked");
+                tmp_block.checked = $(this).parent().find("input:checkbox").attr("checked");
             }
             if($(this).hasClass("text_block")){
                 tmp_block.text = $(this).find(".text_subblock").text();
@@ -282,7 +311,10 @@ function importData(data){
                     var img_block = $("<div class='img_block' style='text-align: center;'></div>").insertBefore(imgs_container.find(".clear"));
                     $("<input type='hidden' value='" + data[i].blocks[j].hidden + "'/>").appendTo(img_block); 
                     $("<input type='checkbox' class='ch_box'/>").attr("checked",(data[i].blocks[j].state == "display")?((data[i].blocks[j].checked == "checked")?true:false):false).appendTo(img_block)
-                    $("<img src=\"../../" + data[i].blocks[j].src + "\" width='" + data[i].blocks[j].w + "' height='" + data[i].blocks[j].h + "' style=\"display: inline;\"/>").appendTo(img_block);
+                    var img = $("<img src=\"../../" + data[i].blocks[j].src + "\" style=\"display: inline;\"/>").appendTo(img_block);
+                    img.height(data[i].blocks[j].h);
+                    if((120 - data[i].blocks[j].h) > 0)
+                        img.css("margin",(120 - data[i].blocks[j].h)/2 + "px 0");
                     break;
                 case "audio":
                     var img_tmp = $("<div class='img_block'>").insertBefore(imgs_container.find(".clear"));
@@ -411,6 +443,7 @@ function changeStyle(val){
             $(".b_bottom_left").removeClass("bbl_pad").removeClass("without_back");
             $(".b_bottom_center").removeClass("bbc_pad").removeClass("without_back");
             $("#wgt_reload").removeClass("pad_color").removeClass("pad_reload");
+            $("#wgt_help").removeClass("pad_color").removeClass("pad_help");
             $("#wgt_edit").removeClass("pad_color").removeClass("pad_edit");
             $("#wgt_display").removeClass("pad_color").removeClass("pad_edit");
             $("#wgt_name").removeClass("pad_color");
@@ -427,6 +460,7 @@ function changeStyle(val){
             $(".b_bottom_left").addClass("bbl_pad").removeClass("without_back");
             $(".b_bottom_center").addClass("bbc_pad").removeClass("without_back");
             $("#wgt_reload").addClass("pad_color").addClass("pad_reload");
+            $("#wgt_help").addClass("pad_color").addClass("pad_help");
             $("#wgt_edit").addClass("pad_color").addClass("pad_edit");
             $("#wgt_display").addClass("pad_color").addClass("pad_edit");
             $("#wgt_name").addClass("pad_color");
@@ -442,6 +476,7 @@ function changeStyle(val){
             $(".b_bottom_right").addClass("without_back").removeClass("bbr_pad");
             $(".b_bottom_left").addClass("without_back").removeClass("bbl_pad");
             $(".b_bottom_center").addClass("without_back").removeClass("bbc_pad");
+            $("#wgt_help").addClass("pad_color").addClass("pad_help");
             $("#wgt_reload").addClass("pad_color").addClass("pad_reload");
             $("#wgt_edit").addClass("pad_color").addClass("pad_edit");
             $("#wgt_display").addClass("pad_color").addClass("pad_edit");
@@ -484,6 +519,8 @@ function onDropTarget(obj, event) {
                     tmp_img.attr("height", "120");
                 else{
                     tmp_img.attr("width","120");
+                    var h = tmp_img.height();
+                    tmp_img.attr("height",h);
                     tmp_img.css("margin",(120 - tmp_img.height())/2 + "px 0");
                 }
             }, 6);
diff --git a/resources/library/interactivities/Selectionner.wgt/locales/ru/index.html b/resources/library/interactivities/Selectionner.wgt/locales/ru/index.html
index 6c4d34f9..1e415855 100644
--- a/resources/library/interactivities/Selectionner.wgt/locales/ru/index.html
+++ b/resources/library/interactivities/Selectionner.wgt/locales/ru/index.html
@@ -22,6 +22,7 @@
                 <td class="b_top_left">&nbsp;</td>
                 <td class="b_top_center">
                     <div id="wgt_name"></div>
+                    <div id="wgt_help"></div> 
                     <div id="wgt_reload"></div>                    
                     <div id="wgt_display" class="selected"></div>
                     <div id="wgt_edit"></div>
@@ -37,6 +38,7 @@
             <tr>
                 <td class="b_center_left">&nbsp;</td>
                 <td>
+                    <div id="help"></div>
                     <div id="data">
                         
                     </div>
diff --git a/resources/library/interactivities/Selectionner.wgt/locales/ru/js/script.js b/resources/library/interactivities/Selectionner.wgt/locales/ru/js/script.js
index 33e5c16c..872e57bf 100644
--- a/resources/library/interactivities/Selectionner.wgt/locales/ru/js/script.js
+++ b/resources/library/interactivities/Selectionner.wgt/locales/ru/js/script.js
@@ -13,7 +13,9 @@ var sankoreLang = {
     reload: "Обновить",
     slate: "Узор",
     pad: "Планшет",
-    none: "Нет"
+    none: "Нет",
+    help: "Помощь",
+    help_content: "Пример текста помощи ..."
 };
 
 //main function
@@ -23,6 +25,8 @@ function start(){
     $("#wgt_edit").text(sankoreLang.edit);
     $("#wgt_name").text(sankoreLang.wgt_name);
     $("#wgt_reload").text(sankoreLang.reload);
+    $("#wgt_help").text(sankoreLang.help);
+    $("#help").html(sankoreLang.help_content);
     $(".style_select option[value='1']").text(sankoreLang.slate);
     $(".style_select option[value='2']").text(sankoreLang.pad);
     $(".style_select option[value='3']").text(sankoreLang.none);
@@ -50,8 +54,33 @@ function start(){
         }
     }
     
+    $("#wgt_help").click(function(){
+        var tmp = $(this);
+        if($(this).hasClass("open")){
+            $("#help").slideUp("100", function(){
+                tmp.removeClass("open");
+                $("#data").show();
+            });
+        } else {            
+            $("#data").hide();
+            $("#help").slideDown("100", function(){
+                tmp.addClass("open");
+            });
+        }
+    });
+    
     $("#wgt_reload").click(function(){
-        window.location.reload();
+        if($("#wgt_display").hasClass("selected")){
+            $(".cont").each(function(){
+                var container = $(this);
+                container.find(".img_block, .text_block").each(function(){
+                    $(this).find("input:checkbox").removeAttr("checked");
+                    $(this).find("input:checkbox").parent().parent().removeClass("right");
+                });          
+            });
+        }
+        else
+            $("#wgt_display").trigger("click");
     });
     
     $(".style_select").change(function (event){
@@ -149,31 +178,31 @@ function start(){
             if($(this).is(":checked"))
                 $(this).parent().find("input:hidden").val(1);
             else
-                $(this).parent().find("input:hidden").val(0);
-        }
-    });
+            $(this).parent().find("input:hidden").val(0);
+            }
+            });
     
-    //play/pause event
-    $(".play, .stop").live("click", function(){
-        var tmp_audio = $(this);
-        var audio = tmp_audio.parent().find("audio").get(0);
-        if($(this).hasClass("play")){            
+        //play/pause event
+        $(".play, .stop").live("click", function(){
+            var tmp_audio = $(this);
+            var audio = tmp_audio.parent().find("audio").get(0);
+            if($(this).hasClass("play")){            
             if(tmp_audio.parent().find("source").attr("src")){
-                tmp_audio.removeClass("play").addClass("stop");
-                var id = setInterval(function(){
-                    if(audio.currentTime == audio.duration){
-                        clearInterval(id);
-                        tmp_audio.removeClass("stop").addClass("play");
-                    }
+            tmp_audio.removeClass("play").addClass("stop");
+            var id = setInterval(function(){
+                if(audio.currentTime == audio.duration){
+                clearInterval(id);
+                tmp_audio.removeClass("stop").addClass("play");
+                }
                 }, 10);
-                tmp_audio.parent().find("input").val(id);
-                audio.play();
+            tmp_audio.parent().find("input").val(id);
+            audio.play();
             }
-        } else {
-            $(this).removeClass("stop").addClass("play");
-            clearInterval( tmp_audio.parent().find("input").val())
-            audio.pause();
-        }
+            } else {
+        $(this).removeClass("stop").addClass("play");
+        clearInterval( tmp_audio.parent().find("input").val())
+        audio.pause();
+    }
     });
     
     $(".replay").live("click", function(){
@@ -209,6 +238,8 @@ function start(){
     $(".close_img").live("click", function(){
         $(this).parent().remove();
     });
+
+    
 }
 
 //export
@@ -238,7 +269,7 @@ function exportData(){
                 tmp_block.src = $(this).find("source").attr("src").replace("../../","");
                 tmp_block.hidden = $(this).parent().find("input:hidden").val();
                 tmp_block.type = "audio";
-                tmp_block.checked = $(this).find("input:checkbox").attr("checked");
+                tmp_block.checked = $(this).parent().find("input:checkbox").attr("checked");
             }
             if($(this).hasClass("text_block")){
                 tmp_block.text = $(this).find(".text_subblock").text();
@@ -280,7 +311,10 @@ function importData(data){
                     var img_block = $("<div class='img_block' style='text-align: center;'></div>").insertBefore(imgs_container.find(".clear"));
                     $("<input type='hidden' value='" + data[i].blocks[j].hidden + "'/>").appendTo(img_block); 
                     $("<input type='checkbox' class='ch_box'/>").attr("checked",(data[i].blocks[j].state == "display")?((data[i].blocks[j].checked == "checked")?true:false):false).appendTo(img_block)
-                    $("<img src=\"../../" + data[i].blocks[j].src + "\" width='" + data[i].blocks[j].w + "' height='" + data[i].blocks[j].h + "' style=\"display: inline;\"/>").appendTo(img_block);
+                    var img = $("<img src=\"../../" + data[i].blocks[j].src + "\" style=\"display: inline;\"/>").appendTo(img_block);
+                    img.height(data[i].blocks[j].h);
+                    if((120 - data[i].blocks[j].h) > 0)
+                        img.css("margin",(120 - data[i].blocks[j].h)/2 + "px 0");
                     break;
                 case "audio":
                     var img_tmp = $("<div class='img_block'>").insertBefore(imgs_container.find(".clear"));
@@ -409,6 +443,7 @@ function changeStyle(val){
             $(".b_bottom_left").removeClass("bbl_pad").removeClass("without_back");
             $(".b_bottom_center").removeClass("bbc_pad").removeClass("without_back");
             $("#wgt_reload").removeClass("pad_color").removeClass("pad_reload");
+            $("#wgt_help").removeClass("pad_color").removeClass("pad_help");
             $("#wgt_edit").removeClass("pad_color").removeClass("pad_edit");
             $("#wgt_display").removeClass("pad_color").removeClass("pad_edit");
             $("#wgt_name").removeClass("pad_color");
@@ -425,6 +460,7 @@ function changeStyle(val){
             $(".b_bottom_left").addClass("bbl_pad").removeClass("without_back");
             $(".b_bottom_center").addClass("bbc_pad").removeClass("without_back");
             $("#wgt_reload").addClass("pad_color").addClass("pad_reload");
+            $("#wgt_help").addClass("pad_color").addClass("pad_help");
             $("#wgt_edit").addClass("pad_color").addClass("pad_edit");
             $("#wgt_display").addClass("pad_color").addClass("pad_edit");
             $("#wgt_name").addClass("pad_color");
@@ -440,6 +476,7 @@ function changeStyle(val){
             $(".b_bottom_right").addClass("without_back").removeClass("bbr_pad");
             $(".b_bottom_left").addClass("without_back").removeClass("bbl_pad");
             $(".b_bottom_center").addClass("without_back").removeClass("bbc_pad");
+            $("#wgt_help").addClass("pad_color").addClass("pad_help");
             $("#wgt_reload").addClass("pad_color").addClass("pad_reload");
             $("#wgt_edit").addClass("pad_color").addClass("pad_edit");
             $("#wgt_display").addClass("pad_color").addClass("pad_edit");
@@ -482,6 +519,8 @@ function onDropTarget(obj, event) {
                     tmp_img.attr("height", "120");
                 else{
                     tmp_img.attr("width","120");
+                    var h = tmp_img.height();
+                    tmp_img.attr("height",h);
                     tmp_img.css("margin",(120 - tmp_img.height())/2 + "px 0");
                 }
             }, 6);
diff --git a/resources/library/interactivities/Separe phrase.wgt/img/slate-help-white.png b/resources/library/interactivities/Separe phrase.wgt/img/slate-help-white.png
new file mode 100644
index 00000000..7b5ebfd8
Binary files /dev/null and b/resources/library/interactivities/Separe phrase.wgt/img/slate-help-white.png differ
diff --git a/resources/library/interactivities/Separe phrase.wgt/img/slate-help.png b/resources/library/interactivities/Separe phrase.wgt/img/slate-help.png
new file mode 100644
index 00000000..069052d0
Binary files /dev/null and b/resources/library/interactivities/Separe phrase.wgt/img/slate-help.png differ
diff --git a/resources/library/interactivities/Separe phrase.wgt/index.html b/resources/library/interactivities/Separe phrase.wgt/index.html
index 02e74da7..e108a1c9 100644
--- a/resources/library/interactivities/Separe phrase.wgt/index.html	
+++ b/resources/library/interactivities/Separe phrase.wgt/index.html	
@@ -27,7 +27,6 @@
                     lang = sankore.locale().substr(0,2);    
                 } else 
                     lang = "en";
-                lang = "fr";
                 if(lang != "en"){
                     returnStatus(lang);
                 }
@@ -55,6 +54,7 @@
                 <td class="b_top_left">&nbsp;</td>
                 <td class="b_top_center">
                     <div id="wgt_name"></div>
+                    <div id="wgt_help"></div> 
                     <div id="wgt_reload"></div>                    
                     <div id="wgt_display" class="selected"></div>
                     <div id="wgt_edit"></div>
@@ -66,17 +66,18 @@
                 </td>
                 <td class="b_top_right">&nbsp;</td>
             </tr>
-       
+
             <tr>
                 <td class="b_center_left">&nbsp;</td>
                 <td>
+                    <div id="help"></div>
                     <div id="ub-widget">
-                        
+
                     </div>
                 </td>
                 <td class="b_center_right">&nbsp;</td>
             </tr>     
-        
+
             <tr style="height: 54px;">
                 <td class="b_bottom_left">&nbsp;</td>
                 <td class="b_bottom_center">&nbsp;</td>
diff --git a/resources/library/interactivities/Separe phrase.wgt/locales/fr/index.html b/resources/library/interactivities/Separe phrase.wgt/locales/fr/index.html
index 32486fa5..593e885a 100644
--- a/resources/library/interactivities/Separe phrase.wgt/locales/fr/index.html	
+++ b/resources/library/interactivities/Separe phrase.wgt/locales/fr/index.html	
@@ -32,6 +32,7 @@
                 <td class="b_top_left">&nbsp;</td>
                 <td class="b_top_center">
                     <div id="wgt_name"></div>
+                    <div id="wgt_help"></div> 
                     <div id="wgt_reload"></div>                    
                     <div id="wgt_display" class="selected"></div>
                     <div id="wgt_edit"></div>
@@ -43,17 +44,18 @@
                 </td>
                 <td class="b_top_right">&nbsp;</td>
             </tr>
-       
+
             <tr>
                 <td class="b_center_left">&nbsp;</td>
                 <td>
+                    <div id="help"></div>
                     <div id="ub-widget">
-                        
+
                     </div>
                 </td>
                 <td class="b_center_right">&nbsp;</td>
             </tr>     
-        
+
             <tr style="height: 54px;">
                 <td class="b_bottom_left">&nbsp;</td>
                 <td class="b_bottom_center">&nbsp;</td>
diff --git a/resources/library/interactivities/Separe phrase.wgt/locales/fr/scripts/wcontainer.js b/resources/library/interactivities/Separe phrase.wgt/locales/fr/scripts/wcontainer.js
index 1c7f9eb3..3bab5e58 100644
--- a/resources/library/interactivities/Separe phrase.wgt/locales/fr/scripts/wcontainer.js	
+++ b/resources/library/interactivities/Separe phrase.wgt/locales/fr/scripts/wcontainer.js	
@@ -6,7 +6,9 @@ var sankoreLang = {
     reload: "Recharger",
     slate: "ardoise",
     pad: "tablette",
-    none: "aucun"
+    none: "aucun",
+    help: "aide",
+    help_content: "Ceci est un exemple de contenu de l'aide ..."
 };
 
 // if use the "view/edit" button or rely on the api instead
diff --git a/resources/library/interactivities/Separe phrase.wgt/locales/ru/index.html b/resources/library/interactivities/Separe phrase.wgt/locales/ru/index.html
index f584fd83..61039d1a 100644
--- a/resources/library/interactivities/Separe phrase.wgt/locales/ru/index.html	
+++ b/resources/library/interactivities/Separe phrase.wgt/locales/ru/index.html	
@@ -33,6 +33,7 @@
                 <td class="b_top_left">&nbsp;</td>
                 <td class="b_top_center">
                     <div id="wgt_name"></div>
+                    <div id="wgt_help"></div> 
                     <div id="wgt_reload"></div>                    
                     <div id="wgt_display" class="selected"></div>
                     <div id="wgt_edit"></div>
@@ -44,17 +45,18 @@
                 </td>
                 <td class="b_top_right">&nbsp;</td>
             </tr>
-       
+
             <tr>
                 <td class="b_center_left">&nbsp;</td>
                 <td>
+                    <div id="help"></div>
                     <div id="ub-widget">
-                        
+
                     </div>
                 </td>
                 <td class="b_center_right">&nbsp;</td>
             </tr>     
-        
+
             <tr style="height: 54px;">
                 <td class="b_bottom_left">&nbsp;</td>
                 <td class="b_bottom_center">&nbsp;</td>
diff --git a/resources/library/interactivities/Separe phrase.wgt/locales/ru/scripts/wcontainer.js b/resources/library/interactivities/Separe phrase.wgt/locales/ru/scripts/wcontainer.js
index 880ccd69..d73ca911 100644
--- a/resources/library/interactivities/Separe phrase.wgt/locales/ru/scripts/wcontainer.js	
+++ b/resources/library/interactivities/Separe phrase.wgt/locales/ru/scripts/wcontainer.js	
@@ -6,7 +6,9 @@ var sankoreLang = {
     reload: "Обновить",
     slate: "Узор",
     pad: "Планшет",
-    none: "Нет"
+    none: "Нет",
+    help: "Помощь",
+    help_content: "Пример текста помощи ..."
 };
 
 // if use the "view/edit" button or rely on the api instead
diff --git a/resources/library/interactivities/Separe phrase.wgt/scripts/app.js b/resources/library/interactivities/Separe phrase.wgt/scripts/app.js
index b574bb2f..693e63c4 100644
--- a/resources/library/interactivities/Separe phrase.wgt/scripts/app.js	
+++ b/resources/library/interactivities/Separe phrase.wgt/scripts/app.js	
@@ -45,7 +45,7 @@ $(document).ready(function()
         }
     }
     
-    if(sankore.preference("spl_phrase_style","")){
+    if(window.sankore && sankore.preference("spl_phrase_style","")){
         changeStyle(sankore.preference("spl_phrase_style",""));
         $(".style_select").val(sankore.preference("spl_phrase_style",""));
     } else
@@ -53,6 +53,9 @@ $(document).ready(function()
     
     $("#wgt_display").text(sankoreLang.view);
     $("#wgt_edit").text(sankoreLang.edit);
+    $("#wgt_help").text(sankoreLang.help);
+    $("#help").html(sankoreLang.help_content);
+    
     $("#wgt_display, #wgt_edit").click(function(event){
         if(this.id == "wgt_display"){
             if(!$(this).hasClass("selected")){                
@@ -74,8 +77,24 @@ $(document).ready(function()
             }
         }
     });
+    
     $("#wgt_name").text(sankoreLang.wgt_name);
     
+    $("#wgt_help").click(function(){
+        var tmp = $(this);
+        if($(this).hasClass("open")){
+            $("#help").slideUp("100", function(){
+                tmp.removeClass("open");
+                $("#ub-widget").show();
+            });
+        } else {            
+            $("#ub-widget").hide();
+            $("#help").slideDown("100", function(){
+                tmp.addClass("open");
+            });
+        }
+    });
+    
     $("#wgt_reload").text(sankoreLang.reload).click(function(){
         if($("#wgt_display").hasClass("selected")){
             $("#wgt_edit").trigger("click");
@@ -118,7 +137,7 @@ $(document).ready(function()
         phrase = phrase.replace( / /g, '' );
 		
         // create the html
-        if(sankore.preference("ordSplPhrasesState", "") == "1" && flag){
+        if(window.sankore && sankore.preference("ordSplPhrasesState", "") == "1" && flag){
             $("#mp_view").html(sankore.preference("ordSplPhrasesCode", ""));
             if(sankore.preference("ordSplPhrasesAnswer", ""))
                 $("#mp_view").addClass(sankore.preference("ordSplPhrasesAnswer", ""));
@@ -244,56 +263,59 @@ $(document).ready(function()
     
     //changing the style
     function changeStyle(val){
-        switch(val){
-            case "1":
-                $(".b_top_left").removeClass("btl_pad").removeClass("without_back");
-                $(".b_top_center").removeClass("btc_pad").removeClass("without_back");
-                $(".b_top_right").removeClass("btr_pad").removeClass("without_back");
-                $(".b_center_left").removeClass("bcl_pad").removeClass("without_back");
-                $(".b_center_right").removeClass("bcr_pad").removeClass("without_back");
-                $(".b_bottom_right").removeClass("bbr_pad").removeClass("without_back");
-                $(".b_bottom_left").removeClass("bbl_pad").removeClass("without_back");
-                $(".b_bottom_center").removeClass("bbc_pad").removeClass("without_back");
-                $("#wgt_reload").removeClass("pad_color").removeClass("pad_reload");
-                $("#wgt_edit").removeClass("pad_color").removeClass("pad_edit");
-                $("#wgt_display").removeClass("pad_color").removeClass("pad_edit");
-                $("#wgt_name").removeClass("pad_color");
-                $(".style_select").removeClass("pad_select").removeClass("none_select").val(val);
-                $("body, html").removeClass("without_radius");
-                break;
-            case "2":
-                $(".b_top_left").addClass("btl_pad").removeClass("without_back");
-                $(".b_top_center").addClass("btc_pad").removeClass("without_back");
-                $(".b_top_right").addClass("btr_pad").removeClass("without_back");
-                $(".b_center_left").addClass("bcl_pad").removeClass("without_back");
-                $(".b_center_right").addClass("bcr_pad").removeClass("without_back");
-                $(".b_bottom_right").addClass("bbr_pad").removeClass("without_back");
-                $(".b_bottom_left").addClass("bbl_pad").removeClass("without_back");
-                $(".b_bottom_center").addClass("bbc_pad").removeClass("without_back");
-                $("#wgt_reload").addClass("pad_color").addClass("pad_reload");
-                $("#wgt_edit").addClass("pad_color").addClass("pad_edit");
-                $("#wgt_display").addClass("pad_color").addClass("pad_edit");
-                $("#wgt_name").addClass("pad_color");
-                $(".style_select").addClass("pad_select").removeClass("none_select").val(val);
-                $("body, html").removeClass("without_radius");
-                break;
-            case "3":
-                $(".b_top_left").addClass("without_back").removeClass("btl_pad");
-                $(".b_top_center").addClass("without_back").removeClass("btc_pad");
-                $(".b_top_right").addClass("without_back").removeClass("btr_pad");
-                $(".b_center_left").addClass("without_back").removeClass("bcl_pad");
-                $(".b_center_right").addClass("without_back").removeClass("bcr_pad");
-                $(".b_bottom_right").addClass("without_back").removeClass("bbr_pad");
-                $(".b_bottom_left").addClass("without_back").removeClass("bbl_pad");
-                $(".b_bottom_center").addClass("without_back").removeClass("bbc_pad");
-                $("#wgt_reload").addClass("pad_color").addClass("pad_reload");
-                $("#wgt_edit").addClass("pad_color").addClass("pad_edit");
-                $("#wgt_display").addClass("pad_color").addClass("pad_edit");
-                $("#wgt_name").addClass("pad_color");
-                $(".style_select").addClass("none_select").val(val);
-                $("body, html").addClass("without_radius");
-                break;
-        }
+    switch(val){
+        case "1":
+            $(".b_top_left").removeClass("btl_pad").removeClass("without_back");
+            $(".b_top_center").removeClass("btc_pad").removeClass("without_back");
+            $(".b_top_right").removeClass("btr_pad").removeClass("without_back");
+            $(".b_center_left").removeClass("bcl_pad").removeClass("without_back");
+            $(".b_center_right").removeClass("bcr_pad").removeClass("without_back");
+            $(".b_bottom_right").removeClass("bbr_pad").removeClass("without_back");
+            $(".b_bottom_left").removeClass("bbl_pad").removeClass("without_back");
+            $(".b_bottom_center").removeClass("bbc_pad").removeClass("without_back");
+            $("#wgt_reload").removeClass("pad_color").removeClass("pad_reload");
+            $("#wgt_help").removeClass("pad_color").removeClass("pad_help");
+            $("#wgt_edit").removeClass("pad_color").removeClass("pad_edit");
+            $("#wgt_display").removeClass("pad_color").removeClass("pad_edit");
+            $("#wgt_name").removeClass("pad_color");
+            $(".style_select").removeClass("pad_select").removeClass("none_select").val(val);
+            $("body, html").removeClass("without_radius");
+            break;
+        case "2":
+            $(".b_top_left").addClass("btl_pad").removeClass("without_back");
+            $(".b_top_center").addClass("btc_pad").removeClass("without_back");
+            $(".b_top_right").addClass("btr_pad").removeClass("without_back");
+            $(".b_center_left").addClass("bcl_pad").removeClass("without_back");
+            $(".b_center_right").addClass("bcr_pad").removeClass("without_back");
+            $(".b_bottom_right").addClass("bbr_pad").removeClass("without_back");
+            $(".b_bottom_left").addClass("bbl_pad").removeClass("without_back");
+            $(".b_bottom_center").addClass("bbc_pad").removeClass("without_back");
+            $("#wgt_reload").addClass("pad_color").addClass("pad_reload");
+            $("#wgt_help").addClass("pad_color").addClass("pad_help");
+            $("#wgt_edit").addClass("pad_color").addClass("pad_edit");
+            $("#wgt_display").addClass("pad_color").addClass("pad_edit");
+            $("#wgt_name").addClass("pad_color");
+            $(".style_select").addClass("pad_select").removeClass("none_select").val(val);
+            $("body, html").removeClass("without_radius");
+            break;
+        case "3":
+            $(".b_top_left").addClass("without_back").removeClass("btl_pad");
+            $(".b_top_center").addClass("without_back").removeClass("btc_pad");
+            $(".b_top_right").addClass("without_back").removeClass("btr_pad");
+            $(".b_center_left").addClass("without_back").removeClass("bcl_pad");
+            $(".b_center_right").addClass("without_back").removeClass("bcr_pad");
+            $(".b_bottom_right").addClass("without_back").removeClass("bbr_pad");
+            $(".b_bottom_left").addClass("without_back").removeClass("bbl_pad");
+            $(".b_bottom_center").addClass("without_back").removeClass("bbc_pad");
+            $("#wgt_help").addClass("pad_color").addClass("pad_help");
+            $("#wgt_reload").addClass("pad_color").addClass("pad_reload");
+            $("#wgt_edit").addClass("pad_color").addClass("pad_edit");
+            $("#wgt_display").addClass("pad_color").addClass("pad_edit");
+            $("#wgt_name").addClass("pad_color");
+            $(".style_select").addClass("none_select").val(val);
+            $("body, html").addClass("without_radius");
+            break;
     }
+}
 	
 });
\ No newline at end of file
diff --git a/resources/library/interactivities/Separe phrase.wgt/scripts/wcontainer.js b/resources/library/interactivities/Separe phrase.wgt/scripts/wcontainer.js
index 3e59f8cc..be809815 100644
--- a/resources/library/interactivities/Separe phrase.wgt/scripts/wcontainer.js	
+++ b/resources/library/interactivities/Separe phrase.wgt/scripts/wcontainer.js	
@@ -6,7 +6,9 @@ var sankoreLang = {
     reload: "Reload",
     slate: "Wood",
     pad: "Pad",
-    none: "None"
+    none: "None",
+    help: "Help",
+    help_content: "This is an example of help content ..."
 };
 
 // if use the "view/edit" button or rely on the api instead
diff --git a/resources/library/interactivities/Separe phrase.wgt/styles/app.css b/resources/library/interactivities/Separe phrase.wgt/styles/app.css
index a98aef3d..6db70b17 100644
--- a/resources/library/interactivities/Separe phrase.wgt/styles/app.css	
+++ b/resources/library/interactivities/Separe phrase.wgt/styles/app.css	
@@ -32,12 +32,6 @@
 	display: inline-block;
 }
 
-
-#mp_edit textarea{
-	resize: none;
-	height: 60px;
-}
-
 /*new design*/
 
 .selected{
@@ -112,7 +106,6 @@
 
 #wgt_name{
     height: 44px;
-    width: 300px;
     margin: 10px 10px 0 10px;
     padding: 0;
     float: left;
@@ -121,9 +114,8 @@
     color: #8c5730;
 }
 
-#wgt_reload, #wgt_edit, #wgt_display{
+#wgt_reload, #wgt_edit, #wgt_display, #wgt_help{
     cursor: pointer;
-    width: 80px;
     height: 44px;
     margin: 10px 10px 0 0;
     float: right;
@@ -133,7 +125,6 @@
 }
 
 #wgt_display{
-    width: 100px;
     padding-left: 40px;
     background-image: url(../img/slate-edit.png);
     background-repeat: no-repeat;
@@ -142,7 +133,6 @@
 }
 
 #wgt_edit{    
-    width: 100px;
     padding-left: 40px;
     background-image: url(../img/slate-edit.png);
     background-repeat: no-repeat;
@@ -234,4 +224,28 @@
     background-color: #333 !important;
     color: white !important;
     background-image: url(../img/ar_down_white.png) !important;
+}
+
+.pad_help{
+    background-image: url(../img/slate-help-white.png) !important;
+}
+
+#wgt_help{
+    padding-left: 32px;
+    background-image: url(../img/slate-help.png);
+    background-repeat: no-repeat;
+    background-position: top 0;
+}
+
+#help{
+    width: 100%;
+    height: 100%;    
+    overflow: auto;
+    display: none;
+    background-color: #ccc;
+    padding: 5px;
+}
+
+.open{
+    
 }
\ No newline at end of file
diff --git a/resources/library/interactivities/Separe phrase.wgt/styles/master.css b/resources/library/interactivities/Separe phrase.wgt/styles/master.css
index 73a14af0..62ff205f 100644
--- a/resources/library/interactivities/Separe phrase.wgt/styles/master.css	
+++ b/resources/library/interactivities/Separe phrase.wgt/styles/master.css	
@@ -4,6 +4,7 @@ html, body{
     margin: 0;
     padding: 0;    
     border-radius: 50px;
+    overflow: hidden;
 }
 
 body{
@@ -37,15 +38,14 @@ button{
     width: 80px;
 }
 
-input.percent, textarea.percent{
-    width: 100%;
-    margin: 0px; padding: 0px;
-    border-width: 0px;
+textarea{
+    font: 32px tahoma;
+    letter-spacing: 0.1em;
+    width: 98%;
+    min-height: 160px;
+    resize: vertical;
 }
 
 .inputwrap{
-    border-style: solid;
-    border-width: 1px;
-    border-color: #dbdfe6;
-    border-top-color: #abadb3;
+
 }
\ No newline at end of file
diff --git a/resources/library/interactivities/Separe texte.wgt/img/slate-help-white.png b/resources/library/interactivities/Separe texte.wgt/img/slate-help-white.png
new file mode 100644
index 00000000..7b5ebfd8
Binary files /dev/null and b/resources/library/interactivities/Separe texte.wgt/img/slate-help-white.png differ
diff --git a/resources/library/interactivities/Separe texte.wgt/img/slate-help.png b/resources/library/interactivities/Separe texte.wgt/img/slate-help.png
new file mode 100644
index 00000000..069052d0
Binary files /dev/null and b/resources/library/interactivities/Separe texte.wgt/img/slate-help.png differ
diff --git a/resources/library/interactivities/Separe texte.wgt/index.html b/resources/library/interactivities/Separe texte.wgt/index.html
index 3990e44e..f615b9fe 100644
--- a/resources/library/interactivities/Separe texte.wgt/index.html	
+++ b/resources/library/interactivities/Separe texte.wgt/index.html	
@@ -57,6 +57,7 @@
                 <td class="b_top_left">&nbsp;</td>
                 <td class="b_top_center">
                     <div id="wgt_name"></div>
+                    <div id="wgt_help"></div> 
                     <div id="wgt_reload"></div>                    
                     <div id="wgt_display" class="selected"></div>
                     <div id="wgt_edit"></div>
@@ -68,17 +69,18 @@
                 </td>
                 <td class="b_top_right">&nbsp;</td>
             </tr>
-       
+
             <tr>
                 <td class="b_center_left">&nbsp;</td>
                 <td>
+                    <div id="help"></div>
                     <div id="ub-widget">
-                        
+
                     </div>
                 </td>
                 <td class="b_center_right">&nbsp;</td>
             </tr>     
-        
+
             <tr style="height: 54px;">
                 <td class="b_bottom_left">&nbsp;</td>
                 <td class="b_bottom_center">&nbsp;</td>
diff --git a/resources/library/interactivities/Separe texte.wgt/locales/fr/index.html b/resources/library/interactivities/Separe texte.wgt/locales/fr/index.html
index c6966082..4a728cf8 100644
--- a/resources/library/interactivities/Separe texte.wgt/locales/fr/index.html	
+++ b/resources/library/interactivities/Separe texte.wgt/locales/fr/index.html	
@@ -32,6 +32,7 @@
                 <td class="b_top_left">&nbsp;</td>
                 <td class="b_top_center">
                     <div id="wgt_name"></div>
+                    <div id="wgt_help"></div> 
                     <div id="wgt_reload"></div>                    
                     <div id="wgt_display" class="selected"></div>
                     <div id="wgt_edit"></div>
@@ -43,17 +44,18 @@
                 </td>
                 <td class="b_top_right">&nbsp;</td>
             </tr>
-       
+
             <tr>
                 <td class="b_center_left">&nbsp;</td>
                 <td>
+                    <div id="help"></div>
                     <div id="ub-widget">
-                        
+
                     </div>
                 </td>
                 <td class="b_center_right">&nbsp;</td>
             </tr>     
-        
+
             <tr style="height: 54px;">
                 <td class="b_bottom_left">&nbsp;</td>
                 <td class="b_bottom_center">&nbsp;</td>
diff --git a/resources/library/interactivities/Separe texte.wgt/locales/fr/scripts/wcontainer.js b/resources/library/interactivities/Separe texte.wgt/locales/fr/scripts/wcontainer.js
index 251b9ebd..a89a91de 100644
--- a/resources/library/interactivities/Separe texte.wgt/locales/fr/scripts/wcontainer.js	
+++ b/resources/library/interactivities/Separe texte.wgt/locales/fr/scripts/wcontainer.js	
@@ -6,7 +6,9 @@ var sankoreLang = {
     reload: "Recharger",
     slate: "ardoise",
     pad: "tablette",
-    none: "aucun"
+    none: "aucun",
+    help: "aide",
+    help_content: "Ceci est un exemple de contenu de l'aide ..."
 };
 
 // if use the "view/edit" button or rely on the api instead
diff --git a/resources/library/interactivities/Separe texte.wgt/locales/ru/index.html b/resources/library/interactivities/Separe texte.wgt/locales/ru/index.html
index c6966082..4a728cf8 100644
--- a/resources/library/interactivities/Separe texte.wgt/locales/ru/index.html	
+++ b/resources/library/interactivities/Separe texte.wgt/locales/ru/index.html	
@@ -32,6 +32,7 @@
                 <td class="b_top_left">&nbsp;</td>
                 <td class="b_top_center">
                     <div id="wgt_name"></div>
+                    <div id="wgt_help"></div> 
                     <div id="wgt_reload"></div>                    
                     <div id="wgt_display" class="selected"></div>
                     <div id="wgt_edit"></div>
@@ -43,17 +44,18 @@
                 </td>
                 <td class="b_top_right">&nbsp;</td>
             </tr>
-       
+
             <tr>
                 <td class="b_center_left">&nbsp;</td>
                 <td>
+                    <div id="help"></div>
                     <div id="ub-widget">
-                        
+
                     </div>
                 </td>
                 <td class="b_center_right">&nbsp;</td>
             </tr>     
-        
+
             <tr style="height: 54px;">
                 <td class="b_bottom_left">&nbsp;</td>
                 <td class="b_bottom_center">&nbsp;</td>
diff --git a/resources/library/interactivities/Separe texte.wgt/locales/ru/scripts/wcontainer.js b/resources/library/interactivities/Separe texte.wgt/locales/ru/scripts/wcontainer.js
index 1beee2c7..8fb023d9 100644
--- a/resources/library/interactivities/Separe texte.wgt/locales/ru/scripts/wcontainer.js	
+++ b/resources/library/interactivities/Separe texte.wgt/locales/ru/scripts/wcontainer.js	
@@ -6,7 +6,9 @@ var sankoreLang = {
     reload: "Обновить",
     slate: "Узор",
     pad: "Планшет",
-    none: "Нет"
+    none: "Нет",
+    help: "Помощь",
+    help_content: "Пример текста помощи ..."
 };
 
 // if use the "view/edit" button or rely on the api instead
diff --git a/resources/library/interactivities/Separe texte.wgt/scripts/app2.js b/resources/library/interactivities/Separe texte.wgt/scripts/app2.js
index 7ae34291..a53fa9b5 100644
--- a/resources/library/interactivities/Separe texte.wgt/scripts/app2.js	
+++ b/resources/library/interactivities/Separe texte.wgt/scripts/app2.js	
@@ -54,6 +54,9 @@ $(document).ready(function()
     
     $("#wgt_display").text(sankoreLang.view);
     $("#wgt_edit").text(sankoreLang.edit);
+    $("#wgt_help").text(sankoreLang.help);
+    $("#help").html(sankoreLang.help_content);
+    
     $("#wgt_display, #wgt_edit").click(function(event){
         if(this.id == "wgt_display"){
             if(!$(this).hasClass("selected")){                
@@ -75,8 +78,24 @@ $(document).ready(function()
             }
         }
     });
+    
     $("#wgt_name").text(sankoreLang.wgt_name);
     
+    $("#wgt_help").click(function(){
+        var tmp = $(this);
+        if($(this).hasClass("open")){
+            $("#help").slideUp("100", function(){
+                tmp.removeClass("open");
+                $("#ub-widget").show();
+            });
+        } else {            
+            $("#ub-widget").hide();
+            $("#help").slideDown("100", function(){
+                tmp.addClass("open");
+            });
+        }
+    });
+    
     $("#wgt_reload").text(sankoreLang.reload).click(function(){
         if($("#wgt_display").hasClass("selected")){
             $("#wgt_edit").trigger("click");
@@ -258,6 +277,7 @@ $(document).ready(function()
                 $(".b_bottom_left").removeClass("bbl_pad").removeClass("without_back");
                 $(".b_bottom_center").removeClass("bbc_pad").removeClass("without_back");
                 $("#wgt_reload").removeClass("pad_color").removeClass("pad_reload");
+                $("#wgt_help").removeClass("pad_color").removeClass("pad_help");
                 $("#wgt_edit").removeClass("pad_color").removeClass("pad_edit");
                 $("#wgt_display").removeClass("pad_color").removeClass("pad_edit");
                 $("#wgt_name").removeClass("pad_color");
@@ -274,6 +294,7 @@ $(document).ready(function()
                 $(".b_bottom_left").addClass("bbl_pad").removeClass("without_back");
                 $(".b_bottom_center").addClass("bbc_pad").removeClass("without_back");
                 $("#wgt_reload").addClass("pad_color").addClass("pad_reload");
+                $("#wgt_help").addClass("pad_color").addClass("pad_help");
                 $("#wgt_edit").addClass("pad_color").addClass("pad_edit");
                 $("#wgt_display").addClass("pad_color").addClass("pad_edit");
                 $("#wgt_name").addClass("pad_color");
@@ -289,6 +310,7 @@ $(document).ready(function()
                 $(".b_bottom_right").addClass("without_back").removeClass("bbr_pad");
                 $(".b_bottom_left").addClass("without_back").removeClass("bbl_pad");
                 $(".b_bottom_center").addClass("without_back").removeClass("bbc_pad");
+                $("#wgt_help").addClass("pad_color").addClass("pad_help");
                 $("#wgt_reload").addClass("pad_color").addClass("pad_reload");
                 $("#wgt_edit").addClass("pad_color").addClass("pad_edit");
                 $("#wgt_display").addClass("pad_color").addClass("pad_edit");
diff --git a/resources/library/interactivities/Separe texte.wgt/scripts/wcontainer.js b/resources/library/interactivities/Separe texte.wgt/scripts/wcontainer.js
index a5598ca1..f64ef65c 100644
--- a/resources/library/interactivities/Separe texte.wgt/scripts/wcontainer.js	
+++ b/resources/library/interactivities/Separe texte.wgt/scripts/wcontainer.js	
@@ -6,7 +6,9 @@ var sankoreLang = {
     reload: "Reload",
     slate: "Wood",
     pad: "Pad",
-    none: "None"
+    none: "None",
+    help: "Help",
+    help_content: "This is an example of help content ..."
 };
 
 // if use the "view/edit" button or rely on the api instead
diff --git a/resources/library/interactivities/Separe texte.wgt/styles/app.css b/resources/library/interactivities/Separe texte.wgt/styles/app.css
index cba95823..fb0061ea 100644
--- a/resources/library/interactivities/Separe texte.wgt/styles/app.css	
+++ b/resources/library/interactivities/Separe texte.wgt/styles/app.css	
@@ -33,11 +33,6 @@
 }
 
 
-#mp_edit textarea{
-    resize: none;
-    height: 100px;
-}
-
 /*new design*/
 
 .selected{
@@ -112,7 +107,6 @@
 
 #wgt_name{
     height: 44px;
-    width: 300px;
     margin: 10px 10px 0 10px;
     padding: 0;
     float: left;
@@ -121,9 +115,8 @@
     color: #8c5730;
 }
 
-#wgt_reload, #wgt_edit, #wgt_display{
+#wgt_reload, #wgt_edit, #wgt_display, #wgt_help{
     cursor: pointer;
-    width: 80px;
     height: 44px;
     margin: 10px 10px 0 0;
     float: right;
@@ -133,7 +126,6 @@
 }
 
 #wgt_display{
-    width: 100px;
     padding-left: 40px;
     background-image: url(../img/slate-edit.png);
     background-repeat: no-repeat;
@@ -142,7 +134,6 @@
 }
 
 #wgt_edit{    
-    width: 100px;
     padding-left: 40px;
     background-image: url(../img/slate-edit.png);
     background-repeat: no-repeat;
@@ -234,4 +225,28 @@
     background-color: #333 !important;
     color: white !important;
     background-image: url(../img/ar_down_white.png) !important;
+}
+
+.pad_help{
+    background-image: url(../img/slate-help-white.png) !important;
+}
+
+#wgt_help{
+    padding-left: 32px;
+    background-image: url(../img/slate-help.png);
+    background-repeat: no-repeat;
+    background-position: top 0;
+}
+
+#help{
+    width: 100%;
+    height: 100%;    
+    overflow: auto;
+    display: none;
+    background-color: #ccc;
+    padding: 5px;
+}
+
+.open{
+    
 }
\ No newline at end of file
diff --git a/resources/library/interactivities/Separe texte.wgt/styles/master.css b/resources/library/interactivities/Separe texte.wgt/styles/master.css
index 6f0a3397..42dde744 100644
--- a/resources/library/interactivities/Separe texte.wgt/styles/master.css	
+++ b/resources/library/interactivities/Separe texte.wgt/styles/master.css	
@@ -4,6 +4,7 @@ html, body{
     margin: 0;
     padding: 0;    
     border-radius: 50px;
+    overflow: hidden;
 }
 
 body{
@@ -36,14 +37,13 @@ button{
     width: 80px;
 }
 
-input.percent, textarea.percent{
-    width: 100%;
-    margin: 0px; padding: 0px;
-    border-width: 0px;
+textarea{
+    font: 32px tahoma;
+    letter-spacing: 0.1em;
+    width: 98%;
+    min-height: 200px;
+    resize: vertical;
 }
 .inputwrap{
-    border-style: solid;
-    border-width: 1px;
-    border-color: #dbdfe6;
-    border-top-color: #abadb3;
+
 }
\ No newline at end of file
diff --git a/src/board/UBDrawingController.cpp b/src/board/UBDrawingController.cpp
index 678d55f3..7398ca41 100644
--- a/src/board/UBDrawingController.cpp
+++ b/src/board/UBDrawingController.cpp
@@ -46,7 +46,7 @@ UBDrawingController::UBDrawingController(QObject * parent)
     , mStylusTool((UBStylusTool::Enum)-1)
     , mLatestDrawingTool((UBStylusTool::Enum)-1)
     , mDrawingMode(DRAWING_MODE)
-
+	, mIsDesktopMode(false)
 {
     connect(UBSettings::settings(), SIGNAL(colorContextChanged()), this, SIGNAL(colorPaletteChanged()));
 
@@ -107,7 +107,7 @@ void UBDrawingController::setStylusTool(int tool)
         mStylusTool = (UBStylusTool::Enum)tool;
 
 
-        if(eDrawingMode_Vector == DRAWING_MODE){
+        if(eDrawingMode_Vector == DRAWING_MODE && !mIsDesktopMode){
             mDrawingMode = eDrawingMode_Vector;
         }
 
diff --git a/src/board/UBDrawingController.h b/src/board/UBDrawingController.h
index ae7b4242..0ce1527b 100644
--- a/src/board/UBDrawingController.h
+++ b/src/board/UBDrawingController.h
@@ -61,6 +61,10 @@ class UBDrawingController : public QObject
 
         UBAbstractDrawRuler* mActiveRuler;
 
+        void setInDestopMode(bool mode){
+        	mIsDesktopMode = mode;
+        }
+
     public slots:
 
         void setStylusTool(int tool);
@@ -79,6 +83,7 @@ class UBDrawingController : public QObject
         UBStylusTool::Enum mStylusTool;
         UBStylusTool::Enum mLatestDrawingTool;
         eDrawingMode mDrawingMode;
+        bool mIsDesktopMode;
 
         static UBDrawingController* sDrawingController;
 
diff --git a/src/core/UBApplicationController.cpp b/src/core/UBApplicationController.cpp
index 0598e490..7c3a431d 100644
--- a/src/core/UBApplicationController.cpp
+++ b/src/core/UBApplicationController.cpp
@@ -71,7 +71,6 @@ UBApplicationController::UBApplicationController(UBBoardView *pControlView, UBBo
     , mCheckingForUpdates(false)
     , mIsShowingDesktop(false)
     , mHttp(0)
-
 {
     mDisplayManager = new UBDisplayManager(this);
 
@@ -459,6 +458,7 @@ void UBApplicationController::showDesktop(bool dontSwitchFrontProcess)
         UBPlatformUtils::bringPreviousProcessToFront();
     }
 
+    UBDrawingController::drawingController()->setInDestopMode(true);
     UBDrawingController::drawingController()->setDrawingMode(eDrawingMode_Artistic);
     UBDrawingController::drawingController()->setStylusTool(UBStylusTool::Selector);
 }
diff --git a/src/desktop/UBDesktopAnnotationController.cpp b/src/desktop/UBDesktopAnnotationController.cpp
index 336c0ce0..7c951c99 100644
--- a/src/desktop/UBDesktopAnnotationController.cpp
+++ b/src/desktop/UBDesktopAnnotationController.cpp
@@ -385,6 +385,8 @@ void UBDesktopAnnotationController::goToUniboard()
     hideWindow();
 
     UBPlatformUtils::setDesktopMode(false);
+    UBDrawingController::drawingController()->setInDestopMode(false);
+    UBDrawingController::drawingController()->setDrawingMode(eDrawingMode_Vector);
 
     emit restoreUniboard();
 }
diff --git a/src/domain/UBGraphicsScene.cpp b/src/domain/UBGraphicsScene.cpp
index 738409ab..dec6530f 100644
--- a/src/domain/UBGraphicsScene.cpp
+++ b/src/domain/UBGraphicsScene.cpp
@@ -558,7 +558,7 @@ bool UBGraphicsScene::inputDeviceRelease()
             }
         }else if (mCurrentStroke)
         {
-            if(eDrawingMode_Vector == DRAWING_MODE){
+            if(eDrawingMode_Vector == UBDrawingController::drawingController()->drawingMode()){
                 UBGraphicsStrokesGroup* pStrokes = new UBGraphicsStrokesGroup();
 
                 // Remove the strokes that were just drawn here and replace them by a stroke item
@@ -902,7 +902,7 @@ void UBGraphicsScene::eraseLineTo(const QPointF &pEndPoint, const qreal &pWidth)
             }
         }
 
-        if(eDrawingMode_Vector == DRAWING_MODE){
+        if(eDrawingMode_Vector == UBDrawingController::drawingController()->drawingMode()){
             foreach(QGraphicsItem* item, toBeRemovedItems){
                 UBGraphicsPolygonItem* poly = dynamic_cast<UBGraphicsPolygonItem*>(item);
                 if(NULL != poly){
@@ -920,7 +920,7 @@ void UBGraphicsScene::eraseLineTo(const QPointF &pEndPoint, const qreal &pWidth)
             mRemovedItems += toBeRemovedItems;
         }
 
-        if(eDrawingMode_Vector == DRAWING_MODE){
+        if(eDrawingMode_Vector == UBDrawingController::drawingController()->drawingMode()){
             foreach(QGraphicsItem* item, toBeAddedItems){
                 UBGraphicsPolygonItem* poly = dynamic_cast<UBGraphicsPolygonItem*>(item);
                 if(NULL != poly && NULL != poly->strokesGroup()){