Scrolling Text of Names

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

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.