Help students more effectively navigate transfer guides

Transfer guides are designed to help students make a more seamless transition between institutions. With the help of Groups and Group Reports, you can leverage your real-time TES data to create pre-formatted, user-friendly reports to display to visitors of your Public View.

Sometimes transfer guides can get lengthy – there could be several course options or ways to fulfill a requirement that students need to be aware of. In this article, Product Solutions expert John Panzica shows you how to add navigation links to your Group Reports using basic HTML. Help students more easily and effectively navigate the information they need with this TES Tip.

Special thanks to Alfredo (Freddy) Estrada from the Illinois Institute of Technology for the “spark” that inspired this article.

---

Adding navigation to your Group Reports in TES

The concept of a bookmark or an anchor in a document or on a webpage is not a new idea. But did you know that you can also incorporate this concept into your Groups and Group Reports in TES? You can leverage HTML anchors to add quick navigation to your Group Reports.

Here is a brief Anchor Navigation demo video showing what I am talking about so you can see what I mean by navigation.

The “anchor” is simply a heading style that you name.
The HTML pair for a header would look like this: <H1></H1>ⁱ

By adding an ID parameter, you can name it.
To name the header, add the following: <H1 ID="Name"></H1>
You can also add a label between the tags: <H1 ID="Name">Label</H1>
This is how that might potentially display in a web browser (depending on your site’s CSS):

Label

Ipsum Lorem Quantem Nobellum Ipsum Lorem Quantem Nobellum Ipsum Lorem Quantem Nobellum Ipsum Lorem Quantem Nobellum Ipsum Lorem Quantem Nobellum Ipsum Lorem Quantem Nobellum Ipsum Lorem Quantem Nobellum Ipsum Lorem…

Add an anchor to the Groupⁱⁱ

You can add an anchor to a Group either in the Group Public Note or as part of the Group Name. I like it in the Name, myself, but you can add it in the Public Note if you prefer. Adding it to the Name will make the list of Groups look a little funny, however, I prefer to add the anchor to the Name so that when you navigate to it, the Group Name will display on the screen (rather than scroll down to just below it). I also found that I prefer Header 5 (H5) for my Group Names because it is the closest to the size they appear without any header formatting. H5 doesn’t include bold, though, so I add back the bold. I will show that in the example that follows. Your Group Names will be bigger (and more prominent) if you add H4, H3, H2, or H1. If you do add a more prominent heading style to the Group Name, you may also want to consider adding it (or the one above it) to the Report Name, as well, so that the Report Name doesn’t get overshadowed.

Something to keep in mind. The Public Note text and, more importantly, the Group Report SUBHEADER TEXT have character limits. The link to these anchors can be lengthy because TES uses complicated URLs to protect against screen scrapers and bots. You can visit tinyurl.com/app to simplify the complex URL. That will allow you to fit additional text within the character limit.

Add an anchor (TOP) to the Group Report (Subheader Text)

I wanted to add a “Return to Top” link to each Group, as well, so that you could jump back up to the list (of course, you can also just scroll back up or use CTRL+Home). I added an “empty” anchor to the Subheader Text in the Group Report. I call it “empty” because I just insert the on and off tags – I do not add any text between them:
<H6 ID="TOP"></H6>

Copy the Group Report URL and add the “TOP” anchor reference

Next, I open a preview of my Public View and navigate to the Group Report. I need to copy the full URL.
In my example, the URL is:

https://tes.collegesource.com/publicview/TES_publicview03_group_report.aspx?sid=14589&rid=a4d2bc7b-7c09-4d1e-b1cb-0c32c3a30d2f&aid=bccc5c4d-38c3-4f0c-8a09-5e3abc8261cd&cgrid=1488

I then need to add the anchor on the end with a hashtag (pound sign symbol):

https://tes.collegesource.com/publicview/TES_publicview03_group_report.aspx?sid=14589&rid=a4d2bc7b-7c09-4d1e-b1cb-0c32c3a30d2f&aid=bccc5c4d-38c3-4f0c-8a09-5e3abc8261cd&cgrid=1488#TOP

Simplify the reference link at Tinyurl.com

I paste this into the Your Long URL box at TinyURL and create a (significantly) shorter URL:

You can also rename the new URL at TinyURL so that you can have something easier to remember. In this case, I named it Ret2List. If the name has already been taken, you may have to alter it slightly to settle on a unique one:

I click the Copy button.

Add an anchor to the Group Name

I go back to my Equivalency Groups and open the Social and Behavioral Sciences Group. I click the Edit Group Header button to open the Edit Group Detail box. I then add an anchor to the Group Name. The anchor name I have chosen is “SBS” – that is what we will need to remember later when we are linking to it in the Group Report:

<H5 ID="SBS"><B>Social and Behavioral Sciences</B></H>

Add the TinyURL to the Group Public Note

I click down to the end of the Public Note and enter a line break tag (<br>). I add the anchor reference. I paste in the (copied) TinyURL. I add the text “Return to list” and then I close the anchor reference. I wanted it to be a little smaller and in italics, so I add those tags, too:

Now the group will have a link to jump back up to the top, right above the list of equivalencies:

Copy the URL for the Group Report and add the “SBS” anchor reference

Next, I go into the Public View and navigate to the Group Report. I need to (re)copy the full URL.

Again, mine is:

https://tes.collegesource.com/publicview/TES_publicview03_group_report.aspx?sid=14589&rid=a4d2bc7b-7c09-4d1e-b1cb-0c32c3a30d2f&aid=bccc5c4d-38c3-4f0c-8a09-5e3abc8261cd&cgrid=1488

I then need to add the (Group Name) anchor on the end with a hashtag (pound sign symbol):

https://tes.collegesource.com/publicview/TES_publicview03_group_report.aspx?sid=14589&rid=a4d2bc7b-7c09-4d1e-b1cb-0c32c3a30d2f&aid=bccc5c4d-38c3-4f0c-8a09-5e3abc8261cd&cgrid=1488#SBS

Simplify the reference link at Tinyurl.com

I return to tinyurl.com and create a (significantly) shorter URL (and rename it to ASUSBS):

As you can see in the screenshot above, I have already added an anchor for my Mathematics and my Arts and Humanities Groups.

After renaming the Social and Behavioral Sciences TinyURL I click the Copy button, again.

Add the SBS anchor to the Group Report (Subheader Text)

Next, I return to TES and open the Group Report. I click the Edit Group Report Header button to open the Edit Group Report Detail box.

I add the anchor reference with the (custom) TinyURL into the SUBHEADER TEXT:

That adds the label to the list:

Navigation Added!

Now when you look at the Group Report in the Public View, you can jump down to that section (and back up to the list)!

If you would like to add the navigation to your Group Reports, you can certainly do it after the fact with your existing Group Reports as I have shown above. Or you can plan ahead by adding them as you build your new Groups and Group Reports. For detailed instructions, view a step-by-step ‘how to’ on adding navigation to your Group Reports.

 

---

Footnotes

[i] H1 is Header Style 1, the first-level header in the hierarchy. There are six levels with Heading 1 being the largest and most important, and Heading 6 being the smallest. Size, spacing, and appearance are controlled by each website’s Cascading Style Sheets (CSS), so this illustration is representative.

[ii] You don’t have to add an anchor if you would like to just add a reference to the Group Detail Section. It would look something like this (where everything after the # symbol is the Group Detail reference):

<a href="https://tes.collegesource.com/publicview/TES_publicview03_group_report.aspx?sid=14589&rid=a4d2bc7b-7c09-4d1e-b1cb-0c32c3a30d2f&aid=bccc5c4d-38c3-4f0c-8a09-5e3abc8261cd&cgrid=1489#gdvCourseGroupReport_gdvCourseGroupReportDetail_1">Arts & Humanities</a>