Title: SOGA
CITATION PDF VIEWER THUMBNAILS PAGE IMAGE ZOOMABLE
Full Citation
STANDARD VIEW MARC VIEW
Permanent Link: http://ufdc.ufl.edu/UF00100744/00001
 Material Information
Title: SOGA Secure Online Grading Assistant
Physical Description: Book
Language: English
Creator: Chung, Sung-Kuang, 1970-
Publisher: State University System of Florida
Place of Publication: Florida
Florida
Publication Date: 2000
Copyright Date: 2000
 Subjects
Subject: Grading and marking (Students) -- Data processing   ( lcsh )
Computer and Information Science and Engineering thesis, M.S   ( lcsh )
Dissertations, Academic -- Computer and Information Science and Engineering -- UF   ( lcsh )
Genre: government publication (state, provincial, terriorial, dependent)   ( marcgt )
bibliography   ( marcgt )
theses   ( marcgt )
non-fiction   ( marcgt )
 Notes
Summary: ABSTRACT: Secure Online Grading Assistant (SOGA) is a web-based application designed to facilitate the programming homework grading processes in large classes. Because its user interface is extremely intuitive and user friendly, new users can begin using the system immediately with very little training. To prevent invalid users from assessing the system, each user must first log in before using the system. The system has three access levels: administrator, instructor, and grader. Each access level has its own functions. A user can be granted with more than one level of access. The administrator has unrestricted access to the entire system. Administrative activities such as adding a new user and setting up this user's access level, username, and password can be easily performed. The instructor can use the system to monitor homework-grading processes and send grade e-mails to students. SOGA provides an integrated homework-grading environment for graders. Information such as grading criteria, homework submission time, program source codes, compile errors, and running results is provided in a single page. Graders no longer have to open several windows and switch back and forth within them to grade homework.
Summary: KEYWORDS: cgi, web based, perl, javascript, homework grading
Thesis: Thesis (M.S.)--University of Florida, 2000.
Bibliography: Includes bibliographical references (p. 52).
System Details: System requirements: World Wide Web browser and PDF reader.
System Details: Mode of access: World Wide Web.
Statement of Responsibility: by Sung-Kuang Chung.
General Note: Title from first page of PDF file.
General Note: Document formatted into pages; contains vii, 53 p.; also includes graphics.
General Note: Vita.
 Record Information
Bibliographic ID: UF00100744
Volume ID: VID00001
Source Institution: University of Florida
Holding Location: University of Florida
Rights Management: All rights reserved by the source institution and holding location.
Resource Identifier: oclc - 47681495
alephbibnum - 002678650
notis - ANE5877

Downloads

This item has the following downloads:

soga_final_submission ( PDF )


Full Text













SOGA: SECURE ONLINE GRADING ASSISTANT


By

SUNG-KUANG CHUNG












A THESIS PRESENTED TO THE GRADUATE SCHOOL
OF THE UNIVERSITY OF FLORIDA IN PARTIAL FULFILLMENT
OF THE REQUIREMENTS FOR THE DEGREE OF
MASTER OF SCIENCE

UNIVERSITY OF FLORIDA


2000






























Copyright 2000

by

Sung-Kuang Chung

















ACKNOWLEDGMENTS

I would like to thank my advisor, Dr. Doug Dankel II. Without his guidance,

patience and support this thesis would not have been possible. I would also like to thank

Dr. Manuel Bermudez and Dr. Joseph Wilson for being on my committee and for the

excellent feedback they gave. I must also express my gratitude to Mr. Dave Small for his

suggestions. Furthermore, I would like to thank Ms. Marilyn Keeling for providing me

testing grove class accounts. Special thanks are extended to my best friend, Chin Chen,

for her suggestions and support. Finally I would like to thank my parents for their

unending love.


















TABLE OF CONTENTS

page

A C K N O W L E D G M E N T S ................................................................................................. iii

ABSTRACT ............................... .............. vi

CHAPTERS

1 IN TRODU CTION .............. ..... ............................ ..............

Problem O overview ........................ ....... ... ......... .... .... ......... .......... .. 1
O v erv iew o f S O G A ............................................................. ..................... ..... 2
T h esis O rg an iz atio n ........................................................... ............. ........ ..... 4

2 REV IEW OF LITER A TU RE ........................................ ......................................5

Technology U sed .................... .............................................................. 5
H T M L ............................................................ ......... ..... 5
J av a S c rip t ....................................................................... 6
Perl ................ .......................... .................................. 8
Overview of Other Web-based Applications ........................ ..................... 9
M A X ................................................................................................... . . 9
W E T ....................................................................................................... 1 0
W E X ........................................................................ 1 1
Chemistry Online Homework System ................................... 12
S u m m a ry .................................................................................................... 1 2

3 S O G A O V E R V IE W .................................................................................................. 14

The L ogin Process............................ ................... 14
A access L evels............................. .............. ..... 16
A dm inistrator .................................................................................................. ........ 16
In stru c to r ...................................................................................................... 1 7
G ra d e r ........................................................... ........ ...... 1 7
A dm inistrator M enu ..................................................................... 17
N ew H om ew ork ............................................................................... 18
A d d/D rop U sers ........................................................................ 2 1
Instructor M enu ..................................................... 22
G reader M enu ...................................................................................................... 25
The Grading Screen .................................................................. 26












The D one Grading Screen.................... ..................................... ........................... 29
The Re-grading Screen .. ..... ................................................................. 30
L ogout Screen ...................................................................................................... 31
S u m m a ry .............................................. .... ................................................. 3 2

4 IMPLEMENTATION DETAILS ...........................................................................33

SO G A 's Installation P rocess........................................................... .............. 33
H T M L F o rm s ........................................................................................ 3 4
HTM L Form Syntax ......... .................. ... ................... .......... 35
P erl and H TM L ................... ........ .... ........................................ .......................... 38
G enerating B uttons on the Fly ............................................................ .............. 39
Parsing the Q uery String ........................... ...................................... .............. 40
J av a S c rip t ..................................................................... 4 1
D ata S to rag e ........................................................................................ 4 3
User Profiles............................... .............. 44
Grading Sheet.......................................................... 45
E -m ail R record ..................................... .......................... 45
P erl's P process .................................................... 4 6
S u m m a ry .................................................................................................... 4 7

