Difference between revisions of "Team:SZU-China/HP Demo"

 
(14 intermediate revisions by 2 users not shown)
Line 5: Line 5:
  
 
</head>
 
</head>
 +
 +
 +
  
  
  
 
<style>
 
<style>
−
span{
+
#HQ_page p{
−
padding-top: 5%;
+
color: #fff !important;
 +
text-align: center !important;
 
}
 
}
 
</style>
 
</style>
 +
 
<body>
 
<body>
−
+
 
−
<div class="row"></div>
+
 
<div class="text-center">
 
<div class="text-center">
−
<h1 style="color: #3880A0;">Human Practices</h1>
+
    <h1 style="color: #3880A0;">Integrated HP</h1>
 +
    <div style="width: 80%;margin: 20px auto;">
 +
        <span style="font-size: 20px;">
 +
            This year, we have completed different HP based on the needs of our projects at different times to make our project move forward. The following below is a summary of the HP we did at different times in the project. For detailed information, you can click on the navigation bar at the top or the title above the clock below
 +
        </span>
 +
    </div>
 
</div>
 
</div>
 
<div class="row">
 
<div class="row">
−
<div class="col-lg-4 col-md-10  offset-1">
+
    <div class="col-lg-4 col-md-10  offset-1">
−
<div class="row"></div>
+
        <div class="row"></div>
−
<div class="text-center" style="overflow: hidden;width: 100%;height: 500px;padding-top: 20px" class="hh">
+
        <div style="height: 40px;width: 100%;margin: 0 auto;font-size: 25px;text-align: center">
−
<div style="width: 100%;height: 400px;margin: 0 auto">
+
            <span class="kuang_title h1" id="title1"><a onclick="event.stopPropagation(); console.log(1)" style="color: #3880A0;" href="https://2018.igem.org/Team:SZU-China/Applet">Applet<span style="font-size: 18px;text-decoration: underline">(click here to see detail)</span></a></span>
−
<div style="height: 400px;width: 400px;position:relative;margin: 0 auto;float: left" class="">
+
            <span class="kuang_title h1" id="title2" style="display: none"><a onclick="event.stopPropagation(); console.log(1)" style="color: #3880A0;" href="https://2018.igem.org/Team:SZU-China/MeetUp">MeetUp<span style="font-size: 18px;text-decoration: underline">(click here to see detail)</span></a></span>
−
<style>
+
            <span class="kuang_title h1" id="title3" style="display: none"><a onclick="event.stopPropagation(); console.log(1)" style="color: #3880A0;" href="https://2018.igem.org/Team:SZU-China/Investigation">Investigation<span style="font-size: 18px;text-decoration: underline">(click here to see detail)</span></a></span>
−
.box{
+
            <span class="kuang_title h1" id="title4" style="display: none"><a onclick="event.stopPropagation(); console.log(1)" style="color: #3880A0;" href="https://2018.igem.org/Team:SZU-China/Simulation">Simulation<span style="font-size: 18px;text-decoration: underline">(click here to see detail)</span></a></span>
−
background-color: #3880A0;
+
            <span class="kuang_title h1" id="title5" style="display: none"><a onclick="event.stopPropagation(); console.log(1)" style="color: #3880A0;" href="https://2018.igem.org/Team:SZU-China/Public_Engagement">Education &#38; public engagement<span style="font-size: 18px;text-decoration: underline">(click here to see detail)</span></a></span>
−
position: absolute;
+
            <span class="kuang_title h1" id="title6" style="display: none"><a onclick="event.stopPropagation(); console.log(1)" style="color: #3880A0;" href="https://2018.igem.org/Team:SZU-China/Prospect">Prospect<span style="font-size: 18px;text-decoration: underline">(click here to see detail)</span></a></span>
−
display: inline-block;
+
 
−
border-radius: 50%
+
        </div>
−
}
+
        <div class="text-center" style="overflow: hidden;width: 100%;height: 500px;padding-top: 50px" class="hh">
−
.dot{
+
            <div style="width: 100%;height: 400px;margin: 0 auto">
−
height: 10px;
+
                <div style="height: 400px;width: 400px;position:relative;margin: 0 auto;float: left" class="">
−
width: 10px;
+
                    <style>
−
margin-left: -5px;
+
                        .box{
−
margin-top: -5px;
+
                            background-color: #3880A0;
−
}
+
                            position: absolute;
−
.big_dot{
+
                            display: inline-block;
−
height: 25px;width: 25px;
+
                            border-radius: 50%
−
margin-left: -10px;
+
                        }
−
margin-top: -10px;
+
                        .dot{
−
}
+
                            height: 10px;
−
.small_dot{
+
                            width: 10px;
−
height: 5px;width: 5px;
+
                            margin-left: -5px;
−
margin-left: -2.5px;
+
                            margin-top: -5px;
−
margin-top: -2.5px;
+
                        }
−
}
+
                        .big_dot{
−
</style>
+
                            height: 25px;width: 25px;
−
<div class="box dot dot_btn" data-id="4"></div>
+
                            margin-left: -10px;
 +
                            margin-top: -10px;
 +
                        }
 +
                        .small_dot{
 +
                            height: 5px;width: 5px;
 +
                            margin-left: -2.5px;
 +
                            margin-top: -2.5px;
 +
                        }
 +
                    </style>
 +
                    <div class="box dot dot_btn" data-id="4"></div>
 
                     <div class="box small_dot"></div>
 
                     <div class="box small_dot"></div>
 
                     <div class="box small_dot"></div>
 
                     <div class="box small_dot"></div>
 
                     <div class="box small_dot"></div>
 
                     <div class="box small_dot"></div>
 
                     <div class="box small_dot"></div>
 
                     <div class="box small_dot"></div>
−
<div class="box dot dot_btn" data-id="3"></div>
+
                    <div class="box dot dot_btn" data-id="3"></div>
 
                     <div class="box small_dot"></div>
 
                     <div class="box small_dot"></div>
 
                     <div class="box small_dot"></div>
 
                     <div class="box small_dot"></div>
 
                     <div class="box small_dot"></div>
 
                     <div class="box small_dot"></div>
 
                     <div class="box small_dot"></div>
 
                     <div class="box small_dot"></div>
−
<div class="box dot dot_btn" data-id="2"></div>
+
                    <div class="box dot dot_btn" data-id="2"></div>
 
                     <div class="box small_dot" id="dot_s4"></div>
 
                     <div class="box small_dot" id="dot_s4"></div>
 
                     <div class="box small_dot" id="dot_s3"></div>
 
                     <div class="box small_dot" id="dot_s3"></div>
 
                     <div class="box small_dot" id="dot_s2"></div>
 
                     <div class="box small_dot" id="dot_s2"></div>
 
                     <div class="box small_dot" id="dot_s1"></div>
 
                     <div class="box small_dot" id="dot_s1"></div>
−
<div class="box dot big_dot dot_btn" data-id="1"></div>
+
                    <div class="box dot big_dot dot_btn" data-id="1"></div>
 
                     <div class="box small_dot"></div>
 
                     <div class="box small_dot"></div>
 
                     <div class="box small_dot"></div>
 
                     <div class="box small_dot"></div>
 
                     <div class="box small_dot"></div>
 
                     <div class="box small_dot"></div>
 
                     <div class="box small_dot"></div>
 
                     <div class="box small_dot"></div>
−
<div class="box dot dot_btn" data-id="6"></div>
+
                    <div class="box dot dot_btn" data-id="6"></div>
 
                     <div class="box small_dot"></div>
 
                     <div class="box small_dot"></div>
 
                     <div class="box small_dot"></div>
 
                     <div class="box small_dot"></div>
 
                     <div class="box small_dot"></div>
 
                     <div class="box small_dot"></div>
 
                     <div class="box small_dot"></div>
 
                     <div class="box small_dot"></div>
−
<div class="box dot dot_btn" data-id="5"></div>
+
                    <div class="box dot dot_btn" data-id="5"></div>
 
                     <div class="box small_dot"></div>
 
                     <div class="box small_dot"></div>
 
                     <div class="box small_dot"></div>
 
                     <div class="box small_dot"></div>
 
                     <div class="box small_dot"></div>
 
                     <div class="box small_dot"></div>
 
                     <div class="box small_dot"></div>
 
                     <div class="box small_dot"></div>
−
<img src="https://static.igem.org/mediawiki/2018/0/00/T--SZU-China--HP-gif1.gif" id="gif_bg1" class="gif_bg" width="550px" height="400px" style="border-radius: 50%;margin-left: -40px" />
+
                    <img src="https://static.igem.org/mediawiki/2018/0/00/T--SZU-China--HP-gif1.gif" id="gif_bg1" class="gif_bg" width="550px" height="400px" style="border-radius: 50%;margin-left: -40px" />
−
                <img src="https://static.igem.org/mediawiki/2018/2/26/T--SZU-China--HP-gif2.gif" id="gif_bg2" class="gif_bg" width="550px" height="400px" style="border-radius: 50%;margin-left: -40px;display: none" />
+
                    <img src="https://static.igem.org/mediawiki/2018/2/26/T--SZU-China--HP-gif2.gif" id="gif_bg2" class="gif_bg" width="550px" height="400px" style="border-radius: 50%;margin-left: -40px;display: none" />
−
                <img src="https://static.igem.org/mediawiki/2018/8/8c/T--SZU-China--HP-gif3.gif" id="gif_bg3" class="gif_bg" width="550px" height="400px" style="border-radius: 50%;margin-left: -40px;display: none" />
+
                    <img src="https://static.igem.org/mediawiki/2018/8/8c/T--SZU-China--HP-gif3.gif" id="gif_bg3" class="gif_bg" width="550px" height="400px" style="border-radius: 50%;margin-left: -40px;display: none" />
−
                <img src="https://static.igem.org/mediawiki/2018/a/ae/T--SZU-China--HP-gif4.gif" id="gif_bg4" class="gif_bg" width="550px" height="400px" style="border-radius: 50%;margin-left: -40px;display: none" />
+
                    <img src="https://static.igem.org/mediawiki/2018/a/ae/T--SZU-China--HP-gif4.gif" id="gif_bg4" class="gif_bg" width="550px" height="400px" style="border-radius: 50%;margin-left: -40px;display: none" />
−
                <img src="https://static.igem.org/mediawiki/2018/0/03/T--SZU-China--HP-gif5.gif" id="gif_bg5" class="gif_bg" width="550px" height="400px" style="border-radius: 50%;margin-left: -40px;display: none" />
+
                    <img src="https://static.igem.org/mediawiki/2018/0/03/T--SZU-China--HP-gif5.gif" id="gif_bg5" class="gif_bg" width="550px" height="400px" style="border-radius: 50%;margin-left: -40px;display: none" />
−
                <img src="https://static.igem.org/mediawiki/2018/f/fc/T--SZU-China--HP-gif6.gif" id="gif_bg6" class="gif_bg" width="550px" height="400px" style="border-radius: 50%;margin-left: -40px;display: none" />
+
                    <img src="https://static.igem.org/mediawiki/2018/f/fc/T--SZU-China--HP-gif6.gif" id="gif_bg6" class="gif_bg" width="550px" height="400px" style="border-radius: 50%;margin-left: -40px;display: none" />
−
<script>
+
                    <script>
−
///新增
+
                        ///新增
  
−
      $('a').html().click(function () {console.log("111"); });
+
 
−
         
+
                        var i=1;
−
                    var i=1;
+
                        // $(".row").click(function () {
