Team:TU Delft/Education/science-museum

From 2010.igem.org

(Difference between revisions)
(→Educational Movies)
 
(52 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 34: 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 41: 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 72: Line 76:
});
});
}
}
-
 
+
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();
 +
});
 +
}
}
}
Line 119: 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 137: 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 146: Line 190:
function recycleImage($item) {
function recycleImage($item) {
$item.fadeOut(function() {
$item.fadeOut(function() {
-
$("#video-wrapper").html("");
+
$("#video-wrapper").html("3. Enjoy the movie");
in_the_bin = "";
in_the_bin = "";
$item.find('a.ui-icon-refresh').remove();
$item.find('a.ui-icon-refresh').remove();
Line 175: Line 219:
border: 1px solid #ffd200;
border: 1px solid #ffd200;
background-color: #fffae0;
background-color: #fffae0;
-
height: 500px;
+
height: 650px;
}
}
Line 183: Line 227:
margin: 10px;
margin: 10px;
padding: 5px;
padding: 5px;
-
width: 500px;
+
width: 485px;
float: left;
float: left;
 +
height: 250px;
}
}
#reader-wrapper {
#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;
border: 1px solid #ffd200;
 +
height: 250px;
margin: 10px;
margin: 10px;
padding: 5px;
padding: 5px;
-
width: 200px;
+
text-align: center;
-
float: right;
+
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 { float: left; min-height: 12em; } * html #gallery { height: 12em; } /* IE6 */
.gallery { list-style-type: none; list-style: none; margin: 0; padding:0; }
.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 { 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; }
+
.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; }
.plate_title { display: none; }
Line 206: Line 276:
<div class="demo">
<div class="demo">
<div id="gallery-wrapper">
<div id="gallery-wrapper">
-
<strong>Pick a plate:</strong><br />
+
<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 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>
<div id="reader-wrapper">
<div id="reader-wrapper">
-
<span style="display:block;width:100%;font-weight:bold;padding:3px;text-align:center;">Drag it on to the reader</span>
+
<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>
Line 235: Line 326:
<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"