Rate pictures using a Survey and jQuery

Comments (30) | Share

Here’s the scenario:

You have a handful of images which you need people to rate. Unlike SharePoint 2010, 2007 does not offer a rating control so you’ll either have to purchase a commercial product or install the open source alternative or even develop something custom. All these are possible if the server ‘belongs’ to your team/department. But (like me) if the SharePoint farm is owned by some other team and is utilized by the whole company for day-to-day activates then admins would frown on such requests.

Here how you do it with any code or installs (you don't even need designer):

1. Download the jQuery library and store it on your site.
2. Create a normal SharePoint Survey
3. For the ‘Question’ textbox type something like ‘Please rate the below pictures’
4. Next, select ‘Rating Scale (a matrix of choices or a Likert scale)’ as the type of answer
5. In the subquestion textbox type the url’s of all the pictures you want to be shown
6. The ‘Number Range’ is the rating scale. Adjust it to suit your needs.
7. Remove the text in ‘Range Text’
8. Uncheck ‘Show N/A option’
9. Click Finish

The Survey is now created. Next navigate to the ‘Respond to this Survey’ screen

1. Append the url with the following: &PageView=Shared&ToolPaneView=2
2. This will cause the ‘Add Web Part’ tool pane to show up.
3. Add  a CEWP to the page
4. Go to the webpart properties and click the source button
5. Add the following:

// make sure this points to the correct place where the jQuery file is stored on the server
<script type="text/javascript" src="http://serverX/documents/jquery-1.4.2.min.js"></script>

<script>
$(document).ready(function() {
    $("th.ms-gridT1").each(function(index) {  
   var imgHtml = "<div><img width='200'  src='" + $(this).text() +"'/>";

  $(this).html(imgHtml);
  });


});
</script>

you should be all set now…

Good Luck!