Monday, June 9, 2008

Adding Widgets to your Webpage

You may already be familiar with, a long-established and really excellent online quizzing site. It costs nothing for students to use the activities at, and there is a low yearly fee for instructors to create unlimited games, quizzes and classes online. I've been using for close to ten years now, and in my experience it is still the best option for developing online quizzes and learning activities. They have a great 30-day free trial for instructors if you want to give it a try. If you decide to keep using the service, the fee is $49 per year (with group discounts available for schools).

There are so many great features of which I'll cover in some other posts. For today, I am going to talk about the Quia Class Pages. As an instructor, you can create as many Class Pages as you want. You can use a Class Page for a specific class, adding Quia activities to the page. You can also create a Class Page to share general information with your students, such as messages from you, links to websites, etc. That is what I am going to do here, creating a Class Page where I will share the Greek and Latin proverbs, with new proverbs displayed automatically every day of the year - without me having to do anything at all! The script does all the work, so that there is new content at the page every day of the year. If you are curious to see the final product, here is the page: Greek and Latin Proverbs of the Day.

Select widgets. First, select the widget (or widgets!) you want to add to your page. For this tutorial, I'll be adding the Greek Proverb of the Day widget, and the Latin Proverb of the Day widget, which you can find at the website. I'll keep this website open in one window, ready for me to use while I create my Page in another window.

Create Class Page. In another browser window, log in to as an instructor. That will take you to the Instructor Zone. To build a webpage, you will want to select the Classes area, and then click on the Create Class Page button.

To create the page, you will fill out a simple form, starting with the name you want to give your page. As you work your way through the form, you will eventually come to a big "Message" box where you can type the information and materials you want to share with your students. This is where you can paste in the javascript for the widget you want to add! So, go back to the page which you have open in another browser window, and copy the script content from the box on that page. Then, paste it into the Message box here at the page (click on this image for a larger view):

Formatting your Message. Notice that this Message box at is not a "WYSIWYG" editor, where you see the formatted results immediately. Instead, you are actually pasting in the raw HTML code. Your students will see the results of this code, not the code itself. In effect, you are being a computer programmer right now, putting commands into the Message box! When someone looks at the page in a web browser, the web browser will carry out the commands, and they will see the results.

Because this is an HTML box, you may want to insert some special HTML codes to format what you have typed. In HTML, every command goes inside "wickets," which are the less-than and greater-than signs on your computer. For example, if you want to insert a horizontal line in-between multiple widgets that you are inserting into the page, you need to type the command HR which stands for "insert Horizontal Rule" - and make sure you put it in-between the wickets. You can also type the command BR which stands for "insert line BReak"). To make something bold, just put a B at the beginning of what you want to type, and make sure you put a /B at the end (B stands for starting bold, and /B means to stop the bold formatting). Here is a super-quick guide to some of the HTML commands you might want to use to format your Message box (click on this image for a larger view):

Save and view page. When you are done formatting your message, make sure you click on Save Changes at the bottom of the page to save your work (you can always come back and edit the page later). When you save the page, the system will then give you the link to your finished product! For example, here is the Quia Class Page I created which displays the Greek and Latin proverbs, with new proverbs each day:

This is a resource not just for my own students, but for anyone who is online. The webpage address which Quia has created for me - - is something I can share with everybody! Although I need to log in as a Quia instructor to create the page, there is no log-in of any kind required to view the pages which I create. Enjoy!

Some dynamic content may not display if you are reading this blog via RSS or through an email subscription. You can always visit the How-To Tech Tips blog to see the full content, and to find out how to subscribe to the latest posts.