Moodle
  1. Moodle
  2. MDL-37845

MathJax does not work properly inside Feedback of multiplechoice quiz

    Details

    • 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.
      4. Now, preview your question.
      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 2.4 Branch:
    • Pull Master Branch:
    • Rank:
      47592

      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

      .que.multichoice .feedback .rightanswer
      *

      { display:inline }

      and add the code

      .que.multichoice .feedback .rightanswer
      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.

        Issue Links

          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 -

          @ Tim Hunt

          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...

          .que.multichoice .feedback .rightanswer script

          { 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

          .que.multichoice .feedback .rightanswer *

          { ... }

          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

          .que.multichoice .feedback .rightanswer script

          { 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

          .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

          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

          .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.

          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
          CiBoT added a comment -

          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

            • Votes:
              2 Vote for this issue
              Watchers:
              10 Start watching this issue

              Dates

              • Created:
                Updated:
                Resolved: