Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    Senior Coder rnd me's Avatar
    Join Date
    Jun 2007
    Location
    Urbana
    Posts
    4,296
    Thanks
    10
    Thanked 583 Times in 564 Posts

    Post Collecting survey data using js

    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>
    Last edited by rnd me; 08-22-2011 at 08:51 PM.
    my site (updated 13/9/26)
    BROWSER STATS [% share] (2014/5/28) IE7:0.1, IE8:5.3, IE11:8.4, IE9:3.2, IE10:3.2, FF:18.2, CH:46, SF:7.9, NON-MOUSE:32%

  • #2
    Senior Coder rnd me's Avatar
    Join Date
    Jun 2007
    Location
    Urbana
    Posts
    4,296
    Thanks
    10
    Thanked 583 Times in 564 Posts

    another use - cms

    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
    Last edited by rnd me; 08-22-2011 at 08:42 PM.
    my site (updated 13/9/26)
    BROWSER STATS [% share] (2014/5/28) IE7:0.1, IE8:5.3, IE11:8.4, IE9:3.2, IE10:3.2, FF:18.2, CH:46, SF:7.9, NON-MOUSE:32%


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •