Monday, 7 September 2015

Add visually-rich interactive timelines with Timeline JS to your Moodle Course


Timeline JS is an open-source tool that enables you to build visually-rich interactive timelines and is available in 40 languages.
Timeline can automatically pull in photos, videos from YouTube or Vimeo, tweets, Wikipedia entries, and many other media types.

Create the timeline

  1. Click here to open the JS Google Spreadsheet template you will need to create your timeline. Please note that you will need to login to Google account to access the file. If you have never used Google Drive then you will see a confirmation screen (see below). Click Continue to attach your Gmail account to create a Google Drive.

  1. Once you have logged into Google Account you will see the file appear in your Google Drive inbox:
  2. Click to open the spreadsheet has loaded click ‘Use this template’ (top left corner).
  1. Once the spreadsheet has loaded click File from the menu option (top left) and select ‘Make a copy…’ and then rename the file.
  1. Amend the existing content in the example with your own dates, titles, links and information to your timeline. Leave the headings in row 1 as they are.
Start date and end date - 
  • To specify a year only: set your event for January 1 of that year with no specified time.
  • To specify a month only: set your event for the first day of the month with no specified time.
  • To specify a day: fill in all spaces as normal and choose to specify a time.
  • Note: if your event happened on January 1 of the year, you need to include a time to let Timeline JS know you want the date displayed. Similarly, if your event occurred on the first day of a month, you need the time or it will display with the month only.
  • Although adding an end date is an option, it’s not necessary. Leave it blank if you don’t want to include an end date.

Headline -
  • Including a link: If you are referencing an ongoing project at your newspaper, you may want to include links to past stories in the headline.
  • Adding links needs to be done in HTML. Here’s the code, just copy and paste: <a href=”www.yourURLhere.com”>Your headline text here</a>
Text -
Include a few lines of text about the event. Timelines work best when they centre around a project that is date-driven, with each event on the timeline leading up to a climax. Including major events and minor events with context is the best way to go.


Media - 
Only put what you really need so you do to overwhelm your viewer.
  • Wikipedia: include a link to the Wikipedia article. Timeline JS pulls in the title of the article and the first few lines and displays them next to your date, headline and text.
  • Video: you can pull video from YouTube, Vimeo or Dailymotion with the link.
  • Block quotes: These can be great if you want to feature a specific story. Using a bit of HTML, you can input some text and have a quote from a source to go alongside the text. You can also add a link to the article in the text section (see code above). To feature a quote in the media section use the following code in the media field: <blockquote>”This is where your quote goes.”</blockquote>
  • Website: grabs the front of a website. Paste a link in the media field. Remember that websites changes so if you want the page as displayed you may be better suited to insert a screen capture instead.
  • Google Map: add a link to the map in the media field.
  • Flickr photo: add a link to the photo in the media field.
  • Tweeter: paste a link to the individual tweet (not the user’s profile) in the media field. Timeline JS will display the tweet along with the person’s profile picture, name and username in the media section with your text to the right.
  • SoundCloud: add a link to the track in the media field.
  • Mobile pictures: to include an Instagram picture or a twitter picture, paste the link to the individual status into the media field.
  • A document: any type of Google document (PDF, DOC, PPT, PSD). Add a link in the media section and make sure to publish the document to the web.

Media Credit -


This section gives creators an easy way to credit the sources of the media in their timelines. For Flickr or YouTube media, credit the account at the least or the person who made the video if you know his name. If you use audio, credit who is speaking.

Media Caption -

Most of the time, you don’t need a media caption. Use it if you need to specify who is in a picture or video.

Type -
If you have a title slide, put “title” in the blank in this column. Otherwise, leave it blank.

Tags -
In Timeline JS, there is a general slider at the top and a smaller timeline at the bottom with more dates included. Adding tags in this section divides up the bottom section into rows. If you have two tags, there will be two rows with each post aligning its self vertically with the correct rows. The tag will also appear at the top of the event next to the date in the slide. You can have up to six tags.


  1. Once you have added your content to the spreadsheet go to the File menu and select Publish to the web.
  1. Copy the spreadsheet URL/web address link in the Publish to the web pop up box. Ensure the Automatically republish when changes are made has been selected. You only need to do the embedding and publishing once. After that, you can update the spreadsheet (via Google Drive) and it will automatically update the timeline.
  1. Navigate to the Timeline JS website and paste it into step 3 - ‘Make a timeline’ process.
  1. Click Preview your timeline in the above website link, which will display your timeline.
  2. If you are happy with the preview of your timeline copy the embed code which you can use in Moodle, a website or blog.
  1. Keep updating your timeline spreadsheet and the changes will be reflected in the data visualisation.

Embed timeline into Moodle course



  1. Navigate to your course and select Turn Editing On

2. Click on the Add an activity or resource.

3. Then select Label option, and click Add button.

4. Click on the Toolbar option to display all the options available for creating a label.

