Сэдвийн редактор

Танилцуулга

Судалгааны сэдэв нь таны судалгаа оролцогчдод хэрхэн харагдахыг тодорхойлдог: хуудасны байршил, өнгө, фонт, лого болон асуулт бүрийн загвар. Сэдвүүдийг Twig загвар, CSS болон JavaScript ашиглан бүтээдэг бөгөөд CSS фреймворк болгон Bootstrap 5-г ашигладаг.

Түгээмэл өөрчлөлтүүдийн ихэнхийг код бичихгүйгээр хийх боломжтой. Лого, өнгө, фонт болон дэлгэцийн хэд хэдэн тохиргоог сэдвийн сонголтууд-аар өөрчилж болно. Илүү дэлгэрэнгүй тохируулах хэрэгтэй бол энэ хуудсанд тайлбарласан сэдвийн редакторыг ашиглана уу: өөрийн CSS эсвэл JavaScript нэмэх, хуудасны HTML-г өөрчлөх, эсвэл сэдэвдээ зураг болон бусад файл байршуулах боломжтой.

LimeSurvey дараах үндсэн судалгааны сэдвүүдтэй хамт ирдэг:

• Fruity TwentyThree (fruity_twentythree): Үндсэн сэдэв.
• Bootstrap Vanilla (vanilla): Bootstrap дээр суурилсан өөрийн сэдвийг бүтээхийг хүссэн хөгжүүлэгчдэд зориулсан энгийн суурь сэдэв.
• Fruity (fruity) болон Bootswatch (bootswatch): Хоёулаа Bootstrap Vanilla-г өргөтгөдөг.

Асуултын тус бүрийн төрлийн харагдах байдлыг судалгааны сэдэв биш, асуултын сэдэв удирддаг. Асуултын төрлийн HTML-г өөрчлөхийн тулд асуултын сэдэв үүсгэнэ үү.

Эхлэхээсээ өмнө

Сэдвийн редакторыг ашиглахын тулд танд глобал Сэдэв зөвшөөрөл (see глобал зөвшөөрөл) байх эсвэл суперадминистратор байх шаардлагатай. Сэдвийг өргөтгөхөд Үүсгэх эрх, өөрчлөлтийг хадгалахад Шинэчлэх эрх, сэдвийг устгах эсвэл файлыг дахин тохируулахад Устгах эрх хэрэгтэй.

  Алдаатай сэдэв нь түүнийг ашиглаж буй бүх судалгааг ажиллахгүй болгож болзошгүй. Сэдвийг бодит судалгаанд ашиглахаасаа өмнө өөрчлөлтүүдээ судалгааны урьдчилан харах горимоор шалгана уу.

Үндсэн сэдвийг засах боломжгүй: өргөтгөнө үү

Үндсэн сэдвүүд LimeSurvey-тэй хамт шинэчлэгддэг тул та тэдгээрийг шууд өөрчилж чадахгүй. Сэдвийг өөрчлөхийн тулд өргөтгөнө үү. Өргөтгөх нь эх сэдвийнхээ бүх зүйлийг өвлөсөн шинэ хэрэглэгчийн сэдвийг үүсгэнэ. Таны сэдэв зөвхөн таны өөрчилсөн файлуудыг агуулах бөгөөд бусад бүх зүйл эх сэдвээс авагдана. Ингэснээр LimeSurvey эх сэдвийг шинэчлэх үед таны сэдэв алдаа засвар болон сайжруулалтуудыг үргэлжлүүлэн авна.

Сэдвийг өргөтгөхийн тулд дараах аль нэгийг хийнэ үү:

• Конфигураци > Сэдэв хэсэгт очиж, сэдвийн мөрийн төгсгөлд байгаа үйлдлийн цэсийг (⋯) нээгээд Өргөтгөх дээр дарна, эсвэл
• Сэдвийг сэдвийн редактор дээр нээгээд хэрэгслийн самбар дээрх Өргөтгөх дээр дарна.

Шинэ сэдвийн нэрийг оруулна уу. Дараа нь сэдвийн редактор таны шинэ сэдвийг нээнэ.

