{"id":349,"date":"2024-11-22T17:43:27","date_gmt":"2024-11-22T17:43:27","guid":{"rendered":"https:\/\/www.denkyo.fr\/bienvenue\/?p=349"},"modified":"2024-12-04T16:55:53","modified_gmt":"2024-12-04T16:55:53","slug":"creer-un-moteur-de-recherche-dans-un-module-cree-avec-activepresenter","status":"publish","type":"post","link":"https:\/\/www.denkyo.fr\/bienvenue\/2024\/11\/22\/creer-un-moteur-de-recherche-dans-un-module-cree-avec-activepresenter\/","title":{"rendered":"Cr\u00e9er un moteur de recherche dans un module cr\u00e9\u00e9 avec ActivePresenter"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\"><a href=\"https:\/\/atomisystems.com\/activepresenter\/\" data-type=\"link\" data-id=\"https:\/\/atomisystems.com\/activepresenter\/\" target=\"_blank\" rel=\"noreferrer noopener\">ActivePresenter<\/a> est le logiciel auteur que j&rsquo;utilise pour cr\u00e9er des modules d&rsquo;apprentissage. Son interface ressemble \u00e0 celle de PowerPoint. S&rsquo;il peut \u00eatre utilis\u00e9 basiquement, il propose \u00e9galement des fonctionnalit\u00e9s avanc\u00e9es qui le rendent puissant.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Au final, il est possible de g\u00e9n\u00e9rer plusieurs formats de contenus : du <a href=\"https:\/\/fr.wikipedia.org\/wiki\/Hypertext_Markup_Language\" data-type=\"link\" data-id=\"https:\/\/fr.wikipedia.org\/wiki\/Hypertext_Markup_Language\" target=\"_blank\" rel=\"noreferrer noopener\">HTML<\/a> pour diffuser basiquement sur le Web, mais \u00e9galement du <a href=\"https:\/\/fr.wikipedia.org\/wiki\/Sharable_Content_Object_Reference_Model\" data-type=\"link\" data-id=\"https:\/\/fr.wikipedia.org\/wiki\/Sharable_Content_Object_Reference_Model\" target=\"_blank\" rel=\"noreferrer noopener\">SCORM<\/a> (pour le suivi des apprentissages et des parcours sur une plateforme p\u00e9dagogique) ou des vid\u00e9os par exemple.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">D\u00e9couvrez des contenus cr\u00e9\u00e9s avec <a href=\"https:\/\/atomisystems.com\/activepresenter\/\" data-type=\"link\" data-id=\"https:\/\/atomisystems.com\/activepresenter\/\" target=\"_blank\" rel=\"noreferrer noopener\">ActivePresenter<\/a> dans la section <a href=\"https:\/\/www.denkyo.fr\/bienvenue\/\" data-type=\"link\" data-id=\"https:\/\/www.denkyo.fr\/bienvenue\/#real\" target=\"_blank\" rel=\"noreferrer noopener\">Mes r\u00e9alisations<\/a>.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Vous pouvez tester le moteur de recherche depuis la <a href=\"https:\/\/formations.denkyo.fr\/pluginfile.php\/18\/mod_resource\/content\/3\/index.html\" data-type=\"link\" data-id=\"https:\/\/formations.denkyo.fr\/pluginfile.php\/18\/mod_resource\/content\/3\/index.html\" target=\"_blank\" rel=\"noreferrer noopener\">d\u00e9monstration du module d&rsquo;apprentissage des kanji japonais<\/a>, en cliquant sur le bouton Kanji en page d&rsquo;accueil et en recherchant le mot musique, par exemple.<\/p>\n\n\n\n<p class=\"has-background wp-block-paragraph\" style=\"background-color:#e6c5c4;padding-top:10px;padding-right:10px;padding-bottom:10px;padding-left:50px\">\u26a0 <strong><em>Nota Bene<\/em><\/strong> <br>Lorsque des actions sont cr\u00e9\u00e9es sur un \u00e9v\u00e9nement (chargement, clic, etc.) dans l&rsquo;onglet Interactivit\u00e9 de la fen\u00eatre Propri\u00e9t\u00e9s, <strong>l&rsquo;ordre est important<\/strong>.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Pr\u00e9parer les \u00e9l\u00e9ments n\u00e9cessaires au fonctionnement du moteur de recherche<\/h2>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Cr\u00e9ez les variables n\u00e9cessaires au fonctionnement du moteur de recherche depuis l&rsquo;onglet Accueil, Variables.\n<ul class=\"wp-block-list\">\n<li>Cr\u00e9ez une variable de type VRAI\/FAUX que vous nommez modeRecherche, initialis\u00e9e \u00e0 Faux.<br>Cette variable permet de savoir qu&rsquo;une recherche est en cours.<\/li>\n\n\n\n<li>Cr\u00e9ez une variable de type TEXTE que vous nommez stringRecherche.<br>Cette variable stockera le texte recherch\u00e9, c&rsquo;est-\u00e0-dire ce que l&rsquo;utilisateur aura saisi dans le champ de recherche.<\/li>\n\n\n\n<li>Cr\u00e9ez une variable de type TEXTE que vous nommez sensRecherche.<br>Cette variable permettra de savoir si la recherche se fait de la premi\u00e8re \u00e0 la derni\u00e8re diapositive (avant) ou inversement (arriere).<\/li>\n\n\n\n<li>Cr\u00e9ez une variable de type Nombre que vous nommez indexPremiereFiche et que vous initialisez avec l&rsquo;index de la premi\u00e8re diapositive de contenu (ex. 2 si votre projet contient une page d&rsquo;accueil dont l&rsquo;index est 1).<br>&nbsp;<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li>Mat\u00e9rialisez la recherche en cours au moyen d&rsquo;une roue de chargement par exemple.\n<ul class=\"wp-block-list\">\n<li>Ins\u00e9rez une forme rectangulaire, noire et semi transparente de hauteur et de largeur 100% et positionn\u00e9e \u00e0 0 pixel des bords haut et gauche.<\/li>\n\n\n\n<li>Ins\u00e9rez un Conteneur de type Bo\u00eete Flex, align\u00e9 verticalement et horizontalement sur la diapositive, de largeur 100%, avec une Direction Vertical, Pas d&rsquo;enveloppe, un Alignement vertical Milieu et un D\u00e9bordement Visible (depuis la fen\u00eatre Propri\u00e9t\u00e9s dans l&rsquo;onglet Taille &amp; Propri\u00e9t\u00e9s).<\/li>\n\n\n\n<li>Dans la fen\u00eatre S\u00e9lection, nommez la Bo\u00eete Flex roue-texte.<\/li>\n\n\n\n<li>Ins\u00e9rez, dans cette Bo\u00eete Flex, l&rsquo;image d&rsquo;une <a href=\"https:\/\/www.denkyo.fr\/bienvenue\/wp-content\/uploads\/2024\/10\/loader.gif\" data-type=\"link\" data-id=\"https:\/\/www.denkyo.fr\/bienvenue\/wp-content\/uploads\/2024\/10\/loader.gif\" target=\"_blank\" rel=\"noreferrer noopener\">roue de chargement au format GIF<\/a> de hauteur 100% et avec un Alignement Horizontal Centrer (depuis la fen\u00eatre Propri\u00e9t\u00e9s dans l&rsquo;onglet Taille &amp; Propri\u00e9t\u00e9s).<\/li>\n\n\n\n<li>Ins\u00e9rez, dans cette Bo\u00eete Flex, une l\u00e9gende en Agrandir 0 et avec un Alignement Horizontal \u00c9tendu (depuis la fen\u00eatre Propri\u00e9t\u00e9s dans l&rsquo;onglet Taille &amp; Propri\u00e9t\u00e9s), dans laquelle vous saisirez en texte centr\u00e9 de couleur blanche \u00ab\u00a0Recherche en cours\u00a0\u00bb.<\/li>\n\n\n\n<li>S\u00e9lectionnez la forme rectangulaire et la Bo\u00eete Flex depuis la diapositive, cliquez-droit et groupez-les.<\/li>\n\n\n\n<li><strong>Pour ce groupe<\/strong>, depuis la fen\u00eatre Propri\u00e9t\u00e9s dans l&rsquo;onglet Taille &amp; Propri\u00e9t\u00e9s, cochez Initialement cach\u00e9.<\/li>\n\n\n\n<li>Dans la fen\u00eatre S\u00e9lection, nommez le groupe loader.<\/li>\n\n\n\n<li>Cliquez-droit sur le groupe depuis la diapositive et, via le menu contextuel, cliquez sur Montrer dans des diapositives multiples, Couche en Haut.<br>&nbsp;<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li>Cr\u00e9ez un message pour indiquer que la recherche est termin\u00e9e.\n<ul class=\"wp-block-list\">\n<li>Ins\u00e9rez une forme rectangulaire, noire et semi transparente de hauteur et de largeur 100% et positionn\u00e9e \u00e0 0 pixel des bords haut et gauche.<\/li>\n\n\n\n<li>Ins\u00e9rez une forme rectangulaire blanche opaque, centr\u00e9e horizontalement et verticalement sur la diapositive, de hauteur 50% et de largeur 50%, en ajustant la largeur en fonction du rendu souhait\u00e9 sur le mat\u00e9riel utilis\u00e9 si vous \u00eates en projet r\u00e9actif (ordinateur, mobiles, etc.).<\/li>\n\n\n\n<li>Dans la fen\u00eatre S\u00e9lection, nommez cette forme fondTexteFinRecherche.<\/li>\n\n\n\n<li>Ins\u00e9rez un Conteneur de type Bo\u00eete Flex, align\u00e9 verticalement et horizontalement sur la diapositive, de hauteur et de largeur correspondant \u00e0 la forme fondTexteFinRecherche, avec une Direction Vertical, Pas d&rsquo;enveloppe, un Alignement vertical Milieu et un D\u00e9bordement Automatique (depuis la fen\u00eatre Propri\u00e9t\u00e9s dans l&rsquo;onglet Taille &amp; Propri\u00e9t\u00e9s).<\/li>\n\n\n\n<li>Dans la fen\u00eatre S\u00e9lection, nommez la Bo\u00eete Flex TexteFinRecherche.<\/li>\n\n\n\n<li>Ins\u00e9rez, dans cette Bo\u00eete Flex, une l\u00e9gende en Agrandir 0 et avec un Alignement Horizontal \u00c9tendu, dans laquelle vous saisirez en texte centr\u00e9 \u00ab\u00a0Recherche termin\u00e9e\u00a0\u00bb (depuis la fen\u00eatre Propri\u00e9t\u00e9s dans l&rsquo;onglet Taille &amp; Propri\u00e9t\u00e9s).<\/li>\n\n\n\n<li>Ins\u00e9rez, dans cette Bo\u00eete Flex, une forme de la couleur de votre choix, avec une Largeur de 30% (\u00e0 ajuster en fonction du rendu souhait\u00e9 sur le mat\u00e9riel utilis\u00e9 si vous \u00eates en projet r\u00e9actif), de Hauteur Automatique, en Agrandir 0 et avec un Alignement Horizontal Centrer (depuis la fen\u00eatre Propri\u00e9t\u00e9s dans l&rsquo;onglet Taille &amp; Propri\u00e9t\u00e9s).<\/li>\n\n\n\n<li>Cliquez-droit sur cette forme, Editer le texte et saisissez \u00ab\u00a0Ok\u00a0\u00bb et, depuis la fen\u00eatre Propri\u00e9t\u00e9s dans l&rsquo;onglet Taille &amp; Propri\u00e9t\u00e9s, ajustez les marges de la zone de texte.<\/li>\n\n\n\n<li>Ajustez les Marges externes sup\u00e9rieures et inf\u00e9rieures de la l\u00e9gende et de la forme pour les espacer \u00e0 votre guise.<\/li>\n\n\n\n<li>S\u00e9lectionnez la forme rectangulaire fondTexteFinRecherche et la Bo\u00eete Flex TexteFinRecherche depuis la diapositive, cliquez-droit et groupez-les.<\/li>\n\n\n\n<li>S\u00e9lectionnez ce nouveau groupe et s\u00e9lectionnez simultan\u00e9ment la forme rectangulaire, noire et semi transparente de hauteur et de largeur 100% depuis la diapositive, cliquez-droit et groupez-les. <\/li>\n\n\n\n<li><strong>Pour ce groupe<\/strong>, depuis la fen\u00eatre Propri\u00e9t\u00e9s dans l&rsquo;onglet Taille &amp; Propri\u00e9t\u00e9s, cochez Initialement cach\u00e9.<\/li>\n\n\n\n<li>Dans la fen\u00eatre S\u00e9lection, nommez le groupe messageRechercheTerminee.<\/li>\n\n\n\n<li>Cliquez-droit sur le groupe depuis la diapositive et, via le menu contextuel, cliquez sur Montrer dans des diapositives multiples, Couche en Haut.<\/li>\n\n\n\n<li>S\u00e9lectionnez le bouton \u00ab\u00a0Ok\u00a0\u00bb cr\u00e9\u00e9 \u00e0 l&rsquo;instant et depuis la fen\u00eatre Propri\u00e9t\u00e9s dans l&rsquo;onglet Interactivit\u00e9, ajoutez les actions suivantes Au clic&nbsp;: <ul class=\"wp-block-list\"><\/ul>\n<ul class=\"wp-block-list\">\n<li>Ajuster la variable: D\u00e9finir [modeRecherche] \u00e0 [Faux]<\/li>\n\n\n\n<li>Cacher l&rsquo;objet: messageRechercheTerminee (Couche Sup\u00e9rieure du Projet)<\/li>\n\n\n\n<li>Cacher l&rsquo;objet: loader (Couche Sup\u00e9rieure du Projet)<\/li>\n\n\n\n<li>Executer JavaScript:<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<\/li>\n<\/ol>\n\n\n\n<pre class=\"wp-block-code\"><code>\/*Moteur de recherche*\/\n\n\/*Nous remettons en place la possibilit\u00e9 de scroller*\/\ndocument.getElementsByClassName(\"ap-slides\")&#91;0].style.overflowY=\"auto\";<\/code><\/pre>\n\n\n\n<ol start=\"4\" class=\"wp-block-list\">\n<li>Affichez le message (cr\u00e9\u00e9 en point 3.) indiquant que la recherche est termin\u00e9e (et cachez la roue de chargement).\n<ul class=\"wp-block-list\">\n<li>S\u00e9lectionnez successivement chaque diapositive sur laquelle le champ de recherche sera implant\u00e9 et depuis l&rsquo;onglet Interactivit\u00e9 la fen\u00eatre Propri\u00e9t\u00e9s, ajoutez les actions suivantes Au chargement&nbsp;:\n<ul class=\"wp-block-list\">\n<li>Cacher l&rsquo;objet: loader (Couche Sup\u00e9rieure du Projet)<br>SI modeRecherche est \u00e9gal \u00e0 Vrai<\/li>\n\n\n\n<li>Montrer l&rsquo;objet (blocage): messageRechercheTerminee (Couche Sup\u00e9rieure du Projet)<br>SI modeRecherche est \u00e9gal \u00e0 Vrai<\/li>\n\n\n\n<li>Executer JavaScript: <br>SI modeRecherche est \u00e9gal \u00e0 Vrai<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<\/li>\n<\/ol>\n\n\n\n<pre class=\"wp-block-code\"><code>\/*Moteur de recherche*\/\n\n\/*Nous emp\u00eachons l'utilisateur de scroller au-del\u00e0 du fond noir semi transparent*\/\ndocument.getElementsByClassName(\"ap-slides\")&#91;0].style.overflow=\"hidden\";\n\n\/*Nous vidons la variable qui a \u00e9t\u00e9 aliment\u00e9e par les \u00e9l\u00e9ments saisis dans le champ de recherche*\/\nprez.variable(\"stringRecherche\").clear;<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\" style=\"padding-right:10px;padding-left:50px\">\ud83d\udca1<strong>Astuce<\/strong><br>Si vous souhaitez implanter le moteur de recherche sur plusieurs ou sur toutes les diapositives, alors il faudra \u00e9galement mettre en place une variable num\u00e9rique qui sera incr\u00e9ment\u00e9e \u00e0 chaque diapositive parcourue pendant la recherche.<br>Le message signalant la fin de la recherche sera \u00e0 afficher et la roue de chargement sera \u00e0 cacher SI la valeur de la variable num\u00e9rique correspond au nombre total de diapositives du projet (ou \u00e0 parcourir).<br>La variable num\u00e9rique devra \u00eatre r\u00e9initialis\u00e9e \u00e0 0 Au clic sur le bouton Ok du message signalant la fin de la recherche.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Cr\u00e9er le champ de recherche<\/h2>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Rendez-vous sur la ou l&rsquo;une des diapositives sur laquelle vous souhaitez proposer le champ de recherche.<\/li>\n\n\n\n<li>Ins\u00e9rez-y une entr\u00e9e de texte et s\u00e9lectionnez les Message de r\u00e9ussite et Message d&rsquo;\u00e9chec associ\u00e9s pour les Effacer.<\/li>\n\n\n\n<li>Ins\u00e9rez soit une l\u00e9gende dans laquelle vous mettrez un caract\u00e8re repr\u00e9sentant une loupe (ex. <a href=\"https:\/\/outils-javascript.aliasdmc.fr\/encodage-caracteres-bureautiques\/encode-caractere-1F50E-html-css-js-autre.html\" target=\"_blank\" rel=\"noreferrer noopener\">unicode U+1F50E<\/a> ou avec <a href=\"https:\/\/fontawesome.com\/search?q=magnifying%20glass&amp;o=r\" data-type=\"link\" data-id=\"https:\/\/fontawesome.com\/search?q=magnifying%20glass&amp;o=r\" target=\"_blank\" rel=\"noreferrer noopener\">FontAwesome<\/a>), soit un pictogramme de loupe.<\/li>\n\n\n\n<li>Dans la fen\u00eatre S\u00e9lection, nommez l&rsquo;entr\u00e9e de texte champRecherche.<\/li>\n\n\n\n<li>Groupez ces deux \u00e9l\u00e9ments et positionnez le groupe \u00e0 votre convenance.<\/li>\n\n\n\n<li>S\u00e9lectionnez l&rsquo;entr\u00e9e de texte et :\n<ul class=\"wp-block-list\">\n<li><strong>dans l&rsquo;onglet Style et Effets de la fen\u00eatre Propri\u00e9t\u00e9s :<\/strong>\n<ul class=\"wp-block-list\">\n<li>param\u00e9trez un remplissage uni blanc par exemple,<\/li>\n\n\n\n<li>ajoutez une Ligne solide gris clair de Largeur 1.<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><strong>dans l&rsquo;onglet Interactivit\u00e9 de la fen\u00eatre Propri\u00e9t\u00e9s :<\/strong> \n<ul class=\"wp-block-list\">\n<li>renseignez comme Valeurs correctes une valeur improbable (ex. fkfjgsjgifdjvfidjfvlfd), <\/li>\n\n\n\n<li>d\u00e9cochez l&rsquo;ID du rapport,<\/li>\n\n\n\n<li>choisissez un nombre de Tentatives Infini,<\/li>\n\n\n\n<li>Soumettre \u00e0 Presser la touche Enter,<\/li>\n\n\n\n<li>alimenter la Variable de type TEXTE nomm\u00e9e stringRecherche,<\/li>\n\n\n\n<li>dans les \u00c9v\u00e9nements &#8211; Actions, supprimez les \u00e9v\u00e9nements pr\u00e9sents par d\u00e9faut et ajoutez un \u00e9v\u00e9nement Si incorrect et une action Ex\u00e9cuter JavaScript dans laquelle vous adapterez le code suivant :<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<\/li>\n<\/ol>\n\n\n\n<pre class=\"wp-block-code\"><code>\/*Moteur de recherche*\/\n\n\/*Nous alimentons la variable sensRecherche pour indiquer que nous parcourons les diapositives du d\u00e9but vers la fin.*\/\nprez.variable(\"sensRecherche\", \"avant\");\n\n\/*La m\u00e9thode trim() permet de retirer les caract\u00e8res vides en d\u00e9but et fin de cha\u00eene de caract\u00e8res, notamment ceux automatiquement ajout\u00e9s par les claviers de smartphone \u00e0 la fin d'une saisie.*\/\nprez.variable(\"stringRecherche\", prez.variable(\"stringRecherche\").trim());\n\n\/*Nous nous assurons que l'utilisateur a bien saisi du texte qui a aliment\u00e9 la variable stringRecherche pour lancer la recherche.*\/\nif(prez.variable(\"stringRecherche\").length !== 0){\n\n    \/*Nous faisons appara\u00eetre la roue de chargement.*\/\n    if(!prez.object(\"roue-texte\").visible()){\n        prez.object(\"roue-texte\").show();\n    }\n\n    \/*Nous indiquons que le module est en mode recherche gr\u00e2ce \u00e0 la variable modeRecherche que nous passons \u00e0 Vrai.*\/\n    prez.variable(\"modeRecherche\", true);\n\n    \/*Nous nous rendons sur la premi\u00e8re diapositive de contenu (son index est 2 car la premi\u00e8re diapositive est en fait la page d'accueil du module).*\/\n    prez.showSlideAt(2);\n}<\/code><\/pre>\n\n\n\n<ol start=\"7\" class=\"wp-block-list\">\n<li>S\u00e9lectionnez la loupe et dans l&rsquo;onglet Interactivit\u00e9 de la fen\u00eatre Propri\u00e9t\u00e9s ajoutez les actions suivantes Au clic&nbsp;:\n<ul class=\"wp-block-list\">\n<li>Soumettre: Toutes les interactions montrant<\/li>\n\n\n\n<li>Executer JavaScript: [le script ci-dessous]<\/li>\n\n\n\n<li>Montrer l&rsquo;objet: champRecherche<\/li>\n<\/ul>\n<\/li>\n<\/ol>\n\n\n\n<pre class=\"wp-block-code\"><code>\/*Moteur de recherche*\/\n\n\/*Nous alimentons la variable sensRecherche pour indiquer que nous parcourons les diapositives du d\u00e9but vers la fin.*\/\nprez.variable(\"sensRecherche\", \"avant\");\n\n\/*La m\u00e9thode trim() permet de retirer les caract\u00e8res vides en d\u00e9but et fin de cha\u00eene de caract\u00e8res, notamment ceux automatiquement ajout\u00e9s par les claviers de smartphone \u00e0 la fin d'une saisie.*\/\nprez.variable(\"stringRecherche\", prez.variable(\"stringRecherche\").trim());\n\n\/*Nous nous assurons que l'utilisateur a bien saisi du texte qui a aliment\u00e9 la variable stringRecherche pour lancer la recherche.*\/\nif(prez.variable(\"stringRecherche\").length !== 0){\n\n    \/*Nous faisons appara\u00eetre la roue de chargement.*\/\n    if(!prez.object(\"roue-texte\").visible()){\n        prez.object(\"roue-texte\").show();\n    }\n\n    \/*Nous indiquons que le module est en mode recherche gr\u00e2ce \u00e0 la variable modeRecherche que nous passons \u00e0 Vrai.*\/\n    prez.variable(\"modeRecherche\", true);\n\n    \/*Nous nous rendons sur la premi\u00e8re diapositive de contenu (son index est 2 car la premi\u00e8re diapositive est en fait la page d'accueil du module).*\/\n    prez.showSlideAt(2);\n}\n<\/code><\/pre>\n\n\n\n<ol start=\"8\" class=\"wp-block-list\">\n<li>Rendez-vous sur la ou les diapositives depuis lesquelles le moteur de recherche est accessible et ajoutez les actions suivantes Au chargement, depuis l&rsquo;onglet Interactivit\u00e9 de la fen\u00eatre Propri\u00e9t\u00e9s\u00a0:\n<ul class=\"wp-block-list\">\n<li>Effacer l&rsquo;entr\u00e9e de l&rsquo;utilisateur: champRecherche <\/li>\n\n\n\n<li>Cacher l&rsquo;objet: champRecherche<\/li>\n\n\n\n<li>Executer JavaScript:<\/li>\n<\/ul>\n<\/li>\n<\/ol>\n\n\n\n<pre class=\"wp-block-code\"><code>\/*Moteur de recherche*\/\n\n\/*Nous vidons la variable qui stockait le texte recherch\u00e9 pr\u00e9c\u00e9demment (saisi dans l'entr\u00e9e de texte champRecherche).*\/\nprez.variable(\"stringRecherche\").clear;<\/code><\/pre>\n\n\n\n<ol start=\"9\" class=\"wp-block-list\">\n<li>Rendez-vous sur les diapositives parcourues pendant la recherche et ajoutez les actions suivantes Au chargement, depuis l&rsquo;onglet Interactivit\u00e9 de la fen\u00eatre Propri\u00e9t\u00e9s\u00a0:\n<ul class=\"wp-block-list\">\n<li>Ex\u00e9cuter JavaScript:<\/li>\n<\/ul>\n<\/li>\n<\/ol>\n\n\n\n<pre class=\"wp-block-code\"><code>\/*Moteur de recherche*\/\n\nsetTimeout(function(){\n\n\/*Nous commen\u00e7ons par afficher la roue de chargement si elle n'est pas d\u00e9j\u00e0 affich\u00e9e.*\/\nif(!prez.object(\"loader\").visible()){\n    prez.object(\"loader\").show();\n}\n\n\/*Nous initialisons une variable vide (contenu), que nous alimenterons des contenus textuels de la diapositive.*\/\nvar contenu = \"\";\n\n\/*Nous initialisons une variable num\u00e9rique qui nous permettra d'indiquer la pr\u00e9sence (1) ou non (0) du texte recherch\u00e9.*\/\nvar presence = 0;\n\n\/*Nous parcourons le texte de la diapositive, c'est-\u00e0-dire le texte tous les \u00e9l\u00e9ments (children) pr\u00e9sents l'objet conteneur \"vocabulaire\".*\/\nfor (var e = 0 ; e&lt;prez.object(\"vocabulaire\").children.length ; e++){\n\n    \/*Nous ajoutons ces \u00e9l\u00e9ments textuels \u00e0 la variable contenu.*\/\n    contenu = contenu + prez.object(\"vocabulaire\").children&#91;e].text();\n    \/*Nous passons tous les contenus en miniscule, afin de ne pas \u00eatre sensible \u00e0 la casse.*\/\n    contenu = contenu.toLowerCase();\n}\n\n\/*Si la variable contenu contient la m\u00eame suite de caract\u00e8res que celle saisie dans la variable champRecherche r\u00e9duite en minuscule, nous passons la variable pr\u00e9sence \u00e0 1...*\/\nif(contenu.indexOf(prez.variable(\"stringRecherche\").toLowerCase()) > -1){\n        presence = presence + 1;\n\n        \/\/... et nous cachons la roue de chargement si celle-ci est visible.\n        if(prez.object(\"loader\").visible()){\n            prez.object(\"loader\").hide();\n        }\n}\n\n\/*En revanche, si la variable presence est toujours \u00e0 0...*\/\nif(presence === 0){\n\n    \/*...alors nous passons \u00e0 la diapositive suivante si la valeur de la variable sensRecherche est avant.*\/\n    if(prez.variable(\"sensRecherche\") == \"avant\"){\n        prez.nextSlide();\n\n     \/*...alors nous passons \u00e0 la diapositive pr\u00e9c\u00e9dente si la valeur de la variable sensRecherche est arri\u00e8re et que nous ne sommes pas sur la premi\u00e8re diapositive.*\/\n    }else if((prez.variable(\"sensRecherche\") == \"arriere\")&amp;&amp;(prez.variable(\"apCurrentSlideIndex\")!==prez.variable(\"indexPremiereFiche\"))){\n        prez.previousSlide();\n\n\/*...alors nous revenons \u00e0 la diapositive depuis laquelle nous avons lanc\u00e9 la recherche si la valeur de la variable sensRecherche est arri\u00e8re et que nous sommes sur la premi\u00e8re diapositive.*\/\n    }else if((prez.variable(\"sensRecherche\") == \"arriere\")&amp;&amp;(prez.variable(\"apCurrentSlideIndex\")==prez.variable(\"indexPremiereFiche\"))){\n        prez.showSlideAt(prez.variable(\"apTotalSlides\"));\n    }\n}\n\n}, 050);<\/code><\/pre>\n\n\n\n<p class=\"has-background wp-block-paragraph\" style=\"background-color:#e6c5c4;padding-top:10px;padding-right:10px;padding-bottom:10px;padding-left:50px\">\u26a0 <strong><em>Nota Bene<\/em><\/strong> <br>Dans vos diapositives, si le texte que vous souhaitez soumettre \u00e0 la recherche se trouve dans des conteneurs diff\u00e9rents, alors il vous faut adapter ce script pour parcourir tous les conteneurs concern\u00e9s de la diapositive (ci-dessus, le conteneur correspond \u00e0 l&rsquo;objet nomm\u00e9 \u00ab\u00a0vocabulaire\u00a0\u00bb). <br>\u00c9galement, si du texte est contenu dans un conteneur lui-m\u00eame contenu dans un conteneur, <strong>il n&rsquo;est pas soumis \u00e0 la recherche<\/strong>. Il vous faut donc aussi adapter ce script pour parcourir tous les conteneurs concern\u00e9s.<br>Enfin, si le nom des conteneurs est diff\u00e9rent d&rsquo;une diapositive \u00e0 l&rsquo;autre, alors il vous faut adapter ce script sur chaque diapositive pour cibler le conteneur concern\u00e9 en fonction de son nom sur la diapositive. <\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Poursuivre la recherche d&rsquo;une diapositive \u00e0 l&rsquo;autre<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Lorsque le script ex\u00e9cut\u00e9 au chargement de chaque diapositive aura trouv\u00e9 une correspondance entre le texte recherch\u00e9 (stock\u00e9 dans la variable de type TEXTE stringRecherche) et le texte pr\u00e9sent sur la diapositive (stock\u00e9 dans la variable contenu, cr\u00e9\u00e9 dans le script), il s&rsquo;arr\u00eatera sur la diapositive en question. <\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Nous allons donc cr\u00e9er des fl\u00e8ches pour poursuivre la recherche vers les diapositives suivantes ou pr\u00e9c\u00e9dentes : <\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Ins\u00e9rez deux L\u00e9gendes et dans chacune d&rsquo;elle, vous mettrez un caract\u00e8re repr\u00e9sentant une fl\u00e8che vers le bas pour l&rsquo;une (ex. <a href=\"https:\/\/outils-javascript.aliasdmc.fr\/encodage-bouton-lecteur\/encode-caractere-23F7-html-css-js-autre.html\" target=\"_blank\" rel=\"noreferrer noopener\">unicode U+23F7<\/a> ou avec <a href=\"https:\/\/fontawesome.com\/search?q=carret&amp;o=r\" data-type=\"link\" data-id=\"https:\/\/fontawesome.com\/search?q=magnifying%20glass&amp;o=r\" target=\"_blank\" rel=\"noreferrer noopener\">FontAwesome<\/a>) et une fl\u00e8che vers le haut (ex. <a href=\"https:\/\/outils-javascript.aliasdmc.fr\/encodage-bouton-lecteur\/encode-caractere-23F6-html-css-js-autre.html\" target=\"_blank\" rel=\"noreferrer noopener\">unicode U+23F6<\/a> ou avec <a href=\"https:\/\/fontawesome.com\/search?q=carret&amp;o=r\" data-type=\"link\" data-id=\"https:\/\/fontawesome.com\/search?q=magnifying%20glass&amp;o=r\" target=\"_blank\" rel=\"noreferrer noopener\">FontAwesome<\/a>) pour l&rsquo;autre ou ins\u00e9rez deux pictogrammes sous forme d&rsquo;Image.<\/li>\n\n\n\n<li>Groupez ces deux \u00e9l\u00e9ments et positionnez le groupe \u00e0 l&rsquo;endroit souhait\u00e9.<\/li>\n\n\n\n<li>Dans la fen\u00eatre S\u00e9lection, nommez le groupe flechesRecherche.<\/li>\n\n\n\n<li>S\u00e9lectionnez la fl\u00e8che pointant vers le bas, qui permettra de poursuivre la recherche vers la diapositive suivante et ajoutez les actions suivantes Au clic, depuis l&rsquo;onglet Interactivit\u00e9 la fen\u00eatre Propri\u00e9t\u00e9s&nbsp;:\n<ul class=\"wp-block-list\">\n<li>Ajuster la variable: D\u00e9finir [sensRecherche] \u00e9gale \u00e0 [avant]<\/li>\n\n\n\n<li>Aller en avant: diapositive 1<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li>S\u00e9lectionnez la fl\u00e8che pointant vers le haut, qui permettra de poursuivre la recherche vers la diapositive suivante et ajoutez les actions suivantes Au clic, depuis l&rsquo;onglet Interactivit\u00e9 la fen\u00eatre Propri\u00e9t\u00e9s&nbsp;:\n<ul class=\"wp-block-list\">\n<li>Ajuster la variable: D\u00e9finir [sensRecherche] \u00e9gale \u00e0 [arriere]<\/li>\n\n\n\n<li>Revenir en arri\u00e8re: diapositive 1<br>SI apCurrentSlideIndex n&rsquo;est pas \u00e9gale \u00e0 Variable indexPremiereFiche<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li>Dupliquez ce groupe de fl\u00e8ches sur toutes les diapositives \u00e0 explorer.<\/li>\n\n\n\n<li>Rendez-vous sur les diapositives parcourues pendant la recherche et ajoutez les actions suivantes Au chargement, depuis l&rsquo;onglet Interactivit\u00e9 la fen\u00eatre Propri\u00e9t\u00e9s&nbsp;:\n<ul class=\"wp-block-list\">\n<li>Montrer l&rsquo;objet: flechesRecherche<br>SI modeRecherche est \u00e9gal \u00e0 Vrai<\/li>\n\n\n\n<li>Cacher l&rsquo;objet: flechesRecherche<br>SI modeRecherche est \u00e9gal \u00e0 Faux<\/li>\n<\/ul>\n<\/li>\n<\/ol>\n\n\n\n<p class=\"wp-block-paragraph\">\u26a0 <strong><em>Nota Bene<\/em><\/strong><br>Si sur vos diapositives, vous avez des fl\u00e8ches de navigation vous permettant de vous rendre sur une autre diapositive, alors il vous faut ajouter pr\u00e9alablement \u00e0 la redirection les actions suivantes Au clic, depuis l&rsquo;onglet Interactivit\u00e9 la fen\u00eatre Propri\u00e9t\u00e9s&nbsp;:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Executer JavaScript: [le script ci-dessous]<br>SI modeRecherche est \u00e9gal \u00e0 Vrai<\/li>\n\n\n\n<li>Ajuster la variable: D\u00e9finir [modeRecherche] \u00e9gale \u00e0 [Faux]<br>SI modeRecherche est \u00e9gal \u00e0 Vrai<\/li>\n<\/ul>\n\n\n\n<pre class=\"wp-block-code\"><code>\/*Moteur de recherche*\/\n\n\/*Nous vidons la variable qui a \u00e9t\u00e9 aliment\u00e9e par les \u00e9l\u00e9ments saisis dans le champ de recherche.*\/\nprez.variable(\"stringRecherche\").clear;<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Le moteur de recherche est d\u00e9sormais pr\u00eat ! <\/p>\n\n\n\n<p class=\"wp-block-paragraph\" style=\"padding-right:10px;padding-left:50px\">\ud83d\udca1<strong>Astuce<\/strong><br>N&rsquo;oubliez de choisir un curseur appropri\u00e9 pour signifier les objets cliquables dans l&rsquo;onglet Interactivit\u00e9 de la fen\u00eatre Propri\u00e9t\u00e9s de chacun d&rsquo;entre-eux.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Si vous avez des questions \u00e0 propos de cet article, des points d&rsquo;incompr\u00e9hension, des suggestions ou si vous avez relev\u00e9 des oublis ou erreurs de ma part, <a href=\"https:\/\/www.denkyo.fr\/bienvenue\/contact\/\" data-type=\"page\" data-id=\"120\">contactez-moi<\/a>\u00a0!<\/p>\n","protected":false},"excerpt":{"rendered":"<p>ActivePresenter est le logiciel auteur que j&rsquo;utilise pour cr\u00e9er des modules d&rsquo;apprentissage. Son interface ressemble \u00e0 celle de PowerPoint. S&rsquo;il peut \u00eatre utilis\u00e9 basiquement, il propose \u00e9galement des fonctionnalit\u00e9s avanc\u00e9es qui le rendent puissant. Au &hellip;<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"iawp_total_views":0,"footnotes":""},"categories":[6],"tags":[],"class_list":["post-349","post","type-post","status-publish","format-standard","hentry","category-conception"],"_links":{"self":[{"href":"https:\/\/www.denkyo.fr\/bienvenue\/wp-json\/wp\/v2\/posts\/349","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.denkyo.fr\/bienvenue\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.denkyo.fr\/bienvenue\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.denkyo.fr\/bienvenue\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.denkyo.fr\/bienvenue\/wp-json\/wp\/v2\/comments?post=349"}],"version-history":[{"count":39,"href":"https:\/\/www.denkyo.fr\/bienvenue\/wp-json\/wp\/v2\/posts\/349\/revisions"}],"predecessor-version":[{"id":417,"href":"https:\/\/www.denkyo.fr\/bienvenue\/wp-json\/wp\/v2\/posts\/349\/revisions\/417"}],"wp:attachment":[{"href":"https:\/\/www.denkyo.fr\/bienvenue\/wp-json\/wp\/v2\/media?parent=349"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.denkyo.fr\/bienvenue\/wp-json\/wp\/v2\/categories?post=349"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.denkyo.fr\/bienvenue\/wp-json\/wp\/v2\/tags?post=349"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}