Difference between revisions of "Team:Freiburg/Testpage"

Line 4: Line 4:
 
{{Freiburg/wiki_content_start}}
 
{{Freiburg/wiki_content_start}}
 
<html>
 
<html>
 +
 
<style>
 
<style>
 +
 
/*========= BEGIN: style for navigation bar ==========*/
 
/*========= BEGIN: style for navigation bar ==========*/
 
#project {
 
#project {
Line 20: Line 22:
  
  
−
/* ========== Style for animated box ========== */
+
/*========= BEGIN: Linkbutton in slider ============*/
 +
.intro_button a:hover {
 +
    text-decoration: underline;
 +
}
  
−
.hovertext{
+
.intro_button a {  
−
    visibility: hidden;
+
     color: #FFF;
−
    opacity: 0;
+
−
    position: absolute;
+
−
    font-size: 120%;
+
−
    font-weight: 500;
+
−
     color: #0051A2;
+
−
    transition: opacity 0.5s ease-in;
+
 
}
 
}
  
−
#DNA:hover + #DNA_label {
+
.intro_button {
−
     transform: translateY(-2.6em);
+
    margin: 0px auto;
−
     opacity: 1;
+
    padding: 2px 5px 5px 10px;
−
     visibility: visible;
+
    width: 180px;
 +
    line-height: 16px;
 +
    text-align: center;
 +
    /*background-color: #326aab;*/
 +
    background-color: #0051A2;
 +
     font-size: 14pt;
 +
    border-radius: 8px;
 +
     /*box-shadow: 1px -1px 1px 0px #888;*/
 +
     /*border: 1px solid #F9F9F9;*/
 +
    color: #FFF;
 
}
 
}
  
−
#cellfree:hover + #cellfree_label {
+
.menu-arrow{
−
    transform: translateY(-2.6em);
+
background-image: url("https://static.igem.org/mediawiki/2015/f/ff/Freiburg_submenu_arrow.png");
−
    opacity: 1;
+
background-repeat: no-repeat;
−
    visibility: visible;
+
background-position: 5% 50%;
 +
background-size: 10px 13px;
 
}
 
}
 +
/*========= END: Linkbutton in slider ============*/
  
−
#protpur:hover + #protpur_label {
+
 
−
    transform: translateY(-2.6em);
+
/*=========BEGIN: General Styles ==========*/
−
    opacity: 1;
+
.header_box h1{
−
    visibility: visible;
+
  color: #C5162F;
 +
  font-size: 40px;
 +
  margin-bottom: 28px;
 +
  margin-top: 20px;
 +
  line-height: 45px;
 +
  font-weight: 200;
 +
  padding-top: 0px;
 +
  padding-bottom: 0px;
 +
  overflow: visible;
 +
  text-align: center;
 
}
 
}
 +
/*=========END: General Styles===========*/
  
−
#surchem:hover + #surchem_label {
+
 
−
    transform: translateY(-2.6em);
+
 
−
    opacity: 1;
+
@media screen and (min-width: 1000px){
−
    visibility: visible;
+
 
 +
/* code adapted from http://www.smashingmagazine.com/2012/04/pure-css3-cycling-slideshow/*/
 +
 
 +
#slider {
 +
  height: 500px;
 +
  width: 910px;
 +
  overflow: visible;
 +
  position: relative;
 
}
 
}
  
−
#irif:hover + #irif_label {
+
/* hides everything outside the slider box */
−
    transform: translateY(-2.6em);
+
#mask {
−
    opacity: 1;
+
  overflow: hidden;
−
    visibility: visible;
+
  height: 500px;
 
}
 
}
  
−
#DNA{
+
/* initialize position for positioning slides outside the slider */
−
  left: 380px;
+
#slider ul {
−
  top: 0;
+
  margin: 0;
 +
  padding: 0;
 +
  position: relative;
 
}
 
}
  
−
#cellfree{
+
/* define image properties and position them outside the slider mask */
−
  left: 340px;
+
#slider li {
−
  top: 90px;
+
  width: 900px; /* Width slide */
 +
  height: 500px; /* Height slide */
 +
  position: absolute;
 +
  right: 0; /* Original Position - Outside of the Slider */
 +
  list-style: none;
 
}
 
}
  
−
#protpur{
+
 
−
   left: 80px;
+
#first,
−
   top: 100px;
+
#second,
 +
#third,
 +
#fourth,
 +
#fifth,
 +
#sixth,
 +
#seventh,
 +
#eightth {
 +
   left: -1000px;
 +
  -ms-transition: tranform 1s ease;
 +
  -webkit-transition: transform 1s ease;
 +
  transition: transform 1s ease;
 +
   font-size: 100%;
 
}
 
}
  
−
#surchem{
+
#first{left: 0;}
−
  left: 230px;
+
#third{z-index : -100;}
−
  top: 150px;
+
#sixth{z-index: -100;}
 +
#fifth{z-index: -100;}
 +
#fourth{z-index: -100}
 +
#seventh{z-index: -100;}
 +
#eightth{z-index: -100; left: 1000px}
 +
 
 +
.container{
 +
    position: relative;
 +
    height: 500px;
 +
    margin: 3% auto;
 +
    width: 1000px;
 
}
 
}
  
−
#irif{
+
#buttonleft {
−
   left: 80px;
+
   z-index: 200;
−
   top: 215px;
+
  position: absolute;
 +
   top: 190px;
 +
  left: 0;
 
}
 
}
  
−
.circle:hover{
+
#buttonright{
−
    -webkit-transition: all ease-in 0.1s;
+
  z-index: 200;
−
    -moz-transition: all ease-in 0.1s;
+
  position: absolute;
−
    -o-transition: all ease-in 0.1s;
+
  right: 0;
−
      transition: all ease-in 0.1s;
+
  top: 190px;
−
 
+
−
    background-color: rgba(255,255,255, 0.3);
+
 
}
 
}
  
−
.circle{
+
#buttonleft img,
−
    -webkit-transition: all ease-in 0.1s;
+
#buttonright img{
−
    -moz-transition: all ease-in 0.1s;
+
  width: 50px;
−
    -o-transition: all ease-in 0.1s;
+
}
−
    transition: all ease-in 0.1s;
+
  
−
    width: 60px;
+
#content-slider{
−
    height: 60px;
+
  position: absolute;
−
    border-radius: 50px;
+
  top:0;
−
    border: 3px solid #0051A2;
+
  left:50px
−
    position: absolute;
+
 
}
 
}
  
−
.link_image{
+
 
−
    position: relative;
+
#buttonright:hover,
 +
#buttonleft:hover{
 +
  cursor: pointer;
 +
  cursor: hand;
 
}
 
}
  
−
/* ========== END: Style for animated box ========== */
+
.artboard{
 +
    box-sizing: border-box;
 +
    height: 470px;
 +
    border-radius: 60px;
 +
    background-color: #FCFCFC;
 +
  box-shadow: 1px 1px 10px rgb(136, 136, 136);
 +
  margin: 5px;
 +
  border: 2px solid rgb(0, 81, 162);
 +
}
  
−
</style>
+
.slidertext p{
 +
  margin-bottom: 0;
 +
}
  
−
<script type="text/javascript">
+
.slidertext h1 {
 +
    text-align: center;
 +
}
  
−
$(document).ready(resizeslider);
+
.slidertext.indent{
−
$(window).resize(resizeslider);
+
  clear: both;
 +
  margin-left: 15%;
 +
  margin-top: 0;
 +
  width: 290px;
 +
}
  
−
function resizeslider(event){
+
.dummy-image{
 +
  background-color: black;
 +
  height: 400px;
 +
  width: 350px;
 +
}
  
−
        var assemblyImage = document.getElementById("assembly_image");
+
/* ============= BEGIN: Styling for tree-like structure =============== */
−
        var assembly_width  = assemblyImage.clientWidth;
+
−
        var assembly_height  = assemblyImage.clientHeight;
+
−
       
+
−
        var assembly_DNA_circ = document.getElementById("DNA");
+
−
        var assembly_cellfree_circ = document.getElementById("cellfree");
+
−
        var assembly_protpur_circ = document.getElementById("protpur");
+
−
        var assembly_surchem_circ = document.getElementById("surchem");
+
−
        var assembly_irif_circ = document.getElementById("irif");
+
  
 +
.floatcontainer{
 +
  float: left;
 +
}
  
−
        console.log('assembly_width'+assembly_width);
+
.container{
 +
  clear: both;
 +
}
  
−
        assembly_DNA_circ.style.left = 380*assembly_width/470 + "px";
+
.transparent_container{
−
        assembly_DNA_circ.style.top = 0*assembly_height/293 + "px";
+
  overflow: hidden
 +
}
  
−
        assembly_cellfree_circ.style.left = 340*assembly_width/470 + "px";
+
#content_box1{
−
        assembly_cellfree_circ.style.top = 90*assembly_height/293 + "px";
+
  margin-left: 15%;
 +
}
  
−
        assembly_protpur_circ.style.left = 80*assembly_width/470 + "px";
+
#content_box2{
−
        assembly_protpur_circ.style.top = 100*assembly_height/293 + "px";
+
  margin-right: 15%
 +
}
  
−
        assembly_surchem_circ.style.left = 230*assembly_width/470 + "px";
+
#content_box3{
−
        assembly_surchem_circ.style.top = 150*assembly_height/293 + "px";
+
  margin-left: 15%;
 +
}
  
−
        assembly_irif_circ.style.left = 80*assembly_width/470 + "px";
+
#leftimage img{
−
        assembly_irif_circ.style.top = 215*assembly_height/293 + "px";
+
  width: 450px;
 +
}
  
−
        $(".circle").css("width", ""+assembly_width/9);
+
} /* end of media query */
−
        $(".circle").css("height", ""+assembly_width/9);
+
−
        $(".circle").css("border-radius", "100px");
+
  
−
        $('.hovertext').css({"font-size": 120*assembly_width/470 + "%"});
+
.sliderimage{
 +
  float: right;
 +
  margin: 3% 70px 3% 25px;
 +
  width: 350px
 
}
 
}
  
−
</script>
+
.slidertext{
 +
  margin: 3% 25px 0 65px;
 +
  width: 350px;
 +
  text-align: justify;
 +
  line-height: 1;
 +
  float: left;
 +
}
  
  
−
<div class="todo_box">
+
/* ============= END: Styling for tree-like structure =============== */
−
1)Insert Link-Button (-->Sabine)<br>
+
−
2)Rewrite Intro: So far Intro does not introduce the text<br>
+
−
3)Check the text in general
+
−
</div>
+
  
−
<div class="content_box">
+
</style>
−
     
+
−
<h1>The DiaCHIP : Overview</h1>
+
  
−
<p>
 
−
  The DiaCHIP is a diagnostic device that offers the possibility for broadband screening for hundreds of diseases simultaneously. By detecting antibodies which indicate an immune response against infections or a successful vaccination, it can differentiate between a simple fever and life threatening infections, for example. All that is needed for this broadband test is a single drop of a patient's blood. <br>
 
−
The DiaCHIP allows a fast diagnosis and therefore shortens the time till a patient gets the required treatment.
 
−
</p>
 
  
−
<h2>The Backgrounds of the DiaCHIP </h2>
+
<script>
 +
