H5P multichoice in Drupal Quiz conflict with Bootstrap on touch devices

Submitted by spazfox on Sat, 03/21/2015 - 21:37
Forums: 
Bugs in content types

I'm using H5P multichoice questions for a Drupal quiz, and have discovered that for questions with multiple correct answers, the user's response is not evaluated correctly during the quiz. This problem only seems to occur on touch devices (verified with iPhone 6 and recent iPad so far). Some additional details:

  • This type of H5P content type (multichoice with multiple correct answers) works fine on touch devices when the content type has NOT been added to a quiz
  • This error is seen both during the quiz and if the question is viewed individually as a node
  • I have not been able to replicate this error using any non-touch browsers/devices

On a potentially related note, to use H5P content in a quiz, I had to give the user "View quiz question outside of a quiz" permission or the H5P questions will not show up during the quiz.

I've filed a bug report about this for the Quiz module in Drupal (https://www.drupal.org/node/2456921), but figured it might be useful to post here, too.

falcon's picture

falcon

Thu, 04/09/2015 - 20:20

Regarding this "On a potentially related note, to use H5P content in a quiz, I had to give the user "View quiz question outside of a quiz" permission or the H5P questions will not show up during the quiz."


Are you sure about that? I tested this and found that users would be able to access the H5P inside the quiz without the "View quiz question outside of a quiz" permission, but they couldn't access the H5P node directly. IE node 12 is an H5P multichoice and part of the quiz node 13. When taking 13 I can see node 12, but when visiting node 12 directly I can't see it unless I have "View quiz question outside of a quiz" permission. Are you experiencing the same?

spazfox

Sun, 04/12/2015 - 20:23

I'm positive. Without giving users the permission of "View quiz question outside of a quiz," the H5P questions simply did not show up in the quiz. I haven't tested this on a clean install, but on the production site where I'm using this, the problem definitely exists as described (i.e., using your sample scenario, when taking the node 13 quiz, the user would not see the node 12 question at all unless they are given permission to view quiz questions outside of a quiz). 

One caveat: I may not have tested this with the most recent version of the quiz or H5P modules (I think I did, but I can't be sure). I'll test again to make sure the issue still exists on my site.

falcon's picture

falcon

Mon, 04/13/2015 - 16:45

Ok, please signal back when you've tested it again. I'll give it another shot as well.
thomasmars's picture

thomasmars

Mon, 04/13/2015 - 10:03

I tried testing H5P multichoice questions with quiz integration using their latest versions and multiple correct answers.  I have currently tried it on iPad, and the evaluation of answers seems to be done correctly. Make sure you have these behavioural settings turned off when using multiple correct answers:

- Turn off "single answers"

- Turn off "give one point for the whole task" (if you want each of the multiple correct answers to give points)

 

If you don't have the latest versions, you should try upgrading them as well. If the problem still persist, you could give some details about what is wrong with the evaluation of the user's response and what browser, etc. you are using, and I'll be happy to investigate further!

spazfox

Tue, 04/21/2015 - 00:23

The issues (both the multiple answer problem and requiring "View quiz question outside of a quiz" permission issue) still exist. I do have have "single answers" turned off, but the questions should only recieve one point for the whole task (so I do NOT have that turned off). Perhaps the issue does not exist when multiple points are given? I have not tested that. But even if that is the case, I do NOT want to give multiple points for these questions, so the bug would still be an issue. 

I've described the issue and browser/device issues above. On touch devices (all of the iOS ones I've tested so far, anyway), when users select all of the correct multiple answers, they are not marked correctly (their answer for the question overall is marked incorrect). 

