Displaying a student's mark in a static webpage

A student's mark can be displayed on a webpage using only client side scripting. The idea is that the data for all the students is downloaded to the student's machine with all student IDs hashed, and then when the student enters her ID it is hashed using client side scripting (javascript) and the hash is compared to the list of hashed IDs to locate the student's mark.

The same method can be used to display any kind of indexed data where the viewer has to know the index to get the matching data, but the whole dataset without the matching indices need not be kept secret from the viewer. One important thing to keep in mind is that the list of marks is accessible on the client. I usually order the data in ascending order of marks so that the order doesn't reveal any data about the IDs.

The following instructions are for a minimal setup that puts in a webpage a single input box where the student can enter an ID number (or any string) and a button to submit a query that replaces the screen by a very simple screen that shows the ID and the mark (or "mark not found").

Note: This is based on a javascript implementation of the MD5 function which is © 1998 - 2005 Paul Johnston, distributed under the BSD License. All files directly linked from this page and residing in the same directory as this page are © 2006 Ofer Hadas (myself) and are hereby put in the public domain.

Instructions

  1. Using a text editor create a file named rawdata.js containing two arrays named "tz" and "marks". One contains the students' IDs and the other contains their marks, in matching order. It should look like this:
    tz = [
    "123456789",
    "543698745",
    "888888888",
    "111111111"
    ];

    marks= [100,86,57,37];
  2. When the file is ready follow this link that leads to the file named "tzencrypt.html" that will show javascript code defining two arrays like shown above, but with "tz" replaced by "tzenc"—the same student IDs that have been hashed (using MD5). It should look like this:
    tzenc = [
    "25f9e794323b453885f5181f1b624d0b",
    "e8a04e3754fc2a673931e317ee19f4f4",
    "134fb0bf3bdd54ee9098f4cbc4351b9a",
    "bbb8aae57c104cda40c93843ad5e6db8",
    ];
    marks = [
    "100",
    "86",
    "57",
    "37",
    ];
  3. Copy the text produced and paste it in a text editor and save it as "encdata.js".
  4. Create your webpage. The head section should include the following lines:
    <script type="text/javascript" src="md5.js"></script>
    <script type="text/javascript" src="encdata.js"></script>
    <script type="text/javascript" src="showmark.js"></scriptt>
    and the body should contain the following where you want to show the controls that the student will use to get her mark:
    <script type="text/javascript"> tzentryhere(); </script>
    The file "showmark.html" shows a minimal example.
  5. Together with your webpage put in the same directory on the web server the following files:
  6. That's it!