Difference between revisions of "Team:Mingdao/Applied Design"

 
(20 intermediate revisions by 2 users not shown)
Line 42: Line 42:
 
   padding: 50px;
 
   padding: 50px;
 
   min-height: 180vh;
 
   min-height: 180vh;
−
   z-index: 0; }
+
   z-index: 0;  
 +
margin-top:600px
 +
}
  
 
.text-area {
 
.text-area {
Line 61: Line 63:
 
   position: fixed;
 
   position: fixed;
 
   width: 250px;
 
   width: 250px;
−
   top: 150px;
+
   top: 200px;
 
   left: 225px; }
 
   left: 225px; }
  
Line 99: Line 101:
 
   .path .path-word-sm {
 
   .path .path-word-sm {
 
     font-size: 12px; }
 
     font-size: 12px; }
 +
 +
#HQ_page .path .pathWord p {
 +
      font-weight: 700;
 +
      text-align: left !important;
 +
      font-size: 16px;
 +
      color: #bf4e4e;
 +
}
 +
 +
#HQ_page .text-area p {
 +
  font-size: 22px;
 +
  font-family: 'Ubuntu';
 +
  font-weight: 500; }
 +
  
 
.pdfbtn {
 
.pdfbtn {
Line 163: Line 178:
 
       padding-left: 10px; }
 
       padding-left: 10px; }
  
−
#HQ_page .text-area p {
+
 
−
  font-size: 22px;
+
−
  font-family: 'Ubuntu';
+
−
  font-weight: 500; }
+
 
.top {
 
.top {
 
   position: fixed;
 
   position: fixed;
Line 176: Line 188:
 
   .top img {
 
   .top img {
 
     width: 100%; }
 
     width: 100%; }
−
h2 {
+
.top-picture{
−
text-align: center;
+
z-index:2;
 +
width:100%;
 +
  position: absolute;
 +
}
 +
 
 +
.text-area h2{
 +
    text-align: center;
 +
    margin-bottom: 2rem !important;
 +
    margin-top: 2rem;
 +
    color: white !important;
 +
    font-size: 40px;
 +
    font-weight:bold;
 +
    font-family:serif;
 +
}
 +
 
 +
h4{
 +
    text-align: center;
 
     margin-bottom: 2rem !important;
 
     margin-bottom: 2rem !important;
 
     margin-top: 2rem;
 
     margin-top: 2rem;
Line 212: Line 240:
 
           <div class="text-area">
 
           <div class="text-area">
 
             <!-- <h1>Prototype</h1> -->
 
             <!-- <h1>Prototype</h1> -->
−
         
+
<h4 id="d-ge"></h4>
 
<div class="col-md-12 col-sm-12">
 
<div class="col-md-12 col-sm-12">
 
                        <img src="https://static.igem.org/mediawiki/2018/d/d5/T--Mingdao--phil13N1.png" width="100%" height="auto" style="display: block; margin: auto; margin-top: 2rem; margin-bottom: 2rem">
 
                        <img src="https://static.igem.org/mediawiki/2018/d/d5/T--Mingdao--phil13N1.png" width="100%" height="auto" style="display: block; margin: auto; margin-top: 2rem; margin-bottom: 2rem">
Line 219: Line 247:
  
  
−
<!-- <h2>GE Mosquitoes</h2> -->  
+
<!-- <h4>GE Mosquitoes</h4> -->  
  
 
<p style="text-indent:2em">
 
<p style="text-indent:2em">
Line 245: Line 273:
 
<br />
 
<br />
  
−
 
+
<h4 id="d-p-d"></h4>
 
<div class="col-md-12 col-sm-12">
 
<div class="col-md-12 col-sm-12">
 
<img src="https://static.igem.org/mediawiki/2018/b/b5/T--Mingdao--phil13N3.png" width="100%" height="auto" style="display: block; margin: auto; margin-top: 2rem; margin-bottom: 2rem">
 
<img src="https://static.igem.org/mediawiki/2018/b/b5/T--Mingdao--phil13N3.png" width="100%" height="auto" style="display: block; margin: auto; margin-top: 2rem; margin-bottom: 2rem">
Line 251: Line 279:
  
  
−
<!-- <h2>Product Design</h2> -->
+
<!-- <h4>Product Design</h4> -->
 
<p style="text-indent:2em">
 
<p style="text-indent:2em">
 
To make GE mosquito GFP reporter system come to the world, some may be considered: product packaging, result reading device and protocol, safety, as well as product marketing. </p>
 
To make GE mosquito GFP reporter system come to the world, some may be considered: product packaging, result reading device and protocol, safety, as well as product marketing. </p>
Line 258: Line 286:
 
We developed two products as one set for our reporter and reading system:<br />
 
We developed two products as one set for our reporter and reading system:<br />
 
<p>
 
<p>
−
1. KISSING BOX<sup>TM</sup>: the GE mosquito kept in the box for sucking blood<br />
+
1. KISSING BOX<sup>TM</sup>: GE mosquitoes kept in the box for sucking blood<br />
 
<p>
 
<p>
 
2. BLUE LED BOX: a scanner box equipped with blue led for observing the green fluorescence signal.<br />
 
2. BLUE LED BOX: a scanner box equipped with blue led for observing the green fluorescence signal.<br />
Line 293: Line 321:
 
<br />
 
<br />
 
<p style="text-indent:2em">
 
<p style="text-indent:2em">
−
The SCANNER equipped with blue led which can excite the green fluorescence of GFP as shown here with fluorescein in a PCR tube.  
+
The SCANNER equipped with blue LED which can excite the green fluorescence of GFP as shown here with fluorescein in a PCR tube.  
 
  </p><br />
 
  </p><br />
  
Line 352: Line 380:
  
  
−
<!-- <h2>Product Safety</h2> -->
+
<!-- <h4>Product Safety</h4> -->
−
 
+
  
 +
<h4 id="d-p-s"></h4>
 
<div class="col-md-12 col-sm-12">
 
<div class="col-md-12 col-sm-12">
 
<img src="https://static.igem.org/mediawiki/2018/8/8b/T--Mingdao--phil13N18.png" width="100%" height="auto" style="display: block; margin: auto; margin-top: 2rem; margin-bottom: 2rem">
 
<img src="https://static.igem.org/mediawiki/2018/8/8b/T--Mingdao--phil13N18.png" width="100%" height="auto" style="display: block; margin: auto; margin-top: 2rem; margin-bottom: 2rem">
Line 367: Line 395:
  
  
−
<!-- <h2> Product DM </h2> -->
+
<h4 id="d-p-c"></h4>
  
 
<div class="col-md-12 col-sm-12">
 
<div class="col-md-12 col-sm-12">
Line 389: Line 417:
 
     </div>
 
     </div>
  
−
<!--// <script type="text/javascript">
+
<!--  <script type="text/javascript">
−
//  $('#interlab-btn-1').on('click', function(){
+
  $('#interlab-btn-1').on('click', function(){
−
   //    $('#interlab-1').css('height','250vh')
+
   $('#interlab-1').css('height','250vh')
−
  //   $('#interlab-1').slideToggle("slow");
+
   $('#interlab-1').slideToggle("slow");
−
  //   $('.bg-container').css('max-height','500vh')
+
   $('.bg-container').css('max-height','500vh')
−
   //  $('.main-content').css('min-height','200vh')
+
   $('.main-content').css('min-height','200vh')
−
//   });
+
   });
−
//   $('#interlab-btn-2').on('click', function(){
+
   $('#interlab-btn-2').on('click', function(){
−
//      $('#interlab-2').slideToggle("slow");
+
    $('#interlab-2').slideToggle("slow");
−
//      $('.bg-container').css('max-height','500vh')
+
      $('.bg-container').css('max-height','500vh')
−
//      $('.main-content').css('min-height','200vh')
+
      $('.main-content').css('min-height','200vh')
−
//   });
+
   });
−
//   $('.top').on('click', function(){
+
   $('.top').on('click', function(){
−
//    $('html, body').animate({scrollTop: '0px'}, 500);
+
    $('html, body').animate({scrollTop: '0px'}, 500);
−
//    });
+
    });
 
</script>-->
 
</script>-->
  
Line 414: Line 442:
 
           </svg>
 
           </svg>
 
         </div>
 
         </div>
−
         <div id="d-introduction-btn" class="path-dot"></div>
+
         <div id="ge-btn" class="path-dot"></div>
 
         <div class="pathWord path-word-sm">
 
         <div class="pathWord path-word-sm">
−
           <p>Introduction</p>
+
           <p>GE Mosquitoes</p>
 
         </div>
 
         </div>
 
       </div>
 
       </div>
Line 426: Line 454:
 
           </svg>
 
           </svg>
 
         </div>
 
         </div>
−
         <div id="d-model1-btn" class="path-dot" style="top: 100px"></div>
+
         <div id="p-d-btn" class="path-dot" style="top: 100px"></div>
 
         <div class="pathWord path-word-sm">
 
         <div class="pathWord path-word-sm">
−
           <p>Model 1</p>
+
           <p>Product Design</p>
 
         </div>
 
         </div>
 
       </div>
 
       </div>
−
 
  
 
       <div class="path">
 
       <div class="path">
Line 439: Line 466:
 
           </svg>
 
           </svg>
 
         </div>
 
         </div>
−
         <div id="d-model2-btn" class="path-dot" style="top: 200px"></div>
+
         <div id="p-s-btn" class="path-dot" style="top: 200px"></div>
 
         <div class="pathWord path-word-sm">
 
         <div class="pathWord path-word-sm">
−
           <p>Model 2</p>
+
           <p>Product Safety</p>
 
         </div>
 
         </div>
 
       </div>
 
       </div>
−
 
  
 
         <div class="path">
 
         <div class="path">
Line 452: Line 478:
 
           </svg>
 
           </svg>
 
         </div>
 
         </div>
−
         <div id="d-conclusion-btn" class="path-dot" style="top: 300px"></div>
+
         <div id="p-c-btn" class="path-dot" style="top: 300px"></div>
 
         <div class="pathWord path-word-sm">
 
         <div class="pathWord path-word-sm">
−
           <p>Conclusion</p>
+
           <p>Product Catalog</p>
 
         </div>
 
         </div>
 
       </div>
 
       </div>
Line 461: Line 487:
  
 
     <div class="top">
 
     <div class="top">
−
       <img class="center" src="https://static.igem.org/mediawiki/2017/5/52/T--CSMU_NCHU_Taiwan--top.png" alt="">
+
       <img class="center" src="https://static.igem.org/mediawiki/2018/5/58/T--Mingdao--go_to_top.jpg" alt="">
 
     </div>
 
     </div>
 
   </body>
 
   </body>
  
 
   <script type="text/javascript">
 
   <script type="text/javascript">
−
     $("#d-introduction-btn").click(function() {
+
     $("#ge-btn").click(function() {
 
       $('html, body').animate({
 
       $('html, body').animate({
−
           scrollTop: $("#d-introduction").offset().top
+
           scrollTop: $("#d-ge").offset().top
 
       }, 500);
 
       }, 500);
 
     });
 
     });
−
     $("#d-model1-btn").click(function() {
+
     $("#p-d-btn").click(function() {
 
       $('html, body').animate({
 
       $('html, body').animate({
−
           scrollTop: $("#d-model1").offset().top
+
           scrollTop: $("#d-p-d").offset().top
 
       }, 500);
 
       }, 500);
 
     });
 
     });
−
     $("#d-model2-btn").click(function() {
+
     $("#p-s-btn").click(function() {
 
       $('html, body').animate({
 
       $('html, body').animate({
−
           scrollTop: $("#d-model2").offset().top
+
           scrollTop: $("#d-p-s").offset().top
 
       }, 500);
 
       }, 500);
 
     });
 
     });
−
     $("#d-conclusion-btn").click(function() {
+
     $("#p-c-btn").click(function() {
 
       $('html, body').animate({
 
       $('html, body').animate({
−
           scrollTop: $("#d-conclusion").offset().top
+
           scrollTop: $("#d-p-c").offset().top
 
       }, 500);
 
       }, 500);
 
     });
 
     });
Line 491: Line 517:
 
         $('html, body').animate({scrollTop: '0px'}, 500);
 
         $('html, body').animate({scrollTop: '0px'}, 500);
 
       });
 
       });
