Team:TU Delft/Education/science-museum

From 2010.igem.org

(Difference between revisions)
(→Our Team in the Science Museum)
(→Our Team in the Science Museum)
Line 10: Line 10:
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.
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'''
<html><object width="640" height="385"><param name="movie" value="http://www.youtube.com/v/9gV4LVjfYcs?fs=1&amp;hl=en_US"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/9gV4LVjfYcs?fs=1&amp;hl=en_US" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="640" height="385"></embed></object></html>
<html><object width="640" height="385"><param name="movie" value="http://www.youtube.com/v/9gV4LVjfYcs?fs=1&amp;hl=en_US"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/9gV4LVjfYcs?fs=1&amp;hl=en_US" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="640" height="385"></embed></object></html>
 +
 +
===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'''
 +
 +
<html>
 +
{{:Team:TU_Delft/files/query.ui.core.js}}
 +
<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.mouse.js?action=raw&ctype=text/javascript"></script>
 +
<script type="text/javascript" src="https://2010.igem.org/Team:TU_Delft/files/jquery.ui.draggable.js?action=raw&ctype=text/javascript"></script>
 +
<script type="text/javascript" src="https://2010.igem.org/Team:TU_Delft/files/jquery.ui.droppable.js?action=raw&ctype=text/javascript"></script>
 +
<script type="text/javascript" src="https://2010.igem.org/Team:TU_Delft/files/jquery.ui.resizable.js?action=raw&ctype=text/javascript"></script>
 +
<script type="text/javascript" src="https://2010.igem.org/Team:TU_Delft/files/jquery.ui.dialog.js?action=raw&ctype=text/javascript"></script>
 +
 +
<style type="text/css">
 +
#gallery { float: left; width: 65%; min-height: 12em; } * html #gallery { height: 12em; } /* IE6 */
 +
.gallery { list-style-type: none; }
 +
.gallery li { cursor: move; float: left; width: 120px; height: 120px; text-align: center; background-image: url('https://static.igem.org/mediawiki/2010/7/7c/TU_Delft_Kast-plate.png'); padding: 0; margin-top: 24px; }
 +
.gallery li a { float: right; }
 +
.plate_title { display: none; }
 +
 +
#trash { float: right; width: 200px; height: 200px; background-image: url('https://static.igem.org/mediawiki/2010/0/08/TU_Delft_Kast-reader.png'); margin: 0; padding: 0; text-align: left;}
 +
</style>
 +
<script type="text/javascript">
 +
$(function() {
 +
// there's the gallery and the trash
 +
var $gallery = $('#gallery'), $trash = $('#trash');
 +
 +
// let the gallery items be draggable
 +
$('li',$gallery).draggable({
 +
cancel: 'a.ui-icon',// clicking an icon won't initiate dragging
 +
revert: 'invalid', // when not dropped, the item will revert back to its initial position
 +
containment: $('#demo-frame').length ? '#demo-frame' : 'document', // stick to demo-frame if present
 +
helper: 'clone',
 +
cursor: 'move'
 +
});
 +
 +
// let the trash be droppable, accepting the gallery items
 +
$trash.droppable({
 +
accept: '#gallery > li',
 +
activeClass: 'ui-state-highlight',
 +
drop: function(ev, ui) {
 +
deleteImage(ui.draggable);
 +
}
 +
});
 +
 +
// let the gallery be droppable as well, accepting items from the trash
 +
$gallery.droppable({
 +
accept: '#trash li',
 +
activeClass: 'custom-state-active',
 +
drop: function(ev, ui) {
 +
recycleImage(ui.draggable);
 +
}
 +
});
 +
 +
// image deletion function
 +
var recycle_icon = '<a href="link/to/recycle/script/when/we/have/js/off" title="Recycle this image" class="ui-icon ui-icon-refresh">Remove</a>';
 +
var in_the_bin = "";
 +
function deleteImage($item) {
 +
$item.fadeOut(function() {
 +
var $list = $('ul',$trash).length ? $('ul',$trash) : $('<ul class="gallery ui-helper-reset"/>').appendTo($trash);
 +
 +
$item.find('a.ui-icon-trash').remove();
 +
$item.append(recycle_icon).appendTo($list).fadeIn(function() {
 +
//$item.animate({ width: '48px' }).find('img').animate({ height: '36px' });
 +
var plate = $item.find('h5.plate_title').html();
 +
if(plate == "Plate 1") {
 +
$("#movie1").css("display","block");
 +
$("#movie2").css("display","none");
 +
$("#movie3").css("display","none");
 +
$("#movie4").css("display","none");
 +
if(in_the_bin == "plate2") {
 +
$(".plate2").fadeOut(function() {
 +
$(".plate2").find('a.ui-icon-refresh').remove();
 +
$(".plate2").appendTo($gallery).fadeIn();
 +
});
 +
}
 +
if(in_the_bin == "plate3") {
 +
$(".plate3").fadeOut(function() {
 +
$(".plate3").find('a.ui-icon-refresh').remove();
 +
$(".plate3").appendTo($gallery).fadeIn();
 +
});
 +
}
 +
if(in_the_bin == "plate4") {
 +
$(".plate4").fadeOut(function() {
 +
$(".plate4").find('a.ui-icon-refresh').remove();
 +
$(".plate4").appendTo($gallery).fadeIn();
 +
});
 +
}
 +
in_the_bin = "plate1";
 +
 +
}
 +
if(plate == "Plate 2") {
 +
$("#movie2").css("display","block");
 +
$("#movie1").css("display","none");
 +
$("#movie3").css("display","none");
 +
$("#movie4").css("display","none");
 +
if(in_the_bin == "plate1") {
 +
$(".plate1").fadeOut(function() {
 +
$(".plate1").find('a.ui-icon-refresh').remove();
 +
$(".plate1").appendTo($gallery).fadeIn();
 +
});
 +
}
 +
if(in_the_bin == "plate3") {
 +
$(".plate3").fadeOut(function() {
 +
$(".plate3").find('a.ui-icon-refresh').remove();
 +
$(".plate3").appendTo($gallery).fadeIn();
 +
});
 +
}
 +
if(in_the_bin == "plate4") {
 +
$(".plate4").fadeOut(function() {
 +
$(".plate4").find('a.ui-icon-refresh').remove();
 +
$(".plate4").appendTo($gallery).fadeIn();
 +
});
 +
}
 +
in_the_bin = "plate2";
 +
}
 +
if(plate == "Plate 3") {
 +
$("#movie3").css("display","block");
 +
$("#movie2").css("display","none");
 +
$("#movie1").css("display","none");
 +
$("#movie4").css("display","none");
 +
if(in_the_bin == "plate2") {
 +
$(".plate2").fadeOut(function() {
 +
$(".plate2").find('a.ui-icon-refresh').remove();
 +
$(".plate2").appendTo($gallery).fadeIn();
 +
});
 +
}
 +
if(in_the_bin == "plate1") {
 +
$(".plate3").fadeOut(function() {
 +
$(".plate1").find('a.ui-icon-refresh').remove();
 +
$(".plate1").appendTo($gallery).fadeIn();
 +
});
 +
}
 +
if(in_the_bin == "plate4") {
 +
$(".plate4").fadeOut(function() {
 +
$(".plate4").find('a.ui-icon-refresh').remove();
 +
$(".plate4").appendTo($gallery).fadeIn();
 +
//$(".plate4").css('width','96px').append(trash_icon).find('img').css('height','72px').end().appendTo($gallery).fadeIn();
 +
});
 +
}
 +
in_the_bin = "plate3";
 +
}
 +
if(plate == "Plate 4") {
 +
$("#movie4").css("display","block");
 +
$("#movie2").css("display","none");
 +
$("#movie3").css("display","none");
 +
$("#movie1").css("display","none");
 +
if(in_the_bin == "plate2") {
 +
$(".plate2").fadeOut(function() {
 +
$(".plate2").find('a.ui-icon-refresh').remove();
 +
$(".plate2").appendTo($gallery).fadeIn();
 +
});
 +
}
 +
if(in_the_bin == "plate3") {
 +
$(".plate3").fadeOut(function() {
 +
$(".plate3").find('a.ui-icon-refresh').remove();
 +
$(".plate3").appendTo($gallery).fadeIn();
 +
});
 +
}
 +
if(in_the_bin == "plate1") {
 +
$(".plate1").fadeOut(function() {
 +
$(".plate1").find('a.ui-icon-refresh').remove();
 +
$(".plate1").appendTo($gallery).fadeIn();
 +
});
 +
}
 +
in_the_bin = "plate4";
 +
}
 +
});
 +
});
 +
}
 +
 +
// image recycle function
 +
var trash_icon = '<a href="link/to/trash/script/when/we/have/js/off" title="Activate" class="ui-icon ui-icon-trash">Activate</a>';
 +
function recycleImage($item) {
 +
$item.fadeOut(function() {
 +
var plate = $item.find('h5.plate_title').html();
 +
if(plate == "Plate 1") {
 +
$("#movie1").css("display","none");
 +
}
 +
if(plate == "Plate 2") {
 +
$("#movie2").css("display","none");
 +
}
 +
if(plate == "Plate 3") {
 +
$("#movie3").css("display","none");
 +
}
 +
if(plate == "Plate 4") {
 +
$("#movie4").css("display","none");
 +
}
 +
$item.find('a.ui-icon-refresh').remove();
 +
$item.appendTo($gallery).fadeIn();
 +
});
 +
}
 +
 +
// resolve the icons behavior with event delegation
 +
$('ul.gallery > li').click(function(ev) {
 +
var $item = $(this);
 +
var $target = $(ev.target);
 +
 +
if ($target.is('a.ui-icon-trash')) {
 +
deleteImage($item);
 +
} else if ($target.is('a.ui-icon-zoomin')) {
 +
viewLargerImage($target);
 +
} else if ($target.is('a.ui-icon-refresh')) {
 +
recycleImage($item);
 +
}
 +
 +
return false;
 +
});
 +
});
 +
</script>
 +
 +
<div class="demo">
 +
 +
<ul id="gallery" class="gallery">
 +
<li id="plate1">
 +
<h5 class="plate_title" style="display: none;">Plate 1</h5>
 +
<img src="images/high_tatras_min.jpg" alt="Plate 1" width="96" height="72" />
 +
 +
</li>
 +
<li class="plate2">
 +
<h5 class="plate_title">Plate 2</h5>
 +
<img src="images/high_tatras2_min.jpg" alt="Plate 2" width="96" height="72" />
 +
</li>
 +
<li class="plate3">
 +
<h5 class="plate_title">Plate 3</h5>
 +
<img src="images/high_tatras3_min.jpg" alt="Plate 3" width="96" height="72" />
 +
</li>
 +
<li class="plate4">
 +
<h5 class="plate_title">Plate 4</h5>
 +
<img src="images/high_tatras4_min.jpg" alt="Plate 4" width="96" height="72" />
 +
</li>
 +
</ul>
 +
 +
<div id="trash">
 +
</div>
 +
 +
<div style="display:none;" id="movie1">
 +
<object width="560" height="340"><param name="movie" value="http://www.youtube.com/v/9gV4LVjfYcs?fs=1&amp;hl=en_US"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/9gV4LVjfYcs?fs=1&amp;hl=en_US" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="560" height="340"></embed></object>
 +
</div>
 +
 +
<div style="display:none;" id="movie2">
 +
<object width="560" height="340"><param name="movie" value="http://www.youtube.com/v/Xl26Z3RWZAo?fs=1&amp;hl=en_US"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/Xl26Z3RWZAo?fs=1&amp;hl=en_US" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="560" height="340"></embed></object>
 +
</div>
 +
 +
<div style="display:none;" id="movie3">
 +
<object width="560" height="340"><param name="movie" value="http://www.youtube.com/v/M1B-zBiQ-gE?fs=1&amp;hl=en_US"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/M1B-zBiQ-gE?fs=1&amp;hl=en_US" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="560" height="340"></embed></object>
 +
</div>
 +
 +
<div style="display:none;" id="movie4">
 +
<object width="425" height="344"><param name="movie" value="http://www.youtube.com/v/4xzVCKYPNCM?fs=1&amp;hl=en_US"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/4xzVCKYPNCM?fs=1&amp;hl=en_US" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="425" height="344"></embed></object>
 +
</div>
 +
 +
</div>
 +
</html>

Revision as of 10:25, 15 October 2010

Our Team in the Science Museum

TUDelft Science Centre Delft.jpg


The 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

{{:Team:TU_Delft/files/query.ui.core.js}}

Retrieved from "http://2010.igem.org/Team:TU_Delft/Education/science-museum"