Saturday, November 22, 2014

Adding WOWSlider to Blogger

Sorry, as of August 31st 2016 Google Drive no longer hosts HTML files. You can still store an HTML file on Drive, but if you link to it, you will be prompted to download the file. It will not be rendered in your browser.

Read my post here about a quick alternative called WWW Drive. You can still store your files using the directions below in Google Drive, with the same folder structure. You will have to revert the link changes back to what WOWSlider originally generated. As long as your folder is public, WWW Drive will find it and give you an alternative link to your HTML file (or just to your folder - WWW Drive will find and host the index.html file automatically). Use the link generated by WWW Drive in your iframe tag.

Alternatively you can find a host (I am using Google Cloud), transfer your files there, and revert your link changes (if you made them) back to what WOWSlider generated.

Here are my new sliders on my Portfolio page: http://billcalhounteacher.blogspot.com/p/portfolio.html.

Click HERE if you would like to remove the strikethrough and read the original directions.


I've been wanting to add a WOWSlider slideshow to my blog. WOWSlider is a little application that creates many different kinds of very cool sliders. The application generates a collection of files:
  • an engine folder which holds the CSS, JavaScript, and small images and icons for the slider functions;
  • a data folder which holds the slide images, along with thumbnail and tooltip images;
  • and finally the HTML document called index.html.

The WOWSlider website has incorrect information about adding a slider to a Blogspot post. The main difficulty is that the two generated folders need to be located somewhere on the Web to be accessed by your browser through the HTML file. If you have a website hosted on a server somewhere, you can add the folders there, and that is what some people have done successfully.

Hosting the folders and files on Drive

I don't have a hosted website, but I do have Google Drive, which is capable of hosting files for websites, so here is what I did.
  • In my Drive account (which you automatically have if you have a Google account), I created a folder that I called Slider1.
  • I made sure that the folder was shared (public on the Web - anyone can find and view).
  • Then in it I re-created the folder structure generated by WOWSlider: in my case it was a folder called engine1 and a folder called data1.
  • Within data1 I created the three folders that WOWSlider had generated: images, thumbnails, and tooltips.
  • Then I uploaded all the WOWSlider files (but not index.html yet!) from my desktop to the appropriate folders on Drive.
This last step is easily done, depending on your browser. Some browser versions let you drag-and-drop a whole list of files at once. Some browsers can upload the whole folder structure with its files all at once!

I navigated back to the top folder, the one I called Slider1, and selected it. Then I clicked the Link icon and copied the link. I pasted it into a text editor on my computer (Notepad++ rocks!). Mine looked like this:
https://drive.google.com/open?id=0B49MqzTRp5q6NEF5NEhsX09NckE&authuser=0
Note the "id=" part. That's the id of the main folder (minus the "&authuser=0" part). I edited the link so it looked like this:
https://googledrive.com/host/0B49MqzTRp5q6NEF5NEhsX09NckE/
(You can click on this link to see my test slider.)
I used my editor to open the index.html file that WOWSlider generated. There are several links in there. All I needed to do was add the "https://googledrive.com/host/0B49MqzTRp5q6NEF5NEhsX09NckE/" to the front of each link URL. So a link that looked like this:
src="engine1/jquery.js"
now looked like this:
src="https://googledrive.com/host/0B49MqzTRp5q6NEF5NEhsX09NckE/engine1/jquery.js"
My slider had 7 images, so there were 7 links to images, 7 more links to tooltip images, 2 links in the head section (to CSS and JS files), and 2 final links toward the end of the file. (This was very quick work - use the replace function of your editor.) Your file will be different, so check carefully.

Then I uploaded this adjusted file to Drive, within the Slider1 folder.

Adapting Blogger to display the slider

There is a way to paste lines of code from index.html into your blog template and into your blog post or page. I tried it, and the results weren't very good. The best approach for me was to put the slider into an Iframe in my post or page. An Iframe is a window into which your slider will be placed inside the body of your post.

I created a new Page (you could create a new Post as well) and typed the following (you might have to click the HTML button first):
<iframe src="https://googledrive.com/host/0B49MqzTRp5q6NEF5NEhsX09NckE/index.html" style="height:350px;width:585px;margin-left:-20px;overflow:hidden;border:none;" scrolling="no"></iframe>
Notice that the Iframe source (src=) is the URL for my index.html file in Google Drive. You'll have to put your own URL in. You can mess with the height and width and margin. It is redundant to have scrolling = "no" and "overflow:hidden;" but until all browsers finish the transition to HTML5, it's the most reliable way to eliminate the scroll bars.

Now you can build the rest of your post around the Iframe, using style options like "float:left;" or "border:5px solid red;" in the Iframe. You treat the Iframe very much like an image. WOWSlider also generated a file called iframe_index.html, and you could look in there for more options.

