Creating a Google Form Powered File Sharing Site in Two Ways: Nose to Tail

 

This blog post has been sticking in my head over the last day and I decided to rewrite sections. The whole system that was used to create the Scarsdale Teacher Share is complex, and while it works for us, it isn’t for everyone. There is a lot to be said for simplicity and I’d like to include a less complex alternative that accomplishes a lot of the same stuff.  In the revised post below, I’ll explain the easier method first and then continue to the more complex version. The whole thing is pretty long - but I hope it's useful.

A couple of weeks ago I had the honor of presenting at the NY/NJ Google Summit.  Lisa Thuman does an amazing job putting the event together and I’m always impressed at the caliber of presenters and participants.  This year I presented on the Google script powered teacher sharing site that I’ve blogged about before. I promised the good folks in my session (thank you all for coming!) that I would write something to outline the system; this is that post. I meant to get it out sooner, but in the immortal words of John Lennon, “Life is what happens to you while you're busy making other plans.”

        This process allows a district to create a Google Form powered Google Site. A teacher can submit a file to share, organize it with self selected or generated tags. The simpler method uses a special gadget to interface with the form submissions and the shared resources.  The more complex example creates Google Site pages created automatically using the information given by the form.  For the complex example, I created a set of simple demo files that you can use here. The files that run the Scarsdale site are more complicated, but all of the basic functionality can be found in these demo files.

      With either method you must create a spreadsheet using the old sheets and build a form. Decide whether the system will work with a domain or be public.  For our district sharing site, the form is limited to the domain. Your spreadsheet needs to collect at least six things:

1. Name of the contributor (Text question or automatic in a domain-only form)
2. Email of the contributor (Text question or automatic in a domain-only form)
3. Name of the resource (Text question)
4. A description of the resource being shared (Paragraph text question)
5. A field for tags (Text question with an “other” option)
6. The URL of the drive resource that is being shared (Paragraph text question)

Once your form is in place, return to your spreadsheet and install the New Visions Form Folio Script. You will have to determine whether you are collecting usernames at this stage. You will also need to determine whether shared resources are copied and how they will be organized by formFolio.  The demo example uses the “Keyword” column to organize resources. A folder is then created for each keyword.  Scarsdale collects usernames in our domain-only share.  These usernames become our method for organization. We also copy the shared resources so that resources are stable despite faculty changes.

After you install formFolio, add the following sheets to the document:

• formRanger List
• csv horz array
• HTML
• buildPages (not needed in the simple method)
• createPages (not needed in the simple method)
• Awesome Tables (optional in the complex method, but you’d be crazy not to)

The “formRanger List” and “csv horz array” use the dynamic tagging system I described in a previous post.

The Simple Method: formFolio & Awesome Tables

The basic components for a teacher share are in place once you have your form and have installed formFolio.  Next, let’s create the interface for the shared resources using the Awesome Tables gadget.  Create a query on A3 of the Awesome Tables sheet. Use the query to grab the form submission data that you want to use in your interface. In the example below, I query the “createPages” sheet because the example showcases the complex method.

=QUERY (createPages!B2:J, "SELECT D, E, F, G, H, J", 0)

Then, use the first row to title the columns. These titles will be used in the interface. The second row corresponds to how the columns can be filtered by the end user.  Use the “Awesome Table” documentation to set this up. The spreadsheet has to be public in order for Awesome Tables to work.  If you don’t want to make your whole spreadsheet public, use two additional Google sheets, along with the New Visions script pushData to move the Awesome Tables page to a public sheet.

The final step in the simple version is to add the awesome table gadget to a Google Site page.  This is also explained in the “Awesome Table” documentation.  You can get creative with how the filters behave in the awesome tables sheet and a lot an depend on the data you’ve collected in the submission form.

The Complex  Method: formFolio & Google Site Page Creation

Let’s return to the complex method if you’re up for it. We need to look first at the “csv horz array” page. In the sharing site example, you’ll notice two differences from the dynamic tagging system I described in a previous post. Column A on the “csv horz array” page is named “Key.” This column combines the submission date and username to create a unique value to use on other sheets for vertical lookup formulas. Column B is named “HTML” and uses an if/then array formula to check whether tags have been assigned to a new resource.  If a tag cell is blank (column F and beyond) the formula uses canned HTML from the “HTML” page. If the tag cell contains a keyword, it is made into an HTML link that searches the site for that keyword, also using the “HTML” page as a reference form the code.

