Difference between revisions of "Team:UMaryland/Measurement"

 
(11 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>Measurement</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 357: Line 357:
 
<style>
 
<style>
 
.caption {
 
.caption {
 +
font-size: 12pt;
 
font-weight: bold;
 
font-weight: bold;
 
margin-left: 25px;
 
margin-left: 25px;
 
}
 
}
−
+
 +
#div-figures{
 +
padding-bottom: 100px;
 +
font-size: 14pt;
 +
}
 +
 
.titleText {
 
.titleText {
−
margin-left: auto;
+
position: absolute;
−
margin-right: auto;
+
top: 350px;
 +
left: 50%;
 +
margin-left: -40%;
 +
right: auto;
 
width: 80%;
 
width: 80%;
−
min-width: 1000px;
+
min-width: 600px;
 
max-width: 1500px;
 
max-width: 1500px;
 
}
 
}
−
#div-figures{
+
−
padding-bottom: 100px;
+
h11, h21, h31 {
−
font-size: 14pt;
+
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 {
+
 +
         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: 50px;
 
padding-top: 50px;
−
background-color: #f9f9f9;
+
padding-bottom: 150px;
 
         }
 
         }
  
−
         #div-pic {
+
         .div-scrollPic {
 
             z-index: -999;
 
             z-index: -999;
 
             height: 500px;
 
             height: 500px;
Line 414: Line 422:
 
         }
 
         }
  
 +
.scrollContainer {
 +
 +
position: relative;
 +
width: 100%;
 +
}
 +
 
         .imageEmbed {
 
         .imageEmbed {
 
             /* creates border around image on each page */
 
             /* creates border around image on each page */
Line 423: 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 455: 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 496: 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 515: 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 522: 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 572: 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 607: Line 647:
 
 
 
<script>
 
<script>
 +
 +
        $('#div-slideshow').slick({
 +
dots: true
 +
        });
 +
 
$(window).resize(function() {
 
$(window).resize(function() {
−
var marginTotal = $('.titleText').outerWidth(true) - $('.titleText').outerWidth(false);
+
var marginTotal = $(window).outerWidth(true) - $('.titleText').outerWidth(false);
 
var marginLeft = marginTotal / 2;
 
var marginLeft = marginTotal / 2;
 
if (marginLeft > 14) {
 
if (marginLeft > 14) {
Line 616: Line 661:
 
}
 
}
 
 
−
var marginTitle = $('.titleText').outerWidth(true) - $('.titleText').outerWidth(false);
+
var marginTitle = $(window).outerWidth(true) - $('.titleText').outerWidth(false);
 
var marginCheck = marginTitle / 2;
 
var marginCheck = marginTitle / 2;
 
if (marginCheck < 15) {
 
if (marginCheck < 15) {
−
$('titleText').css('margin-left','15px');
+
$('.titleText').css('left','15px');
 +
$('.titleText').css('margin-left','0px');
 +
} else {
 +
$('.titleText').css('left','50%');
 +
$('.titleText').css('margin-left','-40%');
 
}
 
}
 
})
 
})
 
 
 
$(window).load(function() {
 
$(window).load(function() {
−
var marginTotal = $('.titleText').outerWidth(true) - $('.titleText').outerWidth(false);
+
            $('body').css('opacity', '1');
 +
var marginTotal = $(window).outerWidth(true) - $('.titleText').outerWidth(false);
 
var marginLeft = marginTotal / 2;
 
var marginLeft = marginTotal / 2;
−
if (marginCheck > 14) {
+
if (marginLeft > 14) {
 
$('.longText').css('margin-left', marginLeft);
 
$('.longText').css('margin-left', marginLeft);
 
}else {
 
}else {
Line 632: Line 682:
 
}
 
}
 
 
−
var marginTitle = $('.titleText').outerWidth(true) - $('.titleText').outerWidth(false);
+
var marginTitle = $(window).outerWidth(true) - $('.titleText').outerWidth(false);
 
var marginCheck = marginTitle / 2;
 
var marginCheck = marginTitle / 2;
 
if (marginCheck < 15) {
 
if (marginCheck < 15) {
−
$('titleText').css('margin-left','15px');
+
$('.titleText').css('left','15px');
 +
$('.titleText').css('margin-left','0px');
 +
} else {
 +
$('.titleText').css('left','50%');
 +
$('.titleText').css('margin-left','-40%');
 
}
 
}
 
})
 
})
Line 642: Line 696:
 
       <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 657: 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 665: 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 677: 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 688: 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 706: 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 718: 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 747: Line 799:
 
});
 
});
 
 
−
var element_position = $('#div-protocol').offset().top;
 
 
var toggle = 1;
 
var toggle = 1;
  
 +
 +
 
</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.