Penyunting tema

Pendahuluan

Tema survei mengatur tampilan survei Anda bagi peserta: tata letak halaman, warna, font, logo, dan gaya setiap pertanyaan. Tema dibuat dengan templat Twig, CSS, dan JavaScript, serta menggunakan Bootstrap 5 sebagai kerangka kerja CSS-nya.

Banyak perubahan umum yang sama sekali tidak memerlukan kode. Logo, warna, font, dan beberapa pengaturan tampilan dapat diubah melalui opsi tema. Gunakan penyunting tema yang dijelaskan di halaman ini jika Anda ingin melangkah lebih jauh: menambahkan CSS atau JavaScript Anda sendiri, mengubah HTML sebuah halaman, atau mengunggah gambar dan file lain untuk tema Anda.

LimeSurvey dilengkapi dengan tema survei inti berikut:

• Fruity TwentyThree (fruity_twentythree): Tema default.
• Bootstrap Vanilla (vanilla): Tema dasar sederhana bagi pengembang yang ingin membuat tema berbasis Bootstrap sendiri.
• Fruity (fruity) dan Bootswatch (bootswatch): Keduanya memperluas Bootstrap Vanilla.

Tampilan setiap jenis pertanyaan diatur oleh tema pertanyaan, bukan oleh tema survei. Untuk mengubah HTML sebuah jenis pertanyaan, buat tema pertanyaan.

Sebelum memulai

Untuk menggunakan penyunting tema, Anda memerlukan izin global Tema (lihat izin global) atau harus menjadi superadministrator. Memperluas tema memerlukan hak Buat, menyimpan perubahan memerlukan Perbarui, dan menghapus tema atau menyetel ulang file memerlukan Hapus.

  Tema yang mengandung kesalahan dapat membuat setiap survei yang menggunakannya tidak dapat dipakai. Uji perubahan Anda dengan pratinjau survei sebelum menggunakan tema tersebut pada survei yang sedang berjalan.

Tema inti tidak dapat diedit: perluas tema tersebut

Tema inti diperbarui bersama LimeSurvey, sehingga Anda tidak dapat mengubahnya secara langsung. Untuk menyesuaikannya, perluas tema tersebut. Memperluas akan membuat tema pengguna baru yang mewarisi semuanya dari tema induknya. Tema Anda hanya berisi file yang Anda ubah; selebihnya diambil dari tema induk. Dengan cara ini, tema Anda tetap mendapatkan perbaikan bug dan peningkatan ketika LimeSurvey memperbarui tema induk.

Untuk memperluas tema, lakukan salah satu dari berikut:

• Buka Konfigurasi > Tema, buka menu tindakan (⋯) di ujung baris tema, lalu klik Perpanjang, atau
• Buka tema di penyunting tema dan klik Perpanjang di bilah alat.

Masukkan nama untuk tema baru. Penyunting tema kemudian akan membuka tema baru Anda.

Lokasi penyimpanan tema

• Tema inti: themes/survey/ di instalasi LimeSurvey Anda.
• Tema pengguna (tema yang diperluas, diunggah, atau diimpor): upload/themes/survey/.

Anda juga dapat mengedit file tema pengguna langsung di server dengan editor Anda sendiri. Pastikan server web tetap dapat membaca dan menulis file tersebut setelahnya, sehingga Anda tetap dapat menggunakan penyunting tema.

Penyunting tema

Untuk membuka penyunting tema, buka Konfigurasi > Tema, buka menu tindakan (⋯) di ujung baris tema, lalu klik Penyunting tema.

Jika Anda membuka tema inti, sebuah catatan akan memberi tahu bahwa ini adalah tema standar dan menyediakan tautan untuk memperluasnya. Anda dapat melihat file dan pratinjaunya, tetapi tidak dapat menyimpan perubahan.

Bilah alat

