L'éditeur de modèles

Présentation

Un thème de questionnaire détermine l'apparence de votre questionnaire pour les participants : la mise en page, les couleurs, les polices, les logos et le style de chaque question. Les thèmes sont construits avec des modèles Twig, du CSS et du JavaScript, et utilisent Bootstrap 5 comme framework CSS.

De nombreuses modifications courantes ne nécessitent aucun code. Le logo, les couleurs, les polices et plusieurs paramètres d'affichage peuvent être modifiés avec les options de thème. Utilisez l'éditeur de thème décrit sur cette page lorsque vous souhaitez aller plus loin : ajouter votre propre CSS ou JavaScript, modifier le HTML d'une page, ou envoyer des images et d'autres fichiers pour votre thème.

LimeSurvey est fourni avec ces thèmes de questionnaire de base :

• Fruity TwentyThree (fruity_twentythree) : le thème par défaut.
• Bootstrap Vanilla (vanilla) : un thème de base simple pour les développeurs qui souhaitent créer leur propre thème basé sur Bootstrap.
• Fruity (fruity) et Bootswatch (bootswatch) : tous deux étendent Bootstrap Vanilla.

L'apparence des différents types de questions est contrôlée par les thèmes de questions, et non par le thème de questionnaire. Pour modifier le HTML d'un type de question, créez un thème de question.

Avant de commencer

Pour utiliser l'éditeur de thème, vous devez disposer de la permission globale Thèmes (voir permissions globales) ou être super-administrateur. Étendre un thème nécessite le droit Créer, sauvegarder les changements nécessite Mettre à jour, et supprimer un thème ou réinitialiser un fichier nécessite Supprimer.

  Un thème contenant des erreurs peut rendre inutilisable chaque questionnaire qui l'utilise. Testez vos modifications avec un aperçu du questionnaire avant d'utiliser le thème dans un questionnaire en production.

Les thèmes de base ne peuvent pas être modifiés : étendez-les

Les thèmes de base sont mis à jour avec LimeSurvey, vous ne pouvez donc pas les modifier directement. Pour en personnaliser un, étendez-le. Cette action crée un nouveau thème utilisateur qui hérite de tout ce que contient son thème parent. Votre thème ne contient que les fichiers que vous modifiez ; tout le reste provient du thème parent. Ainsi, votre thème continue de bénéficier des corrections de bogues et des améliorations lorsque LimeSurvey met à jour le thème parent.

Pour étendre un thème, vous pouvez :

• Aller à Configuration > Thèmes, ouvrir le menu d'actions (⋯) à la fin de la ligne du thème et cliquer sur Copier, ou
• Ouvrir le thème dans l'éditeur de thème et cliquer sur Copier dans la barre d'outils.

Saisissez un nom pour le nouveau thème. L'éditeur de thème ouvre ensuite votre nouveau thème.

Emplacement de stockage des thèmes

• Thèmes de base : themes/survey/ dans votre installation de LimeSurvey.
• Thèmes utilisateur (thèmes étendus, émis ou importés) : upload/themes/survey/.

Vous pouvez également modifier directement les fichiers d'un thème utilisateur sur le serveur avec votre propre éditeur. Veillez ensuite à ce que le serveur web puisse toujours lire et écrire les fichiers, afin de pouvoir continuer à utiliser aussi l'éditeur de thème.

L'éditeur de thème

Pour ouvrir l'éditeur de thème, allez à Configuration > Thèmes, ouvrez le menu d'actions (⋯) à la fin de la ligne du thème et cliquez sur Éditeur de thème.

Si vous ouvrez un thème de base, une remarque vous indique qu'il s'agit d'un thème standard et propose un lien pour l'étendre. Vous pouvez consulter ses fichiers et l'aperçu, mais vous ne pouvez pas sauvegarder les changements.

Barre d'outils

• Exporter : télécharge le thème sous forme de fichier ZIP.
• Copier : crée un nouveau thème qui hérite de celui-ci (voir ci-dessus).
• Renommer : renomme le thème. Disponible uniquement pour les thèmes utilisateur.
• Supprimer : supprime le thème. Vous ne pouvez pas supprimer le thème défini comme thème par défaut.
• Thème : bascule l'éditeur de thème vers un autre thème.
• Écran : sélectionne la page du questionnaire affichée dans l'aperçu et les fichiers listés pour l'édition. Les écrans sont : Question, Liste des questionnaires, Bienvenue, Terminé, Évaluations, Erreur, Effacer tout, Charger, Sauvegarder, Inscription, Imprimer les réponses, Statistiques publiques, PDF, Quotas dépassés, Navigation et Participant.

Modifier les fichiers

Les panneaux de droite listent les fichiers utilisés par l'écran sélectionné :

• Fichiers des différents écrans : les modèles Twig qui construisent la page.
• Fichiers JavaScript
• Fichiers CSS
• Autres fichiers : images, polices et tout autre fichier du thème.

Cliquez sur un nom de fichier pour l'ouvrir dans l'éditeur. Les fichiers marqués hérité proviennent du thème parent. Vous pouvez tout de même modifier un fichier hérité : le bouton sous l'éditeur indique alors Copier vers le modèle en cours et sauvegarder les changements, et la sauvegarde copie le fichier dans votre thème avec vos modifications. À partir de là, votre copie est utilisée à la place du fichier du parent.

Les fichiers qui appartiennent à votre thème disposent d'un bouton Réinitialiser. Réinitialiser supprime votre copie, de sorte que le fichier du thème parent est de nouveau utilisé.

Envoyer des fichiers

Utilisez le champ d'envoi en bas du panneau Autres fichiers pour ajouter des images, des polices ou d'autres fichiers à votre thème. Les fichiers envoyés sont stockés dans le dossier files/ du thème. Par défaut, vous pouvez envoyer des images (gif, ico, jpg, jpeg, png) et ces types de fichiers : css, js, map, json, eot, otf, ttf, woff, woff2, txt, md, xml, twig, lss, lsa, lsq et lsg. Votre administrateur peut modifier ces listes avec les paramètres allowedthemeimageformats et allowedthemeuploads de config.php.

Pour afficher une image envoyée dans un fichier Twig, utilisez la fonction image() :

{{ image('./files/myfile.png', 'Alternative text for the picture', {"class": "myclass"}) }}

Dans les fichiers CSS, faites référence aux fichiers envoyés avec un chemin relatif au dossier css, par exemple url('../files/background.jpg').

Aperçu

Sous l'éditeur, un aperçu affiche l'écran sélectionné avec un contenu d'exemple. Utilisez les boutons Mobile, 640x480, 800x600, 1024x768 et Complet pour vérifier la page à différentes tailles d'écran.

L'aperçu utilise des données d'exemple et peut ne pas afficher chaque style exactement comme dans un questionnaire réel. Vérifiez toujours aussi vos modifications dans un aperçu de questionnaire réel.

Importer et exporter des thèmes

• Pour déplacer un thème vers une autre installation de LimeSurvey, cliquez sur Exporter dans la barre d'outils de l'éditeur de thème. Le thème est alors téléchargé sous forme de fichier ZIP.
• Pour installer un thème à partir d'un fichier ZIP, allez dans Configuration > Thèmes et cliquez sur Envoyer et installer.

Structure d'un thème

Dossier du thème

Un dossier de thème contient :

• config.xml : Le manifeste du thème : nom, thème parent, fichiers CSS et JavaScript, options de thème et écrans affichés dans l'éditeur de thème.
• views/ : Les modèles Twig. layout_global.twig est la mise en page principale de la plupart des pages du questionnaire. D'autres mises en page sont utilisées pour des pages spéciales, par exemple layout_survey_list.twig pour la liste publique des questionnaires et layout_errors.twig pour les pages d'erreur. Le dossier views/subviews/ contient les modèles plus petits inclus par les mises en page.
• css/ et scripts/ : Les fichiers CSS et JavaScript du thème.
• files/ : Les images et autres fichiers utilisés par le thème.
• options/ : La page des options de thème.

Modèles Twig

Les modèles reçoivent les données du questionnaire dans la variable aSurveyInfo. Pour voir tout ce qu'elle contient, activez le mode débogage dans application/config/config.php et ajoutez cette ligne à la fin de l'élément body dans layout_global.twig :

{{ dump(aSurveyInfo) }}

Pour connaître les fonctions utilisables dans les modèles, consultez Fonctions Twig disponibles. Pour des raisons de sécurité, les modèles s'exécutent dans un bac à sable : seules ces fonctions sont donc disponibles.

config.xml

La section <files> liste les fichiers CSS et JavaScript chargés sur les pages du questionnaire :

