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

Line 54: Line 54:
 
text-indent: 18px;
 
text-indent: 18px;
 
text-align: justify;
 
text-align: justify;
−
// padding: 18px;
+
/* padding: 18px; */
 
     font-family: 'Century', serif;
 
     font-family: 'Century', serif;
 
}
 
}
Line 77: Line 77:
  
  
 +
/************/
 +
#main_contents .string_image{
 +
display: block;
 +
position: absolute;
 +
}
 +
#string_3e{
 +
margin: 0 auto;
 +
display: inline-box;
 +
}
 
--></style>
 
--></style>
 
</head>
 
</head>
Line 83: Line 92:
 
<div id="page_header" class="container container_top">
 
<div id="page_header" class="container container_top">
 
<h1 align="center">Achivement Silver</h1>
 
<h1 align="center">Achivement Silver</h1>
 +
<div id="page_header_images" class="container_contents" style="text-align: center;">
 +
<span id="string_3e"  class="string_image"></span>
 +
<span id="education_string" class="string_image"></span>
 +
<span id="ethics_string" class="string_image"></span>
 +
<span id="economy_string" class="string_image"></span>
 +
 +
</div><!-- /page_herader_images -->
 
</div><!-- /page_header -->
 
</div><!-- /page_header -->
 
<div id="education" class="container">
 
<div id="education" class="container">
Line 141: Line 157:
 
</div>
 
</div>
 
</div><!-- /main_conntents -->
 
</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>
 
</body>
 
</html>
 
</html>
 +
{{Tokyo_Tech/Footer}}

Revision as of 11:37, 16 October 2016

Achivement Silver

Education

  • School Visits

    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 lectures to 269 middle and high school students of 6 schools. Furthermore, this activity was a good opportunity to learn 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 references.

  • Video

    Because the public could not understand our activities well, The, 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 an 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 “ACA Dwarfs.” 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.