Collecting survey data using js

rnd me · 08-22-2011, 01:59 AM

Without a personal backend, most coders think it;'s impossible to do any kind of data collection. Luckily, a few free major webservices allow this capability from any page, even a blogger, dreamweaver, or word-press site...

the concept is relatively simple.

to customize, simply create the forms, publish them, and change the urls and html building section of the code below:

The page uses completely free tools to let anyone share information with others from your website. Using Google forms to collect info, the data is fetched to the webpage using YQL to translate a CSV export of the data into a javascript function call. By putting together Forms, Spreadsheets, and YQL, we create a simple and powerful way to collect and distribute all kinds of data, all without cost.

ref:
YQL console
Google Spreadsheet (from Google Forms)

live demo

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<title>comments without your own server: a free webservice demo</title>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	
</head>
<body>
  



<h3>About this page </h3>	
<p>This page uses completely free tools to let anyone share information with others from your website. Using Google forms to collect info, the data is fetched to the webpage using YQL to translate a CSV export of the data into a javascript function call. By putting together Forms, Spreadsheets, and YQL, we create a simple and powerful way to collect and distribute all kinds of data, all without cost.</p>
	
<b>See also:</b>
  
<a href='href=http://developer.yahoo.com/yql/console/#h=select%20*%20from%20csv%20where%20url%3D%27https%3A//docs.google.com/spreadsheet/pub%3Fkey%3D0Aptc98y5K95RdGdOaGdubFk2YWh5ZEkxVGNpeFF4clE%26output%3Dcsv%27'>YQL console</a> &nbsp;

<a href='https://spreadsheets.google.com/spreadsheet/ccc?key=0Aptc98y5K95RdGdOaGdubFk2YWh5ZEkxVGNpeFF4clE&hl=en_US'>Google Spreadsheet (from Google Forms)</a> .


<hr />	

<!-- pasted from ("More Actions">embed ) controls in the google form editor:  -->
<iframe src="https://spreadsheets.google.com/spreadsheet/embeddedform?formkey=dGdOaGdubFk2YWh5ZEkxVGNpeFF4clE6MQ" width="760" height="922" frameborder="0" marginheight="0" marginwidth="0">Loading...</iframe>



<h3>Responses</h3>

<div id='comments'></div>	


<script type='text/javascript'>


//IE7+8 compat code (feel free to remove if not needed) ##########
if(![].map){Array.prototype.map= function map(fun){var i=0,len=this.length,res=[],thisp=arguments[1];for(i;i<len;i++){
	if(i in this){res[i]=fun.call(thisp,this[i],i,this);}}return res;}
}if (![].filter) {Array.prototype.filter = function (fun) {var len = this.length, res = new Array,  thisp = arguments[1];for (var i = 0; i < len; i++) {if (i in this) {var val = this[i];if (fun.call(thisp, val, i, this)) {res.push(val);}}}return res;};}
Object.keys=Object.keys||function keys(ob){var r=[];var i=0;for(var z in ob){if(ob.hasOwnProperty(z)){r[i++]=z;}}return r;};
//end IE7+8 compat code ############



function getCSV(url, cb){//uses YQL to grab CSV data from a url and pass it to the callback as an array of objects

	function addScript(u){ 
		var sc2=document.createElement('script'); 
		sc2.src=u;  
		document.getElementsByTagName('head')[0].appendChild(sc2);
	} //end addScript()


	function yqlCsvToArrayOfObjects(data){
	   var head=data[0];
	   data=data.slice(1).map(function(a){
	     var ob={};
	     Object.keys(a).map(function(aa){
	         ob[head[aa]]=a[aa];
	     }); return ob;
	  });
	 return data
	}//end yqlCsvToArrayOfObjects()


  var key=url.replace(/\W/g,"");

  getCSV[key]=function generatedCallback(data){ cb(yqlCsvToArrayOfObjects(data.query.results.row));};

  return addScript( 
	"http://query.yahooapis.com/v1/public/yql?q=select%20*%20from%20csv%20where%20url%3D'"+
	encodeURIComponent(url)+
	"'&format=json&callback=getCSV."+key	
   );//end addScript call
}//end getCSV()





// to publish survey results:  Make a google form, 'see the responses as a spreadsheet', and share and publish from the spreadsheet editor (top-right corner)
// now use some custom html generating code from a custom form identified by a custom url:


//url of csv data from a shared and published Google Form:
var myCsvUrl = "https://docs.google.com/spreadsheet/pub?key=0Aptc98y5K95RdGdOaGdubFk2YWh5ZEkxVGNpeFF4clE&output=csv";


function demoCB(data){  //callback function for incoming csv data. turns the data into HTML

  //build and show html version of submitted data:
  document.getElementById("comments").innerHTML=data.map(function(item){
    return item.Timestamp.italics() +": "+ item["What do you think?"];
  }).join("<br />");

}//end demoCB()


