Team:TU Delft/Education/science-museum

From 2010.igem.org

(Difference between revisions)
 
(77 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">
+
<script type="text/javascript">
-
#gallery { float: left; width: 65%; min-height: 12em; } * html #gallery { height: 12em; } /* IE6 */
+
 
-
.gallery { list-style-type: none; }
+
function play(id)
-
.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; }
+
      var html  = '';
-
.plate_title { display: none; }
+
 
 +
      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();
 +
});
 +
}
 +
 
 +
}
-
#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() {
$(function() {
// there's the gallery and the trash
// there's the gallery and the trash
Line 81: 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") {
-
$("#movie1").css("display","block");
+
$("#video-wrapper").html(play("4bDpHOEhw-I"));
-
$("#movie2").css("display","none");
+
removeplate(in_the_bin);
-
$("#movie3").css("display","none");
+
in_the_bin = "plate1";
-
$("#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") {
if(plate == "Plate 2") {
-
$("#movie2").css("display","block");
+
$("#video-wrapper").html(play("dcHM_2tS9ho"));
-
$("#movie1").css("display","none");
+
removeplate(in_the_bin);
-
$("#movie3").css("display","none");
+
in_the_bin = "plate2";
-
$("#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") {
if(plate == "Plate 3") {
-
$("#movie3").css("display","block");
+
$("#video-wrapper").html(play("CfX7KMhYJog"));
-
$("#movie2").css("display","none");
+
removeplate(in_the_bin);
-
$("#movie1").css("display","none");
+
in_the_bin = "plate3";
-
$("#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") {
if(plate == "Plate 4") {
-
$("#movie4").css("display","block");
+
$("#video-wrapper").html(play("4xzVCKYPNCM"));
-
$("#movie2").css("display","none");
+
removeplate(in_the_bin);
-
$("#movie3").css("display","none");
+
in_the_bin = "plate4";
-
$("#movie1").css("display","none");
+
}
-
if(in_the_bin == "plate2") {
+
if(plate == "Plate 5") {
-
$(".plate2").fadeOut(function() {
+
$("#video-wrapper").html(play("4xzVCKYPNCM"));
-
$(".plate2").find('a.ui-icon-refresh').remove();
+
removeplate(in_the_bin);
-
$(".plate2").appendTo($gallery).fadeIn();
+
in_the_bin = "plate5";
-
});
+
}
-
}
+
if(plate == "Plate 6") {
-
if(in_the_bin == "plate3") {
+
$("#video-wrapper").html(play("4xzVCKYPNCM"));
-
$(".plate3").fadeOut(function() {
+
removeplate(in_the_bin);
-
$(".plate3").find('a.ui-icon-refresh').remove();
+
in_the_bin = "plate6";
-
$(".plate3").appendTo($gallery).fadeIn();
+
}
-
});
+
if(plate == "Plate 7") {
-
}
+
$("#video-wrapper").html(play("4xzVCKYPNCM"));
-
if(in_the_bin == "plate1") {
+
removeplate(in_the_bin);
-
$(".plate1").fadeOut(function() {
+
in_the_bin = "plate7";
-
$(".plate1").find('a.ui-icon-refresh').remove();
+
}
-
$(".plate1").appendTo($gallery).fadeIn();
+
if(plate == "Plate 8") {
-
});
+
$("#video-wrapper").html(play("4xzVCKYPNCM"));
-
}
+
removeplate(in_the_bin);
-
in_the_bin = "plate4";
+
in_the_bin = "plate8";
}
}
});
});
Line 190: 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");
-
if(plate == "Plate 1") {
+
in_the_bin = "";
-
$("#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 230: Line 219:
border: 1px solid #ffd200;
border: 1px solid #ffd200;
background-color: #fffae0;
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>
</style>
-
<div class="demo">
+
<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 style="display:none;" id="movie1">
+
<div id="video-wrapper">
-
<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>
+
3. Enjoy the movie
</div>
</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 style="clear: both;"></div>
<div style="clear: both;"></div>
</div>
</div>
</html>
</html>

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"