Malredigering

Introduksjon

Et undersøkelsestema styrer hvordan undersøkelsen din ser ut for deltakerne: sideoppsett, farger, skrifttyper, logoer og utformingen av hvert spørsmål. Temaer bygges med Twig-maler, CSS og JavaScript, og bruker Bootstrap 5 som CSS-rammeverk.

Mange vanlige endringer krever ingen kode i det hele tatt. Logo, farger, skrifttyper og flere visningsinnstillinger kan endres med temaalternativene. Bruk malredigeringen som er beskrevet på denne siden når du vil gå lenger: legge til egen CSS eller JavaScript, endre HTML-koden til en side, eller laste opp bilder og andre filer til temaet ditt.

LimeSurvey leveres med disse innebygde undersøkelsestemaene:

• Fruity TwentyThree (fruity_twentythree): Standardtemaet.
• Bootstrap Vanilla (vanilla): Et enkelt basistema for utviklere som vil bygge sitt eget Bootstrap-baserte tema.
• Fruity (fruity) og Bootswatch (bootswatch): Begge utvider Bootstrap Vanilla.

Utseendet til de enkelte spørsmålstypene styres av spørsmålstema, ikke av undersøkelsestemaet. For å endre HTML-koden til en spørsmålstype oppretter du et spørsmålstema.

Før du begynner

For å bruke malredigeringen trenger du den globale rettigheten Tema (se globale rettigheter), eller du må være superadministrator. Å utvide et tema krever rettigheten Opprett, lagring av endringer krever Oppdater, og sletting av et tema eller nullstilling av en fil krever Slett.

  Et tema med feil kan gjøre alle undersøkelser som bruker det, ubrukelige. Test endringene dine med en forhåndsvisning av undersøkelsen før du tar temaet i bruk i en aktiv undersøkelse.

Innebygde temaer kan ikke redigeres: utvid dem

Innebygde temaer oppdateres sammen med LimeSurvey, så du kan ikke endre dem direkte. For å tilpasse et tema må du utvide det. Når du utvider et tema, opprettes det et nytt brukertema som arver alt fra overordnet tema. Temaet ditt inneholder bare filene du endrer, alt annet hentes fra overordnet tema. På den måten får temaet ditt fortsatt feilrettinger og forbedringer når LimeSurvey oppdaterer overordnet tema.

Slik utvider du et tema:

• Gå til Konfigurering > Tema, åpne handlingsmenyen (⋯) på slutten av temaets rad og klikk på Utvid, eller
• Åpne temaet i malredigeringen og klikk på Utvid i verktøylinjen.

Skriv inn et navn på det nye temaet. Malredigeringen åpner deretter det nye temaet ditt.

Hvor temaer lagres

• Innebygde temaer: themes/survey/ i LimeSurvey-installasjonen din.
• Brukertemaer (utvidede, opplastede eller importerte temaer): upload/themes/survey/.

Du kan også redigere filene til et brukertema direkte på serveren med din egen editor. Pass på at webserveren fortsatt kan lese og skrive filene etterpå, slik at du også kan fortsette å bruke malredigeringen.

Malredigeringen

For å åpne malredigeringen går du til Konfigurering > Tema, åpner handlingsmenyen (⋯) på slutten av temaets rad og klikker på Malredigering.

Hvis du åpner et innebygd tema, vises en melding om at dette er et standardtema, med en lenke for å utvide det. Du kan se filene og forhåndsvisningen, men du kan ikke lagre endringer.

Verktøylinje

• Eksporter: Laster ned temaet som en ZIP-fil.
• Utvid: Oppretter et nytt tema som arver fra dette (se ovenfor).
• Endre navn: Endrer navnet på temaet. Bare tilgjengelig for brukertemaer.
• Slett: Sletter temaet. Du kan ikke slette temaet som er angitt som standardtema.
• Tema: Bytter malredigeringen til et annet tema.
• Skjerm: Velger hvilken undersøkelsesside som vises i forhåndsvisningen, og hvilke filer som er oppført for redigering. Skjermene er: Spørsmål, Undersøkelser, Velkommen, Fullført, Vurderinger, Feil, Nullstill alle, Last inn, Lagre, Registrering, Skriv ut svar, Offentlig statistikk, PDF, Kvote er overskredet, Navigering og Deltaker.

Redigere filer

Panelene til høyre viser filene som brukes av den valgte skjermen:

• Skjerm delfiler: Twig-malene som bygger siden.
• JavaScript-filer
• CSS-filer
• Andre filer: Bilder, skrifttyper og alle andre filer i temaet.

