Difference between revisions of "Team:NUDT CHINA/Engagement"

(Prototype team page)
 
 
(19 intermediate revisions by 3 users not shown)
Line 1: Line 1:
 
{{NUDT_CHINA}}
 
{{NUDT_CHINA}}
 +
<html lang="en">
 +
<head>
 +
    <meta charset="utf-8">
 +
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
 +
    <link rel="stylesheet" href="basic.css">
 +
    <style type="text/css">
 +
p {font-variant: stacked-fractions;
 +
font-size: large;}
 +
.pure-g p{font-variant: stacked-fractions;
 +
font-size: large;}
 +
.main-title{padding-top:50%; padding-bottom:50%;width:100%;}
 +
.main{width:90%;}
 +
.main-title::before {
 +
content: '';
 +
width: 20vw;
 +
height: 20vw;
 +
min-width: 3.5em;
 +
min-height: 3.5em;
 +
background: url(https://static.igem.org/mediawiki/2017/f/fe/T-NUDT_CHINA-BigTitle.svg) no-repeat center center;
 +
background-size: cover;
 +
position: absolute;
 +
top: 50%;
 +
left: 50%;
 +
border-radius: 50%;
 +
z-index: 3;
 +
-webkit-transform: translate3d(-50%,-50%,0);
 +
transform: translate3d(-50%,-50%,0);}
 +
.large-header {
 +
background-image: url('https://static.igem.org/mediawiki/2017/4/4c/T-NUDT_CHINA-bigheader-Public.jpg');}
  
−
<html>
+
    </style>
−
<div class="column full_size judges-will-not-evaluate">
+
</head>
−
<h3>★ ALERT! </h3>
+
 
−
<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>
+
  <div id="layout">
−
<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>
+
        <a href="#menu" id="menuLink" class="menu-link">
 +
            <span></span>
 +
        </a>
 +
        <div id="menu">
 +
        <div class="pure-menu"><img src="https://static.igem.org/mediawiki/2017/4/4f/T-NUDT_CHINA-icon01.png" width=240px height=190px alt="">
 +
          <ul class="pure-menu-list">
 +
            <li class="pure-menu-item"><a href="https://2017.igem.org/Team:NUDT_CHINA" class="pure-menu-link">HOME</a></li>             
 +
         
 +
            <li class="pure-menu-item pure-menu-has-children">
 +
              <a class="pure-menu-link"onclick="Show('team_show')">TEAM</a>
 +
              <ul class="pure-menu-children" id="team_show">
 +
                <li class="pure-menu-item"><a href="https://2017.igem.org/Team:NUDT_CHINA/Team" class="pure-menu-link">Team</a></li>
 +
                <li class="pure-menu-item"><a href="https://2017.igem.org/Team:NUDT_CHINA/Collaborations" class="pure-menu-link">Collaborations</a></li>
 +
            </ul>
 +
            </li>
 +
            <li class="pure-menu-item pure-menu-has-children">
 +
              <a  class="pure-menu-link"onclick="Show('project_show')">PROJECT</a>
 +
              <ul class="pure-menu-children" id="project_show">
 +
                <li class="pure-menu-item"><a href="https://2017.igem.org/Team:NUDT_CHINA/Description" class="pure-menu-link">Description</a></li>
 +
                <li class="pure-menu-item"><a href="https://2017.igem.org/Team:NUDT_CHINA/Design" class="pure-menu-link">Design</a></li>
 +
                <li class="pure-menu-item"><a href="https://2017.igem.org/Team:NUDT_CHINA/Experiments" class="pure-menu-link">Experiment</a></li>
 +
                <li class="pure-menu-item"><a href="https://2017.igem.org/Team:NUDT_CHINA/Notebook" class="pure-menu-link">Notebook</a></li>
 +
                <li class="pure-menu-item"><a href="https://2017.igem.org/Team:NUDT_CHINA/Results" class="pure-menu-link">Results</a></li>
 +
                <li class="pure-menu-item"><a href="https://2017.igem.org/Team:NUDT_CHINA/Demonstrate" class="pure-menu-link">Demonstrate</a></li>
 +
                <li class="pure-menu-item"><a href="https://2017.igem.org/Team:NUDT_CHINA/Improve" class="pure-menu-link">Improve</a></li>
 +
            </ul>
 +
            </li>
 +
            <li class="pure-menu-item pure-menu-has-children">
 +
              <a  class="pure-menu-link"onclick="Show('part_show')">PARTS</a>
 +
              <ul class="pure-menu-children" id="part_show">
 +
                <li class="pure-menu-item"><a href="https://2017.igem.org/Team:NUDT_CHINA/Parts" class="pure-menu-link">Parts</a></li>
 +
                <li class="pure-menu-item"><a href="https://2017.igem.org/Team:NUDT_CHINA/Basic_Part" class="pure-menu-link">Basic Parts</a></li>
 +
                <li class="pure-menu-item"><a href="https://2017.igem.org/Team:NUDT_CHINA/Composite_Part" class="pure-menu-link">Composite Parts</a></li>
 +
                <li class="pure-menu-item"><a href="https://2017.igem.org/Team:NUDT_CHINA/Part_Collection" class="pure-menu-link">Part Collection</a></li>
 +
            </ul>
 +
            </li>
 +
                <li class="pure-menu-item"><a href="https://2017.igem.org/Team:NUDT_CHINA/Attributions" class="pure-menu-link">Attributions</a></li>
 +
                <li class="pure-menu-item"><a href="https://2017.igem.org/Team:NUDT_CHINA/InterLab" class="pure-menu-link">InterLab</a></li>
 +
                <li class="pure-menu-item"><a href="https://2017.igem.org/Team:NUDT_CHINA/Model" class="pure-menu-link">Model</a></li>
 +
                <li class="pure-menu-item"><a href="https://2017.igem.org/Team:NUDT_CHINA/Safety" class="pure-menu-link">SAFETY</a></li>
 +
            <li class="pure-menu-item pure-menu-has-children">
 +
              <a  class="pure-menu-link"onclick="Show('HP_show')">HP</a>
 +
              <ul class="pure-menu-children" id="HP_show">
 +
                <li class="pure-menu-item"><a href="https://2017.igem.org/Team:NUDT_CHINA/HP/Silver" class="pure-menu-link">Silver HP</a></li>
 +
                <li class="pure-menu-item"><a href="https://2017.igem.org/Team:NUDT_CHINA/HP/Gold_Integrated" class="pure-menu-link">Integrated & Gold</a></li>
 +
                <li class="pure-menu-item"><a class="pure-menu-heading"  href="https://2017.igem.org/Team:NUDT_CHINA/Engagement" class="pure-menu-link">Public Engagement</a></li>
 +
            </ul>
 +
            </li>
 +
            </ul>
 +
        </div> 
 +
        </div>
 +
        <div id="main">
 +
        <div id="large-header" class="large-header">
 +
                    <canvas id="demo-canvas"></canvas>
 +
                    <h1 class="main-title">Engagement</span></h1>
 +
                </div>
 +
       
 +
 
 +
        <div class="content" style="width: 74%">
 +
<style>
 +
.phone{top: 10px;
 +
width: 80%;
 +
}
 +
.bezel {
 +
  margin: 0 auto;
 +
  max-width: 390px;
 +
  border: 6px solid #ECC5C0;
 +
  height: 100%;
 +
  border-radius: 50px;
 +
  background-color: #F3F3F3;
 +
  box-shadow: inset 0 8px 10px 1px white, inset 8px 0 10px -10px white;
 +
  /*box-shadow: 0 0 100px rgba(0,0,0,.4);*/
 +
}
 +
.screen img{width: 100%; overflow: scroll;}
 +
.screen { overflow: scroll;
 +
  margin: 0 auto;
 +
  width: 94%;
 +
  height: 77%;
 +
  background-color: #222;
 +
  border-radius: 5px;
 +
}
 +
 
 +
.home-btn {
 +
  position: relative;
 +
  top: 5px;
 +
  margin: 0 auto;
 +
  height: 46px;
 +
  width: 46px;
 +
  border: 3px solid #ECC5C0;
 +
  border-radius: 100%;
 +
  box-shadow: inset -1px 0 10px -2px rgba(0, 0, 0, .3);
 +
}
 +
 
 +
.buttons {
 +
  margin: 0 auto;
 +
  padding: 17px 8px 5px 8px;
 +
  max-width: 200px;
 +
  height: 50px;
 +
}
 +
 
 +
.sensor {
 +
  margin: 0 auto;
 +
  max-width: 5px;
 +
  height: 5px;
 +
  background-color: #444;
 +
  border: 2px solid black;
 +
  border-radius: 50%;
 +
}
 +
 
 +
.together {
 +
  position: relative;
 +
  left: -10px;
 +
  display: flex;
 +
  align-items: center;
 +
  justify-content: center;
 +
  max-width: 100px;
 +
  margin: 0 auto;
 +
  padding: 8px;
 +
}
 +
 
 +
.speaker {
 +
  display: inline-block;
 +
  width: 50px;
 +
  height: 5px;
 +
  border-radius: 10px;
 +
  background-color: black;
 +
}
 +
 
 +
.camera {
 +
  margin-right: 10px;
 +
  color: black;
 +
  width: 7px;
 +
  height: 7px;
 +
  background-color: #666;
 +
  border: 2px solid black;
 +
  border-radius: 50%;
 +
}
 +
.content{overflow: hidden;}
 +
@media (max-width: 316px) {
 +
  .bezel {
 +
    height: 0;
 +
    padding-bottom: 200%;
 +
    position: relative;
 +
    border-radius: 15%/7%;
 +
  }
 +
  .camera {
 +
    display: none;
 +
  }
 +
  .screen {
 +
    position: absolute;
 +
    margin: 0 auto;
 +
    width: 94%;
 +
    height: 0;
 +
    padding-bottom: 160%;
 +
  }
 +
  .home-btn {
 +
    height: 0;
 +
    border-bottom: 100%
 +
  }
 +
}
 +
 
 +
.album{width:300%;}
 +
.pagination {
 +
  font-size: 2rem;
 +
  position: relative;
 +
  z-index: 5;
 +
  padding: 0 0.25em;
 +
  top: 0;
 +
  right: 0;
 +
  display: flex;
 +
  background: #505652;
 +
}
 +
.pagination a {
 +
  padding: 0.25em 0.5em;
 +
  text-decoration: none;
 +
  color: #fefbec;
 +
}
 +
.wrapper {
 +
  height: 100%;
 +
  width: auto;
 +
  display: flex;
 +
  flex-wrap: nowrap;
 +
  flex-direction: row;
 +
  align-items: flex-start;
 +
}
 +
.section {
 +
  width: 100%;
 +
  z-index: 0;
 +
  transform: translateX(0);
 +
  transition: transform 0.6s ease-in-out;
 +
}
 +
.images {
 +
  display: block;
 +
  overflow: hidden;
 +
  display: flex;
 +
}
 +
.image {
 +
  width: 33.33%;
 +
  overflow: hidden;
 +
}
 +
.image img {
 +
  height: auto;
 +
  width: 100%;
 +
  display: block;
 +
}
 +
 
 +
.slideswitch {
 +
  display: none;
 +
}
 +
.slideswitch[ id="one"]:target ~ .wrapper .section {
 +
  transform: translateX(0);
 +
}
 +
.slideswitch[ id="two"]:target ~ .wrapper .section {
 +
  transform: translateX(-100%);
 +
}
 +
.slideswitch[ id="three"]:target ~ .wrapper .section {
 +
  transform: translateX(-200%);
 +
}
 +
.slideswitch[ id="four"]:target ~ .wrapper .section {
 +
  transform: translateX(-300%);
 +
}
 +
.slideswitch[ id="five"]:target ~ .wrapper .section {
 +
  transform: translateX(-400%);
 +
}
 +
.slideswitch[ id="one"]:target ~ .pagination #pagination_one,
 +
.slideswitch[ id="two"]:target ~ .pagination #pagination_two,
 +
.slideswitch[ id="three"]:target ~ .pagination #pagination_three,
 +
.slideswitch[ id="four"]:target ~ .pagination #pagination_four,
 +
.slideswitch[ id="five"]:target ~ .pagination #pagination_five {
 +
  color: #e0d28c;
 +
}
 +
