Difference between revisions of "Team:NUS Singapore/Notebook/Group1"

Line 3: Line 3:
 
<!DOCTYPE html>
 
<!DOCTYPE html>
 
<html lang="en" class="no-js">
 
<html lang="en" class="no-js">
<head>
+
    <head>
<meta charset="UTF-8" />
+
        <meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
+
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1">
+
        <meta name="viewport" content="width=device-width, initial-scale=1">
<title>Interactive Points | Codrops</title>
+
        <title>Interactive Points | Codrops</title>
<meta name="keywords" content="opacity, background, hover, transparency, effect, css, html, javascript, template, point of interest, map" />
+
        <meta name="keywords" content="opacity, background, hover, transparency, effect, css, html, javascript, template, point of interest, map" />
<meta name="author" content="Codrops" />
+
        <meta name="author" content="Codrops" />
<link rel="shortcut icon" href="favicon.ico">
+
        <link rel="shortcut icon" href="favicon.ico">
  
  
<!-- <script src="js/modernizr.custom.js"></script> -->
+
        <!-- <script src="js/modernizr.custom.js"></script> -->
  
<!--[if IE]>
+
        <!--[if IE]>
  <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
+
        <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
+
        <![endif]-->
</head>
+
    </head>
<body>
+
    <body>
<main>
+
        <main>
<div id="st-container" class="st-container">
+
            <div id="st-container" class="st-container">
<div class="st-pusher">
+
                <div class="st-pusher">
  
 
                     <!--Sidebar button-->
 
                     <!--Sidebar button-->
Line 32: Line 32:
 
                     <!--End of Sidebar button-->
 
                     <!--End of Sidebar button-->
  
<!--Header-->
+
                    <!--Header-->
<header id="ha-header" class="ha-header ha-header-large">
+
                    <header id="ha-header" class="ha-header ha-header-large">
<div class="ha-header-perspective">
+
                        <div class="ha-header-perspective">
<div id="header1" class="ha-header-front" style="height: 120px">
+
                            <div id="header1" class="ha-header-front" style="height: 120px">
<a href="https://2016.igem.org/Team:NUS_Singapore"><img id="nus_logo" src="https://static.igem.org/mediawiki/2016/1/1d/T--NUS_Singapore--header_left.png" style="height: 130%; margin-top: -10px; left: 0px; position: absolute;"/></a>
+
                                <a href="https://2016.igem.org/Team:NUS_Singapore"><img id="nus_logo" src="https://static.igem.org/mediawiki/2016/1/1d/T--NUS_Singapore--header_left.png" style="height: 130%; margin-top: -10px; left: 0px; position: absolute;"/></a>
<a href="http://www.science.nus.edu.sg"><img id="sci_logo" src="https://static.igem.org/mediawiki/2016/2/21/T--NUS_Singapore--NUS_Science_logo_grey.png" style="height: 70%; margin-top: 25px; right: 0px; position: absolute;"/></a>
+
                                <a href="http://www.science.nus.edu.sg"><img id="sci_logo" src="https://static.igem.org/mediawiki/2016/2/21/T--NUS_Singapore--NUS_Science_logo_grey.png" style="height: 70%; margin-top: 25px; right: 0px; position: absolute;"/></a>
<a href="http://sps.nus.edu.sg/alpha"><img id="sps_logo" src="https://static.igem.org/mediawiki/2016/e/ec/T--NUS_Singapore--SPS_Logo_High_Res_grey.png" style="height: 60%; margin-top: 25px; right: 280px; position: absolute;"/></a>
+
                                <a href="http://sps.nus.edu.sg/alpha"><img id="sps_logo" src="https://static.igem.org/mediawiki/2016/e/ec/T--NUS_Singapore--SPS_Logo_High_Res_grey.png" style="height: 60%; margin-top: 25px; right: 280px; position: absolute;"/></a>
<div style="height: 7%; background-color: rgb(217, 215, 215); width: 100%; bottom: 0px; left: 0px; position: absolute;"></div>
+
                                <div style="height: 7%; background-color: rgb(217, 215, 215); width: 100%; bottom: 0px; left: 0px; position: absolute;"></div>
</div>
+
                            </div>
<div class="ha-header-bottom" style="text-align: center;">
+
                            <div class="ha-header-bottom" style="text-align: center;">
<a><h1><a href="https://2016.igem.org/Team:NUS_Singapore" style="color: black; font-weight: lighter;">iGEM 2016 &nbsp; &nbsp; &nbsp; &nbsp; NUS SINGAPORE</a></h1></a>
+
                                <a><h1><a href="https://2016.igem.org/Team:NUS_Singapore" style="color: black; font-weight: lighter;">iGEM 2016 &nbsp; &nbsp; &nbsp; &nbsp; NUS SINGAPORE</a></h1></a>
</div>
+
                            </div>
</div>
+
                        </div>
</header>
+
                    </header>
<!--End of Header-->
+
                    <!--End of Header-->
  
<!--Side Bar-->
+
                    <!--Side Bar-->
<nav class="st-menu st-effect-1 list-group panel" id="menu-1" style="overflow: auto; z-index: 100; background-color: rgb(179, 179, 179);">
+
                    <nav class="st-menu st-effect-1 list-group panel" id="menu-1" style="overflow: auto; z-index: 100; background-color: rgb(179, 179, 179);">
 
<span><img src="https://static.igem.org/mediawiki/2016/1/1e/T--NUS_Singapore--practice.png" style="width: 30px; height: auto; top: 35px; left: 35px; position: absolute;"><h4 style=" left: 75px; top: 25px; position: absolute; font-size: 17px;">NUS_SINGAPORE</h4></span>
 
<span><img src="https://static.igem.org/mediawiki/2016/1/1e/T--NUS_Singapore--practice.png" style="width: 30px; height: auto; top: 35px; left: 35px; position: absolute;"><h4 style=" left: 75px; top: 25px; position: absolute; font-size: 17px;">NUS_SINGAPORE</h4></span>
<ul>
+
                        <ul>
<li><a class="icon icon-home" id="menu-item-1" href="https://2016.igem.org/Team:NUS_Singapore">Home</a></li>
+
                            <li><a class="icon icon-home" id="menu-item-1" href="https://2016.igem.org/Team:NUS_Singapore">Home</a></li>
<li><a class="icon icon-project" onclick="growDiv('2')" id="menu-item-2" href="https://2016.igem.org/Team:NUS_Singapore/Project">Project
+
                            <li><a class="icon icon-project" onclick="growDiv('2')" id="menu-item-2" href="https://2016.igem.org/Team:NUS_Singapore/Project">Project
<span><img id="sidebar-arrow-2" src="https://static.igem.org/mediawiki/2016/c/ce/T--NUS_Singapore--scroll-down-arrow.png" style="position: relative; height: 20px; float: right;"></span></a>
+
                                <span><img id="sidebar-arrow-2" src="https://static.igem.org/mediawiki/2016/c/ce/T--NUS_Singapore--scroll-down-arrow.png" style="position: relative; height: 20px; float: right;"></span></a>
<div class="grow" id="grow-2">
+
                                <div class="grow" id="grow-2">
<div class='measuringWrapper'>
+
                                    <div class='measuringWrapper'>
  <a href="https://2016.igem.org/Team:NUS_Singapore/Project/Wet_Lab" class="list-group-item" style="color: rgb(179, 179, 179);">Overview</a>
+
                                      <a href="https://2016.igem.org/Team:NUS_Singapore/Project/Wet_Lab" class="list-group-item" style="color: rgb(179, 179, 179);">Overview</a>
 
+
                                     
 
<a href="https://2016.igem.org/Team:NUS_Singapore/Model" class="list-group-item" style="color: rgb(179, 179, 179);">Modelling</a>
 
<a href="https://2016.igem.org/Team:NUS_Singapore/Model" class="list-group-item" style="color: rgb(179, 179, 179);">Modelling</a>
</div>
+
                                    </div>
</div>
+
                                </div>
</li>
+
                            </li>
 
<li><a class="icon icon-notebook"  id="menu-item-9" onclick="growDiv('9')"  href="https://2016.igem.org/Team:NUS_Singapore/Notebook">RIOTSensor
 
<li><a class="icon icon-notebook"  id="menu-item-9" onclick="growDiv('9')"  href="https://2016.igem.org/Team:NUS_Singapore/Notebook">RIOTSensor
<span><img id="sidebar-arrow-9" src="https://static.igem.org/mediawiki/2016/c/ce/T--NUS_Singapore--scroll-down-arrow.png" style="position: relative; height: 20px; float: right;"></span></a>
+
                                <span><img id="sidebar-arrow-9" src="https://static.igem.org/mediawiki/2016/c/ce/T--NUS_Singapore--scroll-down-arrow.png" style="position: relative; height: 20px; float: right;"></span></a>
<div class="grow" id="grow-9">
+
                                <div class="grow" id="grow-9">
<div class='measuringWrapper'>
+
                                    <div class='measuringWrapper'>
  <a href="https://2016.igem.org/Team:NUS_Singapore/Description" class="list-group-item" style="color: rgb(179, 179, 179);">Description</a>
+
                                      <a href="https://2016.igem.org/Team:NUS_Singapore/Description" class="list-group-item" style="color: rgb(179, 179, 179);">Description</a>
 
<a href="https://2016.igem.org/Team:NUS_Singapore/Proof" class="list-group-item" style="color: rgb(179, 179, 179);">Proof of Concept</a>
 
<a href="https://2016.igem.org/Team:NUS_Singapore/Proof" class="list-group-item" style="color: rgb(179, 179, 179);">Proof of Concept</a>
  <a href="https://2016.igem.org/Team:NUS_Singapore/Demonstrate" class="list-group-item" style="color: rgb(179, 179, 179);">Demonstration</a>
+
                                      <a href="https://2016.igem.org/Team:NUS_Singapore/Demonstrate" class="list-group-item" style="color: rgb(179, 179, 179);">Demonstration</a>
+
               
</div>
+
                                    </div>
</div>
+
                                </div>
</li>
+
                            </li>
 
<li><a class="icon icon-notebook" id="menu-item-5" href="https://2016.igem.org/Team:NUS_Singapore/RIOTResponder">RIOTResponder</a></li>
 
<li><a class="icon icon-notebook" id="menu-item-5" href="https://2016.igem.org/Team:NUS_Singapore/RIOTResponder">RIOTResponder</a></li>
 
<li><a class="icon icon-notebook" id="menu-item-5" href="https://2016.igem.org/Team:NUS_Singapore/RIOTInvader">RIOTInvader</a></li>
 
<li><a class="icon icon-notebook" id="menu-item-5" href="https://2016.igem.org/Team:NUS_Singapore/RIOTInvader">RIOTInvader</a></li>
<li><a class="icon icon-practice" onclick="growDiv('3')" id="menu-item-3" href="#">Human Practices
+
                            <li><a class="icon icon-practice" onclick="growDiv('3')" id="menu-item-3" href="#">Human Practices
<span><img id="sidebar-arrow-3" src="https://static.igem.org/mediawiki/2016/c/ce/T--NUS_Singapore--scroll-down-arrow.png" style="position: relative; height: 20px; float: right;"><span></a>
+
                                <span><img id="sidebar-arrow-3" src="https://static.igem.org/mediawiki/2016/c/ce/T--NUS_Singapore--scroll-down-arrow.png" style="position: relative; height: 20px; float: right;"><span></a>
<div class="grow" id="grow-3">
+
                                <div class="grow" id="grow-3">
<div class='measuringWrapper'>
+
                                    <div class='measuringWrapper'>
 
                                                                           <a href="https://2016.igem.org/Team:NUS_Singapore/HP/Silver" class="list-group-item" style="color: rgb(179, 179, 179);">Survey</a>
 
                                                                           <a href="https://2016.igem.org/Team:NUS_Singapore/HP/Silver" class="list-group-item" style="color: rgb(179, 179, 179);">Survey</a>
 
                                                                           <a href="https://2016.igem.org/Team:NUS_Singapore/HP/Gold" class="list-group-item" style="color: rgb(179, 179, 179);">Business Plan</a>
 
                                                                           <a href="https://2016.igem.org/Team:NUS_Singapore/HP/Gold" class="list-group-item" style="color: rgb(179, 179, 179);">Business Plan</a>
 
<a href="https://2016.igem.org/Team:NUS_Singapore/Integrated_Practices" class="list-group-item" style="color: rgb(179, 179, 179);">Integration</a>
 
<a href="https://2016.igem.org/Team:NUS_Singapore/Integrated_Practices" class="list-group-item" style="color: rgb(179, 179, 179);">Integration</a>
</div>
+
                                    </div>
</div>
+
                                </div>
</li>
+
                            </li>
<li><a class="icon icon-collaboration" onclick="growDiv('4')" id="menu-item-4" href="#">Collaborations
+
                            <li><a class="icon icon-collaboration" onclick="growDiv('4')" id="menu-item-4" href="#">Collaborations
 
                                                                 <span><img id="sidebar-arrow-4" src="https://static.igem.org/mediawiki/2016/c/ce/T--NUS_Singapore--scroll-down-arrow.png" style="position: relative; height: 20px; float: right;"></span></a>
 
                                                                 <span><img id="sidebar-arrow-4" src="https://static.igem.org/mediawiki/2016/c/ce/T--NUS_Singapore--scroll-down-arrow.png" style="position: relative; height: 20px; float: right;"></span></a>
<div class="grow" id="grow-4">
+
                                <div class="grow" id="grow-4">
<div class='measuringWrapper'>
+
                                    <div class='measuringWrapper'>
  <a href="https://2016.igem.org/Team:NUS_Singapore/Collaborations" class="list-group-item" style="color: rgb(179, 179, 179);">Melbourne</a>
+
                                      <a href="https://2016.igem.org/Team:NUS_Singapore/Collaborations" class="list-group-item" style="color: rgb(179, 179, 179);">Melbourne</a>
  <a href="https://2016.igem.org/Team:NUS_Singapore/Collaborations" class="list-group-item" style="color: rgb(179, 179, 179);">Hong_Kong_HKU</a>
+
                                      <a href="https://2016.igem.org/Team:NUS_Singapore/Collaborations" class="list-group-item" style="color: rgb(179, 179, 179);">Hong_Kong_HKU</a>
  <a href="https://2016.igem.org/Team:NUS_Singapore/Collaborations" class="list-group-item" style="color: rgb(179, 179, 179);">ETH_Zurich</a>
+
                                      <a href="https://2016.igem.org/Team:NUS_Singapore/Collaborations" class="list-group-item" style="color: rgb(179, 179, 179);">ETH_Zurich</a>
</div>
+
                                    </div>
</div>
+
                                </div>
