This page is a translated version of the page New Template System in LS3.x and the translation is 100% complete.

Innledning

Merk: I tidligere versjoner av LimeSurvey ble filene som bestemmer hvordan undersøkelsen ser ut, hvordan den presenteres med tanke på farger, skrifttyper, layout og (noe) oppførsel, kalt en «mal». På grunn av ny innsikt kalles dette nå et «tema», mens mal er reservert for eksempelundersøkelser.

På denne siden lærer du hvordan du:

Bruker det nye temasystemet i LimeSurvey 3.0.
Bruker arv til å administrere dine egne temaer.
Legger til et bilde i temaet ditt
Administrerer temaalternativer for undersøkelsene og undersøkelsesgruppene dine

LimeSurvey 3 introduserer et helt nytt temamotorsystem, basert på Twig 1.29 og Bootstrap, som støtter temaarv og temaalternativer. Det fjerner det gamle systemet med erstatningsnøkkelord fullstendig. Nå kan 100 % av HTML-koden i frontend tilpasses. I det gamle temasystemet fantes det for eksempel et nøkkelord {ASSESSMENTS} som ble erstattet av HTML-koden for vurderinger under kjøring. En temadesigner hadde ingen mulighet til å tilpasse denne HTML-koden (annet enn ved å bruke JavaScript). Nå finnes det en fil som heter assessments.twig, som inneholder logikken (skrevet i Twig) for å generere denne HTML-koden. På disse sidene gir vi deg noen forklaringer på hvordan du bruker denne nye temamotoren.

Vi går ikke i detalj på hvordan Twig fungerer her. Det er en slags sterkt forenklet PHP som gir høy sikkerhet takket være «sandbox»-systemet (vi ser nærmere på det i delen om kjernekoden til temamotoren). Hvis du allerede kan PHP, blir det ekstremt enkelt for deg å mestre det. Hvis du ikke kan PHP, bør det likevel være ganske enkelt å lære. Ta en titt på dokumentasjonen for Twig 1.X: https://twig.symfony.com/

Redigering via administrasjonsgrensesnittet

Temaliste

På kontrollpanelet finnes det nå en boks som gir tilgang til temalisten:

Listen er delt inn i 5 kolonner:

en forhåndsvisning av temaet: det er bare en bildefil som heter «preview.png» i roten av temaet
«tittelen» på temaet som angitt i manifestet (config.xml i roten av temaet)
beskrivelsen av temaet: en tekststreng angitt i manifestet
temaets type: Innebygd tema (følger med LimeSurvey), Brukertema (lagt til i opplastingsmappen), XML-tema (ikke lastet inn i databasen)
Utvider: hvis temaet utvider et annet tema, vises navnet på det her
Noen handlingsknapper:
- Installer: laster inn manifestet til et tema for å legge det til i databasen og gjøre det tilgjengelig for valg på undersøkelsesnivå
- Avinstaller: sletter konfigurasjonsoppføringene til et tema i databasen
- Malredigering: tar deg til temaredigeringen
- Temaalternativer: tar deg til den globale konfigurasjonen av temaalternativer

Temaredigering

Denne dokumentasjonen forutsetter at du allerede vet hvordan du bruker temaredigeringen i den forrige versjonen av LS.

Temaredigeringen er holdt så nær den opprinnelige som mulig. Når du åpner et innebygd tema, kan du derfor ikke redigere det. Men nå har du en «utvid»-knapp i stedet for en «kopier»-knapp.

Nå utvider du temaet — *Nå **utvider** du temaet*

En kort oversikt over konseptet temaarv

I LS3 kan et tema nå arve fra et annet tema, det kan «utvide» et annet tema. Det betyr at temamappen blir nesten tom, og bare inneholder filene (visninger, stilark, skript, ressurser osv.) som skiller seg fra de opprinnelige. På den måten er det enkelt å opprette en rekke temaer for ulike brukere uten å måtte vedlikeholde mange forskjellige temaer. For eksempel kan du ha ditt eget hjemmelagde tema, og så en versjon for et selskap (med logo, stil og kanskje en lenke til nettstedet i bunnteksten osv.), en annen versjon for et annet selskap osv. Hvis du så oppdaterer CSS-en eller den globale layouten til ditt egendefinerte tema, oppdateres alle temaene som arver fra det automatisk. Merk at arven er rekursiv: et tema kan utvide et tema som utvider et annet osv.

Det betyr også at hvis du utvider et av LimeSurveys innebygde temaer, får du fortsatt nytte av oppdateringene til det.

Nyheter i brukergrensesnittet

For å utvide temaet Monochrome i LimeSurvey går du til temalisten og klikker på knappen «Malredigering» for temaet Monochrome. Klikk deretter på «Utvid» og bekreft det nye navnet «extends_monochrome».

Hvis du nå går til opplastingsmappen (med fil-/FTP-klienten din), ser du at en ny mappe er opprettet: upload/themes/extends_monochrome Den inneholder en XML-fil og mapper, men de fleste mappene er tomme. Den har verken visninger, CSS eller JS. Men du kan likevel velge dette temaet som et vanlig tema fra en undersøkelse, og det ser nøyaktig ut som temaet Monochrome.

*Temastrukturen (mapper og filer) like etter opprettelsen. Den er nesten tom*

Ressursene (jpg, png osv.) fra det opprinnelige temaet kopieres når du utvider et tema. Dette er fordi hvis du kopierer en CSS-fil fra det opprinnelige temaet lokalt, og den refererer til disse filene (for eksempel i en background-image-setning), må den finne bildene i den gjeldende temastien.

Temaredigeringen for temaet extends_monochrome ser slik ut:

*Redigering av temaet extends_monochrome*

Det er ingen stor forskjell fra den gamle temaredigeringen. La oss liste opp de viktigste:

Nøkkelordet arvet i fillisten. Det betyr at filen ikke finnes i temamappen, og at filen fra det opprinnelige temaet brukes.

Hovedredigeringen ( ACE editor ) viser innholdet i den valgte filen. Filene inneholder ikke bare HTML, CSS eller JS, men også Twig-setninger. Disse Twig-setningene gir oss muligheten til å legge noe logikk i temavisninger som tidligere lå dypt inne i kjernen, og som nå kan tilpasses.

*Noe Twig-kode, for undersøkelseslisten*