//apply the callback to the data at myCsvUrl:
getCSV(myCsvUrl, demoCB);

</script>
</body>
</html>

rnd me · 08-22-2011, 08:34 PM

How about a managed-content site with back-end content editing and editor-less page expansion?

using a spreadsheet with a few simple columns (page, title, content, image) each row defines a page.

adding a new row to the spreadsheet will create a new page, and update the nav to allow access to the new page.

you can't edit this demo's content like the last, but it's simple and free to create your own google spreadsheet and update the URL in the code below.

this is handy for create super-quick wireframes and site walk-throughs, if not production use for small-time operation or one-off mini-sites like event announcements...

note: since it's a simple demo (15 mins to setup), i skipped out on IE7 navigation, you can use any onhashchange replicator floating around to provide drop-in compatibility with all outdated browsers...

Code:

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<title>Loading Demo Site</title>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style>
body,html {margin: 0; padding:0; background:#ddd; color:#116;}
body>*{ margin: 1em; padding: 1em; clear:both; float: left;  }
nav {background:#ccc; }
nav li{ margin: 1em; padding: 1em; float: left;  background:#cfc; list-style:none; }
h1 { clear: right; display:inline;}
img { float: none; clear:none;}
#content { background:#fff;  margin: 1em 5em; }

</style>
</head>
<body>
  

<nav><ul id="nav"><li>Loading...</li></ul></nav>



<img src="" width="128" height="128" id="thumb" />   <h1>Loading...</h1>	

<div id='content'></div>	


<script type='text/javascript'>

//IE7+8 compat code (feel free to remove if not needed) ##########
if(![].map){Array.prototype.map= function map(fun){var i=0,len=this.length,res=[],thisp=arguments[1];for(i;i<len;i++){
	if(i in this){res[i]=fun.call(thisp,this[i],i,this);}}return res;}
}if (![].filter) {Array.prototype.filter = function (fun) {var len = this.length, res = new Array,  thisp = arguments[1];for (var i = 0; i < len; i++) {if (i in this) {var val = this[i];if (fun.call(thisp, val, i, this)) {res.push(val);}}}return res;};}
Object.keys=Object.keys||function keys(ob){var r=[];var i=0;for(var z in ob){if(ob.hasOwnProperty(z)){r[i++]=z;}}return r;};
//end IE7+8 compat code ############


function getCSV(url, cb){//uses YQL to grab CSV data from a url and pass it to the callback as an array of objects

	function addScript(u){ 
		var sc2=document.createElement('script'); 
		sc2.src=u;  
		document.getElementsByTagName('head')[0].appendChild(sc2);
	} //end addScript()


	function yqlCsvToArrayOfObjects(data){
	   var head=data[0];
	   data=data.slice(1).map(function(a){
	     var ob={};
	     Object.keys(a).map(function(aa){
	         ob[head[aa]]=a[aa];
	     }); return ob;
	  });
	 return data
	}//end yqlCsvToArrayOfObjects()


  var key=url.replace(/\W/g,"");

  if(getCSV[key]){ //caching implementation
      return cb(getCSV[key]);
  }else{
     getCSV[key]=function generatedCallback(data){   
       var raw=yqlCsvToArrayOfObjects(data.query.results.row);
       getCSV[key]=raw;
       cb(raw);
    };//end callback def()
  }//end if cached copy available?

  return addScript( 
	"http://query.yahooapis.com/v1/public/yql?q=select%20*%20from%20csv%20where%20url%3D'"+
	encodeURIComponent(url)+
	"'&format=json&callback=getCSV."+key	
   );//end addScript call
}//end getCSV()









//url of csv data from a shared and published Google Form:
var myCsvUrl = "https://docs.google.com/spreadsheet/pub?hl=en_US&hl=en_US&key=0Aptc98y5K95RdEFRbkFoR0d4NFNhUW1xRTBKQXJIaFE&output=csv";


function demoCB(data){  //callback function for incoming csv data. turns the data into HTM

  var myPage=location.hash.replace(/#/g,"")||"home";
  var myRow=data.filter(function find(a){return a.page==myPage;})[0];
 
 //build nav from pages defined in spreadsheet:
  var navHTML="";
  data.map(function(row){    navHTML+="<li>"+row.page.link("#"+row.page)+"</li>\n";  });
  document.getElementById("nav").innerHTML=navHTML;


  //show page title:
  document.getElementsByTagName("h1")[0].innerHTML=document.title=myRow.title;


  //show thumbnail:
  document.getElementById("thumb").src=myRow.image;

  //show content:
  document.getElementById("content").innerHTML=myRow.content;

}//end demoCB()



window.onload=function(){
  getCSV(myCsvUrl, demoCB);//apply the callback to the data at myCsvUrl
}//end onload()

//bind nav clicks to state changer by re-using onload():
onhashchange=onload;


</script>
</body>
</html>

tested ok in ie8, ff7, ch14