1. What is the Layout?
  2. Why Would I Change the Layout?
  3. What is Required to Change the Layout?
  4. Where Does the First Layout Come From?
  5. Example Layout 1
  6. Basic HTML Table Tags Defined
  7. Example Layout 2
  8. Example Layout 3
  9. Creating a Customized Layout
  10. Saving the Layout
  11. Editing the Layout
  12. Uploading the Layout
  13. Deleting the Layout

1. What is the Layout?

The layout is an HTML description of the desired format, and the data is represented using a particular format Post'Em understands. You are not limited to using our default layout to display your data. Full text, graphics or any other aspect of HTML is permitted, to suit your needs. In the default layout, the labels used as column titles in the file sent to Post'Em appear as the table headings.

2. Why Would I Change the Layout?

Changing the layout allows you to determine the way the records are displayed, according to your needs. You might do this if you have a message that everyone in your class should be able to read, as opposed to a comment for a particular student. Another reason to customize might be having all scores for a particular type of assignment grouped together (e.g., all quiz scores and a quiz average in one table, while all other scores for that class appear in another). Post'Em allows you to change the display to fit your own idea of how your data should be displayed. This option does require more effort on your part, though.

Using a layout, you can use HTML to include other information before or after the individual student's scores, such as

3. What is Required to Change the Layout?

To change your layout from the default requires that you write the Hyper-Text Markup Language (HTML) code for your layout. It also means you accept the responsibility to make certain that your scores files are created and labelled in such a way to match your custom layout. To have any layout, you must submit a file that contains some labels, at a minimum. Having student data in the file will allow you to check your results more easily.

4. Where Does the First Layout Come From?

Post'Em automatically provides you with the default layout when you submit the first file.This default is displayed as a table, which has two columns, one with the labels for your data and the other containing the actual data for each student. This layout provides Post'Em maximum flexibility to process and display the data you send, and adjusts to show the changes you make.

5. Example Layout 1

To illustrate the default, here is an example containing three scores, Midterm 1, Midterm 2, and Final Grade. For brevity, we show data for three students only. The spreadsheet file will have Username, Midterm 1, Midterm 2, Final Grade as columns, and we save it as a comma-delimited text file. The file we send to Post'Em looks like this: 

 Username, Midterm 1, Midterm 2, Final Grade
 hwells, 89%, 84%, B
 bknight, 94%, 80%, B
 mbrand, 94%, 86%, A-
where we note Username appears as the first column label. The layout uses the labels in the submitted file, and the following syntax for variable names representing the student data, $#, where the # is replaced with the numbered position of the labels. These numbers must begin with Username being equal to 0. In HTML markup, the default layout for this file would look like:

<table border=5 padding=2>
<tr>
<th> Username </th>
<td> $0 </td>
</tr>
<tr>
<th> Midterm 1 </th>
<td> $1 </td>
</tr>
<tr>
<th> Midterm 2 </th>
<td> $2 </td>
</tr>
<tr>
<th> Final Grade </th>
<td> $3 </td>
</tr>
</table>
And the result would look like:

Username $0
Midterm 1 $1
Midterm 2 $2
Final Grade $3

6. Basic HTML Table Tags Defined

<table...></table> This is the main container for all the other table tags. Any other table tags will be ignored if they are not inside of table tags. By default tables have no borders, borders will be added if the border attribute is specified. Our default specifies a border five pixels wide. Padding is the amount of space between the border of the cells and the contents of the cells. Setting a cell padding of zero on a table with borders is not recommended as the edges of the text could touch the cell borders.

<tr...></tr> This tag stands for table row. The number of rows in a table is specified by how many tr tags are contained within the table tags.

<td...></td> This is a container for table data, and specifies a standard table data cell. Table data cells can only appear within table row tags. A cell can contain any of the HTML tags normally present in the body of an HTML document. The default alignment of table data is align=left and valign=middle. These alignments are overridden by any alignments specified in the containing tr tag, and those alignments in turn are overridden by any align or valign attributes explicitly specified on this cell. By default, text inside table cells can be broken up to fit within the overall cell width. Specifying the nowrap attribute for a td prevents line breaking for that cell.

