Science Literacy Maps
John Weatherley, Sharon Clark, Faisal
Ahmad, Lynne Davis, Tamara Sumner
The Strand Map Service is a partnership between Digital Learning
Sciences (CU/UCAR), Project 2061/AAAS, NSDL, and researchers at
the Pittsburgh Science of Learning Center. NSF grant #0734889, and
others.
Topics





Educational foundations
The Strand Map user interface
Technical components
The JavaScript API
Code walkthrough
2
About the Strand Map Service
 A software tool for creating interactive applications that
enable educators and learners to
 Explore the relationships and interconnections between
important STEM concepts and learning goals
 Locate resources and other curriculum components supporting
specific concepts and learning goals
 Enhance their science content knowledge, pedagogical content
knowledge (educators), and preparation for learning (learners)
 Design coherent instructional materials supporting recognized
learning goals and informed by research on student learning
(educators)
 Provides infrastructure to help address the vertical
integration challenge identified in NSB Action Plan
3
Three Foundations
 Cognitive benefits of knowledge map
representations (Chmielewski et al, 1998; Hall et al, 1999;
O’Donnell et al, 2002)
 Research-based content developed and
compiled by Project 2061 / AAAS
 NSDL collections, technical infrastructure,
and operational services
4
Content from Project 2061/AAAS
 Benchmarks: Describe what
learners should know, or be able to
do, at key stages in their education
across the STEM disciplines
 Strand maps: Learning progression
diagrams illustrating how student
understanding changes over time
 Curriculum components: Materials
and information to improve teachers’
science content knowledge,
pedagogical content knowledge, and
instructional practices
5
Evaluation Results
 Controlled study compared influence of strand
map interface and keyword-based digital library
interface on cognitive processes of
undergraduates
 Quantitative analysis of verbal protocols coded by comprehension
processes: content, surface, task, monitoring, evaluation
Butcher, K, S. Bhushan, and T. Sumner (2005). “Multimedia displays for
conceptual search processes: Information seeking with strand maps.”
ACM Multimedia Systems Journal (Special issue on Multimedia in
Education and eLearning).
 Strand map interfaces promote focus on science
content, as opposed to query construction and
surface features
6
Topics





Educational foundations
The Strand Map user interface
Technical components
The JavaScript API
Code walkthrough
7
SMS Interface
 Placing the Atlas on-line
8
Four Interface Components
 Map Selector: Find maps by searching
or browsing by topic
 Interactive Map Browser: Navigate and
view strand maps interactively
 Information Bubble: View resources
related to learning goals and concepts
 Print View: See a printable view of the
map and all related information on one
page
9
Strand Selector
Choose
topics
Select maps
Interactive Map Browser and
Information Bubble
NSES
standards
NSDL
resources
Benchmark
details
Related
benchmarks
Map
navigator
Print View
Map image
Benchmark details
NSES standards
NSDL resources
Related benchmarks
(not shown here)
Grades and Strand Dimensions
Strand Dimension
Grade Dimension
Demonstration

http://strandmaps.nsdl.org/?id=SMS-MAP-0048&bm=SMS-BMK-0027
14
Customizable Features
 Use JavaScript API to:
 Place the interactive maps in any Web page
 Insert and customize content in the Information
Bubble
 Display resources and other information
 Gather and store information submitted by users
 Customize the map colors, styles and fonts
 Integrate with existing web design
 Supported in Internet Explorer, Firefox, Safari,
Netscape
 No browser plug-ins required
15
Multimedia Content
Interactive Content
Current NSDL Use Cases
 NSDL Science Literacy Maps
 Connects learning goals with NSDL
resources
 AAAS Benchmarks Collection
 View the collection of AAAS benchmarks
cataloged in the NSDL library
18
Possible NSDL Use Cases
 Pathways Map Browser
 Connect learning goals with specific pathway’s resources
 Expert Voices
 Integrate interactive maps to aid collaboration and
discussion among NSDL pathways and partners
 Educational Standards Alignment
 Display related state and national standards within the maps
 On Ramp
 Gather content submitted by community members related to
the maps
 Cataloging Tool
 Catalog and align NSDL library resources with learning