Dette er grunnen til at det nå er flere skjermtyper tilgjengelige i nedtrekksmenyen i toppmenyen. Du vil legge merke til sider som ‘Undersøkelser’, ‘Last inn’, ‘Lagre’, ‘Feil’, ‘Registrering’, ‘Vurderinger’ og ‘Skriv ut svar’ som ikke var tilgjengelige før, eller som du egentlig ikke kunne tilpasse tidligere.

Lenken ‘tip’ nederst i fillisten viser deg hvordan du legger til et bilde i HTML-koden din med Twig

Knappen ‘Lagre endringer’ blir til knappen Kopier til lokalt tema og lagre endringer

Kort eksempel: legge til et bilde

Knappen Kopier til lokalt tema og lagre endringer gjør nøyaktig det den sier: hvis du redigerer noe i filen og deretter klikker på den knappen, kopieres filen til temaet du redigerer, og endringene dine lagres.
For eksempel: klikk på filen layout_global.twig, og legg så til teksten «TEST» rett før blokken content ( {% block content %}) og klikk på knappen. Du ser at etiketten på filen endret seg fra «arvet» til «lokal», og at knappen nå er en enkel Lagre endringer-knapp.

Hvis du åpner en filutforsker og går til mappen upload/themes/extends_monochrome/views/, ser du at den bare inneholder én fil, filen layout_global.twig, og at strengen «TEST» står der.

Nå skal vi legge til et bilde i stedet for en tilfeldig tekst. Hvis du klikker på lenken tip, får du følgende beskjed:
For å bruke et bilde i en .twig-fil: {{ image('./files/myfile.png', 'alt-text for my file', {"class": "myclass"}) }}
Hvis du har lest Twig-dokumentasjonen (og det bør du ha gjort på dette tidspunktet), vet du at {{ function( ) }} skriver ut resultatet av en funksjon på skjermen. Her er funksjonen image( ).

Hvis du er nysgjerrig på hva den gjør, finner du den i koden her (RC3-versjonen): image()-funksjonen i RC3

Hvis du ikke forstår koden: ikke bekymre deg, du trenger ikke vite hvordan den fungerer, men hvorfor og hvordan du bruker den.

Du bør bruke funksjonen image() av to grunner:

Funksjonen image går gjennom temaet for å finne bildet. Hvis temaet du jobber med utvider et annet tema, og du kopierer filen der du la inn bildet lokalt, men bildet ikke er kopiert til det lokale temaet, går den gjennom temaets arvetre for å finne hvor bildet er.
Den bruker ressursbehandleren (asset manager), så det forbedrer ytelsen til temaet ditt. Se dokumentasjonen for Yii Asset Manager for mer informasjon: http://www.yiiframework.com/wiki/148/understanding-assets/

For å legge til et bilde i temaet ditt:

last det opp som vanlig med filopplasteren til høyre, og legg det så til der du vil ha det i en hvilken som helst twig-fil:

{{ image('./files/myfile.png') }}

Hvis du vil legge til en alternativ tekst for bildet (for skjermlesere og HTML-validering), legg til:

Hvis du vil legge til et class-attributt og en id:

{{ image('./files/myfile.png'), ‘my alternative text’, {“class”: “a_nice_css_class”, “id”: “any_id”} }}

Noen ting på gjøremålslisten vår

Gi brukere mulighet til å laste opp en egendefinert forhåndsvisningsfil direkte fra redigeringen
Legge til en knapp for å slette den lokale filen og gå tilbake til den arvede setningen
Kopiere bare bildene som brukes i CSS-filene (ved å liste dem i manifestet som filer som skal kopieres)
Minne om hvilket tema det gjeldende temaet utvider (hvis noe)

Temaalternativer

En annen nyhet i LS3 er siden for temaalternativer. Som vi skal se senere, kan temaskapere lage sine egne alternativer og til og med sin egen administrasjonsside for alternativer. Her ser vi kort hvordan alternativsiden til de innebygde temaene fungerer. For å få tilgang til temaalternativene på globalt nivå: klikk på «Temaalternativer» i temalisten

Avanserte alternativer

Når du åpner fanen Temaalternativer, kan du velge å redigere enten Enkle alternativer eller Avanserte alternativer. «Avanserte alternativer» er bare et rått skjema som gir deg tilgang til de viktigste konfigurasjonsfeltene for temaet fra databasen. For å forstå hvordan det fungerer, bør du også lese om XML-filen og om hvordan man lager et tema fra bunnen av. Det er altså ganske komplekst og laget for avanserte brukere.

Hvis du likevel ønsker å redigere de avanserte innstillingene, klikker du på fanen Avanserte alternativer

Filer CSS: CSS-filene som skal legges til malen;
Filer JS: JS-filene som skal legges til malen;
Filer Skriv ut CSS: CSS-filene som skal lastes når en mal skrives ut;
Alternativer: Dette feltet inneholder alternativene (og verdiene deres) som skal sendes til malvisningen;
CssFramework Name: Navnet på CSS-rammeverket som skal lastes. Foreløpig er det bare Bootstrap eller ingenting;
Cssframework Css: I dette feltet kan du erstatte kjernefilen bootstrap.css med en egen tilpasset versjon;
Cssframework Js: Kjernefilen boostrap.js kan erstattes herfra med en egen tilpasset versjon;
Pakker som skal lastes: Med denne innstillingen kan du laste inn noen av LimeSurveys kjerneressurspakker.

Du vil legge merke til et opplastingsfelt øverst, som gir deg mulighet til å laste opp en fil til filkatalogen til temaet. Disse parameterne kan brukes til å endre hele utseendet til temaet.

Advarsel! : Ikke endre verdiene med mindre du vet hva du gjør!

Enkle alternativer

Siden for enkle alternativer kommer fra malen selv. Den lages med en twig-fil og noe JavaScript i temaets /options-mappe: https://github.com/LimeSurvey/LimeSurvey/tree/develop/templates/default/options (Ødelagt lenke)

Denne siden kan være helt forskjellig fra tema til tema, og temaleverandører oppfordres sterkt til å lage sitt eget utseende og sin egen følelse.

Siden for enkle alternativer fyller ganske enkelt ut inndatafeltene i det avanserte skjemaet. Du kan se det ved å slå en innstilling på eller av på den enkle siden, og se hvordan det tilhørende feltet i det avanserte skjemaet endres tilsvarende. For eksempel, i de enkle alternativene til standardmalen, hvis du endrer Bootswatch-temaet til «Darkly» og deretter klikker på fanen for avanserte alternativer (selv uten å lagre), ser du at feltet «Cssframework Css» endret seg fra

