Exporting LiveCode to HTML5: This Could Change Everything

One of the most recent and exciting developments in the LiveCode world is the ability to export LiveCode projects to HTML5. It's only available in experimental form currently, known as a "developer's preview" or dp version of LiveCode 8. The current version is dp 12 - dp 1 was released in August, 2015. When it was first released, I spent about 30 minutes playing around with it and immediately experienced some problems. I just tried again and, to my amazement, I was easily able to export one of my early prototype games - Crack the Code! - to HTML5. (Here is my original blog post about it.) Here, try it for yourself:

Click here to play "Crack the Code!"

Alert! It could take a little while to load.

The original game had sound and the option to change the word list. Unfortunately, neither of these options is working. I'm hopeful that I just don't know some important information about how to package sound for HTML5, so I'll probably post a question about this to the LiveCode forum dedicated to HTML5. (Sound provided very important feedback to this particular game, with a pleasant chime given when you correctly matched the secret word, and an appropriate "crash" when you did not.) I didn't see any mention of sound issues when I browsed the forum, but I did find some useful information about why cut/paste will not work. Apparently, there are strict and narrow restrictions on what elements of a web page can access the clipboard due to security issues. I read one person's suggestion for a workaround, so I might try that in an update. The amount of time it takes to download the HTML page is causing me some concern also. As I understand it, the entire LiveCode engine has been converted to javascript, so it's a big download. On my slow Internet connection at home, I had to wait about a full minute for the page to fully load.

Still, it's absolutely amazing that this works without the need for any sort of plug-in. It's all done using HTML5 and javascript. I made no changes to the program other than cosmetic. HTML5 is simply an export option. You select it, then choose to save as a standalone application. A folder is created with all of the needed resources, including a HTML page that runs the show. Upload that folder to a web server and you are ready to go. The LiveCode program is converted essentially to a javascript module.

Far From Perfect

The good folks at LiveCode have been careful to alert us that this feature is far from perfect and that there is still much work they need to do before we go from a developer preview version to a stable version. I have had some issues getting this project to work. Everything works fine when I run the HTML5 project locally, but it only works on the Internet when I run it from one of my accounts on a University of Georgia server. I have access to other servers, most notably the one housing my NowhereRoad.com site, but when I try running it from there, I get the error "Exception thrown, see JavaScript console." I presume that means my NowhereRoad server is not set up properly to run javascript, even though I thought it was. I obviously need to check into this.

My Q Sort prototype is an excellent candidate for HTML5 export. I tried exporting it, but a key feature does not work - the saving of data into a local text file. It would be fantastic if I could get this working as an online tool. I suspect that many programming techniques I've learned and now use for many of my projects will not work in HTML5 without substantial reprogramming. But, learning new techniques is all in the spirit of this blog. And, perhaps I'll uncover and report some important bugs or needed features that will help in the overall effort by the LiveCode team.

How Does This Change Anything?

The inability to deploy LiveCode projects over the Internet has been LiveCode's main distribution gap. But, it has been a huge gap - a bona fide gaping hole. I began using LiveCode when I had an interest in creating native mobile apps about six years ago. It's easy to develop iOS apps for iPhone and iPad, and even easier to develop for Android devices. It also does a great job if you want to distribute to desktop or laptop computers running MacOS, Windows, or Linux. But the inability to distribute over the Internet has been a serious limitation. Frankly, most of my students have had little interest in learning LiveCode precisely because they could not distribute their projects over the Internet. Similarly, their interest in Articulate Storyline has primarily been due to the fact that exporting projects to HTML5 is Storyline's strong suit.

I have written here before about my fundamental criticism of authoring systems such as Articulate Storyline and Adobe Captivate. A short recap is simply that although these software applications do some things extremely well, their underlying structure seriously narrows or constrains the range of software designs possible. Perhaps I should say that this comment is really not meant to be a criticism, but an observation. What they do, they do very, very well. But, if you have a creative or innovative idea for software design that doesn't fit the tight boundaries of these authoring packages, you are out of luck. Again, one of the things these systems do very well, especially Storyline, is deliver HTML5 compatible tutorials. Consequently, almost all of the projects that my students design are of this ilk. The important point to be made here is that their design ideas are all shepherded down a very predictable, narrow path.

