Difference between revisions of "Team:Munich"

 
(88 intermediate revisions by 3 users not shown)
Line 1: Line 1:
 +
<!-- #919191 Grau1 -->
 +
<!-- #787878 Grau2 -->
 +
<!-- #51A7f9 Blau1 -->
 +
<!-- #3c7cb9 Blau2 -->
 +
<!-- #ffffff weiss -->
 
<html>
 
<html>
 
<head>
 
<head>
−
    <style>
+
<link rel="stylesheet" type="text/css"
−
   
+
href="https://2017.igem.org/Template:Munich/CSS?action=raw&ctype=text/css" />
−
    #home_logo, #sideMenu { display:none; }
+
<link rel="stylesheet" type="text/css"
−
    #sideMenu, #top_title, .patrollink  {display:none;}
+
href="https://2017.igem.org/Template:Munich/Header?action=raw&ctype=text/css" />
−
    #content { width:100%; padding:0px;  margin-top:-7px; margin-left:0px;}
+
<style>
−
    body {background-color:white; }
+
body {line-height: initial;}
−
    #bodyContent h1, #bodyContent h2, #bodyContent h3, #bodyContent h4, #bodyContent h5 { margin-bottom: 0px; }
+
h1, h2,h3 {
 +
color: #51a7f9 !important;
 +
text-align: center !important;
 +
}
  
−
    </style>
+
/*Time for the CSS*/
 +
* {margin: 0; padding: 0;}
  
−
   
+
.slider{
−
<link rel="stylesheet" type="text/css" href="https://2017.igem.org/Template:Munich/CSS?action=raw&ctype=text/css" />
+
width: 900px; /*Same as width of the large image*/
 +
position: relative;
 +
/*Instead of height we will use padding*/
 +
padding-top: 600px; /*That helps bring the labels down*/
 +
 +
/*Lets add a shadow*/
 +
}
  
−
<script type="text/javascript" src="https://2017.igem.org/Template:Munich/Javascript?action=raw&ctype=text/javascript"></script>
 
  
−
    <style type="text/css">
+
/*Last thing remaining is to add transitions*/
−
       
+
.slider>img{
−
        .ui.menu .just.item{
+
position: absolute;
−
                color: rgb(255, 255, 255);
+
left: 0; top: 0;
−
                background: rgba(255, 255, 255, 1.00);
+
transition: all 0.5s;
−
                padding: 0;
+
}
−
        }
+
  
−
        .ui.tiny.image, .ui.tiny.images .image, .ui.tiny.images img, .ui.tiny.images svg{
+
.slider input[name='slide_switch'] {
−
            height: 55px;
+
display: none;
−
            width: auto;
+
}
−
            font-size: .95714286rem;
+
−
            padding: 0;
+
−
        }
+
−
    </style>
+
−
</head>
+
−
<body>
+
  
 +
.slider label {
 +
/*Lets add some spacing for the thumbnails*/
 +
margin: 30px 0 0 18px;
 +
 +
float: left;
 +
cursor: pointer;
 +
transition: all 0.5s;
 +
 +
/*Default style = low opacity*/
 +
opacity: 0.6;
 +
 +
        z-index: 99;
 +
}
  
 +
.slider label img{
 +
display: block;
 +
}
  
−
<div class='ui seven item secondary menu'>
+
/*Time to add the click effects*/
−
    <div class='ui just item'>
+
.slider input[name='slide_switch']:checked+label {
−
        <img class='ui tiny cascaid image' src="https://static.igem.org/mediawiki/2017/a/af/T--Munich--Logo_Final.svg">
+
border-color: #666;
−
    </div>
+
opacity: 1;
−
    <div class='ui dropdown item'>
+
}
−
        Project
+
/*Clicking any thumbnail now should change its opacity(style)*/
−
        <div class='ui menu'>
+
/*Time to work on the main images*/
−
            <a class="active item">Description</a>
+
.slider input[name='slide_switch'] ~ img {
−
            <a class="disabled item">Interlab</a>
+
opacity: 0;
−
        </div>
+
transform: scale(1.1);
−
    </div>
+
}
−
    <div class='ui disabled dropdown item'>
+
/*That hides all main images at a 110% size
−
        <div class='text'>Design</div>
+
On click the images will be displayed at normal size to complete the effect
−
        <div class='ui menu'>
+
*/
−
            <a class="item">Overall</a>
+
.slider input[name='slide_switch']:checked+label+img {
−
            <a class="item">Parts</a>
+
opacity: 1;
−
            <a class="item">Hardware</a>
+
transform: scale(1);
−
            <a class="item">Software</a>
+
}
−
            <a class="item">Modeling</a>
+
/*Clicking on any thumbnail now should activate the image related to it*/
−
        </div>
+
−
    </div>
+
−
    <div class='ui disabled dropdown item'>
+
−
        <div class='text'>Lab</div>
+
−
        <div class='ui menu'>
+
−
            <a class="item">Lab journal</a>
+
−
            <a class="item">Experiments</a>
+
−
            <a class="item">Results</a>
+
−
            <a class="item">Safety</a>
+
−
        </div>
+
−
    </div>
+
−
 
+
−
    <div class='ui dropdown item'>
+
−
        <div class="text">Team</div>
+
−
        <div class='ui menu'>
+
−
            <a class="item" href="https://2017.igem.org/Team:Munich/Team">The Team</a>
+
−
            <a class="disabled item">Attributions</a>
+
−
            <a class="disabled item">Collaborations</a>
+
−
        </div>
+
−
    </div>
+
−
 
+
−
    <div class='ui disabled dropdown item'>
+
−
        <div class='text'>Human Practices</div>
+
−
        <div class='ui menu'>
+
−
            <a class="item">Awards</a>
+
−
            <a class="item">Medals</a>
+
−
        </div>
+
−
    </div>
+
−
 
+
−
    <div class='ui disabled dropdown item'>
+
−
        <div class='text'>Awards</div>
+
−
        <div class='ui menu'>
+
−
            <a class="item">Special prizes</a>
+
−
            <a class="item">Medals</a>
+
−
        </div>
+
−
    </div>
+
  
 +
/*We are done :)*/
 +
</style>
 +
</head></html>
 +
{{Munich/Menu}}
 +
<html>
 +
<body>
 +
<table width=100% height=100% cellpadding=0 cellspacing=0 border=0>
 +
<!-- Content -->
 +
<tr><td width="100%" colspan=3>
 +
<table width=100% height=100% cellpadding=0 cellspacing=0 border=0>
 +
<tr>
 +
<td width="40%">
 +
</td>
 +
<td id="myContent" width="20%" valign=top align=center>
 +
<br>
 +
<!-- Head End -->
 +
<!-- Content Begin -->
 +
<video width="980" autoplay="autoplay" controls>
 +
<source src="https://static.igem.org/mediawiki/2017/4/44/T--Munich--FrontPageVideo.mp4" type="video/mp4">
 +
Your browser does not support the video tag.
 +
</video>
 +
<table width="900" border=0 cellspacing=0 cellpadding=10>
 +
<tr>
 +
<td width=160></td>
 +
<td width=160></td>
 +
<td width=160></td>
 +
<td width=160></td>
 +
<td width=160></td>
 +
<td width=160></td>
 +
</tr>
 +
<tr><td colspan=6 align=left valign=center>
 +
<font size=7 ><b style="color: #51a7f9">Abstract</b></font>
 +
</td></tr>
 +
<tr><td align=center valign=center colspan=6>
 +
<p style="text-align:justify">
 +
<font size=3 color=#444444>
 +
The ongoing crisis of increasing antibiotic resistance demands innovative preventive strategies. Recently, the RNA-targeting protein CRISPR-Cas13a has been used for highly sensitive DNA and RNA detection, promising diverse applications in point-of-care diagnostics. We integrated Cas13a in the detection unit of CascAID, our GMO-free diagnostic platform. CascAID combines an automated microfluidic device for rapid lysis and extraction of nucleic acids with a paper-based readout system. We demonstrated the performance of our device by targeting the 16S rRNA from <i>E. coli</i>. We improved the detection limit of our platform, using simulations to optimize our amplification scheme and the final readout.
 +
</font>
 +
</p>
 +
<p style="text-align:justify; margin-bottom: 50px">
 +
<font size=3 color=#444444>
 +
Conceived as a distributable platform for rapid point-of-care diagnostics, CascAID can be used to distinguish between bacterial and viral infections, thus minimizing the widespread use of antibiotics.
 +
Furthermore, Cas13a allows the fast design of target sequences, making our system adaptive to the emergence of new viral outbreaks or fast mutating pathogens.
 +
</font>
 +
</p>
 +
</td></tr>
 +
<tr><td colspan=6 align=middle valign=center>
 +
<font size=10 ><b style="color: #51a7f9; font-size: 60px; margin-top: 20px">Awards & Achievements</b></font>
 +
</td></tr>
 +
<tr>
 +
<td colspan=6>
 +
<img src="https://static.igem.org/mediawiki/2017/e/e5/T--Munich--Banner_Awards.jpg" width=900>
 +
</td>
 +
</tr>
 +
<tr>
 +
<td align=center valign=center colspan=3>
 +
<div class="captionPicture">
 +
<h1>First Runner-up</h1>
 
</div>
 
</div>
−
 
+
</td>
−
<div class="ui bottom fixed icon menu">
+
<td align=center valign=center colspan=3>
−
  <a class="item" href="https://www.facebook.com/Munich.iGEM/">
+
<div class="captionPicture">
−
    <i class="facebook icon"></i>
+
<h1>Best Diagnostics Project</h1>
−
  </a>
+
−
  <a class="item" href="https://www.instagram.com/igem.munich.2017/">
+
−
    <i class="instagram icon"></i>
+
−
  </a>
+
−
  <a class="item" href="mailto:igem.munich@gmail.com">
+
−
    <i class="mail icon"></i>
+
−
  </a>
+
 
</div>
 
</div>
 +
</td>
 +
</tr>
  
 +
<tr>
 +
<td align=center valign=center colspan=3>
 +
<div class="captionPicture">
 +
<h2>Best Model</h2>
 +
</div>
 +
</td>
 +
<td align=center valign=center colspan=3>
 +
<div class="captionPicture">
 +
<h2>Best Applied Design</h2>
 +
</div>
 +
</td>
 +
</tr>
  
−
<div class='ui two column grid container'>
+
<tr>
−
 
+
<td align=center valign=center colspan=3>
−
        <div class="column">
+
<div class="captionPicture">
−
            <p style="font-family: Lato,'Helvetica Neue',Arial,Helvetica,sans-serif; font-weight: 700; font-size: 30px;">Problem</p>
+
<h2>Best Hardware</h2>
−
            <div class='hidden horizontal divider'></div>
+
−
            <p style="font-family: Lato,'Helvetica Neue',Arial,Helvetica,sans-serif; font-size: 14px;">Although there are many diagnostic tests available that can detect even the smallest traces of a pathogen, they usually require expensive lab-equipment or skilled labor. Usually, places most prone to diseases are also the ones most lacking such equipment or personal, and thus, where tests are least accesible. Many different diseases can present similar symptoms. But because the treatment for each of them can vary greatly (e.g. bacterial vs viral infection), a quick and reliable diagnostic is important to start as soon as possible with the right treatment. On the other hand, wrongly recognising the cause of a disease not only leads to prescription of the wrong medicine, but also can contribute to the spread of resistances.</p>
+
−
            <div class='hidden horizontal divider'></div>
+
−
 
+
−
            <p style="font-family: Lato,'Helvetica Neue',Arial,Helvetica,sans-serif; font-size: 14px;">New diagnostic tool must take these points into consideration and be designed with affordability, availability, simplicity and reliability in mind, and, where possible, be flexible enough to cover a wide array of diseases in order to present the user with a single powerful product.</p>
+
−
             
+
−
        </div>
+
−
        <div class="column">
+
−
            <p style="font-family: Lato,'Helvetica Neue',Arial,Helvetica,sans-serif; font-weight: 700; font-size: 30px;">Solution</p>
+
−
            <div class='hidden horizontal divider'></div>
+
−
            <p style="font-family: Lato,'Helvetica Neue',Arial,Helvetica,sans-serif; font-size: 14px;">We are developing a diagnostic tool that combines the power of high sensible methods with the affordability needed for a wide application field. Our project, named CascAID, utilizes a CRISPR/Cas effector protein to quickly and reliably test for different pathogens based on their RNA. By cleverly designing a short RNA sequence, it is possible to guide this protein to cleave RNA molecules. If the sample contained pathogen, then digested RNA will be found, where as a negative sample won't produce digestion fragments.</p>
+
−
            <div class='hidden horizontal divider'></div>
+
−
 
+
−
            <p style="font-family: Lato,'Helvetica Neue',Arial,Helvetica,sans-serif; font-size: 14px;">
+
−
            In additon, we are trying to make CascAID an affordable but single use product thus reducing the risk of cross-contamination without increasing the production cost.
+
−
            </p>
+
−
        </div>
+
−
</div>
+
−
 
+
−
 
+
−
   
+
−
 
+
−
       
+
−
<script type="text/javascript">
+
−
    $('.dropdown').dropdown({on:'hover'});
+
−
</script>
+
−
     
+
−
     
+
−
    <div class='ui clearing basic segment'></div>
+
−
 
+
−
    </div>
+
 
</div>
 
</div>
−
<div class="ui grid equal width">
+
</td>
−
 
+
<td align=center valign=center colspan=3>
−
  <div class="column" >
+
<div class="captionPicture">
−
 
+
<h2>Best Software</h2>
−
  <div class="explanation explanation-left invisible" id="tip1">
+
−
  <p class="explanation-text">
+
−
  <b>Step 1:</b> A sample, such as blood or saliva, is placed into the device.
+
−
</p>
+
−
<!--<div class="pretty-picture-container">
+
−
<svg class="pretty-picture">
+
−
<rect width="500" height="500" />
+
−
</svg>
+
−
</div>-->
+
−
</div>
+
−
+
−
 
+
−
<div class="explanation explanation-left invisible" id="tip3">
+
−
  <p>
+
−
  <b>Step 3:</b> Cas13a binds the target sequence and cuts it in smaller fragments. After this inital digestion, the enzyme <!--becomes activated--> changes into a RNAase-active conformation.
+
−
</p>
+
−
<!--<div class="pretty-picture-container">
+
−
<svg class="pretty-picture">
+
−
<rect width="500" height="500" />
+
−
</svg>
+
−
</div>-->
+
−
 
+
−
</div>
+
−
+
−
<div class="explanation explanation-left invisible" id="tip5" style="margin: 0 0 0 0">
+
−
  <p>
+
−
  <b>Step 5:</b> An easy to interpret read-out tells whether a specific pathogen was present in the sample.
+
−
</p>
+
−
<!--<div class="pretty-picture-container">
+
−
<svg class="pretty-picture">
+
−
<rect width="500" height="500" />
+
−
</svg>
+
−
</div>-->
+
−
 
+
−
</div>
+
−
 
+
−
  </div>
+
−
 
+
−
+
−
<div id="canvas-container" >
+
−
<svg id="svg-canvas" height="2000" >
+
−
 
+
−
<circle fill="rgb(147,149,152)" id="top-circle" class="circle" />
+
−
+
−
+
−
+
−
<line class="line-vertical" id="top-line" y1="-3"/>
+
−
<line class="line-vertical" id="bottom-line1" y1="-1"/>
+
−
<line class="line-vertical" id="bottom-line2" y1="-1"/>
+
−
<line class="line-vertical" id="bottom-line3" y1="-1"/> <!-- It is important to put the bottom lines before the rect so the latter covers any gaps appearing due to rounding erros -->
+
−
 
+
−
<rect fill="rgb(0,144,239)" id="device-body" fill="rgb(147,149,152)"/>
+
−
 
+
−
<line class="line-horizontal" id="horizontal-line1"/>
+
−
<line class="line-horizontal" id="horizontal-line2"/>
+
−
 
+
−
<line class="line-vertical" id="bottom-line4" y1="-1"/>
+
−
<line class="line-vertical" id="bottom-line5" y1="-1"/>
+
−
 
+
−
<circle fill="rgb(147,149,152)" id="bottom-circle1" class="circle" />
+
−
<circle fill="rgb(147,149,152)" id="bottom-circle2" class="circle" />
+
−
<circle fill="rgb(147,149,152)" id="bottom-circle3" class="circle" />
+
−
 
+
−
<circle stroke="rgb(147,149,152)" fill-opacity="0" class="tooltip-circle invisible" id="tooltip-circle2"  />
+
−
<line class="tooltip-line" id="tooltip-line2" style="stroke: rgb(147,149,152);" />
+
−
 
+
−
<circle stroke="rgb(147,149,152)" fill-opacity="0" class="tooltip-circle invisible" id="tooltip-circle3"  />
+
−
<line class="tooltip-line" id="tooltip-line3" style="stroke: rgb(147,149,152);" />
+
−
 
+
−
<circle stroke="rgb(147,149,152)" fill-opacity="0" class="tooltip-circle invisible" id="tooltip-circle4"  />
+
−
<line class="tooltip-line" id="tooltip-line4" style="stroke: rgb(147,149,152);" />
+
−
 
+
−
<circle stroke="rgb(147,149,152)" fill-opacity="0" class="tooltip-circle invisible" id="tooltip-circle5"  />
+
−
<line class="tooltip-line" id="tooltip-line5" style="stroke: rgb(147,149,152);" />
+
−
 
+
−
<circle class="pulse" fill="rgb(255,149,152)" id="pulse" />
+
−
<circle class="sample" fill="rgb(255,149,152)" id="sample" />
+
−
 
+
−
<circle class="invisible pulse" fill="white" id="pulse2" />
+
−
<circle class="invisible sample"  fill="white" id="sample2" />
+
−
 
+
−
<circle class="invisible pulse"  fill="white" id="pulse3" />
+
−
<circle class="invisible sample"  fill="white" id="sample3" />
+
−
 
+
−
<circle stroke="rgb(147,149,152)" fill-opacity="0" class="tooltip-circle invisible" id="tooltip-circle1"  />
+
−
<line class="tooltip-line" id="tooltip-line1" /> <!-- The first tooltip and circle are put here so they are on top of the sample -->
+
−
</svg>
+
−
</div>
+
−
<div class="column" >
+
−
<div class="button-container">
+
−
<button onclick="skipAnimation()" class="ui primary button skip-animation">
+
−
  Skip Animation
+
−
</button>
+
−
</div>
+
−
<div class="explanation explanation-right invisible" id="tip2">
+
−
<p>
+
−
<b>Step 2:</b> RNA is purified with the help of our reusable, 3D-printed microfluidic device.
+
−
</p>
+
−
<!--<div class="pretty-picture-container">
+
−
<svg class="pretty-picture">
+
−
<rect width="500" height="500" />
+
−
</svg>
+
−
</div>-->
+
−
 
+
−
</div>
+
−
<div class="explanation explanation-right invisible" style="margin: 0 0 0 0" id="tip4">
+
−
<p>
+
−
  <b>Step 4:</b> <!--Once activated, Cas13a changes into a RNAase-active conformation and--> While in this conformation, Cas13a degrades the read-out RNA, producing a visible signal.
+
−
</p>
+
−
<!--<div class="pretty-picture-container">
+
−
<svg class="pretty-picture">
+
−
<rect width="500" height="500" />
+
−
</svg>
+
−
</div>-->
+
−
 
+
−
</div>
+
−
  </div>
+
−
+
 
</div>
 
</div>
−
<script type="text/javascript">
+
</td>
−
//This script configures the svg-image to have a proportional size relative to the window-size
+
</tr>
−
var canvaswidth = screen.width*0.267;
+
  
  
−
var devicewidth = canvaswidth*0.185; //Defining the width of the deviece-rectangle, around which the whole desing is based.
+
<tr>
 +
<td align=center valign=center colspan=2>
 +
<h3>Nominated for Best Wiki</h3>
 +
</td>
 +
<td align=center valign=center colspan=2>
 +
<h3>Nominated for Best Presentation</h3>
 +
</td>
 +
<td align=center valign=center colspan=2>
 +
<h3>Nominated for Best Poster</h3>
 +
</td>
 +
</tr>
  
−
//$(".column").css("width",0.3665*screen.width);
+
<tr>
 +
<td align=center valign=center colspan=2>
 +
<h3>Nominated for Best Integrated Human Practices</h3>
 +
</td>
 +
<td align=center valign=center colspan=2>
 +
<h3>Nominated for Best Education & Public Engagement</h3>
 +
</td>
 +
<td align=center valign=center colspan=2>
 +
<h3>Nominated for Best Measurement</h3>
 +
</td>
 +
</tr>
  
  
−
$("#svg-canvas").attr("width",canvaswidth+''); //The Width of the canvas is defined
+
<tr>
 +
<td align=center valign=center colspan=1></td>
 +
<td align=center valign=center colspan=2>
 +
<h3 style="margin-bottom: 50px">Nominated for Best Composite Part</h3>
 +
</td>
 +
<td align=center valign=center colspan=2>
 +
<h3 style="margin-bottom: 50px">Nominated for Best Part Collection</h3>
 +
</td>
 +
<td align=center valign=center colspan=1></td>
 +
</tr>
  
−
var circleradius = devicewidth*0.5;
+
<tr><td colspan=6 align=middle valign=center>
−
$(".circle").attr("r",circleradius); //The radius of the circles are defined.
+
<font size=10 ><b style="color: #51a7f9; font-size: 60px; margin-top: 20px">Gallery</b></font>
−
$("#top-circle").attr("cx",canvaswidth*0.5+'');
+
</td></tr>
−
var cycircle = 200;
+
−
$("#top-circle").attr("cy",cycircle+''); //The position of the top-circle is defined.
+
  
−
$("#sample").attr("r",circleradius);
+
<tr> <td colspan=6 align=middle valing=center>
−
$("#sample").attr("cx",canvaswidth*0.5);
+
<!--
−
$("#sample").attr("cy",cycircle); //The sample circle is defined.
+
We will make a slider with stylized thumbnails using CSS3
−
 
+
The markup is very simple:
−
$("#pulse").attr("r",circleradius*0.04);
+
Radio Inputs
−
$("#pulse").attr("cx",canvaswidth*0.5);
+
Labels with thumbnails to detect click event
−
$("#pulse").attr("cy",cycircle); //The inital size and position of the pulse circle are defined.
+
Main Image
−
 
+
-->
−
var linewidth = devicewidth*0.08;
+
<div class="slider">
−
$("line").css("stroke-width",linewidth+''); //The width of the lines is defined.
+
−
var linelength = devicewidth*1.2;
+
−
$(".line-vertical").attr("y2",linelength+1+''); //The length of the vertical lines is defined. +1 is needed due to roundig errors.
+
−
$("#top-line").css("transform","translate("+canvaswidth*0.5+"px,"+(cycircle+circleradius)+"px)"); //The top line is correctly positioned.
+
−
 
+
−
var deviceheight = 800;
+
−
$("#device-body").attr("width",devicewidth);
+
−
$("#device-body").attr("height",deviceheight);
+
−
$("#device-body").attr("x",(canvaswidth-devicewidth)*0.5+'');
+
−
$("#device-body").attr("y",cycircle+circleradius+linelength+''); //The width and position of the device-rectangle are defined.
+
−
 
+
−
$("#sample2").attr("r",parseInt(circleradius*0.15));
+
−
$("#sample2").attr("cx",canvaswidth*0.5);
+
−
$("#sample2").attr("cy",parseInt(cycircle+linelength+circleradius+0.65*deviceheight));
+
−
$("#pulse2").attr("r",circleradius*0.04);
+
−
$("#pulse2").attr("cx",canvaswidth*0.5);
+
−
$("#pulse2").attr("cy",parseInt(cycircle+linelength+circleradius+0.65*deviceheight));
+
−
+
−
$("#sample3").attr("r",parseInt(circleradius*0.15));
+
−
$("#sample3").attr("cx",canvaswidth*0.5);
+
−
$("#sample3").attr("cy",parseInt(cycircle+linelength+circleradius+0.65*deviceheight));
+
−
$("#pulse3").attr("r",circleradius*0.04);
+
−
$("#pulse3").attr("cx",canvaswidth*0.5);
+
−
$("#pulse3").attr("cy",parseInt(cycircle+linelength+circleradius+0.65*deviceheight)); //Defining the two other circles that will show later in the animation.
+
 
 
 +
<input type="radio" name="slide_switch" id="id3" checked="checked"/>
 +
<label for="id3">
 +
<img src="https://static.igem.org/mediawiki/2017/9/99/T--Munich--Review2017_77.jpeg" width="100"/>
 +
</label>
 +
<img src="https://static.igem.org/mediawiki/2017/9/99/T--Munich--Review2017_77.jpeg" width=900/>
 +
<!--Lets show the second image by default on page load-->
 +
<input type="radio" name="slide_switch" id="id2" />
 +
<label for="id2">
 +
<img src="https://static.igem.org/mediawiki/2017/d/dd/T--Munich--Review2017_14.jpeg" width="100"/>
 +
</label>
 +
<img src="https://static.igem.org/mediawiki/2017/d/dd/T--Munich--Review2017_14.jpeg" width=900/>
  
−
 
+
<input type="radio" name="slide_switch" id="id1"/>
−
$("#bottom-line1").css("transform","translate("+parseInt(canvaswidth*0.5-0.3*devicewidth)+"px,"+(cycircle+deviceheight+linelength+circleradius)+"px)");
+
<label for="id1">
−
 
+
<img src="https://static.igem.org/mediawiki/2017/b/b8/T--Munich--Review2017_5.jpeg" width="100"/>
−
$("#bottom-line2").attr("y2",linelength*2); //The line of the seconds line is increased
+
</label>
−
$("#bottom-line2").css("transform","translate("+(canvaswidth*0.5)+"px,"+(cycircle+deviceheight+linelength+circleradius)+"px)");
+
<img src="https://static.igem.org/mediawiki/2017/b/b8/T--Munich--Review2017_5.jpeg" width= 900/>
−
 
+
−
$("#bottom-line3").css("transform","translate("+parseInt(canvaswidth*0.5+0.3*devicewidth)+"px,"+(cycircle+deviceheight+linelength+circleradius)+"px)"); //The position of the three bottom lines is defined.
+
−
 
+
−
var linelengthHor = linelength;
+
−
$(".line-horizontal").attr("x2",linelengthHor);
+
−
$("#horizontal-line1").css("transform","translate("+(parseInt(canvaswidth*0.5-0.3*devicewidth)-linelengthHor+0.5*linewidth)+"px,"+(cycircle+deviceheight+2*linelength+circleradius)+"px)");
+
−
$("#horizontal-line2").css("transform","translate("+(parseInt(canvaswidth*0.5+0.3*devicewidth)-0.5*linewidth)+"px,"+(cycircle+deviceheight+2*linelength+circleradius)+"px)"); //The two horizontal lines are defined and positioned.
+
−
 
+
−
$("#bottom-line4").css("transform","translate("+(parseInt(canvaswidth*0.5-0.3*devicewidth)-linelengthHor+linewidth)+"px,"+(cycircle+deviceheight+2*linelength+circleradius)+"px)");
+
−
$("#bottom-line5").css("transform","translate("+(parseInt(canvaswidth*0.5+0.3*devicewidth)+linelengthHor-linewidth)+"px,"+(cycircle+deviceheight+2*linelength+circleradius)+"px)"); //The two other vertical lines positioned.
+
 
 
−
$("#bottom-circle1").css("transform","translate("+(parseInt(canvaswidth*0.5-0.3*devicewidth)-linelengthHor+linewidth)+"px,"+(cycircle+deviceheight+3*linelength+2*circleradius)+"px)");
 
−
$("#bottom-circle2").css("transform","translate("+canvaswidth*0.5+"px,"+(cycircle+deviceheight+3*linelength+2*circleradius)+"px)");
 
