Lloyd's Weekend STEAM Project Using LiveCode

It was Friday around 5 pm after a long day of meetings and I again had the urge to do something creative as I ended the week. I had seen a compelling video on the Physics & Astrophysics facebook page a few days earlier that captured my attention and the thought occurred to me that I could recreate it with LiveCode. That became my weekend project. I think this is a nice example of a small STEAM (science, technology, engineering, arts, and mathematics) project. I'm a big advocate of adding the arts to STEM initiatives because, as humans, we yearn for beauty and there is much beauty in mathematics and science.

Here's an animation of my project:

I titled the project "circle within circle" because that's exactly what it looks like. However, amazingly, the red marbles are moving in straight lines, not curves. Here is a second animation to prove it:

I See the "A," But Where is the Rest of "STEM"?

The challenge to creating this project - and what was most fun - was figuring out where each marble should start and end. The circle has a radius of 200 pixels with its center located at the screen location of 400,300. (It's important to remember that the 0,0 origin of the computer screen is not the center of the screen, but the top left corner. And, unlike the traditional cartesian coordinate system, the vertical y-axis is positive in the downward direction.) It's easy enough to figure out where the marbles should start and end on the vertical and horizontal lines, but what about those at the various angles, such as 45 degrees? Ah, this calls for a quick refresher of sine and cosine. If just the mention of these two math concepts brings back horror-filled days from high school geometry, then it is high time you revisit them and see them instead as things of beauty. Here's a nice illustration of what they are all about:

As you can see, the cosine is simply the horizontal distance from the center of the circle to the point on the circle matching a given angle. The sine is just the vertical distance. Notice the right triangle that gets formed with the hypotenuse shown in red depicting the angle. We can use the good 'ol Pythagorean Theorem - a² + b² = c² to figure out the lengths of the horizontal and vertical lines. And voilà, we have the x and y coordinates.  Most people are a little surprised that a 45 degree angle does not produce x and y coordinators of half the distance of the radius, but instead the distance is .707 of the radius.

Here's an illustration of my LiveCode screen that shows how to figure the starting point for the marble at the 45 degree mark:

Using a radius of 200, the length of the x and y (horizontal and vertical) is 141.4 (i.e. 200 X .707). Figuring the x coordinate is straightforward: 400 + 141.4, or 541 rounded to the whole number. Calculating the y coordinate is a little trickier because of that pesky detail of the 0,0 origin being in the top left corner of the screen. We actually need to figure out how to much to add to the top boundary of the circle, which is 100. So, we have to subtract 141.4 from 200 to get 58.6. We add 58.6 to 100 to get a y coordinate of 159 (again rounded to the nearest whole number).

I then had to use the same logic to figure out all of the other locations for the remaining marbles given their respective angles. Yes, lots of great math going on here! 

My use of a computer programming language (i.e. LiveCode) is the technology part of my STEAM project. And, I'll admit I don't have any engineering or science components yet, but I'm sure you could come up with a few ideas. What comes to my mind is how an internal combustion engine works - the pistons are going in straight lines, which then turn the crankshaft:

But It Doesn't Look Quite Right

Now, you might say: "Lloyd, those marbles aren't exactly creating a circular motion. There is a bit of a hump. And I took a look at the video link you provided above - great background music, by the way - and its animation looked like a perfect circle." Alas, you are correct, and I'm a little befuddled as to how to smooth out the hump. I thought it might have something to do with the timings, but I don't think so. Of course, you might see immediately what needs to be done to make the marbles seemingly move in a perfect circle, so do remember to email me after you figure it out. (Below is my code to help you.)

But hey, this was only a weekend project and I think there is just as much beauty in my imperfect version. 

   put 2 into varTotalSeconds  
   put .25 into varHoldSeconds  
   repeat until the mouseclick  
    //motion 1  
    move graphic "ball1" to 400,500 in varTotalSeconds seconds without waiting  
    wait varHoldSeconds second  
    move graphic "ball2" to 324,486 in varTotalSeconds seconds without waiting  
    wait varHoldSeconds second  
    move graphic "ball3" to 258.6,441 in varTotalSeconds seconds without waiting  
    wait varHoldSeconds second  
    move graphic "ball4" to 216,376 in varTotalSeconds seconds without waiting  
    wait varHoldSeconds second  
    move graphic "ball5" to 200,300 in varTotalSeconds seconds without waiting  
    wait varHoldSeconds second  
    move graphic "ball6" to 216,224 in varTotalSeconds seconds without waiting  
    wait varHoldSeconds second  
    move graphic "ball7" to 258.6,158.6 in varTotalSeconds seconds without waiting  
    wait varHoldSeconds second  
    move graphic "ball8" to 324,116 in varTotalSeconds seconds without waiting  
    wait varHoldSeconds second  
    //motion 2        
    move graphic "ball1" to 400,100 in varTotalSeconds seconds without waiting  
    wait varHoldSeconds second  
    move graphic "ball2" to 476,116 in varTotalSeconds seconds without waiting  
    wait varHoldSeconds second  
    move graphic "ball3" to 541,158.6 in varTotalSeconds seconds without waiting  
    wait varHoldSeconds second  
    move graphic "ball4" to 584,224 in varTotalSeconds seconds without waiting     
    wait varHoldSeconds second  
    move graphic "ball5" to 600,300 in varTotalSeconds seconds without waiting  
    wait varHoldSeconds second  
    move graphic "ball6" to 584,376 in varTotalSeconds seconds without waiting  
    wait varHoldSeconds second  
    move graphic "ball7" to 541,441 in varTotalSeconds seconds without waiting  
    wait varHoldSeconds second  
    move graphic "ball8" to 476,484 in varTotalSeconds seconds without waiting  
    wait varHoldSeconds second  
   end repeat  

The Best and Worst of LiveCode Troubleshooting

I am very behind in writing about my various LiveCode projects, particularly my Q Sort project. So I'll use this post to write about a few experiences I have had lately. Yes, this blog post is all about the art and science of troubleshooting. I'll start with a shining example, and then close with a problem that I remain unable to resolve. However, this problem has nudged me into a new direction for my Q Sort tool that really was inevitable, namely moving from an FTP approach to using text files to store data to the use of a mySQL database.

Troubleshooting Example 1: The Case of the Missing Data

In almost all of my field tests using my Q Sort tool, I had been experiencing an unusual problem of missing data. The problem was very spotty. The data from most responses were fine, but there would always be a handful (i.e. 2 or 3 out of 20 people) with missing data. Most of the time, only one data point would be missing, but it was possible that 2, 3, or even 4 data points could be missing. At first, I thought it might be some artifact of the FTP process, such as some data getting "lost in transmission," but that seemed like a weak and unlikely theory.

Also, another person who completed a Q sort - a doctoral student in my department - was also adamant that a statement she rated one way was subsequently rated a different way when she reviewed her data. No one else had ever noted this before, so I knew it was possible she was just mistaken or confused. However, she sounded very sure of herself, so I was careful to note her observation because if she was right, then the accuracy of all the Q sort data would be in question. (I now think she was right. The fix I explain here solves that problem too.)

It wasn't clear to me how to go about troubleshooting this problem, given the rareness of its occurrence. I had never experienced the problem myself in all of my testing. My first idea was to set aside an hour in my design studio course at the University of Georgia and have the students do several Q sorts in a row with the hope that the problem would appear in someone's data. Then, I could compare the data uploaded to the web server with the data saved to their local computer. However, I solved the problem on my own in a relatively short amount of time.

My Solution: Make All Data Visible

To help figure this out, I made a copy of the Q Sort tool just for troubleshooting. I turned off all of the FTP and other data storing commands and made visible the key hidden fields that collected and managed the data while the Q sort was in progress. As I played with doing a bunch of Q sorts, I discovered the problem.

Basically, here is what was happening. Two statements in adjacent slots would be appropriately "locked" into their slots. Then, the user would move one of these statements into the other slot. The just emptied slot would correctly then register "empty." But, if I then moved the other "locked in" statement into the now vacated slot, both slots would register that statement. The other consequence to this would be that if all other slots were filled, the "Submit" button would be activated, thus allowing the user to then quit and upload their data. This problem wouldn't occur, or would resolve itself if it had, if the person moved one of these statements back to the main area of the screen. So, the problem only occurred under these fairly rare situations.

To fix this, I added some code to the "on mouseUp" script in the button "statement template" to check for duplicate statement numbers in the field "slot contents." Even this was a little tricky as I had to make sure that the correct slot showed where the statement now resided. To do this, I first added this code to look for EVERY occurrence of the button number and replaced it with "empty":

    //First check for duplicate statement numbers in field "slot contents" (the cause of the missing data problem) - February 21, 2016  
    //I adapted this code from the button "Check for Duplicates" from the Q sort analysis tool  
    put the number of lines in field "slot contents" into L  
    repeat with i = 1 to L  
      put item 1 of line i of field "slot contents" into varName  
      if SN = varName then  
       put "empty" into line i of field "slot contents"  
      end if  
    end repeat  

   
The key was to put this code BEFORE this existing line of code (near at the end of the mouseUp script) because this line then puts the button's location into the correct slot:

put SN into item 1 of line varSlotNumber of field "slot contents"

In summary, if a duplicate was found the appropriate one would remain but the other would be replaced with "empty."

Improving the Usability

But, I wasn't finished. As I played with the program I could sense a usability problem. As I moved statements previously locked into a slot to an adjacent slot, it was often not obvious which statement was no longer "locked" into a slot. I decided the best thing to do would be to "snap" the unrated statement out of the "slot zone" to the original starting x screen coordinate, but leaving it at the current y screen coordinate. To do this, I adapted the script that already existed in the "To far left" button and added it to the custom function "checkForEmptySlots" on the card "sort":

    //First check for duplicate statement numbers in field "slot contents" (the cause of the missing data problem) - February 21, 2016  
    //I adapted this code from the button "Check for Duplicates" from the Q sort analysis tool  
    put the number of lines in field "slot contents" into L  
    repeat with i = 1 to L  
      put item 1 of line i of field "slot contents" into varName  
      if SN = varName then  
       put "empty" into line i of field "slot contents"  
      end if  
    end repeat  

A key idea was to put this script near the end of the function and right before other script that checked to see if all statements were accounted for. If all statements were accounted for, only then would the "Submit" button be activated.

Note this important line (line 7):

 if not intersect (graphic "statement background", button locStatementName) then next repeat  

This line is important because I only wanted to "snap" out of the way those statements that were in the "slot zone."

The result is now a very clear user interface that shows which statements are "locked" into place and which are not.

Troubleshooting Example 2: The Case of the Deleted Data

OK, great. I solved a thorny problem all on my own. Just as I was finishing my victory lap, complete with champagne, another recurring problem surfaced. This problem remains unresolved and really has me stumped: Data that I know were correctly FTPed to my web server have subsequently vanished. I really have no explanation for this. It has happened occasionally and rarely. The first few times it happened, I blamed myself for just not remembering deleting the data. This was a reasonable explanation because in my early field trials, I would occasionally wipe the text file clean on my server. However, the last time it happened, I know I did no such thing.

To be honest, I know I haven't been using the preferred LiveCode libURL commands, such as libURLftpUploadFile, for the data transfer (here is a link to a good tutorial). Instead, I've simply been using the simple "put" command in tandem with the URL function:

 put field "ftp scores"&return after URL varUploadSite  

However, I don't see how this is at all related to the problem given that I know the data were in fact saved to the web server. So, I remain stymied. Perhaps someone reading this blog post with more experience than I knows what to look for. If so, I hope they will contact me.

But, as I mentioned at the start of this blog post, my inability to solve this problem has persuaded me to abandon the FTP method altogether and instead use a mySQL database for all data storage. I knew I would eventually make the jump to using a real database, but there was a certain charm and elegance to just using simple text files for all data storage. Interestingly, I reread one of my own blog posts from last year to relearn how to do this titled "Desperately Seeking Middleware." I hope to finish this transition to mySQL in the next week or so.

Final Thoughts

These two examples are good reminders of how coding can bring the "thrill of victory" and the "agony of defeat." Just when I thought I was rather clever in figuring out one problem, another jumps up and bites me. No worries, though, as this is all part of the learning experience. One day, I know I'll figure out that deleted data problem, or bump into someone who can help me.

LiveCode Report from the Conference on Higher Education Pedagogy at Virginia Tech

I just returned from attending the Conference on Higher Education Pedagogy (CHEP) at Virginia Tech in Blacksburg, Virginia. This is the fourth year in a row I've attended. I think this is one of the best conferences about teaching I've ever attended. The venue is great, the sessions are high quality (and usually very practical), the people are interesting, helpful, and supportive, the cost is low ($25), and the food is great.

I did a LiveCode workshop on Tuesday and I also presented my current research project exploring how to adapt the Q methodology for instructional purposes (built with LiveCode). Some people also showed some interest in my video analysis tool, thanks to some shout-outs in sessions and on twitter by friends and colleagues, particularly David Carbonara and Sherry Clouser.

LiveCode Workshop at CHEP

I again presented my LiveCode workshop using the title "Introduction to Coding for Mere Mortals Using LiveCode." Although eight people had signed up, only three actually showed up. But that allowed me to give more personalized attention to them. My philosophy is that anybody can learn to code and I've designed my workshops for people who have never coded before. I think it went well. I used a "new and improved" Google workshop presentation. Besides helping to organize the workshop activities to keep me on task, I added many more links to good resources and videos.

We were able to complete two "LiveCode First Projects" in our three-hour workshop: Visit the USA; and Mad Libs. I like how both of these projects offer different programming experiences with LiveCode. The participants were very motivated up to the end. In fact, they were very interested in exploring some of the LiveCode Mini-Projects I've designed and wanted to try the hardest one of the bunch. So, we built the EZ Math Calculator.

A reminder to any of my UGA colleagues who might be reading this that I'll be offering two LiveCode events this semester. First, I'll be offering a short, 90 minute workshop about LiveCode for UGA's Center for Teaching and Learning on March 22, 2016 from 10:00-11:30 in Room 372 of the Miller Learning Center. Due to the short length of the session, this will likely need to be mostly demonstration, but I hope to have at least one hands-on activity. Second, I'll be conducting a short course on learning to program with LiveCode for the OLLI beginning February 23. This course will consist of four sessions (February 23, 25, March 1, 3) scheduled from 1:00-3:45 in Room 143 River's Crossing. I'm very excited by this because it will give me an extended period for teaching LiveCode. The pace will be very relaxed. I don't know OLLI's policy for others to attend, so check with them if you are interested.

Adapting the Q Methodology for Instructional Purposes

Most of the sessions at CHEP are given by higher education faculty and instructors who offer practical ideas and suggestions for teaching in higher education gained from actual experience in the classroom. However, there is also a smaller research track at the conference, within which I presented my Q sort work. Unlike the other sessions, research sessions feature two presentations within the 50-minute slot. So, I didn't have much time. But, this forced me to really get to the point. I also managed to do a live demonstration of my Q sort tool, so I think everyone got a good overview. Attendance was very minimal and in hindsight I think I should have come up with a sexier title. However, people seemed very intrigued by the technique and had many interesting suggestions and ideas on how to use it. One suggestion was to try a Q sort within the context of faculty teaching evaluations to help identify teaching strengths and weaknesses.

Getting Ready for Next Year

I will make the CHEP conference a priority in my yearly conference planning. Next year's conference dates are February 15-17, 2017. I'll be encouraging everyone to check it out, particularly doctoral students because of its friendly and supportive environment. Proposals are usually due around mid-September. The attendance was about 1,000 people this year, which is about the maximum that the conference venue can accommodate. There was some talk about perhaps having to limit registrations, so be sure to register early!

Creating a Software Licensing Solution with LiveCode

The final development stage of my video analysis tool is coming along nicely. I hope to wrap it up in the next few days in order to do some final beta testing before I release version 1.0 as a commercial product. I keep joking that I plan to price it at the cost of a breve expresso, but I think that is about the right price. I actually plan to give it away to a lot of colleagues and their students, especially here at UGA. (Disclaimer: I was not paid or compensated in any way by the University of Georgia to create this tool.) But, I do think there will be a small market for this tool and I'm looking forward to the entrepreneurial experience that awaits. Just going through all of the steps to get this thing to market and figuring out how to accept payment and provide customer service will be a great learning experience for me. (I considering submitting to one of the available online stores, such as the Mac App Store.)

These thoughts point to the need to produce a free version of the tool that prospective customers can access to evaluate to make sure it serves their needs well. If it is a good tool for them, then I hope it will persuade them to purchase the full version. Likewise, I would like an easy way to give the tool to colleagues for use in their classes. Now, I could produce several different, standalone versions of the tool where each serves a distinct purpose. But, that would be complicated and a lot of work. So, I've come up with a solution that allows me to create and maintain one product that serves all purposes. Now, I'm sure there is a great literature out there somewhere that would explain various approaches or algorithms for doing this. But, true to my design spirit, I just forged ahead and invented my own approach.

Lloyd's Licensing Approach

The approach I used relies on one new global variable that I titled "varFullVersion" that is either true or false. When true - as the name suggests - all options and functions are available to the user. When false, a few critical options or functions are turned off. I have set it to false by default, so the free version is triggered upon start up unless the program finds a certain value in a certain file stored on the user's computer.

Deciding on which options or functions to turn off was an interesting design decision. There is a balance to be struck between giving users enough functionality to be able to evaluate the tool, but not enough to keep them from wanting to purchase the full tool if they find it useful. I settled on disabling two main functions. First, the free version only allows the user to work on one project. If you want to work on another, you have to first delete that project before beginning another. I also removed the capability to export source files. Not doing so would have created a loop hole allowing people to use the free version - albeit inconveniently - pretty much as the full version. They could begin a project, then export the source file and delete the project, only to import the source file later to continue working on the original project. I should probably turn off other functions as well (e.g. ability to import source files), but I'd rather error now on the side of giving people a good opportunity to check out the tool.

How to Integrate Licensing Codes

The next obvious question is how to toggle the varFullVersion variable to true or false. The concept is simple - people download the free version, so the default value is false. Then, if they decide to purchase the full version (or if I want to give to them), I need to give them some code that "turns on" the full version. If you have ever downloaded trial versions of commercial software, you know just how common this is. You download the trial version and if you then purchase the software, you are simply sent a code to unlock it.

One way to do this would be to hard code into the standalone alone a secret code that, if entered by the user, would unlock the full version. But, I wanted to have a little more control than that. I wanted to have a list of codes that I could give out and manage. For example, say I have a colleague who is teaching a course and wants to start using the tool next week with his students. I wanted a way to give that colleague a unique code to share with his students that would be "active" for a short period of time, just long enough for his students to download the tool and activate it. But, I didn't want his students to give out the code to friends and family to activate the tool later. I needed a way to activate or deactivate a list of unique codes at will.

Storing Codes on the Internet

Fortunately, in some of my other LiveCode projects, I have learned how easy it is to use information from text files stored on the Internet. I really like this approach because it saves me from the hassle of creating a database backend for storing simple information. So, I have hard coded into my tool a web address that points to a simple text file containing a list of codes. (Sorry, I won't be giving out that URL here - that would defeat the "secrecy" needed for the approach!) Here is an example of what the file looks like:

 87-93-87-22-44, the current commercial license code  
 bob7395, special code for Dr. Bob to use the tool with his class  
 stop, psych101vat, special code for the introductory psychology courses  
 vatforfamily, a special code just for sharing the tool with family and friends  

Each line has a list of items separated by a comma. The first item is the code. All other items are ignored. Notice that the code in line 3 is "stop." I've simply programmed the tool to ignore the word "stop" as a code. So, if I want to turn off a certain code for awhile, I simply add this word as the first item in that line. If I want to reactivate the code, I remove it. I can also simply substitute a new code for that group at any time. The program reads in all of the lines and will allow any active code to unlock the full version of the tool.

I should mention that I did program in a "back door" code directly into the program. So, if I ever need to unlock the tool for whatever reason (e.g. the Internet is down), I can do so.

How to Save the Codes

As I mentioned, I have the variable "varFullVersion" set to false as its default when the video analysis tool is launched. Obviously, the first things the program does is check to see if the person has previously unlocked the full version. How is this done? In short, I save a secret code stored in a file I won't name on the person's computer. It works kinda like a cookie. Most commercial software program access a special "preferences" folder on the user's computer to store these sorts of files. Maybe I do too, or maybe I don't - I'm not giving out those details here. The idea is simple though, if this secret file and code are found, then varFullVersion is immediately set to true within the first second after launch. Otherwise, the value remains false the free version is provided.

An advantage of using this approach is that if the user gives a friend a copy of the tool after they unlock the full version, they won't know anything about this stored file. So, when the friend launches the program, the free version is triggered.

Final Thoughts

Is this the best way to build a licensing function into a software program? I really don't know, but I doubt it. I'm actually quite sure there are way more sophisticated ways of doing this. But, with a zero budget, this approach seems to work based on my current knowledge of LiveCode. Of course, if my video analysis tool sells a million units, I may hire a real programmer to improve on this design.

Back to Work on Lloyd's Video Analysis Tool With a Focus on Graphic Design

It's been just over a year since I last wrote about my video analysis tool. I've spent the year in beta test mode showing the app to various groups and giving the app away to anyone who had an interest in using it. My only condition was that they would give me feedback. As of today, a total of 54 people have signed up to be "official" beta testers. (If you would like to be one, just go to my video analysis tool's website and click on the link at the top of the page.) The feedback I've received has generally been very positive with most of the criticisms and suggestions for improvements stemming from the Windows version of the tool (more about that later.)

I've also spent the year using my video analysis tool. I have found it most useful for creating transcriptions of the videos I create for teaching. In fact, I'm seriously thinking of creating a standalone app just for the transcription tool itself.

I'm convinced that my video analysis tool is worthy of greater things, so I've begun a serious effort on producing a significant update. I'm beginning with a focus on improving the tool's graphic design.

If you are one of the four people who read this blog, then you know that I've been very honest about my lack of graphic design ability. You also know that I never let it bother me, nor do I let it get in the way of my prototyping. But, every now and then I get some friendly feedback from people who really do find my stuff to be ugly. I usually just smile and remind them "it's only a prototype." This is a sincere answer because I rarely spend any serious time on graphic design. My goal is on creative ideation to build a working prototype of an original design. However, I have a few colleagues around the country with a refined sense of graphic design who are on the record saying that they simply won't use an app or web site that they find visually offensive. If I'm in the audience, I always get the sense that they then look at me from the corner of their eye.

The bottom-line is that I know I have to improve the graphic design of my video analysis tool if I want people to consider using it and (gasp!) consider paying a small amount to purchase it. (Yes I'm thinking of selling it, but with a price about equal to the cost of a breve expresso at Starbuck's.) Given my budget of zero dollars, I can't hire someone to do this work and I don't have the heart to ask some of the talented graphic designers I know to do it for free. Plus, I really wanted the challenge.

Here is my targeted benchmark for success: No one finds the app visually offensive.

It's not that I don't know anything about graphic design. Heck, in my "classic" (i.e. old) book Computers, Graphics, and Learning (1994), I even wrote about graphic design (p. 195-196):

... there are some generally accepted issues and concepts related to visual layout that are relevant at this point. Even the most specific design principles can be traced to one of four broad categories of visual design and layout: simplicity, unity, emphasis, and balance. In a sense, these principles aptly summarize much of the previous discussion of frame and procedural protocol. All four categories can be supported and described on the basis of human perception and information processing. For example, visual layout should take into account a person's abilities and limitations in selectively perceiving the most important information in a given display. All information coming from the environment will be competing for a person's limited attention. Therefore, a display should be designed to maximize the chances that a person will notice the most relevant quickly; it should also be able to sustain user attention over a period of time. When combined with rapid prototyping procedures and a lifelong hobby of "software watching," these principles can help guide beginners in designing effective screens.

The principles of simplicity, unity, emphasis, and balance are a good guide, though if you don't have any talent (like me), then you can only expect so much. A very weak area for me is color. I tend to use color in the most simplistic ways and I rarely use anything but pure saturated colors. I usually start with the colors of nature (e.g. green, yellow, and brown, with dashes of red), though when I'm knee deep into prototyping I usually just choose almost any new color when another one is needed. As I prepared to improve the graphic design of my video analysis tool, I knew I had to do more than just "try harder." And, it's not that I don't appreciate good graphic design - I think I "know it when I see it."

Before I share my strategy, let me show you the current draft of my tool's two main screens - the title screen and the video analysis screen (click on either to see them actual size).

Video Analysis Tool Title and Analysis Screens: 

For comparison, here are the previous versions: 

Lloyd's Guide to Graphic Design for Those with Little or No Talent

OK, I'm not saying my current design will win any awards, but I hope we can all agree that the changes mark a dramatic and certain improvement. To do this, I followed a simple strategy that I think others also without graphic design talent may find useful.

Step 1: Do a Google Search

I know, genius. It turns out there are lots of talented graphic designers out there willing to share their expertise with you. My starting point was finding a suitable color palette. I did a search using phrases such as "examples of color palettes" and found some very good advice. Here are the two sites that probably gave me the best information and inspiration:

• 40 Stunning Website Designs with Great Color Schemes 

• 10 Beautiful Website Color Palettes That Increase Engagement

Step 2: Choose the Mood You Want to Project

On some past projects where I've been fortunate to have a professional graphic designer on board, they would typically ask about what mood or first impression is desired for the project. I think this is a good place to start thinking about graphic design. I think in my case I wanted something that felt "professional and productive, yet enjoyable." I didn't want "cutesy," "toyish," or "cartoonish." 

Related to mood is the choice of an organizing framework, which often times equates to using a metaphor. For example, at one point months ago I toyed with the idea of using a medical metaphor for the project - you as a doctor "diagnosing" your video. Another was "video detective" where you are "sleuthing" the meaning of a video. If I had made a choice such as these, then this would have pointed to the use of graphical objects such as stethoscopes or microscopes, a magnifying glass, a Sherlock Holmes pipe, and the like. I obviously decided not to use any overt metaphor for this project, but you get the idea of how it would influence the graphic design.

Step 3: Choose and Stick to a Color Palette

Once the mood and organizing framework is chosen, the next step is to choose colors and graphical objects to implement it. This is where a talented graphical designer can do magic to draw backgrounds for context, characters, and the like. For the rest of us, we might have to use clip art. Either way, a key place to start is to choose and stick to a color palette.

The great thing about the sites above is that they give the color palette for each design in hex notation. This allows me to match the colors exactly. Here were the two examples that really caught my eye:

• Pixels & Aromates: nice browns, with one dash of red
• Kikk Festival: has more browns, with some blues

I've not included a screenshot of either here given that I think this would be a copyright infringement, but you can click on the links yourself to see them. If you do, I'm sure you will see how my title screen was inspired particularly by "Pixels & Aromates." I thought the gradients of brown were warm and friendly. And, for some reason, they evoked a pleasant look of a chocolate milkshake. (Way back when I was trying to come up with a name for this app, I had toyed with the idea of "video milkshake" for reasons I don't remember.) I also really liked the red hue that was used. I decided on using that red for oversized buttons, which may have been too much red. But the color combinations are pleasing to my eye. I made these buttons round to get away from the original boxish look. I also decided that the option to import a source file did not deserve equal prominence, so I de-emphasized that button.

I needed more colors for the analysis screen, so I again consulted the above web sites for guidance. For example, I wanted to call special attention to the video clip controls in the upper right-hand portion of the screen. I settled on two shades of muted orange.

On the analysis screen I wanted to set apart the two save buttons and the one delete button. I used the time-honored (and probably western) tradition of green means "go" or "safe" and red means "stop" or "caution." I also physically separated these buttons to prevent any accidental clicking. (However, I am careful in my user interface design to give adequate warning should an inadvertent click occur.)

One last detail worth mentioning is my use of the golden ratio on the title screen for placing the slightly darker brown band at the top. The band itself divides the large space nicely and the golden ratio (total height divided by height of bottom portion of the screen) of 1.161803 determined how thick to make it.

Step 4: Use the Principles of Simplicity, Unity, Emphasis, and Balance to Create the Screen Design

Probably the biggest change I made was to create a toolbar at the top of the analysis screen using the darkest shade of brown to group navigational buttons and other options. Previously, I had all of these buttons scattered around the screen. The haphazard way these were initially placed mirrored when I created these various options as the prototype of the app was built. I feel this toolbar organizes all of these options very effectively. The other advantage of the toolbar is that I was able to reclaim a lot of screen space. I can now fit a total of 40 tags in the "Quick Tags" window, instead of 24.

I also visually grouped the four main parts of the analysis screen to achieve unity. As you can see from my before and after examples, I really did not make any major changes to the placement of these four areas. But, I made some small, but important design updates. First, I used shades of brown with a thin black border to define each group area. LiveCode has some built in graphic effects, such as drop shadow. I like how this gives the screen some depth. I also made sure everything lined up well for a sense of balance.

As already mentioned, the use of greens, reds, and orange also provide effective emphasis of key areas and functions.

Other Useful Tools

Although you can script colors into LiveCode objects using either hexidecimal or RGB notation, it appears you can only use RGB to "hard code" colors in the inspector window. So, I used this handy Hex-to-RGB converter:

http://hex.colorrrs.com/

My photoshop skills are also minimal, so I didn't want to spend time creating my own buttons. Instead, I used this web site to create prefabricated buttons:

http://dabuttonfactory.com/

I did use photoshop to create the stylized text on my home screen, but here is also a web site I found as a fall-back tool:

http://cooltext.com/

Although I chose orange and green hues that were part of existing palettes shown in the above web site examples, there are also lots of color picker tools out there to help when choosing new colors, such as the following:

http://www.w3schools.com/colors/colors_picker.asp

Note about the Windows Version

I mentioned at start of this blog post that most of the negative feedback from my beta tesers has come from the Windows version of my video analysis tool. Although it's great that LiveCode allows for exporting desktop apps to Macintosh, Windows, and Linux, this really is designed as a Macintosh app. Because this app involves video, a Windows user must have QuickTime installed on their computers. Even then, there are problems that have been reported that are simply a mystery to me. I have simply not been able to sufficiently troubleshoot problems on the Windows side. So, I'm seriously thinking of removing the Windows option, at least until I finish with the Macintosh version.

Final Thoughts

I'm very happy with these graphic design improvements, even though I know I'll continue to tweak the design over the coming weeks. I also enjoyed the process, as time-consuming as it was. If I had the money, I would have much preferred turning this task over to a professional graphic designer. But, maybe this shows that even someone with very limited ability can follow a graphic design process to at least meet the criteria of not making people nauseous when they look at an app.

Of course, if there are any talented graphic designers out there who want to redesign my app for just the fun of it, please drop me a line.

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.