Difference between revisions of "Team:UMaryland/Measurement"

 
(25 intermediate revisions by 2 users not shown)
Line 6: Line 6:
 
<head>
 
<head>
 
     <script>
 
     <script>
−
         $('body').css('display', 'none');
+
         $('body').css('opacity', '0');
 
     </script>
 
     </script>
 
     <script src="https://static.igem.org/mediawiki/2016/9/95/T--UMaryland--html5shiv.txt"></script>
 
     <script src="https://static.igem.org/mediawiki/2016/9/95/T--UMaryland--html5shiv.txt"></script>
 
     <script src="https://static.igem.org/mediawiki/2016/c/ce/T--UMaryland--parallax.txt"></script>
 
     <script src="https://static.igem.org/mediawiki/2016/c/ce/T--UMaryland--parallax.txt"></script>
 
     <script src="https://static.igem.org/mediawiki/2016/d/d3/T--UMaryland--slick.txt" type="text/javascript"></script>
 
     <script src="https://static.igem.org/mediawiki/2016/d/d3/T--UMaryland--slick.txt" type="text/javascript"></script>
−
     <title>Engagement</title>
+
     <title>Human Practices</title>
 
</head>
 
</head>
  
Line 245: Line 245:
 
             left: 0;
 
             left: 0;
 
             right: 0;
 
             right: 0;
−
             margin-top: 100px;
+
             margin-top: 200px;
 
             z-index: 3;
 
             z-index: 3;
 
         }
 
         }
Line 340: Line 340:
 
             right: 15px;
 
             right: 15px;
 
             z-index: 2;
 
             z-index: 2;
−
             margin-top: -83px;
+
             margin-top: -12px;
 
         }
 
         }
  
Line 353: Line 353:
 
         }
 
         }
  
−
#div-protocol {
 
−
min-height: 550px;
 
−
}
 
 
         </style>
 
         </style>
 
 
 
<style>
 
<style>
 
.caption {
 
.caption {
 +
font-size: 12pt;
 
font-weight: bold;
 
font-weight: bold;
 
margin-left: 25px;
 
margin-left: 25px;
 
}
 
}
−
+
−
.titleText {
+
−
margin-left: 175px;
+
−
width: 1000px;
+
−
}
+
 
#div-figures{
 
#div-figures{
 
padding-bottom: 100px;
 
padding-bottom: 100px;
 
font-size: 14pt;
 
font-size: 14pt;
 
}
 
}
−
         h11 {
+
 +
.titleText {
 +
position: absolute;
 +
top: 350px;
 +
left: 50%;
 +
margin-left: -40%;
 +
right: auto;
 +
width: 80%;
 +
min-width: 600px;
 +
max-width: 1500px;
 +
}
 +
 +
h11, h21, h31 {
 +
font-family: Lora;
 +
display: inline-block;
 +
position: relative;
 +
padding-bottom: 10px;
 +
padding-left: 10px;
 +
padding-top: 10px;
 +
padding-right: 10px;
 +
background: rgba(0,0,0, 0.7);
 +
line-height: 1em;
 +
}
 +
 +
         h11 {
 
             color: white;
 
             color: white;
 
             font-size: 30pt;
 
             font-size: 30pt;
 
             font-weight: 400;
 
             font-weight: 400;
 
             text-align: left;
 
             text-align: left;
−
            display: block;
 
−
margin-top: 60px;
 
−
padding-top: 180px;
 
−
            margin-bottom: 0.83em;
 
 
         }
 
         }
  
Line 388: Line 402:
 
             font-weight: 300;
 
             font-weight: 300;
 
             text-align: left;
 
             text-align: left;
−
            display: block;
 
−
            margin-top: 0.83em;
 
−
            margin-bottom:: 0.83em;
 
 
         }
 
         }
  
 
         h31 {
 
         h31 {
 
             color: white;
 
             color: white;
−
             font-size: 18pt;
+
             font-size: 20pt;
 
             font-weight: 200;
 
             font-weight: 200;
 
             text-align: left;
 
             text-align: left;
−
            display: block;
 
−
            margin-top: 0.83em;
 
−
            margin-bottom:: 0.83em;
 
 
         }
 
         }
  
 
         #div-text {
 
         #div-text {
−
padding-top: 100px;
+
padding-top: 50px;
−
background-color: #f9f9f9;
+
padding-bottom: 150px;
 
         }
 
         }
  
−
         #div-pic {
+
         .div-scrollPic {
 
             z-index: -999;
 
             z-index: -999;
 
             height: 500px;
 
             height: 500px;
 +
background-color: transparent;
 
         }
 
         }
  
 +
.scrollContainer {
 +
 +
position: relative;
 +
width: 100%;
 +
}
 +
 
         .imageEmbed {
 
         .imageEmbed {
 
             /* creates border around image on each page */
 
             /* creates border around image on each page */
Line 422: Line 437:
 
         }
 
         }
  
−
         #div-text p, .longText li {
+
.longText li {
 +
 +
            font-size: 14pt;
 +
            line-height: 2;
 +
            font-weight: 400;
 +
}
 +
 +
         #div-text p {
 
             /* formats text and lists within .longText */
 
             /* formats text and lists within .longText */
 +
padding-top: 15px;
 +
padding-bottom: 15px;
 
             font-size: 14pt;
 
             font-size: 14pt;
 
             line-height: 2;
 
             line-height: 2;
Line 431: Line 455:
 
         .longText {
 
         .longText {
 
             /* fixes width of the text and displays it slighly left of center */
 
             /* fixes width of the text and displays it slighly left of center */
−
             width: 850px;
+
             width: 80%;
−
            margin-left: 175px;
+
max-width: 800px;
 +
min-width: 600px;
 +
margin-left: auto;
 
             margin-right: auto;
 
             margin-right: auto;
 
         }
 
         }
Line 452: Line 478:
 
         }
 
         }
  
−
        .figure {
 
−
            /* fixes the width of images in results tables */
 
−
            width: 800px;
 
−
display: block;
 
−
            border-style: solid;
 
−
            border-color: #A8A8A8;
 
−
            border-width: 2px;
 
−
margin-top: 50px;
 
−
margin-bottom: 20px;
 
−
margin-left: auto;
 
−
margin-right: auto;
 
−
        }
 
  
 
         /* formats caption and heading of results tables */
 
         /* formats caption and heading of results tables */
Line 493: Line 507:
 
             margin-top: 50px;
 
             margin-top: 50px;
 
         }
 
         }
 +
 +
#div-slideshow {
 +
margin-top: 40px;
 +
margin-bottom: 40px;
 +
margin-left: auto;
 +
margin-right: auto;
 +
width: 800px;
 +
}
 +
 +
#div-slideshow img {
 +
width: 750px;
 +
margin-top: 15px;
 +
margin-bottom: 15px;
 +
margin-left: auto;
 +
margin-right: auto;
 +
border: 2px solid #A8A8A8;
 +
}
 +
 +
#div-dots {
 +
            height: 100px;
 +
        }
 +
 +
#div-dots {
 +
            height: 100px;
 +
        }
 +
 
         </style>
 
         </style>
 
<nav>
 
<nav>
−
<img src="https://static.igem.org/mediawiki/2016/2/26/T--UMaryland--newlogo.jpeg" id="img-logo" width="128px">
+
<a href="https://2016.igem.org/Team:UMaryland"><img src="https://static.igem.org/mediawiki/2016/2/26/T--UMaryland--newlogo.jpeg" id="img-logo" width="128px"></a>
 
<ul>
 
<ul>
 
<a style="opacity: 0">Fix</a>
 
<a style="opacity: 0">Fix</a>
 
<li><a href="https://2016.igem.org/Team:UMaryland/projects">Projects</a></li>
 
<li><a href="https://2016.igem.org/Team:UMaryland/projects">Projects</a></li>
−
<li><a href="https://2016.igem.org/Team:UMaryland/parts">Parts</a></li>
+
<li><a href="https://2016.igem.org/Team:UMaryland/Part_Collection">Parts</a></li>
−
<li><a href="https://2016.igem.org/Team:UMaryland/modeling">Modeling</a></li>
+
<li><a href="https://2016.igem.org/Team:UMaryland/Model">Modeling</a></li>
 
<li><a href="https://2016.igem.org/Team:UMaryland/outreach">Outreach</a></li>
 
<li><a href="https://2016.igem.org/Team:UMaryland/outreach">Outreach</a></li>
 
<li><a href="https://2016.igem.org/Team:UMaryland/notebook">Notebook</a></li>
 
<li><a href="https://2016.igem.org/Team:UMaryland/notebook">Notebook</a></li>
Line 512: Line 552:
 
<ul>
 
<ul>
 
<li><a href="https://2016.igem.org/Team:UMaryland/projects">Projects</a></li>
 
<li><a href="https://2016.igem.org/Team:UMaryland/projects">Projects</a></li>
−
<li><a href="https://2016.igem.org/Team:UMaryland/parts">Parts</a></li>
+
<li><a href="https://2016.igem.org/Team:UMaryland/Part_Collection">Parts</a></li>
−
<li><a href="https://2016.igem.org/Team:UMaryland/modeling">Modeling</a></li>
+
<li><a href="https://2016.igem.org/Team:UMaryland/Model">Modeling</a></li>
 
<li><a href="https://2016.igem.org/Team:UMaryland/outreach">Outreach</a></li>
 
<li><a href="https://2016.igem.org/Team:UMaryland/outreach">Outreach</a></li>
 
<li><a href="https://2016.igem.org/Team:UMaryland/notebook">Notebook</a></li>
 
<li><a href="https://2016.igem.org/Team:UMaryland/notebook">Notebook</a></li>
Line 519: Line 559:
 
</ul>
 
</ul>
 
</div>
 
</div>
−
<div data-parallax="scroll" data-image-src="https://static.igem.org/mediawiki/2016/5/5a/T--UMaryland--il.jpg" id="div-pic">
+
<div class="scrollContainer">
−
<div class="titleText">  
+
<div data-parallax="scroll" data-image-src="https://static.igem.org/mediawiki/2016/5/5a/T--UMaryland--il.jpg" class="div-scrollPic" style="height: 650px;">
−
<!-- where background image below titles show -->
+
<div class="titleText">  
−
<h11>Interlab Study</h11>
+
<style>
−
<h21>Fluorescence Data From 3 Different Constructs with GFP</h21>
+
</style>
−
<h31>Standardizing fluorescence measurements and promoting further joint scientific efforts of the iGEM community. </h31>
+
<!-- where background image below titles show -->
−
</div>
+
<h11>Interlab Study</h11></br>
−
        </div>
+
<h21>Fluorescence Data From 3 Different Constructs with GFP</h21></br>
−
<div id="div-text"> <!-- Start of main text of page -->
+
<h31>Standardizing fluorescence measurements and promoting collaboration. </h31></br>
 +
</div>
 +
</div>
 +
</div>
 
<!-- Heading text -->
 
<!-- Heading text -->
 
 
−
+
<div id="div-text">
 
<div class="longText">
 
<div class="longText">
 
<p>The interlab study measures the fluorescence of three different constructs with GFP as well as a positive and negative control. It attempts to standardize the fluorescence measurements by adjusting absorbance values when compared to blanks, reducing the amount of independent variables by controlling for concentration, and adjusting fluorescence values based on the standard curve of FITC.  The goal of this study is to see how the observed fluorescence values compare across the iGEM community to see if the adjustments successfully standardize fluorescence measurements.</p>
 
<p>The interlab study measures the fluorescence of three different constructs with GFP as well as a positive and negative control. It attempts to standardize the fluorescence measurements by adjusting absorbance values when compared to blanks, reducing the amount of independent variables by controlling for concentration, and adjusting fluorescence values based on the standard curve of FITC.  The goal of this study is to see how the observed fluorescence values compare across the iGEM community to see if the adjustments successfully standardize fluorescence measurements.</p>
Line 569: Line 612:
 
</ul>
 
</ul>
 
</div>
 
</div>
−
<div id="div-figures">
+
<div id="div-slideshow">
 
<div>
 
<div>
 
<img class="figure" src="https://static.igem.org/mediawiki/2016/a/ae/T--UMaryland--absorbance.JPG">
 
<img class="figure" src="https://static.igem.org/mediawiki/2016/a/ae/T--UMaryland--absorbance.JPG">
Line 602: Line 645:
 
     </div>
 
     </div>
 
</body>
 
</body>
 +
 +
<script>
 +
 +
        $('#div-slideshow').slick({
 +
dots: true
 +
        });
 
 
 +
$(window).resize(function() {
 +
var marginTotal = $(window).outerWidth(true) - $('.titleText').outerWidth(false);
 +
var marginLeft = marginTotal / 2;
 +
if (marginLeft > 14) {
 +
$('.longText').css('margin-left', marginLeft);
 +
} else {
 +
$('.longText').css('margin-left', '15px');
 +
}
 +
 +
var marginTitle = $(window).outerWidth(true) - $('.titleText').outerWidth(false);
 +
var marginCheck = marginTitle / 2;
 +
if (marginCheck < 15) {
 +
$('.titleText').css('left','15px');
 +
$('.titleText').css('margin-left','0px');
 +
} else {
 +
$('.titleText').css('left','50%');
 +
$('.titleText').css('margin-left','-40%');
 +
}
 +
})
 +
 +
$(window).load(function() {
 +
            $('body').css('opacity', '1');
 +
var marginTotal = $(window).outerWidth(true) - $('.titleText').outerWidth(false);
 +
var marginLeft = marginTotal / 2;
 +
if (marginLeft > 14) {
 +
$('.longText').css('margin-left', marginLeft);
 +
}else {
 +
$('.longText').css('margin-left', '15px');
 +
}
 +
 +
var marginTitle = $(window).outerWidth(true) - $('.titleText').outerWidth(false);
 +
var marginCheck = marginTitle / 2;
 +
if (marginCheck < 15) {
 +
$('.titleText').css('left','15px');
 +
$('.titleText').css('margin-left','0px');
 +
} else {
 +
$('.titleText').css('left','50%');
 +
$('.titleText').css('margin-left','-40%');
 +
}
 +
})
 +
 +
</script>
 
       <script>
 
       <script>
 
/* Hiding stupid stuff*/
 
/* Hiding stupid stuff*/
−
                $('#top_title').css('display', 'none');
+
        $('#top_title').css('display', 'none');
−
$('#top_menu').css('display', 'none');
+
$('#top_menu').css('display', 'none');
−
//$('#top_menu_14').css('display', 'none');
+
        $('#HQ_page').css('display', 'none');
−
                $('#HQ_page').css('display', 'none');
+
$('#top_menu_under').css('display', 'none');
−
$('#top_menu_under').css('display', 'none');
+
$('#content').removeClass('mw-body')
−
$('#content').removeClass('mw-body');
+
    .attr('role','dummy2')
−
$('#content').attr('role','dummy2')
+
    .attr('id','dummy');
−
$('#content').attr('id','dummy')
+
 
$('#HQ_page').attr("id","iGEM"); //voids all dumb CSS iGEM HQ wrote which overrides our code
 
$('#HQ_page').attr("id","iGEM"); //voids all dumb CSS iGEM HQ wrote which overrides our code
 
$('#mw-content-text').attr("id","overruled").removeClass('mw-content-ltr');
 
$('#mw-content-text').attr("id","overruled").removeClass('mw-content-ltr');
Line 620: Line 710:
 
$('nav').mouseover(
 
$('nav').mouseover(
 
function () {
 
function () {
−
$('#img-logo').css('transition', '.35s ease-in');
+
$('#img-logo').css('transition', '.35s ease-in')
−
$('#img-logo').css('opacity', '1');
+
    .css('opacity', '1');
 
$('nav ul').addClass("hover");
 
$('nav ul').addClass("hover");
 
}
 
}
Line 628: Line 718:
 
function () {
 
function () {
 
var scroll = $(window).scrollTop();
 
var scroll = $(window).scrollTop();
−
if (scroll > 0) {if ( $(window).width() >= 980) { var pushed = $('body').hasClass('pushed'); if (pushed == false) {
+
if (scroll > 0) {if ( $(window).width() >= 1090) { var pushed = $('body').hasClass('pushed'); if (pushed == false) {
−
$('#img-logo').css('transition', '.25s ease');
+
−
$('#img-logo').css('opacity', '0');
+
 
$('nav ul').removeClass("hover");
 
$('nav ul').removeClass("hover");
 
$('nav').css('transition', '.5s ease');
 
$('nav').css('transition', '.5s ease');
 +
    $('#img-logo').css('transition', '.25s ease')
 +
        .css('opacity', '0');
 
}}}
 
}}}
  
Line 640: Line 730:
 
$(document).ready(function() {     
 
$(document).ready(function() {     
 
function checkWidth() {
 
function checkWidth() {
−
if ($(window).width() < 980 || $('nav').hasClass('pushed')){
+
if ($(window).width() < 1090 || $('nav').hasClass('pushed')){
 
$('nav li').css('display', 'none');
 
$('nav li').css('display', 'none');
 
$('#img-more').css('display','block');
 
$('#img-more').css('display','block');
 
$('nav ul').addClass("hover");
 
$('nav ul').addClass("hover");
−
$('#img-logo').css('transition', '.35s ease-in');
+
$('#img-logo').css('transition', '.35s ease-in')
−
$('#img-logo').css('opacity', '1');
+
    .css('opacity', '1');
 
} else {
 
} else {
 
$('nav li').css('display', 'inline');
 
$('nav li').css('display', 'inline');
Line 651: Line 741:
 
$('nav ul').removeClass("hover");
 
$('nav ul').removeClass("hover");
 
if ($(window).scrollTop() > 0) {
 
if ($(window).scrollTop() > 0) {
−
$('#img-logo').css('transition', '.25s ease');
+
$('#img-logo').css('transition', '.25s ease')
−
$('#img-logo').css('opacity', '0');
+
    .css('opacity', '0');
 
$('nav ul').addClass("scrolled");
 
$('nav ul').addClass("scrolled");
 
}
 
}
Line 669: Line 759:
 
$('nav img').toggleClass('pushed');
 
$('nav img').toggleClass('pushed');
 
$('body').toggleClass('pushed');
 
$('body').toggleClass('pushed');
−
if ($(window).width() >= 980) { var pushed = $('body').hasClass('pushed'); if (pushed == false){
+
if ($(window).width() >= 1090) { var pushed = $('body').hasClass('pushed'); if (pushed == false){
 
$('nav li').css('display', 'inline');
 
$('nav li').css('display', 'inline');
 
$('#img-more').css('display','none');
 
$('#img-more').css('display','none');
 
$('nav ul').removeClass("hover");
 
$('nav ul').removeClass("hover");
−
$('#img-logo').css('transition', '.25s ease');
 
−
$('#img-logo').css('opacity', '0');
 
 
}}
 
}}
 
});
 
});
Line 681: Line 769:
 
$(window).scroll(function() {
 
$(window).scroll(function() {
 
var scroll = $(window).scrollTop();
 
var scroll = $(window).scrollTop();
−
if (scroll > 0) { if ( $(window).width() >= 980) {
+
if (scroll > 0) { if ( $(window).width() >= 1090) {
 
nav.addClass("scrolled");
 
nav.addClass("scrolled");
 
nav.removeClass("hover");
 
nav.removeClass("hover");
−
$('#img-logo').css('transition', '.25s ease');
+
$('#img-logo').css('transition', '.25s ease')
−
$('#img-logo').css('opacity', '0');
+
    .css('opacity', '0');
 
}} else {
 
}} else {
 
nav.removeClass("scrolled");
 
nav.removeClass("scrolled");
−
$('#img-logo').css('transition', '.35s ease-in');
+
$('#img-logo').css('transition', '.35s ease-in')
−
$('#img-logo').css('opacity', '1');
+
    .css('opacity', '1');
 
}
 
}
 
});
 
});
 
</script>
 
</script>
−
         <script> $('#iGEM').css('display','block'); </script>
+
         <script> $('#iGEM').css('display','block');
 +
 +
$('body').css('display', 'block');</script>
 
<script>
 
<script>
 
$(document).ready(function(){
 
$(document).ready(function(){
−
  $('#div-figures').slick({
+
   
−
  });
+
−
  $('body').css('display', 'block')
+
 
});
 
});
 
 
Line 710: Line 799:
 
});
 
});
 
 
−
$('#div-protocol li').css('display', 'none');
 
−
 
−
var element_position = $('#div-protocol').offset().top;
 
 
var toggle = 1;
 
var toggle = 1;
  
−
$(window).on('scroll', function() {
+
−
var y_scroll_pos = window.pageYOffset;
+
−
var scroll_pos_test = element_position - 400;
+
−
 
+
−
if(y_scroll_pos > scroll_pos_test) {
+
−
if ( toggle == 1){
+
−
$('#div-protocol li').each(function(index) {
+
−
$('#div-protocol').css('overflow','hidden');
+
−
$(this).delay(200*index).queue(function() { $(this).css('display', 'list-item').animateCss('slideInRight').dequeue(); })
+
−
//$(this).delay(200*index).queue(function() { $(this).dequeue(); })
+
−
})
+
−
}
+
−
}
+
−
});
+
 
</script>
 
</script>
 
</html>
 
</html>

Latest revision as of 03:06, 18 October 2016

</div> </div> Human Practices

Interlab Study
Fluorescence Data From 3 Different Constructs with GFP
Standardizing fluorescence measurements and promoting collaboration.

The interlab study measures the fluorescence of three different constructs with GFP as well as a positive and negative control. It attempts to standardize the fluorescence measurements by adjusting absorbance values when compared to blanks, reducing the amount of independent variables by controlling for concentration, and adjusting fluorescence values based on the standard curve of FITC. The goal of this study is to see how the observed fluorescence values compare across the iGEM community to see if the adjustments successfully standardize fluorescence measurements.

As a community of synthetic biologist, a key to the advancement of the field is collaboration among groups. For proper collaboration, we must be able to communicate our findings in ways that are concrete and well defined, making standards essential.

Tested Devices

Transform competent cells with Test Devices 1 - 3, positive control, and negative control provided and plate them overnight on chloramphenicol resistant plates.

  • Test Device 1: J23101.B0034.E0040.B0015 in pSB1C3
  • Test Device 2: J23106.B0034.E0040.B0015 in pSB1C3
  • Test Device 3: J23117.B0034.E0040.B0015 in pSB1C3
  • Positive Control Device: I20270 in pSB1C3
  • Negative Control Device: R0040 in pSB1C3

Protocol

  1. Pick two colonies from each plate to inoculate and grow overnight.
  2. Calibrate the plate reader- Measure absorbance of LUDOX and water to find a corrected absorbance that can then be used to find a conversion factor for a standard OD600 measurement.
  3. Use FITC to create a standard fluorescence curve - Measure fluorescence of FITC at different concentrations to generate a curve of fluorescence over concentration.
  4. Measure OD600 of the overnight cultures and create dilutions to put them at an OD600 of 0.02.
  5. Incubate at 37 C and take 100ul samples every hour (from hours 0-6).
  6. Measure OD600 of all the samples and record.

Results

  • Most samples grew exponentially, device 1 seemed to have little growth.
  • Negative control and device 3 did not show fluorescence. Positive control, device 1, and device 2 showed increases in fluorescence over time.
  • The results show that fluorescence per unit of concentration remains relatively constant over time.
Figure 1. Cell growth versus absorbance.
Figure 2. Cell growth versus flourescence.
Figure 3. Cell growth versus absorbance / flourescence.