bob hanson st. olaf college, northfield, mn stolaf/people/hansonr
DESCRIPTION
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. - PowerPoint PPT PresentationTRANSCRIPT
![Page 1: Bob Hanson St. Olaf College, Northfield, MN stolaf/people/hansonr](https://reader035.vdocuments.us/reader035/viewer/2022070419/56815b0e550346895dc8ba69/html5/thumbnails/1.jpg)
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
![Page 2: Bob Hanson St. Olaf College, Northfield, MN stolaf/people/hansonr](https://reader035.vdocuments.us/reader035/viewer/2022070419/56815b0e550346895dc8ba69/html5/thumbnails/2.jpg)
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.
![Page 3: Bob Hanson St. Olaf College, Northfield, MN stolaf/people/hansonr](https://reader035.vdocuments.us/reader035/viewer/2022070419/56815b0e550346895dc8ba69/html5/thumbnails/3.jpg)
• 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
![Page 4: Bob Hanson St. Olaf College, Northfield, MN stolaf/people/hansonr](https://reader035.vdocuments.us/reader035/viewer/2022070419/56815b0e550346895dc8ba69/html5/thumbnails/4.jpg)
Three Features of Successful Web-Based Media
• dynamic
• interactive
• informative
![Page 5: Bob Hanson St. Olaf College, Northfield, MN stolaf/people/hansonr](https://reader035.vdocuments.us/reader035/viewer/2022070419/56815b0e550346895dc8ba69/html5/thumbnails/5.jpg)
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/?
![Page 6: Bob Hanson St. Olaf College, Northfield, MN stolaf/people/hansonr](https://reader035.vdocuments.us/reader035/viewer/2022070419/56815b0e550346895dc8ba69/html5/thumbnails/6.jpg)
My solution involves JavaScript.
Why?
• Adaptability
• Compartmentalization
• Reusability
![Page 7: Bob Hanson St. Olaf College, Northfield, MN stolaf/people/hansonr](https://reader035.vdocuments.us/reader035/viewer/2022070419/56815b0e550346895dc8ba69/html5/thumbnails/7.jpg)
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
![Page 8: Bob Hanson St. Olaf College, Northfield, MN stolaf/people/hansonr](https://reader035.vdocuments.us/reader035/viewer/2022070419/56815b0e550346895dc8ba69/html5/thumbnails/8.jpg)
Quick History of Web-Based Media• 1996 Netscape 2, HTML 3.2
– frames– JavaScript– document.write() allows for dynamic content
![Page 9: Bob Hanson St. Olaf College, Northfield, MN stolaf/people/hansonr](https://reader035.vdocuments.us/reader035/viewer/2022070419/56815b0e550346895dc8ba69/html5/thumbnails/9.jpg)
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
![Page 10: Bob Hanson St. Olaf College, Northfield, MN stolaf/people/hansonr](https://reader035.vdocuments.us/reader035/viewer/2022070419/56815b0e550346895dc8ba69/html5/thumbnails/10.jpg)
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)
![Page 11: Bob Hanson St. Olaf College, Northfield, MN stolaf/people/hansonr](https://reader035.vdocuments.us/reader035/viewer/2022070419/56815b0e550346895dc8ba69/html5/thumbnails/11.jpg)
• 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
![Page 12: Bob Hanson St. Olaf College, Northfield, MN stolaf/people/hansonr](https://reader035.vdocuments.us/reader035/viewer/2022070419/56815b0e550346895dc8ba69/html5/thumbnails/12.jpg)
The “Concept Index” Idea
![Page 13: Bob Hanson St. Olaf College, Northfield, MN stolaf/people/hansonr](https://reader035.vdocuments.us/reader035/viewer/2022070419/56815b0e550346895dc8ba69/html5/thumbnails/13.jpg)
Let’s get under the hood and find out…
OK, so, how does this application work?
![Page 14: Bob Hanson St. Olaf College, Northfield, MN stolaf/people/hansonr](https://reader035.vdocuments.us/reader035/viewer/2022070419/56815b0e550346895dc8ba69/html5/thumbnails/14.jpg)
…there’s a main “code” frame…
![Page 15: Bob Hanson St. Olaf College, Northfield, MN stolaf/people/hansonr](https://reader035.vdocuments.us/reader035/viewer/2022070419/56815b0e550346895dc8ba69/html5/thumbnails/15.jpg)
…that writes to an “index” frame…
![Page 16: Bob Hanson St. Olaf College, Northfield, MN stolaf/people/hansonr](https://reader035.vdocuments.us/reader035/viewer/2022070419/56815b0e550346895dc8ba69/html5/thumbnails/16.jpg)
…and to a primary “content” frame…
![Page 17: Bob Hanson St. Olaf College, Northfield, MN stolaf/people/hansonr](https://reader035.vdocuments.us/reader035/viewer/2022070419/56815b0e550346895dc8ba69/html5/thumbnails/17.jpg)
…behind the scenes are three components:
Interactivity
(38K)
Content
(152K)Compatibility (3K)
![Page 18: Bob Hanson St. Olaf College, Northfield, MN stolaf/people/hansonr](https://reader035.vdocuments.us/reader035/viewer/2022070419/56815b0e550346895dc8ba69/html5/thumbnails/18.jpg)
scripts.js
(38K)
…scripts.js provides all interaction with the user
![Page 19: Bob Hanson St. Olaf College, Northfield, MN stolaf/people/hansonr](https://reader035.vdocuments.us/reader035/viewer/2022070419/56815b0e550346895dc8ba69/html5/thumbnails/19.jpg)
…symbols.js provides browser-dependent characters, such as Δ, μ, and λ.
scripts.js
(38K)symbols.js (3K)
![Page 20: Bob Hanson St. Olaf College, Northfield, MN stolaf/people/hansonr](https://reader035.vdocuments.us/reader035/viewer/2022070419/56815b0e550346895dc8ba69/html5/thumbnails/20.jpg)
…imt.js provides basic content parameters
scripts.js
(38K)
imt.js
(5K)
symbols.js (3K)
![Page 21: Bob Hanson St. Olaf College, Northfield, MN stolaf/people/hansonr](https://reader035.vdocuments.us/reader035/viewer/2022070419/56815b0e550346895dc8ba69/html5/thumbnails/21.jpg)
scripts.js
(38K)symbols.js (3K)
…chapterdata.js provides a “table of contents”
chapterdata.js
(8K)
![Page 22: Bob Hanson St. Olaf College, Northfield, MN stolaf/people/hansonr](https://reader035.vdocuments.us/reader035/viewer/2022070419/56815b0e550346895dc8ba69/html5/thumbnails/22.jpg)
scripts.js
(38K)symbols.js (3K)
…indexdata.js provides an interactive “index”
indexdata.js
(27K)
![Page 23: Bob Hanson St. Olaf College, Northfield, MN stolaf/people/hansonr](https://reader035.vdocuments.us/reader035/viewer/2022070419/56815b0e550346895dc8ba69/html5/thumbnails/23.jpg)
scripts.js
(38K)symbols.js (3K)
…and, finally, textdata.js provides content.
textdata.js
(112K)
![Page 24: Bob Hanson St. Olaf College, Northfield, MN stolaf/people/hansonr](https://reader035.vdocuments.us/reader035/viewer/2022070419/56815b0e550346895dc8ba69/html5/thumbnails/24.jpg)
Interactivity
(38K)Compatibility (3K)
…overall, 550 text screens, 260 images, and 15 applications are delivered in the “content” frame.
Content
(152K)
![Page 25: Bob Hanson St. Olaf College, Northfield, MN stolaf/people/hansonr](https://reader035.vdocuments.us/reader035/viewer/2022070419/56815b0e550346895dc8ba69/html5/thumbnails/25.jpg)
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…
![Page 26: Bob Hanson St. Olaf College, Northfield, MN stolaf/people/hansonr](https://reader035.vdocuments.us/reader035/viewer/2022070419/56815b0e550346895dc8ba69/html5/thumbnails/26.jpg)
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
![Page 27: Bob Hanson St. Olaf College, Northfield, MN stolaf/people/hansonr](https://reader035.vdocuments.us/reader035/viewer/2022070419/56815b0e550346895dc8ba69/html5/thumbnails/27.jpg)
…behind the scenes are similar components:
Interactivity
(38K)
Content
(56K)Compatibility (3K)
![Page 28: Bob Hanson St. Olaf College, Northfield, MN stolaf/people/hansonr](https://reader035.vdocuments.us/reader035/viewer/2022070419/56815b0e550346895dc8ba69/html5/thumbnails/28.jpg)
…this time just ONE main application:
![Page 29: Bob Hanson St. Olaf College, Northfield, MN stolaf/people/hansonr](https://reader035.vdocuments.us/reader035/viewer/2022070419/56815b0e550346895dc8ba69/html5/thumbnails/29.jpg)
…behind the scenes are seven modules:
![Page 30: Bob Hanson St. Olaf College, Northfield, MN stolaf/people/hansonr](https://reader035.vdocuments.us/reader035/viewer/2022070419/56815b0e550346895dc8ba69/html5/thumbnails/30.jpg)
…including data tabulation and graphing:
![Page 31: Bob Hanson St. Olaf College, Northfield, MN stolaf/people/hansonr](https://reader035.vdocuments.us/reader035/viewer/2022070419/56815b0e550346895dc8ba69/html5/thumbnails/31.jpg)
…and graphic slope analysis.
![Page 32: Bob Hanson St. Olaf College, Northfield, MN stolaf/people/hansonr](https://reader035.vdocuments.us/reader035/viewer/2022070419/56815b0e550346895dc8ba69/html5/thumbnails/32.jpg)
…all based on a mechanistic model. It’s fun!
![Page 33: Bob Hanson St. Olaf College, Northfield, MN stolaf/people/hansonr](https://reader035.vdocuments.us/reader035/viewer/2022070419/56815b0e550346895dc8ba69/html5/thumbnails/33.jpg)
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.
![Page 34: Bob Hanson St. Olaf College, Northfield, MN stolaf/people/hansonr](https://reader035.vdocuments.us/reader035/viewer/2022070419/56815b0e550346895dc8ba69/html5/thumbnails/34.jpg)
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!
![Page 35: Bob Hanson St. Olaf College, Northfield, MN stolaf/people/hansonr](https://reader035.vdocuments.us/reader035/viewer/2022070419/56815b0e550346895dc8ba69/html5/thumbnails/35.jpg)
Thank you!
feedback appreciated
Bob Hanson
St. Olaf College, Northfield, MN
http://www.stolaf.edu/people/hansonrBCCE 18, July 19, 2004