2.2.5 MathAPPS

Objectifs

MathALEA propose des exercices à données aléatoires qui reprennent le modèle des exercices papier. On a ajouté de l'interactivité avec des champs de saisie pour rendre ces exercices interactifs.

À côté de MathALEA, on souhaite développer des exercices interactifs qui s'éloignent davantage du paradigme de l'exercice papier en s'adaptant au choix des élèves, en proposant des boutons, des actions à mener, en proposant des activités ludiques et des scénarios non linéaires.

Pour les différencier de MathALEA, on a décidé de les appeler les APPS. Chacun de ces apps pourra être autonome et utilisé librement par les élèves ou intégrés dans une séance d'exercices de MathALEA (et donc dans Capytale).

Le collectif va développer des apps mais on pourra aussi s'appuyer sur des collègues qui ont déjà programmé des outils libres de qualité.

Principe technique

• Une APP est une application autonome qui a son url d'accès direct
• Dans MathALEA on créé un fichier sur le modèle de src/exercices/ressources/mathApp.ts
• L'APP est affichée dans un iframe (avec des dimensions à adapter)
• À l'initialisation, MathALEA envoie un postMessage { type: 'mathaleaSendNumeroExercice', numeroExercice: this.numeroExercice }
• L'APP (mathix.org/monExercice/?mathalea&numeroExercice=3) récupère le numéro de l'exercice

   const urlParams = new URLSearchParams(window.location.search)
   const mathalea = urlParams.get('mathalea')
   if (mathalea !== null) {
      const numeroExercice = number(urlParams.get('numeroExercice'))
      ...
   }

• Une fois l'exercice terminé, l'APP envoie un message { nbBonnesReponses, nbQuestions, numeroExercice, type: 'mathaleaSendScore' }

const message = { score, numberOfQuestions, type: 'mathaleaSendScore', numeroExercice }
      window.parent.postMessage(message, '*')

• MathALEA affiche alors le score et le communique à Capytale ou Moodle

Autres possibilités :

• Est-ce que l'on sauvegarde les détails des réponses de l'élève ou que le score ?
• Est-ce qu'on envoie d'autres informations comme la durée ?
• Si l'APP est paramétrable, il faut envisager une vue prof, une sauvegarde des paramètres (avec des paramètres d'url ou Capytale) et la restitution de ces paramètres

ToDo :

• Ajouter un bouton pour recommencer l'exercice

Exemple de code

Voici le code utilisé dans « Challenge relatifs » :

Juste après l'affichage du score finale de l'exercice, si on est en vue élève alors je récupère ce que j'ai affiché (conseils, réponses de l'élève...) ainsi que le score et je l'envoie à MathALÉA.

const urlParams = new URLSearchParams(window.location.search)
const vue = urlParams.get('v')
if (vue === 'eleve' && divResults !== undefined) {
  const finalState = divResults.innerHTML
  const message = { score, numberOfQuestions, type: 'mathaleaSendScore', numeroExercice, finalState }
  window.parent.postMessage(message, '*')
      }

Lorsque le professeur change les réglages de l'application, cela met à jour les paramètres d'url et je les envoie à MathALÉA/Capytale pour une sauvegarde

const message = {
  type: 'mathaleaSettings',
  urlParams: window.location.search,
  numeroExercice
}
window.parent.postMessage(message, '*')

Si le prof revoie la copie de l'élève alors il faut afficher le score et les éventuels éléments supplémentaires.

window.addEventListener('message', async (event) => {
      if (event.data.type === 'mathaleaHasScore') {
        goTo('review') // Fonction propre à challenge pour afficher l'app en mode review
        // J'attends que le div existe avant d'afficher la correction
        const intervalId = setInterval(() => {
          if (document.querySelector('#results') != null) {
            clearInterval(intervalId)
            document.querySelector('#results').innerHTML = event.data.finalState
          }
        }, 1000)
      }
    })

Envoi des paramètres de l'app vers MathALÉA

L'app commence par vérifier que l'on est côté professeur pour ne pas permettre à l'élève de modifier les réglages de l'exercice :

const vue = urlParams.get('v')
if (vue == null) {
  // On affiche les boutons permettant de régler l'app
}

Le professeur effectue des réglages et à chaque changement ou seulement au clic sur un bouton de validation, l'app met à jour son url avec les paramètres de l'exercice puis les envoie à MathALÉA.

const message = {
      type: 'mathaleaSettings',
      urlParams: window.location.search,
      numeroExercice
    }
 window.parent.postMessage(message, '*')

Chargement de l'app par MathALÉA

La communication de MathALÉA vers l'app passe par l'url au chargement et par un message pour dire que la copie a déjà été sauvegardée.

Au chargement :

const urlParams = new URLSearchParams(window.location.search)
const params = urlParams.get('params') // params ou n'importe quel clé choisie par l'app
  if (params !== null) {
    const paramsObject = JSON.parse(params) // Si un JSON.stringify avait été utilisé par l'app
    ...
  }