September 2012 Archives


| | Comments (0)

I'm prepping for a STEM Accessibility webinar and I am happy to announce that ANGEL does support MathML, at least for browsers that are able to display it. For accessibility purposes, my goal is to ensure that MathML is displayed properly in a version Internet Explorer with Math Player because that is the configuration that the JAWS screen reader supports.

Browser Support

Before testing you want to make sure you are working with the right browsers and have the right fonts and players installed. So for MathML you will need

  • Firefox 4+ (Best native support)
  • Internet Explorer 9 + MathPlayer 3
  • Safari 5.1+ (Limited native support)
  • MathML font like STIX (free)

Note that Chrome did not support MathML natively as of Sept 28, 2012.

Getting MathML Code

For the moment, I recommend using raw MathML code if you want to experiment. Where do you get MathML code? It can be exported an equation editor like MathType or MathMagic. You can start to learn more about these editors on my MathML Tutorial page.

BTW - The ANGEL equation editor default setting appears to insert an image based on MathML code, but it's still an image. This is OK, so long as you changed the ALT tag to be something understandable on a screen reader. Right now the default ALT tag is "mathml equation".

First Try: HTML Editor

My first attempt was to cut and paste sample MathML code into the ANGEL HTML Editor in source view. This works great for modern versions of Firefox and Safari, but unfortunately NOT Internet Explorer. Sigh.

Second Try: Upload HTML 5 File

My second try was to upload an HTML 5 with MathML file into ANGEL via a File Upload. This did work, but I had to make sure I was using the right MathML markup for Internet Explorer, specifically "namespace mark up" in which the initial <math> tag includes the link to the MathML specification. That is:

<math xmlns=''>

CSS and MathML

If you really want to impress yourself, you can combine MathML with CSS. For instance, I use CSS to enlarge equations embedded in the MATH tag to font-size: 1.5em as follows:

math {font-size: 1.5em; font-style:normal}

Ready for Prime Time?

The fact that I got a MathML posted into the ANGEL environment is good news, but it still requires the developer/ID/instructor to be comfortable working with HTML source view.

If the instructor is NOT comfortable with this, but can use an equation editor, the best option might be to export an equation as an image and insert it with an ALT tag. Fortunately, It is possible to insert images into ANGEL with an Alternative Tag.

Are Certificates Badges?

| | Comments (0)

The other week I attended a webinar run by the fine folks at the Turnitin Academy and they thoughtfully sent me a certificate of completion. At this point I thought "Is this certificate just a big rectangular badge?" at which point I realized I had the inspiration for another blog post.

Art Work and Tone

One way in which the two differ is the presentation or artwork style. Traditionally, a badge is relatively small and may have some sort of symbolic artwork on it. Here are some examples from Mozilla School of Webcraft, FourSquare and Kyle Peck. Styles of awards and award merit language arrange from very professional to 100% outrageous ("Player please?" Oh, please!")

In contrast, certificates are much more serious in tone. They often feature old-fashioned type faces and official logos (and signatures). The content typically marks the user's accomplishment and the time the certficate was issued in very formal language (sometimes in Latin). They are meant to be official acknowledgements from respected institutions that some achievement has been noted.

Already the styles are very different in terms of tone. It shouldn't matter, but it's something to consider when considering badgification.

I should add here that a badge logo could go to a certificate type description. They don't have to be mutually exclusive.


Something else to consider is granularity. In many systems, a badge is awarded for a specific accomplishment, while certificates may be awarded for a larger scale accomplishment.

For instance, the TWT Certificate program awards one certificate for completing a portfolio which contains a set of elements (e.g. a teaching philosophy statement, example presentation...). But could a set of supplementary badges be included? I was thinking of one for accessibility, but we could include multimedia creation, exceptional use of a tool like Voicethread, ANGEL or the blogs or something similar. Badges could be a way to further personalize the experience or even provide stepping stones to the final certificate.

Badges and Certificates Together

As with any new system it's worth looking back to previous analogues to see if we can learn anything. Certificates are a known model here at Penn State. What should be adapted for badges? What should be discarded?