1. 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/hansonr BCCE 18, July 19, 2004

2. 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.

3. 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

4. Three Features of Successful Web-Based Media dynamic interactive informative

5. 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/?

6. My solution involves JavaScript. Why? Adaptability Compartmentalization Reusability

7. Quick History of Web-Based Media 1992-1995 Mosaic, Netscape 1, HTML 2.0 –basic HTML tagging –basic page positioning –static, not dynamic THIS WILL BE BOLD this will be italics THIS WILL BE BOLD This will be italics

8. Quick History of Web-Based Media 1996 Netscape 2, HTML 3.2 –frames –JavaScript –document.write() allows for dynamic content

9. Quick History of Web-Based Media 1996-1998 Netscape 4, IE 3, HTML 3.2/4.0 –,, events –limited dynamic control over page elements –browser wars; lots of frustration

10. 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)

11. 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

12. The “Concept Index” Idea

13. Let’s get under the hood and find out… OK, so, how does this application work?

14. …there’s a main “code” frame…

15. …that writes to an “index” frame…

16. …and to a primary “content” frame…

17. …behind the scenes are three components: Interactivity (38K) Content (152K) Compatibility (3K)

18. scripts.js (38K) …scripts.js provides all interaction with the user

19. …symbols.js provides browser-dependent characters, such as Δ, μ, and λ. scripts.js (38K) symbols.js (3K)

20. …imt.js provides basic content parameters scripts.js (38K) imt.js (5K) symbols.js (3K)

21. scripts.js (38K) symbols.js (3K) …chapterdata.js provides a “table of contents” chapterdata.js (8K)

22. scripts.js (38K) symbols.js (3K) …indexdata.js provides an interactive “index” indexdata.js (27K)

23. scripts.js (38K) symbols.js (3K) …and, finally, textdata.js provides content. textdata.js (112K)

24. Interactivity (38K) Compatibility (3K) …overall, 550 text screens, 260 images, and 15 applications are delivered in the “content” frame. Content (152K)

25. 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…

26. 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

27. …behind the scenes are similar components: Interactivity (38K) Content (56K) Compatibility (3K)

28. …this time just ONE main application:

29. …behind the scenes are seven modules:

30. …including data tabulation and graphing:

31. …and graphic slope analysis.

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

33. 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.

34. 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!

35. Thank you! feedback appreciated Bob Hanson St. Olaf College, Northfield, MN http://www.stolaf.edu/people/hansonr BCCE 18, July 19, 2004