Editor di modelli

Introduzione

Un tema dell'indagine controlla l'aspetto della sua indagine per i partecipanti: il layout della pagina, i colori, i caratteri, i loghi e lo stile di ogni domanda. I temi sono creati con template Twig, CSS e JavaScript e utilizzano Bootstrap 5 come framework CSS.

Molte modifiche comuni non richiedono alcun codice. Il logo, i colori, i caratteri e diverse impostazioni di visualizzazione possono essere modificati con le opzioni del tema. Utilizzi l'editor dei temi descritto in questa pagina quando desidera andare oltre: aggiungere il proprio CSS o JavaScript, modificare l'HTML di una pagina o caricare immagini e altri file per il suo tema.

LimeSurvey include questi temi dell'indagine principali:

• Fruity TwentyThree (fruity_twentythree): il tema predefinito.
• Bootstrap Vanilla (vanilla): un tema di base semplice per gli sviluppatori che desiderano creare il proprio tema basato su Bootstrap.
• Fruity (fruity) e Bootswatch (bootswatch): entrambi estendono Bootstrap Vanilla.

L'aspetto dei singoli tipi di domanda è controllato dai temi di domanda, non dal tema dell'indagine. Per modificare l'HTML di un tipo di domanda, crei un tema delle domande.

Prima di iniziare

Per utilizzare l'editor dei temi, ha bisogno del permesso globale Temi (vedere permessi globali) oppure deve essere un super amministratore. Per estendere un tema serve il diritto Creare, per salvare le modifiche serve Aggiorna e per eliminare un tema o ripristinare un file serve Eliminare.

  Un tema con errori può rendere inutilizzabile ogni indagine che lo utilizza. Provi le sue modifiche con un'anteprima dell'indagine prima di utilizzare il tema in un'indagine attiva.

I temi principali non possono essere modificati: estenderli

I temi principali vengono aggiornati insieme a LimeSurvey, quindi non possono essere modificati direttamente. Per personalizzarne uno, lo estenda. L'estensione crea un nuovo tema dell'utente che eredita tutto dal tema genitore. Il suo tema contiene solo i file che modifica; tutto il resto viene preso dal tema genitore. In questo modo il suo tema continua a ricevere le correzioni di bug e i miglioramenti quando LimeSurvey aggiorna il tema genitore.

Per estendere un tema, può:

• andare su Configurazione > Temi, aprire il menù delle azioni (⋯) alla fine della riga del tema e fare clic su Estendere, oppure
• aprire il tema nell'editor dei temi e fare clic su Estendere nella barra degli strumenti.

Inserisca un nome per il nuovo tema. L'editor dei temi aprirà quindi il suo nuovo tema.

Dove sono archiviati i temi

• Temi principali: themes/survey/ nella sua installazione di LimeSurvey.
• Temi dell'utente (temi estesi, caricati o importati): upload/themes/survey/.

Può anche modificare i file di un tema dell'utente direttamente sul server con il suo editor. Si assicuri che il server web possa ancora leggere e scrivere i file in seguito, in modo da poter continuare a utilizzare anche l'editor dei temi.

L'editor dei temi

Per aprire l'editor dei temi, vada su Configurazione > Temi, apra il menù delle azioni (⋯) alla fine della riga del tema e faccia clic su Editor dei temi.

Se apre un tema principale, una nota le segnala che si tratta di un tema standard e offre un link per estenderlo. Può consultarne i file e l'anteprima, ma non può salvare le modifiche.

Barra degli strumenti

• Esportare: scarica il tema come file ZIP.
• Estendere: crea un nuovo tema che eredita da questo (vedere sopra).
• Rinominare: rinomina il tema. Disponibile solo per i temi dell'utente.
• Eliminare: elimina il tema. Non è possibile eliminare il tema impostato come tema predefinito.
• Tema: passa l'editor dei temi a un altro tema.
• Finestra: seleziona quale pagina dell'indagine viene mostrata nell'anteprima e quali file sono elencati per la modifica. Le finestre sono: Domanda, Elenco delle indagini, Benvenuto, Completato, Valutazioni, Errore, Eliminazione totale, Carica, Salva, Registrazione, Stampa delle risposte, Statistiche pubbliche, PDF, Quote superate, Navigazione e Partecipante.

