Apr 10

Quality captioning in Storyline 360 — Part 2

A Definition of Captioning
Captioning is the key to opening up a world of information for persons with hearing loss or literacy needs. There are more than 30 million Americans1 with some type of hearing loss. Millions of others are illiterate2, learning to read, or use English as a second language… Captions not only display words as the textual equivalent of spoken dialogue or narration, but they also include speaker identification, sound effects, and music description. Captioning is critical for students who are deaf or hard of hearing, but it also aids the reading and literacy skills development of many others.
—The Described and Captioned Media Program
  1. Around 466 million people worldwide have disabling hearing loss, and 34 million of these are children (World Health Organization).
  2. While… only 14% of the world population, in 2016, remained illiterate… the poorest countries in the world, where basic education is most likely to be a binding constraint for development, still have very large segments of the population who are illiterate (Our World in Data).

In Part 1 I introduced the
DCMP Captioning Key and some evidence-based principles they have developed that are especially suited to learning tools.

In this part I’ll show you how the DCMP guidelines informed my implementation in the well known eLearning tool we’ve adopted where I work, in part because of our ability to add this customization, Articulate Storyline 360. I’ll share a custom “style” that’s nothing more than a snippet of CSS code. I’ll show you how I make the custom style work in the AS360 desktop app Preview and persist from one publication to the next. Then, in a final Part 3 I’ll introduce a free, open source tool I’ve been using for several years and show you how I use it to assure the quality of my closed captions, and finally import those captions into AS360. I see two distinct pieces to this endeavour: the presentation—where it will appear and what it will look like—and the composition of the captions themselves, which includes where to break lines, how they’re formatted and how to get them into Storyline 360.

What level of quality can we achieve with Storyline?

The DCMP acknowledges, “It should be noted that the best practices detailed in this guide are not always possible to follow due to technical limitations.” So the first question is, “where do we set the bar for our particular software?”… Storyline 360, published as HTML5-only, in the case we’re considering today. This means whatever we decide will be governed by Cascading Styles Sheets (CSS). If you don’t know a thing about CSS don’t fret—I’ll show you a way to practice that won’t break your system. One of the reasons I like AS360, and recommend it highly for organizations and individuals who have a budget permitting the use of proprietary tools, is the discovery that all the CSS code for the captions is included in a single style statement:

.caption p {
  display:inline-block;pointer-events:none;padding:10px;
  text-shadow:-1px 0px black, 0px 1px black, 1px 0px black, 0px -1px black;
  color:#ffffff;border-radius:4px;background:#31373a;
  margin:0 0 10px 0;padding:10px;text-align:center;line-height:1.5
}

This snippet creates a style named caption that affects every paragraph (p) within an area (“division”, denoted div) assigned that style. It’s built of properties, such as display and pointer-events, separated from their qualities, e.g., inline-block or none by a colon, and from each other by semicolons. We don’t want to change anything we don’t understand, so we’ll be careful to choose only complete pairs of stylistic items for which there are guidelines in the DCMP Captioning Key—presentation look. These are separate and distinct from temporal elements such as presentation rate that influence caption duration. We can eliminate the spatial element location; this is a technical limitation of AS360 we can’t easily overcome at present, so the guidelines for Caption Placement, the preferred method of speaker identification, will have to wait. (We’ll mention a suitable alternative we can implement with Subtitle Edit in Part 3.) Storyline places all captions on the bottom two lines only, so we’ll also have to accept that ours might at times obscure some content. We’ll use transparency to deal with that.

The Captioning Key considers all of the following “guidelines” elements of the Text.

“Look” we can work with

  • Font (typeface) characteristics must be consistent throughout the media
    • “…medium weight, …sans serif… proportionally spaced… with descenders that drop below the baseline…”
      The Open Sans and the PT Sans font families are popular suitable choices known for high readability1.
    • colour: “The use of white characters is preferred.”
    • size: (about) 24pt equal 32px (pixel values (px) is a good static, OS-independent, cross-browser choice… )
    • and style.
      …have a drop or rim shadow… should be left aligned when technically possible
  • …The use of a translucent box is preferred so that the text will be clearer, especially on light backgrounds.

Those are all things we can easily set without interfering with the rest of the default Storyline code. The defaults already provide white text with a shadow, but the font is small and the box is opaque. Text is centre-aligned, which is okay, but we can easily meet the guideline; we can choose open Sans in the Player settings, but I’ll set it here too so no one can change it.

Font size is easy to set, but likely the most subjective on the list. The Captioning Key itself doesn’t specify 24 points in the sections I’ve linked to, but it’s found elsewhere and the examples there support a similar number. Technically, browsers and monitors do their own thing with it regardless, so the pixel unit is considered a good choice—but even that’s relative to the user’s own preference settings. The standard conversion of 24pt to 32px was too large for my liking, so I’ve settled on 28px, but that’s still too large for mobile (often causing 2 lines to become 3). 21px looks good on my iOS devices. Articulate recently included a separate mobile style sheet, so it’s easy to make that happen.

Following are the settings I’ve chosen, which remain somewhat flexible.

  • background:rgba(72,72,72,0.81); That’s actually a translucent grey. You can experiment; the first three numbers should always be the same and the last is opacity, from 0.0 (fully transparent) to 1.0 (fully opaque).
  • font-family:"Open Sans",Arial,Helvetica,sans-serif; The browser will choose Open Sans if it’s on the computer or on your server as a webfont. Otherwise offer Windows and Mac standards, or the first sans-serif font the browser can find
  • font-size:28px; for desktop, font-size:21px; for mobile
  • line-height:1.18; This seems quite adequate.
  • text-align:left !important; The ‘ !important’ is a CSS trick that’s necessary here (it’s about that word ‘cascading’ in Cascading Style Sheets)
  • text-shadow:black 0 0 3px; I centred the shadow and made it 2 pixels larger.

The complete revision, what we’ve changed and what we haven’t looks like this:

.caption p {
  background:rgba(72,72,72,0.81);
  border-radius:4px;margin:0 0 10px 0;
  color:white;
  display:inline-block;
  font-family:"Open Sans",Calibri,Arial,Helvetica,sans-serif;
  font-size:28px;
  line-height:1.18;
  padding:10px;
  pointer-events:none;
  text-align:left !important;
  text-decoration:none;
  text-shadow:black 0 0 3px;
}

We don’t add CSS to a live server fully expanded like that, however. I’ll provide you with “minimized” versions you can use further down.

Putting it back together

On a Windows system Storyline stores this information in three template files it writes from for Preview and Publishing. I use a free text editor called Notepad++ to open these, search for the default code I showed above in its minimized form, and replace it with the minimized code below.

Code to Find in all three files that follow:

.caption p{display:inline-block;pointer-events:none;padding:10px;text-shadow:-1px 0px black, 0px 1px black, 1px 0px black, 0px -1px black;color:#ffffff;border-radius:4px;background:#31373a;margin:0 0 10px 0;padding:10px;text-align:center;line-height:1.5}
  1. C:\Program Files (x86)\Articulate\360\Storyline\Content\dark-spider\unified\html5\lib\stylesheets\main.min.css
  2. C:\Program Files (x86)\Articulate\360\Storyline\player\unified\html5\lib\stylesheets\desktop.min.css
  3. C:\Program Files (x86)\Articulate\360\Storyline\player\unified\html5\lib\stylesheets\mobile.min.css

Code to Replace it with in files 1 & 2:

.captionp{background:rgba(72,72,72,0.81);border-radius:4px;margin:0 0 10px 0;color:white;display:inline-block;font-family:"OpenSans",Arial,Helvetica,sans-serif;font-size:28px;line-height:1.18;padding:10px;pointer-events:none;text-align:left !important;text-decoration:none;text-shadow:black 0 0 3px;}

Code to Replace it with in file 3:

.captionp{background:rgba(72,72,72,0.81);border-radius:4px;margin:0 0 10px 0;color:white;display:inline-block;font-family:"OpenSans",Arial,Helvetica,sans-serif;font-size:21px;line-height:1.18;padding:10px;pointer-events:none;text-align:left !important;text-decoration:none;text-shadow:black 0 0 3px;}

I choose Notepad++ for this because it keeps these files open, notifies me whenever they’re change after a Storyline update, and automatically relaunches itself with Administrator privileges if I forget to open it that way and try to save any of these to Program Files(x86).

One of the minimized CSS files, modified with Notepad++

If you’re nervous about testing this process out in the program templates, you can try it on a published module first. Depending on how recent your AS360 version is you’ll find main.min.css and/or desktop.min.css and mobile.min.css in
module-name - Storyline output\html5\lib\stylesheets

Summary of Part 2 and segue to Part 3

In Part 2 we explored the rationale for customizing the stock Storyline code, identified what’s possible with this particular software, revised the stock code, and saw where to place it so it’s in our previewed and published output.

Part 3 will look at Subtitle Edit, and how to set it up to speed up the process of creating quality closed captions for our learning modules. The DCMP site provides many examples of right and wrong choices for splitting lines other aspects of captioning and we won’t be able to discuss them all, but I’ll leave you with the basics and enough to take it forward from there. In the end you’ll be able to caption with Subtitle Edit, save the file in a suitable format, and import it into Storyline 360 using the relatively new Media Library.

Part 3 to follow soon. Thanks for reading!

§

Reference

1. Golombisky, Kim and Hagen, Rebecca (2017). White space is not your enemy : a beginner’s guide to communicating visually through graphic, web & multimedia design. Amsterdam ; Boston :Focal Press/Elsevier, 312pp.

Apr 10

Quality captioning in Storyline 360 — Part 1

Captions are for everyone

Captioning is the process of converting the audio content of a television broadcast, webcast, film, video, CD-ROM, DVD, live event, or other production into text and displaying the text on a screen or monitor. Captions not only display words as the textual equivalent of spoken dialogue or narration, but they also include speaker identification, sound effects, and music description. Captioning is critical for students who are deaf or hard of hearing, but it also aids the reading and literacy skills development of many others
The Described and Captioned Media Program

I work at an organization that advocates for inclusive design in all areas of society. It’s important to lead by example and so I strive for maximum accessibility in all our learning tools. I’ve led us to adopting high standards for closed captions, based mainly on the Described Media and Captioning Program (DCMP) captioning key, with some variations suggested by the Canadian Hearing Society’s Barrier Free Education Initiative and The Canadian Association of Broadcasters CC Standards and Protocol… August 2012 (PDF).

This post will be in three parts. Part 1 provides background. Part 2 will provide CSS code that approximates DCMP presentation guidelines for use in Articulate Storyline 360, and I’ll show you where you to put that code in AS360’s program templates folder so your quality captions appear automatically when you preview or publish a learning module using the AS360 desktop application, and Part 3 will present a tutorial on creating quality captions tuned to the DCMP’s guidelines using the free, open source editor Subtitle Edit,

A basic principle of inclusive design is designing for outliers. The Inclusive Design Research Centre says, “…Inclusive design should trigger a virtuous cycle of inclusion, leverage the ‘curb-cut effect’, and recognize the interconnectedness of users and systems.” The ‘curb-cut effect’ refers to the sloped cuts in the curb at intersections that were originally put in place for people in wheelchairs and that probably all of us sooner or later come to value.

And so it can be with closed captions — designed for the hearing impaired, they’re useful to anyone in a setting where for any reason it’s too hard to hear or, conversely, one wishes to enjoy video content but not to be heard. Presented also as “subtitles”, captioning is often vital to language learners and all those wishing to expand markets or impact diverse demographics.

The DCMP has studied this topic for over 20 years and more than anyone I can think of understands how the ‘curb-cut effect’ applies in this context. Perhaps the outliers among outliers are those with cognitive disabilities. To meet the needs of everyone quality captions contain each of the following elements. Quality captions are accurate—word-for-word, except in very specific circumstances I’ll discuss later—consistent, i.e., uniform in style and presentation, clear, representing the audio completely, identifying speakers and non-speech information, to provide clarity. They must be readable: displayed with enough time to be read completely, in sync with the audio, and neither obscured by nor obscuring the visual content. Equal access considers learners’ cognitive diversity, requiring that the meaning and intention of the material are completely preserved, not only in ways that benefit the hearing impaired.

Nonetheless, as with all forms of communication, one must always consider the audience. As an infamous (and fictitious) pirate of the Caribbean once said about a much different code, the finer details of quality captioning remain “…more what you’d call ‘guidelines‘ than actual rules” (Captain Jack Sparrow). In Part 2 I’ll summarize some key points I try to maintain in every case, discuss some instances where I might consider bending the rules, and describe some situations where one clearly must improvise. I’ll translate all that into a snippet of CSS code that works with the elearning software I use, Articulate Storyline 360 (AS360), and show you one way to make it work in AS360 so it’s applied in both previewed and published slides and persists between publications.

See you soon.

Part 2–>

§

Jan 28

Tools, Practices and Actions – From Information to Knowledge

Screenshot of CompendiumNG

CompendiumNG allows stakeholders to quickly create visual maps on a topic using nodes and links. In this example different ideas regarding a problem are collected for assessment. It is possible to adjust the appearance of links and node labels. Source: www.CompendiumNG.org

Prior to a recent workshop a question was circulated that looked as if it was tailored to get my response. I stumbled on some great answers to this question over the course of my master’s research into project-based learning design: “Compendium; Dialogue Mapping; Let’s Do It!” I said, and they asked for more information. I replied by pulling some key points from the best articles I have into the following message and sending it with the full articles to my colleagues who posed the question. Where will this lead?

Question, brainstorming on Effective Communication

What tools, practices, or actions could facilitate greater collaboration and cooperation between units?

To Whom It May Concern:

At the recent workshop I mentioned tools, practices and actions we can take right away to address communication issues raised in previous meetings and surveys. You asked me to send you more information. Thank you for this opportunity. Please see below:

Tool:
There are many resources on this tool on line. It’s open source and has been branched by various groups of educators. CompendiumLD is specifically for learning design, but CompendiumNG, aspires to be the Next Generation of Compendium. N.b.: The Compendium tool is suitable for mapping external “focus group” type dialogue involving many stakeholders, a small meeting, or anything in between. The object is to “…work together to build a shared picture with all the stakeholders that accurately represents what we “know,” what different people assert, what we can try and learn from, and what we currently think are the relevant options” (Seybold, 2013, pg. 5).

http://www.compendiumng.org/use-examples/

List of potential uses for CompendiumNG:

Continue:

Practice—Dialogue Mapping:

Dialogue Mapping “… has been used for over three decades to help the different stakeholders in large, complex projects achieve alignment, make decisions they can own, and move forward” (Seybold, 2013, pg. 1). It is related to other forms of argument mapping, for example the Toulmin Model of Argument (see for example, Intel, 2006), but uses an icon-based graphic organizer to denotes the parts of the argument, called Issue Based Information System (IBIS), “…a notation invented by Horst Rittel and Werner Kunz in the early 1970s. IBIS is best known for its use in dialogue mapping, a collaborative approach to tackling wicked problems (i.e. contentious issues) in organisations. “At the heart of IBIS’s power is the amazing capability of questions, when framed in an open and systematic way, to create new distinctions and new clarity out of the fog of social complexity and collapsed meanings,” says Patricia Seybold (2013, pg. 11). It has a range of other applications as well – capturing knowledge is a good example…” (Eight to Late, 2010). This article continues by quoting the first sentence of the abstract of Rittel & Kuntz (1970, pg. 1).

Issue—Based Information Systems (IBIS) are meant to support coordination and planning of political decision processes. IBIS guides the identification, structuring, and settling of issues raised by problem—solving groups, and provides information pertinent to the discourse.

IBIS was to be “…the type of information system meant to support the work of cooperatives like governmental or administrative agencies or committees, planning groups, etc., that are confronted with a problem complex in order to arrive at a plan for decision…” (pg. 1). It can be said, “From the start, then, IBIS was intended as a tool to facilitate a collaborative approach to solving …or better, managing a wicked problem by helping develop a shared perspective on it” (Eight to Late, 2010, pg. 2).

A Brief Introduction to IBIS (Source: Eight to Late, 2010)

The IBIS notation consists of the following three elements:

  1. Issues(or questions): these are issues that are being debated. Typically, issues are framed as questions on the lines of “What should we do about X?” where X is the issue that is of interest to a group. For example, in the case of a group of executives, X might be rapidly changing market condition whereas in the case of a group of IT people, X could be an ageing system that is hard to replace.
  2. Ideas(or positions): these are responses to questions. For example, one of the ideas of offered by the IT group above might be to replace the said system with a newer one. Typically the whole set of ideas that respond to an issue in a discussion represents the spectrum of participant perspectives on the issue.
  3. Arguments: these can be Pros (arguments for) or Cons (arguments against) an issue. The complete set of arguments that respond to an idea represents the multiplicity of viewpoints on it.

The Seven Question Types at the Heart of Issue Mapping (Source: Seybold, 2013, pg. 11):

  1. Deontic: What should we do?
  2. Instrumental: How should we do X?
  3. Criterial: What are the criteria for success?
  4. Factual: What is X?
  5. Conceptual: What does X mean?
  6. Explanatory: Why is X?
  7. Contextual: What is the background?

Issue Mapping can be used effectively for everyday business and personal decisions, but its potential is vast. Through the skillful use of questions, an issue map has unlimited capacity to represent and clarify diverse points of view, conflicting interpretations and goals, inconsistent information, and other forms of complexity…”
(Cognexus Institute website: www.cognexus.org/)

Compendium is a freeware tool that can be used to create IBIS maps… In Compendium, the IBIS elements described above are represented as nodes as shown in Figure 1: issues are represented by blue-green question marks; positions by yellow light bulbs; pros by green + signs and cons by red – signs. Compendium supports a few other node types, but these are not part of the core IBIS notation. Nodes can be linked only in ways specified by the IBIS grammar as I discuss next.

Figure 1: IBIS elements

The IBIS grammar can be summarized in three simple rules:

  1. Issues can be raised anew or can arise from other issues, positions or arguments. In other words, any IBIS element can be questioned. In Compendium notation: a question node can connect to any other IBIS node.
  2. Ideas can only respond to questions– i.e. in Compendium “light bulb” nodes can only link to question nodes. The arrow pointing from the idea to the question depicts the “responds to” relationship.
  3. Arguments can only be associated with ideas– i.e. in Compendium “+” and “–“ nodes can only link to “light bulb” nodes (with arrows pointing to the latter)

The “legal links” are summarized in Figure 2 below.


Figure 2: Legal links in IBIS

Yes, it’s as simple as that.

(pp. 2-3).

Facilitate Group Meetings Using Real-time Dialogue Mapping (Seybold, 2013, pg. 17-18).

The place that Dialogue Mapping really shines is in a face-to-face group design and/or strategic planning session. It’s a much richer tool to use than capturing ideas on flip charts. Don’t forget, however, that just displaying the flow of the conversation doesn’t really add a lot of value. Getting people to validate the ideas that are captured, to build on them, and to really own the map as an active part of their design process is where Dialogue Mapping really shines.

[…]

Continue to Evolve the Group Discussions/Maps Over Time

Today’s design activities are far from “one and done.” Usually you kick off a design project with a vague idea about the appropriate solution and, over time, through the shared dialogue, experimentation, and learning, you evolve your collective thinking and come up with better and better solutions through trial and error.

Asynchronous Mapping In Between Group Meetings. In between group meetings, participants can add to their section of a group map on their own time. They can add links and documents to the map as ammunition to bolster a pro or a con. They can add new ideas, along with sketches, text, or videos to provide really great examples for other team members to absorb at their own pace.

Capture Institutional Memory. One of the beauties of Dialogue Maps is that they can be time- and date-stamped and added to over time. You can then see a history of how your collective thinking evolved. Many of Jeff Conklin’s clients really value the institutional memory that these maps provide over a long period of time.

From Mapping project dialogues using IBIS – a case study and some reflections (Awati, 2011)

Abstract
Purpose
: This practice note describes the use of the IBIS (Issue-Based Information System) notation to map dialogues that occur in project meetings.

Design/methodology/approach: A case study is used to illustrate how the technique works. A discussion highlighting the key features, benefits and limitations of the method is also presented along with a comparison of IBIS to other, similar notations.

Findings: IBIS is seen to help groups focus on the issues at hand, bypassing or avoiding personal agendas, personality clashes and politics.

Practical Implications: The technique can help improve the quality of communication in projects meetings. The case study highlights how the notation can assist project teams in developing a consensus on contentious issues in a structured yet flexible way.

Originality / Value: IBIS has not been widely used in project management. This note illustrates its value in helping diverse stakeholders get to a shared understanding of the issues being discussed and a shared commitment to achieving them.

Action: Identify an interested working group to continue investigating applications of dialogue mapping [here at work].

Reference

Awati, Kailash (2011) “Mapping project dialogues using IBIS: a case study and some reflections”, International Journal of Managing Projects in Business, Vol. 4 Iss: 3, pp.498 – 511. [PDF]

Buckingham Shum, Simon; Selvin, A.M.; Sierhuis, Maarten; Conklin, Jeffrey; Haley, C.B. and Nuseibeh, Bashar (2006). Hypermedia support for argumentation-based rationale: 15 years on from gIBIS and QOC. In: Dutoit, A.; McCall, R.; Mistrik, I. and Paech, B. eds. Rationale Management in Software Engineering. Berlin: Springer-Verlag, pp. 111–132.

Eight to Late (WordPress blog: Archive for the ‘Issue Based Information System’ Category, (2010), https://eight2late.wordpress.com/category/issue-based-information-system/ .

Horst W. J. Rittel & Webber, Melvin M., Dilemmas in a General Theory of Planning (1973), Policy Sciences 4 (1973), 155-169.

Intel Corp. (2006) Teach To The Future, Showing Evidence Tool Resources, Appendices [PDF: www.schoolnet.org.za/twt/09/M9_argumentation.pdf]

Kunz, Werner and Rittel, Horst W. J., Issues As Elements Of Information Systems (1970) [PDF: www.cc.gatech.edu/~ellendo/rittel/rittel-issues.pdf].

Seybold, Patricia (2013), How to Address “Wicked Problems” Use Dialogue Mapping to Build a Shared Understanding and Evolve a Group’s Thinking, [PDF: http://dx.doi.org/10.1571/br05-23-13cc]

There are shortcomings in the notation and maps can get unwieldy. While it’s easy to get started, dialogue mapping requires considerable practice to perfect (Awati, 2011, pg. 14). These and some other factors have slowed adoption. Some of these factors certainly exist in my workplace. We’ll soon see if the apparent awakening to the existence of different strategies to build more effective communication gains enough momentum to catch on and spread.

§

Dec 21

Can (messy) mind maps enable tidy linear strategies within messy situations?

Graphic: a very messy mind map of a complex project.My research into educational, mostly open source software tools identified ones that have proven multi-tasking abilities within “authentic” learning situations (Conole and Fill, 2005; Conole, 2008). Among these, the so-called “Mind Mapping” tools stand out for what I think are several very good reasons. The image to the right, a “mind map” of a recent research project, shows the good, the bad and the ugly.

the rules common to all information systems do not cover the messy, ambiguous, and context-sensitive processes of meaning making, a form of activity in which the construction of highly “fuzzy” and metaphoric category systems is just as notable as the use of specifiable categories for sorting inputs in a way to yield comprehensible outputs.

—Jerome Bruner (1996 in Illeris, 2009, pg. 162)

It seems under-researched maybe, but I believe I saw indications, and I certainly have anecdotal evidence, that mind maps may lack meaning to people who for whatever reason(s) must solve problems in predominantly linear ways. In at least one case I’ve seen a mind map—the one of my research project at the top of the post—elicit genuine anxiety in a person with clinical anxiety disorder!

Messiness: the face of authentic learning

It’s certainly true that mind maps can get confusing. Connections become interwoven in admittedly “messy” ways—which, I argue, makes them particularly suitable to solving exactly the types of messy problems we increasingly face—although they often appear in ways that can understandably throw self-identified “linear thinkers” quite literally for a loop. It’s small wonder many people believe mind maps don’t, won’t, will never work for them. However, the same solutions cartographers have applied for centuries work in these maps too (Buckingham Shum and Okada, 2007), and are available in free tools with powerful multitasking abilities. Messiness is a fact of authentic learning situations (Collins, Joseph & Bielaczyc, 2004, pg. 19). Clinical settings and attempts to eliminate messiness can even be counter-productive (pg. 20). Describing the linear step pattern shown below in Fig. 1 (red line) Patricia Seybold says, “…we keep trying to shoehorn” Wicked Problems into that linear approach” (2013, pg. 3). I think what I’ll call linear imposition, the imposing of a linear framework or template on a non-linear situation, is at the root of Jean Lave’s “paradox” she says often causes institutionalized learning to fail (Lave, 1993, pg. 78). I believe ethnographers such as Lave have had an important impact on design thinking in education research and instructional design because of their “attempts to characterize relationships and events that occur in different educational settings. …ethnographic research produces rich descriptions that make it possible to understand what is happening and why” (Collins, Joseph & Bielaczyc, 2004, pg. 21). By “rich” descriptions Collins, Joseph & Bielaczyc mean “‘Thick,’ as in Geertz,” and by mapping these connections we contribute to the design of ‘thicker’ learning situations we hope result in deeper learning.

designVUE: lining up the non-linear

The problem is, while we may place things on lists and in lines to organize and sequence an approach, those things may have their own interconnections and internal organizations, especially if the “things” are groups of people with competing rights and interests. And so the line we draw prior to achieving full understanding of a problem is actually an imposition that changes the nature of the existing problem and causes new problems to arise. As Conklin has shown, solving problems is an iterative process.

How Humans Solve Opportunity-Driven Problems

graph plotting a linear step by step solution (red) overlayed by a process actually observed in practice (green)

Figure 1: From a 1980’s study at the Microelectronics and Computer Technology Corporation (MCC) that looked into how people solve problems. Each peak in the green line can be understood as heading “back to the drawing board,” yet each return to the drawing board carries all the experience of the previous attempts. Source: Conklin, 2006 ©2006 John Wiley & Sons, 2013 CogNexus Group. For an excellent discussion, see also Seybold, 2013.

Mitigating Mind-Map Anxiety

Mind-map anxiety might be mitigated by applying well understood principles of cartography. Buckingham Shum and Okada (2007) say the analogy to cartographic representations of physical space is valid, providing “…an ‘aerial view’ of a topic by highlighting key elements and connections,” and calling mind maps “vehicles for summarising and negotiating meaning” (pg. 27). designVUE is one college design department’s enhancement of another university’s contribution to the open source software world and visual understanding. I think designVUE’s quick formatting tools and presentation mode lets us do some of the things map makers do. Some of these things are, or should be, in grade-level curriculum requirements—perhaps giving students hands on access to free tools like designVUE might support the teaching and learning of many.

Map coloring is the act of assigning different colors to different features on a map. There are two very different uses of this term. The first is in cartography, choosing the colors to be used when producing a map. The second is in mathematics, where the problem is to determine the minimum number of colors needed to color a map so that no two adjacent features have the same color.
—Wikipedia article

There’s nothing more linear than a time-line; as the first image shows, a mind-mapping tool makes it easy to display linear progression, so if this is the only objection, it soon crumbles. In designVUE you choose the colour scheme (“fill,” “line,” font “style”) and shape.

With the Quick Prototyping tool draw a line of bubbles in a quick succession of clicks…

mind map bubbles in a line

Image 1. In VUE you can use the Prototyping tool to draw a line of bubbles with a directional arrow between, or with standard tool place the thought bubble on a line or arrow.

Any individual “bubble” in the map may consist of much messier activities. Brainstorming, for example, is a spiral of ideas, questions, answers, and arguments. In designVUE you can use colour to visually set an activity apart, but you can also create pathways that hide and reveal specific sets of bubbles—overcome cognitive overload. Or group bubbles within each other as I’ve done here with a question, answer and pro/con set that illustrate IBIS1, a system that often goes hand-in-hand another highly successful application of mind-maps: “dialogue mapping2.”

mind map bubbles of a new color added in a spiral

Image 2. Part of a brainstorming session suggesting a circular and iterative process, shown in a different colour. With “Pathways” you can hide entire sections and choose different sequences.

But wait! Yes, there’s more! In these days of collaboration linear thinkers and their strategies are as important as ever. designVUE has a presentation tool that allows teams to construct linear pathways through maps of even the most complex dialogues, in order to gain clarity, reach consensus, and explain decisions to others. designVUE also does metadata in OpenCalais, allows you to store resources and documents in the bubbles, share maps as interactive HTML documents, reuse the same maps in multiple other maps… I’m only scratching the surface.

Image 3. Showing Pathways in the workspace. Also shown are the IBIS icons for question, idea, pro and con arguments.

The Pathways panel allows you to create standard (linear) PowerPoint-like slides and bullet points, though not as effortlessly as the commercial product. VUE’s true power as a presentation tool takes some time to appreciate and master, but if your goal is to enhance a learning situation by creating memorable and meaningful visual connections between the content, and then using the same tool to convey those ideas to an audience this tool might be what you’re after.

mind map bubbles of a new color added in a spiral

Image 4. The Pathways panel allows you to show and edit more traditional PowerPoint-like slides. In effect VUE’s “Pathways” can be separate but related presentations, or audience-specific variations on a theme.

Panel closeup. The images can be sized, additional ones and text added to each slide that need not be shown in other views:

Image 5. Closeup of the expanded Pathways Panel. The order and whether it’s shown is determined here.

In Presentation mode, hitting Enter can shift to yet another view of the groups of ideas in the presentation. There’s definitely a learning curve but my early impression is this can potentially change the way you do presentations. I highly recommend this VUE tutorial for ideas and examples.

Image 6. In Presentation mode, hitting Enter can shift to yet another view of the groups of ideas in the presentation. See this VUE tutorial for examples (note the PDF for download beneath the video player).

Summary

The types of 21st century problems we increasingly understand need taming—as they defy solving by their very nature—are “wicked problems.” This necessarily includes nearly all matters of public education, indeed of public policy as a whole, where the conflicting and intersecting rights and responsibilities of multiple stakeholders is always …messy! Governments are coming to recognize this. See the Australian Public Service Commission site for one well explained example (Commonwealth of Australia, 2007). In Canada Quebec and New Brunswick have already discovered the importance of understanding certain problems’ ‘wickedness’ in these ways. “As distinguished from problems in the natural sciences, which are definable and separable and may have solutions that are findable, the problems of governmental planning—and especially those of social or policy planning—are ill-defined; and they rely upon elusive political judgement for resolution. (Not “solution.” Social problems are never solved. At best they are only re-solved—over and over again.)” (Rittel and Webber, 1973, pg. 160).

Mind mapping, undertaken thoughtfully and with purpose (see Jeff Conklin’s video: The Limits of Conversational Structure), has proven its value in all aspects of teaching and learning. As a teacher I used it much as John Budd did here, and as an instructional designer I use it as a graphic organizer. When mapping strategies are used to both record, and then map dialog to describe real situation, and when that’s done openly and collaboratively as in situations such as Conklin has described and reproduced in practice for years it can lead to shared understanding and conflict resolution.

I don’t think it’s fair, or rational, to presume that everyone is going to instantly drop PowerPoint and buy into a mindmap-based workflow, and that’s not what I’m suggesting. While dialogue mapping can handle wicked problems, it can also do meeting minutes, so consensus can be achieved and documented by the most mutually comfortable and practical means—and the cartographers have a single one stop tool to gather and document the entire process, or to communicate it to others.

Conlusion

If we embrace all the 21st century models, or “competencies” seen emerging, the primary and inescapable one at the base of many others is asynchronous collaboration via digital networks. Can it not simply be that the divergent thinkers map their thoughts in collaboration with linear thinkers who further delineate the why and how of their musings? Taking up perhaps the next most agreed upon 21st century learning objective, critical thinking, it seems likely we can seek solutions to simple problems and taming strategies for wicked ones, discerning the difference. Mind mapping tools are web enabled and metadata ready. A strategy for taming wicked problems that uses mind maps, argument mapping or Conklin’s trademarked Dialogue Mapping, keeps track of pros, cons, and rationale, and documents decisions making around simple problems, but offers a powerful tool for the building of the shared understanding that must precede consensus around the taming of wicked ones. Formal training can be found, but the VUE, designVUE and various Compendium software sites themselves, Conklin’s and YouTube are probably the place to start—to get an, ahem… visual understanding of what mind maps and mind mappers might bring to which ever debate you’re having.

Maybe “Can messy mind maps enable tidy linear strategies within messy situations?” isn’t the right question. In my experience it still requires steps and sequencing to deal with the issues, but the graphic organization—the visual understanding—provided by maps in programs like VUE and Compendium, in the right hands, can really help you get a grip on the situation. It very well may need both types of thinking, and that well may require collaboration. Maybe the question to be asking is, “Are there any concept and conversation cartographers in your workplace or your PLN?”

§

Read more about mind maps


    Notes:

  1. Issue-Based Information System (IBIS) was invented by Werner Kunz and Horst Rittel as an argumentation-based approach to tackling wicked problems – complex, ill-defined problems that involve multiple stakeholders. (more)
  2. Dialogue Mapping™ is trademarked by Jeff Conklin & CogNexus Institute, who describes it as “…a radically inclusive facilitation process that creates a diagram or ‘map’ that captures and connects participants’ comments as a meeting conversation unfolds. It is especially effective with highly complex or “Wicked” problems that are wrought with both social and technical complexity, as well as a sometimes maddening inability to move forward in a meaningful and cost effective way.” (more) [Demonstration PDF]

§

the assumptions proposed here amount to a preliminary account of what is meant by situated learning. Knowledgeability is routinely in a state of change rather than stasis, in the medium of socially, culturally, and historically ongoing systems of activity, involving people who are related in multiple and heterogeneous ways, whose social locations, interests, reasons, and subjective possibilities are different, and who improvise struggles in situated ways with each other over the value of particular definitions of the situation, in both immediate and comprehensive terms, and for whom the production of failure is as much a part of routine collective activity as the production of average, ordinary knowledgeability.
—Jean Lave

More VUE

The Visual Understanding Environment (VUE) is an Open Source project based at Tufts University

VUE is very well documented. The English user guide is here.

designVUE is a branch of VUE. It is an open source project based in the Design Engineering Group of the Mechanical Engineering Department at Imperial College London.

CompendiumLD is either fierce competition… or you can do as I do and use both! See the Learning Design-specific “stencils” in the screen shots. They’re easily ported to other Compendium flavours, and you could apply the concept in VUE with your own icons and very little extra trouble.

Reference

Bruner, Jerome (1996) Culture, mind, and education in Contemporary Theories of Learning – Learning theorists … in their own words, Knud Illeris ed., 2009, NY: Routledge; Edition published in the Taylor & Francis e-Library, 2009.

Buckingham Shum, Simon and Okada, Alexandra (2007). Knowledge Mapping for Open Sensemaking Communities. In: Researching open content in education – OpenLearn 2007, 31 Oct 2007, Milton Keynes, UK.

Collins, Allan & Joseph, Diana & Bielaczyc, Katerine (2004), Design Research- Theoretical and Methodological Issues, The Journal of the Learning Sciences, Vol. 13, No. 1, Design-Based Research:Clarifying the Terms. Introduction to the Learning Sciences Methodology Strand (2004), pp.15-42

Commonwealth of Australia (2007) Tackling Wicked Problems: A Public Policy Perspective, [Archived]

Conklin, Jeffrey (2006) Dialogue Mapping: Building Shared Understanding of Wicked Problems, West Sussex: John Wiley & Sons., Ltd., 242 pp.

Conklin, Jeff (2006b) Dialogue Mapping Demonstration, [unspecified journal, citation incomplete] CogNexus Institute, pp. 249-251 [Demonstration PDF].

Conole, G. and Fill, K. (2005). A learning design toolkit to create pedagogically effective learning activities Journal of Interactive Media in Education 2005(08). [PDF: jime.open.ac.uk/2005/08]. Gráinne Conole and Karen Fill, University of Southampton. Page 1 Published 26 September 2005 ISSN: 1365-893X [uses CompendiumLD]

Conole, G. (2008). Capturing Practice: The Role of Mediating Artefacts in Learning Design. Handbook of Research on Learning Design and Learning Objects. (Eds.) Lockyer, L., Bennett, S., Agostinho, S. and Harper, B. ISR Press. [Pre-print of learning design chapter on using compendium].

Lave, J., & Wenger, E. (1991). Situated learning. Legitimate peripheral participation. Cambridge, England: Cambridge University Press.

Lave, Jean (1993) The practice of learning in Contemporary Theories of Learning – Learning theorists … in their own words, Knud Illeris ed., 2009, NY: Routledge; Edition published in the Taylor & Francis e-Library, 2009.

National Collaborating Centre for Healthy Public Policy (2012) Tackling Wicked Problems in the Built Environment: Of Health Inequalities and Bedbugs [Workshop details]

Rittel, Horst and Melvin Webber (1973) “Dilemmas in a General Theory of Planning,” Policy Sciences 4, Elsevier Scientific Publishing, Amsterdam, pp. 155-169.

^ Seybold, Patricia B. (2013) How To Address “Wicked Problems” – Use Dialogue Mapping to Build a Shared Understanding and Evolve a Group’s Thinking, book review, [HTML | PDF]

Sep 30

LilyPond with Frescobaldi: open source music engraving

LilyPond is open source music engraving software. LilyPond “…was designed to solve the problems we found in existing software and to create beautiful music that mimics the finest hand-engraved scores.” It produces some of the finest looking scores you can imagine, and almost any style of note or notation you can imagine. But it’s a scripting language—which for many people makes it very difficult to learn, and much too tedious to use. Enter Frescobaldi.

Frescobaldi is an open source editing tool for LilyPond. I won’t pretend there’s no learning curve, but if you want to print absolutely stunning music scores and enjoy learning technology it’s worth it, and I’ll help you get started. And if you’re a music educator I’ll make some suggestions about how I might use this in teaching, albeit at a high school level or higher, with students who have already learned the basics of reading. Thanks to Frescobaldi’s built-in MIDI player I see applications to ear training, as well as more obvious help with general notation problems. I’ve also screen-recorded some of my first explorations, and I intend to edit them down and add audio, and continue with a video tutorial, hopefully in just a few days.

Both programs run on Windows, Mac or Linux, but there’s no Mac or Linux installer for Frescobaldi, so if you’re not running Windows you may need some extra skills there. First, download and install both programs using the links below. You will not need to launch LilyPond. You’ll launch Frescobaldi, tell it where to find LilyPond and Frescobaldi will take it from there.

Software links

LilyPond is a music engraving program, devoted to producing the highest-quality sheet music possible. Download

Frescobaldi is a LilyPond sheet music text editor. It aims to be powerful, yet lightweight and easy to use. Download

  1. On first launch Frescobaldi opens an empty document. You type and insert LilyPond code in the left Editor panel and then press the LilyPond icon ion the toolbar to render a gorgeous PDF in the right, or Music View panel. hide image Screen shot
  2. Choose EditPreferences… show image
  3. Set path to LilyPond show image
    Windows default: C:/Program Files (x86)/LilyPond/usr/bin/lilypond-windows.exe
  4. Choose ToolsPreferencesSetup New Score… (Ctrl+Shift+N) to open the Score Setup Wizard show image
     Other items on this list will be of great interest soon… I used the Quick Insert tool and the MIDI Player early in my very first score.

    The Score Setup Wizard lets you set the following up front—especially recommended your first time, as once you create the file you’ll need to get code snippets from the documentation, the other tools in the Tools menu, another file, or know what to type.
     You might even want to fill in all the fields and save a MasterSnippet.ly file for later reference. Frescobaldi also has its own built-in Snippets manager.

    1. Titles and Headers show
    2. Parts show
    3. Score Settings show
       Be sure to try the Preview button!

To get started I just picked 8 bars of a Stevie Wonder tune I happened to have loaded in iTunes. You can see the first 2 bars of the lick on the right of the screen shot below. The script on the left side, which you’d have to write from scratch without an editor, demonstrates rather aptly I think, why a tool like Frescobaldi can likely make LilyPond more useful to a much larger community. What will be much easier to demonstrate in a video tutorial is how I copy/pasted a snippet of code from the documentation into the editor and then tweaked it until I got what I wanted. The notes you see on the right are formed entirely by this part of the script on the left. 'is' as a sharp is not intuitive (unless you speak Dutch), but now that I’ve told you perhaps you can see the 4, 8 and 16 that sets note values, ‘r’ for rest, and the lower case note names, key of B Major. The tildes (~) create the ties, and I entered staccato and accents using the Quick Insert tool shown in the left panel of the final screen shot below.
 All your music goes immediately after the % Music follows here. and before the closing curly brace (}) that lines up flush left with the instrument name above it and the code \score below it (see both screen shots beneath the following code snippet).

// You can group and nest notes in curly braces for readability.
// Here I've grouped each beat within each measure on its own line.
{
{b4-.} {r16 b16 dis cis->~}  {cis-. cis16 gis' fis->~} {fis8-. fis,16 gis}
}
{
{b8->-. cis16 cisis16} {dis16 fis gis b->~}  {b16 cis16 cisis dis->~} {dis4-.}
}

Screen shot

By the time I’d finished I’d opened the MIDI Player to check my work. You need to press the Engrave button to refresh the output on the right (there are further options under the LilyPond menu). Frescobaldi supplies the bar lines based on the time signature in the score settings, and plays audio—I feel those two facts have pedagogical implications. I slowed down my 8-bar passage using Audacity, played them side by side, and by refreshing the output was able to see and hear what I had right and wrong along the way.
Screen shot
I hope this is enough to pique your interest. There’s another LilyPond editor I plan to try soon too, Denemo, highlighted with even more on the LilyPond site. It looks quite sophisticated, but I can tell I’ve barely scratched the surface of Frescobaldi, which was intuitive enough out of the box to keep me intrigued and progressing—getting this far was fun! Please use the comments section and stay tuned for some video tutorials as I get in further.

§

Richard studied as a teenager with Trevor Payne at John Abbott College and attended Berklee College of Music in Boston. He has performed across Canada with full-time rock bands since the early 80s. He’s been a teacher of rock, jazz & classical guitar at the now defunct Toronto Percussion Centre, and at The Arts Music Store for many years. He holds the degrees of Bachelor of Fine Arts Music (Special Honours), Bachelor of Education, and Master of Education from York University, plays guitar and trombone, and taught grade 6-8 band at the Toronto District School Board and North York School Board.

Sep 02

Audacity files are just XML documents, sooo…

I know it’s unlikely this particular solution—in which I use Audacity’s Labels Track interface to help me auto-generate HTML code I find tedious to write manually—will receive many “Wow! Just what I was looking for!” comments. It’s more about connecting dots. XML is like the universal translator on StarTrek, so if you have data in XML format it means you can easily get at that data and do anything else with it your heart desires. While I have access to leading proprietary audio applications that are appropriate for recording music, I use Audacity for all elearning narrations and voice-overs—the fact that it generates a valid XML document containing all the information about a project is one of the reasons.

I think the first time I intentionally opened a binary file with a text editor was probably using Notepad on Windows 3.0. “Gibberish” or “garbage characters” are ways most people I knew described what they saw there. But my curiosity to look further had the result that later, as a help desk assistant in the computer lab, I used the technique with one plain text editor or another to identify what program a file had been created with or to recover the essential text from a document that had become corrupted. Opening files with text editors was something that started as a curiosity but occasionally yielded other fruit… it became something I just do. By the time I first opened an Audacity *.aup file to find it contains not binary “gibberish” but well-formed XML I had received a training course in XML and had used XSLT to write a library catalogue management tool that was in use at the same lab, so I knew the discovery would come in handy.

When it was decided a 53 slide module I made was to be translated into 13 additional languages I found two very helpful applications for this bit of knowledge. The first, because I keep my projects in a MySQL database and identify every item on the storyboard by module, section, subsection, and slide, is that once the translations were loaded I was able to loop through a query and create a blank, properly tagged and labelled Audacity .aup file for every slide. The second is much more fun, so I’ll get the first one out of the way… I’m best with ColdFusion (CFML = ColdFusion Markup Language), but you can do this with PHP or any other language, just include or require the right libraries for parsing XML.

Create a new project in Audacity and save it as blank_project.aup. Open the file in any plain text editor (I like EditPadLite) What you do next will vary depending on what application server you’re using and how , but in ColdFusion my first go at it was pretty lazy. I put the entire file inside a cfsavecontent block, looped through a database query to get my information, plugged it in, and write it to the server’s hard drive. Of course that’s most practical if it’s also your laptop or desktop’s hard drive—I’ve done this with both Adobe’s wonderful (and free) ColdFusion developer version, and just recently with Railo, the open source CFML engine.(for PHP I’d use XAMPP, EZPHP or similar).

Your SQL will be your own, but it probably still helps to see mine…

SELECT * FROM allslides
 WHERE module = 'thisMod' AND lang = 'th-is'
 ORDER BY module_id, section_id, subsection_id, slide_id;

Loop through the query. n.b.: in XML it’s crucial to have no characters of any kind before the <?xml version="1.0" standalone="no" ?>When I said lazy, I meant it… to avoid trimming I just put it right after the opening cfsavecontent tag without a space or hard return (but if my source formatter tries to make it prettier I have to put it back). The variable “descript,” by the way, is a short human readable description I keep in the database so I don’t have to remember what slide hr101-B30 is, it comes out hr101-B30-keyconcepts. #SPEECH# is the word for “speech” in whatever language.

<cfloop query="myQuery"><!--- create a unique name for project,
                              file and data directory --->
<cfset thisProjectId = "#module_id#-#section_id##subsection_id##slide_id#-#descript#">
<!--- store the file in a variable --->
 <cfsavecontent variable="aup_file_contents"><?xml version="1.0" standalone="no" ?>
<!DOCTYPE project PUBLIC "-//audacityproject-1.3.0//DTD//EN"
 "http://audacity.sourceforge.net/xml/audacityproject-1.3.0.dtd" >
<project xmlns="http://audacity.sourceforge.net/xml/" projname="#thisProjectId#_data"
 version="1.3.0" audacityversion="2.0.1" sel0="0.0000000000" sel1="0.0000000000"
 vpos="0" h="0.0000000000" zoom="86.1328125000" rate="44100.0">
    <tags><!--- Replace #variables# with data from database --->
      <tag name="GENRE" value="#SPEECH#"/>
      <tag name="ARTIST" value="#MY_ORG#"/>
      <tag name="TRACKNUMBER" value="#currentRow#"/>
      <tag name="TITLE" value="#SECTION_TITLE# #SUBSECTION_TITLE# #SLIDE_TITLE# "/>
      <tag name="YEAR" value="#year(now())#"/>
      <tag name="ALBUM" value="#MODULE_TITLE#"/>
      <tag name="COMMENTS" value="(C) #year(now())#"/>
    </tags>
</project>
</cfsavecontent>
<!--- to save space, try/catch error-handling not shown --->
<cffile action="write" file="#DRIVE:\path\to\#thisProjectId#.aup"
        output="#aup_file_contents#">
<cfdirectory action="create" directory="DRIVE:\path\to\#thisProjectId#_data">
</cfloop>

That writes 53 files and creates 53 directories in about 3 seconds, well under a minute for all 13 languages if I place this loop in a loop of the languages. It saves me a lot of time.

My jSyncWithMedia plugin was a learning exercise for me, and I learned a lot. With jQuery it was easy for me to attach an “event-listener” to an HTML5 audio or video element’s timeupdate event, and create callbacks to change classes or run simple css animations depending on currentTime, even to enhance the display to show 1/10ths of seconds and get my timings more precise. But I knew all along no rational human would go through the tedious job of syncing all those items. It needs an interface, and while ideally that would be in JavaScript and built into the plugin—and perhaps one day it will be—the knowledge that an .aup is really just another a .xml brings out the laziness in me. You see, Audacity already has the exact interface I need… it’s the Labels track. I figure why not just borrow it?

The image shows the narration for a guitar lesson I’m doing in my own jSyncWithMedia-Alpha-1.0 plugin just because I want to. On the track labels I supply key:value pairs, where the key is always a valid html element (the “off:” key is ignored, but serves as a visual aid).

Showing Audacity's Labels track, spanning sections of audio, with values filled in

Audacity’s Labels track, spanning sections of audio, with values filled in that declare an element and its content.

When you add a label track and labels in Audacity you add <labeltrack> and <label></label> elements to the XML structure, with attributes for title, start time t and end time t1.

    <labeltrack name="Label Track" numlabels="11" height="253" minimized="0">
        <label t="1.69726544" t1="11.83946136" title="li:woodshed"/>
        <label t="11.92225480" t1="27.32183391" title="li:busting"/>
        <label t="20.79346939" t1="62.46764754" title="li:turntable"/>
        <label t="34.31787926" t1="43.54934739" title="li:changes the pitch"/>
        <label t="50.00723540" t1="62.46764754" title="a:audacity.soundforge.net"/>
        <label t="53.85713018" t1="62.50904425" title="img:audacity_logo.png"/>
        <label t="62.46764754" t1="62.55044097" title="off:ALL"/>
        <label t="76.70811855" t1="91.03138299" title="img:copy-paste.png"/>
        <label t="91.11417643" t1="109.90828642" title="li:copy menu item"/>
        <label t="110.15666673" t1="114.79309915" title="li:easily practice"/>
        <label t="114.79309915" t1="123.81758369"
               title="li:Choose File-&gt;Save Project As..."/>
    </labeltrack>

That’s all I need to create all the code to put my syncItems in a <div id=”jSWM”></div> and run my plugin on it to create a presentation.

Here’s the CFML

<cffile action="read" file="#request.pathToXml#\bust_a_solo.aup" variable="myFile">
<cfscript>
    // a debug tool
    dumpIt = request.dumpIt; // default request.dumpIt;

    // validate audacity
    scndLine = listGetAt(myFile,2,chr(10));
    isAudacityFile = REFind('^<!DOCTYPE project PUBLIC "-//audacityproject', scndLine );

    // Initialize strings to hold list and image content.
    contentSyncItemsList = '';
    contentImgDiv = '';

    // a function to display html on the page
    public string function printHTML( html ){
        var theHtml = arguments.html;
        var theHtmlFormatted = replaceList(theHtml,'<,>','&lt;,&gt;');
        return theHtmlFormatted;
    }

    // a function because I'm anal about pluralization'
    public string function pluralizeOn(required numeric n, boolean endsInY="false" ){
        var number = arguments.n;
        var y = arguments.endsInY;
        var plural = '';
        if(not number is 1) {
            plural = IIf( y, DE('ies'), DE('s') );
        } else  {
            plural = IIf( y, DE('y'), DE('') );
        }
        return plural;
    }
</cfscript>
<cfif isAudacityFile>
<cfscript>
 myXML = xmlParse(myFile);
 myLabels = xmlSearch(myXML, "//*[name()='label']");  
 myNamespace = "jswm"; // ohrc etc.
 n = arrayLen(myLabels);
 public string function getWord(required numeric index)  {
   return  myLabels[index].XmlAttributes['title'];
 };
 public string function getOnTime(required numeric index)  {
   return  numberFormat(myLabels[index].XmlAttributes['t'],'9.9');
 };
 public string function getOffTime(required numeric index)  {
   return  numberFormat(myLabels[index].XmlAttributes['t1'],'9.9');
 };
 elements = structNew();
</cfscript>
<cfoutput>
<h3>There are #n# labels in the Audacity file     .</h3>
<cfloop from="1" to="#n#" index="i">
<cfscript> // get the key:value pair that describes the item, then split into key and value
    thisItem = getWord(i);
    thisItemType = listFirst(thisItem,":");
    thisItemValue = listLast(thisItem,":");
    elements.elementType[i] = thisItemType; // FTR, I'm not yet using these 4 structures
    elements.elementContent[i] = thisItemValue; //  
    elements.elementOn[i] = getOnTime(i); //
    elements.elementOff[i] = getOffTime(i); //
    switch (thisItemType){ // format this into the HTML used by jSyncWithMedia
         case "a" : // NOTE: I BROKE VARIABLES ACROSS LINES to fit
          elements[i] = '<li data-#myNamespace#-on="#getOnTime(i)#"
           data-#myNamespace#-off="#getOffTime(i)#"><#thisItemType# 
           href="#thisItemValue#">#thisItemValue#</#thisItemType#></li>';
         break;
         case "img" :  // NOTE: I BROKE VARIABLES ACROSS LINES to fit
          elements[i] = '<#thisItemType# data-#myNamespace#-on="#getOnTime(i)#" 
          data-#myNamespace#-off="#getOffTime(i)#" 
          src="#request.pathToImgFolder##thisItemValue#" />';
         break;
         case "off" :
          elements[i] = 'offList="#thisItemValue#"';
         break;
         default: // li  // NOTE: I BROKE VARIABLES ACROSS LINES to fit
          elements[i] = '<#thisItemType# data-#myNamespace#-on="#getOnTime(i)#" 
          data-#myNamespace#-off="#getOffTime(i)#">#thisItemValue#</#thisItemType#>';
         break;
    }

</cfscript>
<cfif not thisItemType is "off">
<p><code>#thisItemType#</code> element "#thisItemValue#" shown at #getOnTime(i)#, 
           off at #getOffTime(i)# <br>
   </p><cfelseif thisItemType is "off"><!--- OFF post-processed here
                         Pass 'ALL' or comma-list of ordinal element indeces    --->
<cfif thisItemValue is 'ALL'><!--- loop through everything  
           // NOTE: I BROKE VARIABLES ACROSS LINES to fit  --->
<cfloop from="1" to="#i#" index="x">
    <cfset elements[x] = replace(elements[x],'data-#myNamespace#-off="99"',
              'data-#myNamespace#-off="#elements.elementOn[i]#"')></cfloop>
    <cfelse><cfset myArray = listToArray(thisItemValue)><!--- TODO: if keeping 
           deprecated off type must change to regexp --->
    <cfloop from="1" to ="#ArrayLen(myArray)#" index="i"><cfset thisElementNo = 
 myArray[i]><cfset elements[thisElementNo] = replace(elements[thisElementNo],
'data-#myNamespace#-off="99"',
'data-#myNamespace#-off="#getOnTime((structcount(elements) - 4))#"')></cfloop>
</cfif>
</cfif>
</cfloop>
</cfoutput>

<cfscript>
    elCount = (structcount(elements) - 4); //  <!--- Remove number of extra keys --->
    liCount = arrayLen(structFindValue(elements,'li','ALL'));
    imgCount = arrayLen(structFindValue(elements,'img','ALL'));
    aCount = arrayLen(structFindValue(elements,'a','ALL'));
</cfscript>
<cftry>
<cfsavecontent variable="contentSyncItemsList">
<cfoutput><!-- #liCount# li element#pluralizeOn(liCount)#, 
               containing #aCount# link#pluralizeOn(aCount)# -->
<ul id="syncItems">
<cfloop from="1" to="#elCount#" index="i"><cfif elements.elementType[i] is "li">
       &nbsp; &nbsp; #elements[i]#</cfif>
    </cfloop>
</ul></cfoutput>
</cfsavecontent>

<cfsavecontent variable="contentImgDiv">
<cfoutput><!-- #imgCount# img element#pluralizeOn(imgCount)# -->
<div id="syncImages">
<cfloop from="1" to="#elCount#" index="i">
    <cfif elements.elementType[i] is "img">&nbsp; &nbsp; #elements[i]#</cfif>
</cfloop>
</div></cfoutput>
</cfsavecontent>
<cfcatch>
    <cfif structKeyexists(cfcatch,"Detail")><cfset d=cfcatch.Detail>
      <cfelse><cfset d=""></cfif><cfoutput>
    <div><h3>#replace(cfcatch.Type,left(cfcatch.Type,1),ucase(left(cfcatch.Type,1)))#
              type error.</h3>
    <h4>#cfcatch.Message# #d#</h4>
    <p>Sometimes an error here means the variable 
       <code><strong>elCount</strong></code> is wrong. Did you change the number of 
        <code>elements["elementName"][i]</code> keys and not alter 
<code><strong>line 79</strong></code>?</p></div>
</cfoutput></cfcatch>
</cftry>

<!--- and here's the fruit of all that hard work --->
<cfoutput>
<div>
#printHtml(contentSyncItemsList)#

#printHtml(contentImgDiv)#
</div>
</cfoutput>

<cfif dumpIt><cfset findLIValues = structFindValue(elements.elementType,'li')>
<cfoutput>
    <p>#liCount#</p>
</cfoutput>
<cfdump var="#findLIValues#" expand="no" label="findLIValues">
    <cfdump var="#elements#" expand="no" label="ELEMENTS">    
</cfif>

<!--- DEBUGGING stuff... drag it up into the dumpIt area as needed
<cfdump var="#elements#" expand="no" label="elements">
<cfdump var="#getLabels[2]#" expand="no" label="getLabels[2]">
 <cfset myLabels = XMLSearch(myXML, "//*[name()='label']")>   
<cfoutput>#myLabels[1].XmlAttributes['t']#</cfoutput>
<cfdump var="#labels#" label="labels">  --->

<cfelse>
    <h3>Fatal error</h3>
    <h4>This does not appear to be a valid Audacity file.</h4>
</cfif>

If I add jQuery and my plugin to the page and place the CFML in a div, call jSWM() on it, I’ve got a presentation ready to go, and I can tweak the timings or add and remove events in Audacity. I only need the ColdFusion or Railo server on my own computer, copy/paste the generated code anywhere.

Image of output, jSWM generated dynamically from Audacity XML

jSWM generated dynamically from Audacity XML

For me this approach has the added benefit of forcing me to visualize my scenes more thoroughly and in advance, to organize my storyboards according to my design and vision (not just make things up as I go along) and then to stay true to the design and vision.

Apr 16

What would a good PBL planner look like …on the Internet?

That’s the question that started to form in my head as I watched one 21st-Century teacher’s project take shape and grow over the past few weeks. She used at least 3 or 4 “Web 2.0” applications, gathered relevant resources from diverse sources, and tied it together with a Google doc. She used social media to engage parents and experts. It’s an impressive and organically evolving body of work, and I can’t help but think a mashup? of easily obtainable freely available open source tools could make it even easier for more educators to design and execute such rich and engaging learning experiences.

So what have I got?

Continue reading

Apr 08

Instant WordPress, A WordPress Development Server To Go

Instant WordPress was designed for developers to build Plugins and Themes for WordPress. I ask, “What might creative 21st century classrooms do with it, say for a project?”

  • You can do all kinds of things with the blog itself that aren’t even directly computer-related, e.g., social networking, submitting homework, cooperative work, projects… what if you ran the classroom as an internet news publishing organization, with roles and competing organizations maybe?
  • can be used to deploy develop and deploy full-fledged web presence if so desired;
  • as Project Based Learning platform offers some advantages
    • access can be limited to 1 computer, a classroom network, a school, etc.
    • on the internet can lead to powerful collaborations
  • thoroughly private when used in self-contained network;

Your ideas welcome! Please leave a comment!


I’m using my Instant WordPress to develop a WordPress plugin to help teacher plan and deliver projects. Wanna help? Here‘s some more about the idea, and I’m revealing more each day until the tent comes down.

Mar 20

Just an idea I’ve been getting

UPDATED 2012-03-27: What’s with all the icons and rollover pop-ups? They’re based on Compendium, which I’ve written about before. While they may not be appropriate for every everyday blog post, I’m asking you to have a look and leave a comment. Do you see a role for them within other web-based contexts you may be familiar with? If so, which? Leave a comment!

I’m trying to get experience design into my thinking about online learning, using the simple technologies I know and love: computers and various digital mobile devices, web browsers, HTML, CSS, JavaScript. For some time I’ve been headed towards the position  that documents are becoming obsolete. While I was thinking about that a teacher who is part of my Twitter PLN was putting together a wonderful Project-Based Learning experience with her grade 6 class, their parents and many others from the PLN. This led me to have an idea .

Continue reading

Mar 12

Taming wicked problems, planning projects, designing learning—try Compendium

UPDATED: Have a look at some more advanced Compendium maps.

Compendium, its stewards at The Compendium Institute say, “is a software tool providing a flexible visual interface for managing the connections between information and ideas.” Wicked problems, as I’ve written recently, contain social complexity, so solving them is a fundamentally social process requiring many people. Compendium software allows a person working alone, or people in a group, to bring together visually the diverse ideas, assertions, arguments, and resources that might contribute to the “taming” of a wicked problem. Continue reading