[LON-CAPA-cvs] cvs: loncom /homework lonsimpleproblemedit.pm
raeburn
raeburn at source.lon-capa.org
Mon Jun 22 22:47:03 EDT 2026
raeburn Tue Jun 23 02:47:03 2026 EDT
Modified files:
/loncom/homework lonsimpleproblemedit.pm
Log:
- WCAG 2 compliance
- Replace use of <table> for layout with <div>.
- Include labels for form elements.
- Include landmark for page's main content to support "Skip to main content".
- Satisfy minimum spacing between touch targets.
-------------- next part --------------
Index: loncom/homework/lonsimpleproblemedit.pm
diff -u loncom/homework/lonsimpleproblemedit.pm:1.39 loncom/homework/lonsimpleproblemedit.pm:1.40
--- loncom/homework/lonsimpleproblemedit.pm:1.39 Tue Jun 23 01:40:53 2026
+++ loncom/homework/lonsimpleproblemedit.pm Tue Jun 23 02:47:03 2026
@@ -1,7 +1,7 @@
# The LearningOnline Network
# Simple Problem Parameter Setting "Editor"
#
-# $Id: lonsimpleproblemedit.pm,v 1.39 2026/06/23 01:40:53 raeburn Exp $
+# $Id: lonsimpleproblemedit.pm,v 1.40 2026/06/23 02:47:03 raeburn Exp $
#
# Copyright Michigan State University Board of Trustees
#
@@ -69,12 +69,13 @@
my $spell_link=
&Apache::lonhtmlcommon::spelllink('simpleedit','questiontext');
return (<<ENDQUESTION);
-<table bgcolor="#dddd22" cellspacing="4" cellpadding="2" style="width:100%">
-<tr><td><b>$qt</b><br />
-<textarea style="width:99%" name="questiontext" cols="80" rows="8">$text</textarea>
-<br />$spell_link
-</td></tr>
-</table>
+<div class="LC_grid" role="grid" style="background-color: #dddd22; width: 99%; margin: 0 1px; padding: 4px; border: 1px solid black;">
+<div class="LC_grid_row" role="row">
+<div class="LC_grid_cell" role="gridcell" style="padding: 2px; margin: 4px;">
+<b><label for="questiontext">$qt</label></b><br />
+<textarea style="width: 99%" name="questiontext" id="questiontext" cols="80" rows="8">$text</textarea>
+<div style="margin: 4px 0;">$spell_link</div>
+</div></div></div>
<br />
ENDQUESTION
}
@@ -85,12 +86,13 @@
my $spell_link=
&Apache::lonhtmlcommon::spelllink('simpleedit','hinttext');
return (<<ENDHINT);
-<table bgcolor="#accacc" cellspacing="4" cellpadding="2" style="width:100%">
-<tr><td><b>$ht</b><br />
-<textarea style="width:99%" name="hinttext" cols="80" rows="4">$text</textarea>
-<br />$spell_link
-</td></tr>
-</table>
+<div class="LC_grid" role="grid" style="background-color: #accacc; width: 99%; margin: 0 1px; padding: 4px; border: 1px solid black;">
+<div class="LC_grid_row" role="row">
+<div class="LC_grid_cell" role="gridcell" style="padding: 2px; margin: 4px;">
+<b><label for="hinttext">$ht</label></b><br />
+<textarea style="width: 99%" name="hinttext" id="hinttext" cols="80" rows="4">$text</textarea>
+<div style="margin: 4px 0;">$spell_link</div>
+</div></div></div>
<br />
ENDHINT
}
@@ -99,11 +101,11 @@
my $text=$qparms{$prefix.'numericalscript'};
my $ht=&mt('Scripting (optional)');
return (<<ENDSCRIPT);
-<table bgcolor="#ccccaa" cellspacing="4" cellpadding="2" style="width:100%">
-<tr><td><b>$ht</b><br />
-<textarea style="width:99%" name="numericalscript" cols="80" rows="4">$text</textarea>
-</td></tr>
-</table>
+<div class="LC_grid" role="grid" style="background-color: #ccccaa; width: 99%; margin: 0 1px; padding: 4px; border: 1px solid black;">
+<div class="LC_grid_row" role="row">
+<div class="LC_grid_cell" role="gridcell" style="padding: 2px; margin: 4px;"><b><label for="numericalscript">$ht</label></b><br />
+<textarea style="width: 99%" name="numericalscript" id="numericalscript" cols="80" rows="4">$text</textarea>
+</div></div></div>
<br />
ENDSCRIPT
}
@@ -137,11 +139,13 @@
my $selectvalue=&Apache::loncommon::select_form(
$value,
'value'.$number,
- \%values);
+ \%values,
+ undef,undef,'value'.$number);
my $selectposition=&Apache::loncommon::select_form(
$position,
'position'.$number,
- {&Apache::lonlocal::texthash(%positions)});
+ {&Apache::lonlocal::texthash(%positions)},
+ undef,undef,'position'.$number);
my $text=$qparms{$prefix.'text'.$number};
my %lt=&Apache::lonlocal::texthash('foil' => 'Foil',
'value' => 'Value',
@@ -151,14 +155,22 @@
my $spell_link=
&Apache::lonhtmlcommon::spelllink('simpleedit',"text$number");
return (<<ENDFOIL);
-<table bgcolor="#E8D8EE" cellspacing="2" cellpadding="1" style="width:100%">
-<tr><td colspan="2"><b>$lt{'foil'}</b></td></tr>
-<tr><td>$lt{'value'}: $selectvalue</td><td>$lt{'pos'}: $selectposition</td></tr>
-<tr><td colspan="2">$lt{'text'}:<br />
-<textarea style="width:99%" name="text$number" cols="80" rows="4">$text</textarea>
-<br />$spell_link
-</td></tr>
-</table>
+<div class="LC_grid" role="grid" style="background-color: #E8D8EE; padding: 0; margin: 0; width: 100%;">
+<div class="LC_grid_row" role="row">
+<div class="LC_grid_cell" role="gridcell"><b>$lt{'foil'}</b></div></div>
+<div class="LC_grid_row" role="row">
+<div class="LC_grid_cell" role="gridcell">
+<div class="LC_floatleft" style="display: inline-block; margin: 0; padding: 0; width: 50%;">
+<label for="value$number">$lt{'value'}</label>: $selectvalue</div>
+<div class="LC_floatleft" style="display: inline-block; margin: 0; padding: 0;">
+<label for="position$number">$lt{'pos'}</label>: $selectposition</div><br clear="all" />
+</div></div>
+<div class="LC_grid_row" role="row">
+<div class="LC_grid_cell" role="gridcell">
+<label for="text$number">$lt{'text'}</label>:<br />
+<textarea style="width: 99%;" name="text$number" id="text$number" cols="80" rows="4">$text</textarea>
+<div style="margin: 4px 0;">$spell_link</div>
+</div></div></div>
<br />
ENDFOIL
}
@@ -287,7 +299,8 @@
# ------------------------------------------------------------ Print the screen
my $spell_header=&Apache::lonhtmlcommon::spellheader();
$r->print(&Apache::loncommon::start_page('Simple Problem Editor',
- $spell_header.$js));
+ $spell_header.$js).
+ '<div class="LC_landmark" role="main" id="LC_main_content">');
if ($symb) {
my $title='<h1>'.&Apache::lonnet::gettitle($symb).'</h1>';
if (&get_parent_uri($symb)) {
@@ -329,11 +342,12 @@
unless ($questiontypes{$qtype}) { $qtype='radio'; }
$r->print(
'<fieldset style="width:400px;">'
- .'<legend>'.&mt('Question Type').'</legend>'
+ .'<legend><label for="questiontype">'.&mt('Question Type').'</label></legend>'
.&Apache::loncommon::select_form(
$qtype,
'questiontype',
- {&Apache::lonlocal::texthash(%questiontypes)})
+ {&Apache::lonlocal::texthash(%questiontypes)},
+ undef,undef,'questiontype')
.'</fieldset>'
);
$r->print(
@@ -364,27 +378,38 @@
unless (defined($randomize)) { $randomize='yes'; }
unless ($randomizes{$randomize}) { $randomize='yes'; }
$r->print(
- '<table bgcolor="#00ee44" cellspacing="4" cellpadding="2" style="width:100%">'.
- '<tr><td>'.&mt('Max number of foils displayed').
-': <input type="text" size="3" name="maxfoils" value="'.$maxfoils.'" /> '.
- &Apache::loncommon::select_form(
+ '<div class="LC_grid" role="grid" style="background-color: #00ee44; width: 99%; margin: 0 1px; padding: 4px; border: 1px solid black;">'.
+ '<div class="LC_grid_row" role="row">'.
+ '<div class="LC_grid_cell" role="gridcell"><label>'.&mt('Max number of foils displayed').
+': <input type="text" size="3" name="maxfoils" value="'.$maxfoils.'" /></label> '.
+ &Apache::loncommon::select_form(
$randomize,
'randomize',
- {&Apache::lonlocal::texthash(%randomizes)}).
- '</td></tr><tr><td bgcolor="#F0F0F0">');
+ {&Apache::lonlocal::texthash(%randomizes)},
+ undef,undef,undef,undef,&mt('Foil order')).
+ '</div></div><div class="LC_grid_row" role="row">'.
+ '<div class="LC_grid_cell" role="gridcell" style="background-color: #F0F0F0; margin: 0 1px; padding: 2px;">');
# Option Response: Options
if ($qtype eq 'option') {
my $options=$qparms{$prefix.'options'};
unless (defined($options)) { $options="('true','false')"; }
my %optionshash=&evaloptionhash($options);
$r->print(
- '<table bgcolor="#ffcc22" cellspacing="4" cellpadding="2" style="width:100%">'.
- '<tr><td><input type="hidden" name="options" value="'.
- $options.'" />'.&mt('Add new option').': '.
- '<input type="text" name="newopt" size="15" />'.
- &mt('Delete an option').': '.
- &Apache::loncommon::select_form('','delopt',{'' => '',%optionshash}).
- '</td></tr><tr><td>');
+ '<div class="LC_grid" role="grid" style="background-color: #ffcc22; margin: 0 1px; padding: 2px; width: 100%;">'.
+ '<div class="LC_grid_row" role="row">'.
+ '<div class="LC_grid_cell" role="gridcell">'.
+ '<input type="hidden" name="options" value="'.
+ $options.'" /><label>'.&mt('Add new option').': '.
+ '<input type="text" name="newopt" size="15" /></label>');
+ if (%optionshash) {
+ $r->print(
+ ' <label for="delopt">'.&mt('Delete an option').': '.
+ &Apache::loncommon::select_form('','delopt',{'' => '',%optionshash},
+ undef,undef,'delopt'));
+ }
+ $r->print(
+ '</div></div><div class="LC_grid_row" role="row">'.
+ '<div class="LC_grid_cell" role="gridcell">');
}
# Foils
for (my $i=1;$i<=10;$i++) {
@@ -392,11 +417,11 @@
}
# End Options
if ($qtype eq 'option') {
- $r->print('</td></tr></table>');
+ $r->print('</div></div></div>');
}
# End Response
- $r->print('</td></tr></table><br />');
+ $r->print('</div></div></div><br />');
# Hint
$r->print(&hint());
}
@@ -411,13 +436,16 @@
unless (defined($stringtype)) { $stringtype='cs'; }
unless ($stringtypes{$stringtype}) { $stringtype='cs'; }
$r->print(
- '<table bgcolor="#00ee44" cellspacing="4" cellpadding="2" style="width:100%">'.
- '<tr><td><label>'.&mt('Correct answer').': <input type="text" size="20" name="stringanswer" value="'.$stringanswer.'" /></label> '.
- &Apache::loncommon::select_form(
+ '<div class="LC_grid" role="grid" style="background-color: #00ee44; width: 99%; margin: 0 1px; padding: 4px; border: 1px solid black;">'.
+ '<div class="LC_grid_row" role="row">'.
+ '<div class="LC_grid_cell" role="gridcell">'.
+ '<label>'.&mt('Correct answer').': <input type="text" size="20" name="stringanswer" value="'.$stringanswer.'" /></label> '.
+ &Apache::loncommon::select_form(
$stringtype,
'stringtype',
- {&Apache::lonlocal::texthash(%stringtypes)}).
- '</td></tr></table><br />');
+ {&Apache::lonlocal::texthash(%stringtypes)},
+ undef,undef,undef,undef,&mt('String Type')).
+ '</div></div></div><br />');
# Hint
$r->print(&hint());
}
@@ -430,13 +458,15 @@
unless (defined($numericalsigfigs)) { $numericalsigfigs='1,15'; }
$r->print(
- '<table bgcolor="#00ee44" cellspacing="4" cellpadding="2" style="width:100%">'.
- '<tr><td><label>'.&mt('Correct answer').': <input type="text" size="20" name="numericalanswer" value="'.$numericalanswer.'" /></label> '.
- '<label>'.&mt('Unit').': <input type="text" size="5" name="numericalunit" value="'.$qparms{$prefix.'numericalunit'}.'" /></label> '.
- '<label>'.&mt('Format').': <input type="text" size="5" name="numericalformat" value="'.$qparms{$prefix.'numericalformat'}.'" /></label> '.
- '<label>'.&mt('Tolerance').': <input type="text" size="5" name="numericaltolerance" value="'.$numericaltolerance.'" /></label> '.
- '<label>'.&mt('Significant digits').': <input type="text" size="5" name="numericalsigfigs" value="'.$numericalsigfigs.'" /></label>'.
- '</td></tr></table><br />');
+ '<div class="LC_grid" role="grid" style="background-color: #00ee44; width: 99%; margin: 0 1px; padding: 4px; border: 1px solid black;">'.
+ '<div class="LC_grid_row" role="row">'.
+ '<div class="LC_grid_cell" role="gridcell">'.
+ '<label>'.&mt('Correct answer').': <input type="text" size="20" name="numericalanswer" value="'.$numericalanswer.'" /></label> '.
+ '<label>'.&mt('Unit').': <input type="text" size="5" name="numericalunit" value="'.$qparms{$prefix.'numericalunit'}.'" /></label> '.
+ '<label>'.&mt('Format').': <input type="text" size="5" name="numericalformat" value="'.$qparms{$prefix.'numericalformat'}.'" /></label> '.
+ '<label>'.&mt('Tolerance').': <input type="text" size="5" name="numericaltolerance" value="'.$numericaltolerance.'" /></label> '.
+ '<label>'.&mt('Significant digits').': <input type="text" size="5" name="numericalsigfigs" value="'.$numericalsigfigs.'" /></label>'.
+ '</div></div></div><br />');
$r->print(&hint());
}
# Store Button
@@ -448,7 +478,7 @@
} else {
$r->print(&mt('Could not identify problem.'));
}
- $r->print(&Apache::loncommon::end_page());
+ $r->print('</div>'.&Apache::loncommon::end_page());
return OK;
}
More information about the LON-CAPA-cvs
mailing list