Server : Apache
System : Linux ks5.tuic.fr 6.1.0-18-amd64 #1 SMP PREEMPT_DYNAMIC Debian 6.1.76-1 (2024-02-01) x86_64
User : pragmatice ( 1003)
PHP Version : 8.2.24
Disable Function : NONE
Directory : /home/pragmatice/public_html/tnifacile/app/
|
Server : Apache System : Linux ks5.tuic.fr 6.1.0-18-amd64 #1 SMP PREEMPT_DYNAMIC Debian 6.1.76-1 (2024-02-01) x86_64 User : pragmatice ( 1003) PHP Version : 8.2.24 Disable Function : NONE Directory : /home/pragmatice/public_html/tnifacile/app/ |
<!DOCTYPE html>
<html lang="fr">
<head>
<title>TNI Étiquettes</title>
<meta name="description" content="TNI Etiquettes est un des modules de TNI Facile. Il permet de manipuler des étiquettes textuelles via une ergonomie adaptée au TNI. Une banque de mots et d'expressions est intégrée à l'application." />
<link rel="icon" type="image/ico" href="favicon.ico" />
<!--[if IE]><link rel="shortcut icon" type="image/x-icon" href="favicon.ico" /><![endif]-->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/bootstrap.css">
<link rel="stylesheet" href="css/bootstrap-theme.css">
<link rel="stylesheet" href="css/jquery-ui.css" />
<link rel="stylesheet" href="css/keyboard.css">
<link rel="stylesheet" href="css/tnifacile.css">
<script src="js/jquery-1.12.4.min.js" type="text/javascript"></script>
<script src="js/bootstrap.min.js" type="text/javascript"></script>
<script src="js/jquery-ui.min.js" type="text/javascript"></script>
<script src="js/jquery.ui.touch-punch.min.js" type="text/javascript"></script>
<script src="js/magictouch.js" type="text/javascript"></script>
<script src="js/keyboard.js" type="text/javascript"></script>
<script src="js/clipboard.min.js" type="text/javascript"></script>
<script src="js/jquery.qrcode.min.js" type="text/javascript"></script>
<script src="js/html2canvas.min.js" type="text/javascript"></script>
<script src="js/fts_communes.min.js" type="text/javascript"></script>
<script src="js/tnietiquettes.min.js" type="text/javascript"></script>
<!--<script src='https://code.responsivevoice.org/responsivevoice.js'></script>-->
<script src="https://code.responsivevoice.org/responsivevoice.js?key=mc2zWVp1"></script>
<script src="js/data_etiquettes.js" type="text/javascript"></script>
<script type="text/javascript">
window.onload = function(){
element = document.getElementById('message_avertissement_javascript');
element.parentNode.removeChild(element);
}
var browser = navigator.appName;
var ver = navigator.appVersion;
var thestart = parseFloat(ver.indexOf("MSIE"))+1;
var brow_ver = parseFloat(ver.substring(thestart+4,thestart+7));
</script>
</head>
<body class="body_tnietiquettes">
<nav class="navbar navbar-default" style="display:none;">
<div class="container-fluid">
<div class="navbar-header" style="position:relative;">
<img id="logo_tnietiquettes" src="images/logo_tnietiquettes_128.png" class="logo_absolute ecran_choix" style="position:absolute; left:0; top:10px;" />
<!-- <a style="color:blue;" class="navbar-brand ecran_affichage retour_ecran_choix scale_p01" href="#" title="Choisir une activité"><b><span class="glyphicon glyphicon-hand-left"></span></b></a> -->
<span><a style="color:blue;" class="navbar-brand ecran_affichage retour_ecran_choix scale_p01" href="#" title="Choisir une activité"><b><span class="glyphicon glyphicon-hand-left"></span></b></a></span>
<button id="bt_accueil_tnifacile" title="Accueil de TNI Facile" class="decalage_logo_absolute btn btn-default navbar-btn" style="padding:4px 0;"><img src="images/logo_tnifacile_retour_24.png" /></button>
<span class="navbar-brand ecran_affichage affichage_titre"></span>
<button id="gerer_clavier" onclick="afficherClavier()" class="btn btn-default navbar-btn ecran_affichage" style="padding:4px;" title="Activer le clavier virtuel"><img src="images/logo_clavier_24_off.png" /></button>
<button id="gerer_polices" data-police="0" title="Écriture scripte minuscule" class="btn btn-default navbar-btn ecran_affichage" style="padding:4px;"><img src="images/logo_police_minuscule_24.png" /></button>
<button id="gerer_langues" data-langue="0" title="Voix féminine française" class="btn btn-default navbar-btn ecran_affichage" style="padding:4px;"><img src="images/logo_langue_french_female_24.png" /></button>
<ul id="inserer_caractere" class="nav navbar-nav ecran_affichage inserer_car_eti">
<li class="dropdown">
<button style="padding:4px;" id="lettre_clavier" class="btn btn-default ecran_affichage dropdown-toggle" title="Insérer un caractère particulier" data-toggle="dropdown" type="button" aria-haspopup="true" aria-expanded="false"><img src="images/logo_car_part_24.png" /></button>
<ul class="dropdown-menu" aria-labelledby="lettre_clavier">
<li id="car_part"></li>
</ul>
</li>
</ul>
</div>
<ul class="nav navbar-nav navbar-right">
<span><span class="navbar-brand pointer ecran_affichage scale_p01" title="Positionner la barre d'outils en bas de l'écran" style="display:none; padding:15px 0; margin:0 5px;"><span id="deplacer_barre_outils" class="glyphicon glyphicon-chevron-down"></span></span></span>
<span><span class="navbar-brand pointer ecran_affichage scale_p01" title="Supprimer les bordures des étiquettes" style="display:none; padding:15px 0; margin:0 2px;"><span style="color:blue;" id="supprimer_bordure" class="glyphicon glyphicon-unchecked on"></span></span></span>
<span><span class="navbar-brand pointer ecran_affichage scale_p01" title="Réduire la taille du texte" style="display:none; padding:15px 0; margin:0 2px;"><span id="reduire" class="glyphicon glyphicon-zoom-out"></span></span></span>
<span><span class="navbar-brand pointer ecran_affichage scale_p01" title="Agrandir la taille du texte" style="display:none; padding:15px 0; margin:0 2px;"><span id="agrandir" class="glyphicon glyphicon-zoom-in"></span></span></span>
<span><img class='navbar-brand bt_rideau scale_p015 pointer ecran_affichage' style='padding:15px 0; margin:0 10px 0 5px;' title='Afficher le rideau' src='images/icone_bt_rideau_on_24.png' /></span>
<span><img class='navbar-brand bt_copie_ecran scale_p015 pointer' style='padding:15px 0; margin:0 10px 0 5px;' title="Faire une copie d'écran" src='images/icone_apn_24.png' /></span>
<span class="navbar-brand pointer ecran_choix" id="bt_modale_info" title="À propos de TNI Quiz..."><span class="glyphicon glyphicon-info-sign"></span></span>
</ul>
</div>
</nav>
<div class="container" style="display:none;">
<div class="row ecran_choix">
<!-- DEBUT DOCUMENTATION -->
<div id="zone_doc" class="row">
<div class='col-lg-2 col-md-2 col-sm-1 col-xs-0'></div><div class='ombre_autour_5 fond_blanc col-lg-8 col-md-8 col-sm-10 col-xs-12 contenu_doc'>
<img title="imprimer la documentation" src="images/icone_imprimer_32.png" class="bts_doc bt_doc_imprimer no_imprim scale_p01" />
<img title="Afficher tous les paragraphes" src="images/icone_deplier_32.png" class="bts_doc bt_doc_afficher no_imprim scale_p01" />
<h3 class='impression_slt'>Documentation de TNI Etiquettes</h3>
<p>Cette application permet de manipuler des étiquettes textuelles via une ergonomie adaptée au TNI. On peut notamment :</p>
<ul>
<li>de créer des étiquettes, de modifier leur contenu et leur couleur,</li>
<li>de les déplacer selon deux modes : flottant ou libre,</li>
<li>de les découper, les dupliquer, les fusionner, les mélanger, les supprimer,</li>
<li>de les lire en synthèse vocale dans la langue active (français, anglais, italien, espagnol ou allemand),</li>
<li>de créer des catégories par couleur, et les visualiser organisées par catégorie.</li>
</ul>
<p>Une banque de mots et d'expressions est intégrée à l'application. Les activités créées peuvent être exportées et importées.</p>
<div style='text-align:center; display:block;'><button id="bt_commencer" class="btn btn-lg btn-success bts_export_commencer bts_commencer no_imprim">Manipuler les étiquettes <span class="glyphicon glyphicon-hand-right"></span></button></div>
<h4 id="presentation_ecran_manipulation">Présentation de l'écran de manipulation des étiquettes</h4>
<div>
<p>L'écran de manipulation comprend 5 zones :</p>
<img src="images/doc_zones.png" style="margin-bottom:15px;" />
</div>
<h4 id="zone_navigation">La zone de navigation</h4>
<div>
<img src="images/doc_zone_navigation.png" style="margin-bottom:15px;" />
<ul>
<li>La synthèse vocale est obtenue avec la version gratuite de l'<b><a target="_blank" href="https://responsivevoice.org/">API ResponsiveVoice.JS</a></b>. Cinq langues sont disponibles : le français, l'anglais, l'italien, l'espagnol et l'allemand.</li>
<li>Trois polices d'écriture peuvent être sélectionnées : scripte minuscule, scripte majuscule et cursive.</li>
</ul>
</div>
<h4 id="zone_modes">La zone des modes</h4>
<div>
<img src="images/doc_zone_des_modes.png" style="margin-bottom:15px;" />
<ul>
<li>La zone des modes se compose des modes remplissage <img src="images/logo_mode_remplissage_24.png" />, édition <img src="images/logo_mode_edition_24.png" />, déplacement <img src="images/logo_mode_deplacement_24.png" />, corbeille <img src="images/logo_mode_corbeille_24.png" /> et écoute <img src="images/logo_mode_ecoute_24.png" />.</li>
<li>Il est nécessaire de cliquer sur ces icônes pour activer les boutons qui leur sont associés. Le pointer de la souris change d'aspect selon le mode en cours.</li>
</ul>
</div>
<h4 id="zone_deplacement_flottant">La zone de déplacement flottant</h4>
<div>
<img src="images/doc_zone_deplacement_flottant.png" style="margin-bottom:15px;" />
<ul>
<li>Le déplacement est "flottant" parce que les étiquettes sont forcément disposées les unes à côté des autres.</li>
<li>Les boutons du mode édition agissent essentiellement sur les étiquettes présentes dans cette zone.</li>
<li>Si le mode remplissage est actif, pour colorier une étiquette, on clique sur une couleur puis sur l'étiquette à colorier. Le bouton <img src="images/doc_bt_cacher_texte.png" /> permet de cacher ou montrer le texte de l'étiquette cliquée.</li>
<li>Si le mode déplacement est actif, on peut déplacer les étiquettes.</li>
<li>Si le mode corbeille est actif, on clique sur une étiquette pour la supprimer. Celle-ci peut être replacée dans la zone de déplacement flottant en cliquant dessus depuis l'onglet "Corbeille".</li>
<li>Si le mode écoute est actif, on clique sur une étiquette pour écouter son texte dans la langue en cours <em>(à condition d'être connecté à Internet)</em>. Cliquer sur <button class="btn btn-xs btn-info bt_moins_large"><span class="glyphicon glyphicon-play"></span></button> permet d'écouter le texte dans son intégralité.</li>
</ul>
</div>
<h4 id="zone_onglets">La zone des onglets</h4>
<div>
<ul>
<li>Ces onglets sont en lien avec la zone de déplacement flottant.</li>
</ul>
<h5>L'onglet Légende</h5>
<img src="images/doc_zone_onglet_legende.png" style="margin-bottom:15px;" />
<ul>
<li>Il est possible de personnaliser la légende des couleurs disponibles en mode remplissage, et de ne faire apparaître que les couleurs légendées pour restreindre les choix.</li>
</ul>
<h5>L'onglet Catégories</h5>
<img src="images/doc_zone_onglet_categories.png" style="margin-bottom:15px;" />
<ul>
<li>L'onglet Catégories présente les étiquettes classées par couleur. Il est actualisé à chaque modification de la zone de déplacement flottant.</li>
<li>Le bouton <button style="padding:2px 5px;" class="btn btn-info"><span class="glyphicon glyphicon-duplicate"></span></button> permet d'archiver la version active des catégories dans un nouvel onglet. Dans les versions archivées, l'ordre des étiquettes peut être modifié afin d'affiner leur classement.</li>
</ul>
<h5>L'onglet Mots</h5>
<img src="images/doc_zone_onglet_mots.png" style="margin-bottom:15px;" />
<ul>
<li>L'onglet Mots propose une banque de mots classés par nature, et quelques connecteurs spatiaux temporels.</li>
<li>Il est également possible de créer ses propres étiquettes qui seront accessibles via le bouton "Mes étiquettes".</li>
<li>Si le mode écoute est actif, un simple clic sur une étiquette permet d'écouter son texte dans la langue sélectionnée. Sinon, l'étiquette est insérée dans la zone de déplacement flottant.</li>
<li>Cliquer sur <img class="rotation_360 scale_p01" src="images/bt_hasard_32.png"> insère une étiquette au hasard.</li>
</ul>
<h5>L'onglet Phrases</h5>
<img src="images/doc_zone_onglet_phrases.png" style="margin-bottom:15px;" />
<ul>
<li>L'onglet Phrase propose une banque de phrases.</li>
<li>Un simple clic sur une phrase l'insère dans la zone de déplacement flottant.</li>
<li>Cliquer sur <img class="rotation_360 scale_p01" src="images/bt_hasard_32.png"> insère une phrase au hasard.</li>
</ul>
<h5>L'onglet Kits</h5>
<img src="images/doc_zone_onglet_kits.png" style="margin-bottom:15px;" />
<ul>
<li>L'onglet Kits permet de créer des phrases en sélectionnant ses constituants.</li>
<li>Si le mode écoute est actif, un simple clic sur une étiquette permet d'écouter son texte dans la langue sélectionnée. Sinon, l'étiquette est insérée dans la zone de déplacement flottant.</li>
<li>Cliquer sur <img class="rotation_360 scale_p01" src="images/bt_hasard_32.png"> insère une étiquette au hasard dans la catégorie correspondante.</li>
<li>Cliquer sur <img class="rotation_360 scale_p01" src="images/logo_melanger_48.png" style="width:32px;" > génère une phrase aléatoire à la manière du cadavre exquis.</li>
</ul>
<h5>L'onglet LVE</h5>
<img src="images/doc_zone_onglet_lve.png" style="margin-bottom:15px;" />
<ul>
<li>L'onglet LVE propose une banque de mots outils dans les cinq langues disponibles(*).</li>
<li>Si le mode écoute est actif, un simple clic sur une étiquette permet d'écouter son texte dans la langue sélectionnée. Sinon, l'étiquette est insérée dans la zone de déplacement flottant.</li>
<li>Cliquer sur <img class="rotation_360 scale_p01" src="images/bt_hasard_32.png"> insère une étiquette au hasard dans la catégorie correspondante.</li>
<li>*Les mots d'anglais ont été définis par Olivier Baltassat. Les mots d'italien, d'espagnol et d'allemand le seront par toute âme charitable compétente ;o)</li>
</ul>
<h5>L'onglet Imagier</h5>
<img src="images/doc_zone_onglet_imagier.png" style="margin-bottom:15px;" />
<ul>
<li>L'onglet Imagier propose une banque de mots matérialisés par des images classées par thèmes ou par actions.</li>
<li>Si le mode écoute est actif, un simple clic sur une image <em>(pour les thèmes)</em> ou sur un item <em>(pour les actions)</em> permet d'écouter son texte dans la langue sélectionnée(*). Sinon, l'expression cliquée est insérée dans la zone de déplacement flottant.</li>
<li>*Attention ! Les expressions ayant été traduites par <a target="_blank" href="https://translate.google.com/">Google traduction</a> sans relecture, leur fiabilité n'est absolument pas garantie.</li>
</ul>
<img src="images/doc_zone_onglet_imagier_theme.png" style="margin-bottom:15px;" />
<ul>
<li>Les images des thèmes sont celles de l'application <a target="_blank" href="http://pragmatice.net/pragmactivites/ealor.php">EALOR</a>.</li>
</ul>
<img src="images/doc_zone_onglet_imagier_action.png" style="margin-bottom:15px;" />
<ul>
<li>Les images des actions proviennent du site <a target="_blank" href="http://www.arasaac.org/pictogramas_color.php">ARASAAC</a>.</li>
<li>Cliquer sur un pictogramme ouvre un menu de 7 items : le verbe à l'infinitif et conjugué dans 6 personnes.</li>
</ul>
<h5>L'onglet Corbeille</h5>
<img src="images/doc_zone_onglet_corbeille.png" style="margin-bottom:15px;" />
<ul>
<li>On retrouve dans cet onglet les étiquettes supprimées dans la zone de déplacement flottant.</li>
<li>Si le mode écoute est actif, un simple clic sur une étiquette permet d'écouter son texte dans la langue sélectionnée. Sinon, l'étiquette est réinsérée dans la zone de déplacement flottant.</li>
<li>Cliquer sur <img class="scale_p01" src="images/logo_corbeille_24.png"> supprime toutes les étiquettes de l'onglet Corbeille.</li>
</ul>
</div>
<h4 id="zone_options">La zone des options</h4>
<div>
<img src="images/doc_options.png" style="margin-bottom:15px;" />
<ul>
<li><button style="padding:2px 5px; margin-bottom:3px;" class="btn btn-primary btn-sm"><span class="glyphicon glyphicon-chevron-down"></span> <span class="glyphicon glyphicon-modal-window"></span></button> Le volet des déplacements libres permet de positionner les étiquettes à l"endroit souhaité, et ainsi d'organiser sa mise en page sans la contrainte imposée dans les déplacements flottants.</li>
<li><button style="padding:2px 5px; margin-bottom:3px;" class="btn btn-primary btn-sm"><span class="glyphicon glyphicon-chevron-down"></span> <span class="glyphicon glyphicon-star-empty"></span></button> Le volet des étiquettes favorites permet d'archiver une version des étiquettes de la zone de déplacement flottant.</li>
<li><button style="padding:2px 5px; margin-bottom:3px;" class="btn btn-primary btn-sm"><span class="glyphicon glyphicon-chevron-down"></span> <span class="glyphicon glyphicon-pushpin"></span></button> Le volet du mémo permet d'afficher un texte <em>(une aide, une consigne, une remarque, ...)</em>.</li>
<li><button style="padding:2px 5px; margin-bottom:3px;" class="btn btn-primary btn-sm"><span class="glyphicon glyphicon-cog"></span> Boîte à outils</button> La boîte à outils permet d'exporter, importer, convertir des textes en étiquettes et inversement, etc...</li>
</ul>
<h5>Le volet des déplacements libres</h5>
<img src="images/doc_options_deplacement_libre.png" style="margin-bottom:15px;" />
<ul>
<li>On clique sur une étiquette de la zone de déplacement flottant pour l'insérer dans le volet des déplacements libres.</li>
<li>Celle-ci peut alors être déplacée, mais ne peut pas être modifiée.</li>
<li>On la fait glisser sur la corbeille pour la supprimer.</li>
</ul>
<h5>Le volet des étiquettes favorites</h5>
<img src="images/doc_options_etiquettes_favorites.png" style="margin-bottom:15px;" />
<ul>
<li>Pour copier les étiquettes dans les étiquettes favorites, cliquer sur <img src='images/copier_etiq_favorites.png' style="height:32px;" />.</li>
<li>La version en cours des étiquettes de la zone de déplacement flottant est alors archivée dans une forme légèrement différente : fond blanc et bordure de la couleur du fond originel.</li>
<li>Dans ce volet, le contenu des étiquettes et leur disposition ne peuvent pas être modifiés. En revanche, il est possible d'attribuer une couleur à chaque caractère en référence à une légende qui peut être personnalisée en cliquant sur chaque nom.</li>
<li>Si le bouton <button style="padding:2px 5px;" class="btn btn-default btn-sm"><img src="images/bt_deplacement_oui_16.png"></button> est actif, les versions peuvent être réorganisées.</li>
<li>Les boutons <img class="scale_p01" src="images/logo_fleche_haut_24.png" /> et <img class="scale_p01" src="images/logo_corbeille_24.png" /> permettent respectivement de replacer une version dans la zone de déplacement flottant ou de la supprimer.</li>
</ul>
<h5>Le volet du mémo</h5>
<img src="images/doc_options_memo.png" style="margin-bottom:15px;" />
<ul>
<li>Le volet du mémo permet d'afficher un texte <em>(une aide, une consigne, une remarque, ...)</em>.</li>
<li>Ce texte peut être édité en cliquant sur le crayon.</li>
</ul>
<h5>La boîte à outils</h5>
<img src="images/doc_options_bao1.png" style="margin-bottom:15px;" />
<ul>
<li>N'importe quel texte saisi ou copié collé dans le champ de saisie est automatiquement converti en étiquettes dans la zone de déplacement flottant.</li>
<li>Afin d'être réutilisé dans une autre application, le texte du champ de saisie peut être dépourvu de son formatage en cliquant sur <button class="btn btn-sm btn-info btn-petit">Supprimer le formatage</button>.</li>
<li>Cliquer sur <button class="btn btn-sm btn-info btn-petit"><span class="glyphicon glyphicon-book"></span> Aide <span class="chevron glyphicon glyphicon-chevron-down"></span></button> apporte quelques informations sur l'utilisation de la boîte à outils, en particulier sur la conversion des étiquettes en texte brut et la fonction des boutons <button class="btn btn-info btn-petit">Quitter sans modifier</button>, <button class="btn btn-success btn-petit">Remplacer</button> et <button class="btn btn-success btn-petit">Ajouter</button>.</li>
<li>La boîte à outils permet d'<b>exporter</b><em> (d'enregistrer dans un fichier texte)</em> l'activité en cours, de façon à pouvoir l'<b>importer</b> dans un second temps. Il est ainsi aisé de préparer ses activités pour les importer en classe en quelques clics de souris.</li>
</ul>
<img src="images/doc_options_bao2.png" style="margin-bottom:15px;" />
<ul>
<li>En complément du texte brut des étiquettes, on visualise pour information la légende, la police, la langue, les étiquettes personnalisées, le mémo, les étiquettes favorites et les versions des catégories.</li>
</ul>
</div>
<h4 id="pistes_pedagogiques">Quelques pistes pédagogiques</h4>
<div>
<h5>Grammaire</h5>
<ul>
<li>Déplacer des groupes de mots pour identifier les compléments de phrase.</li>
<li>Découper des phrases en groupes de mots et déterminer leurs fonctions grammaticales.</li>
<li>Classer des mots selon leur nature.</li>
<li>Identifier le groupe des verbes conjuguer, les classer.</li>
</ul>
<h5>Orthographe</h5>
<ul>
<li>Masquer progressivement des mots pour conduire une copie cachée.</li>
</ul>
<h5>Vocabulaire</h5>
<ul>
<li>Classer des mots par famille.</li>
<li>Construire des mots en utilisant des préfixes et des suffixes, ou les classer.</li>
</ul>
<h5>Production d'écrits</h5>
<ul>
<li>Réduire ou enrichir des phrases, le GN.</li>
<li>Transposer des textes (changer le temps, la personne).</li>
<li>Remplacer des mots par des substituts.</li>
<li>Ponctuer une phrase dont la ponctuation a préalablement été supprimée.</li>
<li>Produire des phrases en les saisissant et/ou en exploitant la banque de mots et expressions, et les écouter pour valider.</li>
<li>Pour les apprentis lecteurs, saisir des lettres pour construire des mots, et les écouter pour valider.</li>
</ul>
<h5>Lecture</h5>
<ul>
<li>Déplacer des mots préalablement mélangés pour reconstituer des phrases.</li>
<li>Repérer et marquer les mots importants d'un texte pour en faciliter la compréhension.</li>
<li>Déterminer si une phrase générée aléatoirement a du sens ou non.</li>
</ul>
<h5>Découverte du monde</h5>
<ul>
<li>Opérer des classements du vivant (animaux, végétaux, milieux).</li>
</ul>
<h5>LVE</h5>
<ul>
<li>Construire des phrases en exploitant l'imagier et les mots outils de la langue sélectionnée, et les écouter pour valider.</li>
</ul>
</div>
</div><div class='col-lg-2 col-md-2 col-sm-1 col-xs-0'></div>
</div>
<!-- FIN DOCUMENTATION -->
</div><!-- fin ecran_choix -->
<div class="row ecran_affichage" style="margin-bottom:50px;">
<!-- <div id="bts_action" style="position:fixed; left:0; bottom:0; background:yellow; width:100%; z-index:3; padding:5px;"> -->
<div id="bts_action">
<div class="mode_tous mode_remplissage faux_bouton3">
<img src="images/logo_mode_remplissage_24.png" class="scale_p01" alt="Mode remplissage" title="Mode remplissage" />
<button data-coul="1" id="bt_coul_1" class="btn btn-sm fond_r_1 on" disabled="disabled" title="Colorier l'étiquette en blanc">1</button>
<button data-coul="2" id="bt_coul_2" class="btn btn-sm fond_r_2" disabled="disabled" title="Colorier l'étiquette en bleu">2</button>
<button data-coul="3" id="bt_coul_3" class="btn btn-sm fond_r_3" disabled="disabled" title="Colorier l'étiquette en fuchsia">3</button>
<button data-coul="4" id="bt_coul_4" class="btn btn-sm fond_r_4" disabled="disabled" title="Colorier l'étiquette en gris">4</button>
<button data-coul="5" id="bt_coul_5" class="btn btn-sm fond_r_5" disabled="disabled" title="Colorier l'étiquette en jaune">5</button>
<button data-coul="6" id="bt_coul_6" class="btn btn-sm fond_r_6" disabled="disabled" title="Colorier l'étiquette en noir">6</button>
<button data-coul="7" id="bt_coul_7" class="btn btn-sm fond_r_7" disabled="disabled" title="Colorier l'étiquette en rouge">7</button>
<button data-coul="8" id="bt_coul_8" class="btn btn-sm fond_r_8" disabled="disabled" title="Colorier l'étiquette en vert">8</button>
<button data-coul="9" id="bt_coul_9" class="btn btn-sm fond_r_9" disabled="disabled" title="Colorier l'étiquette en violet">9</button>
<button id="bt_cacher_etiquette" style="padding:3px 2px;" class="btn btn-sm" disabled="disabled" title="Cacher ou montrer le texte de l'étiquette"><span style="color:#7C3333;" class="glyphicon glyphicon-eye-close"></span></button>
</div>
<div class="mode_tous mode_edition faux_bouton3 on" style="position:relative;">
<!-- Input caché pour le presse papier -->
<input id="input_cache" type="text" style="position:absolute; top:-1000px; left:0;" />
<div id="bts_edition_complement" style="position:absolute; top:-28px; left:10px; width:350px; text-align:left; display:none;">
<button id="bt_couper_pp" class="btn btn-sm btn-info bt_moins_large action_undo" style="padding:2px;" title="Couper la sélection"><img src="images/icone_edit_couper_16.png" /></button>
<button id="bt_copier_pp" class="btn btn-sm btn-info bt_moins_large action_undo" style="padding:2px;" title="Copier la sélection"><img src="images/icone_edit_copier_16.png" /></button>
<button id="bt_coller_pp" class="btn btn-sm btn-info bt_moins_large action_undo" style="padding:2px;" title="Coller la sélection"><img src="images/icone_edit_coller_16.png" /></button>
<button id="bt_souligner" class="btn btn-sm btn-info bt_moins_large action_undo" style="padding:2px;" title="Souligner la sélection"><img src="images/icone_edit_souligner_16.png" /></button>
<button id="bt_barrer" class="btn btn-sm btn-info bt_moins_large action_undo" style="padding:2px;" title="Bareer la sélection"><img src="images/icone_edit_barrer_16.png" /></button>
<button id="bt_separer_en_deux" class="btn btn-sm btn-info bt_moins_large action_undo" style="padding:2px;" title="Séparer l'étiquette en deux et dupliquer la seconde partie"><img src="images/icone_edit_separer_16.png" /></button>
<button id="bt_dupliquer" class="btn btn-sm btn-info bt_moins_large action_undo" style="padding:2px;" title="Dupliquer l'étiquette"><img src="images/icone_edit_dupliquer_16.png" /></button>
<button id="bt_fusionner" class="btn btn-sm btn-info bt_moins_large action_undo" style="padding:2px;" title="Fusionner l'étiquette sélectionnée et la suivante"><img src="images/icone_edit_fusionner_16.png" /></button>
<button id="bt_point" class="btn btn-sm btn-default bt_moins_large action_undo" style="padding:2px;" title="Insérer un point"><img src="images/icone_edit_point_16.png" /></button>
<button id="bt_virgule" class="btn btn-sm btn-default bt_moins_large action_undo" style="padding:2px;" title="Insérer une virgule"><img src="images/icone_edit_virgule_16.png" /></button>
<button id="bt_point_virgule" class="btn btn-sm btn-default bt_moins_large action_undo" style="padding:2px;" title="Insérer un point-virgule"><img src="images/icone_edit_point_virgule_16.png" /></button>
<button id="bt_deux_points" class="btn btn-sm btn-default bt_moins_large action_undo" style="padding:2px;" title="Insérer deux-points"><img src="images/icone_edit_deux_points_16.png" /></button>
<button id="bt_point_interro" class="btn btn-sm btn-default bt_moins_large action_undo" style="padding:2px;" title="Insérer un point d'interrogation"><img src="images/icone_edit_point_interro_16.png" /></button>
<button id="bt_point_exclam" class="btn btn-sm btn-default bt_moins_large action_undo" style="padding:2px;" title="Insérer un point d'exclamation"><img src="images/icone_edit_point_exclam_16.png" /></button>
<button id="bt_espace" class="btn btn-sm btn-default bt_moins_large action_undo" style="padding:2px;" title="Insérer une espace"><img src="images/icone_edit_espace_16.png" /></button>
<button id="bt_maj_min" class="btn btn-sm btn-info bt_moins_large action_undo" style="padding:2px;" title="Placer la première lettre de l'étiquette en minuscule ou majuscule"><img src="images/icone_edit_maj_min_16.png" /></button>
</div>
<img src="images/logo_mode_edition_24.png" class="scale_p01" alt="Mode édition" title="Mode édition" />
<button id="bt_ajouter_etiquette" class="btn btn-sm btn-info bt_moins_large action_undo" title="Ajouter une étiquette"><span class="glyphicon glyphicon-plus"></span></button>
<button id="bt_placer_une_seule_etiquette" class="btn btn-sm btn-info bt_moins_large action_undo" title="Placer chaque ligne dans une seule étiquette"><span class="glyphicon glyphicon-unchecked"></span></button>
<button id="bt_supprimer_ponctuation" class="btn btn-sm btn-info bt_moins_large action_undo" title="Supprimer la ponctuation (.,:;?!)"><span><s><b>?!</b></s></span></button>
<button id="bt_retour_ligne" class="btn btn-sm btn-info bt_moins_large action_undo" title="Aller à la ligne"><span>§</span></button>
</div>
<div class="mode_tous mode_deplacement faux_bouton3">
<img src="images/logo_mode_deplacement_24.png" class="scale_p01" alt="Mode déplacement" title="Mode déplacement" />
<button id="bt_melanger_etiquettes" class="btn btn-sm btn-info bt_moins_large action_undo" disabled="disabled" title="Mélanger les étiquettes"><span class="glyphicon glyphicon-random"></span></button>
<button id="bt_decouper_en_mots" class="btn btn-sm btn-info bt_moins_large action_undo" disabled="disabled" title="Découper en mots"><span class="glyphicon glyphicon-flash"></span></button>
<button id="bt_copier_dans_etiq_favorites" class="btn btn-sm btn-info bt_moins_large" disabled="disabled" title="Copier dans les étiquettes favorites"><span class="glyphicon glyphicon-star-empty"></span></button>
</div>
<div class="mode_tous mode_corbeille faux_bouton3">
<img src="images/logo_mode_corbeille_24.png" class="scale_p01" alt="Mode corbeille" title="Mode corbeille" />
<button id="bt_supprimer_toutes_etiquettes" class="btn btn-sm btn-info bt_moins_large action_undo" disabled="disabled" title="Supprimer toutes les étiquettes"><span class="glyphicon glyphicon-refresh"></span></button>
</div>
<div class="mode_tous mode_ecoute faux_bouton3">
<img src="images/logo_mode_ecoute_24.png" class="scale_p01" alt="Mode écoute" title="Mode écoute" />
<button id="bt_ecouter_tout" class="btn btn-sm btn-info bt_moins_large" disabled="disabled" title="Tout écouter"><span class="glyphicon glyphicon-play"></span></button>
</div>
<img id="bt_undo" class="pointer scale_p015" style="margin:0, padding:0; visibility:hidden;" src="images/logo_undo_24.png" alt="Annuler la dernière modification" title="Annuler la dernière modification" />
<img id="bt_redo" class="pointer scale_p015" style="margin:0, padding:0; visibility:hidden;" src="images/logo_redo_24.png" alt="Restaurer la dernière modification" title="Restaurer la dernière modification" />
</div>
<div class="pave_manipulation ombre_autour_5">
<div class="conteneur_etiquettes police_adaptee taille_variable deplacable"></div>
<div style="clear:both;"></div>
</div>
<div class="pave_disposition ombre_autour_5" style="margin-bottom:15px; padding:5px; display:none;">
<img id="corbeille_disposition" style="float:right;" src="images/icone_corbeille_fermee_48.png" />
<div class="conteneur_disposition" style="height:200px; position:relative;"></div>
</div>
<div class="pave_memo ombre_autour_5" style="display:none; margin-bottom:15px; min-height:40px; padding:5px; background:#FFF;">
<button id="memo_enregistrer" class="btn btn-success btn-lg" title="Enregistrer les modifications" style="padding:2px 5px; margin:0 0 10px 10px; float:right; display:none"><span class="glyphicon glyphicon-floppy-disk"></span></button>
<button id="memo_modifier" class="btn btn-info btn-lg" title="Modifier le mémo" style="padding:2px 5px; margin:0 0 10px 10px; float:right;"><span class="glyphicon glyphicon-pencil"></span></button>
<div style="padding-right:40px;">
<div class="affichage_memo police_adaptee taille_variable" style="display:none;"></div>
<div class="edition_memo" style="display:none;">
<textarea class="form-control"></textarea>
</div>
</div>
</div>
<div class="pave_etiquettes_favorites ombre_autour_5" style="display:none; margin-bottom:15px; padding:5px; background:#FFF;">
<div id="legende_etiq_favorites">
<button style="float:right; padding:2px 5px;" class="btn btn-default btn-sm" title="Les étiquettes favorites ne sont pas déplaçables. Cliquer pour qu'elles le soient..."><img src="images/bt_deplacement_non_16.png" /></button>
<div id="coul_etiq_fav_0"><span title="supprimer la couleur" data-coul="0" class="lacouleur on"> </span></div>
<div id="coul_etiq_fav_1"><span data-coul="1" class="lacouleur"> </span><span class="leg_couleur" title="Changer la légende de cette couleur">Adj. qual.</span><div class="changer_legende_etiq_fav"><input type="text" /><button><span class="glyphicon glyphicon-ok"></span></button></div></div>
<div id="coul_etiq_fav_2"><span data-coul="2" class="lacouleur"> </span><span class="leg_couleur" title="Changer la légende de cette couleur">Adverbe</span><div class="changer_legende_etiq_fav"><input type="text" /><button><span class="glyphicon glyphicon-ok"></span></button></div></div>
<div id="coul_etiq_fav_3"><span data-coul="3" class="lacouleur"> </span><span class="leg_couleur" title="Changer la légende de cette couleur">Conj.</span><div class="changer_legende_etiq_fav"><input type="text" /><button><span class="glyphicon glyphicon-ok"></span></button></div></div>
<div id="coul_etiq_fav_4"><span data-coul="4" class="lacouleur"> </span><span class="leg_couleur" title="Changer la légende de cette couleur">Déterminant</span><div class="changer_legende_etiq_fav"><input type="text" /><button><span class="glyphicon glyphicon-ok"></span></button></div></div>
<div id="coul_etiq_fav_5"><span data-coul="5" class="lacouleur"> </span><span class="leg_couleur" title="Changer la légende de cette couleur">Nom</span><div class="changer_legende_etiq_fav"><input type="text" /><button><span class="glyphicon glyphicon-ok"></span></button></div></div>
<div id="coul_etiq_fav_6"><span data-coul="6" class="lacouleur"> </span><span class="leg_couleur" title="Changer la légende de cette couleur">Prép.</span><div class="changer_legende_etiq_fav"><input type="text" /><button><span class="glyphicon glyphicon-ok"></span></button></div></div>
<div id="coul_etiq_fav_7"><span data-coul="7" class="lacouleur"> </span><span class="leg_couleur" title="Changer la légende de cette couleur">Pronom</span><div class="changer_legende_etiq_fav"><input type="text" /><button><span class="glyphicon glyphicon-ok"></span></button></div></div>
<div id="coul_etiq_fav_8"><span data-coul="8" class="lacouleur"> </span><span class="leg_couleur" title="Changer la légende de cette couleur">Verbe</span><div class="changer_legende_etiq_fav"><input type="text" /><button><span class="glyphicon glyphicon-ok"></span></button></div></div>
</div>
<div class="affichage_etiquettes_favorites police_adaptee taille_variable deplacable_etiq_fav"></div>
<div id="tampon_etiq_fav" style="display:none;"></div>
<div style="clear:both;"></div>
</div>
<div class="input-group changer_legende_etiq_fav" style="width:200px;"><input type="text" class="form-control"><span class="input-group-btn"><button class="btn btn-default" type="button">OK</button></span></div>
<ul class="nav nav-tabs no_imprim onglets_menu onglets_app_etiquettes">
<button id="bt_baoutils" style="float:right; padding:2px 5px;" class="btn btn-primary btn-sm" title="Exporter, importer, convertir des textes en étiquettes et inversement, ..."><span class="glyphicon glyphicon-cog"></span> Boîte à outils</button>
<button id="bt_memo" style="float:right; padding:2px 5px; margin-right:10px;" class="btn btn-primary btn-sm" title="Montrer le mémo"><span class="glyphicon glyphicon-chevron-down upoudown"></span> <span class="glyphicon glyphicon-pushpin"></span></button>
<button id="bt_etiquettes_favorites" style="float:right; padding:2px 5px; margin-right:10px;" class="btn btn-primary btn-sm" title="Montrer les étiquettes favorites"><span class="glyphicon glyphicon-chevron-down upoudown"></span> <span class="glyphicon glyphicon-star-empty"></span></button>
<button id="bt_mode_disposition" style="float:right; padding:2px 5px; margin-right:10px;" class="btn btn-primary btn-sm" title="Ouvrir le panneau de déplacement libre des étiquettes"><span class="glyphicon glyphicon-chevron-down upoudown"></span> <span class="glyphicon glyphicon-modal-window"></span></button>
<li id="onglet_legende" class="longlet active"><a data-toggle="tab" href="#o_legende">Légende</a></li>
<li id="onglet_categorie" class="longlet"><a data-toggle="tab" href="#o_categorie">Catégories</a></li>
<li id="onglet_sacamots" class="longlet"><a data-toggle="tab" href="#o_sacamots">Mots</a></li>
<li id="onglet_bacaphrases" class="longlet"><a data-toggle="tab" href="#o_bacaphrases">Phrases</a></li>
<li id="onglet_phrasenkit" class="longlet"><a data-toggle="tab" href="#o_phrasenkit">Kits</a></li>
<li id="onglet_lve" class="longlet"><a data-toggle="tab" href="#o_lve">LVE</a></li>
<li id="onglet_imagier" class="longlet"><a data-toggle="tab" href="#o_imagier">Imagier</a></li>
<li id="onglet_corbeille" class="longlet"><a data-toggle="tab" href="#o_corbeille">Corbeille</a></li>
</ul>
<div class="tab-content onglets_menu_content" id="zone_ecrans" style="min-height:110px;">
<div id="o_legende" class="tab-pane fade active in">
<div style="float:right; width:150px; text-align:right;">
<button id="legende_modifier" class="btn btn-info btn-lg" title="Modifier la légende" style="padding:2px 5px; margin:0 0 10px 10px;"><span class="glyphicon glyphicon-pencil"></span></button>
<button id="legende_enregistrer" class="btn btn-success btn-lg" title="Enregistrer les modifications" style="padding:2px 5px; margin:0 0 10px 10px; margin:0 0 10px 10px; display:none;"><span class="glyphicon glyphicon-floppy-disk"></span></button>
<div id="bt_toutes_les_couleurs" class="faux_bouton on bts_couleurs_legendees" style="width:100%; font-size:90%;">Toutes les couleurs</div>
<div id="bt_couleurs_legendees" class="faux_bouton bts_couleurs_legendees" style="width:100%; font-size:90%;">Couleurs légendées</div>
</div>
<div id="legendeounon"></div>
<table></table>
<div style="clear:both;"></div>
</div>
<div id="o_categorie" class="tab-pane fade taille_variable">
<button id="bt_creer_categories_nv" style="float:right; padding:2px 5px;" class="btn btn-info btn-lg" title="Archiver cette version des catégories et pouvoir modifier l'ordre des items"><span class="glyphicon glyphicon-duplicate"></span></button>
<button id="bt_supprimer_categories_nv" style="float:right; padding:2px 5px; margin-right:10px; display:none;" class="btn btn-warning btn-lg" title="Supprimer cette version des catégories"><span class="glyphicon glyphicon-trash"></span></button>
<ul class="bts_categories_nv">
<li title="Catégories actives" id="bt_categories_nv_0" data-cat_nv="0" class="faux_bouton on">Catégories actives</li>
</ul>
<div class="affichage_categories_etiq">
<div class="categorie_nv" id="categorie_nv_0"></div>
</div>
</div>
<div id="o_sacamots" class="tab-pane fade">
<img id="de_mot_hasard" class="rotation_360 scale_p01 pointer" style="float:right;" src="images/bt_hasard_48.png" style="" title="une étiquette au hasard ?">
<ul class="bts_sacamots">
<li id="bt_mes_etiquettes" data-sac="mesetiquettes" class="faux_bouton on"><span class="glyphicon glyphicon-tags"></span> Mes étiquettes</li>
<li data-sac="det" class="faux_bouton">Dét.</li>
<li data-sac="nom" class="faux_bouton">Nom</li>
<li data-sac="aq" class="faux_bouton">Adj. Q.</li>
<li data-sac="verbe" class="faux_bouton">Verbe</li>
<li data-sac="adv" class="faux_bouton">Adverbe</li>
<li data-sac="autre" class="faux_bouton">Autre</li>
<li data-sac="connecteur" class="faux_bouton">Connecteur</li>
</ul>
<div id="mots_sacamots" class="sacamots_kit_lve police_adaptee curseur_onglets curseur_mode_pointer">
<div class="sac_mes_etiquettes_oui">
<button id="mes_etiquettes_enregistrer" class="btn btn-success btn-lg" title="Enregistrer les modifications" style="padding:2px 5px; margin:0 0 10px 10px; float:right; margin-top:10px; display:none;"><span class="glyphicon glyphicon-floppy-disk"></span></button>
<button id="mes_etiquettes_modifier" class="btn btn-info btn-lg" title="Editer ses étiquettes" style="padding:2px 5px; margin:0 0 10px 10px; float:right; margin-top:10px;"><span class="glyphicon glyphicon-pencil"></span></button>
<div class="afficher_mes_etiquettes_et"></div>
<div class="saisir_mes_etiquettes_et" style="padding-right:40px; display:none;">
<textarea class="form-control" style="height:200px;" placeholder="Saisir une étiquette par ligne et valider en cliquant sur la disquette."></textarea>
</div>
</div>
<div class="sac_mes_etiquettes_non"></div>
</div>
</div>
<div id="o_bacaphrases" class="tab-pane fade">
<img id="de_phrase_hasard" class="rotation_360 scale_p01 pointer" style="float:right;" src="images/bt_hasard_48.png" style="" title="une phrase au hasard ?">
<ul class="bts_bacaphrases">
<li data-phrase="0" class="faux_bouton on">P. minimales</li>
<li data-phrase="1" class="faux_bouton">P. sans C.Phrase</li>
<li data-phrase="2" class="faux_bouton">P. avec C.Phrase</li>
<li data-phrase="3" class="faux_bouton">P. complexes</li>
<li data-phrase="4" class="faux_bouton">Extraits de saynètes</li>
</ul>
<ul class="phrases_bacaphrases"></ul>
</div>
<div id="o_phrasenkit" class="tab-pane fade">
<img id="de_phrasenkit_hasard" class="rotation_360 scale_p01 pointer" style="float:right;" src="images/logo_melanger_48.png" title="une phrase construite au hasard ?" />
<ul class="bts_phrasenkit">
<li data-kit="0" class="faux_bouton on">G. Sujet</li>
<li data-kit="1" class="faux_bouton">Verbe</li>
<li data-kit="2" class="faux_bouton">C. d'objet</li>
<li data-kit="3" class="faux_bouton">C. de phrase</li>
</ul>
<div id="kits_phrasenkit" class="sacamots_kit_lve police_adaptee curseur_onglets curseur_mode_pointer">
<h4 class="kit_tous kit_0">Groupe Sujet singulier <img data-tab_kit="0" class="rotation_360 scale_p01 pointer" src="images/bt_hasard_32.png" title="un Groupe Sujet singulier au hasard ?" /></h4>
<ul class="kit_tous kit_0 tab_k0">A créer !</ul>
<h4 class="kit_tous kit_0">Groupe Sujet pluriel <img data-tab_kit="1" class="rotation_360 scale_p01 pointer" src="images/bt_hasard_32.png" title="un Groupe Sujet pluriel au hasard ?" /></h4>
<ul class="kit_tous kit_0 tab_k1">A créer !</ul>
<h4 class="kit_tous kit_1" style="display:none;">Verbe intransitif à la 3ème personne du singulier <img data-tab_kit="2" class="rotation_360 scale_p01 pointer" src="images/bt_hasard_32.png" title="un verbe intransitif singulier au hasard ?" /></h4>
<ul class="kit_tous kit_1 tab_k2" style="display:none;">A créer !</ul>
<h4 class="kit_tous kit_1" style="display:none;">Verbe intransitif à la 3ème personne du pluriel <img data-tab_kit="3" class="rotation_360 scale_p01 pointer" src="images/bt_hasard_32.png" title="un verbe intransitif pluriel au hasard ?" /></h4>
<ul class="kit_tous kit_1 tab_k3" style="display:none;">A créer !</ul>
<h4 class="kit_tous kit_1" style="display:none;">Verbe transitif direct à la 3ème personne du singulier <img data-tab_kit="4" class="rotation_360 scale_p01 pointer" src="images/bt_hasard_32.png" title="un verbe transitif direct singulier au hasard ?" /></h4>
<ul class="kit_tous kit_1 tab_k4" style="display:none;">A créer !</ul>
<h4 class="kit_tous kit_1" style="display:none;">Verbe transitif direct à la 3ème personne du pluriel <img data-tab_kit="5" class="rotation_360 scale_p01 pointer" src="images/bt_hasard_32.png" title="un verbe transitif direct pluriel au hasard ?" /></h4>
<ul class="kit_tous kit_1 tab_k5" style="display:none;">A créer !</ul>
<h4 class="kit_tous kit_1" style="display:none;">Verbe transitif indirect à la 3ème personne du singulier <img data-tab_kit="6" class="rotation_360 scale_p01 pointer" src="images/bt_hasard_32.png" title="un verbe transitif indirect singulier au hasard ?" /></h4>
<ul class="kit_tous kit_1 tab_k6" style="display:none;">A créer !</ul>
<h4 class="kit_tous kit_1" style="display:none;">Verbe transitif indirect à la 3ème personne du pluriel <img data-tab_kit="7" class="rotation_360 scale_p01 pointer" src="images/bt_hasard_32.png" title="un verbe transitif indirect pluriel au hasard ?" /></h4>
<ul class="kit_tous kit_1 tab_k7" style="display:none;">A créer !</ul>
<h4 class="kit_tous kit_2" style="display:none;">Complément d'objet direct (COD) <img data-tab_kit="8" class="rotation_360 scale_p01 pointer" src="images/bt_hasard_32.png" title="un COD au hasard ?" /></h4>
<ul class="kit_tous kit_2 tab_k8" style="display:none;">A créer !</ul>
<h4 class="kit_tous kit_2" style="display:none;">Complément d'objet indirect (COI) <img data-tab_kit="9" class="rotation_360 scale_p01 pointer" src="images/bt_hasard_32.png" title="un COI au hasard ?" /></h4>
<ul class="kit_tous kit_2 tab_k9" style="display:none;">A créer !</ul>
<h4 class="kit_tous kit_3" style="display:none;">Complément de phrase exprimant le lieu <img data-tab_kit="10" class="rotation_360 scale_p01 pointer" src="images/bt_hasard_32.png" title="un complément de phrase exprimant le lieu au hasard ?" /></h4>
<ul class="kit_tous kit_3 tab_k10" style="display:none;">A créer !</ul>
<h4 class="kit_tous kit_3" style="display:none;">Complément de phrase exprimant le temps <img data-tab_kit="11" class="rotation_360 scale_p01 pointer" src="images/bt_hasard_32.png" title="un complément de phrase exprimant le temps au hasard ?" /></h4>
<ul class="kit_tous kit_3 tab_k11" style="display:none;">A créer !</ul>
<h4 class="kit_tous kit_3" style="display:none;">Complément de phrase exprimant la manière <img data-tab_kit="12" class="rotation_360 scale_p01 pointer" src="images/bt_hasard_32.png" title="un complément de phrase exprimant la manière au hasard ?" /></h4>
<ul class="kit_tous kit_3 tab_k12" style="display:none;">A créer !</ul>
<h4 class="kit_tous kit_3" style="display:none;">Complément de phrase exprimant la cause <img data-tab_kit="13" class="rotation_360 scale_p01 pointer" src="images/bt_hasard_32.png" title="un complément de phrase exprimant la cause au hasard ?" /></h4>
<ul class="kit_tous kit_3 tab_k13" style="display:none;">A créer !</ul>
<h4 class="kit_tous kit_3" style="display:none;">Complément de phrase exprimant le but <img data-tab_kit="14" class="rotation_360 scale_p01 pointer" src="images/bt_hasard_32.png" title="un complément de phrase exprimant le but au hasard ?" /></h4>
<ul class="kit_tous kit_3 tab_k14" style="display:none;">A créer !</ul>
</div>
</div>
<div id="o_lve" class="tab-pane fade">
<ul class="bts_lve">
<li id="bt_lve_0" data-sac="lve_fr" class="faux_bouton on">Français</li>
<li id="bt_lve_1" data-sac="lve_en" class="faux_bouton">Anglais</li>
<li id="bt_lve_2" data-sac="lve_it" class="faux_bouton">Italien</li>
<li id="bt_lve_3" data-sac="lve_sp" class="faux_bouton">Espagnol</li>
<li id="bt_lve_4" data-sac="lve_de" class="faux_bouton">Allemand</li>
</ul>
<div id="mots_lve" class="sacamots_kit_lve police_adaptee curseur_onglets curseur_mode_pointer"></div>
</div>
<div id="o_imagier" class="tab-pane fade">
<div id="choix_theme_imagier" style="height:86px;">
<span id="vignette_theme" style="float:left;"><img src="images/logo_choisir_theme_72.png" /></span>
<a target="_blank" href="http://pragmatice.net/pragmactivites/ealor/app/themes.html"><img title="Retrouver tous ces thèmes dans l'application EALOR..." class="scale_p005 pointer" style="float:right;" src="images/logo_ealor_128.png" /></a>
<div style="padding-left:100px;">
<h4></h4>
<button id="bt_choisir_theme" class="btn btn-default btn-inline"><span class="glyphicon glyphicon-chevron-down"></span> Choisir un thème</button>
<button id="bt_choisir_action" class="btn btn-default btn-inline"><span class="glyphicon glyphicon-chevron-down"></span> Choisir une action</button>
</div>
</div>
<div id="themes_imagier" style="display:none;">
<h4>Nom de la catégorie</h4>
<li title="Nom du thème"><img src="imagier/dossier_cat.png" /><img class="cat_image" src="imagier/_v_catego/_animaux_campagne.png" /></li>
<li title="Nom du thème"><img src="imagier/dossier_cat.png" /><img class="cat_image" src="imagier/_v_catego/_animaux_compagnie.png" /></li>
<li title="Nom du thème" class="on"><img src="test_dossier/dossier_vide_96.png" /><img class="cat_image" src="imagier/_v_catego/_animaux_cris.png" /></li>
<li title="Nom du thème"><img src="test_dossier/dossier_vide_96.png" /><img class="cat_image" src="imagier/_v_catego/_animaux_ferme.png" /></li>
<li title="Nom du thème"><img src="test_dossier/dossier_vide_96.png" /><img class="cat_image" src="test_dossier/test_catego_72.png" /></li>
<li title="Nom du thème"><img src="test_dossier/dossier_vide_96.png" /><img class="cat_image" src="test_dossier/test_catego_72.png" /></li>
<li title="Nom du thème"><img src="test_dossier/dossier_vide_96.png" /><img class="cat_image" src="test_dossier/test_catego_72.png" /></li>
<div>
<img title="abeille" src="imagier/animaux/abeille.png">
<img title="agneau" src="imagier/animaux/agneau.png">
<img title="aigle" src="imagier/animaux/aigle.png">
<img title="aile" src="imagier/animaux/aile.png">
</div>
<h4>Nom de la catégorie</h4>
<li title="Nom du thème"><img src="test_dossier/dossier_vide_96.png" /><img class="cat_image" src="test_dossier/test_catego_72.png" /></li>
<li title="Nom du thème"><img src="test_dossier/dossier_vide_96.png" /><img class="cat_image" src="test_dossier/test_catego_72.png" /></li>
<h4>Nom de la catégorie</h4>
<li title="Nom du thème"><img src="test_dossier/dossier_vide_96.png" /><img class="cat_image" src="test_dossier/test_catego_72.png" /></li>
<li title="Nom du thème"><img src="test_dossier/dossier_vide_96.png" /><img class="cat_image" src="test_dossier/test_catego_72.png" /></li>
</div>
<div id="actions_imagier" style="display:none;">
<li>
<img src="imagier/actions/acheter.png" />
<ul>
<li>erg egergergre grt hrg</li>
<li>erg eger</li>
<li>erg egergergre grt hrg erg</li>
<li>vous mangez</li>
<li>Nous nous asseyons</li>
<li>erg trg</li>
<li>erg egetr d</li>
</ul>
</li>
<li><img src="imagier/actions/agiter.png" />
</li>
<li><img src="imagier/actions/aider.png" />
</li>
<li><img src="imagier/actions/aimer.png" />
</li>
</div>
</div>
<div id="o_corbeille" class="tab-pane fade police_adaptee curseur_onglets">
<img id="corbeille_corbeille" class="scale_p01 pointer" title="Supprimer toutes les étiquettes de la corbeille" style="float:right;" src="images/logo_corbeille_24.png">
<ul style="margin:0; padding:0;"></ul>
<div style="clear:both;"></div>
</div>
</div>
</div> <!-- fin ecran_affichage -->
<div class="row ecran_impression"></div>
<div class="avertissement_navigateur" id="message_avertissement_javascript" style="text-align:center; margin-top:10px;">
<img src='images/gif_chargement.gif' /><br />
<p><b>Patience pendant le temps de chargement...</b></p><p>Javascript doit être activé sur votre navigateur pour que cette application fonctionne !</p>
</div>
<div id="si_ie" class="avertissement_navigateur">
<img style="float:right" src="images/logo_avertissement-ie.jpg" />
<p><b>Vous utilisez un navigateur Web obsolète ou Javascript est désactivé !</b></p>
<p>Pour que cette application fonctionne, il est nécessaire de télécharger et installer un navigateur "moderne", tel que <a target="_blank" href="https://www.mozilla.org/fr/firefox/new/">Mozilla Firefox</a> par exemple.</p>
<p>Si cet ordinateur n'est pas connecté à Internet, <a target="_blank" href="http://portableapps.com/apps/internet/firefox_portable/localization">téléchargez une version portable de Firefox</a> et copiez-la sur cet ordinateur pour l'installer...</p>
<div style="clear:both"></div>
</div>
</div> <!-- fin class="container" -->
<!-- Affichage du rideau -->
<div id="tnif_rideau" class="redimensionnable" style="display:none;"><img src="images/icone_bt_fullscreen_24.png" class="bt_rideau_pleinecran scale_p015 pointer" style="float:right; margin:10px;" title="Afficher en plein écran" /></div>
<!-- Fenêtre modale pour l'affichage de A propos -->
<div class="modal fade" id="modale_infos" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header"><button type="button" class="close" data-dismiss="modal">×</button><h4 class="modal-title"><img src="images/logo_info_32.png" /> À propos de TNI Étiquettes</h4></div>
<div class="modal-body">
<div class="tnif_info">
<p><img src='images/qrcode_tnietiquettes.png' style='width:100px; height:100px; float:right; margin-top:-10px;' />Publié par l'<a href='http://pragmatice.net' target='_blank'>association PragmaTICE</a>, TNI Etiquettes est un des modules de TNI Facile. Il permet de manipuler des étiquettes textuelles via une ergonomie adaptée au TNI. Une banque de mots et d'expressions est intégrée à l'application.</p>
</div>
<div class='credits_etc' style='clear:both; padding-top:10px;'></div>
<div class="tnif_stat" style='display:none;'></div>
</div>
</div>
</div>
</div>
<!-- Fenêtre modale de saisie du nom de l'activité exportée -->
<div class="modal fade" id="modale_exporter" role="dialog"></div>
<div class="modal fade" id="modale_baoutils" role="dialog" data-backdrop="static">
<div class="modal-dialog modal-lg">
<div class="modal-content" style="background:#E1E1FF;">
<div class="modal-body">
<div class="pave_droit_modale_bao">
<button id="bt_supprimer_couleurs" class="btn btn-sm btn-info btn-block btn-petit">Supprimer les couleurs</button>
<button id="bt_supprimer_formatage" class="btn btn-sm btn-info btn-block btn-petit">Supprimer le formatage</button>
<button id="bt_effacer_textarea_bao" class="btn btn-sm btn-info btn-block btn-petit">Effacer le texte</button>
<div class="modale_coul_lang_pol">
<div id="legende_modale_bao"><table></table></div>
<div id="langue_modale_bao"></div>
<div id="police_modale_bao"></div>
</div>
</div>
<div style="padding-right:210px;">
<button id="bt_aide_bao" style="float:right;" class="btn btn-sm btn-info btn-petit"><span class="glyphicon glyphicon-book"></span> Aide <span class="chevron glyphicon glyphicon-chevron-down"></span></button>
<button id="bt_importer_bao" class="btn btn-sm btn-warning btn-petit"><span class="glyphicon glyphicon-import"></span> Importer</button>
<button id="bt_exporter_bao" class="btn btn-sm btn-warning btn-petit"><span class="glyphicon glyphicon-export"></span> Exporter</button>
<div id="aide_bao_blabla">
<p>Pour transformer en texte brut les étiquettes de la zone de deplacement flottant, chaque étiquette est encadrée par "[?|" et "]", ? étant le nombre correspondant à la couleur.</p>
<p>Chaque ligne saisie dans le champ ci-dessous est automatiquement convertie en étiquette blanche, sans qu'il soit nécessaire de l'encadrer par "[?|" et "]". Cette opération permet de récupérer dans la zone de déplacement flottant n'importe quel texte copié collé dans le champ ci-dessous.</p>
<ul>
<li><button class="btn btn-info btn-petit" disabled="disabled">Quitter sans modifier</button>, contrairement aux deux autres boutons, affiche l'écran de manipulation sans prendre en compte les éléments de la boîte à outils <em>(texte, légende, langue, police, étiquettes personnalisées, mémo, étiquettes favorites et versions des catégories)</em>.</li>
<li><button class="btn btn-success btn-petit" disabled="disabled">Remplacer</button> place les étiquettes dans la zone de déplacement flottant, en supprimant les étiquettes déjà présentes le cas échéant.</li>
<li><button class="btn btn-success btn-petit" disabled="disabled">Ajouter</button> insère les étiquettes dans la zone de déplacement flottant, au-dessous des étiquettes déjà présentes le cas échéant.</li>
</ul>
</div>
<div style="margin:10px 0; display:none;" class="zone_importer"><img style="float:left; cursor:pointer;" title="Fermer le volet Parcourir..." src="images/icone_fermer_24.png" />
<input type="file" accept="text/plain" id="fichier_importe" style="padding-left:10px;" onchange="importer()"/>
</div>
<div style="margin:10px 0; padding:5px; background:#FFF; display:none;" class="zone_exporter ombre_autour_5">
<p>La série exportée sera enregistrée dans le dossier de téléchargement du navigateur.</p>
<p>Cette exportation n'est possible que si le poste est connecté à Internet.</p>
<input onKeyPress="if(event.keyCode == 13) exporterTexte();" type="text" id="saisie_nom_fichier" class="form-control claviable" lang="fr" placeholder="Saisir le nom de l'activité" style="background:#F7F7F7" />
<div style="text-align:center; margin-top:10px;"><button class="btn btn-info fermer_volet_exporter" id="fermer_sans_exporter">Fermer sans exporter</button> <button class="btn btn-success fermer_volet_exporter" id="valider_exporter">Exporter l'activité</button></div>
</div>
<textarea id="texte_modale_bao" class="form-control claviable" lang="fr"></textarea>
<div>
<button id="quitter_bao_sans_modifier" class="btn btn-info">Quitter sans modifier</button>
<button id="quitter_bao_remplacer" class="btn btn-success">Remplacer</button>
<button id="quitter_bao_ajouter" class="btn btn-success">Ajouter</button>
</div>
</div>
<div style="clear:both;"></div>
<div style="margin-top:10px;">
<div style="float:left; padding-top:5px; font-weight:bold;">Titre de l'activité</div>
<div class="form-group" style="padding-left:130px;">
<input class="form-control claviable" id="titre_activite" placeholder="Titre de l'activité" type="text" lang="fr">
</div>
</div>
<label for="etiquettes_perso_bao" style="margin:10px 0 5px 0;"><span class="glyphicon glyphicon-tags"></span> Mes étiquettes <span style="font-weight:normal; font-style:italic;">(étiquettes personnalisées)</span></label>
<div id="etiquettes_perso_bao" style="padding:5px; background:#F0F0FF" class="ombre_autour_5"></div>
<label for="memo_bao" style="margin:15px 0 5px 0;"><span class="glyphicon glyphicon-pushpin"></span> Mémo</label>
<div id="memo_bao" style="padding:5px; background:#F0F0FF" class="ombre_autour_5"></div>
<label for="etiquettes_favorites_bao" style="margin:15px 0 5px 0;"><span class="glyphicon glyphicon-star-empty"></span> Étiquettes favorites</label>
<div id="etiquettes_favorites_bao" style="padding:5px; background:#F0F0FF" class="ombre_autour_5">
<div class="conteneur_etiq_fav_bao"></div>
</div>
<label id="titre_categories_etiq_bao" style="margin:15px 0 5px 0; cursor:pointer;"><span class="glyphicon glyphicon-chevron-down"></span> Versions des catégories</label>
<div id="categories_etiq_bao" style="display:none;"></div>
<div id="legende_ef_cache" style="display:none;"></div>
</div>
</div>
</div>
</div> <!-- FIN Fenêtre modale pour l'affichage des paramètres du jeu -->
<!-- Fenêtre modale pour la copie d'écran -->
<div class="modal fade" id="modale_copie_ecran" role="dialog"></div>
<!-- Div tampon -->
<div id="tampon_cat_manip" class="div_tampon" style="display:none;"></div>
<div id="tampon_nb_li_crees" class="div_tampon" style="display:none;"></div>
<div id="tampon_nb_li_dispo" class="div_tampon" style="display:none;"></div>
<div id="tampon_nb_cat_nv" class="div_tampon" style="display:none;"></div>
<div id="tampon_conteneur_disposition" class="div_tampon" style="display:none;"></div>
<form method="POST" action="exportEtiquettes.php" name="saisie_activite" id="saisie_activite">
<textarea id="champ_contenu_cache" name="champ_contenu_cache"></textarea>
<input type="hidden" name="nomFichier" id="nomFichier" />
</form>
<script type="text/javascript">
document.getElementById('si_ie').style.display = 'none';
if ((browser=="Microsoft Internet Explorer") && (brow_ver < 9)) {
document.getElementById('si_ie').style.display = 'block';
}
retourHaut();
</script>
</body>
</html>