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

(Prototype team page)
 
Line 1: Line 1:
 
{{TCFSH_Taiwan}}
 
{{TCFSH_Taiwan}}
−
 
+
{{TCFSH_Taiwan/Navigation}}
 
<html>
 
<html>
−
<div class="column full_size judges-will-not-evaluate">
+
<head>
−
<h3>★  ALERT! </h3>
+
<meta charset="UTF-8">
−
<p>This page is used by the judges to evaluate your team for the <a href="https://2017.igem.org/Judging/Medals">medal criterion</a> or <a href="https://2017.igem.org/Judging/Awards"> award listed above</a>. </p>
+
−
<p> Delete this box in order to be evaluated for this medal criterion and/or award. See more information at <a href="https://2017.igem.org/Judging/Pages_for_Awards"> Instructions for Pages for awards</a>.</p>
+
−
</div>
+
−
<div class="clear"></div>
+
  
−
<div class="column half_size">
+
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
  
−
<h1>Education and Public Engagement</h1>
+
<link href="https://2016.igem.org/Team:NCTU_Formosa/wiki_reset?action=raw&ctype=text/css" rel="stylesheet">
−
<h3>Best Education and Public Engagement Special Prize</h3>
+
<link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400" rel="stylesheet">
−
<p>Over the last few years, we have seen teams produce some truly outstanding work in the areas of education and public engagement. Innovative educational tools and public engagement activities have the ability to discuss the science behind synthetic biology, spark new scientific curiosity and establish a public dialogue about synthetic biology from voices/views outside the lab.
+
  
−
<br><br>
 
−
To compete for the <a href="https://2017.igem.org/Judging/Awards">Best Education and Public Engagement prize</a>, please describe your work on this page and also fill out the description on the <a href="https://2017.igem.org/Judging/Judging_Form">judging form</a>.
 
−
<br><br>
 
−
You must also delete the message box on the top of this page to be eligible for this prize.
 
−
</p>
 
−
</div>
 
  
 +
<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;
  
−
<div class="column half_size">
+
}
−
<h5>Inspiration</h5>
+
 
−
<p>Here are a few examples of excellent Education and Public Engagement work:</p>
+
 
−
<ul>
+
* {
−
<li><a href="https://2016.igem.org/Team:SCAU-China/Engagement">2016 SCAU-China</a></li>
+
  font-family: 'Open Sans', sans-serif;
−
<li><a href="https://2016.igem.org/Team:Imperial_College/Engagement">2016 Imperial College</a></li>
+
    font-weight: 300;
−
<li><a href="https://2015.igem.org/Team:UFMG_Brazil/Public_Engagement">2015 UFMG Brazil</a></li>
+
}
−
<li><a href="https://2015.igem.org/Team:William_and_Mary/Practices"> 2015 William and Mary</a></li>
+
body{
−
</ul>
+
    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: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;
 +
    }
 +
}
 +
 
 +
/*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:360px;
 +
  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:#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: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;
 +
}
 +
/*second title*/
 +
.content-1{
 +
    font-size:19pt !important;
 +
    text-align:justify;
 +
    color:#ff3399;
 +
    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%;
 +
}
 +
 
 +
 
 +
 
 +
.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">Public Engagement</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">Study</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">Meetup</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">Education</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/2017/e/ef/Publicengagement.jpeg" class="main-img" width="100%">
 +
  </div>
 +
 
 +
<!--wiki content-->
 +
 
 +
<h1>
 +
<section class="content_container">
 +
  <div>
 +
    <p class="title">Public Engagament<p>
 +
    <p class="content">As we all know, human practice plays one of the most significant part in iGEM. Being the first-year-participating iGEM team, we feel the enthusiasm from many other teams. We have received various of meetup and interaction invitations.
 +
    </p>
 +
    </div>
 +
 
 +
 
 +
 
 +
<div>
 +
    <p class="title">Meetup</p>
 +
    <p class="content">The interaction between teams is usually the most important role in iGEM. We have exchange with many other teams by skype meetups, participating Asia meetup, and so on.</p>
 +
    <p class="content-1">Peshawar</p>
 +
    <p class="content">In the late June, we have a Skype meetup with Team Peshawar.</p>
 +
 
 +
    <img src="" class="bigphoto" width="50%";>
 +
 
 +
    <p class="content-1">Missouri S&T</p>
 +
    <p class="content">We were glad to have met Mr. and Mrs. Westenberg from Team Missouri S&T in July at our school. Sharing topics to each other, we got to know iGEM with a new prospect.</p>
 +
 
 +
    <img src="https://static.igem.org/mediawiki/2017/e/e2/Meet_up.jpeg" class="bigphoto" width="50%";>
 +
 
 +
    <p class="content-1">iGEM Asia Pacific Conference</p>
 +
    <p class="content">Participating the Asia iGEM meetup held by NCTU_Formosa, it was our first time to present our project to so many iGEMers. We were also staff members that assisted NCTU_Formosa during the event. Three of our members did the presentation. Nonetheless, we have altered our project slightly, and details should be released on giant jamboree.</p>
 +
 
 +
    <img src="https://static.igem.org/mediawiki/2017/b/b7/Pasific_conference.jpeg" class="bigphoto" width="50%";>
 +
    <img src="" class="bigphoto" width="50%">
  
 
</div>
 
</div>
  
  
−
<div class="clear"></div>
+
 
 +
  <div>
 +
    <p class="title">Education</p>
 +
    <p class="content">We introduced our project and iGEM competition to the juniors and sophomores in our school. Some of them gave us positive feedback.
 +
    </p>
 +
 
 +
    <img src="https://static.igem.org/mediawiki/2017/6/69/Education1.jpeg" class="bigphoto" width="50%";>
 +
   
 +
</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>
 
</html>
 +
{{TCFSH_Taiwan_footer}}

Revision as of 01:44, 27 October 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

Public Engagament

As we all know, human practice plays one of the most significant part in iGEM. Being the first-year-participating iGEM team, we feel the enthusiasm from many other teams. We have received various of meetup and interaction invitations.

Meetup

The interaction between teams is usually the most important role in iGEM. We have exchange with many other teams by skype meetups, participating Asia meetup, and so on.

Peshawar

In the late June, we have a Skype meetup with Team Peshawar.

Missouri S&T

We were glad to have met Mr. and Mrs. Westenberg from Team Missouri S&T in July at our school. Sharing topics to each other, we got to know iGEM with a new prospect.

iGEM Asia Pacific Conference

Participating the Asia iGEM meetup held by NCTU_Formosa, it was our first time to present our project to so many iGEMers. We were also staff members that assisted NCTU_Formosa during the event. Three of our members did the presentation. Nonetheless, we have altered our project slightly, and details should be released on giant jamboree.

Education

We introduced our project and iGEM competition to the juniors and sophomores in our school. Some of them gave us positive feedback.