ตัวแก้ไขธีม

บทนำ

ธีมแบบสำรวจควบคุมลักษณะที่แบบสำรวจของคุณแสดงต่อผู้เข้าร่วม ได้แก่ เลย์เอาต์ของหน้า สี แบบอักษร โลโก้ และสไตล์ของทุกคำถาม ธีมสร้างขึ้นด้วยเทมเพลต Twig, CSS และ JavaScript และใช้ Bootstrap 5 เป็นเฟรมเวิร์ก CSS

การเปลี่ยนแปลงทั่วไปหลายอย่างไม่ต้องเขียนโค้ดเลย คุณสามารถเปลี่ยนโลโก้ สี แบบอักษร และการตั้งค่าการแสดงผลหลายอย่างได้ด้วยตัวเลือกธีม ใช้ตัวแก้ไขธีมที่อธิบายในหน้านี้เมื่อคุณต้องการปรับแต่งให้ลึกขึ้น เช่น เพิ่ม CSS หรือ JavaScript ของคุณเอง เปลี่ยน HTML ของหน้า หรืออัปโหลดรูปภาพและไฟล์อื่น ๆ สำหรับธีมของคุณ

LimeSurvey มาพร้อมกับธีมแบบสำรวจหลักดังต่อไปนี้:

• Fruity TwentyThree (fruity_twentythree): ธีมเริ่มต้น
• Bootstrap Vanilla (vanilla): ธีมพื้นฐานแบบเรียบง่ายสำหรับนักพัฒนาที่ต้องการสร้างธีมแบบ Bootstrap ของตนเอง
• Fruity (fruity) และ Bootswatch (bootswatch): ทั้งสองธีมขยายมาจาก Bootstrap Vanilla

รูปลักษณ์ของประเภทคำถามแต่ละประเภทควบคุมโดยธีมคำถาม ไม่ใช่โดยธีมแบบสำรวจ หากต้องการเปลี่ยน HTML ของประเภทคำถาม ให้สร้างธีมคำถาม

ก่อนเริ่มต้น

หากต้องการใช้ตัวแก้ไขธีม คุณต้องมีสิทธิ์ส่วนกลาง ธีม (ดูสิทธิ์ส่วนกลาง) หรือเป็นผู้ดูแลระบบสูงสุด การขยายธีมต้องมีสิทธิ์ สร้าง การบันทึกการเปลี่ยนแปลงต้องมีสิทธิ์ อัพเดต และการลบธีมหรือการตั้งค่าไฟล์ใหม่ต้องมีสิทธิ์ ลบ

  ธีมที่มีข้อผิดพลาดอาจทำให้ทุกแบบสำรวจที่ใช้ธีมนั้นไม่สามารถใช้งานได้ ทดสอบการเปลี่ยนแปลงของคุณด้วยการดูตัวอย่างแบบสำรวจก่อนนำธีมไปใช้กับแบบสำรวจที่เปิดใช้งานจริง

ธีมหลักไม่สามารถแก้ไขได้: ให้ขยายธีมแทน

ธีมหลักได้รับการอัปเดตไปพร้อมกับ LimeSurvey ดังนั้นคุณจึงไม่สามารถเปลี่ยนแปลงโดยตรงได้ หากต้องการปรับแต่ง ให้ขยายธีมนั้น การขยายจะสร้างธีมผู้ใช้ใหม่ที่รับทุกอย่างมาจากธีมแม่ ธีมของคุณจะมีเฉพาะไฟล์ที่คุณเปลี่ยนแปลง ส่วนอื่นทั้งหมดจะนำมาจากธีมแม่ ด้วยวิธีนี้ธีมของคุณจะยังได้รับการแก้ไขข้อบกพร่องและการปรับปรุงเมื่อ LimeSurvey อัปเดตธีมแม่

หากต้องการขยายธีม ให้ทำอย่างใดอย่างหนึ่งต่อไปนี้:

• ไปที่ การกำหนดค่า > ธีม' เปิดเมนูการดำเนินการ (⋯) ที่ท้ายแถวของธีม แล้วคลิก ขยาย' หรือ
• เปิดธีมในตัวแก้ไขธีมแล้วคลิก ขยาย ในแถบเครื่องมือ

ป้อนชื่อสำหรับธีมใหม่ จากนั้นตัวแก้ไขธีมจะเปิดธีมใหม่ของคุณ

ตำแหน่งที่เก็บธีม

• ธีมหลัก: themes/survey/ ในการติดตั้ง LimeSurvey ของคุณ
• ธีมผู้ใช้ (ธีมที่ขยาย อัปโหลด หรือนำเข้า): upload/themes/survey/

