OUseful.Info, the blog…

Trying to find useful things to do with emerging technologies in open education

Archive for the ‘OU2.0’ Category

Edtech and IPython Notebooks – Activities and Answer Reveals

leave a comment »

A few months ago I posted about an interaction style that I’d been using – and that stopped working – in IPython notebooks: answer reveals.

An issue I raised on the relevant git account account turned up a solution that I’ve finally gotten round to trying out – and extending with a little bit of styling. I’ve also reused chunks from another extension (read only code cells) to help style other sorts of cell.

Before showing where I’m at with the notebooks, here’s where OU online course materials are at the moment.

Teaching text is delivered via the VLE (have a look on OpenLearn for lots of examples). Activities are distinguished from “reading” text by use of a coloured background.

m269_closedAns

The activity requires a student to do something, and then a hidden discussion or anser can be revealed so that the student can check their answer.

m269_ansReveal

(It’s easy to be lazy, of course, and just click the button without really participating in the activity. In print materials, a frictional overhead was added by having answers in the back of the study guide that you would have to turn to. I often wonder whether we need a bit more friction in the browser based material, perhaps a time based one where the button can’t be clicked for x seconds after the button is first seen in the viewport (eg triggered using a test like this jQuery isOnScreen plugin)?!)

I drew on this design style to support the following UI in an IPython notebook:

Here’s a markdown cell in activity style and activity answer style.

M269_-_Python_-_Blue1a

The lighter blue background set into the activity is an invitation for students to type something into those cells. The code cell is identified as such by the code line In [ ] label. Whatever students type into those cells can be executed.

The heading is styled from a div element:

M269_-_Python_-_Blue

If we wanted to a slightly different header background style as in the browser materials, we could perhaps select a notebook heading style and then colour the background differently right across the width of the page. (Bah.. should have thought of that earlier!;-)

Markdown cells can also be styled to prompt students to make a text response (i.e. a response written in markdown, though I guess we could also use raw text cells). I don’t yet have a feeling for how much ownership students will take of notebooks and start to treat them as workbooks?

Answer reveal buttons can also be added in:

M269_-_Python_-_Blue2

Clicking on the Answer button displays the answer.

M269_-_Python_-_Blue3

At the moment, the answer background is the same colour as the invitation for student’s to type something, although I guess we could also interpret as part of the tutor-alongside dialogue, and the lighter signifies expected dialogic responses whether from the student or the “tutor” (i.e. the notebook author).

We might also want to make use of answer buttons after a code completion activity. I haven’t figured out the best way to do this as of yet.

M269_-_Python_-_Blue4

At the moment, the answer button only reveals text – and even then the text needs to be styled as HTML (the markdown parsing doesn’t work:-(

M269_-_Python_-_Blue5

I guess one approach might be to spawn a new code cell containing some code written in to the answer button div. Another might be to populate a code cell following the answer button with the answer code, hiding the cell and disabling it (so it can’t be executed/run), then revealing it when the answer button is clicked? I’m also not sure whether answer code should be runnable or not?

The mechanic for setting the cell state is currently a little clunky. There are two extensions, one for the answer button, one for setting the state other cells, that use different techniques for addressing the cells (and that really need to be rationalised). The extensions run styling automatically when the notebook is started, or when triggered. At the moment, I’m using icons from the orgininal code I “borrowed” – which aren’t ideal!

M269_-_Python_-_Blue0

The cell state setter button toggles selected code cells from activity to not-activity states, and markdown cells from activity-description to activity-student-answer to not-activity. The answer button button adds an answer button at every answer div (even if there’s already an answer button rendered). Both extensions style/annotate restarted notebooks correctly.

The current, hacky, user model I have in mind is that authors have an extended notebook with buttons to set the cell styles, and students have an extended notebook without buttons that just styles the notebook when it’s opened.

FWIW, here’s the gist containing extensions code.

Comments/thoughts appreciated…

Written by Tony Hirst

October 8, 2014 at 6:51 pm

Posted in OU2.0, Tinkering

Tagged with ,

Swipe-ify Next and Previous Links?

I’ve just been looking at the OU’s Moodle VLE which have things like this in them (my highlighting):

Unit_1_Overview_of_H818__1_3_Introducing_the_idea_of_an_‘open_studio’_and_Unit_1_Overview_of_H818__1_3_Introducing_the_idea_of_an_‘open_studio’

That is, previous and next links, in quite small type. Increasing amounts of out materials are presented as HTML docs, with sections automatically segmented into separate HTML pages. So for example, here’s the navigation (i.e. page chunking) for a randomly selected unit of a randomly selected course.

pagification

The same materials are also made available in a variety of document formats:

alternativeFormats

One of the disadvantages of the HTML page link click model is that it requires mouse cursor movement and click actions. I’m not sure how quickly you can tab to the previous and next links, or whether keyboard shortcuts are available. (If they do exist: a) what are they; b) where would I learn about them as a student?)

On a tablet, the keyboard shortcuts aren’t really relevant – however, what might be useful would be to be able to swipe left or right for the previous/next actions. Maybe the VLE supports that already? Or maybe the browser ties the swipe to forward and back history buttons/operations and overriding them for previous and next link operations (so maybe use upswipe and downswipe, or diagonal swipe, instead?)

I’m guess what I’m really wondering is, is there a progressive enhancement library that allows swipe gestures to be tied to click actions, and if so, if implemented in the VLE (assuming the VLE doesn’t already provide a mobile theme that supports this sort of action), what would it actually feel like to use?

Written by Tony Hirst

July 4, 2014 at 3:34 pm

Posted in OU2.0

Tagged with ,

Anscombe’s Quartet – IPython Notebook

Anyone who’s seen one of my talks that even touches on data and visualisation will probably know how it like to use Anscombe’s Quartet as a demonstration of why it makes sense to look at data, as well as to illustrate the notion of a macroscope, albeit one applied to a case of N=all where all is small…

Some time ago I posted a small R demo – The Visual Difference – R and Anscombe’s Quartet. For the new OU course I’m working on (TM351 – “The Data Course”), our focus is on using IPython Notebooks. And as there’s a chunk in the course about dataviz, I feel more or less obliged to bring Anscombe’s Quartet in:-)

As we’re still finding our way about how to make use of IPython Notebooks as part of an online distance education course, I’m keen to collect feedback on some of the ways we’re considering using the notebooks.

The Anscombe’s Quartet notebook has quite a simple design – we’re essentially just using the cells as computed reveals – but I’m still be keen to hear any comments about how well folk think it might work as a piece of standalone teaching material, particularly in a distance education setting.

The notebook itself is on github (ou-tm351), along with sample data, and a preview of the unexecuted notebook can be viewed on nbviewer: Anscombe’s Quartet – IPython Notebook.

Just by the by, the notebook also demonstrates the use of pandas for reshaping the dataset (as well as linking out to a demonstration of how to reshape the data using OpenRefine) and the ŷhat ggplot python library (docs, code) for visualising the dataset.

Please feel free to post comments here or as issues on the github repo.

Written by Tony Hirst

June 30, 2014 at 1:54 pm

Posted in OU2.0

Tagged with , , ,

New Ed Tech Toys for TM351…

I did a thing earlier this week to the internal OU CALRG conference about some of my thinking ongoing at the moment around new edtech toys for “the data course”, TM351.

Annotated slides here: Imagining TM351: from virtual machines to notebooks.

Having presented it, the slides need reordering, a bit more emphasis needs to be placed on role human readable text can play in notebooks (h/t Alistair Willis for that observation), and I need to do quite a bit more thinking about the spreadsheet-notebook comparison.

Also to do are more thoughts on the “(non)linearity”/”serialisation” aspects of authoring, reading and executing/working through that I touched on in another talk, from last week: From storymaps to notebooks: do your computing one step at a time.

Written by Tony Hirst

June 13, 2014 at 9:53 am

Posted in OU2.0

Tagged with , , ,

Tracking Changes in IPython Notebooks?

Managing the tracking suggested changes to the same set of docs, along with comments and observations, from multiple respondents in is one of the challenges any organisation who business is largely concerned with the production of documents has to face.

Passing shared/social living documents by reference rather than value, so that folk don’t have to share multiple physical copies of the same document, each annotated separately, is one way. Tools like track changes in word processor docs, wiki page histories, or git diffs, is another.

All documents have an underlying representation – web pages have HTML, word documents have whatever XML horrors lay under the hood, IPython notebooks have JSON.

Change tracking solutions like git show differences to the raw representation, as in this example of a couple of changes made to a (raw) IPython notebook:

Track changes in github

Notebooks can also be saved in non-executable form that includes previously generated cell outputs as HTML, but again a git view of the differences would reveal changes at the HTML code level, rather than the rendered HTML level. (Tracked changes also include ‘useful’ ones, such as changes to cell contents, and (at a WYSWYG level at least) irrelevant ‘administrative’ value changes such as changes to hash values recored in the notebook source JSON.

Tracking changes in a WYSIWYG display shows the changes at the rendered, WYSIWYG level, as for example this demo of a track changes CKEditor plugin demonstrates [docs]:

lite - ck editor track changes

However, the change management features are typically implemented through additional additional metadata/markup to the underlying representation:

lite changes src

For the course we’re working on at the moment, we’re making significant use of IPython notebooks, requiring comments/suggested changes from multiple reviewers over the same set of notebooks.

So I was wondering – what would it take to have an nbviewer style view in something like github that could render WYSIWYG track changes style views over a modified notebook in just cell contents and cell outputs?

This SO thread maybe touches on related issues: Using IPython notebooks under version control.

A similar principle would work the same for HTML too, of course. Hmm, thinks… are there any git previewers for HTML that log edits/diffs at the HTML level but then render those diffs at the WYSIWYG level in a traditional track changes style view?

Hmm… I wonder if a plugin for Atom.io might do this? (Anyone know if atom.io can also run as a service? Eg could I put it onto a VM and then axis it through localhost:ATOMIOPORT?)

PS also on the change management thing in IPython Notebooks, and again something that might make sense in a got context, is the management of ‘undo’ features in a cell.

IPython notebooks have a powerful cell-by-cell undo feature that works at least during a current session (if you shut down a notebook and then restart it, I assume the cell history is lost?). [Anyone know a good link describing/summarising the history/undo features of IPython Notebooks?]

I’m keen for students to take ownership of notebooks and try things out within them, but I’m also mindful that sometimes they make make repeated changes to a cell, lose the undo history for whatever reason, and then reset the cell to the “original” contents, for some definition of “original” (such as the version that was issued to the learner by the instructor, or the version the learner viewed at their first use of the notebook.)

A clunky solution is for students to duplicatea each notebook before they start to work on it so they have an original copy. But this is a bit clunky. I just want an option to reveal a “reset” button by each cell and then be able to reset it. Or perhaps in line with the other cell operations, reset either a specific highlight cell, reset all, cells, or reset all cells above or below a selected cell.

Written by Tony Hirst

June 5, 2014 at 9:16 am

Posted in OU2.0, Thinkses

Tagged with ,

Click-Scheduled Forum Posts

Course writing always seems to take me forever for a wide variety of reasons.

The first is the learning. You’re presumably familiar with the old saw about the teacher being one page ahead..? That’s the teacher as expert learner modeling the learning process, the teacher as “teaching on” something they’ve just learned. The teacher-as-learner experiencing just where the stumbling blocks are, or noticing afresh the really big idea… That’s me, learning on the one hand, and on the other trying to justify with footnotes and references the things I’ve learned by experience and that just feel right!

The second thing is the process of course production, the tooling used to support it, and the things we could try out. I’ve spent a lot of time thinking about virtual machines and containers recently, because I think they could be good for the OU and good for the School of Data. It doesn’t surprise me that Coursera courses are using virtual machines, and that Futurelearn isn’t. I think there’s interesting stuff – and not a few business opportunities – in looking at ways of supporting the organisational and end-user creation of VMs, particularly in education where you’re regularly presented with having to find tech solutions – and support – for cohorts of anything between 15 and 1,500 (or with the MOOCs, 15,000). I’ve also spent a lot of time pondering IPython Notebooks – and need to spend more time doing so: literate programming, conversations with data, end user application development, task based computing, and a comparison with the attractiveness of spreadsheets are all in the mix.

The third thing is time spent keeping a learning diary of what’s been going on in the course production process. I haven’t done this this time and I regret it (“no time to blog” because of “deadlines”; course goes to students in 15J, October 2015, (sic, i.e. next year), so the pressure is on to make the deadline (I won’t) for a full first draft handover by tomorrow). So f*****g that for a game of soldiers, I am taking an hour out and writing up a thought…

In particular, this one…

I’m struggling (again) with ways of trying to encourage sharing and discussion amongst the students. A default way of doing this is to have a call out (a “call to action”) from online teaching materials into a forum or forum thread. You know the sort of thing: read this, play with that, share your findings in the forum. Only hopefully a bit more engaging than that.

The problem is, if you are going to link out to a specific thread from course materials, you need to seed the forums. Which means if you have a lot of callouts, the forums can start to get cluttered with stub posts, and overload a nascent forum with irrelevant (at the then time) content.

doodling threads

One way around this is to schedule posts to appear in the forums for around the time you expect students to be reaching out to them. This can make hard linking difficult, unless you can publish a post, get the link, unpublish it and schedule it, and then hope when it does get re-released that the link is the same. (If the URL is minted against a post ID, this should work?) A downside of this approach that if a student clicks on a forum call out link and the post hasn’t yet been republished according to its scheduled date, the link will be broken.

Reflecting on the way wikis work, where you can create a link to a wiki page that doesn’t exist yet, and that page is created when it’s clicked for the first time, I started to wonder about a similar mechanism for links to forum based social activities. So for example, I create a forum post with a scheduled date that publishes the post on a particular date if it hasn’t already been published yet and check the clickpub box. I’m presented with a URL for the post that is guaranteed to be the URL it’s given when it the post does get published.

In my course materials, I paste the link.

If no-one ever clicks the link to that forum post in the course materials, the post is published in the forum on the scheduled date. The post should contain a description of the activity and a reference back to the activity in the course materials, as well as act as a stub for a discussion around the activity or sharing of social objects associated with the activity. In this mode, the post acts as call-to-action from the forum to the course materials, supporting the pacing of the course.

Some students, however, like to get ahead. So if they click on the link before the schedule date they need to see the post somehow.

The first way to achieve this is to use the link in the course materials a bit like a new wiki page link: if a student clicks on a link to a post before the post is scheduled to be published, the click sends a hurry-up, clickpub message that fires the publication of the post. This actually signals two things: one to the course team that someone is that far ahead in working through the course materials, the other to the rest of the cohort that somebody is that far ahead in working through the materials.

(Note that we need to defend against link checkers (human or machine) that might be operating in the VLE accidentally triggering a clickpub event!)

Problems may arise in the case of the student who tries to do the whole 30 week course in the first 10 days after it is opened up. (Unless such students are anti-social and don’t post to such forums, in part because they know it’s unlikely that anyone else will be as far on and keen to discuss the topic. That said, even posting with no hope of reply is often beneficial in the way it forces a little bit of reflective thinking at least.)

To try to mitigate against early publication of a post, we could try a more refined strategy in which a social activity thread is only viewable to students who click on the link to it before the scheduled release date, but is then released openly to the forum at its scheduled time.

We could balance this further with the proviso that if more than x% of the cohort have accessed the thread, it’s scheduled release date is brought forward to that time. In this way, we can start to use the social activity posts as one way of trying to keep the cohort together, for example in cases where the majority of the cohort is working through the course faster than expected.

[Unfiled patents: 3,487; 3,488; 3,489 ...;-) - Unless of course these sorts of mechanism already exist? If so, please let me know where via the comments below:-)]

