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 {
  text-shadow:-1px 0px black, 0px 1px black, 1px 0px black, 0px -1px black;
  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 {
  border-radius:4px;margin:0 0 10px 0;
  font-family:"Open Sans",Calibri,Arial,Helvetica,sans-serif;
  text-align:left !important;
  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!



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 23

What is a “thick learning situation?”

In order to approach learning situations as problems to be solved, rather than topics to be discussed, I’d like to start by defining what, in my view, makes a learning situation “thick.” I’m appropriating the word and concept from Clifford Geertz and the discipline of ethnography, and I’ll attempt to apply it as a lens or framing for teaching and learning, which are, as we know, always socially situated.

From Instruction to Learning

For her chapter entitled Reviewing the trajectories of e-learning [which I summarized on this blog, tweeted, shared on social media, and shared again in my workplace] Gráinne Conole chose the word “trajectory” — a clear link to rocket travel! In keeping with her metaphor, by all indications eLearning has achieved escape velocity and settled into orbit. It certainly shows no signs of falling back to earth any time soon.

…when educators consider the people, places, ideas, and things that might empower the learner or enhance delivery and retention of the content. What technology will I make available to my learners? What have others already prepared that can assist me in explaining things better? Where can I take my learners, both physically and via the web? Can we build something together, plan for synchronicity and serendipity—consider the human chemistry that we are about to incubate? Which experts will I invite to participate? How can we draw out the expertise that may already exist amongst participants we’ve yet to meet?

Conole highlighted what she seems to see as an evolutionary development that’s taking place, from “instructional design” to “learning design.” One concrete way I see this taking shape happens when educators consider the people, places, ideas, and things that might empower the learner or enhance delivery and retention of the content. What technology will I make available to my learners? What have others already prepared that can assist me in explaining things better? Where can I take my learners, both physically and via the web? Can we build something together, plan for synchronicity and serendipity—consider the human chemistry that we are about to incubate? Which experts will I invite to participate? How can we draw out the expertise that may already exist amongst participants we’ve yet to meet?

Storytelling: a catalytic convertor for learning situations

It is becoming increasingly clear that personal and other illustrative stories, dilemmas, scenarios, etc. can act as a “catalyst” that motivates learners to relate to the content. In the language (affectionately?) known as edubabble it might sound like, “foster intrinsic motivation…, enable learner agency…,” or “to construct meaningful knowledge.” I surmise that this might be an added benefit if the educator aspires to create a situation that is memorable and transformational, rather than simply informational.

A situation leading to an inquiry

Supposing you were teaching middle school children civics, and how legislation is created. You might want to talk about “precedent,” and how laws are made or changed—laws we all have to obey. What if you took a piece of case law on a subject you feel your learners may find relevant, and that a legal expert available to your classroom community has told you helped set precedent? What if you engaged those experts and others to present the case to this class as a story, framed in language of fairness and conflict resolution?

Add thickener

So far we’ve not done much out of the ordinary. We could just give a quiz and call it a day. But I believe, and I’ll bet you do too, that that would be a very superficial assessment of some very superficial learning. Instead, what if we ask, “Has anything like this ever happened to you? Do you agree with the outcomes? Who benefits from this law? How?”

I’m interested in hearing from teachers, counselors, and educators of all sorts whether they have tried such an approach, would be willing to try such an approach, or even whether it’s a good idea. Would you care to leave a comment?


More links

Schwartz, Susan and Bone, Maxine (1995), Retelling, Relating, Reflecting — Beyond the 3 Rs, a book that does critical thinking with kids exceptionally well.
Digital Storytelling Toronto
Stories for Change
Knowledge-building community model

The Good Project
Project Zero

Jan 18

CompendiumLD for Learning Design

When the Open University funded the Learning Design Initiative in 2007 they asked about 4 specific aspects of the topic: efficiency & effectiveness of time spent designing learning; ways to represent innovative practice; access and availability of quality support for designers; the true nature of a quality design as it appears or presents in practice. With the continued support of Jisc they’ve produced a range of tools. When the OULDI picked an open source code base on which to build a collaboration-friendly tool to visually represent “a learning design” they “…considered various drawing packages, as well as more specialised mind mapping tools (such as Inspiration and MindManager).

Please note
Your browser can not display SVG so you will not see the interactive vmap that should be shown here.

To see the interactive map, please use a browser which displays SVG, e.g. Chrome, Firefox, Opera, Safari or Internet Explorer 9 and above.
Thank you.

In the end we choose to use Compendium, a visual representation tool, originally developed for enabling group argumentation…” (OU Website).

Compendium was already the Open University’s home-grown product. They set about adapting it specifically to the requirements of learning design, and they named it CompendiumLD. Learning Design is and evolution of traditional and established “instructional design” that provides a more holistic approach (Conole, 2014). Their tool truly does offer a “…range of flexible approaches to the design process,” the interactive SVG to the right, if you’re able to see and use it, is only one example, a “Sequence Map View.” Scalable Vector Graphics (SVG) is an XML-based vector image format for graphics that supports interactivity and animation (Wikipedia). If you’re getting JavaScript alert popup message when you mouse over blame them, not me!

Learning Design emerged “as a counter measure to Instructional Design. Driven primarily by researchers in Europe and Australia, Learning Design aimed to provide practitioners with guidance and support to inform their design process which is pedagogically effective and makes appropriate use of technologies. It is seen as a more encompassing term than Instructional Design, which operates primarily at the level of multimedia; in contrast Learning Design provides a holistic approach to the design process.
—Gráinne Colone, OULDI Project Lead (September 2008 – August 2011)

On the CompendiumLD corner of the Open University’s site you can also see a “Learning Outcomes View,” and a “Task Times View,” showing how you can use CompendiumLD to deliver timed assessments. For more advanced examples, see this Peer assessment using a wiki., or an example Modelling adaptations featuring open educational resources, “a design which shows how existing open educational resources can be included in an activity structure that caters for learners with different levels of skills and knowledge” created with a perhaps somewhat dated (<frameset>, <script Language="JavaScript1.2">) but nevertheless reliable and robust1 Web Export functionality that lets you share your designs with collaborators and other learners.

If there’s anything “wrong” with Compendium and CompendiumLD, you see it in these screen shots… is it perhaps a somewhat 90s, or turn-of-the-21st-century look to the icons? Never mind! Don’t let that distract you from what you can do with CompendiumLD. If it still bothers you, you can in fact change the images, icons and stencil sets, and it’s source is freely available — if you’d like to work on the interface the community will likely be grateful. Just look at CompendiumNG if you’ve any doubts there’s a next generation coming up in the Compendium family.

As part of the JISC Curriculum Design project (OULDI_JISC), four other [higher education] institutions (Brunel, Cambridge, London South Bank and Reading Universities) have been trialing and exploring the use of the OU learning design methodology. The purpose of these pilots is to determine the transferability of the OU methodology across a range of different HE organisations. In addition the pilots will provide the project with valuable feedback about the tools and resources developed as part of the OULDI-JISC project, and the approaches we have used to introduce and embed the methodologies institutionally (workshops, special interest groups and the toolbox etc). These Universities previously worked together as a cluster group for the HEA Pathfinder Project, on which Gráinne Conole was critical friend and it is expected that this work will build on, and extend on, that project.

I’ve had a strong sense of the value of these tools—and of the entire paradigm surrounding their development2 and use that seems to me so well-aligned with the long-established findings of cognitive apprenticeship—since they first came to my attention only a couple years ago. I’m truly excited to see their work expand and continue.


Further reading

Conole, Gráinne (2014) Reviewing the trajectories of e-learning, blogged chapter from forthcoming publication. Or start with my shorter overview

The Open University Learning Design Initiative “Our aim is to develop and implement a methodology for learning design composed of tools, practice and other innovation that both builds upon, and contributes to, existing academic and practitioner research. We have been working across several OU faculties and with 4 other universities to pilot curriculum design activities and relevant supporting tools and to contribute to the broader academic work in the subject.”

Jisc, “UK’s expert on digital technologies for education and research”

Fouchaux, Richard C. (2013), Thick learning situations: paths towards a framework for 21st-century learning design, project, paper and various web applications [HTML]
[…demonstrating, if not quite explaining, its own subthesis—the impending obsolescence of the traditional paper—and the work left to be done in utilizing new forms, and raising them to the status of other literacies! My MRP, the birth of this site. -rcf]

  1. By comparison, I discovered Visual Understanding Environment (VUE), a similar tool from Tufts University, has advanced as far as image maps enhanced with an early version of jQuery, but I found it very easy to break by putting HTML or the wrong text characters into the Node Notes.
  2. Back in 2011 I tried to say it in 10 seconds, but it took me 11, and maybe it’s not entirely clear I’m talking about the same issues. What do you think? [video]


May 28

Make Captivate HTML5 Work in Firefox

screen shot of error dialogWith the slow but steady demise of Flash, SWF-based elearning software makers, like Adobe, have been “cramming” (a word from disruptive innovation) HTML5 into their products, like Captivate (I’m using v6.1), to keep up. Because the HTML5 spec itself is still growing in inconsistent and at times uncertain directions there are bound to be holes and gaps in the implementations. For Captivate 6.1 the first one I encountered was the “This browser does not support some of the content…” error I got when I attempted to view my HTML5 output in my browser of choice—Firefox. It was version 20, and I know Firefox has supported HTML5 audio and video tags since version 3.5 so it had to be something silly. In the proprietary software world that may mean license issues, and so it does with Firefox (Free, Open, Libre software) and the MP3 (not so much). Captivate exports only MP3s, Firefox (and Opera) play only OGGs. So until Adobe offers a checkbox on the Publishing page you can do the following, or hope your visitors use only IE, Safari or Chrome—as the majority probably do… but we’re big on inclusion around here so let’s not leave anyone out!

I quickly ascertained it’s the MP3-only audio export preventing Firefox from doing Captivate sound. As you probably know, some browsers do MP3, others do OGG. You may even remember why. Fortunately that’s the only reason Firefox won’t play Captivate HTML5. All you have to do are

  1. create OGG versions of each MP3 and
  2. edit two JavaScript files to
    1. detect Firefox
    2. provide the appropriate file extension and
    3. suppress the error message.

Simple enough you say, but I figured I may as well google it and see what others have done. I did, and found all the hints I needed in hermit9911’s answer to this post (scroll down a few). hermit just needs OGG. I want both to work depending on browser, so I had to improvise on hermit9911’s theme. Here are the steps I ended up following.

1. Create OGG versions of each MP3

There are many programs that convert audio formats. I used Audacity’s “Chains” feature (macros). Since I’ve met many more people who know of Audacity than know of its Chains feature, I’ve done a separate screencast of that process:

Made using Camstudio (screen video), iPhone (narration),
Audacity (mix/process audio) & Sony Vegas (mix/render video)
Can you suggest a good open source video editor? Please use the comments with my thanks!

2. Edit two JavaScript files

detect Firefox

Project.js is found in the root export folder. It’s “minified,” which means line breaks and extra spaces are removed and it’s pretty hard to read, but we can add our tiny bit of code right at the beginning. I don’t see any need for feature detection in this case, so I settled for user agent:

var is_firefox = navigator.userAgent.toLowerCase().indexOf('firefox') > -1; 
// converts the string to lowercase then creates Boolean, 
// true if it finds 'firefox' anywhere in the name. Otherwise : false 

provide the appropriate file extension

Once you have a question that can be answered yes or no the best syntax is usually as follows:

myExtension = is_firefox ? '.ogg' : 'mp3'; <br>// Yes? Send '.ogg' No : send '.mp3

Then just search & replace existing .mp3' with '+myExtension Everything between ”s is literal, myExtension is variable depending on the answer to is_firefox?yes:no;

UPDATED: If you have Administrator rights and access to the Adobe Captivate install folder you can add these changes to the template Captivate creates the file from. Otherwise both files are overwritten every time you publish, and you have to repeat all these steps. If you can access and edit
use that file instead (path to install folder will differ depending on operating system and installation) otherwise follow the instructions as written:
Next, open [PublishFolder]/assets/CPHTML5Warnings.js and make the two additions suggested by hermit9911. (I looked up the earliest version of Firefox that supported the audio tag and replaced hermit9911’s xx with 3.5).

this.BrowserEnum.FIREFOX_MIN_SUPPORTED_VERSION = 3.5; // sets minimum version, used in code below

suppress the error message

Finally at the very bottom of the file you will find a series of IF and IF ELSE statements… add the following after the closing semicolon of the last one:

else if((this.browser == this.BrowserEnum.FIREFOX) <br>  &amp;&amp;<br> (this.browserVersion &gt;= this.BrowserEnum.FIREFOX_MIN_SUPPORTED_VERSION )) <br> lSupported = true;

Browse to index.html in Firefox, press Play and watch your movie. With a bit of practice this will add all of about 5-10 minutes to your publishing routine. Alas, you’ll have to redo Project.js—and convert all your audio files— every time you publish.

As an extension activity, make this work for Opera (yes, you can use find/replace but watch case-sensitivity. Do each separately… firefox/opera and FIREFOX/OPERA). Use flow control instead? (Hint: yes) Look back at the code above and explain why you need to do that. Would you change the variable name? To what?

My entire solution instructions and code snippets
(including my answers to the extension questions)

/* ADD TO TOP OF Project.js */
var wantsOggsOverEasy = ((navigator.userAgent.toLowerCase().indexOf('firefox') > -1) || (navigator.userAgent.toLowerCase().indexOf('opera') > -1)), myEXT=wantsOggsOverEasy?'.ogg':'.mp3'; 
/* nb comma/semi-colon usage - I declared 2 local vars in 1 dec */

/* This is the text to search for
   .mp3' and change it to '+myEXT
  FROM: src:'ar/Mouse.mp3',du:182
       TO: src:'ar/Mouse'+myEXT,du:182

IF you have Admin privileges find the Captivate install folder and edit the warnings file found in
[InstallFolder]\HTML\assets\js\CPHTML5Warnings.js. Otherwise you can save these changes in a safe place and you'll need to replace [PublishFolder]/ar/CPHTML5Warnings.js in the published location every time you publish. (Project.js is generated programmatically by the publishing engine, so to the best of my knowledge it must be fixed after each publish, also protect your OGG files.)  */

/* In CPHTML5Warnings.js 
(somewhere between lines 19 and 20) non-destructively ADD:  */

        this.BrowserEnum.FIREFOX_MIN_SUPPORTED_VERSION = 3.5;
        this.BrowserEnum.OPERA_MIN_SUPPORTED_VERSION = 10;

(approximately line 112) AFTER final 
          lSupported = true; AND BEFORE

          return lSupported; non-destructively ADD 

		else if((this.browser == this.BrowserEnum.FIREFOX) && (this.browserVersion >= this.BrowserEnum.FIREFOX_MIN_SUPPORTED_VERSION))

            lSupported = true;	
		else if((this.browser == this.BrowserEnum.OPERA) && (this.browserVersion >= this.BrowserEnum.OPERA_MIN_SUPPORTED_VERSION))
            lSupported = true;


N.B. Post was edited for clarity since first publishing.

Jan 19

Mind mapping for learning design

UPDATED: when you’ve read this, see my latest update on Gráinne Conole’s latest contributions to these ideas, linked at the end.

Mind map of CompendiumLD showing Getting StartedThe past 30 years in education research has seen the influx of big ideas from computer science, social anthropology, design and even architecture. We now say learning is situated in authentic social contexts many call communities of practice.

This has had some pretty significant effects on research itself (e.g., ethnographic case studies, action research), and learning design tools, themselves designed to reflect this current situation, but for reasons I won’t waste any more time pondering, the uptake still seems relatively slow. Gráinne Conole, with others at the Institute of Educational Technology, Open University UK, looked into an idea/concept/mind mapping tool, Compendium, that was already under development there, and in yet another demonstration of the efficacy of open source, created CompendiumLD, Compendium “Learning Design,” allowing designers to visualize the many connections that exist within learning situations. I believe such tools will play an increasingly important role in the design, planning and implementation of learning experiences.

Continue reading