−
         $("#d-introduction-btn").css('background-color', '#385e66');
+
         $("#ge-btn").css('background-color', '#385e66');
 
         var scroll_pos = 0;
 
         var scroll_pos = 0;
 
         $(document).scroll(function() {
 
         $(document).scroll(function() {
 
             scroll_pos = $(this).scrollTop();
 
             scroll_pos = $(this).scrollTop();
  
−
             d_introduction_pos = $("#d-introduction").offset().top -100
+
             d_ge_pos = $("#d-ge").offset().top -100
−
             d_model1_pos = $("#d-model1").offset().top -100
+
             d_pd_pos = $("#d-p-d").offset().top -100
−
             d_model2_pos= $("#d-model2").offset().top -100
+
             d_ps_pos= $("#d-p-s").offset().top -100
−
             d_conclusion_pos = $("#d-conclusion").offset().top -100
+
             d_pc_pos = $("#d-p-c").offset().top -100
  
 
             // introduction
 
             // introduction
−
             if(scroll_pos < d_model1_pos) {
+
             if(scroll_pos < d_pd_pos) {
 
                 $(".path-dot").css('background-color', '#fff')
 
                 $(".path-dot").css('background-color', '#fff')
−
                 $("#d-introduction-btn").css('background-color', '#385e66');
+
                 $("#ge-btn").css('background-color', '#385e66');
 
             // model1  
 
             // model1  
−
             } else if(scroll_pos < d_model2_pos){
+
             } else if(scroll_pos < d_ps_pos){
−
               if(scroll_pos >= d_model1_pos){
+
               if(scroll_pos >= d_pd_pos){
 
                 $(".path-dot").css('background-color', '#fff')
 
                 $(".path-dot").css('background-color', '#fff')
−
                 $("#d-model1-btn").css('background-color', '#385e66');}
+
                 $("#p-d-btn").css('background-color', '#385e66');}
  
 
             // model2
 
             // model2
−
             } else if(scroll_pos < d_conclusion_pos){
+
             } else if(scroll_pos < d_pc_pos){
−
               if(scroll_pos >= d_model2_pos){
+
               if(scroll_pos >= d_ps_pos){
 
                 $(".path-dot").css('background-color', '#fff')
 
                 $(".path-dot").css('background-color', '#fff')
−
                 $("#d-model2-btn").css('background-color', '#385e66');}
+
                 $("#p-s-btn").css('background-color', '#385e66');}
 
             }
 
             }
  
 
              
 
              
 
             // conclusion
 
             // conclusion
−
             else if( scroll_pos >= d_conclusion_pos) {
+
             else if( scroll_pos >= d_pc_pos) {
 
                 $(".path-dot").css('background-color', '#fff')
 
                 $(".path-dot").css('background-color', '#fff')
−
                 $("#d-conclusion-btn").css('background-color', '#385e66');
+
                 $("#p-c-btn").css('background-color', '#385e66');
 
             }
 
             }
 
         });
 
         });

Latest revision as of 03:02, 18 October 2018

HOME
Prototype

To demonstrate our pathogen blood testing system on a real adult mosquito, we collaborated with NCHU_Taichung iGEM Team 2018 from Taiwan and conducted an experiment of DNA microinjection into adult female mosquito, Aedes aegypti.


In addition to this experiment, we also visited the Mosquito Lab of Prof. Wu-Chun Tu in National Chung Hsing University, Taiwan. We presented our idea and got the valuable feedback from him. Moreover, we learned the physiology and behavior of mosquitoes when sucking and attracted by human blood from Dr. Hau-you Tzeng. The knowledge we learned was turned into our prototype design.

EXPERIMENT at NCHU

↓ Make microinjection needles by pulling glass capillary tubes
↓ Anesthetize the adult mosquitoes on ice
↓ Fill the needle with the DNAs in Cellfectin II reagent with E. coli or not
↓ Inject the DNA by inserting into the thorax of the mosquito.
↓ Recover the mosquito for 2 days


RESULT

The mosquito injected with DNA plus E. coli showed fluorescence signal in Gel Imaging System and Blue LED Box after 2 days of DNA microinjection. This result further proved our concept into a reality.



To make GE mosquito GFP reporter system come to the world, some may be considered: product packaging, result reading device and protocol, safety, as well as product marketing.


We developed two products as one set for our reporter and reading system:

1. KISSING BOXTM: GE mosquitoes kept in the box for sucking blood

2. BLUE LED BOX: a scanner box equipped with blue led for observing the green fluorescence signal.





We made a matchbox-size KISSING BOXTM with a clear acrylic sheet (as a transparent window) on the top and a cover of fine metal mesh in the bottom. The box can carry as many as 20 mosquitoes which can suck blood through the mesh.

The SCANNER can load a KISSING BOXTM inside.




The SCANNER equipped with blue LED which can excite the green fluorescence of GFP as shown here with fluorescein in a PCR tube.





You can see glowing mosquitoes sucking fluorescein through the transparent window in KISSING BOXTM.



The SCANNER BOX with KISSING BOXTM is light and portable which can be held with one hand. The operation is simple and easy-to-use without any profession instructions. Our product is suitable for point-of-care use including poor-educated and limited-resource countries.










Compared to other current methods, the KISSING BOXTM provides a novel way solving difficulties of accuracy, windows period of virus infection, measuring time and place. The KISSING BOXTM is developed for point-of-care use and affordable to the public.







Safety is more than everything. The product will bring to you with wingless GE mosquitoes either with wings cut manually or genetically modified by knocking out a wing development gene, vestigial.










GE Mosquitoes

Product Design

Product Safety

Product Catalog