</style>
 +
<center><img width="80%" src="https://static.igem.org/mediawiki/2017/e/e1/T-NUDT_CHINA-silver16.jpg" alt=""></center>
 +
    <h2 class="content-subhead">Publizing with new media</h2>
 +
    <p>This year our track is fundamentally advanced. Because our product--miRNA inhibitors--is not familiar to the general public, our necessary first step to get public engagement is to let them make friends with miRNA and our project!
 +
</p><p>In order to achieve a greater influence and outreach, we decided to have our popular science article pushed forward by <a class="tooltip" href="">WeChat subscription<span><img class="pure-img-responsive" src="https://static.igem.org/mediawiki/2017/6/66/T-NUDT_CHINA-public1.jpg">The WeChat ID of the subscription account is zaxue8. It aims to spread knowledge to the masses</span></a>. In addition, we used many internet memes in this article for a more vivid expression, and it worked just as we had expected! </p>
 +
    <p>By now, 2666 people have read this article, and the number is still increasing. Since it is on the internet, people can open it without limitation of time and space. And we can easily acquire the effectiveness of publication by reading rate and top comments.</p>
 +
    <p>You can read the article below as well as scaning the QR code by WeChat to read our articles on your phone:</p>
 +
    <div class="pure-g"><div class="pure-u-1-2"><div class="phone">
 +
<div class="bezel">
 +
  <div class="buttons">
 +
    <div class="sensor"></div>
 +
    <div class="together">
 +
      <div class="camera"></div>
 +
      <div class="speaker"></div>
 +
    </div>
 +
  </div>
 +
  <div class="screen"><img src="https://static.igem.org/mediawiki/2017/2/21/T-NUDT_CHINA-Silver15.png" alt=""></div>
 +
  <div class="home-btn"></div></div>
 +
</div></div> <div class="pure-u-1-2"><img style="top: 30%; position: relative;" class="pure-img-responsive"src="https://static.igem.org/mediawiki/2017/e/e3/T-NUDT_CHINA-Silver6.jpg" alt=""></div></div>
 +
    <p>Since we estimate miRNA is not popular among masses, we attached a small survey at the end of the article, and the result is: </p>
 +
    <center><img width=75% src="https://static.igem.org/mediawiki/2017/2/24/T-NUDT_CHINA-Silver7.jpg" alt=""></center>
 +
    <p>This chart shows that the miRNA popularization still has a long way to go, and it might take a long time before taking the second step.</p>
 +
    <h2 class="content-subhead">Do you want a picture book?</h2>
 +
    <p>Many people feel bored to read something contain nothing but words, especially when the words is about academics. After entering college, I realized that the illustration in textbooks are too limited. We do not want others to feel the same when they try to read our pamphlets, so we made it a beautiful picture book, printed and separated.</p>
 +
    <center><img width="70%" src="https://static.igem.org/mediawiki/2017/7/7d/T-NUDT_CHINA-Silver8.jpg" alt=""></center>
 +
    <div class="album"><div id="one" class="slideswitch"></div>
 +