• Ekspor: Mengunduh tema sebagai file ZIP.
• Perpanjang: Membuat tema baru yang mewarisi tema ini (lihat di atas).
• Ganti nama: Mengganti nama tema. Hanya tersedia untuk tema pengguna.
• Hapus: Menghapus tema. Anda tidak dapat menghapus tema yang ditetapkan sebagai tema default.
• Tema: Mengalihkan penyunting tema ke tema lain.
• Layar: Memilih halaman survei yang ditampilkan di pratinjau dan file yang dicantumkan untuk diedit. Layar yang tersedia adalah: Pertanyaan, Daftar survei, Selamat datang, Selesai, Penilaian, Kesalahan, Hapus semua, Muat, Simpan, Pendaftaran, Cetak jawaban, Statistik publik, PDF, Kuota terlampaui, Navigasi, dan Peserta.

Mengedit file

Panel di sebelah kanan mencantumkan file yang digunakan oleh layar yang dipilih:

• File bagian layar: Templat Twig yang membangun halaman.
• File JavaScript
• File CSS
• Berkas lain: Gambar, font, dan file lain dari tema.

Klik nama file untuk membukanya di editor. File yang ditandai Diwarisi berasal dari tema induk. Anda tetap dapat mengedit file yang diwarisi: tombol di bawah editor kemudian bertuliskan Salin ke tema lokal dan simpan perubahan, dan penyimpanan akan menyalin file ke tema Anda beserta perubahan Anda. Sejak saat itu, salinan Anda digunakan menggantikan file milik tema induk.

File yang termasuk dalam tema Anda memiliki tombol Setel ulang. Setel ulang akan menghapus salinan Anda, sehingga file dari tema induk digunakan kembali.

Mengunggah file

Gunakan kolom unggah di bagian bawah panel Berkas lain untuk menambahkan gambar, font, atau file lain ke tema Anda. File yang diunggah disimpan di folder files/ milik tema. Secara default, Anda dapat mengunggah gambar (gif, ico, jpg, jpeg, png) dan jenis file berikut: css, js, map, json, eot, otf, ttf, woff, woff2, txt, md, xml, twig, lss, lsa, lsq, dan lsg. Administrator Anda dapat mengubah daftar ini melalui pengaturan allowedthemeimageformats dan allowedthemeuploads di config.php.

Untuk menampilkan gambar yang diunggah di file Twig, gunakan fungsi image():

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

Di file CSS, rujuk file yang diunggah dengan path relatif terhadap folder css, misalnya url('../files/background.jpg').

Pratinjau

Di bawah editor, pratinjau menampilkan layar yang dipilih beserta konten contoh. Gunakan tombol Mobile, 640x480, 800x600, 1024x768 dan Penuh untuk memeriksa halaman pada berbagai ukuran layar.

Pratinjau menggunakan data contoh dan mungkin tidak menampilkan setiap gaya persis seperti pada survei sebenarnya. Selalu periksa juga perubahan Anda di pratinjau survei yang sebenarnya.

Mengimpor dan mengekspor tema

• Untuk memindahkan tema ke instalasi LimeSurvey lain, klik Ekspor di toolbar penyunting tema. Tema akan diunduh sebagai file ZIP.
• Untuk memasang tema dari file ZIP, buka Konfigurasi > Tema lalu klik Unggah & pasang.

Cara tema dibangun

Folder tema

Folder tema berisi:

• config.xml: Manifes tema: nama, tema induk, file CSS dan JavaScript, opsi tema, serta layar yang ditampilkan di penyunting tema.
• views/: Template Twig. layout_global.twig adalah tata letak utama untuk sebagian besar halaman survei. Tata letak lain digunakan untuk halaman khusus, misalnya layout_survey_list.twig untuk daftar survei publik dan layout_errors.twig untuk halaman kesalahan. Folder views/subviews/ berisi template yang lebih kecil yang disertakan oleh tata letak.
• css/ dan scripts/: File CSS dan JavaScript milik tema.
• files/: Gambar dan file lain yang digunakan oleh tema.
• options/: Halaman untuk opsi tema.

Template Twig

Template menerima data survei dalam variabel aSurveyInfo. Untuk melihat seluruh isinya, aktifkan mode debug di application/config/config.php dan tambahkan baris ini di akhir elemen body pada layout_global.twig:

{{ dump(aSurveyInfo) }}

Untuk fungsi yang dapat Anda gunakan di template, lihat Fungsi Twig yang tersedia. Demi keamanan, template dijalankan dalam sandbox, sehingga hanya fungsi-fungsi tersebut yang tersedia.

config.xml

Bagian <files> mencantumkan file CSS dan JavaScript yang dimuat pada halaman survei:

• <add> menambahkan sebuah file. Jika tema induk sudah memiliki file dengan nama yang sama, file Anda akan menggantikannya.
• <remove> mencegah sebuah file dari tema induk dimuat.

Anda tidak perlu mencantumkan ulang file dari tema induk: file tersebut tetap dimuat.

LimeSurvey membaca config.xml saat tema dipasang dan menyimpan pengaturannya di basis data. Setelah Anda mengubah config.xml dari tema yang telah terpasang, buka Konfigurasi > Tema, buka menu tindakan (⋯) tema tersebut lalu klik Setel ulang untuk memuat ulang file.

Menambahkan CSS dan JavaScript Anda sendiri

Setiap tema inti memiliki dua file yang disediakan untuk kode Anda sendiri:

• css/custom.css: Dimuat setelah semua file CSS lain, sehingga aturannya menimpa gaya tema.
• scripts/custom.js: Dimuat setelah JavaScript bawaan tema.

Saat Anda memperluas tema, inilah file yang perlu diubah. Tambahkan CSS Anda ke custom.css alih-alih mengedit file CSS utama tema, agar tema Anda tetap mendapatkan pembaruan dari tema induk.

Untuk menambahkan file lain, unggah file tersebut dan cantumkan di bagian <files> pada config.xml tema Anda. Gunakan nama file yang tidak ada di tema induk, jika tidak file Anda akan menggantikan file induk:

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

Halaman survei dimuat dengan Ajax secara default, sehingga browser tidak memuat ulang seluruh halaman saat peserta berpindah ke halaman berikutnya. Jalankan JavaScript Anda pada pemuatan halaman pertama maupun pada setiap pemuatan halaman Ajax:

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

Menata gaya pertanyaan dengan CSS

Semua contoh di bagian ini dimasukkan ke dalam file custom.css tema Anda.

Kelas halaman

Elemen <html> dan <body> memiliki kelas yang dapat Anda gunakan untuk menata gaya seluruh halaman:

• html: Kode bahasa (misalnya en) dan arah teks (dir-ltr atau dir-rtl).
• body: Nama tema dan setiap tema induk (misalnya fruity_twentythree), font (misalnya font-ibm-sans), bahasa (misalnya lang-en), dan brand-logo saat logo ditampilkan.

Kelas kontainer pertanyaan

Setiap pertanyaan dibungkus dalam elemen dengan kelas question-container. Elemen ini juga memiliki:

• Kelas jenis pertanyaan (lihat tabel di bawah).
• mandatory: Pertanyaan bersifat wajib atau wajib lunak.
• input-error: Jawaban tidak lolos validasi, atau pertanyaan wajib tidak dijawab.
• missing: Pertanyaan masih memiliki bagian yang belum dijawab dan peserta sudah melewatinya.
• ls-hidden dan ls-irrelevant: Pertanyaan disembunyikan oleh kondisinya.
• ls-hidden-attribute: Pertanyaan disembunyikan oleh pengaturan "Selalu sembunyikan pertanyaan ini".
• Kelas apa pun yang dimasukkan pada pengaturan Kelas CSS pertanyaan (di bawah Tampilan). Gunakan ini untuk menata gaya pertanyaan tertentu.

Misalnya, pertanyaan Daftar (pilihan) yang wajib dan belum dijawab:

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

Kelas jenis pertanyaan