Klikk på et filnavn for å åpne filen i editoren. Filer merket Arvet kommer fra overordnet tema. Du kan fortsatt redigere en arvet fil: knappen under editoren heter da Kopier til lokalt tema og lagre endringer, og lagring kopierer filen inn i temaet ditt med endringene dine. Fra da av brukes kopien din i stedet for filen i det overordnede temaet.

Filer som tilhører temaet ditt har en Nullstill-knapp. Nullstilling sletter kopien din, slik at filen fra overordnet tema brukes igjen.

Laste opp filer

Bruk opplastingsfeltet nederst i panelet Andre filer for å legge til bilder, skrifttyper eller andre filer i temaet ditt. Opplastede filer lagres i temaets files/-mappe. Som standard kan du laste opp bilder (gif, ico, jpg, jpeg, png) og disse filtypene: css, js, map, json, eot, otf, ttf, woff, woff2, txt, md, xml, twig, lss, lsa, lsq og lsg. Administratoren din kan endre disse listene med innstillingene allowedthemeimageformats og allowedthemeuploads i config.php.

For å vise et opplastet bilde i en Twig-fil bruker du funksjonen image():

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

I CSS-filer refererer du til opplastede filer med en sti relativt til css-mappen, for eksempel url('../files/background.jpg').

Forhåndsvisning

Under redigeringsvinduet viser en forhåndsvisning den valgte skjermen med eksempelinnhold. Bruk knappene Mobil, 640x480, 800x600, 1024x768 og Fullstendig for å sjekke siden i ulike skjermstørrelser.

Forhåndsvisningen bruker eksempeldata og viser kanskje ikke alle stiler helt slik en ekte undersøkelse gjør. Sjekk derfor alltid endringene dine også i en ekte forhåndsvisning av undersøkelsen.

Importere og eksportere temaer

• For å flytte et tema til en annen LimeSurvey-installasjon klikker du på Eksporter i verktøylinjen i malredigeringen. Da lastes temaet ned som en ZIP-fil.
• For å installere et tema fra en ZIP-fil går du til Konfigurering > Tema og klikker på Last opp og installer.

Slik er et tema bygget opp

Temamappe

En temamappe inneholder:

• config.xml: Temaets manifest: navn, overordnet tema, CSS- og JavaScript-filer, temaalternativer og skjermene som vises i malredigeringen.
• views/: Twig-malene. layout_global.twig er hovedoppsettet for de fleste undersøkelsessider. Andre oppsett brukes til spesialsider, for eksempel layout_survey_list.twig for den offentlige undersøkelseslisten og layout_errors.twig for feilsider. Mappen views/subviews/ inneholder de mindre malene som oppsettene inkluderer.
• css/ og scripts/: Temaets CSS- og JavaScript-filer.
• files/: Bilder og andre filer som temaet bruker.
• options/: Siden for temaalternativene.

Twig-maler

Malene mottar undersøkelsesdataene i variabelen aSurveyInfo. For å se alt den inneholder, slår du på feilsøkingsmodus i application/config/config.php og legger til denne linjen på slutten av body-elementet i layout_global.twig:

{{ dump(aSurveyInfo) }}

Du finner funksjonene du kan bruke i maler under Tilgjengelige Twig-funksjoner. Av sikkerhetshensyn kjører malene i en sandkasse, så bare disse funksjonene er tilgjengelige.

config.xml

Delen <files> viser CSS- og JavaScript-filene som lastes på undersøkelsessider:

• <add> legger til en fil. Hvis det overordnede temaet allerede har en fil med samme navn, erstatter filen din den.
• <remove> hindrer at en fil fra det overordnede temaet lastes.

Du trenger ikke å oppgi filer fra det overordnede temaet på nytt: de lastes uansett.

LimeSurvey leser config.xml når et tema installeres, og lagrer innstillingene i databasen. Etter at du har endret config.xml i et installert tema, går du til Konfigurering > Tema, åpner handlingsmenyen (⋯) for temaet og klikker på Nullstill for å laste filen på nytt.

Legge til din egen CSS og JavaScript

Hvert innebygd tema har to filer som er reservert for din egen kode:

• css/custom.css: Lastes etter alle andre CSS-filer, så reglene i den overstyrer temaets stiler.
• scripts/custom.js: Lastes etter temaets egen JavaScript.

Når du utvider et tema, er det disse filene du skal endre. Legg CSS-en din i custom.css i stedet for å redigere temaets hoved-CSS-filer, slik at temaet ditt fortsatt får oppdateringer fra det overordnede temaet.

