Difference between revisions of "Team:UI Indonesia/Description"

(Prototype team page)
 
 
Line 1: Line 1:
−
{{IISER_Pune}}
+
{{UI_Indonesia}}
 +
 
 +
<!-- Declare that you are going to use html code instead of wiki code -->
 
<html>
 
<html>
  
−
<h2> Project Description </h2>
+
<!-- Start of CSS-->
 +
<style type="text/css">
 +
 
 +
/* PAGE LAYOUT */
 +
 
 +
/* Change Background color*/
 +
body {
 +
background-color: #fff;
 +
}
 +
 
 +
/* Creates a container that will wrap all of the content inside your wiki pages. */
 +
#mainContainer { 
 +
width: 900px;
 +
overflow:hidden;
 +
float:left;
 +
margin-left: 25px;
 +
margin-bottom: 0px;
 +
background-color: #fff;
 +
border-bottom: 0px solid #565656;
 +
border-right: 0px solid #565656;
 +
border-left: 0px solid #565656;
 +
border-top: 0px solid #565656;
 +
font-family: "Trebuchet MS", Helvetica, sans-serif;
 +
}
 +
 
 +
/* Creates the container for the menu */
 +
#menuContainer  {
 +
float:left;
 +
width: 134px;
 +
padding: 20px 0px;
 +
border-top: 0px solid #565656;
 +
background-color: #E8E8E9;
 +
                                margin-top:20px;
 +
}
 +
 
 +
/* Creates the container for the content */
 +
#contentContainer {
 +
padding-top:20px;
 +
padding-right:10px;
 +
margin-bottom: 20px;
 +
width: 814px;
 +
padding-left: 20px;
 +
float: left;
 +
background-color: #fff;
 +
border-top: 14px solid #565656;
 +
font-family: "Trebuchet MS", Helvetica, sans-serif;
 +
}
 +
 
 +
/*Set up height place holder for the banner*/
 +
#bannerContainer {
 +
height:500px;
 +
margin:auto;
 +
text-align:center;
 +
color: #24B694;
 +
}
 +
 
 +
/*VISUAL STYLE (TABLES, FONTS, LINKS, IMAGES, UL) */
 +
 
 +
/*Change the styling of text for everything inside main container*/
 +
#mainContainer p {
 +
font-size: 13px;
 +
color: #000000;
 +
}
 +
 +
/*This changes the color and font family */
 +
#contentContainer h1, h2, h3, h4, h5, h6 {
 +
color: #565656;
 +
border-bottom: none;
 +
font-weight: bold;
 +
font-family: "Trebuchet MS", Helvetica, sans-serif;
 +
margin-top:10px;
 +
}
 +
 
 +
/*Style of the links - links are different inside the menu */
 +
#contentContainer a {
 +
font-weight: bold;
 +
color: #23b593;
 +
}
 +
 
 +
  /* Styling links on hover- links are different inside the menu */
 +
#contentContainer a:hover {
 +
color: #59bf92;
 +
}
 +
 
 +
/*Change the styling of tables */
 +
        #contentContainer table {
 +
    border: 1px solid #565656;
 +
    border-collapse: collapse;
 +
    width: 90%
 +
    margin: auto;
 +
    margin-bottom: 0px;
 +
    margin-top: 0px;
 +
    margin-right: 0px;
 +
    margin-left: 0px;
 +
    }
 +
 
 +
/*Change the styling of table cells*/
 +
    #contentContainer  td {
 +
    padding: 10px;
 +
    border: 1px solid #565656;
 +
    border-collapse: collapse;
 +
    vertical-align: text-top;
 +
    }
 +
 
 +
/*Change the styling of table headers */
 +
    #contentContainer th {
 +
    background-color: #E8E8E9;
 +
    padding: 10px;
 +
    border: 1px solid #565656;
 +
    border-collapse: collapse;
 +
    vertical-align: text-top;
 +
    }
 +
 
 +
 
 +
 
 +
