Phiddling With Code

I don’t want to get your expectations up too much, but a demo of the first version of the MCQ script can now be seen at http://learnapage.com/mcq.html. A screenshot of one of the question types is shown below.

Learnapage via kwout

N.B. This is still a very early version. I’ll probably be changing the html markup, style sheet and javascript shortly. Still, feel free to take a look at the sources.

I’m going to need to select item properties in the MCQ script, e.g. to hide all feedback when the page first renders. jQuery provides a convenient way of doing this using an attribute equals selector.

Here are some examples:

$('div[itemprop="name"]');
$('div[itemprop="stem"]');
$('div[itemprop="feedback"]');

Here is some markup for a case where a single piece of feedback covers all the distractors.

<div itemscope itemtype=”http://learnapage.com/mcq”>
  <div itemprop=”name”>Name of the question</div>
  <div itemprop=”stem”>The stem of the question</div>
  <ol itemprop=”options”>
    <li
       itemscope
       itemprop=”distractor”
       itemtype=”http://learnapage.com/option”>
      <div itemprop=”text”>The text</div>
    </li>
    <li
       itemscope
       itemprop=”key”
       itemtype=”http://learnapage.com/option”>
      <div itemprop=”text”>The text</div>
    </li>
    <li
       itemscope
       itemprop=”distractor”
       itemtype=”http://learnapage.com/option”>
      <div itemprop=”text”>The text</div>
    </li>
    <li
       itemscope
       itemprop=”distractor”
       itemtype=”http://learnapage.com/option”>
      <div itemprop=”text”>The text</div>
    </li>
  </ol>
  <div itemprop="keyfeedback">
    This is the feedback for the key.
  </div>
  <div itemprop="distractorfeedback">
    This is the feedback for the distractors
  </div>
</div>

In this case the feedback is moved outside of the option list and is contained in divs with item properties “keyfeedback” and “distractorfeedback”.

Here’s some sample MCQ markup with no feedback. In this case the learner is only told whether their selection is correct or incorrect.

<div itemscope itemtype=”http://learnapage.com/mcq”>
	<div itemprop=”name”>Name of the question</div>
	<div itemprop=”stem”>The stem of the question</div>
	<ol itemprop=”options”>
		<li
			itemscope
			itemprop=”distractor”
			itemtype=”http://learnapage.com/option”>
			<div itemprop=”text”>The text</div>
		</li>
		<li
			itemscope
			itemprop=”key”
			itemtype=”http://learnapage.com/option”>
				<div itemprop=”text”>The text</div>
		</li>
		<li
			itemscope
			itemprop=”distractor”
			itemtype=”http://learnapage.com/option”>
				<div itemprop=”text”>The text</div>
		</li>
		<li
			itemscope
			itemprop=”distractor”
			itemtype=”http://learnapage.com/option”>
				<div itemprop=”text”>The text</div>
		</li>
	</ol>
</div>

My first attempt at MCQ markup considered only one possibility for giving feedback; unique feedback for every option. However, there are other posssibilities.

• No feedback (other than a correct/incorrect indicator).
• A single feedback block displayed irrespective of the answer given.
• One feedback block for the key. Another covering all distractors.

I think I’ve covered all the bases there, but will give it some more thought.

This is my first attempt at marking up a multiple choice question using microdata. Now this is very rough, I need to give more thought to the way that I’m dealing with feedback and the markup is based loosely on the examples on schema.org rather than a thorough reading of the W3C microdata spec.

<div itemscope itemtype=”http://learnapage.com/mcq”>
	<div itemprop=”name”>Name of the question</div>
	<div itemprop=”stem”>The stem of the question</div>
	<ol itemprop=”options”>
		<li
			itemscope
			itemprop=”distractor”
			itemtype=”http://learnapage.com/option”>
			<div itemprop=”text”>The text</div>
			<div itemprop=”feedback”>Some feedback</div>
		</li>
		<li
			itemscope
			itemprop=”key”
			itemtype=”http://learnapage.com/option”>
			<div itemprop=”text”>The text</div>
			<div itemprop=”feedback”>Some feedback</div>
		</li>
		<li
			itemscope
			itemprop=”distractor”
			itemtype=”http://learnapage.com/option”>
			<div itemprop=”text”>The text</div>
			<div itemprop=”feedback”>Some feedback</div>
		</li>
		<li
			itemscope
			itemprop=”distractor”
			itemtype=”http://learnapage.com/option”>
			<div itemprop=”text”>The text</div>
			<div itemprop=”feedback”>Some feedback</div>
		</li>
	</ol>
</div>

I’ll be refining this over the next couple of days, prior to writing some javascript to manage the interactions.

In a previous life I was a Learning Technologist at a couple of reasonable prestigious universities in the UK. In that role I was responsible for helping academics put together online learning materials and assessment systems. One concern that troubled me throughout that career was the focus on the institution rather than the learner.

Security and the protection of intellectual property was always of great concern to various parties at different levels in the managerial hierarchies of the institutions. Less so to the people at the actual coal face. Lecturers often didn’t care who read their notes, as long as they were at least read by some of the class. Students didn’t care about the rich set of unvisited features tucked away in the depths of an institutional VLE, CMS or other TLA; as long as they could get quickly to the content they need for their course. Unfortunately institutions often allow internal issues to get in the way of convenience, leaving students to navigate through labyrinthine structures to get to their course notes. In the worst case I’ve seen, you actually had to know which virtual room to visit on which virtual floor of which virtual building on the virtual campus to open the virtual drawer of virtual filing cabinet to get your notes.

The same face-palming clumsiness is often seen in the area of self assessment. The systems are just too complex. Institutions love measurement but the measurements are taken to extremes. Recording every interaction every student has with every system is a purposeless waste of time if the statistics gathered are never interpreted or used in any meaningful way. While there is value in formal assessment, in too many cases self assessment questions are locked away in proprietary question banks with inappropriately limited access.

My belief is that well composed self assessment questions with well written feedback are a benefit to students, and should be displayed in a format that is easily searched, copied and shared. Standards like QTI are well suited to the purpose of exchanging question banks within and between institutions, but are of little direct use to students who cannot gain access to the source and if given access would not know what to do with the complex XML files.

For a couple of years I’ve had an alternative approach to sharing questions knocking about at the back of my mind. With widening browser support for HTML 5 and inspiration from the launch of schema.org I’ve decided to actually do something with those ideas. To that end I’m setting up a side project, Learnapage, where I’ll be experimenting with simple HTML 5 markup for a variety of different question types and developing a set of javascript libraries and CMS plugins to support the markup.

I’m going to keep a development log going in this blog under the category Learnapage but will be setting up another domain for end user downloads, documentation and tutorials.

Watch this space and wish me luck.

I love it when I don’t have to make decisions, and the three biggest search engines have just made my life a little bit easier.

Google, Yahoo and Bing have got together and created a kind of a standard for marking up html 5 with semantic content. I say “kind of a standard” because they’ve not formed a standards setting body.  They’ve just gotten together and said, “This is what we do.” That works fine for me, after all they are the three leading search engines so if they’ve taken the trouble to agree with each other and produce something workable I’m not going to argue about process, consultation or the nitty gritty of their analysis.

The whole thing is documented at http://schema.org, which contains reference documents, tutorials and discussion forums. A good place to start is, naturally enough, their “Getting Started Guide“.

This sample snippet taken from the site shows the kind of markup involved in describing a movie.

<div itemscope itemtype ="http://schema.org/Movie">
  <h1 itemprop="name">Avatar</h1>
  <span>Director: <span itemprop="director">James Cameron</span> (born August 16, 1954)</span>
  <span itemprop="genre">Science fiction</span>
  <a href="../movies/avatar-theatrical-trailer.html" itemprop="trailer">Trailer</a>
</div>

The range of schemas defined is quite broad. As well as the expected book, recipe and review types that mirror existing microformats there are also some very specific schemas like Sculpture, CheckoutPage, DanceEvent, AnimalShelter or Bakery. These are listed in the Full Hierarchy page.

All of this is quite new, and aimed solidly at those with a lot of existing well structured data. However, I’m pretty sure it won’t be long before someone knocks together some WordPress post types or Concrete 5 blocks that match some of the schema definitions.

I have a little extra time on my hands these day, so rather than just pontificate on Reddit or laze in the sunshine I thought I’d spend some of my time sharing notes on odd bits of code that I find useful. Hence this blog.

You won’t find anything deep here. I’m a scripter rather than a programmer. What you will find is some of the easy solutions that I’ve encountered for the simple problems I’m trying to solve.

You’ll also find notes about projects I’m involved with and recommendations for people and things I’ve found useful.

I hope you find this useful.

See you soon.