--- loncom/homework/optionresponse.pm	2018/02/28 13:20:50	1.201
+++ loncom/homework/optionresponse.pm	2025/02/21 20:55:17	1.204
@@ -1,7 +1,7 @@
 # LearningOnline Network with CAPA
 # option list style responses
 #
-# $Id: optionresponse.pm,v 1.201 2018/02/28 13:20:50 raeburn Exp $
+# $Id: optionresponse.pm,v 1.204 2025/02/21 20:55:17 raeburn Exp $
 #
 # Copyright Michigan State University Board of Trustees
 #
@@ -106,7 +106,7 @@ sub start_foilgroup {
   $Apache::optionresponse::conceptgroup=0;
   &Apache::response::pushrandomnumber(undef,$target);
   if ($target eq 'edit') {
-    my $optionlist="<option></option>\n";
+    my $optionlist="<option value=\"\"></option>\n";
     my $option;
     my @opt;
     my @raw_options = &Apache::lonxml::get_param('options', $parstack, $safeeval, 0,  0, 1);
@@ -736,16 +736,17 @@ sub displayfoils {
                  &mt('Select all that are [_1].','<b>'.$checkboxopt.'</b>');
     }
     foreach $name (@whichopt) {
+      if ($target eq 'web') {
+          $result.= '<div class="LC_optionfoil">';
+      }
       my $text=$Apache::response::foilgroup{$name.'.text'};
       if ($text!~/^\s*$/) {
 	  if ($target eq 'tex') {
 	      $break='\vskip 0 mm ';
-	  } elsif ($target eq 'web') {
-	      $break='<br />';
 	  }
       }
       my $lastopt=$lastresponse{$name};
-      my $optionlist="<option></option>\n";
+      my $optionlist="<option value=\"\"></option>\n";
 
       if($target eq 'tex' and $env{'form.pdfFormFields'} eq 'yes'
          && $Apache::inputtags::status[-1] eq 'CAN_ANSWER') {
@@ -793,12 +794,12 @@ sub displayfoils {
 # lastopt is what the user submitted before
 # defopt is what the field is going to start out with: either previous choice or altopt
 # fieldname is this input field's name after HWVAL_
-                  $optionlist='<input type="hidden" name="HWVAL_'.$fieldname.'" value="'.$escdefopt.'" />'.
+                  $optionlist='<input type="hidden" name="HWVAL_'.$fieldname.'" value="'.$escdefopt.'" /><label>'.
                   '<input type="checkbox" name="HWCHK_'.$fieldname.'" onclick="javascript:if (this.form.elements[\'HWCHK_'.
                   $fieldname.'\'].checked) { this.form.elements[\'HWVAL_'.$fieldname.'\'].value=\''.$esccheckboxopt.'\'; } else { this.form.elements[\'HWVAL_'.$fieldname.'\'].value=\''.$escaltopt.'\'; };javascript:setSubmittedPart(\''.$part.'\');"'.($defopt eq $checkboxopt?' checked="checked"':'')." />\n";
               } else {
 # classic selection list
-	          $optionlist='<select onchange="javascript:setSubmittedPart(\''.
+	          $optionlist='<label><select onchange="javascript:setSubmittedPart(\''.
 		  $part.'\');" name="HWVAL_'.
 		  $Apache::inputtags::response['-1'].':'.$temp.'">'.
 		  $optionlist."</select>\n";
@@ -820,6 +821,8 @@ sub displayfoils {
 	  $result.=$break.$text."\n";
 	  if ($Apache::lonhomework::type eq 'exam') {
 	      $result.=&webbubbles(\@opt,\@alphabet,$temp,$lastopt);
+	  } else {
+	      $result.= '</label>';
 	  }
 	  $temp++;
       } else {
@@ -879,6 +882,9 @@ sub displayfoils {
           }
 	  $displayoptionintex=0;
       }
+      if ($target eq 'web') {
+          $result.= '</div>';
+      }
     }
   }
 
@@ -929,21 +935,23 @@ sub webbubbles {
     my @alphabet=@$ralphabet;
     my $result='';
     my $number_of_bubbles = $#opt + 1;
-    $result.= '<table border="1"><tr>';
+    $result.= '<fieldset class="LC_webbubbles">'.
+              '<legend class="LC_visually_hidden">'.&mt('Choose one').'</legend>'.
+              '<ul class="LC_webbubbles">';
     for (my $ind=0;$ind<$number_of_bubbles;$ind++) {
 	my $checked='';
 	if ($lastopt eq $opt[$ind]) {
 	    $checked=' checked="on" ';
 	}
-	$result.='<td><input type="radio" name="HWVAL_'.
+	$result.='<li><label><input type="radio" name="HWVAL_'.
 	    $Apache::inputtags::response['-1'].':'.$temp.
 	    '" value="'.$opt[$ind].'" '.$checked.' />';
 	if ($alphabet[$ind]) {
 	    $result.=$alphabet[$ind].': ';
 	}
-	$result.=$opt[$ind].'</td>';
+	$result.=$opt[$ind].'</label></li>';
     }
-    $result.='</tr></table>';
+    $result.='</ul></fieldset>';
     return $result;
 }