How can I store user feedback related to any part of a web page?

Question

I would like users to be able to double click anywhere on the screen to display a form that allows submission of feedback about that very spot.

I can think of 2 solutions:

1. Store X,Y coordinates. Had to rule this out since X,Y coordinates aren't supported on all browsers.

2. Use Jquery to bind an exhaustive list of html entities to a dblClick event like this:

   $(document).ready(function() {
   $("p,label,input,textarea").bind("dblclick", function(e) {
    $("#feedback_form").show();
   });
   

   });

So, in the example above, when any p, label, input, or textarea is double clicked, the feedback form will show (Code to pass the ID of the item being double clicked isn't included in my example for simplicity).

So 2 isn't perfect, but appears it will do the trick for any feedback on a list of supported html entities.

Is there some simpler solution I'm overlooking?

Also, if I go with 2, is double click the best method for engaging this feedback form, or would you recommend some other event?

Answer 1

you should be able to write/acquire a hit-test function to see what DOM element(s) are under the mouse cursor when it is double-clicked, and then associate the comments/feedback text with the ID of the selected element

this assumes that all of your DOM elements have unique IDs

(and that your users know that they can do this!)

Answer 2

I would recommend not having any spot on the site commentable, but instead allow specific elements to be commented on. For instance, if its a blog, you could use each paragraph as an element that could be commented on. If its a code repository, then comments could be added to individual lines of code.

Have a look at how The Django Book does commenting on paragraphs.

Answer 3

I am hoping most of your layout is using <div> and <table> tags. As Steven suggested, have unique id's associated with each of your block elements or any other elements that are an integral part of your webpage (maybe images).

Have an onclick event assoicated with the block/layout element to open up another window or a javascript pop-up, capture the element id and have a form on the pop-up where the user can submit their feedback.

I'd also suggest an onmouseover even associated with all these elements as well that display a tooltip indicating that the user can leave feedback about that layout widget/element.

Answer 4

Double-click is bad, because in most browsers you can select words by double-clicking on them.

Instead there should be special places on page where you could click to give feedback. See Soviut's answer for a good example.

Answer 5

You could do something like this:

The blocks that you would like to be commented on have a class of 'commentable' and have an id.
The script below is an outline that works for W3C compliant browsers, ie would need to use attachEvent and the global event object.
Propagation of the event is not cancelled so commentable blocks within commentable blocks would would fire the event once each.
The default action of the event is alse not cancelled, so text that is double clicked on will still be highlighted - perhaps your dialog could have a 'click escape to cancel' action?

function CommentDialog() {
    //this is a fake CommentDialog object constructor
    this.display = function( id ) {
        alert( 'you want to comment on the block with id: '+id+', which is outlined in red' );
    } 
}



window.addEventListener( 'dblclick', function(e){ 
    var target = e.target;
    while( /commentable/.test( target.className ) == false ) {
        // if we've hit the body tag then bomb out
        if( target == document.body ) {
            return;
        }
        target = target.parentNode;
    }
    target.style.border = '1px solid red';
    var cmt = new CommentDialog();
    cmt.display( target.id );
 }, false );

Answer 6

I kinda like the 2nd solution, but i'd attach the function not to some html entities, but to a well defined div something like:

$(document).ready(function() {
    $("div .commentable").each().bind("dblclick", function(e) {
        $("#feedback_form").show();
});
});

So you just need to wrap all the elements you want to be commentable in <div class="commentable"> .. </div>

With the first solution, if you want the feedback in every place of your page, not only specified elements, JQuery can help you

jQuery(document).ready(function(){
   $().click(function(e){
      alert(e.pageX +', '+ e.pageY);
   }); 
})

See the JQuery doc for more info.