Documentation du CMS Knowledge Place

L’utilisation des Quiz dans les formations

Insérer un Quiz dans une Page, un Projet ou un Article

Pour être accessibles aux utilisateurs, les Quiz crées avec le CMS Knowledge Place doivent être intégrés aux Pages, Projets ou Articles que vous réalisez.

Cette intégration est réalisée grâce à un shortcode qui identifie de manière unique le Quiz à afficher et lui associe des propriétés optionnelles.

Lorsque votre Quiz est terminé et que vous voulez l’intégrer à une Page, un Projet ou un Article :

  • Affichez la liste des Quiz
  • Localisez le shortcode associé au Quiz que vous souhaitez insérer, et qui est affiché dans la colonne « Shortcode » de la liste, par exemple : [kps_quiz id=2]
  • Sélectionnez le shortcode et faîtes un clic droit pour le coller dans le presse-papier

Pour insérer ce Quiz dans une Page, un Projet ou un Article :

  • Ouvrez l’Editeur par Bloc ou l’Editeur Visuel sur la Page, le Projet ou l’Article dans lequel vous souhaitez insérer ce Quiz
  • Ajouter un Module « Code » à l’emplacement où vous souhaitez que le Quiz soit affiché
  • Ouvrez le panneau de configuration de ce Module « Code »
  • Dans l’onglet « Contenu », champ « Contenu », collez le shortcode que vous avez copié dans le presse-papier

Dans l’Editeur Visuel, votre Quiz s’affiche instantanément. Dans l’Editeur par Bloc, cliquez sur le bouton « Prévisualiser les Modifications » pour afficher votre Page, Projet ou Article avec le Quiz que vous venez d’insérer.

Sauvegardez votre Page, Projet ou Article.

Les propriétés du shortcode [kps_quiz]

Le shortcode [kps_quiz] du CMS Knowledge Place vous fournit plusieurs paramètres pour vous offrir une grande flexibilité sur le plan pédagogique.

Les paramètres disponibles sont les suivants.

Paramètres obligatoires :

  • id : l’identifiant unique du Quiz que vous souhaitez insérer

Paramètres optionnels utilisables uniquement lorsque le shortcode est placé dans une Page :

  • weight : s’il est renseigné, ce paramètre indique le coefficient de pondération à appliquer au score obtenu par l’utilisateur sur ce Quiz dans le calcul du score global obtenu par l’utilisateur sur la formation contenant la Page dans laquelle le Quiz est affiché
  • minRawScore : s’il est renseigné, ce paramètre indique le score minimum en points à atteindre par l’utilisateur pour que ce Quiz soit considéré comme validé
  • minScaledScore : s’il est renseigné, ce paramètre indique le score minimum en pourcentage à atteindre par l’utilisateur pour que ce Quiz soit considéré comme validé
  • validate : s’il est renseigné, le Quiz doit être validé pour que la Page soit considérée comme validée

Les paramètres minRawScore et minScaledScore sont mutuellement exclusifs.

Voici quelques exemples :

[kps_quiz id=12]

  • Insère le Quiz identidié par 12

[kps_quiz id=16 minScaledScore=80]

  • Insère le Quiz identifié par 16
  • Requiert un score minimum de 80% pour que le Quiz soit validé par l’Utilisateur

[kps_quiz id=23 weight=5 minRawScore=50 validate=true]

  • Insère le Quiz identifié par 23
  • Comptabilise avec un coefficient 5 le score obtenu par l’utilisateur sur ce Quiz dans le score global de l’utilisateur sur la formation contenant la Page dans laquelle ce Quiz est affiché
  • Requiert un score minimum de 50 points pour que le Quiz soit validé par l’Utilisateur
  • Requiert que ce Quiz soit validé par l’utilisateur pour que la Page contenant ce Quiz soit considérée comme validée par l’utilisateur

Grâce au shortcode [kps_quiz] et à ces différents paramètres :

  • Vous pouvez afficher plusieurs Quiz dans une même Page, Projet ou Article, en utilisant autant de Modules « Code » que nécessaire
  • Vous pouvez utiliser le même Quiz dans plusieurs Pages et utiliser les propriétés optionnelles du shortcode pour définir des modalités de suivi spécifiques en fonction de la Page dans laquelle le Quiz est affiché

 Par exemple, un même Quiz pourra être validé avec un score de :

  • 50% dans une Page de formation pour niveau débutant
  • 70% dans une Page de formation pour niveau intermédiaire
  • 100% dans une Page de formation pour niveau expert

 

La mise en forme des Quiz

Vous pouvez personnaliser la mise en forme des Quiz comme dans les exemples présentés ici :

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 :

  • Ouvrez la fenêtre des Paramètres du Module « Code » contenant votre Quiz
  • Cliquez sur l’onglet « Avancé »
  • Entrez la valeur « kpsQuiz » dans le champ « Classe CSS »
  • Définissez les valeurs des variables que vous souhaitez personnaliser dans le champ « Elément principal » du volet «  »Personnaliser CSS »

