Difference between revisions of "Team:Edinburgh UG/InterLab"

Line 24: Line 24:
 
     <link href="https://2018.igem.org/Team:Edinburgh_UG/home_css?action=raw&ctype=text/css" rel="stylesheet">
 
     <link href="https://2018.igem.org/Team:Edinburgh_UG/home_css?action=raw&ctype=text/css" rel="stylesheet">
  
 +
    <!-- Menu from w3schools tutorial-->
 
     <style>
 
     <style>
 +
     
 +
      /* Add a black background color to the top navigation */
 +
      .topnav {
 +
          background-color: #333;
 +
          overflow: hidden;
 +
      }
  
−
       /* Dropdown Button */
+
       /* Style the links inside the navigation bar */
−
       .dropbtn {
+
       .topnav a {
−
           background-color: #4CAF50;
+
           float: left;
−
           color: white;
+
          display: block;
−
           padding: 16px;
+
          color: #f2f2f2;
−
           font-size: 16px;
+
           text-align: center;
−
           border: none;
+
           padding: 14px 16px;
 +
           text-decoration: none;
 +
           font-size: 17px;
 
       }
 
       }
  
−
       .btn {
+
      /* Add an active class to highlight the current page */
 +
       .active {
 
           background-color: #4CAF50;
 
           background-color: #4CAF50;
 
           color: white;
 
           color: white;
−
          padding: 16px;
 
−
          font-size: 16px;
 
−
          border: none;
 
 
       }
 
       }
  
−
       /* The container <div> - needed to position the dropdown content */
+
       /* Hide the link that should open and close the topnav on small screens */
 +
      .topnav .icon {
 +
          display: none;
 +
      }
 +
 
 +
      /* Dropdown container - needed to position the dropdown content */
 
       .dropdown {
 
       .dropdown {
−
           position: relative;
+
           float: left;
−
           display: inline-block;
+
           overflow: hidden;
 
       }
 
       }
  
−
       /* Dropdown Content (Hidden by Default) */
+
       /* Style the dropdown button to fit inside the topnav */
 +
      .dropdown .dropbtn {
 +
          font-size: 17px;
 +
          border: none;
 +
          outline: none;
 +
          color: white;
 +
          padding: 14px 16px;
 +
          background-color: inherit;
 +
          font-family: inherit;
 +
          margin: 0;
 +
      }
 +
 
 +
      /* Style the dropdown content (hidden by default) */
 
       .dropdown-content {
 
       .dropdown-content {
 
           display: none;
 
           display: none;
 
           position: absolute;
 
           position: absolute;
−
           background-color: #f1f1f1;
+
           background-color: #f9f9f9;
 
           min-width: 160px;
 
           min-width: 160px;
 
           box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
 
           box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
Line 59: Line 83:
 
       }
 
       }
  
−
       /* Links inside the dropdown */
+
       /* Style the links inside the dropdown */
 
       .dropdown-content a {
 
       .dropdown-content a {
 +
          float: none;
 
           color: black;
 
           color: black;
 
           padding: 12px 16px;
 
           padding: 12px 16px;
 
           text-decoration: none;
 
           text-decoration: none;
 
           display: block;
 
           display: block;
 +
          text-align: left;
 
       }
 
       }
  
−
       /* Change color of dropdown links on hover */
+
       /* Add a dark background on topnav links and the dropdown button on hover */
−
       .dropdown-content a:hover {background-color: #ddd;}
+
       .topnav a:hover, .dropdown:hover .dropbtn {
 +
          background-color: #555;
 +
          color: white;
 +
      }
  
−
       /* Show the dropdown menu on hover */
+
       /* Add a grey background to dropdown links on hover */
−
       .dropdown:hover .dropdown-content {display: block;}
+
       .dropdown-content a:hover {
 +
          background-color: #ddd;
 +
          color: black;
 +
      }
  
−
       /* Change the background color of the dropdown button when the dropdown content is shown */
+
       /* Show the dropdown menu when the user moves the mouse over the dropdown button */
−
       .dropdown:hover .dropbtn {background-color: #3e8e41;}
+
       .dropdown:hover .dropdown-content {
 +
          display: block;
 +
      }
  
−
  </style>
+
      /* When the screen is less than 600 pixels wide, hide all links, except for the first one ("Home"). Show the link that contains should open and close the topnav (.icon) */
 +
      @media screen and (max-width: 600px) {
 +
      .topnav a:not(:first-child), .dropdown .dropbtn {
 +
          display: none;
 +
      }
 +
 
 +
      .topnav a.icon {
 +
        float: right;
 +
        display: block;
 +
      }
 +
      }
 +
 
 +
      /* The "responsive" class is added to the topnav with JavaScript when the user clicks on the icon. This class makes the topnav look good on small screens (display the links vertically instead of horizontally) */
 +
      @media screen and (max-width: 600px) {
 +
      .topnav.responsive {position: relative;}
 +
      .topnav.responsive a.icon {
 +
        position: absolute;
 +
        right: 0;
 +
        top: 0;
 +
      }
 +
      .topnav.responsive a {
 +
        float: none;
 +
        display: block;
 +
        text-align: left;
 +
      }
 +
      .topnav.responsive .dropdown {float: none;}
 +
      .topnav.responsive .dropdown-content {position: relative;}
 +
      .topnav.responsive .dropdown .dropbtn {
 +
        display: block;
 +
        width: 100%;
 +
        text-align: left;
 +
      }
 +
  }
 +
    </style>
 +
 
 +
    <script>
 +
    /* Toggle between adding and removing the "responsive" class to topnav when the user clicks on the icon */
 +
    function myFunction() {
 +
      var x = document.getElementById("myTopnav");
 +
      if (x.className === "topnav") {
 +
          x.className += " responsive";
 +
      } else {
 +
          x.className = "topnav";
 +
      }
 +
    }
 +
    </script>
  
 
   </head>
 
   </head>
Line 82: Line 161:
 
   <body id="page-top">
 
   <body id="page-top">
  
−
  <!-- Menu -->
+
    <!-- Menu -->
−
  <div class="row">
+
    <div class="topnav" id="myTopnav">
−
    <div class="col-lg-8 mx-auto">
+
      <a href="#home" class="active">Home</a>
−
        <a class="btn" "href="https://2018.igem.org/Team:Edinburgh_UG" class="active">Home</a>
+
      <a href="#contact">Contact</a>
−
          <div class="dropdown">
+
      <div class="dropdown">
−
              <button class="dropbtn">Team</button>
+
          <button class="dropbtn">Team
−
                <div class="dropdown-content">
+
            <i class="fa fa-caret-down"></i>
−
                    <a href="#">Link 1</a>
+
          </button>
−
                    <a href="#">Link 2</a>
+
          <div class="dropdown-content">
−
                    <a href="#">Link 3</a>
+
            <a href="#">Team Members</a>
−
                </div>
+
            <a href="#">Collaborations</a>
−
          </div>
+
          </div>
−
    </div>
+
      </div>
−
  </div>
+
      <div class="dropdown">
 +
          <button class="dropbtn">Project
 +
            <i class="fa fa-caret-down"></i>
 +
          </button>
 +
          <div class="dropdown-content">
 +
            <a href="#">Description</a>
 +
            <a href="#">Collaborations</a>
 +
            <a href="#">Team Members</a>
 +
            <a href="#">Collaborations</a>
 +
            <a href="#">Team Members</a>
 +
            <a href="#">Collaborations</a>
 +
            <a href="#">Team Members</a>
 +
            <a href="#">Collaborations</a>
 +
            <a href="#">Team Members</a>
 +
            <a href="#">Collaborations</a>
 +
          </div>
 +
      </div>  
 +
      <a href="#about">About</a>
 +
      <a href="javascript:void(0);" class="icon" onclick="myFunction()">&#9776;</a>
 +
    </div>
  
 
     <!-- Intro Header -->
 
     <!-- Intro Header -->

Revision as of 11:44, 23 July 2018

Edinburgh iGEM 2018

InterLab

Introduction

Accurate and reproducible measurements are essential to all science and this is no different in Synthetic Biology. The comparison of fluorescence data remains a big challenge. We were delighted to participate in a study with iGEM teams around all over the world with the goal of determining the accuracy of GFP fluorescence data of some particular test devices. This year we characterized eight plasmids (BBa_R0040, BBa_I20270, BBa_J364000, BBa_J364001, BBa_J364002, BBa_J364007, BBa_J364008, BBa_J364009) by following the iGEM InterLab 2018 protocol provided.

Materials and Methods

DHT5 alpha strain was obtained by collaboration with Edinburgh Overgraduate iGEM team. Then, everything was done by following iGEM interlab protocol. Lab notebook with all time points and deviations from the protocol can be find here.

Results

Calibration

OD600 Reference Point

Absorbance of 0.051 of LUDOX CL-X was obtained with standard deviation of 0.005 while double distilled water had all four replicates at the same value of 0.034, implying that both measurements were done precisely.

Particle Standard Curve

Particle standard curve was obtained with R2 value of 0.998 (Figure 1). However, logarithmic scale graph (Figure 2) represented less accurate measurement than linear curve (R2=0.993, red line), as linear graph was obtained only in high concentration of particles. Not very high precision may be due to the low absorbance values that is not in a plate reader range or when the absorbance is less than 0.1. Analysing the calibration curve in higher concentrations only, linear fit represented high accuracy in logarithmic scale with R2=0.998.

Fluoresence Standard Curve

Fluoresence measurement may be considered as accurate as the data in both graphs (Figure 3 and Figure 4 for logarithmic scale) fit to a line with a value of R2 very close to 1. The slope on logarithmic scale is very close to 1 as well (slope = 0.969, Figure 4) which suggest that the data is considerably good.

Cell Measurement

Absorbance and fluorescence measurement using a plate reader

As the absorbance increased in time in all devices and both (positive and negative) controls (Figure 5), it suggests that cells grew in all devices during 6 hours time period, indicating that negative control grew slowest, then TD1 and TD4 grew slightly faster, while all the other devices were similar in the speed of growth. There is no significant relation between cells growth and fluorescence as an order of increasing absorbance or fluorescence varies among different test devices. As expected, negative control has no significant fluorescence. Least measurement of fluorescence was obtained in Test Device 4 and highest was obtained in Test Device 2.

Contact EdiGEM18

Feel free to leave us a comment on social media!

Copyright © EdiGEM18