web-based methods of delivering dynamic interactive materials for teaching thermodynamics and

kinetics at the first-year college level

Bob Hanson

St. Olaf College, Northfield, MN

http://www.stolaf.edu/people/hansonrBCCE 18, July 19, 2004

Goals of this Presentation

• Spend a few minutes on features and challenges of web-based media.

• Provide a little historical context.

• Get under the hood with two recent projects currently online at St. Olaf College.

• Briefly discuss the power of JavaScript.

• Kinetics Explorer, a stand-alone application built with JavaScript “plug-and-play” capability.

www.stolaf.edu/depts/chemistry/kinetex

These projects include:

• The Introduction to Molecular Thermodynamics Concept Index

www.stolaf.edu/depts/chemistry/imt/concept

Three Features of Successful Web-Based Media

• dynamic

• interactive

• informative

Challenges of Web-Based Media

• Platforms – Windows/Mac/Unix

• Versions – NN3, 4.7, 6.0, 7.1,…

• Unpredictable, Phenomenally Fast Evolution – What’s next?

• Browsers – Netscape/IE/Opera/?

My solution involves JavaScript.

Why?

• Adaptability

• Compartmentalization

• Reusability

Quick History of Web-Based Media• 1992-1995 Mosaic, Netscape 1, HTML 2.0

– basic HTML tagging– basic page positioning– static, not dynamic

<table>

<tr> <td> <b>THIS WILL BE BOLD</b> </td> </tr>

<tr> <td> </td> <td> <I>this will be italics</I> </td> </tr>

</table>

THIS WILL BE BOLD This will be italics

Quick History of Web-Based Media• 1996 Netscape 2, HTML 3.2

– frames– JavaScript– document.write() allows for dynamic content

Quick History of Web-Based Media• 1996-1998 Netscape 4, IE 3, HTML 3.2/4.0

– <style>, <span>, events– limited dynamic control over page elements– browser wars; lots of frustration

Quick History of Web-Based Media• 2000/2001 Netscape 6, IE 6, Opera 7, HTML 4.0

– document.getElementById()– full dynamic control over every page element– standardization arrives (mostly); less frustration (maybe)

• Dynamic: “Concept map” / “practice set” / “book index” all rolled up into one web-based application.

The “Concept Index” Idea• Informative: A multi-purpose application designed to

accompany a textbook, Introduction to Molecular Thermodynamics.

• Interactive: Provides unlimited opportunities for self-paced study and practice.

See it in action at S574 (Wed. 2:50)

www.stolaf.edu/depts/chemistry/imt

The “Concept Index” Idea

Let’s get under the hood and find out…

OK, so, how does this application work?

…there’s a main “code” frame…

…that writes to an “index” frame…

…and to a primary “content” frame…

…behind the scenes are three components:

Interactivity

(38K)

Content

(152K)Compatibility (3K)

scripts.js

(38K)

…scripts.js provides all interaction with the user

…symbols.js provides browser-dependent characters, such as Δ, μ, and λ.

scripts.js

(38K)symbols.js (3K)

…imt.js provides basic content parameters

scripts.js

(38K)

imt.js

(5K)

symbols.js (3K)

scripts.js

(38K)symbols.js (3K)

…chapterdata.js provides a “table of contents”

chapterdata.js

(8K)

scripts.js

(38K)symbols.js (3K)

…indexdata.js provides an interactive “index”

indexdata.js

(27K)

scripts.js

(38K)symbols.js (3K)

…and, finally, textdata.js provides content.

textdata.js

(112K)

Interactivity

(38K)Compatibility (3K)

…overall, 550 text screens, 260 images, and 15 applications are delivered in the “content” frame.

Content

(152K)

The JavaScript solution allows for:

• Easy adaptability as browsers evolve;

• Compartmentalization of delivery, compatibility, and content; and

• Reusability?

Let’s take a closer look at this last point…

The “Kinetics Explorer” Idea

• A multipurpose application designed to accompany any textbook discussion of introductory kinetics

See it in action at S340 (Tues. 9:30)

• Provides “plug-and-play” web-based kinetics simulations within another “concept index” framework.

• Involves extensive use of HTML 4.0.

www.stolaf.edu/depts/chemistry/kinetex

…behind the scenes are similar components:

Interactivity

(38K)

Content

(56K)Compatibility (3K)

…this time just ONE main application:

…behind the scenes are seven modules:

…including data tabulation and graphing:

…and graphic slope analysis.

…all based on a mechanistic model. It’s fun!

Conclusions:

• JavaScript performs well even in relatively large applications with lots of calculations.

• The dynamic, interactive nature of the Web is fundamentally changing the way we teach and the way students learn.

• Platform/Browser/Version issues are solvable by compartmentalization.

Final Words of Wisdom:

• Start with a simple idea with a simple solution and build from there.

• Learn from others. Collect ideas and build a reservoir of basic functionality that you can tap into over and over.

• Keep content, delivery, and compatibility separate, if possible.

• Don’t give up! It gets easier!

Thank you!

feedback appreciated

Bob Hanson

St. Olaf College, Northfield, MN

http://www.stolaf.edu/people/hansonrBCCE 18, July 19, 2004