Difference between revisions of "Team:Tokyo Tech/HP/Silver"

(Replaced content with "{{Tokyo_Tech}}")
 
(28 intermediate revisions by 6 users not shown)
Line 1: Line 1:
−
{{Tokyo_Tech}}
+
<!-- {{Tokyo_Tech}} -->
 +
{{Team:Tokyo_Tech/template2016}}
 +
<html>
 +
<head>
 +
<meta charset="UTF-8" />
 +
<style type="text/css">
 +
<!--
 +
#sideMenu, #top_title {display:none;}
 +
body{
 +
    background-image: url("https://static.igem.org/mediawiki/2016/8/83/Tokyo_Tech_Background.png");
 +
    background-repeat: no-repeat;
 +
    background-position: center center;
 +
    background-size: cover;
 +
    background-attachment: fixed;
 +
}
 +
#globalWrapper, #content{
 +
    background: transparent;
 +
}
 +
#content{
 +
//    background-image: url("https://static.igem.org/mediawiki/2016/8/83/Tokyo_Tech_Background.png");
 +
    margin: 0 auto;
 +
}
 +
/**********************************************************************/
 +
#main_contents{
 +
    margin: 0 auto;
 +
    width: 90%;
 +
    min-width: 880px;
 +
    max-width: 1100px;
 +
}
 +
.container{
 +
    margin: 5px auto;
 +
    background: #ffffff;
 +
    border: 1px solid #583612;
 +
}
 +
.container_top h1{
 +
margin-top: 1px;
 +
font-size: 36px;
 +
}
 +
.container_header{
 +
    background: #ffffff;
 +
    text-align: center;
 +
}
 +
.container_header span{
 +
    border-bottom: 2px solid #583612;
 +
}
 +
.container_contents{
 +
line-height: 1.5em;
 +
width: 800px;
 +
margin: 0 auto;
 +
padding-bottom: 10px;
 +
}
 +
#main_contents p.normal_text{
 +
font-size: 18px;
 +
text-indent: 18px;
 +
text-align: justify;
 +
/* padding: 18px; */
 +
    font-family: 'Century', serif;
 +
}
 +
 
 +
.non_dotted_list{
 +
list-style: none;
 +
}
 +
.clear{
 +
clear: both;
 +
}
 +
/************************* Show/Hide setting ***************************/
 +
.on{
 +
display: block;
 +
-webkit-transiton: all 0.6s ease;
 +
transition: all 0.6s ease;
 +
}
 +
.off{
 +
display: none;
 +
-webkit-transiton: all 0.6s ease;
 +
transition: all 0.6s ease;
 +
}
 +
 
 +
 
 +
/************* this page setting ****************/
 +
.container_top h1{
 +
margin-top: 1px;
 +
font-size: 188%;
 +
}
 +
#main_contents .string_image{
 +
display: block;
 +
position: absolute;
 +
}
 +
#string_3e{
 +
margin: 0 auto;
 +
display: inline-box;
 +
}
 +
--></style>
 +
</head>
 +
<body>
 +
<div id="main_contents">
 +
<div id="page_header" class="container container_top">
 +
<h1 align="center">Human Practices</h1>
 +
<h2 align="center">Achivement Silver</h2>
 +
</div><!-- /page_header -->
 +
<div id="education" class="container">
 +
<div id="education_header" class="container_header">
 +
<h1><span>Education</span></h1>
 +
</div><!-- /education_header -->
 +
<div id="education_contents" class="container_contents">
 +
<ul id="education_list" class="non_dotted_list">
 +
<li><h3>School-visits</h3>
 +
