Moodle
  1. Moodle
  2. MDL-8576

Feedback messages displayed in the wrong place in Quiz

    Details

    • Type: Bug Bug
    • Status: Closed
    • Priority: Critical Critical
    • Resolution: Fixed
    • Affects Version/s: 1.8
    • Fix Version/s: 1.8
    • Component/s: Quiz
    • Labels:
      None
    • Affected Branches:
      MOODLE_18_STABLE
    • Fixed Branches:
      MOODLE_18_STABLE
    • Rank:
      29141

      Description

      Testing Moodle 1.8 beta, dated 14 FEB 2007.
      As shown on attached screen shot - using standard theme - when a response to an MCQ or SHORTANSWER question is submitted by student, the correctness and grading divs are displayed over the Question text, at top of question, partly hiding it. They should be displayed under the question.
      Joseph

      1. test2.html
        2 kB
        Pierre Pichet
      1. screenshot-1.jpg
        80 kB
      2. screenshot-2.jpg
        70 kB
      3. screenshot-3.jpg
        119 kB
      4. screenshot-4.jpg
        56 kB
      5. screenshot-5.jpg
        139 kB
      6. screenshot-6.jpg
        109 kB

        Issue Links

          Activity

          Hide
          Pierre Pichet added a comment -

          Part of the problem is related ot the fact that the <div>are not correctly defined
          <div class="grading">
          <div class="correctness incorrect">Incorrect</div><div class="gradingdetails">Points pour cet envoi : 0/1. Cet envoi a reçu une pénalité de 0.1. </div> </div>
          the following <div> should be vertical align
          This should set in theme files..
          I will look further

          Show
          Pierre Pichet added a comment - Part of the problem is related ot the fact that the <div>are not correctly defined <div class="grading"> <div class="correctness incorrect">Incorrect</div><div class="gradingdetails">Points pour cet envoi : 0/1. Cet envoi a reçu une pénalité de 0.1. </div> </div> the following <div> should be vertical align This should set in theme files.. I will look further
          Hide
          Pierre Pichet added a comment -

          The problem is related to the definition of the various styles in styles_layout.css as something like
          .que .generalfeedback

          { float: right; margin: 5px; width: 88%; }

          However the question.html badly included them not in a <div class="que"> but in a class="que <?php echo $question->qtype; ?> clearfix".
          Using only the class="que <?php echo $question->qtype; ?> clearfix". to display the answer and the <div class="que"> for the general feedback and othe comments solve part of the problem.

          More work are need.

          Show
          Pierre Pichet added a comment - The problem is related to the definition of the various styles in styles_layout.css as something like .que .generalfeedback { float: right; margin: 5px; width: 88%; } However the question.html badly included them not in a <div class="que"> but in a class="que <?php echo $question->qtype; ?> clearfix". Using only the class="que <?php echo $question->qtype; ?> clearfix". to display the answer and the <div class="que"> for the general feedback and othe comments solve part of the problem. More work are need.
          Hide
          Pierre Pichet added a comment -

          More work and more testing.
          Results seems to depend on the browser.
          I obtain good results with explorer on windows and safari on mac
          The settings are not good on Firefox and Netscape.

          Show
          Pierre Pichet added a comment - More work and more testing. Results seems to depend on the browser. I obtain good results with explorer on windows and safari on mac The settings are not good on Firefox and Netscape.
          Hide
          Pierre Pichet added a comment -

          open it with different browser

          Show
          Pierre Pichet added a comment - open it with different browser
          Hide
          Pierre Pichet added a comment -

          I don't know how to solve this problem which is more general then just the questions or quiz.
          For example the tabs in the quiz, question category management.

          Show
          Pierre Pichet added a comment - I don't know how to solve this problem which is more general then just the questions or quiz. For example the tabs in the quiz, question category management.
          Hide
          Pierre Pichet added a comment -

          The reference to the container elements (form , div) should be similar to those used in HTML QuickFORM i.e
          form.mform fieldset legend

          { font-weight: bold; margin-left: 0.5em; }

          form.mform fieldset .advancedbutton

          { width:100%; text-align:right; }

          form.mform div.fitem

          { clear: both; width: 100%; min-height: 1.5em; }

          I will work on it using this.

          Show
          Pierre Pichet added a comment - The reference to the container elements (form , div) should be similar to those used in HTML QuickFORM i.e form.mform fieldset legend { font-weight: bold; margin-left: 0.5em; } form.mform fieldset .advancedbutton { width:100%; text-align:right; } form.mform div.fitem { clear: both; width: 100%; min-height: 1.5em; } I will work on it using this.
          Hide
          Joseph Rézeau added a comment -

          Hi Pierre,

          It is hard to decide whether this bug is code or CSS related (or both). Probably both Tim and Urs will have to look into it.

          Anyway, I am getting pretty good results with the following change in CSS only. In theme/standard/styles_layout.css around line 2070: change:
          .que .grading,.que .comment,.que .commentlink,.que .generalfeedback,.que .history

          { float: right; margin: 5px; width: 88%; }

          to
          .que .grading,.que .comment,.que .commentlink,.que .generalfeedback,.que .history

          { clear:both; margin: 5px; width: 88%; }

          This works OK in MSIE 7.0 and FireFox 2.0, the only 2 browsers I have on my home machine at the moment.

          However there remain 2 display problems on the quiz page:
          a) the border of the box surrounding the question (I think it's CLEARFIX) is OK in MSIE 7 and not OK in FF
          b) the position of the Submit button is OK in FF and not OK in MSIE 7.

          See attached screen shots, done with standard theme today.

          Joseph

          Show
          Joseph Rézeau added a comment - Hi Pierre, It is hard to decide whether this bug is code or CSS related (or both). Probably both Tim and Urs will have to look into it. Anyway, I am getting pretty good results with the following change in CSS only. In theme/standard/styles_layout.css around line 2070: change: .que .grading,.que .comment,.que .commentlink,.que .generalfeedback,.que .history { float: right; margin: 5px; width: 88%; } to .que .grading,.que .comment,.que .commentlink,.que .generalfeedback,.que .history { clear:both; margin: 5px; width: 88%; } This works OK in MSIE 7.0 and FireFox 2.0, the only 2 browsers I have on my home machine at the moment. However there remain 2 display problems on the quiz page: a) the border of the box surrounding the question (I think it's CLEARFIX) is OK in MSIE 7 and not OK in FF b) the position of the Submit button is OK in FF and not OK in MSIE 7. See attached screen shots, done with standard theme today. Joseph
          Hide
          Pierre Pichet added a comment -

          I had the same results in one of my numerous trials...
          I am doing those tests as the QuickForm use CSS in a different way more related to the form.element syntax of browser given that some of the problems of the quiz question display are not found in the new question_edition_form.
          I will set a file qhere you could see my experimental results.
          I test on windows Explorer, Firefox, Netscape and on Apple Safari.
          I will give the adress as soon as it is settled.

          As I said before the quiz is just one of the place where thoses problems appear.
          And you and me have more time to test features than those in charge of big sections of Moodle code as Tim.

          Show
          Pierre Pichet added a comment - I had the same results in one of my numerous trials... I am doing those tests as the QuickForm use CSS in a different way more related to the form.element syntax of browser given that some of the problems of the quiz question display are not found in the new question_edition_form. I will set a file qhere you could see my experimental results. I test on windows Explorer, Firefox, Netscape and on Apple Safari. I will give the adress as soon as it is settled. As I said before the quiz is just one of the place where thoses problems appear. And you and me have more time to test features than those in charge of big sections of Moodle code as Tim.
          Hide
          Pierre Pichet added a comment -

          Here is the address of my testing file.
          http://132.208.141.198/tmp/testCSS.html
          Work is not finished yet...

          Show
          Pierre Pichet added a comment - Here is the address of my testing file. http://132.208.141.198/tmp/testCSS.html Work is not finished yet...
          Hide
          Pierre Pichet added a comment -

          Some cleaning of the question_type print_question_grading_details() seems to be necessary as some class (as"correctness" ) are not more defined in the css files.
          Using valid class can help control the display.

          Show
          Pierre Pichet added a comment - Some cleaning of the question_type print_question_grading_details() seems to be necessary as some class (as"correctness" ) are not more defined in the css files. Using valid class can help control the display.
          Hide
          Pierre Pichet added a comment -

          I have an almost complete solution as you can see on
          http://132.208.141.198/moodle_18/
          user: moodle pw:moodle
          I change some of the .que definition in the theme/standard/styles_layout.css so that they are interpreted identically in the different browsers using the specific name convention as used by Quick HTML.
          Some modifications are not completed (i.e. correcting centering to left justification in some browsers)
          The strategy was to
          include all the question data in a fieldset
          use the legend to name the question as this is used in Quick HTML
          put in the fieldset two div wich align:left so they will be side by side
          the first one contains the grade (width 8%) and
          the second one (width 88%) contains all the question data generated by the question_types
          each divided in div which are aligned vertically ( the default setting).
          the code change is limited to two files
          theme/standard/styles_layout.css
          and type/question.html.
          i will submit the final changes in the next week if Tim agrees about the little display modifications and all the necessary chages done in theme/standard/styles_layout.css so that they are interpreted identically in the different browsers

          Show
          Pierre Pichet added a comment - I have an almost complete solution as you can see on http://132.208.141.198/moodle_18/ user: moodle pw:moodle I change some of the .que definition in the theme/standard/styles_layout.css so that they are interpreted identically in the different browsers using the specific name convention as used by Quick HTML. Some modifications are not completed (i.e. correcting centering to left justification in some browsers) The strategy was to include all the question data in a fieldset use the legend to name the question as this is used in Quick HTML put in the fieldset two div wich align:left so they will be side by side the first one contains the grade (width 8%) and the second one (width 88%) contains all the question data generated by the question_types each divided in div which are aligned vertically ( the default setting). the code change is limited to two files theme/standard/styles_layout.css and type/question.html. i will submit the final changes in the next week if Tim agrees about the little display modifications and all the necessary chages done in theme/standard/styles_layout.css so that they are interpreted identically in the different browsers
          Hide
          Pierre Pichet added a comment -

          A first solution

          Show
          Pierre Pichet added a comment - A first solution
          Hide
          Joseph Rézeau added a comment -

          Pierre,
          I've been to your test site and the quiz looks fine in both MSIE 7.0 and FF 2.0.
          There remains a minor display problem with the "box" enclosing each question. The box is perfect in MSIE 7.0 but, in FF 2.0 it is re-sized according to the length of text in the question, which is not so nice to see. See attached shots.
          Thanks for looking into this and looking forward to "final solution" with Tim's approval.
          Joseph

          Show
          Joseph Rézeau added a comment - Pierre, I've been to your test site and the quiz looks fine in both MSIE 7.0 and FF 2.0. There remains a minor display problem with the "box" enclosing each question. The box is perfect in MSIE 7.0 but, in FF 2.0 it is re-sized according to the length of text in the question, which is not so nice to see. See attached shots. Thanks for looking into this and looking forward to "final solution" with Tim's approval. Joseph
          Hide
          Joseph Rézeau added a comment -

          remaining problem with question "box" size, ok in MSIE 7, not ok in FF 2.0

          Show
          Joseph Rézeau added a comment - remaining problem with question "box" size, ok in MSIE 7, not ok in FF 2.0
          Hide
          Pierre Pichet added a comment -

          Thanks for testing it.
          I had already noticed this and I am working on all these double class entry (i.e. class="que multichoice clearfix") which are not standard and not recognized by each browser.
          More news later

          Show
          Pierre Pichet added a comment - Thanks for testing it. I had already noticed this and I am working on all these double class entry (i.e. class="que multichoice clearfix") which are not standard and not recognized by each browser. More news later
          Hide
          Pierre Pichet added a comment -

          I finally found the rule.
          If you use something like
          class="que multichoice correct"
          each element has to be defined in the CSS.
          as
          .que

          { border-color: #DDD; }

          and a definition like
          defined in css as

          .que.multianswer .correct

          { background-color: #afa; }

          <input type="text" class="correct" name="resp8_" value="correct" size="80"/>
          put in div
          <div class="que">
          <input type="text" class="correct" name="resp8_" value="div que input correct" size="80"/>
          </div>
          put in div div
          <div class="que">
          <div class="multianswer">
          <input type="text" class="correct" name="resp8_" value="div que div multianswer input correct" size="80"/>
          </div>
          </div>
          this structure .que.multianswer .correct IS NOT recognized by Firefox or Netscape or Safari but IS by recognized IE
          Test it on
          http://132.208.141.198/tmp/testCSS.html
          if you defined independently correct as

          { background-color: #afa; }

          this will be recognized anywhere which is not what we want.
          There is surely on Moodle an expert on CSS that should examine this and how to solve it for all the moodle code.
          As I said before Quick HTML is doing this in a different way (and it seeems to work)

          Show
          Pierre Pichet added a comment - I finally found the rule. If you use something like class="que multichoice correct" each element has to be defined in the CSS. as .que { border-color: #DDD; } and a definition like defined in css as .que.multianswer .correct { background-color: #afa; } <input type="text" class="correct" name="resp8_" value="correct" size="80"/> put in div <div class="que"> <input type="text" class="correct" name="resp8_" value="div que input correct" size="80"/> </div> put in div div <div class="que"> <div class="multianswer"> <input type="text" class="correct" name="resp8_" value="div que div multianswer input correct" size="80"/> </div> </div> this structure .que.multianswer .correct IS NOT recognized by Firefox or Netscape or Safari but IS by recognized IE Test it on http://132.208.141.198/tmp/testCSS.html if you defined independently correct as { background-color: #afa; } this will be recognized anywhere which is not what we want. There is surely on Moodle an expert on CSS that should examine this and how to solve it for all the moodle code. As I said before Quick HTML is doing this in a different way (and it seeems to work)
          Hide
          Pierre Pichet added a comment -

          Screenshot-5 As seen on IE

          Show
          Pierre Pichet added a comment - Screenshot-5 As seen on IE
          Hide
          Pierre Pichet added a comment -

          As seen on FF, Netscape or Safari

          Show
          Pierre Pichet added a comment - As seen on FF, Netscape or Safari
          Hide
          Urs Hunkler added a comment -

          I comitted three changes to styles_layout.css. Now the multichoice display looks ok in IE7, IE6, Opera 9, FF2.

          Please check in Safari. If the changes work for you too, please merge theme to 1.9 - thank you very much.

          Fieldsets are very sensible in FF. Somebody has set .invisiblefieldset to "display:inline". That breaks floating and clearing within fieldsets in FF.

          line 395

          .invisiblefieldset

          { /* display:inline; */ border:0px; padding:0px; margin:0px; }

          line 2046

          .que .answer

          { /* float: right; */ float: left; width: 83%; margin-bottom: 0.5em; }

          line 2070

          .que .feedback

          { clear: both; /* float: right; */ width: 83%; padding: 0 0 0.3em 0.3em; border: 1px solid; }
          Show
          Urs Hunkler added a comment - I comitted three changes to styles_layout.css. Now the multichoice display looks ok in IE7, IE6, Opera 9, FF2. Please check in Safari. If the changes work for you too, please merge theme to 1.9 - thank you very much. Fieldsets are very sensible in FF. Somebody has set .invisiblefieldset to "display:inline". That breaks floating and clearing within fieldsets in FF. line 395 .invisiblefieldset { /* display:inline; */ border:0px; padding:0px; margin:0px; } line 2046 .que .answer { /* float: right; */ float: left; width: 83%; margin-bottom: 0.5em; } line 2070 .que .feedback { clear: both; /* float: right; */ width: 83%; padding: 0 0 0.3em 0.3em; border: 1px solid; }
          Hide
          Pierre Pichet added a comment -

          Although you solve this problem, I worry that this could change something else somewhere in othyer part part of Moodle display because in the way all references to .invisiblefieldset will be redefined by this new definition.

          The problem is that Moodle use the .que .answer { or .que.multichoice .answer { structure
          to obtain specific effects just were we want it i.e. in the display of question or more precisely in multichoice question.
          This structure .que.multichoice .answer is correctly recognized in EE but NOT in the other browsers.
          This what is shown in the screenshots-5 and -6 because in this case all the CSS were in the test file.
          In those browsers, they will take the last reference of .invisiblefieldset in the CSS file as the setting to apply if it is recogized as a single definition.
          Look closely at the code in the textarea of screenshots-5 and -6 . the green color (i.e) .correct is not recognized in FF, N etc because it is defined in a complex .que.multichoice .correct THEY DO NOT decipher.
          This is what I try to explain precedently.

          "if you defined independently correct as

          { background-color: #afa; }

          this will be recognized anywhere which is not what we want. "

          I noticed the Quick HTML do NOT define there complex CSS in exactly the same way and this work correctly for every browser.
          Could you examine the way Quick HTML use it and
          either
          I misinterpreted the problem ( I am quite novice in CSS)
          Or
          there is a real more real general problem.

          In any case your comments will be appreciate and could be include in the developper moodle docs

          Sorry my computer is down for looking
          http://132.208.141.198/tmp/testCSS.html
          but I will try to locate my file exemple elsewhere.

          Show
          Pierre Pichet added a comment - Although you solve this problem, I worry that this could change something else somewhere in othyer part part of Moodle display because in the way all references to .invisiblefieldset will be redefined by this new definition. The problem is that Moodle use the .que .answer { or .que.multichoice .answer { structure to obtain specific effects just were we want it i.e. in the display of question or more precisely in multichoice question. This structure .que.multichoice .answer is correctly recognized in EE but NOT in the other browsers. This what is shown in the screenshots-5 and -6 because in this case all the CSS were in the test file. In those browsers, they will take the last reference of .invisiblefieldset in the CSS file as the setting to apply if it is recogized as a single definition. Look closely at the code in the textarea of screenshots-5 and -6 . the green color (i.e) .correct is not recognized in FF, N etc because it is defined in a complex .que.multichoice .correct THEY DO NOT decipher. This is what I try to explain precedently. "if you defined independently correct as { background-color: #afa; } this will be recognized anywhere which is not what we want. " I noticed the Quick HTML do NOT define there complex CSS in exactly the same way and this work correctly for every browser. Could you examine the way Quick HTML use it and either I misinterpreted the problem ( I am quite novice in CSS) Or there is a real more real general problem. In any case your comments will be appreciate and could be include in the developper moodle docs Sorry my computer is down for looking http://132.208.141.198/tmp/testCSS.html but I will try to locate my file exemple elsewhere.
          Hide
          Urs Hunkler added a comment -

          Pierre, two things:

          1) The ".invisiblefieldset" issue is discussed in the Moodle HQ and will probably be changed.

          2) When you have class="que multichoice correct" you need to address it in CSS with ".que.multichoice.correct" without any white-space between the class names. In your examples you have a space between ".multichoice" and ".correct". The space defines that the next item means a child element and not another class name of the same element.

          Show
          Urs Hunkler added a comment - Pierre, two things: 1) The ".invisiblefieldset" issue is discussed in the Moodle HQ and will probably be changed. 2) When you have class="que multichoice correct" you need to address it in CSS with ".que.multichoice.correct" without any white-space between the class names. In your examples you have a space between ".multichoice" and ".correct". The space defines that the next item means a child element and not another class name of the same element.
          Hide
          Joseph Rézeau added a comment -

          Pierre > I change some of the .que definition in the theme/standard/styles_layout.css so that they are interpreted identically in the different browsers using the specific name convention as used by Quick HTML.

          What exactly is this "Quick HTML" you are referring to?

          Joseph

          Show
          Joseph Rézeau added a comment - Pierre > I change some of the .que definition in the theme/standard/styles_layout.css so that they are interpreted identically in the different browsers using the specific name convention as used by Quick HTML. What exactly is this "Quick HTML" you are referring to? Joseph
          Hide
          Pierre Pichet added a comment -

          I did notice the difference and the structure is used is similar to the real code of moodle 1.6.
          As I understand an html item with class="correct" wil appear as green either as a direct descendant of que.multichoice in this case it will be que.multichoice or as an element inside another element itself a direct descendant of que.multichoice .

          The real problem is that structure is official Moodle code and it is working consistenly in different browser.

          There is a similar problem than clicking to the attachment file test2.html with EE or FF the bold text is not at the same place.

          What it is important is that if the CSS coding is not done correctly , the display can be (and it is in some part Moodle) because the browser are different.

          The Moodle CSS coding should correct this and give consistant user interface.

          I think that this problem has not been set correctly in Moodle and that this is a more general problem that the question display.

          Somebody somewhere says "Houston, we have a problem!"

          This will not cause error to the student results but they will surely be anxious that this is not the case.

          I am also very anxious if somebody code somewhere in the styles_layout.css that the default class ".invisiblefieldset " is ... .
          I expect the all local uses of class="invisiblefieldset" protected by another definition like .que.multichoice. .invisiblefieldset will be identically recognized local by all current browsers.
          Actually this is not the case and the results vary.
          This is why screenshots-5 is GREEN and screenshots-6 is NOT

          I will set tonight more clearer examples.

          As a newcomer in CSS, I don't know how to code (almost) universal CSS, I just notice that Quick HTML seems to have part of the solution (at least a greater part than the actual Moodle CSS.)

          Show
          Pierre Pichet added a comment - I did notice the difference and the structure is used is similar to the real code of moodle 1.6. As I understand an html item with class="correct" wil appear as green either as a direct descendant of que.multichoice in this case it will be que.multichoice or as an element inside another element itself a direct descendant of que.multichoice . The real problem is that structure is official Moodle code and it is working consistenly in different browser. There is a similar problem than clicking to the attachment file test2.html with EE or FF the bold text is not at the same place. What it is important is that if the CSS coding is not done correctly , the display can be (and it is in some part Moodle) because the browser are different. The Moodle CSS coding should correct this and give consistant user interface. I think that this problem has not been set correctly in Moodle and that this is a more general problem that the question display. Somebody somewhere says "Houston, we have a problem!" This will not cause error to the student results but they will surely be anxious that this is not the case. I am also very anxious if somebody code somewhere in the styles_layout.css that the default class ".invisiblefieldset " is ... . I expect the all local uses of class="invisiblefieldset" protected by another definition like .que.multichoice. .invisiblefieldset will be identically recognized local by all current browsers. Actually this is not the case and the results vary. This is why screenshots-5 is GREEN and screenshots-6 is NOT I will set tonight more clearer examples. As a newcomer in CSS, I don't know how to code (almost) universal CSS, I just notice that Quick HTML seems to have part of the solution (at least a greater part than the actual Moodle CSS.)
          Hide
          Pierre Pichet added a comment -

          Sorry I miss you message as i was writing mine.
          All the new form filling ( as your profile, question parameters )on Moodle has been ( not finished in all cases) standardize using HTML_QuickForm
          http://pear.php.net/package/HTML_QuickForm
          This set the new interface in creating and editing question.for 1.8
          This will be completed in 1.9
          As this code seems to get a better control of the display, I look at the way they doing it.
          The CSS is on line 406- of styles_layout.css /***

              • Forms
                ***/

          form.mform

          { margin: 0 auto; padding: 0; width: 80%; }

          form.mform fieldset {
          etc.

          Show
          Pierre Pichet added a comment - Sorry I miss you message as i was writing mine. All the new form filling ( as your profile, question parameters )on Moodle has been ( not finished in all cases) standardize using HTML_QuickForm http://pear.php.net/package/HTML_QuickForm This set the new interface in creating and editing question.for 1.8 This will be completed in 1.9 As this code seems to get a better control of the display, I look at the way they doing it. The CSS is on line 406- of styles_layout.css /*** Forms ***/ form.mform { margin: 0 auto; padding: 0; width: 80%; } form.mform fieldset { etc.
          Hide
          Martin Dougiamas added a comment -

          Urs, your changes to invisiblefieldset have in fact broken other stuff, see MDL-8686. Can we limit the changes just to the case where the problem was (quiz questions).

          Show
          Martin Dougiamas added a comment - Urs, your changes to invisiblefieldset have in fact broken other stuff, see MDL-8686 . Can we limit the changes just to the case where the problem was (quiz questions).
          Hide
          Pierre Pichet added a comment -

          Hi Martin
          I will submit you a solution that should stay intern to the question field to solve temporarly the problem.
          I do think that this discussion should be continued so to clarify how to correctly set CSS on Moodle.
          Somewhat "old" moodlecode use expressions like class="que multichoice answer" that give the right display by Explorer but not in FF, Netscape or Safari.
          wait for the next hours...

          Show
          Pierre Pichet added a comment - Hi Martin I will submit you a solution that should stay intern to the question field to solve temporarly the problem. I do think that this discussion should be continued so to clarify how to correctly set CSS on Moodle. Somewhat "old" moodlecode use expressions like class="que multichoice answer" that give the right display by Explorer but not in FF, Netscape or Safari. wait for the next hours...
          Hide
          Yu Zhang added a comment -

          Hi, changed the trouble making fieldset to an empty div, which should validate and not cause any other problems. Cheers.

          Show
          Yu Zhang added a comment - Hi, changed the trouble making fieldset to an empty div, which should validate and not cause any other problems. Cheers.
          Hide
          Pierre Pichet added a comment -

          The real solution is to eliminate complex class like "que multichoice clearfix" so that the CSS .que .multichoice will be recognized correctly by any browser.
          It's involve also correcting the print_question_formulation_and_controls and print_question_grading_details that generate some of them
          and redifining some of the CSS.
          As my main computer is down, I had to rebuilt a new local moodle site and won't be able to supply a valuable code this night.
          Possibly in the next 48 hours...

          Show
          Pierre Pichet added a comment - The real solution is to eliminate complex class like "que multichoice clearfix" so that the CSS .que .multichoice will be recognized correctly by any browser. It's involve also correcting the print_question_formulation_and_controls and print_question_grading_details that generate some of them and redifining some of the CSS. As my main computer is down, I had to rebuilt a new local moodle site and won't be able to supply a valuable code this night. Possibly in the next 48 hours...
          Hide
          Pierre Pichet added a comment -

          Thanks Yu for the patch.
          At least the elements are one under the other.
          The display is quite similar in IE, FF and Netscape.
          The general feedback is rigth under the other params in Netscape but at left in IE and FF.
          The removal of fieldset although it patchs the problem, illustrates that more work should be done on the question display.
          Ideally it should be closed i.e without any CSS interference from the other Moodle components.
          If the .que structure was correctly set and used by the moodle code , there should be no such problems.
          As the work on HTML_QuickForm is to be continued for 1.9, this question and quiz display (which is also a form to be filled) could be a good place to set CSS standards for Moodle.

          Show
          Pierre Pichet added a comment - Thanks Yu for the patch. At least the elements are one under the other. The display is quite similar in IE, FF and Netscape. The general feedback is rigth under the other params in Netscape but at left in IE and FF. The removal of fieldset although it patchs the problem, illustrates that more work should be done on the question display. Ideally it should be closed i.e without any CSS interference from the other Moodle components. If the .que structure was correctly set and used by the moodle code , there should be no such problems. As the work on HTML_QuickForm is to be continued for 1.9, this question and quiz display (which is also a form to be filled) could be a good place to set CSS standards for Moodle.
          Hide
          Urs Hunkler added a comment -

          Pierre, did you read my comment about spaces in CSS property definitions?

          The CSS ".que .multichoice" will not apply to an element like

          <div class="que multichoice">.

          It will apply to fieldset in a construct like

          <form class="que">
          <fieldset class="multichoice">
          </fieldset>
          </form>

          Multiple CLASS names make styling very flexible. They are recommended in many tutorials and books about CSS. "The real solution is to eliminate complex class like" you describe here is not the way to go.

          Show
          Urs Hunkler added a comment - Pierre, did you read my comment about spaces in CSS property definitions? The CSS ".que .multichoice" will not apply to an element like <div class="que multichoice">. It will apply to fieldset in a construct like <form class="que"> <fieldset class="multichoice"> </fieldset> </form> Multiple CLASS names make styling very flexible. They are recommended in many tutorials and books about CSS. "The real solution is to eliminate complex class like" you describe here is not the way to go.
          Hide
          Urs Hunkler added a comment -

          "If the .que structure was correctly set and used by the moodle code , there should be no such problems. "

          Pierre, please be very careful with such conclusions. Complex web pages are no ideal world. If you surround a correctly constructed and styled area with a problematic one you can't wonder why the correct area breaks. That's what happened here.

          Show
          Urs Hunkler added a comment - "If the .que structure was correctly set and used by the moodle code , there should be no such problems. " Pierre, please be very careful with such conclusions. Complex web pages are no ideal world. If you surround a correctly constructed and styled area with a problematic one you can't wonder why the correct area breaks. That's what happened here.
          Hide
          Pierre Pichet added a comment -

          Thank Urs for your comments.

          The CSS ".que .multichoice" will not apply to an element like

          <div class="que multichoice">.
          I agree with you and this what I have try to explained, probably badly.
          Actual question code contain reference to such multiple name <div class="que multichoice"> class.
          What I have found is that thse multiple names are not interpreted or recognized by FF or Netscape mots of the time but are recognized by IE.
          I think that the <div class="que multichoice">. should be removed and replaced by
          <form class="que">
          <fieldset class="multichoice">
          </fieldset>
          </form
          and the the CSS will be rigth
          Do you agree?

          Show
          Pierre Pichet added a comment - Thank Urs for your comments. The CSS ".que .multichoice" will not apply to an element like <div class="que multichoice">. I agree with you and this what I have try to explained, probably badly. Actual question code contain reference to such multiple name <div class="que multichoice"> class. What I have found is that thse multiple names are not interpreted or recognized by FF or Netscape mots of the time but are recognized by IE. I think that the <div class="que multichoice">. should be removed and replaced by <form class="que"> <fieldset class="multichoice"> </fieldset> </form and the the CSS will be rigth Do you agree?
          Hide
          Urs Hunkler added a comment -

          Sorry Pierre, I completely disagree. Those multiple CLASSes help a lot.

          Have you tried to use ".que.multichoice" WITHOUT a space between the two CLASS names? That is the correct CSS syntax to apply for <div class="que multichoice">.

          Show
          Urs Hunkler added a comment - Sorry Pierre, I completely disagree. Those multiple CLASSes help a lot. Have you tried to use ".que.multichoice" WITHOUT a space between the two CLASS names? That is the correct CSS syntax to apply for <div class="que multichoice">.
          Hide
          Pierre Pichet added a comment -

          I Urs,
          As I wrote before, I am a beginner in those CSS definition and as I can conclude with your last comment and my kowledge of the questions code, there is a need to clean the actual question code so that it is a good written stable CSS code.
          I will contact you to see how we can work together if you agree, to correct the question code for 1.9.
          It is my first day as moodle developper (with CVS access) of the question code and specially calculated question under the supervision of Tim naturally.

          Show
          Pierre Pichet added a comment - I Urs, As I wrote before, I am a beginner in those CSS definition and as I can conclude with your last comment and my kowledge of the questions code, there is a need to clean the actual question code so that it is a good written stable CSS code. I will contact you to see how we can work together if you agree, to correct the question code for 1.9. It is my first day as moodle developper (with CVS access) of the question code and specially calculated question under the supervision of Tim naturally.
          Hide
          Pierre Pichet added a comment -

          Thanks everyone for your collaboration, tested OK in IE, FF, Netscape (7.1 and 8) and Safari .

          Show
          Pierre Pichet added a comment - Thanks everyone for your collaboration, tested OK in IE, FF, Netscape (7.1 and 8) and Safari .

            People

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

              Dates

              • Created:
                Updated:
                Resolved: