WeBWorK Problems

Space between multiple choice answers

Space between multiple choice answers

by Timothy Lucas -
Number of replies: 12

Hi,

I am in the midst of upgrading our school's WeBWorK server and I noticed a change with version 2.16.  I am using \displaystyle to make fractions appear larger (as recommended many years ago).  The answers displayed clearly before, but now there is not enough vertical space between answers and so the answers are not clearly displayed.  (See pictures below).  I have searched for a vertical spacing option and cannot find one. 

Does anyone have a quick way to increase the vertical space between answers so they can be displayed properly?  This change affects a significant number of problems for me and I am looking for a simple solution.  My code is included below. These problems were written 10 years ago and while I am sure that standards for problem writing have changed, I am not looking to completely rewrite a large group of problems from scratch. 

Any help would be appreciated.  Thank you.

Tim



###########################

#  Initialization

DOCUMENT();

loadMacros(
"PGstandard.pl",
"MathObjects.pl",
"PGbasicmacros.pl",
"PGchoicemacros.pl",
"PGanswermacros.pl",

);

TEXT(beginproblem());

$showPartialCorrectAnswers = 0;
# Make a new multiple choice object.
$mc = new_multiple_choice();
# $mc now "contains" the multiple choice object.

# Set up Randomly Chosen Constant
$a = random(3,9,2);
$b = random(2,8,2);
$c = random(3,9,2);

# Insert some questions and matching answers in the q/a list
$mc -> qa (# Notice that the first string is the question
         "Find all solutions to \(\displaystyle \frac{(2x-$a)(x+$b)}{x-$c}=0.\)",
          # The second string is the  correct answer
          "\(\displaystyle \frac{$a}{2} \text{  and  } -$b\) $BR",                   
);

$mc ->extra( 
"\(\displaystyle -\frac{$a}{2} \text{  and  } $b \) $BR", 
"\(\displaystyle \frac{$a}{2},\; -$b \text{  and  } $c\) $BR", 
"\(\displaystyle -\frac{$a}{2},\; $b \text{  and  } -$c\) $BR", 
"\(\displaystyle $c\) $BR",
);

# Print the question using $mc->print_q
# Use $mc->print_a to print the list of possible answers.
# These need to be done inside BEGIN_TEXT/END_TEXT to make sure that the 
# equations inside the questions and answers are processed properly.

BEGIN_TEXT

\{$mc -> print_q \}
$PAR
\{$mc -> print_a\}
END_TEXT
# Enter the correct answers to be checked against the answers to the students.
ANS(str_cmp( $mc->correct_ans )
);

ENDDOCUMENT(); 
In reply to Timothy Lucas

Re: Space between multiple choice answers

by Danny Glin -
I'm not seeing the issue on my 2.16 installation.

One thing to check is that you've cleared your browser cache after upgrading to 2.16.  There have been many cases where cached javascript has led to weird display issues.  The easiest thing to try is to hold down the shift key and reload the page containing the question.
Attachment Screen Shot 2021-12-20 at 10.43.24 AM.png
In reply to Danny Glin

Re: Space between multiple choice answers

by Timothy Lucas -
Thank you for the suggestion. Unfortunately, I am still getting the same behavior after clearing the browser cache. This makes sense because I installed 2.16 on a brand new server and so there weren't any previously cached pages from that server.

This seems to only be happening in Safari, but I need to be flexible with student web browsers. Overall, the multiple answers are being displayed in a tight vertical space. Ideally I should be able to put more vertical space between the answers so that they can be distinguished easily. If anyone has a suggestion, I would appreciate it.
In reply to Timothy Lucas

Re: Space between multiple choice answers

by Timothy Lucas -

I am curious if anyone has a way to make more space between the answers since the previous reply didn’t quite solve the problem.

In reply to Timothy Lucas

Re: Space between multiple choice answers

by Glenn Rice -

You could add css that is injected by the PGcourse.pl file for your course.

Create the file /opt/webwork/course_id/templates/macros/PGcourse.pl that has the contents

sub _PGcourse_init {};
TEXT(MODES(TeX => '', HTML => '<style>input[type=radio]{margin-bottom: 0.75rem;}</style>'));
1;

If the file /opt/webwork/course_id/templates/macros/PGcourse.pl already exists, then just add the "TEXT(MODES..." line to the existing file.

Better css styling could also be done.

In reply to Glenn Rice

Re: Space between multiple choice answers

by Glenn Rice -
I meant to add some css scoping. It would probably be better to use

TEXT(MODES(TeX => '', HTML => '<style>.problem-content input[type=radio]{margin-bottom: 0.75rem;}</style>'));

That way this injected css will only apply to radio buttons in the problem, and not potentially other radio buttons on the page.
In reply to Glenn Rice

Re: Space between multiple choice answers

by Timothy Lucas -
Thank you for the advice. My apologies for being a novice with this syntax. I created the file you mentioned above and then added "PGcourse.pl" to the loadMacros for the problem, but I didn't see any change. I adjusted the size of the margin to be really large and didn't see a change.

Also, in my problem I don't explicitly refer to radio buttons (maybe they are implicitly in the code). Could that be the issue?

Any assistance would be appreciated.
In reply to Timothy Lucas

Re: Space between multiple choice answers

by Glenn Rice -
There is only one type of html radio button, and what you show in your screen shot is exactly that. That is an input with type radio.  Your problem uses new_multiple_choice to add these.

The style I posted definitely works. You say that you have added PGcourse.pl to the loadMacros call in the problem (all problems should have that in any case). Did you put the PGcourse.pl file in your course's templates/macros directory? That file should contain

sub _PGcourse_init {};
TEXT(MODES(TeX => '', HTML => '<style>.problem-content input[type=radio]{margin-bottom: 0.75rem;}</style>'));
1;

Make sure that all of that is there including the "1;" on the last line.
In reply to Glenn Rice

Re: Space between multiple choice answers

by Timothy Lucas -

Thank you.  I was able to get your solution to work. I didn't have access to the new server while at home so I couldn't try it on 2.16 until today.  I appreciate your help.

In reply to Glenn Rice

Re: Space between multiple choice answers

by Timothy Lucas -

I created two different macros with two different spacings. I wanted more space when there were fractions in the answers. I noticed that if there are multiple questions on the same page, then the last question ends up deciding the spacing between answers for all of the questions on the page.  Is there a way to ensure that the spacing is only applied to the one problem?  Just curious.  Not a fatal error.

In reply to Timothy Lucas

Re: Space between multiple choice answers

by Glenn Rice -

The last css rule that appears will apply to the entire page and override any previous css.  So this approach certainly will not work to get different spacing for problems on the same page.

The only way to achieve different spacing for different problems on the same page would be to edit the problems and inject a css class into those answers, and then apply css to those classes.

In reply to Timothy Lucas

Re: Space between multiple choice answers

by Timothy Lucas -
After fixing the spacing, I have discovered that this is definitely a problem with Safari. For some reason, Safari randomly covers different parts of answers like I showed above. I don't know if there is a larger problem with webwork 2.16 and Safari, but I am now seeing that this behavior is consistently occurring in Safari.
In reply to Timothy Lucas

Re: Space between multiple choice answers

by Glenn Rice -
If you are capable of doing so, use the DOM inspector in the browser developer tools and see what it shows in that area.

Also, I remember Michael Gage seeing some issues like the one that you show and it turned out that the result was due to a browser extension.  Although in that case it was an old extension created by one of his students specifically designed for WeBWorK.