Difference between revisions of "Team:Freiburg/testpage"

Line 2: Line 2:
 
{{Freiburg/MenubarTest}}
 
{{Freiburg/MenubarTest}}
 
{{Freiburg/wiki_content_start}}
 
{{Freiburg/wiki_content_start}}
 +
<!-- wiki content goes in here -->
 +
 
<html>
 
<html>
  
 
<style>
 
<style>
 
/*========= BEGIN: style for navigation bar ==========*/
 
/*========= BEGIN: style for navigation bar ==========*/
−
#project {
+
#results {
−
     background: url(https://static.igem.org/mediawiki/2015/d/da/Freiburg_icon_project_active_yellow.png) no-repeat;
+
     background: url(https://static.igem.org/mediawiki/2015/2/2e/Freiburg_icon_results_active_yellow.png) no-repeat;
 
}
 
}
  
−
#project a {
+
#results a {
 
     color: #ecdc18;
 
     color: #ecdc18;
 
}
 
}
  
 
#runningchip {
 
#runningchip {
−
     left: 18.6%;
+
     left: 52%;
 
}
 
}
 
/*========= END: style for navigation bar ==========*/
 
/*========= END: style for navigation bar ==========*/
  
  
−
/*  STYLE FOR LIGHTBULB-SLIDER */
+
#tetanus_leftside, #agfp_leftside {
−
 
+
padding-right:30px;
−
#lightbulb{
+
−
  position: absolute;
+
−
  -webkit-transform: scale(0.5);
+
−
  transform: scale(0.5);
+
−
  top: 230px;
+
−
  left: -55px;
+
−
  z-index: 200;
+
 
}
 
}
 +
#tetanus_leftside p, #agfp_body p, #device_results_body p{
 +
    color: #000;
 +
font-size: 20px;
 +
line-height: 30px;
 +
word-spacing: 0px;
  
−
#red,
 
−
#redsmall,
 
−
#blue,
 
−
#green{
 
−
  position: absolute;
 
−
  bottom: -500px;
 
 
}
 
}
−
 
+
#tetanus_results{
−
#red{
+
clear: both;
−
  top: 25px;
+
−
  left:120px;
+
−
  position: absolute;
+
 
}
 
}
−
 
+
#tetanus_rightside, #agfp_rightside{
−
#blue{
+
float:right;
−
  bottom: 160px;
+
max-width: 450px;
−
  left: 25px;
+
color: #000;
−
  position: absolute;
+
 
}
 
}
  
−
#redsmall{
+
#tetanus_leftside, #agfp_leftside{
−
  bottom: 115px;
+
max-width: 380px;
−
  left: 110px;
+
−
  position: absolute;
+
 
}
 
}
  
−
#green{
+
#tetanus_rightside{
−
  top: 10px;
+
−
  left: 10px;
+
−
  position: absolute;
+
−
}
+
  
−
#red_on{
 
−
  top: 25px;
 
−
  left:120px;
 
−
  position: absolute;
 
−
  display: none;
 
 
}
 
}
  
−
#blue_on{
+
h1, h2{
−
  bottom: 160px;
+
font: "Roboto";
−
  left: 25px;
+
font-size: 30pt;
−
  position: absolute;
+
color: #000000;
−
  display: none;
+
font-weight: bold;
 +
line-height: 1.3;
 
}
 
}
−
 
+
#tetanus_result_image_leading{
−
#redsmall_on{
+
padding-top: 20px;
−
  bottom: 115px;
+
padding-bottom: 15px;
−
  left: 110px;
+
color: 000;
−
  position: absolute;
+
font-weight: bold;
−
  display: none;
+
font-size: 15pt;
 +
line-height: 1.3;
 
}
 
}
−
 
+
#tetanus_result_image{
−
#green_on{
+
margin-left: auto;
−
  top: 10px;
+
margin-right: auto;
−
  left: 10px;
+
width: 450px;
−
  position: absolute;
+
−
  display: none;
+
 
}
 
}
  
