Difference between revisions of "Team:Penn/Educational Toolbox"

Line 4: Line 4:
 
<!--<link rel="stylesheet" type="text/css" media="screen, projection" href="https://98c43ce680a0761e7c3ad3c1d7ae34f6de6db886.googledrive.com/host/0B9QyOqpKYA2gdGV2aGFRMWh4aXM/style.css" />-->
 
<!--<link rel="stylesheet" type="text/css" media="screen, projection" href="https://98c43ce680a0761e7c3ad3c1d7ae34f6de6db886.googledrive.com/host/0B9QyOqpKYA2gdGV2aGFRMWh4aXM/style.css" />-->
 
<title>University of Pennsylvania iGEM</title>
 
<title>University of Pennsylvania iGEM</title>
<link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
+
<link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
 +
</div>
 
</head>
 
</head>
 
 
<html>
 
 
<style type="text/css">
 
<style type="text/css">
 
@import url(http://fonts.googleapis.com/css?family=Oswald:300,400,700);
 
@import url(http://fonts.googleapis.com/css?family=Oswald:300,400,700);
Line 28: Line 26:
 
#parallax-world-of-ugg h2 {font-family:'Oswald', sans-serif; font-size:70px; letter-spacing:10px; text-align:center; color:white; padding:50px; font-weight:400; text-transform:uppercase; z-index:10; opacity:.8;}
 
#parallax-world-of-ugg h2 {font-family:'Oswald', sans-serif; font-size:70px; letter-spacing:10px; text-align:center; color:white; padding:50px; font-weight:400; text-transform:uppercase; z-index:10; opacity:.8;}
 
#parallax-world-of-ugg h3 {font-family:'Oswald', sans-serif; font-size:14px; line-height:0; font-weight:400; letter-spacing:8px; text-transform: uppercase; color:black;}
 
#parallax-world-of-ugg h3 {font-family:'Oswald', sans-serif; font-size:14px; line-height:0; font-weight:400; letter-spacing:8px; text-transform: uppercase; color:black;}
#parallax-world-of-ugg p {font-family:'Source Sans Pro', sans-serif; font-weight:400; font-size:16px; line-height:24px;}
+
#parallax-world-of-ugg p {font-family:'Source Sans Pro', sans-serif; font-weight:400; font-size:18px; line-height:24px;}
 
.first-character {font-weight:400; float: left; font-size: 84px; line-height: 64px; padding-top: 4px; padding-right: 8px; padding-left: 3px; font-family: 'Source Sans Pro', sans-serif;}
 
.first-character {font-weight:400; float: left; font-size: 84px; line-height: 64px; padding-top: 4px; padding-right: 8px; padding-left: 3px; font-family: 'Source Sans Pro', sans-serif;}
  
Line 37: Line 35:
 
/* Section - Title */
 
/* Section - Title */
 
/**************************/
 
/**************************/
#parallax-world-of-ugg .title {background: white; padding: 20px; margin:0 auto; text-align:center;}
+
#parallax-world-of-ugg .title {background: white; padding: 60px; margin:0 auto; text-align:center;}
 
#parallax-world-of-ugg .title h1 {font-size:35px; letter-spacing:8px;}
 
#parallax-world-of-ugg .title h1 {font-size:35px; letter-spacing:8px;}
  
 
/* Section - Block */
 
/* Section - Block */
 
/**************************/
 
/**************************/
#parallax-world-of-ugg .block {background: white; padding: 60px; width:820px; margin:0 auto; text-align:justify;}
+
#parallax-world-of-ugg .block {background: white; padding: 60px; width:1020px; margin:0 auto; text-align:justify;}
 
#parallax-world-of-ugg .block-gray {background: #f2f2f2;padding: 60px;}
 
#parallax-world-of-ugg .block-gray {background: #f2f2f2;padding: 60px;}
 
#parallax-world-of-ugg .section-overlay-mask {position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: black; opacity: 0.70;}
 
#parallax-world-of-ugg .section-overlay-mask {position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: black; opacity: 0.70;}
Line 71: Line 69:
 
}
 
}
 
</style>
 
</style>
 +
 +
 +
  
 
<div id="parallax-world-of-ugg">
 
<div id="parallax-world-of-ugg">
Line 76: Line 77:
 
<section>
 
<section>
 
   <div class="title">
 
   <div class="title">
<br><br>
+
  <h1>PENN iGEM 2015</h1>
  <h1>HUMAN PRACTICES</h1>
+
<br>
 +
<br>
  
<style type="text/css">
+
 
#slider-wrapper{
+
  </div>
width: 940px;
+
</section>
height: 470px;
+
 
margin: 50px auto;
+
<section>
position: relative;
+
    <div class="parallax-one">
margin-bottom: 0px;
+
      <h2>SENDER</h2>
background: rgba(0,0,0,0.5);
+
    </div>
overflow: hidden;
+
</section>
}
+
+
#s1{
+
padding: 6px;
+
background: #FFFFFF;
+
position: absolute;
+
left: 50%;
+
bottom: 25px;
+
margin-left: -36px;
+
border-radius: 20px;
+
opacity: 0.3;
+
cursor: pointer;
+
z-index: 999;
+
}
+
+
#s2{
+
padding: 6px;
+
background: #FFFFFF;
+
position: absolute;
+
left: 50%;
+
bottom: 25px;
+
margin-left: -12px;
+
border-radius: 20px;
+
opacity: 0.3;
+
cursor: pointer;
+
z-index: 999;
+
}
+
+
#s3{
+
padding: 6px;
+
background: #FFFFFF;
+
position: absolute;
+
left: 50%;
+
bottom: 25px;
+
margin-left: 12px;
+
border-radius: 20px;
+
opacity: 0.3;
+
cursor: pointer;
+
z-index: 999;
+
}
+
+
#s4{
+
padding: 6px;
+
background: #FFFFFF;
+
position: absolute;
+
left: 50%;
+
bottom: 25px;
+
margin-left: 36px;
+
border-radius: 20px;
+
opacity: 0.3;
+
cursor: pointer;
+
z-index: 999;
+
}
+
+
#s1:hover, #s2:hover, #s3:hover, #s4:hover{ opacity: 1;}
+
+
.inner-wrapper{
+
width: 940px;
+
height: 470px;
+
position: absolute;
+
top: 0;
+
left: 0;
+
margin-bottom: 0px;
+
overflow: hidden;
+
}
+
.control{ display: none;}
+
+
#Slide1:checked ~ .overflow-wrapper{ margin-left: 0%; }
+
#Slide2:checked ~ .overflow-wrapper{ margin-left: -100%; }
+
#Slide3:checked ~ .overflow-wrapper{ margin-left: -200%; }
+
#Slide4:checked ~ .overflow-wrapper{ margin-left: -300%; }
+
+
#Slide1:checked + #s1 { opacity: 1; }
+
#Slide2:checked + #s2 { opacity: 1; }
+
#Slide3:checked + #s3 { opacity: 1; }
+
#Slide4:checked + #s4 { opacity: 1; }
+
+
.overflow-wrapper{
+
width: 400%;
+
height: 100%;
+
position: absolute;
+
top: 0;
+
left: 0;
+
overflow-y: hidden;
+
z-index: 1;
+
-webkit-transition: all 0.3s ease-in-out;
+
-moz-transition: all 0.3s ease-in-out;
+
-o-transition: all 0.3s ease-in-out;
+
transition: all 0.3s ease-in-out;
+
}
+
+
.slide img{
+
width: 25%;
+
float: left;
+
}
+
+
</style>
+
<body>
+
<div id="slider-wrapper">
+
<div class="inner-wrapper">
+
<input checked type="radio" name="slide" class="control" id="Slide1"/>
+
<label for="Slide1" id="s1"></label>
+
<input type="radio" name="slide" class="control" id="Slide2"/>
+
<label for="Slide2" id="s2"></label>
+
<input type="radio" name="slide" class="control" id="Slide3"/>
+
<label for="Slide3" id="s3"></label>
+
<input type="radio" name="slide" class="control" id="Slide4"/>
+
<label for="Slide4" id="s4"></label>
+
<div class="overflow-wrapper">
+
<a class="slide" href=""><img src="https://static.igem.org/mediawiki/2015/f/f2/HUMANPRACTICESPENNIGEM2015.png"/></a>
+
<a class="slide" href=""><img src="http://i.imgur.com/hKju1EC.jpg"/></a>
+
<a class="slide" href=""><img src="http://i.imgur.com/hKju1EC.jpg"/></a>
+
<a class="slide" href=""><img src="http://i.imgur.com/hKju1EC.jpg"/></a>
+
</div>
+
</div>
+
</div>
+
</body>
+
</div>
+
 
   <div class="block">
 
   <div class="block">
  

Revision as of 01:16, 19 September 2015

University of Pennsylvania iGEM

PENN iGEM 2015



SENDER


SYNTHETIC BIOLOGY AND SOCIETY


TThe advent of the relatively young field of synthetic biology has brought many incredible achievements but also a great deal of skepticism regarding the ethicality to the field (Gutmann, 2011). The ability to create synthetic life is an uncomfortable concept to many, and the result of a 2011 Presidential Commission for the Study of Bioethical Issues requested by Obama has declared a state of “prudent vigilance” of advancements in synthetic biology (Gutmann, 2011). Given the current sentiment, we believe that educational modules in synthetic biology will galvanize interest in the promise of the field.


SYNTHETIC BIOLOGY AND SOCIETY


The Penn 2015 iGEM team has given several lectures to both high school students and undergraduate students on campus regarding the field of synthetic biology and how students could get involved through the iGEM competition. We showcased neat applications from previous competitions that highlight the capabilities of student researchers and create excitement about the potential of the field.


As iGEM members, we understand the power of learning by doing. We contributed to a hands-on educational module that could be feasibly deployed at secondary schools, museums, and universities. Currently, the module is being developed by the Chow lab and consists of a collection of genetically engineered strains of E. coli that present a wide range of control over visible expression of GFP through controlling four parameters: ribosome binding site strength, sensitivity of the activation factor, degradation rate of GFP reporter, and promoter strength. The GFP reporter expression is controlled by the concentration of the signaling molecule N-acyl homoserine lactone (AHL). Students can mathematically model the population-dependent behavior of the engineered strains and quantify the relative differences in protein expression as a result of changing one or a combination of the four parameters.


We designed and characterized three genetic inverters, lacI, lambda, and tetR,  that could be feasibly added to the toolbox. The genetic inverter adds another degree of control to the system as a fifth parameter that changes the bacteria’s response to the concentration of the AHL signaling molecule. The genetic inverter component completely inverts the signal such the “on” and “off” states of the system are switched (Andrianantoandro et al, 2006). We hope that the addition of the inverter component to the educational toolbox will give students a new perspective on the amount of control that engineering can impose on a biological system, and further extend the analogy between an electrical and biological circuit.