Team:TU Delft/Education/science-museum

From 2010.igem.org

(Difference between revisions)
(→Educational Movies)
 
(72 intermediate revisions not shown)
Line 2: Line 2:
==Our Team in the Science Museum==
==Our Team in the Science Museum==
-
[[Image:TUDelft_Science_Centre_Delft.jpg‎|right]]
+
[[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 [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===
===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.
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'''
+
'''Movie: Overview of our room in the Science Centre'''
-
<html><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></html>
+
<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===
===Educational Movies===
Line 28: Line 28:
<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" 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">
<script type="text/javascript">
Line 43: Line 34:
       var html  = '';
       var html  = '';
 +
      html += '3. Enjoy the movie<br />';
       html += '<object width="560" height="340" >';
       html += '<object width="560" height="340" >';
       html += '<param name="movie" value="http://www.youtube.com/v/'+id+'"></param>';
       html += '<param name="movie" value="http://www.youtube.com/v/'+id+'"></param>';
Line 50: Line 42:
       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 += '<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 += '</object>';
 +
 +
//      html = '3. Enjoy the movie<br />';
 +
//      html += '== UNDER CONSTRUCTION ==';
       return html;
       return html;
Line 56: Line 51:
function removeplate(in_the_bin)  
function removeplate(in_the_bin)  
{
{
-
alert(in_the_bin);
+
var $gallery = $('#gallery')
-
var divclass = "";
+
if(in_the_bin == "plate1") {
-
if(in_the_bin == "plate1") { divclass = ".plate1"; }
+
$(".plate1").fadeOut(function() {
-
if(in_the_bin == "plate2") { divclass = ".plate2"; }
+
$(".plate1").find('a.ui-icon-refresh').remove();
-
if(in_the_bin == "plate3") { divclass = ".plate3"; }
+
$(".plate1").appendTo($gallery).fadeIn();
-
if(in_the_bin == "plate4") { divclass = ".plate4"; }
+
});
 +
}
 +
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();
 +
});
 +
}
-
$(divclass).fadeOut(function() {
 
-
$(divclass).find('a.ui-icon-refresh').remove();
 
-
$(divclass).appendTo('#gallery').fadeIn();
 
-
});
 
}
}
Line 112: Line 143:
var plate = $item.find('h5.plate_title').html();
var plate = $item.find('h5.plate_title').html();
if(plate == "Plate 1") {
if(plate == "Plate 1") {
-
$("#video-wrapper").html(play("9gV4LVjfYcs"));
+
$("#video-wrapper").html(play("4bDpHOEhw-I"));
removeplate(in_the_bin);
removeplate(in_the_bin);
in_the_bin = "plate1";
in_the_bin = "plate1";
}
}
if(plate == "Plate 2") {
if(plate == "Plate 2") {
-
$("#video-wrapper").html(play("Xl26Z3RWZAo"));
+
$("#video-wrapper").html(play("dcHM_2tS9ho"));
removeplate(in_the_bin);
removeplate(in_the_bin);
in_the_bin = "plate2";
in_the_bin = "plate2";
}
}
if(plate == "Plate 3") {
if(plate == "Plate 3") {
-
$("#video-wrapper").html(play("M1B-zBiQ-gE"));
+
$("#video-wrapper").html(play("CfX7KMhYJog"));
removeplate(in_the_bin);
removeplate(in_the_bin);
in_the_bin = "plate3";
in_the_bin = "plate3";
Line 130: Line 161:
removeplate(in_the_bin);
removeplate(in_the_bin);
in_the_bin = "plate4";
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";
}
}
});
});
Line 139: Line 190:
function recycleImage($item) {
function recycleImage($item) {
$item.fadeOut(function() {
$item.fadeOut(function() {
-
var plate = $item.find('h5.plate_title').html();
+
$("#video-wrapper").html("3. Enjoy the movie");
-
$("#video-wrapper").html("");
+
in_the_bin = "";
-
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.find('a.ui-icon-refresh').remove();
$item.appendTo($gallery).fadeIn();
$item.appendTo($gallery).fadeIn();
Line 180: Line 219:
border: 1px solid #ffd200;
border: 1px solid #ffd200;
background-color: #fffae0;
background-color: #fffae0;
-
height: 500px;
+
height: 650px;
}
}
-
</style>
 
-
<div class="demo">
+
#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">
<ul id="gallery" class="gallery">
<li id="plate1">
<li id="plate1">
<h5 class="plate_title" style="display: none;">Plate 1</h5>
<h5 class="plate_title" style="display: none;">Plate 1</h5>
-
<img src="images/high_tatras_min.jpg" alt="Plate 1" width="96" height="72" />
+
<img src="https://static.igem.org/mediawiki/2010/1/19/TU_Delft_plate_1.png" alt="Plate 1" width="96" height="82" />
-
+
</li>
</li>
<li class="plate2">
<li class="plate2">
<h5 class="plate_title">Plate 2</h5>
<h5 class="plate_title">Plate 2</h5>
-
<img src="images/high_tatras2_min.jpg" alt="Plate 2" width="96" height="72" />
+
<img src="https://static.igem.org/mediawiki/2010/2/28/TU_Delft_plate_2.png" alt="Plate 2" width="96" height="82" />
</li>
</li>
<li class="plate3">
<li class="plate3">
<h5 class="plate_title">Plate 3</h5>
<h5 class="plate_title">Plate 3</h5>
-
<img src="images/high_tatras3_min.jpg" alt="Plate 3" width="96" height="72" />
+
<img src="https://static.igem.org/mediawiki/2010/a/a0/TU_Delft_plate_3.png" alt="Plate 3" width="96" height="82" />
</li>
</li>
-
<li class="plate4">
+
<!-- <li class="plate4">
<h5 class="plate_title">Plate 4</h5>
<h5 class="plate_title">Plate 4</h5>
-
<img src="images/high_tatras4_min.jpg" alt="Plate 4" width="96" height="72" />
+
<img src="images/high_tatras4_min.jpg" alt="Plate 4" width="96" height="82" />
</li>
</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>
</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 id="trash">
</div>
</div>
 +
</div>
<div id="video-wrapper">
<div id="video-wrapper">
 +
3. Enjoy the movie
</div>
</div>

Latest revision as of 21:13, 27 October 2010

Our Team in the Science Museum

TUDelft Science Centre Delft.jpg

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




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"