(Check out the sliders on my Portfolio page: http://billcalhounteacher.blogspot.com/p/portfolio.html)

Sunday, November 16, 2014

Physics Toys, Games, and e-Learning

Physics educators have been developing and employing digital simulations for decades. Over time these simulations have evolved into sophisticated toys and games, and have become a regular part of the physics teacher’s repertoire of instructional resources. This article is a personal reflection that takes a look at these toys and games from my own experience as a high-school physics teacher.

What is a Toy?

Here is one example of a definition. This is quoted from a blog post by Beat Schwendimann (2014), a Swiss researcher in learning and visual representation:
The main difference between toys, games and puzzles is the amount of constraint and authorship the player has over the experience. The more authorship the player has over a puzzle, the more it becomes like a toy. The more the player is the actor following the strict guides of the toy, the more the toy becomes like a puzzle. . . Changing the role of the player changes the experience: When you add a goal to toys it will become a game.
In a sense, a game comprises several toys, all working together in a particular way to achieve the goal of the game.

The equations of physics are effectively models of how the world works. When these models are put to work in some fashion, you have a simulation. Digital simulations can be toys, puzzles, or games.

A Classic Digital Toy

Probably the most well-known physics toy is Line Rider. Often referred to as a game (and derided as such), it is a simple simulation of an object sliding along a surface with little friction. The fun of this toy is that you draw the surface however you like (the “line”), and when you hit the play button a cartoon man on a sled (the “rider”) slides on the line as if it were covered with snow. The rider often crashes, or is left tumbling through space endlessly. There isn’t a built-in goal, but users often create a goal of controlling the path of the rider in some way. Paths can be deleted or saved. Some very elaborate paths have been recorded and presented publicly on YouTube. A copy of the game is embedded below, but requires a Flash plug-in. You can click here to see an HTML5 version.


How Line Rider is Used in the Classroom

A student simply playing with Line Rider discovers quickly that the rider does not necessarily follow the path. He or she immediately catches on and will try again, sometimes over and over, manipulating the line until control of the rider is achieved. Then the student might adopt another mode of use, designing specific paths to see what will happen, and eventually designing paths to carefully control what happens.

This kind of intrinsic motivation is quite engaging, and has pedagogical uses, however minor. To increase the pedagogical value, the teacher needs to construct some kind of scaffolding because the toy does not have any further intrinsic scaffolding. The physics concepts evident in Line Rider are gravity, free-fall, potential and kinetic energy, and friction. All of these concepts are accurately modeled in Line Rider, but not in overt ways, hence the need for scaffolding and guidance if this toy is to become an educational tool.

How Line Rider Fails as a Physics Toy

The primary failure of a digital toy or game is when the model underlying the simulation violates the laws of physics. This is surprisingly common. Our perception of certain experiences sometimes differs from the physical model, and simulations, especially commercial ones, will tend toward the perception rather than the model.

How big is the full moon? Making a circle with your fingers and holding your arm out, estimate the size of the moon’s disk. Now hold your thumb up, straighten your arm, and look at your thumbnail. The full moon has a diameter about half the width of your thumbnail. I know, you don’t believe it, but it’s true. No game designer or animator will ever make the moon that small because it will not be believable.

In a similar way, we perceive any acceleration as being much greater than it actually is. If you examine Line Rider, you will see that there is a control with a red box under it. This is a later addition to Line Rider. When you click on the tool and draw, it creates an “acceleration” line that patently violates the laws of physics. It is there because the rider does not move quickly enough to satisfy some users. When my students discover this tool they enthusiastically adopt it. With proper (and elaborate) scaffolding, a lesson can be made to help students understand the violation. Otherwise, Line Rider fails in this regard as an educational physics tool.

How Line Rider’s Failure Could Become a Feature

The PhET Interactive Simulations program, hosted by the University of Colorado Boulder, has numerous simulations that are quite popular with teachers. Their research is extensive, and includes such topics as intrinsic scaffolding (scaffolding built into the simulations) and student agency and ownership of the learning process (see, for example, Podolefsky, Moore, and Perkins, 2013). Here is their design strategy, quoted from their website (http://phet.colorado.edu/en/about):
To help students engage in science and mathematics through inquiry, PhET simulations are developed using the following design principles:
  • Encourage scientific inquiry
  • Provide interactivity
  • Make the invisible visible
  • Show visual mental models
  • Include multiple representations (e.g., object motion, graphs, numbers, etc.)
  • Use real-world connections
  • Give users implicit guidance (e.g., by limiting controls) in productive exploration
  • Create a simulation that can be flexibly used in many educational situations

If I were to use this design strategy to redesign Line Rider, I would add at least two tools to the toy: a way to adjust the friction of the surface, and a way to adjust the acceleration of gravity. Both of these adjustments would have numerical or descriptive indicators so users would know exactly how much and what kind of adjustment they are making. This adaptation would preserve (or possibly enhance) the scaffolding, yet still allow the user to make the game as exciting (or dull) as the user wishes. Such adjustments could include an option that would be physically impossible (such as anti-gravity). This violation of physics would be chosen by a student with full knowledge, thus obviating the need for further scaffolding to cover up the toy’s apparent failure.


References

Schwendimann, B. (2014). What is the difference between a toy, a game, a puzzle, and a sport? Proto-Knowledge (blog). Retrieved 16 Nov 2014 from http://proto-knowledge.blogspot.com/2010/12/what-is-difference-between-toy-and-game.html
Podolefsky, N., Moore, E., Perkins, K. (2013). Implicit scaffolding in interactive simulations: Design strategies to support multiple educational goals. (arXiv Reference No.: 1306.6544. Retrieved 16 Nov 2014 from http://arxiv.org/ftp/arxiv/papers/1306/1306.6544.pdf