Jenis pertanyaan	Kelas	Kode jenis
Pilihan 5 poin	.choice-5-pt-radio	5
Larik	.array-flexible-row	F
Larik (pilihan 5 poin)	.array-5-pt	A
Larik (pilihan 10 poin)	.array-10-pt	B
Larik (Meningkat/Sama/Menurun)	.array-increase-same-decrease	E
Larik (Angka)	.array-multi-flexi	:
Larik (Teks)	.array-multi-flexi-text	;
Larik (Ya/Tidak yakin/Tidak)	.array-yes-uncertain-no	C
Larik menurut kolom	.array-flexible-column	H
Larik dua skala	.array-flexible-dual-scale	1
Tanggal/Waktu	.date	D
Persamaan	.equation	*
Unggahan berkas	.upload-files	|
Jenis kelamin	.gender	G
Teks bebas besar	.text-huge	U
Ubah bahasa	.language	I
Daftar (Tarik-turun)	.list-dropdown	!
Daftar (Pilihan)	.list-radio	L
Daftar dengan komentar	.list-with-comment	O
Teks bebas panjang	.text-long	T
Pilihan ganda	.multiple-opt	M
Pilihan ganda dengan komentar	.multiple-opt-comments	P
Beberapa input numerik	.numeric-multi	K
Beberapa teks pendek	.multiple-short-txt	Q
Input numerik	.numeric	N
Peringkat	.ranking	R
Teks bebas singkat	.text-short	S
Tampilan teks	.boilerplate	X
Ya/Tidak	.yes-no	Y

Kelas untuk bagian-bagian pertanyaan

Di dalam kontainer pertanyaan, area jawaban menggunakan kelas-kelas berikut. Beberapa bergantung pada pengaturan tampilan pertanyaan: misalnya, Larik (Angka) menggunakan kelas yang berbeda saat menampilkan kotak centang alih-alih daftar tarik-turun.

Class	Digunakan untuk	Digunakan oleh (contoh)
.ls-answers	Elemen yang memuat semua opsi jawaban	Semua jenis pertanyaan
.answers-list	Daftar atau baris opsi jawaban	Daftar (Pilihan), Pilihan ganda, Peringkat, baris pada sebagian besar larik
.subquestion-list, .questions-list	Daftar atau tabel subpertanyaan	Larik, Beberapa teks pendek, Beberapa input numerik
.answer-item	Satu opsi jawaban atau input	Hampir semua jenis pertanyaan
.noanswer-item	Opsi "Tidak dijawab"	Larik, Pilihan 5 poin, Daftar dengan komentar
.question-item	Subpertanyaan yang sekaligus menjadi jawaban	Pilihan ganda, Beberapa teks pendek, Beberapa input numerik
.radio-list	Daftar atau baris tombol radio	Daftar (Pilihan), Pilihan 5 poin, Daftar dengan komentar, baris pada larik tombol radio
.radio-array	Tabel tombol radio	Larik, Larik (pilihan 5 poin), Larik (pilihan 10 poin), Larik (Meningkat/Sama/Menurun), Larik (Ya/Tidak yakin/Tidak)
.radio-item	Satu tombol radio beserta labelnya	Daftar (Pilihan), Pilihan 5 poin, Daftar dengan komentar, larik tombol radio
.checkbox-list	Daftar kotak centang	Pilihan ganda, Pilihan ganda dengan komentar
.checkbox-array	Tabel kotak centang	Larik (Angka) dengan tata letak kotak centang
.checkbox-item	Satu kotak centang beserta labelnya	Pilihan ganda, Pilihan ganda dengan komentar, Larik (Angka) dengan tata letak kotak centang
.checkbox-text-item	Kotak centang dengan kolom teks	Pilihan ganda dengan komentar
.comment-item	Kolom komentar di samping kotak centang	Pilihan ganda dengan komentar
.text-list	Daftar masukan teks	Beberapa teks pendek, Beberapa input numerik
.text-item	Satu masukan teks	Teks bebas singkat, panjang, dan besar, Beberapa teks pendek, Larik (Teks)
.number-list, .numeric-item	Input numerik	Beberapa input numerik, Input numerik
.number-array	Tabel input numerik	Larik (Angka), Larik (Teks)
.text-array	Tabel masukan teks	Larik (Teks), Larik (Angka)
.dropdown-array, .dropdown-list, .dropdown-item	Tabel, baris, dan sel dengan daftar tarik-turun	Larik (Angka), Larik dua skala dengan daftar tarik-turun
.date-item	Input tanggal	Tanggal/Waktu
.upload-item	Area unggahan berkas	Unggahan berkas
.answertext	Teks subpertanyaan dalam baris larik	Larik
.col-answers	Kolom teks subpertanyaan	Larik
.ls-heading	Baris header dengan opsi jawaban	Larik
.ls-odd, .ls-even	Baris yang berselang-seling	Larik
.ls-label-xs-visibility	Label yang hanya terlihat pada layar kecil dan oleh pembaca layar	Sel pada larik
.ls-input-group-extra	Prefiks atau sufiks sebuah input	Teks bebas singkat, Input numerik, Beberapa teks pendek, Beberapa input numerik
.ls-js-hidden	Disembunyikan saat JavaScript aktif	Larik dua skala, Daftar (Pilihan)
.ls-no-js-hidden	Disembunyikan saat JavaScript tidak aktif	Peringkat
.ls-js-hidden-sr	Disembunyikan saat JavaScript aktif, tetapi tetap dibaca oleh pembaca layar	Peringkat

