# MathJax does not work properly inside Feedback of multiplechoice quiz

## Details

• Type: Bug
• Status: Closed
• Priority: Minor
• Resolution: Fixed
• Affects Version/s: 2.3.3, 2.4.3
• Fix Version/s:
• Component/s:
• Labels:
• Testing Instructions:
Hide
1. Create a multiple choice, multiple-response question as follows.
2. Some of the choices should be one line of text. Others should be multiple paragraphs. Feel free to throw some images into the mix too, or other complexities like that.
3. Similarly, give some choices some specific feeback that is one or multi-line. For other choices, leave the feedback blank.
5. Ensure that all the display options are turned on. Restart the question of necessary.
6. Make sure the layout of the choices is OK.
7. Select all choices and "Submit and finish"
8. Make sure all the feedback is displayed OK. The feedback should start on the same line as the choice, but it may wrap / have paragraph breaks.
Show
Create a multiple choice, multiple-response question as follows. Some of the choices should be one line of text. Others should be multiple paragraphs. Feel free to throw some images into the mix too, or other complexities like that. Similarly, give some choices some specific feeback that is one or multi-line. For other choices, leave the feedback blank. Now, preview your question. Ensure that all the display options are turned on. Restart the question of necessary. Make sure the layout of the choices is OK. Select all choices and "Submit and finish" Make sure all the feedback is displayed OK. The feedback should start on the same line as the choice, but it may wrap / have paragraph breaks.
• Difficulty:
Easy
• Affected Branches:
MOODLE_23_STABLE, MOODLE_24_STABLE
• Fixed Branches:
MOODLE_23_STABLE, MOODLE_24_STABLE
• Pull from Repository:
• Pull Master Branch:
• Pull Master Diff URL:

## Description

When students get Feedback from a multiple choice answer in the quiz module, all math notation is messed up. I use MathJax, and there seems to be a problem with javascript inside the feedback (see https://tracker.moodle.org/browse/MDL-35343). In within HEAD I have:

<script type="text/x-mathjax-config"> MathJax.Hub.Config({
MMLorHTML:

{ prefer: "HTML" }

,
tex2jax:

{ displayMath: [['$$', '$$'], ['\$', '\$'], ['@d', '@d']], inlineMath: [['$', '$' ], ['\$$', '\$$']], processEscapes: true }

,
});
</script>
<script type="text/javascript" src="http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS_HTML"></script>

It seems that the javascript escapes at some point in the feedback and then writes out the code instead. I am using Firefox, but the problem is also present in Chromium. I have no windows & IE. Moodle 2.3.3+ build 20121123.

It is the same problem as described in this thread: https://moodle.org/mod/forum/discuss.php?d=214198&parent=933794

I have realized, that it has something to do with the css classes feedback and rightanswer. If I change "feedback" or "rightanswer" to something else in the source code, the math will show up right...

UPDATE: If I in "question/type/multichoice/styles.css" remove/comment out the code

*

{ display:inline }

script

{ display:none }

then it works fine. - But of course then the right answer will start one line under 'Correct answer:' - but that is a minor issue for me.

## Attachments

1. MDL-37845-before-patch.png
401 kB
2. MDL-37845-with-patch.png
399 kB

## Activity

Hide
Andrew Nicols added a comment -

This isn't a JS issue really - it's an issue with the CSS in questiontype_multichoice.

I'm reassigning to Tim as Quiz maintainer. I've also added Mary Evans as a watcher so she's aware of the this issue in other areas of Moodle.

Show
Andrew Nicols added a comment - This isn't a JS issue really - it's an issue with the CSS in questiontype_multichoice. I'm reassigning to Tim as Quiz maintainer. I've also added Mary Evans as a watcher so she's aware of the this issue in other areas of Moodle.
Hide
Mary Evans added a comment -

Adding Mauno as a watcher as I know he uses similar types of Maths plugins and may be able to help solve this problem.

Show
Mary Evans added a comment - Adding Mauno as a watcher as I know he uses similar types of Maths plugins and may be able to help solve this problem.
Hide
Tim Hunt added a comment -

Are you sure you are seeing this bug in 2.3.3? This looks like a straight duplicate of MDL-35343, which is marked fixed in 2.3.3.

Show
Tim Hunt added a comment - Are you sure you are seeing this bug in 2.3.3? This looks like a straight duplicate of MDL-35343 , which is marked fixed in 2.3.3.
Hide
Mary Evans added a comment -

Gunner, can you tell me if this problem 'bug' happens in every browsers? FireFox, Chrome, Opera, Internet Explorer, Safari?
Also it would be good if you could give some general instructions, like how to set up a simple question so I can test it. If it is a CSS problem, which I doubt, I need to replicate the bug to fix it.

Thanks
Mary

Show
Mary Evans added a comment - Gunner, can you tell me if this problem 'bug' happens in every browsers? FireFox, Chrome, Opera, Internet Explorer, Safari? Also it would be good if you could give some general instructions, like how to set up a simple question so I can test it. If it is a CSS problem, which I doubt, I need to replicate the bug to fix it. Thanks Mary
Hide
Gunnar Restorff added a comment -

@Tim: Yes, I am completely sure, the version is: "Moodle 2.3.3+ build 20121123" as mentioned. The bug you refer to is considering "Specific feedback" I am talking about the rightanswer feedback, which is not the same (I think).

Show
Gunnar Restorff added a comment - @Tim: Yes, I am completely sure, the version is: "Moodle 2.3.3+ build 20121123" as mentioned. The bug you refer to is considering "Specific feedback" I am talking about the rightanswer feedback, which is not the same (I think).
Hide
Mary Evans added a comment -

It appears so!

Show
Mary Evans added a comment - @ Tim Hunt It appears so!
Hide
Mary Evans added a comment - - edited

In that case it needs...

{ display: none; }

which is what you said!

Show
Mary Evans added a comment - - edited In that case it needs... .que.multichoice .feedback .rightanswer script { display: none; } which is what you said!
Hide
Tim Hunt added a comment -

Yes. However, the real problem is the rules like

{ ... }

The * matches too much. A better solution would be to rewrite those rules. Any suggestion for how to do that?

Show
Tim Hunt added a comment - Yes. However, the real problem is the rules like .que.multichoice .feedback .rightanswer * { ... } The * matches too much. A better solution would be to rewrite those rules. Any suggestion for how to do that?
Hide
Mary Evans added a comment -

You could use visibility: hidden then that may keep it on the same line

{ visibility: hidden; }

Show
Mary Evans added a comment - You could use visibility: hidden then that may keep it on the same line .que.multichoice .feedback .rightanswer script { visibility: hidden; }
Hide
Mary Evans added a comment - - edited

But Tim, this was true of the specificfeedback rules too...

 .que.multichoice .answer .specificfeedback {  padding: 0 0.7em;  background: #FFF3BF; } .que.multichoice .answer .specificfeedback * {  display: inline;  background: #FFF3BF; } .que.multichoice .answer .specificfeedback script {  display: none; }

Show
Mary Evans added a comment - - edited But Tim, this was true of the specificfeedback rules too... .que.multichoice .answer .specificfeedback { padding: 0 0.7em; background: #FFF3BF; } .que.multichoice .answer .specificfeedback * { display: inline; background: #FFF3BF; } .que.multichoice .answer .specificfeedback script { display: none; }
Hide
Gunnar Restorff added a comment -

@Mary: I have changed the css as shown (or to be more correct, I asked the IT-administration to change it as I don't have permission to do that ). Therefore I cannot reproduce it without setting up a local server to check it, and I don't have the time. So this is going to be by memory, with a small chance of mistakes.

There are two issues. One is the code showing up (which apparently happens in all browsers, as far as I remember). This is probably due to the missing

script

{ display:none }

The other part is the Math getting completely messed up. This did happen surely on Firefox (ubuntu) and IE (Windows 7). I cannot remember whether it happens on Chromium (ubuntu) but it did not happen on Safari (OSX). Also if I changed "Math Settings>Math Renderer>HTML-CSS" to "Math Settings>Math Renderer>MathML" (right clicking in Firefox) it seemed to work better (as far as I remember). But it is not fair to hope that students do realize this, especially not during an exam session). Hope this helps?

Thx. for replies,
Gunnar

Show
Gunnar Restorff added a comment - @Mary: I have changed the css as shown (or to be more correct, I asked the IT-administration to change it as I don't have permission to do that ). Therefore I cannot reproduce it without setting up a local server to check it, and I don't have the time. So this is going to be by memory, with a small chance of mistakes. There are two issues. One is the code showing up (which apparently happens in all browsers, as far as I remember). This is probably due to the missing .que.multichoice .feedback .rightanswer script { display:none } The other part is the Math getting completely messed up. This did happen surely on Firefox (ubuntu) and IE (Windows 7). I cannot remember whether it happens on Chromium (ubuntu) but it did not happen on Safari (OSX). Also if I changed "Math Settings>Math Renderer>HTML-CSS" to "Math Settings>Math Renderer>MathML" (right clicking in Firefox) it seemed to work better (as far as I remember). But it is not fair to hope that students do realize this, especially not during an exam session). Hope this helps? Thx. for replies, Gunnar
Hide
Mary Evans added a comment - - edited
• indicates ALL in CSS, but do you need to add that asterisk?
Show
Mary Evans added a comment - - edited indicates ALL in CSS, but do you need to add that asterisk?
Hide
Mary Evans added a comment -

I hate these kind of bugs. I'll go an see if I can replicate this, just so I can get an idea of what it is that's happening.

Show
Mary Evans added a comment - I hate these kind of bugs. I'll go an see if I can replicate this, just so I can get an idea of what it is that's happening.
Hide
Tim Hunt added a comment -

Exactly, the * CSS rule should not be necessary, it was a stupid way to write that CSS in the first place (& my fault, it seemed like the easiest thing to do at the time.)

The problem relates to multiple-choice, when you have Feedback for individual choices. We want to display that immediately after the choice, on the same line, hence forcing it all to be display: inline in that rather ugly way. There ought to be a less brute force way to achieve that result.

Actually, some other qtypes seem to be affected too, match, calculatedmulti and multianswer. A quick look throught git history finds that MDL-35343, MDL-33306 and MDL-24594 are related issues.

Show
Tim Hunt added a comment - Exactly, the * CSS rule should not be necessary, it was a stupid way to write that CSS in the first place (& my fault, it seemed like the easiest thing to do at the time.) The problem relates to multiple-choice, when you have Feedback for individual choices. We want to display that immediately after the choice, on the same line, hence forcing it all to be display: inline in that rather ugly way. There ought to be a less brute force way to achieve that result. Actually, some other qtypes seem to be affected too, match, calculatedmulti and multianswer. A quick look throught git history finds that MDL-35343 , MDL-33306 and MDL-24594 are related issues.
Hide
Mary Evans added a comment -

Tim, I've just added MathJax to see how it works. I'll see if I can replicate this bug and then get back to you.

Show
Mary Evans added a comment - Tim, I've just added MathJax to see how it works. I'll see if I can replicate this bug and then get back to you.
Hide
Gunnar Restorff added a comment -

Ok. It looks like my

script

{ display:none }

isn't really necessary when I erase

*

{ display:inline }

When I erase this, the answer is (of course) not displayed inline. If I change the "*" to "p" then it looks fine - but I am not sure whether this has some drawbacks...

Ok. I would expect that similar things happen with other questiontypes, btw. At least it seems to happen with "Matching" also (but I don't use that). So one should considering fixing that as well, when a solution is found for this issue.

Show
Gunnar Restorff added a comment - Ok. It looks like my .que.multichoice .feedback .rightanswer script { display:none } isn't really necessary when I erase .que.multichoice .feedback .rightanswer * { display:inline } When I erase this, the answer is (of course) not displayed inline. If I change the "*" to "p" then it looks fine - but I am not sure whether this has some drawbacks... Ok. I would expect that similar things happen with other questiontypes, btw. At least it seems to happen with "Matching" also (but I don't use that). So one should considering fixing that as well, when a solution is found for this issue.
Hide
Mary Evans added a comment -

Have you tried removing the * so you get

 .que.multichoice .feedback .rightanswer {display:inline}

Show
Mary Evans added a comment - Have you tried removing the * so you get .que.multichoice .feedback .rightanswer {display:inline}
Hide
Gunnar Restorff added a comment -

Yes I did. As far as I remember, that resultet in the same as erasing it, i.e., that it wasn't inline, but on the next line.

Show
Gunnar Restorff added a comment - Yes I did. As far as I remember, that resultet in the same as erasing it, i.e., that it wasn't inline, but on the next line.
Hide
Mary Evans added a comment -

Hi Ralf,

I think for IE7 you need...

 .ie .que.multichoice .feedback .rightanswer {*display: inline; zoom: 1;}

Well I have been using MathJax and having some fun trying to remember how to do algebra

What I did find out is that if I dragged the example pre-coded mathematical function into the text area it added something like...

 javascript:insText("\\displaystyle\\bigcup_{i=1}^{n}{X_i}")

However, if I only clicked the example I just got the code which looks like this...

 \displaystyle\bigcup_{i=1}^{n}{X_i}

So I am wondering if this is by accident or design? The fact that you can post the "javascript:insText" tag seems odd, especially as it works without it. If you leave it in it appears in that format in in the answer?

But then I may be doing something different/wrong!

Show
Mary Evans added a comment - Hi Ralf, I think for IE7 you need... .ie .que.multichoice .feedback .rightanswer {*display: inline; zoom: 1;} Well I have been using MathJax and having some fun trying to remember how to do algebra What I did find out is that if I dragged the example pre-coded mathematical function into the text area it added something like... javascript:insText("\\displaystyle\\bigcup_{i=1}^{n}{X_i}") However, if I only clicked the example I just got the code which looks like this... \displaystyle\bigcup_{i=1}^{n}{X_i} So I am wondering if this is by accident or design? The fact that you can post the "javascript:insText" tag seems odd, especially as it works without it. If you leave it in it appears in that format in in the answer? But then I may be doing something different/wrong!
Hide
David Balch added a comment -

In case it helps anyone...
I've swapped the '*' wildcard for a 'p:first-child' selector. I figure that will catch a lot of the instances where a regular answer should be inline, while avoiding the complications (like this ticket) from the wildcard.

 --- a/question/type/multichoice/styles.css +++ b/question/type/multichoice/styles.css @@ -2,7 +2,7 @@  padding: 0 0.7em;  background: #FFF3BF;  } -.que.multichoice .answer .specificfeedback * { +.que.multichoice .answer .specificfeedback p:first-child {  display: inline;  background: #FFF3BF;  } @@ -13,6 +13,6 @@  .que.multichoice .answer div.r1 {  padding: 0.3em;  } -.que.multichoice .feedback .rightanswer * { +.que.multichoice .feedback .rightanswer p:first-child {  display: inline;  }

Show
David Balch added a comment - In case it helps anyone... I've swapped the '*' wildcard for a 'p:first-child' selector. I figure that will catch a lot of the instances where a regular answer should be inline, while avoiding the complications (like this ticket) from the wildcard. --- a/question/type/multichoice/styles.css +++ b/question/type/multichoice/styles.css @@ -2,7 +2,7 @@ padding: 0 0.7em; background: #FFF3BF; } -.que.multichoice .answer .specificfeedback * { +.que.multichoice .answer .specificfeedback p:first-child { display: inline; background: #FFF3BF; } @@ -13,6 +13,6 @@ .que.multichoice .answer div.r1 { padding: 0.3em; } -.que.multichoice .feedback .rightanswer * { +.que.multichoice .feedback .rightanswer p:first-child { display: inline; }
Hide
Tim Hunt added a comment -

Right, this should fix it.

Show
Tim Hunt added a comment - Right, this should fix it.
Hide
Damyon Wiese added a comment -

Hi Tim,

I tested this before integrating (just trying to stay in a releasable state). When I installed the patch it does show the answer inline - but for the specific feedback this is not how it worked before and looks odd.

Are you sure the specific feedback is meant to be displayed inline?

I attached screenshots before and after the patch.

Show
Damyon Wiese added a comment - Hi Tim, I tested this before integrating (just trying to stay in a releasable state). When I installed the patch it does show the answer inline - but for the specific feedback this is not how it worked before and looks odd. Are you sure the specific feedback is meant to be displayed inline? I attached screenshots before and after the patch.
Hide
Damyon Wiese added a comment -

(Just taking this out of the queue for now).

Show
Damyon Wiese added a comment - (Just taking this out of the queue for now).
Hide

Moving this reopened issue out from current integration. Please, re-submit it for integration once ready.

Show
CiBoT added a comment - Moving this reopened issue out from current integration. Please, re-submit it for integration once ready.
Hide
Tim Hunt added a comment -

I consider the change in display to be an improvement. Please integrate.

(Thanks for making your question clear with screen-grabs.)

Show
Tim Hunt added a comment - I consider the change in display to be an improvement. Please integrate. (Thanks for making your question clear with screen-grabs.)
Hide
Dan Poltawski added a comment -

The main moodle.git repository has just been updated with latest weekly modifications. You may wish to rebase your PULL branches to simplify history and avoid any possible merge conflicts. This would also make integrator's life easier next week.

TIA and ciao

Show
Dan Poltawski added a comment - The main moodle.git repository has just been updated with latest weekly modifications. You may wish to rebase your PULL branches to simplify history and avoid any possible merge conflicts. This would also make integrator's life easier next week. TIA and ciao
Hide
Damyon Wiese added a comment -

Thanks Tim,

Integrated to 23, 24 and master. I followed the testing instructions on all branches for this issue in integration, so will pass the test.

Show
Damyon Wiese added a comment - Thanks Tim, Integrated to 23, 24 and master. I followed the testing instructions on all branches for this issue in integration, so will pass the test.
Hide
Damyon Wiese added a comment -

Testing instructions passed on all branches.

Show
Damyon Wiese added a comment - Testing instructions passed on all branches.
Hide
Dan Poltawski added a comment -

Thanks! You're changes are now spread to the world through this git and our source control repositories.

No time to rest though, we've got days to make 2.5 the best yet!

ciao

Show
Dan Poltawski added a comment - Thanks! You're changes are now spread to the world through this git and our source control repositories. No time to rest though, we've got days to make 2.5 the best yet! ciao

## People

• Assignee:
Tim Hunt
Reporter:
Gunnar Restorff
Integrator:
Damyon Wiese
Tester:
Damyon Wiese
Participants: