Difference between revisions of "Team:NCTU Formosa/Composite Part"

(Prototype team page)
 
Line 1: Line 1:
−
{{NCTU_Formosa}}
+
{{Team:NCTU_Formosa}}
 
<html>
 
<html>
 +
<head>
 +
<meta charset="UTF-8">
  
 +
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
  
−
<div class="column full_size judges-will-not-evaluate">
+
<link href="https://2016.igem.org/Team:NCTU_Formosa/wiki_reset?action=raw&ctype=text/css" rel="stylesheet">
−
<h3>★  ALERT! </h3>
+
<link href="https://fonts.googleapis.com/css?family=Open+Sans:300" rel="stylesheet">
−
<p>This page is used by the judges to evaluate your team for the <a href="https://2016.igem.org/Judging/Awards#Special_Prizes">Composite Part special prize</a>. </p>
+
  
  
 +
<style type="text/css">
 +
#sideMenu, #top_title {display:none;}
 +
#content { padding:0px; width:100%; margin-top:-7px; margin-left:0px;}
 +
body {background-color:white; }
 +
#bodyContent h1, #bodyContent h2, #bodyContent h3, #bodyContent h4, #bodyContent h5 { margin-bottom: 0px; }
 +
#top_menu_inside {margin-left: 20px; margin-bottom: 0px;}
  
−
<p> Delete this box in order to be evaluated for this medal. See more information at <a href="https://2016.igem.org/Judging/Pages_for_Awards/Instructions"> Instructions for Pages for awards</a>.</p>
 
−
</div>
 
  
 +
html, body, div, span, applet, object, iframe,
 +
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
 +
a, abbr, acronym, address, big, cite, code,
 +
del, dfn, em, font, img, ins, kbd, q, s, samp,
 +
small, strike, strong, sub, tt, var,
 +
b, u, i, center,
 +
dl, dt, dd, ol, ul, li,
 +
fieldset, form, label, legend,
 +
table, caption, tbody, tfoot, thead, tr, th, td {
 +
    margin: 0;
 +
    padding: 0;
 +
    border: 0;
 +
    outline: 0;
  
 +
}
  
  
 +
* {
 +
  font-family: 'Open Sans', sans-serif;
 +
    font-weight: 300;
 +
}
 +
body{
 +
    background-color:rgb(51,51,51) !important;
 +
    line-height:1;
 +
}
 +
/*大圖*/
 +
@media screen and (min-width: 768px) {
 +
  .img-container{
 +
    height:100vh ;
 +
    overflow:hidden ;
 +
    width:100%;
 +
  }
 +
  .main-img{
 +
    top: 0;
 +
    bottom: 0;
 +
    left: 0;
 +
    right: 0;
 +
    width: 100%;
 +
    margin: auto;
 +
    z-index:999;
 +
    }
 +
}
 +
@media screen and (orientation: portrait) {
 +
    .img-container{
 +
        height:auto;
 +
        overflow:none;
 +
        width:100%;
 +
    }
 +
    .main-img{
 +
        top: 0;
 +
        bottom: 0;
 +
        left: 0;
 +
        right: 0;
 +
        width: 100%;
 +
        margin: auto;
 +
        z-index:999;
 +
    }
 +
}
  
−
<div class="column full_size">
+
/*scroll navigaiton*/
 +
nav {
 +
  padding: 18px;
 +
  position: fixed;
 +
  height: auto;
 +
  left:0.5vw;
 +
  width: auto;
 +
  z-index: 9999;
 +
  top:25%;
 +
  margin: auto;
 +
}
  
 +
nav .wrapper {
 +
  padding: 0;
 +
  width:100%;
 +
  height: 785px;
 +
}
  
 +
nav .nodes {
 +
  position: relative;
 +
  margin-top: 1px;
 +
  margin-left: 1px;
  
−
<p>
+
}
−
A composite part is a functional unit of DNA consisting of two or more basic parts assembled together. <a href="http://parts.igem.org/wiki/index.php/Part:BBa_I13507">BBa_I13507</a> is an example of a composite part, consisting of an RBS, a protein coding region for a red fluorescent protein, and a terminator.
+
−
</p>
+
  
−
<p>New composite BioBrick devices can be made by combining existing BioBrick Parts (like Inverters, Amplifiers, Smell Generators, Protein Balloon Generators, Senders, Receivers, Actuators, and so on).</p>
+
.line {
 +
  position: absolute;
 +
  width:1px;
 +
  height:705px;
 +
  top: 13px;
 +
}
 +
.line .red {
 +
  width:1px;    /*調line長度*/
 +
  height:47%; /*line寬度*/
 +
  position:relative;
  
 +
}
  
 +
.line .blue {
 +
  width: 1px;  /*line寬度*/
 +
  height: 15%;  /*調line長度*/
 +
  position:relative;
 +
  left:51px;
  
−
<div class="highlight">
+
}
−
<h4>Note</h4>
+
.line .red-container {
−
<p>This page should list all the composite parts your team has made during your project. You must add all characterization information for your parts on the Registry. You should not put characterization information on this page.</p>
+
  position:relative;
 +
  width: 4px;
 +
}
 +
.line .red {
 +
  background-color:#00D6FF;/*cover line color*/
 +
  *zoom: 1;
 +
  background-size: 100%;
 +
}
 +
.line .blue {
 +
  background-color: white;/*line color*/
 +
  *zoom: 1;
 +
  background-size: 100%;
 +
 +
}
  
−
</div>
+
.node {
 +
  margin-left: 40px;/*調node間距*/
 +
  width: 20px;
 +
  height: 20px;
 +
  margin-top: 30px;
 +
  position: relative;
 +
}
 +
.node .splash {
 +
  box-shadow: 0px 0px 8px 2px rgba(69, 174, 233, 0.53);
 +
  transform: translateZ(0px) scale(1);
 +
  position: absolute;
 +
  width: 20px;
 +
  height: 20px;
 +
  border-radius: 100%;
 +
  pointer-events: none;
 +
  opacity: 1;
 +
}
 +
.node.active .active-circle {
 +
  transform: scale(1);
 +
  opacity: 1;
 +
  background:white;/*active circle color*/
 +
  left:1.6px; 
 +
}
 +
.node.active .splash {
 +
  transition: transform 1200ms, opacity 1500ms;
 +
  transform: translateZ(0px) scale(2.5);
 +
  opacity: 0 !important;
  
−
</div>
+
}
 +
.node.active .inactive-circle {
 +
  transition: opacity 200ms;
 +
  opacity: 0;
 +
}
 +
.node .active-circle {
 +
  transition: all 300ms cubic-bezier(0.63, 0.62, 0.48, 1.84);
 +
  transform: scale(0.7);
 +
  position: absolute;
 +
  opacity: 0;
 +
  width: 20px;
 +
  height: 20px;
 +
  border-radius: 100%;
 +
  background-color: #4b1202;
 +
  *zoom: 1;
 +
  background-size: 100%;
  
 +
}
 +
.node .active-circle .cover {
 +
  transform: translateZ(0px);
 +
  width: 16px;
 +
  height: 16px;
 +
  background:#00D6FF;/*active circle color */
 +
  border-radius: 100%;
 +
  position: absolute;
 +
  top: 2px;
 +
  left: 2px;
 +
}
 +
 +
.node .inactive-circle {
 +
  transition: all 300ms cubic-bezier(0.63, 0.62, 0.48, 1.84);
 +
  width: 14px;
 +
  height: 14px;
 +
  display: block;
 +
  background: #000;
 +
  position: absolute;
 +
  border-radius: 100%;
 +
  border: 2px solid white;
 +
  top: 3px;
 +
  left: 3px;
 +
}
 +
.node:hover {
 +
  cursor: pointer;
 +
}
 +
.node:hover .active-circle {
 +
  transition: all 200ms cubic-bezier(0.63, 0.62, 0.48, 1.84);
 +
  transform: scale(0.84);
 +
}
 +
 +
.node:hover .inactive-circle {
 +
  transition: all 200ms cubic-bezier(0.63, 0.62, 0.48, 1.84);
 +
  transform: scale(0.85);
 +
}
 +
 +
/*left-topic*/
 +
 +
.topic{
 +
    position:relative;
 +
    margin-top:0vh !important;
 +
    width:200px;
 +
    height:auto;
 +
    left:210px;
 +
    float:right;
 +
    color:#F3F7F7;
 +
}
 +
.text_color{
 +
    color:#F3F7F7;
 +
    font-size:12pt !important;
 +
}
 +
/*content*/
 +
.content_container{
 +
    position:relative;
 +
    left:6.5vw;
 +
    right:6.5vw;
 +
    margin:0 auto;
 +
    width:60vw;
 +
    height:auto;
 +
}
 +
.title{
 +
    font-size:25pt !important;
 +
    text-shadow:1px 1px 10px rgb(0, 206, 255);
 +
    border-left:3px solid rgb(0, 206, 255);
 +
    padding-left:10px !important;
 +
    color:rgb(0, 206, 255);
 +
    margin-top:20px;
 +
    margin-bottom:10px;
 +
}
 +
.content{
 +
    font-size:15pt !important;
 +
    text-align:justify;
 +
    text-indent:2em;
 +
    color:#F3F7F7;
 +
    padding-left:40px;
 +
    padding-top:15px;
 +
    padding-bottom:15px;
 +
}
 +
/*second title*/
 +
.content-1{
 +
    font-size:19pt !important;
 +
    text-align:justify;
 +
    color:#F3F7F7;
 +
    font-weight: bold !important;
 +
    padding-top:30px;
 +
    padding-bottom:10px
 +
}
 +
 +
.content-image{
 +
    text-align:center !important;
 +
    color:#F3F7F7 !important;
 +
    font-size:12pt !important;
 +
    padding-top:10px;
 +
    padding-bottom:50px;
 +
}
 +
 +
 +
.appear{
 +
    display:none;
 +
   
 +
}
 +
.list{
 +
    font-size:15pt !important;
 +
    text-align:justify;
 +
    text-align:justify;
 +
    color:#F3F7F7;
 +
}
 +
.quote{
 +
    font-size:17pt !important;
 +
    text-align:justify;
 +
    color:#F3F7F7;
 +
    text-indent:2em !important;
 +
   
 +
}
 +
 +
 +
/*image*/
 +
.web{
 +
    position:fixed !important;
 +
    left:0%;
 +
    bottom:0%;
 +
    display:block;
 +
    margin: auto;
 +
}
 +
.right{
 +
    position:fixed !important;
 +
    bottom:-15px;
 +
    right:0vw;
 +
    margin: auto;
 +
}
 +
 +
 +
 +
 +
.img-position{
 +
    position:absolute;
 +
    z-index:-1;
 +
}
 +
.box{
 +
    width:auto;
 +
    padding-top:10px;
 +
    padding-bottom:10px;
 +
}
 +
.picture{
 +
    position:relative;
 +
    left:7vw;
 +
    width:80%;
 +
}
 +
 +
.picture-1{
 +
    position:relative;
 +
    left:15vw;
 +
    width:50%;
 +
}
 +
 +
</style>
 +
</head>
 +
<body>
 +
<nav id="scroll">
 +
    <div class="wrapper">
 +
     
 +
  <div class="nodes">
 +
            <div class="line">
 +
                <div class="blue">
 +
                    <div class="red-container">
 +
                        <div class="red"></div>
 +
                    </div>
 +
                </div>
 +
          </div>
 +
 
 +
          <div class="node">
 +
          <div class="topic"><p class="text_color">Collaborations</p></div>
 +
            <div class="active-circle">
 +
              <div class="splash"></div>
 +
              <div class="cover">   
 +
              </div>
 +
            </div>
 +
            <div class="inactive-circle">
 +
              <div class="small-cover">
 +
              </div>
 +
            </div>
 +
          </div>
 +
 
 +
          <div class="node">
 +
          <div class="topic"><p class="text_color">Experience assistance</p></div>
 +
            <div class="active-circle">
 +
              <div class="splash"></div>
 +
              <div class="cover">
 +
              </div>
 +
            </div>
 +
            <div class="inactive-circle">
 +
              <div class="small-cover">
 +
              </div>
 +
            </div>
 +
          </div>
 +
 
 +
          <div class="node">
 +
          <div class="topic"><p class="text_color">Mentoring a new team</p></div>
 +
            <div class="active-circle">
 +
              <div class="splash"></div>
 +
              <div class="cover">
 +
 
 +
 +
              </div>
 +
            </div>
 +
            <div class="inactive-circle">
 +
              <div class="small-cover">
 +
              </div>
 +
            </div>
 +
          </div> 
 +
 +
    </nav>
 +
 +
 +
 +
