Embedded Files
Post date: Nov 05, 2014 5:7:9 PM
Save Time By Quickly Recognizing Individuals In A Scrolling Display
Every year Holman Middle School puts on a fantastic Veteran's Day assembly in honor of those that served our country in some form or fashion. In years past, a selected teacher would spend hours upon hours entering names of Veterans into a Power Point that highlighted the information submitted via. a Google form. The information included such items as the Veteran's name, their relationship to the teacher or student, their branch of service, and the time period or conflict that took place during the Veteran's service. Last year I read a post on Tom Woodward's blog: Bionic Teaching explaining how to implement a jquery script scroller created by Max Vergelli that would significantly cut down on time spent cutting and pasting information from a Google Spreadsheet into a Power Point. This script allows for anyone to capture text submitted via a Google Form and convert it to scrolling text in under a minute! You heard me correctly. What once took hours to accomplish can be done in a matter of minutes. This year we are honoring over 260 Veterans. We had the students and teachers submit the names via. a Google form that contained the following fields:
Form Screenshot
Using the information contained in the spreadsheet of responses, as well as a little help from Tom, I was able to insert some basic HTML tags into the last column of the spreadsheet that automatically populates the information contained in each of the separate columns.
Spreadsheet Responses
Sample Code:
="<div id="&$G$1&"item"&$G$1&"><h2>"&B2&"</h2><p>"&D2&" of "&C2&"<BR>"&E2&" - "&F2&" Veteran</p>"
Don't be scared by the code. It is just simple CSS/HTML. It basically reads that the items are going to be contained in Column G1="<div id="&$G$1&"item"&$G$1&">. From there I add a heading (larger Font Size) <h2>to the information contained in column B2 (Name of Veteran) "&B2&". I proceeded to close out the header with the </h2> tag. I added the <p> element to indicate a new style and included Column D (Relation) "&D2&" of Column C (Student or Teacher Name) "&C2&". <BR> is code to start a new line of text to include the information from Column E (Branch of Service) "&E2&" - Column F (Conflict) "&F2&" Veteran. I close the HTML with </p>. The code takes the information submitted and makes it read as:
Coding Final Result
Once the form has been closed and all of the information has been submitted I just need to copy the code down the remainder of the spreadsheet and cut and paste the HTML into MS Notepad or any Website editor. Here is a link to the HTML code I used for this presentation. You just need to paste the HTML into the proper section (See where I commented). Once the information is saved as an .html file, I can play it through any browser. Here is the final product for this years assembly. Over 260 names added as scrolling text in under a minute!
Save Script in Same Folder as HTML File
Be sure to save your .html file, the jquery script scroller (you can download this file below), and any extra images (background, banners) in the same folder. I saved everything to a folder entitled Assembly 2014. You will notice that I added a little pizzaz to the presentation by adding a Flag Banner at the top (flag975.jpg), a thatch background (Thatch.png), and a couple of horizontal lines (buystrip_gradient1 & 2). All of these files were saved to the folder named Assembly2014. To open the presentation I simply double click on the .html file - ScrollingNames.html.
Screenshot of End Result
Here is a link to the full HTML code that I used for this presentation
Feel free to copy & modify the code and be sure to check out Tom's blog for more information.
Page updated
Google Sites
Report abuse