Merge branch 'develop' into shiba-dev

Sankore_3.1.pro

@@ -11,7 +11,7 @@ CONFIG += debug_and_release \
 VERSION_MAJ = 2
 VERSION_MIN = 00 
 VERSION_TYPE = b # a = alpha, b = beta, r = release, other => error
-VERSION_PATCH = 08
+VERSION_PATCH = 09
 
 VERSION = "$${VERSION_MAJ}.$${VERSION_MIN}.$${VERSION_TYPE}.$${VERSION_PATCH}"
 VERSION = $$replace(VERSION, "\\.r", "")

plugins/cffadaptor/src/UBCFFAdaptor.cpp

@@ -550,8 +550,8 @@ QDomElement UBCFFAdaptor::UBToCFFConverter::parsePage(const QString &pageFileNam
                 pageFile.close();
                 return QDomElement();
             }
-        } else if (tagname == tUBZGroup) {
+        } else if (tagname == tUBZGroups) {
-            group = parseGroupPageSection(nextTopElement);
+            group = parseGroupsPageSection(nextTopElement);
             if (group.isNull()) {
                 qDebug() << "Page doesn't contains any groups.";
                 pageFile.close();
@@ -634,6 +634,7 @@ QDomElement UBCFFAdaptor::UBToCFFConverter::parseSvgPageSection(const QDomElemen
         else if (tagName == tUBZLine)          parseUBZLine(nextElement, svgElements);
         else if (tagName == tUBZPolygon)       parseUBZPolygon(nextElement, svgElements);
         else if (tagName == tUBZPolyline)      parseUBZPolyline(nextElement, svgElements);
+        else if (tagName == tUBZGroups)        parseGroupsPageSection(nextElement);
 
         nextElement = nextElement.nextSiblingElement();
     }
@@ -694,14 +695,36 @@ bool UBCFFAdaptor::UBToCFFConverter::writeExtendedIwbSection()
 // extended element options
 // editable, background, locked are supported for now
 
-QDomElement UBCFFAdaptor::UBToCFFConverter::parseGroupPageSection(const QDomElement &element)
+QDomElement UBCFFAdaptor::UBToCFFConverter::parseGroupsPageSection(const QDomElement &groupRoot)
 {
 //    First sankore side implementation needed. TODO in Sankore 1.5
-    Q_UNUSED(element)
+    if (!groupRoot.hasChildNodes()) {
-    qDebug() << "parsing ubz group section";
+        qDebug() << "Group root is empty";
         return QDomElement();
     }
 
+    QDomElement groupElement = groupRoot.firstChildElement();
+
+    while (!groupElement.isNull()) {
+        QDomElement extendedElement = mDataModel->createElementNS(iwbNS, groupElement.tagName());
+        QDomElement groupChildElement = groupElement.firstChildElement();
+        while (!groupChildElement.isNull()) {
+            QDomElement extSubElement = mDataModel->createElementNS(iwbNS, groupChildElement.tagName());
+            extSubElement.setAttribute(aRef, groupChildElement.attribute(aID, QUuid().toString()));
+            extendedElement.appendChild(extSubElement);
+
+            groupChildElement = groupChildElement.nextSiblingElement();
+        }
+
+        mExtendedElements.append(extendedElement);
+
+        groupElement = groupElement.nextSiblingElement();
+    }
+
+    qDebug() << "parsing ubz group section";
+    return groupRoot;
+}
+
 QString UBCFFAdaptor::UBToCFFConverter::getDstContentFolderName(const QString &elementType)
 {
     QString sRet;
@@ -1250,6 +1273,19 @@ bool UBCFFAdaptor::UBToCFFConverter::setCFFAttribute(const QString &attributeNam
         {
             setGeometryFromUBZ(ubzElement, svgElement);
         }
+        else
+            if (attributeName.contains(aUBZUuid))
+            {
+
+                QString parentId = ubzElement.attribute(aUBZParent);
+                QString id;
+                if (!parentId.isEmpty())
+                    id = "{" + parentId + "}" + "{" + ubzElement.attribute(aUBZUuid)+"}";
+                else
+                    id = "{" + ubzElement.attribute(aUBZUuid)+"}";
+
+                svgElement.setAttribute(aID, id);
+            }
         else 
             if (attributeName.contains(aUBZHref)||attributeName.contains(aSrc))
             {
@@ -1799,7 +1835,10 @@ bool UBCFFAdaptor::UBToCFFConverter::parseUBZPolygon(const QDomElement &element,
 
         if (0 < iwbElementPart.attributes().count())
         {   
-            QString id = QUuid::createUuid().toString();
+            QString id = svgElementPart.attribute(aUBZUuid);
+            if (id.isEmpty())
+                id = QUuid::createUuid().toString();
+
             svgElementPart.setAttribute(aID, id);
             iwbElementPart.setAttribute(aRef, id);     
 

plugins/cffadaptor/src/UBCFFAdaptor.h

@@ -63,7 +63,7 @@ private:
         QDomElement parseSvgPageSection(const QDomElement &element);
         void writeQDomElementToXML(const QDomNode &node);
         bool writeExtendedIwbSection();
-        QDomElement parseGroupPageSection(const QDomElement &element);
+        QDomElement parseGroupsPageSection(const QDomElement &groupRoot);
 
         bool createBackground(const QDomElement &element, QMultiMap<int, QDomElement> &dstSvgList);
         QString createBackgroundImage(const QDomElement &element, QSize size);

plugins/cffadaptor/src/UBCFFConstants.h

@@ -28,6 +28,7 @@ const QString tIWBPageSet = "pageset";
 const QString tId = "id";
 const QString tElement = "element";
 const QString tUBZGroup = "group";
+const QString tUBZGroups = "groups";
 const QString tUBZG = "g";
 const QString tUBZPolygon = "polygon";
 const QString tUBZPolyline = "polyline";
@@ -67,6 +68,7 @@ const QString aBackground = "background";
 const QString aCrossedBackground = "crossed-background";
 const QString aUBZType = "type";
 const QString aUBZUuid = "uuid";
+const QString aUBZParent = "parent";
 const QString aFill = "fill"; // IWB attribute contans color to fill
 
 const QString aID = "id";   // ID of any svg element can be placed in to iwb section
@@ -334,8 +336,10 @@ stroke-lineshape-end \
 const QString ubzElementAttributesToConvert(" \
 xlink:href, \
 src, \
-transform \
+transform, \
-");
+uuid \
+"
+);
 
 // additional attributes. Have references in SVG section.
 const QString svgElementAttributes(" \

resources/i18n/sankore_fr.ts

@@ -377,7 +377,7 @@
     </message>
     <message>
         <source>Show Desktop</source>
-        <translation>Afficher le bureau</translation>
+        <translation>Bureau</translation>
     </message>
     <message>
         <source>Ctrl+Shift+H</source>
@@ -1961,7 +1961,7 @@ Voulez-vous ignorer les erreurs pour ce serveur ?</translation>
     </message>
     <message>
         <source>Add a link</source>
-        <translation>Ajouter un lien.web</translation>
+        <translation>Ajouter un lien web</translation>
     </message>
     <message>
         <source>Page: %0</source>

resources/i18n/sankore_fr_CH.ts

@@ -377,7 +377,7 @@
     </message>
     <message>
         <source>Show Desktop</source>
-        <translation>Afficher le bureau</translation>
+        <translation>Bureau</translation>
     </message>
     <message>
         <source>Ctrl+Shift+H</source>
@@ -1961,7 +1961,7 @@ Voulez-vous ignorer les erreurs pour ce serveur ?</translation>
     </message>
     <message>
         <source>Add a link</source>
-        <translation>Ajouter un lien.web</translation>
+        <translation>Ajouter un lien web</translation>
     </message>
     <message>
         <source>Page: %0</source>

resources/library/applications/Nuancier.wgt/js/colorpicker.js

@@ -70,12 +70,12 @@
                 $("div.tools_change").removeClass("tools_compass");
                 window.sankore.setTool('pen');              
                 window.sankore.setPenColor('#' + HSBToHex(hsb));
-                sankore.returnStatus("PEN installed", penFlag);
+                //sankore.returnStatus("PEN installed", penFlag);
             } else {
                 $("div.tools_change").addClass("tools_compass");
                 window.sankore.setTool('compass');              
                 window.sankore.setPenColor('#' + HSBToHex(hsb));
-                sankore.returnStatus("Compass installed", penFlag);
+                //sankore.returnStatus("Compass installed", penFlag);
             }
         },
         keyDown = function (ev) {
@@ -224,12 +224,12 @@
                 $("div.tools_change").removeClass("tools_compass");
                 window.sankore.setTool('pen');
                 window.sankore.setPenColor('#' + HSBToHex(tmpColor.b));
-                sankore.returnStatus("PEN installed", penFlag);
+                //sankore.returnStatus("PEN installed", penFlag);
             } else {
                 $("div.tools_change").addClass("tools_compass");
                 window.sankore.setTool('compass');
                 window.sankore.setPenColor('#' + HSBToHex(tmpColor.b));
-                sankore.returnStatus("Compass installed", penFlag);
+                //sankore.returnStatus("Compass installed", penFlag);
             }
             //$(tmpColor.a).data('colorpicker').newColor.css('backgroundColor', '#' + HSBToHex(tmpColor.b));
             return false;
@@ -261,7 +261,7 @@
             cal.data('colorpicker').onSubmit(col, HSBToHex(col), HSBToRGB(col), cal.data('colorpicker').el);
             penFlag = (penFlag)?false:true;
             setNewColor(col, cal.get(0));
-            sankore.returnStatus("startEditing()", penFlag);
+            //sankore.returnStatus("startEditing()", penFlag);
         },
         show = function (ev) {
             var cal = $('#' + $(this).data('colorpickerId'));

resources/library/interactivities/Ass images.wgt/js/script.js

@@ -1,14 +1,14 @@
 var sankoreLang = {
-    display: "Close", 
+    display: "Display", 
     edit: "Edit", 
     short_desc: "Select the number \"three\".", 
     add: "Add new block",
     enter: "Enter your instruction here ...",
     wgt_name: "Associate images",
     reload: "Reload",
-    slate: "Wood",
+    slate: "slate",
-    pad: "Pad",
+    pad: "pad",
-    none: "None",
+    none: "none",
     help: "Help",
     help_content: "This is an example of help content ...",
     theme: "Theme"

resources/library/interactivities/Ass images.wgt/locales/fr/js/script.js

@@ -1,5 +1,5 @@
 var sankoreLang = {
-    display: "Fermer", 
+    display: "Afficher", 
     edit: "Modifier", 
     short_desc: "Sélectionner le numéro «trois».", 
     add: "Nouveau bloc",

resources/library/interactivities/Ass sons.wgt/js/script.js

@@ -1,14 +1,14 @@
 var sankoreLang = {
-    display: "Close", 
+    display: "Display", 
     edit: "Edit", 
     short_desc: "How many signals do you hear?", 
     add: "Add new block",
     enter: "Enter your instruction here ...",
     wgt_name: "Associate to the audio",
     reload: "Reload",
-    slate: "Wood",
+    slate: "slate",
-    pad: "Pad",
+    pad: "pad",
-    none: "None",
+    none: "none",
     help: "Help",
     help_content: "This is an example of help content ...",
     theme: "Theme"

resources/library/interactivities/Ass sons.wgt/locales/fr/js/script.js

@@ -1,14 +1,14 @@
 var sankoreLang = {
-    display: "Fermer", 
+    display: "Afficher", 
     edit: "Modifier", 
     short_desc: "Combien de signaux entendez-vous?", 
     add: "Nouveau bloc",
     enter: "Saisir votre description ici ...",
     wgt_name: "Associer aux sons",
     reload: "Recharger",
-    slate: "Bois",
+    slate: "ardoise",
-    pad: "Pad",
+    pad: "tablette",
-    none: "Aucun",
+    none: "aucun",
     help: "Aide",
     help_content: "<p><h2>Associer aux sons</h2></p>"+
     "<p><h3>Faire correspondre une image à un son.</h3></p>"+
@@ -21,15 +21,18 @@ var sankoreLang = {
     "<ul><li>de choisir le thème de l’interactivité : tablette, ardoise ou aucun (par défaut aucun),</li>"+
     "<li>de modifier un exercice ou d’en créer de nouveaux dans la même activité.</li></ul>"+
 
+
 "<p>En mode édition, pour créer un nouvel exercice, cliquez sur “Nouveau bloc” en bas, puis </p>"+
 "<ul><li>insérez une consigne en cliquant sur le champ de texte “Saisir votre description ici ...”,"+
 "<li>insérez un son dans la zone à gauche de la consigne par glisser-déposer d’un son à partir de votre bibliothèque,</li>"+
-    "<li>ajoutez des zones image en cliquant sur le gros signe + en dessous,</li>"+
+"<li>ajoutez des zones image(s) en cliquant sur le gros signe + en dessous,</li>"+
 "<li>insérez des images par glisser-déposer des images à partir de votre bibliothèque,</li>"+
 "<li>définissez l’image correcte de l’interactivité en cliquant sur le bouton valider “v” situé en bas à droite de l’image concernée.</li></ul>"+
 "<p>Pour supprimer une zone image, cliquez sur la croix située dans le coin supérieur droit de l’image.</p>"+ 
 "<p>Pour remplacer un son, glissez-déposez simplement un nouveau son.</p>"+
 
+
+
     "<p>Pour supprimer un exercice, cliquez sur la croix à gauche du numéro de l’exercice.</p>"+
 
     "<p>Le bouton “Afficher” vous permet d’utiliser l’activité.</p>",

resources/library/interactivities/Calcul.wgt/css/main.css

@@ -25,7 +25,7 @@ ul {
 	background-color: red;
 }
 
-.pagination li a {
+.pagination li span {
 	display: block;
 	width: 100%;
 	height: 100%;

resources/library/interactivities/Calcul.wgt/js/main.js

@@ -27,7 +27,7 @@ function reloadApp(app) {
 	$pagination = $("<ul class='pagination'></ul>");
 	$operationContainer.append($pagination);
 	for (var i = 0; i < operations; i++)
-		$("<li><a href='#'>"+(i+1)+"</a></li>").appendTo($pagination);
+		$("<li><span>"+(i+1)+"</span></li>").appendTo($pagination);
 
 	$operations = $("<ul class='operations'></ul>");
 	$operationContainer.append($operations);

resources/library/interactivities/Cat images.wgt/js/script.js

@@ -1,5 +1,5 @@
 var sankoreLang = {
-    display: "Close", 
+    display: "Display", 
     edit: "Edit", 
     first_desc: "Odd numbers", 
     second_desc: "Even numbers", 
@@ -7,9 +7,9 @@ var sankoreLang = {
     add: "Add new block",
     wgt_name: "Categorize images",
     reload: "Reload",
-    slate: "Wood",
+    slate: "slate",
-    pad: "Pad",
+    pad: "pad",
-    none: "None",
+    none: "none",
     help: "Help",
     help_content: "This is an example of help content ...",
     theme: "Theme"

resources/library/interactivities/Cat images.wgt/locales/fr/js/script.js

@@ -1,5 +1,5 @@
 var sankoreLang = {
-    display: "Fermer", 
+    display: "Afficher", 
     edit: "Modifier",
     first_desc: "Les nombres impairs", 
     second_desc: "Les nombres pairs", 

resources/library/interactivities/Cat text.wgt/js/script.js

@@ -1,5 +1,5 @@
 var sankoreLang = {
-    display: "Close", 
+    display: "Display", 
     edit: "Edit", 
     first_desc: "Fruits", 
     second_desc: "Vegetables",
@@ -13,9 +13,9 @@ var sankoreLang = {
     text: "Some text",
     wgt_name: "Categorize text",
     reload: "Reload",
-    slate: "Wood",
+    slate: "slate",
-    pad: "Pad",
+    pad: "pad",
-    none: "None",
+    none: "none",
     help: "Help",
     help_content: "This is an example of help content ...",
     theme: "Theme"

resources/library/interactivities/Cat text.wgt/locales/fr/js/script.js

@@ -1,5 +1,5 @@
 var sankoreLang = {
-    display: "Fermer", 
+    display: "Afficher", 
     edit: "Modifier", 
     first_desc: "Fruits", 
     second_desc: "Légumes",
@@ -28,7 +28,7 @@ var sankoreLang = {
     "<ul><li>de choisir le thème de l’interactivité : tablette, ardoise ou aucun (par défaut aucun),</li>"+
     "<li>de modifier un exercice ou d’en créer de nouveaux dans la même activité.</li></ul>"+
 
-    "<p>En mode édition, pour créer un nouvel exercice, cliquez sur “Nouveau bloc” en bas, une zone bleue apparaît, c’est une catégorie, puis.</p>"+
+"<p>En mode édition, pour créer un nouvel exercice, cliquez sur “Nouveau bloc” en bas, une zone bleue apparaît, c’est une catégorie, puis :</p>"+
 "<ul><li>insérez le nom de la catégorie (par exemple “fruits”, “légumes”, “mammifères”...) en cliquant dans le champ de texte “Saisir le nom de la catégorie ici …”,</li>"+
 "<li>cliquez sur le gros “+” situé à gauche de la catégorie ce qui vous permet de rajouter des étiquettes de mots,</li>"+
 "<li>entrez des mots dans ces étiquettes,</li>"+
@@ -36,6 +36,7 @@ var sankoreLang = {
 "<p>Pour supprimer une étiquette de mots, cliquez sur la croix située dans le coin supérieur droit de celle-ci.</p>"+
 "<p>Pour supprimer une catégorie, cliquez sur le signe “-” situé à droite de celle-ci.</p>"+
 
+
     "<p>Pour supprimer un exercice, cliquez sur la croix à gauche du numéro de l’exercice.</p>"+
 
     "<p>Le bouton “Afficher” vous permet d’utiliser l’activité.</p>",

resources/library/interactivities/Choisir.wgt/locales/fr/scripts/selQuestionApp.js

@@ -15,7 +15,7 @@
 
 var sankoreLang = {
     edit: "Modifier",
-    display:"Fermer",
+    display:"Afficher",
     question:"La question",
     example_question:"Ceci est un exemple de question",
     answer:"Ceci est une réponse possible",
@@ -52,7 +52,7 @@ var sankoreLang = {
 "<ul><li>de choisir le thème de l’interactivité : tablette, ardoise ou aucun (par défaut aucun),</li>"+
 "<li>de modifier un exercice ou d’en créer de nouveaux dans la même activité.</li></ul>"+
 
-"<p>En mode édition, pour créer un nouvel exercice, cliquez sur “Ajouter une nouvelle question …”, puis.</p>"+
+"<p>En mode édition, pour créer un nouvel exercice, cliquez sur “Ajouter une nouvelle question …”, puis :</p>"+
 "<ul><li>insérez la question en cliquant sur le champ de texte “Saisir la question ici ...”,</li>"+
 "<li>cliquez sur ”Options” pour choisir l’affichage des propositions (une seule bonne réponse, plusieurs bonnes réponses, liste déroulante). Cliquez sur “Fermer”,</li>"+
 "<li>cliquez sur ”Ajouter une proposition” et saisissez la proposition dans le champ de texte,</li>"+

resources/library/interactivities/Choisir.wgt/scripts/selQuestionApp.js

@@ -15,7 +15,7 @@
 
 var sankoreLang = {
     edit: "Edit",
-    display:"Close",
+    display:"Display",
     question:"Question",
     example_question:"This is an example of the question",
     answer:"This is one possible answer",
@@ -37,9 +37,9 @@ var sankoreLang = {
     a:"A",
     wgt_name: "Choose the right answer",
     reload: "Reload",
-    slate: "Wood",
+    slate: "slate",
-    pad: "Pad",
+    pad: "pad",
-    none: "None",
+    none: "none",
     help: "Help",
     help_content: "This is an example of help content ...",
     theme: "Theme"

resources/library/interactivities/Contraste.wgt/css/basic.css

@@ -3,7 +3,7 @@ html, body{
     height: 100%;
     margin: 0;
     padding: 0;    
-    border-radius: 50px;
+    border-radius: 35px;
     overflow: hidden;
 }
 
@@ -41,8 +41,6 @@ body{
     height: 100%;
     float: left;
     background-color: black;
-    -webkit-border-top-left-radius: 7px;
-    -webkit-border-bottom-left-radius: 7px;
     border-top-left-radius: 7px;
     border-bottom-left-radius: 7px;
 }
@@ -52,8 +50,6 @@ body{
     height: 100%;
     float: right;
     background-color: yellow;
-    -webkit-border-top-right-radius: 7px;
-    -webkit-border-bottom-right-radius: 7px;
     border-top-right-radius: 7px;
     border-bottom-right-radius: 7px;
 }
@@ -269,65 +265,55 @@ body{
     margin: 10px 10px 0 10px;
     padding: 0;
     float: left;
-    /*font-family: "Lobster13Regular";*/
+    font-family: Arial,Helvetica,sans-serif;
     font-size: 24px;
-    color: #8c5730;
+    color: #7F613F;
+    text-shadow: #FFDCA9 0 1px 0;
 }
 
-#wgt_reload, #wgt_edit, #wgt_display,#wgt_add, #wgt_help{
+#wgt_reload, #wgt_edit, #wgt_display, #wgt_help{
     cursor: pointer;
-    height: 44px;
     margin: 10px 10px 0 0;
     float: right;
-    /*font-family: "Lobster13Regular";*/
+    font-family: Arial,Helvetica,sans-serif;
     font-size: 24px;    
-    color: #8c5730;
+    line-height: 32px;
 }
 
 #wgt_display{
-    padding-left: 40px;
+    padding-left: 35px;
-    background-image: url(../images/slate-edit.png);
+    background: url(../images/toolbar-edit.png) left -32px no-repeat;
-    background-repeat: no-repeat;
+    color: white;
-    background-position: top 0;
     display: none;
 }
 
 #wgt_edit{    
-    padding-left: 40px;
+    padding-left: 35px;
-    background-image: url(../images/slate-edit.png);
+    background: url(../images/slate-toolbar-edit.png) left top no-repeat;
-    background-repeat: no-repeat;
+    color: #7F613F;
-    background-position: top 0;
+    text-shadow: #FFDCA9 0 1px 0;
 }
 
 #wgt_reload{
-    padding-left: 40px;
+    padding-left: 35px;
-    background-image: url(../images/slate-toolbar-reload.png);
+    background: url(../images/slate-toolbar-reload.png) left top no-repeat;
-    background-repeat: no-repeat;
+    color: #7F613F;
-    background-position: top 0;
+    text-shadow: #FFDCA9 0 1px 0;
 }
 
 #wgt_add{
-    padding-left: 40px;
+    margin-left: 10px;
-    background-image: url(../images/plus.png);
+    padding-right: 10px;
-    background-repeat: no-repeat;
+    border: 1px solid #666;
-    background-position: top 0;
+    border-radius: 15px;
-    display: none;
+    padding-left: 30px;
+    background: url(../images/plus.png) -2px -2px no-repeat;
+    display: inline-block;
 }
 
-.style_select{    
+#wgt_add:hover{
-    width: 120px;
+    border-color: black;
-    /*font-family: "Lobster13Regular";*/
+    cursor: pointer;
-    font-size: 24px;
-    float: right;
-    margin: 10px 20px 0 0;
-    border-radius: 10px;
-    background-image: url(../images/ar_down.png);
-    background-color: #d4aa79;
-    color: #8c5730;
-    background-position: 105px 11px;
-    background-repeat: no-repeat;
-    -webkit-appearance: menulist-text;
-    display: none;
 }
 
 .btl_pad{
@@ -362,55 +348,50 @@ body{
     background-image: url(../images/pad-bottom-right.png) !important;
 }
 
-.pad_color{
+.without_radius{
-    color: white !important;
+    border-radius: 0 !important;
-}
-
-.pad_reload{
-    background-image: url(../images/slate-toolbar-reload-white.png) !important;
 }
 
-.pad_edit{
+.without_back{
-    background-image: url(../images/slate-display.png) !important;
+    background: none !important;
 }
 
-.pad_add{
+.pad_color{
-    background-image: url(../images/plus-white.png) !important;
+    color: #FC9 !important;
+    text-shadow: none !important;
 }
 
-.pad_select{
+.pad_reload{
-    background-color: black !important;
+    background: url(../images/toolbar-reload.png) left top no-repeat !important;
-    color: white !important;
-    background-image: url(../images/ar_down_white.png) !important;
 }
 
-.without_radius{
+.pad_edit{
-    border-radius: 0 !important;
+    background: url(../images/toolbar-edit.png) left top no-repeat !important;    
 }
 
-.without_back{
+.pad_help{
-    background: none !important;
+    background: url(../images/toolbar-help.png) left top no-repeat !important;
 }
 
-.none_select{
+.help_wood{
-    background-color: #333 !important;
+    background: url(../images/slate-toolbar-help.png) left -32px no-repeat !important;
     color: white !important;
-    background-image: url(../images/ar_down_white.png) !important;
+    text-shadow: #7F613F 0 -1px 0 !important;
 }
 
-.pad_help{
+.help_pad{
-    background-image: url(../images/slate-help-white.png) !important;
+    background: url(../images/toolbar-help.png) left -32px no-repeat !important;
+    color: white !important;
 }
 
 #wgt_help{
-    padding-left: 32px;
+    padding-left: 35px;
-    background-image: url(../images/slate-help.png);
+    background: url(../images/slate-toolbar-help.png) left top no-repeat;
-    background-repeat: no-repeat;
+    color: #7F613F;
-    background-position: top 0;
+    text-shadow: #FFDCA9 0 1px 0;
 }
 
 #help{
-    width: 100%;
     height: 100%;    
     overflow: auto;
     display: none;
@@ -421,3 +402,35 @@ body{
 .open{
 
 }
+
+#parameters{    
+    display: none;
+    margin: 40px 0 0 0;
+    padding: 10px 20px;
+    background: url("../images/parameters-bg.png");
+    border-radius: 4px 4px 0 0;
+}
+
+.inline{
+    display: inline-block;
+    font-family: "helvetica neue";
+    font-size: 14px;
+    color: #666;
+}
+
+#parameters label {
+    font-style: italic;
+}
+
+#style_select{   
+    margin-left: 10px;
+}
+
+.display_wood{
+    background: url(../images/slate-toolbar-edit.png) left -32px no-repeat !important;
+    text-shadow: #7F613F 0 -1px 0;
+}
+
+.radius_ft{
+    border-radius: 45px !important;
+}

resources/library/interactivities/Contraste.wgt/index.html

@@ -51,12 +51,6 @@
                     <div id="wgt_reload"></div>                    
                     <div id="wgt_display" class="selected"></div>
                     <div id="wgt_edit"></div>
-                    <div id="wgt_add"></div>
-                    <select class="style_select">
-                        <option value="1"></option>
-                        <option value="2"></option>
-                        <option value="3"></option>
-                    </select>
                 </td>
                 <td class="b_top_right">&nbsp;</td>
             </tr>
@@ -65,6 +59,18 @@
                 <td class="b_center_left">&nbsp;</td>
                 <td>
                     <div id="help"></div>
+                    <div id="parameters">
+                        <div class="inline">
+                            <label>
+                                <select id="style_select">
+                                    <option value="1"></option>
+                                    <option value="2"></option>
+                                    <option value="3"></option>
+                                </select>
+                            </label>
+                            <div id="wgt_add"></div>
+                        </div>
+                    </div>
                     <div id="data">
 
                     </div>

resources/library/interactivities/Contraste.wgt/locales/fr/index.html

@@ -31,12 +31,6 @@ and open the template in the editor.
                     <div id="wgt_reload"></div>                    
                     <div id="wgt_display" class="selected"></div>
                     <div id="wgt_edit"></div>
-                    <div id="wgt_add"></div>
-                    <select class="style_select">
-                        <option value="1"></option>
-                        <option value="2"></option>
-                        <option value="3"></option>
-                    </select>
                 </td>
                 <td class="b_top_right">&nbsp;</td>
             </tr>
@@ -45,6 +39,18 @@ and open the template in the editor.
                 <td class="b_center_left">&nbsp;</td>
                 <td>
                     <div id="help"></div>
+                    <div id="parameters">
+                        <div class="inline">
+                            <label>
+                                <select id="style_select">
+                                    <option value="1"></option>
+                                    <option value="2"></option>
+                                    <option value="3"></option>
+                                </select>
+                            </label>
+                            <div id="wgt_add"></div>
+                        </div>
+                    </div>
                     <div id="data">
 
                     </div>

resources/library/interactivities/Contraste.wgt/locales/fr/scripts/blackYellow.js

@@ -14,7 +14,7 @@
  */
 
 var sankoreLang = {
-    display: "Afficher", 
+    display: "Fermer", 
     edit: "Modifier", 
     add: "Ajouter", 
     enter_data: "Saisir la donnée:", 
@@ -45,7 +45,8 @@ var sankoreLang = {
     "<p>Pour modifier les données ou les résultats, cliquez directement sur l’exercice.</p>"+
     "<p>Pour supprimer un exercice, cliquez sur la croix en haut à droite de l’exercice.</p>"+
 
-"<p>Le bouton “Afficher” vous permet d’utiliser l’activité.</p>"
+    "<p>Le bouton “Afficher” vous permet d’utiliser l’activité.</p>",
+    theme: "Thème"
 };
 
 function init(){
@@ -61,6 +62,8 @@ function init(){
     var flagForSelect = false;
     var dragElement = null; //the element that must be dragging
     var lang = ""; //locale language
+    var resizeFlag = true;
+    
     var coords = {
         left:0,
         top:0
@@ -82,9 +85,11 @@ function init(){
     $("#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='1']").text(sankoreLang.slate);
-    $(".style_select option[value='2']").text(sankoreLang.pad);
+    $("#style_select option[value='2']").text(sankoreLang.pad);
-    $(".style_select option[value='3']").text(sankoreLang.none);
+    $("#style_select option[value='3']").text(sankoreLang.none);
+    var tmpl = $("div.inline label").html();
+    $("div.inline label").html(sankoreLang.theme + tmpl)
     
     if(window.sankore){
         if(sankore.preference("blackYellowData","")){
@@ -109,7 +114,7 @@ function init(){
     if(window.sankore){
         if(sankore.preference("by_style","")){
             changeStyle(sankore.preference("by_style",""));
-            $(".style_select").val(sankore.preference("by_style",""));
+            $("#style_select").val(sankore.preference("by_style",""));
         } else
             changeStyle("3")
     } else
@@ -120,9 +125,15 @@ function init(){
             if(!$(this).hasClass("selected")){                
                 $(this).addClass("selected");
                 $("#wgt_edit").removeClass("selected");
-                $(".style_select").css("display","none");                
+                $("#parameters").css("display","none");   
+                var tmpwh = $(window).height();
+                var tmpww = $(window).width();
+                resizeFlag = true;
+                window.resizeTo(tmpww, tmpwh - 44)
+                $("#data").css("padding-bottom","");
+                $("#leftDiv").css("border-top-left-radius","7px");
+                $("#rightDiv").css("border-top-right-radius","7px");
                 $(this).css("display", "none");
-                $("#wgt_add").css("display", "none");
                 $("#wgt_edit").css("display", "block");
                 mode = false;
                 $(".leftDiv, .rightDiv").animate({
@@ -135,7 +146,7 @@ function init(){
                                 tmpReadyTask.width($(domElem).width())
                                 .height($(domElem).height())
                                 .css("position","absolute")
-                                .css("top",$(domElem).position().top)
+                                .css("top",$(domElem).position().top - 40)
                                 .css("left",$(domElem).position().left)
                                 .find(".taskContainer").removeAttr("contenteditable");                                
                                 
@@ -146,15 +157,22 @@ function init(){
                         opacityChanged = false;
                     }
                 });
+                
                 $(document).disableTextSelect(); 
             }
         } else {            
             if(!$(this).hasClass("selected")){
                 $(this).addClass("selected");
                 $("#wgt_display").removeClass("selected");
-                $(".style_select").css("display","block");                
+                $("#parameters").css("display","block");   
+                tmpwh = $(window).height();
+                tmpww = $(window).width();
+                resizeFlag = true;
+                window.resizeTo(tmpww, tmpwh + 44)
+                $("#data").css("padding-bottom","42px");
+                $("#leftDiv").css("border-top-left-radius","0px");
+                $("#rightDiv").css("border-top-right-radius","0px");
                 $(this).css("display", "none");
-                $("#wgt_add").css("display", "block");
                 $("#wgt_display").css("display", "block");
                 mode = true; 
                 $(document).enableTextSelect(); 
@@ -189,12 +207,15 @@ function init(){
     $("#wgt_help").click(function(){
         var tmp = $(this);
         if($(this).hasClass("open")){
+            $(this).removeClass("help_pad").removeClass("help_wood")
             $("#help").slideUp("100", function(){
                 tmp.removeClass("open");
                 $("#data").show();
+                ($("#wgt_edit").hasClass("selected"))?$("#parameters").show():'';
             });
         } else {            
-            $("#data").hide();
+            ($("#style_select").val() == 1)?$(this).removeClass("help_pad").addClass("help_wood"):$(this).removeClass("help_wood").addClass("help_pad");
+            $("#data, #parameters").hide();
             $("#help").slideDown("100", function(){
                 tmp.addClass("open");
             });
@@ -218,10 +239,10 @@ function init(){
         $(document).disableTextSelect();
     });
     
-    $(".style_select option[value='1']").text(sankoreLang.slate);
+    $("#style_select option[value='1']").text(sankoreLang.slate);
-    $(".style_select option[value='2']").text(sankoreLang.pad);
+    $("#style_select option[value='2']").text(sankoreLang.pad);
     
-    $(".style_select").change(function (event){
+    $("#style_select").change(function (event){
         changeStyle($(this).find("option:selected").val());
     })
     
@@ -372,12 +393,12 @@ function init(){
             if((prevBottom + 15 + curHeight) < ($(window).height() - 54))
                 curr.css("top", prevBottom + 15 + "px");                        
             else
-                curr.css("top", "60px").css("left", prevLeft + 255 + "px");            
+                curr.css("top", "100px").css("left", prevLeft + 255 + "px");            
         } else {
             if((prevBottom + 15 + curHeight) < ($(window).height() - 54))
                 curr.css("top", prevBottom + 15 + "px").css("left", prevLeft + "px");           
             else
-                curr.css("top", "60px").css("left", prevLeft + 255 + "px");
+                curr.css("top", "100px").css("left", prevLeft + 255 + "px");
         }
         prevBottom = curr.position().top + curr.height(),
         prevLeft = curr.position().left;
@@ -390,6 +411,7 @@ function init(){
     popupBack.css("left", ($(window).width() - 360)*50/$(window).width() + "%");
     
     $(window).resize(function(){
+        if(!resizeFlag){
             if($("#wgt_edit").hasClass("selected")){
                 if($(".editContainer").size() > 1){            
                     var prev = $(".editContainer:first"),
@@ -406,12 +428,14 @@ function init(){
             }
             popupBack.css("top", ($(window).height() - 138)*50/$(window).height() + "%");
             popupBack.css("left", ($(window).width() - 360)*50/$(window).width() + "%");
+        } else 
+            resizeFlag = false;
     });
     
     if (window.widget) {
         window.widget.onleave = function(){
             exportToSankore();
-            sankore.setPreference("by_style", $(".style_select").find("option:selected").val());
+            sankore.setPreference("by_style", $("#style_select").find("option:selected").val());
         }
     }
     
@@ -434,7 +458,7 @@ function init(){
                     objToExport.data2 = $(domElem).find(".readyTask").find(":last-child").text();
                     objToExport.width = $(domElem).width();
                     objToExport.height = $(domElem).height();
-                    objToExport.top = $(domElem).position().top;
+                    objToExport.top = $(domElem).position().top - 40;
                     objToExport.left = $(domElem).position().left;
                     arrayToExport.push(objToExport);
                 });
@@ -493,14 +517,14 @@ function reloadItems(){
 
 //order items
 function orderItems(items){
-    var bottom = 45,
+    var bottom = ($("#wgt_edit").hasClass("selected"))?85:45,
     lastItemLeft = 54; 
     for (var i in items){
         if((bottom + items[i].height()) < ($(window).height() - 54)){
             items[i].css("top", bottom + 15 + "px").css("left", lastItemLeft + "px").appendTo("#data");
             bottom += items[i].height() + 15;
         } else {
-            bottom = 60;
+            bottom = 100;
             lastItemLeft += 255;
             items[i].css("top", bottom + "px").css("left", lastItemLeft + "px").appendTo("#data");
             bottom += items[i].height();
@@ -525,7 +549,7 @@ function shuffle( arr )
 //adding a new task to the page
 function addTask(expression, result){
     var lastItem = $(".editContainer:last"),
-    lastItemPos = lastItem.length ? lastItem.position().top : 45,
+    lastItemPos = lastItem.length ? lastItem.position().top : 85,
     lastItemHeight = lastItem.length ? lastItem.height() : 0,
     lastItemLeft = lastItem.length ? lastItem.position().left : 54;
     var bottom = lastItemPos + lastItemHeight + 85;
@@ -537,7 +561,7 @@ function addTask(expression, result){
     if(bottom < ($(window).height() - 54)){
         editContent.css("top", lastItemPos + lastItemHeight + 15 + "px").css("left", lastItemLeft + "px").appendTo("#data");
     } else {
-        lastItemPos = 45;
+        lastItemPos = 85;
         editContent.css("top", lastItemPos + 15 + "px").css("left", lastItemLeft + 255 + "px").appendTo("#data");
     }    
     main.appendTo(editContent);
@@ -556,13 +580,12 @@ 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_edit").removeClass("pad_color").removeClass("pad_edit");
             $("#wgt_help").removeClass("pad_color").removeClass("pad_help");
-            $("#wgt_display").removeClass("pad_color").removeClass("pad_edit");
+            $("#wgt_edit").removeClass("pad_color").removeClass("pad_edit");
-            $("#wgt_add").removeClass("pad_color").removeClass("pad_add");
             $("#wgt_name").removeClass("pad_color");
-            $(".style_select").removeClass("pad_select").removeClass("none_select").val(val);
+            $("#wgt_display").addClass("display_wood");
-            $("body, html").removeClass("without_radius");
+            $("#style_select").val(val);
+            $("body, html").removeClass("without_radius").addClass("radius_ft");
             break;
         case "2":
             $(".b_top_left").addClass("btl_pad").removeClass("without_back");
@@ -574,13 +597,12 @@ 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_edit").addClass("pad_color").addClass("pad_edit");
             $("#wgt_help").addClass("pad_color").addClass("pad_help");
-            $("#wgt_display").addClass("pad_color").addClass("pad_edit");
+            $("#wgt_edit").addClass("pad_color").addClass("pad_edit");
-            $("#wgt_add").addClass("pad_color").addClass("pad_add");
             $("#wgt_name").addClass("pad_color");
-            $(".style_select").addClass("pad_select").removeClass("none_select").val(val);
+            $("#wgt_display").removeClass("display_wood");
-            $("body, html").removeClass("without_radius");
+            $("#style_select").val(val);
+            $("body, html").removeClass("without_radius").removeClass("radius_ft");
             break;
         case "3":
             $(".b_top_left").addClass("without_back").removeClass("btl_pad");
@@ -591,14 +613,13 @@ 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_help").addClass("pad_color").addClass("pad_help");
-            $("#wgt_display").addClass("pad_color").addClass("pad_edit");
-            $("#wgt_add").addClass("pad_color").addClass("pad_add");
             $("#wgt_name").addClass("pad_color");
-            $(".style_select").addClass("none_select").val(val);
+            $("#wgt_display").removeClass("display_wood");
-            $("body, html").addClass("without_radius");
+            $("#style_select").val(val);
+            $("body, html").addClass("without_radius").removeClass("radius_ft");
             break;
     }
     if($("#wgt_edit").hasClass("selected"))

resources/library/interactivities/Contraste.wgt/locales/ru/index.html

@@ -31,12 +31,6 @@ and open the template in the editor.
                     <div id="wgt_reload"></div>                    
                     <div id="wgt_display" class="selected"></div>
                     <div id="wgt_edit"></div>
-                    <div id="wgt_add"></div>
-                    <select class="style_select">
-                        <option value="1"></option>
-                        <option value="2"></option>
-                        <option value="3"></option>
-                    </select>
                 </td>
                 <td class="b_top_right">&nbsp;</td>
             </tr>
@@ -45,6 +39,18 @@ and open the template in the editor.
                 <td class="b_center_left">&nbsp;</td>
                 <td>
                     <div id="help"></div>
+                     <div id="parameters">
+                        <div class="inline">
+                            <label>
+                                <select id="style_select">
+                                    <option value="1"></option>
+                                    <option value="2"></option>
+                                    <option value="3"></option>
+                                </select>
+                            </label>
+                            <div id="wgt_add"></div>
+                        </div>
+                    </div>
                     <div id="data">
                         
                     </div>

resources/library/interactivities/Contraste.wgt/locales/ru/scripts/blackYellow.js

@@ -14,7 +14,7 @@
  */
 
 var sankoreLang = {
-    display: "Показать", 
+    display: "Закрыть", 
     edit: "Изменить", 
     add: "Добавить", 
     enter_data: "Введите вопрос:", 
@@ -27,7 +27,8 @@ var sankoreLang = {
     pad: "планшет",
     none: "нет",
     help: "Помощь",
-    help_content: "Пример текста помощи ..."
+    help_content: "Пример текста помощи ...",
+    theme: "Тема"
 };
 
 function init(){
@@ -43,6 +44,8 @@ function init(){
     var flagForSelect = false;
     var dragElement = null; //the element that must be dragging
     var lang = ""; //locale language
+    var resizeFlag = true;
+    
     var coords = {
         left:0,
         top:0
@@ -64,9 +67,11 @@ function init(){
     $("#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='1']").text(sankoreLang.slate);
-    $(".style_select option[value='2']").text(sankoreLang.pad);
+    $("#style_select option[value='2']").text(sankoreLang.pad);
-    $(".style_select option[value='3']").text(sankoreLang.none);
+    $("#style_select option[value='3']").text(sankoreLang.none);
+    var tmpl = $("div.inline label").html();
+    $("div.inline label").html(sankoreLang.theme + tmpl)
     
     if(window.sankore){
         if(sankore.preference("blackYellowData","")){
@@ -91,7 +96,7 @@ function init(){
     if(window.sankore){
         if(sankore.preference("by_style","")){
             changeStyle(sankore.preference("by_style",""));
-            $(".style_select").val(sankore.preference("by_style",""));
+            $("#style_select").val(sankore.preference("by_style",""));
         } else
             changeStyle("3")
     } else
@@ -102,9 +107,15 @@ function init(){
             if(!$(this).hasClass("selected")){                
                 $(this).addClass("selected");
                 $("#wgt_edit").removeClass("selected");
-                $(".style_select").css("display","none");                
+                $("#parameters").css("display","none");   
+                var tmpwh = $(window).height();
+                var tmpww = $(window).width();
+                resizeFlag = true;
+                window.resizeTo(tmpww, tmpwh - 44)
+                $("#data").css("padding-bottom","");
+                $("#leftDiv").css("border-top-left-radius","7px");
+                $("#rightDiv").css("border-top-right-radius","7px");
                 $(this).css("display", "none");
-                $("#wgt_add").css("display", "none");
                 $("#wgt_edit").css("display", "block");
                 mode = false;
                 $(".leftDiv, .rightDiv").animate({
@@ -117,7 +128,7 @@ function init(){
                                 tmpReadyTask.width($(domElem).width())
                                 .height($(domElem).height())
                                 .css("position","absolute")
-                                .css("top",$(domElem).position().top)
+                                .css("top",$(domElem).position().top - 40)
                                 .css("left",$(domElem).position().left)
                                 .find(".taskContainer").removeAttr("contenteditable");                                
                                 
@@ -128,15 +139,22 @@ function init(){
                         opacityChanged = false;
                     }
                 });
+                
                 $(document).disableTextSelect(); 
             }
         } else {            
             if(!$(this).hasClass("selected")){
                 $(this).addClass("selected");
                 $("#wgt_display").removeClass("selected");
-                $(".style_select").css("display","block");                
+                $("#parameters").css("display","block");   
+                tmpwh = $(window).height();
+                tmpww = $(window).width();
+                resizeFlag = true;
+                window.resizeTo(tmpww, tmpwh + 44)
+                $("#data").css("padding-bottom","42px");
+                $("#leftDiv").css("border-top-left-radius","0px");
+                $("#rightDiv").css("border-top-right-radius","0px");
                 $(this).css("display", "none");
-                $("#wgt_add").css("display", "block");
                 $("#wgt_display").css("display", "block");
                 mode = true; 
                 $(document).enableTextSelect(); 
@@ -171,12 +189,15 @@ function init(){
     $("#wgt_help").click(function(){
         var tmp = $(this);
         if($(this).hasClass("open")){
+            $(this).removeClass("help_pad").removeClass("help_wood")
             $("#help").slideUp("100", function(){
                 tmp.removeClass("open");
                 $("#data").show();
+                ($("#wgt_edit").hasClass("selected"))?$("#parameters").show():'';
             });
         } else {            
-            $("#data").hide();
+            ($("#style_select").val() == 1)?$(this).removeClass("help_pad").addClass("help_wood"):$(this).removeClass("help_wood").addClass("help_pad");
+            $("#data, #parameters").hide();
             $("#help").slideDown("100", function(){
                 tmp.addClass("open");
             });
@@ -200,10 +221,10 @@ function init(){
         $(document).disableTextSelect();
     });
     
-    $(".style_select option[value='1']").text(sankoreLang.slate);
+    $("#style_select option[value='1']").text(sankoreLang.slate);
-    $(".style_select option[value='2']").text(sankoreLang.pad);
+    $("#style_select option[value='2']").text(sankoreLang.pad);
     
-    $(".style_select").change(function (event){
+    $("#style_select").change(function (event){
         changeStyle($(this).find("option:selected").val());
     })
     
@@ -354,12 +375,12 @@ function init(){
             if((prevBottom + 15 + curHeight) < ($(window).height() - 54))
                 curr.css("top", prevBottom + 15 + "px");                        
             else
-                curr.css("top", "60px").css("left", prevLeft + 255 + "px");            
+                curr.css("top", "100px").css("left", prevLeft + 255 + "px");            
         } else {
             if((prevBottom + 15 + curHeight) < ($(window).height() - 54))
                 curr.css("top", prevBottom + 15 + "px").css("left", prevLeft + "px");           
             else
-                curr.css("top", "60px").css("left", prevLeft + 255 + "px");
+                curr.css("top", "100px").css("left", prevLeft + 255 + "px");
         }
         prevBottom = curr.position().top + curr.height(),
         prevLeft = curr.position().left;
@@ -372,6 +393,7 @@ function init(){
     popupBack.css("left", ($(window).width() - 360)*50/$(window).width() + "%");
     
     $(window).resize(function(){
+        if(!resizeFlag){
             if($("#wgt_edit").hasClass("selected")){
                 if($(".editContainer").size() > 1){            
                     var prev = $(".editContainer:first"),
@@ -388,12 +410,14 @@ function init(){
             }
             popupBack.css("top", ($(window).height() - 138)*50/$(window).height() + "%");
             popupBack.css("left", ($(window).width() - 360)*50/$(window).width() + "%");
+        } else 
+            resizeFlag = false;
     });
     
     if (window.widget) {
         window.widget.onleave = function(){
             exportToSankore();
-            sankore.setPreference("by_style", $(".style_select").find("option:selected").val());
+            sankore.setPreference("by_style", $("#style_select").find("option:selected").val());
         }
     }
     
@@ -416,7 +440,7 @@ function init(){
                     objToExport.data2 = $(domElem).find(".readyTask").find(":last-child").text();
                     objToExport.width = $(domElem).width();
                     objToExport.height = $(domElem).height();
-                    objToExport.top = $(domElem).position().top;
+                    objToExport.top = $(domElem).position().top - 40;
                     objToExport.left = $(domElem).position().left;
                     arrayToExport.push(objToExport);
                 });
@@ -475,14 +499,14 @@ function reloadItems(){
 
 //order items
 function orderItems(items){
-    var bottom = 45,
+    var bottom = ($("#wgt_edit").hasClass("selected"))?85:45,
     lastItemLeft = 54; 
     for (var i in items){
         if((bottom + items[i].height()) < ($(window).height() - 54)){
             items[i].css("top", bottom + 15 + "px").css("left", lastItemLeft + "px").appendTo("#data");
             bottom += items[i].height() + 15;
         } else {
-            bottom = 60;
+            bottom = 100;
             lastItemLeft += 255;
             items[i].css("top", bottom + "px").css("left", lastItemLeft + "px").appendTo("#data");
             bottom += items[i].height();
@@ -507,7 +531,7 @@ function shuffle( arr )
 //adding a new task to the page
 function addTask(expression, result){
     var lastItem = $(".editContainer:last"),
-    lastItemPos = lastItem.length ? lastItem.position().top : 45,
+    lastItemPos = lastItem.length ? lastItem.position().top : 85,
     lastItemHeight = lastItem.length ? lastItem.height() : 0,
     lastItemLeft = lastItem.length ? lastItem.position().left : 54;
     var bottom = lastItemPos + lastItemHeight + 85;
@@ -519,7 +543,7 @@ function addTask(expression, result){
     if(bottom < ($(window).height() - 54)){
         editContent.css("top", lastItemPos + lastItemHeight + 15 + "px").css("left", lastItemLeft + "px").appendTo("#data");
     } else {
-        lastItemPos = 45;
+        lastItemPos = 85;
         editContent.css("top", lastItemPos + 15 + "px").css("left", lastItemLeft + 255 + "px").appendTo("#data");
     }    
     main.appendTo(editContent);
@@ -538,13 +562,12 @@ 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_edit").removeClass("pad_color").removeClass("pad_edit");
             $("#wgt_help").removeClass("pad_color").removeClass("pad_help");
-            $("#wgt_display").removeClass("pad_color").removeClass("pad_edit");
+            $("#wgt_edit").removeClass("pad_color").removeClass("pad_edit");
-            $("#wgt_add").removeClass("pad_color").removeClass("pad_add");
             $("#wgt_name").removeClass("pad_color");
-            $(".style_select").removeClass("pad_select").removeClass("none_select").val(val);
+            $("#wgt_display").addClass("display_wood");
-            $("body, html").removeClass("without_radius");
+            $("#style_select").val(val);
+            $("body, html").removeClass("without_radius").addClass("radius_ft");
             break;
         case "2":
             $(".b_top_left").addClass("btl_pad").removeClass("without_back");
@@ -556,13 +579,12 @@ 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_edit").addClass("pad_color").addClass("pad_edit");
             $("#wgt_help").addClass("pad_color").addClass("pad_help");
-            $("#wgt_display").addClass("pad_color").addClass("pad_edit");
+            $("#wgt_edit").addClass("pad_color").addClass("pad_edit");
-            $("#wgt_add").addClass("pad_color").addClass("pad_add");
             $("#wgt_name").addClass("pad_color");
-            $(".style_select").addClass("pad_select").removeClass("none_select").val(val);
+            $("#wgt_display").removeClass("display_wood");
-            $("body, html").removeClass("without_radius");
+            $("#style_select").val(val);
+            $("body, html").removeClass("without_radius").removeClass("radius_ft");
             break;
         case "3":
             $(".b_top_left").addClass("without_back").removeClass("btl_pad");
@@ -573,14 +595,13 @@ 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_help").addClass("pad_color").addClass("pad_help");
-            $("#wgt_display").addClass("pad_color").addClass("pad_edit");
-            $("#wgt_add").addClass("pad_color").addClass("pad_add");
             $("#wgt_name").addClass("pad_color");
-            $(".style_select").addClass("none_select").val(val);
+            $("#wgt_display").removeClass("display_wood");
-            $("body, html").addClass("without_radius");
+            $("#style_select").val(val);
+            $("body, html").addClass("without_radius").removeClass("radius_ft");
             break;
     }
     if($("#wgt_edit").hasClass("selected"))

resources/library/interactivities/Contraste.wgt/scripts/blackYellow.js

@@ -14,7 +14,7 @@
  */
 
 var sankoreLang = {
-    display: "Display", 
+    display: "Close", 
     edit: "Edit", 
     add: "Add", 
     enter_data: "Enter data:", 
@@ -23,11 +23,12 @@ var sankoreLang = {
     cancel: "Cancel",
     wgt_name: "Contrast",
     reload: "Reload",
-    slate: "wood",
+    slate: "slate",
     pad: "pad",
     none: "none",
     help: "Help",
-    help_content: "This is an example of help content ..."
+    help_content: "This is an example of help content ...",
+    theme: "Theme"
 };
 
 function init(){
@@ -43,6 +44,8 @@ function init(){
     var flagForSelect = false;
     var dragElement = null; //the element that must be dragging
     var lang = ""; //locale language
+    var resizeFlag = true;
+    
     var coords = {
         left:0,
         top:0
@@ -64,9 +67,11 @@ function init(){
     $("#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='1']").text(sankoreLang.slate);
-    $(".style_select option[value='2']").text(sankoreLang.pad);
+    $("#style_select option[value='2']").text(sankoreLang.pad);
-    $(".style_select option[value='3']").text(sankoreLang.none);
+    $("#style_select option[value='3']").text(sankoreLang.none);
+    var tmpl = $("div.inline label").html();
+    $("div.inline label").html(sankoreLang.theme + tmpl)
     
     if(window.sankore){
         if(sankore.preference("blackYellowData","")){
@@ -91,7 +96,7 @@ function init(){
     if(window.sankore){
         if(sankore.preference("by_style","")){
             changeStyle(sankore.preference("by_style",""));
-            $(".style_select").val(sankore.preference("by_style",""));
+            $("#style_select").val(sankore.preference("by_style",""));
         } else
             changeStyle("3")
     } else
@@ -102,9 +107,15 @@ function init(){
             if(!$(this).hasClass("selected")){                
                 $(this).addClass("selected");
                 $("#wgt_edit").removeClass("selected");
-                $(".style_select").css("display","none");                
+                $("#parameters").css("display","none");   
+                var tmpwh = $(window).height();
+                var tmpww = $(window).width();
+                resizeFlag = true;
+                window.resizeTo(tmpww, tmpwh - 44)
+                $("#data").css("padding-bottom","");
+                $("#leftDiv").css("border-top-left-radius","7px");
+                $("#rightDiv").css("border-top-right-radius","7px");
                 $(this).css("display", "none");
-                $("#wgt_add").css("display", "none");
                 $("#wgt_edit").css("display", "block");
                 mode = false;
                 $(".leftDiv, .rightDiv").animate({
@@ -117,7 +128,7 @@ function init(){
                                 tmpReadyTask.width($(domElem).width())
                                 .height($(domElem).height())
                                 .css("position","absolute")
-                                .css("top",$(domElem).position().top)
+                                .css("top",$(domElem).position().top - 40)
                                 .css("left",$(domElem).position().left)
                                 .find(".taskContainer").removeAttr("contenteditable");                                
                                 
@@ -128,15 +139,22 @@ function init(){
                         opacityChanged = false;
                     }
                 });
+                
                 $(document).disableTextSelect(); 
             }
         } else {            
             if(!$(this).hasClass("selected")){
                 $(this).addClass("selected");
                 $("#wgt_display").removeClass("selected");
-                $(".style_select").css("display","block");                
+                $("#parameters").css("display","block");   
+                tmpwh = $(window).height();
+                tmpww = $(window).width();
+                resizeFlag = true;
+                window.resizeTo(tmpww, tmpwh + 44)
+                $("#data").css("padding-bottom","42px");
+                $("#leftDiv").css("border-top-left-radius","0px");
+                $("#rightDiv").css("border-top-right-radius","0px");
                 $(this).css("display", "none");
-                $("#wgt_add").css("display", "block");
                 $("#wgt_display").css("display", "block");
                 mode = true; 
                 $(document).enableTextSelect(); 
@@ -171,12 +189,15 @@ function init(){
     $("#wgt_help").click(function(){
         var tmp = $(this);
         if($(this).hasClass("open")){
+            $(this).removeClass("help_pad").removeClass("help_wood")
             $("#help").slideUp("100", function(){
                 tmp.removeClass("open");
                 $("#data").show();
+                ($("#wgt_edit").hasClass("selected"))?$("#parameters").show():'';
             });
         } else {            
-            $("#data").hide();
+            ($("#style_select").val() == 1)?$(this).removeClass("help_pad").addClass("help_wood"):$(this).removeClass("help_wood").addClass("help_pad");
+            $("#data, #parameters").hide();
             $("#help").slideDown("100", function(){
                 tmp.addClass("open");
             });
@@ -200,10 +221,10 @@ function init(){
         $(document).disableTextSelect();
     });
     
-    $(".style_select option[value='1']").text(sankoreLang.slate);
+    $("#style_select option[value='1']").text(sankoreLang.slate);
-    $(".style_select option[value='2']").text(sankoreLang.pad);
+    $("#style_select option[value='2']").text(sankoreLang.pad);
     
-    $(".style_select").change(function (event){
+    $("#style_select").change(function (event){
         changeStyle($(this).find("option:selected").val());
     })
     
@@ -354,12 +375,12 @@ function init(){
             if((prevBottom + 15 + curHeight) < ($(window).height() - 54))
                 curr.css("top", prevBottom + 15 + "px");                        
             else
-                curr.css("top", "60px").css("left", prevLeft + 255 + "px");            
+                curr.css("top", "100px").css("left", prevLeft + 255 + "px");            
         } else {
             if((prevBottom + 15 + curHeight) < ($(window).height() - 54))
                 curr.css("top", prevBottom + 15 + "px").css("left", prevLeft + "px");           
             else
-                curr.css("top", "60px").css("left", prevLeft + 255 + "px");
+                curr.css("top", "100px").css("left", prevLeft + 255 + "px");
         }
         prevBottom = curr.position().top + curr.height(),
         prevLeft = curr.position().left;
@@ -372,6 +393,7 @@ function init(){
     popupBack.css("left", ($(window).width() - 360)*50/$(window).width() + "%");
     
     $(window).resize(function(){
+        if(!resizeFlag){
             if($("#wgt_edit").hasClass("selected")){
                 if($(".editContainer").size() > 1){            
                     var prev = $(".editContainer:first"),
@@ -388,12 +410,14 @@ function init(){
             }
             popupBack.css("top", ($(window).height() - 138)*50/$(window).height() + "%");
             popupBack.css("left", ($(window).width() - 360)*50/$(window).width() + "%");
+        } else 
+            resizeFlag = false;
     });
     
     if (window.widget) {
         window.widget.onleave = function(){
             exportToSankore();
-            sankore.setPreference("by_style", $(".style_select").find("option:selected").val());
+            sankore.setPreference("by_style", $("#style_select").find("option:selected").val());
         }
     }
     
@@ -416,7 +440,7 @@ function init(){
                     objToExport.data2 = $(domElem).find(".readyTask").find(":last-child").text();
                     objToExport.width = $(domElem).width();
                     objToExport.height = $(domElem).height();
-                    objToExport.top = $(domElem).position().top;
+                    objToExport.top = $(domElem).position().top - 40;
                     objToExport.left = $(domElem).position().left;
                     arrayToExport.push(objToExport);
                 });
@@ -475,14 +499,14 @@ function reloadItems(){
 
 //order items
 function orderItems(items){
-    var bottom = 45,
+    var bottom = ($("#wgt_edit").hasClass("selected"))?85:45,
     lastItemLeft = 54; 
     for (var i in items){
         if((bottom + items[i].height()) < ($(window).height() - 54)){
             items[i].css("top", bottom + 15 + "px").css("left", lastItemLeft + "px").appendTo("#data");
             bottom += items[i].height() + 15;
         } else {
-            bottom = 60;
+            bottom = 100;
             lastItemLeft += 255;
             items[i].css("top", bottom + "px").css("left", lastItemLeft + "px").appendTo("#data");
             bottom += items[i].height();
@@ -507,7 +531,7 @@ function shuffle( arr )
 //adding a new task to the page
 function addTask(expression, result){
     var lastItem = $(".editContainer:last"),
-    lastItemPos = lastItem.length ? lastItem.position().top : 45,
+    lastItemPos = lastItem.length ? lastItem.position().top : 85,
     lastItemHeight = lastItem.length ? lastItem.height() : 0,
     lastItemLeft = lastItem.length ? lastItem.position().left : 54;
     var bottom = lastItemPos + lastItemHeight + 85;
@@ -519,7 +543,7 @@ function addTask(expression, result){
     if(bottom < ($(window).height() - 54)){
         editContent.css("top", lastItemPos + lastItemHeight + 15 + "px").css("left", lastItemLeft + "px").appendTo("#data");
     } else {
-        lastItemPos = 45;
+        lastItemPos = 85;
         editContent.css("top", lastItemPos + 15 + "px").css("left", lastItemLeft + 255 + "px").appendTo("#data");
     }    
     main.appendTo(editContent);
@@ -538,13 +562,12 @@ 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_edit").removeClass("pad_color").removeClass("pad_edit");
             $("#wgt_help").removeClass("pad_color").removeClass("pad_help");
-            $("#wgt_display").removeClass("pad_color").removeClass("pad_edit");
+            $("#wgt_edit").removeClass("pad_color").removeClass("pad_edit");
-            $("#wgt_add").removeClass("pad_color").removeClass("pad_add");
             $("#wgt_name").removeClass("pad_color");
-            $(".style_select").removeClass("pad_select").removeClass("none_select").val(val);
+            $("#wgt_display").addClass("display_wood");
-            $("body, html").removeClass("without_radius");
+            $("#style_select").val(val);
+            $("body, html").removeClass("without_radius").addClass("radius_ft");
             break;
         case "2":
             $(".b_top_left").addClass("btl_pad").removeClass("without_back");
@@ -556,13 +579,12 @@ 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_edit").addClass("pad_color").addClass("pad_edit");
             $("#wgt_help").addClass("pad_color").addClass("pad_help");
-            $("#wgt_display").addClass("pad_color").addClass("pad_edit");
+            $("#wgt_edit").addClass("pad_color").addClass("pad_edit");
-            $("#wgt_add").addClass("pad_color").addClass("pad_add");
             $("#wgt_name").addClass("pad_color");
-            $(".style_select").addClass("pad_select").removeClass("none_select").val(val);
+            $("#wgt_display").removeClass("display_wood");
-            $("body, html").removeClass("without_radius");
+            $("#style_select").val(val);
+            $("body, html").removeClass("without_radius").removeClass("radius_ft");
             break;
         case "3":
             $(".b_top_left").addClass("without_back").removeClass("btl_pad");
@@ -573,14 +595,13 @@ 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_help").addClass("pad_color").addClass("pad_help");
-            $("#wgt_display").addClass("pad_color").addClass("pad_edit");
-            $("#wgt_add").addClass("pad_color").addClass("pad_add");
             $("#wgt_name").addClass("pad_color");
-            $(".style_select").addClass("none_select").val(val);
+            $("#wgt_display").removeClass("display_wood");
-            $("body, html").addClass("without_radius");
+            $("#style_select").val(val);
+            $("body, html").addClass("without_radius").removeClass("radius_ft");
             break;
     }
     if($("#wgt_edit").hasClass("selected"))

resources/library/interactivities/Enveloppe.wgt/js/help_fr-template.js

@@ -8,7 +8,7 @@
 <p>Le bouton “Modifier” vous permet : </p>
 <ul>
 <li>de choisir le thème de l’interactivité : tablette, ardoise ou aucun (par défaut tablette), </li>
-<li>de déterminer le nombre de trombone(s) souhaités.</li> 
+<li>de déterminer le nombre de trombone(s) souhaité(s).</li> 
 </ul>
 
 <p>Le bouton “Afficher” vous permet d’utiliser l’activité.</p>

resources/library/interactivities/Etudier.wgt/css/basic.css

@@ -3,7 +3,7 @@ html, body{
     height: 100%;
     margin: 0;
     padding: 0;
-    border-radius: 50px;
+    border-radius: 35px;
     overflow: hidden;
 }
 
@@ -28,14 +28,6 @@ body{
     margin: 5px 10px;
 }
 
-.green_point{
-    background-image: url(../img/green_point.png);
-}
-
-.red_point{
-    background-image: url(../img/red_point.png);
-}
-
 #display_text, #edit_text{
     height: 19px;
     padding: 3px 0 0 0;
@@ -362,57 +354,33 @@ li>div{
     margin: 10px 10px 0 10px;
     padding: 0;
     float: left;
-    /*font-family: "Lobster13Regular";*/
+    font-family: Arial,Helvetica,sans-serif;
     font-size: 24px;
-    color: #8c5730;
+    color: #7F613F;
+    text-shadow: #FFDCA9 0 1px 0;
 }
 
-#wgt_reload, #wgt_edit, #wgt_display, #wgt_help{
+#wgt_edit, #wgt_display, #wgt_help{
     cursor: pointer;
-    height: 44px;
     margin: 10px 10px 0 0;
     float: right;
-    /*font-family: "Lobster13Regular";*/
+    font-family: Arial,Helvetica,sans-serif;
     font-size: 24px;    
-    color: #8c5730;
+    line-height: 32px;
 }
 
 #wgt_display{
-    padding-left: 40px;
+    padding-left: 35px;
-    background-image: url(../img/slate-edit.png);
+    background: url(../img/toolbar-edit.png) left -32px no-repeat;
-    background-repeat: no-repeat;
+    color: white;
-    background-position: top 0;
     display: none;
 }
 
 #wgt_edit{    
-    padding-left: 40px;
+    padding-left: 35px;
-    background-image: url(../img/slate-edit.png);
+    background: url(../img/slate-toolbar-edit.png) left top no-repeat;
-    background-repeat: no-repeat;
+    color: #7F613F;
-    background-position: top 0;
+    text-shadow: #FFDCA9 0 1px 0;
-}
-
-#wgt_reload{
-    padding-left: 40px;
-    background-image: url(../img/slate-toolbar-reload.png);
-    background-repeat: no-repeat;
-    background-position: top 0;
-}
-
-.style_select{    
-    width: 120px;
-    /*font-family: "Lobster13Regular";*/
-    font-size: 24px;
-    float: right;
-    margin: 10px 20px 0 0;
-    border-radius: 10px;
-    background-image: url(../img/ar_down.png);
-    background-color: #d4aa79;
-    color: #8c5730;
-    background-position: 105px 11px;
-    background-repeat: no-repeat;
-    -webkit-appearance: menulist-text;
-    display: none;
 }
 
 .btl_pad{
@@ -447,58 +415,88 @@ li>div{
     background-image: url(../img/pad-bottom-right.png) !important;
 }
 
-.pad_color{
+.without_radius{
-    color: white !important;
+    border-radius: 0 !important;
 }
 
-.pad_reload{
+.without_back{
-    background-image: url(../img/slate-toolbar-reload-white.png) !important;
+    background: none !important;
 }
 
-.pad_edit{
+.pad_color{
-    background-image: url(../img/slate-display.png) !important;
+    color: #FC9 !important;
+    text-shadow: none !important;
 }
 
-.pad_select{
+.pad_reload{
-    background-color: black !important;
+    background: url(../img/toolbar-reload.png) left top no-repeat !important;
-    color: white !important;
-    background-image: url(../img/ar_down_white.png) !important;
 }
 
-.without_radius{
+.pad_edit{
-    border-radius: 0 !important;
+    background: url(../img/toolbar-edit.png) left top no-repeat !important;    
 }
 
-.without_back{
+.pad_help{
-    background: none !important;
+    background: url(../img/toolbar-help.png) left top no-repeat !important;
 }
 
-.none_select{
+.help_wood{
-    background-color: #333 !important;
+    background: url(../img/slate-toolbar-help.png) left -32px no-repeat !important;
     color: white !important;
-    background-image: url(../img/ar_down_white.png) !important;
+    text-shadow: #7F613F 0 -1px 0 !important;
 }
 
-.pad_help{
+.help_pad{
-    background-image: url(../img/slate-help-white.png) !important;
+    background: url(../img/toolbar-help.png) left -32px no-repeat !important;
+    color: white !important;
 }
 
 #wgt_help{
-    padding-left: 32px;
+    padding-left: 35px;
-    background-image: url(../img/slate-help.png);
+    background: url(../img/slate-toolbar-help.png) left top no-repeat;
-    background-repeat: no-repeat;
+    color: #7F613F;
-    background-position: top 0;
+    text-shadow: #FFDCA9 0 1px 0;
 }
 
 #help{
-    width: 100%;
     height: 100%;    
     overflow: auto;
     display: none;
     background-color: #ccc;
-    padding: 5px 0 5px 5px;
+    padding: 5px;
 }
 
 .open{
 
 }
+
+#parameters{    
+    display: none;
+    padding: 10px 20px;
+    background: url("../img/parameters-bg.png");
+    border-radius: 4px 4px 0 0;
+}
+
+.inline{
+    display: inline-block;
+    font-family: "helvetica neue";
+    font-size: 14px;
+    color: #666;
+}
+
+#parameters label {
+    font-style: italic;
+}
+
+#style_select{   
+    margin-left: 10px;
+}
+
+.display_wood{
+    background: url(../img/slate-toolbar-edit.png) left -32px no-repeat !important;
+    text-shadow: #7F613F 0 -1px 0;
+}
+
+.radius_ft{
+    border-radius: 45px !important;
+}

resources/library/interactivities/Etudier.wgt/index.html

@@ -52,11 +52,6 @@
                     <div id="wgt_help"></div>                    
                     <div id="wgt_display" class="selected"></div>
                     <div id="wgt_edit"></div>
-                    <select class="style_select">
-                        <option value="1"></option>
-                        <option value="2"></option>
-                        <option value="3"></option>
-                    </select>
                 </td>
                 <td class="b_top_right">&nbsp;</td>
             </tr>
@@ -66,6 +61,17 @@
                 <td>
                     <div id="help"></div>
                     <div id="slider">
+                        <div id="parameters">
+                            <div class="inline">
+                                <label>
+                                    <select id="style_select">
+                                        <option value="1"></option>
+                                        <option value="2"></option>
+                                        <option value="3"></option>
+                                    </select>
+                                </label>
+                            </div>
+                        </div>
                         <ul>							
                         </ul>
                     </div>

resources/library/interactivities/Etudier.wgt/js/script.js

@@ -1,5 +1,5 @@
 var sankoreLang = {
-    display: "Display", 
+    display: "Close", 
     edit: "Edit", 
     text_content: "This is an example. Instead of this text you can put your own content.", 
     new_txt: "New text block",
@@ -9,7 +9,8 @@ var sankoreLang = {
     pad: "Pad",
     none: "None",
     help: "Help",
-    help_content: "This is an example of help content ..."
+    help_content: "This is an example of help content ...",
+    theme: "Theme"
 };
 
 //some flags
@@ -31,9 +32,11 @@ function start(){
     $("#wgt_name").text(sankoreLang.wgt_name);
     $("#wgt_help").text(sankoreLang.help);
     $("#help").html(sankoreLang.help_content);
-    $(".style_select option[value='1']").text(sankoreLang.slate);
+    $("#style_select option[value='1']").text(sankoreLang.slate);
-    $(".style_select option[value='2']").text(sankoreLang.pad);
+    $("#style_select option[value='2']").text(sankoreLang.pad);
-    $(".style_select option[value='3']").text(sankoreLang.none);
+    $("#style_select option[value='3']").text(sankoreLang.none);
+    var tmpl = $("div.inline label").html();
+    $("div.inline label").html(sankoreLang.theme + tmpl)
     
     if(window.sankore){
         if(sankore.preference("etudier","")){
@@ -44,7 +47,7 @@ function start(){
             showExample();
         if(sankore.preference("etudier_style","")){
             changeStyle(sankore.preference("etudier_style",""));
-            $(".style_select").val(sankore.preference("etudier_style",""));
+            $("#style_select").val(sankore.preference("etudier_style",""));
         } else
             changeStyle("3")
     } 
@@ -56,7 +59,7 @@ function start(){
         window.widget.onleave = function(){
             if(!$("#wgt_help").hasClass("open")){
                 exportData();
-                sankore.setPreference("etudier_style", $(".style_select").find("option:selected").val());
+                sankore.setPreference("etudier_style", $("#style_select").find("option:selected").val());
                 sankore.setPreference("etudier_cur_page", $("#slider").getPage());
                 sankore.setPreference("etudier_left_nav", $("#prevBtn a").css("display"));
                 sankore.setPreference("etudier_right_nav", $("#nextBtn a").css("display"));
@@ -64,19 +67,21 @@ function start(){
         }
     }
     
-    $(".style_select").change(function (event){
+    $("#style_select").change(function (event){
         changeStyle($(this).find("option:selected").val());
     })
     
     $("#wgt_help").click(function(){
         var tmp = $(this);
         if($(this).hasClass("open")){
+            $(this).removeClass("help_pad").removeClass("help_wood")
             $("#help").hide();
             tmp.removeClass("open");
             $("#slider").show();
         } else {
+            ($("#style_select").val() == 1)?$(this).removeClass("help_pad").addClass("help_wood"):$(this).removeClass("help_wood").addClass("help_pad");
             exportData();
-            sankore.setPreference("etudier_style", $(".style_select").find("option:selected").val());
+            sankore.setPreference("etudier_style", $("#style_select").find("option:selected").val());
             sankore.setPreference("etudier_cur_page", $("#slider").getPage());
             sankore.setPreference("etudier_left_nav", $("#prevBtn a").css("display"));
             sankore.setPreference("etudier_right_nav", $("#nextBtn a").css("display"));            
@@ -93,8 +98,10 @@ function start(){
                     sankore.enableDropOnWidget(false);
                 $(this).addClass("selected");
                 $("#wgt_edit").removeClass("selected");
-                $(".style_select").css("display","none");
+                $("#parameters").css("display","none");
-                
+                var tmpwh = $(window).height();
+                var tmpww = $(window).width();
+                window.resizeTo(tmpww, tmpwh - 44)
                 $("#slider li>div").each(function(){
                     var container = $(this);
                     container.removeAttr("ondragenter")
@@ -143,8 +150,10 @@ function start(){
                     sankore.enableDropOnWidget(true);
                 $(this).addClass("selected");
                 $("#wgt_display").removeClass("selected");
-                $(".style_select").css("display","block");
+                $("#parameters").css("display","block");
-                
+                tmpwh = $(window).height();
+                tmpww = $(window).width();
+                window.resizeTo(tmpww, tmpwh + 44)
                 $("#slider li>div").each(function(){
                     var container = $(this);
                     container.attr("ondragenter", "return false;")
@@ -556,10 +565,10 @@ function changeStyle(val){
             $(".b_bottom_center").removeClass("bbc_pad").removeClass("without_back");
             $("#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);
+            $("#wgt_display").addClass("display_wood");
-            $("body, html").removeClass("without_radius");
+            $("#style_select").val(val);
+            $("body, html").removeClass("without_radius").addClass("radius_ft");
             break;
         case "2":
             $(".b_top_left").addClass("btl_pad").removeClass("without_back");
@@ -572,10 +581,10 @@ function changeStyle(val){
             $(".b_bottom_center").addClass("bbc_pad").removeClass("without_back");
             $("#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);
+            $("#wgt_display").removeClass("display_wood");
-            $("body, html").removeClass("without_radius");
+            $("#style_select").val(val);
+            $("body, html").removeClass("without_radius").removeClass("radius_ft");
             break;
         case "3":
             $(".b_top_left").addClass("without_back").removeClass("btl_pad");
@@ -588,10 +597,10 @@ function changeStyle(val){
             $(".b_bottom_center").addClass("without_back").removeClass("bbc_pad");
             $("#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("none_select").val(val);
+            $("#wgt_display").removeClass("display_wood");
-            $("body, html").addClass("without_radius");
+            $("#style_select").val(val);
+            $("body, html").addClass("without_radius").removeClass("radius_ft");
             break;
     }
 }

resources/library/interactivities/Etudier.wgt/locales/fr/index.html

@@ -26,11 +26,6 @@
                     <div id="wgt_help"></div>                    
                     <div id="wgt_display" class="selected"></div>
                     <div id="wgt_edit"></div>                    
-                    <select class="style_select">
-                        <option value="1"></option>
-                        <option value="2"></option>
-                        <option value="3"></option>
-                    </select>
                 </td>
                 <td class="b_top_right">&nbsp;</td>
             </tr>
@@ -40,6 +35,17 @@
                 <td>
                     <div id="help"></div>
                     <div id="slider">
+                        <div id="parameters">
+                            <div class="inline">
+                                <label>
+                                    <select id="style_select">
+                                        <option value="1"></option>
+                                        <option value="2"></option>
+                                        <option value="3"></option>
+                                    </select>
+                                </label>
+                            </div>
+                        </div>
                         <ul>							
                         </ul>
                     </div>

resources/library/interactivities/Etudier.wgt/locales/fr/js/script.js

@@ -18,17 +18,20 @@ var sankoreLang = {
     "<ul><li>de choisir le thème de l’interactivité : tablette, ardoise ou aucun (par défaut aucun),</li>"+
     "<li>de modifier les pages du livret.</li></ul>"+
 
+
 "<p>Sur chaque page, vous pouvez :</p>"+ 
-"<ul><li>insérer des zones de texte avec le bouton “+T” situé en haut à gauche de l’interactivité. (pour modifier ces zones de texte, cliquez à l’intérieur et écrivez du texte),</li>"+
+"<ul><li>insérer des zones de texte avec le bouton “+T” situé en haut à gauche de l’interactivité (pour modifier ces zones de texte, cliquez à l’intérieur et écrivez du texte),</li>"+
 "<li>insérer des images, sons et vidéos par glisser-déposer de fichiers depuis la bibliothèque jusqu’à l’intérieur de la page du livret,</li>"+
 "<li>déplacer les textes, images, sons et vidéos à l’intérieur de la page en cliquant et en déplaçant la flèche multidirectionnelle qui se situe dans le coin supérieur gauche de chaque élément,</li>"+
 "<li>agrandir la taille d’un élément avec la double flèche en bas à droite de celui-ci,</li>"+
 "<li>supprimer un élément avec la case en haut à droite de celui-ci.</li></ul>"+
 
+
     "<p>Pour ajouter une page, cliquez sur la flèche verte accompagnée d’un “+” se trouvant en bas à gauche et à droite.</p>"+
     "<p>Pour supprimer une page, cliquez sur la croix rouge située en haut à droite de la page.</p>"+
 
-"<p>Le bouton “Afficher” vous permet d’utiliser l’activité.</p>"
+    "<p>Le bouton “Afficher” vous permet d’utiliser l’activité.</p>",
+    theme: "Thème"
 
 };
 
@@ -51,9 +54,11 @@ function start(){
     $("#wgt_name").text(sankoreLang.wgt_name);
     $("#wgt_help").text(sankoreLang.help);
     $("#help").html(sankoreLang.help_content);
-    $(".style_select option[value='1']").text(sankoreLang.slate);
+    $("#style_select option[value='1']").text(sankoreLang.slate);
-    $(".style_select option[value='2']").text(sankoreLang.pad);
+    $("#style_select option[value='2']").text(sankoreLang.pad);
-    $(".style_select option[value='3']").text(sankoreLang.none);
+    $("#style_select option[value='3']").text(sankoreLang.none);
+    var tmpl = $("div.inline label").html();
+    $("div.inline label").html(sankoreLang.theme + tmpl)
     
     if(window.sankore){
         if(sankore.preference("etudier","")){
@@ -64,7 +69,7 @@ function start(){
             showExample();
         if(sankore.preference("etudier_style","")){
             changeStyle(sankore.preference("etudier_style",""));
-            $(".style_select").val(sankore.preference("etudier_style",""));
+            $("#style_select").val(sankore.preference("etudier_style",""));
         } else
             changeStyle("3")
     } 
@@ -76,7 +81,7 @@ function start(){
         window.widget.onleave = function(){
             if(!$("#wgt_help").hasClass("open")){
                 exportData();
-                sankore.setPreference("etudier_style", $(".style_select").find("option:selected").val());
+                sankore.setPreference("etudier_style", $("#style_select").find("option:selected").val());
                 sankore.setPreference("etudier_cur_page", $("#slider").getPage());
                 sankore.setPreference("etudier_left_nav", $("#prevBtn a").css("display"));
                 sankore.setPreference("etudier_right_nav", $("#nextBtn a").css("display"));
@@ -84,19 +89,21 @@ function start(){
         }
     }
     
-    $(".style_select").change(function (event){
+    $("#style_select").change(function (event){
         changeStyle($(this).find("option:selected").val());
     })
     
     $("#wgt_help").click(function(){
         var tmp = $(this);
         if($(this).hasClass("open")){
+            $(this).removeClass("help_pad").removeClass("help_wood")
             $("#help").hide();
             tmp.removeClass("open");
             $("#slider").show();
         } else {
+            ($("#style_select").val() == 1)?$(this).removeClass("help_pad").addClass("help_wood"):$(this).removeClass("help_wood").addClass("help_pad");
             exportData();
-            sankore.setPreference("etudier_style", $(".style_select").find("option:selected").val());
+            sankore.setPreference("etudier_style", $("#style_select").find("option:selected").val());
             sankore.setPreference("etudier_cur_page", $("#slider").getPage());
             sankore.setPreference("etudier_left_nav", $("#prevBtn a").css("display"));
             sankore.setPreference("etudier_right_nav", $("#nextBtn a").css("display"));            
@@ -113,7 +120,10 @@ function start(){
                     sankore.enableDropOnWidget(false);
                 $(this).addClass("selected");
                 $("#wgt_edit").removeClass("selected");
-                $(".style_select").css("display","none");
+                $("#parameters").css("display","none");
+                var tmpwh = $(window).height();
+                var tmpww = $(window).width();
+                window.resizeTo(tmpww, tmpwh - 44)
                 
                 $("#slider li>div").each(function(){
                     var container = $(this);
@@ -163,7 +173,10 @@ function start(){
                     sankore.enableDropOnWidget(true);
                 $(this).addClass("selected");
                 $("#wgt_display").removeClass("selected");
-                $(".style_select").css("display","block");
+                $("#parameters").css("display","block");
+                tmpwh = $(window).height();
+                tmpww = $(window).width();
+                window.resizeTo(tmpww, tmpwh + 44)
                 
                 $("#slider li>div").each(function(){
                     var container = $(this);
@@ -577,10 +590,10 @@ function changeStyle(val){
             $(".b_bottom_center").removeClass("bbc_pad").removeClass("without_back");
             $("#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);
+            $("#wgt_display").addClass("display_wood");
-            $("body, html").removeClass("without_radius");
+            $("#style_select").val(val);
+            $("body, html").removeClass("without_radius").addClass("radius_ft");
             break;
         case "2":
             $(".b_top_left").addClass("btl_pad").removeClass("without_back");
@@ -593,10 +606,10 @@ function changeStyle(val){
             $(".b_bottom_center").addClass("bbc_pad").removeClass("without_back");
             $("#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);
+            $("#wgt_display").removeClass("display_wood");
-            $("body, html").removeClass("without_radius");
+            $("#style_select").val(val);
+            $("body, html").removeClass("without_radius").removeClass("radius_ft");
             break;
         case "3":
             $(".b_top_left").addClass("without_back").removeClass("btl_pad");
@@ -609,10 +622,10 @@ function changeStyle(val){
             $(".b_bottom_center").addClass("without_back").removeClass("bbc_pad");
             $("#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("none_select").val(val);
+            $("#wgt_display").removeClass("display_wood");
-            $("body, html").addClass("without_radius");
+            $("#style_select").val(val);
+            $("body, html").addClass("without_radius").removeClass("radius_ft");
             break;
     }
 }

resources/library/interactivities/Etudier.wgt/locales/ru/index.html

@@ -26,11 +26,6 @@
                     <div id="wgt_help"></div>                    
                     <div id="wgt_display" class="selected"></div>
                     <div id="wgt_edit"></div>                    
-                    <select class="style_select">
-                        <option value="1"></option>
-                        <option value="2"></option>
-                        <option value="3"></option>
-                    </select>
                 </td>
                 <td class="b_top_right">&nbsp;</td>
             </tr>
@@ -40,6 +35,17 @@
                 <td>
                     <div id="help"></div>
                     <div id="slider">
+                        <div id="parameters">
+                            <div class="inline">
+                                <label>
+                                    <select id="style_select">
+                                        <option value="1"></option>
+                                        <option value="2"></option>
+                                        <option value="3"></option>
+                                    </select>
+                                </label>
+                            </div>
+                        </div>
                         <ul>							
                         </ul>
                     </div>

resources/library/interactivities/Etudier.wgt/locales/ru/js/script.js

@@ -1,5 +1,5 @@
 var sankoreLang = {
-    display: "Показать", 
+    display: "Закрыть", 
     edit: "Изменить",
     text_content: "Это - пример. Вместо этого текста вы можете ввести свой собственный контент.", 
     new_txt: "Новый текстовый блок.",
@@ -9,7 +9,8 @@ var sankoreLang = {
     pad: "Планшет",
     none: "Нет",
     help: "Помощь",
-    help_content: "Пример текста помощи ..."
+    help_content: "Пример текста помощи ...",
+    theme: "Тема"
 };
 
 //some flags
@@ -31,9 +32,11 @@ function start(){
     $("#wgt_name").text(sankoreLang.wgt_name);
     $("#wgt_help").text(sankoreLang.help);
     $("#help").html(sankoreLang.help_content);
-    $(".style_select option[value='1']").text(sankoreLang.slate);
+    $("#style_select option[value='1']").text(sankoreLang.slate);
-    $(".style_select option[value='2']").text(sankoreLang.pad);
+    $("#style_select option[value='2']").text(sankoreLang.pad);
-    $(".style_select option[value='3']").text(sankoreLang.none);
+    $("#style_select option[value='3']").text(sankoreLang.none);
+    var tmpl = $("div.inline label").html();
+    $("div.inline label").html(sankoreLang.theme + tmpl)
     
     if(window.sankore){
         if(sankore.preference("etudier","")){
@@ -44,7 +47,7 @@ function start(){
             showExample();
         if(sankore.preference("etudier_style","")){
             changeStyle(sankore.preference("etudier_style",""));
-            $(".style_select").val(sankore.preference("etudier_style",""));
+            $("#style_select").val(sankore.preference("etudier_style",""));
         } else
             changeStyle("3")
     } 
@@ -56,7 +59,7 @@ function start(){
         window.widget.onleave = function(){
             if(!$("#wgt_help").hasClass("open")){
                 exportData();
-                sankore.setPreference("etudier_style", $(".style_select").find("option:selected").val());
+                sankore.setPreference("etudier_style", $("#style_select").find("option:selected").val());
                 sankore.setPreference("etudier_cur_page", $("#slider").getPage());
                 sankore.setPreference("etudier_left_nav", $("#prevBtn a").css("display"));
                 sankore.setPreference("etudier_right_nav", $("#nextBtn a").css("display"));
@@ -64,19 +67,21 @@ function start(){
         }
     }
     
-    $(".style_select").change(function (event){
+    $("#style_select").change(function (event){
         changeStyle($(this).find("option:selected").val());
     })
     
     $("#wgt_help").click(function(){
         var tmp = $(this);
         if($(this).hasClass("open")){
+            $(this).removeClass("help_pad").removeClass("help_wood")
             $("#help").hide();
             tmp.removeClass("open");
             $("#slider").show();
         } else {
+            ($("#style_select").val() == 1)?$(this).removeClass("help_pad").addClass("help_wood"):$(this).removeClass("help_wood").addClass("help_pad");
             exportData();
-            sankore.setPreference("etudier_style", $(".style_select").find("option:selected").val());
+            sankore.setPreference("etudier_style", $("#style_select").find("option:selected").val());
             sankore.setPreference("etudier_cur_page", $("#slider").getPage());
             sankore.setPreference("etudier_left_nav", $("#prevBtn a").css("display"));
             sankore.setPreference("etudier_right_nav", $("#nextBtn a").css("display"));            
@@ -93,7 +98,10 @@ function start(){
                     sankore.enableDropOnWidget(false);
                 $(this).addClass("selected");
                 $("#wgt_edit").removeClass("selected");
-                $(".style_select").css("display","none");
+                $("#parameters").css("display","none");
+                var tmpwh = $(window).height();
+                var tmpww = $(window).width();
+                window.resizeTo(tmpww, tmpwh - 44)
                 
                 $("#slider li>div").each(function(){
                     var container = $(this);
@@ -109,7 +117,8 @@ function start(){
                         $(this).find(".size_up").remove();
                         $(this).find(".size_down").remove();
                         $(this).find(".resize_block").remove();
-                        $(this).removeAttr("contenteditable").removeClass("block_border");
+                        $(this).find(".real_text").removeAttr("contenteditable");
+                        $(this).removeClass("block_border");
                         $(this).css("position","absolute");
                     });
                     
@@ -142,7 +151,10 @@ function start(){
                     sankore.enableDropOnWidget(true);
                 $(this).addClass("selected");
                 $("#wgt_display").removeClass("selected");
-                $(".style_select").css("display","block");
+                $("#parameters").css("display","block");
+                tmpwh = $(window).height();
+                tmpww = $(window).width();
+                window.resizeTo(tmpww, tmpwh + 44)
                 
                 $("#slider li>div").each(function(){
                     var container = $(this);
@@ -158,7 +170,8 @@ function start(){
                         $("<div class='size_up' contenteditable='false'>").appendTo($(this));
                         $("<div class='size_down' contenteditable='false'>").appendTo($(this));
                         $("<div class='resize_block' contenteditable='false'>").appendTo($(this));
-                        $(this).attr("contenteditable", "true").addClass("block_border");
+                        $(this).find(".real_text").attr("contenteditable", "true");
+                        $(this).addClass("block_border");
                     });
                     
                     container.find(".img_block").each(function(){
@@ -292,7 +305,7 @@ function start(){
                 //var height = resize_obj.object.parent().height() - resize_obj.top + event.clientY;
                 resize_obj.left = event.clientX;
                 resize_obj.top = event.clientY;
-                resize_obj.object.parent().width(width).height("");
+                resize_obj.object.parent().width(width);
             } else {
                 width = resize_obj.object.parent().width() - resize_obj.left + event.clientX;
                 var height = resize_obj.object.parent().height() - resize_obj.top + event.clientY;
@@ -367,13 +380,13 @@ function start(){
     
     $(".add_text").live("click", function(){
         var container = $(this).parent();
-        var text_block = $("<div class='text_block'>" + sankoreLang.new_txt + "</div>").appendTo(container);
+        var text_block = $("<div class='text_block'><div class='real_text' contenteditable='true'>" + sankoreLang.new_txt + "</div></div>").appendTo(container);
         $("<div class='move_block' contenteditable='false'>").appendTo(text_block);
         $("<div class='close_img' contenteditable='false'>").appendTo(text_block);
         $("<div class='size_up' contenteditable='false'>").appendTo(text_block);
         $("<div class='size_down' contenteditable='false'>").appendTo(text_block);
         $("<div class='resize_block' contenteditable='false'>").appendTo(text_block);
-        text_block.attr("contenteditable", "true").addClass("block_border");
+        text_block.addClass("block_border");
     });
 }
 
@@ -391,7 +404,7 @@ function exportData(){
             txt_block.left = $(this).position().left;
             txt_block.w = $(this).width();
             txt_block.fz = $(this).css("font-size");
-            txt_block.val = $(this).text();
+            txt_block.val = $(this).find(".real_text").html();
             cont_obj.text.push(txt_block);
         });
         cont_obj.imgs = [];
@@ -433,7 +446,7 @@ function importData(data){
         var div = $("<div>").appendTo(li);
         
         for(var j in data[i].text){
-            var text_div = $("<div class='text_block'>" + data[i].text[j].val + "</div>");
+            var text_div = $("<div class='text_block'><div class='real_text'>" + data[i].text[j].val + "</div></div>");
             text_div.draggable().css("position","absolute")
             .width(data[i].text[j].w)
             .css("top", data[i].text[j].top)
@@ -486,7 +499,7 @@ function showExample(){
     
     var li1 = $("<li>");
     var div1 = $("<div>").appendTo(li1);
-    $("<div class='text_block'>" + sankoreLang.text_content + "</div>").draggable().appendTo(div1)
+    $("<div class='text_block'><div class='real_text'>" + sankoreLang.text_content + "</div></div>").draggable().appendTo(div1)
     li1.width($("#slider").width()).height($("#slider").height());
     $("#slider ul").append(li1);
     var li2 = $("<li>");
@@ -507,7 +520,7 @@ function showExample(){
     $("#slider ul").append(li3);
     var li4 = $("<li>");
     var div4 = $("<div>").appendTo(li4);
-    $("<div class='text_block'>" + sankoreLang.text_content + "</div>").draggable().appendTo(div4);
+    $("<div class='text_block'><div class='real_text'>" + sankoreLang.text_content + "</div></div>").draggable().appendTo(div4);
     var img2 = $("<div class='img_block' style='text-align: center;'></div>").draggable().appendTo(div4);
     $("<img src=\"../../objects/1.gif\" style=\"display: inline;\" height=\"120\"/>").appendTo(img2);
     var audio_block2 = $("<div class='audio_block'>").draggable().appendTo(div4);
@@ -555,10 +568,10 @@ function changeStyle(val){
             $(".b_bottom_center").removeClass("bbc_pad").removeClass("without_back");
             $("#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);
+            $("#wgt_display").addClass("display_wood");
-            $("body, html").removeClass("without_radius");
+            $("#style_select").val(val);
+            $("body, html").removeClass("without_radius").addClass("radius_ft");
             break;
         case "2":
             $(".b_top_left").addClass("btl_pad").removeClass("without_back");
@@ -571,10 +584,10 @@ function changeStyle(val){
             $(".b_bottom_center").addClass("bbc_pad").removeClass("without_back");
             $("#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);
+            $("#wgt_display").removeClass("display_wood");
-            $("body, html").removeClass("without_radius");
+            $("#style_select").val(val);
+            $("body, html").removeClass("without_radius").removeClass("radius_ft");
             break;
         case "3":
             $(".b_top_left").addClass("without_back").removeClass("btl_pad");
@@ -587,10 +600,10 @@ function changeStyle(val){
             $(".b_bottom_center").addClass("without_back").removeClass("bbc_pad");
             $("#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("none_select").val(val);
+            $("#wgt_display").removeClass("display_wood");
-            $("body, html").addClass("without_radius");
+            $("#style_select").val(val);
+            $("body, html").addClass("without_radius").removeClass("radius_ft");
             break;
     }
 }

resources/library/interactivities/Ordre images.wgt/css/basic.css

@@ -3,7 +3,7 @@ html, body{
     height: 100%;
     margin: 0;
     padding: 0;    
-    border-radius: 50px;
+    border-radius: 35px;
     overflow: hidden;
 }
 
@@ -28,14 +28,6 @@ body{
     margin: 5px 10px;
 }
 
-.green_point{
-    background-image: url(../img/green_point.png);
-}
-
-.red_point{
-    background-image: url(../img/red_point.png);
-}
-
 #display_text, #edit_text{
     height: 19px;
     padding: 3px 0 0 0;
@@ -245,57 +237,40 @@ body{
     margin: 10px 10px 0 10px;
     padding: 0;
     float: left;
-    /*font-family: "Lobster13Regular";*/
+    font-family: Arial,Helvetica,sans-serif;
     font-size: 24px;
-    color: #8c5730;
+    color: #7F613F;
+    text-shadow: #FFDCA9 0 1px 0;
 }
 
 #wgt_reload, #wgt_edit, #wgt_display, #wgt_help{
     cursor: pointer;
-    height: 44px;
     margin: 10px 10px 0 0;
     float: right;
-    /*font-family: "Lobster13Regular";*/
+    font-family: Arial,Helvetica,sans-serif;
     font-size: 24px;    
-    color: #8c5730;
+    line-height: 32px;
 }
 
 #wgt_display{
-    padding-left: 40px;
+    padding-left: 35px;
-    background-image: url(../img/slate-edit.png);
+    background: url(../img/toolbar-edit.png) left -32px no-repeat;
-    background-repeat: no-repeat;
+    color: white;
-    background-position: top 0;
     display: none;
 }
 
 #wgt_edit{    
-    padding-left: 40px;
+    padding-left: 35px;
-    background-image: url(../img/slate-edit.png);
+    background: url(../img/slate-toolbar-edit.png) left top no-repeat;
-    background-repeat: no-repeat;
+    color: #7F613F;
-    background-position: top 0;
+    text-shadow: #FFDCA9 0 1px 0;
 }
 
 #wgt_reload{
-    padding-left: 40px;
+    padding-left: 35px;
-    background-image: url(../img/slate-toolbar-reload.png);
+    background: url(../img/slate-toolbar-reload.png) left top no-repeat;
-    background-repeat: no-repeat;
+    color: #7F613F;
-    background-position: top 0;
+    text-shadow: #FFDCA9 0 1px 0;
-}
-
-.style_select{    
-    width: 120px;
-    /*font-family: "Lobster13Regular";*/
-    font-size: 24px;
-    float: right;
-    margin: 10px 20px 0 0;
-    border-radius: 10px;
-    background-image: url(../img/ar_down.png);
-    background-color: #d4aa79;
-    color: #8c5730;
-    background-position: 105px 11px;
-    background-repeat: no-repeat;
-    -webkit-appearance: menulist-text;
-    display: none;
 }
 
 .btl_pad{
@@ -330,51 +305,50 @@ body{
     background-image: url(../img/pad-bottom-right.png) !important;
 }
 
-.pad_color{
+.without_radius{
-    color: white !important;
+    border-radius: 0 !important;
 }
 
-.pad_reload{
+.without_back{
-    background-image: url(../img/slate-toolbar-reload-white.png) !important;
+    background: none !important;
 }
 
-.pad_edit{
+.pad_color{
-    background-image: url(../img/slate-display.png) !important;
+    color: #FC9 !important;
+    text-shadow: none !important;
 }
 
-.pad_select{
+.pad_reload{
-    background-color: black !important;
+    background: url(../img/toolbar-reload.png) left top no-repeat !important;
-    color: white !important;
-    background-image: url(../img/ar_down_white.png) !important;
 }
 
-.without_radius{
+.pad_edit{
-    border-radius: 0 !important;
+    background: url(../img/toolbar-edit.png) left top no-repeat !important;    
 }
 
-.without_back{
+.pad_help{
-    background: none !important;
+    background: url(../img/toolbar-help.png) left top no-repeat !important;
 }
 
-.none_select{
+.help_wood{
-    background-color: #333 !important;
+    background: url(../img/slate-toolbar-help.png) left -32px no-repeat !important;
     color: white !important;
-    background-image: url(../img/ar_down_white.png) !important;
+    text-shadow: #7F613F 0 -1px 0 !important;
 }
 
-.pad_help{
+.help_pad{
-    background-image: url(../img/slate-help-white.png) !important;
+    background: url(../img/toolbar-help.png) left -32px no-repeat !important;
+    color: white !important;
 }
 
 #wgt_help{
-    padding-left: 32px;
+    padding-left: 35px;
-    background-image: url(../img/slate-help.png);
+    background: url(../img/slate-toolbar-help.png) left top no-repeat;
-    background-repeat: no-repeat;
+    color: #7F613F;
-    background-position: top 0;
+    text-shadow: #FFDCA9 0 1px 0;
 }
 
 #help{
-    width: 100%;
     height: 100%;    
     overflow: auto;
     display: none;
@@ -385,3 +359,34 @@ body{
 .open{
 
 }
+
+#parameters{    
+    display: none;
+    padding: 10px 20px;
+    background: url("../img/parameters-bg.png");
+    border-radius: 4px 4px 0 0;
+}
+
+.inline{
+    display: inline-block;
+    font-family: "helvetica neue";
+    font-size: 14px;
+    color: #666;
+}
+
+#parameters label {
+    font-style: italic;
+}
+
+#style_select{   
+    margin-left: 10px;
+}
+
+.display_wood{
+    background: url(../img/slate-toolbar-edit.png) left -32px no-repeat !important;
+    text-shadow: #7F613F 0 -1px 0;
+}
+
+.radius_ft{
+    border-radius: 45px !important;
+}

resources/library/interactivities/Ordre images.wgt/index.html

@@ -52,11 +52,6 @@
                     <div id="wgt_reload"></div>                    
                     <div id="wgt_display" class="selected"></div>
                     <div id="wgt_edit"></div>                    
-                    <select class="style_select">
-                        <option value="1"></option>
-                        <option value="2"></option>
-                        <option value="3"></option>
-                    </select>
                 </td>
                 <td class="b_top_right">&nbsp;</td>
             </tr>
@@ -66,7 +61,17 @@
                 <td>
                     <div id="help"></div>
                     <div id="data">
-                        
+                        <div id="parameters">
+                            <div class="inline">
+                                <label>
+                                    <select id="style_select">
+                                        <option value="1"></option>
+                                        <option value="2"></option>
+                                        <option value="3"></option>
+                                    </select>
+                                </label>
+                            </div>
+                        </div>
                     </div>
                 </td>
                 <td class="b_center_right">&nbsp;</td>

resources/library/interactivities/Ordre images.wgt/js/script.js

@@ -1,5 +1,5 @@
 var sankoreLang = {
-    display: "Display", 
+    display: "Close", 
     edit: "Edit", 
     short_desc: "Place the pictures in ascending order.", 
     add: "Add new block",
@@ -10,7 +10,8 @@ var sankoreLang = {
     pad: "Pad",
     none: "None",
     help: "Help",
-    help_content: "This is an example of help content ..."
+    help_content: "This is an example of help content ...",
+    theme: "Theme"
 };
 
 //main function
@@ -22,9 +23,11 @@ function start(){
     $("#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='1']").text(sankoreLang.slate);
-    $(".style_select option[value='2']").text(sankoreLang.pad);
+    $("#style_select option[value='2']").text(sankoreLang.pad);
-    $(".style_select option[value='3']").text(sankoreLang.none);
+    $("#style_select option[value='3']").text(sankoreLang.none);
+    var tmpl = $("div.inline label").html();
+    $("div.inline label").html(sankoreLang.theme + tmpl)
     
     if(window.sankore){
         if(sankore.preference("odr_des_imgs","")){
@@ -47,11 +50,13 @@ function start(){
     $("#wgt_help").click(function(){
         var tmp = $(this);
         if($(this).hasClass("open")){
+            $(this).removeClass("help_pad").removeClass("help_wood")
             $("#help").slideUp("100", function(){
                 tmp.removeClass("open");
                 $("#data").show();
             });
         } else {
+            ($("#style_select").val() == 1)?$(this).removeClass("help_pad").addClass("help_wood"):$(this).removeClass("help_wood").addClass("help_pad");
             $("#data").hide();
             $("#help").slideDown("100", function(){
                 tmp.addClass("open");
@@ -72,7 +77,7 @@ function start(){
         exportData();
     });
     
-    $(".style_select").change(function (event){
+    $("#style_select").change(function (event){
         changeStyle($(this).find("option:selected").val());
     })
     
@@ -83,7 +88,7 @@ function start(){
                     sankore.enableDropOnWidget(false);
                 $(this).addClass("selected");
                 $("#wgt_edit").removeClass("selected");
-                $(".style_select").css("display","none");
+                $("#parameters").css("display","none");
                 $(".add_block").remove();
                 $(".cont").each(function(){
                     var container = $(this);
@@ -130,7 +135,7 @@ function start(){
                     sankore.enableDropOnWidget(true);
                 $(this).addClass("selected");
                 $("#wgt_display").removeClass("selected");
-                $(".style_select").css("display","block");
+                $("#parameters").css("display","block");
                 $(".cont").each(function(){
                     var container = $(this);
     
@@ -214,7 +219,7 @@ function exportData(){
     }
     $(".cont").each(function(){
         var cont_obj = new Object();
-        cont_obj.style = $(".style_select").find("option:selected").val();
+        cont_obj.style = $("#style_select").find("option:selected").val();
         cont_obj.text = $(this).find(".text_cont").text();
         cont_obj.right = $(this).find(".imgs_cont>input").val();
         cont_obj.imgs = [];
@@ -231,7 +236,7 @@ function exportData(){
     
     if($(".cont").size() == 0){
         var cont_obj = new Object();
-        cont_obj.style = $(".style_select").find("option:selected").val();
+        cont_obj.style = $("#style_select").find("option:selected").val();
         cont_obj.tmp = "clear";
         array_to_export.push(cont_obj);
     }
@@ -254,12 +259,12 @@ function importData(data){
     for(var i in data){
         if(data[i].tmp){
             changeStyle(data[i].style);
-            $(".style_select").val(data[i].style);
+            $("#style_select").val(data[i].style);
         }
         else {
             if(i == 0){
                 changeStyle(data[i].style);
-                $(".style_select").val(data[i].style);
+                $("#style_select").val(data[i].style);
             }
             var tmp_array = [];
             var container = $("<div class='cont'>");
@@ -451,10 +456,10 @@ function changeStyle(val){
             $("#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);
+            $("#wgt_display").addClass("display_wood");
-            $("body, html").removeClass("without_radius");
+            $("#style_select").val(val);
+            $("body, html").removeClass("without_radius").addClass("radius_ft");
             break;
         case "2":
             $(".b_top_left").addClass("btl_pad").removeClass("without_back");
@@ -468,10 +473,10 @@ function changeStyle(val){
             $("#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);
+            $("#wgt_display").removeClass("display_wood");
-            $("body, html").removeClass("without_radius");
+            $("#style_select").val(val);
+            $("body, html").removeClass("without_radius").removeClass("radius_ft");
             break;
         case "3":
             $(".b_top_left").addClass("without_back").removeClass("btl_pad");
@@ -485,10 +490,10 @@ function changeStyle(val){
             $("#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);
+            $("#wgt_display").removeClass("display_wood");
-            $("body, html").addClass("without_radius");
+            $("#style_select").val(val);
+            $("body, html").addClass("without_radius").removeClass("radius_ft");
             break;
     }
 }

resources/library/interactivities/Ordre images.wgt/locales/fr/index.html

@@ -26,11 +26,6 @@
                     <div id="wgt_reload"></div>                    
                     <div id="wgt_display" class="selected"></div>
                     <div id="wgt_edit"></div>                    
-                    <select class="style_select">
-                        <option value="1"></option>
-                        <option value="2"></option>
-                        <option value="3"></option>
-                    </select>
                 </td>
                 <td class="b_top_right">&nbsp;</td>
             </tr>
@@ -40,7 +35,17 @@
                 <td>
                     <div id="help"></div>
                     <div id="data">
-                        
+                        <div id="parameters">
+                            <div class="inline">
+                                <label>
+                                    <select id="style_select">
+                                        <option value="1"></option>
+                                        <option value="2"></option>
+                                        <option value="3"></option>
+                                    </select>
+                                </label>
+                            </div>
+                        </div>
                     </div>
                 </td>
                 <td class="b_center_right">&nbsp;</td>

resources/library/interactivities/Ordre images.wgt/locales/fr/js/script.js

@@ -1,6 +1,6 @@
 
 var sankoreLang = {
-    display: "Afficher", 
+    display: "Fermer", 
     edit: "Modifier", 
     short_desc: "Placez les images dans l'ordre croissant.", 
     add: "Nouveau bloc",
@@ -33,7 +33,8 @@ var sankoreLang = {
 
     "<p>Pour supprimer un exercice, cliquez sur la croix à gauche du numéro de l’exercice.</p>"+
 
-"<p>Le bouton “Afficher” vous permet d’utiliser l’activité.</p>"
+    "<p>Le bouton “Afficher” vous permet d’utiliser l’activité.</p>",
+    theme: "Thème"
 };
 
 //main function
@@ -45,9 +46,11 @@ function start(){
     $("#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='1']").text(sankoreLang.slate);
-    $(".style_select option[value='2']").text(sankoreLang.pad);
+    $("#style_select option[value='2']").text(sankoreLang.pad);
-    $(".style_select option[value='3']").text(sankoreLang.none);
+    $("#style_select option[value='3']").text(sankoreLang.none);
+    var tmpl = $("div.inline label").html();
+    $("div.inline label").html(sankoreLang.theme + tmpl)
     
     if(window.sankore){
         if(sankore.preference("odr_des_imgs","")){
@@ -70,11 +73,13 @@ function start(){
     $("#wgt_help").click(function(){
         var tmp = $(this);
         if($(this).hasClass("open")){
+            $(this).removeClass("help_pad").removeClass("help_wood")
             $("#help").slideUp("100", function(){
                 tmp.removeClass("open");
                 $("#data").show();
             });
         } else {
+            ($("#style_select").val() == 1)?$(this).removeClass("help_pad").addClass("help_wood"):$(this).removeClass("help_wood").addClass("help_pad");
             $("#data").hide();
             $("#help").slideDown("100", function(){
                 tmp.addClass("open");
@@ -95,7 +100,7 @@ function start(){
         exportData();
     });
     
-    $(".style_select").change(function (event){
+    $("#style_select").change(function (event){
         changeStyle($(this).find("option:selected").val());
     })
     
@@ -105,7 +110,7 @@ function start(){
                 sankore.enableDropOnWidget(false);
                 $(this).addClass("selected");
                 $("#wgt_edit").removeClass("selected");
-                $(".style_select").css("display","none");
+                $("#parameters").css("display","none");
                 $(".add_block").remove();
                 $(".cont").each(function(){
                     var container = $(this);
@@ -151,7 +156,7 @@ function start(){
                 sankore.enableDropOnWidget(true);
                 $(this).addClass("selected");
                 $("#wgt_display").removeClass("selected");
-                $(".style_select").css("display","block");
+                $("#parameters").css("display","block");
                 $(".cont").each(function(){
                     var container = $(this);
     
@@ -235,7 +240,7 @@ function exportData(){
     }
     $(".cont").each(function(){
         var cont_obj = new Object();
-        cont_obj.style = $(".style_select").find("option:selected").val();
+        cont_obj.style = $("#style_select").find("option:selected").val();
         cont_obj.text = $(this).find(".text_cont").text();
         cont_obj.right = $(this).find(".imgs_cont>input").val();
         cont_obj.imgs = [];
@@ -252,7 +257,7 @@ function exportData(){
     
     if($(".cont").size() == 0){
         var cont_obj = new Object();
-        cont_obj.style = $(".style_select").find("option:selected").val();
+        cont_obj.style = $("#style_select").find("option:selected").val();
         cont_obj.tmp = "clear";
         array_to_export.push(cont_obj);
     }
@@ -270,11 +275,11 @@ function importData(data){
     for(var i in data){
         if(data[i].tmp){
             changeStyle(data[i].style);
-            $(".style_select").val(data[i].style);
+            $("#style_select").val(data[i].style);
         }else{
             if(i == 0){
                 changeStyle(data[i].style);
-                $(".style_select").val(data[i].style);
+                $("#style_select").val(data[i].style);
             }
             var tmp_array = [];
             var container = $("<div class='cont'>");
@@ -465,10 +470,10 @@ function changeStyle(val){
             $("#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);
+            $("#wgt_display").addClass("display_wood");
-            $("body, html").removeClass("without_radius");
+            $("#style_select").val(val);
+            $("body, html").removeClass("without_radius").addClass("radius_ft");
             break;
         case "2":
             $(".b_top_left").addClass("btl_pad").removeClass("without_back");
@@ -482,10 +487,10 @@ function changeStyle(val){
             $("#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);
+            $("#wgt_display").removeClass("display_wood");
-            $("body, html").removeClass("without_radius");
+            $("#style_select").val(val);
+            $("body, html").removeClass("without_radius").removeClass("radius_ft");
             break;
         case "3":
             $(".b_top_left").addClass("without_back").removeClass("btl_pad");
@@ -499,10 +504,10 @@ function changeStyle(val){
             $("#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);
+            $("#wgt_display").removeClass("display_wood");
-            $("body, html").addClass("without_radius");
+            $("#style_select").val(val);
+            $("body, html").addClass("without_radius").removeClass("radius_ft");
             break;
     }
 }

resources/library/interactivities/Ordre images.wgt/locales/ru/index.html

@@ -26,11 +26,6 @@
                     <div id="wgt_reload"></div>                    
                     <div id="wgt_display" class="selected"></div>
                     <div id="wgt_edit"></div>                    
-                    <select class="style_select">
-                        <option value="1"></option>
-                        <option value="2"></option>
-                        <option value="3"></option>
-                    </select>
                 </td>
                 <td class="b_top_right">&nbsp;</td>
             </tr>
@@ -40,7 +35,17 @@
                 <td>
                     <div id="help"></div>
                     <div id="data">
-                        
+                        <div id="parameters">
+                            <div class="inline">
+                                <label>
+                                    <select id="style_select">
+                                        <option value="1"></option>
+                                        <option value="2"></option>
+                                        <option value="3"></option>
+                                    </select>
+                                </label>
+                            </div>
+                        </div>
                     </div>
                 </td>
                 <td class="b_center_right">&nbsp;</td>

resources/library/interactivities/Ordre images.wgt/locales/ru/js/script.js

@@ -1,6 +1,6 @@
 
 var sankoreLang = {
-    display: "Показать", 
+    display: "Закрыть", 
     edit: "Изменить", 
     short_desc: "Расположите картинки в порядке возрастания цифр.", 
     add: "Новый блок",
@@ -11,7 +11,8 @@ var sankoreLang = {
     pad: "Планшет",
     none: "Нет",
     help: "Помощь",
-    help_content: "Пример текста помощи ..."
+    help_content: "Пример текста помощи ...",
+    theme: "Тема"
 };
 
 //main function
@@ -23,9 +24,11 @@ function start(){
     $("#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='1']").text(sankoreLang.slate);
-    $(".style_select option[value='2']").text(sankoreLang.pad);
+    $("#style_select option[value='2']").text(sankoreLang.pad);
-    $(".style_select option[value='3']").text(sankoreLang.none);
+    $("#style_select option[value='3']").text(sankoreLang.none);
+    var tmpl = $("div.inline label").html();
+    $("div.inline label").html(sankoreLang.theme + tmpl)
     
     if(window.sankore){
         if(sankore.preference("odr_des_imgs","")){
@@ -48,11 +51,13 @@ function start(){
     $("#wgt_help").click(function(){
         var tmp = $(this);
         if($(this).hasClass("open")){
+            $(this).removeClass("help_pad").removeClass("help_wood")
             $("#help").slideUp("100", function(){
                 tmp.removeClass("open");
                 $("#data").show();
             });
         } else {
+            ($("#style_select").val() == 1)?$(this).removeClass("help_pad").addClass("help_wood"):$(this).removeClass("help_wood").addClass("help_pad");
             $("#data").hide();
             $("#help").slideDown("100", function(){
                 tmp.addClass("open");
@@ -73,7 +78,7 @@ function start(){
         exportData();
     });
     
-    $(".style_select").change(function (event){
+    $("#style_select").change(function (event){
         changeStyle($(this).find("option:selected").val());
     })
     
@@ -83,7 +88,7 @@ function start(){
                 sankore.enableDropOnWidget(false);
                 $(this).addClass("selected");
                 $("#wgt_edit").removeClass("selected");
-                $(".style_select").css("display","none");
+                $("#parameters").css("display","none");
                 $(".add_block").remove();
                 $(".cont").each(function(){
                     var container = $(this);
@@ -129,7 +134,7 @@ function start(){
                 sankore.enableDropOnWidget(true);
                 $(this).addClass("selected");
                 $("#wgt_display").removeClass("selected");
-                $(".style_select").css("display","block");
+                $("#parameters").css("display","block");
                 $(".cont").each(function(){
                     var container = $(this);
     
@@ -213,7 +218,7 @@ function exportData(){
     }
     $(".cont").each(function(){
         var cont_obj = new Object();
-        cont_obj.style = $(".style_select").find("option:selected").val();
+        cont_obj.style = $("#style_select").find("option:selected").val();
         cont_obj.text = $(this).find(".text_cont").text();
         cont_obj.right = $(this).find(".imgs_cont>input").val();
         cont_obj.imgs = [];
@@ -230,7 +235,7 @@ function exportData(){
     
     if($(".cont").size() == 0){
         var cont_obj = new Object();
-        cont_obj.style = $(".style_select").find("option:selected").val();
+        cont_obj.style = $("#style_select").find("option:selected").val();
         cont_obj.tmp = "clear";
         array_to_export.push(cont_obj);
     }
@@ -248,11 +253,11 @@ function importData(data){
     for(var i in data){
         if(data[i].tmp){
             changeStyle(data[i].style);
-            $(".style_select").val(data[i].style);
+            $("#style_select").val(data[i].style);
         }else{
             if(i == 0){
                 changeStyle(data[i].style);
-                $(".style_select").val(data[i].style);
+                $("#style_select").val(data[i].style);
             }
             var tmp_array = [];
             var container = $("<div class='cont'>");
@@ -443,10 +448,10 @@ function changeStyle(val){
             $("#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);
+            $("#wgt_display").addClass("display_wood");
-            $("body, html").removeClass("without_radius");
+            $("#style_select").val(val);
+            $("body, html").removeClass("without_radius").addClass("radius_ft");
             break;
         case "2":
             $(".b_top_left").addClass("btl_pad").removeClass("without_back");
@@ -460,10 +465,10 @@ function changeStyle(val){
             $("#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);
+            $("#wgt_display").removeClass("display_wood");
-            $("body, html").removeClass("without_radius");
+            $("#style_select").val(val);
+            $("body, html").removeClass("without_radius").removeClass("radius_ft");
             break;
         case "3":
             $(".b_top_left").addClass("without_back").removeClass("btl_pad");
@@ -477,10 +482,10 @@ function changeStyle(val){
             $("#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);
+            $("#wgt_display").removeClass("display_wood");
-            $("body, html").addClass("without_radius");
+            $("#style_select").val(val);
+            $("body, html").addClass("without_radius").removeClass("radius_ft");
             break;
     }
 }
@@ -518,7 +523,6 @@ function onDropTarget(obj, event) {
                 tmp_img.attr("height",h);
                 tmp_img.css("margin",(120 - tmp_img.height())/2 + "px 0");
             }
-            exportData();
         }, 6)
     }
     else {

resources/library/interactivities/Ordre lettres.wgt/css/basic.css

@@ -3,7 +3,7 @@ html, body{
     height: 100%;
     margin: 0;
     padding: 0;
-    border-radius: 50px;
+    border-radius: 35px;
     overflow: hidden;
 }
 
@@ -28,14 +28,6 @@ body{
     margin: 5px 10px;
 }
 
-.green_point{
-    background-image: url(../img/green_point.png);
-}
-
-.red_point{
-    background-image: url(../img/red_point.png);
-}
-
 #display_text, #edit_text{
     height: 19px;
     padding: 3px 0 0 0;
@@ -306,57 +298,40 @@ body{
     margin: 10px 10px 0 10px;
     padding: 0;
     float: left;
-    /*font-family: "Lobster13Regular";*/
+    font-family: Arial,Helvetica,sans-serif;
     font-size: 24px;
-    color: #8c5730;
+    color: #7F613F;
+    text-shadow: #FFDCA9 0 1px 0;
 }
 
 #wgt_reload, #wgt_edit, #wgt_display, #wgt_help{
     cursor: pointer;
-    height: 44px;
     margin: 10px 10px 0 0;
     float: right;
-    /*font-family: "Lobster13Regular";*/
+    font-family: Arial,Helvetica,sans-serif;
     font-size: 24px;    
-    color: #8c5730;
+    line-height: 32px;
 }
 
 #wgt_display{
-    padding-left: 40px;
+    padding-left: 35px;
-    background-image: url(../img/slate-edit.png);
+    background: url(../img/toolbar-edit.png) left -32px no-repeat;
-    background-repeat: no-repeat;
+    color: white;
-    background-position: top 0;
     display: none;
 }
 
 #wgt_edit{    
-    padding-left: 40px;
+    padding-left: 35px;
-    background-image: url(../img/slate-edit.png);
+    background: url(../img/slate-toolbar-edit.png) left top no-repeat;
-    background-repeat: no-repeat;
+    color: #7F613F;
-    background-position: top 0;
+    text-shadow: #FFDCA9 0 1px 0;
 }
 
 #wgt_reload{
-    padding-left: 40px;
+    padding-left: 35px;
-    background-image: url(../img/slate-toolbar-reload.png);
+    background: url(../img/slate-toolbar-reload.png) left top no-repeat;
-    background-repeat: no-repeat;
+    color: #7F613F;
-    background-position: top 0;
+    text-shadow: #FFDCA9 0 1px 0;
-}
-
-.style_select{    
-    width: 120px;
-    /*font-family: "Lobster13Regular";*/
-    font-size: 24px;
-    float: right;
-    margin: 10px 20px 0 0;
-    border-radius: 10px;
-    background-image: url(../img/ar_down.png);
-    background-color: #d4aa79;
-    color: #8c5730;
-    background-position: 105px 11px;
-    background-repeat: no-repeat;
-    -webkit-appearance: menulist-text;
-    display: none;
 }
 
 .btl_pad{
@@ -391,51 +366,50 @@ body{
     background-image: url(../img/pad-bottom-right.png) !important;
 }
 
-.pad_color{
+.without_radius{
-    color: white !important;
+    border-radius: 0 !important;
 }
 
-.pad_reload{
+.without_back{
-    background-image: url(../img/slate-toolbar-reload-white.png) !important;
+    background: none !important;
 }
 
-.pad_edit{
+.pad_color{
-    background-image: url(../img/slate-display.png) !important;
+    color: #FC9 !important;
+    text-shadow: none !important;
 }
 
-.pad_select{
+.pad_reload{
-    background-color: black !important;
+    background: url(../img/toolbar-reload.png) left top no-repeat !important;
-    color: white !important;
-    background-image: url(../img/ar_down_white.png) !important;
 }
 
-.without_radius{
+.pad_edit{
-    border-radius: 0 !important;
+    background: url(../img/toolbar-edit.png) left top no-repeat !important;    
 }
 
-.without_back{
+.pad_help{
-    background: none !important;
+    background: url(../img/toolbar-help.png) left top no-repeat !important;
 }
 
-.none_select{
+.help_wood{
-    background-color: #333 !important;
+    background: url(../img/slate-toolbar-help.png) left -32px no-repeat !important;
     color: white !important;
-    background-image: url(../img/ar_down_white.png) !important;
+    text-shadow: #7F613F 0 -1px 0 !important;
 }
 
-.pad_help{
+.help_pad{
-    background-image: url(../img/slate-help-white.png) !important;
+    background: url(../img/toolbar-help.png) left -32px no-repeat !important;
+    color: white !important;
 }
 
 #wgt_help{
-    padding-left: 32px;
+    padding-left: 35px;
-    background-image: url(../img/slate-help.png);
+    background: url(../img/slate-toolbar-help.png) left top no-repeat;
-    background-repeat: no-repeat;
+    color: #7F613F;
-    background-position: top 0;
+    text-shadow: #FFDCA9 0 1px 0;
 }
 
 #help{
-    width: 100%;
     height: 100%;    
     overflow: auto;
     display: none;
@@ -446,3 +420,34 @@ body{
 .open{
 
 }
+
+#parameters{    
+    display: none;
+    padding: 10px 20px;
+    background: url("../img/parameters-bg.png");
+    border-radius: 4px 4px 0 0;
+}
+
+.inline{
+    display: inline-block;
+    font-family: "helvetica neue";
+    font-size: 14px;
+    color: #666;
+}
+
+#parameters label {
+    font-style: italic;
+}
+
+#style_select{   
+    margin-left: 10px;
+}
+
+.display_wood{
+    background: url(../img/slate-toolbar-edit.png) left -32px no-repeat !important;
+    text-shadow: #7F613F 0 -1px 0;
+}
+
+.radius_ft{
+    border-radius: 45px !important;
+}