Difference between revisions of "Team:TCFSH Taiwan/Collaborations"

 
(16 intermediate revisions by the same user not shown)
Line 1: Line 1:
 
{{TCFSH_Taiwan}}
 
{{TCFSH_Taiwan}}
 
{{TCFSH_Taiwan/Navigation}}
 
{{TCFSH_Taiwan/Navigation}}
 +
<html>
 +
<head>
 +
<meta charset="UTF-8">
  
 +
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
 +
<link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400" rel="stylesheet">
  
 +
 +
<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;}
 +
 +
 +
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,
 +
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;
 +
}
 +
h1{
 +
background-image:url('https://static.igem.org/mediawiki/2017/a/a9/Tcfshtaiwan_background.jpeg');
 +
}
 +
/*大圖*/
 +
@media screen and (min-width: 768px) {
 +
  .img-container{
 +
    height:auto;
 +
    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;
 +
    }
 +
}
 +
 +
/*scroll navigaiton*/
 +
nav {
 +
  padding: 18px;
 +
  position: fixed;
 +
  height: auto;
 +
  left:0.5vw;
 +
  width: auto;
 +
  z-index: 9999;
 +
  top:15%;
 +
  margin: auto;
 +
}
 +
 +
nav .wrapper {
 +
  padding: 0;
 +
  width:100%;
 +
  height: 785px;
 +
}
 +
 +
nav .nodes {
 +
  position: relative;
 +
  margin-top: 1px;
 +
  margin-left: 1px;
 +
 +
}
 +
 +
.line {
 +
  position: absolute;
 +
  width:1px;
 +
  height:470px;
 +
  top: 13px;
 +
}
 +
.line .red {
 +
  width:1px;    /*調line長度*/
 +
  height:60%; /*line寬度*/
 +
  position:relative;
 +
 +
}
 +
 +
.line .blue {
 +
  width: 1px;  /*line寬度*/
 +
  height: 43%;  /*調line長度*/
 +
  position:relative;
 +
  left:51px;
 +
 +
}
 +
.line .red-container {
 +
  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%;
 +
 +
}
 +
 +
.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;
 +
 +
}
 +
.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:red;/*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:230px;
 +
    height:auto;
 +
    left:240px;
 +
    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;
 +
    color:#ffd11a;
 +
    text-shadow:1px 1px 10px rgb(153, 153, 255);
 +
    border-left:3px solid rgb(153, 153, 255);
 +
    padding-left:10px !important; 
 +
    margin-top:20px;
 +
    margin-bottom:10px;
 +
    font-weight:bold;
 +
}
 +
.content{
 +
    font-size:15pt !important;
 +
    text-align:justify;
 +
    text-indent:2em;
 +
    color:#F3F7F7;
 +
    padding-left:40px;
 +
    padding-top:15px;
 +
    padding-bottom:15px;
 +
}
 +
.small{
 +
    font-size:10pt !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;
 +
    font-weight:400 !important;
 +
}
 +
 +
 +
.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;
 +
    line-height:1.5;
 +
    padding-bottom:5px;
 +
    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%;
 +
}
 +
 +
 +
/*-----------table-------------*/
 +
.table-container{
 +
    margin-left:2vw !important;
 +
    position:relative;
 +
}
 +
table{width:750px;table-layout:fixed;word-wrap:break-word;}
 +
table tr:first-child{
 +
      border:1px solid #FFAA33 !important;
 +
      background-color:#FFAA33 !important;
 +
      color:#F3F7F7;
 +
      text-align:center !important;
 +
      font-size:18pt !important;
 +
}
 +
table tr:first-child td{
 +
      border-top:1px solid #FFAA33 !important;
 +
}
 +
tr td{
 +
      border-left:1.5px solid #FFAA33 !important;
 +
      border-right:1.5px solid #FFAA33 !important;
 +
      border-bottom:1.5px solid #FFAA33 !important;
 +
      text-align:center;
 +
      margin:auto;
 +
}
 +
tr td:first-child{
 +
      margin:auto;
 +
      text-align:center;
 +
      font-size:18pt !important;
 +
 +
}
 +
 +
.table_content{
 +
    font-size:13pt;
 +
   
 +
}
 +
 +
.bigphoto{
 +
      margin: auto;
 +
      display: block;
 +
    }
 +
 +
</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">Collaboration</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">The new iGEM 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>
 +
 +
          <div class="node">
 +
          <div class="topic"><p class="text_color">Learning the progress</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">Participate in iGEM</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">Bidirectional cooperation</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>
 +
 +
 +
<h1>
 +
<!--圖片-->
 +
  <div class="img-container">
 +
        <img src="https://static.igem.org/mediawiki/2017/c/c4/Collaborationtcfsh.jpeg" class="main-img" width="100%">
 +
  </div>
 +
  <div>
 +
 +
 +
<!--wiki content-->
 +
 +
 +
<section class="content_container">
 +
  <div>
 +
    <p class="title">Collaboration<p>
 +
    <p class="content">Collaboration plays an important role among iGEMers, for we have become companions with reciprocity interactions. This year, we have done collaborations with <a href="https://2017.igem.org/Team:NCTU_Formosa/Collaborations" style="color: orange">NCTU_Formosa</a> iGEM team.</p>
 +
    </div>
 +
 +
 +
 +
<div style="width:1px;height:60px;"id="TaiwanPP_FTP">
 +
  </div>
 +
 +
 +
<div >
 +
    <p class="title">The new iGEM team</p>
 +
    <p class="content">NCTU_Formosa started to introduce experiments which is related to iGEM to the science-gifted class of Taichung First Senior High School(TCFSH) since April 14. Gradually, the background knowledge of synthetic biology was adequate, then the cogitation of combination to engineering and biology was shared, the core of the gene regulation, the design of biobricks were taught. What's more, they introduce previous project from NCTU_Formasa, giving us the prospect of the competition.</p>
 +
 +
 +
 +
<div style="width:1px;height:60px;"id="Mingdao">
 +
  </div>
 +
 +
 +
<div>
 +
    <p class="title">Learning the progress</p>
 +
    <p class="content">The instructor of NCTU_Formosa, Pro. Wen-Liang Chen, invited us to learn about biology to our lab in the last semester. NCTU_Formosa then gave us a series of training, the SOP of NCTU_Formosa's wet lab protocol, including Cultivation of <span style="font-style:italic;">E. Coli</span>, Miniprep, Digestion, Ligation, Transformation, PCR, and Gel Electrophoresis.</p>
 +
 +
<img src="https://static.igem.org/mediawiki/2017/8/8d/Nctuformasa_tcfshtaiwan.png" class="bigphoto" width=70%;>
 +
 +
</div>
 +
 +
 +
  <div>
 +
    <p class="title">Participate in iGEM</p>
 +
    <p class="content">We decided to participate in iGEM this year, as the first year of TCFSH_Taiwan. NCTU_Formasa members taught us many things such as useful databases (NCBI, Uniport), useful tools for protein (BLAST, COBALT, CD search), biology experiment design and debug, and write biobricks for synthesis. </p>
 +
 +
<img src="https://static.igem.org/mediawiki/2017/f/fb/Participate_in_igem.png" class="bigphoto" width=70%>
 +
 +
  <div>
 +
    <p class="title">Bidirectional cooperation</p>
 +
    <p class="content">Our team member helped NCTU_Formosa to do the double check on the correctness of their composite parts. we took their sample to run the Taq PCR and also ensured the band of each composite parts were correct with gel electrophoresis.  </p>
 +
 +
<img src="https://static.igem.org/mediawiki/2017/0/05/Bochingload.png" class="bigphoto" width=70%>
 +
  </div>
 +
<p class="small">Our team member, BO CHING, WU , was loading the Taq PCR products of NCTU_Formosa's five composite parts biobricks.</p>
 +
 +
<img src="https://static.igem.org/mediawiki/2017/5/52/Gelresult.png" class="bigphoto" width=70%>
 +
<p class="small"> The result of gel electrophoresis is shown in the figure.</p>
 +
 +
<img src="https://static.igem.org/mediawiki/2017/a/a5/Table.png" class="bigphoto" width=100%>
 +
<p class="small">After comparison to the marker, they got the band size and did the double confirmation for our composite parts.</p>
 +
 +
 +
</section>
 +
  </div>
 +
</h1>
 +
<!--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>
 
{{TCFSH_Taiwan_footer}}
 
{{TCFSH_Taiwan_footer}}

Latest revision as of 03:37, 2 November 2017

HOME
TEAM
PROJECT
Description
Design
Experiments
Notebook
InterLab
Contribution
Model
Results
Demonstrate
Improve
Attributions
PARTS
Parts
Basic Parts
Composite Parts
Part Collection
SAFETY
HUMAN PRACTICES
Silver HP
Integrated and Gold
Public Engagement
AWARDS
Applied Design
Entrepreneurship
Hardware
Measurement
Model
Plant
Software
JUDGING FORM

Collaboration

Collaboration plays an important role among iGEMers, for we have become companions with reciprocity interactions. This year, we have done collaborations with NCTU_Formosa iGEM team.

The new iGEM team

NCTU_Formosa started to introduce experiments which is related to iGEM to the science-gifted class of Taichung First Senior High School(TCFSH) since April 14. Gradually, the background knowledge of synthetic biology was adequate, then the cogitation of combination to engineering and biology was shared, the core of the gene regulation, the design of biobricks were taught. What's more, they introduce previous project from NCTU_Formasa, giving us the prospect of the competition.

Learning the progress

The instructor of NCTU_Formosa, Pro. Wen-Liang Chen, invited us to learn about biology to our lab in the last semester. NCTU_Formosa then gave us a series of training, the SOP of NCTU_Formosa's wet lab protocol, including Cultivation of E. Coli, Miniprep, Digestion, Ligation, Transformation, PCR, and Gel Electrophoresis.

Participate in iGEM

We decided to participate in iGEM this year, as the first year of TCFSH_Taiwan. NCTU_Formasa members taught us many things such as useful databases (NCBI, Uniport), useful tools for protein (BLAST, COBALT, CD search), biology experiment design and debug, and write biobricks for synthesis.

Bidirectional cooperation

Our team member helped NCTU_Formosa to do the double check on the correctness of their composite parts. we took their sample to run the Taq PCR and also ensured the band of each composite parts were correct with gel electrophoresis.

Our team member, BO CHING, WU , was loading the Taq PCR products of NCTU_Formosa's five composite parts biobricks.

The result of gel electrophoresis is shown in the figure.

After comparison to the marker, they got the band size and did the double confirmation for our composite parts.