Embed Collector Tool – Bionic Teaching

Some people don’t have websites handy or their blogs won’t allow iframe embeds. They should still be able to have their students do stuff and get it all in one place. This is the Internet! And this tool is meant to deal with that.

You can see a working example with three submissions (via a Google Form) here. It’ll take any iframe or HTML as a submission.

The search box will also filter based on all the additional material associated with the element in the form. For instance in our example you can type “Sarah” and you’ll end up with one item.

So the way this should work is you click here and accept the copy. You now have the spreadsheet and form.

The directions are on the sheet labeled directions. I have a dramatic green arrow pointing at it in the image below.

You can edit the form associated with the sheet under Form>Edit form. The only thing you have to leave/have in the form is the one called “The embed code.” Everything else can be deleted and/or changed.

Stuff I Learned

This pretty much a mashup of two recent projects – the personalized fridge poetry and the Angular/Google Sheets JSON stuff.

This one runs entirely in javascript so to use the $_GET option, which javascript doesn’t have, I used this. Worked like a charm.

The other thing that hung me up for a second was HTML binding in Angular. In addition to binding the HTML (below), you also have to load the sanitizer and, in our case, add iframe as an approved element.¹

<!--html binding-->
      <div ng-bind-html="entry.gsx$theembedcode.$t">

Stuff to Do

I want to tighten up some of this but am struggling with whether the script makes it harder (or scarier) than doing some of it by hand. Like I could run a Google script (like the one below) to write some stuff to the form. It’d simplify directions but then would require directions for running the script.

function myFunction() {
  var ss;
  ss = SpreadsheetApp.getActive();
  SpreadsheetApp.getActiveSheet().getRange('Sheet2!b2').setValue(SpreadsheetApp.getActive().getUrl());
  SpreadsheetApp.getActiveSheet().getRange('Sheet2!b3').setValue(ss.getFormUrl());
}

The whole thing is below.

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8" />
	<title>Embed All the Things</title>
	<meta name="generator" content="BBEdit 11.1" />
	<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
	<script type="text/javascript" src="js/angular-sanitize.js"></script>

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
    <style>
    .row {
    	margin:auto;
    }
    
    </style>

</head>
<body ng-app="myApp" ng-controller="SuperCtrl">

<div class="container-fluid">
<h3>Your submissions</h3>
	<div class="row">
		<div class="col-md-4">
			<form class="form-inline">
			<input ng-model='search.content.$t' name="sort" id="sort" type="text" placeholder="Filter by" autofocus>
		</div>
  </form>
	
	</div>

<div class="row">
 <div ng-repeat="entry in entries | filter: search | orderBy:'gsx$timestamp.$t' : 'reverse'"  class="col-md-10 col-md-offset-2">
      <div ng-bind-html="entry.gsx$theembedcode.$t">
        {{ entry.gsx$theembedcode.$t }}
        </div>
  </div>
 </div>  
</div> 

<script>
//from http://ideasandpixels.com/get-post-variables-with-javascript - allows the _GET in JS
var $_GET = {};

document.location.search.replace(/\??(?:([^=]+)=([^&]*)&?)/g, function () {
    function decode(s) {
        return decodeURIComponent(s.split("+").join(" "));
    }

    $_GET[decode(arguments[1])] = decode(arguments[2]);
});
</script>

<script>
var app = angular.module('myApp', ['ngSanitize']);
$gid = $_GET['id'];
$gURL = "https://spreadsheets.google.com/feeds/list/" + $gid + "/1/public/values?alt=json";
app.controller('SuperCtrl', function($scope, $http) {
    $http.get($gURL)
    .success(function(response) {$scope.entries = response.feed.entry;});
});
</script>



</body>
</html>

¹ This is a risk of some sort. iframes scare people.