Team:TU Delft/Education/science-museum

From 2010.igem.org

(Difference between revisions)
 
(88 intermediate revisions not shown)
Line 1: Line 1:
{{Team:TU_Delft/frame_check}}
{{Team:TU_Delft/frame_check}}
==Our Team in the Science Museum==
==Our Team in the Science Museum==
 +
 +
[[Image:TUDelft_Science_Centre_Delft.jpg‎|380px|right]]
 +
 +
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 museum 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.
 +
 +
'''Movie: Overview of our room in the Science Centre'''
 +
<html><center><br /><br /><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></center></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>
 +
<script type="text/javascript" src="https://2010.igem.org/Team:TU_Delft/files/query.ui.core.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.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>
 +
 +
<script type="text/javascript">
 +
 +
function play(id)
 +
    {
 +
      var html  = '';
 +
 +
      html += '3. Enjoy the movie<br />';
 +
      html += '<object width="560" height="340" >';
 +
      html += '<param name="movie" value="http://www.youtube.com/v/'+id+'"></param>';
 +
      html += '<param name="autoplay" value="1">';
 +
      html += '<param name="allowFullScreen" value="true"></param>';
 +
      html += '<param name="wmode" value="transparent"></param>';
 +
      html += '<embed src="http://www.youtube.com/v/'+id+'&autoplay=1" type="application/x-shockwave-flash" wmode="transparent" allowfullscreen="true" width="560" height="340"></embed>';
 +
      html += '</object>';
 +
 +
//      html = '3. Enjoy the movie<br />';
 +
//      html += '== UNDER CONSTRUCTION ==';
 +
 +
      return html;
 +
    };
 +
 +
function removeplate(in_the_bin)
 +
{
 +
var $gallery = $('#gallery')
 +
if(in_the_bin == "plate1") {
 +
$(".plate1").fadeOut(function() {
 +
$(".plate1").find('a.ui-icon-refresh').remove();
 +
$(".plate1").appendTo($gallery).fadeIn();
 +
});
 +
}
 +
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();
 +
});
 +
}
 +
if(in_the_bin == "plate5") {
 +
$(".plate5").fadeOut(function() {
 +
$(".plate5").find('a.ui-icon-refresh').remove();
 +
$(".plate5").appendTo($gallery).fadeIn();
 +
});
 +
} if(in_the_bin == "plate6") {
 +
$(".plate6").fadeOut(function() {
 +
$(".plate6").find('a.ui-icon-refresh').remove();
 +
$(".plate6").appendTo($gallery).fadeIn();
 +
});
 +
} if(in_the_bin == "plate7") {
 +
$(".plate7").fadeOut(function() {
 +
$(".plate7").find('a.ui-icon-refresh').remove();
 +
$(".plate7").appendTo($gallery).fadeIn();
 +
});
 +
} if(in_the_bin == "plate8") {
 +
$(".plate8").fadeOut(function() {
 +
$(".plate8").find('a.ui-icon-refresh').remove();
 +
$(".plate8").appendTo($gallery).fadeIn();
 +
});
 +
}
 +
 +
}
 +
 +
$(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") {
 +
$("#video-wrapper").html(play("4bDpHOEhw-I"));
 +
removeplate(in_the_bin);
 +
in_the_bin = "plate1";
 +
}
 +
if(plate == "Plate 2") {
 +
$("#video-wrapper").html(play("dcHM_2tS9ho"));
 +
removeplate(in_the_bin);
 +
in_the_bin = "plate2";
 +
}
 +
if(plate == "Plate 3") {
 +
$("#video-wrapper").html(play("CfX7KMhYJog"));
 +
removeplate(in_the_bin);
 +
in_the_bin = "plate3";
 +
}
 +
if(plate == "Plate 4") {
 +
$("#video-wrapper").html(play("4xzVCKYPNCM"));
 +
removeplate(in_the_bin);
 +
in_the_bin = "plate4";
 +
}
 +
if(plate == "Plate 5") {
 +
$("#video-wrapper").html(play("4xzVCKYPNCM"));
 +
removeplate(in_the_bin);
 +
in_the_bin = "plate5";
 +
}
 +
if(plate == "Plate 6") {
 +
$("#video-wrapper").html(play("4xzVCKYPNCM"));
 +
removeplate(in_the_bin);
 +
in_the_bin = "plate6";
 +
}
 +
if(plate == "Plate 7") {
 +
$("#video-wrapper").html(play("4xzVCKYPNCM"));
 +
removeplate(in_the_bin);
 +
in_the_bin = "plate7";
 +
}
 +
if(plate == "Plate 8") {
 +
$("#video-wrapper").html(play("4xzVCKYPNCM"));
 +
removeplate(in_the_bin);
 +
in_the_bin = "plate8";
 +
}
 +
});
 +
});
 +
}
 +
 +
// 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() {
 +
$("#video-wrapper").html("3. Enjoy the movie");
 +
in_the_bin = "";
 +
$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>
 +
 +
<style>
 +
.demo {
 +
border: 1px solid #ffd200;
 +
background-color: #fffae0;
 +
height: 650px;
 +
}
 +
 +
#gallery-wrapper {
 +
border: 1px solid #eeee00;
 +
background-color: #eefae0;
 +
margin: 10px;
 +
padding: 5px;
 +
width: 485px;
 +
float: left;
 +
height: 250px;
 +
}
 +
 +
#reader-wrapper {
 +
margin-right: 20px;
 +
width: 180px;
 +
float: right;
 +
height: 250px;
 +
margin-top: 15px;
 +
}
 +
 +
#reader-wrapper li {
 +
margin: 35px 0 0 35px;
 +
}
 +
 +
#illustration-wrapper {
 +
float: right;
 +
width: 150px;
 +
border: 1px solid #ffd200;
 +
height: 250px;
 +
margin: 10px;
 +
padding: 5px;
 +
text-align: center;
 +
font-weight: bold;
 +
}
 +
 +
#video-wrapper {
 +
clear: both;
 +
width: 880px;
 +
text-align: center;
 +
margin: 10px;
 +
background-color: #fff;
 +
font-weight: bold;
 +
}
 +
 +
#gallery { float: left; min-height: 12em; } * html #gallery { height: 12em; } /* IE6 */
 +
.gallery { list-style-type: none; list-style: none; margin: 0; padding:0; }
 +
.gallery li { list-style: none; 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: 0;}
 +
.gallery li a { float: right; color: #fff; font-size: 9px; display:block; margin-right:15px; }
 +
.gallery li img { margin-top:15px; }
 +
.plate_title { display: none; }
 +
 +
#trash { width: 200px; height: 200px; background-image: url('https://static.igem.org/mediawiki/2010/0/08/TU_Delft_Kast-reader.png'); margin: auto 0; padding: 0; text-align: left;}
 +
</style>
 +
 +
<div class="demo">
 +
<div id="gallery-wrapper">
 +
<strong>1. Pick a plate:</strong><br />
 +
<ul id="gallery" class="gallery">
 +
<li id="plate1">
 +
<h5 class="plate_title" style="display: none;">Plate 1</h5>
 +
<img src="https://static.igem.org/mediawiki/2010/1/19/TU_Delft_plate_1.png" alt="Plate 1" width="96" height="82" />
 +
</li>
 +
<li class="plate2">
 +
<h5 class="plate_title">Plate 2</h5>
 +
<img src="https://static.igem.org/mediawiki/2010/2/28/TU_Delft_plate_2.png" alt="Plate 2" width="96" height="82" />
 +
</li>
 +
<li class="plate3">
 +
<h5 class="plate_title">Plate 3</h5>
 +
<img src="https://static.igem.org/mediawiki/2010/a/a0/TU_Delft_plate_3.png" alt="Plate 3" width="96" height="82" />
 +
</li>
 +
<!-- <li class="plate4">
 +
<h5 class="plate_title">Plate 4</h5>
 +
<img src="images/high_tatras4_min.jpg" alt="Plate 4" width="96" height="82" />
 +
</li>
 +
<li class="plate5">
 +
<h5 class="plate_title">Plate 5</h5>
 +
<img src="images/high_tatras4_min.jpg" alt="Plate 5" width="96" height="82" />
 +
</li>
 +
<li class="plate6">
 +
<h5 class="plate_title">Plate 6</h5>
 +
<img src="images/high_tatras4_min.jpg" alt="Plate 6" width="96" height="82" />
 +
</li>
 +
<li class="plate7">
 +
<h5 class="plate_title">Plate 7</h5>
 +
<img src="images/high_tatras4_min.jpg" alt="Plate 7" width="96" height="82" />
 +
</li>
 +
<li class="plate8">
 +
<h5 class="plate_title">Plate 8</h5>
 +
<img src="images/high_tatras4_min.jpg" alt="Plate 8" width="96" height="82" />
 +
</li> /-->
 +
</ul>
 +
<div style="clear:both;"></div>
 +
</div>
 +
<div id="illustration-wrapper">
 +
</html>
 +
[[Image:TU_Delft_Science_centre_kast.jpg|150px]]
 +
<html>
 +
<span style="font-size: 9px; line-height: 12px;">Nadine shows you how it is done in the Science Centre.</span>
 +
</div>
 +
<div id="reader-wrapper">
 +
<span style="display:block;width:100%;padding:3px;text-align:center;font-weight: bold;">2. Drag it on to the reader</span>
 +
<div id="trash">
 +
</div>
 +
</div>
 +
 +
<div id="video-wrapper">
 +
3. Enjoy the movie
 +
</div>
 +
 +
<div style="clear: both;"></div>
 +
</div>
 +
</html>

Latest revision as of 21:13, 27 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 museum 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.

Movie: 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:

TU Delft Science centre kast.jpg Nadine shows you how it is done in the Science Centre.
2. Drag it on to the reader
3. Enjoy the movie

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