Как уменьшить padding и удалить border в вопросах drag and drop onto image

Как уменьшить padding и удалить border в вопросах drag and drop onto image

от Александр Курочкин -
Количество ответов: 17

Здравствуйте! Я работаю с интерактивами h5p («перетаскивание на изображение») в системе moodle 3.9. Я не админ, просто преподаватель. Студенты должны построить принципиальные схемы устройств из отдельных частей всего изображения в виде пазлов. Но вокруг перетаскиваемых изображений по умолчанию есть зона, которая изменяет размер перетаскиваемых изображений - «padding: 0.3em». Если в режиме просмотра html-кода я изменю значение для ".h5p-draquestion .h5p-draggable {padding: 0.3em}" на "padding: 0 em", то изображение схемы станет лучше (См. Во вложении). Но только на текущий сеанс. В последующих сеансах снова возвращается "padding: 0,3em". Как изменять зоны  padding и параметр border  для перетаскиваемых рисунков? Где в модуле h5p в системе moodle следует изменить эти параметры, чтобы уменьшить значение "padding" до нуля и удалить border для всех сеансов? 

Аналогичная проблема с padding и border в вопросах "drag and drop onto lmage", встроенных в ядро самой системы moodle. Помогите, пожалуйста!  Что и где надо изменить? Повторяю, я не админ. Я могу только посоветовать что-то изменить администратору, сами они боятся что-либо делать, чтобы не испортить всю систему.  

Приложение For forum h5p_.PNG
Сумма оценок: -
В ответ на Александр Курочкин

Re: Как уменьшить padding и удалить border в вопросах drag and drop onto image

от Vadim Tabunshchik -
Изображение пользователя Developers

Самый простой способ - прописать нужный стиль в customcss используемой темы оформления. Можно даже прописать этот стиль для отдельного курса (иначе будет действовать на всем сайте)или даже отдельного модуля.

Сложный путь - редактировать стили в самом пакете H5P после его сборки.

Сумма оценок: -
В ответ на Vadim Tabunshchik

Re: Как уменьшить padding и удалить border в вопросах drag and drop onto image

от Alexander Kurochkin -

Добрый день! Спасибо за участие в проблеме.

Вот и хотелось бы сделать это  с правами преподавателя только для моих дисциплин! Без прав администратора, если это, конечно, возможно. Где прописать этот стиль "customcss" для моих курсов, чтобы он не действовал на всём университетском сайте для других преподавателей? С чего начать? С помощью инструментов разработчика в Google Chrome я нужные мне элементы стиля вижу (ранее я это показывал на рисунке в своём вопросе). А дальше что?

Сумма оценок: -
В ответ на Alexander Kurochkin

Re: Как уменьшить padding и удалить border в вопросах drag and drop onto image

от Vadim Tabunshchik -
Изображение пользователя Developers
Без участия администратора вы стиль "customcss" не измените ни для сайта, ни для своего курса.
Не хотите привлекать администратора, идите сложным путем - распаковывайте H5P и меняйте стиль в его исходниках. Если скинете примерчик, расскажу, как это сделать.
Сумма оценок: -
В ответ на Vadim Tabunshchik

Re: Как уменьшить padding и удалить border в вопросах drag and drop onto image

от Alexander Kurochkin -

Файл h5p более 1 Мбайт, а здесь принимает не более 500 Кбайт. Могу прислать по email. 

Я свои h5p делаю в WordPress на домашнем локальном сервере (Apache). И там в моих интерактивах объекты draggable имеют значения "padding: 0.0em", какие я установил в библиотеке плагина h5p для WordPress в файле css. Но когда я загружаю готовые файлы *.h5p в moodle на сервере своего Вуза, то вот здесь они отображаются уже с "padding: 0.3em". Вот в чем проблема! Менять, по моему надо не в файлах, а на сервере с moodle. Поэтому я и прошу помочь.

И еще: я писал, что аналогичная проблема с padding и border в вопросах "drag and drop onto lmage", встроенных в ядро самой системы moodle. Что здесь можно сделать с помощью админов ?

Сумма оценок: -
В ответ на Alexander Kurochkin

Re: Как уменьшить padding и удалить border в вопросах drag and drop onto image

от Vadim Tabunshchik -
Изображение пользователя Developers
Вы в исходниках Мудл искали стиль ".h5p-draquestion .h5p-draggable {padding: 0.3em}"? А я искал и не нашел. Вывод какой? Он прописан или в h5p-пакете или «подтягивается» извне. Поэтому и просил пример такого h5p. Гугл-диском пользуетесь? Загрузите туда, мне в личные сообщения ссылку киньте.

>> аналогичная проблема с padding и border в вопросах "drag and drop onto lmage"
Границу вижу, с padding проблем не вижу

>> Что здесь можно сделать с помощью админов ?
Только администратор может прописать измененные стили CSS в настройках темы оформления сайта для вашего курса с вопросами h5p. Вы этого сделать не сможете и в курсе это нигде не пропишешь.
 