Сэдвүүд хаана хадгалагддаг

• Үндсэн сэдвүүд: таны LimeSurvey суулгацын themes/survey/ хавтас.
• Хэрэглэгчийн сэдвүүд (өргөтгөсөн, байршуулсан эсвэл импортолсон сэдвүүд): upload/themes/survey/.

Хэрэглэгчийн сэдвийн файлуудыг мөн серверт шууд өөрийн редактороор засаж болно. Сэдвийн редакторыг үргэлжлүүлэн ашиглах боломжтой байхын тулд вэб сервер файлуудыг дараа нь унших болон бичих боломжтой хэвээр байгаа эсэхийг шалгаарай.

Сэдвийн редактор

Сэдвийн редакторыг нээхийн тулд Конфигураци > Сэдэв хэсэгт очиж, сэдвийн мөрийн төгсгөлд байгаа үйлдлийн цэсийг (⋯) нээгээд Сэдвийн редактор дээр дарна уу.

Хэрэв та үндсэн сэдвийг нээвэл энэ нь стандарт сэдэв гэсэн тэмдэглэл гарч, түүнийг өргөтгөх холбоос санал болгоно. Та түүний файлууд болон урьдчилан харахыг үзэх боломжтой боловч өөрчлөлтийг хадгалах боломжгүй.

Хэрэгслийн самбар

• Экспортлох: Сэдвийг ZIP файл болгон татаж авна.
• Өргөтгөх: Энэ сэдвийг өвлөсөн шинэ сэдэв үүсгэнэ (see дээр).
• Нэрийг нь өөрчлөх: Сэдвийн нэрийг өөрчилнө. Зөвхөн хэрэглэгчийн сэдвүүдэд боломжтой.
• Устгах: Сэдвийг устгана. Үндсэн сэдвээр тохируулсан сэдвийг устгах боломжгүй.
• Сэдэв: Сэдвийн редакторыг өөр сэдэв рүү шилжүүлнэ.
• Дэлгэц: Урьдчилан харахад аль судалгааны хуудсыг харуулах, засахад аль файлуудыг жагсаахыг сонгоно. Дэлгэцүүд: Асуулт, Судалгааны жагсаалт, Тавтай морил, Дууссан, Үнэлгээ, Алдаа, Бүгдийг цэвэрлэх, Ачаалах, Хадгалах, Бүртгэл, Хариултыг хэвлэх, Олон нийтийн статистик, PDF, Квотыг давсан, Навигаци болон Оролцогч.

Файл засах

Баруун талын самбарууд сонгосон дэлгэцэд ашиглагдаж буй файлуудыг жагсаана:

• Дэлгэцийн хэсгийн файлууд: Хуудсыг бүрдүүлдэг Twig загварууд.
• JavaScript файлууд
• CSS файлууд
• Бусад файл: Зураг, фонт болон сэдвийн бусад файлууд.

Файлын нэр дээр дарж редактор дээр нээнэ үү. Өвлөгдсөн гэж тэмдэглэсэн файлууд эх сэдвээс ирсэн. Өвлөгдсөн файлыг ч гэсэн засах боломжтой: редакторын доорх товчин дээр Тухайн хэсгийн сэдэв рүү хуулж, өөрчлөлтийг хадгалах гэж бичигдэх бөгөөд хадгалахад файл таны өөрчлөлтүүдтэй хамт таны сэдэв рүү хуулагдана. Үүнээс хойш эх сэдвийн файлын оронд таны хуулбар ашиглагдана.

Таны сэдэвт хамаарах файлуудад Шинээр тавих товч байдаг. Шинээр тавих нь таны хуулбарыг устгах тул эх сэдвийн файл дахин ашиглагдана.

Файл байршуулах

Сэдэвтээ зураг, фонт эсвэл бусад файл нэмэхийн тулд Бусад файл самбарын доод хэсэгт байгаа байршуулах талбарыг ашиглана уу. Байршуулсан файлууд сэдвийн files/ хавтсанд хадгалагдана. Анхдагчаар та зураг (gif, ico, jpg, jpeg, png) болон дараах файлын төрлүүдийг байршуулах боломжтой: css, js, map, json, eot, otf, ttf, woff, woff2, txt, md, xml, twig, lss, lsa, lsq болон lsg. Админ эдгээр жагсаалтыг config.php доторх allowedthemeimageformats болон allowedthemeuploads тохиргоогоор өөрчилж болно.

