Quelques explications :

Cette page est organisée de différentes parties :

• fct_utility_css : style de la partie basse de l’écran pour l’affichage des successions de boards. On peut paramétrer chaque visuel avec son propre style.
• fct_utility_fcts_js : liste des fonctions d’utilité paramétrée par CP, qu’il faudra stocker dans la base de données MongoDB. Sera utilisé par l’éditeur de fonctions pour compléter et modifier si besoin pour les contributeurs.
• fct_utility_html : description du contenu de la page principale style et html.
• fct_utility_flip : fonctions js de manipulation des flips visuels.
• fcts_utility_script_cp : script js permettant de gérer l’événementiel de la page principale.

Tout se passe autour de la variable configBoard qui permet de mémoriser les paramètres de tracé des fonctions d’utilité. Cette structure est constituée de 6 éléments pour les 6 boards à constituer. Le contenu de cette structure permet de mémoriser la sélection de la fonction, les dimensions du board à tracer, les courbes à tracer et la valeur des sliders associés.

Exemple de l’initialisation de la variable :

const configBoard={
1:{fct:"0_0",infx:-1.4, supx:2, infy:-1.4, supy:2, A_x:true, R_x:false, P_x:false, T_x:false, sliders:[]},
2:{fct:"0_0",infx:-1.4, supx:2, infy:-1.4,supy:2,A_x:true, R_x:false, P_x:false, T_x:false, sliders:[]},
3:{fct:"0_0",infx:-1.4, supx:2, infy:-1.4,supy:2,A_x:true, R_x:false, P_x:false, T_x:false, sliders:[]},
4:{fct:"0_0",infx:-1.4, supx:2, infy:-1.4,supy:2,A_x:true, R_x:false, P_x:false, T_x:false, sliders:[]},
5:{fct:"0_0",infx:-1.4, supx:2, infy:-1.4,supy:2,A_x:true, R_x:false, P_x:false, T_x:false, sliders:[]},
6:{fct:"0_0",infx:-1.4, supx:2, infy:-1.4,supy:2,A_x:true, R_x:false, P_x:false, T_x:false, sliders:[]}
};

Attributs des structures de mémorisation :

• fct : identification (0_0, 1_1 …) le premier numéro indique la classe, et le deuxième le fonction dans cette classe.
• infx : valeur réelle
• supx : valeur réelle
• infy : valeur réelle
• supy : valeur réelle
• A_x : boolean (true / false)
• R_x: boolean (true / false)
• P_x: boolean (true / false)
• T_x : boolean (true / false)
• sliders : [] tableau permettant de stocker les valeurs des sliders

Attention lors de la modification et de la restitution des paramètres en fonction de l’objet jsxGraph utilisé

• Rappel pour un chekbox : checkbox.setAttribute({‘checked’:configBoard[id].A_x});
• Rappel pour un slider : ne pas oublier le update du board après la modification.
  • configBoard[id].sliders.forEach((e,i)=> {
    paramSliders[i].setValue(e);
    })
    board.update();
• Rappel pour un select : document.getElementById(“uf_select”).value=configBoard[id].fct;
• Rappel pour un input : in0.value=Number(configBoard[id].infx);

Explications sur le fonctionnement de cette page :

On a une variable qui définit les valeurs par défaut pour chaque visuel. Donc ce qu’il faut faire est de stocker quel est le board actuel (valeur entre 1 et 6) avant la permutation, de mémoriser les valeurs des paramètres fixés par l’utilisateur dans la variable configBoard avec le bon indice. Ensuite charger et construire le nouveau board en prenant en compte les paramètres de la variable configBoard du nouvel indice. Tout se fait autour de cPanel et de la variable configBoard. On pourra par la suite stocker ces valeurs dans le cache du navigateur pour mémoriser la configuration fixée par l’utilisateur dans son contexte. Il suffira au démarrage ou au rechargement de la page, de réactualiser la variable configBoard avec un contenu spécifique et le tour est joué. (reste à faire)