Actions

Tema redaktør

From LimeSurvey Manual

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

Introduktion

LimeSurvey har et avanceret tema- og stilsystem, der giver udviklere en effektiv måde at tilpasse undersøgelsens udseende. Siden LS3 er udtrykket "skabeloner" blevet erstattet med udtrykket "temaer". Temaer tillader kontrol over stilen på siderne i en undersøgelse. En undersøgelsesadministrator kan vælge et standardtema, der vil blive brugt til hver undersøgelse for yderligere at personliggøre den. Temaer kommer med muligheder, der giver en administrator uden kodefærdigheder en enkel måde at tilføje et logo på velkomstsiden, ændre baggrundsfarverne, vælge en skrifttype osv.


LimeSurvey kommer med 3 temaer. Disse indledende temaer er defineret af mapper placeret i LimeSurvey installationen "themes/survey/" bibliotek. Hvert tema har sin egen mappe. I hovedbiblioteket for et tema finder du en konfigurationsfil i XML og adskillige mapper, der indeholder visningerne temaer (.twig), cascading style sheets (.css), 'scripts, billeder ('.jpg eller .png), og måske andre.


Siden LimeSurvey 2.50 bruger temamotoren Bootstrap 3 som CSS-ramme. Da Bootstrap 3 er en standardramme, vil udviklere finde en masse dokumentation, tutorials og forumtråde om det på internettet.


Siden LimeSurvey 3 bruger temamotoren Twig, så temaudviklerne kan ændre logikken i undersøgelsesgengivelsen på en sikker og nem måde. Twig erstatter det gamle system med erstatningssøgeord, der blev brugt i de tidligere versioner. Logikken, der blev brugt til at generere HTML-koden for søgeordene, er nu tilgængelig i temaets visninger.