<!--圖片-->
 +
  <div class="img-container">
 +
        <img src="https://static.igem.org/mediawiki/2016/e/e4/Colla.png" class="main-img" width="100%">
 +
  </div>
 +
  <div>
 +
    <img src='https://static.igem.org/mediawiki/2016/f/f8/Web.png' class="web img-position" height="200px" id="web">
 +
  </div>
 +
  <div>
 +
    <img src="https://static.igem.org/mediawiki/2016/6/65/Right_%281%29.png" class="right img-position" id="right" height="600px">
 +
  </div>
 +
 +
 +
 +
<!--wiki content-->
 +
 +
 +
<section class="content_container">
 +
  <div>
 +
    <p class="title">Collaborations<p>
 +
    <p class="content">Collaborations among iGEM teams are one of the essential parts in Human Practices, for we have become companions with other iGEMers because of the reciprocal interactions. This year, we have done some collaborations including experience assistance, mentoring a new team.</p>
 +
    </div>
 +
 +
  <div>
 +
    <p class="title">Experience assistance</p>
 +
    <p class="content-1">Distribution kit</p>
 +
    <p class="content-1">NTHU_Taiwan iGEM team</p>
 +
    <p class="content">We provided NTHU_Taiwan iGEM team with BBa_B0012.<br>(NTHU linker)</p>
 +
    <p class="content-1">Mingdao</p>
 +
    <p class="content">We sent the biobricks BBa_K1694002, BBa_K1694010, BBa_K1694035, BBa_K1694044 and BBa_K1694045, which was registry by 2015 NCTU_Formosa, to help them express the outer membrane protein.
 +
<br>(Mingdao linker)</p>
 +
    <p class="content-1">NCKU_Tainan</p>
 +
    <p class="content">This year, it is the first time for NCKU_Tainan to participate in Giant Jamboree. Therefore, we provided them with the Part BBa_K861171, BBa_I712667, BBa_I712015, BBa_R0010, BBa_R0040, BBa_C0040, BBa_C0051, BBa_C0061,  BBa_C0062, BBa_R0065, BBa_K592009 and BBa_R0052 to them.
 +