$(document).ready(function(){
  
−
<div class="flexbox" style="margin-top: 3.5em;">
+
    var distance = 2;
−
     <div id="Assembling" class="link_image">
+
     // see: http://atomicrobotdesign.com/blog/web-development/how-to-disable-a-button-until-a-jquery-animation-has-finished/ //
−
        <a href="https://2015.igem.org/Team:Freiburg/Project/DNA_Engineering" id="DNA" class="circle"></a>
+
    // bind the button to the function, so it can be unbound in the code and the button isnt clickable any more //
−
        <div class="hovertext" id="DNA_label">DNA Engineering</div>
+
    $("#buttonleft").bind("click", moveleft);
−
        <a href="https://2015.igem.org/Team:Freiburg/Project/Cellfree_Expression" id="cellfree" class="circle"></a>
+
  function moveleft(e) {
−
        <div class="hovertext" id="cellfree_label">Cell-free Expression</div>
+
    // unbind the button //
−
        <a href="https://2015.igem.org/Team:Freiburg/Project/Protein_Purification" id="protpur" class="circle"></a>
+
    $("#buttonleft").unbind();
−
        <div class="hovertext" id="protpur_label">Protein Purification</div>
+
    console.log("Click "+distance);
−
        <a href="https://2015.igem.org/Team:Freiburg/Project/Surface_Chemistry" id="surchem" class="circle"></a>
+
−
        <div class="hovertext" id="surchem_label">Surface Chemistry</div>
+
−
        <a href="https://2015.igem.org/Team:Freiburg/Project/iRIf" id="irif" class="circle"></a>
+
−
        <div class="hovertext" id="irif_label">iRIf</div>
+
−
        <img id="assembly_image" src="https://static.igem.org/mediawiki/2015/0/0f/Freiburg_homepage_chip_blood.png" width="100%">
+
−
    </div>
+
−
</div>
+
  
 +
    if (distance == 1) {
 +
      console.log("Distance: "+distance);
 +
      $('#first').css({"transform": "translateX(0)", "-webkit-transform": "translateX(0)", "-ms-transform": "translateX(0)"}); /* 2 first */
 +
        $('#second').css({"z-index": "100"}); /* begin second */
 +
        $('#third').css({});
 +
        $('#fourth').css({});
 +
        $('#fifth').css({});
 +
        $('#sixth').css({});
 +
        $('#seventh').css({"z-index": "-100", "transform": "translateX(0)", "-webkit-transform": "translateX(0)", "-ms-transform": "translateX(0)"}); /* 4 seventh */
 +
        $('#eightth').css({"transform": "translateX(0)", "-webkit-transform": "translateX(0)", "-ms-transform": "translateX(0)"}); /* 3 eightth */
 +
        distance = 2;
 +
    }
  
 +
    else if (distance ==2) {
 +
      console.log("Distance: "+distance);
 +
      $('#first').css({"transform": "translateX(1000px)", "-webkit-transform": "translateX(1000px)", "-ms-transform": "translateX(1000px)"}); /* 3 first */
 +
        $('#second').css({"transform": "translateX(1000px)", "-webkit-transform": "translateX(1000px)", "-ms-transform": "translateX(1000px)"}); /* 2 second */
 +
        $('#third').css({"z-index": "100"}); /* begin third */
 +
        $('#fourth').css({});
 +
        $('#fifth').css({});
 +
        $('#sixth').css({});
 +
        $('#seventh').css({});
 +
        $('#eightth').css({"z-index": "-100", "transform": "translateX(-2000px)", "-webkit-transform": "translateX(-2000px)", "-ms-transform": "translateX(-2000px)"}); /* 4 eightth */
 +
        distance = 3;
 +
    }
  
−
<div>
+
    else if (distance ==3) {
−
<h2>Step 1: Basic Setup of the DiaCHIP</h2>
+
      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)"}); /* 4 first */
 +
        $('#second').css({"transform": "translateX(2000px)", "-webkit-transform": "translateX(2000px)", "-ms-transform": "translateX(2000px)"}); /* 3 second */
 +
        $('#third').css({"transform": "translateX(1000px)", "-webkit-transform": "translateX(1000px)", "-ms-transform": "translateX(1000px)"}); /* 2 third */
 +
        $('#fourth').css({"z-index": "100"}); /* begin fourth */
 +
        $('#fifth').css({});
 +
        $('#sixth').css({});
 +
        $('#seventh').css({});
 +
        $('#eightth').css({});
 +
        distance = 4;
 +
    }
  
−
<div class="image_box right">
+
    else if (distance ==4) {
 +
      console.log("Distance: "+distance);
 +
      $('#first').css({});
 +
        $('#second').css({"z-index": "-100", "transform": "translateX(0)", "-webkit-transform": "translateX(0)", "-ms-transform": "translateX(0)"}); /* 4 second */
 +
        $('#third').css({"transform": "translateX(2000px)", "-webkit-transform": "translateX(2000px)", "-ms-transform": "translateX(2000px)"}); /* 3 third */
 +
        $('#fourth').css({"transform": "translateX(1000px)", "-webkit-transform": "translateX(1000px)", "-ms-transform": "translateX(1000px)"}); /* 2 fourth */
 +
        $('#fifth').css({"z-index": "100"}); /* begin fifth */
 +
        $('#sixth').css({});
 +
        $('#seventh').css({});
 +
        $('#eightth').css({});
 +
        distance = 5;
 +
    }
  
−
<div class="thumb2 trien" style="width:310px">
+
    else if (distance ==5) {
 +
      console.log("Distance: "+distance);
 +
      $('#first').css({});
 +
        $('#second').css({});
 +
        $('#third').css({"z-index": "-100", "transform": "translateX(0)", "-webkit-transform": "translateX(0)", "-ms-transform": "translateX(0)"}); /* 4 third */
 +
        $('#fourth').css({"transform": "translateX(2000px)", "-webkit-transform": "translateX(2000px)", "-ms-transform": "translateX(2000px)"}); /* 3 fourth */
 +
        $('#fifth').css({"transform": "translateX(1000px)", "-webkit-transform": "translateX(1000px)", "-ms-transform": "translateX(1000px)"}); /* 2 fifth */
 +
        $('#sixth').css({"z-index": "100"}); /* begin sixth */
 +
        $('#seventh').css({});
 +
        $('#eightth').css({});
 +
        distance = 6;
 +
    }
  
−
                                <div class="thumbinner">
+
    else if (distance == 6) {
 +
      console.log("Distance: "+distance);
 +
      $('#first').css({});
 +
        $('#second').css({});
 +
        $('#third').css({});
 +
        $('#fourth').css({"z-index" : "-100", "transform": "translateX(0)", "-webkit-transform": "translateX(0)", "-ms-transform": "translateX(0)"}); /* 4 fourth */
 +
        $('#fifth').css({"transform": "translateX(2000px)", "-webkit-transform": "translateX(2000px)", "-ms-transform": "translateX(2000px)"}); /* 3 fifth */
 +
        $('#sixth').css({"transform": "translateX(1000px)", "-webkit-transform": "translateX(1000px)", "-ms-transform": "translateX(1000px)"}); /* 2 sixth */
 +
        $('#seventh').css({"z-index": "100"}); /* begin seventh */
 +
        $('#eightth').css({});
 +
        distance = 7;
 +
    }
  
−
                                <a href="https://static.igem.org/mediawiki/2015/5/55/Freiburg_generaloverview_RJ.jpeg" class="lightbox_trigger">
+
    else if (distance == 7) {
 +
      console.log("Distance: "+distance);
 +
      $('#first').css({});
 +
        $('#second').css({});
 +
        $('#third').css({});
 +
        $('#fourth').css({});
 +
        $('#fifth').css({"z-index": "-100", "transform": "translateX(0)", "-webkit-transform": "translateX(0)", "-ms-transform": "translateX(0)"}); /* 4 fifth */
 +
        $('#sixth').css({"transform": "translateX(2000px)", "-webkit-transform": "translateX(2000px)", "-ms-transform": "translateX(2000px)"}); /* 3 sixth */
 +
        $('#seventh').css({"transform": "translateX(1000px)", "-webkit-transform": "translateX(1000px)", "-ms-transform": "translateX(1000px)"}); /* 2 seventh */
 +
        $('#eightth').css({"z-index": "100"}); /* begin eightth */
 +
        distance = 8;
 +
    }
  
−
                                  <img src="https://static.igem.org/mediawiki/2015/f/f0/Freiburg_generaloverview_RJ_preview.jpeg" width="300px">
+
    else if (distance == 8) {
 +
      console.log("Distance: "+distance);
 +
      $('#first').css({"z-index": "100"}); /* begin first */
 +
        $('#second').css({});
 +
        $('#third').css({});
 +
        $('#fourth').css({});
 +
        $('#fifth').css({});
 +
        $('#sixth').css({"z-index": "-100", "transform": "translateX(0)", "-webkit-transform": "translateX(0)", "-ms-transform": "translateX(0)"}); /* 4 sixth */
 +
        $('#seventh').css({"transform": "translateX(2000px)", "-webkit-transform": "translateX(2000px)", "-ms-transform": "translateX(2000px)"}); /* 3 seventh */
 +
        $('#eightth').css({"transform": "translateX(-1000px)", "-webkit-transform": "translateX(-1000px)", "-ms-transform": "translateX(-1000px)"}); /* 2 eightth */
 +
        distance = 1;
 +
    }
  
−
                                                <div class="thumbcaption">
+
    // 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);
 +
  }
  
−
                                                </a>
 
  
−
                                                <p><strong>Figure 1: The DiaCHIP is based on antigenic peptides derived from viruses and bacteria.</strong>DNA is immobilized on a silicone slide. These sequences are coding for antigens specific for several pathogens. The antigens are expressed by cell-free expression and immobilized on the glass slide.</p>
+
    $("#buttonright").bind("click", moveright);
 +
  function moveright(e) {
  
−
                                                </div>
+
    $("#buttonright").unbind();
 +
    console.log("Click "+distance);
  
−
                                </div>
+
    if (distance == 1) {
−
    </div>
+
      $('#first').css({"z-index": "-100"}); /* 1 second */
−
</div>
+
        $('#second').css({});
 +
        $('#third').css({});
 +
        $('#fourth').css({});
 +
        $('#fifth').css({});
 +
        $('#sixth').css({"transform": "translateX(2000px)", "-webkit-transform": "translateX(2000px)", "-ms-transform": "translateX(2000px)"}); /* 6 third */
 +
        $('#seventh').css({"z-index": "100","transform": "translateX(1000px)", "-webkit-transform": "translateX(1000px)", "-ms-transform": "translateX(1000px)"}); /* 7 third */
 +
        $('#eightth').css({"transform": "translateX(-2000px)", "-webkit-transform": "translateX(-2000px)", "-ms-transform": "translateX(-2000px)"}); /* 8 first */
 +
        distance = 8;
 +
    }
  
 +
    else if (distance ==2) {
 +
      console.log("Distance: "+distance);
 +
      $('#first').css({"transform": "translateX(-1000px)", "-webkit-transform": "translateX(-1000px)", "-ms-transform": "translateX(-1000px)"}); /* 1 first */
 +
        $('#second').css({"z-index": "-100"}); /* 2 second */
 +
        $('#third').css({});
 +
        $('#fourth').css({});
 +
        $('#fifth').css({});
 +
        $('#sixth').css({});
 +
        $('#seventh').css({"transform": "translateX(2000px)", "-webkit-transform": "translateX(2000px)", "-ms-transform": "translateX(2000px)"}); /* 7 third */
 +
        $('#eightth').css({"z-index": "100","transform": "translateX(-1000px)", "-webkit-transform": "translateX(-1000px)", "-ms-transform": "translateX(-1000px)"}); /* 8 fourth */
 +
        distance = 1;
 +
    }
  
−
<p>
+
    else if (distance ==3) {
−
The aim of our DiaCHIP is to screen simultaneously for hundreds of different infectious diseases. We based our system on the detection of antibodies specifically interacting with antigens derived from viruses and bacteria (figure 1). If you get in contact with one of these pathogens your immune system is producing antibodies. These are DNA to the corresponding antigen, which can be detected with the DiaCHIP.  
+
      console.log("Distance: "+distance);
−
Our approach is based on two components: a silicone slide where DNA coding for distinct antigenic peptides is immobilized and a glass slide with a specific surface for the DNA of the expressed antigens. Both are about the size of a microscopy slide and form a microfluidic chamber. By adding blood of a patient, antibodies that might be present in the sample due to a disease bind to the corresponding antigens.
+
      $('#first').css({"z-index": "100","transform": "translateX(0)", "-webkit-transform": "translateX(0)", "-ms-transform": "translateX(0)"}); /* 1 fourth */
−
</p>
+
        $('#second').css({"transform": "translateX(0)", "-webkit-transform": "translateX(0)", "-ms-transform": "translateX(0)"}); /* 2 first */
−
</div>
+
        $('#third').css({"z-index": "-100"}); /* 3 second */
 +
        $('#fourth').css({});
 +
        $('#fifth').css({});
 +
        $('#sixth').css({});
 +
        $('#seventh').css({});
 +
        $('#eightth').css({"transform": "translateX(0)", "-webkit-transform": "translateX(0)", "-ms-transform": "translateX(0)"}); /* 8 third */
 +
        distance = 2;
 +
    }
  
−
<div class="float_barrier"></div>
+
    else if (distance ==4) {
 +
      console.log("Distance: "+distance);
 +
      $('#first').css({"transform": "translateX(1000px)", "-webkit-transform": "translateX(1000px)", "-ms-transform": "translateX(1000px)"}); /* 1 third */
 +
        $('#second').css({"z-index": "100","transform": "translateX(1000px)", "-webkit-transform": "translateX(1000px)", "-ms-transform": "translateX(1000px)"}); /* 2 fourth */
 +
        $('#third').css({"transform": "translateX(0)", "-webkit-transform": "translateX(0)", "-ms-transform": "translateX(0)"}); /*3 first */
 +
        $('#fourth').css({"z-index": "-100"}); /* 4 second*/
 +
        $('#fifth').css({});
 +
        $('#sixth').css({});
 +
        $('#seventh').css({});
 +
        $('#eightth').css({});
 +
        distance = 3;
 +
    }
  
−
<div>
+
    else if (distance ==5) {
−
<h2>Step 2: Cell-Free Expressed Proteins</h2>
+
      console.log("Distance: "+distance);
 +
      $('#first').css({});
 +
        $('#second').css({"transform": "translateX(2000px)", "-webkit-transform": "translateX(2000px)", "-ms-transform": "translateX(2000px)"}); /* 2 third */
 +
        $('#third').css({"z-index": "100","transform": "translateX(1000px)", "-webkit-transform": "translateX(1000px)", "-ms-transform": "translateX(1000px)"}); /* 3 fourth */
 +
        $('#fourth').css({"transform": "translateX(0)", "-webkit-transform": "translateX(0)", "-ms-transform": "translateX(0)"}); /* 4 first */
 +
        $('#fifth').css({"z-index": "-100"}); /* 5 second */
 +
        $('#sixth').css({});
 +
        $('#seventh').css({});
 +
        $('#eightth').css({});
 +
        distance = 4;
 +
    }
  
−
<div class="image_box right">
+
    else if (distance == 6) {
 +
      console.log("Distance: "+distance);
 +
      $('#first').css({});
 +
        $('#second').css({});
 +
        $('#third').css({"transform": "translateX(2000px)", "-webkit-transform": "translateX(2000px)", "-ms-transform": "translateX(2000px)"}); /* 3 third */
 +
        $('#fourth').css({"z-index": "100","transform": "translateX(1000px)", "-webkit-transform": "translateX(1000px)", "-ms-transform": "translateX(1000px)"}); /* 4 fourth */
 +
        $('#fifth').css({"transform": "translateX(0)", "-webkit-transform": "translateX(0)", "-ms-transform": "translateX(0)"}); /* 5 first */
 +
        $('#sixth').css({"z-index": "-100"}); /* 6 second */
 +
        $('#seventh').css({});
 +
        $('#eightth').css({});
 +
        distance =  5;
 +
    }
  
−
<div class="thumb2 trien" style="width:310px">
+
    else if (distance == 7) {
 +
      console.log("Distance: "+distance);
 +
      $('#first').css({});
 +
        $('#second').css({});
 +
        $('#third').css({});
 +
        $('#fourth').css({"transform": "translateX(2000px)", "-webkit-transform": "translateX(2000px)", "-ms-transform": "translateX(2000px)"}); /* 4 third */
 +
        $('#fifth').css({"z-index": "100","transform": "translateX(1000px)", "-webkit-transform": "translateX(1000px)", "-ms-transform": "translateX(1000px)"}); /* 5 fourth */
 +
        $('#sixth').css({"transform": "translateX(0)", "-webkit-transform": "translateX(0)", "-ms-transform": "translateX(0)"}); /* 6 first */
 +
        $('#seventh').css({"z-index": "-100"}); /* 7 second */
 +
        $('#eightth').css({});
 +
        distance = 6;
 +
    }
  
−
                                <div class="thumbinner">
+
    else if (distance == 8) {
 +
      console.log("Distance: "+distance);
 +
      $('#first').css({});
 +
        $('#second').css({});
 +
        $('#third').css({});
 +
        $('#fourth').css({});
 +
        $('#fifth').css({"transform": "translateX(2000px)", "-webkit-transform": "translateX(2000px)", "-ms-transform": "translateX(2000px)"}); /* 5 third */
 +
        $('#sixth').css({"z-index": "100","transform": "translateX(1000px)", "-webkit-transform": "translateX(1000px)", "-ms-transform": "translateX(1000px)"}); /* 6 fourth */
 +
        $('#seventh').css({"transform": "translateX(0)", "-webkit-transform": "translateX(0)", "-ms-transform": "translateX(0)"}); /* 7 first */
 +
        $('#eightth').css({"z-index": "-100"}); /* 8 second */
 +
        distance = 7;
 +
    }
  
−
                                <a href="https://static.igem.org/mediawiki/2015/e/ee/Freiburg_overviewcellfree_RJ.jpg" class="lightbox_trigger">
+
    setTimeout(function(){
 +
      $("#buttonright").bind("click", moveright);
 +
    }, 1000);
 +
  }
 +
});
 +