−
                    $(".row").click(function () {
+
                        //
−
                   
+
                        //
−
                        //console.log("111");
+
                         //    $("#gif_bg"+i).hide();
−
                         $("#gif_bg"+i).hide();
+
                         //    $("#content"+i).hide();
−
                         $("#content"+i).hide();
+
                        //
−
                   
+
                         //    i = (i+1);
−
                         i = (i+1);
+
                         //    if(i==7) i=1;
−
                         if(i==7) i=1;
+
                         //    $("#gif_bg"+i).show();
−
                         $("#gif_bg"+i).show();
+
                        //      $("#content"+i).show();
−
                        $("#content"+i).show();
+
                         //    if(i==1)
−
                         if(i==1)
+
                         //    $("#gif_bg"+i).attr("src","https://static.igem.org/mediawiki/2018/0/00/T--SZU-China--HP-gif1.gif");
−
                         $("#gif_bg"+i).attr("src","https://static.igem.org/mediawiki/2018/0/00/T--SZU-China--HP-gif1.gif");
+
                         //    if(i==2)
−
                         if(i==2)
+
                         //    $("#gif_bg"+i).attr("src","https://static.igem.org/mediawiki/2018/2/26/T--SZU-China--HP-gif2.gif");
−
                         $("#gif_bg"+i).attr("src","https://static.igem.org/mediawiki/2018/2/26/T--SZU-China--HP-gif2.gif");
+
                         //    if(i==3)
−
                         if(i==3)
+
                         //    $("#gif_bg"+i).attr("src","https://static.igem.org/mediawiki/2018/8/8c/T--SZU-China--HP-gif3.gif");
−
                         $("#gif_bg"+i).attr("src","https://static.igem.org/mediawiki/2018/8/8c/T--SZU-China--HP-gif3.gif");
+
                         //    if(i==4)
−
                         if(i==4)
+
                         //    $("#gif_bg"+i).attr("src","https://static.igem.org/mediawiki/2018/a/ae/T--SZU-China--HP-gif4.gif");
−
                         $("#gif_bg"+i).attr("src","https://static.igem.org/mediawiki/2018/a/ae/T--SZU-China--HP-gif4.gif");
+
                         //    if(i==5)
−
                         if(i==5)
+
                         //    $("#gif_bg"+i).attr("src","https://static.igem.org/mediawiki/2018/0/03/T--SZU-China--HP-gif5.gif");
−
                         $("#gif_bg"+i).attr("src","https://static.igem.org/mediawiki/2018/0/03/T--SZU-China--HP-gif5.gif");
+
                         //    if(i==6)
−
                         if(i==6)
+
                         //    $("#gif_bg"+i).attr("src","https://static.igem.org/mediawiki/2018/f/fc/T--SZU-China--HP-gif6.gif");
−
                         $("#gif_bg"+i).attr("src","https://static.igem.org/mediawiki/2018/f/fc/T--SZU-China--HP-gif6.gif");
+
                        // });
 +
                        ///新增
 +
 
 +
                        $(function(){
 +
                            //中心点横坐标
 +
                            var dotLeft = 200;
 +
                            //中心点纵坐标
 +
                            var dotTop = 200;
 +
                            //起始角度
 +
                            var stard = 0;
 +
                            //半径
 +
                            var radius = 200;
 +
                            //每一个BOX对应的角度;
 +
                            var avd = 360/$(".box").length;
 +
                            //每一个BOX对应的弧度;
 +
                            var ahd = avd*Math.PI/180;
 +
                            $(".box").each(function(index, element){
 +
                                $(this).css({"left":Math.sin((ahd*index))*radius+dotLeft,"top":Math.cos((ahd*index))*radius+dotTop});
 +
                            });
 +
                        })
 +
                    </script>
 +
                </div>
 +
 
 +
 
 +
            </div>
 +
        </div>
 +
        <div style="width: 100%">
 +
            <img src="https://static.igem.org/mediawiki/2018/e/ee/T--SZU-China--Right.png" style="width: 40px;height: 40px;float: right;margin-top: -74px;" onclick="tonext()" />
 +
            <script>
 +
                var now = 1;
 +
                function tonext() {
 +
                    if(now == 6){
 +
                        now = 1;
 +
                    }else{
 +
                        now++;
 +
                    }
 +
                    change();
 +
                }
 +
                function change(){
 +
                    $(".content1").each(function () {
 +
                        $(this).hide();
 
                     });
 
                     });
−
                    ///新增
+
                     $(".gif_bg").each(function () {
−
                     $(".dot_btn").click(function () {
+
                         $(this).hide();
−
                        $(".content1").each(function () {
+
−
                            $(this).hide();
+
−
                        });
+
−
                         $(".gif_bg").each(function () {
+
−
                            $(this).hide();
+
−
                        });
+
−
                        $("#gif_bg" + $(this).data("id")).show();
+
−
                        $("#content" + $(this).data("id")).show();
+
 
                     });
 
                     });
−
$(".dot").click(function () {
+
                    $(".kuang_title").each(function () {
−
$(".dot").each(function () {
+
                         $(this).hide();
−
if($(this).hasClass("big_dot")){
+
−
                                $(this).removeClass("big_dot");
+
−
}
+
−
                        });
+
−
                         $(this).addClass("big_dot");
+
 
                     });
 
                     });
−
                     $(function(){
+
                     $("#gif_bg" + now).show();
−
                        //中心点横坐标
+
                    $("#content" + now).show();
−
                        var dotLeft = 200;
+
                    $("#title" + now).show();
−
                        //中心点纵坐标
+
                }
−
                        var dotTop = 200;
+
 
−
                        //起始角度
+
                $(".dot_btn").click(function () {
−
                        var stard = 0;
+
                    $(".content1").each(function () {
−
                         //半径
+
                         $(this).hide();
−
                        var radius = 200;
+
                    });
−
                        //每一个BOX对应的角度;
+
                    $(".gif_bg").each(function () {
−
                        var avd = 360/$(".box").length;
+
                         $(this).hide();
−
                         //每一个BOX对应的弧度;
+
                    });
−
                        var ahd = avd*Math.PI/180;
+
                    $(".kuang_title").each(function () {
−
                        $(".box").each(function(index, element){
+
                        $(this).hide();
−
                            $(this).css({"left":Math.sin((ahd*index))*radius+dotLeft,"top":Math.cos((ahd*index))*radius+dotTop});
+
                    });
−
                         });
+
                    $("#gif_bg" + $(this).data("id")).show();
−
                     })
+
                    $("#content" + $(this).data("id")).show();
−
</script>
+
                    $("#title" + $(this).data("id")).show();
−
</div>
+
                    now = $(this).data("id");
−
              
+
                });
−
           
+
 
−
</div>
+
 
−
</div>
+
                $(".dot").click(function () {
−
</div>
+
                    $(".dot").each(function () {
−
+
                         if($(this).hasClass("big_dot")){
−
+
                            $(this).removeClass("big_dot");
−
+
                        }
−
<div class="col-lg-5 col-md-10 text-center" style="padding-right: -200px !important;">
+
                     });
−
 
+
                    $(this).addClass("big_dot");
−
             
+
                });
−
<div style="height:400px;float:right;z-index: 100;position: relative;padding-left: 30px; color: white; font-size: 20px;" id="content1" class="content1">
+
             </script>
