*{bold::pfmath} est un outil permettant de créer des documents html evolués, hautement paramétrables et dynamiques (avec de nombreuses intéractions avec l'utilisateur). Ces documents Pfmath (ou page Pfmath) permettent notamment d'insérer des formules mathématiques (entre dollar comme avec TeX) ou bien des dessins. Les documents Pfmath sont des documents html proposant de nombreux raccourcis et d'actions qui ne sont pas d'origine dans un simple document html. Ces documents sont visualisables sur n'importe quels systèmes (Windows, Mac ou Linux) et n'importe quels dispositifs (PC, smartphone, tablette) et sont parfaitement adaptés à la vidéoprojection. Aucune installation n'est nécessaire pour visualiser les documents pfmath. Il suffit juste d'un navigateur évolué (comme Firefox, Chrome ou Internet Explorer, ...) pour visualiser ces pages. Ces documents comportent généralement un titre (bandeau gris foncé en haut de la page html) et *{bold::doivent} comporter des boîtes (ou box en anglais). Pour utiliser *{bold::pfmath}, il suffit de créer un document html, soit en utilisant un éditeur de texte de votre choix, soit l'éditeur pfmath intégré #{PfmathEditor::http://mathablette.fr/pfd} :
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <script id="pfmath" type="text/javascript" password="" src="http://mathablette.fr/lib/pfmath.js"></script> </head> <body data-type="animation" data-title="" data-main-title="" data-right="" data-font-size="14" data-init="boxes" data-main-style="frame"> </body> </html>
Il suffit de copier-coller l'entête ci-dessus pour créer un document pfmath. Une fois ce document créé, il suffit de le visualiser via un navigateur internet sur un ordinateur, un téléphone ou une tablette. Attention une connexion internet est nécessaire pour visualiser ces documents.
Une fois la page Pfmath chargée, le bouton est disponible en haut et à gauche de la fenêtre du navigateur. En cliquant sur , un menu apparaît. Ce menu propose : vspace{5}
: démarrer l'animation si le type du document (*{#ff0000::data-type}) est défini à "animation". vspace{5}
: afficher ou cacher les éléments de la page Pfmath de classe "hide" (*{#ff0000::class}=*{#0000ff::"hide"}). vspace{5}
: rendre disponible de temps ou bien désactiver le décomptage temps lors d'une animation. vspace{5}
: afficher toutes les boites du document Pfmath. vspace{5}
: afficher le sommaire de la page Pfmath. Le sommaire permet d'afficher une seule boite (ou une sélection d'ailleurs) en cliquant sur
vspace{5}
: réduire la taille de la police de caractères de la page Pfmath. En cliquant sur la valeur, il est possible de revenir à la taille par défaut.vspace{5}
: augmenter la taille de la police de caractères de la page Pfmath. En cliquant sur la valeur, il est possible de revenir à la taille par défaut. vspace{5}
: réduire la largeur de la page Pfmath. En cliquant sur la valeur, il est possible de revenir à la largeur par défaut. vspace{5}
: augmenter la largeur de la page Pfmath. En cliquant sur la valeur, il est possible de revenir à la largeur par défaut. vspace{5}
Le paramètre *{#ff0000::password} permet de protéger l'affichage de la page html par un mot de passe. Ce mot de passe est *{#0000FF::encrypté}. Pour mettre un mot de passe il est indispensable de cliquer sur le bouton .

Le corps du document (balise "body") permet de définir certains paramètres du document :
$\bullet$ *{#ff0000::data-type} : permet de définir le type principal du document. Trois choix sont possibles "*{#0000FF::animation}" ; "*{#880088::list}" ou bien "*{#009999::page}".
Le type *{#0000FF::animation} permet de créer des boîtes (ou exercices) qui pourront être lancé dans une animation. Dans ce mode, un menu est alors disponible en cliquant sur le titre.
Le type *{#880088::list} permet de créer des boîtes (ou exercices) qui seront affichées au lancement de la page. Dans ce mode, un menu est alors disponible en cliquant sur le titre.
Le type *{#009999::page} permet de créer des boîtes (ou exercices) qui seront affichées au lancement de la page. Dans ce mode, un menu est alors disponible en cliquant sur le titre.
$\bullet$ *{#ff0000::data-main-style} : permet de définir le style principal du document. Deux choix sont disponibles *{#ff0000::data-main-style}="*{#0000ff::classic}" ou *{#ff0000::data-main-style}="*{#0000ff::frame}" (celui par défaut)
$\bullet$ *{#ff0000::data-main-title} : permet de définir le titre principal de la page html (sinon il s'agit du titre du document)
$\bullet$ *{#ff0000::data-main-width} : permet de définir la largeur principale des boites (par défaut 900). Ce paramètre peut prendre la valeur "auto", "max" ou un nombre de pixels. Pour la valeur "auto", les boites prennent le maximum de place possible et quand la taille de la fenêtre du navigateur est modifiée, la taille des boites est modifiée en conséquence. Pour la valeur "max", les boites prennent la taille maximum de la fenêtre du navigateur.
$\bullet$ *{#ff0000::data-title} : permet de définir le titre principal du document. Si ce paramètre est vide ou manquant le bloc de titre ne sera pas affiché.
$\bullet$ *{#ff0000::data-right} : permet de définir le texte placé à droite dans l'entête principale du document.
$\bullet$ *{#ff0000::data-font-size} : permet de définir la taille par défaut de la police de caractère. Il est recommandé d'utiliser une taille supérieure à $18$ dans le cas d'une vidéoprojection.
$\bullet$ *{#ff0000::data-title-font-size} : permet de définir la taille de la police de caractère des titres de la page Pfmath. Il est possible de définir un pourcentage par rapport à la taille de la police de caractères par défaut. Par défaut la taille de la police de caractères des titres est définie à 110%.
$\bullet$ *{#ff0000::data-font-family} : permet de définir la police de caractères du document (par défaut "Modern Computer").
$\bullet$ *{#ff0000::data-change-size} : permet de définir s'il est possible de changer la taille de la police de caractère (par défaut "true").
$\bullet$ *{#ff0000::data-after-animation} : permet de définir si après l'animation il y a un récapitulatif disponible (par défaut "true"). Pour qu'il n'ait pas de récapitulatif il est nécessaire d'insérer *{#ff0000::data-after-animation}="*{#0000ff::none}"
$\bullet$ *{#ff0000::data-init} : permet de définir le mode d'initialisation du document. Trois choix sont possibles "*{#0000FF::list}" ; "*{#880088::boxes}" ou bien "*{#009999::none}". Ce mode n'est disponible que pour le type "animation" ou "list"
Le mode d'initialisation *{#0000FF::list} propose lors du chargement de la page html d'afficher la liste des boîtes (ou exercices).
Le mode d'initialisation *{#880088::boxes} propose lors du chargement de la page html d'afficher un sommaire.
Pour le mode d'initialisation *{#009999::none}, rien n'est affiché.
Il est possible de modifier la largeur des boites ou bien d'afficher seulement certaines boites en ajoutant à la fin de l'url de la page pfmath : *{bold::#box=1:2;w=600} ce qui permet d'afficher seulement les boites 1 et 2 de la page pfmath et ayant une largeur de 600 pixels.
Il est possible d'utiliser *{pfmath} hors ligne. Pour ce faire, il faut télécharger l'archive #{pfmath::http://mathablette.fr/pfmath/pfmath.zip}. Une fois téléchargée, il est nécessaire de décompresser cette archive dans le dossier de votre choix. Il suffit alors de créer un document html avec l'entête suivante :
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <script id="pfmath" type="text/javascript" src="'chemin de l'installation de pfmath'/lib/pfmath.js"></script> </head> <body data-type="animation" data-title="" data-main-title="" data-right="" data-font-size="14" data-init="boxes" data-main-style="frame"> </body> </html>
Les documents *{bold::pfmath} sont composés de boîtes ou d'exercices. Pour créer une boite il suffit d'insérer dans la balise "body" :
<div class="box"> </div>
<div class="exo"> </div>
Pour chaque boîte ou exercice, il est possible d'ajouter les paramètres suivants :
<div class="box" data-title="" data-num="" data-newpage="" data-time="" data-after-time=""> </div>
$\bullet$ *{#ff0000::data-titre} : permet de définir le titre de la boîte. Ce paramètre n'est pas obligatoire.
$\bullet$ *{#ff0000::data-num} : permet de définir le numéro de la boîte. Si ce paramètre est manquant, le numéro est automatiquement inséré. Pour ne pas mettre de numéro il suffit d'écrire *{#ff0000::data-num}="*{#0000ff::none}"
$\bullet$ *{#ff0000::data-newpage} : permet de définir un saut de page avant (*{#ff0000::data-newpage}="*{#0000ff::before}") ou après (*{#ff0000::data-newpage}="*{#0000ff::after}") la boîte.
$\bullet$ *{#ff0000::data-time} : permet de définir le temps en secondes (*{#ff0000::data-time}="*{#0000ff::120}") ou en minutes (*{#ff0000::data-time}="*{#0000ff::2m}") pendant lequel la boîte sera affichée pendant une animation.
$\bullet$ *{#ff0000::data-after-time} : permet de définir le temps en secondes (*{#ff0000::data-after-time}="*{#0000ff::120}") ou en minutes (*{#ff0000::data-after-time}="*{#0000ff::2m}") pendant lequel la boîte sera affichée pendant le récapitulatif. Par défaut, cette durée est définie à $1$ minute.
$\bullet$ *{#ff0000::data-info-label} : permet de définir le label correspondant aux différentes informations que l'on peut ajouter à la boite.
Dans chaque boite ou exercice, il est possible d'insérer des *{#ff0000::informations} qui appparaîtront en fenêtre au dessus du document pfmath (une liste à choix est automatiquement créée reprennant les différentes informations insérées) :
<div class="info" data-name="nom de l'information"> Voici le texte de l'information. On peut y insérer des formules mathématiques. </div>
Voici un exemple d'utilisation des informations dans les boites.
Dans chaque boite ou exercice, il est possible d'insérer des *{#ff0000::fenêtre popup} qui appparaîtront en cliquant sur le label souligné :
<popup label="texte à afficher dans la boite" width="500" background="#ffffff"> Voici le contenu de la fenêtre popup qui peut contenir des formules mathématiques. </popup>
Voici un exemple d'utilisation des fenêtres popup dans les boites.
Dans chaque boite ou exercice, il est possible d'insérer des *{#ff0000::blocs de texte} : paragraphe de classe *{#ff0000::text}.
<div class="text" style=""> </div>
Chaque bloc de texte (*{#ff0000::class="text"}) (ou paragraphe) peut contenir des formules mathématiques (entre deux dollars) au format *{#0000ff::TeX} ou bien du texte avec différents styles (il est possible de combiner plusieurs styles) (*{bold::Ces paragraphes ne peuvent pas contenir de html}) :
Voici un tableau avec une liste des différents styles utilisables (il doivent commencer par une * et placer entre accolades) :
format rendu
*{#0000ff::un texte en bleu}
*{bold::un texte en gras}
*{italic::un texte en italique}
*{italic;bold::un texte en italique et gras}
Voici un tableau avec une liste de formules TeX :
texte rendu
$4x^2-2x + 8$
$\frac{2}{3} - \dfrac{11}{7}$
$3\vecteur{u} - 5\vecteur{AB}$
$\sqrt{7x-x^2} + 2$
Voici un exemple d'utilisation de paragraphes de classe *{#ff0000::text} dans les boites.
Dans chaque boite ou exercice, il est possible d'insérer des *{#ff0000::blocs html} : paragraphes de classe *{#ff0000::block}.
<div class="block" style=""> </div>
Chaque bloc html (*{#ff0000::class="block"}) peut contenir des formules mathématiques (entre deux dollars) au format *{#0000ff::TeX} (*{bold::Ces blocs peuvent contenir du html}) :
Voici un exemple d'utilisation de paragraphes de classe *{#ff0000::block} dans les boites.
Dans chaque boite ou exercice, il est possible d'insérer des *{#ff0000::blocs mixtes} : paragraphe de classe *{#ff0000::styled}.
<div class="styled" style=""> </div>
Chaque bloc de texte (*{#ff0000::class="styled"}) (ou paragraphe) peut contenir des formules mathématiques (entre deux dollars) au format *{#0000ff::TeX} ou bien du texte avec différents styles (il est possible de combiner plusieurs styles) (*{bold::Ces paragraphes peuvent contenir du html}).
Voici un exemple d'utilisation de paragraphes de classe *{#ff0000::styled} dans les boites.
Dans chaque boite ou exercice, il est possible d'insérer des questions (numérotées automatiquement) :
<div class="num" data-valign=""> Quelle est la *{#ff0000::dérivée} de $f(x) = 6x-3$ </div>
Dans chaque boite ou exercice, il est possible d'insérer des images :
<div class="img" data-src="" data-img-style=""></div>
*{#ff0000::data-src} indique l'url source de l'image
*{#ff0000::data-img-style} indique le style html de l'image.
Dans chaque boite ou exercice, il est possible d'insérer liens vers d'autres pages (pfmath ou non) :
<div class="link" data-url="" data-box-width="500" data-box-index="1:2" data-type="iframe" style="text-decoration: underline;font-size: 80%;cursor: pointer;padding-left: 10px"> label du lien </div>
*{#ff0000::data-url} indique l'url du lien (qui peut être un document pfmath ou non).
*{#ff0000::data-type} indique le type de lien. Ce paramètre peut prendre les valeurs *{#0000FF::iframe} ; *{#0000FF::window} ou *{#0000FF::popup}.
Dans chaque boite ou exercice, il est possible d'insérer un tableau :
<div class="table" cells=""> cellule 1 & cellule 2 & cellule 3 || cellule 4 & cellule 5 & cellule 6 </div>
*{#ff0000::data-url} indique l'url du lien (qui peut être un document pfmath ou non).
*{#ff0000::data-type} indique le type de lien. Ce paramètre peut prendre les valeurs *{#0000FF::iframe} ; *{#0000FF::window} ou *{#0000FF::popup}.
*{#ff0000::En cours de rédaction}
*{#ff0000::En cours de rédaction}
Il est possible d'intéragir avec l'utilisateur (élève par exemple) au moyen de QCM, de liste de choix ou bien de champs de saisie.
Pour un QCM, il est nécessaire d'insérer dans une boite (ou exercice) :
<div class="qcm" data-valid="1" data-max-try="1" data-error-text='erreur' data-correct-text='bravo' data-multiple="true"> <div class="question"> La question </div> <div class="answer"> La réponse 1 (rang 0) </div> <div class="answer"> La réponse 2 (rang 1) </div> </div>
$\bullet$ *{#ff0000::data-valid} correspond aux rangs (séparés par :) des réponses correctes.
$\bullet$ *{#ff0000::data-max-try} correspond au nombre de tentatives (de 0 à 10) avant que la correction ne soit proposée en cas d'erreur. Par défaut cette valeur vaut "-1" ce qui correspond à autant de tentatives souhaité.
$\bullet$ *{#ff0000::data-error-text} correspond au texte affiché lors d'une erreur lorsque que l'utilisateur clique sur le bouton img{w20::http://mathablette.fr/imgs/description.png} (qui permet de vérifier).
$\bullet$ *{#ff0000::data-correct-text} correspond au texte affiché lors d'une bonne réponse lorsque que l'utilisateur clique sur le bouton img{w20::http://mathablette.fr/imgs/description.png} (qui permet de vérifier).
$\bullet$ *{#ff0000::data-multiple} indique si ce QCM permet des réponses multiples ou non.
En bas du QCM, deux boutons sont automatiquement insérés dans la page html. img{w20::http://mathablette.fr/imgs/description.png} permet de vérifier la saisie et img{w20::http://mathablette.fr/imgs/effacer.png} permet d'effacer la saisie. Bien entendu, il est possible d'insérer des formules mathématiques (entre dollars)
Pour une liste à choix, il est nécessaire d'insérer dans une boite (ou exercice) :
<div class="select" data-valid="1" data-max-try="1" data-error-text='erreur' data-correct-text='bravo' data-width="100" data-options="choix1:choix2" data-multiple="true"> Le texte avant la liste à choix </div>
$\bullet$ *{#ff0000::data-valid} correspond au rang de la réponse correcte.
$\bullet$ *{#ff0000::data-max-try} correspond au nombre de tentatives (de 0 à 10) avant que la correction ne soit proposée en cas d'erreur. Par défaut cette valeur vaut "-1" ce qui correspond à autant de tentatives souhaité.
$\bullet$ *{#ff0000::data-error-text} correspond au texte affiché lors d'une erreur lorsque que l'utilisateur clique sur le bouton img{w20::http://mathablette.fr/imgs/description.png} (qui permet de vérifier).
$\bullet$ *{#ff0000::data-correct-text} correspond au texte affiché lors d'une bonne réponse lorsque que l'utilisateur clique sur le bouton img{w20::http://mathablette.fr/imgs/description.png} (qui permet de vérifier).
$\bullet$ *{#ff0000::data-options} indique les différentes options (ou choix) (séparées par :) proposées à l'utilisateur dans la liste.
$\bullet$ *{#ff0000::data-width} indique la largeur en pixel de la liste.
A droite de la liste, deux boutons sont automatiquement insérés dans la page html. img{w20::http://mathablette.fr/imgs/description.png} permet de vérifier la saisie et img{w20::http://mathablette.fr/imgs/effacer.png} permet d'effacer la saisie. Bien entendu, il est possible d'insérer des formules mathématiques (entre dollars)
Pour un champs de saisie, il est nécessaire d'insérer dans une boite (ou exercice) :
<div class="input" data-valid="valeur" data-max-try="1" data-error-text='erreur' data-correct-text='bravo' data-width="100" data-mode="math" data-multiple="true"> Le texte avant le champs de saisie </div>
$\bullet$ *{#ff0000::data-valid} correspond au texte de la réponse correcte.
$\bullet$ *{#ff0000::data-max-try} correspond au nombre de tentatives (de 0 à 10) avant que la correction ne soit proposée en cas d'erreur. Par défaut cette valeur vaut "-1" ce qui correspond à autant de tentatives souhaité.
$\bullet$ *{#ff0000::data-error-text} correspond au texte affiché lors d'une erreur lorsque que l'utilisateur clique sur le bouton img{w20::http://mathablette.fr/imgs/description.png} (qui permet de vérifier).
$\bullet$ *{#ff0000::data-correct-text} correspond au texte affiché lors d'une bonne réponse lorsque que l'utilisateur clique sur le bouton img{w20::http://mathablette.fr/imgs/description.png} (qui permet de vérifier).
$\bullet$ *{#ff0000::data-mode} indique le mode "math" ou "text" du champs texte.
$\bullet$ *{#ff0000::data-width} indique la largeur en pixel du champs de saisie.
A droite du champs de saisie, deux boutons sont automatiquement insérés dans la page html. img{w20::http://mathablette.fr/imgs/description.png} permet de vérifier la saisie et img{w20::http://mathablette.fr/imgs/effacer.png} permet d'effacer la saisie. Bien entendu, il est possible d'insérer des formules mathématiques (entre dollars)
Il est possible de créer une animation dans une boite. Pour ce faire, il faut ajouter les paramètres suivants à une boite (ou exercice) :
<div class="box" data-title="" data-num="" data-newpage="" data-time="" data-after-time="" data-animation="button" data-animation-end="hide"> </div>
$\bullet$ *{#ff0000::data-animation} indique qu'il y a une animation dans la boite.
$\bullet$ *{#ff0000::data-animation-end} indique que les bocs animés de la boites sont affichés ou cachés à la fin de l'animation ("show" ou "hide").
Pour chaque bloc que l'on souhaite animer, il suffit d'ajouter les paramètres suivants :
<div class="text step" data-step-index="1" data-step-type="hide" data-step-time="0" > Un bloc texte *{#0000ff::animé} </div>
$\bullet$ *{#ff0000::data-step-index} correspond au rang dans l'animation (ce paramètre n'est pas indispensable).
$\bullet$ *{#ff0000::data-step-type} indique si le bloc est affiché ou non ("hide" ou "show") après son affichage lors de l'animation.
$\bullet$ *{#ff0000::data-step-time} indique le temps en secondes (par exemple "120") ou minutes (par exemple "2m") durant lequel le bloc est affiché avant de passer à une autre bloc .
Dans ce mode, un bouton est automatiquement inséré à droite du titre de la boite (ou de l'exercice) permettant ainsi de lancer l'animation.
Il est possible d'administrer ou de gérer ses documents pfmath en se connectant à l'adresse #{http://mathablette.fr/pfa}. Cette application permet entre autres de gérer son *{bold::espace de travail} permettant de créer, modifier ses documents pfmath. De plus, il est possible de gérer les questionnaires (en direct et sauvegardés). Pour utiliser l'administration de pfmath, il est indispensable d'avoir un compte sur mathablette. Pour ce faire, il faut envoyer un mail à mathablette@gmail.com. Un compte de démonstration est disponible (idenfiant : *{bold::demo} et mot de passe : *{bold::demo}).
Voici un #{premier exemple::http://users.mathablette.fr/?38} d'un document *{bold::pfmath} animé. Il est nécessaire de cliquer sur le titre (bandeau gris foncé) pour afficher un menu et ainsi pouvoir lancer l'animation. En cliquant sur le chronomètre (lors de l'animation) un menu apparaît permettant de retourner à l'accueil ou bien aller à la boite suivante.
Voici un #{deuxième exemple::http://users.mathablette.fr/?41} proposant les intéractions possibles avec l'utilisateur (ou élève).
Il existe de nombreuses façons de gérer ses documents pfmath. Parmi elles :
$\bullet$ en se connectant avec un compte, à l'#{administration::http://mathablette.fr/pfa} de pfmath. Pour avoir un compte il suffit d'envoyer un mail à mathablette. Une fois connecté, il suffit d'aller dans son *{bold::espace de travail}.
$\bullet$ en ouvrant l'#{éditeur de contenu pfmath::http://mathablette.fr/pfmath/pfd}.
Dans les deux cas, une barre d'outils positionnée à droite de l'éditeur propose : img{w20;va-5::./_imgs/file-add-2.png} : création d'un document pfmath. img{w20;va-5::./_imgs/box.png} : création d'une boite dans le document pfmath. img{w20;va-5::./_imgs/exo.png} : création d'un exercice dans le document pfmath. img{w20;va-5::./_imgs/para0.png} : création d'un paragraphe (mode mixte : html et style) dans une boite ou un exercice. img{w20;va-5::./_imgs/para.png} : création d'un paragraphe (avec style) dans une boite ou un exercice. img{w20;va-5::./_imgs/para2.png} : création d'un paragraphe (sans style : html seulement) dans une boite ou un exercice. img{w20;va-5::./_imgs/line.png} : création d'une ligne (avec style) dans une boite ou un exercice. img{w20;va-5::./_imgs/num.png} : création d'une numérotation (avec style) dans une boite ou un exercice. img{w20;va-5::./_imgs/qcm.png} : création d'un qcm dans une boite ou un exercice. img{w20;va-5::./_imgs/select.png} : création d'une liste à choix dans une boite ou un exercice. img{w20;va-5::./_imgs/input.png} : création d'un champ de saisie dans une boite ou un exercice. img{w20;va-5::./_imgs/link2.png} : création d'un line vers d'autres boites. img{w20;va-5::./_imgs/televerser.png} : création d'un téléversement (un compte mathablette est nécessaire) dans une boite ou un exercice.
Il est possible de modifier dynamiquement le contenu d'une boite. Chaque bloc d'une boite ("styled", "block" , "text") peut être référencé par l'attribut *{#ff0000::data-ref}. D'autre part, il est possible d'insérer dans chaque bloc de type "styled" ou "text" une référence à une partie du texte. Une fois la référence créée, des fonctions *{#0000ff::jQuery} peuvent être utilisées sur cette référence.
<div class="script" data-ref="b1"> Voici une référence sans valeur initiale : ref{v1}
Voici une référence avec valeur initiale : ref{v2::un texte et un nombre $2$}
Voici une référence avec valeur initiale et un style : ref{v3::italic::un texte et un nombre $3$}
</div> <div class="script"> // instructions javascript pour la boite // référence au bloc "b1" var bloc1 = box.ref('b1'); // cache le bloc 'b1' bloc1.hide(); // changement du texte de la référence 'v1' box.ref('v1').text("un autre texte"); // ou box.v1.text('un autre texte'); </div>
Il est possible de créer des cellules mathématiques :
// création d'une cellule mathématique de nom a et de valeur 4 (largeur 50 pixels) <cell ref= "a" width="50">4</cell> /* * création d'une cellule mathématique de nom b et de valeur a-6. Cette cellule ne peut pas être modifiée * car la largeur n'a pas été spécifiée. */ <cell ref= "b">a-6</cell>
Il suffit de cliquer sur la cellule pour modifier sa valeur. Les cellules liées sont alors automatiquement modifiées.
Il est possible de faire référence à ces cellules de la même manière qu'à la partie précédente.

Voici un exemple d'utilisation des cellules mathématiques.
Il est possible d'associer des évènements à des références préalablement créées (voir les deux parties précédentes)
Il est possible d'intégrer une feuille #{AlgoCalc::http://mathablette.fr/algocalc.php} dans une boite de Pfmath :
<div class="calc" data-editable="0"> </div>
*{#ff0000::data-editable} peut prendre les valeurs "0" ou "1" et indique si la feuille #{AlgoCalc::http://mathablette.fr/algocalc.php} peut être modifié ou pas.

Dans chaque feuille #{AlgoCalc::http://mathablette.fr/algocalc.php}, on peut insérer :
// une ligne de calcul de nom "x" valant 8 <line type="calc" name="x">8</line> // une ligne de calcul de nom "y" valant x - 9 <line type="calc" name="y">x-9</line> /* * Pour un repère : * (x0;y0) sont les coordonnées de l'origine du repère * dx et dy sont les unités sur l'axe des abscisses et des ordonnées * cmx et cmy est la distance entre 2 graduations sur l'axe des abscisses et des ordonnées * Ox et Oy sont le point de coordonnées dans le repère de l'intersection des deux axes. */ <line type="mark" x0="3" y0="4" dx="1" dy="1" cmx="1" cmy="1" Ox="0" Oy="0"></line> /* * Pour une fonction ou une courbe : * min et max correspondent au minimum et maximum pour la tracé de la courbe représentative * color : la couleur de la courbe représentative * width : l'épaisseur du trait de la courbe représentative * style : style du trait de la courbe représentative */ <line type="curve" min="-10" max="10" color="#000000" step="0.01" width="2" style="1">7x^2+9x-2</line> // la fenêtre pour les graphiques <line type="graph"></line> /* * Statistique à une variable sous forme de tableau * une colonne créée pour la valeur 2 et d'effectif 3 */ <line type="stat1"> <data x="2" e="3"></data> </line>
Pfmath permet de gérer des téléversements qui seront stockés dans l'espace de travail Pfmath.

Dans un premier il faut un compte Pfmath pour accéder à l'administration de Pfmath. Une fois connecté, il faut créer un groupe d'élèves puis créer des élèves dans ce groupe en choisissant *{bold::gérer les téléversements} dans le Menu. Il ne faut pas oublier d'indiquer un mot de passe si vous souhaitez avoir des téléversements privés.
Dès lors, il est possible de créer un téléversement dans le Menu *{bold::gérer des téléversements} (il faut choisir le groupe d'élèves qui sera associé au téléversement)
Pour un téléversement, on peut indiquer :
$\bullet$ L'identifiant du téléversement qui devra être inséré dans une page Pfmath
$\bullet$ Le groupe d'élèves associé au téléversement
$\bullet$ Les extensions (séparées par une virgule) associées au téléversement (Pour AlgoScriptEditor : *{bold::algse}, Pour AlgoScript : *{bold::algs})
$\bullet$ Le répertoire où seront stockés les téléversements (pour ce faire il faut accéder à l'espace de travail pour créer un répertoire)
$\bullet$ Si le téléversement est Privé (les élèves doivent s'identifier)
$\bullet$ Un email : à chaque téléversement un mail automatique sera envoyé à cette adresse.
$\bullet$ Si le téléversement est Actif.
Une fois le téléversement créé, il faut créer une page Pfmath et une boîte dans laquelle il y a la référence (identifiant du téléversement) :
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <script id="pfmath" type="text/javascript" src="http://mathablette.fr/lib/pfmath.js"></script> </head> <body data-type="page" data-title="" data-main-title="Téléversement" data-right="" data-font-size="14" data-init="boxes" data-main-style="frame"> <div class="box" data-title="Téléversement Pfmath" data-num="none"> <div class="upload" data-upload-id="identifiant du téléversement"> Le texte à afficher avant le formulaire de téléversement. </div> </div> </body> </html>
En revenant sur l'administration Pfmath, en choisissant le Menu *{bold::gérer les téléversements}, on peut cliquer sur l'oeil pour voir les téléversements effectués par les élèves. En cliquant sur l'icône "fichier" il est possible de visualiser le fichier téléversé par l'élève. Il est aussi possible de répondre par mail à l'élève.
Il est possible d'intégrer dans un document Pfmath les outils AlgoScript (extension *{bold::algs}) et AlgoScriptEditor (extension *{bold::algse}).
Cette intégration peut se réaliser de trois manières différentes :
$\bullet$ une intégration dans la page avec la balise "iframe"
$\bullet$ une intégration avec un lien hypertexte avec la balise "a"
$\bullet$ une intégration avec un bouton cliquable avec la balise "button".

Il est possible (mais non obligatoire) de charger des documents automatiquement :
$\bullet$ à partir de l'espace de stockage Google Drive :
il suffit alors d'obtenir le lien ou le partage du fichier en question puis de l'insérer dans l'attribut : "data-gdrive-file"

$\bullet$ à partir de l'espace de stockage Dropbox :
il suffit alors d'obtenir le lien du partage du fichier en question puis de l'insérer dans l'attribut : "data-dropbox-file"

$\bullet$ à partir de l'espace de stockage PfmathDoc : il suffit alors d'insérer le document PfmathDoc dans l'attribut : "data-pfmath-file"
Pour intégrer un de ces deux types de document, il suffit alors d'insérer (dans une boite) les lignes de code suivantes :
<!-- Intégration de AlgoScript (algs) dans une iframe --> <iframe class="algs" data-gdrive-file="lien vers le fichier GoogleDrive"> </iframe> <iframe class="algs" data-dropbox-file="lien vers le fichier Dropbox"> </iframe> <iframe class="algs" data-pfmath-file="lien vers le fichier PfmathDoc"> </iframe> <!-- Intégration de AlgoScriptEditor (algse) dans une iframe --> <iframe class="algse" data-gdrive-file="lien vers le fichier GoogleDrive"> </iframe> <iframe class="algse" data-dropbox-file="lien vers le fichier Dropbox"> </iframe> <iframe class="algse" data-pfmath-file="lien vers le fichier PfmathDoc"> </iframe> <!-- Intégration de AlgoScript (algs) dans un bouton --> <button data-gdrive-file="lien vers le fichier GoogleDrive" class="algs">le label du bouton</button> <button data-dropbox-file="lien vers le fichier Dropbox" class="algs">le label du bouton</button> <button data-pfmath-file="lien vers le fichier PfmathDoc" class="algs">le label du bouton</button> <!-- Intégration de AlgoScriptEditor (algse) dans un bouton --> <button data-gdrive-file="lien vers le fichier GoogleDrive" class="algse">le label du bouton</button> <button data-dropbox-file="lien vers le fichier Dropbox" class="algse">le label du bouton</button> <button data-pfmath-file="lien vers le fichier PfmathDoc" class="algse">le label du bouton</button> <!-- Intégration de AlgoScript (algs) dans un lien hypertexte --> <a data-gdrive-file="lien vers le fichier GoogleDrive" class="algs">le label du lien</a> <a data-dropbox-file="lien vers le fichier Dropbox" class="algs">le label du lien</a> <a data-pfmath-file="lien vers le fichier PfmathDoc" class="algs">le label du lien</a> <!-- Intégration de AlgoScriptEditor (algse) dans un lien hypertexte --> <a data-gdrive-file="lien vers le fichier GoogleDrive" class="algse">le label du lien</a> <a data-dropbox-file="lien vers le fichier Dropbox" class="algse">le label du lien</a> <a data-pfmath-file="lien vers le fichier PfmathDoc" class="algse">le label du lien</a>
Dans chaque boite ou exercice, il est possible d'insérer des dessins :
<draw width="400" height="300" > </draw>
Voici un exemple de dessin correspondant à un tableau de variations : move(10,5) down('h-10') right('w-20') up('h-10') left('w-20') move(70,5) down('h-10') move(10,50) right('w-20') math('x',30,15,{fontSize: '14pt'}) math('-\\infty','lastX+45','lastY',{fontSize: '14pt'}) math('+\\infty','lastX','lastY+85',{fontSize: '14pt'}) math('+\\infty','w-50','lastY-85',{fontSize: '14pt'}) math('+\\infty','w-50','lastY+85',{fontSize: '14pt'}) math('0','w-180','lastY-85',{fontSize: '14pt'}) move(10,100) right('w-20') math("f'(x)",20,65,{fontSize: '14pt'}) move('w-175',50) down(50) math('0','w-180','lastY-40',{fontSize: '14pt'}) math('-','w-250','lastY',{fontSize: '14pt'}) math('+','w-100','lastY',{fontSize: '14pt'}) math('2','w-180','lastY+105',{fontSize: '14pt'}) math("f(x)",20,130,{fontSize: '14pt'}) arrow('->') move(115,125) line(90,50) move('lastX+40','lastY') line(105,-50)
Voici un exemple de dessin correspondant à un cercle trigonométrique :
mark({dx: 4,dy: 4,axes: false}) //grid(0) circle(0,0,4) point('sqrt(2)/2','sqrt(2)/2','M') dash(4) down('sqrt(2)/2') line('sqrt(2)/2','sqrt(2)/2',0,'sqrt(2)/2') dash(0) line(0,0,'sqrt(2)/2','sqrt(2)/2') arrow('->') line(0,0,1,0) line(0,0,0,1) arc(0,0,1.5,0,45) arc(0.5,0.5,2.4,30,55) math('\\cos{(\\alpha)}','sqrt(2)/2-0.15',0,{fontSize: '12pt'}) math('\\sin{(\\alpha)}',-0.35,'sqrt(2)/2+0.08',{fontSize: '12pt'}) math('\\alpha',0.4,0.25,{fontSize: '12pt'}) math('O',-0.1,-0.01,{fontSize: '12pt'}) math('I',1.05,0.05,{fontSize: '12pt'}) math('J',0,1.12,{fontSize: '12pt'}) math('+','1.4*sqrt(2)/2','1.4*sqrt(2)/2',{fontSize: '12pt'})
Voici un exemple correspondant à un schéma de Bernouilli : text('$\\Omega$',5,'h/2-22.5',{fontSize: '12pt',css: 'bo1#444444;br5;w60;c;h45;lh45;b#eeeeff',node: 'A'}) text('$S$','lastX+150',40,{fontSize: '12pt',css: 'bo1#444444;br5;w60;c;h45;lh45;b#eeffee',node: 'B'}) text('$\\overline{S}$','lastX','h-85',{fontSize: '12pt',css: 'bo1#444444;br5;w60;c;h45;lh45;b#ffeeee',node: 'C'}) set('lx1','lastX') set('lx2','lx1+(w-3*60)/3') text('$S$','lastX+150',15,{fontSize: '12pt',css: 'bo1#444444;br5;w60;c;h45;lh45;b#eeffee',node: 'D'}) text('$\\overline{S}$','lastX','h-175',{fontSize: '12pt',css: 'bo1#444444;br5;w60;c;h45;lh45;b#ffeeee',node: 'E'}) text('$S$','lastX','h-110',{fontSize: '12pt',css: 'bo1#444444;br5;w60;c;h45;lh45;b#eeffee',node: 'F'}) text('$\\overline{S}$','lastX','h-60',{fontSize: '12pt',css: 'bo1#444444;br5;w60;c;h45;lh45;b#ffeeee',node: 'G'}) connector('A','B',{posA: 'mr',posB: 'ml',arrow: '->',text: '$p$',textOffsetY : -25}) connector('A','C',{posA: 'mr',posB: 'ml',arrow: '->',text: '$1-p$', textOffsetX : -30}) connector('B','D',{posA: 'mr',posB: 'ml',arrow: '->',text: '$p$',textOffsetY : -25}) connector('B','E',{posA: 'mr',posB: 'ml',arrow: '->',text: '$1-p$', textOffsetX : -25}) connector('C','F',{posA: 'mr',posB: 'ml',arrow: '->',text: '$p$',textOffsetY : -25}) connector('C','G',{posA: 'mr',posB: 'ml',arrow: '->',text: '$1-p$', textOffsetX : -25}) logVar('lx1') logVar('lx2') logVar('lastX')