Difference between revisions of "Team:ASIJ TOKYO/Design"

 
(57 intermediate revisions by 6 users not shown)
Line 1: Line 1:
 +
 
{{Team:ASIJ_TOKYO/css}}
 
{{Team:ASIJ_TOKYO/css}}
 
<!--
 
<!--
Line 15: Line 16:
  
 
.navbar {
 
.navbar {
−
   background-color: #333;
+
   background-color: #f2efe8;
 
   font-family: Arial;
 
   font-family: Arial;
  
Line 27: Line 28:
 
.navbar a {
 
.navbar a {
 
   float: left;
 
   float: left;
−
   color: white;
+
   color: #858687;
−
   text-align: center;
+
   text-align: left;
−
   padding: 28px 18px;
+
   padding: 10px 32px;
 
   text-decoration: none;
 
   text-decoration: none;
 
   font-size: 28px;
 
   font-size: 28px;
Line 56: Line 57:
  
 
.navbar a:hover, .dropdown:hover .dropbtn {
 
.navbar a:hover, .dropdown:hover .dropbtn {
−
     background-color: #5d70dd;
+
     background-color: #d2dff7;
 
      
 
      
 
      
 
      
Line 67: Line 68:
 
     background-color: #f9f9f9;
 
     background-color: #f9f9f9;
 
     min-width: 160px;
 
     min-width: 160px;
−
     box-shadow: 0px 8px 16px 0px rgba(0,0,0,.4);
+
     box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
 
     z-index: 100;
 
     z-index: 100;
−
     top: 80px;
+
     top: 57px;
  
  
Line 145: Line 146:
 
<meta charset="utf-8" />
 
<meta charset="utf-8" />
 
<meta name="viewport" content="width=device-width, initial-scale=1" />
 
<meta name="viewport" content="width=device-width, initial-scale=1" />
−
<!--[if lte IE 8]><script src="assets/js/ie/html5shiv.js"></script><![endif]-->
+
 
 
</head>
 
</head>
 
<body>
 
<body>
  
−
+
<!-- Two -->
−
 
+
<section id="three" class="wrapper spotlight style2">
−
<!-- Two -->
+
<div class="inner">
−
<section id="two" class="wrapper alt spotlight style2">
+
<a href="#" class="image"><img src="https://static.igem.org/mediawiki/2017/7/71/Asijigem-designegg.jpg"></a>
 
<div class="content">
 
<div class="content">
 +
<h2 class="major">Design</h2>
 +
<p>In the course of our experimentation, perhaps the most crucial step was the design of our experiment, prior to its actual carrying out. Below, we detail the steps we took and the ideas we came up with in order to reach our final goal.</p>
 
</div>
 
</div>
 
</div>
 
</div>
 
</section>
 
</section>
−
 
+
<!-- Four -->
−
<!-- Three -->
+
<section id="three" class="wrapper alt style3">
−
<section id="three" class="wrapper spotlight style3">
+
 
<div class="inner">
 
<div class="inner">
−
<div class="content">
+
<h2 class="major">Our Process</h2>
−
<h2 class="major">What is CRC?</h2>
+
<p>We began our experiments with a competent cell check to find the optimal concentration of DNA for working with NEB 5-alpha Competent E. coli. Next, we found the ideal promoter strength for the growth of COX-2 and c-Myc by performing the Gibson Assembly with three different Anderson promoters of different strengths. In order to observe phenotypic proof of these results the competent cells were transformed and plated, as well as expanded into solution so both the number of colonies, as well as the optical density of the solutions were used to support the optimal promoter strength. </p>
−
<p>Colorectal cancer is the second most lethal cancer in the United States, often beginning as benign polyps in the colon and rectum. Despite ease of treatment, cases of CRC are usually detected in its late stages, rendering care difficult.
+
<p>We then moved on to find the most efficient promoter-to-binding domain combinations for both the c-Myc and COX-2 genes by testing a variety of them and seeing which produced the most glowing colonies in the presence of rapamycin. We also utilized this phase to make sure that the combinations glowed only when rapamycin was present. We concluded this test with the combinations of the COX-2 promoter with the FRB domain, and the c-Myc promoter with the FKBP domain being the most efficient combinations. The last step was to ensure that the construct glowed only when all parts were present, and to prove that the promoters had altered the shape of the nonspecific binding domains to become specific to the corresponding proteins. We did this by expanding incomplete combinations into tubes and observing whether they glowed or not. We found that none of the tubes glowed, no matter if they were missing a gene, or one of the promoter-reporter systems. The only tube that glowed was the one containing both COX-2 and c-Myc promoter-reporter systems, both respective genes, as well as rapamycin.
−
CRC results from the mutation of multiple genes involved with the regulation of cell proliferation and DNA repair, and this year ASIJ iGEM team focused in on the Wnt pathway. The activation of the Wnt pathway inhibits the degradation of beta-catenin, a protein that triggers the mutation of oncogenes and tumor suppressor genes. Through detection of these mutated genes and subsequent downstream proteins, our team aims to develop an early screening method that can be adapted to a home detection kit. Building off of a rapamycin induced split-luciferase system characterized by the 2015 Peking iGEM team, our construct consists of a promoter reporter system that looks at two downstream products, c-Myc and COX-2.
+
.</p>
−
 
+
−
 
+
−
The construct consists of a promoter-reporter system that looks specifically at two downstream genes, c-Myc and COX-2 These products are assembled into a construct composing of fusion proteins as well as split luciferase fragments: COX-2 - n-Luc - FRB and FKBP - c-Luc - c-Myc. In the presence of rapamycin, the interacting protein partners dimerize and subsequently cause luciferase to activate. In order to test this model, we created vectors of our constructs and inserted them into e-coli cells.
+
−
 
+
−
We began our experiments with a competent cell check to find the optimal concentration of DNA for working with NEB 5-alpha Competent E. coli. Next, we found the ideal promoter strength for the growth of COX-2 and c-Myc by performing the Gibson Assembly with three different Anderson promoters of different strengths. In order to observe phenotypic proof of these results the competent cells were transformed and plated, as well as expanded into solution so both the number of colonies, as well as the optical density of the solutions were used to support the optimal promoter strength.  
+
−
 
+
−
The next step was to find the most efficient promoter-to-binding domain combinations for both the c-Myc and COX-2 genes by testing a variety of them and seeing which produced the most glowing colonies in the presence of rapamycin. We also utilized this phase to make sure that the combinations glowed only when rapamycin was present. We concluded this test with the combinations of the COX-2 promoter with the FRB domain, and the c-Myc promoter with the FKBP domain being the most efficient combinations. The last step was to ensure that the construct glowed only when all parts were present, and to prove that the promoters had altered the shape of the nonspecific binding domains to become specific to the corresponding proteins. We did this by expanding incomplete combinations into tubes and observing whether they glowed or not. We found that none of the tubes glowed, no matter if they were missing a gene, or one of the promoter-reporter systems. The only tube that glowed was the one containing both COX-2 and c-Myc promoter-reporter systems, both respective genes, as well as rapamycin.  
+
−
 
+
−
</p>
+
−
</div>
+
 
</div>
 
</div>
 
</section>
 
</section>
−
 
+
</section>
−
<section id="four" class="wrapper alt style1">
+
<!-- Three -->
 +
<section id="three" class="wrapper spotlight style3">
 
<div class="inner">
 
<div class="inner">
−
<h2 class="major">Pictures</h2>
+
<img src="https://static.igem.org/mediawiki/parts/1/1a/Isla.JPG" style="width:500px;height:100%;" class="image">
−
<section class="features">
+
<div class="content">
−
+
<h2 class="major">Future Directions</h2>
−
</section>
+
<p> With more time, we would like to implement our current model into a yeast system. This would prove advantageous as it will confirm the working of our model in an eukaryotic  organism. Using yeast, followed by flow cytometry, would allow us to collect quantitative data that could be better analyzed. Additionally, we would work on the upregulation of c-Myc production for the effectiveness of our experiment. This was a limiting factor in our experiment and continues to be a weak point in our design and planning. Most importantly, our team would like to develop a 3D prototype for a home-kit that would diagnose CRC. Our goal would be to develop a home-diagnosis kit similar in method and design to the home-pregnancy kit, where the product would be commercially approved and easily available. Our model would consist of two solutions that would be combined with the addition of a sample of fecal matter. This would address a major component of our project goal in developing a more convenient treatment and detection method for colorectal cancer. </p>
−
 
+
−
<!-- Two -->
+
−
<section id="two" class="wrapper alt spotlight style2">
+
 
</div>
 
</div>
−
</div>
+
</div>
 
</section>
 
</section>
−
 
−
 
−
 
 
 
−
 
−
<!-- Scripts -->
 
−
<script src="assets/js/skel.min.js"></script>
 
−
<script src="assets/js/jquery.min.js"></script>
 
−
<script src="assets/js/jquery.scrollex.min.js"></script>
 
−
<script src="assets/js/util.js"></script>
 
−
<!--[if lte IE 8]><script src="assets/js/ie/respond.min.js"></script><![endif]-->
 
−
<script src="assets/js/main.js"></script>
 
  
 +
  
 
<style>
 
<style>
Line 216: Line 196:
 
/* Reset */
 
/* Reset */
  
−
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
+
html, body, div, span, applet, object, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
 
margin: 0;
 
margin: 0;
 
padding: 0;
 
padding: 0;
Line 1,830: Line 1,810:
  
 
body {
 
body {
−
background-color: #4221af;
+
background-color: #5d48a0;
 
background-image: linear-gradient(to top, rgba(46, 49, 65, 0.8), rgba(46, 49, 65, 0.8)), url("../../images/bg.jpg");
 
background-image: linear-gradient(to top, rgba(46, 49, 65, 0.8), rgba(46, 49, 65, 0.8)), url("../../images/bg.jpg");
 
background-size: auto, cover;
 
background-size: auto, cover;
Line 2,170: Line 2,150:
 
select:focus,
 
select:focus,
 
textarea:focus {
 
textarea:focus {
−
border-color: #6a588e;
+
border-color: #5b6ba6;
 
}
 
}
  
Line 2,208: Line 2,188:
 
select option {
 
select option {
 
color: #ffffff;
 
color: #ffffff;
−
background: #4221af;
+
background: #5d48a0;
 
}
 
}
  
Line 2,283: Line 2,263:
 
border-color: #ffffff;
 
border-color: #ffffff;
 
content: '\f00c';
 
content: '\f00c';
−
color: #4221af;
+
color: #5d48a0;
 
}
 
}
  
 
input[type="checkbox"]:focus + label:before,
 
input[type="checkbox"]:focus + label:before,
 
input[type="radio"]:focus + label:before {
 
input[type="radio"]:focus + label:before {
−
border-color: #4c5c96;
+
border-color: #f2efe8;
 
}
 
}
  
Line 2,655: Line 2,635:
  
 
ul.pagination li > .page.active {
 
ul.pagination li > .page.active {
−
background-color: #4c5c96;
+
background-color: #f2efe8;
 
}
 
}
  
Line 2,837: Line 2,817:
 
button.special,
 
button.special,
 
.button.special {
 
.button.special {
−
background-color: #4c5c96;
+
background-color: #f2efe8;
 
box-shadow: none;
 
box-shadow: none;
 
}
 
}
Line 2,846: Line 2,826:
 
button.special:hover,
 
button.special:hover,
 
.button.special:hover {
 
.button.special:hover {
−
background-color: #6a588e;
+
background-color:#f2efe8;
 
}
 
}
  
Line 2,854: Line 2,834:
 
button.special:active,
 
button.special:active,
 
.button.special:active {
 
.button.special:active {
−
background-color: #45558d;
+
background-color:#f2efe8;
 
}
 
}
  
Line 2,931: Line 2,911:
 
.features article {
 
.features article {
 
padding: 1.75em 1.75em 0.1em 1.75em ;
 
padding: 1.75em 1.75em 0.1em 1.75em ;
−
background-color: #353849;
+
background-color: #f2efe8;
 
border-radius: 5px;
 
border-radius: 5px;
 
margin: 1.5em 3em 1.5em 0;
 
margin: 1.5em 3em 1.5em 0;
Line 3,205: Line 3,185:
 
transition: opacity 0.35s ease, transform 0.35s ease;
 
transition: opacity 0.35s ease, transform 0.35s ease;
 
-webkit-overflow-scrolling: touch;
 
-webkit-overflow-scrolling: touch;
−
background: #4c5c96;
+
background: #f2efe8;
 
border-radius: 5px;
 
border-radius: 5px;
 
display: block;
 
display: block;
Line 3,261: Line 3,241:
  
 
#menu .links li a:hover {
 
#menu .links li a:hover {
−
background: #45558d;
+
background:#f2efe8;
 
}
 
}
  
Line 3,305: Line 3,285:
  
 
#banner {
 
#banner {
−
padding: 10em 0 4.75em 0 ;
+
padding: 20em 0 15em 0 ;
 
}
 
}
  
Line 3,392: Line 3,372:
 
#banner {
 
#banner {
 
padding: 7em 0 8.25em 0 ;
 
padding: 7em 0 8.25em 0 ;
−
background-color: #4221af;
+
background-color: #5d48a0;
 
background-image: linear-gradient(to top, rgba(46, 49, 65, 0.8), rgba(46, 49, 65, 0.8)), url("../../images/bg.jpg");
 
background-image: linear-gradient(to top, rgba(46, 49, 65, 0.8), rgba(46, 49, 65, 0.8)), url("../../images/bg.jpg");
 
background-size: auto, cover;
 
background-size: auto, cover;
Line 3,502: Line 3,482:
 
#wrapper > header {
 
#wrapper > header {
 
padding: 9em 0 6.25em 0 ;
 
padding: 9em 0 6.25em 0 ;
−
background-color: #4221af;
+
background-color: #5d48a0;
 
background-image: linear-gradient(to top, rgba(46, 49, 65, 0.8), rgba(46, 49, 65, 0.8)), url("../../images/bg.jpg");
 
background-image: linear-gradient(to top, rgba(46, 49, 65, 0.8), rgba(46, 49, 65, 0.8)), url("../../images/bg.jpg");
 
background-size: auto, cover;
 
background-size: auto, cover;
Line 3,545: Line 3,525:
  
 
.wrapper {
 
.wrapper {
−
background-color: #4221af;
+
background-color: #5d48a0;
 
margin: 6.5em 0;
 
margin: 6.5em 0;
 
position: relative;
 
position: relative;
Line 3,555: Line 3,535:
  
 
.wrapper:before {
 
.wrapper:before {
−
box-shadow: inset 0 -1px 0 0 #4221af, 0 1px 0 0 #4221af;
+
box-shadow: inset 0 -1px 0 0 #5d48a0, 0 1px 0 0 #5d48a0;
 
}
 
}
  
 
.wrapper:after {
 
.wrapper:after {
−
box-shadow: inset 0 -1px 0 0 #4221af, 0 1px 0 0 #4221af;
+
box-shadow: inset 0 -1px 0 0 #5d48a0, 0 1px 0 0 #5d48a0;
 
}
 
}
  
Line 3,607: Line 3,587:
  
 
.wrapper.style2 {
 
.wrapper.style2 {
−
background-color: #353849;
+
background-color: #f2efe8;
 +
background-image: url("https://static.igem.org/mediawiki/2017/9/92/Asijigem-designbanner.png")
 
}
 
}
  
 
.wrapper.style2:before, .wrapper.style2:after {
 
.wrapper.style2:before, .wrapper.style2:after {
−
background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpolygon points='0,100 100,0 100,100' style='fill:%23353849%3B' /%3E%3C/svg%3E");
+
 
 
}
 
}
  
 
.wrapper.style2:before {
 
.wrapper.style2:before {
−
box-shadow: inset 0 -1px 0 0 #353849, 0 1px 0 0 #353849;
+
box-shadow: inset 0 -1px 0 0 #f2efe8, 0 1px 0 0 #f2efe8;
 
}
 
}
  
 
.wrapper.style2:after {
 
.wrapper.style2:after {
−
box-shadow: inset 0 -1px 0 0 #353849, 0 1px 0 0 #353849;
+
box-shadow: inset 0 -1px 0 0 #f2efe8, 0 1px 0 0 #f2efe8;
 
}
 
}
  
 
.wrapper.style3 {
 
.wrapper.style3 {
−
background-color: #3d4051;
+
background-color: #c2d4d8;
 
}
 
}
  
 
.wrapper.style3:before, .wrapper.style3:after {
 
.wrapper.style3:before, .wrapper.style3:after {
−
background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpolygon points='0,100 100,0 100,100' style='fill:%233d4051%3B' /%3E%3C/svg%3E");
+
 
 
}
 
}
  
 
.wrapper.style3:before {
 
.wrapper.style3:before {
−
box-shadow: inset 0 -1px 0 0 #3d4051, 0 1px 0 0 #3d4051;
+
box-shadow: inset 0 -1px 0 0 #c2d4d8, 0 1px 0 0 #c2d4d8;
 
}
 
}
  
 
.wrapper.style3:after {
 
.wrapper.style3:after {
−
box-shadow: inset 0 -1px 0 0 #3d4051, 0 1px 0 0 #3d4051;
+
box-shadow: inset 0 -1px 0 0 #c2d4d8, 0 1px 0 0 #c2d4d8;
 
}
 
}
  
Line 3,643: Line 3,624:
  
 
.wrapper.style4:before, .wrapper.style4:after {
 
.wrapper.style4:before, .wrapper.style4:after {
−
background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpolygon points='0,100 100,0 100,100' style='fill:%23454858%3B' /%3E%3C/svg%3E");
+
 
 
}
 
}
  
Line 3,659: Line 3,640:
  
 
.wrapper.style5:before, .wrapper.style5:after {
 
.wrapper.style5:before, .wrapper.style5:after {
−
background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpolygon points='0,100 100,0 100,100' style='fill:%234d5060%3B' /%3E%3C/svg%3E");
+
 
 
}
 
}
  
Line 3,675: Line 3,656:
  
 
.wrapper.style6:before, .wrapper.style6:after {
 
.wrapper.style6:before, .wrapper.style6:after {
−
background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpolygon points='0,100 100,0 100,100' style='fill:%23555867%3B' /%3E%3C/svg%3E");
+
 
 
}
 
}
  
Line 3,687: Line 3,668:
  
 
.wrapper.spotlight {
 
.wrapper.spotlight {
−
background-color: #4c5c96;
+
background-color: #f2efe8;
 
}
 
}
  
 
.wrapper.spotlight:before, .wrapper.spotlight:after {
 
.wrapper.spotlight:before, .wrapper.spotlight:after {
−
background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpolygon points='0,100 100,0 100,100' style='fill:%234c5c96%3B' /%3E%3C/svg%3E");
+
 
 
}
 
}
  
 
.wrapper.spotlight:before {
 
.wrapper.spotlight:before {
−
box-shadow: inset 0 -1px 0 0 #4c5c96, 0 1px 0 0 #4c5c96;
+
box-shadow: inset 0 -1px 0 0 #f2efe8, 0 1px 0 0 #f2efe8;
 
}
 
}
  
 
.wrapper.spotlight:after {
 
.wrapper.spotlight:after {
−
box-shadow: inset 0 -1px 0 0 #4c5c96, 0 1px 0 0 #4c5c96;
+
box-shadow: inset 0 -1px 0 0 #f2efe8, 0 1px 0 0 #f2efe8;
 
}
 
}
  
Line 3,748: Line 3,729:
  
 
.wrapper.spotlight.style2 {
 
.wrapper.spotlight.style2 {
−
background-color: #45558d;
+
background-color:#f2efe8;
 
}
 
}
  
 
.wrapper.spotlight.style2:before, .wrapper.spotlight.style2:after {
 
.wrapper.spotlight.style2:before, .wrapper.spotlight.style2:after {
−
background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpolygon points='0,100 100,0 100,100' style='fill:%2345558d%3B' /%3E%3C/svg%3E");
+
 
 
}
 
}
  
 
.wrapper.spotlight.style2:before {
 
.wrapper.spotlight.style2:before {
−
box-shadow: inset 0 -1px 0 0 #45558d, 0 1px 0 0 #45558d;
+
box-shadow: inset 0 -1px 0 0#f2efe8, 0 1px 0 0#f2efe8;
 
}
 
}
  
 
.wrapper.spotlight.style2:after {
 
.wrapper.spotlight.style2:after {
−
box-shadow: inset 0 -1px 0 0 #45558d, 0 1px 0 0 #45558d;
+
box-shadow: inset 0 -1px 0 0#f2efe8, 0 1px 0 0#f2efe8;
 
}
 
}
  
 
.wrapper.spotlight.style3 {
 
.wrapper.spotlight.style3 {
−
background-color: #3f4e85;
+
 +
text-align: left;
 +
width: 1440px;
 +
padding: 0px;
 +
margin: 0 auto;
 +
height: 100%;
 +
overflow-x:hidden;
 
}
 
}
  
 
.wrapper.spotlight.style3:before, .wrapper.spotlight.style3:after {
 
.wrapper.spotlight.style3:before, .wrapper.spotlight.style3:after {
−
background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpolygon points='0,100 100,0 100,100' style='fill:%233f4e85%3B' /%3E%3C/svg%3E");
+
 
 
}
 
}
  
 
.wrapper.spotlight.style3:before {
 
.wrapper.spotlight.style3:before {
−
box-shadow: inset 0 -1px 0 0 #3f4e85, 0 1px 0 0 #3f4e85;
+
box-shadow: inset 0 -1px 0 0#f2efe8, 0 1px 0 0#f2efe8;
 
}
 
}
  
 
.wrapper.spotlight.style3:after {
 
.wrapper.spotlight.style3:after {
−
box-shadow: inset 0 -1px 0 0 #3f4e85, 0 1px 0 0 #3f4e85;
+
box-shadow: inset 0 -1px 0 0#f2efe8, 0 1px 0 0#f2efe8;
 
}
 
}
  
 
.wrapper.spotlight.style4 {
 
.wrapper.spotlight.style4 {
−
background-color: #39477c;
+
background-color:#f2efe8;
 
}
 
}
  
 
.wrapper.spotlight.style4:before, .wrapper.spotlight.style4:after {
 
.wrapper.spotlight.style4:before, .wrapper.spotlight.style4:after {
−
background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpolygon points='0,100 100,0 100,100' style='fill:%2339477c%3B' /%3E%3C/svg%3E");
+
 
 
}
 
}
  
 
.wrapper.spotlight.style4:before {
 
.wrapper.spotlight.style4:before {
−
box-shadow: inset 0 -1px 0 0 #39477c, 0 1px 0 0 #39477c;
+
box-shadow: inset 0 -1px 0 0#f2efe8, 0 1px 0 0#f2efe8;
 
}
 
}
  
 
.wrapper.spotlight.style4:after {
 
.wrapper.spotlight.style4:after {
−
box-shadow: inset 0 -1px 0 0 #39477c, 0 1px 0 0 #39477c;
+
box-shadow: inset 0 -1px 0 0#f2efe8, 0 1px 0 0#f2efe8;
 
}
 
}
  
 
.wrapper.spotlight.style5 {
 
.wrapper.spotlight.style5 {
−
background-color: #324072;
+
background-color:#f2efe8;
 
}
 
}
  
 
.wrapper.spotlight.style5:before, .wrapper.spotlight.style5:after {
 
.wrapper.spotlight.style5:before, .wrapper.spotlight.style5:after {
−
background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpolygon points='0,100 100,0 100,100' style='fill:%23324072%3B' /%3E%3C/svg%3E");
+
 
 
}
 
}
  
 
.wrapper.spotlight.style5:before {
 
.wrapper.spotlight.style5:before {
−
box-shadow: inset 0 -1px 0 0 #324072, 0 1px 0 0 #324072;
+
box-shadow: inset 0 -1px 0 0#f2efe8, 0 1px 0 0#f2efe8;
 
}
 
}
  
 
.wrapper.spotlight.style5:after {
 
.wrapper.spotlight.style5:after {
−
box-shadow: inset 0 -1px 0 0 #324072, 0 1px 0 0 #324072;
+
box-shadow: inset 0 -1px 0 0#f2efe8, 0 1px 0 0#f2efe8;
 
}
 
}
  
 
.wrapper.spotlight.style6 {
 
.wrapper.spotlight.style6 {
−
background-color: #2d3a69;
+
background-color:#f2efe8;
 
}
 
}
  
 
.wrapper.spotlight.style6:before, .wrapper.spotlight.style6:after {
 
.wrapper.spotlight.style6:before, .wrapper.spotlight.style6:after {
−
background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpolygon points='0,100 100,0 100,100' style='fill:%232d3a69%3B' /%3E%3C/svg%3E");
+
 
 
}
 
}
  
 
.wrapper.spotlight.style6:before {
 
.wrapper.spotlight.style6:before {
−
box-shadow: inset 0 -1px 0 0 #2d3a69, 0 1px 0 0 #2d3a69;
+
box-shadow: inset 0 -1px 0 0#f2efe8, 0 1px 0 0#f2efe8;
 
}
 
}
  
 
.wrapper.spotlight.style6:after {
 
.wrapper.spotlight.style6:after {
−
box-shadow: inset 0 -1px 0 0 #2d3a69, 0 1px 0 0 #2d3a69;
+
box-shadow: inset 0 -1px 0 0#f2efe8, 0 1px 0 0#f2efe8;
 
}
 
}
  
Line 3,990: Line 3,977:
  
 
#footer {
 
#footer {
−
background-color: #4221af;
+
background-color: #5d48a0;
 
background-image: linear-gradient(to top, rgba(46, 49, 65, 0.8), rgba(46, 49, 65, 0.8)), url("../../images/bg.jpg");
 
background-image: linear-gradient(to top, rgba(46, 49, 65, 0.8), rgba(46, 49, 65, 0.8)), url("../../images/bg.jpg");
 
background-size: auto, cover;
 
background-size: auto, cover;
Line 4,083: Line 4,070:
  
 
body {
 
body {
−
background-color: #4221af;
+
background-color: #5d48a0;
 
background-image: url("../../images/bg.jpg");
 
background-image: url("../../images/bg.jpg");
 
background-size: cover;
 
background-size: cover;
Line 4,276: Line 4,263:
  
 
#menu {
 
#menu {
−
background: #4221af;
+
background: #5d48a0;
 
}
 
}
  
Line 4,286: Line 4,273:
  
 
#header {
 
#header {
−
background-color: #353849;
+
background-color: #f2efe8;
 
}
 
}
  

Latest revision as of 15:58, 1 November 2017

Home
Team
Team Collaborations Attributions
Project
Description Design Experiments Notebook Results
Parts Safety Human Practices
IGEM ASIJ TOKYO

Design

In the course of our experimentation, perhaps the most crucial step was the design of our experiment, prior to its actual carrying out. Below, we detail the steps we took and the ideas we came up with in order to reach our final goal.

Our Process

We began our experiments with a competent cell check to find the optimal concentration of DNA for working with NEB 5-alpha Competent E. coli. Next, we found the ideal promoter strength for the growth of COX-2 and c-Myc by performing the Gibson Assembly with three different Anderson promoters of different strengths. In order to observe phenotypic proof of these results the competent cells were transformed and plated, as well as expanded into solution so both the number of colonies, as well as the optical density of the solutions were used to support the optimal promoter strength.

We then moved on to find the most efficient promoter-to-binding domain combinations for both the c-Myc and COX-2 genes by testing a variety of them and seeing which produced the most glowing colonies in the presence of rapamycin. We also utilized this phase to make sure that the combinations glowed only when rapamycin was present. We concluded this test with the combinations of the COX-2 promoter with the FRB domain, and the c-Myc promoter with the FKBP domain being the most efficient combinations. The last step was to ensure that the construct glowed only when all parts were present, and to prove that the promoters had altered the shape of the nonspecific binding domains to become specific to the corresponding proteins. We did this by expanding incomplete combinations into tubes and observing whether they glowed or not. We found that none of the tubes glowed, no matter if they were missing a gene, or one of the promoter-reporter systems. The only tube that glowed was the one containing both COX-2 and c-Myc promoter-reporter systems, both respective genes, as well as rapamycin. .

Future Directions

With more time, we would like to implement our current model into a yeast system. This would prove advantageous as it will confirm the working of our model in an eukaryotic  organism. Using yeast, followed by flow cytometry, would allow us to collect quantitative data that could be better analyzed. Additionally, we would work on the upregulation of c-Myc production for the effectiveness of our experiment. This was a limiting factor in our experiment and continues to be a weak point in our design and planning. Most importantly, our team would like to develop a 3D prototype for a home-kit that would diagnose CRC. Our goal would be to develop a home-diagnosis kit similar in method and design to the home-pregnancy kit, where the product would be commercially approved and easily available. Our model would consist of two solutions that would be combined with the addition of a sample of fecal matter. This would address a major component of our project goal in developing a more convenient treatment and detection method for colorectal cancer.