Difference between revisions of "Team:East Chapel Hill"

 
(81 intermediate revisions by 4 users not shown)
Line 1: Line 1:
 
{{East_Chapel_Hill}}
 
{{East_Chapel_Hill}}
 
<html>
 
<html>
−
<head>
+
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
−
<style>
+
<script src="https://github.com/kswedberg/jquery-smooth-scroll/blob/master/jquery.smooth-scroll.min.js"></script>
−
/*SLIDESHOW*/
+
<script>
 +
$('.smooth').on('click', function() {
 +
    $.smoothScroll({
 +
        scrollElement: $('body'),
 +
        scrollTarget: '#' + this.id
 +
    });
 +
   
 +
    return false;
 +
});
 +
</script>
  
−
* {box-sizing: border-box}
+
<head>
−
body {font-family: Verdana, sans-serif; margin:0}
+
<meta charset="UTF-8">
−
.mySlides {display: none}
+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
−
img {vertical-align: middle;}
+
<meta name="viewport" content="width=device-width, initial-scale=1">
 +
<title>Home</title>
 +
    <!-- Bootstrap -->
 +
<link href="https://2018.igem.org/Template:East_Chapel_Hill rel="stylesheet">
 +
</head>
  
−
/* Slideshow container */
+
<style>
−
.slideshow-container {
+
p.big {
−
  max-width: 1400px;
+
    line-height: 1.8;
−
  float:left;
+
−
  margin:auto;
+
 
}
 
}
  
−
/* Next & previous buttons */
+
.foo img:last-child{display:none}
−
.prev, .next {
+
.foo:hover img:first-child{display:none}
−
  cursor: pointer;
+
.foo:hover img:last-child{display:inline-block}
−
  position: absolute;
+
−
  top: 50%;
+
−
  width: auto;
+
−
  padding: 16px;
+
−
  margin-top: -22px;
+
−
  color: white;
+
−
  font-weight: bold;
+
−
  font-size: 18px;
+
−
  transition: 0.6s ease;
+
−
  border-radius: 0 3px 3px 0;
+
 
}
 
}
  
−
/* Position the "next button" to the right */
+
/*h2 {
−
.next {
+
padding: 0;
−
  right: 0;
+
font-weight: 300;*/
−
  border-radius: 3px 0 0 3px;
+
 
}
 
}
−
 
+
h2 span {
−
/* On hover, add a black background color with a little bit see-through */
+
margin-left: 1em;
−
.prev:hover, .next:hover {
+
color: #aaa;
−
  background-color: rgba(0,0,0,0.8);
+
font-size: 85%;
 +
font-style: Optima;
 
}
 
}
−
 
+
</style>
−
/* Caption text */
+
<style>
−
.text {
+
button{border: 0; background-color: #D3D3D3
−
  color: #f2f2f2;
+
−
  font-size: 15px;
+
−
  padding: 8px 12px;
+
−
  position: absolute;
+
−
  bottom: 8px;
+
−
  width: 100%;
+
−
  text-align: center;
+
 
}
 
}
 +
</style>
  
−
/* Number text (1/3 etc) */
 
−
.numbertext {
 
−
  color: #f2f2f2;
 
−
  font-size: 12px;
 
−
  padding: 8px 12px;
 
−
  position: absolute;
 
−
  top: 0;
 
−
}
 
  
−
/* The dots/bullets/indicators */
+
<!-- Define p2 type -->
−
.dot {
+
<style>
−
  cursor: pointer;
+
p2 {
−
  height: 15px;
+
    display: block;
−
  width: 15px;
+
    margin-top: 1em;
−
  margin:auto;
+
    margin-bottom: 1em;
−
  background-color: #bbb;
+
    margin-left: 5em;
−
  border-radius: 50%;
+
    margin-right: 5em;
−
  display: inline-block;
+
}
−
  transition: background-color 0.6s ease;
+
</style>
−
}
+
<!-- Define horizontal bar type -->
 +
<style>
 +
hr {
 +
border: 2px solid;
 +
margin-right: 80px;
 +
margin-left:80px;
 +
}
 +
</style>
  
−
.active, .dot:hover {
+
<!-- Define h2 -->
−
  background-color: #717171;
+
<style>
−
}
+
h2 {  
 +
  margin-top: 1em;
 +
            margin-bottom: 1em;
 +
            margin-left: 6em;
 +
            margin-right: 6em;
 +
            text-align: left;
 +
                font-size: 20px;
 +
}
 +
</style>
  
−
/* Fading animation */
 
−
.fade {
 
−
  -webkit-animation-name: fade;
 
−
  -webkit-animation-duration: 1.5s;
 
−
  animation-name: fade;
 
−
  animation-duration: 1.5s;
 
−
}
 
  
−
@-webkit-keyframes fade {
 
−
  from {opacity: .4}
 
−
  to {opacity: 1}
 
−
}
 
  
−
@keyframes fade {
+
<!-- CONTENT BEGINS HERE -->
−
  from {opacity: .4}
+
<body>
−
  to {opacity: 1}
+
−
}
+
  
−
/* On smaller screens, decrease text size */
+
<!-- slides -->
−
@media only screen and (max-width: 300px) {
+
<div id="myCarousel" class="carousel slide" data-ride="carousel" style="margin-top:60px;">
−
  .prev, .next,.text {font-size: 11px}
+
    <!-- Indicators -->
−
}
+
    <ol class="carousel-indicators">
−
</style>
+
      <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
−
</head>
+
      <li data-target="#myCarousel" data-slide-to="1"></li>
−
<body>
+
      <li data-target="#myCarousel" data-slide-to="2"></li>
−
<!--SLIDESHOW-->
+
  
−
<div class="slideshow-container">
+
    </ol>
  
−
<div class="mySlides fade">
+
    <!-- Wrapper for slides -->
−
  <div class="numbertext">1 / 3</div>
+
    <div class="carousel-inner">
−
  <img src="img_nature_wide.jpg" style="width:100%">
+
−
  <div class="text">Caption Text</div>
+
−
</div>
+
  
−
<div class="mySlides fade">
+
      <div class="item active">
−
  <div class="numbertext">2 / 3</div>
+
        <img src="https://static.igem.org/mediawiki/2018/archive/b/b6/20181018002849%21T--East_Chapel_Hill--slide1.png" style="width:100%;">
−
  <img src="img_snow_wide.jpg" style="width:100%">
+
        <div class="carousel-caption">
−
  <div class="text">Caption Two</div>
+
        </div>
−
</div>
+
      </div>
  
−
<div class="mySlides fade">
+
      <div class="item">
−
  <div class="numbertext">3 / 3</div>
+
        <img src="https://static.igem.org/mediawiki/2018/9/90/T--East_Chapel_Hill--slide2.png" style="width:100%;">
−
  <img src="img_mountains_wide.jpg" style="width:100%">
+
      </div>
−
   <div class="text">Caption Three</div>
+
    
−
</div>
+
      <div class="item">
 +
        <img src="https://static.igem.org/mediawiki/2018/4/41/T--East_Chapel_Hill--slide3.png"  style="width:100%;">
 +
      </div>
  
−
<a class="prev" onclick="plusSlides(-1)">&#10094;</a>
+
      <div class="item">
−
<a class="next" onclick="plusSlides(1)">&#10095;</a>
+
        <img src="O" style="width:100%;">
 +
      </div>
  
  
−
</div>
+
 
 +
      <div class="item">
 +
        <img src="O"  style="width:100%;">
 +
      </div>
 +
 
 +
      <div class="item">
 +
        <img src="O"  style="width:100%;">
 +
      </div>
 +
 
 +
      <div class="item">
 +
        <img src="O"  style="width:100%;">
 +
      </div>
 +
 
 +
 
 +
        </div>
 +
      </div>
 +
 
 +
    </div>
 +
 
 +
 +
</video>
 +
</div> </center>
 +
<!--
 +
<p></p><p></p>
 +
-->
 
<br>
 
<br>
 +
<hr>
 +
<h1><p2>Improving the Efficacy of Riboswitch Based Sensor for Visual Detection of Excess Fluoride in Water</h1></p2>
 +
<hr>
 +
<!--
  
−
<div style="text-align:center">
+
-->
−
  <span class="dot" onclick="currentSlide(1)"></span>  
+
<div class= "paragraph" id="second">
−
  <span class="dot" onclick="currentSlide(2)"></span>
+
<div style="padding: 5% 10%;">
−
  <span class="dot" onclick="currentSlide(3)"></span>
+
−
</div>
+
  
−
<script>
+
<!-- PROJECT DESCRIPTION -->
−
var slideIndex = 1;
+
−
showSlides(slideIndex);
+
  
−
function plusSlides(n) {
+
<p2> Scientists around the world have recognized fluoride as a markedly beneficial resource for protecting tooth enamel from decay. However, excess fluoride can also have an adverse effect on human health. A significant problem arises when excess amounts of fluoride infiltrate drinking water. High fluoride concentrations can have devastating impacts on dental health, especially those of children, and eventually lead to hypomineralization and dental fluorosis.
−
  showSlides(slideIndex += n);
+
<br></br>
−
}
+
To address this challenge, we aim to first develop an efficient, user-friendly, and cost-sensitive fluoride biosensor using previously characterized fluoride riboswitches. Last year, we developed an operon whose riboswitch was only activated when bound to fluoride. This fluoride-specific activation allowed for selective transcription of the chloramphenicol acetyltransferase (CAT) gene. Bacteria that can express the CAT gene have a resistance to the chloramphenicol antibiotic, and can survive in the presence of chloramphenicol. Consequently, the presence of fluoride allows for bacterial growth in the presence of chloramphenicol. However, this system was not able to detect concentrations low enough to prove useful in realistic applications. This summer, we focused on testing various promoters and riboswitch sequences to reduce the detection threshold and improve the efficacy of our previous operon. 
 +
</p2>
 +
</center></figure>
  
−
function currentSlide(n) {
 
−
  showSlides(slideIndex = n);
 
−
}
 
  
−
function showSlides(n) {
 
−
  var i;
 
−
  var slides = document.getElementsByClassName("mySlides");
 
−
  var dots = document.getElementsByClassName("dot");
 
−
  if (n > slides.length) {slideIndex = 1}   
 
−
  if (n < 1) {slideIndex = slides.length}
 
−
  for (i = 0; i < slides.length; i++) {
 
−
      slides[i].style.display = "none"; 
 
−
  }
 
−
  for (i = 0; i < dots.length; i++) {
 
−
      dots[i].className = dots[i].className.replace(" active", "");
 
−
  }
 
−
  slides[slideIndex-1].style.display = "block"; 
 
−
  dots[slideIndex-1].className += " active";
 
−
}
 
  
−
</script>
 
  
  
  
  
−
<div class="column third_size" >
 
−
<div class="highlight decoration_A_full">
 
  
−
<h2> Project Description </h2>
 
−
<p> In many poor countries, excess concentrations of fluoride have entered water sources through erosion of sediment and minerals. These toxic concentrations, which are defined by the World Health Organization to be above 1.0mg/L, may result in an array of health complications. Fluoride has been known to induce cell stress, which in turn impairs the function of ameloblasts who are tasked with forming dental enamel. The resulting disease is dental fluorosis, which manifests in the teeth as porous and yellowed enamel. Other potential consequences of exposure to toxic fluoride levels include skeletal fluorosis, which may result in bone deformities, as well as impaired development. <br>
 
−
Our project involves the development of an operon that will serve as a visual indicator of excess fluoride. We plan to develop and improve the operon created by last year’s iGEM team by experimenting with different fluoride riboswitches and promoters. We hope to find promoters that have an increased gene expression and riboswitches that have increased affinity to fluoride. This would allow for our operon to detect fluoride at levels even lower than 1.0mg/L, a significant improvement from the previous operon. Additionally, we may be able to find different riboswitches that function across a spectrum of fluoride concentrations. By combining them, we could potentially create an indicator that shows the actual amount of fluoride in the water, rather than one that only specifies if the concentrations are above a certain threshold.
 
−
</p>
 
−
 
−
</div>
 
−
</div>
 
−
</div>
 
−
</body>
 
  
  
  
  
 +
</body>
 
</html>
 
</html>

Latest revision as of 02:27, 18 October 2018

East Chapel Hill
Home

Improving the Efficacy of Riboswitch Based Sensor for Visual Detection of Excess Fluoride in Water

Scientists around the world have recognized fluoride as a markedly beneficial resource for protecting tooth enamel from decay. However, excess fluoride can also have an adverse effect on human health. A significant problem arises when excess amounts of fluoride infiltrate drinking water. High fluoride concentrations can have devastating impacts on dental health, especially those of children, and eventually lead to hypomineralization and dental fluorosis.

To address this challenge, we aim to first develop an efficient, user-friendly, and cost-sensitive fluoride biosensor using previously characterized fluoride riboswitches. Last year, we developed an operon whose riboswitch was only activated when bound to fluoride. This fluoride-specific activation allowed for selective transcription of the chloramphenicol acetyltransferase (CAT) gene. Bacteria that can express the CAT gene have a resistance to the chloramphenicol antibiotic, and can survive in the presence of chloramphenicol. Consequently, the presence of fluoride allows for bacterial growth in the presence of chloramphenicol. However, this system was not able to detect concentrations low enough to prove useful in realistic applications. This summer, we focused on testing various promoters and riboswitch sequences to reduce the detection threshold and improve the efficacy of our previous operon.