Байршуулсан зургийг 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 файлд дебаг горимыг асааж, layout_global.twig файлын body элементийн төгсгөлд дараах мөрийг нэмнэ үү:

{{ dump(aSurveyInfo) }}

Загварт ашиглаж болох функцүүдийг Ашиглах боломжтой Twig функцүүд хэсгээс үзнэ үү. Аюулгүй байдлын үүднээс загварууд sandbox-д ажилладаг тул зөвхөн эдгээр функцийг ашиглах боломжтой.

config.xml

<files> хэсэг нь судалгааны хуудсанд ачаалагдах CSS болон JavaScript файлуудыг жагсаана:

• <add> файл нэмнэ. Хэрэв эх сэдэвт ижил нэртэй файл байгаа бол таны файл түүнийг орлоно.
• <remove> эх сэдвийн файлыг ачаалахгүй болгоно.

Эх сэдвийн файлуудыг дахин жагсаах шаардлагагүй: тэдгээр ямар ч тохиолдолд ачаалагдана.

LimeSurvey сэдвийг суулгах үед config.xml файлыг уншиж, тохиргоог өгөгдлийн санд хадгалдаг. Суулгасан сэдвийн config.xml файлыг өөрчилсний дараа конфигураци > Сэдэв хэсэгт очиж, сэдвийн үйлдлийн цэсийг (⋯) нээгээд файлыг дахин ачаалахын тулд шинээр тавих товчийг дарна уу.

Өөрийн CSS болон JavaScript нэмэх

Гол сэдэв бүр таны өөрийн кодод зориулсан хоёр файлтай:

• css/custom.css: Бусад бүх CSS файлын дараа ачаалагддаг тул түүний дүрмүүд сэдвийн загварыг дарж бичнэ.
• scripts/custom.js: Сэдвийн өөрийн JavaScript-ийн дараа ачаалагдана.

Сэдвийг өргөтгөх үед эдгээр нь өөрчлөх файлууд юм. Сэдвийн үндсэн CSS файлуудыг засахын оронд CSS-ээ custom.css-д нэмснээр таны сэдэв эх сэдвийн шинэчлэлтүүдийг үргэлжлүүлэн авна.

Илүү олон файл нэмэхийн тулд тэдгээрийг байршуулж, сэдвийнхээ config.xml файлын <files> хэсэгт жагсаана уу. Эх сэдэвт байхгүй файлын нэр ашиглана уу, эс тэгвэл таны файл эх сэдвийн файлыг орлоно:

<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	Радио товчнуудын жагсаалт эсвэл мөр	Жагсаалт (радио), 5 онооны сонголт, Тайлбартай жагсаалт, радио хүснэгтийн мөрүүд
.radio-array	Радио товчнуудын хүснэгт	Хүснэгт, Массив (5 онооны сонголт), Массив (10 онооны сонголт), хүснэгт (өсөх / тэнцэх / буурах ), Хүснэгт (Тийм/Тодорхойгүй/Үгүй)
.radio-item	Шошготой нэг радио товч	Жагсаалт (радио), 5 онооны сонголт, Тайлбартай жагсаалт, радио хүснэгтүүд
.checkbox-list	Чекбоксуудын жагсаалт	Олон сонголт, Тайлбартай олон сонголт
.checkbox-array	Чекбоксуудын хүснэгт	check box төлөвлөгөөтэй Хүснэгт (тоо)
.checkbox-item	Шошготой нэг чекбокс	Олон сонголт, Тайлбартай олон сонголт, check box төлөвлөгөөтэй Хүснэгт (тоо)
.checkbox-text-item	Текст талбартай чекбокс	Тайлбартай олон сонголт
.comment-item	Чекбоксын хажуу дахь тайлбарын талбар	Тайлбартай олон сонголт
.text-list	Текст оруулах талбаруудын жагсаалт	Олон тооны богино текст, Олон тооны оролт
.text-item	Нэг текст оруулах талбар	Богино, урт болон асар том үнэгүй текст, Олон тооны богино текст, Хүснэгт (текст)
.number-list, .numeric-item	Тоон оролтууд	Олон тооны оролт, Тоон оролт
.number-array	Тоон оролтуудын хүснэгт	Хүснэгт (тоо), Хүснэгт (текст)
.text-array	Текст оруулах талбаруудын хүснэгт	Хүснэгт (текст), Хүснэгт (тоо)
.dropdown-array, .dropdown-list, .dropdown-item	Унждаг жагсаалттай хүснэгт, мөр болон нүднүүд	Хүснэгт (тоо), унждаг жагсаалттай давхар хуваарь бүхий хүснэгт
.date-item	Огноо оруулах талбар	Огноо/цаг
.upload-item	Файл upload хийх хэсэг	Татагдсан файл
.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 идэвхтэй үед нуугдах боловч дэлгэц уншигч уншсаар байна	Зэрэглэл