<div id="two" class="slideswitch"></div>
 +
<div id="three" class="slideswitch"></div>
 +
 
 +
 
 +
<div class="wrapper">
 +
 
 +
  <div id="one" class="section">
 +
 
 +
    <div class="images">
 +
      <div class="image"><img src="https://static.igem.org/mediawiki/2017/5/5f/T-NUDT_CHINA-HPPaint1.jpg"></div>
 +
      <div class="image"><img src="https://static.igem.org/mediawiki/2017/7/73/T-NUDT_CHINA-HPPaint2.jpg"></div>
 +
      <div class="image"><img src="https://static.igem.org/mediawiki/2017/4/4c/T-NUDT_CHINA-HPPaint3.jpg"></div>
 +
    </div>
 +
  </div>
 +
 
 +
  <div id="two" class="section">
 +
 
 +
    <div class="images">
 +
      <div class="image"><img src="https://static.igem.org/mediawiki/2017/2/22/T-NUDT_CHINA-HPPaint4.jpg"></div>
 +
      <div class="image"><img src="https://static.igem.org/mediawiki/2017/5/5f/T-NUDT_CHINA-HPPaint5.jpg"></div>
 +
      <div class="image"><img src="https://static.igem.org/mediawiki/2017/0/0c/T-NUDT_CHINA-HPPaint6.jpg"></div>
 +
    </div>
 +
  </div>
 +
 
 +
  <div id="three" class="section">
 +
    <div class="images">
 +
      <div class="image"><img src="https://static.igem.org/mediawiki/2017/8/80/T-NUDT_CHINA-HPPaint7.jpg"></div>
 +
      <div class="image"><img src="https://static.igem.org/mediawiki/2017/3/3e/T-NUDT_CHINA-HPPaint8.jpg"></div>
 +
      <div class="image"><img src="https://static.igem.org/mediawiki/2017/5/53/T-NUDT_CHINA-HPPaint9.jpg"></div>
 +
    </div> 
 +
  </div>
 +
 
 +