−
$("#bottom-circle3").css("transform","translate("+(parseInt(canvaswidth*0.5+0.3*devicewidth)+linelengthHor-linewidth)+"px,"+(cycircle+deviceheight+3*linelength+2*circleradius)+"px)"); //The three bottom circles are positioned.
 
−
 
−
var tooltipradius = circleradius*0.20;
 
−
$(".tooltip-circle").css("stroke-width",linewidth*0.8);
 
−
$(".tooltip-circle").attr("r",tooltipradius); //The radius of the tooltip circles is defined.
 
 
 
−
$("#tooltip-circle1").attr("cx",canvaswidth*0.5-0.8*circleradius+3);
+
<input type="radio" name="slide_switch" id="id4"/>
−
$("#tooltip-circle1").attr("cy",cycircle); //The position of the first tooltip circle is defined.
+
<label for="id4">
−
$("#tooltip-circle2").attr("cx",canvaswidth*0.5+0.8*circleradius-3);
+
<img src="https://static.igem.org/mediawiki/2017/f/f0/T--Munich--Review2017_21.jpeg" width="100"/>
−
$("#tooltip-circle2").attr("cy",cycircle+circleradius+linelength+0.20*deviceheight);
+
</label>
−
$("#tooltip-circle3").attr("cx",canvaswidth*0.5-0.8*circleradius+3);
+
<img src="https://static.igem.org/mediawiki/2017/f/f0/T--Munich--Review2017_21.jpeg" width=900/>
−
$("#tooltip-circle3").attr("cy",cycircle+circleradius+linelength+0.5*deviceheight);
+
−
$("#tooltip-circle4").attr("cx",canvaswidth*0.5+0.8*circleradius-3);
+
−
$("#tooltip-circle4").attr("cy",cycircle+circleradius+linelength+0.8*deviceheight);
+
−
$("#tooltip-circle5").attr("cx",(parseInt(canvaswidth*0.5-0.3*devicewidth)-linelengthHor+linewidth-circleradius+tooltipradius+3));
+
−
$("#tooltip-circle5").attr("cy",(cycircle+deviceheight+3*linelength+2*circleradius));
+
−
 
+
−
var tooltiplinelength = canvaswidth*0.5;
+
−
$(".tooltip-line").css("stroke-width",linewidth);
+
−
$(".tooltip-line").attr("x2",tooltiplinelength); //The width and length of the tooltip lines are defined.
+
 
 
 +
<input type="radio" name="slide_switch" id="id5"/>
 +
<label for="id5">
 +
<img src="https://static.igem.org/mediawiki/2017/0/09/T--Munich--Review2017_4.jpeg" width="100"/>
 +
</label>
 +
<img src="https://static.igem.org/mediawiki/2017/0/09/T--Munich--Review2017_4.jpeg" width=900/>
  
−
+
<input type="radio" name="slide_switch" id="id6"/>
 +
<label for="id6">
 +
<img src="https://static.igem.org/mediawiki/2017/f/f9/T--Munich--Review2017_13.jpeg" width="100"/>
 +
</label>
  
−
$("#tooltip-line1").css("transform","translate("+(canvaswidth*0.5-circleradius-tooltiplinelength+3)+"px,"+cycircle+"px)");
+
<img src="https://static.igem.org/mediawiki/2017/f/f9/T--Munich--Review2017_13.jpeg" width=900/>
−
$("#tooltip-line1").attr("x1",tooltiplinelength);
+
<input type="radio" name="slide_switch" id="id7"/>
 +
<label for="id7">
 +
<img src="https://static.igem.org/mediawiki/2017/6/60/T--Munich--Review2017_17.jpeg" width="100"/>
 +
</label>
 +
<img src="https://static.igem.org/mediawiki/2017/6/60/T--Munich--Review2017_17.jpeg" width=900/>
  
−
$("#tooltip-line2").css("transform","translate("+(canvaswidth*0.5+circleradius-3)+"px,"+(cycircle+circleradius+linelength+0.20*deviceheight)+"px)");
 
−
$("#tooltip-line2").attr("x2",0);
 
  
−
$("#tooltip-line3").css("transform","translate("+(canvaswidth*0.5-circleradius-tooltiplinelength+3)+"px,"+(cycircle+circleradius+linelength+0.5 *deviceheight)+"px)");
+
</div>
−
$("#tooltip-line3").attr("x1",tooltiplinelength);
+
</td>
 +
</tr>
  
−
$("#tooltip-line4").css("transform","translate("+(canvaswidth*0.5+circleradius-3)+"px,"+(cycircle+circleradius+linelength+0.80*deviceheight)+"px)");
+
<tr>
−
$("#tooltip-line4").attr("x2",0);
+
<td colspan=6>
−
$("#tooltip-line5").css("transform","translate("+(parseInt(canvaswidth*0.5-0.3*devicewidth)-linelengthHor+linewidth-circleradius+3-tooltiplinelength)+"px,"+(cycircle+deviceheight+3*linelength+2*circleradius)+"px)");
+
<h3> <a style="color: #51a7f9 !important" href="/Team:Munich/Gallery">See the rest of our gallery...</a></h3>
−
$("#tooltip-line5").attr("x1",tooltiplinelength); //Depending whether the line point right or left, either x1 or x2 is changed to match the other value so the inial length of the lines is 0, rendering them invisible. This is later changed through the extendLine() function.
+
</td>
 +
</tr>
  
−
//Here we configure the tip boxes with javascript, because CSS sucks.
+
<tr><td class="no-padding" colspan=6 align=right valign=center height=10>
−
 
+
<br><br><br><center><hr></center>
−
var heightexplanation = parseInt($(".explanation").css("height"));
+
</td></tr>
−
 
+
</table>
−
 
+
<!-- Content End -->
−
$("#tip1").css("transform","translate(0,"+(cycircle-heightexplanation*0.5)+"px)");
+
−
$("#tip2").css("transform","translate(0,"+((cycircle+circleradius+linelength+0.2*deviceheight)-0.8*heightexplanation)+"px)");
+
−
$("#tip3").css("transform","translate(0,"+(((cycircle+circleradius+linelength+0.5*deviceheight)-heightexplanation*0.5)-heightexplanation-20)+"px)");
+
−
$("#tip4").css("transform","translate(0,"+(((cycircle+circleradius+linelength+0.80*deviceheight))-2*heightexplanation)+"px)");
+
−
$("#tip5").css("transform","translate(0,"+((cycircle+deviceheight+3*linelength+2*circleradius)-3*heightexplanation)+"px)");
+
−
 
+
−
 
+
−
////////////////////////////////////////////////////////////////
+
−
//   //
+
−
//   //
+
−
// STARTING HERE, THE ANIMATIONS ARE DEFINED.   //
+
−
//   //
+
−
//   //
+
−
////////////////////////////////////////////////////////////////
+
−
 
+
−
var animatinoCounter = 0; //This counter saves the number of animation that have already been triggered. If an animation is not triggering, check if the counter-count is done propertly.
+
−
var accu = 0;
+
−
 
+
−
$(window).on("scroll",checkPosition); //Checks on every scroll whether a certain animation should be triggered or not.
+
−
 