Жагсаалт (радио) асуултад "Хариулт алга" сонголт нь noanswer-item биш, no-anwser-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 хувилбарыг ачаалдаг. Зөвхөн баруунаас зүүн чиглэлтэй хэлүүдэд хамаарах дүрмүүдийг CSS-дээ .dir-rtl ашиглан бичнэ үү.

Зөвлөмж ба заль

Эдгээр жорууд нь үндсэн сэдвээс өргөтгөсөн таны сэдвийн custom.css файлд (эсвэл заасан тохиолдолд Twig файлд) орно. Жишээнүүдэд #c0392b-ийг өөрийн өнгөөр солино уу.

Радио товч ба чекбоксын өнгийг өөрчлөх

Fruity TwentyThree-д орсон өнгөнүүдийн аль нэгийг ашиглахын тулд сэдвийн сонголтууд хэсгээс Сэдвийн өнгө-г сонгоно уу. Мөн сэдвийн сонголтууд дээр өөр Шалгах дүрс сонгох боломжтой.

Бусад өнгийн хувьд custom.css файлд CSS нэмнэ үү. Үндсэн сэдвүүд хөтчийн өгөгдмөл радио товч, чекбоксыг биш өөрсдийн зурсан радио товч, чекбоксыг ашигладаг тул өнгийг өөрчлөх нь эдгээр зурсан элементүүдийг өөрчлөх гэсэн үг юм.

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-item label::before,
.radio-item label::after,
.checkbox-item label::before,
.checkbox-item label::after {
    scale: 1.3;
}

Fruity TwentyThree-д радио товч ба хариултын текстийн хооронд бага зэрэг зай нэмнэ үү:

.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 гэж нэрлээд өргөтгөсөн сэдвийнхээ бусад файл хэсэгт upload хийнэ үү. Энэ нь эх сэдвийн дүрсийг орлоно.

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. {{ include('./ls_logo_svg.twig') }} агуулсан <div>-г олно уу. Include мөрийг оруулаад энэ <div>-г бүхэлд нь эдгээр алхмын доор үзүүлсэн кодоор солино уу.
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 файлд оруулна уу (дээрх хэсгийг үзнэ үү).

Мөн нэг асуулт эсвэл бүлгийн текстэд скрипт нэмж болно. XSS шүүлтүүр таны хэрэглэгчийн хувьд унтраалттай биш бол LimeSurvey эдгээр текстээс скриптийг устгадаг. Шүүлтүүр суперадминистраторуудад хэзээ ч үйлчилдэггүй. Бусад хэрэглэгчийн хувьд конфигураци > Олон улсын тохиргоонууд > Аюулгүй байдал хэсэгт HTML -ээс XSS-д шүүлтүүр хийх сонголтыг унтраасан байх ёстой. Үүнийг судалгаа засах эрхтэй бүх хүнд итгэж байгаа тохиолдолд л хийнэ үү. Дэлгэрэнгүй мэдээлэл болон жишээг Workarounds: Manipulating a survey at runtime using Javascript хуудаснаас үзнэ үү.