Overblog Suivre ce blog
Editer l'article Administration Créer mon blog
Le blog du CRRIAM

Les interactions avec pandorabot

18 Mai 2012 , Rédigé par crriam Publié dans #Organisation des fichiers aiml

Voila bien quelque chose que j'ai chercher pendant tres longtemps sur le net et que je n'ai pas trouvé ! Donc je vous fais part de on travail.

 

Comment et pourquoi agir sur pandorabot à partire d'une page web ?

 

Pourquoi  ? : Pour initialiser le robot ou executer une commande dés le chargement de la page web, gérer l'inactivité de l'utilisateur, réagir à un clic,  etc. 

En gros, interagir complétement avec le robot sans avoir a tapper du texte ni à le valider.

 

Comment ? :

 

En utilisant le html customisé. 

 

Comment fonctione pandorabot ?

Pour que votre robot puisse répondre, il faut que votre fichier soit hébérger par pandorabot, allez donc dans la rubrique HTML customisé.

Là, vous pourrez charger ou créer votre propre page html.

 

Pour rendre l'interfacage plus simple, j'utilise des pages avec frame.

Pour ceux qui ne savent pas comment faire, chercher sur internet, ou utilisez frontpage, il gère super bien ce type de page a votre place sans que vous vous cassiez la tête.

 

En gros, vous aurez 3 pages .

La première page à gauche

la deusième à droite

et la 3eme sera une page invisible qu'on appel la page de cadre. C'est elle qui gère les deux autres en leur attribuant un nom et une adresse http. On mettra une bordure invisible sur celle-ci pour donner l'apparence d'une seule est même page.

 

exemple de code pour celle-ci :

 

<HTML>
<HEAD>

<frameset cols="35%,*" frameborder="0" framespacing="0" border="0" onLoad="Chargement();">

<frame name="gauche" src="http://www.pandorabots.com/pandora/talk?botid=e2ff479b6e35bc9a&skin=testgauche">

<frame name="droite" src="http://www.pandorabots.com/pandora/talk?botid=e2ff479b6e35bc9a&skin=test cadre">
</frameset>

</HEAD>
<noframes>
<BODY  >
   <p>Cette page utilise des cadres, mais votre navigateur ne les prend pas en
  charge.</p>
</BODY>
</noframes>
</HTML>

 

 

 

La page de droite aura les entrées utilisateurs et les réponses du robot, elle est rechargé a chaque réponse du robot, c'est donc elle qui gérera par exemple l'inactivité de l'utilisateur.

 

Capture-8.png

 

la page de gauche l'interface visuelle du robot, on pourra la faire changer avec une commande javascript envoyer par un pattern

Elle donnera l'image du robot, ici, Hallucinogene, le personnage fille de la Bande dessinée Tungstene.Pour une interface plus en adéquation avec le dialogue, on pourra faire varié cette image.

 

 

 

 

la page de cadre est invisible, et n'est chargé qu'une seul fois au démarage. C'est donc avec elle qu'on initialisera le robot.

 

 

voila à quoi ça ressemble Dans votre interface de gestion pandorabot :

 

Capture-6.png

 

la page explication.html n'as rien à voir avec ça :-)

 

et devant l'utilisateur aura dans son navigateur ça :

 

Capture-7.png

 

Comment faire réagir pandorabot aux differents stimulis (clikes, chargement de page, temps écoulé etc. )

 

C'est simple(ou presque :-), il faut qu'un code javacript, entre à la palce de l'utilisateur une phrase ou un mots ou un code dans le champ où normalement on entre le texte, et que ce même code valide automatiquement le champ sans qu'on est besoin d'appuyer sur entrée.

 

Ce code est à placer entre les balises body de la page html correspondante,

et ce code, le voici :

 

<SCRIPT language="Javascript">
function test() {
   
        parent.droite.document.form.input.value="coucou";
        parent.droite.document.form.submit();
}
</SCRIPT>

 

Explication :

On définit une fonction avec :

