Difference between revisions of "Team:IIT-Madras/codonut"

 
(45 intermediate revisions by 3 users not shown)
Line 1: Line 1:
<html>
+
{{IIT-Madras-Top/CSS}}
<head>
+
  
<style type="text/css">
+
= Codonut =
/* Start Removing iGEM Style*/ .mw-content-ltr ul, .mw-content-rtl .mw-content-ltr ul{ margin:0px; } #HQ_page p{ font-size: 20px; } #HQ_page .clear{ height:0px; } .clear { clear: both; height:0px; } #sideMenu{ display:none; } #top_title{ display:none; } #content { width: 100%; margin:0px auto; padding:0px; border:none; background:none; } #globalWrapper { width: 100%; padding:0px; margin-top: -25px; } .firstHeading { display:none; } #bodyContent h1, #bodyContent h2{ margin: 0; } /* End Removing iGEM Style */
+
  
 +
== A Game based on Codon Bias ==
  
@font-face{
+
We were fascinated by the concept of codon bias, which forms the basis for the modelling aspect of our project. We wondered if we could teach this concept with the help of a fun mobile game. We believe games can truly help people of all ages understand core concepts underlying day to day phenomena in a lasting way. This was how the game was born. If you have reached this page from playing our game, thank you so much for spending your valuable time playing our game. The following paragraphs will explain the concept of codon bias-why it happens and the role it plays in protein synthesis. If you have yet to play the game, you can download it on the [http://www.appstore.com/Codonut App Store] or [https://play.google.com/store/apps/details?id=com.igemiitm.codonut Play Store].
src: url(https://static.igem.org/mediawiki/2016/a/aa/Iitm_lb.otf);
+
font-family: L;
+
}
+
@font-face{
+
src: url(https://static.igem.org/mediawiki/2016/5/59/Iitm_gi.otf);
+
font-family: C;
+
}
+
body{
+
background: #050505;
+
color: white;
+
font-family: C;
+
text-align: center;
+
padding: 0px;
+
                        margin: 0px;
+
}
+
ul{
+
list-style-type: none;
+
padding: 5px;
+
margin: 0px;
+
}
+
li.nav{
+
display: inline-block;
+
font-size: 15px;
+
padding: 8px 16px 8px 16px;
+
border-left: 5px solid #ffffff;
+
background: #181818;
+
border-radius: 1px;
+
color: #ffffff;
+
margin: 10px;
+
font-weight: 200;
+
}
+
li.nav:hover{
+
background: #282828;
+
}
+
a,a:visited{
+
text-decoration: none;
+
font-family: C;
+
color: inherit;
+
}
+
a.nav{
+
display: inline-block;
+
min-width: 200px;
+
text-align: left;
+
                        text-decoration: none;
+
}
+
                img.nav{
+
                      vertical-align: 0px;
+
                      margin-right: 5px;
+
                      filter: brightness(5000%);
+
                }
+
a.nav:hover{
+
cursor: pointer;
+
cursor: hand;
+
}
+
a.btn{
+
background: #000f0d;
+
color: #22ffdd;
+
border-radius: 3px;
+
padding: 8px 16px 8px 16px;
+
font-size: 15px;
+
letter-spacing: 3px;
+
font-family: C;
+
font-weight: 200;
+
                        text-decoration: none;
+
}
+
a.btn:hover{
+
background: #00332b;
+
}
+
</style>
+
+
<script type="text/javascript">
+
function gid(a){
+
return document.getElementById(a);
+
}
+
function setup(){
+
gid('welcome').style.paddingTop = gid('header').offsetHeight + 'px';
+
}
+
function putmenu(){
+
gid('menu').style.display = 'block';
+
gid('lines').style.display = 'none';
+
gid('cross').style.display = 'inline-block';
+
}
+
function cutmenu(){
+
gid('menu').style.display = 'none';
+
gid('lines').style.display = 'inline-block';
+
gid('cross').style.display = 'none';
+
}
+
</script>
+
</head>
+
<body onload="setup()" onresize="setup()">
+
<div id="header" style="display: block; width: 100%; text-align: left; background: #050505; position: fixed; top: 0px; padding-top: 15px; box-shadow: 0px 2px 4px rgba(5,5,5,0.5); z-index: 20;">
+
<ul style="color: #22ffdd; font-family: C; font-weight: 200; letter-spacing: 2px;">
+
<li class="nav" id="lines" style="border: none; max-width: 120px; background: #050505;"> <a class="nav" onclick="putmenu()">
+
<img class="nav" src="https://static.igem.org/mediawiki/2016/7/7c/Iitm_menu.png" height="15" width="15"> MENU
+
</a> </li>
+
<li class="nav" id="cross" style="display:none; border: none; max-width: 120px; background: #050505;"> <a class="nav" onclick="cutmenu()">
+
<img class="nav" src="https://static.igem.org/mediawiki/2016/3/37/Iitm_close.png" height="15" width="15"> CLOSE
+
</a> </li>
+
</ul>
+
<ul id="menu" style="display: none; padding-bottom: 30px;">
+
<li class="nav"> <a class="nav" href="https://2016.igem.org/Team:IIT-Madras">
+
<img class="nav" src="https://static.igem.org/mediawiki/2016/b/b4/Iitm_home.png" height="15" width="15"> HOME
+
</a> </li>
+
<li class="nav"> <a class="nav" href="https://2016.igem.org/Team:IIT-Madras/Team">
+
<img class="nav" src="https://static.igem.org/mediawiki/2016/d/db/Iitm_team.png" height="15" width="15"> TEAM
+
</a> </li>
+
<li class="nav"> <a class="nav" href="https://2016.igem.org/Team:IIT-Madras/Description">
+
<img class="nav" src="https://static.igem.org/mediawiki/2016/6/6e/Iitm_project.png" height="15" width="15"> PROJECT
+
</a> </li>
+
<li class="nav"> <a class="nav" href="https://2016.igem.org/Team:IIT-Madras/Parts">
+
<img class="nav" src="https://static.igem.org/mediawiki/2016/f/f8/Iitm_parts.png" height="15" width="15"> PARTS
+
</a> </li>
+
                        <li class="nav"> <a class="nav" href="https://2016.igem.org/Team:IIT-Madras/Measurement">
+
<img class="nav" src="https://static.igem.org/mediawiki/2016/f/fd/Iitm_measurements.png" height="15" width="15"> MEASUREMENTS
+
</a> </li>
+
                        <li class="nav"> <a class="nav" href="https://2016.igem.org/Team:IIT-Madras/Model">
+
<img class="nav" src="https://static.igem.org/mediawiki/2016/4/45/Iitm_model.png" height="15" width="15"> MODEL
+
</a> </li>
+
<li class="nav"> <a class="nav" href="https://2016.igem.org/Team:IIT-Madras/Safety">
+
<img class="nav" src="https://static.igem.org/mediawiki/2016/d/d0/Iitm_safety.png" height="15" width="15"> SAFETY
+
</a> </li>
+
<li class="nav"> <a class="nav" href="https://2016.igem.org/Team:IIT-Madras/Attributions">
+
<img class="nav" src="https://static.igem.org/mediawiki/2016/3/36/Iitm_attributions.png" height="15" width="15"> ATTRIBUTIONS
+
</a> </li>
+
<li class="nav"> <a class="nav" href="https://2016.igem.org/Team:IIT-Madras/Human_Practices">
+
<img class="nav" src="https://static.igem.org/mediawiki/2016/9/94/Iitm_humanpractices.png" height="15" width="15"> HUMAN PRACTICES
+
</a> </li>
+
                        <li class="nav"> <a class="nav" href="https://2016.igem.org/Team:IIT-Madras/Interlabstudy">
+
<img class="nav" src="https://static.igem.org/mediawiki/2016/b/b8/Iitm_interlab.png" height="15" width="15"> INTERLAB STUDY
+
</a> </li>
+
<li class="nav"> <a class="nav" href="https://2016.igem.org/Team:IIT-Madras/Entrepreneurship">
+
<img class="nav" src="https://static.igem.org/mediawiki/2016/6/6f/Iitm_awards.png" height="15" width="15"> AWARDS
+
</a> </li>
+
+
</ul>
+
</div>
+
+
<div id="welcome" style="display: block; background: url(https://static.igem.org/mediawiki/2016/b/b4/Iitm_bg.jpg); margin: 0px; text-align: center; margin-top: 30px; background-size: cover;">
+
<h2 style="display: inline-block; max-width: 1000px; margin: 0px; padding: 0px; padding-bottom: 30px;">
+
<br>
+
<ul>
+
<li style="display: inline-block; margin-right: 40px; background: none; border: none;">
+
<img src="https://static.igem.org/mediawiki/2016/0/00/Iitm_teamlogo.png" width=250 height=250>
+
</li>
+
<li style="display: inline-block; vertical-align: top; font-size: 20px; color: white; font-weight: 200; max-width: 400px; text-align: justify; font-family: C; background: none; border: none; margin-left: 40px; vertical-align: middle;">
+
<br>
+
<span style="font-family: L; font-size: 30px; letter-spacing: 6px; color: #00ae93; font-weight: 200;"> Team IIT Madras </span><br><br>
+
Developing novel methods and tools to understand and engineer biological systems <br><br>
+
+
+
</li>
+
</ul>
+
</h2>
+
</div>
+
+
<div id="content" style="display: block; background: #e0e0e0; margin: 0px; text-align: center; padding-top: 50px;">
+
  
    <h2 style="display: inline-block; margin: 0px; padding: 0px; padding-bottom: 30px;">
+
Every cell has it's genetic information stored in the form of DNA. DNA is basically a language of cells, which has only four letters A, T, G and C. Cells follow the commands given by the stored information in DNA. In order to execute the commands, cells convert the information from a stable language into rather less stable one, RNA. RNA also has only four letters A, U, G and C. Information stored in RNA are converted to make proteins. On a given command, cells start reading every three consecutive letters of RNA to code for a single amino acid. Amino acids are the building blocks of proteins, which perform various important functions for cell.
<br>
+
<ul>
+
<li style="display: inline-block; margin: 40px; background: #181818; border: none; min-width: 269px; max-width: 270px; text-align center; border-radius: 3px; box-shadow: 1px 2px 4px rgba(24,24,24,0.5); font-family: C; padding: 20px; font-size: 18px; color: white; vertical-align: top; min-height: 350px;">
+
<span style="font-family: L; font-size: 20px; letter-spacing: 1px; color: #ffffff; font-weight: 200; padding-bottom: 20px;"> CRISPR efficiency  </span><br><br>
+
<img src="https://static.igem.org/mediawiki/2016/d/d6/Iitm_crispr.png" height=125>
+
<br>
+
<span style="text-align: justify; display: inline-block; font-weight: lighter; margin-top: 25px; letter-spacing: 1px;">
+
Measurement of efficiency of sgRNAs which are specific to RFP, kanamycin resistance and chloramphenicol resistance genes.  
+
</span>
+
</li>
+
  
                        <li style="display: inline-block; margin: 40px; background: #181818; border: none; min-width: 269px; max-width: 270px; text-align center; border-radius: 3px; box-shadow: 1px 2px 4px rgba(24,24,24,0.5); font-family: C; padding: 20px; font-size: 18px; color: white; vertical-align: top; min-height: 350px;">
+
In the translation of RNA to Protein, a phenomenon, known as, Codon Bias, has been observed. As mentioned above, out of four letters of RNA, cell reads three consecutive letters. In this way, we can have a total of 4*4*4 = 64 triple letters (codons), which code for only 20 amino acids. This leads to a degeneracy, where more than one codon can code for one amino acid. In this situation, Ribosome, which does the translation process, chooses one codon over other codons to code for amino acids. This is Codon Bias. There can be various reasons for codon bias. Certain codons may be present in the cells in abundance, which helps Ribosome to make many more protein molecules. Also, specific codons could also boost or slow down the protein making process due to various unknown reasons.
<span style="font-family: L; font-size: 20px; letter-spacing: 1px; color: #ffffff; font-weight: 200; padding-bottom: 20px;"> RIBOS </span><br><br>
+
 
<img src="https://static.igem.org/mediawiki/2016/2/2f/Iitm_ribos.png" height=125>
+
<html>
<br>
+
<div style="text-align:center">
<span style="text-align: justify; display: inline-block; font-weight: lighter; margin-top: 25px; letter-spacing: 1px;">
+
<video max width="60%" controls>
Design and development of RNA Inducible Boolean-like Output Switches(RIBOS) for better control over gene expression.
+
  <source src="https://static.igem.org/mediawiki/2016/9/90/Iitmgamefinalq.mp4">
</span>
+
</video>
</li>
+
</div>
+
                        <li style="display: inline-block; margin: 40px; background: #181818; border: none; min-width: 269px; max-width: 270px; text-align center; border-radius: 3px; box-shadow: 1px 2px 4px rgba(24,24,24,0.5); font-family: C; padding: 20px; font-size: 18px; color: white; vertical-align: top; min-height: 350px;">
+
<span style="font-family: L; font-size: 20px; letter-spacing: 1px; color: #ffffff; font-weight: 200; padding-bottom: 20px;"> NOISE IN DEVICES </span><br><br>
+
<img src="https://static.igem.org/mediawiki/2016/d/d1/Iitm_noise.png" height=125>
+
<br>
+
<span style="text-align: justify; display: inline-block; font-weight: lighter; margin-top: 25px; letter-spacing: 1px;">
+
Exploring noise in complex devices and modelling it is a product of noises from individual parts.<br>
+
</span>
+
</li>
+
</ul>
+
</h2>
+
</div>
+
+
<div id="footer" style="display: block; background: #050505; margin: 0px; padding: 30px; text-align: justify; border: none; box-shadow: 0px -2px 4px rgba(5,5,5,0.5);  z-index: 20;">
+
<h1 style="font-family: L; font-weight: 200; font-size: 30px;  letter-spacing: 3px; color:white;">
+
Contact Us
+
</h1>
+
                <br>
+
<ul>
+
<li style="display: inline-block; margin: 0px 0px 0px 20px; background: none; border: none; ">
+
<br>
+
<img src="https://static.igem.org/mediawiki/2016/c/c1/Iitm_place.png" width=50 height=50>
+
</li>
+
<li style="display: inline-block; vertical-align: top; font-size: 20px; color: white; font-weight: 200; padding-left: 0px; max-width: 500px; text-align: justify; background: none; border: none; line-height: 150%;">
+
Department of Biotechnology<br>
+
Bhupat & Jyoti Mehta School of Biosciences<br>
+
Indian Institute of Technology Madras<br>
+
Chennai - 600036
+
</li>
+
<li style="display: inline-block; margin: 0px 0px 0px 20px; background: none; border: none; ">
+
<br>
+
<img src="https://static.igem.org/mediawiki/2016/2/23/Iitm_mail.png" width=50 height=50>
+
</li>
+
<li style="display: inline-block; vertical-align: top; font-size: 20px; color: white; font-weight: 200; padding-left: 0px; max-width: 500px; text-align: justify; background: none; border: none;  line-height: 150%;">
+
<br>
+
igemiitm16@gmail.com
+
</li>
+
</ul>
+
</div>
+
</body>
+
 
</html>
 
</html>
 +
 +
 +
 +
{{IIT-Madras-Bottom/CSS}}

Latest revision as of 08:37, 18 October 2016


Codonut

A Game based on Codon Bias

We were fascinated by the concept of codon bias, which forms the basis for the modelling aspect of our project. We wondered if we could teach this concept with the help of a fun mobile game. We believe games can truly help people of all ages understand core concepts underlying day to day phenomena in a lasting way. This was how the game was born. If you have reached this page from playing our game, thank you so much for spending your valuable time playing our game. The following paragraphs will explain the concept of codon bias-why it happens and the role it plays in protein synthesis. If you have yet to play the game, you can download it on the [http://www.appstore.com/Codonut App Store] or Play Store.

Every cell has it's genetic information stored in the form of DNA. DNA is basically a language of cells, which has only four letters A, T, G and C. Cells follow the commands given by the stored information in DNA. In order to execute the commands, cells convert the information from a stable language into rather less stable one, RNA. RNA also has only four letters A, U, G and C. Information stored in RNA are converted to make proteins. On a given command, cells start reading every three consecutive letters of RNA to code for a single amino acid. Amino acids are the building blocks of proteins, which perform various important functions for cell.

In the translation of RNA to Protein, a phenomenon, known as, Codon Bias, has been observed. As mentioned above, out of four letters of RNA, cell reads three consecutive letters. In this way, we can have a total of 4*4*4 = 64 triple letters (codons), which code for only 20 amino acids. This leads to a degeneracy, where more than one codon can code for one amino acid. In this situation, Ribosome, which does the translation process, chooses one codon over other codons to code for amino acids. This is Codon Bias. There can be various reasons for codon bias. Certain codons may be present in the cells in abundance, which helps Ribosome to make many more protein molecules. Also, specific codons could also boost or slow down the protein making process due to various unknown reasons.