Редактор шаблонов

Введение

Тема опроса определяет, как ваш опрос выглядит для участников: макет страницы, цвета, шрифты, логотипы и оформление каждого вопроса. Темы создаются на основе шаблонов 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-файла.
• Копировать: создаёт новую тему, наследующую от текущей (см. выше).
• Переименовать: переименовывает тему. Доступно только для пользовательских тем.
• Удалить: удаляет тему. Нельзя удалить тему, которая установлена как тема по умолчанию.
• Тема: переключает редактор темы на другую тему.
• Страница: выбирает, какая страница опроса отображается в предварительном просмотре и какие файлы доступны для редактирования. Доступные страницы: Вопрос, Список опросов, Приветствие, Завершено, Оценки, Ошибка, Очистить всё, Загрузить, Сохранить, Регистрация, Печать ответов, Публичная статистика, 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. Администратор может изменить эти списки с помощью настроек 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	Список или строка переключателей	Список (Один ответ), Выбор из 5 точек, Список с комментариями, строки массивов с переключателями
.radio-array	Таблица переключателей	Массив, Массив (выбор из 5 точек), Массив (выбор из 10 точек), Массив (Увеличить/ Не менять/ Уменьшить), Массив (Да/Не уверен/Нет)
.radio-item	Один переключатель с меткой	Список (Один ответ), Выбор из 5 точек, Список с комментариями, массивы с переключателями
.checkbox-list	Список флажков	Несколько ответов, Несколько ответов с комментариями
.checkbox-array	Таблица флажков	Массив (числовой) с расположением флажков
.checkbox-item	Один флажок с меткой	Несколько ответов, Несколько ответов с комментариями, Массив (числовой) с расположением флажков
.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	Область загрузки файла	Загрузка файла
.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, а базовые темы загружают RTL-версию своего основного CSS-файла. Используйте .dir-rtl в своём CSS для правил, которые должны применяться только к языкам с письмом справа налево.

Советы и приёмы

Эти примеры добавляются в custom.css (или в файл Twig, если это указано) темы, созданной на основе базовой темы. В примерах замените #c0392b на свой цвет.

Изменение цвета переключателей и чек-боксов

Чтобы использовать один из цветов, входящих в состав Fruity TwentyThree, выберите Цвет темы в настройках темы. В настройках темы можно также выбрать другую Иконку чек-бокса.

Для любого другого цвета добавьте CSS в custom.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 и загрузите на панели Другие файлы вашей расширенной темы. Она заменит иконку родительской темы.

Выравнивание логотипа по центру в 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. Перейдите в Конфигурация > Общие настройки > Главные настройки и выберите свою тему в поле Theme for public survey list and error pages.

Укажите имя загруженного файла, а в качестве альтернативного текста — название вашей организации:

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