Nesting error on quizzes results when no more attempts remain

rogermont

Hello,
We have detected a nesting error that ocurrs when there are no more attempts remaining on a quiz, and the results are shown after the quiz. It seems like there is an extra or missing div.
To reproduce the error, please go to the URL above, and take the test two times. Note how the nesting is ok on the results after the first try, but wrong on the second and last attempt.
The DIVs of each question are not placed in the correct place, causing a wrong structure and the last answer to be shown outside the form.
Thanks!
Best,
Roger.

rogermont

Hello,
It's been 20 days without an answer to this topic.
Could someone from the support team pleae take a look at it?
Best,
Roger.

saguaros

Hi Roger,

Let me check and will get back to you shortly.

Regards

saguaros

Here are steps that I proceeded:

Login with provided account
Access this course page and go through questions and Quizz (the second one)
Once done, I see the result and RETAKE the quizz
But it still shows normally:

rogermont

Thank you Heinz!

The nesting error only shows in the last question. You would need to scroll down to the very end of the results page.

Please let me know if you need anything to reproduce the error.

Thanks!

Best,
Roger.

saguaros

Hi Roger,

Yes, I also checked the end of result view:

rogermont

Hi Heinz!

Thank you for looking into this.

Please note the error only shows right after finishing the test. Visiting the results page later on does not reproduce the error.

Could you please try again? We have many different students that reported this, and we have been able to confirm the bug on numerous occasions.

Thank you!

Best,
Roger.

saguaros

At this moment, I can't find the wrong div in the quiz on your website so I temporarily added this custom css. Could you review?

.guru-quiz__question.guru-question {
    margin: 0 auto!important;
    max-width: 980px !important;
    box-sizing: border-box;
}

rogermont

Hi Heinz!

Thank you for your message and the proposed code.

I am afraid that won't work, as the HTML code generated by Guru is totatlly unstructured, and the way each browser will interpret the missing divs is totally unpredictable.

Please see the following images.

In this one, the last question is outside the div guru-component, and the second to last is outside the modal div.

And on this one, more question divs are outside where they should be, some even outside the div the_quiz.

This is totally wrong, and the way each browser will interpret it is just a random guess.

For comparison, this is how the questions are presented when visiting the results page NOT right after having taken the test.

That is the correct structure, and how the results should look right after taking the course.

Please let me know if you need help to reproduce the error with the insturctions on the hidden fields.

Thanks!

Best,
Roger.

saguaros

Hi Roger,

Could I take a backup of your site to debug in my dev environment?

I will try to remove quiz one by one to see which one causes the issue.

At this moment, could you try with css solution above?

rogermont

Hi Heinz,

Yes no problem! Thank you.

I suspect the error is in the part of the code that renders the div "guru-quiz__header" right when the test has been submitted and there are no more attempts left.

Looking at that code, there are two <div id="the_quiz"> sections in the html, the </form> closes early (right in the middle of some of the answers), and the inner #the_quiz div is never properly closed within the form, which cascades into the remaining questions being orphaned outside the form element.

Thank you!

Best,
Roger.

saguaros

rogermont Let me check and will get back to you.

rogermont

Thank you!

rogermont

Hi Heinz!

Just a quick follow up on this. Did the team find a solution?

Thanks!

Best,
Roger.

saguaros

rogermont HI Roger,

Unfortunately, there is no new update yet, I will keep you posted.