Using FormEmailer to send custom emails to students based on responses

I love Google Apps for education! My favorite workflow is to use Google Spreadsheets/Forms to collect information from students (mainly responding to my math questions) and then have the Spreadsheet automatically "grade" the response and send a customized email back to the student.

Recently, I took a lesson from Yummy Math (who is awesome!) about the record Powerball drawing.

Here is how I implemented the lesson using the Google Apps for Education resources from my school site.

Yummy Math has great questions about the Powerball, so I utilized these as my framework. I embed them in my class Google Site, here is an example from my Grade 7 class:

I like Google sites for a lot of reasons, but the main one is the enhanced document capabilities. I can embed videos and interactive activites into my "worksheets". In this unit, I embeded a youtube video of the latest Powerball drawing (the one before the record). It was also helpful since I teach abroad and some of my students had no idea what the lottery drawing looked like.

By having them watch the video of the drawing, it makes the explanation of the premise of the problem much easier, especially for my EAL learners. In addition, it gives me a reference point to help scaffold my questioning to derive theoretical probabilities.  I can pause and ask them how many balls are left and how many of them are numbers they picked, helping them get the probability of them winning on the next ball.

I use the Google site subpages capability to create a break in the questioning. I have a lot of students who like to "power through" the questions if they are all lined up consecutively. By making them click to the next page for more (Powerball part 2 in the picture above), it at least creates another step for them to perform before moving on. Sometimes, I limit the Sharing capability so they can't see that subpage until I want them to (but I can prepare it in advance without worrying if they will see it or not).

So, I broke the assignment up into 7 parts, culminating with the Powerball Simulator as given by Yummy Math: 

My students LOVED running this simulator for days to see if they could win the jackpot. I had a few students who hit the $1million, but no jackpot winners. It was great to have them simulate for so long to see how much money they lost in the long run. 

The powerball Part 8 was where I got the most student buy-in. I embedded a Google Form in the Google Sites page that allowed them to "buy" an entry. They submitted their numbers and their "ticket" was created. I even closed the entries as the same time as the official Powerball drawing. (Which happened to occur right before our lunch time, making for great lunch discussion on the powerball and whether they were going to win the $479million).

How did I embed this? First I created the Form associated with it. (You can check this out in detail on my blog post from last year: Creating a Google Form.)

Once the Form is created, go to the live form and copy the URL from the live form. Then on the page that you want to embed the Form, click Insert->SpreadSheet Form (it is in the 2nd column on the bottom):

From there in the popup window, pick Forms:

You should see the Form you just created in the list and you just need to select it. You can edit the properties of how it will look in the Google site page. I like to leave the Width blank and then make the Height enough to get a view of the form.

Now once you hit SAVE, you will go back to the Site page you are editing and your Form will be in a greyed out box. 

You will see the final formatting of the form embed once you hit SAVE from the editing controls on the upper right of the screen.

Now your form will be embedded in the Google Site. Student responses that are submitted will automatically populate the associated spreadsheet.

This is where the power of FormEmailer will come in!

FormEmailer is a JavaScript script that was created by Henry Abreau (Info on formEmailer)

You need to install this script in your spreadsheet. Click on Tools->Script gallery...

Search the Public gallery for formEmailer and Install the first result:

Since FormEmailer is going to do some stuff on your Spreadsheet you need to Authorize it to do so.

After clicking on Authorize, a window will pop open confirming your response. Upon closing that, FormEmailer will be installed in your Spreadsheet and evident in the Tabs at the top.

Before you run the script the first time on your spreadsheet, you need to Install it.

This will create a new column all the way on the left called Emailer Status and a new sheet called FormEmailer. 

Now you need to create the email that will be sent based upon the data in the sheet. I wanted to email the students the confirmation of their chosen Powerball ticket. I clicked on the FormEmailer tab and chose Settings to popup the creation window.

The popup window is where I construct the email message with the "placeholders" that will be replaced by data from each of the student responses, in this case the numbers they chose for their Powerball entry.

Once I have constructed the message, I need to process the emails. I put my own data in the first row of data (row 2) to test out the email message.

So to process an email from row 2, click on the FormEmailer tab and Process Manually.

Here is the result in my Inbox:

With the following message:

I find this to be a powerful way to communicate with students with customized data!

My next post will be to detail the usage of formulas in the spreadsheet to "grade" the students and perform more complex tasks.

Creating a post template in Blogger to allow for native $\LaTeX{}$

Since I want to use a lot of math typesetting in my blog posts, I created a post template to include the MathJax script that will enable $\LaTeX{}$ tyepsetting in my blogposts.
This way I won't need to add the script in the HTML code for every post (as I detailed in this blog post).

First, go to the Blogger design page and hit Template:

Then, we want to add this script in the HTML code for the blog template at the appropriate spot:

<script type="text/x-mathjax-config">   MathJax.Hub.Config({tex2jax: {inlineMath: [['$','$'], ['\\(','\\)']]}}); </script> <script src="http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML" type="text/javascript"> </script>

Go to Edit HTML:

and then click on Proceed:

You should get a wall of HTML text for the template:

You want to enter the script in the <head> section, but put it last. So you want to enter it right before the end head symbol, </head>.

The way I find this is to hit Control-F (or Command-F on a Mac). This will enable the Find feature on your Google Chrome browser with a Find text box in the upper right corner of your browser window.

Type in </head> and it will highlight it in the HTML text:

On the line right before </head> paste the script for MathJax:

Hit Save Template, then Close and you will be back at the Blogger Design Page.

Now, you no longer need to enter the script on the HTML code of every post! The MathJax script will automatically run on every post, so you can just enter math preceeded by $\$$ or $\$\$$ (depending on whether you want inline math or not) and end it with $\$$ or $\$\$$. 

Using math typesetting in Blogger

I have been looking for a way to use math typesetting on blogger and the best way I have found so far is to use . Since I prefer to use $\LaTeX{}$ for my math typesetting, this allows me to enter the $\LaTeX{}$ commands in the HTML mode (all I need to do is surround the $\LaTeX{}$ code with a $\$$ before and after) and then MathJax will automatically render it for me and paste it in the Blogger post.

To enable MathJax to do this in my posts, I just enter the script in the HTML body at the top:

<script type="text/x-mathjax-config">   MathJax.Hub.Config({tex2jax: {inlineMath: [['$','$'], ['\\(','\\)']]}}); </script> <script src="http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML" type="text/javascript"> </script>

Quadratic Function Grapher

Below is a Wolfram .CDF that will allow you to graph a quadratic function of the form $y=ax^2+bx+c$ on the standard graph. Just enter the values for $a, b, \mbox{ and } c$ in the boxes below.

Plot:

Linear Function Grapher

Below is a Wolfram .CDF that will allow you to graph a linear function of the form Ax+By=k on the standard graph. Just enter the values for A, B, and k in the boxes below.

Plot:

Embedding Wolfram CDF files in a Google Site

I have been working a lot with Wolfram CDF and I am excited by the release of Mathematica 9 and the ease in creating and deploying CDF files. One of the best uses it to create interactive manipulations for my students to use.

I like to embed these in my school Google sites. However, this has proven to be quite difficult since Google sites do not allow Javascripts that create scripts (the CDF embed script that I talk about here: Wolfram CDF embedding ).

Hence, we need to resort to using the iframe gadget to refer to a different page that has the CDF embedded.

In my previous post on CDF embedding, I talk about how I host my CDF files in the Public folder on Dropbox. I then use the Javascript script to embed my CDF in my blogger page. This does a great job of hosting my interactive CDF file.
Now, I need to embed this blogger page on my Google site. However, I don't want to use the whole webpage in my iframe since it will require too much scrolling to find exactly what I want.

So the method I use is to create a target location right above my CDF file in the blogger page. I accomplish this by using the ID anchor in the HTML code on my blogger page.

For example, right above the CDF embed script on the html, I add the code:
<br id="MyBreakName" />

Then, I add the CDF embed script:
<script src="http://www.wolfram.com/cdf-player/plugin/v2.1/cdfplugin.js" type="text/javascript">
</script>
<script type="text/javascript">
var cdf = new cdfplugin();
cdf.embed('TheWebsiteThatHostsMyCDFdocument', 400, 800);
</script>

So overall that snippet of code looks like this for my Plot Points CDF:


<br id="cdfFile" />
Plot:<br />
<div dir="ltr" style="text-align: left;" trbidi="on">
<br /></div>
<script src="http://www.wolfram.com/cdf-player/plugin/v2.1/cdfplugin.js" type="text/javascript"></script>
<script type="text/javascript">
var cdf = new cdfplugin();
cdf.embed('http://dl.dropbox.com/u/30779938/WolframCDFfiles/PlotPointManipulateOnlyGraph.cdf', 443, 489);
</script>


Now, it will create an anchor for me to jump to and gives a link to directly jump there.
The link is whatever the blogger URL is to get to that page with an #anchorName appended on the end.
So in my Plot Points CDF example, the blogger site is:
http://mathtechtips.blogspot.sg/2012/12/blog-post.html

Now, I created an anchor right above the Plot Point CDF on this page and called the anchor "cdfFile". To link directly to this point in my page, I use the link:
http://mathtechtips.blogspot.sg/2012/12/blog-post.html#cdfFile

This is the link I will reference in my iframe URL in the Google gadget that I use on my school Google Site.

To do this, I find the place in my Google Sites that I want to enter the CDF file and Insert->... More gadgets...

from there, choose iFrame:

and put the anchored URL link in the box, in this example: 

http://mathtechtips.blogspot.sg/2012/12/blog-post.html#cdfFile

This will put the Google Gadget (in my case the iframe box, pointing to my blogger page with the CDF file) in your Google Sites page.

Once I hit the SAVE button at the top, I will see the finished product on my Google Sites page:

This is the best way that I have found to embed my CDF deployments in a Google EDU site. Please comment if you have some suggestions on how to improve it!

Plot Point CDF

Below is a Wolfram .CDF that will allow you to plot any point on the standard graph. Just enter the x-value in for a and the y-value in for b.

Plot: