"
Team:ETH Zurich/Templates/Test3
From 2013.igem.org
(Difference between revisions)
| (35 intermediate revisions not shown) | |||
| Line 2: | Line 2: | ||
{{:Team:ETH_Zurich/Templates/stylesheet}} | {{:Team:ETH_Zurich/Templates/stylesheet}} | ||
| - | [[File:Minesweeperheader.png|800px]] | + | |
| - | <br> | + | [[File:Minesweeperheader.png|800px]]<br> |
| + | |||
<html> | <html> | ||
| - | <div style="display: table; table-layout: fixed; max-width: | + | <style type="text/css"> |
| + | #bxsliderText li | ||
| + | { | ||
| + | text-align: justify; | ||
| + | font-size:14.5px; | ||
| + | line-height: 1.5em; | ||
| + | } | ||
| + | </style> | ||
| + | |||
| + | <div style="display: table; table-layout: fixed; max-width:1200px; width: 90%; margin: 0 auto; position: relative; height: 100%; min-height:450px;"> | ||
| + | <div style="display: table-row; height:100%;"> | ||
| + | <div style="display: table-cell; vertical-align: top; width: 350px; height: 100%; padding-bottom: 70px;"> | ||
<ul class="bxslider" id="bxsliderText"> | <ul class="bxslider" id="bxsliderText"> | ||
| - | <li> | + | <li><b>Colisweeper video</b></li> |
| - | < | + | <li><b>Colisweeper</b><br>Colisweeper is an interactive, biological version of the Minesweeper computer game, based on quorum sensing and chromogenic enzymatic reactions. |
| + | The goal is to clear an agar “minefield” without detonating the mines. Genetically engineered <i>Escherichia coli</i> colonies are used as sender-cells (mines) and receiver-cells (non-mines). Mines secrete the signaling molecule OHHL (analog of AHL: N-acyl homoserine lactone) whereas non-mines process the signal. To distinguish between OHHL-levels, a library of pLuxR promoters with various OHHL sensitivities was created through site-saturation mutagenesis. High-pass filters were constructed to control the expression of different orthogonal hydrolases in non-mines, depending on the number of surrounding mines. Additionally, the mines express their own hydrolase. | ||
| + | </li> | ||
| + | <li><b> The computer game Minesweeper</b><br> | ||
| + | The computer game is played on a mine grid with squares that can be mines or non-mines. The goal of the game is to clear the field without detonating the mines. By left clicking on each square, the identity of the square is revealed. The digits 1,2, or 3 reveal that there are one, two or three mines adjacent to the clicked square. The player uses this logic to decide which squares could be a mine and flags it. The mines can be flagged by right clicking on a square. The game is won when all the mines are flagged in the mine field. If a mine is clicked, all the other mines in the mine field are detonated and the game is over. | ||
| + | </li> | ||
| + | <li><b>Gameplay</b><br>To play Colisweeper, the player has to pipette colorless substrates on a colony on the agar minefield. A single move of pipetting would require the player to choose between two colorless substrates. If the multi-susbtrate is added, this will reveal the identity of the colony- as in the number of mines surrounding a non-mine. The single colorless substrate is pipetted onto a colony if the player is certain of a mine colony. Addition of either substrates produces a defined colored product within minutes, allowing identification of the played colony and the number of mines surrounding it.<br> | ||
| + | </li> | ||
| + | <li><b>Information Processing</b><br> The non-mine colonies are designed to distinguish between different concentrations of OHHL and translate this information into expression of different sets of hydrolases. They are equipped with mutated LuxR promoters with different OHHL sensitivities which serve as highpass filters. The promoters were created using site-saturation mutagenesis. Through mutation of the LuxR binding sites we were able to tune the promoters to different OHHL affinities. | ||
| + | </li> | ||
| + | <li><b>Hydrolase Reactions</b><br> We use a set of orthogonal hydrolases as our reporter system that react within minutes with the added multi-substrate to produce a visible color. The set of hydrolases such as alkaline phosphatase (<i>phoA</i>), β-galactosidase (<i>lacZ</i>), acetylesterase (<i>aes</i>), β-N-Acetylglucosaminidase (<i>nagZ</i>) and β-glucuronidase (<i>gusA</i>) and their respective substrates react to achieve fast and colorful outputs with each color indicative of the next logical move for the player. | ||
| + | <li><b>From Minesweeper to Colisweeper</b><br>Mines secrete the signaling molecule OHHL whereas non-mines process the signal after diffusion of OHHL. High-pass filters were constructed to control the expression of different orthogonal hydrolases in non-mines, depending on the concentration of the OHHL molecules from the surrounding mines. The constant expression of ''lacZ'' enables the flagging of both mines and non mine colonies. Additionally, the mines express their own hydrolase. | ||
| + | </li> | ||
| + | <li><b>The Model</b><br>As our system is based on sensing the OHHL concentration, the diffusion of the signalling molecule in the mine field is a vital part of the model; we carried out simulations to determine time and distance scales. In addition to OHHL diffusion, we modelled synthesis, regulation and degradation reactions of the molecules involved in our genetic circuits. To account for both processes: diffusion and reactions, we developed a spatio-temporal model in two dimensions comprised by three modules: mines, receivers, and the agar plate. To solve the system of partial differential equations (PDEs) we used finite element methods. The information from the model was used to validate and improve our system. | ||
| + | </li> | ||
| + | <li><b>High pass filter</b> | ||
| + | </li> | ||
| + | <li><b>Human practice</b><br>Inspired by our Colisweeper project, we analyzed the relationship between synthetic biology and games. For one thing synthetic biology can be used to play common games in a new way, possibly for educational purposes or as a basis for proof-of-principle experiments for new circuits. More recently synthetic biologists also started to use games as a research tool, an innovative approach to make use of crowd-sourcing and distributed computing. We want to find correlations and discuss possible consequences for Synthetic Biology. | ||
| + | </li> | ||
| + | <li><b>Team</b><br>We are a team of seven highly motivated Bachelor- and Master Students at ETH Zürich pursuing various fields such as Biotechnology, Biomedical Engineering, Neurobiology and Bioinformatics. The iGEM project is carried out at one of the youngest departments of ETHZ located in Basel-Department of Biosystems Science and Engineering - flourishing in interdisciplinary biological research. If you're around Basel, make sure to visit our team's lab to play the bio-game Colisweeper! | ||
</li> | </li> | ||
| - | |||
| - | |||
| - | |||
| - | |||
| - | |||
</ul> | </ul> | ||
| - | <div style="display: table-cell; vertical-align: top; width: | + | </div> |
| + | <div style="display: table-cell; vertical-align: top; width: 15px; "></div> | ||
| + | <div style="display: table-cell; vertical-align: top; width: auto; "> | ||
<ul class="bxslider" id="bxslider"> | <ul class="bxslider" id="bxslider"> | ||
| + | <li><div></html>{{:Team:ETH Zurich/Templates/Video|width=660px|id=video1|ratio=4/3||srcMP4=<html>https://static.igem.org/mediawiki/2013/7/76/Colisweeperfinal.mp4</html>}}<html> | ||
| + | </div></li> | ||
<li> | <li> | ||
| - | <a href="https://2013.igem.org/Team:ETH_Zurich/Project"><img src="https://static.igem.org/mediawiki/2013/ | + | <a href="https://2013.igem.org/Team:ETH_Zurich/Project"><img src="https://static.igem.org/mediawiki/2013/5/5f/Introslide.png" /></a> |
</li> | </li> | ||
| - | <li> | + | <li> |
| - | <a href=" | + | <a href="http://minesweeperonline.com/"><img src="https://static.igem.org/mediawiki/2013/f/fb/Minesweeperslide.png" /></a> |
</li> | </li> | ||
| - | + | <li> | |
| - | + | <a href="/Team:ETH_Zurich/Project"><img src="https://static.igem.org/mediawiki/2013/c/ce/Gameplay.png"/></a> | |
| - | <a href="/Team:ETH_Zurich/Project"><img src="https://static.igem.org/mediawiki/2013/ | + | |
</li> | </li> | ||
<li> | <li> | ||
| - | <img src="https://static.igem.org/mediawiki/2013/ | + | <img src="https://static.igem.org/mediawiki/2013/d/d9/Infoproc14.png" /> |
| - | + | ||
| - | + | ||
| + | </li> | ||
<li> | <li> | ||
| - | <a href=" | + | <a href="/Team:ETH_Zurich/Experiments_3"><img src="https://static.igem.org/mediawiki/2013/9/9b/Hydroslide.png"/></a> |
| - | + | ||
</li> | </li> | ||
| + | <li> | ||
| + | <a href="/Team:ETH_Zurich/Project"><img src="https://static.igem.org/mediawiki/2013/1/17/Circuit_Minesweeper2.png"/></a> | ||
| + | </li> | ||
<li> | <li> | ||
| - | <a href="/Team:ETH_Zurich/GFP"><img src="https://static.igem.org/mediawiki/2013/ | + | <a href="/Team:ETH_Zurich/GFP"><img src="https://static.igem.org/mediawiki/2013/7/7d/Modelslide1.png"/></a> |
| - | + | ||
| - | + | ||
</li> | </li> | ||
| - | + | <li> | |
| - | < | + | <a href="/Team:ETH_Zurich/Experiments_5"><img src="https://static.igem.org/mediawiki/2013/5/51/Experimentslide.png" /></a> |
| - | + | ||
| - | + | ||
| - | + | ||
</li> | </li> | ||
| - | |||
<li> | <li> | ||
<a href="/Team:ETH_Zurich/Human"><img src="https://static.igem.org/mediawiki/2013/5/5d/Humanpractice_%281%29.png" /></a> | <a href="/Team:ETH_Zurich/Human"><img src="https://static.igem.org/mediawiki/2013/5/5d/Humanpractice_%281%29.png" /></a> | ||
| - | + | ||
</li> | </li> | ||
<li> | <li> | ||
| - | <a href="/Team:ETH_Zurich/Team"><img src="/ | + | <a href="/Team:ETH_Zurich/Team"><img src="https://static.igem.org/mediawiki/2013/e/ef/Teamslide.png" /></a> |
| - | + | ||
</li> | </li> | ||
</ul> | </ul> | ||
| + | </div> | ||
</div> | </div> | ||
</div> | </div> | ||
<script type="text/javascript"> | <script type="text/javascript"> | ||
| + | (function($) { | ||
| + | function img(url) { | ||
| + | var i = new Image; | ||
| + | i.src = url; | ||
| + | return i; | ||
| + | } | ||
| + | |||
| + | if ('naturalWidth' in (new Image)) { | ||
| + | $.fn.naturalWidth = function() { return this[0].naturalWidth; }; | ||
| + | $.fn.naturalHeight = function() { return this[0].naturalHeight; }; | ||
| + | return; | ||
| + | } | ||
| + | $.fn.naturalWidth = function() { return img(this[0].src).width; }; | ||
| + | $.fn.naturalHeight = function() { return img(this[0].src).height; }; | ||
| + | })(jQuery); | ||
| + | |||
| + | |||
| + | |||
| + | function onWindowResize() | ||
| + | { | ||
| + | var curWidth = $(window).width(), | ||
| + | curHeight = $(window).height(), | ||
| + | checking=false; | ||
| + | if (checking) { | ||
| + | return; | ||
| + | } | ||
| + | checking = true; | ||
| + | window.setTimeout( | ||
| + | function() { | ||
| + | var newWidth = $(window).width(), | ||
| + | newHeight = $(window).height(); | ||
| + | if (!(newWidth !== curWidth || | ||
| + | newHeight !== curHeight)) { | ||
| + | resize(false); | ||
| + | } | ||
| + | checking=false; | ||
| + | }, 300); | ||
| + | } | ||
| + | |||
| + | function resize(initial) { | ||
| + | |||
| + | if (navigator.userAgent.match(/msie/i)) | ||
| + | { | ||
| + | if ($("#bxsliderText").parent().css("height") != $("#bxslider").parent().css("height")) | ||
| + | setTimeout(function() {$( "#bxsliderText" ).parent().css({"height": $("#bxslider").parent().css("height")});}, 100); | ||
| + | } | ||
| + | |||
| + | if (!initial) | ||
| + | { | ||
| + | var container = $('#bxslider > li'); | ||
| + | var imgWidth = container.width(); | ||
| + | |||
| + | $( "#imagemap, #imagemap2" ).each(function() { | ||
| + | $(this).css('height', 'auto', 'width', 'auto'); | ||
| + | $(this).mapster('resize',Math.min(imgWidth, $(this).naturalWidth()) ,0,0); | ||
| + | }); | ||
| + | } | ||
| + | |||
| + | } | ||
| + | |||
| + | |||
$(document).ready(function(){ | $(document).ready(function(){ | ||
| - | + | sliderText = $('#bxsliderText').bxSlider({'mode': 'fade', 'controls': false, 'pager': false, 'auto': false, "responsive": false, 'touch': false}); | |
| - | sliderText = $('#bxsliderText').bxSlider({' | + | slider = $('#bxslider').bxSlider({ 'auto': false, onSlideAfter: function(slideElement, oldIndex, newIndex){sliderText.goToSlide(newIndex);}, onSlideBefore: function(slideElement, oldIndex, newIndex){sliderText.goToSlide(newIndex);}}); |
| - | $('#bxsliderText').parent().css({ | + | $('#bxsliderText').parent().css({"height": "100%", 'min-height' : '430px'}); |
| - | $('#bxsliderText').parent().parent().css({ | + | $('#bxsliderText').parent().parent().css({"height": "100%"}); |
| - | $('.bx-viewport').bind('mousewheel', function(event, delta, deltaX, deltaY) { | + | $('.bx-viewport #bxslider').bind('mousewheel', function(event, delta, deltaX, deltaY) { |
event.preventDefault(); | event.preventDefault(); | ||
if (delta < 0) {slider.goToNextSlide();} | if (delta < 0) {slider.goToNextSlide();} | ||
| Line 83: | Line 171: | ||
clickNavigate: true | clickNavigate: true | ||
}); | }); | ||
| + | |||
| + | |||
| + | $(window).resize( | ||
| + | function() | ||
| + | { | ||
| + | onWindowResize(); | ||
| + | }); | ||
| + | resize(true); | ||
}); | }); | ||
| - | |||
| - | |||
</script> | </script> | ||
</html> | </html> | ||
| - | |||
| - | |||
| - | |||
| - | |||
| - | |||
<br clear="all" /> | <br clear="all" /> | ||
{{:Team:ETH_Zurich/templates/footer}} | {{:Team:ETH_Zurich/templates/footer}} | ||
Latest revision as of 21:30, 3 October 2013