</script>
  
−
                                  <img src="https://static.igem.org/mediawiki/2015/e/e5/Freiburg_overviewcellfree_RJ_preview.jpg" width="300px">  
+
<!-- BEGIN Responsive Layout -->
  
−
                                                <div class="thumbcaption">
+
<style type="text/css">
  
−
                                                </a>
+
@media screen and (max-width: 1000px){
 +
  #leftimage{
 +
    display: none;
 +
  }
  
−
                                                <p><strong>Figure 2: The expression of the antigens is achieved by our cell-free expression mix.</strong> This mix is based on a bacterial lysate and contains all components required for transcription and translation of the DNA sequences.</p>
+
  #buttonleft,
 +
  #buttonright{
 +
    display: none;
 +
  }
  
−
                                                </div>
+
  .slidertext,
 +
  .sliderimage{
 +
    width: 46%;
 +
    margin: auto 2% auto 2%;
 +
  }
  
−
                </div>
+
  #mask ul{
 +
    margin-left: 0;
 +
  }
 +
  #content_box1,
 +
  #content_box2,
 +
  #content_box3{
 +
      margin-right: 10px;
 +
      margin-left: 10px;   
 +
  }
  
−
</div>
+
  .transparent_container{
−
</div>
+
    overflow: visible;
 +
  }
  
−
<p>
+
  #first,
−
To enable the production of a protein array consisting of multiple antigens on demand, their expression is mediated by cell-free expression from a <a href="https://2015.igem.org/Team:Freiburg/Results/protpur"target="_blank">template DNA array</a>. This expression system based on bacterial lysate makes the need for genetically engineered organisms to produce every single antigen redundant.
+
  #second,
−
The protein array is generated by flushing <a href="https://2015.igem.org/Team:Freiburg/Results/Cellfree"target="_blank">our cell-free expression mix</a> through the microfluidic setup. Expressing the antigens from the DNA template, the protein array is adaptable to individual requirements exhibiting the same pattern for both arrays.
+
  #third,
−
Our system is made up of two slides enabling the antigens to be immobilized on the opposite side of the DNA template inside the microfluidic chamber (figure 2).
+
  #fourth,
−
</p>
+
  #fifth,
−
</div>
+
  #sixth,
 +
  #seventh,
 +
  #eightth {
 +
    left: 0;
 +
    font-size: 100%;
 +
    z-index: 0;
 +
  }
  
−
<div class="float_barrier"></div>
+
}
  
−
<p>
+
@media screen and (max-width: 600px){
−
<h2>Step 3: A Specific Surface is Catching the Expressed Protein</h2>
+
  
−
<div class="image_box right">
+
  .sliderimage img{
 +
    display: none;
 +
  }
  
−
<div class="thumb2 trien" style="width:250px">
+
  .slidertext {
 +
    width: 96%;
 +
    margin: auto 2% auto 2%;
 +
  }
  
−
                                <div class="thumbinner">
+
}
  
−
                                <a href="https://static.igem.org/mediawiki/2015/7/79/Freiburg_specific_surface_RJ.jpg" class="lightbox_trigger">
+
</style>
  
−
                                  <img src="https://static.igem.org/mediawiki/2015/0/03/Freiburg_specific_surface_RJ_preview.jpg" width="300px">  
+
<script type="text/javascript">
  
−
                                                <div class="thumbcaption">
+
$(document).ready(changesliderclass);
 +
$(window).resize(changesliderclass);
  
−
                                                </a>
+
function changesliderclass() {
 +
  if ($(window).width() < 1000) {
 +
    console.log('changesliderclass');
 +
    $('#first').attr('class', 'content_box');
 +
    $('#second').attr('class', 'content_box');
 +
    $('#third').attr('class', 'content_box');
 +
    $('#fourth').attr('class', 'content_box');
 +
    $('#fifth').attr('class', 'content_box');
 +
    $('#sixth').attr('class', 'content_box');
 +
    $('#seventh').attr('class', 'content_box');
 +
    $('#eightth').attr('class', 'content_box');
  
−
                                                <p><strong>Figure 3: Surface protpur.</strong>To prevent unspecific DNA of components of the cell-free expression mix on the glass slide, we established a surface that specifically binds our target proteins, the antigens.</p>
+
    $('#first').css({"left": 0, "font-size": 100%, "z-index": 0;})
 +
    $('#second').attr('class', 'content_box');
 +
    $('#third').attr('class', 'content_box');
 +
    $('#fourth').attr('class', 'content_box');
 +
    $('#fifth').attr('class', 'content_box');
 +
    $('#sixth').attr('class', 'content_box');
 +
    $('#seventh').attr('class', 'content_box');
 +
    $('#eightth').attr('class', 'content_box');
  
−
                                                </div>
+
  } else {
 +
    console.log('dont changesliderclass');
 +
    $('#first').removeAttr('class');
 +
    $('#second').removeAttr('class');
 +
    $('#third').removeAttr('class');
 +
    $('#fourth').removeAttr('class');
 +
    $('#fifth').removeAttr('class');
 +
    $('#sixth').removeAttr('class');
 +
    $('#seventh').removeAttr('class');
 +
    $('#eightth').removeAttr('class');
 +
  }
 +
}
  
 +
</script>
  
 +
<div class="todo_box">
 +
  1)Linkbutton am Ende von Concept einfügen (-->Sabine)<br>
 +
  2)Slider-Bild für Outlook und Slider-Bild für ProtPur neu anordnen (-->Rabea)<br>
 
</div>
 
</div>
−
</div>
 
−
</div>
 
−
</p>
 
  
−
<p>
 
−
After cell-free expression not only our desired antigens are present within the chamber, but also all other components of the cell-free mix including ribosomes, polymerases and amino acids (figure 3).
 
−
All these components would bind unspecifically to an activated glass slide, thereby obstructing the DNA of the antigens. We designed our DNA constructs in a way that each antigen can easily be fused to specific tags that enable targeted protpur on a specific surface. Testing different tag systems, we found the Ni-NTA-His-tag system to be working best for our purposes. A basic protocol for this <a href="https://2015.igem.org/Team:Freiburg/Results/Surface"target="_blank">specific surface</a> was optimized by ourselves to reduce unspecific DNA.
 
−
</p>
 
  
 +
<div class="header_box">   
 +
<h1 class="headerbox">The DiaCHIP - A Versatile Detection System</h1>
 +
</div>
  
 
<div class="float_barrier"></div>
 
<div class="float_barrier"></div>
−
<p>
 
−
<h2>Step 4: The Measurement of DNA Events</h2>
 
−
 
 
−
<div class="image_box right">
 
−
<div class="thumb2 trien" style="width:310px">
 
  
−
                                <div class="thumbinner">
+
<div class="floatcontainer">
  
−
                                <a href="https://static.igem.org/mediawiki/2015/5/56/Freiburg_iRiF_overview_RJ.jpg" class="lightbox_trigger">
+
<div id='leftimage'>
 +
  <img align="left" alt="DiaCHIP_Sabi" src="https://static.igem.org/mediawiki/2015/a/af/Freiburg_DiaCHIP_Sabi.png" height="1430px">
 +
</div>
  
−
                                  <img src="https://static.igem.org/mediawiki/2015/9/9a/Freiburg_iRiF_overview_RJ_preview.jpg" width="300px">  
+
<div class="transparent_container">
 +
<div id="content_box1" class="content_box">
 +
<h2>Project Motivation</h2>
 +
<p>
 +
    Serological tests are a key element in modern medicine. Especially for detection and identification of infectious diseases, performing several blood tests is inevitable. Testing for more than one disease at a time or diagnosing a patient with diffuse symptoms usually requires more than one serological test. Every single test that is performed increases the time of waiting for a result as well as the bill. In case of dangerous infectious diseases every minute until the onset of the appropriate treatment is important for survival. What if there was a possibility to combine all this testing in one single chip which is affordable for everyone?
 +
</p>
 +
</div>
 +
</div>
  
−
                                                <div class="thumbcaption">
 
  
−
                                                </a>
+
<div class="transparent_container">
 +
<div id="content_box2" class="content_box">
 +
<h2 style="text-align:left">Detecting Antigen-Antibody Interactions</h2>
 +
<p>
 +
The DiaCHIP is an innovative tool to screen for a broad range of antibodies present in serum. Antibodies serve as indicator for an immune response towards an infectious disease or a successful vaccination. They also play an important role in the diagnosis of autoimmune diseases. Identifying diseases by detecting disease associated antibodies in a patient's serum is an established method in modern diagnostics. <br>
 +
Based on the very same principle, the DiaCHIP enables to simultaneously screen for multiple diseases at a time, thereby reducing time and costs of a diagnosis. Especially the ability to differentiate between life threatening diseases and mild infections within a short time bears the potential to save lifes. 
 +
</p>
 +
</div>
 +
</div>
  
−
                                                <p><strong>Figure 4: Optical detection method.</strong> The detection system mainly consists of a camera and an LED and is called <a href="https://2015.igem.org/Team:Freiburg/Project/iRIf"target="_blank">iRIf</a> (imaging Reflectometric Interference). Antigen-Antibody interactions can be detected label-free and in real-time. An optical output of such DNA events is generated by a minimal change in the thickness of the layer on the slide right at the corresponding antigen spot.</p>
+
<div class="transparent_container">
−
</div>
+
<div id="content_box3" class="content_box">
 +
<h2>The Concept</h2>
 +
<p>
 +
  The key feature of the DiaCHIP concept is the combination of on-demand protein synthesis of disease related antigens and a novel method for label-free detection - all this packed into one device. The idea is to overcome challenges commonly found in protein array production and preservation. In addition, results can be obtained in a time- and cost-efficient manner; with a device simple enough to be rebuilt by future iGEM teams.
 +
</p>
 +
                <p><a href="https://2015.igem.org/Team:Freiburg/Project/System" title="System Overview">Step by Step Overview</a></p>
 +
</div>
 +
</div>
  
−
</div>                                           
 
−
</div>
 
 
</div>
 
</div>
−
</p>
 
  
−
<p>
 
−
  After preparation of the DiaCHIP, a patient’s serum sample can be flushed over the protein array using the same microfluidic system. The DNA of antibodies to the corresponding surface causes a minimal change in the thickness of the layer on the slide right at the corresponding antigen spot. This DNA can be detected label-free and in real-time using a novel technique called <a href="https://2015.igem.org/Team:Freiburg/Project/iRIf"target="_blank">iRIf</a> (imaging Reflectometric Interference) without the need for further labeling. Its core components are a camera, an LED and two lenses.
 
−
See how we reconstructed the system in a <a href="https://2015.igem.org/Team:Freiburg/Results/Own_Device"target="_blank">low-budget device</a>.
 
−
</p>
 
−
 
−
 
 
<div class="float_barrier"></div>
 
<div class="float_barrier"></div>
−
<p>
 
−
<h2>Step 5: Changing Perspectives - Off to our Results </h2>
 
  
−
<div class="image_box right">
+
 
−
    <div class="thumb2 trien" style="width:310px">
+
 
−
        <div class="thumbinner">
+
<!---------------BEGIN SLIDER------------------>
−
            <a href="https://static.igem.org/mediawiki/2015/9/93/Freiburg_changeperspective.jpeg" class="lightbox_trigger">
+
<div class="container">
−
                 <img src="https://static.igem.org/mediawiki/2015/8/8f/Freiburg_changeperspective_preview.jpg" width="300px">  
+
  <div id="buttonright">
−
            </a>
+
    <img src="https://static.igem.org/mediawiki/2015/b/b3/Freiburg_lightbulb_slider_30.png">
−
            <div class="thumbcaption">
+
  </div>
−
                 <p><strong>Figure 5: Illustration of the perspective during a measurement.</strong> </p>
+
  <div id="buttonleft">
−
            </div>
+
    <img src="https://static.igem.org/mediawiki/2015/4/4d/Freiburg_lightbulb_slider_27.png">
−
        </div>
+
  </div>
−
    </div>
+
  <div id="content-slider">
−
</div>
+
      <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" style="margin-top:10%">
 +
                 <img src="https://static.igem.org/mediawiki/2015/6/6a/Freiburg_DiaCHIP_overview_scaled.jpg" width="350px">
 +
              </div>
 +
              <div class="slidertext">
 +
                 <h1>The DiaCHIP - System Overview</h1>
 +
                <p>The core of our new diagnostic device consists of two slides that form a microfluidic chamber. Therein, an antigen array can be generated on demand on the bottom slide. By flushing the chamber with a blood sample, antibodies present in the sample bind to corresponding antigens. This interaction is detected in real-time using the optical detection method iRIf.</p>
 +
                <p>
 +
              <div class="intro_button menu-arrow">         
 +
                <a href="https://2015.igem.org/Team:Freiburg/Project/System" title="System Overview">Step by Step Overview</a>
 +
              </div>
 +
                </p>
 +
 
 +
              </div>
 +
              </div>
 +
            </li>
 +
 
 +
 
 +
            <li id="second" class="secondanimation">
 +
              <div class="artboard">
 +
              <div class="sliderimage">
 +
                <img src="" width="350px">
 +
              </div>
 +
              <div class="slidertext">
 +
                <h1>Outlook</h1>
 +
                <p>Our results provide a proof of concept that the functional priciple of the DiaCHIP is suitable for antibody detection in complex samples. Although further improvements have to be done in terms of reliablitiy and quantification, various additional applications are conceivable. Representing a way to reduce time and cost required for testing a single patient, the DiaCHIP holds the potential to enhance and enlighten future diagnostics.
 
</p>
 
</p>
 +
            <p>
 +
              <div class="intro_button menu-arrow">         
 +
                <a href="https://2015.igem.org/Team:Freiburg/Project/Future_Directions" title="Future_Directions">DiaCHIP in the <br>Future</a>
 +
              </div>
 +
                </p>
 +
            </li>
  
−
<p>
+
 
−
    When illustrating the basic principle of the DiaCHIP, we mainly looked at it from the side. Now it is time to explore our results and see what we actually achieved. Therefore, it is important to have in mind that you are observing the chip from the camera's position, so basically from the top (figure 5). This persepective remains the same in all the <a href="https://2015.igem.org/Team:Freiburg/Results/Diagnostics">iRIf measurements</a> we are showing in the results section.
+
            <li id="third" class="thirdanimation">
 +
              <div class="artboard">
 +
              <div class="sliderimage" style="margin:6% auto">
 +
                <img src="https://static.igem.org/mediawiki/2015/d/db/Freiburg_iRiF_slider.png" width="70%">
 +
              </div>
 +
              <div class="slidertext">
 +
                <h1>Optical Detection: iRIf</h1>
 +
                <p>One disadvantage of currently available serological tests is the need for secondary labels that allow the detection of disease markers. Making use of an optical method based on the interference of light, the DiaCHIP can detect specific binding events on a protein microarray without further labeling. Read more about this innovative tool and the physics behind it.
 +
                </p>
 +
 
 +
                <p>
 +
              <div class="intro_button menu-arrow">         
 +
                <a href="https://2015.igem.org/Team:Freiburg/Project/iRIf" title="Optical Detection">iRIf Principle and Physics</a>
 +
              </div>
 +
                </p>
 +
 
 +
              </div>
 +
              </div>
 +
            </li>
 +
 
 +
 
 +
            <li id="fourth" class="fourthanimation">
 +
              <div class="artboard">
 +
              <div class="sliderimage" style="margin:8% auto">
 +
                <img src="https://static.igem.org/mediawiki/2015/0/03/Freiburg_specific_surface_RJ_preview.jpg" width="230px">
 +
              </div>
 +
              <div class="slidertext">
 +
                <h1>Surface Chemistry</h1>
 +
                <p>The production of a customized protein microarray in the DiaCHIP is based on selective immobilization of antigens on a glass slide. Therefore, a specific surface chemistry was established to reduce the proportion of unspecific binding of non-target proteins to a minimum.
 +
                  Read more about the different layer compositions we tested on our way to high specificity.
 +
                </p>
 +
 
 +
                <p>
 +
              <div class="intro_button menu-arrow">         
 +
                <a href="https://2015.igem.org/Team:Freiburg/Project/Surface_Chemistry" title="Surface Chemistry">Establishing a Specific Surface</a>
 +
              </div>
 +
                </p>
 +
 
 +
              </div>
 +
              </div>
 +
            </li>
 +
 
 +
 
 +
            <li id="fifth" class="fifthanimation">
 +
              <div class="artboard">
 +
              <div class="sliderimage">
 +
                <img src="<!--https://static.igem.org/mediawiki/2015/f/f8/Freiburg_ProtPur_slider.png-->" width="350px">
 +
              </div>
 +
              <div class="slidertext">
 +
                <h1>Protein Purification</h1>
 +
                <p>Protein expression in the DiaCHIP is mediated by cell-free expression. As this is an advanced method dependent on the optimization of many parameters, we got back to conventional protein purification in <i>E. coli</i> for being able to compare the results of both techniques. <br>
 +
Read more about the overexpression and purification of several antigenic peptides. 
 +
                </p>
 +
 
 +
                <p style="margin-top:30px">
 +
              <div class="intro_button menu-arrow">         
 +
                <a href="https://2015.igem.org/Team:Freiburg/Project/Protein_Purification" title="Protein Purification">Purification of Antigens</a>
 +
              </div>
 +
                </p>
 +
 
 +
              </div>
 +
              </div>
 +
            </li>
 +
 
 +
 
 +
            <li id="sixth" class="sixthanimation">
 +
              <div class="artboard">
 +
              <div class="sliderimage" style="margin-top:12%">
 +
                <img src="https://static.igem.org/mediawiki/2015/e/eb/Freiburg_cellfreeexpressioninchamber.jpeg" width="350px">
 +
              </div>
 +
              <div class="slidertext">
 +
                <h1>Cell-Free Expression</h1>
 +
                <p> A key feature of the DiaCHIP is the capability to produce protein arrays on demand via cell-free expression. To reduce the cost of a DiaCHIP measurement, we produced a cell-free expression system based on an <i>E. coli</i> lysate ourselves. This system is also capable of expressing immobilized DNA sequences. See how this sensitive system was established and optimized.  
 
</p>
 
</p>
 +
            <p>
 +
              <div class="intro_button menu-arrow">         
 +
                <a href="https://2015.igem.org/Team:Freiburg/Project/Cellfree_Expression" title="Cell-Free expression">Cell-free Antigen Expression</a>
 +
              </div>
 +
                </p>
 +
            </li>
  
−
<div>
+
 
−
<p>
+
            <li id="seventh" class="seventhanimation">