5 C O N C L U S IO N S ........................................................................................................ 4 8

O overview of SO G A .............................................................. ........ 48
F future Im prov em ents .................................................................................... ......... 49
S u m m a ry ....................................................................... 5 1

LIST O F REFEREN CES ....................................................................................... ... .......52

B IO G R A PH IC A L SK E T C H ........................................................................................ 53






















v


















Abstract of Thesis Presented to the Graduate School
of the University of Florida in Partial Fulfillment of the
Requirements for the Degree of Master of Science

SOGA: SECURE ONLINE GRADING ASSISTANT


By

Sung-Kuang Chung

December 2000


Chairman: Douglas D. Dankel II
Major Department: Computer and Information Science and Engineering

Secure Online Grading Assistant (SOGA) is a web-based application designed to

facilitate the programming homework grading processes in large classes. Because its user

interface is extremely intuitive and user friendly, new users can begin using the system

immediately with very little training. To prevent invalid users from assessing the system,

each user must first log in before using the system. The system has three access levels:

administrator, instructor, and grader. Each access level has its own functions. A user can

be granted with more than one level of access. The administrator has unrestricted access

to the entire system. Administrative activities such as adding a new user and setting up

this user's access level, username, and password can be easily performed. The instructor

can use the system to monitor homework-grading processes and send grade e-mails to

students. SOGA provides an integrated homework-grading environment for graders.

Information such as grading criteria, homework submission time, program source codes,











compile errors, and running results is provided in a single page. Graders no longer have

to open several windows and switch back and forth within them to grade homework.
















CHAPTER 1
INTRODUCTION



Problem Overview


The Internet has become a part of everyone's everyday life. Many Internet

applications have been developed to make information exchange easier. Among those

applications, many use a web browser as the interface. Web-based free e-mail accounts

and search engines are common examples. In the University of Florida's Computer and

Information Science and Engineering Department, several Web-based applications have

been developed to improve the communication between students and instructors.

Although these applications have been proved to be useful, they do not tackle all the

problems that exist in a class, especially a huge class with more than four hundred

students. One problem relates to the homework assignment grading process. For example,

in a programming class, homework assignments usually are assigned every week. Ideally,

all homework assignments should be graded within one week of the due date with the

grades returned to students by the day the next homework is assigned. However, this is

difficult to accomplish because of the tedious nature of the grading process. The many

and tedious processes that must be performed when grading assignments include:

1. After gathering the homework solutions from students, the chief grader (usually

a class TA) has to divide all the solutions into several portions according to the

number of graders and must place the divided solutions in a repository account.











2. The chief grader creates the homework grading criteria.

3. The chief grader sends the grading criteria to the graders along with the

information regarding who will be grading which portion of the homework.

4. The graders obtain their portion of homework to grade.

5. The graders open three windows, the first one is used to display the source code,

the second one is used to compile and run programs, and the last one is used to

record the grades. They then proceed to grade each solution, placing the

resulting grade on to a grade sheet.

6. The graders return the grading sheets to the chief grader, who must then enter

these grades into the grade book.

Most of these processes are time consuming. As a result, the students cannot get

homework grades back in time and may make the same mistakes in their next homework

assignment.

The focus of this thesis is to develop a system called SOGA, the Secure Online

Grading Assistant, to tackle the difficulties mentioned above.



Overview of SOGA


SOGA is a CGI application written in Perl. The web pages of this system are

generated dynamically. This is done by embedding HTML code in Perl. Besides the

HTML code, JavaScript is embedded in Perl as well to provide added functionality. The

result is a fully integrated, easy to use user interface. The system has three access levels

with each access level having its own functions. Users can access the system from any

Internet ready computer.











SOGA provides a nicely structured user interface for graders. Program source

code, submission time, program output, and grading sheets are displayed in the same

window. In addition, all programs are pre-compiled and pre-run by the chief grader, only

assigning grades needs to be done. Furthermore, the system tracks which programs need

to be graded automatically; this frees graders from determining which programs have

been graded and which have not. Therefore, graders can put most of their efforts on

homework grading instead of bookkeeping chores.

Besides the target user--graders, SOGA provides useful functions to the chief

grader and the instructor as well. For the chief grader, it automates the homework

dividing process. It divides the homework into several portions according to the number

of graders. It also rotates graders so no grader will grade the same portion of homework

every time, which increases the fairness of homework grading. In addition, the homework

grading criteria can be easily created and posted. Because the graders will see the grading

criteria when they logged in the system, there is no need to send the grading criteria to

them via e-mail or paper.

For the instructor, SOGA provides functions that allow an instructor to monitor

the grading progress of all graders. It also allows an instructor to decide when to send the

grades e-mails to students.

In summary, SOGA makes the homework grading process more efficient and less

error prone.












Thesis Organization


This thesis is organized into five chapters. Chapter 2 discusses other similar web

based applications and the underlying technology used in SOGA. Chapter 3 provides a

high-level view of SOGA from a user's perspective. It contains a walkthrough of the

system's functionality and a detailed explanation on how to perform those functions.

Several screen shots of the system are provided to illustrate the system's user interface.

Chapter 4 discusses the implementation issues of the system in detail. It provides a low-

level view of the system from a developer's perspective. Finally, chapter 5 provides a

conclusion for this thesis. It consists of a summary and possible future improvements of

the system.
















CHAPTER 2
REVIEW OF LITERATURE


This chapter begins with a discussion on the technologies used in the creation of

SOGA. Hypertext Markup Language (HTML), JavaScript, and Perl are covered in the

discussion. This chapter further discusses several Web-based applications developed by

students at University of Florida, Department of Computer and Information Science and

Engineering. These education-related applications are MAX, WET, and WEX. In

addition, an online homework grading system developed by the Nicholls State University

is also discussed. Finally, a brief summary concludes this chapter.



Technology Used


HTML

HTML, Hypertext Markup Language, is the text markup language used on the

World Wide Web. It indicates the structure and format of a document and instructs a Web

browser on how to render the document [Pow98].

An HTML document is a plain-text file. It consists of information one intends to

publish on the Web and embedded instructions, i.e., HTML elements, describing the

structure and layout of this information. An HTML element usually consists of a pair of

tags (e.g.,

and

). The information to be described is enclosed in these two

tags, called the Start and End tags. A Start tag consists of a left angle bracket "<,"a tag

name, and a right angle bracket ">." An end tag is similar to the start tag except there is a

slash (/) preceding the tag name [NcsOO].











HTML is an SGML (Standard Generalized Markup Language) application for

marking up documents for the World Wide Web. HTML allows one to:

1. Publish documents to the Internet in a platform independent format,

2. Create links to related works from one's document,

3. Include graphics and multimedia data in one's document, and

4. Link to non-World Wide Web information resources on the Internet [Pow96].


JavaScript

There are two ways of adding interactivity to a Web site. The first is to use

HTML forms and server-side programs written in languages like Perl. The second is to

use client-side scripting, which embeds a Web scripting language in an HTML document.

Client-side scripting is usually used for:

1. Form validation,

2. Page embellishment,

3. Dynamic page generation, and

4. Inter-object communication "glue" [Pow98].

Both JavaScript and VBScript are widely used Web scripting languages. SOGA uses

JavaScript for client-side scripting.

JavaScript is a scripting language developed by the Netscape Corporation

[Pow98]. It is a cross-platform, object-based scripting language for client and server

applications. Client applications run in a browser (e.g., Netscape Navigator) and server

applications run on a server (e.g., Netscape Enterprise Server). One can use JavaScript to

create dynamic HTML pages that process user input and maintain persistent data using

special objects, files, and relational databases. Applications can access Java and CORBA

distributed-object applications through JavaScript's LiveConnect functionality [Net97].











Both server-side and client-side JavaScript share the JavaScript core language.

This core language is the ECMA-262, a scripting language standardized by the European

standards body, with some additions. The core language contains a set of core objects,

such as the Array and Date objects, which can be used in scripting on both sides [Net97].

Figure 2-1 shows the relationship among client-side JavaScript, server-side JavaScript,

and the core JavaScript.

CLIENT-SIDE JAVASCRIPT



i I Jr.i w
I I :h rA 1 J: ,' 1-,
ir iJ h[ji...r r i Core
JavaScript i *


f Iit -Ie4.
C lient-side. f '.' .Ii I





Server-side

I

SERVER-SI DE JAVASCRIPT


Figure 2-1. The JavaScript Language.



In a Web page, client-side JavaScript statements can respond to user events such

as mouse-clicks, form input, and page navigation. For example, if there is a form that

gathers users' input, a JavaScript function can be written to ensure that valid information

has been provided before the information is transmitted to a server-side program. If

invalid information is detected, an alert dialog box can be displayed to notify the user to











correct the entered data. This client-side data checking process reduces both network

traffic and browser response time [Net97].

Client-side JavaScript is an interpreted scripting language. JavaScript statements

are embedded in a pair of script tags (i.e., ) within an HTML

document. When a browser requests a page, the server sends the full content of the

document, including the HTML and JavaScript statements, through the network to the

browser. The browser then parses the page from top to bottom, resulting in the display of

the results of the HTML statements and the execution of the JavaScript statements.


Perl

Perl is short for "Practical Extraction and Report Language." It originated within

the Unix environment and was designed to assist programmers with common tasks. High

portability is one of Perl's important features. Besides UNIX and UNIX like systems, it

runs on various computers including the Amiga, the Atari ST, and Macintosh machines

as well as various operating systems including VMS, OS/2, MS/DOS, and Windows

[Sch97].

Perl is a one of the most widely used scripting languages. It features high-level

support for textual processing, regular expressions, file/directory manipulation, command

execution, networking, associative arrays, lists, and DBM access. It is the de facto

language for CGI programming [Quo99].

Perl is a compiled language as well as an interpreted language. It is a compiled

language because the Perl interpreter parses and compiles the entire program into an

internal format before executing. This compilation process shortens the program's

execution time thus enhances its performance. It's an interpreted language because there











is no object code produced by the Perl interpreter. As a result, Perl poses advantages from

both of these classes of languages [Sch97].

As mentioned above, Perl is the de facto language for CGI programming. Starting

with the 5.004 release, the CGI.pm module, which makes CGI programming easier, is

included in the Perl distribution. Functions such as parsing query strings and generating

HTML forms are provided by this module [Sch97].



Overview of Other Web-based Applications


In the past two years, several education-related Web-based applications have been

developed by students of the Computer and Information Science and Engineering

Department at the University of Florida. These applications include MAX, WET, and

WEX. The ultimate goal is to integrate all these systems into one which provides a

complete web-based educational environment.


MAX

The Message and Announcement Exchange (MAX) is a messaging system that

allows asynchronous communication between instructors and students via the Internet

[Hea99]. It is a Web-based application written in Perl. The system was created to

overcome communication problems between instructors and students. These problems

normally exist in large classes and distance education programs.

Instructors can use MAX to post announcements, and students can use MAX to

post queries to instructors or other students. Once the message is submitted, it is instantly

available for all the users, making near real-time communication possible. In addition,

instructors only need to answer a question once because all the students have the access











to the answer. HTML forms and Perl's CGI module are used to transmit and parse the

contents of a message, respectively. All messages are archived in a database to provide

asynchronous communication. It is possible for users to review messages that were

posted several days ago. Messages, sorted into topics and subtopics, are shown in an

organized manner. Thread discussions are performed within a subtopic.

MAX has a build-in security feature: only registered users can access the system.

Students can be assigned to different groups. This feature allows an instructor to restrict

students' information access. Instructors can also assign a set of permissions to students.

These permissions allow students to access the functions provided by MAX. Those

functions include adding a topic, subtopic, or message; posting an announcement; posting

anonymously; and using HTML in posts.

MAX is currently being used in many CISE classes.


WET

The Web Education Toolkit (WET) is an annotation system that allows instructors

and students to communicate through the sharing of annotations via the Internet [Jef99].

It is a Web-based application powered by a Java servlet.

Similar to the MAX, WET was created to address communication problems

between instructors and students. However, it does not facilitate the instructor-student

conversation directly. Rather, it allows instructors and students to interact by adding

annotations on web-based course materials. Those course materials are provided by

instructors, and could be in the form of text or images. WET's editing facility allows

instructors to control the layout and page design of the course materials.











WET has a system access control as well. Prospective user must register with the

system to gain access. Functions are provided for administrators to manage users.

Grouping users and granting them a set of permissions can be easily done.

Instructors have access to the course materials with annotations added by all

students. On the other hand, a student can only access his or her own annotated course

materials. If a student's annotations regarding a concept are not correct, instructors can

add annotations to correctly explain the concept. Instructors can also use annotations

added by students as class feedback to gain an overview on how students understand the

course materials. As a result, both instructors and students benefit from using the system.


WEX

WEX, theWeb-based Examination System, is an on-line examination system that

can generate tests. It also allows students to take tests via the Internet and evaluates the

tests automatically. It uses web browsers as the interface and was implemented using

Java Servlets and Java Database Connectivity (JDBC) [Fat99].

The system was created to overcome the difficulties of administrating

examinations within distance education programs. Students do not have to be present at a

certain place at a certain time to take a test. An Internet ready computer is sufficient for

students to take a test.

WEX selects questions randomly from an existing question databank when

generating tests. The selecting process is based on instructions given by the instructor

when designing a test. There are three types of question: multiple choice, true/false, and

formula based.

The authenticity process keeps unauthorized users from accessing the system.

Two types of interfaces are provided by the system. The first is for instructors. It allows











instructors to add and review questions in the question databank. It also allows instructors

to design and create tests. The other interface is for students. Students use this interface to

take tests online with WEX evaluating the tests, providing grades and correct answers to

students right after they completed their tests. This helps students improve their

knowledge of the material.


Chemistry Online Homework System

Chemistry Online Homework System is an online homework grading system

developed by two faculty members of the Department of Physical Sciences at the

Nicholls State University [JanOO]. It has similar features to the WEX. However, it

handles homework assignments instead of examinations. It uses pre-given aliases as

usernames to log in the system. No password is needed. Students can log into the system

to do homework assignments on-line. Two types of questions can be generated by the

system. One is multiple-choice questions and the other requires numerical answers. These

answers are then automatically graded by the system.



Summary


This chapter covered the technologies employed in the construction of SOGA,

including HTML, JavaScript, and Perl. HTML is a markup language used to indicate the

structure and format of a document on the World Wide Web. JavaScript can be used to

add interactivity to a Web site. Data entered in an HTML form can be checked by client-

side JavaScript functions before transmitting the data to the server. Perl is a combination

of a compiled and interpreted language used to generate dynamic contents of a web page.











The CGI.pm module in Perl provides many functions that make CGI programming an

easier task.

In addition, some education-related Web-based applications were discussed.

Students at University of Florida, in the Department of Computer and Information

Science and Engineering, created these applications. Both MAX and WET are

applications that facilitate communication between instructors and students. MAX

supports near real-time conversation between instructors and students. WET allows

instructors and students to communicate through sharing annotations. WEX is an on-line

examination system, which generates, administers, and evaluates tests automatically.

Chemistry Online Homework System is a system similar to WEX but it only manages

homework assignments.
















CHAPTER 3
SOGA OVERVIEW


This chapter provides a high-level overview of SOGA. It also serves as the

README file of the system providing guidance on how it is used. We begin with the

login process, and then discuss its various features from the point of view of a user.



The Login Process


When a user links to SOGA, the system performs a screen resolution check to

ensure that the resolution is set to 1024*768. This provides the best viewing for the user.

If the screen resolution is less than 1024*768, an alert box is displayed to advise the user

to change the screen resolution values.

Since SOGA is a Secure Online Grading Assistant, security is one of the key

issues. Each user must first log in before using the system. Figure 3-1 shows the Login

Screen.

To log in, users must identify their access level by checking one of the three radio

buttons and supply their username and password. By clicking on the "Login" button,

information provided by a user is passed to SOGA. Details about how the information is

passed and processed are given in the next chapter. The username and password are

matched against the values stored in SOGA. If the values do not match, an Invalid User

screen is displayed and the user cannot continue. The Invalid User Screen is shown in

Figure 3-2.













Eh EJ - IC h
A* i Rl d rl a ts ak
[. 1- ... ........... .. ..........................
Secure Oline Gniding Assistant




r LraLEr:





X. "J; *rr. r:













Figure 3-1. Login Screen



If a user is denied access, he or she is given a chance to go back to the Login

Screen by clicking on the "Try Again!" button (in Figure 3-2). The user can then re-check

his or her access level or re-enter his or her username and password. If a user is not a

registered user, the user can contact SOGA's administrator and ask for access to the

system by clicking on the e-mail link and sending an e-mail to the administrator. The

default access level in the Login Screen is that of a grader because graders are the most

frequent users.













M* &P NPI. r-- m. MOP
it nS r j-
ij -.- 1- 7-9-,~ ~


Ua


Access DMnWd


TP I
:.C-Lri m : N an
C~&r'Aikuamsnrl
C ng~Utr Lm~i ~Eu~2


Figure 3-2. Invalid User Screen




Access Levels


There are three access levels: administrator, instructor, and grader. The purpose of

having three access levels is to separate different functionality for different access levels'

users and to provide added security to the system. This functionality hides unnecessary

information from the users who need not to see it.



Administrator

The person who initially installs SOGA is the administrator. The administrator

has unrestricted access to the entire system. The role of the administrator is to perform


.o ,_ ._ --- !., ''- .











administrative activities such as adding a new user and setting up this user's access level,

username, and password.


Instructor

The instructor level of access is mainly for the class instructor. It is also

reasonable to give a class TA, whose job duty is handling all homework grading related

issues, this level of access. The role of the instructor is to monitor the grading progress.

The instructor has access to all the homework grading sheets that have been completed by

the graders. It is also the instructor's responsibility to send homework grades to the

students.


Grader

The grader level of access is the most restricted of the three levels. A grader can

only perform grading and re-grading operations on the homework that have been

assigned to him/her.



Administrator Menu


The administrator menu is the next screen displayed when a valid administrator

logs into SOGA. See Figure 3-3. This screen shows two buttons representing the two

available operations that an administrator can perform. The first button is "New

Homework." This is used to create the entire grading environment for the graders. No

grader can begin homework grading before this process is completed. And, this process

must be done for every homework assignment after collecting all students' homework.












The second button is "Add/Drop Users" and is used to modify the group profiles, which

contain all system users' usernames and passwords.

Wb PKat r,--. MRP

iJ' w .4C L __>I -r -. .. .- ,- .- .*]' 0

























Figure 3-3. Administrator Menu


New Homework

Figure 3-4 shows the New Homework Screen. There are three steps involved in

the process of creating the grading environment for any homework, as shown in the New

Homework Screen.

The first step is to place the homework tar-ball in the administrator's home

directory. The name of the homework tar-ball has the form of "hw??.tar.gz" where "?" is

a single wildcard character. This step has to be done manually by the SOGA













administrator because different instructors have different ways to collect the students'


homework.


M- P U Q- UP


.. 0 Lac*w|"i -- .i- -.. -,. -h .r,-.+,O, --' WiMd
Sslieps o create the gradlig envrainmienL
iStei pane te1 K l teriU x ltI a stM hD CIom tcery
Sto I: mide ho mharp-inc glisbS
I"M rLf yrel' iI irl Iti Ll I lr rE lirt I.I tbrf.W
L. lI r41 F r 11h sr J 1 a1 Mrfl
[LKI 1.,1 ,1 l E ItLh i d l W al >
Pi : Ir rh 4 J(ha lir
r:1.1 L dll 1pi

















(poi dd Finur s the multi-line text field a t g e s rer 'A
Iany grading criterion is compliant to this specific foat because it is used by the system



















to another screen to confirm that what have been entered are the new grading criteria. If


the administrator finds errors in the new grading criteria before performing step 3, he or
she can always go back to the New Homework Screen to modify it.
Figure 3-4. New Homework Screen



Next, the homework grading criteria are created. A sample grading criteria is


provided in the multi-line text field to show the correct format. It is very important that


any grading criterion is compliant to this specific format because it is used by the system


to determine how many grade fields are shown in the Grading Screen. The "Save" button


(in Figure 3-4) is used to save the text inside the multi-line text field and to bring the user


to another screen to confirm that what have been entered are the new grading criteria. If


the administrator finds errors in the new grading criteria before performing step 3, he or


she can always go back to the New Homework Screen to modify it.












The last step is to click on the "Do It!" button (in Figure 3-4), which commands

the system to perform a series of actions to create the grading environment. Those actions

include compiling and running all students' homework. Therefore, it takes some time

before the system responds to the administrator. Note that if either the grading criteria or

the homework tar-ball is not ready, the "Do It!" button (in Figure 3-4) will not be shown

in the New Homework Screen. After the system has performed all the actions to create

the grading environment, it shows a confirm screen to inform the administrator that the

grading environment has been established and the graders can begin their grading process.


4~CAL L4 *
VM3d OM Lmbhoap V 1610st NI


a
*7 rA, wMW


I-.j
0 %--


.. ,L C 1 ,.'


Figure 3-5. Profile Modification Screen


9. %_J4e(InCCrrl ~~llI~i UIFPir ;B1nrlII~PIYCC11~l.IiT
Icsrc- IA

4al IBllU
W-07c












i M., m is









I r 9 P M
















Figure 3-6. Instructor Menu



Add/Drop Users

After the "Add/Drop Users" button (in Figure 3-3) is clicked, the system takes the

administrator to the Profile Modification Screen, as shown in Figure 3-5. This screen

shows all three groups' profiles in three multi-line text fields. Each user occupies a single

line and each line consists of two strings separated by one or more spaces. The first string

is a user's username and the other string is that user's password. Adding a new line to a

group profile causes a new user to be added into the group. To delete a user, find the line

showing user's username and delete it. The administrator can also change a user's

password by simply modifying the specific group profile to which the user belong. After













any modifications on a group profile, the administrator must click on the "Modify" button


(in Figure 3-5) to make the modifications effective.




Instructor Menu



The Instructor Menu, as shown in Figure 3-6, is displayed when a user with an


instructor's level access logs into SOGA successfully. The user is prompt to click on one


of the homework assignment buttons to check that specific homework assignment's


grading progress.


Elb 1I II, .i .W uP.

.. al- ... --,.a ,' mo a e
- J l 11 Ll. l1 -- ..dj-i ,


B
-;rHwMi


Graden for jiwlmll


CragJ-t aub


ie-mam A"e lia
9I rzi frn n Iuri h m i na -rrub0 I
*S pu" prlrsi rati dri





vWAen IsIwI

dr r l l l I n


*W.s- add dim 1 .






EItwirt rdtl rsM rdn l in Its] usial

El14n ': a |i .1; S 3dzpLnr
Vf-Vf D-rii 4


-& L. .i;, 1 2 '.


Figure 3-7. All Grades Screen (upper portion)













There are only two homework buttons in Figure 3-6. The number of the buttons

increases by one every time the SOGA administrator creates a grading environment for a

new homework assignment.

After the user clicks on a homework button, an All Grades Screen is invoked. The

All Grades Screen is shown in Figure 3-7 and Figure 3-8. In this screen, the criteria used

by graders to grade this homework are also displayed on the top. Below that are the

grading result sections of all graders. Horizontal bars are used to separate different

grading result sections. Each grading result section contains a "Send Grades" button (in

Figure 3-7), the name of the grader who graded the section, a detailed grade table, and a

percentage of assignments that have been graded.





*--i ----- W------------------I'm------- ----
- I .S . .. ~mlH r ~, wq -

1Iq r jira J


iW n I 1




= w i *

Mmal rmi raid wh. exh ana C rm r a












F ----~[~ ; ** : . i '1 i A


Figure 3-8. All Grades Screen (lower portion)















The "Send Grades" button (in Figure 3-7) is used to send an e-mail containing

detailed individual grade information to each of the students listed in the grade table. The

reason for having a "Send Grades" button (in Figure 3-7) for each grading result section

is that sometimes a grader may be far behind other graders in the grading process. In this

situation, the instructor has the choice to first send the grades to the students who are in

the completed sections. Note that SOGA keeps track of which students have been sent the

grade e-mail. After the grader who was behind schedule has completed his grading

section, the instructor can click on the "Send Grades" button (in Figure 3-7) again and

this time the system only sends grade e-mails to those students who have not been sent

prior grade e-mails.


Mbil 3I 4M LmMl I

j S .. e ..- m i -- 0 q- *-j.-Ii I Ijy i m



si I x
- ,'L ,,.. . W I I, .. .. .. .. ... l f3 ... .. .. I ) .,-14 1.x




I*;- : .n .v-, I ,


Wi* I I As 6 :a
flHu e.' r











li r. 4'i |ri
rfll 2


Figure 3-9. Send Grades Screen















Figure 3-9 shows the Send Grades Screen. This screen displays all the grade

messages that have been sent to students. A grade message is consist of detailed grade

and grading criteria. There is a note at the bottom of the screen that indicates which

students have not been sent a grade e-mail.


I" -* b k%- D- MOP
L r a I
NhW -=0 k DMEO OM
-A L&~LM.SSIH r -rr- -' a'. -wi. -.r *-


B
IrrwIM-


.1Ttp crlp 1 mq~It wi rp




A~rIA IUI


Figure 3-10. Grader Menu




Grader Menu


The Grader Menu is the screen that a grader sees after logging in. This screen

contains several homework buttons similar to those shown in the Instructor Menu (Figure

3-6). Each homework button corresponds to the homework assignment shown on the











button. See Figure 3-10. All graders see this screen. There is no additional information

available to the graders about which portion of homework he or she will be grading. But

graders do get their portion of the homework assignments that were previously assigned

to them after they select a homework button.


The Grading Screen

After the homework assignment has been selected, the Grading Screen is

displayed. See Figure 3-11. On top of the Grading Screen is a small pop-up criteria

window. The contents of the criteria window are dynamic, displaying the criteria

corresponding to the current homework. The criteria consist of two parts. The first part is

general information, including total points for the homework and the due date. The

second part is the grading rules. Each rule specifies its requirements and the number of

points a homework assignment could get if the requirements are met.


The Grading Screen consists of a "Criteria" button, a homework information line,

two large multi-line text fields, a number of grade fields, a comment field, a save button,

and an exit button.

The criteria button can be used to re-show the criteria window if the grader has

closed the window.

The homework information line consists of two strings separated by a "@" sign.

The first string is the class account name of the homework being graded. This can be

used by a grader to identify which student's homework is being grading. The second

string is the homework submission time, i.e., the timestamp of the homework. This is

used to compare with the due day specified in the homework grading criteria to determine

whether a late penalty should be applied.














EI ] uY in *I *.I


" -.. .. -- I--- .| ... rh... ,.. ...-.J f
S. r 16. FO DEMa *









i I LJ I 'UL
I ..... ..I q.: ..







.r It b s t h gr ar. L a. sr c l t s
IlL. I'..J l ..i. I l" I l I
o ,.ir lq- .r r i rg 4-nr-e

















E i I

,'.r'.TE:rC-:u :, :Fr, i'L.- i ii/. u r
A.L-ifrji itrr r .- -1



Figure 3-1 1. Grading Screen



The upper multi-line text field, called the Code Field, displays the source code of


the student's homework. It has two scroll bars so the grader can scroll the source code, up


or down, left or right when necessary.


The lower multi-line text field, called the Output Field, displays the output of the


program or the error messages returned by the compiler while compiling the source code.


It also has two scroll bars.


The grade fields and the comment field are the graders' responsibility. All grade


fields have to be filled while the comment filed is optional. The number of grade fields


corresponds to the number of rules in the grading criteria. The field length of a grade











field is five, so a grade field can be filled with four digits and a decimal point or a minus

sign, three digits, and a decimal point.

The comment field is a long single lined text field. Although its length on the

screen is sixty characters, graders can put as many characters as they want into the

comment field. Only one comment field exists in any homework.

The "Save Grades" button (in Figure 3-11) is used to save the grades and

comments. This button also triggers two other actions when it is selected. The first action

is a value check. SOGA checks the values in all grade fields. If one or more grade fields

contain no value, then SOGA redisplays the same source code and program output in the

Grading Screen. If all the grade fields have a value, then SOGA saves the grades and

comments into a file and performs the second action -- retrieving the next student's

source code and program output, and displays them in the Grading Screen. If no more

homework needs to be graded, the system simply displays a message in the Code Field

telling the grader that the entire grading process has been completed and clicking on the

"Save Grades" button will lead to a Done Grading Screen. See Figure 3-12.

There are two ways to exit the Grading Screen to proceed to the Done Grading

Screen. The first has been mentioned above: click on the "Save Grades" button (in Figure

3-11) after finishing the entire grading process. The second is simply by clicking on the

"Exit" button. If there are some values in the grade fields and comment field, clicking on

the "Exit" button causes SOGA to discard those values.













The Done Grading Screen

The Done Grading Screen shows a summary of the grading process and provides

the re-grade function to the graders. The grading criteria are displayed in the upper

portion of this Screen for reference purposes.

Below the grading criteria is a pull down menu and a "Re-grade" button (in

Figure 3-11). Graders choose a student from the pull down menu and click on the "Re-

grade" button to re-grade the student's homework. The pull down menu only shows the

account names of those students who have already been graded. When a grader chooses

to re-grade a student's homework, the "Re-grade" button brings the grader to a Re-grade

Screen.


B 1l Hk- & .f,-l UW

.I r $ S B

IMr inL' r fir iwim
-. I u mmI ,n ,<..u:i u


CrGrad Cifor i


u ; lrr ibnl r u: r











44 A 11 1II kb mvpnz



-z 2 I 4."* : W- 4aF .pe .Cr
Bihiae tj l mi Z l ra ) riea




3 M i 1-.il Lu l Blr



Cspr4I4tWf Szw EKumaxSih~
Aflrili nrivrd


Figure 3-12. Done Grading Screen











At the bottom of the Done Grading Screen is a grade summary table. The grade

summary table shows detailed grades of all students' homework that have been graded. If

a student obtains a minus score in the total field, then the system changes the score to

zero and uses a red color font to indicate that the system has modified the score.


The Re-grading Screen

The Re-grade Screen looks identical to the Grading Screen (shown in Figure 3-

11). SOGA extracts the selected student's source code and program's output, displaying

them in the Code Field and the Output Field respectively. After a grader fills the grade

fields, the grader can click on the "Save Grades" (in Figure 3-11) to save the new grades

or the "Exit" button (in Figure 3-11) to discard those values. Both buttons lead the user

back to the Done Grading Screen. If the grader has chosen to save new grades, the system

displays the updated grades in the grade table.

Although the Re-grade Screen and the Grading Screen look similar, the actions

triggered by the "Save Grades" buttons are not entirely the same. The first action that the

system performs is the grade fields value check, which is identical to the first action of

the Grading Screen. If one or more fields contain no value, then no grade update is done.

The second action triggered by the button is the e-mail action. The system checks

the e-mail records and determines whether the student's grade has been sent or not. If the

grades have been sent, then the system sends a new grade e-mail to the student. The

context of the message is shown on the top portion of the Done Grading Screen. The

Done Grading Screen is shown in Figure 3-12.

If a new grade e-mail is sent in the second action, then the third action is

performed. This action updates the total score stored in the total grade file. The total












grade file is a file created during the e-mail sending process initiated by an instructor. The

number of total grade files corresponds to the number of graders. Each file contains a

distinct portion of the final grading results. An instructor can either collect the total grade

files after each assignment is graded or collect all of the grade files at the end of a

semester.


EI 60 tk% & D--A MOP
Nmw 60 Lw bmwq Fm &M* om
k P a h..
-" *Jrlslui L L S|IHr -.. ...j-,*. .,..r : br.b,.


U
~U rmr.wd


=f^
You havr irIr loelr oul.
CiUd below to return to (ii dLais tb.npagR.

(TGS 3460


&.I-' I .1.

Figure 3-13. Logout Screen




Logout Screen


SOGA provides a logout operation by displaying a "Log Out" button at the

bottom of some screens. When a user clicks on the button, the system closes the current

working window, which releases all resources, and opens up a new window displaying











the Logout Screen. In this screen, users are given a link to the class web page. The

Logout Screen is shown in Figure 3-13.


Summary


This chapter provided an overview of SOGA from the user's perspective. It began with

an overview of the login process. In addition, all of the features available for all three

different access level users were discussed. This discussion included options and button

functions in every screen. The next chapter discusses the internal implementation of the

SOGA.
















CHAPTER 4
IMPLEMENTATION DETAILS


This chapter covers the underlying design and implementation details of SOGA. It

discusses in detail the various methods used in its construction.

The chapter begins with a discussion of SOGA's installation process. This is

followed by a discussion on how HTML code can be embedded in Perl, and how HTML

forms can be used to pass information from one web page to another. Finally, other topics

such as query string parsing, JavaScript, data storage, and Perl processes are covered.

SOGA is created for CISE programming classes. To illustrate the implementation

details, the target class has been set to CGS3460, Programming using C.



SOGA's Installation Process


An installation script is used to install SOGA into a CISE user account. The user

performing the installation should be the administrator of the system. The installation

process consists of a series of system environment checks and some interactions with the

person who is performing the installation. To ensure successful installation, both the

SOGA installation script and the SOGA tar-ball must be present in the user's home

directory. The SOGA tar-ball is a tar file containing Perl scripts, html files and text files,

which create SOGA's functionality.

This script first checks whether the SOGA tar-ball is present. If the script cannot

find the tar-ball, it produces an error message and the installation process is abort. If the











tar-ball is present, the script then un-tars the tar-ball and places all files in their correct

directories. Note that most of the Perl scripts of SOGA reside in the cgi-bin directory. It

is strongly suggested that the SOGA administrator backup all the pre-existing files in the

directory before installing SOGA.

Next, the script prompts the installer to enter the administrator's username and

password. This information is used to create the administrator's profile, which allows the

administrator to log into the system when it is up and running. This last step concludes

the installation process.



HTML Forms


HTML forms are used to pass information supplied by users from one web page

to another. There are three entities involved in this process: a web browser, a web server,

and a CGI application. Figure 4-1 shows the relationships between these three entities.

web browser web server CGI application











Figure 4-1. Form Interaction Overview


In Figure 4-1, after a user filled out and submitted a form, the web server passes

the information supplied by the user to a CGI application and waits for the output. Next,

the CGI application returns the output to the web server after processed the information.












Finally, the web server downloads the output to the web browser that sent the form. The

output could contain another form element.

HTML forms are also used to construct user interfaces. User interfaces include

radio buttons, regular buttons, single line text fields, multi-line text fields, and pull down

menus, etc. This section discusses methods used to create the user interface. In addition,

the acquisition of the data entered by users is also discussed.




Secure Online Grading Assistant


METHOD=" POST">




Figure 4-2. Form Syntax


HTML Form Syntax

Figure 4-2 shows the syntax of a form element in an HTML file. A form element

is constructed using two HTML tags, namely
and
. There are two

attributes of the form element specified in the example. The ACTION attribute is used to

indicate the address of a program to be executed. In SOGA, the programs invoked by the

forms are CGI programs written in Perl. The METHOD attribute is used to specify how

the form contents should be sent to the CGI program specified by the ACTION attribute.

There are two possible values for the METHOD attribute, i.e., GET and POST. The

POST method provides higher security than the GET method. This is because when

passing information to a CGI program, the contents appear in the URL field of a browser











if the GET method is used [Pow98]. To achieve higher security, SOGA uses the POST

method in all HTML form elements.

To control the state of a form, form controls must be used. The most frequently

used form controls in SOGA are the element and .

Combined with the HTML code given in Figure 4-2, this example displays a five rows

sixty characters each multi-line text field with two lines of string. See Figure 4-4.


10 0-- am D&W P d ar m

.i t 4 h i -c -- P ,, . ..... -,, j
A -. -!' l<3n i-- ig Ff t' Y4 Vd--- I"--0--o-- "---',


- ib oW %.A*













3' 61 aE J. a 4a
10 "
P40bmmA h . L
A_ _P91K N0 tfV-A mddJ0Obd Mo


- -


- b i. J. A*


Figure 4-4. A Multi-line Text Field.


Perl and HTML

Except for the Login Screen and the Logout Screen, all screens seen by users are

dynamic pages generated by Perl. Figure 4-5 shows an example of how to embed HTML

code in Perl.

In this example, the print function is the only function called. Combined with a

"here document" and the "end token," a section of HTML code is inserted as it would

appear in an HTML file without any modification. The "here document" and the "end

token" in this example are "<
The "end token" must be placed alone at the start of the line. Otherwise, the Perl

interpreter would not be able to match the "here document" and the "end token" correctly.












The "here document" is constructed by placing two less-than signs in front of the "end

token." As a result, the HTML code inserted in between is quoted as the argument of the

print function called.

#!/user/local/bin/perl
print < Content-type: text/html



Secure Online Grading Assistant


Hello world!


End of example

Figure 4-5. Using Perl to Generate HTML


The Content-type, specified in the line immediately following the print statement,

must be specified to the value of text/html to generate correct HTML output. A blank line

follows the Content-type specification is necessary to avoid errors when executing this

Perl script. When a web browser requests this document, the Perl interpreter executes this

script and returns the results, i.e., HTML code, back to the web browser. This example

displays string "Hello world" in the browser.


Generating Buttons on the Fly

The number of form elements or form control elements in a web page is fixed if

the web page was generated by a plain HTML file. On the other hand, with HTML code

embedded in Perl, the number of both elements mentioned above are determined on the

fly. Dynamic contents of a web page can be generated easily. Figure 4-6 shows an

example of generating buttons on the fly.











sub instructor_page {
print "Instructor $username login OK!
";
print "Click on a button to check the
grades...
" ;
while( $hwdir = shift(@ls) )
print <

VALUE= $username>


VALUE= $hwdir>

instructor button
}
}

Figure 4-6. Multiple Print Functions


The first line specifies the function name, "instructorpage." The second and third

lines generate information about an instructor. The @ls array in the next line holds sub-

directory names residing in directory cgs3460. The WHILE statement uses it as an index

to generate HTML form elements. Therefore, if the @ls array has two elements, namely

hwOl and hw02, the function above generates two buttons with the labels of hwOl and

hw02. The upper portion of Figure 3-6 in Chapter 3 shows the results of this function call.

Parsing the Ouery String

When an HTML form sends its contents to a CGI program, it really sends a string.

The sting is structured using "=" to separate names and their values, and "&" to separate

one name-value pair from another. This structured string is called the query string. A

query string has the syntax similar to the following:

username=schung&password=schungpass&action=0.











To obtain values from a query string, the query string must be parsed. Perl's CGI

module provides an intuitive way to perform this parsing. Figure 4-7 shows an example

of invoking the CGI module and parsing a query string.

use CGI qw(:standard);
$username = param("username");
$action = param("action");
$hwdir = param("hwdir");
$hw = param("hw");

Figure 4-7. Query String Parsing


The first line invokes the CGI module. This is followed by calls to the param

function to obtain values from their corresponding name parameters. The query string is

parsed by the param function and the values are assigned to the given variables. Given a

query string:

username=john&action=0&hwdir=cgs3460&hw=hw01,

variable $username, $action, $hwdir, and $hw get the value of "john," "0," "cgs3460,"

and "hwOl" assigned to them respectively.



JavaScript


JavaScript is used in various places within SOGA to provide users with easy to

use, intuitive functionality. Therefore, a user must use a browser that supports JavaScript

and must enable JavaScript in their web browser in order to benefit from it.

In a normal HTML web page, JavaScript is an add-on function that can perform

specific tasks. The tags are used to incorporate JavaScript

into an HTML page where actual JavaScript code is inserted between the two tags.

Because some browsers do not support JavaScript, they do not recognize these two tags











and the code placed between them. Therefore, JavaScript must be put into HTML

comment to avoid potential browser confusion.

#!/local/bin/perl
print "Content-type:text/html\n\n";
print "Secure Online Grading<br /> Assistant";
print "";
print<

onClick= "closeWindow() ">

script
print "";

Figure 4-8. JavaScript Logout Button


Like HTML code, JavaScript is embedded within a Perl script in a similar manner.

Figure 4-8 shows how this can be done. It also shows how JavaScript function can be

used by an HTML form element. The final result of this example is a "Logout" button

that triggers the logout action when clicked.

In Figure 4-8, the first 4 lines generate the HTML header and set the color of the

body background to white. The next line is a call to the print function, which generates a

section of JavaScript code and an HTML form. The JavaScript code begins with the