คุณยังสามารถแก้ไขไฟล์ของธีมผู้ใช้โดยตรงบนเซิร์ฟเวอร์ด้วยโปรแกรมแก้ไขของคุณเองได้ โปรดตรวจสอบให้แน่ใจว่าเว็บเซิร์ฟเวอร์ยังคงอ่านและเขียนไฟล์ได้หลังจากนั้น เพื่อให้คุณใช้ตัวแก้ไขธีมต่อไปได้เช่นกัน

ตัวแก้ไขธีม

หากต้องการเปิดตัวแก้ไขธีม ให้ไปที่ การกำหนดค่า > ธีม เปิดเมนูการดำเนินการ (⋯) ที่ท้ายแถวของธีม แล้วคลิก ตัวแก้ไขธีม

หากคุณเปิดธีมหลัก จะมีข้อความแจ้งว่านี่เป็นธีมมาตรฐานและมีลิงก์ให้ขยายธีม คุณสามารถดูไฟล์และตัวอย่างของธีมได้ แต่ไม่สามารถบันทึกการเปลี่ยนแปลงได้

แถบเครื่องมือ

• ส่งออก: ดาวน์โหลดธีมเป็นไฟล์ ZIP
• ขยาย: สร้างธีมใหม่ที่รับมาจากธีมนี้ (ดูด้านบน)
• เปลี่ยนชื่อใหม่: เปลี่ยนชื่อธีม ใช้ได้เฉพาะธีมผู้ใช้
• ลบ: ลบธีม คุณไม่สามารถลบธีมที่ตั้งเป็นธีมเริ่มต้นได้
• ธีม: สลับตัวแก้ไขธีมไปยังธีมอื่น
• หน้าจอ: เลือกว่าจะแสดงหน้าแบบสำรวจใดในตัวอย่าง และแสดงไฟล์ใดสำหรับแก้ไข หน้าจอได้แก่: Question, รายการแบบสอบถาม, Welcome, เสร็จสมบูรณ์, Assessments, Error, ลบทั้งหมด, Load, Save, Registration, พิมพ์คำตอบ, เผยแพร่สถิติ, PDF, เกินโควต้าแล้ว, การนำทาง และ Participant

การแก้ไขไฟล์

แผงทางด้านขวาแสดงรายการไฟล์ที่หน้าจอที่เลือกใช้:

• ไฟล์ส่วนหน้าจอ: เทมเพลต Twig ที่สร้างหน้านั้น
• ไฟล์จาวาสคริปต์
• ไฟล์ CSS
• ไฟล์อื่น ๆ: รูปภาพ แบบอักษร และไฟล์อื่น ๆ ของธีม

คลิกชื่อไฟล์เพื่อเปิดในตัวแก้ไข ไฟล์ที่ทำเครื่องหมาย รับการถ่ายทอด มาจากธีมแม่ คุณยังสามารถแก้ไขไฟล์ที่รับการถ่ายทอดได้ โดยปุ่มใต้ตัวแก้ไขจะแสดงว่า คัดลอกไปยังเทมเพลตภายในและบันทึกการเปลี่ยนแปลง' และการบันทึกจะคัดลอกไฟล์เข้าไปในธีมของคุณพร้อมการเปลี่ยนแปลงของคุณ จากนั้นสำเนาของคุณจะถูกใช้แทนไฟล์ของธีมแม่

ไฟล์ที่เป็นของธีมของคุณจะมีปุ่ม ตั้งค่าใหม่ การรีเซ็ตจะลบสำเนาของคุณ ทำให้กลับไปใช้ไฟล์จากธีมแม่อีกครั้ง

การอัปโหลดไฟล์

ใช้ช่องอัปโหลดที่ด้านล่างของแผง ไฟล์อื่น ๆ เพื่อเพิ่มรูปภาพ แบบอักษร หรือไฟล์อื่น ๆ ลงในธีมของคุณ ไฟล์ที่อัปโหลดจะถูกเก็บไว้ในโฟลเดอร์ files/ ของธีม โดยค่าเริ่มต้น คุณสามารถอัปโหลดรูปภาพ (gif, ico, jpg, jpeg, png) และไฟล์ประเภทเหล่านี้: css, js, map, json, eot, otf, ttf, woff, woff2, txt, md, xml, twig, lss, lsa, lsq และ lsg ผู้ดูแลระบบของคุณสามารถเปลี่ยนรายการเหล่านี้ได้ด้วยการตั้งค่า allowedthemeimageformats และ allowedthemeuploads ใน config.php