Modifica dei file

I pannelli a destra elencano i file utilizzati dalla finestra selezionata:

• Schermata di parte dei files: i template Twig che costruiscono la pagina.
• File JavaScript
• File CSS
• Altri files: immagini, caratteri e qualsiasi altro file del tema.

Faccia clic sul nome di un file per aprirlo nell'editor. I file contrassegnati come ereditato provengono dal tema genitore. Può comunque modificare un file ereditato: il pulsante sotto l'editor riporta allora Copiare nel tema locale e salvare le modifiche e il salvataggio copia il file nel suo tema con le sue modifiche. Da quel momento viene utilizzata la sua copia al posto del file del genitore.

I file che appartengono al suo tema hanno un pulsante Reset. Il reset elimina la sua copia, quindi viene utilizzato di nuovo il file del tema genitore.

Caricamento dei file

Utilizzi il campo di caricamento in fondo al pannello Altri files per aggiungere immagini, caratteri o altri file al suo tema. I file caricati vengono archiviati nella cartella files/ del tema. Per impostazione predefinita può caricare immagini (gif, ico, jpg, jpeg, png) e questi tipi di file: css, js, map, json, eot, otf, ttf, woff, woff2, txt, md, xml, twig, lss, lsa, lsq e lsg. Il suo amministratore può modificare questi elenchi con le impostazioni allowedthemeimageformats e allowedthemeuploads in config.php.

Per mostrare un'immagine caricata in un file Twig, utilizzi la funzione image():

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

Nei file CSS, faccia riferimento ai file caricati con un percorso relativo alla cartella css, ad esempio url('../files/background.jpg').

Anteprima

Sotto l'editor, un'anteprima mostra la finestra selezionata con contenuti di esempio. Utilizzi i pulsanti Mobile, 640x480, 800x600, 1024x768 e Completo per controllare la pagina con diverse dimensioni dello schermo.

L'anteprima utilizza dati di esempio e potrebbe non mostrare ogni stile esattamente come in una vera indagine. Controlli sempre le sue modifiche anche in un'anteprima dell'indagine reale.

Importare ed esportare i temi

• Per spostare un tema in un'altra installazione di LimeSurvey, fai clic su Esportare nella barra degli strumenti dell'editor dei temi. Il tema viene scaricato come file ZIP.
• Per installare un tema da un file ZIP, vai a Configurazione > Temi e fai clic su Carica e installa.

Come è strutturato un tema

Cartella del tema

La cartella di un tema contiene:

• config.xml: Il manifesto del tema: nome, tema padre, file CSS e JavaScript, opzioni del tema e schermate mostrate nell'editor dei temi.
• views/: I template Twig. layout_global.twig è il layout principale per la maggior parte delle pagine dell'indagine. Altri layout sono usati per pagine speciali, ad esempio layout_survey_list.twig per l'elenco pubblico delle indagini e layout_errors.twig per le pagine di errore. La cartella views/subviews/ contiene i template più piccoli inclusi dai layout.
• css/ e scripts/: I file CSS e JavaScript del tema.
• files/: Immagini e altri file usati dal tema.
• options/: La pagina delle opzioni del tema.

Template Twig

I template ricevono i dati dell'indagine nella variabile aSurveyInfo. Per vedere tutto ciò che contiene, attiva la modalità di debug in application/config/config.php e aggiungi questa riga alla fine dell'elemento body in layout_global.twig:

{{ dump(aSurveyInfo) }}

Per le funzioni che puoi usare nei template, consulta Funzioni Twig disponibili. Per motivi di sicurezza, i template vengono eseguiti in una sandbox, quindi sono disponibili solo queste funzioni.

config.xml