</div><div class="pagination">
 +
  <a id="pagination_one" href="#one">1</a>
 +
  <a id="pagination_two" href="#two">2</a>
 +
  <a id="pagination_three" href="#three">3</a>
 
</div>
 
</div>
−
<div class="clear"></div>
 
  
−
<div class="column half_size">
+
</div>
 +
    <h2 class="content-subhead" style="margin-top: 0;">Lecture in high school</h2>
 +
    <p>High school students are young, vibrant, and always open to new things.</p>
 +
    <p>Last year, our team had an Lab Open Day for some high school students. One student named Zhang Herui showed great interest in iGEM competition and synthetic biology and is recruited into our team this year. For this year's project, considering that there are few references of miRNA mentioned in textbooks, we walked into her school to fill the blanks and introduce our project.</p>
 +
    <center><img width="70%" src="https://static.igem.org/mediawiki/2017/f/ff/T-NUDT_CHINA-Silver9.jpg" alt=""></center>
 +
    <h2 class="content-subhead" style="margin-top: 0;" id="Click_6">Moving our glow sticks for synthetic biology</h2>
 +
    <p>In June, our team was invited to give a lecture on iTED Sharing held by the Squirrel Club of NUDT. The theme of the lecture is biotech 2.0-the synthetic biology and iGEM in my eyes. Through this lecture, we gave the present students an introduction of our research field. We aimed to share our ideas with undergraduates and get feedbacks form the interactive section. Additionally, the popularization of synthetic biology is achieved.</p>
 +
    <center><img width="70%" src="https://static.igem.org/mediawiki/2017/7/7d/T-NUDT_CHINA-Silver10.jpg" alt=""></center>
 +
   
 +
 
  
−
<h1>Education and Public Engagement</h1>
 
−
<h3>Best Education and Public Engagement Special Prize</h3>
 
−
<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>
 
</div>
 +
</div></div>
  
 +
<script type="text/javascript">
 +
function send(num) {
 +
  var openClass = 'is-open';
 +
var add1=document.getElementById(num);
 +
var add2=document.getElementById('Lay'+num);
 +
addClass(add1,openClass);
 +
addClass(add2,openClass);
 +
function hasClass(element,csName){
 +
　　　　　　return　　element.className.match(RegExp('(\\s|^)'+csName+'(\\s|$)'));
 +
　　　　};
 +
function addClass(element,csName){
 +
　　　　　　　if(!hasClass(element,csName)){
 +
 +
　　　　　　　　　element.className+=' '+csName;
 +
 +
　　　　　　}
 +
};}
 +
