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

 
(43 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 71: Line 71:
 
     <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 = "sec1" 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 = "sec2" style="position:relative;z-index:9;">
 
     <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: and insert the one sentence description here</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>
 +
      <br><br>
 
         <div class = "fixed_flyer" id = "sec3" style="position:relative;z-index:10;">
 
         <div class = "fixed_flyer" id = "sec3" style="position:relative;z-index:10;">
−
         <h1 style="color:white">Significance</h1>
+
         <div class = "h1" style="color:white">Timeline</div>
 
     </div>
 
     </div>
 
     <div class="pagediv">
 
     <div class="pagediv">
−
     <p>insert timeline thingy</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>
 
     </div>
 +
      <br><br>
 
     <div class = "fixed_flyer" id = "sec4" style="position:relative;z-index:11;">
 
     <div class = "fixed_flyer" id = "sec4" style="position:relative;z-index:11;">
−
         <h1 style="color:white">Significance</h1>
+
         <div class = "h1" style="color:white">Significance</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">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>
Line 123: Line 152:
 
         console.log('sec2:', sec2_pos);
 
         console.log('sec2:', sec2_pos);
 
         console.log('sec3:', sec3_pos);
 
         console.log('sec3:', sec3_pos);
 +
        console.log('sec4:', sec3_pos);
 
         if(y<sec2_pos-40){
 
         if(y<sec2_pos-40){
 
           if (y>sec1_pos){
 
           if (y>sec1_pos){
 +
            console.log('sec 1 supposed to move');
 
             sec1.stop().animate({'top':y-sec1_pos},1);  
 
             sec1.stop().animate({'top':y-sec1_pos},1);  
 
           }
 
           }
Line 130: Line 161:
 
           sec1.stop().animate({'top':10},1);     
 
           sec1.stop().animate({'top':10},1);     
 
         };
 
         };
−
         if(y<sec3-40){
+
         if(y<sec3_pos-40){
 
           if(y>sec2_pos){
 
           if(y>sec2_pos){
 +
            console.log('sec 2 supposed to move');
 
             sec2.stop().animate({'top':y-sec2_pos},1);
 
             sec2.stop().animate({'top':y-sec2_pos},1);
 
           }
 
           }
Line 137: Line 169:
 
           sec2.stop().animate({'top':10},1);     
 
           sec2.stop().animate({'top':10},1);     
 
         };
 
         };
−
         if(y<sec4-40){
+
         if(y<sec4_pos-40){
 
           if(y>sec3_pos){
 
           if(y>sec3_pos){
 +
            console.log('sec 3 supposed to move');
 
             sec3.stop().animate({'top':y-sec3_pos},1);
 
             sec3.stop().animate({'top':y-sec3_pos},1);
 
           }
 
           }
Line 146: Line 179:
 
         if(y<3000){
 
         if(y<3000){
 
           if(y>sec4_pos){
 
           if(y>sec4_pos){
 +
            console.log('sec 4 supposed to move');
 
             sec4.stop().animate({'top':y-sec4_pos},1);
 
             sec4.stop().animate({'top':y-sec4_pos},1);
 
           }
 
           }
Line 151: Line 185:
 
           sec4.stop().animate({'top':10},1);     
 
           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>
 
</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.