La sezione <files> elenca i file CSS e JavaScript caricati nelle pagine dell'indagine:

• <add> aggiunge un file. Se il tema padre contiene già un file con lo stesso nome, il tuo file lo sostituisce.
• <remove> impedisce il caricamento di un file del tema padre.

Non è necessario elencare di nuovo i file del tema padre: vengono caricati comunque.

LimeSurvey legge config.xml quando un tema viene installato e salva le impostazioni nel database. Dopo aver modificato config.xml di un tema installato, vai a Configurazione > Temi, apri il menù delle azioni (⋯) del tema e fai clic su Reset per ricaricare il file.

Aggiungere il proprio CSS e JavaScript

Ogni tema principale ha due file riservati al tuo codice:

• css/custom.css: Caricato dopo tutti gli altri file CSS, quindi le sue regole sovrascrivono gli stili del tema.
• scripts/custom.js: Caricato dopo il JavaScript del tema.

Quando estendi un tema, questi sono i file da modificare. Aggiungi il tuo CSS a custom.css invece di modificare i file CSS principali del tema, così il tuo tema continua a ricevere gli aggiornamenti del tema padre.

Per aggiungere altri file, caricali ed elencali nella sezione <files> del config.xml del tuo tema. Usa un nome di file che non esista nel tema padre, altrimenti il tuo file sostituisce quello del tema padre:

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

Per impostazione predefinita le pagine dell'indagine vengono caricate con Ajax, quindi il browser non ricarica l'intera pagina quando un partecipante passa alla pagina successiva. Esegui il tuo JavaScript sia al primo caricamento della pagina sia a ogni caricamento di pagina con Ajax:

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

Domande di stile con i CSS

Tutti gli esempi di questa sezione vanno inseriti nel file custom.css del tuo tema.

Classi della pagina

Gli elementi <html> e <body> hanno classi che puoi usare per applicare stili a intere pagine:

• html: Il codice della lingua (ad esempio en) e la direzione del testo (dir-ltr o dir-rtl).
• body: Il nome del tema e di ciascun tema padre (ad esempio fruity_twentythree), il font (ad esempio font-ibm-sans), la lingua (ad esempio lang-en) e brand-logo quando il logo è visualizzato.

Classi del contenitore della domanda

Ogni domanda è racchiusa in un elemento con la classe question-container. L'elemento ha inoltre:

• La classe del tipo di domanda (vedi la tabella seguente).
• mandatory: La domanda è obbligatoria o obbligatoria in modo flessibile.
• input-error: La risposta non ha superato la convalida oppure una domanda obbligatoria non ha ricevuto risposta.
• missing: La domanda ha ancora parti senza risposta e il partecipante l'ha già superata.
• ls-hidden e ls-irrelevant: La domanda è nascosta dalla sua condizione.
• ls-hidden-attribute: La domanda è nascosta dall'impostazione "Nascondere sempre questa domanda".
• Eventuali classi inserite nell'impostazione Classe/i CSS della domanda (in Visualizzare). Usala per applicare stili a singole domande.

Ad esempio, una domanda Lista (Radio Button) obbligatoria che non ha ricevuto risposta:

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

Classi dei tipi di domanda

Tipo di domanda	Classe	Codice del tipo
Scelta punteggio da 1 a 5	.choice-5-pt-radio	5
Array	.array-flexible-row	F
Array (punteggio 1-5)	.array-5-pt	A
Array (punteggio 1-10)	.array-10-pt	B
Array (Aumenta, Uguale, Diminuisce)	.array-increase-same-decrease	E
Array (Numeri)	.array-multi-flexi	:
Array (Testi)	.array-multi-flexi-text	;
Array (Sì/Non so/No)	.array-yes-uncertain-no	C
Array per colonna	.array-flexible-column	H
Array con doppia scala	.array-flexible-dual-scale	1
Data/ora	.date	D
Equazione	.equation	*
Caricamento file	.upload-files	|
Genere	.gender	G
Testo libero maxi	.text-huge	U
Cambio lingua	.language	I
Lista (Menu Dropdown)	.list-dropdown	!
Lista (Radio Button)	.list-radio	L
Lista con commento	.list-with-comment	O
Testo lungo	.text-long	T
Scelta multipla	.multiple-opt	M
Scelta multipla con commenti	.multiple-opt-comments	P
Inserimento numerico multiplo	.numeric-multi	K
Testo breve multiplo	.multiple-short-txt	Q
Inserimento numerico	.numeric	N
Classifica	.ranking	R
Testo breve	.text-short	S
Visualizzazione testo	.boilerplate	X
Sì/No	.yes-no	Y

Classi per le parti di una domanda

All'interno del contenitore della domanda, l'area delle risposte usa queste classi. Alcune dipendono dalle impostazioni di visualizzazione della domanda: ad esempio, Array (Numeri) usa classi diverse quando mostra checkbox invece di menu a discesa.

Classe	Usata per	Usata da (esempi)
.ls-answers	L'elemento che contiene tutte le opzioni di risposta	Tutti i tipi di domanda
.answers-list	Un elenco o una riga di opzioni di risposta	Lista (Radio Button), Scelta multipla, Classifica, righe della maggior parte degli array
.subquestion-list, .questions-list	Un elenco o una tabella di sottodomande	Array, Testo breve multiplo, Inserimento numerico multiplo
.answer-item	Un'opzione di risposta o un campo di inserimento	Quasi tutti i tipi di domanda
.noanswer-item	L'opzione "Nessuna risposta"	Array, Scelta punteggio da 1 a 5, Lista con commento
.question-item	Una sottodomanda che è anche una risposta	Scelta multipla, Testo breve multiplo, Inserimento numerico multiplo
.radio-list	Un elenco o una riga di radio button	Lista (Radio Button), Scelta punteggio da 1 a 5, Lista con commento, righe degli array con radio button
.radio-array	Una tabella di radio button	Array, Array (punteggio 1-5), Array (punteggio 1-10), Array (Aumenta, Uguale, Diminuisce), Array (Sì/Non so/No)
.radio-item	Un radio button con la sua etichetta	Lista (Radio Button), Scelta punteggio da 1 a 5, Lista con commento, array con radio button
.checkbox-list	Un elenco di checkbox	Scelta multipla, Scelta multipla con commenti
.checkbox-array	Una tabella di checkbox	Array (Numeri) con Layout del checkbox
.checkbox-item	Un checkbox con la sua etichetta	Scelta multipla, Scelta multipla con commenti, Array (Numeri) con Layout del checkbox
.checkbox-text-item	Un checkbox con un campo di testo	Scelta multipla con commenti
.comment-item	Il campo del commento accanto a un checkbox	Scelta multipla con commenti
.text-list	Un elenco di campi di testo	Testo breve multiplo, Inserimento numerico multiplo
.text-item	Un campo di testo	Testo breve, testo lungo e testo libero maxi, Testo breve multiplo, Array (Testi)
.number-list, .numeric-item	Campi numerici	Inserimento numerico multiplo, Inserimento numerico
.number-array	Una tabella di campi numerici	Array (Numeri), Array (Testi)
.text-array	Una tabella di campi di testo	Array (Testi), Array (Numeri)
.dropdown-array, .dropdown-list, .dropdown-item	Tabelle, righe e celle con menu a discesa	Array (Numeri), Array con doppia scala con menu a discesa
.date-item	Il campo della data	Data/ora
.upload-item	L'area di caricamento file	Caricamento file
.answertext	Il testo della sottodomanda in una riga di un array	Array
.col-answers	La colonna dei testi delle sottodomande	Array
.ls-heading	La riga di intestazione con le opzioni di risposta	Array
.ls-odd, .ls-even	Righe alternate	Array
.ls-label-xs-visibility	Un'etichetta visibile solo sugli schermi piccoli e per gli screen reader	Celle degli array
.ls-input-group-extra	Il prefisso o il suffisso di un campo di inserimento	Testo breve, Inserimento numerico, Testo breve multiplo, Inserimento numerico multiplo
.ls-js-hidden	Nascosto quando JavaScript è attivo	Array con doppia scala, Lista (Radio Button)
.ls-no-js-hidden	Nascosto quando JavaScript non è attivo	Classifica
.ls-js-hidden-sr	Nascosto quando JavaScript è attivo, ma letto comunque dagli screen reader	Classifica