{"replace": [["css/bootstrap.css","css/flatly.css"]]}
til
{"replace": [["css/bootstrap.css","css/darkly.css"]]}
Her er de ulike enkle alternativene for de innebygde temaene:

Ajax mode: Skal neste side lastes via ajax (raskere) eller ved at siden lastes på nytt (bedre for feilsøking)
Bakgrunnsbilde: hvis satt til Ja, lastes bildet pattern.png (erstattes av en filvelger i Master)
Box container: hvis satt til Nei, vises ikke spørsmålene i en boks (slik at du kan bruke store matriser som er bredere enn skjermen)
Brandlogo: hvis satt til nei, vises navnet på undersøkelsen i topplinjen. Ellers kan du velge ett av bildene i filmappen som skal brukes som logo.
Animer hoveddel: hvis satt til ja, kan du velge en av animasjonene som skal brukes når hoveddelen av undersøkelsen lastes
Animer spørsmål: det samme for spørsmål
Animate alerts: det samme for advarsler
Bootstrap theme: her kan du velge et Bootstrap-tema som skal lastes. De kommer fra Bootswatch https://bootswatch.com/3/

Biblioteket som brukes til animasjoner er animate.css: https://daneden.github.io/animate.css/ En temaleverandør kan selvsagt legge til sitt eget animasjonsbibliotek, eller ikke bruke noe animasjonsbibliotek i det hele tatt.

Monochrome-temaene bruker det samme Bootstrap-fargetemaet som administrasjonsgrensesnittet. De bruker ikke systemet for erstatning av CSS-rammeverk, men legger bare til en CSS-fil. Dette illustrerer dermed en annen måte for temaleverandører å håndtere egendefinerte temaer på.

Arvesystem

I forrige del så vi at et tema kan utvide et annet tema. En temakonfigurasjon kan også arve fra en annen temakonfigurasjon. Det betyr at du for et gitt tema kan ha en konfigurasjon på

globalt nivå (den vi nettopp har sett, tilgjengelig fra temalisten)
gruppenivå
og til sist undersøkelsesnivå.

Hver parameter på et gitt nivå kan arve fra nivået over: gruppearv. La oss først se på gruppenivået.

På gruppenivå

En av de andre store nyhetene i LS3 er nemlig gruppesystemet. Du kan nå opprette ulike grupper for å organisere undersøkelsene dine. For å åpne det, gå til listen over undersøkelser og klikk deretter på fanen Grupper:

I denne listen har du to handlingsknapper. Hvis gruppen er tom, kan du slette den. Ellers kan du alltid redigere den. Ved å klikke på redigeringsknappen kommer du til konfigurasjonssiden for gruppen:

Den tredje fanen på denne siden heter «Malalternativer for denne gruppen». Hvis du klikker på den, ser du den samme listen over temaer som i temalisten, bortsett fra at bare alternativknappen er synlig her (malredigering kan bare nås fra hovedlisten).
Hvis du nå klikker på alternativene for standardmalen, ser du dette:

Arv alt betyr at hele konfigurasjonen arves fra det globale konfigurasjonsnivået.
Hvis du går til siden Avanserte alternativer, ser du at alle feltene er satt til å arve.
Hvis du klikker på "Nei" for "Arv alt" i de enkle alternativene, ser du igjen en side som ligner veldig på den globale alternativsiden. Den eneste forskjellen er at du for hvert felt kan velge ja, nei eller arv, og hver nedtrekksmeny har en arv' verdi.

En gruppe kan være underordnet en annen gruppe. I så fall arver den fra overordnet gruppe.

På undersøkelsesnivå

Når du redigerer en undersøkelse, ser du et nytt menyvalg «Temaalternativer» i menyen til venstre. Det tar deg til alternativsiden for temaet som er valgt for den aktuelle undersøkelsen. Du finner det samme arvesystemet som for grupper, men denne gangen betyr arv at innstillingen arves fra undersøkelsens gruppe.

Eksempel på bruk

La oss si at du bruker ett enkelt tema for ulike firmaer (A og B). Du angir favorittalternativene dine på globalt nivå (f.eks. ajax på, animer hoveddel med en glidende inngang, advarsler med en pulsering). Deretter oppretter du en gruppe for hvert firma: en gruppe for firma A som rommer alle undersøkelsene til dette firmaet, og en gruppe for firma B som rommer alle undersøkelsene til firma B. På dette nivået angir du bare logo og bakgrunn, og lar de andre alternativene arve. Alle undersøkelsene i gruppe A bruker dermed logoen til firma A, og alle undersøkelsene i gruppe B bruker logoen til firma B. For en av undersøkelsene til firma A kan du bruke en annen bakgrunn som passer til temaet for undersøkelsen: du endrer bare bakgrunnen i alternativene på undersøkelsesnivå. Hvis noen i firma B sier at den pulserende advarselen er for aggressiv og at han heller vil ha noe mykere, som en fade in, endrer du bare advarselsanimasjonen på nivå for gruppe B, og alle undersøkelsene i denne gruppen bruker nå denne animasjonen. Hvis firma A bytter logo, kan du endre den på nivå for gruppe A, og alle undersøkelsene i denne gruppen bruker den nye logoen.

Disse eksemplene er basert på de gjeldende alternativene i det innebygde temaet. Men hvis du er temaleverandør, eller kan skripte litt med Twig, kan du selvsagt legge til dine egne alternativer. Du kan for eksempel legge til et alternativ «info footer» der du kan legge inn data som firmaets nettsted eller et telefonnummer for hjelp. Hvis firma A har ulike avdelinger med forskjellige telefonnumre, kan du da opprette én undergruppe for hver avdeling i gruppe A. Hver undergruppe får sitt eget telefonnummer i disse alternativene.

Vanlige spørsmål om tilpasning av tema

Her finner du svar på noen spørsmål som er stilt i forumet, og som kan hjelpe deg med å tilpasse temaet ditt.

Tilpasse CSS/JS: håndtere asset manager («hvorfor blir ikke endringene mine brukt?»)

Hvis du prøver å oppdatere CSS/JS i et tema ved å redigere koden direkte i favoritteditoren din, kan du bli overrasket over at endringene ikke blir brukt.

Siden 2.50 bruker LS Yii asset manager: Yii-dokumentasjon om assets

Den flytter CSS/JS-filene til et tema til en undermappe i tmp/ med en tilfeldig streng (f.eks. «tmp/1ef64ml/»). Hvis du endrer en css/js-fil og gir beskjed til asset manager, kopieres filene til en ny undermappe med et nytt navn, slik at nettleserens hurtigbuffer oppdateres og brukerne ser den nye css/js-en. Ellers måtte de tømme nettleserens hurtigbuffer.

Her er CSS-lenkene i headeren når asset manager er på:

Som du ser, refererer de alle til undermappene i tmp/.

Her er CSS-lenkene i headeren når asset manager er av:

Som du ser, peker de til de egentlige filene i temaet.

Hvis asset manager ikke vet at du har endret filen, forblir den gamle filen i den gamle tmp/-mappen uendret, og endringene dine blir aldri brukt.

Når du redigerer CSS/JS i et tema, har du altså flere muligheter:

Du kan bruke Malredigering i LS: den håndterer asset manager, og du trenger ikke tenke på noe
Du kan slå på feilsøkingsmodus: da slås asset manager av, slik at de egentlige css/js-filene i temaene dine brukes (men da må du oppdatere nettleserens hurtigbuffer ved hver innlasting)
Du kan oppdatere hurtigbufferen for assets: fra Globale innstillinger -> Generelt -> Clear asset cache

Å bruke malredigering til å redigere egendefinert CSS er den desidert beste løsningen.

Å bruke malredigering hjelper deg å forstå arkitekturen i den nye temamotoren. Hvis du tilpasser fruity, bør du også være forsiktig med CSS-spesifisitet: de fleste definisjonene bruker selektoren «.fruity» (en av klassene til body-elementet)

Legge til egendefinerte fonter i temaet mitt

Den enkle måten: bruke Google Font CDN

Bootswatch-undersøkelsestemaet bruker Google Font CDN. La oss se på hvordan det fungerer: https://github.com/LimeSurvey/LimeSurvey/blob/70a1d99cd2ebe411597231a8bc746b4ca9e19584/themes/survey/bootswatch/css/variations/flatly.min.css

@import url("https://fonts.googleapis.com/css?family=Lato:400,700,400italic");

Deretter brukes fonten Lato via CSS-regler: https://github.com/thomaspark/bootswatch/blob/master/dist/flatly/bootstrap.css#L72

body {
  ...
 font-family: "Lato";
 ...
}

Du kan bruke hvilken som helst Google-font på denne måten i ditt egendefinerte tema. Du bør selvsagt fjerne fontvelgeren fra alternativene i temaet ditt. Slett disse linjene i options.twig: https://github.com/LimeSurvey/LimeSurvey/blob/70a1d99cd2ebe411597231a8bc746b4ca9e19584/themes/survey/vanilla/options/options.twig#L209-L230

Bruke lokal font

Du kan selvsagt også laste ned fontfilene og bruke dem fra en lokal server i stedet for fra Google CDN (bedre for personvernet). Her er vår lokale versjon av fonten Noto som eksempel på hvordan det gjøres: https://github.com/LimeSurvey/LimeSurvey/blob/70a1d99cd2ebe411597231a8bc746b4ca9e19584/assets/fonts/noto.css

@font-face {
  font-family: 'Noto Sans';
  font-weight: 300;
  font-style: normal;
  src: url('./font-src/Noto/NotoSans-Regular.ttf');
}
...

Du kan bruke en svært lik definisjon i CSS-filen til temaet ditt, og deretter kopiere filen NotoSans-Regular.ttf til mappen css/font-src/ i temaet ditt.

Bruk deretter fonten på body (eller et annet element) som vist ovenfor, og fjern standard fontvelger blant alternativene.

Opprette din egen skriftvelger i alternativer

Foreløpig kan du ikke enkelt bruke kjerneskriftvelgeren til å legge til din egen skrift i alternativer. Vi må først gi sluttbrukeren mulighet til å laste opp egne pakker (se neste avsnitt: A look into the Fruity Font Selector)
Slik går du frem:

Legg til to skrifter (my_custom_font og my_custom_other_font) i temaet ditt, via CDN eller lokal server
Legg deretter til to nye klasser i css-filen din:

.font-my_custom_font {
 font-family: 'my_custom_font ';
}
.font-my_custom_other_font {
 font-family: 'my_custom_other_font';
}

Legg til et skriftalternativ i XML-filen til temaet ditt (standard vil være my_custom_font) :

    <options>
        ....
        <font>my_custom_font</font>
    </options>

Legg til skriftvelgeren din i option.twig ved å legge til disse linjene (foreløpig ikke testet, så si fra i forumet hvis det ikke fungerer):

            
            <div class='row ls-space margin top-15 bottom-15 action_hide_on_inherit'>
                <hr/>
            </div>
            <div class='row action_hide_on_inherit'>
                <div class='col-sm-12'>
                    <div class='panel panel-default'>
                        <div class='panel-heading'>{{ "My custom fonts" | t }}</div>
                        <div class='panel-body'>
                            <div class='form-group row'>
                                <label for='simple_edit_font' class='control-label'>{{ "Select font:" | t }}</label>
                                <div class='col-sm-12'>
                                    <select class='form-control selector_option_value_field' id='simple_edit_font' name='font'>
                                    {% if templateConfiguration.sid is not empty or templateConfiguration.gsid is not empty %} //Shouldn't this be "theme" in stead of "template"?
                                        {% set fontOptions = fontOptions ~ '<option value = "inherit" > Inherit</option>' %}
                                    {% endif %}
                                   <optgroup  label="{{ "My Custom fonts" | t }}">
                                   <option class="font-my_custom_font"     value="custom_font"   data-font-package=""  >Custom</option>
                                  <option class="font-my_custom_other_font" value="my_custom_other_font" data-font-package=""  >Other</option>
                                  </optgroup>
                                   
                                    </select>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

Nå skal brukerne dine kunne velge mellom disse to skriftene.

A look into the Fruity Font Selector

I fremtiden vil vi gi sluttbrukeren mulighet til å laste opp egne ressurspakker, inkludert skriftpakker. Det vil gjøre det svært enkelt å tilpasse skrifter.
For å forstå Yii-pakker:
http://www.yiiframework.com/doc/api/1.1/CClientScript#packages-detail

LimeSurvey-pakker er definert i ulike filer. Skriftpakker er definert her: https://github.com/LimeSurvey/LimeSurvey/blob/4c40b61afb0dba8fd80154b50f5831045df8d814/application/config/fonts.php
Noto-skriftpakken er for eksempel definert her: https://github.com/LimeSurvey/LimeSurvey/blob/4c40b61afb0dba8fd80154b50f5831045df8d814/application/config/fonts.php#L47-L53

    'font-noto' => array(
        'devBaseUrl' => 'assets/fonts/',
        'basePath' => 'fonts',
        'css' => array(
            'noto.css',
        ),
    ),

Filen noto.css som den inneholder, finnes her: https://github.com/LimeSurvey/LimeSurvey/blob/4c40b61afb0dba8fd80154b50f5831045df8d814/assets/fonts/noto.css
Legg merke til definisjonen av css-klassen ".font-noto" helt til slutt i filen:

@font-face {
  font-family: 'Noto Sans';
  ...
}
...
.font-noto{
    font-family: 'Noto Sans';
}

I Vanilla-temaet brukes Noto-skriften ved å legge til noto-pakken og sette skriftalternativet til noto:
https://github.com/LimeSurvey/LimeSurvey/blob/70a1d99cd2ebe411597231a8bc746b4ca9e19584/themes/survey/vanilla/config.xml#L79

        <packages>
             ....
            <add>font-noto</add>
        </packages>

https://github.com/LimeSurvey/LimeSurvey/blob/70a1d99cd2ebe411597231a8bc746b4ca9e19584/themes/survey/vanilla/config.xml#L58

    <options>
        ....
        <font>noto</font>
    </options>

Deretter defineres skriftklassen til body ved hjelp av denne verdien: https://github.com/LimeSurvey/LimeSurvey/blob/70a1d99cd2ebe411597231a8bc746b4ca9e19584/themes/survey/vanilla/views/layout_global.twig#L76

<body class=" ...  font-{{  aSurveyInfo.options.font }} ... " ... >