−
                <div class="temp" style="height: 40px;width: 100%;margin: 0 auto;font-size: 25px;text-align: center">
+
        </div>
−
                    <span class="kuang_title h2" id="title1"><a style="color: #3880A0;" href="https://2018.igem.org/Team:SZU-China/Applet">Applet</a></span>
+
    </div>
−
                </div>
+
 
−
                <div class="card h-50 align-middle" style="background-color: #3880A0;width: 100%; padding-top: 10px;margin-top: 50px;">
+
 
−
                    <span style="padding-top: 5%;">At the beginning of 2018 SZU-China team, we had a brainstorming to decide our topic. We carried out three topics which were all close to daily lives and we didn’t know which to choose.</span>
+
 
−
                </div>
+
    <div class="col-lg-5 col-md-10 text-center" style="padding-right: -200px !important;">
−
                <div class="card h-50" style="background-color: #3880A0;width: 100%;padding-top: 10px;margin-top: 20px;">
+
        <div style="height:400px;float:right;z-index: 100;position: relative;padding-left: 30px; color: white; font-size: 20px;" id="content1" class="content1">
−
                    <span>To strengthen the communication between iGEM and the public, we designed an applet named biocompany and post our ideas there. It’s a platform for the public to engage in the iGEM.</span>
+
 
−
                </div>
+
            <div class="card h-50 text-center  align-middle" style="background-color: #3880A0;width: 100%; padding-top: 10px;margin-top: 10px;">
−
                <div class="card h-50" style="background-color: #3880A0;width: 100%;padding-top: 10px;margin-top: 20px;">
+
            <p>Trouble we meet in project</p>
−
                    <span>With the comments that people gave in Biocompany, we finally decided our project, cockroach terminator. For more details about our applet, please read our applet part.</span>
+
                <span>At the beginning of 2018 SZU-China team, we had a brainstorming to decide our topic. We carried out three topics which were all close to daily lives and we didn’t know which to choose.</span>
−
                </div>
+
 
             </div>
 
             </div>
−
           
+
             <div class="card h-50 text-center " style="background-color: #3880A0;width: 100%;padding-top: 10px;margin-top: 20px;">
−
             <div style="height:400px;float:right;z-index: 100;position: relative;padding-left: 30px;display: none; color: white; font-size: 20px;" id="content2" class="content1">
+
            <p>What we did for project</p>
−
                <div  class="temp" style="height: 40px;width: 100%;margin: 0 auto;font-size: 25px;text-align: center">
+
                 <span>To strengthen the communication between iGEM and the public, we designed an applet named biocompany and post our ideas there. It’s a platform for the public to engage in the iGEM.</span>
−
                    <span class="kuang_title h2" id="title2"><a style="color: #3880A0;" href="https://2018.igem.org/Team:SZU-China/MeetUp">Meetup</a></span>
+
−
                </div>
+
−
                <div class="card h-50" style="background-color: #3880A0;width: 100%;height: 100px;padding-top: 10px;margin-top: 20px">
+
−
                    <span>When we were designing our experiment, we still knew little about iGEM and many aspects of our project needed improved. We also wanted know what other teams were going on.</span>
+
−
                 </div>
+
−
                <div class="card h-50" style="background-color: #3880A0;width: 100%;height: 100px;padding-top: 10px;margin-top: 20px">
+
−
                    <span>To gather suggestions and seek cooperation opportunities from each team, we held an iGEM South China Regional Conference. To take the essence from other teams, we also attended 5th CCIC and IGEM EURASIAN MEETUP.</span>
+
−
                </div>
+
−
                <div class="card h-50" style="background-color: #3880A0;width: 100%;height: 100px;padding-top: 10px;margin-top: 20px">
+
−
                    <span>We gained a lot from the meeting, we found our weak point, the safety problem and we made lots of collaboration through three meetings which made our project comprehensive.</span>
+
−
                </div>
+
 
             </div>
 
             </div>
−
           
+
             <div class="card h-50 text-center " style="background-color: #3880A0;width: 100%;padding-top: 10px;margin-top: 20px;">
−
             <div style="height:400px;float:right;z-index: 100;position: relative;padding-left: 30px;display: none; color: white; font-size: 20px;" id="content3" class="content1">
+
            <p>How would the project be</p>
−
                <div class="temp" style="height: 40px;width: 100%;margin: 0 auto;font-size: 25px;text-align: center">
+
                 <span>With the comments that people gave in Biocompany, we finally decided our project, cockroach terminator. For more details about our applet, please read our applet part.</span>
−
                    <span class="kuang_title h2" id="title3"><a style="color: #3880A0;" href="https://2018.igem.org/Team:SZU-China/Investigation">Investigation</a></span>