In Lista (Radio Button), l'opzione "Nessuna risposta" ha la classe no-anwser-item (con questa ortografia) invece di noanswer-item.

Ad esempio, questo è l'HTML delle risposte di una domanda Lista (Radio Button):

<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>

Classi di convalida e di suggerimento

I suggerimenti di convalida (come "Scegliere solo una delle seguenti voci" o "Inserisci un numero compreso tra 1 e 10") hanno sempre la classe ls-em-tip. Mentre il partecipante risponde, LimeSurvey aggiunge ls-em-success quando la regola del suggerimento è soddisfatta e ls-em-error quando non lo è, in modo da poter formattare i due stati in modo diverso. I suggerimenti nascosti con l'impostazione Nascondere suggerimenti della domanda ottengono la classe hide-tip.

Ogni suggerimento ha anche una classe per il proprio tipo:

Classe	Suggerimento
.em_default	Il suggerimento predefinito del tipo di domanda (ad esempio "Scegliere solo una delle seguenti voci")
.em_num_answers	Numero minimo o massimo di risposte
.em_value_range	Valore minimo o massimo
.em_sum_range	Somma minima o massima dei valori
.em_sum_equals	I valori devono dare come somma un totale stabilito
.em_value_integer	Sono consentiti solo numeri interi
.em_numbers_only	Sono consentiti solo numeri
.em_other_numbers_only	Nel campo "Altro" sono consentiti solo numeri
.em_other_comment_mandatory	L'opzione "Altro" è selezionata ma il relativo campo di testo è vuoto
.em_regex_validation	La risposta deve corrispondere al modello di convalida
.em_q_fn_validation	L'equazione di convalida della domanda
.em_sq_fn_validation	L'equazione di convalida della sotto-domanda

Lingue da destra a sinistra (RTL)

Per le lingue da destra a sinistra, l'elemento <html> ha la classe dir-rtl e i temi principali caricano una versione RTL del loro file CSS principale. Usa .dir-rtl nel tuo CSS per le regole che valgono solo per le lingue da destra a sinistra.

Suggerimenti e trucchi

Queste ricette vanno inserite in custom.css (o in un file Twig, dove indicato) di un tema che hai esteso da un tema principale. Negli esempi, sostituisci #c0392b con il tuo colore.

Cambiare il colore dei pulsanti di opzione e delle caselle di controllo

Per usare uno dei colori forniti con Fruity TwentyThree, seleziona un Colore del tema nelle opzioni del tema. Le opzioni del tema permettono anche di scegliere un'altra Icona del check.

Per qualsiasi altro colore, aggiungi del CSS a custom.css. I temi principali disegnano i propri pulsanti di opzione e le proprie caselle di controllo invece di usare quelli predefiniti del browser, quindi cambiare il colore significa modificare questi elementi disegnati.

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 e 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;
}

Mantieni un contrasto sufficiente tra il colore e lo sfondo, in modo che i partecipanti con ridotte capacità visive possano comunque vedere quali risposte sono selezionate.

Ingrandire i pulsanti di opzione e le caselle di controllo

Pulsanti di opzione e caselle di controllo più grandi sono più facili da toccare su telefoni e tablet. Funziona in tutti i temi principali:

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

In Fruity TwentyThree, aggiungi anche un po' di spazio tra i pulsanti di opzione e il testo della risposta:

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

Valori fino a circa 1.4 funzionano senza altre modifiche. Con valori maggiori, i controlli iniziano a sovrapporsi al testo della risposta e ai bordi delle righe degli array sugli schermi piccoli, quindi è necessario aggiungere più spazio intorno ad essi.

