Not So Glamorous Updates to DS106 Assignment Bank Theme

Today I pulled put the trowel and mortar mix for some work on the DS106 Assignment Bank WordPress theme, my pile of code and stuff so you can make a bank of anything (not just assignments) that works like the original DS106 Assignment Bank.

I’ve got some reason as it looks like we might use it for the Creative Commons Certification project as a place for the things people will do in the process of earning a certificate. I’m a bit stuck on what these things might be, they are not assignments, and likely not challenges as I did for the UDG Agora project. The nice thing is it doe snot matter because I am just tinkering on a local version of WordPress running on my laptop (I’m loving more and more Varying Vagrant Vagrants).

I added today a new option from an email request by Jim Luke (more below), but the thing I spent the most time on is something you never likely will notice, as mundane as the mortar between the bricks of your bank building. Good old mortar…

“Mortar should never be stronger than the bricks” is a well-known maxim in the bricklaying world. In this context, “stronger” does not mean its load-bearing capacity, but the mortar’s hardness and permeability.

This is a shaky metaphor, because while I am the son of a bricklayer, my experience is limited to a few brick garden containers.

Those Pesky UI Tabs

Warning, some WordPress code and handwaving technical stuff are coming up. You have been warned, please put on your safety glasses.

Much of my WordPressing the last 2 years have been building tools that are entire custom themes, from this Assignment Bank one to the one that lets you make your own site like the Daily Create, and farther back to the SPLOT tools done while at TRU.

My goal was to make them so you could install a theme, and enter, change a bunch of stuff via a Dashboard options page (rather then making edits to some theme PHP file). No programming for you. Setting up an options page lands you into an arcane corner of the WordPress Empire known as the Settings API, one of the more mystical parts of the codex.

I’m not even sure of why it’s called an API, it has nothing to do with shuttling data via json. Oh well. But it is complex.

This was one of the cases where I bounced from one tutorial to the next, confused, until I found one that was less confusing, and I have gotten a huge amount of mileage from the 2011 posts/code by Aliso the Greek on The Extended WordPress API Tutorial.

To try and not make this post as long and drawn out as a Bill Clinton speech, the Settings API is a handful of functions you can use to let WordPress do the grunt work of generating the forms and data storing to create a thing like this (and this is about 1/4 of the current options)

A whack sock of options can be organized into “sections”, though in the simplest use of the Settings API, they are all generated in one view, but are grouped together.

Aliso The Greek’s code made doing the options pretty much a task of creating an array for all the form elements you needed, for the screenshot above, I defined them via (duck, here comes some PHP):

$this->settings['thingname'] = array(
	'title'   => __( 'Name for Things in the Bank' ),
	'desc'    => __( 'What is the name for the kind of thing banked here? Assignment? Challenge? Task? Must be singular and should not contain numbers (0-9).' ),
	'std'     => 'Assignment',
	'type'    => 'text',
	'section' => 'general'
);

$this->settings['new_thing_status'] = array(
	'section' => 'general',
	'title'   => __( 'Status For New Things' ),
	'desc'    => __( 'Set to draft to moderate submissions via web form' ),
	'type'    => 'radio',
	'std'     => 'publish',
	'choices' => array(
		'publish' => 'Publish immediately',
		'draft' => 'Set to draft',
	)
);		

$this->settings['thing_order'] = array(
	'section' => 'general',
	'title'   => __( 'Display Order' ),
	'desc'    => __( 'On the main index, the order in which ' . lcfirst(THINGNAME) . 's are listed' ),
	'type'    => 'radio',
	'std'     => 'name',
	'choices' => array(
		'name' => 'Title',
		'id' => 'Date Created',
		'count' => 'Count',
	)
);		

$this->settings['thing_orderby'] = array(
	'section' => 'general',
	'title'   => __( 'Display Order Sorting' ),
	'desc'    => __( 'Which to list first?' ),
	'type'    => 'radio',
	'std'     => 'ASC',
	'choices' => array(
		'ASC' => 'Ascending',
		'DESC' => 'Descending',
	)
);		

$this->settings['exlen'] = array(
	'title'   => __( 'Excerpt Length' ),
	'desc'    => __( 'Number of words to show for content when displayed on an index or archive page' ),
	'std'     => '55',
	'type'    => 'text',
	'section' => 'general'
);

The nice thing about Aliso’s code (parts which still elude my understanding) was that it did some jQuery magic to group my long scrolling set of options into a tabbed interface, like this:

The old tabbed interface from Aliso The Greek’s tutorial

which worked great until about a hear ago, when I noticed that rather than being tabbed, everything was spit out onto one screen. Everything worked, but the documentation is even longer than the form… and it bothered me.

Cutting to some chase, what I found in digging was that an update to jQuery rendered the jQuery Tabs UI code that did the tabs… DOA. Using the last compatible version of jQuery might have worked, but that’s a cheap mortar job.

I let it go for more than a year, until today.

I won’t bore the 0.5 readers left here, but it was about a 30% rewrite of the code for the options interface, some yanking out of old dried mortar.

The result is not super optimal, it has all the settings in one tab, and the documentation in another, but is good enough brickwork for now, I updated the Daily Blank theme too, to the new tabbed settings/ documentation tab style:

Pretty exciting, eh? Like watching mortar dry.

And Now a New Feature / Option

My thinking of the Assignment Bank theme is rooted pretty deeply in the way the original one worked, and what I have done with it since, that an “assignment” displayed would have information, a link to submit examples, a link to submit a tutorial, and under those headings, all of the responses / tutorials.

Here is one from the UDG Agora project created by Nancy White- Visual Metaphors. Or Not?. The top is all the descriptive stuff:

In this site we call the Examples from the original assignment bank “Responses” and rather than tutorials, we have a place for “Resources” to help you do the challenge.

But when other people use your code, they often come up with use cases I never thought about. This happened today with an email from Jim Luke at Lansing Community College, he was using the Bank theme to build a resource collection, but as he described, there was no need to display those bottom two sections.

The quick and easy way would be to hide them with CSS, but there’s be a bit if un-needed database pounding going on. And besides, I thought of a different way.

So there is a new option, in the mix, where you can control what is shown on the bottom of a single “thing”. The default is to show both Examples and Tutorials (any time I add a new feature, the default is to do what it did before, so it does not change anyone’s existing site)

A new option added to the mix

Maybe there is a case where you do not want to list the tutorials column, only the examples, changing the option to ‘Examples Only’ yields this on the bottom:

Or maybe you want just the Tutorials/ Resources column, just flip the option again to ‘Tutorials Only’ (or Resources in this example, other options let us change the label)

And finally, for the case Jim described, we want nothing on the bottom, that’s an option!

Jim, if you are watching, this update is now available from GitHUb, just replace the ds106banker theme.

Ipso Brickum

I have a few more bricks to add, more mortar work. It’s really really super duper helpful if you have feedback, feature requests, shoddy brick work reports, to use the Issues ares of the theme’s repo.

It’s great to come across a few more sites using the theme, from the repo Readme:

• Foodworks Assignment Bank Middlebury College
• UBC Open For Learning Challenges University of British Columbia
• UDG Agora Challenge Bank University of Guadalajara Agora Project
• Mobile Social Media Learning Technologies Project Bank Aukland University of Technology
• The Connected Learning Make Bank
• The Still Web Contemplative Practices Bank
• All The Toys
• HumanMOOC Activity Bank
• Instructional Technology Assignments INDT501 at University of Mary Washington

If you make use of the theme, one of the best things you can do is fork the GitHub Repo, add your site to the ReadMe, and submit a pull request so I can yank it back to the original site.

Now, where is my trowel, I have some bricks to handle…

Top / Featured Image: Creative Commons licensed (CC-BY) image from Torange.biz. Lots of good stuff for the bricklaying metaphor.

 Share this barking on social media

If this kind of stuff has value, please support me by tossing a one time PayPal kibble or monthly on Patreon