1 / 35

Bob Hanson St. Olaf College, Northfield, MN stolaf/people/hansonr

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. Goals of this Presentation.

lou
Download Presentation

Bob Hanson St. Olaf College, Northfield, MN stolaf/people/hansonr

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  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. • Briefly discuss the power of JavaScript. • Provide a little historical context. • Get under the hood with two recent projects currently online at St. Olaf College.

  3. These projects include: • Kinetics Explorer, a stand-alone application built with JavaScript “plug-and-play” capability. www.stolaf.edu/depts/chemistry/kinetex • TheIntroduction to Molecular Thermodynamics Concept Index www.stolaf.edu/depts/chemistry/imt/concept

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

  5. Challenges of Web-Based Media • Platforms – Windows/Mac/Unix • Browsers – Netscape/IE/Opera/? • Versions – NN3, 4.7, 6.0, 7.1,… • Unpredictable, Phenomenally Fast Evolution – What’s next?

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

  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 • <style>, <span>, 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. The “Concept Index” Idea • Informative: A multi-purpose application designed to accompany a textbook, Introduction to Molecular Thermodynamics. • Dynamic: “Concept map” / “practice set” / “book index” all rolled up into one web-based application. • 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. OK, so, how does this application work? Let’s get under the hood and find out…

  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 provides all interaction with the user scripts.js (38K)

  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. …chapterdata.js provides a “table of contents” scripts.js (38K) chapterdata.js (8K) symbols.js (3K)

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

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

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

  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 • Provides “plug-and-play” web-based kinetics simulations within another “concept index” framework. • Involves extensive use of HTML 4.0. See it in action at S340 (Tues. 9:30) 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. • Platform/Browser/Version issues are solvable by compartmentalization. • The dynamic, interactive nature of the Web is fundamentally changing the way we teach and the way students learn.

  34. Final Words of Wisdom: • Start with a simple idea with a simple solution and build from there. • Keep content, delivery, and compatibility separate, if possible. • Learn from others. Collect ideas and build a reservoir of basic functionality that you can tap into over and over. • 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

More Related