Wims et CSS

Vous lisez 7 fils de discussion
  • Auteur
    Messages
    • #6428
      markey
      Participant
      Up
      0
      Down
      ::

      Bonjour,

      Où peut-on trouver des explications sur l’utilisation du CSS lors de la création d’exos OEF, et de documents wims?

      Benoît

    • #6431
      bernadette
      Maître des clés
      Up
      0
      Down
      ::

      Il y a la liste des styles css utilisables et gérées par la distribution dans la documentation de createxo. Tu peux les tester !

      Sinon, je vais toujours voir sur https://www.w3schools.com/w3css quand je cherche un renseignement sur un style particulier.

      Gilles a fait un café wimsedu sur une utilisation très sophistiquée. Mais pour la plupart des exercices, il suffit de … savoir fermer les styles.
      et ne pas mettre dans une balise p quelque chose dont l’intérieur est gérée par le noyau comme \\embed (pour laisser la possibilité de gérer la réponse librement par wims.

      Bernadette

      • Cette réponse a été modifiée le il y a 3 années et 1 mois par bernadette.
    • #6433
      byache
      Participant
      Up
      0
      Down
      ::

      Bonjour Benoit,
      Dans l’aide createxo, tu as la liste des styles css prédéfinis.
      Ils s’utilisent ainsi, par exemple :

      \statement{
      Donner la valeur numérique \embed{r1}
      <p class="wims_instruction"> Arrondir au dixième </p>
      }

      Voici aussi un exemple pour créer ton propre style et le concaténer avec des styles prédéfinis.

      Avant le statement :

      \css{<style type="text/css">
      .algo1 {color:blue;}
      </style>
      }

      Dans le statement, pour faire un paragraphe centré, de couleur bleue et de petite taille :

      <p class="wimscenter algo1 smaller"> blablabla </p>
      
    • #6434
      bernadette
      Maître des clés
      Up
      0
      Down
      ::

      On n’a plus besoin de mettre maintenant
      <style type="text/css"> simplement <style>

      Bernadette

    • #6443
      markey
      Participant
      Up
      0
      Down
      ::

      Bonjour,
      Merci pour vos réponses. Je suis allé effectivement dans la doc OEF, et je suis aussi allé relire cet article: https://wiki.wimsedu.info/doku.php?id=documentation:devel:css&s%5B%5D=css où d’autres exemples sont donnés. Aussi je me posais la question de savoir s’il existe d’autres ressources à ce sujet?

      Benoît

    • #6908
      Jocelyn Druel
      Participant
      Up
      0
      Down
      ::

      Bonjour,

      Je suis tombe sur ce fil en cherchant a ameliorer la lisibilite de mes exercices (qui consistent essentiellement a faire ecrire du code (python, sql, html,…)).

      J’avais plusieurs problemes:

      1. la mauvaise disctinction entre minuscule et majuscule: par exemple ModelID pour lequel le « l » minuscule et le « I » majuscule etaient indiscernables. Je mets en evidence (balise html strong) les parametres importants pour repondre (pour faciliter la vie des dyslexiques).
      2. la seule utilisation de couleurs rouge et verte pour les indications de bonnes et mauvaises reponses sur les qcm: cela pose pb pour les daltoniens. La bonne pratique est de mettre une couleur + un symbole (ou un element distinctif).

      Du coup, dans Configuration>Config/Maintenance>Apparence> »Inserer des definitions de style css », j’ai mis:

      @import url(‘https://fonts.googleapis.com/css2?family=Source+Code+Pro:wght@400;700&display=swap&rsquo;);

      strong {font-family: « Source Code Pro », monospace; font-weight:700}

      .oef_feedbacks {font-family: « Source Code Pro », monospace; font-weight:400}

      .oef_indbad,.oef_condbad {font-style: italic;}

      La police « Source Code Pro » permet une bonne distinction des minuscules/majuscules

      oef_inbad: les reponses fausses sont en rouge ET en italique

      J’ai mis aussi oef_condbad au cas ou (car pas utilise dans mes exos), en suivant la meme logique.

      J’avais pense a barrer oef_inbad, mais ca ne rend pas bien dans l’analyse.

      Je pense qu’indiquer en italique par defaut les reponses fausses pourraient etre un reglage par defaut de Wims afin d’etre plus inclusif.

      Une derniere chose: il y a petit pb de traduction dans l’interface anglaise de Configuration>Config/Maintenance>Apparence>: « download a css-style file (Style sheet should be on class) » devrait etre « upload a … »

      Rq: sur google fonts: dans le volet lateral « use on the web>@import  » permet d’obtenir le code css pour utiliser une police particuliere.

      Jocelyn

       

    • #6917
      Avatar photoOlivier
      Maître des clés
      Up
      0
      Down
      ::

      Merci pour cette remarque pertinente Jocelyn. En effet, la police par défaut ne permettait pas bien de distinguer un I majuscule du chiffre 1 ou d’un l minuscule.

      Exemple :

      I1lIl11Il

      ou encore distinguer les lettre « o » des chiffres 0 :

      oO0oO0

      J’ai ainsi changé la police par défaut de https://wims.univ-cotedazur.fr et de ce site https://wimsedu.info par Verdana, qui permet de mieux les distinguer.

      Olivier Bado-Faustin / Université Côte d’Azur

    • #6920
      bernadette
      Maître des clés
      Up
      0
      Down
      ::

      On avait pensé à mettre un symbole, mais cela ne va pas partout.

      Il me semblait d’autre part que (souvent, je n’ose pas affirmer plus), cela souligne un texte écrit (par exemple, mauvaise réponse en rouge), donc ce n’est pas essentiel.

      Peut-être l’italique, mais il y a d’autres cas où l’italique est utilisé.

      Bernadette

       

Vous lisez 7 fils de discussion
  • Vous devez être connecté pour répondre à ce sujet.