หากต้องการแสดงรูปภาพที่อัปโหลดในไฟล์ Twig ให้ใช้ฟังก์ชัน image():

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

ในไฟล์ CSS ให้อ้างอิงไฟล์ที่อัปโหลดด้วยพาธที่สัมพันธ์กับโฟลเดอร์ css เช่น url('../files/background.jpg')

ดูตัวอย่าง

ใต้ตัวแก้ไข จะมีตัวอย่างแสดงหน้าจอที่เลือกพร้อมเนื้อหาตัวอย่าง ใช้ปุ่ม โทรศัพท์มือถือ, 640x480, 800x600, 1024x768 และ สมบูรณ์ เพื่อตรวจสอบหน้าเว็บที่ขนาดหน้าจอต่าง ๆ

ตัวอย่างใช้ข้อมูลตัวอย่าง จึงอาจแสดงสไตล์บางส่วนไม่เหมือนกับแบบสำรวจจริงทุกประการ ควรตรวจสอบการเปลี่ยนแปลงของคุณในตัวอย่างแบบสำรวจจริงด้วยเสมอ

การนำเข้าและส่งออกธีม

• หากต้องการย้ายธีมไปยัง LimeSurvey อีกที่หนึ่ง ให้คลิก ส่งออก ในแถบเครื่องมือของตัวแก้ไขธีม ระบบจะดาวน์โหลดธีมเป็นไฟล์ ZIP
• หากต้องการติดตั้งธีมจากไฟล์ ZIP ให้ไปที่ การกำหนดค่า > ธีม แล้วคลิก อัปโหลดและติดตั้ง

โครงสร้างของธีม

โฟลเดอร์ของธีม

โฟลเดอร์ของธีมประกอบด้วย:

• config.xml: ไฟล์แมนิเฟสต์ของธีม ได้แก่ ชื่อ ธีมแม่ ไฟล์ CSS และ JavaScript ตัวเลือกธีม และหน้าจอที่แสดงในตัวแก้ไขธีม
• views/: เทมเพลต Twig โดย layout_global.twig เป็นเลย์เอาต์หลักของหน้าแบบสำรวจส่วนใหญ่ ส่วนเลย์เอาต์อื่นใช้กับหน้าพิเศษ เช่น layout_survey_list.twig สำหรับรายการแบบสำรวจสาธารณะ และ layout_errors.twig สำหรับหน้าแสดงข้อผิดพลาด โฟลเดอร์ views/subviews/ เก็บเทมเพลตย่อยที่เลย์เอาต์นำไปรวม
• css/ และ scripts/: ไฟล์ CSS และ JavaScript ของธีม
• files/: รูปภาพและไฟล์อื่น ๆ ที่ธีมใช้
• options/: หน้าสำหรับตัวเลือกธีม

เทมเพลต Twig

เทมเพลตจะได้รับข้อมูลแบบสำรวจในตัวแปร aSurveyInfo หากต้องการดูข้อมูลทั้งหมดที่ตัวแปรนี้มี ให้เปิดโหมดดีบักใน application/config/config.php และเพิ่มบรรทัดนี้ไว้ท้ายองค์ประกอบ body ใน layout_global.twig:

{{ dump(aSurveyInfo) }}

สำหรับฟังก์ชันที่ใช้ได้ในเทมเพลต ดู ฟังก์ชัน Twig ที่ใช้ได้ เพื่อความปลอดภัย เทมเพลตจะทำงานในแซนด์บ็อกซ์ จึงใช้ได้เฉพาะฟังก์ชันเหล่านี้เท่านั้น

config.xml

ส่วน <files> ระบุรายการไฟล์ CSS และ JavaScript ที่โหลดในหน้าแบบสำรวจ:

• <add> เพิ่มไฟล์ หากธีมแม่มีไฟล์ชื่อเดียวกันอยู่แล้ว ไฟล์ของคุณจะแทนที่ไฟล์นั้น
• <remove> ป้องกันไม่ให้ไฟล์ของธีมแม่ถูกโหลด

คุณไม่จำเป็นต้องระบุไฟล์จากธีมแม่ซ้ำอีก เพราะไฟล์เหล่านั้นจะถูกโหลดอยู่แล้ว

LimeSurvey จะอ่าน config.xml เมื่อติดตั้งธีมและจัดเก็บการตั้งค่าไว้ในฐานข้อมูล หลังจากคุณแก้ไข config.xml ของธีมที่ติดตั้งแล้ว ให้ไปที่ การกำหนดค่า > ธีม เปิดเมนูการดำเนินการ (⋯) ของธีม แล้วคลิก ตั้งค่าใหม่ เพื่อโหลดไฟล์ใหม่

