Assistance pédagogique

[Modèle] Activité Base de données avec CSS et Javascript

 
Avatar Luiggi Sansonetti
[Modèle] Activité Base de données avec CSS et Javascript
Développeurs de pluginsMoodleurs particulièrement utilesTesteursTitulaires du Moodle Course Creator CertificateTraducteurs
Bonjour

Suite à plusieurs mois de travail, tests, essais, mise en prod et retours utilisateurs, et pour répondre à un certain cahier des charges, j'ai amélioré (plus que je ne le pensais) une activité pour la saisie d'appréciations dans le cadre d'un jury à plusieurs mains.

Contexte

L'application qui servait à saisir les appréciations de poursuite d'étude, ayant rendu l'âme, nous devions trouver un moyen de rendre la chose faisable sur Moodle (enfin, j'avais dit que tout était possible avec Moodle grand sourire).

Cahier des charges

  • La référente crée les fiches pour chaque étudiant.
  • Chaque enseignant remplit sa zone pour intégrer ses appréciations pour l'étudiant donné.
  • L'enseignant doit pouvoir atteindre sa zone de saisie facilement, et l'enregistrer rapidement (sans le scrolldeath...)
  • Les fiches renseignées et à la date butoir, la référente imprime la fiche.
  • L'impression doit éviter de prendre en compte des champs vides et n'imprimer que ce qui est rempli
  • L'impression doit prendre en compte le pied de page en fonction de la taille du tableau renseigné (suivant le nombre d'enseignant à remplir les appréciations, c'est variable...)

Mise en œuvre

J'avoue avoir pas mal cherché dans le forum anglais s'il existait déjà des choses. Et oui, pas mal mais partielles.

J'avais déjà partagé mes "trouvailles".

Puis après pas mal de recherches en CSS (je suis débutant incertain), et de tests, j'ai un modèle prêt à l'emploi.

Ok, certains éléments sont sûrement à améliorer, à affiner, mais je voulais partager ce modèle pour avoir aussi des avis et des correctifs au besoin. Mais comme je n'ai pas pu assister aux ateliers "Beautifouler la BDD"...

En détail :

Nouvelle fiche :
  • menu déroulant pour le nom
  • affichage du tableau voulu pour la saisie
  • contrôle pour afficher ou nom l'appréciation
  • raccourcis pour aller tout en bas
Affichage fiche :
  • en-tête et pied de page
  • zone centrale suivant les contrôles voulus dans la nouvelle fiche
  • bouton d'impression
  • pied de page tout en bas de l'imprimé
Recherche :
  • juste sur le nom
Affichage liste :
  • fiche au nom
  • pictogrammes avec raccourcis pour impression ou modification
  • nom et image du créateur
  • date création
  • date modification

Visuels :

---

---


---


---


---


---


---


---


Complément pour l'impression :

Bien sûr il faut retirer à l'impression tous les éléments de type "URL de la page, date, heure...".

Tous ces éléments ne sont pas gérés par le CSS ni Javascript de l'activité mais plus simplement par les paramètres de l'impression DU navigateur utilisé clin d’œil

J'en avais parlé ici déjà.


Voilà, vous trouverez en pj le preset, modèle à importer dans une activité base de données déjà existante même vide.

Elle a été créée à partir d'un 3.1 mais elle fonctionne très bien importée sur une 3.3 cool


Merci de votre lecture et de vos retours éventuels

Cheers.

Avatar Luiggi Sansonetti
Re: [Modèle] Activité Base de données avec CSS et Javascript
Développeurs de pluginsMoodleurs particulièrement utilesTesteursTitulaires du Moodle Course Creator CertificateTraducteurs

Heu oui, quelques remarques complémentaires :

  • ne pas oublier de travailler certains modèles avec l'éditeur désactivé ! pour ne pas supprimer les bouts de codes qui pourraient trainer ci et là
  • il y a malgré tout du style pour l'action d'afficher tel ou tel tableau en bas du modèle de la nouvelle fiche car séparé dans le cadre CSS ça ne marchait plus... d'où l'éditeur désactivé clin d’œil
 
Moyenne des évaluations  -
C'est moi :-)
Re: [Modèle] Activité Base de données avec CSS et Javascript
Documentation writersMoodleurs particulièrement utilesTesteursTraducteurs

Bonjour Luiggi,

Voila un message comme on aimerait en voir plus souvent, tout simplement parfait sourire

Exposé de la problématique, cahier des charges, outils utilisés, détails des modifications, liens vers les différents éléments déjà évoqués par le passé, copie d'écran, et exemple téléchargeable tout fait, qu'il ne reste plus qu'à utiliser (ou personnaliser). Et ouverture à discussion / amélioration.

Merci beaucoup ! Tu vas avoir mérité tes vacances clin d’œil

Séverin

 
Moyenne des évaluations Utile (1)
Avatar Luiggi Sansonetti
Re: [Modèle] Activité Base de données avec CSS et Javascript
Développeurs de pluginsMoodleurs particulièrement utilesTesteursTitulaires du Moodle Course Creator CertificateTraducteurs

Merci à toi pour ce compliment, et oui à fond avant les vacances qui me feront du bien !

Mais j'ai tant galéré pour trouver une solution, que je préfère qu'elle serve aux autres.

Et au passage, une petite coquille dans mon message 1er : "contrôle pour afficher ou non l'appréciation" langue tirée

Edit : Partagé aussi avec les anglais, Let's be crazy yeux grands ouverts

Piaf : et déposé dans la base des cours et contenus : https://moodle.net/mod/data/view.php?d=7&rid=706

 
Moyenne des évaluations  -
Mary Cooch
Re: [Modèle] Activité Base de données avec CSS et Javascript
Documentation writersMoodleurs particulièrement utilesTesteursTitulaires du Moodle Course Creator CertificateTraducteurs

J'allais te demander de le déposer la base des cours et contenus sur Moodle.net - et tu l'as déjà fait sourire 

Good man!grand sourire

 
Moyenne des évaluations Utile (1)
Avatar Luiggi Sansonetti
Re: [Modèle] Activité Base de données avec CSS et Javascript
Développeurs de pluginsMoodleurs particulièrement utilesTesteursTitulaires du Moodle Course Creator CertificateTraducteurs


 
Moyenne des évaluations  -
Avatar Nicolas Martignoni
Re: [Modèle] Activité Base de données avec CSS et Javascript
DéveloppeursDéveloppeurs de pluginsDocumentation writersMoodleurs particulièrement utilesTesteursTraducteurs

C'est bô.

Merci

 
Moyenne des évaluations Utile (1)
Avatar Dominique-Alain Jan
Re: [Modèle] Activité Base de données avec CSS et Javascript
Moodleurs particulièrement utilesTesteursTraducteurs

Contrôle anti-doppage à gauche à la sortie avant la porte vacances.

Si on trouve du cidre normand dans les urines tu vas être disqualifié pour les prochains championats du Moodle du bidouillage de Moodle. C'est dommage parce que là tu foule la plus haute marche du podium.

Allez, merci pour ce morceau d'architecture.

Vacances bien méritées

-dajan

 
Moyenne des évaluations Utile (1)
Avatar Luiggi Sansonetti
Re: [Modèle] Activité Base de données avec CSS et Javascript
Développeurs de pluginsMoodleurs particulièrement utilesTesteursTitulaires du Moodle Course Creator CertificateTraducteurs

Merci pour ce compliment et ces encouragements clin d’œil

Et non, du cidre Breton de préférence (mais modérément...)


 
Moyenne des évaluations  -
Avatar Eva FRYDE
Re: [Modèle] Activité Base de données avec CSS et Javascript
 

Bonjour Luiggi, 

Un énorme merci pour votre message très intéressant et très utile ! 

J'essaye actuellement d'utiliser votre modèle mais j'aimerai remplacer le champs commentaires 2 par une zone de dépôt de fichier. J'ai regardé l'html du modèle fiche et modifié le champs appreciation_comm2 par un champs de dépôt de fichier mais rien y fait. Pourriez-vous m'aider ? 

Merci beaucoup pour votre aide et ce partage !

Bien à vous 

Eva 







 
Moyenne des évaluations  -
Avatar Luiggi Sansonetti
Re: [Modèle] Activité Base de données avec CSS et Javascript
Développeurs de pluginsMoodleurs particulièrement utilesTesteursTitulaires du Moodle Course Creator CertificateTraducteurs

Bonjour

Merci pour ces mots.

Il faut procéder par ordre à mon avis pour ne pas se perdre et tout casser clin d’œil

Ajout du champ

  • supprimer le champ "appreciation_comm2"
  • ajouter un champ de type "fichier" nommé "appreciation_comm2"

Retouches Modèles

Dans le modèle "Nouvelle fiche"
  • désactiver l'éditeur
    • sinon, on perd TOUS Les éléments de scripts ajoutés, dommage !
  • tout en bas, supprimer le texte "appreciation_comm2"
    • car ce "nouveau" champ est ajouté, alors que l'autre nom est resté
      et si 2 champs ont le même nom dans le même modèle, ça bloque l'enregistrement des modifications apportées...
  • enregistrer


Dans le modèle "Fiche"
  • tout en bas, couper le texte "appreciation_comm2"
    • car ce "nouveau" champ est ajouté, alors que l'autre nom est resté
      et si 2 champs ont le même nom dans le même modèle, ça bloque l'enregistrement des modifications apportées...
  • coller la sélection où le champ est manquant
  • enregistrer


Normalement, c'est bon clin d’œil

 
Moyenne des évaluations Utile (2)
Avatar Eva FRYDE
Re: [Modèle] Activité Base de données avec CSS et Javascript
 

Merci c'est parfait ! 

 
Moyenne des évaluations  -
Avatar Eva FRYDE
Re: [Modèle] Activité Base de données avec CSS et Javascript
 

J'ai réussi c'est super ! Merci beaucoup cool 

Je me permet encore une dernière question :

comment ajouter une matière ? 

Merci pour tout 

Bonne fin de semaine !



 
Moyenne des évaluations  -