Actions

Editor di modelli

From LimeSurvey Manual

This page is a translated version of the page Theme editor and the translation is 100% complete.

Introduzione

LimeSurvey ha un sistema avanzato di temi e stili che fornisce agli sviluppatori un modo efficiente per personalizzare l'aspetto del sondaggio. Da LS3, il termine "modelli" è stato sostituito con il termine "temi". I temi permettono di controllare lo stile delle pagine di un sondaggio. Un amministratore del sondaggio può selezionare un tema predefinito che verrà utilizzato per ogni sondaggio per personalizzarlo ulteriormente. Temi viene fornito con opzioni che forniscono a un amministratore senza abilità di codifica un modo semplice per aggiungere un logo sulla pagina di benvenuto, cambiare i colori di sfondo, selezionare un carattere, ecc.


LimeSurvey viene fornito con 3 temi. Questi temi iniziali sono definiti dalle directory che si trovano nella directory "themes/survey/" dell'installazione di LimeSurvey. Ogni tema ha la sua directory. All'interno della directory principale di un tema troverai un file di configurazione in XML e numerose directory contenenti le viste temi (.twig), fogli di stile a cascata (.css), 'scripts, images ('.jpg o .png) e forse altri.


A partire da LimeSurvey 2.50, il motore del tema utilizza Bootstrap 3 come framework CSS. Poiché Bootstrap 3 è un framework standard, gli sviluppatori troveranno molta documentazione, tutorial e thread di forum su Internet.


A partire da LimeSurvey 3, il motore del tema utilizza Twig, quindi gli sviluppatori del tema possono cambiare la logica del rendering del sondaggio in modo facile e sicuro. Twig sostituisce il vecchio sistema di parole chiave sostitutive utilizzato nelle versioni precedenti. La logica che è stata utilizzata per generare l'HTML delle parole chiave è ora disponibile all'interno delle viste del tema.


Frammento dal tema vaniglia:

 <div class="{{ aSurveyInfo.class.answercontainer }} col-xs-12" {{ aSurveyInfo.attr.answercontainer }}> 
 {# NOTA: se desideri personalizzare il rendering della domanda, utilizza un tema di domanda #}
 {{ aDomanda.risposta | grezzo }}
</div>

I temi, essendo codice HTML e Twig, tendono a definire il posizionamento e il tipo di testo da visualizzare e simili caratteristiche strutturali della pagina. Spesso fanno riferimento o includono altri file. La maggior parte di essi fa riferimento a un comune file di fogli di stile a cascata (CSS) che definisce lo stile del carattere, il colore, la dimensione, lo sfondo e parametri simili comuni a tutte le pagine del sondaggio. I fogli di stile fanno riferimento a parametri HTML class che sono associati ai vari tipi di oggetti nel codice HTML. Ciò consente al foglio di stile di definire come visualizzare ciascuno dei molti tipi di testo o altri oggetti che possono apparire in più punti. Ci sono classi uniche per ogni tipo di domanda in LimeSurvey e quindi danno un controllo dettagliato sull'aspetto di ciascuna. Anche i file di immagine, come loghi o speciali costruttori di barre di avanzamento, possono essere referenziati nel file del tema. Infine, le parole chiave speciali tra parentesi graffe vengono sostituite con il testo definito nel sondaggio per ogni corrispondente di traduzione della lingua (ad esempio, il "Titolo del sondaggio" o il "Testo della domanda" per ciascuna lingua definita).

Se crei un nuovo modello personalizzato, ti preghiamo di pensare a contribuire aggiungendolo alla community LimeSurvey rendendolo disponibile anche agli altri. Con il tuo aiuto, possiamo far crescere la nostra collezione di template, indagini ed altri componendi aggiuntivi, per rendere LimeSurvey sempre migliore! Visita la nostra LimeSurvey template repository, dove puoi condividere i tuoi modelli.

Creazione di un nuovo tema

Per creare un nuovo template (o modificarne uno esistente) è necessario possederne la relativa l'autorizzazione come utente in LimeSurvey, così come l'autorizzazione per la manipolazione dei file contenuti nel sistema operativo dell'hosting in cui è installato LimeSurvey.

Nota di avvertimento: Se cambi tema, potresti anche influenzare tutti i sondaggi preesistenti dalla tua installazione di LimeSurvey. I temi sono una funzionalità avanzata che richiede esperienza e conoscenza dell'HTML.

La modalità preferibile per creare un nuovo template è di utilizzare i "Templete Editor" all'interno del menù di amministrazione. Alcuni preferiscono lavorare direttamente all'interno dei files template, utilizzando così il proprio editor di testo preferito invece dell'interfaccia web. In questo caso, utilizza comunque prima l'editore di modelli per creare tuo template. Questo creerà un nuovo modello di base con tutti i file di cui hai bisogno nella cartella LimeSurvey_web_root/upload/templates/your_new_template. Da qui puoi usare il tuo editor di testo per aggiustare manualmente i file del modello.

Nota sui permessi: sui sistemi unix/linux, questi file dei temi saranno di proprietà del gruppo e dell'utente su cui è in esecuzione il server Web (potrebbe essere "www" per alcuni sistemi). Quindi, assicurati di avere le autorizzazioni appropriate per modificare questi file, quando li salvi, assicurati che non cambino proprietà! In questo modo, puoi comunque utilizzare l'interfaccia Web di modifica del tema, se necessario.


Un certo numero di elementi 'pubblici' possono essere modificati da una serie di modelli. La prossima sezione fornisce una breve spiegazione di questi template.

Template:Nota

L'editori di modelli di LimeSurvey

Editor dei temi: Configurazione > Temi> Editor dei temi L'Editor dei temi è disponibile solo per gli utenti con il permesso Modelli e ai superamministratori.


  Attenzione : Un tema che non è costruito correttamente può rendere inutilizzabile un sondaggio (che utilizza il rispettivo modello).



L'editor di temi di LimeSurvey ti consente di modificare i contenuti dei tuoi temi online. Per avviare l'editor dei temi: fai clic su Temi nel menu Configurazione, quindi fai clic sul pulsante Editor dei temi accanto al tema che desideri modificare o estendere.



La schermata principale è simile a quella di amministrazione di un'indagine. Essa permette di selezionare il modello da modificare/visualizzare. Dopo averlo selezionato, puoi scegliere una tra le differenti pagine delle indagini pubbliche. Comparirà una lista dei file del template che costituiscono quella particolare pagina.



Sono disponibili le seguenti opzioni:


  • Crea: Ti permette di creare un nuovo modello. Per non ripartire da zero, viene copiato il template 'default'.
  • Importa: Permette di importare un template da un file ZIP.
  • Esporta : Consente di esportare il modello corrente in un file ZIP.
  • Copia: Consente di creare un nuovo modello copiando quello corrente.
  • Rinomina: Consente di modificare il nome del modello. Viene generalmente utilizzato dopo aver copiato o importato un modello.
  • Template: un elenco a discesa che mostra tutti i modelli disponibili che si trovano nell'installazione di LimeSurvey.
  • Schermata: un elenco a tendina che ti permette di scegliere quale particolare pagina del sondaggio di quel modello desideri visualizzare.
  • Torna al pannello di amministrazione.

Importa/Esporta/Copia un modello

Quando esporti un modello, verrà creato un archivio ZIP con tutti i tuoi file modello (file .pstpl, immagini, file css, ...). Puoi importare il file zip esportato in un'altra installazione di LimeSurvey utilizzando la funzione di importazione oppure puoi copiare manualmente l'archivio in un'altra installazione di LimeSurvey ed estrarlo nel corrispondente template directory lì.

Tuttavia, è meglio utilizzare le funzioni di importazione/esportazione/copia dei modelli di LimeSurvey nell'editor dei modelli.

Struttura della pagina / Utilizzo del modello

  • La pagina di benvenuto: startpage.pstpl, welcome.pstpl, privacy.pstpl, navigator.pstpl, endpage.pstpl
  • 'Le pagine delle domande:' startpage.pstpl, survey.pstpl, startgroup.pstpl, groupdescription.pstpl, question.pstpl, endgroup.pstpl, endpage.pstpl
  • The Final Page: startpage .pstpl, valutazione.pstpl, completato.pstpl, fine pagina.pstpl

File modello

I seguenti file modello sono usati per produrre il tuo sondaggio pubblico e devono esistere in ogni nuova cartella modello che crei:

  • startpage.pstpl: Produce l'inizio di ogni pagina html. Si inizia al "<head> " tag e non deve contenere il "<html> " tag. Questo 'vero inizio' di una pagina html standard è scritto dagli script. Assicurati che i tuoi file startpage.pstpl contengano un<body> etichetta. Anche se molti browser non richiedono una stretta aderenza agli standard HTML W3, lo script LimeSurvey deve trovare un tag per eseguire determinati elementi javascript. Non è comune vedere molte "parole chiave" utilizzate nel file startpage.pstpl. Tuttavia, potresti voler inserire {SURVEYNAME} nel titolo. Il file startpage.pstpl può contenere codice che termina nel file endpage.pstpl corrispondente. Ad esempio, puoi iniziare una tabella in questo file e chiuderla nel file endpage.pstpl. I file startpage.pstpl e endpage.pstpl avvolgono ogni possibile pagina utilizzata da LimeSurvey.
  • survey.pstpl: Questo modello è il secondo utilizzato nella maggior parte delle pagine e fornisce uno spazio per inserire il nome del sondaggio e descrizione. Questo modello non ha un corrispondente modello di 'chiusura', e successivamente dovresti chiudere tutti i tag aperti in questo file modello (es.: non lasciare una tabella aperta qui perché non c'è nessun altro posto dove chiuderla).
  • ' welcome.pstpl:' Questo modello viene utilizzato solo nella schermata di benvenuto (che si trova anche nella pagina principale per i sondaggi "tutto in uno"). Puoi usarlo per stampare il testo di benvenuto e altre informazioni che dovrebbero essere fornite nell'introduzione. Come il file 'survey.pstpl', non esiste un modello di 'chiusura' corrispondente, quindi anche tutti i tag aperti in questo file modello dovrebbero essere chiusi.
  • startgroup.pstpl: Questo modello può fornire un "riassunto" per le domande all'interno di un gruppo. Ha un modello 'endgroup.pstpl' corrispondente che può essere utilizzato per chiudere tutti i tag aperti in questo file, quindi puoi aprire una tabella all'interno di questo.
  • groupdescription.pstpl: Questo file modello è utilizzato per visualizzare una descrizione di un gruppo. Tieni presente che nelle impostazioni del sondaggio (accedi alle Impostazioni di presentazione e navigazione facendo clic sulla scheda Presentazione) puoi impostare se la descrizione del gruppo deve essere mostrata o meno. In caso contrario, questo file non è affatto incluso.
  • question.pstpl: Questo file contiene le sezioni di domanda, risposta e testo di aiuto della tua indagine. Nei sondaggi "gruppo per gruppo" e "tutto in uno", questo modello viene ripetuto ripetutamente con ogni domanda. Non esiste un file di chiusura corrispondente per questo e tutti i tag dovrebbero essere chiusi.
  • question_start.pstpl: Questo file contiene i singoli elementi trovati all'inizio di una domanda. È incluso in 'question.pstpl' tramite la parola chiave {QUESTION}. Ha lo scopo di consentire ai progettisti di modelli un maggiore controllo sul layout di una domanda. Questo template si trova al di fuori del normale sistema di template e è stato sostituito (a partire da LimeSurvey 1.87). Tutte le parole chiave di questo modello sono ora disponibili direttamente in question.pstpl.
  • completed.pstpl: Questa pagina viene visualizzata come pagina finale quando le risposte al sondaggio sono state salvate e il sondaggio è terminato. Può essere utilizzato per visualizzare un "link di inoltro" come impostato nella configurazione del sondaggio.
  • endgroup.pstpl: Questo file chiude il gruppo e può essere utilizzato per chiudere eventuali tag aperti nel file startgroup.pstpl
  • navigator.pstpl: Questo file contiene i pulsanti che consentono di navigare nel sondaggio, "successivo", "precedente", "ultimo", "invia", "salva finora" e il link "cancella tutto". Viene utilizzato in tutte le pagine tranne la pagina completata.
  • printanswers.pstpl: Questo file ha il wrapper HTML necessario per la versione stampata del sondaggio.
  • print_group.pstpl : Questo file è lo stesso di startgroup.pstpl e endgroup.pstpl, ma per la versione stampata del sondaggio.
  • print_question.pstpl: Questo file è lo stesso di question.pstpl , ma per la versione stampata del sondaggio.
  • print_survey.pstpl: Questo file è uguale a survey.pstpl, ma per la versione stampata del sondaggio.

CSS e Javascript

Due sono i file che sono sempre utilizzati nei modelli: template.css per CSS e template.js per JavaScript.

  • {TEMPLATECSS}: aggiunge linee per il fil css di default, template.css, e per il linguaggio rtl, template-rtl.css.
  • {TEMPLATEJS}: aggiunge i file di default di javascript, template.js e tutti gli altri file js di cui LimeSurvey ha bisogno.

Utilizzare Bootstrap

LimeSurvey integra Bootstrap 3, quindi poi creare tutti i tuoi modelli con le ben documentate classi Bootstrap. Per maggiori informazioni si faccia riferimento alla documentazione Bootstrap.

Un altro plugin incluso è Awesome-Bootstrap-Checkbox. Con questo puoi utilizzare le color-classes di Bootstrap (info, warning, danger, etc.) anche con il suffisso "-checkbox" o "-radio", definendo come preferisci checkbox e radio.

Sostituzione CSS o Javascript predefinito

Alcune domande utilizzano file specifici per Javascript o CSS. Se è necessario sostituire una funzione, utilizzare un sistema a cascata. Per la funzione javascript, l'ultima funzione letta è la funzione utilizzata.

Altri file modello

privacy.pstpl, invitationemail.pstpl, reminderemail.pstpl e confirmationemail.pstpl non sono più utilizzati da LimeSurvey e le impostazioni predefinite sono invece impostate nei file di lingua applicabili. I messaggi e-mail possono ora essere modificati sondaggio per sondaggio.

Pagine standard

Ci sono dieci pagine standard che un partecipante al sondaggio può vedere durante l'utilizzo o l'accesso all'applicazione LimeSurvey. Ciascuno è costruito da un numero di file Template comuni dal Template specificato nelle impostazioni del sondaggio. La tabella seguente indica quali file modello vengono utilizzati nella costruzione di ciascuna di queste pagine.

Pagine sondaggio/
File modello
Sondaggio
Elenco
Benvenuto Domanda Completato Cancella tutto Registrati Carica Salva Stampa
Risposte
Stampa
Survey
SurveyList
Benvenuti
Privacy
Navigatore
Sondaggio
InizioGruppo
Descrizionegruppo
Domanda *
FineGruppo
Valutazione
Completato
CancellaTutto
Registrati
Carica
Salva
StampaRisposte
Stampa sondaggio
Stampa gruppo
Stampa Domanda
Pagina iniziale
FinePagina
Template.css

* NOTA: Nella versione 1.90+, questo sostituisce question.pstpl E question_start.pstpl. Se stai utilizzando un vecchio modello personalizzato, devi aggiungere la seguente riga all'inizio di question.pstpl:

<div {QUESTION_ESSENTIALS} class="{QUESTION_CLASS}{QUESTION_MAN_CLASS}{QUESTION_INPUT_ERROR_CLASS}">

E poi aggiungi il tag di chiusura corrispondente alla fine di question.pstpl:

</div>

* NOTA: nella versione 1.91 e precedenti, i file LimeSurvey js non sono inclusi nel modello. Nella versione 2, devi usare {TEMPLATEJS} in uno dei tuoi file template per aggiungere il link al file js. Puoi aggiungerlo in startpage.pstpl o in endpage.pstpl. Puoi rimuovere la riga {TEMPLATEURL}/template.js e sostituirla con {TEMPLATEJS} per aggiornare un modello personale.

La sezione di controllo dei file

Nella finestra "controllo file" a sinistra, puoi fare clic su uno dei file modello utilizzati per compilare la pagina. Puoi vedere la Parte schermo, JavaScript e i file CSS. Il codice HTML per quel file apparirà quindi nella finestra "Modifica in corso" al centro. Se il modello è modificabile (determinato dalle autorizzazioni della directory), è possibile apportare eventuali modifiche e salvarle.


La finestra "Altri file" mostra un elenco di tutti gli altri file dalla directory dei modelli. Puoi utilizzare il lato destro per caricare e selezionare file immagine (le tue foto, loghi,...) o altri file necessari per creare il tuo modello.


Invece di utilizzare un link per ogni immagine, utilizza la stringa di campo {TEMPLATEURL}. Quindi, invece di:

img src='/limesurvey/templates/yourtemplate/files/mypicture.jpg'

Puoi usare (New in 2.50 ):

 img src='{TEMPLATEURL}files/miaimmagine.jpg'

Nelle versioni di LimeSurvey precedenti alla 2.50 usa:

 img src='{TEMPLATEURL}miaimmagine.jpg'

Un "campione" della pagina modello che stai modificando sarà visibile nella parte inferiore dello schermo. Non è possibile eliminare un modello dall'editor di modelli. Questo deve essere fatto accedendo alla directory sottostante ed eliminando manualmente i file da lì. Hai anche la possibilità di selezionare diverse risoluzioni dello schermo per valutare meglio la sensazione e l'aspetto del modello.

Nota: i modelli spediti non possono essere modificati utilizzando l'editor di modelli. Se vuoi modificarli, crea prima una copia e modifica la copia.

Posizione file modello

LimeSurvey memorizza ciascuno dei modelli 'standard' nella propria sottodirectory distinta all'interno della directory /templates che è conservata nella directory pubblica con gli altri file pubblici di LimeSurvey. I modelli utente personalizzati sono memorizzati nella directory /upload/templates.

Dovrebbe esserci SEMPRE una directory "predefinita" nella directory dei modelli. Questo modello viene utilizzato per impostazione predefinita e come fallback se una cartella del modello non esiste o non può essere trovata. Viene installato per impostazione predefinita.

Puoi utilizzare qualsiasi file di immagine che carichi nell'area di gestione dei modelli con l'aiuto di questa sintassi:

{TEMPLATEURL}nomefile.xyz

Domande di stile con i CSS

Lo stile delle domande in CSS è diventato molto più semplice. Ogni tipo di domanda ha ora una classe univoca. Le domande obbligatorie hanno una classe aggiuntiva obbligatoria. Ad esempio, per una domanda non obbligatoria:

<div id="question5" class="gender">
...
</div>

e se la domanda è obbligatoria:

<div id="question5" class="gender mandatory">
...
</div>

e se la domanda è obbligatoria, ma l'utente non ha risposto o se c'è una convalida su una domanda:

<div id="question5" class="gender mandatory input-error">
...
</div>

e se alla domanda è stata applicata la convalida, ma l'utente non ha risposto correttamente:

<div id="question6" class="text-short input-error">
...
</div>

Classi globali per la parte della domanda

Queste classi vengono utilizzate per ogni tipo di domanda. Alcuni tipi di domande utilizzano solo una o due classi, mentre altri possono utilizzarne molte di più.

Classi globali
Nome classe Parte Tipo di domanda Esempi Nota
.domanda (Obsolete since 3.0) Blocco di tutte le domande Tutti i tipi di domande

,

    ,
    .ls-risposte (New in 3.0 ) Blocco di tutte le domande Tutti i tipi di domande
    ,
      ,
      .sotto-elenco-domande Elenco delle domande secondarie Domanda a scelta multipla, tipo di domanda matrice
        ,
        Viene utilizzato anche .questions-list
        .lista-risposte Elenco delle risposte Domanda a scelta singola, tipo di domanda matrice, domanda con testo a più input
          ,
          .risposta La parte della risposta: una risposta Domanda a scelta singola, tipo di domanda matrice, domanda con testo a più input
        • ,
        • .nessuna risposta La risposta parte per nessuna risposta Domanda a scelta singola, tipo di domanda matrice
        • ,
        • Anche nessuna risposta è una risposta, quindi usa la doppia classe noanswer-item e answer-item
          .question-item La parte della domanda: una domanda Domanda multitesto, tipo di domanda matrice
        • ,
        • Alcune risposte sono anche domande. Quindi abbiamo un sacco di class="question-item answer-item"
          .elenco-pulsanti Un elenco di pulsanti Sì no e Domanda di genere
          .elemento-pulsante La parte di risposta con un pulsante Sì no e Domanda di genere
        • .checkbox-list Un elenco di checkbox Domanda a scelta multipla, numero di matrice (casella di controllo) tipo di domanda
            ,
          Alcuni tipi di domande usano una classe multi-lista, come checkbox con commento: class="checkbox-list text-list"
          .checkbox-array (New in 3.0 ) Un array di checkbox Array (numeri) con opzione checkbox
          .elemento-casella di controllo La parte di risposta con una casella di controllo Domanda a scelta multipla, numero di matrice (casella di controllo) tipo di domanda
        • ,
        • .elenco-radio Un elenco di elementi radio Domanda a scelta singola, tipo di domanda matrice (ogni riga)
            ,
          .radio-array (New in 3.0 ) Una serie di elementi radio Tipo di domanda matrice
          .radio-item La risposta parte con una radio Domanda a scelta singola, tipo di domanda matrice
        • ,
        • .lista-di-testo Un elenco di input di testo Tipo di domanda multitesto, matrice di testo
            ,
          .elemento di testo La parte di risposta di un input di testo Tipo di domanda multitesto, matrice di testo
        • ,
        • .elenco-numerico Un elenco di input di testo con risposta solo numerica Tipo di domanda multinumerica, matrice di numero
            ,
          .elenco-numeri Un elenco di input di testo con risposta solo numerica (ogni riga) Tipo di domanda multinumerica, matrice di numero
            ,
          .number-array (New in 3.0 ) La parte di risposta di un input numerico Array di numero
          .select-list (Obsolete since 2.50) Un elenco di select Numeri di array, array a doppia scala (seleziona)
          .dropdown-list (New in 2.50 ) Un elenco di select Numeri di matrice, matrice a doppia scala (seleziona) (ogni riga)