For å legge til flere filer laster du dem opp og oppgir dem i delen <files> i temaets config.xml. Bruk et filnavn som ikke finnes i det overordnede temaet, ellers erstatter filen din filen i det overordnede temaet:

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

Undersøkelsessider lastes som standard med Ajax, så nettleseren laster ikke hele siden på nytt når en deltaker går til neste side. Kjør JavaScript-koden din både ved første sidelasting og ved hver Ajax-sidelasting:

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

Style spørsmål med CSS

Alle eksemplene i denne delen legges i temaets custom.css-fil.

Sideklasser

Elementene <html> og <body> har klasser du kan bruke til å style hele sider:

• html: Språkkoden (for eksempel en) og tekstretningen (dir-ltr eller dir-rtl).
• body: Navnet på temaet og på hvert overordnede tema (for eksempel fruity_twentythree), skriften (for eksempel font-ibm-sans), språket (for eksempel lang-en), og brand-logo når logoen vises.

Klasser for spørsmålsbeholderen

Hvert spørsmål er pakket inn i et element med klassen question-container. Det har også:

• Klassen for spørsmålstypen (se tabellen nedenfor).
• mandatory: Spørsmålet er obligatorisk eller mykt obligatorisk.
• input-error: Svaret besto ikke valideringen, eller et obligatorisk spørsmål ble ikke besvart.
• missing: Spørsmålet har fortsatt ubesvarte deler, og deltakeren har allerede gått videre fra det.
• ls-hidden og ls-irrelevant: Spørsmålet er skjult av betingelsen sin.
• ls-hidden-attribute: Spørsmålet er skjult av innstillingen «Skjul alltid dette spørsmålet».
• Alle klasser som er oppgitt i spørsmålets innstilling CSS-klasse(r) (under Vis). Bruk dette til å style enkeltspørsmål.

For eksempel et obligatorisk spørsmål av typen Liste (radioknapper) som ikke er besvart:

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

Klasser for spørsmålstyper

Spørsmålstype	Klasse	Typekode
5-punkts valg	.choice-5-pt-radio	5
Matrise	.array-flexible-row	F
Matrise (5-poengsvalg)	.array-5-pt	A
Matrise (10 poengsvalg)	.array-10-pt	B
Matrise (øk/uendret/reduser)	.array-increase-same-decrease	E
Matrise (tall)	.array-multi-flexi	:
Matrise (tekst)	.array-multi-flexi-text	;
Matrise (ja/usikker/nei)	.array-yes-uncertain-no	C
Matrise etter kolonne	.array-flexible-column	H
Matrise dobbel skala	.array-flexible-dual-scale	1
Dato/tid	.date	D
Ligning	.equation	*
Filopplasting	.upload-files	|
Kjønn	.gender	G
Ekstra lang fritekst	.text-huge	U
Språkvelger	.language	I
Liste (rullegardinliste)	.list-dropdown	!
Liste (radioknapper)	.list-radio	L
Liste med kommentar	.list-with-comment	O
Lang fritekst	.text-long	T
Flervalg	.multiple-opt	M
Flervalg med kommentarer	.multiple-opt-comments	P
Numerisk, flere	.numeric-multi	K
Flere korte tekstfelt	.multiple-short-txt	Q
Numerisk	.numeric	N
Rangering	.ranking	R
Kort fritekst	.text-short	S
Tekstvisning	.boilerplate	X
Ja/Nei	.yes-no	Y

Klasser for delene av et spørsmål

Inne i spørsmålsbeholderen bruker svarområdet disse klassene. Noen avhenger av spørsmålets visningsinnstillinger: for eksempel bruker Matrise (tall) andre klasser når det viser avmerkingsbokser i stedet for nedtrekksmenyer.

Klasse	Brukes til	Brukes av (eksempler)
.ls-answers	Elementet som inneholder alle svaralternativer	Alle spørsmålstyper
.answers-list	En liste eller rad med svaralternativer	Liste (radioknapper), Flervalg, Rangering, rader i de fleste matriser
.subquestion-list, .questions-list	En liste eller tabell med underspørsmål	Matriser, Flere korte tekstfelt, Numerisk, flere
.answer-item	Ett svaralternativ eller felt	Nesten alle spørsmålstyper
.noanswer-item	Alternativet «Ubesvart»	Matriser, 5-punkts valg, Liste med kommentar
.question-item	Et underspørsmål som også er et svar	Flervalg, Flere korte tekstfelt, Numerisk, flere
.radio-list	En liste eller rad med radioknapper	Liste (radioknapper), 5-punkts valg, Liste med kommentar, rader i radiomatriser
.radio-array	En tabell med radioknapper	Matrise, Matrise (5-poengsvalg), Matrise (10 poengsvalg), Matrise (øk/uendret/reduser), Matrise (ja/usikker/nei)
.radio-item	Én radioknapp med etikett	Liste (radioknapper), 5-punkts valg, Liste med kommentar, radiomatriser
.checkbox-list	En liste med avkryssingsbokser	Flervalg, Flervalg med kommentarer
.checkbox-array	En tabell med avkryssingsbokser	Matrise (tall) med visning av avkryssingsboks
.checkbox-item	Én avkryssingsboks med etikett	Flervalg, Flervalg med kommentarer, Matrise (tall) med visning av avkryssingsboks
.checkbox-text-item	En avkryssingsboks med tekstfelt	Flervalg med kommentarer
.comment-item	Kommentarfeltet ved siden av en avkryssingsboks	Flervalg med kommentarer
.text-list	En liste med tekstbokser	Flere korte tekstfelt, Numerisk, flere
.text-item	Én tekstboks	Kort, lang og ekstra lang fritekst, Flere korte tekstfelt, Matrise (tekst)
.number-list, .numeric-item	Numeriske felt	Numerisk, flere, Numerisk
.number-array	En tabell med numeriske felt	Matrise (tall), Matrise (tekst)
.text-array	En tabell med tekstbokser	Matrise (tekst), Matrise (tall)
.dropdown-array, .dropdown-list, .dropdown-item	Tabeller, rader og celler med nedtrekksmenyer	Matrise (tall), Matrise dobbel skala med nedtrekksmenyer
.date-item	Datofeltet	Dato/tid
.upload-item	Området for filopplasting	Filopplasting
.answertext	Teksten til underspørsmålet i en matriserad	Matriser
.col-answers	Kolonnen med tekster til underspørsmål	Matriser
.ls-heading	Overskriftsraden med svaralternativene	Matriser
.ls-odd, .ls-even	Vekslende rader	Matriser
.ls-label-xs-visibility	En etikett som bare er synlig på små skjermer og for skjermlesere	Celler i matriser
.ls-input-group-extra	Prefikset eller suffikset til et felt	Kort fritekst, Numerisk, Flere korte tekstfelt, Numerisk, flere
.ls-js-hidden	Skjult når JavaScript er aktivt	Matrise dobbel skala, Liste (radioknapper)
.ls-no-js-hidden	Skjult når JavaScript ikke er aktivt	Rangering
.ls-js-hidden-sr	Skjult når JavaScript er aktivt, men leses fortsatt opp av skjermlesere	Rangering

In Liste (radioknapper) har alternativet «Ubesvart» klassen no-anwser-item (med denne stavemåten) i stedet for noanswer-item.

Dette er for eksempel HTML-koden til svarene i et spørsmål av typen Liste (radioknapper):

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

Klasser for validering og tips

Valideringstips (for eksempel «Velg ett av alternativene» eller «Skriv inn et tall mellom 1 og 10») har alltid klassen ls-em-tip. Mens deltakeren svarer, legger LimeSurvey til ls-em-success når tipsets regel er oppfylt og ls-em-error når den ikke er det, slik at du kan style de to tilstandene ulikt. Tips som er skjult med spørsmålets innstilling Skjul tips får klassen hide-tip.

Hvert tips har også en klasse for typen:

Klasse	Tips
.em_default	Standardtipset for spørsmålstypen (for eksempel «Velg ett av alternativene»)
.em_num_answers	Minimum eller maksimum antall svar
.em_value_range	Minimums- eller maksimumsverdi
.em_sum_range	Minimum eller maksimum sum av verdiene
.em_sum_equals	Verdiene må summeres til et gitt totalbeløp
.em_value_integer	Bare heltall er tillatt
.em_numbers_only	Bare tall er tillatt
.em_other_numbers_only	Bare tall er tillatt i feltet «Annet»
.em_other_comment_mandatory	Alternativet «Annet» er valgt, men tekstfeltet er tomt
.em_regex_validation	Svaret må samsvare med valideringsmønsteret
.em_q_fn_validation	Spørsmålets valideringsligning
.em_sq_fn_validation	Valideringsligning for underspørsmål

Språk som skrives fra høyre mot venstre (RTL)

For språk som skrives fra høyre mot venstre har <html>-elementet klassen dir-rtl, og de innebygde temaene laster en RTL-versjon av hoved-CSS-filen sin. Bruk .dir-rtl i CSS-en din for regler som bare gjelder språk som skrives fra høyre mot venstre.

Tips og triks

Disse oppskriftene legges i custom.css (eller i en Twig-fil, der det er nevnt) i et tema du har utvidet fra et innebygd tema. Erstatt #c0392b i eksemplene med din egen farge.

Endre fargen på radioknapper og avkryssingsbokser

Hvis du vil bruke en av fargene som følger med Fruity TwentyThree, velger du en Temafarge i temaalternativene. I temaalternativene kan du også velge et annet Ikon for å avkrysse.

For andre farger legger du til CSS i custom.css. De innebygde temaene tegner sine egne radioknapper og avkryssingsbokser i stedet for nettleserens standardkontroller, så for å endre fargen må du endre disse tegnede elementene.

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

Sørg for nok kontrast mellom fargen og bakgrunnen, slik at deltakere med nedsatt syn fortsatt kan se hvilke svar som er valgt.

Gjør radioknapper og avkryssingsbokser større

Større radioknapper og avkryssingsbokser er enklere å trykke på på mobiler og nettbrett. Dette fungerer i alle innebygde temaer:

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

I Fruity TwentyThree legger du også til litt avstand mellom radioknappene og svarteksten:

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

Verdier opp til omtrent 1,4 fungerer uten flere endringer. Med større verdier begynner kontrollene å overlappe svarteksten og kantene på matriseradene på små skjermer, så du må også legge til mer plass rundt dem.

Endre fargen på fremdriftslinjen

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

Vis innhold bare på ett språk

<body>-elementet har en klasse med gjeldende språk, for eksempel lang-en eller lang-fr. Du kan bruke den til å vise ulikt innhold per språk, for eksempel en hjelpelinje i bunnteksten. Legg til teksten for hvert språk i en Twig-fil i temaet ditt, for eksempel 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>

Skjul deretter teksten for de andre språkene i custom.css:

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

Bruk en annen logo per undersøkelse

Du trenger ikke et eget tema for hver logo. Temaalternativer kan angis for én enkelt undersøkelse: Åpne undersøkelsen, klikk på Temaalternativer i menyen Innstillinger for undersøkelse, og velg en annen Logofil. Se Temaalternativer.

Vis et eget favicon

Et favicon er det lille ikonet som vises i nettleserfanen og i bokmerker. De innebygde temaene viser filen files/favicon.ico i temaet. Hvis du vil bruke ditt eget ikon, gir du det navnet favicon.ico og laster det opp i panelet Andre filer i det utvidede temaet ditt. Det erstatter ikonet fra overordnet tema.

Sentrer logoen i Fruity TwentyThree

Slå på Logo i temaalternativene, og legg deretter dette til i custom.css:

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

Legg til din egen logo i den offentlige undersøkelseslisten

Den offentlige undersøkelseslisten viser LimeSurvey-logoen som standard. Slik viser du din egen logo:

1. Utvid Fruity TwentyThree og åpne temaet ditt i malredigeringen.
2. Last opp logoen din i panelet Andre filer.
3. Velg skjermbildet Undersøkelser og åpne layout_survey_list.twig.
4. Finn <div>-elementet som inneholder {{ include('./ls_logo_svg.twig') }}. Erstatt hele dette <div>-elementet, inkludert include-linjen, med koden som vises under disse trinnene.
5. Klikk på Kopier til lokalt tema og lagre endringer.
6. Gå til Konfigurering > Globale innstillinger > Generelt og velg temaet ditt som Tema for offentlig undersøkelsesliste og feilsider.

Bruk navnet på den opplastede filen, og organisasjonens navn som alternativ tekst:

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

Legg til en skillelinje i matriser med dobbel skala

Slik tegner du en loddrett linje mellom de to skalaene i et spørsmål av typen Matrise dobbel skala:

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

JavaScript i spørsmål

Hvis du vil kjøre JavaScript på alle sider i undersøkelsene dine, legger du det i custom.js i temaet ditt (se ovenfor).

Du kan også legge til et skript i teksten til et enkelt spørsmål eller en enkelt gruppe. LimeSurvey fjerner skript fra disse tekstene med mindre XSS-filteret er slått av for brukeren din. Filteret gjelder aldri for superadministratorer. For andre brukere må Filtrer HTML for XSS være slått av under Konfigurering > Globale innstillinger > Sikkerhet. Gjør dette bare hvis du stoler på alle som kan redigere undersøkelser. For detaljer og eksempler, se Workarounds: Manipulating a survey at runtime using Javascript.