Skip to main content

More Cowbell! Record Production using Google Forms and Charts

First, the what:
This article shows how to embed a new Google Form into any web page. To demonstrate ths, a chart and form that allow blog readers to control the recording levels of each instrument in Blue Oyster Cult's "(Don't Fear) The Reaper" is used. HTML code from the Google version of the form included on this page is shown and the parts that need to be modified are highlighted.


Next, the why
:
Google recently released an e-mail form feature that allows users of Google Documents to create an e-mail a form that automatically places each user's input into an associated spreadsheet. As it turns out, with a little bit of work, the forms that are created by Google Docs can be embedded into any web page.

Now, The Goods:
Click on the instrument you want turned up, click the submit button and then refresh the page. Through the magic of Google Forms as soon as you click on submit and refresh this web page, the data chart will update immediately.


Turn up the:
  • Cowbell
  • Bass
  • Lead Guitar

powered by Google Docs
Terms of Service
-Additional Terms


Finally, the How:
Creating the Google Form:
Create a new Google Docs Spreadsheet. Under the 'Share' tab, select the 'fill out a form' radio button. Follow the rest of the self-explanatory steps to create a form and then e-mail the form to yourself. Don't forget to fill in the custom confirmation message. Otherwise, your users will get the message Google sends by default.

All of that was the SOP for Google forms. Now, for the interesting part. Your spreadsheet now contains a link above the data rows that reads "Go to live form". Clicking on this link will take you to a web page that contains the form. To move the form to another web page, simply dump the source code of this page. If you are embedding the form in an existing page, you will need to remove page specific tags like 'body' and 'html'. The sections to be removed/modified are shown in the sample below:

<?xml version="1.0" ?> <!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><meta http-equiv="Content-type" content="text/html; charset=utf-8" /> <title>multichoice form</title> <link type="text/css" rel="stylesheet" href="//spreadsheets.google.com/client/css/2794507541-v2-gooey.css" />
<style type="text/css" media="screen"> body { padding: 0.5em 1em; font-size: 0.8em; } h1 { font-size: 1.8em; margin-bottom: 0.2em; } span { display: block; } hr { border: 0; height: 1px; background-color: #DDD; } table { border-collapse: collapse; } td { border: 1px solid #CCC; padding: 0.1em 0.5em; } th { background-color: #969696; color: #FFF; padding: 0.2em 0.5em; } .g { color: #666; } .i { display: inline; } .ss-q-title { font-weight: bold; } .ss-form-desc { font: inherit; white-space: pre-wrap; white-space: -moz-pre-wrap; word-wrap: break-word; width: 99%; } .ss-q-help { color: #666; } .ss-form-entry { margin-bottom: 1.5em; } .ss-choices { list-style: none; margin: 0.5em 0 0 0; padding: 0; } .ss-powered-by { color: #666; margin: 0.2em; } </style></head>
<body><h1>multichoice form</h1>


<form action="http://spreadsheets.google.com/formResponse?key=pvFXGB-79Kl1cCNW5OTvYCA" method="POST"><div class="ss-form-entry"><span class="ss-q-title">Turn up the</span>
<span class="ss-q-help"></span>
<ul class="ss-choices"><li><input type="radio" value="Cowbell" name="group:0" />
Cowbell</li> <li><input type="radio" value="Bass" name="group:0" />
Bass</li> <li><input type="radio" value="Lead Guitar" name="group:0" />
Lead Guitar</li></ul></div>
<p></p>
<input type="submit" value="Submit" /></form>
<span class="ss-powered-by">powered by Google Docs</span>

<p></p>
<small><a href="http://www.google.com/accounts/TOS">Terms of Service</a>
-
<a href="http://www.google.com/google-d-s/terms.html">Additional Terms</a></small></body></html>


The red highlighted areas should be removed entirely. The brown area may be removed without ill affect, (it had no effect for this page, so I took it out). The yellow line may cause issues with pages from Microsoft Publisher that can be rectified by changing the border width to 0.

If you are moving the form to a blogger page, the html parser will tell you which elements it doesn't like. To keep your web page from redirecting to the google success message and requiring your users to press the 'back' button, simply add:
target="_blank"
to the form tag prior to the action attribute.

And that's it folks. That's how to use Google forms to embed a form in your own web pages.



Comments

Popular posts from this blog

Cool Math Tricks: Deriving the Divergence, (Del or Nabla) into New (Cylindrical) Coordinate Systems

The following is a pretty lengthy procedure, but converting the divergence, (nabla, del) operator between coordinate systems comes up pretty often. While there are tables for converting between common coordinate systems, there seem to be fewer explanations of the procedure for deriving the conversion, so here goes!

What do we actually want?

To convert the Cartesian nabla



to the nabla for another coordinate system, say… cylindrical coordinates.



What we’ll need:

1. The Cartesian Nabla:



2. A set of equations relating the Cartesian coordinates to cylindrical coordinates:



3. A set of equations relating the Cartesian basis vectors to the basis vectors of the new coordinate system:



How to do it:

Use the chain rule for differentiation to convert the derivatives with respect to the Cartesian variables to derivatives with respect to the cylindrical variables.

The chain rule can be used to convert a differential operator in terms of one variable into a series of differential operators in terms of othe…

Lab Book 2014_07_10 More NaI Characterization

Summary: Much more plunking around with the NaI detector and sources today.  A Pb shield was built to eliminate cosmic ray muons as well as potassium 40 radiation from the concreted building.  The spectra are much cleaner, but still don't have the count rates or distinctive peaks that are expected.
New to the experiment?  Scroll to the bottom to see background and get caught up.
Lab Book Threshold for the QVT is currently set at -1.49 volts.  Remember to divide this by 100 to get the actual threshold voltage. A new spectrum recording the lines of all three sources, Cs 137, Co 60, and Sr 90, was started at approximately 10:55. Took data for about an hour.
Started the Cs 137 only spectrum at about 11:55 AM

Here’s the no-source background from yesterday
In comparison, here’s the 3 source spectrum from this morning.

The three source spectrum shows peak structure not exhibited by the background alone. I forgot to take scope pictures of the Cs137 run. I do however, have the printout, and…

Unschooling Math Jams: Squaring Numbers in their own Base

Some of the most fun I have working on math with seven year-old No. 1 is discovering new things about math myself.  Last week, we discovered that square of any number in its own base is 100!  Pretty cool!  As usual we figured it out by talking rather than by writing things down, and as usual it was sheer happenstance that we figured it out at all.  Here’s how it went.

I've really been looking forward to working through multiplication ala binary numbers with seven year-old No. 1.  She kind of beat me to the punch though: in the last few weeks she's been learning her multiplication tables in base 10 on her own.  This became apparent when five year-old No. 2 decided he wanted to do some 'schoolwork' a few days back.

"I can sing that song... about the letters? all by myself now!"  2 meant the alphabet song.  His attitude towards academics is the ultimate in not retaining unnecessary facts, not even the name of the song :)

After 2 had worked his way through the so…