<br>(NCKU_Tainan linker)</p>
 +
    <p class="content-1">Provided larvae by NYMU-Taipei</p>
 +
    <p class="content">We are thankful to NYMU iGEM team for providing us the eggs of tobacco cutworms. For our insect test, we needed a great number of larvae to do the experiment. Additionally, they introduce the professor Hwang, who majors in agricultural science, and gave us advice in our insect test. We really appreciate the help of NTMU-Taipei.</p>
 +
  </div>
 +
 +
  <div>
 +
    <p class="title">Mentoring a new team</p>
 +
   
 +
    <div class="box">
 +
        <img  src="https://static.igem.org/mediawiki/2016/1/19/Colloboration1.jpg" class="picture">
 +
    </div>
 +
   
 +
    <p class="content-1">National Taichung First Senior High School</p>
 +
    <li class="list">Learning about iGEM Competition</li>
 +
    <li class="list">Concept of Synthetic Biology</li>
 +
    <li class="list">Basic knowledge of Synthetic Biology</li>
 +
    <li class="list">Basic Mathematical Modelling</li>
 +
    <li class="list">Laboratory Practice</li>
 +
    <li class="list">Project Brainstorming</li>
 +
    <li class="list">Presentation Skill Guidance</li>
 +
    <p class="content">This summer, fourteen high school students in science class from National Taichung First Senior High School came to National Chiao Tung University to learn about iGEM. In the two-weeks workshop, they have learned a lot of basic concepts of synthetic biology associated with laboratory practices. Furthermore, they were grouped into two teams and assigned to acquire ideas and knowledge from 2015 high school team’s wikis. It not only broadened their horizons but sorted out their thoughts through the presentation. </p> 
 +
 +
    <div class="box">
 +
        <img  src="https://static.igem.org/mediawiki/2016/7/7c/Colloboration2.jpg" class="picture">
 +
        <p class="content-image" style="text-align:center;">See <a>Education</a> for the workshop we are planning on.</p>
 +
    </div>
 +
   
 +
    <p class="content">On the last day of the workshop, each group presented their own project, which contained brainstorming, principles, and experimental designs. Their projects were creative, and yet there is still room for the more rigorous thinking. Through a series of compact training, we believe that they will be a competent high school team in the future iGEM competition.</p>
 +
    <p class="content-1">National Chung Cheng University</p>
 +
    <li class="list">Experience sharing of founding an iGEM team</li>
 +
    <li class="list">Teaching Demonstration</li>
 +
    <li class="list">How do Write Biobrick Sequences</li>
 +
    <li class="list">Details of Biobrick construction</li>
 +
    <p class="content">This year, the student leader of National Chung Cheng University came to National Chiao Tung University to learn about the experience of establishing a new team. We exchanged the experience of team operation and academic advice. Besides, she also joined the two-week workshop with students from National Taichung First Senior High School. National Chung Cheng University will establish its first team next year. We are glad to have another companion in Taiwan.</p>
 +
   
 +
    <div>
 +
        <img  src="https://static.igem.org/mediawiki/2016/c/cd/Colloboration3.jpg" class="picture">
 +
    </div>
 +
   
 +
  </div>
 +
</section>
 +
  </div>
 +
 +
<!--JS-->
 +
 +
<script>
 +
 +
var $document = $( document.body );
 +
var $revealBar = $( '.red-container' );
 +
var wrapperHeight = $document.height();
 +
var stepDistance = 101;
 +
var documentHeight = window.innerHeight;
 +
var positions = [];
 +
var heights = [];
 +
var elements = $( '.title:not(".main")' );
 +
 +
// Cache heights and positions
 +
for( var i = 0; i < elements.length; i++ ) {
 +
  var $element = $(elements[i]);
 +
  var height = $element.offset().top + documentHeight;
 +
  if (height > wrapperHeight) {
 +
    height = wrapperHeight;
 +
  }
 +
  positions.push(height);
 +
  heights.push($element.height());
 +
}
 +
 +
var $nodes =  $( '.node' );
 +
 +
// Should totally be debounced /w animation frame. I know,
 +
// this whole thing is slightly inefficient.
 +
// And magic numbers too!
 +
$( document ).scroll( function() {
 +
 +
  nodeTop = $document.scrollTop() + documentHeight + 1;
 +
  var current = 0;
 +
 
 +
  // Active/non active states
 +
  for( var i = 0; i < positions.length; i++ ) {
 +
    if(nodeTop >= positions[i]-80) {
 +
      current = i;
 +
      $nodes.eq( i ).addClass( 'active' );
 +
    } else {
 +
      $nodes.eq( i ).removeClass( 'active' );
 +
    }
 +
  }
 +
 
 +
 
 +
  if ( current < elements.length ) {
 +
    var nextStep = (nodeTop - positions[current]) / (positions[current + 1] - positions[current]);
 +
    var totalWidth = ( current * stepDistance ) + (nextStep * stepDistance);
 +
$revealBar.height( totalWidth+10 );
 +
  }
 +
 +
})
 +
 +
// Clicking the nodes... again, nothing special ;)
 +