+
−
                </div>
+
−
                <div class="card h-50" style="background-color: #3880A0;width: 100%;height: 100px;padding-top: 10px;margin-top: 20px">
+
−
                    <span>We had already designed our experiment, and designed an initial cockroach box. But we didn’t know whether it could work well in the environment.</span>
+
−
                 </div>
+
−
                <div class="card h-50" style="background-color: #3880A0;width: 100%;height: 100px;padding-top: 10px;margin-top: 20px">
+
−
                    <span>Therefore, we first went to our canteen to make an inspection about the environment cockroaches stay most. We also went to CDC to get to know living habit of cockroach. Then we asked Dr. Wang from Chongqing University for more suggestions on our box design.</span>
+
−
                </div>
+
−
                <div class="card h-50" style="background-color: #3880A0;width: 100%;height: 100px;padding-top: 10px;margin-top: 20px">
+
−
                    <span>Considering three investigations and comments from the applet, we finally designed the  second version of our cockroaches box which seemed more reasonable than the first one.</span>
+
−
                </div>
+
 
             </div>
 
             </div>
−
           
+
        </div>
−
            <div style="height:400px;float:right;z-index: 100;position: relative;padding-left: 30px;display: none; color: white; font-size: 20px;" id="content4" class="content1">
+
 
−
                <div class="temp" style="height: 40px;width: 100%;margin: 0 auto;font-size: 25px;text-align: center">
+
        <div style="height:400px;float:right;z-index: 100;position: relative;padding-left: 30px;display: none; color: white; font-size: 20px;" id="content2" class="content1">
−
                    <span class="kuang_title h2" id="title4"><a style="color: #3880A0;" href="https://2018.igem.org/Team:SZU-China/Simulation">Simulation</a></span>
+
 
−
                </div>
+
            <div class="card h-50 text-center " style="background-color: #3880A0;width: 100%;height: 100px;padding-top: 10px;margin-top: 10px">
−
                <div class="card h-50" style="background-color: #3880A0;width: 100%;height: 100px;padding-top: 10px;margin-top: 20px">
+
                <p>Trouble we meet in project</p>
−
                    <span>Since we designed new box, and changed a new prescription, we were eager to know how it worked. Additionally, we heard that some methods of killing cockroaches may affect the neighbor. We also required some data for our modeling.</span>
+
                 <span>When we were designing our experiment, we still knew little about iGEM and many aspects of our project needed improved. We also wanted know what other teams were going on.</span>
−
                 </div>
+
−
                <div class="card h-50" style="background-color: #3880A0;width: 100%;height: 100px;padding-top: 10px;margin-top: 20px">
+
−
                    <span>To achieve our goal, we made a simulation about consequent of killing cockroaches with different ways like cockroach chalks, and our box with wild spores. We calculated and compared the migration rate and mortality of each product.</span>
+
−
                </div>
+
−
                <div class="card h-50" style="background-color: #3880A0;width: 100%;height: 100px;padding-top: 10px;margin-top: 20px">
+
−
                    <span>Our modeling can ran smoothly with our simulation which provided lots of data for it. Analyzing the data, we can give a guidance to the public to choose a better way to kill cockroach.</span>
+
−
                </div>
+
 
             </div>
 
             </div>
−
           
+
             <div class="card h-50 text-center " style="background-color: #3880A0;width: 100%;height: 100px;padding-top: 10px;margin-top: 20px">
−
             <div style="height:400px;float:right;z-index: 100;position: relative;padding-left: 30px;display: none; color: white; font-size: 20px;" id="content5" class="content1">
+
                <p>What we did for project</p>
−
                <div class="temp" style="height: 40px;width: 100%;margin: 0 auto;font-size: 25px;text-align: center">
+
                 <span>To gather suggestions and seek cooperation opportunities from each team, we held an iGEM South China Regional Conference. To take the essence from other teams, we also attended 5th CCIC and IGEM EURASIAN MEETUP.</span>
−
                    <span class="kuang_title h2" id="title5"><a style="color: #3880A0;" href="https://2018.igem.org/Team:SZU-China/Public_Engagement">Education &#38; public engagement</a></span>
+
−
                </div>
+
−
                <div class="card h-50" style="background-color: #3880A0;width: 100%;height: 100px;padding-top: 10px;margin-top: 20px">
+
−
                    <span>Now our box has been tested and we had detailed data about different ways to kill cockroach. We wanted to make an attribution to the society and test our boxes at the same time.</span>
+
−
                 </div>
+
−
                <div class="card h-50" style="background-color: #3880A0;width: 100%;height: 100px;padding-top: 10px;margin-top: 20px">
+
−
                    <span>Therefore, we use our applet to make lots of communication of the public. We post our simulation result and told them a better way to kill cockroach. A teacher invited us to give a popularization after watching our project. Moreover, we gave a post showing that we hoped to distribute our boxes and finally went to Hunan to help them kill the local cockroaches.</span>
+
−
                </div>
+
−
                <div class="card h-50" style="background-color: #3880A0;width: 100%;height: 100px;padding-top: 10px;margin-top: 20px">
+
−
                    <span>With this HP, we had a closer communication with the public online and offline. Besides, we found some disadvantages of our boxes used in reality, and we redesigned it again after villagers’ feedback.</span>
+
−
                </div>
+
 
             </div>
 
             </div>
−
           
+
             <div class="card h-50 text-center " style="background-color: #3880A0;width: 100%;height: 100px;padding-top: 10px;margin-top: 20px">
−
             <div style="height:400px;float:right;z-index: 100;position: relative;padding-left: 30px;display: none; color: white; font-size: 20px;" id="content6" class="content1">
+
                 <p>How would the project be</p>
−
                <div class="temp" style="height: 40px;width: 100%;margin: 0 auto;font-size: 25px;text-align: center">
+
                 <span>We gained a lot from the meeting, we found our weak point, the safety problem and we made lots of collaboration through three meetings which made our project comprehensive.</span>
−
                    <span class="kuang_title h2" id="title6"><a style="color: #3880A0;" href="https://2018.igem.org/Team:SZU-China/Prospect">Prospect</a></span>
+
−
                </div>
+
−
                <div class="card h-50" style="background-color: #3880A0;width: 100%;height: 100px;padding-top: 10px;margin-top: 20px">
+
−
                    <span>We have finished our experiment and cockroach box design named Green Ground finally. </span>
+
−
                 </div>
+
−
                <div class="card h-50" style="background-color: #3880A0;width: 100%;height: 100px;padding-top: 10px;margin-top: 20px">
+
−
                    <span>We wanted to do more about our project, the iGEM, the public as well.</span>
+
−
                 </div>
+
−
                <div class="card h-50" style="background-color: #3880A0;width: 100%;height: 100px;padding-top: 10px;margin-top: 20px">
+
−
                    <span>We are now applying for a patent for Green Ground, about to send our product to quality inspection to make in come true. More importantly, we want to use our applet to do more education and public engagement for iGEM and syntenic biology.</span>
+
−
                </div>
+
 
             </div>
 
             </div>
−
              
+
        </div>
−
              
+
 
−
</div>
+
        <div style="height:400px;float:right;z-index: 100;position: relative;padding-left: 30px;display: none; color: white; font-size: 20px;" id="content3" class="content1">
 +
 
 +
             <div class="card h-50 text-center " style="background-color: #3880A0;width: 100%;height: 100px;padding-top: 10px;margin-top: 10px">
 +
                <p>Trouble we meet in project</p>
 +
                <span>We had already designed our experiment, and designed an initial cockroach box. But we didn’t know whether it could work well in the environment.</span>
 +
             </div>
 +
            <div class="card h-50 text-center " style="background-color: #3880A0;width: 100%;height: 100px;padding-top: 10px;margin-top: 20px">
 +
                <p>What we did for project</p>
 +
                <span>Therefore, we first went to our canteen to make an inspection about the environment cockroaches stay most. We also went to CDC to get to know living habit of cockroach. Then we asked Dr. Wang from Chongqing University for more suggestions on our box design.</span>
 +
            </div>
 +
            <div class="card h-50 text-center " style="background-color: #3880A0;width: 100%;height: 100px;padding-top: 10px;margin-top: 20px">
 +
                <p>How would the project be</p>
 +
                <span>Considering three investigations and comments from the applet, we finally designed the  second version of our cockroaches box which seemed more reasonable than the first one.</span>
 +
            </div>
 +
        </div>
 +
 
 +
        <div style="height:400px;float:right;z-index: 100;position: relative;padding-left: 30px;display: none; color: white; font-size: 20px;" id="content4" class="content1">
 +
            <div class="card h-50 text-center " style="background-color: #3880A0;width: 100%;height: 100px;padding-top: 10px;margin-top: 10px">
 +
                <p>Trouble we meet in project</p>
 +
                <span>Since we designed new box, and changed a new prescription, we were eager to know how it worked. Additionally, we heard that some methods of killing cockroaches may affect the neighbor. We also required some data for our modeling.</span>
 +
            </div>
 +
            <div class="card h-50 text-center " style="background-color: #3880A0;width: 100%;height: 100px;padding-top: 10px;margin-top: 20px">
 +
                <p>What we did for project</p>
 +
                <span>To achieve our goal, we made a simulation about consequent of killing cockroaches with different ways like cockroach chalks, and our box with wild spores. We calculated and compared the migration rate and mortality of each product.</span>
 +
            </div>
 +
            <div class="card h-50 text-center " style="background-color: #3880A0;width: 100%;height: 100px;padding-top: 10px;margin-top: 20px">
 +
                <p>How would the project be</p>
 +
                <span>Our modeling can ran smoothly with our simulation which provided lots of data for it. Analyzing the data, we can give a guidance to the public to choose a better way to kill cockroach.</span>
 +
            </div>
 +
        </div>
 +
 
 +
        <div style="height:400px;float:right;z-index: 100;position: relative;padding-left: 30px;display: none; color: white; font-size: 20px;" id="content5" class="content1">
 +
            <div class="card h-50 text-center " style="background-color: #3880A0;width: 100%;height: 100px;padding-top: 10px;margin-top: 10px">
 +
                <p>Trouble we meet in project</p>
 +
                <span>Now our box has been tested and we had detailed data about different ways to kill cockroach. We wanted to make an attribution to the society and test our boxes at the same time.</span>
 +
            </div>
 +
            <div class="card h-50 text-center " style="background-color: #3880A0;width: 100%;height: 100px;padding-top: 10px;margin-top: 20px">
 +
                <p>What we did for project</p>
 +
                <span>Therefore, we use our applet to make lots of communication of the public. We post our simulation result and told them a better way to kill cockroach. A teacher invited us to give a popularization after watching our project. Moreover, we gave a post showing that we hoped to distribute our boxes and finally went to Hunan to help them kill the local cockroaches.</span>
 +
            </div>
 +
            <div class="card h-50 text-center " style="background-color: #3880A0;width: 100%;height: 100px;padding-top: 10px;margin-top: 20px">
 +
                <p>How would the project be</p>
 +
                <span>With this HP, we had a closer communication with the public online and offline. Besides, we found some disadvantages of our boxes used in reality, and we redesigned it again after villagers’ feedback.</span>
 +
            </div>
 +
        </div>
 +
 
 +
        <div style="height:400px;float:right;z-index: 100;position: relative;padding-left: 30px;display: none; color: white; font-size: 20px;" id="content6" class="content1">
 +
            <div class="card h-50 text-center " style="background-color: #3880A0;width: 100%;height: 100px;padding-top: 10px;margin-top: 10px">
 +
                <p>Trouble we meet in project</p>
 +
                <span>We have finished our experiment and cockroach box design named Green Ground finally. </span>
 +
            </div>
 +
            <div class="card h-50 text-center " style="background-color: #3880A0;width: 100%;height: 100px;padding-top: 10px;margin-top: 20px">
 +
                <p>What we did for project</p>
 +
                <span>We wanted to do more about our project, the iGEM, the public as well.</span>
 +
            </div>
 +
            <div class="card h-50 text-center " style="background-color: #3880A0;width: 100%;height: 100px;padding-top: 10px;margin-top: 20px">
 +
                <p>How would the project be</p>
 +
                <span>We are now applying for a patent for Green Ground, about to send our product to quality inspection to make in come true. More importantly, we want to use our applet to do more education and public engagement for iGEM and syntenic biology.</span>
 +
            </div>
 +
        </div>
 +
 
 +
 
 +
    </div>
 
</div>
 
</div>
  
Line 261: Line 316:
  
 
<script type="text/javascript">
 
<script type="text/javascript">
−
  $(document).ready(function(){
+
    $(document).ready(function(){
 
///新增
 
///新增
 
         window.onload = function () {
 
         window.onload = function () {
−
    $("#gif_bg2").hide();
+
            $("#gif_bg2").hide();
−
    $("#gif_bg3").hide();
+
            $("#gif_bg3").hide();
−
    $("#gif_bg4").hide();
+
            $("#gif_bg4").hide();
−
    $("#gif_bg5").hide();
+
            $("#gif_bg5").hide();
−
    $("#gif_bg6").hide();
+
            $("#gif_bg6").hide();
−
    };
+
        };
−
    ///新增
+
        ///新增
 
     });
 
     });
 
</script>
 
</script>
 +
 +
  
  

Latest revision as of 20:54, 17 October 2018

Integrated HP

This year, we have completed different HP based on the needs of our projects at different times to make our project move forward. The following below is a summary of the HP we did at different times in the project. For detailed information, you can click on the navigation bar at the top or the title above the clock below

Trouble we meet in project

At the beginning of 2018 SZU-China team, we had a brainstorming to decide our topic. We carried out three topics which were all close to daily lives and we didn’t know which to choose.

What we did for project

To strengthen the communication between iGEM and the public, we designed an applet named biocompany and post our ideas there. It’s a platform for the public to engage in the iGEM.

How would the project be

With the comments that people gave in Biocompany, we finally decided our project, cockroach terminator. For more details about our applet, please read our applet part.