Wims et CSS

[markey]

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

[bernadette]

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 2 années et 11 mois par bernadette.

[byache]

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>

[bernadette]

Up

0

Down

::

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

Bernadette

[markey]

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

[Jocelyn Druel]

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’);

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

 

[Olivier]

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

[bernadette]

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

 

[Auteur]

Messages