−
 
+
#tetanus_result_image img{
−
/* code adapted from http://www.smashingmagazine.com/2012/04/pure-css3-cycling-slideshow/*/
+
width: 450px;
−
 
+
−
#slider {
+
−
  background: #f9f9f9;
+
−
  height: 500px;
+
−
  width: 900px;
+
−
  overflow: visible;
+
−
  position: relative;
+
 
}
 
}
  
−
/* hides everything outside the slider box */
 
−
#mask {
 
−
  overflow: hidden;
 
−
  height: 500px;
 
−
}
 
  
−
/* initialize position for positioning slides outside the slider */
+
#agfp_results{
−
#slider ul {
+
clear: both;
−
  margin: 0;
+
padding-top:75px;
−
  padding: 0;
+
−
  position: relative;
+
 
}
 
}
−
 
+
#agfp_leftside{
−
/* define image properties and position them outside the slider mask */
+
width:380;
−
#slider li {
+
max-width: 380px;
−
  width: 900px; /* Width slide */
+
margin-left:auto;
−
  height: 500px; /* Height slide */
+
margin-right:auto;
−
  position: absolute;
+
−
  right: 0; /* Original Position - Outside of the Slider */
+
−
  list-style: none;
+
 
}
 
}
−
 
+
#agfp_leftside img{
−
 
+
display:inline;
−
#first,
+
align: center;
−
#second,
+
width: 380px;
−
#third,
+
height: 510px;
−
#fourth{
+
margin-left:auto;
−
  left: -1000px;
+
margin-right:auto;
−
  -ms-transition: tranform 1s ease;
+
−
  -webkit-transition: transform 1s ease;
+
−
  transition: transform 1s ease;
+
−
  font-size: 100%;
+
 
}
 
}
−
 
+
#agfp_body{
−
#first{left: 0;}
+
padding-top: 25px;
−
#third{z-index : -100;}
+
−
#fourth{z-index: -100; left: 1000px;}
+
−
#green{display: none;}
+
−
#green_on{display: inline}
+
−
 
+
−
.container{
+
−
    position: relative;
+
−
    height: 500px;
+
−
    margin: 3% 0;
+
−
    width: 1000px;
+
 
}
 
}
  
−
#buttonleft {
+
#device_results{
−
  z-index: 200;
+
clear: both;
−
  position: absolute;
+
padding-top:75px;
−
  top: 190px;
+
−
  left: 0;
+
 
}
 
}
−
 
+
#device_results_headline{
−
#buttonright{
+
text-align: center;
−
  z-index: 200;
+
−
  position: absolute;
+
−
  right: 0;
+
−
  top: 190px;
+
 
}
 
}
−
 
+
#device_results_image{
−
#buttonleft img,
+
padding-top: 30px;
−
#buttonright img{
+
margin: auto;
−
  width: 50px;
+
width:400px;
 
}
 
}
−
 
+
#device_results_image img{
−
#content-slider{
+
−
  position: absolute;
+
width: 400px;
−
  top:0;
+
−
  left:50px
+
 
}
 
}
−
 
+
#device_results_body{
−
 
+
padding-top: 30px;
−
#buttonright:hover,
+
−
#buttonleft:hover{
+
−
  cursor: pointer;
+
−
  cursor: hand;
+
 
}
 
}
  
−
.container{
+
@media screen and (min-width: 963px){
−
  position: relative;
+
    #agfp_leftside,  #tetanus_leftside{
 +
        float: left;
 +
    }
 +
#tetanus_rightside, agfp_rightside{
 +
max-width: 450px;
 
}
 
}
−
 
+
#tetanus_leftside, agfp_leftside{
−
.artboard{
+
max-width: 380px;
−
    box-sizing: border-box;
+
−
}
+
−
 
+
−
.sliderimage{
+
−
  float: right;
+
−
  margin: 3% 75px 3% 25px;
+
−
  width: 350px
+
 
}
 
}
−
 