+
−
var finalshrink = parseInt(circleradius*0.15); //This variable is here so the shrink function doesn't have to evaluate parseIn(etc) every single time.
+
−
 
+
−
var triggerleftLine = parseInt(circleradius); //This variable is responsible for timely triggering the appearence of the left tips. The reason it's circleratidus is simply due to the the way x2 from the first tooltip-line is positioned (circleradius left from canvas start).
+
−
 
+
−
var startMovement = false; //This variable is the responsible for triggering the first moveCircleY. It's declared here so it is within scoope of all functions.
+
−
 
+
−
var triggerrightLine = parseInt(canvaswidth*0.5-circleradius); //This variable is responsible for timely triggering the appearence of right tips. The reason it's canvaswidth*etc is simply due to the way the intended lenght of the line was calculated.
+
−
 
+
−
var endstep1 = parseInt(cycircle+linelength+circleradius+0.1*deviceheight); //This variable tells the first set of animations where they should end.
+
−
var endstep2 = parseInt(endstep1+0.25*deviceheight);  //This variable tells the second set of animations where they should end.
+
−
var endstep3 = parseInt(endstep2+0.30*deviceheight);
+
−
 
+
−
var endstep4 = parseInt(endstep3+0.25*deviceheight);
+
−
 
+
−
var endstep5 = parseInt(endstep4 +linelength +0.1*deviceheight);
+
−
 
+
−
var endstep6 = parseInt(endstep5 + linelength + circleradius);
+
−
 
+
−
function checkPosition(){
+
−
var yOffSet = window.pageYOffset;
+
−
if(animatinoCounter == 0 && yOffSet > 0){ //First animation-round: circle shrinks, first tip appears and circle moves to inside the device
+
−
animatinoCounter = 1;
+
−
var id = setInterval(function(){
+
−
shrink("sample",id,finalshrink);
+
−
startMovement = $("#sample").attr("r") == finalshrink; //After every call of shrink, startMovement is refreshed to check if the trigger condition is already met.
+
−
},50); //The shrinking is triggered immediatly after scrolling down.
+
−
 
+
−
+
−
 
+
−
 
+
−
var id2 = setInterval(function(){
+
−
if(startMovement){
+
−
moveCircleY("sample",id2,endstep1);
+
−
moveCircleY("pulse",id2,endstep1);
+
−
}
+
−
},10); //Once the shrinking is done, both the sample and pulse start moving down.
+
−
 
+
−
var id32 = setInterval(function(){
+
−
if(startMovement){
+
−
accu++;
+
−
pulse("pulse",accu,id32,20,$("#sample3").attr("cx") == parseInt(canvaswidth*0.5+0.3*devicewidth)); //$("#sample").attr("cy") == endstep3
+
−
+
−
}
+
−
},50); //After the shrinkage is done, the pulsing starts. Doesn't end.
+
−
+
−
appear("tooltip-circle1");
+
−
var id3 = setInterval(function(){
+
−
extendLineLeft("tooltip-line1",(triggerleftLine-3),id3);
+
−
if($("#tooltip-line1").attr("x1") == triggerleftLine){
+
−
appear("tip1");
+
−
 
+
−
};
+
−
},10);
+
−
}
+
−
 
+
−
if(animatinoCounter == 4 && yOffSet > 100 ){ //Second round of animation: circle turns white, goes down and second tip appears
+
−
animatinoCounter = 5;
+
−
var id = setInterval(function(){
+
−
moveCircleY("sample",id,endstep2);
+
−
if($("#sample").attr("cy") >= (cycircle+circleradius+linelength+0.20*deviceheight));{
+
−
clearcolor("sample");
+
−
}
+
−
},10);
+
−
 
+
−
var id2 = setInterval(function(){
+
−
moveCircleY("pulse",id2,endstep2);
+
−
if($("#pulse").attr("cy") >- (cycircle+circleradius+linelength+0.20*deviceheight));{
+
−
clearcolor("pulse");
+
−
}
+
−
},10);
+
−
 
+
−
appear("tooltip-circle2");
+
−
var id3 = setInterval(function(){
+
−
extendLineRight("tooltip-line2",triggerrightLine+4,id3);
+
−
if($("#tooltip-line2").attr("x2") == (triggerrightLine+4)){
+
−
appear("tip2");
+
−
 
+
−
};
+
−
},10);
+
−
 
+
−
}
+
−
 
+
−
if(animatinoCounter == 7 && yOffSet > 200){ //Third round of animations: Third tip appears and circle past the mid point and stips 3/4 of the device length
+
−
animatinoCounter = 8;
+
−
var id = setInterval(function(){
+
−
var id22;
+
−
moveCircleY("sample",id,endstep3);
+
−
},10);
+
−
 
+
−
var id2 = setInterval(function(){
+
−
moveCircleY("pulse",id2,endstep3);
+
−
},10);
+
−
 
+
−
appear("tooltip-circle3");
+
−
var id3 = setInterval(function(){
+
−
extendLineLeft("tooltip-line3",(triggerleftLine-3),id3);
+
−
if($("#tooltip-line3").attr("x1") == triggerleftLine){
+
−
appear("tip3");
+
−
 
+
−
};
+
−
},10);
+
−
}
+
−
 
+
−
if(animatinoCounter == 10 && yOffSet > 300){ //Fourth round of animations: circle divides into three and goes down. Fourth tip appears
+
−
animatinoCounter = 11;
+
−
$("#sample2").removeClass("invisible");
+
−
$("#sample2").addClass("visible");
+
−
$("#pulse2").removeClass("invisible");
+
−
+
−
+
−
$("#sample3").addClass("visible");
+
−
$("#sample3").removeClass("invisible");
+
−
$("#pulse3").removeClass("invisible");
+
−
+
−
+
−
 
+
−
var id = setInterval(function(){
+
−
moveCircleX("sample2",id,parseInt(canvaswidth*0.5-0.3*devicewidth),false);
+
−
moveCircleX("pulse2",id,parseInt(canvaswidth*0.5-0.3*devicewidth),false);
+
−
moveCircleX("sample3",id,parseInt(canvaswidth*0.5+0.3*devicewidth),true);
+
−
moveCircleX("pulse3",id,parseInt(canvaswidth*0.5+0.3*devicewidth),true);
+
−
+
−
+
−
},50);
+
−
 
+
−
var hola = false
+
−
var id2 = setInterval(function(){
+
−
if( $("#sample3").attr("cx") == parseInt(canvaswidth*0.5+0.3*devicewidth) && (hola || (accu % 20) - 1 == 0 )  ){
+
−
hola = true;
+
−
moveCircleY("sample",id2,endstep4);
+
−
moveCircleY("pulse",id2,endstep4);
+
−
moveCircleY("sample2",id2,endstep4);
+
−
moveCircleY("pulse2",id2,endstep4);
+
−
moveCircleY("sample3",id2,endstep4);
+
−
moveCircleY("pulse3",id2,endstep4);
+
−
}
+
−
},10);
+
−
var adios = false;
+
−
var id3= setInterval(function(){
+
−
if($("#sample3").attr("cx") >= parseInt(canvaswidth*0.5+0.3*devicewidth) && (adios || (accu % 20) - 1 == 0 )){
+
−
adios =true ;
+
−
 
+
−
accu++;
+
−
pulse("pulse",accu,id3,20,false);
+
−
pulse("pulse2",accu, id3,20,false);
+
−
pulse("pulse3",accu, id3,20,false);
+
−
}
+
−
},50);
+
−
 
+
−
appear("tooltip-circle4");
+
−
var id3 = setInterval(function(){
+
−
extendLineRight("tooltip-line4",triggerrightLine+4,id3);
+
−
if($("#tooltip-line4").attr("x2") == (triggerrightLine+4)){
+
−
appear("tip4");
+
−
 
+
−
};
+
−
},10);
+
−
+
−
}
+
−
+
−
+
−
if(animatinoCounter ==17 && yOffSet > 300){ //Fifth round of animations:
+
−
animatinoCounter = 22;
+
−
 
+
−
var id = setInterval(function(){
+
−
moveCircleY("sample",id,endstep5);
+
−
moveCircleY("pulse",id,endstep5);
+
−
moveCircleY("sample2",id,endstep5);
+
−
moveCircleY("pulse2",id,endstep5);
+
−
moveCircleY("sample3",id,endstep5);
+
−
moveCircleY("pulse3",id,endstep5);
+
−
},10);
+
−
}
+
−
+
−
if(animatinoCounter == 28 && yOffSet > 300){
+
−
animatinoCounter = 29;
+
−
var id = setInterval(function(){
+
−
moveCircleX("sample2",id,parseInt(canvaswidth*0.5-0.3*devicewidth-linelengthHor+linewidth),false);
+
−
moveCircleX("pulse2",id,parseInt(canvaswidth*0.5-0.3*devicewidth-linelengthHor+linewidth),false);
+
−
moveCircleX("sample3",id,parseInt(canvaswidth*0.5+0.3*devicewidth+linelengthHor-linewidth),true);
+
−
moveCircleX("pulse3",id,parseInt(canvaswidth*0.5+0.3*devicewidth+linelengthHor-linewidth),true);
+
−
},10);
+
−
 
+
−
}
+
−
 
+
−
if(animatinoCounter == 33 && yOffSet >300){
+
−
animatinoCounter = 34;
+
−
var id = setInterval(function(){
+
−
moveCircleY("sample",id,endstep6);
+
−
moveCircleY("pulse",id,endstep6);
+
−
moveCircleY("sample2",id,endstep6);
+
−
moveCircleY("pulse2",id,endstep6);
+
−
moveCircleY("sample3",id,endstep6);
+
−
moveCircleY("pulse3",id,endstep6);
+
−
},10);
+
−
}
+
−
 
+
−
if(animatinoCounter == 40 && yOffSet > 300){
+
−
animatinoCounter = 41;
+
−
var id = setInterval(function(){
+
−
expandNegative("sample2",id,parseInt(circleradius)+2);
+
−
},50);
+
−
 
+
−
var id2 = setInterval(function(){
+
−
if(animatinoCounter == 42){
+
−
expandPositive("sample",id2,parseInt(circleradius)+2);
+
−
}
+
−
},50);
+
−
 
+
−
var id3 = setInterval(function(){
+
−
if(animatinoCounter == 43){
+
−
expandNegative("sample3",id3,parseInt(circleradius)+2);
+
−
}
+
−
},50);
+
−
appear("tooltip-circle5");
+
−
var id4 = setInterval(function(){
+
−
extendLineLeft("tooltip-line5",parseInt(0.33*canvaswidth),id4);
+
−
if($("#tooltip-line5").attr("x1") == parseInt(0.36*canvaswidth)){
+
−
appear("tip5");
+
−
 
+
−
};
+
−
},10);
+
−
}
+
−
+
−
 
+
−
} //Triggers an animation depending on the pageYOffset, meaning the distance that has been scrolled down relative to the start of the page.
+
−
+
−
 