<th...></th> This container signifies a table header. Header cells are identical to data cells in all respects, with the exception that header cells are in a bold font, and have a default align=center.

7. Example Layout 2

Reapplying these basic tags to the sample file, here is a custom layout that more closely resembles the spreadsheet file:

<table border=5 padding=2>
<tr>
<th>Username</th>
<th>Midterm 1</th>
<th>Midterm 2</th>
<th>Final Grade</th>
</tr>
<tr>
<td> $0 </td>
<td> $1 </td>
<td> $2 </td>
<td> $3 </td>
</tr>
</table>
<p>
The final grade is: $3
And the result would look like:

Username Midterm 1 Midterm 2 Final Grade
$0 $1 $2 $3

The final grade is: $3

Please note the syntax of the variables, and the fact that spelling is important. There are only two table rows now, the top one having the table headers, and the bottom one containing the variables that will display the data for each student. Also notice that the value for each student's final grade will appear in two places in this layout. With a custom layout, you have the freedom for a value to appear in multiple places if you desire.

8. Example Layout 3

For a more complex example of some of the possible ways that layouts can be used, see the following Example Layout.

9. Creating the Layout

  1. From the Post'Em Main Menu, select Create Layout and click OK.
  2. You will see a text box where you enter the HTML for your custom layout. It can scroll to display more text. Copying and pasting from an HTML editor or another document is the recommended way to enter your information here. You should enter only the portion of the HTML that would appear between the <body> and </body> tags. DO NOT enter the body tags themselves, or your display may not be what you expected. Post'Em will create the top and bottom of the HTML document for you.
  3. When you want to view the results of your HTML code, click the Preview button.

10. Saving the Layout

Post'Em will then display the data for the first student record for this class in your new layout between two red triangles. They will not be part of your layout, but are simply markers showing the beginning and ending of your layout.

  1. To make this new custom layout the one used to display the records for this class, click the Save button.
    Only by clicking this Save button will the default layout be replaced.
    You will get a confirmation that there is a new layout for that particular class.

If you do not wish to save this layout, you should use the Back button on your browser to return to the text box where you may edit your HTML layout.

If you do not want to make any changes to your layout, click Back again, or simply leave the Post'Em site, and the default layout will remain in effect.

11. Editing the Layout

After having customized your layout, you may continue to customize your layout as you wish.

  1. From the Post'Em Main Menu, select Edit Layout and click OK.
    You will see the current layout displayed for that class, and in the scrolling text box below it will be the HTML code for that layout.
  2. Edit the code as before and click Preview.
  3. Again, the actual change to this new custom layout will not occur unless you elect to the save this custom layout by clicking Save.

12. Uploading the Layout

Instead of creating the layout on-line, you can create it in a text file and upload it to Post'Em.

  1. From the Main Menu, select Upload Layout and click OK.
  2. Click Browse and double-click your layout file.
  3. Click Upload.

Uploading a layout will completely replace the existing layout.

13. Deleting the Layout

Having created a custom layout does not mean you cannot return to the default layout. This option allows you to return to the flexible default layout provided by Post'Em 

  1. From the Main Menu, select Edit Layout and click OK.
  2. You will see the first student record for the class your current layout.
    Scroll down and click Delete.
  3. You will be asked to confirm that you want to delete your custom layout.
    Click Delete.
    You will then see "Default Layout".
To summarize, you may create your own layout for displaying student records, but you are responsible for writing the HTML code to do this, and for ensuring that the files you send to Post'Em will be displayed properly by your new layout. At any time after customizing your layout, you may easily return to the default layout. Post'Em will never change your layout unless you specifically make such a request, and Post'Em confirms all changes made to the layout.