Кстати, посмотрите пример на странице https://h5p.org/drag-and-drop#example=68888
Тоже есть стиль .h5p-dragquestion .h5p-draggable, только границы выставлены rgba(198, 198, 198, 0) - прозрачные, а padding так и есть 0.3em, но это абсолютно не мешает.
Сумма оценок: -
В ответ на Vadim Tabunshchik

Re: Как уменьшить padding и удалить border в вопросах drag and drop onto image

от Alexander Kurochkin -

В исходниках Мудл  стили я искать не могу, так как не имею права: я преподаватель, а не админ. Во вложении два рисунка: на первом как выглядит собранная схема с помощью интерактива h5p в моём WordPress, а на втором как выглядит схема, собранная схема с помощью этого же интерактива h5p уже в Moodle! В самом же файле в стиле css прописано значение "padding: 0.0em". Значит значение "padding: 0.3em" берётся из модуля h5p с самом Moodle!!! И картинка, как видно, значительно искажена наличием полос между перемещаемыми объектами. Полосы появляются из-за того, что на  фоновом изображении специально сделаны цветные зоны в качестве подсказки студентам куда размещать логически связанные группы компонентов схемы. И в WordPress  они не видны, так как закрываются этими компонентами. А в Moodle из-за смещения компонентов вниз и вправо происходит их частичное закрытие, остаются полосы. И это всё именно из-за того самого "padding: 0.3em". 

На странице https://h5p.org/drag-and-drop#example=68888 этот самый padding не мешает, потому что перемещаемые рисунки значительно меньше drop-зон. У меня же перемещаемые рисунки должны стыковаться без зазоров! 

Ба! Да тут ещё только один файл можно прикрепить!???  Послал на гугл-диск! 

https://drive.google.com/file/d/1eBArvljG2EyqsPzwkvf1FbZaopMXeRVn/view

Сумма оценок: -
В ответ на Alexander Kurochkin

Re: Как уменьшить padding и удалить border в вопросах drag and drop onto image

от Vadim Tabunshchik -
Изображение пользователя Developers

Можно было скачать пакет moodle и поискать, не будучи при этом администратором сайта улыбаюсь

Но в этом нет смысла, т. к. в файлах moodle нет такого стиля, но он есть в библиотеке пакета контента H5P под названием H5P.DragQuestion-1.13, прописан в dragquestion.css (файл прикрепил).

А почему его нет в исходниках? Потому что при установке в Мудл типов контента H5P все файлы библиотек (JS и CSS) объединяются в 2 файла и хранятся в moodledata/filedir. Это видно по ссылкам при просмотре HTML-кода страницы с H5P:

ris4

И в этой ситуации даже администратор не поможет, потому что стили принудительно загружаются файлом 77b07d29b9acf41d0afe4d50717e63e567d8c422.css. Всё остальное - в игнор. Разве что админа заставить руками исправить стили в 77b07d29b9acf41d0afe4d50717e63e567d8c422.css, но это поможет до первого обновления библиотек H5P.

 

Сумма оценок: -
В ответ на Vadim Tabunshchik

Re: Как уменьшить padding и удалить border в вопросах drag and drop onto image

от Alexander Kurochkin -
Но если в моём собранном h5p-файле в папке H5P.DragQuestion-1.13/CSS в файле стиля "dragquestion.css" уже установлено значение "padding: 0.0em", то откуда тогда при демонстрации этого файла берётся значение "padding: 0.3em". В Вашем присланном файле "dragquestion.css" прописано именно это значение "padding: 0.3em". Откуда этот файл? Если из библиотеки H5P пакета, то значит можно это значение изменить! Откуда-то значение 0.3em берётся. Или я чего-то недопонимаю?
Сумма оценок: -
В ответ на Alexander Kurochkin

Re: Как уменьшить padding и удалить border в вопросах drag and drop onto image

