Simple Comparisons

UPDATED Feb 2, 2015

NOTE: Reworking this app from original. Haven't updated README.

This repo contains templates for making simple app that compares two or three columns of data side-by-side. The data for the app is input in a Google Spreadsheet using one of the templates provided. That information is then translated into the app. This a great tool for non-coders who want to make a simple comparison app.

The app allows the user to compare up to four different types of information, using a tab-based navigation to switch between different screens. Below is an example from EdSource where we wanted to compare Common Core standards across four grade levels. Using the app, we placed each grade's standards in a different tab. You can easily turn tabs on or off from the Spreadsheet.

By default, the app is 600px in width, with the width of the table columns inside the app customizable in the Google Spreadsheet template. You will have to mess with the CSS of the app if you want to resize it overall at this time.

Dependencies

• JQuery: Called from a Google server
• Tabletop: Used to connect a Google Spreadsheet with the app. There is a copy inside the js folder

Examples

<li><a href="http://edsource.org/wp-content/iframe/2014-01-17-lilly-compare/compare-temp.html">Two Column: Changing Standards</a></li>
<li><a href="http://edsource.org/2014/mixed-results-for-charter-schools-statewide-in-new-study/59934">Three Column: Charter School Report</a></li>

Setup

• Install all files on your server;
• Copy one of the following Google Spreadsheet templates depending on your need:
  • A two-column comparison
  • A three-column comparison
• Publish the copied sheet, grab the URL for the published sheet and replace the URL located in the javascript file for the column template you are using that is stored in the variable "public_spreadsheet_url";
• Make a copy of the HTML file for the column template you are using and name it something unique to your project;
• Upload the new HTML file in the same directory on your server as the other template HTML files;
• Customize your project's spreadsheet appropriately with any info you want to include, like the title, source, description and contents of each tab that is in use;
• Create an iFrame of your project's HTML file and place it on the web page where you want the project to be shown;
• That's it!

Spreadsheet Labels Under "Meta" Column

• active: toggles which tabs to use for the project. USE "No" in the cell if you want to disable the tab. You must have at least tab1 active. If you intend to have different tables of information that a user can scroll through, you'll want more than one tab. Example: you want to compare laws proposed by the House of Representatives and the Senate. One tab would be for the House laws, another tab for Senate laws.
• leftHead: Headline for the Left Column.
• centerHead: Headline for the Center Column in a three-column template.
• rightHead: Headline for the Right Column.
• tabName: Name of tab as displayed on the app's navigation bar.
• title: Title of the app.
• desc: Description about the content in the app. This could be a summary, for example.
• source: Always source your information! Can insert HTML for links (eg. TEXT)
• author: Author of the content in the app.
• leftWidth: Width of left column. Total width of all columns no more than 580px by default.
• centerWidth: Width of center column in three column template. Total width of all columns no more than 580px by default.
• rightWidth: Width of right column. Total width of all columns no more than 580px by default.

Notes

• Do NOT use Google's new spreadsheets at this time. As of March 25, 2013, there is no API support for the new GSheets, meaning it WILL break Tabletop.js.
• There is a known bug with Tabletop.js where if a user is timed out of their Google account, it will break Tabletop. One way to avert this is by installing and using Flatware.