web-based methods of delivering dynamic interactive materials for teaching thermodynamics and kinetics at the first-year college level

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

• The Introduction to Molecular Thermodynamics
  Concept Index
• www.stolaf.edu/depts/chemistry/imt/concept

• Kinetics Explorer, a stand-alone application
  built with JavaScript plug-and-play capability.
• www.stolaf.edu/depts/chemistry/kinetex

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

lttablegt lttrgt lttdgt ltbgtTHIS WILL BE BOLDlt/bgt
lt/tdgt lt/trgt lttrgt lttdgt lt/tdgt lttdgt ltIgtthis will be
italicslt/Igt lt/tdgt lt/trgt lt/tablegt
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
• ltstylegt, ltspangt, 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. 250)
www.stolaf.edu/depts/chemistry/imt
12

The Concept Index Idea
13

OK, so, how does this application work?
Lets get under the hood and find out
14

theres 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?
• Lets 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. 930)
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. Its 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.

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