Difference between revisions of "Team:Tongji China/Demonstrate"

Line 1: Line 1:
<!-- This document, originally from getmdl.io, was modified -->
+
   <div class="demo-card-wide mdl-card mdl-shadow--2dp" style="width:100%; position: relative">
 
+
               <img src="https://2017.igem.org/File:2017tongji_image_demo_2.jpg" alt="NO DESCRIPTION" style="width:100%">
<!--
+
   Material Design Lite
+
  Copyright 2015 Google Inc. All rights reserved.
+
 
+
  Licensed under the Apache License, Version 2.0 (the "License");
+
  you may not use this file except in compliance with the License.
+
  You may obtain a copy of the License at
+
 
+
      https://www.apache.org/licenses/LICENSE-2.0
+
 
+
  Unless required by applicable law or agreed to in writing, software
+
  distributed under the License is distributed on an "AS IS" BASIS,
+
  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+
  See the License for the specific language governing permissions and
+
  limitations under the License
+
-->
+
{{Tongji_China/Header}}
+
<html lang="en">
+
  <head>
+
    <meta charset="utf-8">
+
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+
    <meta name="description" content="2017 Tongji iGEM team wiki">
+
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0">
+
    <title>Tongji iGEM - InterLab</title>
+
 
+
    <script src="https://2017.igem.org/Template:Tongji_China/Javascript?action=raw&ctype=text/javascript"></script>
+
 
+
    <!-- Page styles -->
+
    <link rel="stylesheet" type="text/css" href="https://2017.igem.org/Template:Tongji_China/CSS?action=raw&ctype=text/css">
+
    <link rel="stylesheet" type="text/css" href="https://2017.igem.org/Template:Tongji_China/CSS_2?action=raw&ctype=text/css">
+
    <link rel="stylesheet" type="text/css" href="https://2017.igem.org/Template:Tongji_China/CSS_3?action=raw&ctype=text/css">
+
 
+
    <style>
+
    #view-source {
+
      position: fixed;
+
      display: block;
+
      right: 0;
+
      bottom: 0;
+
      margin-right: 40px;
+
      margin-bottom: 40px;
+
      z-index: 900;
+
    }
+
 
+
    .demo-card-wide.mdl-card {
+
      margin: auto;
+
      margin-top: 20px;
+
      align-items: center;
+
      width: 70%;
+
      border-radius:6px
+
    }
+
    .demo-card-wide > .mdl-card__title {
+
      color: #757575;
+
      align-self: center;
+
      /*height: 176px;*/
+
    }
+
    .demo-card-wide > .mdl-card__menu {
+
      color: #757575;
+
    }
+
 
+
    .mdl-card__title-text {
+
      padding-top: 20px;
+
    }
+
 
+
    .mdl-card__supporting-text {
+
      line-height: 130%;
+
    }
+
 
+
    @media only screen and (max-device-width: 1200px) {
+
      .demo-card-wide.mdl-card {
+
        width: 80%;
+
        max-width: 1500px
+
      }
+
  }
+
 
+
    @media only screen and (max-device-width: 900px) {
+
      .demo-card-wide.mdl-card {
+
        width: 90%;
+
      }
+
  }
+
 
+
    @media only screen and (max-device-width: 600px) {
+
      .demo-card-wide.mdl-card {
+
        width: 95%;
+
      }
+
  }
+
    </style>
+
 
+
    <script type="text/javascript">
+
    // Try to remove weird iGEM side menu and resize the remaining things
+
    function closeMenuDiv(){
+
      document.getElementById("sideMenu").style.display = "none";
+
      bars_box_active = false;
+
      document.getElementById('content').setAttribute("style","display:block;width:100%");
+
      document.getElementById('content').style.width='100%';
+
    }
+
    window.setTimeout(closeMenuDiv,50);
+
    window.setTimeout(closeMenuDiv,100);
+
    window.setTimeout(closeMenuDiv,500);
+
    window.setTimeout(closeMenuDiv,1000);
+
    window.setTimeout(closeMenuDiv,5000);
+
    window.setTimeout(closeMenuDiv,10000);
+
    </script>
+
 
+
  </head>
+
  <body>
+
    <div class="mdl-layout mdl-js-layout mdl-layout--fixed-header" class="main view" style="background:#f9f9f9">
+
      <!-- Header -->
+
      <div class="android-header mdl-layout__header mdl-layout__header--waterfall">
+
        <div class="mdl-layout__header-row">
+
          <span class="android-title mdl-layout-title">
+
            <div class="logo-font">Tongji iGEM</div>
+
          </span>
+
          <!-- Add spacer, to align navigation to the right in desktop -->
+
          <div class="android-header-spacer mdl-layout-spacer"></div>
+
          <!-- Navigation -->
+
          <div class="android-navigation-container">
+
            <nav class="android-navigation mdl-navigation">
+
              <!-- Links in the top right -->
+
              <a class="mdl-navigation__link mdl-typography--text-uppercase" href="https://2017.igem.org/Team:Tongji_China">Home</a>
+
              <a class="mdl-navigation__link mdl-typography--text-uppercase" href="https://2017.igem.org/Team:Tongji_China/Description">Project</a>
+
              <a class="mdl-navigation__link mdl-typography--text-uppercase" href="https://2017.igem.org/Team:Tongji_China/Team">Team</a>
+
              <a class="mdl-navigation__link mdl-typography--text-uppercase" href="https://2017.igem.org/Team:Tongji_China/Results">Results</a>
+
            </nav>
+
          </div>
+
          <span class="android-mobile-title mdl-layout-title">
+
            <div class="logo-font">Tongji iGEM</div>
+
          </span>
+
        </div>
+
      </div>
+
      <!-- Drawer -->
+
      <div class="android-drawer mdl-layout__drawer">
+
        <nav class="mdl-navigation">
+
          <!-- <span class="mdl-navigation__link" href="">Title</span> -->
+
          <a class="mdl-navigation__link" href="https://2017.igem.org/Team:Tongji_China">HOME</a>
+
          <a class="mdl-navigation__link" href="https://2017.igem.org/Team:Tongji_China/Team">Team</a>
+
          <div class="android-drawer-separator"></div>
+
       
+
          <a class="mdl-navigation__link" href="https://2017.igem.org/Team:Tongji_China/Description">Description</a>
+
          <a class="mdl-navigation__link" href="https://2017.igem.org/Team:Tongji_China/Design">Design</a>
+
          <a class="mdl-navigation__link" href="https://2017.igem.org/Team:Tongji_China/Experiments">Experiment</a>
+
          <a class="mdl-navigation__link" href="https://2017.igem.org/Team:Tongji_China/Model">Model</a>
+
          <a class="mdl-navigation__link" href="https://2017.igem.org/Team:Tongji_China/Demonstrate">Demonstrate</a>
+
          <a class="mdl-navigation__link" href="https://2017.igem.org/Team:Tongji_China/Results">Results</a>
+
          <a class="mdl-navigation__link" href="https://2017.igem.org/Team:Tongji_China/Notebook">Notebook</a>
+
          <a class="mdl-navigation__link" href="https://2017.igem.org/Team:Tongji_China/Improve">Improve</a>
+
          <div class="android-drawer-separator"></div>
+
          <a class="mdl-navigation__link" href="https://2017.igem.org/Team:Tongji_China/Parts">Parts</a>
+
          <div class="android-drawer-separator"></div>
+
          <a class="mdl-navigation__link" href="https://2017.igem.org/Team:Tongji_China/Collaborations">Collaborations</a>
+
          <a class="mdl-navigation__link" href="https://2017.igem.org/Team:Tongji_China/Human_Practices">Human Practices</a>
+
          <a class="mdl-navigation__link" href="https://2017.igem.org/Team:Tongji_China/HP/Silver">HP Silver</a>
+
          <a class="mdl-navigation__link" href="https://2017.igem.org/Team:Tongji_China/HP/Gold_Integrated">HP Gold</a>
+
          <a class="mdl-navigation__link" href="https://2017.igem.org/Team:Tongji_China/Engagement">Education & Public Engagement</a>
+
          <a class="mdl-navigation__link" href="https://2017.igem.org/Team:Tongji_China/InterLab">InterLab</a>
+
          <!-- <a class="mdl-navigation__link" href="https://2017.igem.org/Team:Tongji_China/Contribution">Contribution</a> -->
+
          <a class="mdl-navigation__link" href="https://2017.igem.org/Team:Tongji_China/Safety">Safety</a>
+
          <a class="mdl-navigation__link" href="https://2017.igem.org/Team:Tongji_China/Attributions">Attributions</a>
+
          <div class="android-drawer-separator"></div>
+
          <div class="android-drawer-separator"></div>
+
        </nav>
+
      </div>
+
      <a name="top"></a>
+
 
+
      <!-- HERE STARTS THE PAGE -->
+
      <div class="android-content mdl-layout__content">
+
        <a name="top"></a>
+
        <!-- Title and Subtitle -->
+
        <div class="mdl-typography--text-center" style="margin-bottom:20%">
+
          <div class="logo-font android-slogan" style="color:#388E3C;">Demonstrate</div>
+
          <div class="logo-font android-sub-slogan" style="color:#757575;">
+
            contiune......<br>
+
            <i class="material-icons">expand_more</i>
+
          </div>
+
        </div>
+
 
+
        <!-- Situation -->
+
        <div class="demo-card-wide mdl-card mdl-shadow--2dp">
+
          <div class="mdl-card__title" style="text-align:center">
+
            <h4 class="mdl-card__title-text" style="font-size: 250%; color:#5a5a5a">Situation</h4>
+
          </div>
+
          <div class="mdl-card__supporting-text" style="font-size: 115%">
+
            Our project aims to control the population of Diptera insects such as mosquitos, which do harm to human health. Among all the Diptera insects, Drosophila melanogaster is the only model creature, which has good methods to culture and operate, so we choose it as chassis to test our design in our project.<br><br>
+
 
+
            It will be great for us to get accurate changes of the whole population in the natural environment to test our system. But in fact, it is almost impossible for us to observe a small group in a specific area due to the lack of equipment and skills. Although Drosophila melanogaster has been regarded as a model creature for a long history, we only find a little published data about population changes of it. <br><br>
+
            Therefore, building the population growth model can help determine the effect of our system applying to natural environment.<br><br>
+
 
+
          </div>
+
    </div> 
+
 
+
        <!-- Model theory -->
+
        <div class="demo-card-wide mdl-card mdl-shadow--2dp">
+
          <div class="mdl-card__title" style="text-align:center">
+
            <h4 class="mdl-card__title-text" style="font-size: 250%; color:#5a5a5a">Model theory</h4>
+
          </div>
+
          <div class="mdl-card__supporting-text" style="font-size: 115%">
+
            In 1945, Leslie P H. introduced a mathematical method to predict the age structure and number of population with time by using the age structure of an initial population. Here we use Leslie matrix to make our model better. <br><br>
+
            According to the physiological characteristics of each individual, the maximum life age is divided into M groups, and then the distribution of age at different time will be discussed. The time is also dispersed into t= 0, 1, 2,... The interval is the same as that of the age group. T= 0 corresponds to the initial time.<br><br>
+
          Suppose, at the beginning (t= 0), the number of individuals in the I age group was Ni (0), i= 1, 2,... M. so the vector is: <br><br>
+
 
+
            a formula should be here <br><br>
+
         
+
            The reproductive rate of the I age group is f i (0) ,i= 1, 2,... M; survival rate was S I (> 0), i= 1, 2,... m - 1. Between two periods, there is an iterative relationship between the number of individuals in each age group ni:<br><br>
+
 
+
            a formula should be here <br><br>
+
 
+
          Make the matrix:<br><br>
+
 
+
            a formula should be here <br><br>
+
 
+
          Here is a part of result shows the differences between the proportions of female flies that can produce normal offspring in two different conditions are shown in Figure 1. <br><br>
+
 
+
            <div class="demo-card-wide mdl-card mdl-shadow--2dp" style="width:100%; position: relative">
+
               <img src="https://2017.igem.org/File:2017tongji_image_demo_1.jpg" alt="NO DESCRIPTION" style="width:100%">
+
 
               <div class="mdl-card__supporting-text" style="font-size: 115%; position: absolute; top:0px; left:0px; color:#0F0F0F">
 
               <div class="mdl-card__supporting-text" style="font-size: 115%; position: absolute; top:0px; left:0px; color:#0F0F0F">
 
                 <!-- white:#f0f0f0 or black:#0F0F0F -->
 
                 <!-- white:#f0f0f0 or black:#0F0F0F -->
 
                 <!-- NO DESCRIPTION -->
 
                 <!-- NO DESCRIPTION -->
 
               </div>
 
               </div>
            </div>
+
            See more details<br><br>
 +
 
 
           </div>
 
           </div>
          <div class="android-drawer-separator"></div>
 
        </div>
 
 
        <div class="demo-card-wide mdl-card mdl-shadow--2dp">
 
        <div class="mdl-card__title" style="text-align:center">
 
        </div>
 
          <div class="mdl-card__supporting-text" style="font-size: 115%">
 
        It can be seen that in the case of the small mating rate, the inhibition effect of releasing sterile male flies with male-male courtship is more obvious to reducing population quantity, which is consistent with the purpose of our modeling.<br><br>
 
 
          Here also shows the result (Figure 2) when the number of modified fruit flies was five times as large as the wild flies and the mating rate is 0.4, the effect on the final population in 15 days. (The yellow line represents the sterile male flies with male-male courtship, and the purple line represents the sterile male flies)<br><br>
 
        </div>
 
      </div>
 

Revision as of 17:20, 27 October 2017

             <img src="https://2017.igem.org/File:2017tongji_image_demo_2.jpg" alt="NO DESCRIPTION" style="width:100%">
            See more details