/*MENU STYLING */
 +
 
 +
/*Styling for the links in the menu */
 +
#menuContainer a {
 +
color: #565656;
 +
text-decoration:none;
 +
font-weight: bold;
 +
}
 +
 
 +
/* Sets the style for lists inside menuContainer  */
 +
#menuContainer ul {
 +
list-style: none;
 +
margin-left:0px;
 +
}
 +
 
 +
/*Styles the list items to become menu buttons */
 +
#menuContainer ul li {
 +
text-align: center;
 +
display: block;
 +
width: 100%;
 +
height:30px;
 +
padding-top:10px;
 +
}
 +
 
 +
/*For the menu buttons, changes the color when hovering*/
 +
#menuContainer li:hover {
 +
color:  #FFF;
 +
background-color: #24B694;
 +
}
 +
 
 +
/*Submenus are not displayed as default*/
 +
#menuContainer li ul {
 +
display: none;
 +
padding-top:15px;
 +
margin-left: -19px;
 +
}
 +
 
 +
/*Submenus are displayed when hovering the menu button */
 +
#menuContainer li:hover ul {
 +
/*display: inline-block; */
 +
display: block;
 +
position: absolute;
 +
float:right;
 +
margin-left: 134px;
 +
margin-top:-42px;
 +
}
 +
 
 +
/*Style the submenu buttons*/
 +
#menuContainer li ul li{
 +
background-color: #59BF92;
 +
padding-left:20px;
 +
padding-right:20px;
 +
height:30px;
 +
padding-top:10px;
 +
margin-top:-2px;
 +
color: #565656;
 +
width: 150px;
 +
}
 +
 
 +
/*CLASSES */
 +
 
 +
/*Clear class for all the pages, adds spacing too*/
 +
.clear{
 +
clear:both;
 +
height: 10px;
 +
}
 +
 
 +
 
 +
/* highlight box for special messages */
 +
    .highlightBox {
 +
        width:500px;
 +
        margin:auto;
 +
        background-color: #E8E8E9;
 +
margin-bottom: 15px;
 +
margin-top: 15px;
 +
padding: 15px;
 +
padding-top: 5px;
 +
    }
 +
 
 +
 
 +
</style>
 +
<!-- End of CSS -->
 +
 
 +
 
 +
<!-- Start of the template html elements. -->
 +
<div id ="mainContainer"><!--The closing tag for mainContainer should be placed at the bottom of each content page.-->
 +
 
  
−
<p>Tell us about your project, describe what moves you and why this is something important for your team.</p>
+
<div id="bannerContainer">
−
<br />
+
<!--<br><br>
 +
<h2> Add a banner to your wiki! </h2>
 +
 +
<p>You can make the image 980px  by  200px</p>
 +
<p> Remember to call the file: "<i>Team_UI_Indonesia_banner.jpg</i>" </p>-->
 +
                        <img src="https://static.igem.org/mediawiki/2015/c/ca/UI_Indonesia_lab.png">
 +
</div>
  
−
<h5>What should this page contain?</h5>
+
<!-- Start of menu -->
−
<ul>
+
<div style="width:100%;height:400px;">
−
<li> A clear and concise description of your project.</li>
+
<div id="menuContainer">
−
<li>A detailed explanation of why your team chose to work on this particular project.</li>
+
−
<li>References and sources to document your research.</li>
+
−
<li>Use illustrations and other visual resources to explain your project.</li>
+
−
</ul>
+
  
 +
<!-- This list is your menu, every list item is a menu button and nested listed become submenu buttons -->
 +
<ul>
 +
<li onclick="myFunction()">Background</li>
  
−
<br />
+
<li onclick="myFunction1()">Solution</li>
−
<h4>Advice on writing your Project Description</h4>
+
  
−
<p>
+
<li onclick="myFunction2()">Grand Design</li>
−
We encourage you to put up a lot of information and content on your wiki, but we also encourage you to include summaries as much as possible. If you think of the sections in your project description as the sections in a publication, you should try to be consist, accurate and unambiguous in your achievements.
+
−
</p>
+
  
−
<p>
+
<li onclick="myFunction3()">Result</li>
−
Judges like to read your wiki and know exactly what you have achieved. This is how you should think about these sections; from the point of view of the judge evaluating you at the end of the year.
+
</ul>
−
</p>
+
</div>
 +
<div style="width:700px;border: 2px solid #6D5417;margin-top:20px;margin-bottom:20px;padding-left:20px;padding-right:20px;float:left;margin-left:20px;">
 +
<center><h1 id="judul">Projects</h1></center>
 +
<p id="isi">*Choose a content that you want to see from our project page by clicking an option on the left side menu bar</p>
  
 +
<script>
 +
function myFunction3() {
 +
document.getElementById("judul").innerHTML = "Result";
 +
    document.getElementById("isi").innerHTML = "a. Sperm Motility Assay<br><br>Decrease in sperm motility was observed after intervention. We add Media+antibiotic as a control for observing sperm death due to addition of media +antibiotic (TB+tetracycline).C1, C2, and C3 was culture 1,2, and 3 respectively. WT represent wild type BL21 CP without plasmid.<br><img src='https://static.igem.org/mediawiki/2015/f/f6/Ui_indonesia_tabel1oi.png' width='400px'><br>Sperm Motility Assay after Intervention<br><img src='https://2015.igem.org/File:Ui_indonesia_tabel2oi.png' width='400px'><br>Sperm motility compared to wild type<br><img src='https://static.igem.org/mediawiki/2015/7/7c/Ui_indonesia_tabel3oi.png' width='400px'><br><br>Graph explanation<br>Y bar represent sperm motility, forward progressing sperm. X bar represent;Start – starting sperm motility without intervention; media+ antibiotic – sperm motility after addition of media and antibiotic; h0 – represent culture before induction, at the time of induction with IPTG; h-2 represent culture after 2 hours induction; and h-4 represent culture after 4 hours of induction.<br><b>Conclusion</b>: Media containing antibiotic inhibit sperm motility by inhibiting its forward progression, thus, this data disrupt the other data. However, average of C1,C2, and C3 shows more sperm inhibition than wild type E. coli BL21 CP.";
 +
}
 +
function myFunction1() {
 +
document.getElementById("judul").innerHTML = "Solutions";
 +
    document.getElementById("isi").innerHTML = "To solve the problem, Team iGEM UI Indonesia try to create the Ideal Contraception<br><br>Thus we have to fulfill these criteria:<br>- Inexpensive<br>- Easy to apply (does not need professional) minimal side effect<br>- Readily reversible<br>- Easy to reach<br>- Effective<br><br>This all actually can be resumed in one word:<br><br><center><p style='font-size:22px'><b style='color:red'>Reversible Sterilization</b></p></center><br><br>Thus team iGEM UI Indonesia propose BaContraception<br><br><br><br>BaContraception, short for Bacterial Contraception. Human Vagina contain 108-109 bacteria per gram vaginal fluid. More than 90% of these bacteria is Lactobacillussp. which is commensal in human vagina.<br><br>Imagine if we engineer the Bacteria to be able to express spermicidal protein.<br><br>The bacteria would be able to express spermicidal protein on demand and stop expressing the protein on demand too.";
 +
}
 +
function myFunction() {
 +
document.getElementById("judul").innerHTML = "Background";
 +
    document.getElementById("isi").innerHTML = "<img width='700px' src='https://static.igem.org/mediawiki/2015/0/06/UI_Indonesia_background1.jpg'><br><br>Welcome to the 21st century!!! We have synthetic biology, nuclear powerplants, nanotechnology, bunch other of cool stuffs... and<br><br><b>7.367.655.413</b><br><br>People to feed...<br><br>The question is... are our development enough... for All of us? Is it enough just for basic life with basic human rights?<br><br><button onclick='pgafgr()'>Population Growth and Food Growth Rate</button><p id='pgafgr'>Click The Button Above To See Population Growth and Food Growth Rate Content</p><br><br><button onclick='mdgs()'>MDGS Goals</button><p id='mdgs'>Click The Button Above To See MDGS Content</p><br><br><button onclick='gap()'>Gap</button><p id='gap'>Click The Button Above To See Gap Content</p><br><br><button onclick='sqocm()'>Status Quo of Contaception Method</button><p id='sqocm'>Click The Button Above To See Status Quo of Contaception Method Content</p>";
 +
}
 +
function pgafgr() {
 +
    document.getElementById("pgafgr").innerHTML = "<b>1. Population Growth and Food Growth Rate</b><br><br>A cleric once said (WARNING! If you are TL;DR person, skip to next paragraph!):<br><br>- food production tends to increase arithmetically, population tends to increase naturally at a geometric rate<br>- That the increase of population is necessarily limited by the means of subsistence,<br>- That population does invariably increase when the means of subsistence increase, and,<br>- That the superior power of population is repressed, and the actual population kept equal to the means of subsistence, by misery and vice<br><br>This cleric... is none other than Thomas Robert Malthus.  A British economist, whose name etched for more than 150 years... since his death in 1834 until now 2015...<br><br>What he said basically is that earth is not enough for human population growth<br><br>Human growth will eventually lead to food crisis in the population... and lead to disruption of peace in the population. As the one that is hungry/ poor try to steal from the one that is full/rich. This will lead <br><br>A term was coined for this breaking point.... Malthusian catastrophe...<br><br><img src='https://static.igem.org/mediawiki/2015/b/be/UI_Indonesia_project2.jpg' width='500px'><br><br>This is not merely a theory....<br><br> Graphs below show the population growth<br><br><img src='https://static.igem.org/mediawiki/2015/7/7d/UI_Indonesia_project3.jpg' width='350px'><img src='https://static.igem.org/mediawiki/2015/e/e6/UI_Indonesia_project4.gif' width='350px'><br><br>Source: http://cnx.org/contents/9bf55f5c-6f4b-40d8-bc99-873d021291c3@4/Human-Population-Growth<br><br>This shows exponential growth pattern<br><br>As for food production growth<br><br><img src='https://static.igem.org/mediawiki/2015/8/8a/UI_Indonesia_project5.jpg' width='500px'><br><br>Source: http://www.newsustainabilityinc.com/2015/01/28/food-waste-critical-solvable-sustainability-issue/<br><br>Clearly shows linear pattern<br><br>What does all of this means? It is just as Malthus has stated more than 150 years ago...<br><br>Inequality arise<br><br>The problem which arise can easily spotted in the Millenium Development Goals (MDGs)";
 +
}
 +
function mdgs() {
 +
    document.getElementById("mdgs").innerHTML = "<img src='https://static.igem.org/mediawiki/2015/b/bf/UI_Indonesia_project6.png' width='500px'><br><br><img src='https://static.igem.org/mediawiki/2015/1/10/UI_Indonesia_project7.jpg' width='500px'><br><br><img src='https://static.igem.org/mediawiki/2015/7/73/UI_Indonesia_project7-2.png' width='500px'><br><br>http://peterslarson.com/tag/gini-coefficient/<br><br>(Gini coefficient shows wealth inequality in the world)";
 +
}
 +
function gap() {
 +
    document.getElementById("gap").innerHTML = "<img src='https://static.igem.org/mediawiki/2015/d/d1/UI_Indonesia_project9.jpg' width='500px'><br><br><b>Gap</b><br><br>The current population growth can only be controlled by government intervention through contraception. However, in Indonesia, contraception is failing. Graph below shows Indonesian Total Fertility Rate. Increase in number means increase in fertility, thus failure in contraception. The desired value is 2.1<br><br><img src='https://static.igem.org/mediawiki/2015/4/4e/UI_Indonesia_project9-2.png' width='500px'>";
 +
}
 +
function sqocm() {
 +
    document.getElementById("sqocm").innerHTML = "<b>4. Status Quo of Contraception Method</b><br><br>Thus we analyze the status quo of contraception method<br><br>It turns out... every contraception method has advantage and disadvantages<br><br><img src='https://static.igem.org/mediawiki/2015/d/d5/UI_Indonesia_project10.png' width='500px'><br><br>Eventually, every method has inconvenience<br><br>Problem Solving<br><br>To solve the problem, Team iGEM UI Indonesia try to create the Ideal Contraception<br><br>Thus we have to fulfill these criteria:<br>- Inexpensive<br>- Easy to apply (does not need professional) minimal side effect<br>- Readily reversible<br>- Easy to reach<br>- Effective<br><br>This all actually can be resumed in one word:<br><br><center><p style='font-size:22px'><b style='color:red'>Reversible Sterilization</b></p></center>";
 +
}
 +
function myFunction2() {
 +
document.getElementById("judul").innerHTML = "Grand Design";
 +
    document.getElementById("isi").innerHTML = "<img src='https://static.igem.org/mediawiki/2015/2/24/UI_INDONESIA_GRANDDESIGN.png' width='500px'><br>We design a device for gram positive bacteria. After discussion, we chose to use B. subtilis 168and E. coli BL21as our host. B. subtilis 168 is a model for gram positive toggle switch. E. coli BL21 and B. subtilis 168 are chosen for chassis for expression of SboA.<br>For grand design we designeda toggle switch with the spermicidal protein; Subtilosin A (SboA) in the system. In the other side of the switch, we designed a suicide protein: NdoA.<br>The promoter in the system are Phyperspank(Phs) and PxylA. Phyperspank is a constitutive promoter  for gram positive when the repressor protein, LacI is not present. When present, LacI bound to Phs, inhibiting the expression of the promoter. However, with addition of lactose or IPTG, LacI would bind to IPTG and detach from the promoter, causing the promoter to express the protein downstream.<br>PxylA is another constitutive promoter for gram positive. PxylA is repressed by xylR. Xylose would bind to xylR and cause PxylA to express the protein downstream.<br>We express xylR under the effect of Phs and express LacI under the effect of PxylA. Thus, when one promoter is active, it repress the other promoter. When PxylA is active, it express SboA, the spermicidal protein. It also express LacI which inhibit the other promoter, Phs. When induced with IPTG, LacI binds to IPTG and inhibition on Phs decrease. Thus protein downstream of Phs active, which is XylR. XylR repress PxylA, thus the expression of SboA stop, and the production of NdoA started.<br>This Grand Design was the ideal design. However, we are not testing this device as a whole due to safety reason. The safety reason issue is the pathogenicity of the bacteria if we test this device as a whole.<br><br><b>SboA Expression</b><br><img src='https://static.igem.org/mediawiki/2015/7/74/UI_Indonesia_Granddesign2.png' width='200px'><br>For characterization of SboA in E. coli, we use pET9a with T7 promoter. The plasmid was transformed to E. coli BL21 CP. Culture was grown overnight. 1/10 of the culture was transferred to TB medium of 5 mL. It was shaken for 2 hours. 500μL of the culture was taken as a control before induction, the rest was induced with final concentration of 1mM IPTG. Culture of 2 hours and 4 hours after induction was taken and centrifuged. The pellet and the supernatant was taken.<br><br><b>Toggle Switch</b><br><br><img src='https://static.igem.org/mediawiki/2015/b/b6/UI_Indonesia_ToggleSwitvch.png' width='500px'><br>To characterize the toggle switch, we switch the SboA with GFP and NdoA with RFP. Single colony was streaked over LB agar with antibiotic. After 18 hours, the culture was induced with 1M IPTG and observed under UV.<br>Other characterization method involve culture of overnight colony to TB broth. After 2 hours shaking, the culture was induced with 1mM final concentration of IPTG. Another culture was induced with 1% xylose. The result was observed under UV.<br><br><b>Method</b><br>a. Sperm Motility Assay<br>Sperm Motility Assay was performed to see the engineered subtilosin A effect on human sperm<br>For motility assay, we use human spermatozoa. Ethical clearance was issued. Subject was informed and consented.<br>Sample was collected by self masturbation. It was immediately (within 1 hour) observed under light microscope. On counting sperm motility, we ask professional help from Departement of Biology Universitas Indonesia. The method was random, blind study.<br>Modified Sutyak KE, et al was used to determine the sperm motility assay. 200μL of culture was mixed with 40μL of whole semen.  The percentage of forward moving spermatozoa was documented.<br><br>b. Well Diffusion Assay<br>Well diffusion assay was performed to see Subtilosin A effectivity as bacteriocin.A 3 hour culture of M. luteus in Nutrient broth was spread in blood agar and Mueller Hinton Aga.";
 +
}
  
