fcad-math

Une librairie Vue.js offrant des composantes mathématiques interactives pour la création d'exercices pédagogiques.

Installation

npm install fcad-math

Configuration

Importe et enregistre la librairie globalement dans ton application Vue.js :

// main.js fcad-template
import { createApp } from 'vue'
import i18n from './i18n'
import FcadCoreDragon from 'fcad-core-dragon'
import { menuSettings } from './menu.setting.js'
import App from './App.vue'
import FcadMath from 'fcad-math'

const app = createApp(App)
app.use(FcadCoreDragon, { i18n, menuSettings })
app.use(FcadMath)
app.mount('#app')

Utilisation

<exercice-infinite>

La composante exercice-infinite affiche un exercice mathématique interactif avec rétroaction automatique selon la réponse de l'étudiant.

Props

| Prop | Type | Requis | Description | | --------- | -------- | ------ | ------------------------------------------------------ | | contain | Object | Oui | Objet de configuration de l'exercice (voir ci-dessous) |

Structure de contain

{
  id: String,          // Identifiant unique de l'exercice
  enonce: String,      // Énoncé de la question posée à l'étudiant
  conditions: String,  // Conditions de validation de la réponse (expression évaluable)
  retroaction: {
    retro_positive: {
      title: String,   // Titre affiché en cas de bonne réponse
      hypertext: String  // Contenu HTML affiché en cas de bonne réponse
    },
    retro_negative: {
      title: String,   // Titre affiché en cas de mauvaise réponse
      hypertext: String  // Contenu HTML affiché en cas de mauvaise réponse
    }
  }
}

Exemple complet

La composante exercice-infinite accepte des champs de saisie mathématique via la composante <math-input> placée dans son slot par défaut. Chaque <math-input> doit avoir un id correspondant aux variables utilisées dans conditions.

<template>
  <exercice-infinite :contain="monExercice">
    <span>x =</span>
    <math-input id="x" />
    <span>y =</span>
    <math-input id="y" />
    <span>z =</span>
    <math-input id="z" />
  </exercice-infinite>
</template>

<script>
export default {
  data() {
    return {
      monExercice: {
        id: 'monExercice',
        enonce: `Voici la matrice échelonnée réduite du système. Trouver une solution particulière du système.`,
        conditions: 'x==5-2*z and y==-3-4*z',
        retroaction: {
          retro_positive: {
            title: 'Bravo bonne réponse.',
            hypertext: '<p>trop cool !!!!</p>'
          },
          retro_negative: {
            title: 'Mauvaise réponse',
            hypertext: "<p>Non ce n'est pas la bonne réponse.</p>"
          }
        }
      }
    }
  }
}
</script>

<math-input>

La composante <math-input> est un champ de saisie mathématique à utiliser à l'intérieur de <exercice-infinite>. Elle s'enregistre automatiquement auprès du formulaire parent et gère la validation et le formatage des expressions mathématiques saisies par l'étudiant.

Props

| Prop | Type | Requis | Description | | ---- | -------- | ------ | ----------------------------------------------------------------------------------------- | | id | String | Oui | Identifiant unique du champ. Doit correspondre à une variable utilisée dans conditions. |

Comportement

• Formatage automatique : la valeur saisie est formatée en expression mathématique évaluable via le composable UseInfinite.
• Validation : si l'expression saisie est invalide, une icône d'erreur et un message sont affichés sous le champ.
• Enregistrement automatique : au montage, le champ s'enregistre dans le contexte du formulaire fourni par <exercice-infinite>. Il n'est pas nécessaire de le lier manuellement.
• Internationalisation : le message d'erreur s'adapte à la langue de l'application ($i18n.locale).

Remarque sur id

L'id de chaque <math-input> doit correspondre exactement aux noms de variables présents dans la prop conditions de <exercice-infinite>. Par exemple, si conditions contient 'x==5-2*z and y==-3-4*z', les champs doivent avoir les ids x, y et z.

La prop conditions

La propriété conditions définit les règles de validation de la réponse sous forme d'expression textuelle évaluable. Les variables utilisées correspondent aux inconnues que l'étudiant doit saisir.

// Exemple : x doit valoir 5-2*z et y doit valoir -3-4*z
conditions: 'x==5-2*z and y==-3-4*z'

<math-formula>

La composante <math-formula> affiche une formule mathématique rendue via MathJax. Elle gère automatiquement le rendu initial ainsi que la mise à jour du rendu lorsque la formule change. Un effet d'animation (skeleton) est affiché pendant le chargement.

Props

| Prop | Type | Requis | Défaut | Description | | --------- | --------- | ------ | ------- | --------------------------------------------------------------------------------- | | formula | String | Oui | — | Expression mathématique à afficher (syntaxe LaTeX ou MathJax). | | inline | Boolean | Non | false | Si true, la formule est rendue en mode inline plutôt qu'en bloc (display mode). |

Comportement

• Rendu MathJax : au montage, la composante appelle MathJax.typesetPromise sur son conteneur pour effectuer le rendu de la formule.
• Mise à jour réactive : si la prop formula change, le rendu est automatiquement effacé (typesetClear) puis recalculé.
• Nettoyage : avant la destruction de la composante, le rendu MathJax est nettoyé pour éviter les fuites mémoire.
• Effet squelette : pendant le rendu, un effet d'animation (skeleton) est affiché à la place de la formule, offrant un meilleur retour visuel à l'utilisateur.

Exemples

Formule en mode bloc (par défaut) :

<template>
  <math-formula :formula="formula1" />
</template>
<script>
export default {
  data() {
    return {
      formula1: '$$ f(x)=x^2 $$'
    }
  }
}
</script>

Formule en mode inline :

<template>
  <p>
    La solution est
    <math-formula inline :formula="formula1" />
    .
  </p>
</template>
<script>
export default {
  data() {
    return {
      formula1: '$$ f(x)=x^2 $$'
    }
  }
}
</script>