+
−
/////////////////////////////////////////////////////////
+
−
//                                                    //
+
−
//        This part lets the user skip the animaiton  //
+
−
//        by using the button                          //
+
−
/////////////////////////////////////////////////////////
+
−
 
+
−
 
+
−
function skipAnimation(){
+
−
animatinoCounter=-99; //Just to be sure
+
−
appear("tooltip-circle1");
+
−
var id = setInterval(function(){
+
−
extendLineLeft("tooltip-line1",(triggerleftLine-3),id);
+
−
if($("#tooltip-line1").attr("x1") == triggerleftLine){
+
−
appear("tip1");
+
−
 
+
−
};
+
−
},10);
+
−
 
+
−
appear("tooltip-circle2");
+
−
var id2 = setInterval(function(){
+
−
extendLineRight("tooltip-line2",triggerrightLine+4,id2);
+
−
if($("#tooltip-line2").attr("x2") == (triggerrightLine+4)){
+
−
appear("tip2");
+
−
 
+
−
};
+
−
},10);
+
−
 
+
−
appear("tooltip-circle3");
+
−
var id3 = setInterval(function(){
+
−
extendLineLeft("tooltip-line3",(triggerleftLine-3),id3);
+
−
if($("#tooltip-line3").attr("x1") == triggerleftLine){
+
−
appear("tip3");
+
−
 
+
−
};
+
−
},10);
+
−
 
+
−
appear("tooltip-circle4");
+
−
var id4 = setInterval(function(){
+
−
extendLineRight("tooltip-line4",triggerrightLine+4,id4);
+
−
if($("#tooltip-line4").attr("x2") == (triggerrightLine+4)){
+
−
appear("tip4");
+
−
 
+
−
};
+
−
},10);
+
−
 
+
−
appear("tooltip-circle5");
+
−
var id5 = setInterval(function(){
+
−
extendLineLeft("tooltip-line5",parseInt(0.33*canvaswidth),id5);
+
−
if($("#tooltip-line5").attr("x1") == parseInt(0.36*canvaswidth)){
+
−
appear("tip5");
+
−
 
+
−
};
+
−
},10);
+
−
 
+
−
 
+
−
$("#sample").attr("cy",endstep6+2);
+
−
$("#sample").removeClass("white");
+
−
$("#sample").css("fill","rgb(100,255,0)");
+
−
$("#sample").attr("r",parseInt(circleradius)+2);
+
−
$("#pulse").attr("cy",endstep6+2);
+
−
$("#sample").removeAttr("id");
+
−
+
−
$("#sample2").attr("cx",parseInt(canvaswidth*0.5-0.3*devicewidth-linelengthHor+linewidth));
+
−
$("#sample2").attr("cy",endstep6+2);
+
−
$("#sample2").attr("r",parseInt(circleradius)+2);
+
−
$("#sample2").css("fill","rgb(0,144,239)");
+
−
$("#pulse2").attr("cx",parseInt(canvaswidth*0.5-0.3*devicewidth-linelengthHor+linewidth));
+
−
$("#pulse2").attr("cy",endstep6+2);
+
−
$("#sample2").removeAttr("id");
+
−
$("#pulse2").removeAttr("id"); //This is a patch work solution to force stop the animation when it's cancelled while the cirlces are moving horizontally. Change if needed.
+
−
 
+
−
 
+
−
$("#sample3").attr("cx",parseInt(canvaswidth*0.5+0.3*devicewidth+linelengthHor-linewidth));
+
−
$("#sample3").attr("cy",endstep6+2);
+
−
$("#sample3").attr("r",parseInt(circleradius)+2)
+
−
$("#sample3").css("fill","rgb(0,144,239)");
+
−
$("#pulse3").attr("cx",parseInt(canvaswidth*0.5+0.3*devicewidth+linelengthHor-linewidth));
+
−
$("#pulse3").attr("cy",endstep6+2);
+
−
$("#pulse3").removeAttr("id");
+
−
$("#sample3").removeAttr("id"); //This is a patch work solution to force stop the animation when it's cancelled while the cirlces are moving horizontally. Change if needed.
+
−
$(".sample").css("opacity","1");
+
−
}
+
−
 
