Difference between revisions of "Team:Rice/Building With Biology"

(Created page with "{{Rice}} <html> <head> <style> h1 { font-family: "Abadi MT Condensed Extra Bold", Helvetica, Arial; font-size: 30px; font-style: normal; font-variant: normal; font-w...")
 
 
(44 intermediate revisions by 2 users not shown)
Line 3: Line 3:
 
<head>
 
<head>
 
<style>
 
<style>
−
h1 {
+
.h1 {
 
   font-family: "Abadi MT Condensed Extra Bold", Helvetica, Arial;
 
   font-family: "Abadi MT Condensed Extra Bold", Helvetica, Arial;
 
   font-size: 30px;
 
   font-size: 30px;
Line 12: Line 12:
 
}
 
}
  
−
h3 {
+
.h3 {
 
   font-family: "DIN Alternate", Helvetica, Arial;
 
   font-family: "DIN Alternate", Helvetica, Arial;
 
   font-size: 18pt;
 
   font-size: 18pt;
Line 22: Line 22:
  
 
}
 
}
−
h2 {
+
.h2 {
 
   font-family: "DIN Alternate", Helvetica, Arial;
 
   font-family: "DIN Alternate", Helvetica, Arial;
 
   font-size: 18px;
 
   font-size: 18px;
Line 33: Line 33:
 
   padding: 5px 15px 5px 15px;
 
   padding: 5px 15px 5px 15px;
 
}
 
}
−
p {
+
.para {
 
   font-family: Helvetica, Arial, sans-serif;
 
   font-family: Helvetica, Arial, sans-serif;
−
   font-size: 11px;
+
   font-size: 14px;
 
   font-style: normal;
 
   font-style: normal;
 
   color: #fff;
 
   color: #fff;
Line 70: Line 70:
 
<body>
 
<body>
 
     <br><br><br><br><br><br><br><br><br><br><br><br><br><br>
 
     <br><br><br><br><br><br><br><br><br><br><br><br><br><br>
−
     <div class = "fixed_flyer" id = "bronze" style="position:relative;z-index:8;">
+
     <div class = "fixed_flyer" id = "sec1" style="position:relative;z-index:8;">
−
         <h1 style="color:white">Introduction</h1>
+
         <div class = "h1" style="color:white">Introduction</div>
 
     </div>
 
     </div>
 +
   
 
     <div class="pagediv">
 
     <div class="pagediv">
−
       <p>We facilitated a Building with Biology event at the Children’s Museum of Houston. Through hands-on activities like extracting DNA from wheat germ and helping kids to design their own superorganisms, we had the opportunity to introduce young children to the exciting field of synthetic biology and to clear up a few of their parents’ misconceptions.
+
       <br><br>
−
</p>
+
      <div class = "para">We facilitated a Building with Biology event at the Children’s Museum of Houston. Through hands-on activities like extracting DNA from wheat germ and helping kids to design their own superorganisms, we had the opportunity to introduce young children to the exciting field of synthetic biology and to clear up a few of their parents’ misconceptions.
 +
</div>
 +
      <br><br>
 
     </div>
 
     </div>
−
     <div class = "fixed_flyer" id = "bronze" style="position:relative;z-index:8;">
+
     <div class = "fixed_flyer" id = "sec2" style="position:relative;z-index:9;">
−
         <h1 style="color:white">Background</h1>
+
         <div class = "h1" style="color:white">Background</div>
 
     </div>
 
     </div>
−
     <div class="pagediv">
+
     <div class="pagediv" style="
−
       <p>The Building with Biology project  is dedicated to spreading STEM learning and discussion about the technological and societal implications of synthetic biology through public and scientist dialogue. Successful applicants receive a physical kit with all of the supplies necessary to host an event with six hands-on activities.
+
    height: 700px;
−
       </p>
+
">
−
       <ol>
+
       <br><br>
−
         <li><p>Bio Bistro</p></li>
+
      <div class = "para" style="text-align:left;width: 565px;">The Building with Biology project  is dedicated to spreading STEM learning and discussion about the technological and societal implications of synthetic biology through public and scientist dialogue. Successful applicants receive a physical kit with all of the supplies necessary to host an event with six hands-on activities.
−
         <li><p>Kit of Parts</p></li>
+
       </div>
−
         <li><p>See DNA</p></li>
+
       <ol style = "text-align: left; width:530px">
−
         <li><p>Super Organisms</p></li>
+
         <li><div class = "para">Bio Bistro: Decide what current and future synthetic biology-based food products you would, would not, or might eat.</div></li>
−
         <li><p>Tech Tokens</p></li>
+
         <li><div class = "para">Kit of Parts: Solve challenges by building a model cell with standardized genetic parts (like BioBricks).</div></li>
−
         <li><p>VirEx Delivery</p></li>
+
         <li><div class = "para">See DNA: Extract visible DNA from wheat germ and create necklaces to display your own sample of wheat germ DNA.</div></li>
 +
         <li><div class = "para">Super Organisms: Design a superhero to rescue a person falling from a tall building and then use that same creative engineering process to design a single-celled organism to clean up an oil spill.</div></li>
 +
         <li><div class = "para">Tech Tokens: Consider the potential advantages and disadvantages of various areas of synthetic biology research, before investing in them with "tech tokens."</div></li>
 +
         <li><div class = "para">VirEx Delivery: Explore the potential for engineered viruses to deliver beneficial, targeted genetic information to sites throughout the body.</div></li>
 
       </ol>
 
       </ol>
 +
<img src="https://static.igem.org/mediawiki/2016/0/01/Human_Practices1.jpg" width="470px" style="position: relative;top: -485px;left: 410px;">
 
     </div>
 
     </div>
−
    <div class = "fixed_flyer" id = "bronze" style="position:relative;z-index:8;">
+
      <br><br>
−
         <h1 style="color:white">Significance</h1>
+
        <div class = "fixed_flyer" id = "sec3" style="position:relative;z-index:10;">
 +
         <div class = "h1" style="color:white">Timeline</div>
 
     </div>
 
     </div>
 
     <div class="pagediv">
 
     <div class="pagediv">
−
     <p>The afternoon we spent at the Children’s Museum was particularly rewarding because we had the opportunity to interact with a cross section of the general public. The attendees had not come to the museum expecting to learn about synthetic biology, but they were eager to actively participate in the activities and to engage in conversations about the potential impact of the field. We were reminded by their vehement objections to buzzwords like “GMOs” of the significant resistance that synthetic biology still faces. </p>
+
      <br><br>
 +
<div class = "para" style="float:left">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</div>
 +
    <div id ="one"style="height:20px; width:50px;background:#551A8B;display:block;float:left"></div>
 +
<div id ="two"style="height:20px; width:200px;background:#8A2BE2;display:block;float:left"></div>
 +
<div id="three"style="height:20px; width:50px;background:#9370DB;display:block;float:left"></div>
 +
<div id ="four"style="height:20px; width:50px;background:#551A8B;display:block;float:left"></div>
 +
<div id ="five"style="height:20px; width:40px;background:#8A2BE2;display:block;float:left"></div>
 +
<div id="six"style="height:20px; width:60px;background:#9370DB;display:block;float:left"></div>
 +
<div id="seven"style="height:20px; width:20px;background:#551A8B;display:block;float:left"></div>
 +
<br>
 +
<div id = "info">
 +
  <div class = "para" id = "defaulti" style="display:box">Above is a timeline for Building with Biology, hover over different sections to learn more!</div>
 +
  <div class = "para" id = "onei" style="display:none">Volunteer orientation at the Children’s Museum & Building with Biology training</div>
 +
  <div class ="para" id = "twoi"style="display:none">Studying the background materials for our respective stations and practicing our presentations.</div>
 +
  <div class = "para" id = "threei"style="display:none">Set up</div>
 +
  <div class = "para" id = "fouri"style="display:none">Building with Biology Event</div>
 +
  <div class = "para" id = "fivei"style="display:none">Clean up</div>
 +
  <div class = "para" id = "sixi"style="display:none">Debrief</div>
 +
  <div class = "para" id = "seveni"style="display:none">Building with Biology Facilitator Feedback Survey</div> 
 +
</div>
 +
    </div>
 +
      <br><br>
 +
    <div class = "fixed_flyer" id = "sec4" style="position:relative;z-index:11;">
 +
        <div class = "h1" style="color:white">Significance</div>
 +
    </div>
 +
    <div class="pagediv">
 +
      <br><br>
 +
     <div class = "para">The afternoon we spent at the Children’s Museum was particularly rewarding because we had the opportunity to interact with a cross section of the general public. The attendees had not come to the museum expecting to learn about synthetic biology, but they were eager to actively participate in the activities and to engage in conversations about the potential impact of the field. We were reminded by their vehement objections to buzzwords like “GMOs” of the significant resistance that synthetic biology still faces. </div>
 
     </div>
 
     </div>
 
</body>
 
</body>
 +
 +
<script>
 +
$(document).ready(function(){
 +
    var sec1=$(".fixed_flyer#sec1");
 +
    var sec1_pos=sec1.offset().top;
 +
    var sec2=$(".fixed_flyer#sec2");
 +
    var sec2_pos=sec2.offset().top;
 +
    var sec3=$(".fixed_flyer#sec3");
 +
    var sec3_pos=sec3.offset().top;
 +
    var sec4=$(".fixed_flyer#sec4");
 +
    var sec4_pos=sec4.offset().top;
 +
    $(window).scroll(function () {
 +
        var y=$(this).scrollTop();
 +
        console.log('new position-----------------------');
 +
        console.log('y:',y);
 +
        console.log('sec1:', sec1_pos);
 +
        console.log('sec2:', sec2_pos);
 +
        console.log('sec3:', sec3_pos);
 +
        console.log('sec4:', sec3_pos);
 +
        if(y<sec2_pos-40){
 +
          if (y>sec1_pos){
 +
            console.log('sec 1 supposed to move');
 +
            sec1.stop().animate({'top':y-sec1_pos},1);
 +
          }
 +
        } else {
 +
          sec1.stop().animate({'top':10},1);   
 +
        };
 +
        if(y<sec3_pos-40){
 +
          if(y>sec2_pos){
 +
            console.log('sec 2 supposed to move');
 +
            sec2.stop().animate({'top':y-sec2_pos},1);
 +
          }
 +
        } else {
 +
          sec2.stop().animate({'top':10},1);   
 +
        };
 +
        if(y<sec4_pos-40){
 +
          if(y>sec3_pos){
 +
            console.log('sec 3 supposed to move');
 +
            sec3.stop().animate({'top':y-sec3_pos},1);
 +
          }
 +
        } else {
 +
          sec3.stop().animate({'top':10},1);   
 +
        };
 +
        if(y<3000){
 +
          if(y>sec4_pos){
 +
            console.log('sec 4 supposed to move');
 +
            sec4.stop().animate({'top':y-sec4_pos},1);
 +
          }
 +
        } else {
 +
          sec4.stop().animate({'top':10},1);   
 +
        };
 +
    });
 +
        $("#one").hover(function(){
 +
        $("#onei").css("display", "block");
 +
        $("#one").css("opacity", "0.5");
 +
        $("#defaulti").css("display","none");
 +
        }, function(){
 +
        $("#onei").css("display","none");
 +
        $("#one").css("opacity", "1");
 +
        $("#defaulti").css("display","block");
 +
    });
 +
        $("#two").hover(function(){
 +
        $("#twoi").css("display", "block");
 +
        $("#two").css("opacity", "0.5");
 +
        $("#defaulti").css("display","none");
 +
        }, function(){
 +
        $("#twoi").css("display","none");
 +
        $("#two").css("opacity", "1");
 +
        $("#defaulti").css("display","block");
 +
    });
 +
        $("#three").hover(function(){
 +
        $("#threei").css("display", "block");
 +
        $("#three").css("opacity", "0.5");
 +
        $("#defaulti").css("display","none");
 +
        }, function(){
 +
        $("#threei").css("display","none");
 +
        $("#three").css("opacity", "1");
 +
        $("#defaulti").css("display","block");
 +
    });
 +
        $("#four").hover(function(){
 +
        $("#fouri").css("display", "block");
 +
        $("#four").css("opacity", "0.5");
 +
        $("#defaulti").css("display","none");
 +
        }, function(){
 +
        $("#fouri").css("display","none");
 +
        $("#four").css("opacity", "1");
 +
        $("#defaulti").css("display","block");
 +
    });
 +
        $("#five").hover(function(){
 +
        $("#fivei").css("display", "block");
 +
        $("#five").css("opacity", "0.5");
 +
        $("#defaulti").css("display","none");
 +
        }, function(){
 +
        $("#fivei").css("display","none");
 +
        $("#five").css("opacity", "1");
 +
        $("#defaulti").css("display","block");
 +
    });
 +
        $("#six").hover(function(){
 +
        $("#sixi").css("display", "block");
 +
        $("#six").css("opacity", "0.5");
 +
        $("#defaulti").css("display","none");
 +
        }, function(){
 +
        $("#sixi").css("display","none");
 +
        $("#six").css("opacity", "1");
 +
        $("#defaulti").css("display","block");
 +
    });
 +
        $("#seven").hover(function(){
 +
        $("#seveni").css("display", "block");
 +
        $("#seven").css("opacity", "0.5");
 +
        $("#defaulti").css("display","none");
 +
        }, function(){
 +
        $("#seveni").css("display","none");
 +
        $("#seven").css("opacity", "1");
 +
        $("#defaulti").css("display","block");
 +
    });
 +
  });
 +
</script>
 
</html>
 
</html>

Latest revision as of 03:34, 20 October 2016















Introduction


We facilitated a Building with Biology event at the Children’s Museum of Houston. Through hands-on activities like extracting DNA from wheat germ and helping kids to design their own superorganisms, we had the opportunity to introduce young children to the exciting field of synthetic biology and to clear up a few of their parents’ misconceptions.


Background


The Building with Biology project is dedicated to spreading STEM learning and discussion about the technological and societal implications of synthetic biology through public and scientist dialogue. Successful applicants receive a physical kit with all of the supplies necessary to host an event with six hands-on activities.
  1. Bio Bistro: Decide what current and future synthetic biology-based food products you would, would not, or might eat.
  2. Kit of Parts: Solve challenges by building a model cell with standardized genetic parts (like BioBricks).
  3. See DNA: Extract visible DNA from wheat germ and create necklaces to display your own sample of wheat germ DNA.
  4. Super Organisms: Design a superhero to rescue a person falling from a tall building and then use that same creative engineering process to design a single-celled organism to clean up an oil spill.
  5. Tech Tokens: Consider the potential advantages and disadvantages of various areas of synthetic biology research, before investing in them with "tech tokens."
  6. VirEx Delivery: Explore the potential for engineered viruses to deliver beneficial, targeted genetic information to sites throughout the body.


Timeline


                               

Above is a timeline for Building with Biology, hover over different sections to learn more!


Significance


The afternoon we spent at the Children’s Museum was particularly rewarding because we had the opportunity to interact with a cross section of the general public. The attendees had not come to the museum expecting to learn about synthetic biology, but they were eager to actively participate in the activities and to engage in conversations about the potential impact of the field. We were reminded by their vehement objections to buzzwords like “GMOs” of the significant resistance that synthetic biology still faces.