Par exemple, pour utiliser le code couleur couleur #D6272E comme couleur d’accentuation des éléments cliquables du Quiz :

  • Entrez : –quiz-accent-background: #D6272E;

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

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

 

Propriétés de la classe CSS kpsQuiz
.kpsQuiz .wpProQuiz_button {
background: var(--quiz-accent-background)  !important;
margin: 8px auto 0 !important;
cursor: pointer !important;
font-size: 20px !important;
font-weight: 500 !important;
border-radius: 3px !important;
padding: 6px 20px !important;
line-height: 1.7em !important;
border: 2px solid !important;
transition: all 0.2s !important;
text-decoration:none !important; 
box-shadow:none !important;
}

.kpsQuiz .wpProQuiz_button:hover { 
color: var(--quiz-accent-hover)  !important;
background: var(--quiz-accent-background-hover) !important; 
border-color: var(--quiz-accent-background-hover) !important; 
padding: 6px 20px !important; 
}

.kpsQuiz .wpProQuiz_button2 {
background: var(--quiz-accent-background)  !important;
margin: 8px auto 0 !important;
cursor: pointer !important;
font-size: 20px !important;
font-weight: 500 !important;
border-radius: 3px !important;
padding: 6px 20px !important;
line-height: 1.7em !important;
border: 2px solid !important;
transition: all 0.2s !important;
text-decoration:none !important; 
box-shadow:none !important;
}

.kpsQuiz .wpProQuiz_button2:hover {
color: var(--quiz-accent-hover)  !important;
background: var(--quiz-accent-background-hover) !important; 
border-color: var(--quiz-accent-background-hover) !important; 
padding: 6px 20px !important; 
}

.kpsQuiz .wpProQuiz_time_limit .wpProQuiz_progress {
height: 10px !important;
background-color:  var(--quiz-accent-background-hover) !important;
margin-bottom: 5px !important;
}

.kpsQuiz .wpProQuiz_answerCorrect {
background: var(--quiz-answer-correct-background) !important;
font-weight: bold !important;
}

.kpsQuiz .wpProQuiz_answerIncorrect {
background:  var(--quiz-answer-incorrect-background) !important;
font-weight: bold !important;
}

.kpsQuiz .wpProQuiz_lock, .kpsQuiz .wpProQuiz_prerequisite, .kpsQuiz .wpProQuiz_startOnlyRegisteredUser, .kpsQuiz .wpProQuiz_loadQuiz {
border: 1px dotted var(--quiz-message-background) !important;
background-color: var(--quiz-message-background) !important;
}

.kpsQuiz .wpProQuiz_addToplistMessage {
border: 1px solid var(--quiz-message-background) !important;
background-color: var(--quiz-message-background) !important;
margin-bottom: 5px !important;
border-radius: 5px !important;
padding: 5px !important;
font-weight: bold !important;
color: var(--quiz-message) !important;
}

.kpsQuiz .wpProQuiz_content .wpProQuiz_text table  {
border: 0px !important;
} 

.kpsQuiz .wpProQuiz_matrixSortString {
background: var(--quiz-accent-background) !important;
border: 1px solid var(--quiz-accent-background) !important;
}

.kpsQuiz .wpProQuiz_mextrixTr td {
border: 1px solid var(--quiz-accent-background-hover)!important;
}

.kpsQuiz .wpProQuiz_placehold {
background-color: var(--quiz-accent-background) !important;
}

.kpsQuiz .wpProQuiz_questionList {
background: var(--quiz-question-list) !important;
border: 0px solid var(--quiz-accent-background) !important;
}

.kpsQuiz .wpProQuiz_response {
background: var(--quiz-accent-background) !important;
color: var(--quiz-message) !important;
box-shadow: 0px 0px 0px var(--quiz-box-shadow) !important;
border: 0px !important;
}

.kpsQuiz .wpProQuiz_sortable  {
box-shadow: 0px 0px 0px var(--quiz-box-shadow) !important;
}

.kpsQuiz .wpProQuiz_sortStringItem {
box-shadow: 0px 0px 0px var(--quiz-box-shadow) !important;
border: 1px solid var(--quiz-accent-background-hover) !important;
}

.kpsQuiz .wpProQuiz_reviewQuestion {
background: red !important;
}

.kpsQuiz .wpProQuiz_header {
color: var(--quiz-header-color) !important;
}

Documentation CMS

Consultez la documentation du CMS Knowledge Place pour concevoir vos formations Responsive Learning en mode collaboratif.

Exemples CMS

Découvrez les possibilités du CMS Knowledge Place à travers ces exemples consultables sur équipement fixe ou mobile.

Documentation metaLMS

Consultez la documentation du metaLMS Knowledge Place pour concevoir des Knowledge Places utilisables en toutes occasions, en ligne comme en présentiel, sur poste fixe, tablette ou smartphone.

knowledgeplaces.com

Retrouvez toute notre actualité sur notre site Web.