$nodes.each( function( index ) {
 +
  var $node = $( this );
 +
  $node.click( function() {
 +
    $('html, body').animate({ scrollTop: (positions[ index ] - documentHeight)-80}, 1000 );
 +
  });
 +
})
 +
//scroll_relocate
 +
function sticky_relocate() {
 +
    var window_top = $(window).scrollTop();
 +
    var div_top = $('.main-img').offset().top;;
 +
    if (window_top > div_top+500) {
 +
        $('#scroll').removeClass('appear');
 +
    } else {
 +
        $('#scroll').addClass('appear');
 +
    };
 +
    if(window_top > div_top+420) {
 +
        $('#web').fadeIn(200);
 +
        $('#right').fadeIn(200);
 +
    } else {
 +
        $('#web').fadeOut(200);
 +
        $('#right').fadeOut(200);
 +
    }
 +
}
 +
 +
$(function () {
 +
    $(window).scroll(sticky_relocate);
 +
    sticky_relocate();
 +
});
 +
 +
 +
 +
$(document).ready(function(
 +
 +
){})
 +
 +
 +
</script>
 +
</body>
 
</html>
 
</html>
 +
{{Team:NCTU_Formosa/footer}}

Revision as of 21:40, 29 September 2016

Collaborations

Collaborations among iGEM teams are one of the essential parts in Human Practices, for we have become companions with other iGEMers because of the reciprocal interactions. This year, we have done some collaborations including experience assistance, mentoring a new team.

Experience assistance

Distribution kit

NTHU_Taiwan iGEM team

We provided NTHU_Taiwan iGEM team with BBa_B0012.
(NTHU linker)

Mingdao

We sent the biobricks BBa_K1694002, BBa_K1694010, BBa_K1694035, BBa_K1694044 and BBa_K1694045, which was registry by 2015 NCTU_Formosa, to help them express the outer membrane protein.
(Mingdao linker)

NCKU_Tainan

This year, it is the first time for NCKU_Tainan to participate in Giant Jamboree. Therefore, we provided them with the Part BBa_K861171, BBa_I712667, BBa_I712015, BBa_R0010, BBa_R0040, BBa_C0040, BBa_C0051, BBa_C0061, BBa_C0062, BBa_R0065, BBa_K592009 and BBa_R0052 to them.
(NCKU_Tainan linker)

Provided larvae by NYMU-Taipei

We are thankful to NYMU iGEM team for providing us the eggs of tobacco cutworms. For our insect test, we needed a great number of larvae to do the experiment. Additionally, they introduce the professor Hwang, who majors in agricultural science, and gave us advice in our insect test. We really appreciate the help of NTMU-Taipei.

Mentoring a new team

National Taichung First Senior High School

  • Learning about iGEM Competition
  • Concept of Synthetic Biology
  • Basic knowledge of Synthetic Biology
  • Basic Mathematical Modelling
  • Laboratory Practice
  • Project Brainstorming
  • Presentation Skill Guidance

    • This summer, fourteen high school students in science class from National Taichung First Senior High School came to National Chiao Tung University to learn about iGEM. In the two-weeks workshop, they have learned a lot of basic concepts of synthetic biology associated with laboratory practices. Furthermore, they were grouped into two teams and assigned to acquire ideas and knowledge from 2015 high school team’s wikis. It not only broadened their horizons but sorted out their thoughts through the presentation.

    See Education for the workshop we are planning on.

    On the last day of the workshop, each group presented their own project, which contained brainstorming, principles, and experimental designs. Their projects were creative, and yet there is still room for the more rigorous thinking. Through a series of compact training, we believe that they will be a competent high school team in the future iGEM competition.

    National Chung Cheng University

  • Experience sharing of founding an iGEM team
  • Teaching Demonstration
  • How do Write Biobrick Sequences
  • Details of Biobrick construction

    • This year, the student leader of National Chung Cheng University came to National Chiao Tung University to learn about the experience of establishing a new team. We exchanged the experience of team operation and academic advice. Besides, she also joined the two-week workshop with students from National Taichung First Senior High School. National Chung Cheng University will establish its first team next year. We are glad to have another companion in Taiwan.