<img src="https://static.igem.org/mediawiki/2016/7/7b/T--Tokyo_Tech--HP_Silver_Fig1.png" style="float:left;" /><p class="normal_text" style="float:left;">In order to provide more people in general with a more accurate information about <span style="font-style : italic">E. coli</span>, gene reconfiguration, and synthetic biology, we planed to conduct some School-visits. Finally, we have managed to give the classes to 269 middle and high school students of 6 schools. Furthermore, these activities were good opportunities for us to know how our project impacted on the general public. The details are organized for each school so that anyone can do these kind of lessons in the future. Please feel free to use these as reference.</p><div class="clear"></div></li>
 +
 +
<li><h3>Video</h3>
 +
<p class="normal_text">Because the public could not understand our activities well, we made intelligible videos to improve this situation. The videos are delivering over YouTube.</p></li>
 +
 +
<li><h3>Card Game</h3>
 +
<p class="normal_text">We made the card game for the public to understand the basis of our project, TA system and Quorum Sensing.</p></li>
 +
 +
<li><h3>An Expert</h3>
 +
<p class="normal_text">We noticed that ways of manifesting and expressing our project are important when we explain our project to the public. An expert gave us the advice that we should insert something extremely impressive for the public to summarize our project in accordance to audience’s satisfaction. </p></li>
 +
</ul><!-- /education_list -->
 +
</div><!-- /education_contents -->
 +
</div><!-- education -->
 +
 +
<div id="ethics" class="container">
 +
<div id="ethics_header" class="container_header">
 +
<h1><span>Ethics</span></h1>
 +
</div><!-- /ethics_header -->
 +
<div id="ethics_contents" class="container_contents">
 +
<ul id="ethics_list" class="non_dotted_list">
 +
<li><h3>Symposium</h3>
 +
<img src="https://static.igem.org/mediawiki/2016/2/24/T--Tokyo_Tech--HP_Silver_Fig2.png" style="float:left;" /><p class="normal_text"  style="float:left;">We hosted a symposium providing an opportunity for students to think about synthetic biology. </p><div class="clear"></div></li>
 +
 +
<li><h3>Code of ethics</h3>
 +
<p class="normal_text">Based on the symposium, we have developed our original code of ethics.</p></li>
 +
</ul>
 +
</div><!-- /ethics_contents -->
 +
</div><!-- /ethics -->
 +
 +
<div id="economy" class="container">
 +
<div id="economy_header" class="container_header">
 +
<h1><span>Economy</span></h1>
 +
</div><!-- /economy_header -->
 +
<div id="economy_contents" class="container_contents">
 +
<ul id="economy_list" class="non_dotted_list">
 +
<li><h3>Dialogue with an expert</h3>
 +
<img src="https://static.igem.org/mediawiki/2016/9/93/T--Tokyo_Tech--HP_Silver_Fig3.png" style="float:left;" /><p class="normal_text" style="float:left;">Through developing ideas aroused from dialogue with an expert, we have created “TA system ~Queen’s Caprice~” and “ACADwarfs.” Furthermore, getting a hint from it, we have made experiments of <span style="font-style : italic">E. coli</span> mutants secreting proteins extracellularly. In order to realize more efficient control of protein synthesis, this is an approach of our human practice activities from a perspective of economy.</p><div class="clear"></div></li>
 +
</ul><!-- /economy_list -->
 +
</div><!-- /economy_contents -->
 +
</div><!-- /economy -->
 +
 
 +
<div id="snow_white_versions" class="container container_bottom">
 +
<div id="snow_white_versions_header" class="container_header">
 +
<h1><span>Snow White Versions</span></h1>
 +
</div><!-- /snow_white_versions_header -->
 +
<div id="snow_white_versions_contents" class="container_contents">
 +
<p class="normal_text">The remaking of fairy tale “Snow White” by the Brothers Grimm has enjoyed a lot of versions since it was published in 1812 in the first edition of their collection Grimms’ Fairy Tales. Some elements are common in any Snow White stories. However, because authors add their original elements or features to the story, it becomes unique. We chose other two versions, “Mirror Mirror” and “A Snow White Christmas” and designed their genetic circuits as follow.</p>
 +