goals using the interactive map interface
19
Topics





Educational foundations
The Strand Map user interface
Technical components
The JavaScript API
Code walkthrough
20
Technical Components of the Service
 Computational model of interconnected
concepts
 Depict how ideas change over time -> Learning
Progressions and Knowledge Maps
 Integrate curriculum components -> prior research, learning
resources, standards, misconceptions, assessments
 Visualization algorithms incorporating AAAS
graphical conventions
 Web 2.0 service API for deployment through
own portal and look-and-feel
21
SMS
Architecture
22
Information model
 Describes the relationships among
benchmarks, maps and other objects
 Contributes-to-achieving [another benchmark]
 Is-part-of [grade group or strand]
 Visualization engine generates map, grade
and strand visualizations based on these
relationships
 Individual benchmarks may exist in different
maps
23
Topics





Educational foundations
The Strand Map user interface
Technical components
The JavaScript API
Code walkthrough
24
The JavaScript API
 Lets Web developers insert interactive strand maps
into Web pages using JavaScript and place custom
content into the maps
 Four steps
1. Insert the map JavaScript library into the header of the
HTML page
2. Supply JavaScript code using the API to customize and
display content in the map
3. Define CSS styles for the page
4. Insert HTML DIV tags to include desired elements: A custom
header, the Strand Map Selector, the Interactive Strand Map
and/or a default content section
25
API Objects
StrandMap
InfoBubble
InfoBubbleTab
Class StrandMap
 Central class for the map interface
 Methods
 getInfoBubble() - Gets the Information Bubble object
 getMapJson() - Gets the record data for the current map
returned in JSON form
 setPrintViewContent(content) - Sets the content to display in
the print view portion of the map
 Events
 onload - Fired once when the StrandMap loads and is ready for
additional calls
 onbenchmarkselect - Fired each time a benchmark is selected
 onprintviewdisplay - Fired each time the print view is displayed
27
Class InfoBubble
 Central class for the Information Bubble
 Methods
 setTitle(title) - Sets the title displayed in the bubble
 setContent(content) - Sets the content displayed in the top
portion of the bubble
 addTab(infoBubbleTab) - Adds a tab in the InfoBubble
 selectTab(infoBubbleTab) - Selects the given tab (fires the
'onselect' event on the tab)
 Events
 onopen – Fired each time the InfoBubble is opened
 onclose - Fired each time the InfoBubble is closed
28
Class InfoBubbleTab
 Defines a tab that is displayed in the InfoBubble
 Constructor
 InfoBubbleTab(label) - Constructs a new InfoBubbleTab with
the given label
 Methods
 setContent(content) - Sets the content displayed in the tab
 getContent() - Gets the content currently displayed in the tab
 Events
 onselect – Fired each time the tab is selected
29
Namespace SMSEvent
 Provides the method used to register event
handlers for objects
 Method
 addListener(object, eventName, handler) - Adds a
listener and handler on the given object for the
given event
30
Strand Map Information Model
 Data for benchmarks, maps, topics and
other objects returned in JSON form
 Ease of use in JavaScript applications
31
JSON Map Data
XML Equivalent
AJAX
 “Asynchronous JavaScript and XML” –
A web technique for creating interactive
web applications
 Integrate and share disparate web
resources
 Update portions of a single web page
asynchronously
 Used primarily in the Information Bubble
to insert custom content
34
Additional APIs Included
 Prototype API – Provides methods for
AJAX programming, simplified
JavaScript syntax, event handlers, and
DOM manipulation
 Scriptaculous Effects library – A suite of
effects for visual components (fade in,
fade out, etc.)
35
Map Image Library
 Visualization images for four views




Full maps
Grade dimension
Strand dimension
Related benchmarks
 URLs used to access the images
 PDF, JPG, PNG or SVG format
 Any color, size or scale
36
Resources
 NSDL Science Literacy Maps
 http://strandmaps.nsdl.org/
 SMS JavaScript API
 http://strandmaps.nsdl.org/cms1-2/docs/index.jsp
37
Topics





Educational foundations
The Strand Map user interface
Technical components
The JavaScript API
Code walkthrough
38