Difference between revisions of "Team:Oxford"
Chunngaiau (Talk | contribs) |
Helenrensiyu (Talk | contribs) |
||
| Line 10: | Line 10: | ||
<script> | <script> | ||
| − | + | $(document).ready(function(){ | |
| − | + | var native_width = 2000; | |
| − | + | var native_height = 1250; | |
| − | + | var finished_loading = false; | |
| − | + | var start_time = -1; | |
| − | + | var end_time = -1; | |
| − | + | var detection = 0; | |
| − | + | ||
| − | + | //When image finished loading | |
| − | + | $("<img/>").attr("src", "https://static.igem.org/mediawiki/2017/f/f8/T-Oxford-CruziGameLarge.png").on("load", function() { | |
| − | + | $(this).remove(); | |
| − | + | $(".cruzi-large").css("background", "url(https://static.igem.org/mediawiki/2017/f/f8/T-Oxford-CruziGameLarge.png) no-repeat"); | |
| − | + | ||
| − | + | finished_loading = true; | |
| − | + | $(".cruzi-message").fadeOut(250); | |
| − | + | ||
| − | + | console.log("Loaded!"); | |
| − | + | //Now the mousemove function | |
| − | + | $(".cruzi-magnify").mousemove(function(e){ | |
| − | + | //When the user hovers on the image, the script will first calculate | |
| − | + | //the native dimensions if they don't exist. Only after the native dimensions | |
| − | + | //are available, the script will show the zoomed version. | |
| − | + | ||
| − | + | //console.log("mousemove"); | |
| − | + | ||
| − | + | //x/y coordinates of the mouse | |
| − | + | //This is the position of .magnify with respect to the document. | |
| − | + | var magnify_offset = $(this).offset(); | |
| − | + | //We will deduct the positions of .magnify from the mouse positions with | |
| − | + | //respect to the document to get the mouse positions with respect to the | |
| − | + | //container(.magnify) | |
| − | + | var mx = e.pageX - magnify_offset.left; | |
| − | + | var my = e.pageY - magnify_offset.top; | |
| − | + | ||
| − | + | if (mx < 35) {mx = 35;} | |
| − | + | if (my < 35) {my = 35;} | |
| − | + | if (mx > $(this).width() - 35) {mx = $(this).width() - 35;} | |
| − | + | if (my > $(this).height() - 35) {my = $(this).height() - 35;} | |
| − | + | ||
| − | + | if (start_time == -1) { | |
| − | + | // Start the timer | |
| − | + | start_time = new Date; | |
| − | + | } | |
| − | + | //if(minside) | |
| − | + | //{ | |
| − | + | //The background position of .cruzi-large will be changed according to the position | |
| − | + | //of the mouse over the .cruzi-small image. So we will get the ratio of the pixel | |
| − | + | //under the mouse pointer with respect to the image and use that to position the | |
| − | + | //large image inside the magnifying glass | |
| − | + | var rx = Math.round(mx/$(".cruzi-small").width()*native_width - $(".cruzi-large").width()/2)*-1; | |
| − | + | var ry = Math.round(my/$(".cruzi-small").height()*native_height - $(".cruzi-large").height()/2)*-1; | |
| − | + | var bgp = rx + "px " + ry + "px"; | |
| − | + | ||
| − | + | //Time to move the magnifying glass with the mouse | |
| − | + | var px = mx - $(".cruzi-large").width()/2; | |
| − | + | var py = my - $(".cruzi-large").height()/2; | |
| − | + | //Now the glass moves with the mouse | |
| − | + | //The logic is to deduct half of the glass's width and height from the | |
| − | + | //mouse coordinates to place it with its center at the mouse coordinates | |
| − | + | ||
| − | + | //If you hover on the image now, you should see the magnifying glass in action | |
| − | + | $(".cruzi-large").css({left: px, top: py, backgroundPosition: bgp}); | |
| − | + | //} | |
| − | + | if (mx > 523) { | |
| − | + | if (mx < 612) { | |
| − | + | if (my > 285) { | |
| − | + | if (my < 366) { | |
| − | + | detection = detection + 1; | |
| − | + | } | |
| − | + | } | |
| − | + | } | |
| − | + | } | |
| − | + | if (detection > 10) { | |
| − | + | if (end_time == -1) { | |
| − | + | end_time = new Date; | |
| − | + | $(".cruzi-message").text("Yay! You've found it in " + Math.round((end_time - start_time)/1000) + " Seconds. In practice, it takes much longer for a sample of blood under the microscope."); | |
| − | + | $(".cruzi-message").css("background", "rgba(0, 255, 0, 0.4)"); | |
| − | + | $(".cruzi-message").fadeIn(1000); | |
| − | + | } | |
| − | + | } | |
| − | + | }); | |
| − | + | }); | |
| − | + | }); | |
</script> | </script> | ||
| Line 105: | Line 105: | ||
/*Lets create the magnifying glass*/ | /*Lets create the magnifying glass*/ | ||
.cruzi-large { | .cruzi-large { | ||
| − | + | width: 175px; height: 175px; | |
| − | + | position: absolute; | |
| − | + | border-radius: 100%; | |
| − | + | ||
| − | + | /*Multiple box shadows to achieve the glass effect*/ | |
| − | + | box-shadow: 0 0 0 7px rgba(255, 255, 255, 0.85), | |
| − | + | 0 0 7px 7px rgba(0, 0, 0, 0.25), | |
| − | + | inset 0 0 40px 2px rgba(0, 0, 0, 0.25); | |
| − | + | ||
| − | + | /*Lets load up the large image first*/ | |
| − | + | /*background: url('https://static.igem.org/mediawiki/2017/f/f8/T-Oxford-CruziGameLarge.png') no-repeat;*/ | |
| − | + | ||
| − | + | /*hide the glass by default*/ | |
| − | + | display: block; | |
| − | + | ||
} | } | ||
.cruzi-message { | .cruzi-message { | ||
| − | + | width: 100%; | |
| − | + | padding: 30% 10% 0% 10%; | |
| − | + | height: 175px; | |
| − | + | border-radius: 100%; | |
| − | + | ||
| − | + | font: bold 9pt Arial, sans-serif; | |
| − | + | text-align: center; | |
| − | + | display: block; | |
| − | + | ||
| − | + | /*background: rgba(0, 255, 0, 0.4);*/ | |
} | } | ||
| Line 139: | Line 139: | ||
@media only screen and (max-width: 768px) { | @media only screen and (max-width: 768px) { | ||
| − | + | #cruzi-game { | |
| − | + | display: none; | |
| − | + | } | |
} | } | ||
| Line 149: | Line 149: | ||
<body> | <body> | ||
<div class="container-fluid" style="margin-top: 80px"> | <div class="container-fluid" style="margin-top: 80px"> | ||
| − | + | ||
| − | + | ||
<div class="jumbotron"> | <div class="jumbotron"> | ||
<h1 class="text-center"><i>See. cruzi</i></h1> | <h1 class="text-center"><i>See. cruzi</i></h1> | ||
| Line 164: | Line 164: | ||
</div> | </div> | ||
| − | + | <div class="container-fluid" id="cruzi-game"> | |
| − | + | <h1 class="text-center">Do you know how long it takes to screen a blood smear for Chagas Disease?</h1> | |
| − | + | <p style="text-align: center"><b>Try to find the <i>Trypansosoma cruzi</i> parasite in the blood sample below.</b></p> | |
| − | + | <div class="cruzi-magnify"> | |
| − | + | ||
| − | + | <!-- This is the magnifying glass which will contain the original/large version --> | |
| − | + | <div class="cruzi-large"> | |
| − | + | <div class="cruzi-message">Loading...</div> | |
| − | + | </div> | |
| − | + | ||
| − | + | <!-- This is the small image --> | |
| − | + | <img class="cruzi-small" src="https://static.igem.org/mediawiki/2017/f/f6/T-Oxford-CruziGameSmall.png" width="800"/> | |
| − | + | ||
| − | + | </div> | |
| − | + | <!-- Lets load up prefixfree to handle CSS3 vendor prefixes --> | |
| − | + | <!--<script src="http://thecodeplayer.com/uploads/js/prefixfree.js" type="text/javascript"></script>--> | |
| − | + | </div> | |
</div> | </div> | ||
Revision as of 11:02, 14 August 2017
See. cruzi
Developing a cell-free detection system for Chagas disease in the acute phase by detecting biomarkers in the blood
The aim of our iGEM project is to design a cell-free diagnosis kit to detect the presence of biomarkers specific to the Trypansosoma cruzi, the protozoan parasite responsible for Chagas disease, a neglected tropical disease impacting 6-7 million people primarily in Latin America.
Currently, the acute (early) phase of Chagas disease is difficult to diagnose, due to it being asymptomatic and methods using DNA amplification or immunoassays being both expensive and inaccessible to the majority of those affected by Chagas disease. Current treatments using benznidazole and nifurtimox are almost 100% effective if given shortly after the onset of the acute phase. However, lack of diagnosis in the acute phase leads to the onset of the chronic phase, which causes irreversible pathological consequences to the heart, digestive system, and nervous system.
The final diagnostic kit would allow Chagas disease to be diagnosed in the acute phase by preventing the clotting of a blood sample, by releasing hirudin (a peptide from leeches) upon cleavage by the protease cruzipain (a cysteine protease specific to T. cruzi). Our system would ultimately be completely cell-free, with the components freeze-dried and competent after rehydration, allowing it to be used in the field without the need for expensive equipment or highly trained professionals - all it will require is a blood sample. We imagine that this system would be adaptable for other parasites and pathogens which have similar difficulties in detection, both in the input for the system and the options for output.
We are developing two methods to detect the presence of cruzipain, both being modelled in E. coli. The first is DNA based, and involves the cleavage of a repressor protein to lead to expression of hirudin (modelled using fluorescent proteins and using TEV instead of cruzipain). The second involves tagging hirudin (again modelled with a fluorophore) to outer membrane vesicles, where the peptide could be cleaved and released from OmpA by cruzipain (modelled with TEV). Our systems would ultimately be completely cell-free, with the components freeze-dried and competent after rehydration.
Chagas disease claims over 12000 lives per year. We believe that the death toll could be significantly reduced by a synthetic biology solution, which is cost effective, accessible, and accurate in the swift diagnosis of Chagas disease; a solution that our project aims to provide.
If you want to collaborate with us, please send us an email:oxfordigem@bioch.ox.ac.uk
Please also support us by liking our facebook page → 
Do you know how long it takes to screen a blood smear for Chagas Disease?
Try to find the Trypansosoma cruzi parasite in the blood sample below.
