Team:TU Delft/Education/science-museum
From 2010.igem.org
(→Educational Movies) |
(→Educational Movies) |
||
Line 18: | Line 18: | ||
'''Just like in the museum, you have to activate the movies by dragging the plate to the plate reader''' | '''Just like in the museum, you have to activate the movies by dragging the plate to the plate reader''' | ||
+ | {{:Team:TU_Delft/files/query.ui.core.js}} | ||
<html> | <html> | ||
- | + | ||
<script type="text/javascript" src="https://2010.igem.org/Team:TU_Delft/files/jquery.ui.position.js?action=raw&ctype=text/javascript"></script> | <script type="text/javascript" src="https://2010.igem.org/Team:TU_Delft/files/jquery.ui.position.js?action=raw&ctype=text/javascript"></script> | ||
<script type="text/javascript" src="https://2010.igem.org/Team:TU_Delft/files/jquery.ui.widget.js?action=raw&ctype=text/javascript"></script> | <script type="text/javascript" src="https://2010.igem.org/Team:TU_Delft/files/jquery.ui.widget.js?action=raw&ctype=text/javascript"></script> |
Revision as of 10:26, 15 October 2010
Our Team in the Science Museum
The [http://www.tudelft.nl/live/pagina.jsp?id=8c26ef08-cead-481f-b86b-9e147c4ff3ab&lang=nl Delft Science Centre] opened its doors to the public on September 2nd 2010. The brand new Science Centre provides a fascinating peek behind the scenes at the TU Delft. It is a place where science and society meet: visitors will get to experience hands on the research that's being done the the TU Delft as we speak by interactive and especially informative set-ups and rooms.
The Biotechnology Room
One of the exhibitions in the Science Centre is the Biotechnology room, created in collaboration with the TU Delft iGEM team (us!). Upon entering the visitor is overwhelmed by a wall full of colorful microorganisms, a sneak peak into the amazing microscopic world. As soon as you find out how to use the photo plates in the flow cabinet, the screens in the cabinet show informative movies about several important microorganisms. Watch them here and see how we contributed.
Overview of our room in the Science Centre
Educational Movies
In cooperation with the Science Centre we made several movies about fundamental principles of biotechnology. The audience aimed for are high school students.
Just like in the museum, you have to activate the movies by dragging the plate to the plate reader
/*!
* jQuery UI 1.8.4 * * Copyright 2010, AUTHORS.txt (http://jqueryui.com/about) * Dual licensed under the MIT or GPL Version 2 licenses. * http://jquery.org/license * * http://docs.jquery.com/UI */
(function( $, undefined ) {
// prevent duplicate loading // this is only a problem because we proxy existing functions // and we don't want to double proxy them $.ui = $.ui || {}; if ( $.ui.version ) { return; }
//Helper functions and ui object $.extend( $.ui, { version: "1.8.4",
// $.ui.plugin is deprecated. Use the proxy pattern instead. plugin: { add: function( module, option, set ) { var proto = $.ui[ module ].prototype; for ( var i in set ) { proto.plugins[ i ] = proto.plugins[ i ] || []; proto.plugins[ i ].push( [ option, set[ i ] ] ); } }, call: function( instance, name, args ) { var set = instance.plugins[ name ]; if ( !set || !instance.element[ 0 ].parentNode ) { return; }
for ( var i = 0; i < set.length; i++ ) { if ( instance.options[ set[ i ][ 0 ] ] ) { set[ i ][ 1 ].apply( instance.element, args ); } } } },
contains: function( a, b ) { return document.compareDocumentPosition ? a.compareDocumentPosition( b ) & 16 : a !== b && a.contains( b ); },
hasScroll: function( el, a ) {
//If overflow is hidden, the element might have extra content, but the user wants to hide it if ( $( el ).css( "overflow" ) === "hidden") { return false; }
var scroll = ( a && a === "left" ) ? "scrollLeft" : "scrollTop", has = false;
if ( el[ scroll ] > 0 ) { return true; }
// TODO: determine which cases actually cause this to happen // if the element doesn't have the scroll set, see if it's possible to // set the scroll el[ scroll ] = 1; has = ( el[ scroll ] > 0 ); el[ scroll ] = 0; return has; },
isOverAxis: function( x, reference, size ) { //Determines when x coordinate is over "b" element axis return ( x > reference ) && ( x < ( reference + size ) ); },
isOver: function( y, x, top, left, height, width ) { //Determines when x, y coordinates is over "b" element return $.ui.isOverAxis( y, top, height ) && $.ui.isOverAxis( x, left, width ); },
keyCode: { ALT: 18, BACKSPACE: 8, CAPS_LOCK: 20, COMMA: 188, COMMAND: 91, COMMAND_LEFT: 91, // COMMAND COMMAND_RIGHT: 93, CONTROL: 17, DELETE: 46, DOWN: 40, END: 35, ENTER: 13, ESCAPE: 27, HOME: 36, INSERT: 45, LEFT: 37, MENU: 93, // COMMAND_RIGHT NUMPAD_ADD: 107, NUMPAD_DECIMAL: 110, NUMPAD_DIVIDE: 111, NUMPAD_ENTER: 108, NUMPAD_MULTIPLY: 106, NUMPAD_SUBTRACT: 109, PAGE_DOWN: 34, PAGE_UP: 33, PERIOD: 190, RIGHT: 39, SHIFT: 16, SPACE: 32, TAB: 9, UP: 38, WINDOWS: 91 // COMMAND } });
//jQuery plugins $.fn.extend({ _focus: $.fn.focus, focus: function( delay, fn ) { return typeof delay === "number" ? this.each(function() { var elem = this; setTimeout(function() { $( elem ).focus(); if ( fn ) { fn.call( elem ); } }, delay ); }) : this._focus.apply( this, arguments ); },
enableSelection: function() { return this .attr( "unselectable", "off" ) .css( "MozUserSelect", "" ); },
disableSelection: function() { return this .attr( "unselectable", "on" ) .css( "MozUserSelect", "none" ); },
scrollParent: function() { var scrollParent; if (($.browser.msie && (/(static|relative)/).test(this.css('position'))) || (/absolute/).test(this.css('position'))) { scrollParent = this.parents().filter(function() { return (/(relative|absolute|fixed)/).test($.curCSS(this,'position',1)) && (/(auto|scroll)/).test($.curCSS(this,'overflow',1)+$.curCSS(this,'overflow-y',1)+$.curCSS(this,'overflow-x',1)); }).eq(0); } else { scrollParent = this.parents().filter(function() { return (/(auto|scroll)/).test($.curCSS(this,'overflow',1)+$.curCSS(this,'overflow-y',1)+$.curCSS(this,'overflow-x',1)); }).eq(0); }
return (/fixed/).test(this.css('position')) || !scrollParent.length ? $(document) : scrollParent; },
zIndex: function( zIndex ) { if ( zIndex !== undefined ) { return this.css( "zIndex", zIndex ); }
if ( this.length ) { var elem = $( this[ 0 ] ), position, value; while ( elem.length && elem[ 0 ] !== document ) { // Ignore z-index if position is set to a value where z-index is ignored by the browser // This makes behavior of this function consistent across browsers // WebKit always returns auto if the element is positioned position = elem.css( "position" ); if ( position === "absolute" || position === "relative" || position === "fixed" ) { // IE returns 0 when zIndex is not specified // other browsers return a string // we ignore the case of nested elements with an explicit value of 0
//value = parseInt( elem.css( "zIndex" ) ); if ( !isNaN( value ) && value != 0 ) { return value; } } elem = elem.parent(); } }
return 0; } });
$.each( [ "Width", "Height" ], function( i, name ) { var side = name === "Width" ? [ "Left", "Right" ] : [ "Top", "Bottom" ], type = name.toLowerCase(), orig = { innerWidth: $.fn.innerWidth, innerHeight: $.fn.innerHeight, outerWidth: $.fn.outerWidth, outerHeight: $.fn.outerHeight };
function reduce( elem, size, border, margin ) { $.each( side, function() { size -= parseFloat( $.curCSS( elem, "padding" + this, true) ) || 0; if ( border ) { size -= parseFloat( $.curCSS( elem, "border" + this + "Width", true) ) || 0; } if ( margin ) { size -= parseFloat( $.curCSS( elem, "margin" + this, true) ) || 0; } }); return size; }
$.fn[ "inner" + name ] = function( size ) { if ( size === undefined ) { return orig[ "inner" + name ].call( this ); }
return this.each(function() { $.style( this, type, reduce( this, size ) + "px" ); }); };
$.fn[ "outer" + name] = function( size, margin ) { if ( typeof size !== "number" ) { return orig[ "outer" + name ].call( this, size ); }
return this.each(function() { $.style( this, type, reduce( this, size, true, margin ) + "px" ); }); }; });
//Additional selectors function visible( element ) { return !$( element ).parents().andSelf().filter(function() { return $.curCSS( this, "visibility" ) === "hidden" || $.expr.filters.hidden( this ); }).length; }
$.extend( $.expr[ ":" ], { data: function( elem, i, match ) { return !!$.data( elem, match[ 3 ] ); },
focusable: function( element ) { var nodeName = element.nodeName.toLowerCase(), tabIndex = $.attr( element, "tabindex" ); if ( "area" === nodeName ) { var map = element.parentNode, mapName = map.name, img; if ( !element.href || !mapName || map.nodeName.toLowerCase() !== "map" ) { return false; } img = $( "img[usemap=#" + mapName + "]" )[0]; return !!img && visible( img ); } return ( /input|select|textarea|button|object/.test( nodeName ) ? !element.disabled : "a" == nodeName ? element.href || !isNaN( tabIndex ) : !isNaN( tabIndex )) // the element and all of its ancestors must be visible && visible( element ); },
tabbable: function( element ) { var tabIndex = $.attr( element, "tabindex" ); return ( isNaN( tabIndex ) || tabIndex >= 0 ) && $( element ).is( ":focusable" ); } });
})( jQuery );
-
Plate 1
-
Plate 2
-
Plate 3
-
Plate 4