5. Click on Edit HTML Source option.

6. Paste the embed code from step 10 in previous section in the HTML source editor pop up box and then click update.

7. Click on Save and Return to course to finish.


Twitter: @SOASBLETech

Monday, 10 August 2015

TitanPad – collaboratively work on a document simultaneously in real time


TitanPad is a free simple tool that facilitates people to work on a document simultaneously online without the need for account creation.
TitanPad allows you to easily create a new document or private space that can be shared using the unique url, once the person clicks your link they enter their name and can begin writing. Additions and edits to the document are made in real time and to make it easy to identify track changes each collaborator is allocated a different colour. Changes to your document are automatically saved however you also given the option to save changes whenever you like as well as having the option to revert to previous versions of the document if necessary.
There is a simple chat feature that allows group members to communicate with other fellow collaborators.

Please note that documents can only edited by those who have the unique link therefore to keep the working document private share those involved in the collaboration.  If you want to enforce security of your document then it is recommended that you create an account to obtain your own private space.
Depending on the activity of each ‘pad’ there is an automatic deletion after two weeks from when it was last accessed or when an amendment was made.


1. Create a document
Navigate to www.titanpad.com and click on the Create public pad button:

You will then be presented with the following screen:

The URL address is unique to your pad which you can share with fellow collaborators.

2. Get started
Insert your name and change the colour if necessary as you are automatically assigned.
3. Share your Pad
Click on the on the Invite link to view the sharing options which include a sharable link and sending email invites directly from Titanpad:

4. Communicate with fellow collaborators
A simple colour coded text only chat feature is available along the right hand side of the pad:

5. Text editing tools
Along the top of your pad you will notice the usual text editing tools including bold, italic, underline, strikethrough, bullet list, indentation, save, undo and redo edits as well as removing the colour coding of edits:


6. Pad Options
The Pad Options menu allows you to remove the colour coded collaboration highlights in the documentation as well as the numbers in the left margin:

7. Import / Export
Documents can be created from scratch or by using the Import feature which allows you to extract text from HTML, word or RTF files. Whilst the export feature allows the finalised document to be downloaded in the form of html, bookmark file, as an open document, plain text, PDF or word file.

8. Saved revisions
Although TitanPad saves automatically you can also create save points, which is useful if you make a major revision that you can revert back to if you change your mind at a later date. In the example below I can see there are two major edits with the ability to view the edit, restore before the edit or accept the changes by clicking the Save now button.

9. Time slider
One of the features that caught my eye was the time slider which allows you to view past document revisions in the order that they occurred.  You can either ‘play’ the slider to view the additions/edits as they took place in the document or you can manually move the timeline to specific points. Save now points are highlighted on the slider as yellow stars.
As well as viewing the changes you can move the slider to a specific point and download the document at that specific version.


Final thoughts
TitanPad offers a quick and easy to work collaboratively on a document without the need to create accounts thus saving time from any registration process usually associated with most online tools.
It is a tool that can facilitate online brainstorming sessions with multiple members that collaborate together as a group in real ideal making it ideal for students carrying out group work.

It’s best to keep in mind that TitanPad is a text only tool therefore you cannot create work with spreadsheets, charts, tables or images.  However this does not stop it from being an effective tool. Here are some ideas on what you can use TitanPad for:
- Work collaboratively with others on one document in real time
- Brainstorming ideas and lists
- Sharing pieces of information when working in a group or collaborative environment
- Improving important typing and English skills as well as critical thinking
- Task management
- Story writing
- Meeting minutes

Twitter: @SOASBLETech
SOAS BLE Blog: http://soasble.blogspot.co.uk

Monday, 27 July 2015

Feedwind – create a scrolling RSS feed widget from multiple content sources


The tool of the week is Feedwind which is a free RSS widget that adds dynamic content from multiple RSS feeds from various sources utilising filters to focus on your preferred topics or keywords.
An RSS feed allows you to receive updates from various sources that is directly delivered to you without having to visit those websites.
In this blog I will show you how you can add an RSS feed in your Moodle module, meaning that you can have dynamic content that is changing on a regular basis in your module. Please remember that the frequency of the RSS feeds depend on how regular the source is updated, so choose a website that is active!

Create your widget

1. Obtain RSS feed or URL address
Copy the RSS feed link or the URL address of the website that you wish to create a RSS feed from. For example on the BBC new website you will find the RSS feed link on the right hand side of the page:

Clicking the RSS News Feed will take you to the RSS feed page from where you can copy the link from the URL address bar:

2. Add the feed
Navigate to feed.mikle.com and paste the copied link into the Feed URL field and then click the Add Feed button:

In the above example I used the generic SOAS website and Feedwind was clever enough to pick up the news feed from the webpage

3. General settings
Feedwind has whole host customisable options for your widget from specifying the widget size, font settings, if want a scroll bar or auto scroll, adding image thumbnails and more:

