Personnaliser la présentation du Quiz

Vous pouvez personnaliser la mise en forme des Quiz. 
Pour commencer, vous pouvez tout simplement appliquer une mise en forme au Module Code contenant votre Quiz :

• Ouvrez la fenêtre des Paramètres de ce Module
• Appliquez par exemple une couleur de fond ou des marges à ce Module

Ensuite, vous pouvez facilement mettre en forme votre Quiz en utilisant la classe CSS « kpsQuiz » fournie avec votre CMS Knowledge Place.

Cette classe utilise des variables CSS ce qui permet de l’utiliser très facilement. Depuis la fenêtre des Paramètres du Module Code contenant votre Quiz :

1. Cliquez sur l’onglet Avancé
2. Cliquez sur le volet ID et classes CSS
3. Dans le champ Classe CSS entrez la valeur « kpsQuiz »
4. Cliquez sur le volet Personnaliser CSS
5. Dans le champ Élément principal, définissez les valeurs des variables que vous souhaitez personnaliser.
   Par exemple, pour utiliser des codes couleur comme couleur d’accentuation des éléments cliquables du Quiz :
6. Entrez : –quiz-accent-background: #D6272E; pour la couleur d’arrière-plan de tous les boutons
7. Entrez : –quiz-accent-background-hover: #F2F2F2; pour la couleur de tous les boutons au survol

La définition de la classe CSS « kpsQuiz » et les variables disponibles sont fournies ci-dessus.

Si vous souhaitez aller plus loin dans la personnalisation de la mise en forme d’un Quiz :

• Ouvrez la fenêtre des Paramètres du Module Code » contenant ce Quiz
• Cliquez sur l’onglet « Avancé »
• Dans le champ « ID CSS », entrez une valeur identifiant de manière unique ce Quiz dans la Page, par exemple « monQuiz45 » où 45 est l’id du Quiz
• Utilisez les outils de développement de votre navigateur pour identifier les propriétés CSS appliquées à chaque élément du Quiz que vous souhaitez personnaliser
• Cliquez sur le menu « Design –> Autres paramètres » de votre CMS Knowledge Place
• Dans le champ « Personnaliser CSS », définissez les valeurs personnalisées à appliquer à ces propriétés CSS lorsqu’elles sont utilisées pour ce Quiz en particulier

Par exemple, pour modifier la police de caractère et la taille utilisées par un Quiz identifié par l’ID CSS « monQuizSacramento » :

• Entrez « #monQuizSacramento {font-family: sacramento; font-size: 25px;} »
• Si vous souhaitez utiliser une des polices Google Font fournie avec votre CMS Knowledge Place, comme dans cet exemple, utilisez cette police sur un autre texte de votre Page

Personnaliser la présentation des résultats de l’Utilisateur au Quiz

Il est possible d’afficher en fin de Quiz les résultats à l’utilisateur sous différentes formes.

• Afficher un simple texte
• Activer un barème et afficher un texte différent en fonction du score obtenu par l’utilisateur
• Afficher un contenu personnalisé en créant une ou plusieurs Pages de résultats selon barème

Afficher un simple texte à l’utilisateur

Le texte affiché à l’utilisateur est toujours le même quel que soit le score obtenu.

Depuis la page d’accueil du CMS Knowledge Place dans le menu latéral gauche, menu Quiz :

1. Cliquez sur Tous le Quiz
2. Survolez le titre du Quiz à modifier et cliquez sur Modifier
3. Dans le panneau Texte pour le résultat, saisissez le texte qui sera affiché à l’apprenant en fin de Quiz
4. Texte affiché à l’utilisateur

Afficher un simple texte à l’utilisateur en activant le barème

Pour chaque tranche du barème un texte différent est affiché à l’utilisateur en fin de Quiz.

1. Dans le panneau Texte pour le résultat cochez la case Activer le système de barème
2. Cliquez sur le bouton Ajouter un barème, situé en bas de la Page à gauche, pour ajouter le nombre de barèmes souhaité
3. Saisissez les % pour chaque tranche de barème
4. Saisissez le texte à afficher à l’apprenant pour chaque tranche de barème
5. Cliquez sur Enregistrer
6. Texte affiché à l’utilisateur correspondant à un score supérieur ou égal à 80%

Créer un contenu personnalisé 

La personnalisation de l’affichage des résultats nécessite la création d’une ou plusieurs Pages de résultats.

Vous pouvez personnaliser le contenu du Texte pour le résultat en remplaçant le texte défini pour chaque tranche de barème par le contenu d’une Page réalisée avec l’Editeur Visuel.

Pour créer un Page de résultats, depuis la page d’accueil du CMS Knowledge Place, créez une nouvelle Page de formation :

1. Dans le champ Saisissez le titre, nommez la Page : par exemple « page résultat quiz validé »
2. Cliquez sur le bouton Publier
3. Cliquez sur le bouton Utiliser Divi Builder afin d’éditer la Page et la personnaliser
4. Personnalisez la Page à afficher à l’utilisateur

Vous pouvez entièrement personnaliser le contenu de la Page de résultat à l’aide des variables listées ci-dessous

Afficher des Pages de résultats personnalisées à l’utilisateur

Lorsque, en fin de Quiz, l’’utilisateur clique sur le bouton Terminer la Page correspondante au score obtenu s’affiche. Dans cet exemple deux Pages de résultats ont été créées :

• Résultats Quiz validé. Le score est supérieur ou égal à 80%
• Résultats Quiz non validé. Le score est inférieur à 80%

Les pages personnalisées  sont identifiées par un shortcode. Le shortcode [kps_quiz_result] requiert un seul paramètre « id » tel que : Shortcode [kps_quiz_result id=245]

Pour afficher les Pages de résultats personnalisées à l’utilisateur, depuis la page d’accueil du CMS Knowledge éditez le Quiz à modifier.

1. Dans le panneau Texte pour le résultat cochez la case Activer le système de barème
2. Cliquez sur le bouton Ajouter un barème, situé en bas de la Page à gauche, pour ajouter le nombre de barèmes souhaités
3. Saisissez les % pour chaque tranche de barème
4. Dans les zones de texte de chaque barème saisir le shortcode quiz result et l’ID de la page à afficher, comme par exemple :
   –  [kps_quiz_result id=208623] pour afficher la Page Résultats Quiz validé
   –  [kps_quiz_result id=208625] pour afficher la Page Résultats Quiz non validé
5. Cliquez sur Enregistrer

Le shortcode saisi dans le panneau Texte pour le résultat s’obtient en survolant la Page de résultat concernée et s’affiche en bas à gauche de la Page.

Pages de résultats personnalisées

Voici les deux exemples de Pages de résultats personnalisées :

1. Page de résultats en cas de Quiz validé. Le score est supérieur ou égal à 80%
2. Page de résultats en cas de Quiz non validé. Le score est inférieur à 80%

Attention, pour tester le Quiz et visualiser correctement les Pages de résultats vous devez lancer le Quiz dans un navigateur différent.