Cambiare il colore della barra di avanzamento

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

Mostrare un contenuto solo in una lingua

L'elemento <body> ha una classe con la lingua corrente, come lang-en o lang-fr. Puoi usarla per mostrare contenuti diversi per ogni lingua, ad esempio una riga di aiuto nel piè di pagina. Aggiungi il testo per ogni lingua a un file Twig del tuo tema, ad esempio 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>

Poi nascondi il testo delle altre lingue in custom.css:

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

Usare un logo diverso per ogni indagine

Non serve un tema separato per ogni logo. Le opzioni del tema possono essere impostate per una singola indagine: apri l'indagine, fai clic su Opzioni del tema nel menù Impostazioni di indagine e seleziona un altro File del logo. Vedi Opzioni del tema.

Visualizzare una favicon personalizzata

Una favicon è la piccola icona mostrata nella scheda del browser e nei segnalibri. I temi principali mostrano il file files/favicon.ico del tema. Per usare la tua icona, chiamala favicon.ico e caricala nel pannello Altri files del tuo tema esteso. Sostituirà l'icona del tema padre.

Centrare il logo in Fruity TwentyThree

Attiva il Logo nelle opzioni del tema, poi aggiungi questo a custom.css:

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

Aggiungere il proprio logo all'elenco pubblico delle indagini

Per impostazione predefinita, l'elenco pubblico delle indagini mostra il logo LimeSurvey. Per mostrare il tuo logo:

1. Estendi Fruity TwentyThree e apri il tuo tema nell'editor dei temi.
2. Carica il tuo logo nel pannello Altri files.
3. Seleziona la schermata Elenco delle indagini e apri layout_survey_list.twig.
4. Trova il <div> che contiene {{ include('./ls_logo_svg.twig') }}. Sostituisci l'intero <div>, compresa la riga include, con il codice mostrato sotto questi passaggi.
5. Fai clic su Copiare nel tema locale e salvare le modifiche.
6. Vai su Configurazione > Impostazioni generali > Generale e seleziona il tuo tema come Tema per l'elenco pubblico delle indagini e le pagine di errore.

Usa il nome del file che hai caricato e il nome della tua organizzazione come testo alternativo:

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

Modificare il popup di caricamento file

^{(New in 7.6.0 )} Il popup che si apre quando un partecipante carica file in una domanda di caricamento file è costruito a partire dal file Twig survey/questions/answer/file_upload/modal-container.twig. L'editor dei temi non elenca questo file. Per modificare il popup, ad esempio per aggiungere un testo di aiuto, copi il file da application/views/ della Sua installazione di LimeSurvey nella cartella views/ del Suo tema sul server (oppure nel file ZIP del tema prima di importarlo), mantenendo la struttura delle cartelle: views/survey/questions/answer/file_upload/modal-container.twig. Poi modifichi la copia. Anche un tema delle domande per la domanda di caricamento file può contenere una propria copia. Mantenga i campi di input nascosti e gli ID nel file, perché lo script di caricamento ne ha bisogno.

Aggiungere una linea di separazione agli array a doppia scala

Per disegnare una linea verticale tra le due scale di una domanda Array con doppia scala:

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

JavaScript nelle domande

Per eseguire JavaScript in tutte le pagine delle sue indagini, lo inserisca nel file custom.js del tema (vedere sopra).

È inoltre possibile aggiungere uno script al testo di una singola domanda o di un gruppo. LimeSurvey rimuove gli script da questi testi, a meno che il filtro XSS sia disattivato per il proprio utente. Il filtro non si applica mai ai superamministratori. Per gli altri utenti, l'opzione Filtro HTML per XSS deve essere disattivata in Configurazione > Impostazioni generali > Sicurezza. Lo faccia solo se si fida di tutti coloro che possono modificare le indagini. Per dettagli ed esempi, vedere Workarounds: Manipulating a survey at runtime using Javascript.