<p><img src="https://static.igem.org/mediawiki/2016/d/db/T--Tokyo_Tech--Snow_White_Christmas_Circuit.png" width="300px" /><img src="https://static.igem.org/mediawiki/2016/5/53/T--Tokyo_Tech--Mirror_Mirror_Circuit.png" width="300px" style="float: right;"/></p>
 +
</div>
 +
</div><!-- /main_conntents -->
 +
 +
<script type="text/javascript">
 +
var parent = document.getElementById('page_header_images');
 +
var string3e = document.getElementById('string_3e');
 +
var education = document.getElementById('education_string');
 +
var ethics = document.getElementById('ethics_string');
 +
var economy = document.getElementById('economy_string');
 +
 +
var hasFinishedOnload = new Array(0,0,0,0);
 +
 +
 +
var string3eWidth, string3eHeight,
 +
educationWidth, educationHeight,
 +
ethicsWidth, ethicsHeight,
 +
economyWidth, economyHeight;
 +
 +
var educationRatio;
 +
var ethicsRatio;
 +
var economyRatio;
 +
var theta;
 +
var rotateRadius;
 +
 +
var image3e = new Image();
 +
image3e.onload = function(){
 +
string3eWidth = image3e.width;
 +
string3eHeight = image3e.height;
 +
hasFinishedOnload[0] = 1;
 +
};
 +
image3e.src = 'https://static.igem.org/mediawiki/2016/9/9a/T--Tokyo_Tech--3E_String.png';
 +
 +
var imageEducation = new Image();
 +
imageEducation.onload = function(){
 +
educationWidth = imageEducation.width;
 +
educationHeight = imageEducation.height;
 +
hasFinishedOnload[1] = 1;
 +
};
 +
imageEducation.src = 'https://static.igem.org/mediawiki/2016/5/59/T--Tokyo_Tech--Education_String.png';
 +
 +
var imageEthics = new Image();
 +
imageEthics.onload = function(){
 +
ethicsWidth = imageEthics.width;
 +
ethicsHeight = imageEthics.height;
 +
hasFinishedOnload[2] = 1;
 +
};
 +
imageEthics.src = 'https://static.igem.org/mediawiki/2016/9/95/T--Tokyo_Tech--Ethics_String.png';
 +
 +
var imageEconomy = new Image();
 +
imageEconomy.onload = function(){
 +
economyWidth = imageEconomy.width;
 +
economyHeight = imageEconomy.height;
 +
hasFinishedOnload[3] = 1;
 +
};
 +
imageEconomy.src = 'https://static.igem.org/mediawiki/2016/7/71/T--Tokyo_Tech--Economy_String.png';
 +
 +
 +
/** Embed Image Function **/
 +
function embedImage(place, image, url){
 +
place.innerHTML = '<a href="#' + url + '"><img src="' + image.src + '" /></a>';
 +
}
 +
 +
embedImage(string3e, image3e, '');
 +
embedImage(education, imageEducation, 'education');
 +
embedImage(ethics, imageEthics, 'ethics');
 +
embedImage(economy, imageEconomy, 'economy');
 +
 +
 +
