A Tool to Remove SPAN tags, Embed Youtube and Open Link in New Window

A Tool to Remove SPAN tags, Embed Youtube and Open Link in New Window

As an instructional designer, sometimes I face with replicated and tedious works. For example, checking URLs on Blackboard, embed Youtube videos, make the link to open in new window etc. These works require frequent interactions with the Blackboard. A lot of manual works and repeated tasks are involved. These works may be fun at the beginning. But if you keep doing it for many times, it is not fun frankly. Therefore, I am always looking for ways to make these works easier and simple. Software programming is a great way to solve these types of problems. I have developed a Python program to solve following problems:

  • Remove messy SPAN tags auto generated by the text editor;
  • Embed Youtube Videos;
  • Make the link open in new window
  • Transform the Youtube URL into the hyperlink

Remove messy SPAN tags auto generated by the text editor

Usually, Blackboard happens to auto generate many unnecessary span tags whenever text is edited. These messy SPAN tages makes the HTML review overwhelming. Sometimes, it is necessary to work with HTML codes. For example, when the time to embed Youtube video, the embed code has to be inserted into the HTML codes. In order to make the HTML code clean and in order, I have created a code that can automatically clean all unnecessary SPAN tags from the HTML codes.

Embed Youtube Videos

The typical process of embedding the youtube video is as follow:

  1. Open the link on Youtube
  2. Click Share button bellow the video, then click Embed tab, then copy the iframe code.
  3. Find a location in the HTML code and paste the iframe code into the destination.

I automated these process by the code. So that we don’t need to repeat above steps. The code is able to check if the Youtube is already embedded. If it is not embedded, the program will embed the Youtube video. The code is also able to skip the youtube that is unavailable to embed and notice you.

Make the link open in new window

On Blackboard, if the URL link is set to “Open in this window”, it would redirects to Blackboard internal site. Therefore, for the convenience of users, we always make sure that the URL link is configured to “Open in New Window”. We click on each URL and check if it is in right configuration. If it is not, we edit it to “Open in New Window”. It is a repeating tedious process. I wrote the code to automate these steps. The code is able to go through all the external links one by one, and check and make sure to set those necessary links to “Open in New Window”.

Transform the Youtube URL into the hyperlink

It is not convenient to show Youtube URL into the text. It is always better to use a hyperlink instead. In this part, the code will transform all URLs into hyperlink. For instance, if we have a URL like:

We want to transform this URL into the hyperlink as following:

The text of the hyperlink is actually, the Youtube title.

Guide for using the code

First of all, make sure to successfully install the python code on the Github repo. I have instructions on how to install necessary dependencies in order to run the code.

Go to your text editor and click HTML to see all HTML codes. Then we select all HTML codes and copy it.

We double click the “bb_tools_UI.py” and open the program interface. It should look like below image:

Then, we paste the HTML code into the first text box. Afterward, click the button . The new html code will be generated in the second text box. You just need to copy all the new html code and paste it into the Blackboard. The new html code is generated solving three tasks mentioned in above. In the bottom, the code will also generate a description which includes how many SPAN tags are deleted, how many “Open to new Window: are handled and how many Youtube videos are embedded.

The tool will make your instructional design work more efficient. Enjoy it.


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s