function show(num) {
 +
var openClass = 'is-open';
 +
var remove1=document.getElementById(num);
 +
var remove2=document.getElementById('Lay'+num);
 +
deleteClass(remove1,openClass);
 +
deleteClass(remove2,openClass);
 +
function hasClass(element,csName){
 +
　　　　　　return　　element.className.match(RegExp('(\\s|^)'+csName+'(\\s|$)'));
 +
　　　　};
 +
　 function deleteClass(element,csName){   
 +
if (hasClass(element,csName)) {
 +
        var reg = new RegExp("(\\s|^)" + csName + "(\\s|$)");
 +
        element.className = element.className.replace(reg, " ");
 +
    }
 +
};
 +
}
  
 +
</script>
 +
<script type="text/javascript">
 +
( function(window,document){
  
 +
    var layout  = document.getElementById('layout'),
 +
        menu    = document.getElementById('menu'),
 +
        menuLink = document.getElementById('menuLink'),
 +
        content  = document.getElementById('main');
  
−
<div class="column half_size">
+
    function toggleClass(element, className) {
−
<h5>Inspiration</h5>
+
        var classes = element.className.split(/\s+/),
−
<p>Here are a few examples of excellent Education and Public Engagement work:</p>
+
            length = classes.length,
−
<ul>
+
            i = 0;
−
<li><a href="https://2016.igem.org/Team:SCAU-China/Engagement">2016 SCAU-China</a></li>
+
−
<li><a href="https://2016.igem.org/Team:Imperial_College/Engagement">2016 Imperial College</a></li>
+
−
<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>
+
−
</ul>
+
  
−
</div>
+
        for(; i < length; i++) {
 +
          if (classes[i] === className) {
 +
            classes.splice(i, 1);
 +
            break;
 +
          }
 +
        }
 +
        // The className is not found
 +
        if (length === classes.length) {
 +
            classes.push(className);
 +
        }
 +
 
 +
        element.className = classes.join(' ');
 +
    }
 +
 
 +
    function toggleAll(e) {
 +
        var active = 'active';
 +
 
 +
        e.preventDefault();
 +
        toggleClass(layout, active);
 +
        toggleClass(menu, active);
 +
        toggleClass(menuLink, active);
 +
    }
 +
 
 +
    menuLink.onclick = function (e) {
 +
        toggleAll(e);
 +
    };
 +
 
 +
    content.onclick = function(e) {
 +
        if (menu.className.indexOf('active') !== -1) {
 +
            toggleAll(e);
 +
        }
 +
    };
 +
 
 +
}(this, this.document));
 +
</script>
 +
 
 +
<script type="text/javascript" >
 +
    function Show(tagId) {
 +
    if (document.getElementById(tagId).style.display=="none") {
 +
    document.getElementById(tagId).style.display="block";
 +
   
 +
    }
 +
    else {
 +
    document.getElementById(tagId).style.display="none";
 +
    }
 +
    }
 +
</script>
 +
<script type="text/javascript" >
 +