= ARRAYFORMULA ( IF ( F2:F2 = "" , HTML!A10 ,HTML!A7 & F2:F & HTML!A8 & F2:F  & HTML!A10 & (IF ( G2:G = "" , "" , HTML!B7 & G2:G & HTML!A8 & G2:G  & HTML!A10 ) & ( IF ( H2:H = "" , "" , HTML!B7 & H2:H & HTML!A8 & H2:H  & HTML!A10) & ( IF ( I2:I = "" , "" , HTML!B7 & I2:I & HTML!A8 & I2:I  & HTML!A10) & ( IF ( J2:J = "" , "" , HTML!B7 & J2:J & HTML!A8 & J2:J  & HTML!A10 ) ) ) ) ) ) )

This if/then strategy, combined with the HTML page, can be used creatively to build variety into your google site page based on user submissions.  Remember to install formRanger in order to connect the script as described earlier to make your form dynamic.

Next we turn to the “buildPages” sheet. The first column is another "Key" column. Just as on the “csv horz array” page, the “Key” column combines the timestamp and username field.

= ARRAYFORMULA ( B2:B &C2:C )

In cell B2 we use a simple arrayformula to copy over the form responses and formFolio columns without including the headers.  

=ARRAYFORMULA ( 'Form Responses 1'!A2:K )

The column headers are manually named in the first row to keep them friendly for the createPage script that we will discuss in a bit - form response headers have a habit of being a bit long. In column M we will add use a "LEN" function to count the Drive ID column that is created by the formFOlio script.  This returns a number when a resource is added to our share folder.

=ARRAYFORMULA ( LEN ( L2:L ) )

Column N uses an arrayFormula with a VLOOKUP that references the “Key” column. For a simpler method, you can install the copyDown script and forgo the arrayformula altogether.

=ArrayFormula ( IFERROR ( VLOOKUP( A2:A ;'csv horz array'!A$2:B  ; {2} * SIGN ( ROW ( B2:B ) ) ; FALSE ) ) )

Now lets move to the createPages sheet. The first two columns on the "createPages" sheet need to be "ID" and "Product Page." These will be used by the createPages script later on. Cell C1 will use a Query formula to pull the data from the buildPages sheet. Using this query we can reorder the columns and specify a query condition. We will use the LEN column that we added to the buildPages sheet to validate the query.

=QUERY (buildPages!A1:N, "SELECT A, B, C, H, E, J, N where M > 1", 1)

Now you can create the HTML for your Google Site page template. Take a look at the HMTL sheet. You will notice that I divided the HTML with yellow cells.  These cells correspond to the variables that are fed from the Google form.

Finally, we need to add the createPages script.  This essentially uses a script from the book “Google Script: Enterprise Application Essentials” The book is dated now, but you can still pull good ideas from the text.  If you investigate the Script Editor on the demo sheet, you will see that the script builds HTML pages on the Google Site using my code. Whenever a variable is called, the script references the columns of the createPages sheet.

This completes the more complex custom Google Site file repository, powered by a Google form.  To round out your site, you could create an interface with Romain Vialard’s aptly named “Awesome Tables” gadget, or simply set your navigation to auto generate.  A big thanks to New Visions for Public Schools for their amazing script library.

It’s Aliiiiiiive!

I was moving through my backup plan to give my old macbooks a second life when I had an (embarrassing) epiphany regarding Chromium.  I am installing Xubuntu on these old laptops using my home network and it’s slow going. I am using my little router and my one spare network cable to hardwire the macbooks in order to pull down updates during the process. Nine macbooks in, I realize that I should have done the same with Chromium.  Afterall, Chromium is based on Linux, and I wouldn’t install a linux build without a network connection, right? Thinking back, I probably didn’t try this with Chromium because of my “no network cable” experience with our Chromebooks. But then, this is Chromium on old third party hardware, not Chrome on proprietary devices. So embarrassing.

I tried Chromium again, this time with the macbook connected physically to the router. Magically, the wireless card was recognized. I can now see the network, which is critical for a web only device, but things are still not perfect.  The trackpad doesn’t work - the cursor doesn’t even appear.  After unsuccessfully trying the solutions posted here and here, I’ve given up on the trackpad. Instead, I just plug in a mouse and it works great.

The verdict on Chromium is still out.  I can tell you that it is a lot faster to load Chromium than Xubuntu.  I am going back to “plan A” because I basically want the laptops to serve as a Chromebook writing lab. I really like the idea of managing users via the GAfE control panel and wasn’t looking forward to locking down the Xubuntu system.  We’ll see...

“Cross your fingers and reboot”

My teachers recently had their old 2007 MacBooks upgraded and I thought Chromium might be a good way to give these machines a second life. Chromium is an open source version of the Chrome operating system and shares it's low power footprint and "all in the cloud" advantages.

Apparently, it isn’t so easy. The line that finishes the Chromium Install process is “Cross your fingers and reboot.” This foreboding send off quickly made sense. Your mileage will certainly vary with this free OS, and personally, I didn't get far.

Getting Chromium Installed

You have a few options with Chromium. You can use the official Chromium site to compile your own build, but this looks like a complex process.  An easier option is to use one of the builds compiled and shared by a small, but generous, community.

Liam McLoughlin, a young programmer who goes by Hexxeh, is the most often mentioned in older blog posts about Chromium, but his once popular project seems to have stopped in April of 2013.  I couldn’t get any of his builds to work past the boot screen on my MacBooks.  A Chromium project that is still regularly supported is hosted at http://arnoldthebat.co.uk. I had the greatest success with these builds, getting as far as the Chromium network screen.

As far as I got without network support

Once you have your build, you need to copy it to a USB drive and follow the directions here. I found that not all USB drives were equal.  I don’t know why, but SanDisk drives did not allow my MacBooks to boot, whereas Kensington sticks weren’t a problem.

The Problems Begin

Drivers are the biggest challenge with Chromium. The community behind this open source project is very small and the support reflects this. Comment threads are crowded with people having trouble getting hardware recognized by Chromium. I was no exception, MacBooks use a Broadcom wireless card that isn’t included in the build. I followed these directions to install the driver but did not experience success.  Even if I did get the card working, the process to get there was too involved to be practical at scale.

Next Steps

Although my MacBooks weren’t a good fit for Chromium at this time, that doesn’t mean a different device will have these problems.  You have to try for yourself.  My backup plan is to install the Xubunto Linux OS on my 21 MacBooks.  It’s a lightweight OS that will work snappily on these older laptops.  I intend to install the Chrome browser and lock down the OS. I’ll let you know how it goes.

An Update

I've since updated this post here, after figuring out how to get the wireless card recognized.

Share Site Revisions

I’ve been debugging the new teacher share site for the past month and it’s been going well.  The most valuable information I've received about the site came from several focus groups with trusted testers. Absolutely nothing beats watching people use a system when you want to learn how to make it better. This is what I learned:

• The directions needed to be better.  They needed to be clear, have multiple levels of depth, and yes, be printable. I added multi-level directions to the “share something” page - I still think they could be better, but it’s a start.
• Each grade level needed a “Special Education” and “Technology" subcategory. I had originally thought these items would fold into regular curriculum subcategories. After all, it’s not the technology, it’s what you do with the technology, right? While this may be true, people wanted to use these categories when they searched for, and shared, resources. This was a tedious fix because all of the conditional questions on the form also needed to be updated.
• There needed to be a K-5 category. It was WAY too onerous to add a file to each grade level manually. This was an involved fix because the HTML template needed to accommodate the new category.  It was an important addition, though, as evidenced by the dull expression left by folks who tried to add resources k-5, one grade at a time.
• There needed be a "Teacher Planning" sub category. Several times someone had something to share that didn’t fit into a curriculum bucket.  Meeting minutes is an example of this - it will be a nice place to keep curriculum committee notes in one place.

Bottom line, focus groups and watching people use your system is such an important way to learn strengths and weaknesses. It’s a little bit of humble pie when you watch someone struggle to use what you've built, but I can’t think of better way to make something better.

The Google Site FounderBook

My fifth grade classes are studying the Founders and the Constitutional Convention.  There are lots of fun ways to redefine the traditional essay project with this rich subject matter. I really appreciate the work that many have done using social media parodies, like these examples of Historical Fakebook projects.  I wanted to leverage these ideas, too, but using Google Apps - Sites in particular.  

I wanted to build a Google Site that capitalized on the efforts of the class by building social interaction into the project.  What's the point of building a FounderBook page if the founder can't interact with his contemporaries?  

So, this is my first attempt.  It's a good start, but I'm sure I've missed an opportunity or two. This template allows students to build a profile for a Founder, blog from his perspective, and perhaps leave comments on the pages of the other founders. Announcement pages and page templates make Sites well suited for this task.  I built two convention pages to accommodate a class of twenty-plus students.  There is a founder template page ready if you need to add personalities to the list.  The respective convention home pages feature announcement gadgets to display the running blogs for each founder.  

If you're interested in using the template with your class, simply follow the directions below:

1. Create your site by clicking “Use this Template” on the top of the template linked here: https://sites.google.com/site/usfounderbook/

2. Edit the Homepage of your FounderBook by clicking the pencil icon on the top right.

3. Assign Founders to the students in your class by replacing the placeholder names in “Convention 1” and “Convention 2”

4. Click the blue “Share” button and give the students in your class edit access to the site. 

5. This site will now appear on the Students' Sites pages, located at http://sites.google.com. You can also copy and paste the site address into a Google Doc that is shared with your class.

6. The "Instructions Page" assumes that your class has already done research on their Founders and gives a step by step guide to complete the project.

I have several classes using the template and it's going well so far.  Let me know if you improve on the template and/or try it out!

Google Site Sharing Repository, Part 2: Creating HTML to link formFolio to Google Sites

It’s taken me a few weeks, but I’ve finally finished the Google Site Sharing repository.  Well, finished might be going too far - I’m in “trusted tester” mode.  This is basically how it works: using a Google form outfitted with +Andrew Stillman's formFolio, a teacher in our district’s domain can submit a resource and organize it with keywords. The Google Spreadsheet uses the information from the form to create a Sites page via the createWebPage method. Next, the pushData script exports the catalog information to a public sheet that informs +Romain Vialard's aptly named “Awesome Table” gadget.  This becomes the front end of the repository.

The Google form is one of the largest I have made with 160 items, most of which are conditional. Teachers are able to select grade levels and subject areas to organize what they are sharing. The formRanger method I described earlier is working really well. Even though I started with a baseline list of keywords, it was immediately evident that keywords could not be static.  I've added new keywords with each test submission. After the system is used for a while, I’ll be able to prune keywords from my original baseline that aren't being used. You can see a copy of the form here without the sign in restrictions so that you can see how it flows.

The spreadsheet builds the HTML for the Google Site using the variables from the form submission. The HTML is then used by the "createWebPages" script method to create the Google Site page. To do this, create two spreadsheet pages in addition to the the Form Submission page. Name one page "HTML" and the other "Page Builder."

Next, construct your new page template in Google Sites, manually using the variables you intend to feed from the form. Use a simple page format - not one with sections or columns. When the page looks right, click the HTML button in the toolbar and copy the code. Return to the Google spreadsheet and paste the code into the "HTML" page.  Scan the HTML for the variables that will be populated by the form submissions and cut the code around each variable, pasting it into sequential cells like this.  Leave out the variables, these will be populated from the form using a spreadsheet function.

Now combine the form submissions with the HTML on the "Page Builder" page using an ARRAYFORMULA. You can get creative with how to do this, such as using IF/THAN and VLOOKUP functions to customize the HTML based on the form submissions. Make sure you use the "Resource URL" column created by the formFolio script to connect the submission to the Google Site. In the demo example, you'll find a simple concatenate function:  

=ARRAYFORMULA ( HTML!$B$4 & 'Form Responses'!A2:A & HTML!$B$5 & 'Form Responses'!D2:D & HTML!$B$6 & 'Form Responses'!J2:J & HTML!$B$7 & 'Form Responses'!C2:C & HTML!$B$8 )

Once you have your HTML code you can invoke the createWebPages method. A decent guide for using this method can be found in +James Ferreira's book, Google Script: Enterprise Application Essentials.  Just a warning: this book was out of date just months after it was released - Google Apps Script evolves too often for print.  That said, the ideas found in the book are still relevant and useful.

What Didn't Work

I wanted to include a Google folder gadget on each page so that viewers could see what was shared. I was able to create code that worked using the method above, as long as it was pasted into a page. Unfortunately, createWebPages seems to have stricter rules for code. No matter what I tried, the script would strip the Google gadget out of the HTML. In the long run, I don't think it's necessary. I actually prefer the plus one gadget.

What Might be Next

I'd like to investigate +Martin Hawksey's post "Using Google Spreadsheets as a Google Analytics Data Bridge".  I think it'd be cool to use analytics to show users what's popular on the site. For the time being, though, the priority is showing teachers the site and providing professional development on how to use it.