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 Master Branch:

      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.

        Gliffy Diagrams

          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: