Saturday, September 7, 2013

Embedding a form in a blog in a weebly site

This year I am lucky enough to have a 1:1 group for both English and Mathematics. I have grandiose ideas about what I want them to accomplish this year (blogging, real-time collaboration, and so on) and concrete objectives (considering audience, working as a team).

One of the things I want them to do is to complete a math Problem of the Day each math class. This has a few purposes:

  • Classroom Management: students will follow the same procedure every day at the beginning of class. They come into the room, pull up the POTD and complete it. There is a clear understanding of how they should be using their time.
  • Formative Assessment: their results will give me information about their understanding of the concepts covered. I will adjust my teaching strategies and give them feedback on a regular basis according to this measure of comprehension.
  • Exposure to New Ideas: I have found that most math problems students work on in school do not reflect the reality of mathematics in everyday life. Problems in text books are often small, neat, and "cleaned up" to have nice solutions. Real-world mathematics often does not reflect this. I intend to slowly introduce more challenging questions that are based on real-world scenarios.
There are three tools I am using for this: Google Drive, Blogger, and Weebly. I haven't yet migrated to Google Sites, but I imagine that in the future this will ease the integration process. I will post an update when I have tried it out.


Clearly I like Blogger (it's where this blog is hosted). I'm fluent in how the site works, and it's tied to my Google Apps for Education account, so I only need to click on the App in my Chrome Browser, and it opens everything up nicely.

This is where I begin the process. I write a short post with the necessary supporting information that the problem will require. I also often include a small visual (generally from WikiMedia Commons) to aid understanding.

Google Drive:

This is where I create the forms to embed in the blog post. Once I know what I want to ask, I create the form and set up the response destination.

I also restrict viewing to my education domain, and automatically collect user IDs.
When the form is ready, I click on File - Embed... to get the Embed code for the form. This will allow me to put the form directly into the blog post, avoiding the need to click on another link. Keeping all the information on one page and creating a seamless problem & answer format is one of the things I really like about this method.

Copy the embed code to your clipboard and then go back to Blogger.

In the Blogger post editing window, switch from "Compose" view to "HTML" view. Then paste the embed code at the bottom of the text.

An optional part of the process (but one I really like) is the ability to schedule posts. This lets me set up a week's worth of problems at one time, schedule each to post on the appropriate day, and let the system do its thing. On the right-hand side of the Blogger compose window, click on the triangle next to Post settings, and click schedule. Pick a date and time, and then click done. The final step of the process is to click on the orange Publish button. This will confirm your settings and Blogger will automatically publish the post at the set date and time.

Putting it into Weebly 

 On your weebly site, add a "Feed Reader" element from the left-hand control pane. You will configure this to read your blog's RSS feed. Adjust the settings as you like (I have it set to show the 3 latest items).
That's it; publish your weebly site, and you're done. Now every time a scheduled post is published to your blog, it will automatically appear in your weebly site. You do not need to re-publish your weebly every day.

Final Additions:

  • I will be using the Google Apps Flubaroo script to grade student responses, and I will collate the data into one Google Sheet to record their performance for the year.
  • I use Google Drive to create any necessary graphics to embed into my Blogger post or the associated Form. By using the URL of the Google Drawing, I can update the image and the changes will automatically be pushed out into the rest of the process.
  • I change the "Accepting Responses" setting on the forms as they expire. Forms will accept responses up to an including the day of the POTD. Since the form is not public until the scheduled post is published, students have a limited amount of time to respond. I have not yet found a way to automate this process. I may try to write a Google App Script to change this setting (or if there are any programmers out there who would like to volunteer) when I use Flubaroo to grade the assignment.
  • I use Labels to categorize each problem into its required skills. This will allow me to create a database of POTDs for use in the future. It's a lot of front-end work right now, but it will become a great resource as I continue to build it up.
  • I will likely be creating a similar blog for a daily writing exercise for my English class (but I may simply ask students to respond through the comment feature, rather than embedding a Form to collect responses).
  • If you would like to see the blog, it's available at (although you won't be able to see or submit a response through the Form). I hope this encourages you to try out embedding a blog into your own site.