Size mismatch in "drag the words"

Submitted by mhm98 on Mon, 04/26/2021 - 10:45
Forums: 
Bugs in content types

Hello
In “drag the words”, When I get html output from h5p and when I put the words in boxes, the size of the word’s box does not match the empty boxes and is smaller, while it’s true in h5p!
What should I do to solve this problem in html?
Thanks

H5P file: 
Binary Data w.h5p
Content types: 
Drag the Words

mhm98

Mon, 04/26/2021 - 11:25

Screenshot from html

Attachments: 
Image icon Screenshot (162).png

mhm98

Mon, 04/26/2021 - 11:32

Screenshot from size mismatch in html

Attachments: 
Image icon Screenshot (162).png
otacke's picture

otacke

Mon, 04/26/2021 - 19:35

Hi!

Have you been playing with CSS overrides maybe?

Cheers,
Oliver

mhm98

Tue, 04/27/2021 - 09:03

No, I did not change it, and if I have to change it, I do not know where to change.

otacke's picture

otacke

Tue, 04/27/2021 - 11:39

Hi!

That's interesting, because the font that's visible on the screenshot doesn't look like what it normally looks on H5P. What browser have you been using on what platform?

Cheers,
Oliver

mhm98

Mon, 05/03/2021 - 09:18

Hi!

I am using Windows (Windows 10) and Chrome browser.

Let me also say that I made this exercise in the Lumi editor.

BV52's picture

BV52

Mon, 05/03/2021 - 19:25

Hi mhm98,

Ahuh! FInally I understand what you meant with "HTML output" since AFAIK only the Lumi editor have a feature to export in HTML. Anyway I can see the issue but I'm afraid I can't help you with this issue. Sebastian one of the developers of Lumi frequents the forums and hopedully he will see this thread. You can also reach out to them directly, instructions are at the bottom of their website.

Tip: There is a reason for the questions and information request in this forum. Most of the time, if all or most of the information are provided members of the community will have an idea on what is causing the issue (e.g. content was created in Lumi and exported as HTML).

-BV

mhm98

Mon, 05/10/2021 - 10:48

Hi

Anyway, thank you for your response and your friend for his response. If you reach a solution in the future, please let me know.

Thanks

otacke's picture

otacke

Mon, 05/10/2021 - 15:35

Hi mhm98!

This is not something that the H5P core team can fix. The problem arises in the export of Lumi that adds a couple of CSS classes to the HTML file. The Lumi team will have to fix this. Please report the issue in their github repository at https://github.com/Lumieducation/Lumi/issues - if nobody reports it, the problem may never go away. Feel free to add that this problem is caused by adding the MuiCSS theme without customization.

If you want to fix it manually yourself, then use a text editor to locate the string

"*, *::before, *::after":{boxSizing:"inherit"},

in the HTML file and delete exactly this bit, then save. You will have to do that for every file however.

Cheers,
Oliver

mhm98

Tue, 05/11/2021 - 09:18

Hi Oliver

Thank you very much for your answers and tips.

The problem with that file was fixed manually.

Thanks!

otacke's picture

otacke

Tue, 05/11/2021 - 19:30

Good for you. But the problem remains for others, so it would be good if you filed a bug report at https://github.com/Lumieducation/Lumi/issues.

otacke's picture

otacke

Mon, 05/24/2021 - 21:28

Hi mhm98!

The problem still remains, and I could not find your error report at https://github.com/Lumieducation/Lumi/issues :-/ Do you need any guidance?

Cheers,
Oliver

otacke's picture

otacke

Tue, 06/08/2021 - 20:58

Hi mhm98!

I think you still have not created an issue reporting the problem that you found, have you?

Cheers,
Oliver

otacke's picture

otacke

Tue, 07/06/2021 - 12:56

Hi mhm98!

Still no bug report and no reply from you either.

This is one of the occasions that make me wonder why I help people here on the forum if they gladly let others solve their problems for free but don't give back anything in return.

Cheers,
Oliver

La Dolce Italia

Mon, 01/01/2024 - 08:54

Hello Oliver,
Hi Oliver, I've taken the liberty of writing to you as I see that you're knowledgeable about Lumi. Do you know if I can embed (html) my exercises on my website in such a way that they properly adjust for both desktop and mobile views? Currently, on mobile, the size seems incorrect, leading to a scrollbar and incomplete display. When I do the same exercise in h5p, everything is fine, but when I do it on Lumi, things happen like in the attachment. I am a teacher, I don't work with Wordpress or other such platforms, and I can't use the h5p plugin, which is why I decided to use Lumi. I've tried modifying the height in the code, but it doesn't seem to make a difference.

Here is the code for the exercise.

<iframe src="https://app.Lumi.education/api/v1/run/jZML6_/embed" width="1088" height="720" frameborder="0" allowfullscreen="allowfullscreen" allow="geolocation *; microphone *; camera *; midi *; encrypted-media *"></iframe><script src="https://app.Lumi.education/api/v1/h5p/core/js/h5p-resizer.js" charset="UTF-8" />

 

I would be very grateful for any assistance, as I am not familiar with programming. I've created exercises for my students, but I'm struggling with how to properly display them on mobile devices. The layout seems to be off when viewed on a phone. 

Saluti
Laura

Attachments: 
Image icon IMG_1549.jpg

La Dolce Italia

Mon, 01/01/2024 - 08:56

Hi Oliver, I've taken the liberty of writing to you as I see that you're knowledgeable about Lumi. Do you know if I can embed (html) my exercises on my website in such a way that they properly adjust for both desktop and mobile views? Currently, on mobile, the size seems incorrect, leading to a scrollbar and incomplete display. When I do the same exercise in h5p, everything is fine, but when I do it on Lumi, things happen like in the attachment. I am a teacher, I don't work with Wordpress or other such platforms, and I can't use the h5p plugin, which is why I decided to use Lumi. I've tried modifying the height in the code, but it doesn't seem to make a difference.

Here is the code for the exercise.
<iframe src="https://app.Lumi.education/api/v1/run/jZML6_/embed" width="1088" height="720" frameborder="0" allowfullscreen="allowfullscreen" allow="geolocation *; microphone *; camera *; midi *; encrypted-media *"></iframe><script src="https://app.Lumi.education/api/v1/h5p/core/js/h5p-resizer.js" charset="UTF-8" />

I would be very grateful for any assistance, as I am not familiar with programming. I've created exercises for my students, but I'm struggling with how to properly display them on mobile devices. The layout seems to be off when viewed on a phone.

Attachments: 
Image icon IMG_1549.jpg
otacke's picture

otacke

Mon, 01/01/2024 - 15:49

Hi!

Happy new year!

Lumi is giving you an invalid embed code. The `script` tag is not self closing, so `<script ... />` may be interpreted as expected by some browsers as a courtesy, but you cannot rely on that.

The correct syntax is `<script ...></script>`, so that part of your embed code needs to be:

<script src="https://app.Lumi.education/api/v1/h5p/core/js/h5p-resizer.js" charset="UTF-8"></script>


Please note that I may know things about Lumi (or about H5P general), but I am neither affiliated with the Lumi team nor the H5P core team. So, while you're "only" a teacher, I am spending my free time here and adressing me directly may not yield an answer. You could have contacted Lumi directly to get support for their product that you already identified as the likely culprit yourself.

Best,
Oliver

La Dolce Italia

Tue, 01/02/2024 - 11:21

Hello Oliver!

I've already reached out to Lumi and am currently awaiting their response. In the meantime, I thought I'd give your suggestion a try, haha.

I attempted to modify the code as you advised, but unfortunately, it still doesn't work :( It seems nothing is working with these exercises created on Lumi (those created on h5p are perfectly fine, but I can't afford to pay 69 dollars for month, and this was the reason I was looking for an alternative). I'm wondering if anyone else is experiencing the same issue.

Looks like I'll have to wait for a response from the Lumi team. Nevertheless, thank you so much for your help.

Best regards,

otacke's picture

otacke

Tue, 01/02/2024 - 12:14

Well, resizing seems to work perfectly fine with my changes here: https://olivertacke.de/66d560eb-1597-4a55-832b-e2a0f08e0478.html

BV52's picture

BV52

Mon, 04/26/2021 - 20:05

Hi mhm98,

The content works properly here.

-BV

mhm98

Tue, 04/27/2021 - 09:09

When I click "here", an error page opens that I will send it as an attachment

I also emphasize that the H5P format works properly but the HTML output has a problem, as shown in the screenshot I sent above.

Attachments: 
Image icon Screenshot (169).png
BV52's picture

BV52

Tue, 04/27/2021 - 11:34

Hi mhm98,

Sorry I was testing some settings in the back end and forgot the roll it back for this content. You should be able to access it now. As for your concern I am not sure what you mean with "the HTML output has a problem"

-BV

mhm98

Mon, 05/03/2021 - 09:23

Hi

Thanks, it was visible and I saw.

I said before that the H5P format works well, but when we output it in html format and open it, becomes problematic and it happens as in the screenshot. That is, the problematic file format is HTML, Not H5P.