function test() {

là, elle s'appele test mais elle aurait pu s'appeller toto :-)

 

cette fonction va entrée un texte dans le champ texte de la page appeler droite (c'est notre cas puisque on l'a declaré comme ça dans la page de cadre html )  et le valider, là, elle va entrée le pattern coucou lorsqu'on lui demandera.

 

Comment demander l'execution du script  ?

 

soit au chargement de la page,

soit au bout d'un certain temps,

soit en cliquant sur un bouton, une image, ou même seulement une partie d'une image (avec image map)  (même situé sur une autre page )

 

Exemple, gérer l'inactivité de l'utilisateur :

 

le code de la page html de droite devra simplement contenir le script suivant entre les balise body :

 

 

<SCRIPT LANGUAGE="JavaScript">

function inactivite() {
          
          document.form.input.value="sleeping";
        document.form.submit();
       
}
setTimeout("inactivite()",30000); // delai en millisecondes avant envois du pattern sleeping


</SCRIPT>

 

on remarque qu'on utilise uniquement document.form.input. value... au lieu de parent.droite.document.form.input.value=... simplement parce que c'est sur cette même page que ce fais l'action mais on aurait pu utiliser quand même parent.droite...

 

Exemple, Initialiser le robot au chargement :

 

 exemple complet de la page de cadre

 

 

 

<HTML>
<HEAD>

<SCRIPT language="Javascript">
function Chargement() {
   
        parent.droite.document.form.input.value="starting1";
        parent.droite.document.form.submit();
}
</SCRIPT>

<frameset cols="35%,*" frameborder="0" framespacing="0" border="0" onLoad="Chargement();">

     

  <frame name="gauche" src="http://www.pandorabots.com/pandora/talk?botid=e2ff479b6e35bc9a&skin=botcam">

  <frame name="droite" src="http://www.pandorabots.com/pandora/talk?botid=e2ff479b6e35bc9a&skin=pagewebbot">
</frameset>

</HEAD>
<noframes>
<BODY  >
 

  <p>Cette page utilise des cadres, mais votre navigateur ne les prend pas en
  charge.</p>

  
</BODY>
</noframes>
</HTML>

 

On retrouve le code javascript, exécuté à l'appel de la fonction Chargement lorsque la page est chargée, elle inscrit le text (pattern) starting1 et le valide automatiquement lorsque la page est chargée avec l'instruction onLoad="Chargement();.

 

On retrouve aussi

La definition du nom des differentes pages ainsi que leur adresses http.

Seule la page de droite et la page de cadre qui contient le champ de texte des entrée utilisateur et les réponses du robot doivent obligatoirement être hébérgé par pandorabot,

si vous avez d'autres division avec d'autres pages celles ci peuvent être hébérgées ailleur.

 

Exemple, réagir au clike sur un bouton ou une image

(situé sur une page autre que celle des entrées).

 

voici le code qui devra être mis entre les balises body

 

<SCRIPT language="Javascript">
function test() {
   
        parent.droite.document.form.input.value="coucou";
        parent.droite.document.form.submit();
}
</SCRIPT>

<input name="bouton" value="taper coucou" onclick="test()" type="button">


<INPUT type="image" WIDTH =70 HEIGHT =70 src="http://tungstene.free.fr/imagesrobot/dollz094.gif" value="taper coucou" onclick="test()" name=Image>

 

lorsque l'on clike sur le bouton,ou

lorsque l'on clike sur l'image

ça entre le texte coucou dans la page appeler droite et valide le texte.

N'utilisez bien sur que la ligne dont vous avez besoin, input type image ou input type button.

Attention, pour les images, bien définir leur taille avec widht et height, sinon ça ne fonctionne pas

 

A vous maintenant d'imaginer toutes les interactions que vous voulez :-), le clike sur image ou bouton peut entrainer toutes sortes de choses, comme jouer , en faisant un quiz en cliquant sur une carte géographique,etc....

 

Partager cet article

Repost 0

Commenter cet article