Configurer le style de page

Pour personnaliser l'apparence graphique de la page HTML représentant le quiz, sélectionnez l' élément "Style de la page" dans le menu Document.

La fenêtre suivante apparaît:

Il est possible de personnaliser:

• Arrière-plan de la page : image d'arrière-plan, couleur d'arrière-plan et couleur de premier plan, police et bordures;
• Titre de la page: image d'arrière-plan et logo;
• largeur de la page : c'est-à-dire changer l'espacement des côtés droit et gauche de la page;
• séparateur entre les questions , il peut s'agir d'une simple ligne horizontale ou de sa propre image, sélectionnable à partir d'un fichier;
• polices et couleurs : vous pouvez modifier la plupart des polices de la page HTML du quiz (nom de la famille de polices, taille, couleur d'arrière-plan et de premier plan) ou réinitialisez-les à leur valeur par défaut;
• position des réponses : si le texte des réponses est une par ligne ou toutes sur la même ligne

Les figures suivantes illustrent les deux boîtes de dialogue permettant de modifier l'arrière-plan et le titre de la page:

Style de la page

Enfin, vous pouvez ajouter leurs propres styles CSS (feuille de style en cascade) en sélectionnant le deuxième onglet "page de style". La fenêtre suivante apparaît:

Pour vous assurer que vous avez écrit du code CSS syntaxiquement correct, appuyez sur le bouton "Valider".

Vous trouverez ci-dessous une liste de noms de classes CSS que vous pouvez utiliser pour définir vos propres styles :

Exercices à trous

	qf-gap-class
	qf-gap-input-class
	qf-gap-dropdown-select-class
	qf-gap-dropdown-option-class

Association de mots

	qf-matching-class
	qf-matching-left-class
	qf-matching-right-class
	qf-matching-left-selected-item-class
	qf-matching-right-selected-item-class
	qf-matching-left-dropdown-class
	qf-matching-right-dropdown-class
	qf-matching-left-item-class
	qf-matching-right-item-class

Questions à réponse ouverte

	qf-openans-class

Questions Vrai ou faux

	qf-truefalse-radio-class

Aspect général de la page

	qf-panel-all-questions-class
	qf-panel-question-class
	qf-panel-question-heading-class
	qf-panel-question-body-class

	qf-panel-result-class
	qf-panel-result-heading-class
	qf-panel-result-body-class

	qf-jumbotron-class
	qf-statusbar-class
	qf-result-summary-item-class