от Vadim Tabunshchik -
Изображение пользователя Developers
Вы невнимательно прочитали мое сообщение, где я писал: всегда загружается файл стилей из предустановленной в Мудл библиотеки (и скрипты JS тоже). Скорее всего, из пользовательского пакета H5P берется только контент, а всё остальное - игнорируется. Вы хоть 10 своих CSS-ок загрузите, они не будут использоваться. Так работает встроенный в Мудл модуль H5P. И я считаю, что это правильно по нескольким причинам: производительность, безопасность и др.
То, что вы рассказываете про плагин WordPress, где работают «ваши стили», то точно такой же плагин есть и для Мудл (https://moodle.org/plugins/mod_hvp). Вот и попросите админа сайта его установить, в нем пользовательские стили работают.
Сумма оценок: -
В ответ на Vadim Tabunshchik

Re: Как уменьшить padding и удалить border в вопросах drag and drop onto image

от Alexander Kurochkin -
1. Благодарю за терпение. Повторяю, я не админ, а преподаватель. Я могу только посоветовать что-то изменить администратору.   
Я внимательно прочитал Ваше сообщение: 

>>"всегда загружается файл стилей из предустановленной в Мудл библиотеки"....
Поэтому повторяю вопрос: какой библиотеки? Ваш присланный файл "dragquestion.css" , где прописано значение "padding: 0.3em", откуда? Если, как Вы говорите из библиотеки H5P пакета, то значит можно это значение там изменить?
Или это файл стилей из какой-то  предустановленной в Мудл библиотеки, которая распространяется и на h5p модуль?
Далее:

>>Не хотите привлекать администратора, идите сложным путем - распаковывайте H5P и меняйте стиль в его исходниках.
Я так понял, что это не сработает, так как от  изменения стиля в моём файле ничего не зависит?

2. И, как я писал ранее, аналогичная проблема с padding и border в "не h5p" вопросах "drag and drop onto lmage", встроенных в систему moodle. Где прописаны стили для них?  Неужели никто с этим ранее не сталкивался?
Сумма оценок: -
В ответ на Alexander Kurochkin

Re: Как уменьшить padding и удалить border в вопросах drag and drop onto image

от Vadim Tabunshchik -
Изображение пользователя Developers
  1. >> Я могу только посоветовать что-то изменить администратору.
    Я написал, что вы можете попросить сделать администратора: «плагин есть и для Мудл (https://moodle.org/plugins/mod_hvp). Вот и попросите админа сайта его установить, в нем пользовательские стили работают.»
  2. >> Поэтому повторяю вопрос: какой библиотеки?
    Вы же преподаватель, а не администратор, зачем вам нужны подробности, тем более, что было озвучено: «…из пользовательского пакета H5P берется только контент, а всё остальное - игнорируется.» Т. е., пользовательские стили, JS-скрипты и всё остальное, что вы загружаете в пакете Тест УРЧ.h5p игнорируется. Почему - спросите у своего админа, он должен знать улыбаюсь
  3. >> Я так понял, что это не сработает…
    Верно поняли, не cработают никакие «костыли» при использовании модуля H5P, встроенного в Moodle. Поэтому смотрим п. 1 и идем на поклон к администратору.

По поводу «drag and drop onto lmage» тоже был ответ: «Границу вижу, с padding проблем не вижу». Я не вижу в стиле атрибута padding, покажите скриншот проблемы, хотя бы.

Сумма оценок: -
В ответ на Alexander Kurochkin

Re: Как уменьшить padding и удалить border в вопросах drag and drop onto image

от Alexander Kurochkin -

Во вложении пояснение моей проблемы в вопросах "drag and drop onto image" в самой moodle (не h5p!). Видны и padding и ненужный border

Приложение For forum.png
Сумма оценок: -
В ответ на Alexander Kurochkin

Re: Как уменьшить padding и удалить border в вопросах drag and drop onto image

от Alexander Kurochkin -
PS. В тексте над верхним правым рисунком пропало "без". Должно быть: "Все объекты для нормального просмотра должны размещаться без зазоров". А padding я вижу при просмотре свойств объекта в Chrome с помощью опции "инструменты разработчика".
Сумма оценок: -
В ответ на Alexander Kurochkin

Re: Как уменьшить padding и удалить border в вопросах drag and drop onto image

от Alexander Kurochkin -
Ps2. Прикрепляю файл с вопросами "drag and drop onto image". В структурах border ещё можно оставить, так как в обьектах я границы убрал специально. А вот в схемах border уже лишний! Ну и везде лишний этот самый padding!
Сумма оценок: -
В ответ на Alexander Kurochkin

Re: Как уменьшить padding и удалить border в вопросах drag and drop onto image

от Vadim Tabunshchik -
Изображение пользователя Developers
Alexander, проблема ведь не в плагинах, всё же работает как и задумывалось. Проблема в том, как вы хотите, чтобы отображались ваши "особенные" вопросы. улыбаюсь
Вот и в «drag and drop onto lmage» стиль element.style берется не из CSS-файла, он генерируется JS-скриптом. Как это лечить?
Не будут же разработчики переписывать код под ваши требования
Сумма оценок: -
В ответ на Vadim Tabunshchik

Re: Как уменьшить padding и удалить border в вопросах drag and drop onto image

от Alexander Kurochkin -

Но ведь можно же было все эти вещи предусмотреть, перенося их в редактор самих вопросов! А получился какой-то moodle-монстр, в котором вроде все есть, а реально сделать хорошие и качественные графические вопросы просто невозможно! Примитивные можно, а более серьезные вопросы со структурами или схемами - нет. Приходится мириться с тем, что есть и делать вопросы с "костылями", сознательно упрощая при этом графику. Я понял, что моя проблема здесь не решится. Спасибо за уделенное внимание!

Сумма оценок: -
В ответ на Alexander Kurochkin

Re: Как уменьшить padding и удалить border в вопросах drag and drop onto image

от Vadim Dvorovenko -
Изображение пользователя Developers Изображение пользователя Майнтейнер перевода
В общем, не пользуюсь h5, поэтому теоретический ответ. Если есть возможность вставить на страницу произвольный html-текст, попробуйте вставить в тот же div, внутри которого окажется вопрос
  

  <style type="text/css" scoped>
.h5p-draquestion .h5p-draggable {padding: 0 !important}
    </style>
Ключевые слова scoped и !important
Сумма оценок: -