Chronomètre flottant

Chronomètre flottant

par Jean-Gabriel DEPINOY,
Nombre de réponses : 11
Avatar Moodleurs particulièrement utiles

Bonjour à tous,

J'ai actuellement une plateforme 3.7 avec le Thème Fordson. Je me souviens que sur une ancienne version de Moodle j'avais réussi à rendre le chronomètre flottant lors des quiz en suivant les indications de ce forum.

Je viens d'essayer de reproduire ces lignes de code, sans succès. Le chronomètre reste toujours en haut de la page et du coup n'est plus visible quand on fait défiler les questions.

Quelqu'un a-t-il une solution à proposer?

Merci de votre aide.


Moyenne des évaluations  -
En réponse à Jean-Gabriel DEPINOY

Re: Chronomètre flottant

par Olivier Valentin,
Avatar Développeurs de plugins Avatar Moodleurs particulièrement utiles
Bonjour Jean-Gabriel,

le message du forum que tu as cité remonte à 2012 et fait de grosses bidouilles dans les fichiers eux-mêmes... Un peu risqué ! sourire
Meilleure solution selon moi : bidouiller le code CSS. Dans ton template, tu dois avoir la possibilité d'ajouter du code CSS supplémentaire. Il suffit donc de modifier le code de l'élément contenant le chronomètre, à savoir quiz-timer.

Grosso modo, essaye d'ajouter cela :

#quiz-timer {
position: fixed;
z-index: 100;
background-color: #cccccc;
}

Avec cette base, cela permet de fixer le div contenant le timer une fois pour toutes. Après, il te suffira de rajouter des styles supplémentaires si tu souhaites modifier l'apparence : font-size pour la taille de police, color pour la couleur de texte, tu peux également utiliser le padding pour décaler légèrement ton bloc si besoin etc.

Pour finir, on rappelera encore toutes les précautions à prendre avec les bidouilles CSS... Mais dans ce cas, cela ne devrait pas trop poser de problèmes.

Olivier

Moyenne des évaluations Utile (4)
En réponse à Olivier Valentin

Re: Chronomètre flottant

par Jean-Gabriel DEPINOY,
Avatar Moodleurs particulièrement utiles
Bonjour Olivier,
Merci pour ta réponse. J'avoue que je ne m'y connais absolument pas en CSS. Je me souviens que dans les paramètres de certains thèmes, il y avait une zone "CSS personnalisé" dans laquelle, je suppose, on pouvait mettre ce code.
Dans le thème Fordson, je n'ai pas ce paramétrage. Par contre j'ai les paramètres "SCSS brut initial" et "SCSS brut". Est-ce que je peux mettre mon code dans un de ces deux paramètres?
Moyenne des évaluations  -
En réponse à Jean-Gabriel DEPINOY

Re: Chronomètre flottant

par Olivier Valentin,
Avatar Développeurs de plugins Avatar Moodleurs particulièrement utiles
Je n'ai pas Fordson installé sur mon Moodle, mais en relisant des posts de personnes l'utilisant, a priori SCSS brut inital doit faire l'affaire. De toute manière, ce n'est que du CSS ! Cela ne cassera rien du tout, contrairement à une modification en dur d'un fichier de code.
Si la solution te convient, n'hésite pas à me dire si tu as des demandes sur le rendu final, je pourrais toujours te guider sur le code à rajouter.
Olivier
Moyenne des évaluations Utile (1)
En réponse à Jean-Gabriel DEPINOY

Re: Chronomètre flottant

par Luiggi Sansonetti,
Avatar Développeurs de plugins Avatar Documentation writers Avatar Moodleurs particulièrement utiles Avatar Testeurs Avatar Titulaires du Moodle Course Creator Certificate Avatar Traducteurs
Bonjour

Onglet "Couleurs" clin d’œil


Moyenne des évaluations Utile (1)
En réponse à Luiggi Sansonetti

Re: Chronomètre flottant

par Jean-Gabriel DEPINOY,
Avatar Moodleurs particulièrement utiles
Merci à tous les deux. Ça fonctionne parfaitement. Effectivement, il faut mettre ce bout de code dans le paramètre "SCSS brut inital" situé dans l'onglet "Couleurs" du thème Fordson.
Moyenne des évaluations  -
En réponse à Jean-Gabriel DEPINOY

Re: Chronomètre flottant

par florence labord,
En complément une précision par l'exemple pour fordson onglet couleur : dans "css brut initial" on appelle une variable, exemple
$bleu: #00AAE5!default;

Ce qui permet dans la zone "SCSS brut" de placer son code SCSS qui appelle la variable de couleur écrite plus haut
: exemple pour la couleur du point d'interro aide vers Moodle :
De cette façon si on change le code hexa (couleur) dans la variable , cela change partout ou la variable est appelée


.text-info, .highlight {
color: $bleu;
}
Moyenne des évaluations Utile (1)
En réponse à Jean-Gabriel DEPINOY

Re: Chronomètre flottant

par Luiggi Sansonetti,
Avatar Développeurs de plugins Avatar Documentation writers Avatar Moodleurs particulièrement utiles Avatar Testeurs Avatar Titulaires du Moodle Course Creator Certificate Avatar Traducteurs
Bonjour

Petite amélioration si besoin.

Dans mon cas je souhaite fixer TOUT le bloc du test et non QUE le chronomètre :


Code CSS à ajouter dans l'onglet "Couleurs" du thème Fordson

//fixer le chronomètre des Tests
#mod_quiz_navblock {
position: fixed;
}

Je trouve que c'est mieux

Moyenne des évaluations Utile (2)
En réponse à Luiggi Sansonetti

Re: Chronomètre flottant

par Luiggi Sansonetti,
Avatar Développeurs de plugins Avatar Documentation writers Avatar Moodleurs particulièrement utiles Avatar Testeurs Avatar Titulaires du Moodle Course Creator Certificate Avatar Traducteurs
Et pour faire encore mieux (on peut toujours avec Moodle), on peut fixer la zone de bloc.

Dans mon cas, si je n'utilise que le test, les lignes précédentes me suffisent.

Mais comme nous utilisons un système de surveillance, il y a un bloc pendant l'épreuve... donc le bloc de navigation du test passe en dessous...

J'ai donc opté pour fixer toute la zone de bloc latérale pour avoir constamment ET la navigation & chronomètre ET le bloc de surveillance clin d’œil

Pour moi, ça marche


Et code :
//fixer la zone de bloc latérale pendant les tests
#page-mod-quiz-attempt #block-region-side-pre {
position: fixed;
}
Moyenne des évaluations Utile (2)