Fortunately, it's easy to embed the HTML code needed to run a HTML5 LiveCode project into an existing web page, including one created by Storyline or Captivate. Here is an example of the minimum code needed for an HTML page to make it all work:

 <html>  
   <body>  
   <canvas style="border: 0px none;" id="canvas" oncontextmenu="event.preventDefault()"></canvas>  
    <script type="text/javascript">  
     var Module = { canvas: document.getElementById('canvas') };  
    </script>  
   <script async type="text/javascript" src="standalone-community.js"></script>  
  </body>  
 </html>  

If you play "Crack the Code!" you will see that it is enclosed in a default web page that was created by LiveCode during the export process. But, I hope you get the idea of how easy it would be to include a LiveCode app within any existing HTML document. So, one can envision a software design process that includes a suite of tools, such as Storyline and LiveCode.

Final Thoughts

I want my students - and all instructional designers - to be able to live up to my motto for why to learn computer programming: "If you can imagine it, you can build it." If LiveCode can perfect the export to HTML5 option, I think it will become a serious competitor to Storyline and Captivate. More importantly, it could lead to much higher quality - and diverse - software for learning in online environments.

The title of this post is obviously meant to convey tentativeness. The direction LiveCode is going could be a game changer in the world of creative online software design, particularly in educational or instructional contexts. However, we are not there yet, so it's still too early to pour the champagne. But I'm optimistically keeping a bottle chilled.

Are You Like Me? More On Creating a Custom Tool to Analyze Q Sort Data

This is a follow-up to my recent post describing a tool I created to analyze Q sorts. In that post I briefly called attention to a button on the analysis screen titled "Are You Like Me?":

In this post, I will explain how this special analysis works. Although this analysis option is specifically meant to support my goal of using the Q sort process within an instructional context, the idea behind it originated much earlier, and the analysis itself can be applied to other survey data types besides Q sorts. So, allow me to give a little background first.

Those in the field of instructional design like to think that one of its strongest elements is learner analysis. This is a major phase of instructional design and is well documented within all of the best known models. Even though we devote a lot of attention to learner analysis in the literature, my own opinion is that we don't practice it well. Yes, we are fond of giving pretests and surveys, but these usually only provide very superficial information about the learners for whom we are designing instructional materials. So, I feel that the theory of learner analysis falls far short of its reality and importance in practice. Perhaps I feel this way based on my formative years as a public school teacher. It was only after spending many months with my students for five or six hours per day did I begin to feel as if I really knew them. So, I tend to think we know very little about the people we are designing instruction for despite following the advice and procedures in our canons and even though we might feel comfortable in thinking that we do.

Doing a Better Job at Teaching Learning Analysis

We also don't teach learner analysis very well, at least, I don't think I do. I've long been trying to come up some innovative activities to help my instructional design students recognize both the importance of learner analysis and the difficulty in doing it well. At the very least, I want to instill in them the idea that we should be very cautious and skeptical about thinking that we really understand who our learners are, what they know, and what they want. So, I've been trying to design some class activities over the past few years that get at some of these deeper principles. I've yet to succeed. But a few years ago I came up with a class activity called "Are You Like Lloyd?" that seemed to hold some promise. I asked a series of questions to see how many students in the class had similar life experiences to me. For example, one question was "Do you have at least three siblings?" I thought this was a good question because coming from a family of five, I feel certain that growing up with a few brothers and sisters will make a big difference in how you see the world. After asking about 10 questions like this, a nice discussion usually ensued. I always had the sense that I was on the verge of designing an interesting game based on this activity, but I could never quite figure out what the game's goal would be. Is it to ask the least amount of questions before I demonstrated that everyone in the room was different than me in some way? Heck, that would be easy for me just with the question "Do you play an accordion?" Maybe the goal should be to ask questions to show how much people shared. That seemed easy to do too and not very interesting (e.g. Do you like music? Do you like ice cream?) In the end, just asking some questions that I thought reflected important influences on how I saw the world to find out how many in the room were like or different than me was interesting.

Analyzing a Q Sort: Person to Group Comparison

The "Are You Like Lloyd?" activity is the inspiration for my current work with using Q sorts as instructional activity. I've been playing around with the idea of comparing each person in the group to every other person in the group in terms of their individual Q sort responses. The best way to explain this is with an example. Let's consider a very short and simple Q sort that has only four statements. The Q sort board ranges from least to most favorite with column values of -1, 0, and +2 with two slots in the 0 column:

And, to keep the example as concrete as possible, let's imagine these ice cream flavors are the four statements of the sorting activity:

1. Chocolate
2. Vanilla
3. Strawberry
4. Peach

Let's imagine a group of five people sorted these four statements as follows:

Let's consider Bob's sorting of these flavors. He likes vanilla the most, chocolate the least, and is neutral about strawberry and peach.

The idea of the "Are You Like Me?" activity is to consider how similar Bob is to all of his classmates, then to do the same comparison for the other people, one by one. Let's stick with Bob for now and consider what this analysis looks like if we use Excel to do the comparisons. Here is the entire spreadsheet:

The absolute value of the difference between Bob's scores and those of the other people are shown in orange. Let's compare Bob to Jane. Bob rated chocolate as -1 (his least favorite), but Jane was neutral about chocolate (0), for a difference of 1. We use the absolute value because we are only concerned about the "distance" between the two scores. (The formula for cell B12 is: "=ABS(B$5-B6)".) We don't really care who has the higher or lower score for any particular flavor. Vanilla was the favorite flavor for both Bob and Jane, so their difference was 0. So, when it comes to vanilla, Bob and Jane are exactly alike. Bob and Jane were also exactly alike in their rating of peach, but they difference by 1 on their rating of strawberry. If we sum of the differences between Bob and Jane, as shown in blue, we get a sum of 2. Now, take a look at how different Bob is from Jim, Sarah, and Susan. If you scan the sum of differences you see that Bob and Sarah are exactly the same, whereas he is most dissimilar to Jim and Susan with sums of 4 for his comparisons to them. If we sum up the sum of differences - the "grand sum" shown in green - we get a rough idea of how different Bob is from the group on ice cream flavor preferences.

Automatizing the Difference Analyses Between All Group Members

Great, now what? Well, we just need to do the same analysis for all other members of this group. With a group of five, I'm sure you could take it from here and finish my Excel spreadsheet. But, it would be rather tedious to set it all up. And imagine if you had a group of 10, 20, or 100 people. For this reason, I decided to program LiveCode do the analysis for me. I set it up in such a way that it doesn't matter how many statements there are or how many people are in the group.

To demonstrate, I plugged the hypothetical data above into my LiveCode program, clicked on the "Are You Like Me?" button and here is the output:

The left side gives me an overall comparison summary. A quick click of the "Copy to Clipboard" button on the left allows me to paste the data here:

Participant,Sum of Comparisons

Bob,10

Sarah,10

Jane,12

Jim,16

Susan,16

As noted above, the group is arranged from low to high. Bob and Sarah have the fewest differences with their classmates, and Jim and Susan have the greatest differences.

A click of the other "Copy to Clipboard" button allows me to easily paste the results of all the comparisons below - this is actual text output complete with commas in key spots to allow for each formatting after pasting into Excel with the "Text to Columns" option (ordered low to high within each group):

---

Participant,Difference (Absolute Value),Note: The comparison person's name is in the first row of each block.

Bob

Sarah,0

Jane,2

Jim,4

Susan,4

SUM,10

Jane

Bob,2

Sarah,2

Jim,4

Susan,4

SUM,12

Jim

Bob,4

Jane,4

Sarah,4

Susan,4

SUM,16

Sarah

Bob,0

Jane,2

Jim,4

Susan,4

SUM,10

Susan

Bob,4

Jane,4

Jim,4

Sarah,4

SUM,16

---

Now, obviously, this dummy data doesn't yield very interesting results, but I hope you get the idea.

What Does It All Mean?

Is it better to be similar to everyone else, or different from everyone else? Neither. I think it's important not to impose any value-laden interpretation on the results. That is, it is not good or bad to be similar or different, but only to recognize that there are similarities and differences and to explore why. My hope is that doing this analysis right after a group completes a Q sort will stimulate some lively discussion with a slightly better understanding about each other. And, if these are people studying to become instructional designers, maybe it will give them a deeper understanding and appreciation about learner analysis.

Here's an interesting anecdote based on some early trials. I've tried this activity out with one of my doctoral classes in the fall 2015. The course was required by our majors, but it was open to nonmajors too. We only had one nonmajor take the course. He brought it to my attention in a hallway conversation during a break that he noticed he tended to be the person at the bottom of each comparison group. We both found it interesting that the sorting activities "revealed" him to have a different view or perspective about the statements being sorted than the others in the class.

There may be times that it is useful to group people who have similar or different points of view. Perhaps a certain project would benefit from having people who shared a similar point of view. Or, conversely, perhaps you wanted to maximize the diversity of ideas within a team of people as they worked on a project. It's important to remember that the original purpose of a Q sort activity is to identify a small number of profiles or categories of the people who complete the activity. That involves a lengthy and sophisticated analysis (that I like to refer to as an upside-down factor analysis) using a special statistical software program. Yet, comparing everyone's answers to each other person in the group as shown above seems to be the start to an alternative process for achieving an analysis with a similar goal. I think I need to do some further follow-up computations - yet invented - to tease out subgroups or profiles.

Final Thoughts

As I end this blog post, I want to reiterate that this analysis will work on any survey involving quantitative data, such as surveys based on the more familiar Likert scale. So, even if you are not interested in Q sorts, you might find the ideas behind this analysis intriguing and useful if you are someone who wants to know more about how a group of people tick.

Also, I really don't know if any of this work will yield anything particularly useful. In the end, I may simply be generating an overly-complicated way of conducting an icebreaker activity. Yet, there seems something inherently important and useful in it. I look forward to exploring this issue in my Q Sort research. So, we'll see.

Creating a Custom Tool to Analyze Q Sort Data

December is finally here. It's been a wonderful semester at the University of Georgia. They seem to get better the longer I'm here. Although I haven't written many posts lately, I have been doing quite a bit of work with LiveCode. In particular, I've done much more work on my Q sort tool. In case anyone wants some background, here are links to my previous three posts about my Q sort tool:

1. Creating a Q Sort with LiveCode
2. Lloyd's Q Sort Project: Importing Data from an Internet File
3. Latest on My Q Sort Prototype: Enhancing the User Experience and Inventing an Instructional Strategy

In short, a Q sort is a quantitative way to measure subjectivity. I know, that sounds completely contradictory. Think of it as a ranking procedure with a few twists. It's a procedure that's been around since the 1930s. One of my recent accomplishments is creating a much improved Q sort tool. The design improvements have been significant enough to warrant a full step in the version number - I'm now up to version 3.1. However, this post is not about that. Instead, it's about creating a completely new tool that focuses on analyzing the data that results from the Q sort activity.

As I've explained in previous posts, I've been trying to come up with an instructional strategy using a Q sort as the main class activity. In my early field trials, I really struggled to provide the class participants with the sorting results as quickly as possible. The reason is that I feel that the Q sort activity promotes a very active, "minds on" experience for participants. In order to take full advantage of their thinking and engagement, I need to compile, analyze, and report to the class participants the results of the Q sort activity as soon after they complete it as possible. In this post, I'll explain why that was such a challenge and what I've built to make this task much, much easier.

The Q Sort Raw Data

When a person completes a Q sort activity, a data string is created and uploaded to a text file stored on the Internet. For example, here is a sample based on a recent Q sort activity completed by an undergraduate class on the topic of favorite vacation destinations using the prompt "Sort these vacation destinations from most to least favorite." Here is the list of vacation destinations they sorted:

Aspen, Colorado
Branson, Missouri
Cancun, Mexico
Hawaii
Home
London
Miami
Myrtle Beach
New York City
Orlando
Paris
Pittsburgh
Rome
San Francisco

I found a web site that listed 10 of the top vacation spots in the United States and I added the rest. (Yes, adding Pittsburgh was rather mischevious of me. But hey, I think it's a fantastic place to spend one's vacation. I also added "home," which I thought was rather insightful.) A lot of the students never heard of Branson, Missouri, which might be a good thing.

Each line of data is an individual's data separated by commas. Here are a few lines of the data to illustrate:

 vacation-abd,Tue, 1 Dec 2015 12:56:26 -0500,Favorite Vacation Destinations?,PERSON1,0,-2,+1,+3,0,+1,0,-1,-1,-3,+2,-1,+1,0,Summary Statement Results,2,Time (seconds),59  
 vacation-abd,Tue, 1 Dec 2015 12:56:31 -0500,Favorite Vacation Destinations?,PERSON2,+1,-1,0,+3,-3,+1,0,-1,0,-2,0,-1,+2,+1,Summary Statement Results,+3,Time (seconds),78  
 vacation-abd,Tue, 1 Dec 2015 12:57:51 -0500,Favorite Vacation Destinations?,PERSON3,+3,-3,+1,+2,0,+1,+1,-1,-1,-1,0,-2,0,0,Summary Statement Results,+3,Time (seconds),131  
 vacation-abd,Tue, 1 Dec 2015 12:57:51 -0500,Favorite Vacation Destinations?,PERSON4,0,-3,-1,+1,0,+3,0,-1,0,+1,+2,-2,+1,-1,Summary Statement Results,+3,Time (seconds),159  

Each line starts with the unique Q sort code, then a date/time stamp, then the name of the Q sort, then the name of the person (I obviously substituted PERSON for each name). This is all followed by the sorting data where each statement's rating is provided. I also ask participants to rate a "summary statement," something I explain briefly below, so those results are next. Finally, I collected the time it took the person to complete the Q sort (in seconds).

OK, great, I have collected data. How does one quickly make sense of these data quickly and accurately in order to trigger some class discussion?

My First Idea: Use Excel to Analyze the Data

First, it is important to recognize that the analysis I wanted to perform was very simple in comparison to a true Q sort analysis. An actual Q sort analysis is best thought of as an upside-down factor analysis, meaning that instead of reducing the number of measures (i.e. statements) down to a smaller number of common factors, the idea is to reduce the number of people into a smaller number of profiles comprising those people. This type of analysis can take weeks and requires a sophisticated statistical package to pull it off. No, what I wanted was a straightforward analysis that I could do quickly, with results that the students and I could understand and react to. The goal of the analysis is just to trigger discussion and more reflection. That is, this is a learning goal, not a research goal. So far, I've settled on computing the sum and standard deviation for each statement based on all of the participant scores. The sum gives an overall sense of the importance of each statement for this group of people in comparison to the others. The standard deviation gives a quick sense of how much the group "agrees" with the ranking of that statement.

My basic plan is for participants to have a short small-group discussion in class - about 10 minutes - about their Q sort results immediately after completing it while I quickly analyze the data and prepare some slides of the overall results. That's a tall order in 10 minutes. And yes, my first idea was to use Excel to analyze the data. This is actually a good idea, if there was more time. I was able to successfully create an excel file on the fly that would analyze the data, but it was a challenge to do so quickly without making any mistakes. It's hard to explain what it feels like to be in the "heat of the moment" when teaching, but it can be stressful to try to focus on a task such as this requiring attention to detail. Such an Excel file begins with the following:

It's easy to get the data into neat and tidy columns using the "Text to Columns" option in Excel. This option allows you to split a line of data into columns based on some delimiter, such as the handy dandy comma. As you can see, I deleted a bunch of the columns to just focus on the people and their statement ratings. I summed the results for each statement. I also computed the standard deviation for each statement (again, as a rough measure of "agreement"). This is all well and good, but I really need the data in this form:

Fortunately, Excel has a transpose option. You first copy the data cells, then you choose "Paste special." Transpose will be one of the options. I then added a column and pasted in the statement labels. Then I sorted the rows in order of sum (largest to smallest). I did the same thing for the standard deviation, though I sorted that data from smallest to largest so that the statements the participants were "most agreement with" are at the top.

So, sure, I could do this in Excel, but allow me to repeat: Doing this in about 10 minutes without making a mistake is quite a challenge. And, if I wanted to do several Q sorts in a single class session, I would really be struggling. I'm good, but I'm not that good. I played around with the idea of creating an Excel template to facilitate the process, but that didn't work so well. What I wanted was a one-click solution.

Creating a One-Click Q Sort Analysis Tool with LiveCode

To meet these challenges, I created yet another LiveCode project that takes the Q sort data and produces the results quickly as described above. Here's the main screen (which uses all of the undergraduate's responses):

All I need to do is paste in the raw data into the large field on the left and the statements on the right. The bottom two left fields give me to double-check the data to be sure everything is ready for the analysis. For example, if all is good, a person's ratings will sum to 0. (I have noticed that data is sometimes missing, such as one of a person's statement ratings. Other quirky errors in the data have happened too, such as a person's data being duplicated. I'm not really sure why this is happening. Fortunately, it's a relatively rare occurrence, and I can usually make the needed corrections. Still, it's a cause of some concern.) I also drew that long arrow from the right side of the screen to the left to remind me to check that the raw data is being parsed correctly. I built in an auto-refresh feature so that after the mouse leaves each field after pasting, the key data fields update automatically.

If all is good, I simply click the red button "Analyze" and voilà! Here is the output:

The data are all nicely computed and sorted just the way I want.

If I now click on the button "Copy All to Clipboard" I can then paste the data into Excel and use the "Text to Columns" option to produce the following formatted spreadsheet:

This is more than adequate, but a few more edits within Excel will produce the following output:

I usually just project this final spreadsheet on the large screen for students to review. But, I could easily copy and paste this into a PowerPoint slide as well.

The main point to all of this is that I can go from raw data to PowerPoint in about 2 minutes without needing any intense concentration to do so. While this isn't exactly a one-click solution, it's pretty close!

I should explain the "Summary Statement Average" of 2.41. After participants complete the Q sort, I ask them to rate one more question. In this case, the statement was "It is important to go on a real vacation at least once a year." I used the same rating scale as that used in the Q sort, which in this case ranged from -3 to +3 (a seven point scale). A summary rating of 2.41 clearly indicates that this group believes in the idea of yearly vacations. This summary statement gives me a Likert-like item that I'm considering using as a kind of weight to modify the raw data. These results are shown above under the orange headings ("adjusted"). I have some research questions related to this. Perhaps I'll explain more about that later.

Are You Like Me?

You might have noticed another button just below the Analyze button titled "Are You Like Me?" This is rather interesting and I will explain it further in a follow-up blog posting. Basically, this button will produce an analysis where each person is compared to the rest of the group. I think this has much potential for both instruction and research. It leads to some very interesting results that really seem to grab the participants' attention and interest.

Final Thoughts

I really wasn't wanting to create this Q Sort Analysis Tool, but it was needed and I'm obviously now glad it's done. It makes the analysis process extremely easy for me. And, even though I compute some simple statistics (i.e. sum and standard deviation), it would be very easy to add other statistics as well, should they prove necessary.

So, how did these undergraduates sort this list of favorite vacation destinations? As you probably already noted, Hawaii topped the list with very little disagreement among the group. Somewhat surprisingly, London was next (I would have bet on Paris). I find it very interesting that "Home" garnered the most disagreement and this result could be used to initiate some interesting discussion. Alas, Pittsburgh was second to last and there seemed to be little disagreement about this among the students. I'll feel sorry for them the next time I'm enjoying a delicious fish sandwich with pierogies on the side at Cupka's Cafe on Pittsburgh's southside. But, Pittsburgh did rank higher than Branson, Missouri. Perhaps "Thank God for Branson, MO!" should become Pittsburgh's new motto.