Pada Daftar (Pilihan), opsi "Tidak dijawab" memiliki class no-anwser-item (dengan ejaan ini), bukan noanswer-item.

Sebagai contoh, berikut HTML dari jawaban pertanyaan Daftar (Pilihan):

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

Class validasi dan keterangan

Keterangan validasi (seperti "Pilih salah satu dari jawaban berikut" atau "Masukkan angka antara 1 dan 10") selalu memiliki class ls-em-tip. Saat peserta menjawab, LimeSurvey menambahkan ls-em-success jika aturan keterangan terpenuhi dan ls-em-error jika tidak, sehingga Anda dapat menata kedua kondisi tersebut secara berbeda. Keterangan yang disembunyikan dengan pengaturan Sembunyikan keterangan pada pertanyaan mendapat class hide-tip.

Setiap keterangan juga memiliki class sesuai jenisnya:

Class	Keterangan
.em_default	Keterangan bawaan jenis pertanyaan (misalnya "Pilih salah satu dari jawaban berikut")
.em_num_answers	Jumlah jawaban minimum atau maksimum
.em_value_range	Nilai minimum atau maksimum
.em_sum_range	Jumlah nilai minimum atau maksimum
.em_sum_equals	Nilai harus berjumlah total tertentu
.em_value_integer	Hanya bilangan bulat yang diizinkan
.em_numbers_only	Hanya angka yang diizinkan
.em_other_numbers_only	Hanya angka yang diizinkan pada kolom "Lainnya"
.em_other_comment_mandatory	Opsi "Lainnya" dipilih tetapi kolom teksnya kosong
.em_regex_validation	Jawaban harus cocok dengan pola validasi
.em_q_fn_validation	Persamaan validasi pertanyaan
.em_sq_fn_validation	Persamaan validasi subpertanyaan

Bahasa dengan arah kanan-ke-kiri (RTL)

Untuk bahasa dengan arah kanan-ke-kiri, elemen <html> memiliki class dir-rtl dan tema inti memuat versi RTL dari file CSS utamanya. Gunakan .dir-rtl di CSS Anda untuk aturan yang hanya berlaku bagi bahasa kanan-ke-kiri.

Tips & trik

Resep-resep ini dimasukkan ke custom.css (atau file Twig, jika disebutkan) pada tema yang Anda perluas dari tema inti. Pada contoh, ganti #c0392b dengan warna Anda sendiri.

Mengubah warna tombol radio dan kotak centang

Untuk menggunakan salah satu warna bawaan Fruity TwentyThree, pilih Theme color di opsi tema. Opsi tema juga memungkinkan Anda memilih Ikon centang yang berbeda.

Untuk warna lainnya, tambahkan CSS ke custom.css. Tema inti menggambar sendiri tombol radio dan kotak centangnya, bukan memakai bawaan browser, sehingga mengubah warna berarti mengubah elemen gambar tersebut.

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, dan 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;
}

Jaga kontras yang cukup antara warna dan latar belakang, agar peserta dengan penglihatan lemah tetap dapat melihat jawaban mana yang dipilih.

Memperbesar tombol radio dan kotak centang

Tombol radio dan kotak centang yang lebih besar lebih mudah diketuk di ponsel dan tablet. Ini berfungsi di semua tema inti:

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

Di Fruity TwentyThree, tambahkan juga sedikit jarak antara tombol radio dan teks jawaban:

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

Nilai hingga sekitar 1,4 berfungsi tanpa perubahan lain. Dengan nilai yang lebih besar, kontrol mulai tumpang tindih dengan teks jawaban dan tepi baris larik pada layar kecil, sehingga Anda juga perlu menambah jarak di sekitarnya.

Mengubah warna bilah kemajuan

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

Menampilkan konten hanya dalam satu bahasa

Elemen <body> memiliki class dengan bahasa saat ini, seperti lang-en atau lang-fr. Anda dapat menggunakannya untuk menampilkan konten yang berbeda per bahasa, misalnya baris bantuan di footer. Tambahkan teks untuk setiap bahasa ke file Twig tema Anda, seperti 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>

Lalu sembunyikan teks bahasa lainnya di custom.css:

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

Menggunakan logo berbeda untuk setiap survei

Anda tidak memerlukan tema terpisah untuk setiap logo. Opsi tema dapat diatur untuk satu survei: buka survei, klik Opsi tema di menu Pengaturan survei, lalu pilih File logo yang berbeda. Lihat Opsi tema.

Menampilkan favicon kustom

Favicon adalah ikon kecil yang ditampilkan pada tab browser dan di bookmark. Tema inti menampilkan file files/favicon.ico dari tema. Untuk menggunakan ikon Anda sendiri, beri nama favicon.ico lalu unggah di panel Berkas lain pada tema yang Anda perluas. Ikon ini menggantikan ikon tema induk.

Memusatkan logo di Fruity TwentyThree

Aktifkan Logo di opsi tema, lalu tambahkan kode berikut ke custom.css:

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

Tambahkan logo Anda sendiri ke daftar survei publik

Daftar survei publik menampilkan logo LimeSurvey secara default. Untuk menampilkan logo Anda sendiri:

1. Perluas Fruity TwentyThree dan buka tema Anda di penyunting tema.
2. Unggah logo Anda di panel Berkas lain.
3. Pilih layar Daftar survei dan buka layout_survey_list.twig.
4. Cari <div> yang berisi {{ include('./ls_logo_svg.twig') }}. Ganti seluruh <div> ini, termasuk baris include, dengan kode yang ditampilkan di bawah langkah-langkah ini.
5. Klik Salin ke tema lokal dan simpan perubahan.
6. Buka Konfigurasi > Pengaturan global > Umum dan pilih tema Anda sebagai Tema untuk daftar survei publik dan halaman kesalahan.

Gunakan nama berkas yang Anda unggah, dan nama organisasi Anda sebagai teks alternatif:

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

Tambahkan garis pemisah ke larik dua skala

Untuk menggambar garis vertikal di antara kedua skala pada pertanyaan Larik dua skala:

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

JavaScript dalam pertanyaan

Untuk menjalankan JavaScript di semua halaman survei Anda, letakkan di custom.js pada tema Anda (lihat di atas).

Anda juga dapat menambahkan skrip ke teks satu pertanyaan atau grup. LimeSurvey menghapus skrip dari teks tersebut kecuali filter XSS dinonaktifkan untuk pengguna Anda. Filter ini tidak pernah berlaku bagi superadministrator. Bagi pengguna lain, Filter HTML terhadap XSS harus dinonaktifkan di Konfigurasi > Pengaturan global > Keamanan. Lakukan ini hanya jika Anda memercayai semua orang yang dapat mengedit survei. Untuk detail dan contoh, lihat Solusi alternatif: Memanipulasi survei saat runtime menggunakan Javascript.