Mise en forme statique
Les metaBlocs sont des Blocs de l’Éditeur Visuel du CMS Knowledge Place identifiés en tant que metaBlocs via la saisie d’une Classe CSS de metaBloc dans le volet Avancé de la fenêtre Paramètres de ces Blocs.
Comme pour les Blocs, la mise en forme des metaBlocs est réalisée via le volet Style de cette fenêtre Paramètres.
Toutes les propriétés de ce volet Style peuvent être utilisées pour personnaliser la mise en forme des metaBlocs.
Tous les Blocs instanciés à partir d’un metaBloc héritent automatiquement de la mise en forme définie dans le volet Style de ce metaBloc.
Cette personnalisation est qualifiée de statique car la mise en forme d’un metaBloc ainsi définie est appliquée de manière identique à tous les Blocs instanciés à partir de ce metaBloc.
Mise en forme dynamique
Règles CSS de metaBlocs
Il est possible d’appliquer une mise en forme dynamique à chaque Bloc instancié à partir d’un metaBloc en utilisant les Règles CSS de metaBlocs.
Une Règle CSS de metaBloc est une règle qui définit les styles CSS à appliquer à chaque instance de Bloc créée à partir d’un metaBloc en fonction des informations de l’Utilisateur connecté et des informations définies dans la Console d’Administration pour l’élément associé à chaque instance de Bloc.
Plusieurs Types de Règles CSS de metaBlocs sont disponibles :
- Les Règles CSS sur Variable de metaBloc discrète
- Les Règles CSS sur Variable de metaBloc continue
- Les Règles CSS sur parité des Blocs
- Les Règles CSS sur mode de navigation
Les Règles CSS disponibles pour chaque Type de metaBloc et chaque Type de Règle CSS sont définies ici.
Règles CSS sur Variable de metaBloc discrète
Une Variable de metaBloc discrète est une Variable qui ne peut prendre qu’un nombre fini de valeurs possibles, quel que soit le type de valeur de cette Variable.
Par exemple, pour un metaBloc de Type Parcours, la Variable de metaBloc %%userStatusOnLearningPlan%% est une Variable discrète qui peut prendre uniquement les valeurs suivantes : notStarted, notYetSatisfied, started, satisfied et notSatisfied.
Une Règle CSS sur Variable de metaBloc discrète permet de définir les styles CSS à appliquer pour une valeur possible d’une ou plusieurs Variables de metaBloc discrètes.
Pour définir ce Type de Règle CSS :
- Cliquez sur le menu Réglages du CMS Knowledge Place
- Cliquez sur l’onglet Général
- Dans le champ Personnaliser CSS, définissez la Règle CSS en utilisant la syntaxe suivante, ruleName étant le nom de la Règle CSS à définir
.kps_discreteCSSRule_ruleName_valueN {
un ou plusieurs styles CSS à appliquer quand la Variable de metaBloc pour laquelle cette Règle CSS est appliquée a la valeur valueN
}
Par exemple, la Règles CSS color définie ci-dessous peut être utilisée pour changer la couleur du texte d’un Bloc instancié à partir d’un metaBloc de Type Parcours en fonction de la valeur du Statut de l’Utilisateur connecté sur le Parcours associé à cette instance.
.kps_discreteCSSRule_color_notStarted {color: gray;}
.kps_discreteCSSRule_color_started {color: blue;}
.kps_discreteCSSRule_color_notYetSatisfied {color: orange;}
.kps_discreteCSSRule_color_satisfied {color: green;}
.kps_discreteCSSRule_color_notSatisfied {color: red;}
Pour utiliser ce Type de Règle CSS sur un metaBloc, il faut renseigner un nom de classe CSS dans le champ Classe CSS du volet Avancé de la fenêtre Paramètres de ce metaBloc.
Ce nom de classe CSS doit respecter la syntaxe suivante :
kps_variableNameCSSRule_ruleName
Avec :
- variableName : nom de la Variable de metaBloc discrète à évaluer
- ruleName : nom de la Règle CSS à appliquer pour cette Variable
Les Variables de metaBlocs discrètes disponibles pour chaque Type de metaBloc et les valeurs possibles pour chacune de ces Variables sont documentées ici.
Par exemple, pour un metaBloc de Type Parcours pour lequel la couleur du texte doit être gérée en fonction du Statut de l’Utilisateur connecté sur le Parcours associé à chaque Bloc instancié à partir de ce metaBloc et en utilisant la Règle CSS fournie à l’exemple précédent, vous devez indiqué la classe CSS suivante :
kps_userStatusOnLearningPlanCSSRule_color
Une Règle CSS sur Variable de metaBloc discrète peut s’appliquer à plusieurs Variables de metaBlocs si celles-ci partagent les mêmes valeurs discrètes.
Par exemple, comme les variables %%userStatusOnLearningPlan%%, %%userStatusOnCourse%% et %%userStatusOnSequence%% partagent les mêmes valeurs discrètes, la Règle CSS fournie à l’exemple précédent peut s’appliquer à plusieurs Types de metaBlocs :
- Pour un metaBloc de Type Parcours : avec la classe kps_userStatusOnLearningPlanCSSRule_color
- Pour un metaBloc de Type Module : avec la classe kps_userStatusOnCourseCSSRule_color
- Pour un metaBloc de Type Séquence : avec la classe kps_userStatusOnSequenceCSSRule_color
Règles CSS sur Variable de metaBloc continue
Une Variable de metaBloc continue est une Variable numérique qui peut prendre toutes les valeurs possibles d’un intervalle de nombres.
Par exemple, pour un metaBloc de Type Parcours, la Variable de metaBloc %%userBestScaledScoreOnLearningPlan%% correspond au meilleur score en pourcentage obtenu par l’Utilisateur connecté sur un Parcours et peut prendre toutes les valeurs possibles entre 0 et 100.
Une Règle CSS sur Variable de metaBloc continue permet de définir les styles CSS à appliquer pour un intervalle de valeurs qui peut s’appliquer à une ou plusieurs Variables de metaBloc continues.
Pour définir ce Type de Règle CSS :
- Cliquez sur le menu Réglages du CMS Knowledge Place
- Cliquez sur l’onglet Général
- Dans le champ Personnaliser CSS, définissez la Règle CSS en utilisant la syntaxe suivante, ruleName étant le nom de la Règle CSS à définir
.kps_continueCSSRule_ruleName_not_applicable {
un ou plusieurs styles CSS à appliquer si la valeur n’est pas applicable, par exemple le nombre de Modules à valider pour un Parcours sans Règle de Validation sur les Modules
}
.kps_continueCSSRule_ruleName_not_available {
un ou plusieurs styles CSS à appliquer si la valeur n’est pas disponible, par exemple l’avancement pour certaines Séquences de Type SCORM
}
.kps_continueCSSRule_ruleName_valueMinN_valueMaxN {
un ou plusieurs styles CSS à appliquer pour toute valeur comprise entre valueMinN et valueMaxN » avec :
valueMinN : nobound ou un nombre, nobound identifiant ici une valeur inférieure sans limite
valueMaxN : nobound ou un nombre, nobound identifiant ici une valeur supérieure sans limite
}
Les Variables de metaBlocs continues disponibles pour chaque Type de metaBloc sont documentées ici.
Par exemple, la Règles CSS color ci-dessous peut être utilisée pour changer la couleur du texte d’un Bloc instancié à partir d’un metaBloc de Type Parcours en fonction de la valeur du meilleur score en pourcentage obtenu par l’Utilisateur connecté sur le Parcours associé à cette instance.
.kps_continueCSSRule_color_nobound_50 {color: gray;}
.kps_continueCSSRule_color_50_80 {color: orange;}
.kps_continueCSSRule_color_80_nobound {color: green;}
Pour utiliser ce Type de Règle CSS sur un metaBloc, il faut renseigner un nom de classe CSS dans le champ Classe CSS du volet Avancé de la fenêtre Paramètres de ce metaBloc.
Ce nom de classe CSS doit respecter la syntaxe suivante :
kps_variableNameCSSRule_ruleName
Avec :
- variableName : nom de la Variable de metaBloc discrète à évaluer
- ruleName : nom de la Règle CSS à appliquer pour cette Variable
Par exemple, pour un metaBloc de Type Parcours pour lequel la couleur du texte doit être gérée en fonction du meilleur score en pourcentage obtenu par l’Utilisateur connecté sur le Parcours associé à chaque Bloc instancié à partir de ce metaBloc et en utilisant la Règle CSS fournie à l’exemple précédent, vous devez indiqué la classe CSS suivante :
kps_userBestScaledScoreOnLearningPlanCSSRule_color
Une Règle CSS sur Variable de metaBloc continue peut s’appliquer à plusieurs Variables de metaBlocs si celles-ci partagent les mêmes intervalles de valeurs.
Par exemple, comme les variables %%userBestScaledScoreOnLearningPlan%%, %%useruserBestScaledScoreOnCourse%% et %%userBestScaledScoreOnSequence%% partagent le même intervalle de valeurs, la Règle CSS fournie à l’exemple précédent peut s’appliquer à plusieurs Types de metaBlocs :
- Pour un metaBloc de Type Parcours : avec la classe kps_userBestScaledScoreOnLearningPlanCSSRule_color
- Pour un metaBloc de Type Module : avec la classe kps_userBestScaledScoreOnCourseCSSRule_color
- Pour un metaBloc de Type Séquence : avec la classe kps_userBestScaledScoreOnSequenceCSSRule_color
Règles CSS sur parité des Blocs
Une Règle CSS sur parité des Blocs permet de définir les styles CSS à appliquer alternativement sur les instances paires et impaires d’un metaBloc et sur les Blocs enfants de ces instances.
Ce Type de Règle CSS est disponible pour tous les Types de metaBlocs et tous les Blocs.
Pour un metaBloc à plusieurs instances, les styles CSS appliqués à chaque instance de Bloc sont ceux correspondant à la parité de cette instance.
Pour un metaBloc à une seule instance ou un Bloc standard, les styles CSS appliqués sont ceux correspondant à la parité du Bloc parent.
Pour définir ce Type de Règle CSS :
- Cliquez sur le menu Réglages du CMS Knowledge Place
- Cliquez sur l’onglet Général
- Dans le champ Personnaliser CSS, définissez la Règle CSS en utilisant la syntaxe suivante, ruleName étant le nom de la Règle CSS à définir
.kps_oddEvenCSSRule_ruleName_Odd {
un ou plusieurs styles CSS à appliquer aux instances impaires
}
.kps_oddEvenCSSRule_ruleName_Even {
un ou plusieurs styles CSS à appliquer aux instances paires
}
Pour utiliser ce Type de Règle CSS sur un metaBloc, il faut renseigner un nom de classe CSS dans le champ Classe CSS du volet Avancé de la fenêtre Paramètres de ce metaBloc.
Ce nom de classe CSS doit respecter la syntaxe suivante :
kps_oddEvenCSSRule_ruleName
Avec :
- ruleName : nom de la Règle CSS
Règles CSS sur mode de navigation
Une Règle CSS sur mode de navigation permet de définir les styles CSS à appliquer en fonction du mode de navigation de l’Utilisateur connecté, Apprenant ou Tuteur.
Ce Type de Règle CSS est disponible pour tous les Types de metaBlocs et tous les Blocs.
Pour définir ce Type de Règle CSS :
- Cliquez sur le menu Réglages du CMS Knowledge Place
- Cliquez sur l’onglet Général
- Dans le champ Personnaliser CSS, définissez la Règle CSS en utilisant la syntaxe suivante, ruleName étant le nom de la Règle CSS à définir
.kps_viewModeCSSRule_ruleName_learner {
un ou plusieurs styles CSS à appliquer en mode Apprenant
}
.kps_viewModeCSSRule_ruleName_tutor {
un ou plusieurs styles CSS à appliquer en mode Tuteur
}
Pour utiliser ce Type de Règle CSS sur un metaBloc, il faut renseigner un nom de classe CSS dans le champ Classe CSS du volet Avancé de la fenêtre Paramètres de ce metaBloc.
Ce nom de classe CSS doit respecter la syntaxe suivante :
kps_viewModeCSSRule_ruleName
Avec :
- ruleName : nom de la Règle CSS
CSS applicable en cas de Règle CSS invalide
Pour les Règles CSS sur Variable de metaBloc discrète ou continue, les valeurs des variables sont obtenues :
- A partir des variables disponibles sur le Bloc instancié à partir du metaBloc
- Si certaines variables ne sont pas trouvées, à partir des variables disponibles dans les Blocs parents du Bloc en cours ou des variables mémorisées par le metaLMS via la navigation de l’Utilisateur
Si la valeur d’une variable ne peut pas être déterminée, les styles CSS associés à la classe kps_CSSRuleInError sont appliquées au Bloc.
Les styles CSS associés à cette classe peuvent être définies dans le champ Personnaliser CSS de l’onglet Général du menu Réglages du CMS Knowledge Place.
Par exemple, pour identifier facilement ce type d’erreur, vous pouvez utiliser le code ci-dessous pour encadrer chaque Bloc en erreur d’un filet en pointillé rouge :
.kps_CSSRuleInError {
border-color: red;
border-style: dotted;
border-width: medium;
}
