Adding Marks to Articles on Your Site

Case study

The idea

This is used by social networking websites, and collaborative site of news, to allow user to choose the best articles. Articles that gain enough votes are moved to the main page.
We will study how to implement this system with some JavaScript functions and a stylesheet.
To do that, we have to store the number of votes for the page into a file, whose name is that of the page with the .dat extension.

The stylesheet

The style define the image that holds the number of clicks:

.markstyle
{
  font-family: "Trebuchet MS", Arial, sans;
  font-size: 40px;
  border-top:2px solid #0C0;
  border-left:2px solid #0C0;
  border-right:2px solid #060;
  border-bottom:2px solid #060;
  background-color:#0B0;
  text-align:center;
  width:64px;
  color:#FFF;
  padding-left:8px;
  padding-right:8px;
}

It is easy to change colors, font, size...

The JavaScript program

Some functions are required to retrieve the number of votes from a file and to save it, and also to display it.

function read(url, fun, element)

Ajax function for reading the previous count. It is called at load of the page that holds the article to note, with the name of the counter, the initialize function as callback and the element of the page for displaying.

function writeFile(url)

The writeFile completes the Ajax library and allows to send data to a PHP script that stores them into a file.

function initialize(value, element)

It is a callback, a function given as parameter of an Ajax function that read the data file. In this demo the file holds only the number of clicks for this page.

function display(value, element)

This function is called by the mark function, and the initialize callback to display the score.
The number of votes is limited to 99 in this demo.

function mark(element)

The main function, is is called when one clicks on the image. It increments the number display and uses Ajax to send the name of the file that stores the count for the page. Calls also the display function.

window.onload=function()
{
  dataURL = changeExtension(location.href, ".ctr");
  var element = document.getElementById("mark");
  read(dataURL, initialize, element);
}

When the article is displayed, the image has to be displayed with the number of clicks previously gained. This is accomplished by the window's onload event, to which is assigned the function above that makes use of Ajax to retrieve the data.
DataURL is the name of the file that stores the number of clicks for a page. The name of this data file is created from the name of the page that calls the function.

Preventing multiple votes

To prevent a same reader to add more than a vote for the article you can:

1. Check for the IP addresse, add it to a list and ignore the click from the same IP address.
   But the drawback is that dynamic addresses are share by multiple users.
2. Install a cookies on the user's machine.
   Here, the drawback is that you have to create cookies for each articles and each visitors that click on it, too bad.
3. Require the user to register before to mark the article. This may also require to use cookies to prevent multiple registration, but only one for each registered user. Then you can manage the list of marks for each user.

Requirements

To run the demo or to use the system, you need for:
- The demo-mark.html template page.
- The mark.css stylesheet.
- The mark.js JavaScript file.
- A PHP script, demo-mark-store.php for updating the counter. This script may be developed to add authentification.
- And the Ajax library...

Download

• All the required files are included into the marks.zip archive.