[LON-CAPA-cvs] cvs: loncom /homework matchresponse.pm optionresponse.pm /interface loncommon.pm

[raeburn]

raeburn		Fri Feb 21 20:55:17 2025 EDT

  Modified files:              
    /loncom/homework	optionresponse.pm matchresponse.pm 
    /loncom/interface	loncommon.pm 
  Log:
  - WCAG 2 compliance.
    Replace layout table with fieldset and list tags for optionresponse foil
    exam mode.
    Use div and CSS instead of br to control space around optionresponse foil 
    in standard (problem) mode.
  
  
Index: loncom/homework/optionresponse.pm
diff -u loncom/homework/optionresponse.pm:1.203 loncom/homework/optionresponse.pm:1.204
--- loncom/homework/optionresponse.pm:1.203	Mon Jan 27 14:18:38 2025
+++ loncom/homework/optionresponse.pm	Fri Feb 21 20:55:17 2025
@@ -1,7 +1,7 @@
 # LearningOnline Network with CAPA
 # option list style responses
 #
-# $Id: optionresponse.pm,v 1.203 2025/01/27 14:18:38 raeburn Exp $
+# $Id: optionresponse.pm,v 1.204 2025/02/21 20:55:17 raeburn Exp $
 #
 # Copyright Michigan State University Board of Trustees
 #
@@ -736,12 +736,13 @@
                  &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};
@@ -881,6 +882,9 @@
           }
 	  $displayoptionintex=0;
       }
+      if ($target eq 'web') {
+          $result.= '</div>';
+      }
     }
   }
 
@@ -931,21 +935,23 @@
     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;
 }
 
Index: loncom/homework/matchresponse.pm
diff -u loncom/homework/matchresponse.pm:1.96 loncom/homework/matchresponse.pm:1.97
--- loncom/homework/matchresponse.pm:1.96	Mon Jan 27 19:07:58 2025
+++ loncom/homework/matchresponse.pm	Fri Feb 21 20:55:17 2025
@@ -1,7 +1,7 @@
 # The LearningOnline Network with CAPA
 # Full matching style response
 #
-# $Id: matchresponse.pm,v 1.96 2025/01/27 19:07:58 raeburn Exp $
+# $Id: matchresponse.pm,v 1.97 2025/02/21 20:55:17 raeburn Exp $
 #
 # Copyright Michigan State University Board of Trustees
 #
@@ -200,7 +200,7 @@
             if ($i % $columns == 0) {
                 $table.='<tr>';
             }
-            $table.= '<td>'.$label.'</td><td>'.$item.'</td>';
+            $table.= '<th>'.$label.'</th><td>'.$item.'</td>';
             if ($columns > 1) {
                 $table .= '<td> </td>';
             }
@@ -745,7 +745,7 @@
 	    }
 	    if ($target ne 'tex') {
 		if ($Apache::lonhomework::type ne 'exam') {
-		    $question.="<br />\n".$optionlist.$text.'</label>';
+		    $question.='<div class="LC_matchfoil">'."\n".$optionlist.$text.'</label></div>';
 		} else {
 		    $question.="<br />\n".$text;
 		}
Index: loncom/interface/loncommon.pm
diff -u loncom/interface/loncommon.pm:1.1461 loncom/interface/loncommon.pm:1.1462
--- loncom/interface/loncommon.pm:1.1461	Fri Feb 21 06:09:36 2025
+++ loncom/interface/loncommon.pm	Fri Feb 21 20:55:17 2025
@@ -1,7 +1,7 @@
 # The LearningOnline Network with CAPA
 # a pile of common routines
 #
-# $Id: loncommon.pm,v 1.1461 2025/02/21 06:09:36 raeburn Exp $
+# $Id: loncommon.pm,v 1.1462 2025/02/21 20:55:17 raeburn Exp $
 #
 # Copyright Michigan State University Board of Trustees
 #
@@ -9360,13 +9360,39 @@
 /*
   styles used for response display
 */
-div.LC_radiofoil, div.LC_rankfoil {
+div.LC_radiofoil, div.LC_rankfoil, div.LC_optionfoil, div.LC_matchfoil {
   margin: .5em 0em .5em 0em;
 }
 table.LC_itemgroup {
   margin-top: 1em;
 }
 
+table.LC_itemgroup tr th {
+  font-weight: normal;
+}
+
+fieldset.LC_webbubbles {
+  margin: 2px 0 0 0;
+  padding: 0;
+  border: 0;
+}
+
+ul.LC_webbubbles {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+  text-align: left;
+  float: left;
+}
+
+ul.LC_webbubbles li {
+  line-height: 1.8em;
+  border: 1px solid black;
+  padding: 0 2px 0 5px;
+  margin: 0 0 0 -1px;
+  float: left;
+}
+
 /*
   styles used by TTH when "Default set of options to pass to tth/m
   when converting TeX" in course settings has been set