+
−
 
+
−
 
+
−
function moveCircleY(circle, id, cyfinal){
+
−
var cy = parseInt($("#"+circle).attr("cy"));
+
−
if( cy <= cyfinal){
+
−
+
−
$("#"+circle).attr("cy", cy+1);
+
−
 
+
−
} else{
+
−
 
+
−
clearInterval(id);
+
−
animatinoCounter++;
+
−
}
+
−
} //This function thas a svg-circle and moves it vertically only towards the cyfinal position. Must be used in conjuction with setInteval().
+
−
 
+
−
function moveCircleX(circle, id, cxfinal,plus){
+
−
var cx = parseInt($("#"+circle).attr("cx"));
+
−
if( cx != cxfinal){
+
−
if(plus == true){
+
−
$("#"+circle).attr("cx",cx+1);
+
−
} else {
+
−
$("#"+circle).attr("cx",cx-1);
+
−
}
+
−
+
−
} else{
+
−
clearInterval(id);
+
−
animatinoCounter++;
+
−
}
+
−
}
+
−
 
+
−
function pulse(circle,accu,id,maxr,endcondition){
+
−
if(endcondition && (accu % maxr) - 1 == 0){
+
−
clearInterval(id);
+
−
+
−
} else{
+
−
$("#"+circle).css("opacity",(1-((accu % maxr)/100)+''));
+
−
$("#"+circle).attr("r",(2 + (accu % maxr))+'');
+
−
}
+
−
+
−
+
−
 
+
−
+
−
 
+
−
} //This function takes a circle and changes periodically its opacity and radius. An accumualtor is needed for it to work propertly.
+
−
 
+
−
function shrink(circle, id, rfinal){
+
−
var r = parseInt($("#"+circle).attr("r"));
+
−
if(r != rfinal){
+
−
$("#"+circle).attr("r",r-1);
+
−
} else {
+
−
clearInterval(id);
+
−
animatinoCounter++;
+
−
}
+
−
} //This function shrinks a circle to a final radius.
+
−
 
+
−
 
+
−
function appear(elementId){
+
−
$("#"+elementId).addClass("appear");
+
−
$("#"+elementId).removeClass("invisible");
+
−
} //this function makes an element gradually change its opacity to 1 by adding the appear class in css and removing the invisible class. See style for class descriptions.
+
−
 
+
−
function extendLineRight(line,finalvalue,id){
+
−
var value = parseInt($("#"+line).attr("x2"));
+
−
if(value != finalvalue){
+
−
$("#"+line).attr("x2",value+1);
+
−
} else {
+
−
clearInterval(id);
+
−
}
+
−
} //This function extends a line by increasing the x2 value until the final value is reached. To be used in conjuction with setInterval.
+
−
 
+
−
function extendLineLeft(line,finalvalue,id){
+
−
var value = parseInt($("#"+line).attr("x1"));
+
−
if(value != finalvalue){
+
−
$("#"+line).attr("x1",value-1);
+
−
} else {
+
−
clearInterval(id);
+
−
+
−
}
+
−
} //This function extends a line by decreasing the x1 value until the final value is reached. To be used in conjuction with setInterval.
+
−
 
+
−
function clearcolor(circle){
+
−
$("#"+circle).addClass("white");
+
−
} //This function changes the color of an Element to white using css transitions. See white class for class definition.
+
−
 
+
−
function animation(){
+
−
expand("sample");
+
−
}
+
−
 
+
−
function expandNegative(circle,id,rfinal){
+
−
$("#"+circle).addClass("colorNegative");
+
−
var r = parseInt($("#"+circle).attr("r"));
+
−
if(r != rfinal + 1 ){
+
−
+
−
$("#"+circle).attr("r",r+1);
+
−
} else {
+
−
clearInterval(id);
+
−
animatinoCounter++;
+
−
}
+
−
}
+
−
 
+
−
function expandPositive(circle,id,rfinal){
+
−
$("#"+circle).addClass("colorPositive");
+
−
var r = parseInt($("#"+circle).attr("r"));
+
−
if(r != rfinal + 1 ){
+
−
+
−
$("#"+circle).attr("r",r+1);
+
−
+
−
} else {
+
−
clearInterval(id);
+
−
animatinoCounter++;
+
−
 
+
−
}
+
−
}
+
−
</script>
+
−
</body>
+
 
</html>
 
</html>
 +
{{Munich/Footer}}

Latest revision as of 20:49, 15 December 2017

Description

Design

Demonstrate

Measurement

Applied Design

Final Results

Achievements

Protocols

Notebook

Safety

Parts

Improved Part

Part Collection

InterLab

Model

Software

Collaboration

Detector

Quake Valve

Paperstrips

Sample Processing

Silver

Gold

Engagement

Collaborations

Team members

Sponsors

Attributions

Gallery

Abstract

The ongoing crisis of increasing antibiotic resistance demands innovative preventive strategies. Recently, the RNA-targeting protein CRISPR-Cas13a has been used for highly sensitive DNA and RNA detection, promising diverse applications in point-of-care diagnostics. We integrated Cas13a in the detection unit of CascAID, our GMO-free diagnostic platform. CascAID combines an automated microfluidic device for rapid lysis and extraction of nucleic acids with a paper-based readout system. We demonstrated the performance of our device by targeting the 16S rRNA from E. coli. We improved the detection limit of our platform, using simulations to optimize our amplification scheme and the final readout.

Conceived as a distributable platform for rapid point-of-care diagnostics, CascAID can be used to distinguish between bacterial and viral infections, thus minimizing the widespread use of antibiotics. Furthermore, Cas13a allows the fast design of target sequences, making our system adaptive to the emergence of new viral outbreaks or fast mutating pathogens.

Awards & Achievements

First Runner-up

Best Diagnostics Project

Best Model

Best Applied Design

Best Hardware

Best Software

Nominated for Best Wiki

Nominated for Best Presentation

Nominated for Best Poster

Nominated for Best Integrated Human Practices

Nominated for Best Education & Public Engagement

Nominated for Best Measurement

Nominated for Best Composite Part

Nominated for Best Part Collection
Gallery

See the rest of our gallery...