Напишем сценарий определения часов, выделенных преподавателю на каждый вид педагогической нагрузки. В анкете заданы поля, в которые требуется ввести количество часов, отведенных на чтение лекций, на практические занятия и число студентов. Если по предмету читаются лекции, то дополнительно планируется нагрузка: десять процентов времени от лекционных часов отводится на консультации, и для приема экзамена планируется по 30 минут на человека. Если по предмету проводятся практические занятия, то предусмотрена контрольная работа из расчета 15 минут на человека, зачет из расчета 20 минут на человека.
Нагрузку преподавателя требуется представить в виде диаграммы. В анкете преподавателя заполняются первые три поля, а затем после нажатия кнопки Вычислить в документе должна появиться диаграмма по значениям для тех полей, которые вычислялись в анкете, а именно: контрольные работы, зачеты, консультация, экзамены.
Диаграмма представляется с помощью изображений. Сначала в зависимости от исходных данных считаются значения требуемых величин, затем вычисляется ширина каждого из изображений, и которые помещаются в документ для формирования строк диаграммы. Строки диаграммы располагаются в ячейках таблицы, для каждой строки выделена своя ячейка. Ячейки, образующие первый столбец таблицы, содержит подписи к видам нагрузки. Если подвести курсор мыши к изображению, то выводится числовое значение, соответствующее строке диаграммы. HTML-код документа со сценарием построения диаграммы приведен в листинге 6.6.
| Листинг 6.6. Построение горизонтальной диаграммы
|
|
| <html> <head> <title>Распределение педагогических поручений</title> <script language=JavaScript> <!-- function graph(obj) { var l = obj.lec.value // лекционные часы var p = obj.pract.value // практические занятия var s = obj.stud.value // количество студентов var tw = 250; // ширина таблицы var knTime=0; // часы на консультация var eTime=0; // часы на прием экзамена var krTime=0; // часы на проверку контрольных работ var zTime=0; // часы на прием зачета var k1 // коэффициент при построении диаграммы var d= document if (s == "") alert("Введите количество студентов?") if ((l!= "") && (l!= "0")) { knTime=Math.round(0.1*l); eTime=Math.round(0.5*s) } if ((p!= "") && (p!= "0")) { krTime=Math.round(0.25*s); zTime=Math.round(0.33*s) } sTime = knTime+eTime+krTime+zTime if (sTime!=0) { k1 = tw/sTime; d.images[0].width=Math.round(krTime*k1);d.images[0].alt=krTime+" часов"; d.images[1].width=Math.round(zTime*k1);d.images[1].alt=zTime+" часов"; d.images[2].width=Math.round(knTime*k1);d.images[2].alt=knTime+" часов"; d.images[3].width=Math.round(eTime*k1);d.images[3].alt=eTime+" часов"; d.images[4].width=Math.round(sTime*k1);d.images[4].alt=sTime+" часов"; } } function msgh(hours) { if (hours < 0) alert("Недопустимо значение количества часов меньшее нуля!"); } function msgnum(num) { if (num <= 0) alert("Недопустимо значение количества студентов меньшее либо равное нулю!"); } //--> </script> </head> <body bgcolor=#crcccc> <center> <h3>Распределение педагогических поручений</h3> <small>После заполнения соответствующих полей для того, чтобы увидеть диагррамму нажмите кнопку Вычислить.</small> <form name=data> <table bgcolor=#cccccc width=300 cellPadding=3 cellSpacing=3 border=3> <tr> <td align=left><b>Лекции</b> <small>(часов)</small></td> <td align=left><input type=text name=lec size=5 value="" onChange="msgh(this.value)"></td> </tr> <tr> <td align=left><b>Практика</b> <small>(часов)</small></td> <td align=left><input type=text name=pract size=5 value="" onChange="msgh(this.value)"></td></tr> <tr> <td align=left><b>Число студентов</b> <small>(человек)</small></td> <td align=left><input type=text name=stud size=5 value="" onChange="msgnum(this.value)"></td></tr> <tr align=center> <td colspan=2 bgcolor=#cccccc> <input type=button value="Вычислить" onClick="graph(data)"></td></tr> </table> </form> <h4>Диаграмма нагрузки по вычисленным полям<h4> <table cellPadding=0 cellSpacing=0 border=1> <tr> <td><small>Контрольная</small></td> <td bgcolor=#aaaaaa width=250> <img src=1x1.gif width=0 height=20 border=0> <tr> <td><small>Зачет</small></td> <td bgcolor=#aaaaaa width=250><img src=1x1.gif width=0 height=20 border=0> <tr><td><small>Консультации</small></td> <td bgcolor=#aaaaaa width=250><img src=1x1.gif width=0 height=20 border=0> <tr><td><small>Экзамен</small></td> <td bgcolor=#aaaaaa width=250><img src=1x1.gif width=0 height=20 border=0> <tr><td><small>Всего</small></td> <td bgcolor=#aaaaaa width=250><img src=1x1.gif width=0 height=20 border=0> </table></center></body></html>
|
|
Пример выполнения
