photoroster and attendance

We have a page of students for each class.  It is currently done in asp/vbscript, although that could change.  Boss wants to turn this into an attendance form.  Click on the student image and mark them as present/absent.  I initially proposed a button below each image and a database to  update, but he seems to want a more intuitive graphic interface.

OK – i created a png image.  It is blank.  Another image says “present” on the bottom and a third says “absent” with an ‘X’ on it.  On my test page (all html coded), i wrapped a form around the table of images.  Using css positioning, i overlay each student image with another image – the blank.png.  If you click on the face,  you are actually clicking on the blank.png.  In that case, use javascript to change the source  of the image from ‘nothing.png’ to ‘present.png’.  The image on the page immediately updates.  If  you click again, you toggle the src from ‘present.png’ to ‘absent.png’ and if again back to ‘nothing.png’.  

So you can now look at the images, determine who is present and who is absent, and mark them so on the page by clicking.  How do we encode this information and put it into a form?  The action of the form is to post to a datahandler that will take the form information (the day of the attendance, the name of the class/section and perhaps the name of the instructor?) and write that to the database.  On the form, each student image has an source.  That same source, minus the file type extension (image.jpg), is used as an ID for the blank image and the blank image is given a class of attendance.  

On the page, in addition to input items for the course, date, et al., there is a hidden input item, with the same ID as the blank image (with ID appended to the name), and when you change the src of the ID by clicking on it and changing the source, the value of the hidden ID is changed from ‘nothing’ to ‘present’ and then to ‘absent’.

The values of the hidden items could be submitted directly, but we don’t know how many of them we are (which we COULD get from the request object).  Instead, i decided to put all the ‘attendance’ names into a collection, and write the ‘ID|value’ into an array item: “lkerardiID | present”.  This is attached to yet another hidden input, (i may not need all these inputs) and submitted when the form is submitted.  

The data handler will get the array, separate it, write a set of SQL insert statements and update the database.

The NEXT issue is to move the code into the original form, and then to do something to get useful reports out of the database.  

This entry was posted in Uncategorized. Bookmark the permalink.