• <add> ajoute un fichier. Si le thème parent possède déjà un fichier du même nom, votre fichier le remplace.
• <remove> empêche le chargement d'un fichier du thème parent.

Vous n'avez pas besoin de lister à nouveau les fichiers du thème parent : ils sont chargés de toute façon.

LimeSurvey lit config.xml lors de l'installation d'un thème et enregistre les paramètres dans la base de données. Après avoir modifié le fichier config.xml d'un thème installé, allez dans Configuration > Thèmes, ouvrez le menu d'actions (⋯) du thème et cliquez sur Réinitialiser pour recharger le fichier.

Ajouter votre propre CSS et JavaScript

Chaque thème de base possède deux fichiers réservés à votre propre code :

• css/custom.css : Chargé après tous les autres fichiers CSS, ses règles remplacent donc les styles du thème.
• scripts/custom.js : Chargé après le JavaScript propre au thème.

Lorsque vous étendez un thème, ce sont les fichiers à modifier. Ajoutez votre CSS dans custom.css plutôt que de modifier les fichiers CSS principaux du thème, afin que votre thème continue de recevoir les mises à jour du thème parent.

Pour ajouter d'autres fichiers, envoyez-les et listez-les dans la section <files> du fichier config.xml de votre thème. Utilisez un nom de fichier qui n'existe pas dans le thème parent, sinon votre fichier remplace celui du parent :

<files>
    <css>
        <add>css/my-styles.css</add>
    </css>
    <js>
        <add>scripts/my-script.js</add>
    </js>
</files>

Les pages du questionnaire sont chargées par défaut avec Ajax : le navigateur ne recharge donc pas complètement la page lorsqu'un participant passe à la page suivante. Exécutez votre JavaScript à la fois lors du premier chargement de la page et lors de chaque chargement de page Ajax :

$(document).on('ready pjax:scriptcomplete', function () {
    // Your code here
});

Questions de style avec CSS

Tous les exemples de cette section sont à placer dans le fichier custom.css de votre thème.

Classes de page

Les éléments <html> et <body> portent des classes que vous pouvez utiliser pour styliser des pages entières :

• html : Le code de langue (par exemple en) et le sens du texte (dir-ltr ou dir-rtl).
• body : Le nom du thème et de chaque thème parent (par exemple fruity_twentythree), la police (par exemple font-ibm-sans), la langue (par exemple lang-en), et brand-logo lorsque le logo est affiché.

Classes du conteneur de question

Chaque question est encapsulée dans un élément portant la classe question-container. Il porte également :

• La classe du type de question (voir le tableau ci-dessous).
• mandatory : La question est obligatoire ou obligatoire souple.
• input-error : La réponse n'a pas passé la validation, ou une question obligatoire n'a pas reçu de réponse.
• missing : La question comporte encore des parties sans réponse et le participant l'a déjà dépassée.
• ls-hidden et ls-irrelevant : La question est cachée par sa condition.
• ls-hidden-attribute : La question est cachée par son paramètre « Toujours cacher cette question ».
• Toutes les classes saisies dans le paramètre Classe(s) CSS de la question (sous Affichage). Utilisez-le pour styliser des questions individuelles.

Par exemple, une question Liste (Boutons radio) obligatoire qui n'a pas reçu de réponse :

<div id="question123" class="row list-radio mandatory input-error question-container">
    ...
</div>

Classes des types de question

Type de question	Classe	Code du type
5 boutons radio	.choice-5-pt-radio	5
Tableau	.array-flexible-row	F
Tableau (5 boutons radio)	.array-5-pt	A
Tableau (10 boutons radio)	.array-10-pt	B
Tableau (Augmenter, Sans changement, Diminuer)	.array-increase-same-decrease	E
Tableau (Nombres)	.array-multi-flexi	:
Tableau (Textes)	.array-multi-flexi-text	;
Tableau (Oui/Indifférent/Non)	.array-yes-uncertain-no	C
Tableau en colonnes	.array-flexible-column	H
Tableau double échelle	.array-flexible-dual-scale	1
Date/Heure	.date	D
Équation	.equation	*
Émission de fichier	.upload-files	|
Genre	.gender	G
Zone de texte très long	.text-huge	U
Changement de langue	.language	I
Liste (Menu déroulant)	.list-dropdown	!
Liste (Boutons radio)	.list-radio	L
Liste avec commentaire	.list-with-comment	O
Zone de texte long	.text-long	T
Choix multiples	.multiple-opt	M
Choix multiples avec commentaires	.multiple-opt-comments	P
Multiples entrées numériques	.numeric-multi	K
Multiples zones de texte court	.multiple-short-txt	Q
Entrée numérique	.numeric	N
Classement	.ranking	R
Zone de texte court	.text-short	S
Affichage de texte	.boilerplate	X
Oui/Non	.yes-no	Y

Classes pour les parties d'une question

À l'intérieur du conteneur de question, la zone de réponse utilise ces classes. Certaines dépendent des paramètres d'affichage de la question : par exemple, Tableau (Nombres) utilise d'autres classes lorsqu'il affiche des cases à cocher au lieu de menus déroulants.

Classe	Utilisée pour	Utilisée par (exemples)
.ls-answers	L'élément qui contient toutes les options de réponse	Tous les types de question
.answers-list	Une liste ou une ligne d'options de réponse	Liste (Boutons radio), Choix multiples, Classement, lignes de la plupart des tableaux
.subquestion-list, .questions-list	Une liste ou un tableau de sous-questions	Tableaux, Multiples zones de texte court, Multiples entrées numériques
.answer-item	Une option de réponse ou une saisie	Presque tous les types de question
.noanswer-item	L'option « Sans réponse »	Tableaux, 5 boutons radio, Liste avec commentaire
.question-item	Une sous-question qui est aussi une réponse	Choix multiples, Multiples zones de texte court, Multiples entrées numériques
.radio-list	Une liste ou une ligne de boutons radio	Liste (Boutons radio), 5 boutons radio, Liste avec commentaire, lignes des tableaux à boutons radio
.radio-array	Un tableau de boutons radio	Tableau, Tableau (5 boutons radio), Tableau (10 boutons radio), Tableau (Augmenter, Sans changement, Diminuer), Tableau (Oui/Indifférent/Non)
.radio-item	Un bouton radio avec son libellé	Liste (Boutons radio), 5 boutons radio, Liste avec commentaire, tableaux à boutons radio
.checkbox-list	Une liste de cases à cocher	Choix multiples, Choix multiples avec commentaires
.checkbox-array	Un tableau de cases à cocher	Tableau (Nombres) avec utilisation de cases à cocher
.checkbox-item	Une case à cocher avec son libellé	Choix multiples, Choix multiples avec commentaires, Tableau (Nombres) avec utilisation de cases à cocher
.checkbox-text-item	Une case à cocher avec un champ de texte	Choix multiples avec commentaires
.comment-item	Le champ de commentaire à côté d'une case à cocher	Choix multiples avec commentaires
.text-list	Une liste de saisies de texte	Multiples zones de texte court, Multiples entrées numériques
.text-item	Une saisie de texte	Zones de texte court, long et très long, Multiples zones de texte court, Tableau (Textes)
.number-list, .numeric-item	Saisies numériques	Multiples entrées numériques, Entrée numérique
.number-array	Un tableau de saisies numériques	Tableau (Nombres), Tableau (Textes)
.text-array	Un tableau de saisies de texte	Tableau (Textes), Tableau (Nombres)
.dropdown-array, .dropdown-list, .dropdown-item	Tableaux, lignes et cellules avec menus déroulants	Tableau (Nombres), Tableau double échelle avec menus déroulants
.date-item	La saisie de date	Date/Heure
.upload-item	La zone d'envoi de fichiers	Émission de fichier
.answertext	Le texte de la sous-question dans une ligne de tableau	Tableaux
.col-answers	La colonne des textes de sous-questions	Tableaux
.ls-heading	La ligne d'en-tête avec les options de réponse	Tableaux
.ls-odd, .ls-even	Lignes alternées	Tableaux
.ls-label-xs-visibility	Un libellé visible uniquement sur les petits écrans et pour les lecteurs d'écran	Cellules des tableaux
.ls-input-group-extra	Le préfixe ou le suffixe d'une saisie	Zone de texte court, Entrée numérique, Multiples zones de texte court, Multiples entrées numériques
.ls-js-hidden	Caché lorsque JavaScript est actif	Tableau double échelle, Liste (Boutons radio)
.ls-no-js-hidden	Caché lorsque JavaScript n'est pas actif	Classement
.ls-js-hidden-sr	Caché lorsque JavaScript est actif, mais toujours lu par les lecteurs d'écran	Classement

Dans Liste (Boutons radio), l'option « Sans réponse » a la classe no-anwser-item (avec cette orthographe) au lieu de noanswer-item.

Par exemple, voici le HTML des réponses d'une question Liste (Boutons radio) :

<ul class="ls-answers answers-list radio-list list-unstyled" role="radiogroup">
    <li id="javatbdQ123_S456" class="answer-item radio-item">
        <input type="radio" value="A" name="Q123" id="answerQ123A">
        <label for="answerQ123A" class="control-label radio-label">Option A</label>
    </li>
    ...
</ul>

Classes de validation et d’astuces

Les astuces de validation (comme « Veuillez sélectionner une réponse ci-dessous » ou « Veuillez saisir un nombre entre 1 et 10 ») ont toujours la classe ls-em-tip. Pendant que le participant répond, LimeSurvey ajoute ls-em-success lorsque la règle de l’astuce est respectée et ls-em-error lorsqu’elle ne l’est pas, ce qui vous permet de styliser différemment les deux états. Les astuces masquées avec le paramètre Cacher l’aide de la question reçoivent la classe hide-tip.

Chaque astuce possède également une classe correspondant à son type :

Classe	Astuce
.em_default	L’astuce par défaut du type de question (par exemple « Veuillez sélectionner une réponse ci-dessous »)
.em_num_answers	Nombre minimum ou maximum de réponses
.em_value_range	Valeur minimum ou maximum
.em_sum_range	Somme minimum ou maximum des valeurs
.em_sum_equals	Les valeurs doivent totaliser une somme donnée
.em_value_integer	Seuls les nombres entiers sont autorisés
.em_numbers_only	Seuls les nombres sont autorisés
.em_other_numbers_only	Seuls les nombres sont autorisés dans le champ « Autre »
.em_other_comment_mandatory	L’option « Autre » est sélectionnée mais son champ de texte est vide
.em_regex_validation	La réponse doit correspondre au modèle de validation
.em_q_fn_validation	L’équation de validation de question
.em_sq_fn_validation	L’équation de validation des sous-questions

Langues s’écrivant de droite à gauche (RTL)

Pour les langues s’écrivant de droite à gauche, l’élément <html> possède la classe dir-rtl et les thèmes de base chargent une version RTL de leur fichier CSS principal. Utilisez .dir-rtl dans votre CSS pour les règles qui ne s’appliquent qu’aux langues de droite à gauche.

Trucs et astuces

Ces exemples sont à placer dans custom.css (ou dans un fichier Twig, lorsque c’est indiqué) d’un thème que vous avez étendu à partir d’un thème de base. Dans les exemples, remplacez #c0392b par votre propre couleur.

Changer la couleur des boutons radio et des cases à cocher

Pour utiliser l’une des couleurs fournies avec Fruity TwentyThree, sélectionnez une Couleur du thème dans les options de thème. Les options de thème vous permettent également de choisir une autre Icône des cases à cocher.

Pour toute autre couleur, ajoutez du CSS à custom.css. Les thèmes de base dessinent leurs propres boutons radio et cases à cocher au lieu d’utiliser ceux du navigateur par défaut ; changer la couleur revient donc à modifier ces éléments dessinés.

Fruity TwentyThree :

.radio-item input[type=radio]:checked + label::before,
.checkbox-item input[type=checkbox]:checked + label::before {
    border-color: #c0392b;
}
.radio-item input[type=radio]:checked + label::after {
    background-color: #c0392b;
}
.checkbox-item input[type=checkbox]:checked + label::after {
    color: #c0392b;
}
/* The text of the selected answer */
.radio-item input[type=radio]:checked + label,
.checkbox-item input[type=checkbox]:checked + label {
    color: #c0392b;
}

Bootstrap Vanilla, Fruity et Bootswatch :

.radio-item input[type=radio]:checked + label::after {
    background-color: #c0392b;
}
.checkbox-item input[type=checkbox]:checked + label::after {
    background-color: #c0392b;
    border-color: #c0392b;
    color: #ffffff;
}

Conservez un contraste suffisant entre la couleur et l’arrière-plan, afin que les participants malvoyants puissent toujours voir quelles réponses sont sélectionnées.

Agrandir les boutons radio et les cases à cocher

Des boutons radio et des cases à cocher plus grands sont plus faciles à toucher sur les téléphones et les tablettes. Cela fonctionne dans tous les thèmes de base :

.radio-item label::before,
.radio-item label::after,
.checkbox-item label::before,
.checkbox-item label::after {
    scale: 1.3;
}

Dans Fruity TwentyThree, ajoutez également un peu d’espace entre les boutons radio et le texte de la réponse :

.radio-item label {
    padding-left: 14px;
}

Les valeurs jusqu’à environ 1,4 fonctionnent sans autre modification. Avec des valeurs plus grandes, les contrôles commencent à chevaucher le texte de la réponse et les bords des lignes de tableau sur les petits écrans ; vous devez donc aussi ajouter plus d’espace autour d’eux.

Changer la couleur de la barre de progression

.progress-bar {
    background-color: #c0392b;
}

Afficher du contenu dans une seule langue

L’élément <body> possède une classe indiquant la langue actuelle, comme lang-en ou lang-fr. Vous pouvez l’utiliser pour afficher un contenu différent selon la langue, par exemple une ligne d’aide dans le pied de page. Ajoutez le texte de chaque langue dans un fichier Twig de votre thème, par exemple subviews/footer/footer.twig :

<div class="help-fr" lang="fr">Pour de l'aide, appelez le 000000</div>
<div class="help-en" lang="en">For help, please call 000000</div>

Masquez ensuite le texte des autres langues dans custom.css :

body:not(.lang-fr) .help-fr,
body:not(.lang-en) .help-en {
    display: none;
}

Utiliser un logo différent par questionnaire

Vous n’avez pas besoin d’un thème distinct pour chaque logo. Les options de thème peuvent être définies pour un seul questionnaire : ouvrez le questionnaire, cliquez sur Options de thème dans le menu Paramètres du questionnaire et sélectionnez un autre Fichier du logo. Voir Options de thème.

Afficher un favicon personnalisé

Un favicon est la petite icône affichée dans l’onglet du navigateur et dans les favoris. Les thèmes de base affichent le fichier files/favicon.ico du thème. Pour utiliser votre propre icône, nommez-la favicon.ico et envoyez-la dans le panneau Autres fichiers de votre thème étendu. Elle remplace l’icône du thème parent.

Centrer le logo dans Fruity TwentyThree

Activez l’option Logo dans les options de thème, puis ajoutez ceci à custom.css :

#survey-nav .container-fluid {
    position: relative;
}
#survey-nav .logo-container {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}

Ajouter votre propre logo à la liste publique des questionnaires

La liste publique des questionnaires affiche par défaut le logo LimeSurvey. Pour afficher votre propre logo :

1. Étendez Fruity TwentyThree et ouvrez votre thème dans l’éditeur de thème.
2. Envoyez votre logo dans le panneau Autres fichiers.
3. Sélectionnez l’écran Liste des questionnaires et ouvrez layout_survey_list.twig.
4. Trouvez le <div> qui contient {{ include('./ls_logo_svg.twig') }}. Remplacez ce <div> en entier, y compris la ligne d’inclusion, par le code indiqué sous ces étapes.
5. Cliquez sur Copier vers le modèle en cours et sauvegarder les changements.
6. Allez à Configuration > Paramètres généraux > Général et sélectionnez votre thème comme Thème de la liste publique des questionnaires et des pages d’erreur.

Utilisez le nom de votre fichier envoyé, et le nom de votre organisation comme texte alternatif :

{{ image('./files/mylogo.png', 'Name of your organisation', {"class": "img-fluid mx-auto d-block"}) }}

Ajouter une ligne de séparation aux tableaux double échelle

Pour tracer une ligne verticale entre les deux échelles d'une question de type Tableau double échelle :

.array-flexible-dual-scale .header_separator,
.array-flexible-dual-scale .dual_scale_separator {
    border-right: 1px solid #00a8e1;
}

JavaScript dans les questions

Pour exécuter du JavaScript sur toutes les pages de vos questionnaires, placez-le dans le fichier custom.js de votre thème (voir ci-dessus).

Vous pouvez également ajouter un script au texte d'une question ou d'un groupe. LimeSurvey supprime les scripts de ces textes, sauf si le filtre XSS est désactivé pour votre utilisateur. Le filtre ne s'applique jamais aux super-administrateurs. Pour les autres utilisateurs, l'option Filtrer le HTML contre le XSS doit être désactivée dans Configuration > Paramètres généraux > Sécurité. Ne le faites que si vous faites confiance à toutes les personnes pouvant modifier des questionnaires. Pour plus de détails et des exemples, consultez Workarounds: Manipulating a survey at runtime using Javascript.