Has the Multiple Choice content been updated since the overall Feb release? If so, I have not updated that content type since then (it's still not clear to me exactly how to go about updating just a single content type...documentation on that point seems rather lacking).  

falcon's picture

falcon

Tue, 04/21/2015 - 16:21

We'll try again to reproduce the multichoice problem. Maybe it only fails with single point enabled. I'm not sure if thomasmars had that enabled. The quiz issue will be looked into prior to the next release of Quiz 4. However we're not optimistic about being able to reproduce it without extra input.

You may upgrade a single content type by downloading the example content here from H5P.org and uploading it via the library administration page on your site. However that will also update all the subcontent types that content type uses. For multichoice that won't be a problem since it doesn't use any sub content type.

In the future the upgrade process will be a lot simpler with notifications when updates are available and checkboxes to mark what libraries you want to update. No downloading and uploading of H5P files.

spazfox

Tue, 04/21/2015 - 19:13

I just tested this on a clean install, and it appears that it is due to a conflict with Bootstrap. The production site I'm using it on uses a subtheme based on Bootstrap. On the test site, the question is scored correctly when using Bartik, but it is not scored correctly when using Bootstrap. You can see and test for yourself here: http://ericfox.com/h5p/

spazfox

Tue, 04/21/2015 - 19:14

Also: changing the "give one point for the whole task" setting did not impact the incorrect scoring when using Bootstrap (in the test environment, it is currently set to give only one point for whole task, but I tested it with this unchecked, as well).

spazfox

Tue, 04/21/2015 - 19:16

Additional clarification: the question IS scored correctly (even with the Bootstrap theme) when I tested with my laptop (i.e., non-touch device). It is NOT scored correctly when tested with my iPhone. 

falcon's picture

falcon

Wed, 04/22/2015 - 09:58

Thanks a lot for the extra info. We'll try this on your site. It will be interesting to see what is going wrong here.

spazfox

Fri, 04/24/2015 - 21:40

I've done some more testing, and it appears that this might be a conflict with the FastClick library/module (or perhaps a conflict between FastClick and Bootstrap; e.g., see http://stackoverflow.com/questions/21767452/bootstrap-3-radio-buttons-do...). Disabling FastClick on my production site seems to have resolved this issue.

The strange thing, though, is that I'm not using FastClick on my test site (http://ericfox.com/h5p), but the problem persists there. Weird. The test site is on a different server, though, so maybe there's some back-end server configurations coming into play there. 

falcon's picture

falcon

Mon, 04/27/2015 - 10:24

Thank you for adding more info here. I hope one of our developers will start on this issue today or tomorrow.
thomasmars's picture

thomasmars

Tue, 04/28/2015 - 13:16

Thank you for the additional information :)

I was able to reproduce your bug with bootstrap 3.

There is a bug in bootstrap 3, which produces the following javascript error:

"Uncaught TypeError: $scrollableElement.on is not a function"

This error causes the DOM to never be loaded completely.

Because we rely on the DOM to be fully loaded before executing our script, this bug causes our h5p quiz integration to never be run on iPhone/iPod. This in turn causes the answers to never be updated properly, since the score listener is never initialized.

The reason this is scored correctly on laptops and not iPhone is because of the way iPhone handles the error.

You can fix this by changing theme or commenting out line 120-122 in bootstrap.js of the bootstrap theme.

 

spazfox

Tue, 04/28/2015 - 21:15

Thanks for looking into this. I still think there was a FastClick conflict, as well, because everything seems to be working properly on my production sites now that I've I disabled FastClick (but have not made any changes to Bootstrap). And commenting out the line of bootstrap.js would be a monumental pain for me, as I'm using the BootstrapCDN for my theme and would have to make a lot of changes to start hosting a custom version of Bootstrap locally.

I wonder if the Bootstrap bug you mention is in effect only when "Fix anchor positions" is enabled (using the Drupal Bootstrap theme, anyway)? I have it disabled on my site, and the following discussions suggest that bug may be negated by doing so:

https://www.drupal.org/node/2162165

http://stackoverflow.com/questions/23204464/drupal-bootstrap-scroll-conf...

thomasmars's picture

thomasmars

Wed, 05/06/2015 - 11:15

Disabling "Fix anchor positions" did indeed make the Bootstrap bug i mentioned go away.

I installed FastClick as well and was able to reproduce the bug. After some experimenting I have narrowed the problem down to a conflict between FastClick and Bootstrap when using radio buttons, as discussed in this thread:

http://stackoverflow.com/questions/21767452/bootstrap-3-radio-buttons-do-not-work-with-fastclick-on-iphone

However, since this is not an issue linked to H5P I will not be able to pursue it further. Disabling FastClick is the easiest fix, as you have already done. I wish you good luck if you're pursuing this further :)