+
−
.slidertext{
+
    #agfp_rightside,  #tetanus_rightside{
−
  margin: 3% 25px 0 75px;
+
        float: right;
−
  width: 350px;
+
    }
−
  text-align: justify;
+
−
  line-height: 1;
+
−
  float: left;
+
 
}
 
}
  
−
.slidertext h1{
+
@media screen and (max-width: 962px){
−
  text-align: left;
+
    #agfp_leftside,  #tetanus_leftside, #agfp_rightside,  #tetanus_rightside{
 +
        float: none;
 +
        width: auto;
 +
max-width:none;
 +
min-width:none;
 +
margin-left: auto;
 +
margin-right: auto;
 +
 
 
}
 
}
  
−
.slidertext p{
+
h2{
−
margin-bottom: 0;
+
color: #EEE;
−
}
+
font-size: 200%;
−
 
+
−
.slidertext.indent{
+
−
  margin-left: 15%;
+
−
  margin-top: 0;
+
−
  width: 290px;
+
−
}
+
−
 
+
−
.dummy-image{
+
−
  background-color: black;
+
−
  height: 400px;
+
−
  width: 350px;
+
 
}
 
}
  
Line 226: Line 152:
  
  
−
<html>
 
  
−
<script>
+
<div class="content_box">
−
$(document).ready(function(){
+
  
−
    var distance = 2;
+
<div id="anti_tetanus_results">
−
    // see: http://atomicrobotdesign.com/blog/web-development/how-to-disable-a-button-until-a-jquery-animation-has-finished/ //
+
<div class="floatbox right">
−
    // bind the button to the function, so it can be unbound in the code and the button isnt clickable any more //
+
<h2>
−
    $("#buttonleft").bind("click", moveleft);
+
We successfully diagnosed anti-Tetanus antibodies in human blood serum
−
function moveleft(e) {
+
</h2>
−
// unbind the button //
+
<p>
−
$("#buttonleft").unbind();
+
Check out this video showing how the antibodies in the serum bind our tetanus antigens on the DiaChip
−
console.log("Click "+distance);
+
</p>
 +
<div class="image_box right">
 +
<img src="https://static.igem.org/mediawiki/2015/7/74/Freiburg_labjournal-roi_selection_20150817_429.png" width="100%"></img>
 +
</div>
 +
</div>
  
−
if (distance == 1) {
 
−
console.log("Distance: "+distance);
 
−
$('#first').css({"transform": "translateX(0)", "-webkit-transform": "translateX(0)", "-ms-transform": "translateX(0)"});
 
−
    $('#second').css({"z-index": "100"});
 
−
    $('#third').css({"z-index": "-100", "transform": "translateX(0)", "-webkit-transform": "translateX(0)", "-ms-transform": "translateX(0)"});
 
−
    $('#fourth').css({"transform": "translateX(0)", "-webkit-transform": "translateX(0)", "-ms-transform": "translateX(0)"});
 
−
    $('#redsmall').css({"display": "inline"});
 
−
    $('#green').css({"display": "none"});
 
−
    $('#redsmall_on').css({"display": "none"});
 
−
    $('#green_on').css({"display": "inline"});
 
−
    distance = 2;
 
−
}
 
  
−
else if (distance ==2) {
+
<div class="floatbox left">
−
console.log("Distance: "+distance);
+
<p>
−
$('#first').css({"transform": "translateX(1000px)", "-webkit-transform": "translateX(1000px)", "-ms-transform": "translateX(1000px)"});
+
We took a persons blood before and after a tetanus vaccination and screened for a tetanus infection.  
−
    $('#second').css({"transform": "translateX(1000px)", "-webkit-transform": "translateX(1000px)", "-ms-transform": "translateX(1000px)"});
+
An immunized person has antibodies against tetanus antigens - we bound spots of our purified tetanus antigens onto the specific surface of our chip. We then incubated the DiaChip with 33 µl of the blood serum for half an hour and measured the results.
−
    $('#third').css({"z-index": "100"});
+
−
    $('#fourth').css({"z-index": "-100", "transform": "translateX(-2000px)", "-webkit-transform": "translateX(-2000px)", "-ms-transform": "translateX(-2000px)", "-webkit-transform": "translateX(-2000px)", "-ms-transform": "translateX(-2000px)"});
+
−
    $('#green').css({"display": "inline"});
+
−
    $('#red').css({"display": "none"});
+
−
    $('#green_on').css({"display": "none"});
+
−
    $('#red_on').css({"display": "inline"});
+
−
    distance = 3;
+
−
}
+
  
−
else if (distance ==3) {
+
Take a look at the video and see for yourself how good our DiaChip performed.
−
console.log("Distance: "+distance);
+
−
$('#first').css({"z-index": "-100", "transform": "translateX(-1000px)", "-webkit-transform": "translateX(-1000px)", "-ms-transform": "translateX(-1000px)", "-webkit-transform": "translateX(-1000px)", "-ms-transform": "translateX(-1000px)"});
+
−
    $('#second').css({"transform": "translateX(2000px)", "-webkit-transform": "translateX(2000px)", "-ms-transform": "translateX(2000px)", "-webkit-transform": "translateX(2000px)", "-ms-transform": "translateX(2000px)"});
+
−
    $('#third').css({"transform": "translateX(1000px)", "-webkit-transform": "translateX(1000px)", "-ms-transform": "translateX(1000px)"});
+
−
    $('#fourth').css({"z-index": "100"});
+
−
    $('#red').css({"display": "inline"});
+
−
    $('#blue').css({"display": "none"});
+
−
    $('#red_on').css({"display": "none"});
+
−
    $('#blue_on').css({"display": "inline"});
+
−
    distance = 4;
+
−
}
+
  
−
else if (distance ==4) {
+
And remember: that this isn’t an ELISA, we don’t need no expensive secondary Antibodies!
−
console.log("Distance: "+distance);
+
</p>
−
$('#first').css({"z-index": "100"});
+
</div>
−
    $('#second').css({"z-index": "-100", "transform": "translateX(0)", "-webkit-transform": "translateX(0)", "-ms-transform": "translateX(0)"});
+
</div>
−
    $('#third').css({"transform": "translateX(2000px)", "-webkit-transform": "translateX(2000px)", "-ms-transform": "translateX(2000px)"});
+
−
    $('#fourth').css({"transform": "translateX(-1000px)", "-webkit-transform": "translateX(-1000px)", "-ms-transform": "translateX(-1000px)"});
+
−
    $('#blue').css({"display": "inline"});
+
−
    $('#redsmall').css({"display": "none"});
+
−
    $('#blue_on').css({"display": "none"});
+
−
    $('#redsmall_on').css({"display": "inline"});
+
−
    distance = 1;
+
−
}
+
−
 
+
−
// see: http://stackoverflow.com/questions/1836105/how-to-wait-5-seconds-with-jquery //
+
−
// wait until css-animation has finished. time is specified in css-transition property //
+
−
setTimeout(function(){
+
−
$("#buttonleft").bind("click", moveleft);
+
−
}, 1000);
+
−
}
+
−
 
+
−
 
+
−
    $("#buttonright").bind("click", moveright);
+
−
function moveright(e) {
+
−
 
+
−
$("#buttonright").unbind();
+
−
console.log("Click "+distance);
+
−
 
+
−
if (distance == 1) {
+
−
$('#first').css({"z-index": "-100"});
+
−
    $('#second').css({"transform": "translateX(2000px)", "-webkit-transform": "translateX(2000px)", "-ms-transform": "translateX(2000px)", "-webkit-transform": "translateX(2000px)", "-ms-transform": "translateX(2000px)"});
+
−
    $('#third').css({"z-index": "100","transform": "translateX(1000px)", "-webkit-transform": "translateX(1000px)", "-ms-transform": "translateX(1000px)"});
+
−
    $('#fourth').css({"transform": "translateX(-2000px)", "-webkit-transform": "translateX(-2000px)", "-ms-transform": "translateX(-2000px)"});
+
−
    $('#redsmall').css({"display": "inline"});
+
−
    $('#blue').css({"display": "none"});
+
−
    $('#redsmall_on').css({"display": "none"});
+
−
    $('#blue_on').css({"display": "inline"});
+
−
    distance = 4;
+
−
}
+
−
 
+
−
else if (distance ==2) {
+
−
console.log("Distance: "+distance);
+
−
$('#first').css({"transform": "translateX(-1000px)", "-webkit-transform": "translateX(-1000px)", "-ms-transform": "translateX(-1000px)"});
+
−
    $('#second').css({"z-index": "-100"});
+
−
    $('#third').css({"transform": "translateX(2000px)", "-webkit-transform": "translateX(2000px)", "-ms-transform": "translateX(2000px)", "-webkit-transform": "translateX(2000px)", "-ms-transform": "translateX(2000px)"});
+
−
    $('#fourth').css({"z-index": "100","transform": "translateX(-1000px)", "-webkit-transform": "translateX(-1000px)", "-ms-transform": "translateX(-1000px)"});
+
−
    $('#green').css({"display": "inline"});
+
−
    $('#redsmall').css({"display": "none"});
+
−
    $('#green_on').css({"display": "none"});
+
−
    $('#redsmall_on').css({"display": "inline"});
+
−
    distance = 1;
+
−
}
+
−
 
+
−
else if (distance ==3) {
+
−
console.log("Distance: "+distance);
+
−
$('#first').css({"z-index": "100","transform": "translateX(0px)", "-webkit-transform": "translateX(0px)", "-ms-transform": "translateX(0px)"});
+
−
    $('#second').css({"transform": "translateX(0)", "-webkit-transform": "translateX(0)", "-ms-transform": "translateX(0)"});
+
−
    $('#third').css({"z-index": "-100"});
+
−
    $('#fourth').css({"transform": "translateX(0)", "-webkit-transform": "translateX(0)", "-ms-transform": "translateX(0)"});
+
−
    $('#red').css({"display": "inline"});
+
−
    $('#green').css({"display": "none"});
+
−
    $('#red_on').css({"display": "none"});
+
−
    $('#green_on').css({"display": "inline"});
+
−
    distance = 2;
+
−
}
+
−
 
+
−
else if (distance ==4) {
+
−
console.log("Distance: "+distance);
+
−
$('#first').css({"transform": "translateX(1000px)", "-webkit-transform": "translateX(1000px)", "-ms-transform": "translateX(1000px)"});
+
−
    $('#second').css({"z-index": "100","transform": "translateX(1000px)", "-webkit-transform": "translateX(1000px)", "-ms-transform": "translateX(1000px)"});
+
−
    $('#third').css({"transform": "translateX(0)", "-webkit-transform": "translateX(0)", "-ms-transform": "translateX(0)"});
+
−
    $('#fourth').css({"z-index": "-100"});
+
−
    $('#blue').css({"display": "inline"});
+
−
    $('#red').css({"display": "none"});
+
−
    $('#blue_on').css({"display": "none"});
+
−
    $('#red_on').css({"display": "inline"});
+
−
    distance = 3;
+
−
}
+
−
 
+
−
setTimeout(function(){
+
−
$("#buttonright").bind("click", moveright);
+
−
}, 1000);
+
−
}
+
−
});
+
−
</script>
+
  
  
  
−
<div class="container">
+
<div id="agfp_results">
−
<div id="buttonright">
+
<div class="floatbox right">
−
<img src="https://static.igem.org/mediawiki/2015/b/b3/Freiburg_lightbulb_slider_30.png">
+
<h2>
 +
We measured the binding of anti-GFP to cell-free expressed GFP in blood serum
 +
</h2>
 +
<p>
 +
We expressed GFP with our own cell-free expression system and bound it to the surface of our DiaChip. We than ran some rabbit blood serum over the chip which we had spiked with anti-GFP antibodies. The results show that our cell-free proteins can be measured even in a complex solution such as blood serum. </p>
 
</div>
 
</div>
−
<div id="buttonleft">
+
<div class="floatbox left">
−
<img src="https://static.igem.org/mediawiki/2015/4/4d/Freiburg_lightbulb_slider_27.png">
+
<div class="imagebox left">
−
</div>
+
<img src="https://static.igem.org/mediawiki/2015/7/74/Freiburg_labjournal-roi_selection_20150817_429.png" width="100%"></img>
−
<div id="lightbulb">
+
−
<div id="main">
+
−
<img src="https://static.igem.org/mediawiki/2015/3/31/Freiburg_lightbulb_slider_03.png">
+
−
</div>
+
−
<div id="red">
+
−
<img src="https://static.igem.org/mediawiki/2015/4/40/Freiburg_lightbulb_slider_09.png">
+
−
</div>
+
−
<div id="green">
+
−
<img src="https://static.igem.org/mediawiki/2015/2/24/Freiburg_lightbulb_slider_08.png">
+
−
</div>
+
−
<div id="blue">
+
−
<img src="https://static.igem.org/mediawiki/2015/a/a7/Freiburg_lightbulb_slider_07.png">
+
−
</div>
+
−
<div id="redsmall">
+
−
<img src="https://static.igem.org/mediawiki/2015/c/ce/Freiburg_lightbulb_slider_06.png">
+
−
</div>
+
−
<div id="red_on">
+
−
<img src="https://static.igem.org/mediawiki/2015/2/2a/Freiburg_lightbulb_slider_09_yellow.png">
+
−
</div>
+
−
<div id="green_on">
+
−
<img src="https://static.igem.org/mediawiki/2015/0/0f/Freiburg_lightbulb_slider_08_yellow.png">
+
−
</div>
+
−
<div id="blue_on">
+
−
<img src="https://static.igem.org/mediawiki/2015/6/6b/Freiburg_lightbulb_slider_07_yellow.png">
+
−
</div>
+
−
<div id="redsmall_on">
+
−
<img src="https://static.igem.org/mediawiki/2015/9/91/Freiburg_lightbulb_slider_06_yellow.png">
+
 
</div>
 
</div>
 
</div>
 
</div>
−
  <div id="content-slider">
 
−
      <div id="slider">  <!-- Slider container -->
 
−
        <div id="mask">  <!-- Mask -->
 
−
        <ul>
 
−
        <li id="first" class="firstanimation">  <!-- ID for tooltip and class for animation -->
 
−
        <div class="artboard">
 
−
        <div class="sliderimage">
 
−
        <div class="dummy-image"></div>
 
−
        </div>
 
−
        <div class="slidertext">
 
−
        <h1>Building our own device</h1>
 
−
        <p>The original measuring device we were using in collaboration with AG Roth is a really expensive machine based on rather simple physics. Therefore, we decided to build our own device in a cost-efficient variant. We performed reliable measurements with it and provide a building plan making label-free proteinarray analysis available for every future iGEM team. </p>
 
−
        </div>
 
−
        <div class="slidertext indent">
 
−
        <p> Want to read <a href="https://2015.igem.org/Team:Freiburg/OwnDevice"> more?</a>
 
−
        </p>
 
−
        </div>
 
−
        </div>
 
−
        </li>
 
−
        <li id="second" class="secondanimation">
 
−
        <div class="artboard">
 
−
        <div class="sliderimage">
 
−
        <div class="dummy-image"></div>
 
−
        </div>
 
−
        <div class="slidertext">
 
−
        <h1>Communicating science</h1>
 
−
        <p>Fast and reliable disease diagnostic is a problem of public interest. For this reason we wanted to know what people think about the idea of the DiaCHIP. Although the DiaCHIP is concerned to synthetic biology, which makes people feel rather uncomfortable according to a survey by Leopoldina (national academy of science), we obtained a lot of positive feedback. </p>
 
−
        </div>
 
−
        <div class="slidertext indent">
 
−
        <p> Want to read <a href="https://2015.igem.org/Team:Freiburg/Practices"> more?</a></p>
 
−
        </div>
 
−
        </div>
 
−
        </li>
 
−
        <li id="third" class="thirdanimation">
 
−
        <div class="artboard">
 
−
        <div class="sliderimage">
 
−
        <div class="dummy-image"></div>
 
−
        </div>
 
−
        <div class="slidertext">
 
−
        <h1>Modeling cellfree expression</h1>
 
−
        <p>In order to optimize the DiaCHIP for future applications, we modelled the process of cell-free expression and diffusion over time. Making use of xxx parameters and xxx ordinary differential equations, we computed the size of the resulting antigen spots and identified the factors limiting cell-free expression in the DiaCHIP. </p>
 
−
        </div>
 
−
        <div class="slidertext indent">
 
−
        <p> Want to read <a href="https://2015.igem.org/Team:Freiburg/Modeling">more?</a> </p>
 
−
        </div>
 
−
        </div>
 
−
        </li>
 
−
        <li id="fourth" class="fourthanimation">
 
−
        <div class="artboard">
 
−
        <div class="sliderimage">
 
−
        <div class="dummy-image"></div>
 
−
        </div>
 
−
        <div class="slidertext">
 
−
        <h1>Measuring our own blood</h1>
 
−
        <p>One of the most notable results we obtained was the detection of anti-tetanus antibodies in human blood serum. Using the DiaCHIP, we were able to distinguish serum samples of a person taken before vaccination and three weeks later. As expected, antibody binding events were shown after vaccination, whereas there was no signal before. </p>
 
−
        </div>
 
−
        <div class="slidertext indent">
 
−
        <p> Want to read <a href="https://2015.igem.org/Team:Freiburg/Results">more?</a></p>
 
−
        </div>
 
−
        </div>
 
−
        </li>
 
−
    </ul>
 
−
        </div>  <!-- End Mask -->
 
−
      </div>  <!-- End Slider Container -->
 
−
  </div>
 
 
</div>
 
</div>
  
  
 +
<div id="device_results">
 +
<h1>
 +
We built our very own, low-cost DiaChip device - and can measure with it!
 +
</h1>
 +
<div class="flexbox">
 +
<img src="https://static.igem.org/mediawiki/2015/7/74/Freiburg_labjournal-roi_selection_20150817_429.png" width="80%"></img>
 +
</div>
 +
<p>
 +
A green LED, two lenses and a regular SLR Camera is basically all you need to build your own iRIf device.
 +
</p>
 +
</div>
 +
</div>
  
 
<div class="content_box">
 
<div class="content_box">
−
<!-- Labjournal content goes in here -->
 
−
 
  
−
<h1 class="sectionedit1">Project overview: The DiaCHIP</h1>
+
<div class="flexbox">
−
<div class="level1">
+
<a href="https://2015.igem.org/Team:Freiburg/Results/Assembling">
−
<div class="image_box left">
+
<img src="https://static.igem.org/mediawiki/2015/0/0f/Freiburg_homepage_chip_blood.png" width="100%">
−
<img align="left" alt="light bulb sketch" src="https://static.igem.org/mediawiki/2015/2/23/Freiburg_light_bulb_sketch.png" width="100px">
+
</a>
 +
 
 +
<a href="https://2015.igem.org/Team:Freiburg/Results/Diagnostics">
 +
<img src="https://static.igem.org/mediawiki/2015/0/0f/Freiburg_homepage_chip_blood.png" width="100%">
 +
</a>
 +
 
 
</div>
 
</div>
−
<p>
+
<p> Click on one of the images to get further insight how we build up our DiaCHIP </p>
−
<!--korrigiert von Philipp05/09/15-->
+
 
−
The DiaCHIP is an innovative tool to simultaneously  differentially detect antibodies present in blood sera that correspond to infectious diseases. It may greatly simplify broad band screenings, detection of autoimmune diseases and the determination of vaccination status. Essential for our project idea is the combination of on-demand protein synthesis directly in the diagnostic device, that is using a novel and label-free detection system, so simple that it can easily be rebuild and utilized by future iGEM teams.
+
−
</p>
+
 
</div>
 
</div>
−
<!-- EDIT1 SECTION "Project overview: The DiaCHIP" [1-351] -->
+
 
−
<div class="floatbox left">
+
 
−
<h2 class="sectionedit2">Preparing the DiaCHIP</h2>
+
−
<div class="level2">
+
−
<p>
+
−
<!--korrigiert von Philipp05/09/15-->
+
−
As the DiaCHIP relies on antibody-antigen interactions, the antigens first have to be synthesized and immobilized inside the device. Given that the whole device is a microfluidic system, it was most convenient to do this directly in the flow-chamber, where detection will finally take place.
+
−
The flow-chamber consists of two glass surfaces separated by a gap that can be flushed with liquids. On the one surface DNA molecules, which code for the respective antigens. By flushing a cell-free expression mix into the chamber, the respective antigens are transcribed and translated on-demand. Proteins then diffuse until reaching the second surface that specifically captures the proteins encoded by the immobilized DNA. After several washing steps to remove remaining expression-mix the flow-chamber is coated with the immobilized antigens and ready for detection.
+
−
</p>
+
−
</div>
+
−
</div>
+
−
<!-- EDIT2 SECTION "Preparing the DiaCHIP" [352-1230] -->
+
−
<div class="floatbox right">
+
−
<h2 class="sectionedit3">Measuring</h2>
+
−
<div class="level2">
+
−
<p>
+
−
<!--korrigiert von Philipp05/09/15-->
+
−
With the iRIf (Abkürzung) system it is possible to record small changes in layer thickness. The binding of an antibody, present in the blood serum flushed through the chamber, to the according antigen increases the local thickness of the protein surface so that interaction events can be measured label-free and in real-time via the change of the optical properties at this spot.
+
−
</p>
+
−
<p>
+
−
But we didn't stop thinking about the device: <a href="https://2015.igem.org/Team:Freiburg/Results">We detected antibodies in our own blood!</a>
+
−
</p>
+
−
</div>
+
−
<div class="tags"><span>
+
−
<a class="wikilink1" href="/igem2015/doku.php?id=tag:info&amp;do=showtag&amp;tag=info" rel="tag" title="tag:info">info</a>
+
−
</span></div>
+
−
</div>
+
−
<!-- EDIT3 SECTION "Measuring" [1231-] -->
+
 
</div>
 
</div>
 +
</html>
  
  
  
−
</html>
+
<!-- wiki content ends here -->
−
<!-- Labjournal content ends here -->
+
 
{{Freiburg/wiki_content_end}}
 
{{Freiburg/wiki_content_end}}

Revision as of 16:05, 8 September 2015

""

We successfully diagnosed anti-Tetanus antibodies in human blood serum

Check out this video showing how the antibodies in the serum bind our tetanus antigens on the DiaChip

We took a persons blood before and after a tetanus vaccination and screened for a tetanus infection. An immunized person has antibodies against tetanus antigens - we bound spots of our purified tetanus antigens onto the specific surface of our chip. We then incubated the DiaChip with 33 µl of the blood serum for half an hour and measured the results. Take a look at the video and see for yourself how good our DiaChip performed. And remember: that this isn’t an ELISA, we don’t need no expensive secondary Antibodies!

We measured the binding of anti-GFP to cell-free expressed GFP in blood serum

We expressed GFP with our own cell-free expression system and bound it to the surface of our DiaChip. We than ran some rabbit blood serum over the chip which we had spiked with anti-GFP antibodies. The results show that our cell-free proteins can be measured even in a complex solution such as blood serum.

We built our very own, low-cost DiaChip device - and can measure with it!

A green LED, two lenses and a regular SLR Camera is basically all you need to build your own iRIf device.

Click on one of the images to get further insight how we build up our DiaCHIP