</li>
+
                            </li>
 
                                                         <li><a class="icon icon-notebook" id="menu-item-5" href="https://2016.igem.org/Team:NUS_Singapore/Parts">Parts Registry</a></li>
 
                                                         <li><a class="icon icon-notebook" id="menu-item-5" href="https://2016.igem.org/Team:NUS_Singapore/Parts">Parts Registry</a></li>
<li><a class="icon icon-safety" id="menu-item-5" href="https://2016.igem.org/Team:NUS_Singapore/Safety">Safety</a></li>
+
                            <li><a class="icon icon-safety" id="menu-item-5" href="https://2016.igem.org/Team:NUS_Singapore/Safety">Safety</a></li>
  
<li><a class="icon icon-team" id="menu-item-6" href="https://2016.igem.org/Team:NUS_Singapore/Team">Team</a></li>
+
                            <li><a class="icon icon-team" id="menu-item-6" href="https://2016.igem.org/Team:NUS_Singapore/Team">Team</a></li>
<li><a class="icon icon-notebook"  id="menu-item-7" onclick="growDiv('7')"  href="https://2016.igem.org/Team:NUS_Singapore/Notebook">Notebook
+
                            <li><a class="icon icon-notebook"  id="menu-item-7" onclick="growDiv('7')"  href="https://2016.igem.org/Team:NUS_Singapore/Notebook">Notebook
<span><img id="sidebar-arrow-7" src="https://static.igem.org/mediawiki/2016/c/ce/T--NUS_Singapore--scroll-down-arrow.png" style="position: relative; height: 20px; float: right;"></span></a>
+
                                <span><img id="sidebar-arrow-7" src="https://static.igem.org/mediawiki/2016/c/ce/T--NUS_Singapore--scroll-down-arrow.png" style="position: relative; height: 20px; float: right;"></span></a>
<div class="grow" id="grow-7">
+
                                <div class="grow" id="grow-7">
<div class='measuringWrapper'>
+
                                    <div class='measuringWrapper'>
  <a href="https://2016.igem.org/Team:NUS_Singapore/Notebook/Group1" class="list-group-item" style="color: rgb(179, 179, 179);">I. RIOT Sensor</a>
+
                                      <a href="https://2016.igem.org/Team:NUS_Singapore/Notebook/Group1" class="list-group-item" style="color: rgb(179, 179, 179);">I. RIOT Sensor</a>
  <a href="https://2016.igem.org/Team:NUS_Singapore/Notebook/Group2" class="list-group-item" style="color: rgb(179, 179, 179);">II. RIOT Responder</a>
+
                                      <a href="https://2016.igem.org/Team:NUS_Singapore/Notebook/Group2" class="list-group-item" style="color: rgb(179, 179, 179);">II. RIOT Responder</a>
  <a href="https://2016.igem.org/Team:NUS_Singapore/Notebook/Group3" class="list-group-item" style="color: rgb(179, 179, 179);">III. RIOT Invader</a>
+
                                      <a href="https://2016.igem.org/Team:NUS_Singapore/Notebook/Group3" class="list-group-item" style="color: rgb(179, 179, 179);">III. RIOT Invader</a>
</div>
+
                                    </div>
</div>
+
                                </div>
</li>
+
                            </li>
<li><a class="icon icon-acknowledgement" id="menu-item-8" href="https://2016.igem.org/Team:NUS_Singapore/Attributions">Attributions</a></li>
+
                            <li><a class="icon icon-acknowledgement" id="menu-item-8" href="https://2016.igem.org/Team:NUS_Singapore/Attributions">Attributions</a></li>
 
                             <li><a class="icon icon-cup" id="menu-item-8" href="https://2016.igem.org/Team:NUS_Singapore/Medals">Medals</a></li>
 
                             <li><a class="icon icon-cup" id="menu-item-8" href="https://2016.igem.org/Team:NUS_Singapore/Medals">Medals</a></li>
</ul>
+
                        </ul>
</nav>
+
                    </nav>
<!--End of Side Bar-->
+
                    <!--End of Side Bar-->
+
                   
<div class="demos">
+
                    <div class="demos">
<a class="current-demo" href="index.html">Default Demo</a>
+
                <a class="current-demo" href="index.html">Default Demo</a>
<a href="index2.html">Perspective Demo (Webkit only)</a>
+
                <a href="index2.html">Perspective Demo (Webkit only)</a>
</div>
+
            </div>
 
             <div style="position: absolute; height: 250px; width: 100%; background-color: black; z-index: -1;"></div>
 
             <div style="position: absolute; height: 250px; width: 100%; background-color: black; z-index: -1;"></div>
 
             <h2 class="ss-subtitle">Wet Lab Notebook: RIOT SENSOR</h2>
 
             <h2 class="ss-subtitle">Wet Lab Notebook: RIOT SENSOR</h2>
<div id="ss-links" class="ss-links" style="z-index: 99;">
+
            <div id="ss-links" class="ss-links" style="z-index: 99;">
<a href="#st-container">Jun</a>
+
                <a href="#st-container">Jun</a>
<a href="#july">Jul</a>
+
                <a href="#july">Jul</a>
<a href="#august">Aug</a>
+
                <a href="#august">Aug</a>
<a href="#september">Sep</a>
+
                <a href="#september">Sep</a>
<a href="#october">Oct</a>
+
                <a href="#october">Oct</a>
</div>
+
            </div>
 
             <div id="ss-container" class="ss-container" style="background-color: white;">
 
             <div id="ss-container" class="ss-container" style="background-color: white;">
 
                 <div class="ss-row">
 
                 <div class="ss-row">
Line 175: Line 175:
 
                     </div>
 
                     </div>
 
                 </div>
 
                 </div>
<div class="ss-row ss-large">
+
                <div class="ss-row ss-large">
 
                     <div class="ss-left">
 
                     <div class="ss-left">
 
                         <h3>
 
                         <h3>
Line 182: Line 182:
 
                         </h3>
 
                         </h3>
 
                     </div>
 
                     </div>
<div class="ss-right ha-waypoint" data-animate-down="ha-header-rotate" data-animate-up="ha-header-rotateBack">
+
                    <div class="ss-right ha-waypoint" data-animate-down="ha-header-rotate" data-animate-up="ha-header-rotateBack">
 
                         <div class="log-content ss-circle-deco">
 
                         <div class="log-content ss-circle-deco">
 
                             <p>The p70 fragment with overhang sequence of ALR (Fig 2) was synthesized using PCR with Pfu polymerase and primers ALR 21 and ALR 34. The annealing temperature was 57.9oC and the extension time was 1 min.</p>
 
                             <p>The p70 fragment with overhang sequence of ALR (Fig 2) was synthesized using PCR with Pfu polymerase and primers ALR 21 and ALR 34. The annealing temperature was 57.9oC and the extension time was 1 min.</p>
Line 213: Line 213:
 
                 <div class="ss-row ss-large">
 
                 <div class="ss-row ss-large">
 
                     <div class="ss-left">
 
                     <div class="ss-left">
<div class="log-content ss-circle-deco">
+
                        <div class="log-content ss-circle-deco">
 
                             <p>t0 lambda terminator was amplified by PCR using Pfu polymerase, along with primers ALR 25 and ALR 26.</p>
 
                             <p>t0 lambda terminator was amplified by PCR using Pfu polymerase, along with primers ALR 25 and ALR 26.</p>
 
                             <div style="float: left; display: inline-block; padding: 20px 0px 20px 0px;">
 
                             <div style="float: left; display: inline-block; padding: 20px 0px 20px 0px;">
Line 232: Line 232:
 
                     </div>
 
                     </div>
 
                 </div>
 
                 </div>
<div class="ss-row ss-large">
+
                <div class="ss-row ss-large">
 
                     <div class="ss-left">
 
                     <div class="ss-left">
 
                         <h3>
 
                         <h3>
Line 239: Line 239:
 
                         </h3>
 
                         </h3>
 
                     </div>
 
                     </div>
<div class="ss-right">
+
                    <div class="ss-right">
 
                         <div class="log-content ss-circle-deco">
 
                         <div class="log-content ss-circle-deco">
 
                             <ol>
 
                             <ol>
Line 260: Line 260:
 
                     </div>
 
                     </div>
 
                 </div>
 
                 </div>
<div class="ss-row ss-large">
+
                <div class="ss-row ss-large">
 
                     <div class="ss-left">
 
                     <div class="ss-left">
 
                         <div class="log-content ss-circle-deco">
 
                         <div class="log-content ss-circle-deco">
Line 296: Line 296:
 
                     </div>
 
                     </div>
 
                 </div>
 
                 </div>
<div class="ss-row ss-large">
+
                <div class="ss-row ss-large">
 
                     <div class="ss-left">
 
                     <div class="ss-left">
 
                         <div class="log-content ss-circle-deco">
 
                         <div class="log-content ss-circle-deco">
Line 321: Line 321:
 
                     </div>
 
                     </div>
 
                 </div>
 
                 </div>
<div class="ss-row ss-large">
+
                <div class="ss-row ss-large">
 
                     <div class="ss-left">
 
                     <div class="ss-left">
 
                         <h3>
 
                         <h3>
Line 328: Line 328:
 
                         </h3>
 
                         </h3>
 
                     </div>
 
                     </div>
<div class="ss-right">
+
                    <div class="ss-right">
 
                         <div class="log-content ss-circle-deco">
 
                         <div class="log-content ss-circle-deco">
 
                             <p>Upon characterization, it appeared that the promoters with strong ribosomal binding site (RBS, BBa_B0034) exhibited high leakiness. Therefore, we designed this series of constructs by replacing the strong RBS by the medium (BBa_B0032: 30% strength of B0034) and weak RBS (BBa_B0033: 1% strength of B0034). Each promoter fragment p70, p62 and J23100 (without RBS) were isolated and amplified by PCR from the construct 1, 2 and 3 respectively. Each promoter fragment (without RBS) was ligated to the ALR-Terminator fragment by PCR overlap using primers having the overhang sequence of either medium or weak RBS.</p>
 
                             <p>Upon characterization, it appeared that the promoters with strong ribosomal binding site (RBS, BBa_B0034) exhibited high leakiness. Therefore, we designed this series of constructs by replacing the strong RBS by the medium (BBa_B0032: 30% strength of B0034) and weak RBS (BBa_B0033: 1% strength of B0034). Each promoter fragment p70, p62 and J23100 (without RBS) were isolated and amplified by PCR from the construct 1, 2 and 3 respectively. Each promoter fragment (without RBS) was ligated to the ALR-Terminator fragment by PCR overlap using primers having the overhang sequence of either medium or weak RBS.</p>
 
                             <img src="https://static.igem.org/mediawiki/2016/7/71/T--NUS_Singapore--image06.png" style="display: block; width: 70%; margin: auto; padding: 20px 0px 20px 0px; ">
 
                             <img src="https://static.igem.org/mediawiki/2016/7/71/T--NUS_Singapore--image06.png" style="display: block; width: 70%; margin: auto; padding: 20px 0px 20px 0px; ">
 
                             <p>Fig 9. Synthesis of constructs 4-9.
 
                             <p>Fig 9. Synthesis of constructs 4-9.
                            <ul>
+
                                <ul>
                                <li>Construct 4: p70-32-ALR-Terminator</li>
+
                                    <li>Construct 4: p70-32-ALR-Terminator</li>
                                <li>Construct 5: p62-32-ALR-Terminator</li>
+
                                    <li>Construct 5: p62-32-ALR-Terminator</li>
                                <li>Construct 6: J23100-32-ALR-Terminator</li>
+
                                    <li>Construct 6: J23100-32-ALR-Terminator</li>
                                <li>Construct 7: p70-33-ALR-Terminator</li>
+
                                    <li>Construct 7: p70-33-ALR-Terminator</li>
                                <li>Construct 8: p62-33-ALR-Terminator</li>
+
                                    <li>Construct 8: p62-33-ALR-Terminator</li>
                                <li>Construct 9: J23100-33-ALR-Terminator</li>
+
                                    <li>Construct 9: J23100-33-ALR-Terminator</li>
 
                                 </ul>
 
                                 </ul>
 
                             </p>
 
                             </p>
Line 359: Line 359:
 
                     </div>
 
                     </div>
 
                 </div>
 
                 </div>
<div class="ss-row ss-large">
+
                <div class="ss-row ss-large">
 
                     <div class="ss-left">
 
                     <div class="ss-left">
 
                       <h3>
 
                       <h3>
Line 367: Line 367:
 
                     </div>
 
                     </div>
 
                     <div class="ss-right">
 
                     <div class="ss-right">
<div class="log-content ss-circle-deco">
+
                        <div class="log-content ss-circle-deco">
 
                             <p>We performed the characterization process same as what we did with RIOT sensors 1-3 in milestone 6.</p>
 
                             <p>We performed the characterization process same as what we did with RIOT sensors 1-3 in milestone 6.</p>
 
                             <ul>
 
                             <ul>
Line 376: Line 376:
 
                     </div>
 
                     </div>
 
                 </div>
 
                 </div>
<div class="ss-row ss-large">
+
                <div class="ss-row ss-large">
 
                     <div class="ss-left">
 
                     <div class="ss-left">
 
                         <div class="log-content ss-circle-deco">
 
                         <div class="log-content ss-circle-deco">
Line 390: Line 390:
 
                             <p style="clear: both;">Fig 10. Synthesis of constructs 10 and 11.</p>
 
                             <p style="clear: both;">Fig 10. Synthesis of constructs 10 and 11.</p>
 
                             <ol>
 
                             <ol>
                                 <li>Construct 10: p70-33-sfGFP-Terminator. The expected size is 1056 base pairs (bp). Lane 7 marks the DNA ladder. Lane 1-4 are replicates of the same PCR reaction.</li>
+
                                 <li>Construct 10: p70-33-sfGFP-Terminator. The expected size is 1056 base pairs (bp). Lane 1(7) marks the DNA ladder. Lane 4-7(1-4) are replicates of the same PCR reaction.</li>
                                 <li>Construct 11 : p62-33-sfGPP-Terminator. The expected size is 1056 bps. Lane 1 marks the DNA ladder. Lane 4-7 are replicates of the same PCR reaction.</li>
+
                                 <li>Construct 11 : p62-33-sfGPP-Terminator. The expected size is 1056 bps. Lane 7(1) marks the DNA ladder. Lane 1-4(4-7) are replicates of the same PCR reaction.</li>
 
                             </ol>
 
                             </ol>
 
                         </div>
 
                         </div>
Line 410: Line 410:
 
                     </div>
 
                     </div>
 
                 </div>
 
                 </div>
<div class="ss-row ss-large">
+
                <div class="ss-row ss-large">
 
                     <div class="ss-left">
 
                     <div class="ss-left">
<h3>
+
                        <h3>
 
                             <span>1 October, 2016</span>
 
                             <span>1 October, 2016</span>
 
                             <a>Milestone 10:</br> Characterization of RIOT Sensors 10 and 11</a>
 
                             <a>Milestone 10:</br> Characterization of RIOT Sensors 10 and 11</a>
Line 418: Line 418:
 
                     </div>
 
                     </div>
 
                     <div class="ss-right">
 
                     <div class="ss-right">
<div class="log-content ss-circle-deco">
+
                        <div class="log-content ss-circle-deco">
 
                             <p>Culture mammalian cell lines HeLa and HepG2</p>
 
                             <p>Culture mammalian cell lines HeLa and HepG2</p>
 
                             <ol>
 
                             <ol>
Line 440: Line 440:
 
                     </div>
 
                     </div>
 
                 </div>
 
                 </div>
 +
 +
                          <div class="ss-row ss-large">
 +
            <div class="ss-left">
 +
              <div class="log-content ss-circle-deco" style="margin-top: 20px;">
 +
                <p>Materials: harvest supernatants of HeLa and HepG2 as shown in Milestone 10 and overnight culture of bacteria</p></br>
 +
                <p>Centrifuge bacterial cell culture at 5000 rpm for 10 minutes and remove supernatant for the assay</p></br>
 +
                <p>Each sample was 100x diluted. 1 μl of diluted supernatant of HeLa, HepG2 and 5 μl of diluted bacterial supernatant grown in LB  and the cell media, DMEM were added into the buffer and enzyme mix separately for each well in the 96-well plate. DMEM which is free of phenol red and serum serves as a negative control.</p></br>
 +
                <p>Carry out the assay as instructed in the protocol of the lactate assay kit from Sigma-Aldrich (catalog number: MAK064)</p></br>
 +
              </div>
 +
            </div>
 +
            <div class="ss-right">
 +
              <h3>
 +
                <span>13 Oct, 2016</span>
 +
                <a>Milestone 11: Measure lactate concentration in supernatant of HeLa, HepG2 and bacteria</a>
 +
              </h3>
 +
            </div>
 +
          </div>
 +
 
             </div>
 
             </div>
 
         </div>
 
         </div>
Line 445: Line 463:
  
  
+
                   
  
  
<section class="content content--related">
+
                    <section class="content content--related">
<ul class="copyright">
+
                        <ul class="copyright">
<li>&copy; NUS_Singapore iGEM 2016</li>
+
                            <li>&copy; NUS_Singapore iGEM 2016</li>
</ul>
+
                        </ul>
</section>
+
                    </section>
 
<a href="#" class="go-top">Go To Top</a>
 
<a href="#" class="go-top">Go To Top</a>
</div><!-- /st-pusher -->
+
                </div><!-- /st-pusher -->
</div><!-- /st-container -->
+
            </div><!-- /st-container -->
</main>
+
        </main>
 
<script>
 
<script>
 
$(function() {
 
$(function() {
  
var $sidescroll = (function() {
+
            var $sidescroll = (function() {
+
                   
// the row elements
+
                    // the row elements
var $rows = $('#ss-container > div.ss-row'),
+
                var $rows           = $('#ss-container > div.ss-row'),
// we will cache the inviewport rows and the outside viewport rows
+
                    // we will cache the inviewport rows and the outside viewport rows
$rowsViewport, $rowsOutViewport,
+
                    $rowsViewport, $rowsOutViewport,
// navigation menu links
+
                    // navigation menu links
$links = $('#ss-links > a'),
+
                    $links         = $('#ss-links > a'),
// the window element
+
                    // the window element
$win = $(window),
+
                    $win           = $(window),
// we will store the window sizes here
+
                    // we will store the window sizes here
winSize = {},
+
                    winSize         = {},
// used in the scroll setTimeout function
+
                    // used in the scroll setTimeout function
anim = false,
+
                    anim           = false,
// page scroll speed
+
                    // page scroll speed
scollPageSpeed = 2000 ,
+
                    scollPageSpeed = 2000 ,
// page scroll easing
+
                    // page scroll easing
scollPageEasing = 'easeInOutExpo',
+
                    scollPageEasing = 'easeInOutExpo',
// perspective?
+
                    // perspective?
hasPerspective = false,
+
                    hasPerspective = false,
+
                   
perspective = hasPerspective && Modernizr.csstransforms3d,
+
                    perspective     = hasPerspective && Modernizr.csstransforms3d,
// initialize function
+
                    // initialize function
init = function() {
+
                    init           = function() {
+
                       
// get window sizes
+
                        // get window sizes
getWinSize();
+
                        getWinSize();
// initialize events
+
                        // initialize events
initEvents();
+
                        initEvents();
// define the inviewport selector
+
                        // define the inviewport selector
defineViewport();
+
                        defineViewport();
// gets the elements that match the previous selector
+
                        // gets the elements that match the previous selector
setViewportRows();
+
                        setViewportRows();
// if perspective add css
+
                        // if perspective add css
if( perspective ) {
+
                        if( perspective ) {
$rows.css({
+
                            $rows.css({
'-webkit-perspective' : 600,
+
                                '-webkit-perspective'           : 600,
'-webkit-perspective-origin' : '50% 0%'
+
                                '-webkit-perspective-origin'   : '50% 0%'
});
+
                            });
}
+
                        }
// show the pointers for the inviewport rows
+
                        // show the pointers for the inviewport rows
$rowsViewport.find('a.ss-circle').addClass('ss-circle-deco');
+
                        $rowsViewport.find('a.ss-circle').addClass('ss-circle-deco');
// set positions for each row
+
                        // set positions for each row
placeRows();
+
                        placeRows();
+
                       
},
+
                    },
// defines a selector that gathers the row elems that are initially visible.
+
                    // defines a selector that gathers the row elems that are initially visible.
// the element is visible if its top is less than the window's height.
+
                    // the element is visible if its top is less than the window's height.
// these elements will not be affected when scrolling the page.
+
                    // these elements will not be affected when scrolling the page.
defineViewport = function() {
+
                    defineViewport = function() {
+
                   
$.extend( $.expr[':'], {
+
                        $.extend( $.expr[':'], {
+
                       
inviewport : function ( el ) {
+
                            inviewport : function ( el ) {
if ( $(el).offset().top < winSize.height ) {
+
                                if ( $(el).offset().top < winSize.height ) {
return true;
+
                                    return true;
}
+
                                }
return false;
+
                                return false;
}
+
                            }
+
                       
});
+
                        });
+
                   
},
+
                    },
// checks which rows are initially visible  
+
                    // checks which rows are initially visible  
setViewportRows = function() {
+
                    setViewportRows = function() {
+
                       
$rowsViewport = $rows.filter(':inviewport');
+
                        $rowsViewport       = $rows.filter(':inviewport');
$rowsOutViewport = $rows.not( $rowsViewport )
+
                        $rowsOutViewport   = $rows.not( $rowsViewport )
+
                       
},
+
                    },
// get window sizes
+
                    // get window sizes
getWinSize = function() {
+
                    getWinSize     = function() {
+
                   
winSize.width = $win.width();
+
                        winSize.width   = $win.width();
winSize.height = $win.height();
+
                        winSize.height = $win.height();
+
                   
},
+
                    },
// initialize some events
+
                    // initialize some events
initEvents = function() {
+
                    initEvents     = function() {
+
                       
// navigation menu links.
+
                        // navigation menu links.
// scroll to the respective section.
+
                        // scroll to the respective section.
$links.on( 'click.Scrolling', function( event ) {
+
                        $links.on( 'click.Scrolling', function( event ) {
+
                           
// scroll to the element that has id = menu's href
+
                            // scroll to the element that has id = menu's href
$('html, body').stop().animate({
+
                            $('html, body').stop().animate({
scrollTop: $( $(this).attr('href') ).offset().top
+
                                scrollTop: $( $(this).attr('href') ).offset().top
}, scollPageSpeed, scollPageEasing );
+
                            }, scollPageSpeed, scollPageEasing );
+
                           
return false;
+
                            return false;
+
                       
});
+
                        });
+
                       
$(window).on({
+
                        $(window).on({
// on window resize we need to redefine which rows are initially visible (this ones we will not animate).
+
                            // on window resize we need to redefine which rows are initially visible (this ones we will not animate).
'resize.Scrolling' : function( event ) {
+
                            'resize.Scrolling' : function( event ) {
+
                               
// get the window sizes again
+
                                // get the window sizes again
getWinSize();
+
                                getWinSize();
// redefine which rows are initially visible (:inviewport)
+
                                // redefine which rows are initially visible (:inviewport)
setViewportRows();
+
                                setViewportRows();
// remove pointers for every row
+
                                // remove pointers for every row
$rows.find('a.ss-circle').removeClass('ss-circle-deco');
+
                                $rows.find('a.ss-circle').removeClass('ss-circle-deco');
// show inviewport rows and respective pointers
+
                                // show inviewport rows and respective pointers
$rowsViewport.each( function() {
+
                                $rowsViewport.each( function() {
+
                               
$(this).find('div.ss-left')
+
                                    $(this).find('div.ss-left')
  .css({ left  : '0%' })
+
                                          .css({ left  : '0%' })
  .end()
+
                                          .end()
  .find('div.ss-right')
+
                                          .find('div.ss-right')
  .css({ right  : '0%' })
+
                                          .css({ right  : '0%' })
  .end()
+
                                          .end()
  .find('a.ss-circle')
+
                                          .find('a.ss-circle')
  .addClass('ss-circle-deco');
+
                                          .addClass('ss-circle-deco');
+
                               
});
+
                                });
+
                           
},
+
                            },
// when scrolling the page change the position of each row
+
                            // when scrolling the page change the position of each row
'scroll.Scrolling' : function( event ) {
+
                            'scroll.Scrolling' : function( event ) {
+
                               
// set a timeout to avoid that the  
+
                                // set a timeout to avoid that the  
// placeRows function gets called on every scroll trigger
+
                                // placeRows function gets called on every scroll trigger
if( anim ) return false;
+
                                if( anim ) return false;
anim = true;
+
                                anim = true;
setTimeout( function() {
+
                                setTimeout( function() {
+
                                   
placeRows();
+
                                    placeRows();
anim = false;
+
                                    anim = false;
+
                                   
}, 10 );
+
                                }, 10 );
+
                           
}
+
                            }
});
+
                        });
+
                   
},
+
                    },
// sets the position of the rows (left and right row elements).
+
                    // sets the position of the rows (left and right row elements).
// Both of these elements will start with -50% for the left/right (not visible)
+
                    // Both of these elements will start with -50% for the left/right (not visible)
// and this value should be 0% (final position) when the element is on the
+
                    // and this value should be 0% (final position) when the element is on the
// center of the window.
+
                    // center of the window.
placeRows = function() {
+
                    placeRows       = function() {
+
                       
// how much we scrolled so far
+
                            // how much we scrolled so far
var winscroll = $win.scrollTop(),
+
                        var winscroll   = $win.scrollTop(),
// the y value for the center of the screen
+
                            // the y value for the center of the screen
winCenter = winSize.height / 2 + winscroll;
+
                            winCenter   = winSize.height / 2 + winscroll;
+
                       
// for every row that is not inviewport
+
                        // for every row that is not inviewport
$rowsOutViewport.each( function(i) {
+
                        $rowsOutViewport.each( function(i) {
+
                           
var $row = $(this),
+
                            var $row   = $(this),
// the left side element
+
                                // the left side element
$rowL = $row.find('div.ss-left'),
+
                                $rowL   = $row.find('div.ss-left'),
// the right side element
+
                                // the right side element
$rowR = $row.find('div.ss-right'),
+
                                $rowR   = $row.find('div.ss-right'),
// top value
+
                                // top value
rowT = $row.offset().top;
+
                                rowT   = $row.offset().top;
+
                           
// hide the row if it is under the viewport
+
                            // hide the row if it is under the viewport
if( rowT > winSize.height + winscroll ) {
+
                            if( rowT > winSize.height + winscroll ) {
+
                               
if( perspective ) {
+
                                if( perspective ) {
+
                               
$rowL.css({
+
                                    $rowL.css({
'-webkit-transform' : 'translate3d(-75%, 0, 0) rotateY(-90deg) translate3d(-75%, 0, 0)',
+
                                        '-webkit-transform' : 'translate3d(-75%, 0, 0) rotateY(-90deg) translate3d(-75%, 0, 0)',
'opacity' : 0
+
                                        'opacity'           : 0
});
+
                                    });
$rowR.css({
+
                                    $rowR.css({
'-webkit-transform' : 'translate3d(75%, 0, 0) rotateY(90deg) translate3d(75%, 0, 0)',
+
                                        '-webkit-transform' : 'translate3d(75%, 0, 0) rotateY(90deg) translate3d(75%, 0, 0)',
'opacity' : 0
+
                                        'opacity'           : 0
});
+
                                    });
+
                               
}
+
                                }
else {
+
                                else {
+
                               
$rowL.css({ left : '-50%' });
+
                                    $rowL.css({ left       : '-50%' });
$rowR.css({ right : '-50%' });
+
                                    $rowR.css({ right       : '-50%' });
+
                               
}
+
                                }
+
                               
}
+
                            }
// if not, the row should become visible (0% of left/right) as it gets closer to the center of the screen.
+
                            // if not, the row should become visible (0% of left/right) as it gets closer to the center of the screen.
else {
+
                            else {
+
                                   
// row's height
+
                                    // row's height
var rowH = $row.height(),
+
                                var rowH   = $row.height(),
// the value on each scrolling step will be proporcional to the distance from the center of the screen to its height
+
                                    // the value on each scrolling step will be proporcional to the distance from the center of the screen to its height
factor = ( ( ( rowT + rowH / 2 ) - winCenter ) / ( winSize.height / 2 + rowH / 2 ) ),
+
                                    factor = ( ( ( rowT + rowH / 2 ) - winCenter ) / ( winSize.height / 2 + rowH / 2 ) ),
// value for the left / right of each side of the row.
+
                                    // value for the left / right of each side of the row.
// 0% is the limit
+
                                    // 0% is the limit
val = Math.max( factor * 50, 0 );
+
                                    val     = Math.max( factor * 50, 0 );
+
                                   
if( val <= 0 ) {
+
                                if( val <= 0 ) {
+
                               
// when 0% is reached show the pointer for that row
+
                                    // when 0% is reached show the pointer for that row
if( !$row.data('pointer') ) {
+
                                    if( !$row.data('pointer') ) {
+
                                   
$row.data( 'pointer', true );
+
                                        $row.data( 'pointer', true );
$row.find('.ss-circle').addClass('ss-circle-deco');
+
                                        $row.find('.ss-circle').addClass('ss-circle-deco');
+
                                   
}
+
                                    }
+
                               
}
+
                                }
else {
+
                                else {
+
                                   
// the pointer should not be shown
+
                                    // the pointer should not be shown
if( $row.data('pointer') ) {
+
                                    if( $row.data('pointer') ) {
+
                                       
$row.data( 'pointer', false );
+
                                        $row.data( 'pointer', false );
$row.find('.ss-circle').removeClass('ss-circle-deco');
+
                                        $row.find('.ss-circle').removeClass('ss-circle-deco');
+
                                   
}
+
                                    }
+
                                   
}
+
                                }
+
                               
// set calculated values
+
                                // set calculated values
if( perspective ) {
+
                                if( perspective ) {
+
                                   
var t = Math.max( factor * 75, 0 ),
+
                                    var t       = Math.max( factor * 75, 0 ),
r = Math.max( factor * 90, 0 ),
+
                                        r       = Math.max( factor * 90, 0 ),
o = Math.min( Math.abs( factor - 1 ), 1 );
+
                                        o       = Math.min( Math.abs( factor - 1 ), 1 );
+
                                   
$rowL.css({
+
                                    $rowL.css({
'-webkit-transform' : 'translate3d(-' + t + '%, 0, 0) rotateY(-' + r + 'deg) translate3d(-' + t + '%, 0, 0)',
+
                                        '-webkit-transform' : 'translate3d(-' + t + '%, 0, 0) rotateY(-' + r + 'deg) translate3d(-' + t + '%, 0, 0)',
'opacity' : o
+
                                        'opacity'           : o
});
+
                                    });
$rowR.css({
+
                                    $rowR.css({
'-webkit-transform' : 'translate3d(' + t + '%, 0, 0) rotateY(' + r + 'deg) translate3d(' + t + '%, 0, 0)',
+
                                        '-webkit-transform' : 'translate3d(' + t + '%, 0, 0) rotateY(' + r + 'deg) translate3d(' + t + '%, 0, 0)',
'opacity' : o
+
                                        'opacity'           : o
});
+
                                    });
+
                               
}
+
                                }
else {
+
                                else {
+
                                   
$rowL.css({ left : - val + '%' });
+
                                    $rowL.css({ left   : - val + '%' });
$rowR.css({ right : - val + '%' });
+
                                    $rowR.css({ right   : - val + '%' });
+
                                   
}
+
                                }
+
                               
}
+
                            }  
+
                       
});
+
                        });
+
                   
};
+
                    };
+
               
return { init : init };
+
                return { init : init };
+
           
})();
+
            })();
+
           
$sidescroll.init();
+
            $sidescroll.init();
+
           
});
+
        });
  
  
  
  
</script>
+
        </script>
</body>
+
    </body>
 
</html>
 
</html>
 
{{Team:NUS_Singapore/JS}}
 
{{Team:NUS_Singapore/JS}}

Revision as of 15:33, 19 October 2016

<!DOCTYPE html> Interactive Points | Codrops

Wet Lab Notebook: RIOT SENSOR

Jun

2016

Each RIOT sensor consists of a promoter with RBS, followed by a coding sequence and a terminator.

The promoters with strong RBS (BBa_B0034) consists of:

  1. p70: obtained from team ETH_Zurich. It is their favourite performer in terms of sensitivity to lactate (BBa_K822000).
  2. p62: a wild-type lldPRD operon promoter from E. coli (BBa_K822000)
  3. J23100: a high expression promoter in a high constitutive cassette (BBa_K314100)

We obtained the coding sequence of ALR from the Biobrick plasmid (BBa_K1172901). The coding sequence of sfGFP and the sequence of lambda t0 terminator were received from team ETH_Zurich.

Each individual components including the promoter, the coding sequence (ALR) and the terminator is isolated and amplified by PCR. After obtaining all the individual components, we ligated them by PCR overlap or 3A Assembly (Fig 1). A second stop codon was added at the end of ALR sequence to enhance the efficiency of the translational termination.

Fig1. General cloning strategy for RIOT sensors

July

2016

The p70 fragment with overhang sequence of ALR (Fig 2) was synthesized using PCR with Pfu polymerase and primers ALR 21 and ALR 34. The annealing temperature was 57.9oC and the extension time was 1 min.

Fig2. Introduction of overhangs bases on the p70 lactate sensitive promoter by PCR.

The expected size of p70-Alanine Racemase (ALR) overhang sequence is 196 base pairs (bp). Lanes 1 marks DNA ladder. Lanes 4 and 6, which are replicates of the same reaction, are DNA product of the expected PCR size of 70-ALR overhang band.

PCR amplification of ALR gene (Fig 3) was performed with Q5 polymerase and ALR 35 (forward primer) and ALR 24 (Reverse primer)

Fig 3. PCR amplification of ALR gene from biobrick plasmid (BBa_K1172901). The expected size of ALR is 1080 bps. Lane 1 marks the DNA ladder. Lanes 2-3 shows a PCR product size slightly above the 1000 bps band and they are just replicates of the same reaction.

Stitching of p70 promoter to ALR was performed by PCR overlapped with Q5 polymerase and ALR 21 (forward primer) and ALR 24 (Reverse primer) as illustrated in the general cloning strategy (Fig 1).

Fig 4. Stitching of the p70 promoter ligated with ALR (p70-ALR) by PCR. The expected size is 1276 bps. Lanes 1 marks DNA ladder. Lanes 3-5 are PCR products of 70-ALR fragment from replicate PCR reactions.

t0 lambda terminator was amplified by PCR using Pfu polymerase, along with primers ALR 25 and ALR 26.

Fig 5. PCR amplification of t0 lambda terminator. After this reaction, terminator fragment was lengthen using ALR 32 as reverse primer which contained an overhang of BB suffix sequence. The expected size of the terminator is 136 bps. Lanes 1 marks DNA ladder. Lanes 2-6 showed the expected size PCR products of the terminator and are replicate PCR reactions.

  1. PCR overlap to synthesize construct 1 using Q5 polymerase, along with primers ALR 21 and ALR 38
  2. Gel extraction, construct 1 and plasmid vector, pSB1C3 were digested by restriction enzymes (XbaI and PstI-HF) for 3 hours at 37 oC, followed by heat inactivation at 80oC for 20 minutes.
  3. PCR clean up for construct 1 and obtained 17.9 ng/𝜇l.
  4. Gel extraction for the cut vector and obtained 13.8 ng/𝜇l.
  5. Insert and vector were ligated overnight at 16oC. The ratio of insert:vector was 3:1.
  6. The ligation mix (5 𝜇l) was used to transform 50 𝜇l of competent bacteria (E. coli DH5).

Fig 6. Stitching of p70-ALR (milestone 2) and t0 lambda terminator (milestone 3) by PCR. The expected size is 1422 bps. Lanes 1 marks DNA ladder. Lane 2 is PCR product of p70-34-ALR-Terminator

Fig 7. Synthesis of construct 2, p62-34-ALR-Terminator. Construct 2 was synthesized by PCR overlap like construct 1. After cloning, a selected bacterial colony was selected for miniprep to obtain purified plasmids. Then, purified plasmids were digested by restriction enzymes to confirm the size of inserted construct 2. Lane 1 marks the DNA ladder. Lane 2 is digested products by restriction enzymes XbaI and PstI-HF. The top band is the pSB1C3 vector with the expected size of 2052 bps. The below band is the construct 2 insert which is 1382 bps. Lane 3 is digested product by restriction enzyme PstI-HF. This reaction generated linear plasmids with the expected size of 3427 bps which was the result of addition of construct 2 insert into the pSB1C3 vector

Fig 8. Synthesis of construct 3, J23100-34-ALR-Terminator. The promoter region (BBa_K314100) was ligated to Alanine Racemase sequence (ALR, BBa_K1172901) by 3A assembly to generate J23100-ALR fragment. Then, J23100-ALR was ligated to and t0 lambda terminator by PCR overlap. The expected size is 1747 base pairs (bp). Lanes 1 marks DNA ladder. Lanes 2-7, which are replicates of the same reaction, show PCR products of J23100-34-ALR-Terminator.

Aug

2016

  1. Measure OD of each overnight cultures of RIOT sensor 1, 2 and 3 after 10x dilution: add 900 ml of LB into a cuvette and blank, then add 1 ml of overnight culture, mix and take measurement. Record the corrected OD
  2. Prepare 5 ml of M9 (with glucose added) in a 15 ml tube for each constructs
  3. Calculate the volume of stock culture need to be added into 5 ml of M9 to obtain the starting OD of 0.1
  4. Aliquot the required volume of stock culture and centrifuge at 6000 rpm for 1 min. Resuspend with M9.
  5. Add 2 ml of D-Alanine (50 mg/ml) into 3 wells of a 96-well plate for each constructs as a triplicate.
  6. Add 2 ml of each lactate concentration, 1 M, 10-1 M and 10-2 M into 3 wells for each constructs. The final working lactate concentrations will be 10-2 M, 10-3 M and 10-4 M.
  7. Dispense 200 ml of each constructs into each well with triplicate.
  8. Dispense 200 ml of M9 into 3 wells and 200 ml of water into 3 wells for blanking.
  9. Place the 96-well plate into the plate reader for 6-8 hours at 37oC.
  10. Measure OD600 at 15 minutes interval.

All sensors seemed to have similar growth rate regardless of the lactate concentration. This means they are very leaky and required modifications before integrating into the whole RIOT system.

Upon characterization, it appeared that the promoters with strong ribosomal binding site (RBS, BBa_B0034) exhibited high leakiness. Therefore, we designed this series of constructs by replacing the strong RBS by the medium (BBa_B0032: 30% strength of B0034) and weak RBS (BBa_B0033: 1% strength of B0034). Each promoter fragment p70, p62 and J23100 (without RBS) were isolated and amplified by PCR from the construct 1, 2 and 3 respectively. Each promoter fragment (without RBS) was ligated to the ALR-Terminator fragment by PCR overlap using primers having the overhang sequence of either medium or weak RBS.

Fig 9. Synthesis of constructs 4-9.

  • Construct 4: p70-32-ALR-Terminator
  • Construct 5: p62-32-ALR-Terminator
  • Construct 6: J23100-32-ALR-Terminator
  • Construct 7: p70-33-ALR-Terminator
  • Construct 8: p62-33-ALR-Terminator
  • Construct 9: J23100-33-ALR-Terminator

  1. PCR amplification of construct 4, 5 and 8. Their expected size is 1404 base pairs (bp). Lane 1 marks the DNA ladder. Lane 2-5, 6-8 and 10-13, which are replicates of the 3 reactions, show PCR products of construct 4, 5 and 8
  2. PCR amplification of construct 6, 7 and 9. The expected size of construct 7 is 1404 bps. The expected size of construct 6 and 9 is 1768 bps. Lane 1 marks the DNA ladder. Lane 2-5, 6-8 and 10-13, which are replicates of the 3 reactions, show PCR products of construct 6, 7 and 9.

Sep

2016

We performed the characterization process same as what we did with RIOT sensors 1-3 in milestone 6.

  • RIOT sensors 4-6 did not show much improvement compared to sensors 1-3. They are also leaky and hence, not suitable to be integrated into the whole system.
  • RIOT sensors 7-9 showed encouraging results since they were more sensitive to small changes in lactate concentration.

After evaluating the sensitivity to lactate of each combination of promoter and ribosomal binding site (RBS), we chose the weak RBS to synthesize RIOT sensor 10 and 11 which contain sfGFP in place of Alanine Racemase to make them become a potential diagnostic device to detect pathogenic cells.

Fig 10. Synthesis of constructs 10 and 11.

  1. Construct 10: p70-33-sfGFP-Terminator. The expected size is 1056 base pairs (bp). Lane 1(7) marks the DNA ladder. Lane 4-7(1-4) are replicates of the same PCR reaction.
  2. Construct 11 : p62-33-sfGPP-Terminator. The expected size is 1056 bps. Lane 7(1) marks the DNA ladder. Lane 1-4(4-7) are replicates of the same PCR reaction.

Oct

2016

Culture mammalian cell lines HeLa and HepG2

  1. Revive cells from frozen vials and subculturing 80% confluent
  2. Enumerate cell density by a hemocytometer. Seed 106 cells into each well.
  3. Resuspend with phenol free DMEM and incubate at 37 oC for 6 hours, then remove media and wash with 1X PBS.
  4. Add 500 μl of new media (DMEM which is free of phenol and serum) and incubate at at 37oC for 18 hours.
  5. Use a pipette to remove the cell supernatant separately and centrifuge at 250 rcf for 3 min to remove cells that may have left in the supernatant.
  6. Cell-free supernatant is used in GFP microscop.

GFP Microscopy

  1. Set up an overnight culture of bacteria in a culture tube, with 5mL of LB, plus the appropriate antibiotics. Incubate in a shaking incubator at 37oC overnight.
  2. Measure the OD600 of the resuspended bacteria culture. Aliquot appropriate volume so that starting OD for each tube is 0.4, shake in the 37oC incubator for approximately 30 minutes.
  3. Set up five fresh and labelled 1.5μl microcentrifuge tubes. To each tube, add 20μl of each lactate concentration (0 M, 10-3 M, 10-2 M) and 180μl of the diluted bacteria sample to make up 200μl of reaction mix. To the remaining two tubes, add 40μl of each cell supernatant (Hela and HepG2) and 10μl of the diluted bacteria sample to make 160μl of reaction mix, with 5x dilution of the samples.
  4. Incubate in a shaking incubator at 37oC incubator for 3 to 4 hours.
  5. Add 5μl of each sample onto the appropriately labelled polylysine slide and cover with the slip and capture images using NIS microscope.

We found that different lactate concentration in the media or HeLa/HepG2’s supernatant induce different level of GFP expression. RIOT sensor 10 appeared to be the most sensitive sensor to lactate.

Materials: harvest supernatants of HeLa and HepG2 as shown in Milestone 10 and overnight culture of bacteria


Centrifuge bacterial cell culture at 5000 rpm for 10 minutes and remove supernatant for the assay


Each sample was 100x diluted. 1 μl of diluted supernatant of HeLa, HepG2 and 5 μl of diluted bacterial supernatant grown in LB and the cell media, DMEM were added into the buffer and enzyme mix separately for each well in the 96-well plate. DMEM which is free of phenol red and serum serves as a negative control.


Carry out the assay as instructed in the protocol of the lactate assay kit from Sigma-Aldrich (catalog number: MAK064)


Go To Top