การเพิ่ม CSS และ JavaScript ของคุณเอง

ธีมหลักทุกธีมมีไฟล์สองไฟล์ที่สงวนไว้สำหรับโค้ดของคุณเอง:

• css/custom.css: โหลดหลังไฟล์ CSS อื่นทั้งหมด กฎในไฟล์นี้จึงแทนที่สไตล์ของธีม
• scripts/custom.js: โหลดหลัง JavaScript ของธีมเอง

เมื่อคุณขยายธีม ไฟล์เหล่านี้คือไฟล์ที่ควรแก้ไข ให้เพิ่ม CSS ของคุณลงใน custom.css แทนการแก้ไขไฟล์ CSS หลักของธีม เพื่อให้ธีมของคุณยังได้รับการอัปเดตจากธีมแม่

หากต้องการเพิ่มไฟล์อื่น ให้อัปโหลดไฟล์เหล่านั้นและระบุไว้ในส่วน <files> ของ config.xml ในธีมของคุณ ใช้ชื่อไฟล์ที่ไม่มีอยู่ในธีมแม่ มิฉะนั้นไฟล์ของคุณจะแทนที่ไฟล์ของธีมแม่:

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

โดยค่าเริ่มต้น หน้าแบบสำรวจจะโหลดด้วย Ajax ดังนั้นเบราว์เซอร์จะไม่โหลดทั้งหน้าใหม่เมื่อผู้เข้าร่วมไปยังหน้าถัดไป ให้รัน JavaScript ของคุณทั้งตอนโหลดหน้าแรกและทุกครั้งที่โหลดหน้าด้วย Ajax:

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

การจัดสไตล์คำถามด้วย CSS

ตัวอย่างทั้งหมดในส่วนนี้ให้ใส่ในไฟล์ custom.css ของธีมคุณ

คลาสของหน้า

องค์ประกอบ <html> และ <body> มีคลาสที่คุณใช้จัดสไตล์ทั้งหน้าได้:

• html: รหัสของภาษา (เช่น en) และทิศทางของข้อความ (dir-ltr หรือ dir-rtl)
• body: ชื่อของธีมและของธีมแม่แต่ละธีม (เช่น fruity_twentythree) ฟอนต์ (เช่น font-ibm-sans) ภาษา (เช่น lang-en) และ brand-logo เมื่อแสดงโลโก้

คลาสของคอนเทนเนอร์คำถาม

คำถามแต่ละข้อจะอยู่ในองค์ประกอบที่มีคลาส question-container ซึ่งยังมีคลาสต่อไปนี้ด้วย:

• คลาสของประเภทคำถาม (ดูตารางด้านล่าง)
• mandatory: คำถามเป็นคำถามที่จำเป็นต้องตอบหรือจำเป็นแบบยืดหยุ่น
• input-error: คำตอบไม่ผ่านการตรวจสอบ หรือไม่ได้ตอบคำถามที่จำเป็นต้องตอบ
• missing: คำถามยังมีส่วนที่ไม่ได้ตอบ และผู้เข้าร่วมข้ามไปแล้ว
• ls-hidden และ ls-irrelevant: คำถามถูกซ่อนโดยเงื่อนไข
• ls-hidden-attribute: คำถามถูกซ่อนโดยการตั้งค่า "ซ่อนคำถามนี้"
• คลาสใด ๆ ที่ป้อนในการตั้งค่า คลาส CSS ของคำถาม (ใน แสดงผล) ใช้สิ่งนี้เพื่อจัดสไตล์คำถามเฉพาะข้อ

ตัวอย่างเช่น คำถามรายการ (กำหนดคำตอบเอง) ที่จำเป็นต้องตอบและยังไม่ได้ตอบ:

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

คลาสของประเภทคำถาม

ประเภทคำถาม	คลาส	รหัสประเภท
ตัวเลือก 5 คะแนน	.choice-5-pt-radio	5
อาร์เรย์	.array-flexible-row	F
อาร์เรย์ ((ตัวเลือก 5 คะแนน))	.array-5-pt	A
อาร์เรย์ (ตัวเลือก 10 คะแนน)	.array-10-pt	B
อาร์เรย์ (เพิ่มขึ้น / เท่าเดิม / ลดลง)	.array-increase-same-decrease	E
อาร์เรย์ (ตัวเลข)	.array-multi-flexi	:
อาร์เรย์ (ตัวอักษร)	.array-multi-flexi-text	;
ตัวเลือก (ใช่/ไม่แน่ใจ/ไม่ใช่)	.array-yes-uncertain-no	C
อาร์เรย์ตามคอลัมน์	.array-flexible-column	H
อาร์เรย์แบบสองมาตราส่วน	.array-flexible-dual-scale	1
วันที่/เวลา	.date	D
สมการ	.equation	*
อัพโหลดไฟล์	.upload-files	|
เพศ	.gender	G
ข้อความแบบยาวพิเศษ	.text-huge	U
เปลี่ยนภาษา	.language	I
รายการแบบทิ้งตัวลง	.list-dropdown	!
รายการ(กำหนดคำตอบเอง)	.list-radio	L
รายการพร้อมความคิดเห็น	.list-with-comment	O
ข้อความแบบยาว	.text-long	T
เลือกตอบได้หลายตัว	.multiple-opt	M
เลือกตอบได้หลายตัวพร้อมความคิดเห็น	.multiple-opt-comments	P
อินพุตตัวเลขหลายตัว	.numeric-multi	K
ข้อความสั้นหลายรายการ	.multiple-short-txt	Q
อินพุตตัวเลข	.numeric	N
การจัดอันดับ	.ranking	R
ข้อความแบบสั้น	.text-short	S
การแสดงผลข้อความ	.boilerplate	X
ใช่/ไม่ใช่	.yes-no	Y

คลาสสำหรับส่วนต่าง ๆ ของคำถาม

ภายในคอนเทนเนอร์คำถาม พื้นที่คำตอบจะใช้คลาสเหล่านี้ บางคลาสขึ้นอยู่กับการตั้งค่าการแสดงผลของคำถาม เช่น อาร์เรย์ (ตัวเลข) จะใช้คลาสต่างกันเมื่อแสดงเป็นช่องทำเครื่องหมายแทนดรอปดาวน์