function rotateImages(){
 +
var string3eCenterX = parent.offsetLeft + parent.offsetWidth / 2;
 +
var string3eCenterY = parent.offsetTop + string3eHeight / 2 + rotateRadius;
 +
 +
parent.style.height=rotateRadius*3 + 'px';
 +
 +
string3e.style.left = (string3eCenterX - string3eWidth/2) + 'px';
 +
string3e.style.top = (string3eCenterY - string3eHeight/2) +'px';
 +
 +
var educationLeft = string3eCenterX - educationRatio * rotateRadius * Math.sin(theta) - educationWidth/2;
 +
var educationTop = string3eCenterY - rotateRadius * Math.cos(theta) - educationHeight/2;
 +
var ethicsLeft = string3eCenterX - educationRatio * rotateRadius * Math.sin(theta + Math.PI*2/3) - ethicsWidth/2;
 +
var ethicsTop = string3eCenterY - rotateRadius * Math.cos(theta + Math.PI*2/3) - ethicsHeight/2;
 +
var economyLeft = string3eCenterX - educationRatio * rotateRadius * Math.sin(theta + Math.PI*4/3) - economyWidth/2;
 +
var economyTop = string3eCenterY - rotateRadius * Math.cos(theta + Math.PI*4/3) - economyHeight/2;
 +
 +
education.style.left = educationLeft + 'px';
 +
education.style.top = educationTop + 'px';
 +
ethics.style.left = ethicsLeft + 'px';
 +
ethics.style.top = ethicsTop + 'px';
 +
economy.style.left = economyLeft + 'px';
 +
economy.style.top = economyTop + 'px';
 +
 +
theta -= 0.002;
 +
}
 +
 +
function callRotateImagesFunction(){
 +
setInterval(rotateImages, 10);
 +
}
 +
 +
function onloadLoop(){
 +
var i, bool=1;
 +
for(i=0; i<4; i++){
 +
bool *= hasFinishedOnload[i];
 +
}
 +
if(bool === 1){
 +
 +
 +
educationRatio = (3*educationWidth) / (4*educationHeight);
 +
ethicsRatio = (3*ethicsWidth) / (4*ethicsHeight);
 +
economyRatio = (3*economyWidth) / (4*economyHeight);
 +
 +
theta = 0.0;
 +
//rotateRadius = Math.sqrt(Math.pow(string3eWidth+educationWidth, 2) + Math.pow(string3eHeight+educationHeight, 2)) + 10;
 +
rotateRadius = (string3eHeight + educationHeight) / 2 + 20;
 +
 +
callRotateImagesFunction();
 +
return;
 +
}
 +
setTimeout("onloadLoop()", 10);
 +
}
 +
 +
onloadLoop();
 +
</script>
 +
</body>
 +
</html>

Latest revision as of 23:27, 19 October 2016

Human Practices

Achivement Silver

Education

  • School-visits

    In order to provide more people in general with a more accurate information about E. coli, gene reconfiguration, and synthetic biology, we planed to conduct some School-visits. Finally, we have managed to give the classes to 269 middle and high school students of 6 schools. Furthermore, these activities were good opportunities for us to know how our project impacted on the general public. The details are organized for each school so that anyone can do these kind of lessons in the future. Please feel free to use these as reference.

  • Video

    Because the public could not understand our activities well, we made intelligible videos to improve this situation. The videos are delivering over YouTube.

  • Card Game

    We made the card game for the public to understand the basis of our project, TA system and Quorum Sensing.

  • An Expert

    We noticed that ways of manifesting and expressing our project are important when we explain our project to the public. An expert gave us the advice that we should insert something extremely impressive for the public to summarize our project in accordance to audience’s satisfaction.

Ethics

  • Symposium

    We hosted a symposium providing an opportunity for students to think about synthetic biology.

  • Code of ethics

    Based on the symposium, we have developed our original code of ethics.

Economy

  • Dialogue with an expert

    Through developing ideas aroused from dialogue with an expert, we have created “TA system ~Queen’s Caprice~” and “ACADwarfs.” Furthermore, getting a hint from it, we have made experiments of E. coli mutants secreting proteins extracellularly. In order to realize more efficient control of protein synthesis, this is an approach of our human practice activities from a perspective of economy.

Snow White Versions

The remaking of fairy tale “Snow White” by the Brothers Grimm has enjoyed a lot of versions since it was published in 1812 in the first edition of their collection Grimms’ Fairy Tales. Some elements are common in any Snow White stories. However, because authors add their original elements or features to the story, it becomes unique. We chose other two versions, “Mirror Mirror” and “A Snow White Christmas” and designed their genetic circuits as follow.