(function() {
 +
 
 +
    var width, height, largeHeader, canvas, ctx, circles, target, animateHeader = true;
 +
 
 +
    // Main
 +
    initHeader();
 +
    addListeners();
 +
 
 +
    function initHeader() {
 +
        width = window.innerWidth;
 +
        height = window.innerHeight;
 +
        target = {x: 0, y: height};
 +
 
 +
        largeHeader = document.getElementById('large-header');
 +
        largeHeader.style.height = height+'px';
 +
 
 +
        canvas = document.getElementById('demo-canvas');
 +
        canvas.width = width;
 +
        canvas.height = height;
 +
        ctx = canvas.getContext('2d');
 +
 
 +
        // create particles
 +
        circles = [];
 +
        for(var x = 0; x < width*0.5; x++) {
 +
            var c = new Circle();
 +
            circles.push(c);
 +
        }
 +
        animate();
 +
    }
 +
 
 +
    // Event handling
 +
    function addListeners() {
 +
        window.addEventListener('scroll', scrollCheck);
 +
        window.addEventListener('resize', resize);
 +
    }
 +
 
 +
    function scrollCheck() {
 +
        if(document.body.scrollTop > height) animateHeader = false;
 +
        else animateHeader = true;
 +
    }
 +
 
 +
    function resize() {
 +
        width = window.innerWidth;
 +
        height = window.innerHeight;
 +
        largeHeader.style.height = height+'px';
 +
        canvas.width = width;
 +
        canvas.height = height;
 +
    }
 +
 
 +
    function animate() {
 +
        if(animateHeader) {
 +
            ctx.clearRect(0,0,width,height);
 +
            for(var i in circles) {
 +
                circles[i].draw();
 +
            }
 +
        }
 +
        requestAnimationFrame(animate);
 +
    }
 +
 
 +
    // Canvas manipulation
 +
    function Circle() {
 +
        var _this = this;
 +
 
 +
        // constructor
 +
        (function() {
 +
            _this.pos = {};
 +
            init();
 +
            console.log(_this);
 +
        })();
 +
 
 +
        function init() {
 +
            _this.pos.x = Math.random()*width;
 +
            _this.pos.y = height+Math.random()*100;
 +
            _this.alpha = 0.1+Math.random()*0.3;
 +
            _this.scale = 0.1+Math.random()*0.3;
 +
            _this.velocity = Math.random();
 +
        }
  
 +
        this.draw = function() {
 +
            if(_this.alpha <= 0) {
 +
                init();
 +
            }
 +
            _this.pos.y -= _this.velocity;
 +
            _this.alpha -= 0.0005;
 +
            ctx.beginPath();
 +
            ctx.arc(_this.pos.x, _this.pos.y, _this.scale*10, 0, 2 * Math.PI, false);
 +
            ctx.fillStyle = 'rgba(255,255,255,'+ _this.alpha+')';
 +
            ctx.fill();
 +
        };
 +
    }
  
−
<div class="clear"></div>
+
})();
 +
</script>
 +
</body>
 
</html>
 
</html>

Latest revision as of 03:40, 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

Engagement

Publizing with new media

This year our track is fundamentally advanced. Because our product--miRNA inhibitors--is not familiar to the general public, our necessary first step to get public engagement is to let them make friends with miRNA and our project!

In order to achieve a greater influence and outreach, we decided to have our popular science article pushed forward by WeChat subscriptionThe WeChat ID of the subscription account is zaxue8. It aims to spread knowledge to the masses. In addition, we used many internet memes in this article for a more vivid expression, and it worked just as we had expected!

By now, 2666 people have read this article, and the number is still increasing. Since it is on the internet, people can open it without limitation of time and space. And we can easily acquire the effectiveness of publication by reading rate and top comments.

You can read the article below as well as scaning the QR code by WeChat to read our articles on your phone:

Since we estimate miRNA is not popular among masses, we attached a small survey at the end of the article, and the result is:

This chart shows that the miRNA popularization still has a long way to go, and it might take a long time before taking the second step.

Do you want a picture book?

Many people feel bored to read something contain nothing but words, especially when the words is about academics. After entering college, I realized that the illustration in textbooks are too limited. We do not want others to feel the same when they try to read our pamphlets, so we made it a beautiful picture book, printed and separated.

Lecture in high school

High school students are young, vibrant, and always open to new things.

Last year, our team had an Lab Open Day for some high school students. One student named Zhang Herui showed great interest in iGEM competition and synthetic biology and is recruited into our team this year. For this year's project, considering that there are few references of miRNA mentioned in textbooks, we walked into her school to fill the blanks and introduce our project.

Moving our glow sticks for synthetic biology

In June, our team was invited to give a lecture on iTED Sharing held by the Squirrel Club of NUDT. The theme of the lecture is biotech 2.0-the synthetic biology and iGEM in my eyes. Through this lecture, we gave the present students an introduction of our research field. We aimed to share our ideas with undergraduates and get feedbacks form the interactive section. Additionally, the popularization of synthetic biology is achieved.