−
After weeks of optimizing the different components of the DiaCHIP, we are proud to present our <a href="https://2015.igem.org/Team:Freiburg/Results">results</a>. We reached the highlight of our project with the successful <a href="https://2015.igem.org/Team:Freiburg/Results">detection of antibodies in our own blood!</a>
+
              <div class="artboard">
 +
              <div class="sliderimage" style="margin:10% 60px 3% 25px">
 +
                <img src="https://static.igem.org/mediawiki/2015/b/b2/Freiburg_DNAengineering_slider.png" width="350px">
 +
              </div>
 +
              <div class="slidertext">  
 +
                <h1>DNA Engineering</h1>
 +
                <p>Genetic fusion of different antigens and tags is a basic requirement of our project. In order to enable several people to work in parallel we designed a cloning strategy easy to follow and additionally easy to expand for further needs.
 +
Read more about combining different cloning methods to reduce efforts in DNA Engineering and the design of an expression vector meeting iGEM requirements.
 
</p>
 
</p>
−
</div>
 
  
−
</div> <!-- end level1 -->
+
                <p style="margin-top:10%">
−
</div> <!-- end content_box -->
+
              <div class="intro_button menu-arrow">        
 +
                <a href="https://2015.igem.org/Team:Freiburg/Methods/Cloning" title="DNA Engineering">DNA <br>Engineering</a>
 +
              </div>
 +
                </p>
  
 +
              </div>
 +
              </div>
 +
            </li>
 +
 +
 +
            <li id="eightth" class="eightthanimation">
 +
              <div class="artboard">
 +
              <div class="sliderimage" style="margin:10% 60px 3% 25px">
 +
                <img src="https://static.igem.org/mediawiki/2015/0/0b/Freiburg_ELISA_slider.png" width="350px">
 +
              </div>
 +
              <div class="slidertext">
 +
                <h1>Diagnostics Today</h1>
 +
                <p>Currently used serological tests are available for a broad range of infectious diseases. However, they meet limitations that restrict an early onset of appropriate treatments which could be life-saving. The necessity of performing several tests to check for more than one disease at once is not only time-consuming but also costly. The DiaCHIP tackles these issues by providing a fast and affordable method for simultaneous testing.
 +
                </p>
 +
 +
                <p>
 +
              <div class="intro_button menu-arrow">         
 +
                <a href="https://2015.igem.org/Team:Freiburg/Design" title="Diagnostics today">Limitations and Solutions</a>
 +
              </div>
 +
                </p>
 +
 +
              </div>
 +
            </li>
 +
 +
        </ul>
 +
        </div>  <!-- End Mask -->
 +
      </div>  <!-- End Slider Container -->
 +
  </div>
 +
</div>
 
</html>
 
</html>
−
<!-- content ends here -->
+
<!-- Labjournal content ends here -->
 
{{Freiburg/wiki_content_end}}
 
{{Freiburg/wiki_content_end}}

Revision as of 11:15, 18 September 2015

""

1)Linkbutton am Ende von Concept einfügen (-->Sabine)
2)Slider-Bild für Outlook und Slider-Bild für ProtPur neu anordnen (-->Rabea)

The DiaCHIP - A Versatile Detection System

DiaCHIP_Sabi

Project Motivation

Serological tests are a key element in modern medicine. Especially for detection and identification of infectious diseases, performing several blood tests is inevitable. Testing for more than one disease at a time or diagnosing a patient with diffuse symptoms usually requires more than one serological test. Every single test that is performed increases the time of waiting for a result as well as the bill. In case of dangerous infectious diseases every minute until the onset of the appropriate treatment is important for survival. What if there was a possibility to combine all this testing in one single chip which is affordable for everyone?

Detecting Antigen-Antibody Interactions

The DiaCHIP is an innovative tool to screen for a broad range of antibodies present in serum. Antibodies serve as indicator for an immune response towards an infectious disease or a successful vaccination. They also play an important role in the diagnosis of autoimmune diseases. Identifying diseases by detecting disease associated antibodies in a patient's serum is an established method in modern diagnostics.
Based on the very same principle, the DiaCHIP enables to simultaneously screen for multiple diseases at a time, thereby reducing time and costs of a diagnosis. Especially the ability to differentiate between life threatening diseases and mild infections within a short time bears the potential to save lifes.

The Concept

The key feature of the DiaCHIP concept is the combination of on-demand protein synthesis of disease related antigens and a novel method for label-free detection - all this packed into one device. The idea is to overcome challenges commonly found in protein array production and preservation. In addition, results can be obtained in a time- and cost-efficient manner; with a device simple enough to be rebuilt by future iGEM teams.

Step by Step Overview

  • The DiaCHIP - System Overview

    The core of our new diagnostic device consists of two slides that form a microfluidic chamber. Therein, an antigen array can be generated on demand on the bottom slide. By flushing the chamber with a blood sample, antibodies present in the sample bind to corresponding antigens. This interaction is detected in real-time using the optical detection method iRIf.

    Step by Step Overview

  • Outlook

    Our results provide a proof of concept that the functional priciple of the DiaCHIP is suitable for antibody detection in complex samples. Although further improvements have to be done in terms of reliablitiy and quantification, various additional applications are conceivable. Representing a way to reduce time and cost required for testing a single patient, the DiaCHIP holds the potential to enhance and enlighten future diagnostics.

    DiaCHIP in the
    Future

  • Optical Detection: iRIf

    One disadvantage of currently available serological tests is the need for secondary labels that allow the detection of disease markers. Making use of an optical method based on the interference of light, the DiaCHIP can detect specific binding events on a protein microarray without further labeling. Read more about this innovative tool and the physics behind it.

    iRIf Principle and Physics

  • Surface Chemistry

    The production of a customized protein microarray in the DiaCHIP is based on selective immobilization of antigens on a glass slide. Therefore, a specific surface chemistry was established to reduce the proportion of unspecific binding of non-target proteins to a minimum. Read more about the different layer compositions we tested on our way to high specificity.

    Establishing a Specific Surface

  • Protein Purification

    Protein expression in the DiaCHIP is mediated by cell-free expression. As this is an advanced method dependent on the optimization of many parameters, we got back to conventional protein purification in E. coli for being able to compare the results of both techniques.
    Read more about the overexpression and purification of several antigenic peptides.

    Purification of Antigens

  • Cell-Free Expression

    A key feature of the DiaCHIP is the capability to produce protein arrays on demand via cell-free expression. To reduce the cost of a DiaCHIP measurement, we produced a cell-free expression system based on an E. coli lysate ourselves. This system is also capable of expressing immobilized DNA sequences. See how this sensitive system was established and optimized.

    Cell-free Antigen Expression

  • DNA Engineering

    Genetic fusion of different antigens and tags is a basic requirement of our project. In order to enable several people to work in parallel we designed a cloning strategy easy to follow and additionally easy to expand for further needs. Read more about combining different cloning methods to reduce efforts in DNA Engineering and the design of an expression vector meeting iGEM requirements.

    DNA
    Engineering

  • Diagnostics Today

    Currently used serological tests are available for a broad range of infectious diseases. However, they meet limitations that restrict an early onset of appropriate treatments which could be life-saving. The necessity of performing several tests to check for more than one disease at once is not only time-consuming but also costly. The DiaCHIP tackles these issues by providing a fast and affordable method for simultaneous testing.

    Limitations and Solutions