4. Feed Title
This setting allows you to manually enter a title for your feed to replace the one that is created automatically as well as setting an image and background colour:

5. Preview
As you amend the settings Feedwind creates an almost instant preview of how the widget will look:

6. Copy widget code
Copy the HTML code for you widget (situated under the widget preview):

Add widget to Moodle

1. Navigate to your Moodle course and switch to editing mode.

2. Select HTML from the dropdown menu in Add a Block:

3. You will notice a New HTML Block has appeared on your course. Click on the actions icon and select Configure (New HTML Block) Block:

4. Enter a title for the HTML block and then click on the edit HTML source icon < >.

5. Paste the copied HTML code from Feedwind in the pop up HTML source editor box and then click the Update button:

6. Click the Save changes button to finish. You will now see the widget populated with content from your selected website:


Final thoughts
For those of you who are regular readers of this blog will remember I wrote a blog post back in April for another RSS feed creator called Page2RSS which offered a simple solution to create RSS feeds for webpages however it lacked in offering RSS subscriptions. I feel Windfeed takes that extra step to offer something that is more dynamic, eye catching and customisable.
If you are not already using RSS feeds in your courses or website why not give Windfeed a try to see how your Moodle pages could be freshened up?

Twitter: @SOASBLETech

Monday, 13 July 2015

Zotero - software that helps you save, manage, and cite research sources

Zotero is free a Firefox add-on as well as a standalone desktop tool that collects, manages, and cites research sources. 
With Zotero you can attach PDFs, notes and images to your citations, take snapshots of web pages, organise them into collections for different projects, and create bibliographies. In addition you it updates itself automatically periodically to work with new online sources and new bibliographic styles.
The tool automatically senses content in your web browser, facilitating a one click process to add items to your personal library. 


1. Installing Zotero
Navigate to www.zotero.org and from the homepage click on the Download Now button (situated top right).
From the download screen you are offered two options – 
- Zotero for Firefox (an add-in to Firefox). Once installed you will see in the top right corner of your Firefox window the Zotero buttonClick it to view or hide your library of saved citations. Please note that Zotero continues to run when Firefox is open, whether or not you are viewing your library. 

- Zotero Standalone (an Zotero icon will appear on your desktop)


2. Adding references to Zotero
References can be added to Zotero either manually, by unique record identifier or directly from online sources.
You can manually add items by click on the green plus icon and then selecting the type of reference that you require. 

From the pop window enter the information in the available metadata fields for your chosen item as necessary.

3. Adding items by identifier
Many documents online have a unique identifier, such as an ISBN for books, a DOI number for journal articles or a PMID number for articles published on PubMed. If you know one of these numbers you can ask Zotero to look for the reference online and import the citation.
Click on the add item(s) by Identifier icon, type in the unique number and press enter.

If Zotero finds the reference it will import all the information directly to your library, like so:

4. Adding items from online searches
Zotero can import from web pages, online library catalogues and databases. As you search, a ‘Save to Zotero’ icon appears in the far right of the address bar. Click on the icon to import the reference to Zotero.



 The blue icon represents a book reference

 The white paper icon indicates you are viewing a journal article

 The yellow folder allows you to save multiple references from same page, click on the icon and select references from the pop-up window.
5. Archiving a web page to Zotero
Although Zotero cannot automatically capture citation information from regular web pages, but you can still add them to your Zotero library.

When viewing the web page you wish to archive click on the Create new item from current page icon in Zotero:

As well as creating a record for the page in your library with basic information about the page and the date of access, Zotero also adds a copy of the page as a snapshot in a sub-document. 
To view a copy of the page click on the expand icon to see a copy of the page, which includes the page's text and images. This is particularly useful if the page is removed later, or if you are offline, you will still be able to view your copy.

6. Adding files
Files can be added to your Zotero library as either copies or links. To add a file click on the paperclip button at the top of the centre column, and choose either Attached Stored Copy of File… or Attach Link to File… 












These options can also be found when you right-click an item and under the Add Attachment menu:

7. Taking notes
With Zotero you store notes in your library, which are synced along with item metadata, searchable, and support HTML formatting. 

To add a note right-click an item and select Add Note, or add it in the right column under the Notes tab. 

The Firefox add-in allows you to create notes directly from the webpage you are viewing in Firefox. To do this, first highlight the text you want to copy into a note, right-click and select Zotero in the pop-up menu, then select Create Zotero Item and Note from Selection. This will create a new Web Page item in your library for the visited webpage, with a note containing the selected text.

Final thoughts
Zotero offers a easy way to collect research papers from the internet, attach PDFs, find relevant articles in your library, and sync it across PCs. Utilising the Microsoft Word/LibreOffice plugin, Zotero takes the stress out of citations and bibliography by doing all the manual work for you. This is a free tool that students must try out!

More information about Zotero -
Online tutorials
Useful guide by Jason Puckett (Georgia State University)




Twitter: @SOASBLETech