คลาส	ใช้สำหรับ	ใช้โดย (ตัวอย่าง)
.ls-answers	องค์ประกอบที่เก็บตัวเลือกคำตอบทั้งหมด	ทุกชนิดของคำถาม
.answers-list	รายการหรือแถวของตัวเลือกคำตอบ	รายการ(กำหนดคำตอบเอง), เลือกตอบได้หลายตัว, การจัดอันดับ, แถวของอาร์เรย์ส่วนใหญ่
.subquestion-list, .questions-list	รายการหรือตารางของคำถามย่อย	อาร์เรย์, ข้อความสั้นหลายรายการ, อินพุตตัวเลขหลายตัว
.answer-item	ตัวเลือกคำตอบหรืออินพุตหนึ่งรายการ	เกือบทุกชนิดของคำถาม
.noanswer-item	ตัวเลือก "ไม่มีคำตอบ"	อาร์เรย์, ตัวเลือก 5 คะแนน, รายการพร้อมความคิดเห็น
.question-item	คำถามย่อยที่เป็นคำตอบด้วย	เลือกตอบได้หลายตัว, ข้อความสั้นหลายรายการ, อินพุตตัวเลขหลายตัว
.radio-list	รายการหรือแถวของปุ่มตัวเลือก (radio)	รายการ(กำหนดคำตอบเอง), ตัวเลือก 5 คะแนน, รายการพร้อมความคิดเห็น, แถวของอาร์เรย์แบบ radio
.radio-array	ตารางของปุ่มตัวเลือก (radio)	อาร์เรย์, อาร์เรย์ (ตัวเลือก 5 คะแนน), อาร์เรย์ (ตัวเลือก 10 คะแนน), อาร์เรย์ (เพิ่มขึ้น / เท่าเดิม / ลดลง), ตัวเลือก (ใช่/ไม่แน่ใจ/ไม่ใช่)
.radio-item	ปุ่มตัวเลือก (radio) หนึ่งปุ่มพร้อมป้ายกำกับ	รายการ(กำหนดคำตอบเอง), ตัวเลือก 5 คะแนน, รายการพร้อมความคิดเห็น, อาร์เรย์แบบ radio
.checkbox-list	รายการของช่องทำเครื่องหมาย (checkbox)	เลือกตอบได้หลายตัว, เลือกตอบได้หลายตัวพร้อมความคิดเห็น
.checkbox-array	ตารางของช่องทำเครื่องหมาย (checkbox)	อาร์เรย์ (ตัวเลข) แบบรูปแบบการวางตัวเลือกเป็นช่องทำเครื่องหมาย
.checkbox-item	ช่องทำเครื่องหมาย (checkbox) หนึ่งช่องพร้อมป้ายกำกับ	เลือกตอบได้หลายตัว, เลือกตอบได้หลายตัวพร้อมความคิดเห็น, อาร์เรย์ (ตัวเลข) แบบรูปแบบการวางตัวเลือกเป็นช่องทำเครื่องหมาย
.checkbox-text-item	ช่องทำเครื่องหมาย (checkbox) พร้อมช่องข้อความ	เลือกตอบได้หลายตัวพร้อมความคิดเห็น
.comment-item	ช่องความคิดเห็นที่อยู่ถัดจากช่องทำเครื่องหมาย (checkbox)	เลือกตอบได้หลายตัวพร้อมความคิดเห็น
.text-list	รายการของช่องป้อนข้อความ	ข้อความสั้นหลายรายการ, อินพุตตัวเลขหลายตัว
.text-item	ช่องป้อนข้อความหนึ่งช่อง	ข้อความแบบสั้น แบบยาว และแบบยาวพิเศษ, ข้อความสั้นหลายรายการ, อาร์เรย์ (ตัวอักษร)
.number-list, .numeric-item	ช่องป้อนตัวเลข	อินพุตตัวเลขหลายตัว, อินพุตตัวเลข
.number-array	ตารางของช่องป้อนตัวเลข	อาร์เรย์ (ตัวเลข), อาร์เรย์ (ตัวอักษร)
.text-array	ตารางของช่องป้อนข้อความ	อาร์เรย์ (ตัวอักษร), อาร์เรย์ (ตัวเลข)
.dropdown-array, .dropdown-list, .dropdown-item	ตาราง แถว และเซลล์ที่มีดรอปดาวน์	อาร์เรย์ (ตัวเลข), อาร์เรย์แบบสองมาตราส่วนที่ใช้ดรอปดาวน์
.date-item	ช่องป้อนวันที่	วันที่/เวลา
.upload-item	พื้นที่อัพโหลดไฟล์	อัพโหลดไฟล์
.answertext	ข้อความคำถามย่อยในแถวของอาร์เรย์	อาร์เรย์
.col-answers	คอลัมน์ของข้อความคำถามย่อย	อาร์เรย์
.ls-heading	แถวส่วนหัวที่มีตัวเลือกคำตอบ	อาร์เรย์
.ls-odd, .ls-even	แถวที่สลับสีกัน	อาร์เรย์
.ls-label-xs-visibility	ป้ายกำกับที่มองเห็นได้เฉพาะบนหน้าจอขนาดเล็กและโดยโปรแกรมอ่านหน้าจอ	เซลล์ของอาร์เรย์
.ls-input-group-extra	คำนำหน้าหรือคำต่อท้ายของช่องอินพุต	ข้อความแบบสั้น, อินพุตตัวเลข, ข้อความสั้นหลายรายการ, อินพุตตัวเลขหลายตัว
.ls-js-hidden	ซ่อนเมื่อ JavaScript ทำงาน	อาร์เรย์แบบสองมาตราส่วน, รายการ(กำหนดคำตอบเอง)
.ls-no-js-hidden	ซ่อนเมื่อ JavaScript ไม่ทำงาน	การจัดอันดับ
.ls-js-hidden-sr	ซ่อนเมื่อ JavaScript ทำงาน แต่โปรแกรมอ่านหน้าจอยังอ่านให้	การจัดอันดับ

ในรายการ(กำหนดคำตอบเอง) ตัวเลือก "ไม่มีคำตอบ" จะใช้คลาส no-anwser-item (สะกดตามนี้) แทน noanswer-item

ตัวอย่างเช่น นี่คือ HTML ของคำตอบในคำถามแบบรายการ(กำหนดคำตอบเอง):

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

คลาสสำหรับการตรวจสอบและคำแนะนำ

คำแนะนำเกี่ยวกับการตรวจสอบ (เช่น "กรุณาเลือกเพียงหนึ่งคำตอบจากตัวเลือกที่ปรากฏ" หรือ "กรุณาป้อนตัวเลขระหว่าง 1 ถึง 10") จะมีคลาส ls-em-tip เสมอ ขณะที่ผู้เข้าร่วมตอบคำถาม LimeSurvey จะเพิ่ม ls-em-success เมื่อเป็นไปตามกฎของคำแนะนำ และเพิ่ม ls-em-error เมื่อไม่เป็นไปตามกฎ คุณจึงกำหนดรูปแบบของทั้งสองสถานะให้ต่างกันได้ คำแนะนำที่ซ่อนด้วยการตั้งค่า งดการแสดงคำอธิบายเสริม ของคำถามจะมีคลาส hide-tip

คำแนะนำแต่ละรายการยังมีคลาสตามประเภทของคำแนะนำด้วย:

คลาส	คำแนะนำ
.em_default	คำแนะนำเริ่มต้นของชนิดของคำถาม (เช่น "กรุณาเลือกเพียงหนึ่งคำตอบจากตัวเลือกที่ปรากฏ")
.em_num_answers	จำนวนคำตอบขั้นต่ำหรือสูงสุด
.em_value_range	ค่าขั้นต่ำหรือสูงสุด
.em_sum_range	ผลรวมของค่าขั้นต่ำหรือสูงสุด
.em_sum_equals	ค่าทั้งหมดต้องรวมกันได้ตามยอดที่กำหนด
.em_value_integer	อนุญาตเฉพาะจำนวนเต็ม
.em_numbers_only	อนุญาตเฉพาะตัวเลข
.em_other_numbers_only	อนุญาตเฉพาะตัวเลขในช่อง "อื่นๆ"
.em_other_comment_mandatory	เลือกตัวเลือก "อื่นๆ" แล้ว แต่ช่องข้อความว่างอยู่
.em_regex_validation	คำตอบต้องตรงกับรูปแบบที่กำหนดสำหรับการตรวจสอบ
.em_q_fn_validation	สมการการตรวจสอบของคำถาม
.em_sq_fn_validation	สมการการตรวจสอบคำถามย่อย

ภาษาที่เขียนจากขวาไปซ้าย (RTL)

สำหรับภาษาที่เขียนจากขวาไปซ้าย องค์ประกอบ <html> จะมีคลาส dir-rtl และธีมหลักจะโหลด CSS หลักในเวอร์ชัน RTL ใช้ .dir-rtl ใน CSS ของคุณสำหรับกฎที่ใช้กับภาษาที่เขียนจากขวาไปซ้ายเท่านั้น

เคล็ดลับและเทคนิค

สูตรเหล่านี้ใช้กับ custom.css (หรือไฟล์ Twig ตามที่ระบุไว้) ของธีมที่คุณสร้างจากการขยายธีมหลัก ในตัวอย่าง ให้แทนที่ #c0392b ด้วยสีของคุณเอง

เปลี่ยนสีของปุ่มตัวเลือก (radio) และช่องทำเครื่องหมาย (checkbox)

หากต้องการใช้สีใดสีหนึ่งที่มาพร้อมกับ Fruity TwentyThree ให้เลือก สีธีม ในตัวเลือกธีม นอกจากนี้ ตัวเลือกธีมยังให้คุณเลือก ไอคอนตรวจสอบ แบบอื่นได้

สำหรับสีอื่น ๆ ให้เพิ่ม CSS ใน custom.css ธีมหลักจะวาดปุ่มตัวเลือก (radio) และช่องทำเครื่องหมาย (checkbox) ขึ้นมาเองแทนที่จะใช้แบบเริ่มต้นของเบราว์เซอร์ ดังนั้นการเปลี่ยนสีจึงหมายถึงการเปลี่ยนองค์ประกอบที่วาดขึ้นเหล่านี้

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 และ 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;
}

ควรรักษาคอนทราสต์ระหว่างสีกับพื้นหลังให้เพียงพอ เพื่อให้ผู้เข้าร่วมที่มีสายตาเลือนรางยังมองเห็นได้ว่าเลือกคำตอบใดอยู่

ทำให้ปุ่มตัวเลือก (radio) และช่องทำเครื่องหมาย (checkbox) ใหญ่ขึ้น

ปุ่มตัวเลือก (radio) และช่องทำเครื่องหมาย (checkbox) ที่ใหญ่ขึ้นจะแตะบนโทรศัพท์และแท็บเล็ตได้ง่ายกว่า วิธีนี้ใช้ได้กับธีมหลักทุกธีม:

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

ใน Fruity TwentyThree ให้เพิ่มช่องว่างระหว่างปุ่มตัวเลือก (radio) กับข้อความคำตอบด้วย:

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

ค่าไม่เกินประมาณ 1.4 ใช้งานได้โดยไม่ต้องปรับเพิ่มเติม หากใช้ค่าที่ใหญ่กว่านี้ ตัวควบคุมจะเริ่มทับข้อความคำตอบและขอบของแถวอาร์เรย์บนหน้าจอขนาดเล็ก คุณจึงต้องเพิ่มช่องว่างรอบ ๆ ตัวควบคุมด้วย

เปลี่ยนสีของแถบความคืบหน้า

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

แสดงเนื้อหาเฉพาะในบางภาษา

องค์ประกอบ <body> มีคลาสที่ระบุภาษาปัจจุบัน เช่น lang-en หรือ lang-fr คุณสามารถใช้คลาสนี้เพื่อแสดงเนื้อหาต่างกันในแต่ละภาษา เช่น บรรทัดคำแนะนำในส่วนท้ายของหน้า ให้เพิ่มข้อความสำหรับแต่ละภาษาลงในไฟล์ Twig ของธีมของคุณ เช่น 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>

จากนั้นซ่อนข้อความของภาษาอื่นใน custom.css:

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

ใช้โลโก้ต่างกันในแต่ละแบบสำรวจ

คุณไม่จำเป็นต้องสร้างธีมแยกสำหรับแต่ละโลโก้ ตัวเลือกธีมสามารถตั้งค่าเฉพาะแบบสำรวจเดียวได้: เปิดแบบสำรวจ คลิก ตัวเลือกธีม ในเมนู การตั้งค่าแบบสอบถาม แล้วเลือก ไฟล์โลโก้ อื่น ดู ตัวเลือกธีม

แสดงไอคอนเว็บไซต์ (favicon) แบบกำหนดเอง

favicon คือไอคอนขนาดเล็กที่แสดงบนแท็บเบราว์เซอร์และในบุ๊กมาร์ก ธีมหลักจะแสดงไฟล์ files/favicon.ico ของธีม หากต้องการใช้ไอคอนของคุณเอง ให้ตั้งชื่อว่า favicon.ico และอัปโหลดในแผง ไฟล์อื่น ๆ ของธีมที่คุณขยาย ไฟล์นี้จะแทนที่ไอคอนของธีมแม่

จัดโลโก้ให้อยู่กึ่งกลางใน Fruity TwentyThree

เปิดใช้งาน โลโก้ ในตัวเลือกธีม จากนั้นเพิ่มโค้ดนี้ลงใน custom.css:

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

เพิ่มโลโก้ของคุณเองในรายการแบบสำรวจสาธารณะ

โดยค่าเริ่มต้น รายการแบบสำรวจสาธารณะจะแสดงโลโก้ LimeSurvey หากต้องการแสดงโลโก้ของคุณเอง:

1. ขยายธีม Fruity TwentyThree และเปิดธีมของคุณในตัวแก้ไขธีม
2. อัปโหลดโลโก้ของคุณในแผง ไฟล์อื่น ๆ
3. เลือกหน้าจอ รายการแบบสอบถาม และเปิดไฟล์ layout_survey_list.twig
4. ค้นหา <div> ที่มี {{ include('./ls_logo_svg.twig') }} แทนที่ <div> นี้ทั้งหมด รวมถึงบรรทัด include ด้วยโค้ดที่แสดงด้านล่างขั้นตอนเหล่านี้
5. คลิก คัดลอกไปยังเทมเพลตภายในและบันทึกการเปลี่ยนแปลง
6. ไปที่ การกำหนดค่า > ตั้งค่าโดยรวม > ทั่วไป และเลือกธีมของคุณเป็น ธีมสำหรับรายการแบบสำรวจสาธารณะและหน้าข้อผิดพลาด

ใช้ชื่อไฟล์ที่คุณอัปโหลด และใช้ชื่อองค์กรของคุณเป็นข้อความแทน:

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

เพิ่มเส้นแบ่งในอาร์เรย์แบบสองมาตราส่วน

หากต้องการวาดเส้นแนวตั้งระหว่างสองมาตราส่วนของคำถามอาร์เรย์แบบสองมาตราส่วน:

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

JavaScript ในคำถาม

หากต้องการรันJavaScript ในทุกหน้าของแบบสำรวจของคุณ ให้ใส่ไว้ใน custom.js ของธีมของคุณ (ดูด้านบน)

คุณยังสามารถเพิ่มสคริปต์ลงในข้อความของคำถามหรือกลุ่มคำถามเดียวได้ LimeSurvey จะลบสคริปต์ออกจากข้อความเหล่านี้ เว้นแต่ตัวกรอง XSS จะปิดอยู่สำหรับผู้ใช้ของคุณ ตัวกรองนี้ไม่มีผลกับผู้ดูแลระบบสูงสุดเลย สำหรับผู้ใช้อื่น ต้องปิด ตัวกรอง HTML สำหรับ XSS ใน การกำหนดค่า > ตั้งค่าโดยรวม > ความปลอดภัย ทำเช่นนี้เฉพาะเมื่อคุณไว้วางใจทุกคนที่สามารถแก้ไขแบบสำรวจได้ สำหรับรายละเอียดและตัวอย่าง ดู วิธีแก้ปัญหาเฉพาะหน้า: การจัดการแบบสำรวจขณะรันไทม์ด้วย JavaScript