Drag & Drop - Centers text despite "Left" being selected

Drag & Drop - Centers text despite "Left" being selected

by John Provasnik -
Number of replies: 13
Picture of Particularly helpful Moodlers Picture of Testers

Hello. 

I have a teacher who created an activity and selected that each "text" of the drag and drop be left- aligned. When in editing mode of the activity, we can see the "left-aligned" being applied. However, when viewing the activity, it reverts back to text-justified: center. I tried to override this with custom css, which works in by browser tools, but it does not work when I save it to my theme's custom CSS section. 

This is the activity type I am referring to: https://h5p.org/drag-and-drop

This is the css I have tried so far:

.h5p-dragquestion .h5p-draggable {text-align: left!important;}

div.h5p-draggable.ui-draggable.h5p-advanced-text {text-align: left!important;}

This is what I see before and after i edit the justification in the browser tools: 

Attachment center.png
Attachment left.png
Average of ratings: -
In reply to John Provasnik

Re: Drag & Drop - Centers text despite "Left" being selected

by Joseph Rézeau -
Picture of Core developers Picture of Particularly helpful Moodlers Picture of Plugin developers Picture of Testers Picture of Translators

Hi John,

This is a known bug in H5P Drag & Drop. I reported it more than 2 years ago here: https://h5p.org/node/195548 with an easy fix... but it was never fixed by the H5P core team. 

Average of ratings:Useful (1)
In reply to Joseph Rézeau

Re: Drag & Drop - Centers text despite "Left" being selected

by Oliver Tacke -
Not to break existing content is the "not so easy" part. Don't think there has been a proposal for that in text or code yet.
Average of ratings:Useful (1)
In reply to Joseph Rézeau

Re: Drag & Drop - Centers text despite "Left" being selected

by Joseph Rézeau -
Picture of Core developers Picture of Particularly helpful Moodlers Picture of Plugin developers Picture of Testers Picture of Translators
In reply to Joseph Rézeau

Re: Drag & Drop - Centers text despite "Left" being selected

by Oliver Tacke -
I don't see the problem of breaking existing content being addressed.
In reply to Joseph Rézeau

Re: Drag & Drop - Centers text despite "Left" being selected

by Luca Bösch -
Picture of Core developers Picture of Documentation writers Picture of Particularly helpful Moodlers Picture of Peer reviewers Picture of Plugin developers Picture of Testers
Dear Joseph,

Let's see what happens.

Best,
Luca
Average of ratings:Useful (1)
In reply to Luca Bösch

Re: Drag & Drop - Centers text despite "Left" being selected

by Oliver Tacke -
Hi Luca!

Probably nothing, as this change would break existing content.

You don't know whether people wanted their content to be centered or if the were forced to by the bug. Now removing that property would allow to change the positioning, but all existing content would automatically use left alignment unless you add an upgrade script introduction some extra flag for each draggable existing content and some extra code to handle "old" and "new" differently in the view and also some extra code to remove the flag on a draggable once the alignment is activately changed.

Best,
Oliver
In reply to Oliver Tacke

Re: Drag & Drop - Centers text despite "Left" being selected

by Joseph Rézeau -
Picture of Core developers Picture of Particularly helpful Moodlers Picture of Plugin developers Picture of Testers Picture of Translators

Hi Oliver,

I beg to disagree with your reply above.

1.- There is definitely a bug in the D. & D. activity, which can be easily fixed by that small change: in the D. & D. library css file for the .h5p-dragquestion .h5p-draggable elements, remove the text-align: center rule. And removing that rule will not break existing D. & D. activity instances as I'm hoping to demonstrate.

2.- When entering the text editor in H5P activities text is left-aligned by default (the Align Left button is selected by default). Users who want their text to be either centered or right-aligned need to click the relevant buttons on the toolbar. Unfortunately, because of the bug mentioned above, the text-align: center rule over-rides the align-left default behaviour of text. On the figure below, I have attached to a D. & D. display the extract from the content.json file for each draggable item.

As we can see, the draggable text which says "left-aligned (default) text" does not have a style rule, it's not needed because left alignment is the default behaviour. I have created 3 text draggables, and, as per the bug, the text which says "left-aligned (default) text" is displayed as centered.

3.- Now let's see what happens after simply removing the text-align: center rule from the D. & D. library css file for the .h5p-dragquestion .h5p-draggable elements.

The draggable text which the user had originally selected to be centered is still centered, ditto with the right-aligned text, and the default left-aligned text is indeed correctly displayed as left-aligned. Everybody is happy.smile

What you wrote "... removing that property would allow to change the positioning, but all existing content would automatically use left alignment" is not true.

Actually, two categories of users might be unhappy---or, rather, intrigued---after the fix.

a) those users who initially wanted their text left-aligned, saw it centered because of the bug, had resigned themselves to the buggy behaviour and now, after the fix, saw things displayed as they originally wished;

b) those users who did want their text centered, and at first clicked the Center toolbar button, then one day realized that this was not necessary since leaving the Align Left default button clicked gave the same result. It's impossible to know if those are in the majority. I am of opinion that it does not matter, as they can always edit their D. & D. and center their text if they wish to do so. And this minor inconvenience is balanced by the major advantage of making things work as they should.

Q.O.D.

Average of ratings:Useful (1)
In reply to Joseph Rézeau

Re: Drag & Drop - Centers text despite "Left" being selected

by Oliver Tacke -
What you wrote "... removing that property would allow to change the positioning, but all existing content would automatically use left alignment" is not true.

You are correct, this one was not true or not precise or incomplete at least. Let me try to explain better this time.

When people have designed content, they were not able to make text be left-aligned. We can agree on that, I believe. We also agree that this is a bug, I assume.
Now, people may have wanted the text to be centered, but they never ever explicitly clicked on the center button. Why would they, as it's way more convenient to just enter the text, it's centered, done. At least I am that lazy, but I dare to assume that many people also never explicitly set the text to be centered. See where I am heading? Now, removing that property would allow to change the positioning [to left-aligned], but all existing content [that never explicitly set the text to be centered] would automatically use left alignment.

That's your scenario b) and we can argue all day long how many content types would be effected - we don't know. But it's not just matter of "technical" right or wrong, but people are involved. I for myself as a user would be pretty pissed if I had to manually edit every single Draggable in Drag-and-Drop. I as a company would not want to deal with pissed-off people, so I better implement a fix that doesn't cause that trouble. It's always simple to argue "this is technically wrong, and there's this easy fix!" from a developer perspective, but then you neglect that you are dealing with humans who are using your software.

As I outlined above, it's possible to fix that, but it involves more that just removing the CSS property.

I'd appreciate if you could at least agree that "easy fixable" may be true from a technical perspective, but not from a socio-technical perspective. If you on top of that stopped repeating and insinuating that this was an easy fix: 😘

Best,
Oliver
In reply to Oliver Tacke

Re: Drag & Drop - Centers text despite "Left" being selected

by Joseph Rézeau -
Picture of Core developers Picture of Particularly helpful Moodlers Picture of Plugin developers Picture of Testers Picture of Translators
Thanks for your reply, Oliver.
I think we can say that "we agree to disagree".
In reply to Joseph Rézeau

Re: Drag & Drop - Centers text despite "Left" being selected

by Daniel Thies -
Picture of Core developers Picture of Particularly helpful Moodlers Picture of Plugin developers Picture of Testers

I think the disagreement is one of policy. The Moodle integration policy is that bugs should whenever possible be backported to all versions released in the last year. Security bugs are backported for another year or longer for LTS. So Moodle developers and admins expect this. If you submit a core fix for Moodle integration that policy is not debatable.

The policy is not necessarily shared by other user communities. H5P is used on other platforms, and H5P core team detemine their own policy. If one is submitting a patch for an H5P core content type, one should follow their rules.

Average of ratings:Useful (1)
In reply to Oliver Tacke

Re: Drag & Drop - Centers text despite "Left" being selected

by John Provasnik -
Picture of Particularly helpful Moodlers Picture of Testers
Hey Oliver, Since the bug does not occur when creating/editing and H5P (it only happens when viewing the saved H5P), I don't think (imo) there is confusion regarding what people originally wanted since when people design it, they either immediately see Left as the default, or they would have changed it to Center and could definitely see this change immediately in action on the 'edit' screen. The issue is more likely "have people gotten used to seeing it centered on the 'view' screen despite how they originally designed it." Does that make sense to you? Again, imo!
In reply to John Provasnik

Re: Drag & Drop - Centers text despite "Left" being selected

by Oliver Tacke -

Hi John!

The recommended steps are to a) create the dropzones and then b) create the draggables, because you need to tell them what drop zone they can be dropped onto. When you follow these steps even without setting centered alignment on the text, in the editor you will immediately see the text centered in the draggable. Once you're used to that behavior, I believe it's very unlikely that you always explicitly click on the center button when you create text draggables. I don't (sample size = 1).

Best,
Oliver

Average of ratings:Useful (2)