−
<br />
+
</script>
−
<h4>References</h4>
+
</div>
−
<p>iGEM teams are encouraged to record references you use during the course of your research. They should be posted somewhere on your wiki so that judges and other visitors can see how you though about your project and what works inspired you.</p>
+
  
 +
</div>
 +
<!-- End of menu  -->
  
 +
<!-- Start of content -->
  
−
<h4>Inspiration</h4>
 
−
<p>See how other teams have described and presented their projects: </p>
 
  
−
<ul>
+
<div style="width:100%;height:100px">
−
<li><a href="https://2014.igem.org/Team:Imperial/Project"> Imperial</a></li>
+
<img src="https://static.igem.org/mediawiki/2015/5/57/UI_Indonesia_kalbe.jpg" style="float:left;">
−
<li><a href="https://2014.igem.org/Team:UC_Davis/Project_Overview"> UC Davis</a></li>
+
<img src="https://static.igem.org/mediawiki/2015/a/a8/UI_Indonesia_bioneer.gif" style="float:left;margin-left:45px;">
−
<li><a href="https://2014.igem.org/Team:SYSU-Software/Overview">SYSU Software</a></li>
+
<img src="https://static.igem.org/mediawiki/2015/9/93/UI_Indonesia_dikti.jpg" style="float:left;margin-left:45px;">
−
</ul>
+
</div>
  
 +
<div style="width:100%;height:90px">
 +
<img src="https://static.igem.org/mediawiki/2015/a/a3/UI_Indonesia_pakraden.png" style="float:left;margin-left:20px;">
 +
<img src="https://static.igem.org/mediawiki/2015/9/9b/UI_Indonesia_igemui.png" style="float:left;margin-left:65px;">
 +
<div style="width:110px;height:90px;float:left;margin-left:65px;">
 +
<a href="https://twitter.com/ui_synbio" target="_blank"><img src="https://static.igem.org/mediawiki/2015/2/26/UI_Indonesia_twitter.png"></a>
 +
<a href="https://instagram.com/igem_ui" target="_blank"><img src="https://static.igem.org/mediawiki/2015/d/da/UI_Indonesia_insta.png"></a>
 +
</div>
 +
<img src="https://static.igem.org/mediawiki/2015/b/b0/UI_Indonesia_fk.png" style="float:left;margin-left:65px;">
 +
<img src="https://static.igem.org/mediawiki/2015/f/f8/UI_Indonesia_ft.jpg" style="float:left;margin-left:65px;">
 +
<img src="https://static.igem.org/mediawiki/2015/7/74/UI_Indonesia_ui.png" style="float:left;margin-left:65px;">
 
</div>
 
</div>
 
</html>
 
</html>

Latest revision as of 03:59, 19 September 2015

Projects

*Choose a content that you want to see from our project page by clicking an option on the left side menu bar