the SMILE widget
Table of Contents
What is the SMILE widget?
The SMILE widget is a piece of JavaScript code that can be put on a web page to display resources from the SMILE NSDL Pathway. It is designed to work on any web page whether it is on a SMILE website or not. It can be configured to limit the resources it displays based on several different criteria.Including the SMILE widget on a page
To add the widget to the page, include the smileWidget.js javascript file,
the Animator.js javascript file (for the sliding record info display functionality),
and the smileWidget.css stylesheet. Note that use of the animator script file is
optional--the record info display will still function, it'll just appear and disappear
without the sliding animation feature.
<script src="path/to/smileWidget.js" type="text/javascript"></script>
<script src="path/to/animator.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="path/to/smileWidget.css"/>
Also provided are minified versions of the Javscript and CSS files in order to reduce download time to your users. Those files are named "smileWidget-min.js", "animator-min.js", and "smileWidget-min.css".
You may use the JavaScript and CSS files hosted on howtosmile.org (If you choose to
do so, please use the minified versions). They are located under howtosmile.org/widget/.
If you're using the minified files hosted on howtosmile.org, the
includes on your page should look like the following:
<script src="http://howtosmile.org/widget/1.0/js/smileWidget-min.js" type="text/javascript"></script>
Where 1.0 is the version number of the SMILE widget you want to use. If you want to stay
up-to-date with the widget leave the version number out of the path but beware that version
changes may cause compatibility problems with some features.
<script src="http://howtosmile.org/widget/js/animator-min.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="http://howtosmile.org/widget/1.0/css/smileWidget-min.css"/>
Initializing the widget on the page
The function initWidget() is used to place the widget on the HTML page. There are two ways to indicate where on the page to place the widget: Specifying an element on the html page whose content will be replaced by the widget, or placing an inline script block at the location where the widget should go.-
Specifying a container element
The first parameter to initWidget() specifies a DOM element whose content (innerHTML property) will be replaced by the widget HTML:<script type="text/javascript">
smileWidget.initWidget( document.getElementById('widgetIsInHere' ) );
</script> -
Add an inline javascript block
When initializing the widget in an inline javascript block, pass null as the containerElem parameter:<script type="text/javascript">
smileWidget.initWidget( null );
</script>
Specifying initial search parameters
Pre-defined search parameters can be specified by passing an object to to the initWidget() function (see Search Parameters below for a list of parameters. Adding to the example above, this example will initialize the widget to search for records that are from the source institution "The Exploratorium" and to show 8 results at a time.
<script type="text/javascript">
smileWidget.initWidget(
document.getElementById('widgetIsInHere'),
{ 'institution':['The Exploratorium'],
perpage:8
}
);
</script>
Widget configuration
Optional configuration parameters can be specified when initializing the widget. The initWidget function can take a JavaScript object literal as the 3rd argument.
See the API documentation for a complete list of configurable options.
This example will
initialize the widget with an optional parameter specifying
HTML content to display a form for a text search of SMILE in
the event that a search returns no results.
<script type="text/javascript">
smileWidget.initWidget(
document.getElementById('widgetIsInHere'),
{ 'institution':['The Exploratorium'],
perpage:8
}
{
noResultsHTML: 'The SMILE Pathway database has no free resources '
+'associated with this resource. '
+'Search SMILE for other resources:<br/>'
+'<form action="http://howtosmile.org/resourcesearch" target="_blank">'
+'<input type="text" name="ddssearch_q"/>'
+'<input type="hidden" name="verb" value="Search"/>'
+'<input type="submit" value="go">'
+'</form>'
}
);
</script>
Search Parameters
The following parameters can be passed to the widget to define a search:- perpage
- Integer specifying how many records to show at a time on the
results list.
(Default: 10) - term
- String Lucene search term of all text in the metadata record.
- age
- String[] narrows the search to return only records
that are appropriate for students of the specified age range(s).
See Searching by age range for more information - collection
- String[] narrows the search to return only records with source
collection(s) in the indicated array. Similar to, but not to be confused with institution.
New since v1.1 to accomodate changes to the SMILE metadata schema - grantnumber
- String[] when specified, narrows the search to return only records with a grant number matching one of the elements in the indicated array.
- fundingsource
- String[] when specified, narrows the search to return only records with a funding source matching one of the elements in the indicated array.
- hasassessments
- Boolean when true narrows the search to return only records that include student assessments.
- hasstandards
- Boolean when true narrows the search to return only records that include standards alignment information.
- institution
- String[] narrows the search to return only records with source institution(s) in the indicated array.
- keyword
- String[] narrows the search to return records having any of the keywords specified in the indicated array.
- language
- String[] narrows the search to return only records whose resource lanuage(s) is in the indicated array.
- learningtime
- String[] narrows the search to return only records for resources that take the specified amount of time to do with a student/class. See Searching by learning time for more information.
- license
- String[] narrows the search to return only records for resources that are licensed under the specified license(s). See Searching by license for more information.
- materialcost
- String[] narrows the search to return only records for resources that whose materials costs fit the ranges specified. See Searching by materials cost for more information.
- subject
- String[] narrows the search to return only records that match the subject(s) listed in the indicated array. See Searching by subject for more information on searching by subject.
- type
- String[] narrows the search to return only records of the given resource type(s). See Searching by resource type for more information on searching by resource type.
- moreInfo
- Array[] narrows the search based on custom metadata. If you don't already know what the moreInfo field in the SMILE metadata schema is for, you probably don't need this. See Searching with moreInfo for more info about moreInfo.
Example Implementations
In addition to the example implementations on the individual documentation pages for the Search Parameters. Here are some more samples:Editing widget styles
The file "css/smileWidget.css" contains the styles for the widget contents. See comments in the stylesheet for guidance making modifications.Who made this?
The SMILE widget is produced for the SMILE Pathway by ScienceVIEW at the Lawrence Hall of Science in Berkeley, CA.Contact email
If you have questions about the implementation of this software, contact Dan Bluestein (dblue@berkeley.edu) with your questions, feature requests, etc.Included 3rd party software
This software uses the following 3rd party software:- Sliding animation functionality implemented via Animator.js ©2006, Bernard Sumption. Released under the BSD software license.