Written by Tony Hirst

June 3, 2014 at 9:57 am

Posted in OU2.0

Tagged with ,

Losing Experimental Edtech Value from IPython Notebooks Because of New Security Policies?

Just like the way VLEs locked down what those who wanted to try to stuff out could do with educational websites, usually on the grounds of “security”, so a chunk of lightweight functionality with possible educational value that I was about to start to exploring inside IPython notebooks has been locked out by the new IPython notebook security policy:

Affected use cases
Some use cases that work in IPython 1.0 will become less convenient in 2.0 as a result of the security changes. We do our best to minimize these annoyance, but security is always at odds with convenience.

Javascript and CSS in Markdown cells
While never officially supported, it had become common practice to put hidden Javascript or CSS styling in Markdown cells, so that they would not be visible on the page. Since Markdown cells are now sanitized (by Google Caja), all Javascript (including click event handlers, etc.) and CSS will be stripped.

Here’s what I’ve been exploring – using a simple button:

ipynb button

to reveal an answer:

ipynb button reveal

It’s a 101 interaction style in “e-learning” (do we still call it that?!) and one that I was hoping to explore more given the interactive richness of the IPython notebook environment.

Here’s how I implemented it – a tiny bit of Javascript hidden in one of the markdown cells:

<script type="text/javascript">
   function showHide(id) {
       var e = document.getElementById(id);
       if(e.style.display == 'block')
          e.style.display = 'none';
       else
          e.style.display = 'block';
   }
</script>

and then a quick call from a button onclick event handler to reveal the answer block:

<input type="button" value="Answer" onclick="showHide('ans2')">

<div id="ans2" style="display:none">I can see several ways of generating common identifiers:

<ul><li>using the **gss** code from the area data, I could generate identifiers of the form `http://http://statistics.data.gov.uk/id/statistical-geography/GSS`</li>
<li>from the housing start data, I could split the *Reference Area* on space characters and then extract the GSS code from the first item in the split list</li>
<li>The *districtname* in the area data looks like it make have "issues" with spacing in area names. If we remove spaces and turn everything to lower case in the area data *districtname* and the *Reference Area* in the housing data, we *may* be able create matching keys. But it could be a risky strategy...</li>
</ul></div>

This won’t work anymore – and I don’t have the time to learn whether custom CSS can do this, and if so, how.

I don’t really want to have to go back to the approach I tried before I demoed the button triggered reveal example to myself…

ipynb another interaction

That is, putting answers into a python library and then using code to pull the text answer in…

ipynb color styling

Note also the use of colour in the cells – this is something else I wanted to try to explore, the use of styling to prompt interactions; in the case of IPython notebooks, I quite like the idea of students taking ownership of the notebooks and adding content to it, whether by adding commentary text to cells we have written in, adding their own comment cells (perhaps using a different style – so a different cell type?), amending code stubs we have written, adding in their own code, perhaps as code complements to comment prompts we have provided, etc etc.

ipynb starting to think about different interactions...

The quick hack, try and see option that immediately came to mind to support these sorts of interaction seems to have been locked out (or maybe not – rather than spending half an hour on a quick hack I’ll have to spend have an hour reading docs…). This is exactly the sort of thing that cuts down on our ability to mix ideas and solutions picked up from wherever, and just try them out quickly; and whilst I can see the rationale, it’s just another of those things to add to the when the web was more open pile. (I was going to spend half an hour blogging a post to let other members of the course team I’m on know how to add revealed answers to their notebooks, but as I’ve just spent 18 hours trying to build a VM box that supports python3 and the latest IPythion notebook, I’m a bit fed up at the thought of having to stick with the earlier version py’n’notebook VM I built because it’s easier for us to experiment with…)

I have to admit that some of the new notebook features look like they could be interesting from a teaching point of view in certain subject areas – the ability to publish interactive widgets where the controls talk to parameters accessed via the notebook code cells, but that wasn’t on my to do list for the next week…

What I was planning to do was explore what we’d need to do to get elements of the notebook behaving like elements in OU course materials, under the assumption that our online materials have designs that go hand in hand with good pedagogy. (This is a post in part about OU stuff, so necessarily it contains the p-word.)

ou teaching styling

Something else on the to do list was to explore how to tweak the branding of the notebook, for example to add in an OU logo or (for my other day per week), a School of Data logo. (I need to check the code openness status of IPython notebooks… How bad form would it be to remove the IPy logo for example? And where should a corporate log go? In the toolbar, or at the top of the content part of the notebook? If you just contribute content, I guess the latter; if you add notebook functionality, maybe the topbar is okay?)

There are a few examples of styling notebooks out there, but I wonder – will those recipes still work?

Ho hum – this post probably comes across as negative about IPython notebooks, but it shouldn’t because they’re a wonderful environment (for example, Doodling With IPython Notebooks for Education and Time to Drop Calculators in Favour of Notebook Programming?). I’m just a bit fed up that after a couple of days graft I don’t get to have half and hour’s fun messing around with look and feel. Instead, I need to hit the docs to find out what’s possible and what isn’t because the notebooks are no longer an open environment as they were… Bah..:-(

Written by Tony Hirst

April 11, 2014 at 6:10 pm

Posted in Open Education, OU2.0, Tinkering

Tagged with ,

Follow

Get every new post delivered to your Inbox.

Join 820 other followers