Moodle en français: [Modèle] Activité Base de données avec CSS et Javascript

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

par Luiggi Sansonetti, mercredi 12 juillet 2017, 16:09

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 ).

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 ), 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é

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

Merci de votre lecture et de vos retours éventuels

Cheers.

BDD avec CSS et Javascript-preset-20170712_0808.zip

Moyenne des évaluations Utile (11)

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

par Luiggi Sansonetti, mercredi 12 juillet 2017, 16:18

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é

Moyenne des évaluations -

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

par Séverin TERRIER, mercredi 12 juillet 2017, 16:21

Bonjour Luiggi,

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

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

Séverin

Moyenne des évaluations Utile (1)

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

par Luiggi Sansonetti, mercredi 12 juillet 2017, 16:29

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"

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

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 -

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

par Mary Cooch, mercredi 12 juillet 2017, 17:01

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

Good man!

Moyenne des évaluations Utile (1)

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

par Luiggi Sansonetti, mercredi 12 juillet 2017, 17:12

Moyenne des évaluations -

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

par Nicolas Martignoni, mercredi 12 juillet 2017, 18:23

C'est bô.

Merci

Moyenne des évaluations Utile (1)

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

par Dominique-Alain Jan, mercredi 12 juillet 2017, 22:29

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)

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

par Luiggi Sansonetti, mercredi 12 juillet 2017, 22:58

Merci pour ce compliment et ces encouragements

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

Moyenne des évaluations -

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

par Eva FRYDE, vendredi 9 février 2018, 01:26

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 -

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

par Luiggi Sansonetti, vendredi 9 février 2018, 15:12

Bonjour

Merci pour ces mots.

Il faut procéder par ordre à mon avis pour ne pas se perdre et tout casser

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

Moyenne des évaluations Utile (2)

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

par Eva FRYDE, vendredi 9 février 2018, 21:44

Merci c'est parfait !

Moyenne des évaluations -

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

par Eva FRYDE, samedi 10 février 2018, 00:16

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

Je me permet encore une dernière question :

comment ajouter une matière ?

Merci pour tout

Bonne fin de semaine !

Moyenne des évaluations -

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

par denis gouin, lundi 5 novembre 2018, 18:36

Bien le bonjour,

Je viens de tomber sur ton poste qui m'a été très utile. Je te remercie pour ça.

J'ai mis en place un système de BDD pour gérer des fiches matières.

L'idée c'est de pouvoir utiliser le flux rss et pouvoir récupérer les données de ses fiches matières.

Ainsi je peux générer un syllabus via un petit scripte en javascript/jquery en entête de chaque cours.

ce qui marche très bien (au besoin je peux filer le code ;) )

le problème c'est qu'il ne m'autorise que 50 fiches dans le flux RSS au maximum.

Est-ce que quelqu'un aurait une idée de comment on modifie se paramètre ??

merci

Moyenne des évaluations -

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

par Luiggi Sansonetti, lundi 5 novembre 2018, 18:43

Bonjour

Merci pour ce retour

Sans répondre pour le blocage à 50 (pas vu de réglages pour les limites au niveau système, peut-être en dur quelque part ou par défaut pour le flux), le partage du code peut être utile s'il est intégré au modèle de la base.

Et si oui, va-t-il insérer automatiquement dans chaque cours le syllabus correspondant ?

Quelques détails

Moyenne des évaluations -

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

par denis gouin, lundi 5 novembre 2018, 20:11

Re,

c'est possible. Il faut faire correspondre le nom de ton cours (balise title ) au nom de la fiche de ta base. et du coup tu peux automatiser comme ceci:

// là tu met le liens du jquery il n'aime pas les fichiers jquery exterieur au domaine.

// on faits une div pour mettre le contenu

$(function() {

$.ajax({

type: "GET",

// pour trouver l'adresse du fichier xml lorsqu'on active le flux rss dans la fenètre admin de la base de donnée on peut cliquer sur copier l'adresse du liens

url: "url du fichier xml",

dataType: "xml",

success: function(data){parseXml(data)} });

// on récupère le contenu de la balise titre du cours

var siteTitre = $('title').html();

// on parse le fichier xml

function parseXml(xml){

dataxml = null;

$(xml).find("item").each(function(){

title = $(this).find("title").text();

description = $(this).find("description").text();

// si le titre correspond à la balise titre on recupère sa description.

if (title == siteTitre){

dataxml += title + " " + description + " "; }

});

// il ne nous reste plus qu'a remplir la div avec le contenu

$('#resultxml').html(dataxml); }

});

// ]]></script>

voilà .

Moyenne des évaluations Utile (1)

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

par Peggy Heinen, mercredi 20 février 2019, 21:47

Bonjour,

Merci beaucoup Luigi pour cette super fiche ! Elle m'a beaucoup aidée dans mes recherches et ma création de fiche.

Une astuce pour permettre aux images d'apparaître dans le header (J'ai cherché un moment avant qu'Anne Garnavault me donne la solution) déposer les images dans un dossier caché de l'espace de cours
dans réglages courants, disponibilité : rendre disponible mais invisible sur la page de cours.
Il suffit ensuite de copier le lien et le coller dans le code.

Je partage aussi ici mes modèles de fiches, elles sont bien moins recherchées mais peuvent être utiles.
Je suis relativement débutante alors si vous trouvez des erreurs dans le code, n'hésitez pas à le dire !

La 1ère fiche est simplement à remplir par les étudiants pour obtenir des informations sur leur état-civil et leur cursus antérieur.
Pour éviter que la fiche soit visible par tout le groupe :
Dans paramètres : fiches
Fiches requises avant consultation : 10
Nombre maximal de fiches : 1

Fiche administrative : état civil + cursus antérieur

La 2ème fiche permet un suivi et un accompagnement des étudiants au cours de l'année universitaire. Elle comporte deux parties (les 2 couleurs) : la 1ère à remplir par l'étudiant, la 2ème par le tuteur pédagogique :

Fiche de suivi entre étudiants et tuteur pédagogique

INFORMATIONS ADMINISTRATIVES-preset-20190219_1305.zip

Moyenne des évaluations Utile (2)

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

par Peggy Heinen, mercredi 20 février 2019, 21:47

Et le 2ème modèle

Fiche N°1 -preset-20190220_0954.zip

Moyenne des évaluations Utile (2)

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

par Luiggi Sansonetti, mercredi 20 février 2019, 21:51

Bonjour

Merci à toi pour ce partage.

Ça peut être utile en effet à d'autres comme modèle

Moyenne des évaluations -