XML-filen inneholder selvsagt bare standardverdiene for temakonfigurasjonen din. Selve verdiene er imidlertid definert og lest fra databasen (tabellen "template_configuration" (Spørsmål: "template_" eller "theme_"?) som json-strenger. Filen option.js bruker bare verdien fra skriftvelgeren i de enkle alternativene til å endre verdien i skjemaet i fanen for avanserte alternativer: https://github.com/LimeSurvey/LimeSurvey/blob/70a1d99cd2ebe411597231a8bc746b4ca9e19584/themes/survey/vanilla/options/options.js#L148-L174

Når funksjonen for å laste opp ressurspakker blir tilgjengelig, vil det derfor være enkelt å legge til et skript som skanner alle eksisterende skriftpakker og legger dem til i velgeren.

Legge til temaalternativer for å styre plassering og visning av undersøkelseselementer

Denne veiledningen viser hvordan du legger til alternativer i et utvidet tema for å vise undersøkelseselementer på ulike steder. I dette tilfellet oppretter vi temaalternativer for å vise tittelen på undersøkelsen to forskjellige steder.

For enkelhets skyld baserer vi veiledningen på en utvidelse av temaet "bootswatch" i LimeSurvey-versjon 3.4.3.

Opprett et egendefinert tema

Utvid temaet "bootswatch" som beskrevet ovenfor.
Kopier custom.css til det lokale temaet som beskrevet ovenfor.

Opprett nye temaalternativer

Kopier innholdet i /themes/survey/bootswatch/options/ til /upload/themes/survey/yourThemeName/options/.

Åpne /upload/themes/survey/yourThemeName/options/options.twig i et redigeringsprogram og finn "{# Bootstrap Bootswatch theme #}". Legg til dette rett foran det overordnede <div class='row'>-elementet:

		{# Custom survey name in navbar #}
		<div class='row'>
			<div class='col-sm-12 col-md-6'>

				<div class='form-group row'>
					<label for='simple_edit_options_surveyname1' class='control-label'>Survey name in navbar</label>
					<div class='col-sm-12'>
						<div class="btn-group" data-toggle="buttons">
							<label class="btn btn-default">
								<input name='surveyname1' type='radio' value='on' class='selector_option_radio_field ' data-id='simple_edit_options_surveyname1'/>
								Yes
							</label>
							<label class="btn btn-default">
								<input name='surveyname1' type='radio' value='off' class='selector_option_radio_field ' data-id='simple_edit_options_surveyname1'/>
								No
							</label>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class='row'>
			<hr/>
		</div>

		{# Custom survey name below progress bar #}
		<div class='row'>
			<div class='col-sm-12 col-md-6'>

				<div class='form-group row'>
					<label for='simple_edit_options_surveyname2' class='control-label'>Survey name below progress bar</label>
					<div class='col-sm-12'>
						<div class="btn-group" data-toggle="buttons">
							<label class="btn btn-default">
								<input name='surveyname2' type='radio' value='on' class='selector_option_radio_field ' data-id='simple_edit_options_surveyname2'/>
								Yes
							</label>
							<label class="btn btn-default">
								<input name='surveyname2' type='radio' value='off' class='selector_option_radio_field ' data-id='simple_edit_options_surveyname2'/>
								No
							</label>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class='row'>
			<hr/>
		</div>

Åpne /upload/themes/survey/yourThemeName/config.xml og legg til to elementer i "options"-blokken slik at den ser slik ut:

    <options>
        <ajaxmode>on</ajaxmode>
        ...
        <surveyname1>on</surveyname1>
        <surveyname2>on</surveyname2>
    </options>

Dette skal gi deg to nye alternativer i skjermbildet Temaalternativer, slik:

Endret visning for undersøkelsestittel i navigasjonslinjen

Opprett en ny mappe /upload/themes/survey/yourThemeName/views/subviews/header/.
Kopier /themes/survey/vanilla/views/subviews/header/nav_bar.twig til den nye mappen.

Åpne /themes/survey/vanilla/views/subviews/header/nav_bar.twig og finn "{# Logo option #}". Under denne endrer du IF-setningen for logo/undersøkelsesnavn, slik at den ser slik ut:

		{# Logo option #}
        {% if( aSurveyInfo.options.brandlogo == "on") %}
            <div class="{{ aSurveyInfo.class.navbarbrand }} logo-container"  {{ aSurveyInfo.attr.navbarbrand }}  >
                {{ image(aSurveyInfo.options.brandlogofile, aSurveyInfo.name, {"class": "logo img-responsive"}) }}
            </div>
        {% endif %}
        {% if( aSurveyInfo.options.surveyname1 == "on") %}
            <div class="{{ aSurveyInfo.class.navbarbrand }}"  {{ aSurveyInfo.attr.navbarbrand }} >
                {{ aSurveyInfo.name }}
            </div>
        {% endif %}

Legg til noe lignende dette i /upload/themes/survey/yourThemeName/css/custom.css:
```
.navbar-brand {
    line-height: 60px;
    font-size: 32px;
}
```
Sett temaalternativet "Survey name in navbar" til "Ja"
Du skal nå se dette:

Endret visning for undersøkelsestittel under fremdriftslinjen

Opprett en ny mappe /upload/themes/survey/yourThemeName/views/subviews/survey/group_subviews.
Kopier /themes/survey/vanilla/views/subviews/survey/group_subviews/group_container.twig til den nye mappen.

Åpne /themes/survey/vanilla/views/subviews/survey/group_subviews/group_container.twig og legg til et <h1>-element for undersøkelsesnavnet, slik at det ser slik ut:

<div class="{{ aSurveyInfo.class.groupcontainer }} space-col" {{ aSurveyInfo.attr.groupcontainer }}>
 
    {# Custom survey name #}
    {% if( aSurveyInfo.options.surveyname2 == "on") %}
    	<h1 class="custom-survey-name">{{ aSurveyInfo.name }}</h1>
    {% endif %}
 
    {# Group Name #}
    {{ include('./subviews/survey/group_subviews/group_name.twig') }}
 
    {# Group Description #}
    {{ include('./subviews/survey/group_subviews/group_desc.twig') }}
 
    {#
        PRESENT THE QUESTIONS
 
        This is the main part. It will render each question for this group
     #}
 
    <!-- PRESENT THE QUESTIONS -->
    {% for  aQuestion in aGroup.aQuestions %}
         {{ include('./subviews/survey/question_container.twig') }}
    {% endfor %}
 
    <!-- Hidden inputs -->
    {% if aGroup.show_last_group == true %}
        <input type='hidden' name='lastgroup' value='{{ aGroup.lastgroup }}' id='lastgroup' />
    {% endif %}
 
    {% if aGroup.show_last_answer == true %}
        <input type='hidden' name='lastanswer' value='{{ aGroup.lastanswer }}' id='lastanswer' />
    {% endif %}
</div>

Legg til noe lignende dette i /upload/themes/survey/yourThemeName/css/custom.css:

.navbar-brand {
    line-height: 60ph1.custom-survey-name {
	margin: 0;
	text-align: center;
}

Sett temaalternativet "Survey name below progress bar" til "Ja"
Du skal nå se dette:

Nedlastinger

Eksempel på utvidet tema: Media:Test_survey_names.zip

Opprette et tema fra bunnen av

Dokumentasjon kommer snart.

Foreløpig gir vi bare noen tips.

Temastruktur

Filer og mapper

Når du oppretter et tema fra bunnen av, trenger du ikke følge fil- og mappestrukturen, CSS eller JS fra Vanilla. Den obligatoriske CSS/JS-en legges til av kjernen (du kan fortsatt fjerne den om nødvendig).

De eneste filene temaet ditt må ha, er layoutfilene:

layout_global.twig : viser sidene når en undersøkelse besvares
layout_survey_list.twig : viser listen over undersøkelser (hvis dette temaet er satt som standard)
layout_errors.twig : brukes til å vise feil som hindrer visning av undersøkelsen (feil undersøkelses-ID, tom gruppe i gruppeforhåndsvisning osv.)
layout_user_forms.twig: viser brukerskjemaer som: token (deltaker i undersøkelsen) og registrering.
layout_print.twig : brukes til å skrive ut undersøkelsen til PDF
layout_printanswers.twig: skriver ut svarene

Innholdet i disse filene, og hvilke filer de inkluderer eller ikke, er helt opp til deg. Alle de andre filene og mappene du finner i Vanilla er rent valgfrie, så organiser koden slik du vil.

Hvis du leser koden for visning i frontend, ser du at disse filnavnene står direkte i den. Det er derfor de er obligatoriske.

F.eks.: https://github.com/LimeSurvey/LimeSurvey/blob/2398dda3b425da1a37d4611cd7963d39ac739987/application/helpers/SurveyRuntimeHelper.php#L462

Innhold

I Vanillas layout_global.twig ser du at vi bruker en variabel som heter "include_content" for å avgjøre hva som skal vises https://github.com/LimeSurvey/LimeSurvey/blob/2398dda3b425da1a37d4611cd7963d39ac739987/themes/survey/vanilla/views/layout_global.twig#L114-L115

                    {% set sViewContent =  './subviews/content/' ~ aSurveyInfo.include_content ~ '.twig' %}
                    {% include './subviews/content/outerframe.twig' with {'include_content': sViewContent } %}

aSurveyInfo.include_content forteller deg hvilken handling som pågår: vises spørsmål? vises innsendingsresultatet? vises «Nullstill alle»? osv. Som du ser, oppretter vi i Vanilla én fil som inkluderes per handling. Hvis du vil vite listen over handlinger, kan du derfor bare sjekke Vanillas mappe views/subviews/content og fjerne «twig»-filendelsen: https://github.com/LimeSurvey/LimeSurvey/tree/2398dda3b425da1a37d4611cd7963d39ac739987/themes/survey/vanilla/views/subviews/content

clearall.twig
firstpage.twig
load.twig
mainrow.twig
main.twig
optin.twig
optout.twig
outerframe.twig
printanswers.twig
quotas.twig
register.twig
save.twig
submit_preview.twig
submit.twig
userforms.twig

Hvis du allerede har laget et tema for 2.x-versjonene av LimeSurvey, vil du legge merke til at de fleste av disse tilsvarer de gamle pstpl-filene i LimeSurvey 2.x. Igjen er det ingen plikt for deg å opprette disse filene, med disse navnene, i denne mappen. Du kan for eksempel bare legge til en stor switch i layout_global.twig med ønsket HTML for hver handling.

Manifestet config.xml

Temaets manifest inneholder hovedinformasjonen om temaet ditt. Når du installerer et tema, lastes innholdet i manifestet inn i databasen, i to ulike tabeller: template og template_configuration. Hver gang du endrer manifestet til et tema, må du derfor avinstallere og installere det på nytt (eller bare tilbakestille det). Fordi denne prosessen er irriterende under utvikling av et tema, kan du tvinge direkte bruk av XML-filen i stedet for databaseoppføringene. For å gjøre det slår du på feilsøkingsmodus i config.php og setter 'force_xmlsettings_for_survey_rendering' til true.

Metadataseksjonen

Ikke noe komplisert: bare hovedinformasjonen om temaet ditt. Den legges inn i tabellen templates_configuration

    <metadata>
        <name>the_name_of_your_theme</name>
        <title>The Title of your theme</title>
        <creationDate>16/10/2017</creationDate>
        <author>Your Name</author>
        <authorEmail>your@email.org</authorEmail>
        <authorUrl>http://www.yourwebsite.org</authorUrl>
        <copyright>Your Copyright </copyright>
        <license>Licence of your theme</license>
        <version>version of your theme</version>
        <apiVersion>3</apiVersion>
        <description>Description of your theme</description>
        <extends>parent_theme</extends>
    </metadata>

Noen merknader:

name: brukes som nøkkel i databasen. Den må derfor være unik og bør ikke inneholde spesialtegn (ingen mellomrom). Merk at det ikke skilles mellom store og små bokstaver
Title: brukes til å vise navnet på temaet ditt i de ulike listene. Den kan inneholde spesialtegn
description: brukes i hovedlisten over undersøkelsestemaer. Den kan inneholde spesialtegn, og til og med HTML-kode ved å bruke
extends: valgfri, den definerer overordnede temaer. Hvis en fil ikke finnes i dette temaet (twig/js/css/jpg osv.), letes den opp i det overordnede temaet

Hvis du har utvidet ett av de tre kjernetemaene (Vanilla, Bootswatch, Fruity), kan du endre «extends»-verdien fra ett overordnet tema til et annet. Du må selvsagt tilbakestille temaet.

Filseksjonen

Denne er viktig. Den legges inn i tabellen template_configuration, i feltene files_css, files_js, files_print_css som JSON-arrayer.

F.eks.: filseksjonen i temaet Material Premium:

    <files>
        <css>
            <add>css/bootstrap-material-design.css</add>
            <add>css/ripples.min.css</add>
            <replace>css/ajaxify.css</replace>
            <replace>css/theme.css</replace>
            <replace>css/custom.css</replace>
            <remove>awesome-bootstrap-checkbox/awesome-bootstrap-checkbox.css</remove>
        </css>
        <js>
            <replace>scripts/theme.js</replace>
            <replace>scripts/ajaxify.js</replace>
            <add>scripts/material.js</add>
            <add>scripts/ripples.min.js</add>
            <replace>scripts/custom.js</replace>
        </js>
        <print_css>
            <add>css/print_theme.css</add>
        </print_css>
    </files>

Alle CSS/JS-filene i denne seksjonen lastes når undersøkelsen startes (i ajax-modus. Hvis ajax-modus er av, lastes selvsagt alle filene på nytt på hver side).

De legges til en Yii Asset Packet basert på navnet på temaet. Når Asset Manager er på (feilsøkingsmodus er av), kopieres disse filene til tmp-mappen sammen med resten av temaet (slik at du kan bruke relative stier i CSS og JS for å nå bildefilene). Om Asset Manager i Yii: https://www.yiiframework.com/wiki/148/understanding-assets Om pakker i Yii: http://www.yiiframework.com/doc/api/1.1/CClientScript#packages-detail

De bruker arvesystemet. Det betyr at hvis du legger til en CSS/JS-fil i et tema, men den ikke finnes i temaet, vil motoren lete gjennom alle de overordnede temaene til dette temaet og bruke den første den finner. Hvis en bruker utvider temaet ditt via malredigeringen, vil alle disse filene derfor arves i brukerens tema. Nøkkelordene viser til dette arvesystemet.

add : legger filen til i temaet og i alle temaer som arver fra det
replace: erstatter filen fra det overordnede temaet
remove: fjerner filen fra enhver pakke, også kjernepakken (siden 3.14)

Husk at du kan sette 'force_xmlsettings_for_survey_rendering' i config.php slik at konfigurasjonen leses fra XML i stedet for databasen (ingen tilbakestilling nødvendig). Dette gjør det enklere å teste endringer i XML-filene, og du slipper å avinstallere/installere temaet på nytt ved hver endring i XML-filen.

Noen merknader om disse nøkkelordene:

Tips om arv

Som forklart tidligere kan nøkkelordet "add" referere til en fil som ligger i et av de overordnede temaene. Du kan altså «legge til» en fil i denne delen uten at filen finnes i temaet ditt, så lenge den finnes i et av de overordnede temaene. Systemet leter gjennom alle overordnede temaer og bruker den første filen det finner. Hvis filen ikke blir funnet, feilsøkingsmodus er slått på i konfigurasjonen og JS-feilsøkingsmodus for frontend er slått på i de globale innstillingene, vil en melding i konsollen advare deg. Eksempel: hvis vi legger til <add>css/unexisting.css</add> i my_theme, vil vi se dette i konsollen:

 (¯`·._.·(¯`·._.· Theme Configuration Error  ·._.·´¯)·._.·´¯) 

Can't find file 'css/unexisting.css' defined in theme 'my_theme'

Hvis feilsøkingsmodus er slått av, vises ingen feil i det hele tatt. Systemet ignorerer da bare de ugyldige add-setningene.

Når bruker jeg add, når bruker jeg replace, og når kan jeg overlate det til det overordnede temaet?

For det første: add og replace er i praksis det samme nøkkelordet. Du kan bruke det ene eller det andre, systemet gjør det samme. De er adskilt for at menneskelige lesere skal forstå hva som var hensikten din.

Du kan ikke legge til en fil med samme navn som i det overordnede temaet: den vil alltid erstatte den. F.eks.: Hvis du har en fil som heter "my_mother_theme/foo.css" og du legger til en fil som heter "foo.cs" i det underordnede temaet, blir bare "daughter_theme/foo.css" lagt til i temaet. Hvis du vil beholde "my_mother_theme/foo.css", velger du bare et annet navn for "daughter_theme/foo.css", for eksempel "daughter_theme/bar.css". Nøkkelordet "add" kan altså brukes som et "replace"-nøkkelord.

Grunnen er at dette gjør det mye enklere å generere arvede temaer automatisk: kopiering av filseksjonen fungerer uten videre (du slipper å endre «add» til «replace» når du utvider en av filene).

For å gjøre det tydelig, la oss ta Fruity som eksempel. Her er CSS-filseksjonen:

        <css>
            <add>css/variations/sea_green.css</add>
            <replace>css/animate.css</replace>
            <replace>css/theme.css</replace>
            <replace>css/custom.css</replace>
        </css>

Hvis du ser på filen custom.css i Fruity, er den nøyaktig lik den i Vanilla. Vi kunne slette filen custom.css i Fruity, og den fra Vanilla ville blitt lastet. Vi kunne også fjernet setningen <replace>custom.css</replace> fra manifestet til Fruity, da ville setningen fra Vanilla blitt brukt, og custom.css fra Vanilla ville blitt lastet.

Så hvorfor bruker vi setningen <replace>custom.css</replace> i manifestet til Fruity? Svaret er enkelt: vi vil at sluttbrukeren skal kunne utvide Fruity-temaet, endre filen i sitt lokale tema og laste den endrede filen fra sitt arvede tema. For å forstå dette kan du bare utvide Fruity og se på det utvidede temaet. Det utvidede temaet har ikke engang filen custom.css, så den fra Fruity vil bli brukt. Men hvis brukeren oppretter denne filen i det utvidede temaet (ved å klikke på «Utvid» i Malredigering), vil filen bli lastet fra brukerens tema.

Generelt gjelder: Hvis du lager et tema fra bunnen av som ikke utvider noe annet tema, bruker du bare add-setningen for å legge til CSS-/JS-filene dine. Enkelt og greit. Hvis du lager et tema som utvider et annet tema, og du ikke vil at brukerne skal kunne utvide CSS-/JS-filene fra det overordnede temaet: ikke bruk add-setningen i manifestet. Filene vil fortsatt bli lastet fra konfigurasjonen til det overordnede temaet. Hvis du lager et tema som utvider et annet tema, og du vil erstatte en fil fra det overordnede temaet: bruk nøkkelordet replace (nøkkelordet add gir samme resultat). Hvis du lager et tema som utvider et annet tema, og du ikke erstatter en gitt CSS-/JS-fil, men vil at brukerne skal kunne utvide denne filen: bruk da «replace»-setningen i manifestet for denne filen. Selv om du ikke erstatter filen, gir du brukeren muligheten til å gjøre det ved å bruke nøkkelordet replace i manifestet.

Bare det aller siste tilfellet krever litt hodebry for å forstå, alle de andre tilfellene er trivielle.

Du kan også registrere CSS- og JS-filer direkte fra twig-koden. Disse filene lastes bare når twig-filen blir etterspurt. Hvis du vil at brukerne skal kunne arve disse JS-/CSS-filene fra malredigeringen, husk å bruke funksjonene Template:RegisterTemplateCssFile('my style.css') og Template:RegisterTemplateScript('my script.js'). Hvis du ikke bruker disse funksjonene, kan det hende temaet ditt fungerer, men arv vil ikke fungere for det. Det er samme logikk som for funksjonen Template:Image('my picture.jpg')

Nøkkelordet remove

Nøkkelordet remove er bare tilgjengelig fra og med 3.14. Med det kan du fjerne enhver CSS-/JS-fil fra en hvilken som helst pakke, selv kjernepakkene. Det brukes i Material Premium Theme for å fjerne filene til Awesome Bootstrap Checkbox:

<remove>awesome-bootstrap-checkbox/awesome-bootstrap-checkbox.css</remove>

Du må bruke nøyaktig samme syntaks som pakkens fil (f.eks. vil «awesome-bootstrap-checkbox.css» alene, uten mappestien, ikke fungere). Du finner den komplette listen over kjernepakker og filene deres i /application/config/packages.php og config/third_party.php. For eksempel for awesome-bootstrap-checkbox.css: https://github.com/LimeSurvey/LimeSurvey/blob/2398dda3b425da1a37d4611cd7963d39ac739987/application/config/packages.php#L54-L56

        'css'=> array(
            'awesome-bootstrap-checkbox/awesome-bootstrap-checkbox.css',
        ),

En annen måte å finne det nøyaktige navnet som skal brukes i remove-taggen på, er å slå på ressursbehandleren (ved å slå av feilsøkingsmodus eller sette 'use_asset_manager'=>true i konfigurasjonen). Stien du skal bruke er da den som kommer rett etter den tilfeldige mappen i tmp-mappen. For eksempel for awesome-bootstrap-checkbox.css:

<link rel="stylesheet" type="text/css" href="/tmp/assets/cbc4e3cb/awesome-bootstrap-checkbox/awesome-bootstrap-checkbox.css" />

Filer du ikke bør fjerne:

jquery-3.1.1.min.js : nødvendig

jquery-migrate-3.0.0.min.js : nødvendig

survey.js : nødvendig

moment-with-locales.min.js : nødvendig for spørsmålstypen dato (og noen andre, tror jeg)

em_javascript.js : nødvendig for all ExpressionScript-JavaScript

Alternativer-delen

Denne delen gjelder alternativene til temaet ditt. Den brukes til å fylle feltet "options" i tabellen template_configuration som en JSON-matrise.

Mer informasjon

Theme:Available function

Noen merknader

MERK: hvis du redigerer XML-filen til et tema, må du avinstallere og installere temaet på nytt for at endringen skal tas i bruk.

MERK: For å unngå dette kan du tvinge bruk av XML i stedet for databasen. Slå på feilsøkingsmodus i config.php og fjern kommentartegnene fra:

'force_xmlsettings_for_survey_rendering' => true, // Fjern kommentartegnene hvis du vil tvinge bruk av XML-filen i stedet for databasen (gjør det enklere å utvikle temaer)

Vær forsiktig: alt lastes fra XML-filen (inkludert alternativer osv.)

MERK: Hvis du redigerer CSS/JS-filene manuelt (uten å bruke Malredigering), og feilsøkingsmodus er slått av, kan du nå tvinge tømming av ressursbufferen. Under «Globale innstillinger», fanen «Generelt», klikker du på knappen «Tøm ressursbuffer».

MERK: Hvis du fjerner delen

Hovedkapitler

Nytt malsystem i LS3.x

From LimeSurvey Manual