Uddrag fra Vanilla Theme:

 <div class="{{ aSurveyInfo.class.answercontainer }} col-xs-12" {{ aSurveyInfo.attr.answercontainer }}> 
 {# BEMÆRK: Hvis du vil tilpasse gengivelsen af spørgsmålet, skal du bruge et spørgsmålstema #}
 {{ aQuestion.answer |  }}
</div>

Temaer, som er HTML og Twig-kode, har en tendens til at definere placeringen og typen af tekst, der skal vises, og lignende strukturelle funktioner på siden. De henviser ofte til eller inkluderer andre filer. De fleste af dem refererer til en CSS-fil (common cascading style sheets), der definerer skrifttypestil, farve, størrelse, baggrund og lignende parametre, der er fælles for alle sider i undersøgelsen. Typografiark refererer til HTML klasse-parametre, der er knyttet til de forskellige typer objekter i HTML-koden. Dette gør det muligt for typografiarket at definere, hvordan hver af de mange typer tekst eller andre objekter, der kan vises flere steder, vises. Der er unikke klasser for hver spørgsmålstype i LimeSurvey og giver dermed detaljeret kontrol over udseendet af hvert spørgsmål. Billedfiler, som logoer eller specielle fremskridtslinje-konstruktører, kan også henvises til i temafilen. Til sidst erstattes specielle søgeord i krøllede klammer med tekst defineret i undersøgelsen for hver sprogoversættelseskorrespondent (f.eks. 'Survey Title' eller 'Spørgsmålstekst' for hvert defineret sprog).

Hvis du opretter et nyt brugerdefineret tema, skal du overveje at bidrage med det tilbage til LimeSurvey-fællesskabet og gøre det tilgængeligt for andre. Med din hjælp kan vi udvide vores lager af temaer, undersøgelser og andre tilføjelser for at gøre LimeSurvey endnu bedre! Se vores LimeSurvey skabelonlager, hvor du kan dele dine skabeloner.

Oprettelse af et nyt tema

For at kunne oprette et nyt tema (eller redigere et eksisterende tema), skal du have Skabelonredigering brugertilladelse i LimeSurvey samt tilladelse til at manipulere filerne i den underliggende operation system, der hoster din LimeSurvey-installation.

Bemærkning om advarsel: Hvis du ændrer temaer, kan du også påvirke alle de allerede eksisterende undersøgelser fra din LimeSurvey-installation. Temaer er en avanceret funktion, der kræver erfaring og HTML-kendskab.

Den foretrukne måde at oprette et nyt tema på er gennem Theme Editor (se nedenfor), som er placeret under Configuration på den øverste værktøjslinje. Nogle brugere foretrækker at arbejde direkte med temafiler, så de kan bruge deres foretrukne teksteditor i stedet for webgrænsefladen. I dette tilfælde skal du stadig bruge Theme Editor til først at oprette dit nye tema. Dette vil oprette et nyt basistema med alle de filer, du har brug for i mappen LimeSurvey_web_root/upload/themes/survey/your_new_template. Derfra kan du bruge din teksteditor til manuelt at justere skabelonfilerne.

Tilladelser Bemærk: på unix/linux-systemer vil disse temafiler være ejet af gruppen og brugeren, hvor webserveren kører (kan være "www" for nogle systemer). Så sørg for at du har de rigtige tilladelser til at redigere disse filer. Når du gemmer dem, så sørg for at de ikke ændrer ejerskab! På denne måde kan du stadig bruge grænsefladen til redigering af webtemaer, hvis det er nødvendigt.


En række 'offentlige' elementer i LimeSurvey kan justeres efter en række temaer. Det næste afsnit giver en meget kort forklaring af disse skabeloner.

Template:Bemærk

The LimeSurvey tema editor

Temaeditor: Konfiguration > Temaer> Temaeditor Temaeditoren er kun tilgængelig for brugere med tilladelsen Skabeloner og til superadministratorer.


  Opmærksomhed : Et tema, der ikke er korrekt konstrueret, kan forårsage, at en undersøgelse (der bruger den respektive skabelon) bliver ubrugelig.



LimeSurvey-temaeditoren giver dig mulighed for at redigere indholdet af dine temaer online. For at starte temaeditoren: klik på Temaer i menuen Konfiguration, og klik derefter på knappen Temaeditor ved siden af det tema, du vil redigere eller udvide.


Knappen til at få adgang til temaeditoren for Bootswatch-tema


Skabelonredigeringssiden giver dig mulighed for at vælge den skabelon, du ønsker at redigere/se.



Følgende muligheder er tilgængelige:


  • Opret: Giver dig mulighed for at oprette en ny skabelon. For ikke at starte fra bunden kopieres skabelonen 'default'.
  • Import: Giver dig mulighed for at importere en skabelon fra en ZIP-fil.
  • Eksporter : Giver dig mulighed for at eksportere den aktuelle skabelon til en ZIP-fil.
  • Kopier: Giver dig mulighed for at lave en ny skabelon ved at kopiere den nuværende.
  • Omdøb: Giver dig mulighed for at ændre navnet på skabelonen. Det bruges generelt efter kopiering eller import af en skabelon.
  • Skabelon: En rulleliste, der viser alle de tilgængelige skabeloner, der er placeret i din LimeSurvey-installation.
  • Skærm: En rulleliste, som giver dig mulighed for at vælge, hvilken undersøgelsesside i den skabelon, du vil se.
  • Vend tilbage til admin panel.

Importér/eksportér/kopiér en skabelon

Når du eksporterer en skabelon, oprettes et ZIP-filarkiv med alle skabelonfiler (.pstpl-filer, billeder, css-filer, ...). Du kan importere den eksporterede zip-fil til en anden LimeSurvey-installation ved at bruge importfunktionen, eller du kan manuelt kopiere arkivet til en anden LimeSurvey-installation og udpakke det til den tilsvarende skabelon mappe der.

Det er dog bedst at bruge LimeSurveys skabelon import/eksport/kopier funktioner i skabeloneditoren.

Sidestruktur / Skabelonbrug

  • Velkomstsiden: startpage.pstpl, welcome.pstpl, privacy.pstpl, navigator.pstpl, endpage.pstpl
  • 'Spørgsmålssiderne:' startpage.pstpl, survey.pstpl, startgroup.pstpl, groupdescription.pstpl, question.pstpl, endgroup.pstpl, endpage.pstpl
  • Den sidste side: startside .pstpl, assessment.pstpl, completed.pstpl, endpage.pstpl

Skabelonfiler

Følgende skabelonfiler bruges til at producere din offentlige undersøgelse og skal eksistere i enhver ny skabelonmappe, du opretter:

  • startpage.pstpl: Fremstiller starten på hver html-side. Det starter ved "<head> " tag, og bør ikke indeholde "<html> " tag. Denne 'meget begyndelsen' af en standard html-side er skrevet af scripts. Sørg for, at dine startpage.pstpl-filer indeholder en<body> tag. Selvom mange browsere ikke kræver streng overholdelse af W3 HTML-standarderne, skal LimeSurvey-scriptet finde et tag for at køre visse javascript-elementer. Det er ikke almindeligt at se mange 'søgeord' brugt i startpage.pstpl filen. Det kan dog være, du ønsker at indsætte {SURVEYNAME} i titlen. Startpage.pstpl-filen kan indeholde kode, der ender i den tilsvarende endpage.pstpl-fil. For eksempel kan du starte en tabel i denne fil og lukke tabellen i endpage.pstpl-filen. Startpage.pstpl- og endpage.pstpl-filerne omslutter alle mulige sider, der bruges af LimeSurvey.
  • survey.pstpl: Denne skabelon er den anden, der bruges på de fleste sider og giver plads til at indsætte undersøgelsesnavnet og beskrivelse. Denne skabelon har ikke en tilsvarende 'lukkende' skabelon, og efterfølgende bør du lukke alle tags, der er åbnet i denne skabelonfil (dvs.: lad ikke en tabel stå åben her, fordi der ikke er andre steder at lukke den).
  • ' welcome.pstpl:' Denne skabelon bruges kun i velkomstskærmen (som også er på hovedsiden for 'alt i én'-undersøgelser). Du kan bruge dette til at udskrive velkomstteksten og andre oplysninger, der bør gives i introduktionen. Ligesom filen 'survey.pstpl' er der ingen tilsvarende 'lukkende' skabelon, så alle tags, der åbnes i denne skabelonfil, bør også lukkes.
  • startgroup.pstpl: Denne skabelon kan give et 'resumé'-omslag for spørgsmål inden for en gruppe. Den har en matchende 'endgroup.pstpl'-skabelon, der kan bruges til at lukke alle åbnede tags i denne fil, så du kan åbne en tabel i denne.
  • groupdescription.pstpl: Denne skabelonfil er bruges til at vise en beskrivelse af en gruppe. Bemærk venligst, at du i undersøgelsesindstillingerne (få adgang til Præsentations- og navigationsindstillinger ved at klikke på fanen Presentation) kan indstille, om gruppebeskrivelsen skal vises eller ej. Hvis ikke, er denne fil slet ikke inkluderet.
  • question.pstpl: Denne fil indeholder spørgsmål, svar og hjælpetekstsektioner i din undersøgelse. I undersøgelserne "gruppe for gruppe" og "alt i én" cykles denne skabelon gentagne gange med hvert spørgsmål. Der er ingen tilsvarende afsluttende fil til dette, og alle tags bør lukkes.
  • question_start.pstpl: Denne fil indeholder de individuelle elementer, der findes i starten af et spørgsmål. Det er inkluderet i 'question.pstpl' via søgeordet {QUESTION}. Det er beregnet til at give skabelondesignere mere kontrol over layoutet af et spørgsmål. Denne skabelon ligger uden for det normale skabelonsystem og blev erstattet (fra LimeSurvey 1.87). Alle søgeord fra denne skabelon er nu tilgængelige direkte i question.pstpl.
  • completed.pstpl: Denne side vises som den sidste side, når undersøgelsens svar er blevet gemt, og undersøgelsen er slut. Den kan bruges til at vise et "videresendelseslink" som angivet i undersøgelsesopsætningen.
  • endgroup.pstpl: Denne fil lukker gruppen og kan bruges til at lukke alle tags, der er åbnet i startgroup.pstpl fil
  • navigator.pstpl: Denne fil indeholder de knapper, der navigerer gennem undersøgelsen, "næste", "forrige", "sidste", "send", "gem indtil videre" og linket "ryd alt". Den bruges på alle sider undtagen den udfyldte side.
  • printanswers.pstpl: Denne fil har den HTML-indpakning, der er nødvendig for den trykte version af undersøgelsen.
  • print_group.pstpl : Denne fil er den samme som startgroup.pstpl og endgroup.pstpl, men for den trykte version af undersøgelsen.
  • print_question.pstpl: Denne fil er den samme som question.pstpl , men for den trykte version af undersøgelsen.
  • print_survey.pstpl: Denne fil er den samme som survey.pstpl, men for den trykte version af undersøgelsen.

CSS og Javascript

To filer, der altid bruges i en skabelon, er template.css (til CSS) og template.js (til Javascript).

  • {TEMPLATECSS}: Tilføj linjer til standard css, template.css, og template-rtl.css for rtl-sprog.
  • {TEMPLATEJS}: Tilføj linjer til standard javascript-filer, template.js og alle js-filer, der er nødvendige for LimeSurvey.

Brug af Bootstrap

LimeSurvey har Bootstrap 3 indlejret, så du kan style alle dine skabeloner med de veldokumenterede Bootstrap-klasser. For mere information henvises til Bootstrap dokumentation.

Pluginnet Awesome-Bootstrap-Checkbox er også inkluderet. Med den kan du bruge de typiske Bootstrap-farveklasser (info, advarsel, fare, osv.) også med suffikset "-checkbox" eller "-radio", dog stil afkrydsningsfelter og radioer, som du foretrækker.

Erstatter standard CSS eller Javascript

Nogle spørgsmål bruger specifikke filer til Javascript eller CSS. Hvis du skal udskifte en funktion, skal du bruge et kaskadesystem. For javascript-funktion er den sidst læste funktion den anvendte funktion.

Andre skabelonfiler

privacy.pstpl, invitationemail.pstpl, reminderemail.pstpl og confirmationemail.pstpl bruges ikke længere af LimeSurvey, og standardindstillingerne er i stedet indstilles i de relevante sprogfiler. E-mail-beskederne kan nu redigeres på en undersøgelse for undersøgelse.

Standardsider

Der er ti standardsider, som en undersøgelsesdeltager kan se i løbet af at tage eller få adgang til LimeSurvey-applikationen. Hver er konstrueret ud fra et antal almindelige Skabelon-filer fra Skabelonen angivet i indstillingerne for undersøgelsen. Tabellen nedenfor angiver, hvilke skabelonfiler der bruges til at konstruere hver af disse sider.

Undersøgelsessider/
Skabelonfiler
Survey
Liste
Velkommen Spørgsmål Udført Slet alle Tilmeld Indlæs Gem Udskriv
Svar
Udskriv
Survey
SurveyList
Velkommen
Beskyttelse af personlige oplysninger
Navigator
Survey
Startgruppe
Gruppebeskrivelse
Spørgsmål *
EndGroup
Vurdering
Udført
ClearAll
Tilmeld
Load
Gem
PrintAnswers
Udskriv undersøgelse
Udskriftsgruppe
Udskriv spørgsmål
Startside
Slutside
Template.css

* BEMÆRK: I version 1.90+ erstatter dette question.pstpl OG question_start.pstpl. Hvis du bruger en gammel brugerdefineret skabelon, skal du tilføje følgende linje til begyndelsen af question.pstpl:

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

Og tilføj derefter det tilsvarende afsluttende tag til slutningen af question.pstpl:

</div>

* BEMÆRK: I version 1.91 og tidligere er LimeSurvey js-filer ikke inkluderet i skabelonen. I version 2, skal du bruge {TEMPLATEJS} i en af dine skabelonfiler for at tilføje linket til js-filen. Du kan tilføje det i startpage.pstpl eller i endpage.pstpl. Du kan fjerne linjen {TEMPLATEURL}/template.js, og du skal erstatte med {TEMPLATEJS} for at opdatere en personlig skabelon.

Filkontrolafsnittet

I vinduet "filkontrol" til venstre kan du klikke på en af skabelonfilerne, der bruges til at kompilere siden. Du kan se Skærmdelen, JavaScript og CSS-filer. HTML-koden for den pågældende fil vises derefter i vinduet "Redigering nu" i midten. Hvis skabelonen er redigerbar (bestemt af mappetilladelser), kan du derefter foretage eventuelle ændringer og gemme dem.


Vinduet "Andre filer" viser en liste over alle andre filer fra skabelonmappen. Du kan bruge højre side til at uploade og vælge billedfiler (dine billeder, logoer,...) eller andre filer, der er nødvendige for at oprette din skabelon.


I stedet for at bruge et link til hvert billede, skal du bruge feltstrengen {TEMPLATEURL}. Så i stedet for:

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

Du kan bruge (New in 2.50 ):

 img src='{TEMPLATEURL}filer/mitbillede.jpg'

I LimeSurvey-versioner før 2.50 brug:

 img src='{TEMPLATEURL}mitbillede.jpg'

Et "eksempel" af skabelonsiden, du redigerer, vil være synligt nederst på skærmen. Der er ingen måde at slette en skabelon fra skabeloneditoren. Dette skal gøres ved at tilgå den underliggende mappe og manuelt slette filerne derfra. Du har også mulighed for at vælge forskellige skærmopløsninger for bedre at kunne vurdere skabelonens fornemmelse og udseende.

Bemærk: De afsendte skabeloner kan ikke redigeres ved hjælp af skabeloneditoren. Hvis du vil ændre dem, skal du først oprette en kopi og redigere kopien.

Skabelonfilers placering

LimeSurvey gemmer hver af 'standard'-skabelonerne i deres egen særskilte undermappe i /templates-mappen, der opbevares i den offentlige mappe med de andre offentlige LimeSurvey-filer. Tilpassede brugerskabeloner er gemt i mappen /upload/skabeloner.

Der skal ALTID være en "standard" mappe i skabelonmappen. Denne skabelon bruges som standard og som en reserve, hvis en skabelonmappe ikke findes eller ikke kan findes. Det kommer installeret som standard.

Du kan bruge alle billedfiler, som du uploader til skabelonstyringsområdet ved hjælp af denne syntaks:

{TEMPLATEURL}filnavn.xyz

Stylingspørgsmål med CSS

Styling af spørgsmål i CSS er blevet meget nemmere. Hver spørgsmålstype har nu en unik klasse. De obligatoriske spørgsmål har en ekstra obligatorisk klasse. For eksempel for et ikke-obligatorisk spørgsmål:

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

og hvis spørgsmålet er obligatorisk:

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

og hvis spørgsmålet er obligatorisk, men brugeren ikke besvarede det, eller hvis der er validering på et spørgsmål:

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

og hvis spørgsmålet har valideret, men brugeren ikke har svaret korrekt:

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

Globale klasser for spørgsmålsdelen

Disse klasser bruges til hver spørgsmålstype. Nogle spørgsmålstyper bruger kun en eller to klasser, mens andre kan bruge meget mere.

Globale klasser
Klassenavn Del Spørgsmålstype Eksempler Bemærk
.spørgsmål (Obsolete since 3.0) Alle spørgsmål blok Alle spørgsmålstype

,

    ,
    .ls-svar (New in 3.0 ) Alle spørgsmål blok Alle spørgsmålstype
    ,
      ,
      .subquestions-list Liste over underspørgsmål Flervalgsspørgsmål, matrixspørgsmålstype
        ,
        .questions-list bruges også
        .svar-liste Liste over svar Enkeltvalgsspørgsmål, array-spørgsmålstype, Multi-input tekstspørgsmål
          ,
          .svar-punkt Svardelen: ét svar Enkeltvalgsspørgsmål, array-spørgsmålstype, Multi-input tekstspørgsmål
        • ,
        • .intet svar-emne Svardelen for intet svar Enkeltvalgsspørgsmål, matrixspørgsmålstype
        • ,
        • Intet svar er også et svar, så hav dobbelt klasse intet svar-punkt og svar-punkt
          .spørgsmål Spørgsmålsdelen: ét spørgsmål Multitekstspørgsmål, matrixspørgsmålstype
        • ,
        • Nogle svar er også spørgsmål. Så har vi en masse class="question-item answer-item"
          .knap-liste En liste over knap Ja nej og kønsspørgsmål
          .knap-emne Svardelen med en knap Ja nej og kønsspørgsmål
        • .checkbox-list En liste over checkbox Flervalgsspørgsmål, matrixnummer (afkrydsningsfelt) spørgsmålstype
            ,
          Nogle spørgsmålstyper bruger multi-list klasse, som afkrydsningsfelt med kommentar: class="checkbox-list text-list"
          .checkbox-array (New in 3.0 ) En række afkrydsningsfelter Array (tal) med mulighed for afkrydsningsfelt
          .checkbox-item Svardelen med et afkrydsningsfelt Flervalgsspørgsmål, matrixnummer (afkrydsningsfelt) spørgsmålstype
        • ,
        • .radio-liste En liste over radioelementer Enkeltvalgsspørgsmål, matrixspørgsmålstype (hver række)
            ,
          .radio-array (New in 3.0 ) En række radioelementer Matrixspørgsmålstype
          .radio-item Svardelen med en radio Enkeltvalgsspørgsmål, matrixspørgsmålstype
        • ,
        • .tekst-liste En liste over tekstinput Multitekst spørgsmålstype, række af tekst
            ,
          .tekst-item Svardelen af en tekstinput Multitekst spørgsmålstype, række af tekst
        • ,
        • .numeric-list En liste over tekstinput med kun numerisk svar Multinumerisk spørgsmålstype, række af tal
            ,
          .number-list En liste over tekstinput med kun numerisk svar (hver række) Multinumerisk spørgsmålstype, række af tal
            ,
          .number-array (New in 3.0 ) Svardelen af et numerisk input Array af nummer
          .select-list (Obsolete since 2.50) En liste over udvalgte Array-numre, Dobbeltskala-array (vælg)
          .dropdown-liste (New in 2.50 ) En liste over udvalgte Array-numre, Dobbeltskala-array (vælg) (hver række)