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 # , and others.

2 Topics  Educational foundations  The Strand Map user interface  Technical components  The JavaScript API  Code walkthrough

3 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

4 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

5 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

6 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

7 Topics  Educational foundations  The Strand Map user interface  Technical components  The JavaScript API  Code walkthrough

8 SMS Interface  Placing the Atlas on-line

9 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

Strand Selector Choose topics Select maps

Interactive Map Browser and Information Bubble Benchmark details NSES standards NSDL resources Map navigator Related benchmarks

Print View Map image Benchmark details NSES standards NSDL resources Related benchmarks (not shown here)

Grades and Strand Dimensions Strand Dimension Grade Dimension

14 Demonstration 

15 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

Multimedia Content

Interactive Content

18 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

19 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

20 Topics  Educational foundations  The Strand Map user interface  Technical components  The JavaScript API  Code walkthrough

21 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

22 SMS Architecture

23 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

24 Topics  Educational foundations  The Strand Map user interface  Technical components  The JavaScript API  Code walkthrough

25 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

InfoBubbleTab InfoBubble StrandMap API Objects

27 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

28 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

29 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

30 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

31 Strand Map Information Model  Data for benchmarks, maps, topics and other objects returned in JSON form  Ease of use in JavaScript applications

JSON Map Data

XML Equivalent

34 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

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

36 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

37 Resources  NSDL Science Literacy Maps   SMS JavaScript API 

38 Topics  Educational foundations  The Strand Map user interface  Technical components  The JavaScript API  Code walkthrough