Difference between revisions of "Team:Utrecht/testpage"

Line 1: Line 1:
 
{{Utrecht/Head}}
 
{{Utrecht/Head}}
 
{{Utrecht/Navigation}}
 
{{Utrecht/Navigation}}
 +
 +
<!DOCTYPE html>
 +
<head>
 +
<meta charset="UTF-8" />
 +
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
 +
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 +
<link rel = "stylesheet"
 +
href = "test.css">
 +
<script src="jquery-latest.js"></script>
 +
<script src="jquery.hoverIntent.js"></script>
 +
<script src="MyFunctions.js"></script>
 +
</head>
  
 
<html>
 
<html>
 +
<div class="topnav" id = "topMenu">
  
−
<script>  
+
<a class = "logo" href = "https://2018.igem.org/Team:Utrecht">
 +
<img src="images/logo.png" id="logo"> </a>
  
−
$(document).ready(function(){
+
<div class="menuM" id="myMenu">
  
−
$("#menuProject").addClass('active');
+
<a href="https://2018.igem.org/Team:Utrecht/ProjectOverview" id = "menuProject"> <img src = "https://static.igem.org/mediawiki/2018/3/34/T--Utrecht--2018--symbolProject-Navigation.png" alt = "Laboratorium" id = "navSymbol"></a>
−
defSubmenu = submenuProject;
+
<a href="https://2018.igem.org/Team:Utrecht/Team" id="menuAboutUs"> <img src = "https://static.igem.org/mediawiki/2018/7/72/T--Utrecht--2018--symbolAboutUs-Navigation.png" alt = "navSymbolAU" id = "navSymbol"></a>
−
defActive = '#submenuDescription';
+
<a href="https://2018.igem.org/Team:Utrecht/Laboratory" id="menuLaboratory"> <img src = "https://static.igem.org/mediawiki/2018/6/67/T--Utrecht--2018--symbolLaboratorium-Navigation.png" alt = "Laboratory" id = "navSymbol"></a>
−
resetSubmenu();
+
<a href="https://2018.igem.org/Team:Utrecht/HumanPractices" id = "menuHumanPractices"><img src = "https://static.igem.org/mediawiki/2018/2/2a/T--Utrecht--2018--symbolHumanPractices-Navigation.png" alt = "navSymbolHP" id = "navSymbol"></a>
 +
<a href="https://2018.igem.org/Team:Utrecht/Jamboree" id = "menuJamboree"> <img src = "https://static.igem.org/mediawiki/2018/b/b3/T--Utrecht--2018--symbolJamboree-Navigation.png" alt = "navSymbolJ" id = "navSymbol"></a>
 +
<a href="https://2018.igem.org/Team:Utrecht/Credit" id = "menuCredit"> <img src = "https://static.igem.org/mediawiki/2018/c/cc/T--Utrecht--2018--symbolCredit-Navigation.png" alt = "navSymbolAck" id = "navSymbol"></a>
 +
 
 +
 
 +
</div>
  
−
});
 
  
−
</script>
 
  
 
<style>
 
<style>
 +
.customelementM5A{
 +
display:none;
 +
}
 +
.customelementM5B{
 +
display:none;
 +
}
  
 +
</style>
  
 +
<div class="submenuM" id="mySubmenu"></div>
 +
</div>
 +
</div>
  
 +
<body>
  
−
</style>
+
<script>
 +
var inactiveJuly, inactiveAugust, inactiveSeptember, activeContent;
  
 +
function changeContent(selector) {
  
−
<div class = "sidenav" id = "side-menu">
+
$(".monthHeader").hide();
−
  <ul>
+
$("button").removeClass("active");
−
    <li><a href="#main">Main</a></li>
+
−
     <li><a href="#part2">Part 2</a></li>
+
if(selector == 1){
−
  </ul>
+
activeContent = 'I';
−
</div>
+
inactiveJuly = [10, 12, 19];
 +
     inactiveAugust = [11, 14, 29];
 +
inactiveSeptember = [15, 16, 19];
 +
}
 +
else if(selector == 2){
 +
activeContent = 'R';
 +
inactiveJuly = [10, 12, 19];
 +
    inactiveAugust = [11, 14, 29];
 +
inactiveSeptember = [15, 16, 19];
 +
}
 +
else if(selector == 3){
 +
activeContent = 'B';
 +
inactiveJuly = [10, 12, 19];
 +
    inactiveAugust = [11, 14, 29];
 +
inactiveSeptember = [15, 16, 19];
 +
}
 +
else if(selector == 4){
 +
activeContent = 'M';
 +
inactiveJuly = [10, 12, 19];
 +
    inactiveAugust = [11, 14, 29];
 +
inactiveSeptember = [15, 16, 19];
 +
}
  
 +
    // Show the current tab, and add an "active" class to the button that opened the tab
 +
$("#monthHeader"+ activeContent).show();
 +
    $("#tab"+activeContent).addClass("active");
 +
createMonth(31, 4, inactiveJuly, 'J');
 +
}
  
−
<body>
+
function createMonth(lengthMonth, emptyDays, inactiveDays, m){
 +
var j = 1;
 +
var cont = $(".monthContainer");
 +
cont.empty();
 +
for(var i = 0; i < emptyDays; i++){
 +
cont.append('<div class = "emptyDay"></div>');
 +
j++;
 +
}
 +
for(i = 1; i < lengthMonth+1;i++){
 +
    if(((j+1) % 7) && (j % 7)){
 +
if(inactiveDays.indexOf(i) == -1){
 +
cont.append('<div class = "day" id = "day'+ activeContent + m + i + '">'+ i + '</div>');
 +
}
 +
else{
 +
cont.append('<div class = "inactiveDay">'+ i + ' </div>');
 +
}
 +
}
 +
else{
 +
cont.append('<div class = "inactiveDay">'+ i + ' </div>');
 +
}
 +
j++
 +
}
 +
 
 +
$('.month').hide();
 +
$('#month'+ activeContent + m).show();
 +
 
 +
resetCalender();
 +
}
 +
 
 +
function resetCalender(){
 +
$(".day").click(function() {
 +
    // Declare all variables
 +
    var i, entryday;
 +
 +
entryday = $(this).attr('id');
 +
window.alert(entryday);
 +
 
 +
    // Get all elements with class="tablinks" and remove the class "active"
 +
    $(".day").removeClass("active");
 +
$(".customelementM5B").hide();
 +
 
 +
    // Show the current tab, and add an "active" class to the button that opened the tab
 +
    $(this).addClass("active");
 +
$("#entry"+entryday).show();
 +
 
 +
});
 +
}
 +
 
 +
$(document).ready(function(){
 +
changeContent(1);
 +
resetCalender();
 +
});
  
−
<button onclick="topFunction()" id="BackToTop" title="Go to top">Top</button>
 
  
−
<script>
 
 
</script>
 
</script>
 +
 +
 +
 
<div class = "customHeader2">
 
<div class = "customHeader2">
−
PROJECT DESCRIPTION
+
PLACEHOLDER
 +
</div>
 +
<div class="anotherWrapper">
 +
<!-- Tab links -->
 +
<div class="tab">
 +
  <button id = "tabI" onclick='changeContent(1)'>Interlab</button>
 +
  <button id = "tabR" onclick='changeContent(2)'>Receptor Assay</button>
 +
  <button id = "tabB" onclick='changeContent(3)'>BRET Assay</button>
 +
  <button id = "tabM" onclick='changeContent(4)'>Methylation Assay</button>
 
</div>
 
</div>
  
−
<div class = "customelementM4A">
 
−
<section  id="main">
 
−
<p>Humans have been polluting water with natural products for hundreds of years. However, during the last decennia the amount of unnatural chemicals that are being produced, used and carelessly disposed, rapidly increase. The disastrous effects of water pollution by emerging contaminants on animals, humans and environment becomes more and more evident.</p>
 
−
<p>Emerging contaminants are pollutants with a rising concern, for example ecological systems and human health.
 
−
Around a 140.000 kilograms of medical waste a year is present in dutch waters. This leads to huge consequences in ecological systems and human health (Joost van Kasteren, 2016; Nieuwenhuis, 2016). One of the biggest source of the pollution are hospitals (Belfroid et al., 1999). “The possible effects of pharmaceuticals include behavioral changes, tissue damage and effects on reproduction of water organisms, as a result of which the ecosystem as a whole may be disrupted.”- RIVM (Moermond, Smit, van Leerdam, van der Aa, N. G. F. M., & montforts, M. H. M. M., 2016).
 
−
The first step in analysing and mitigating the effects is to detect these contaminants in water and locate the source of the contamination.</p>
 
−
<p>Currently, a set of biosensors are used. These however are not specific at all. Only stress is detected, after which an alarm will ring. Examples of these biosensors are algae and daphnia. As another disadvantage, the biosensor might get used the pollution, resulting in needing a higher concentration of contaminants before performing stress (Epema, 2018). </p>
 
−
<p>Another example is the microtox-test. It is based on a bioluminescent bacteria: Photobacterium phosphoreum. The bacterium is continuously luminescent, through metabolizing organic compounds. When stressed by pollutions/contimaniants the bacterium stops metabolising light. If the signal gets below 50%, pollution is confirmed. These pollution however, is quite broad and does not give an indication of the kind of contaminant or any idea about the concentration (ALS global, 2018; Johnson, 2005).</p>
 
−
<p>These methods are used by rijkswaterstaat, a company that controls water quality in surface water. For these controls, a limit in concentration is set. If this limit is exceeded, purification of the water needs the find place (Epema, 2018).</p>
 
−
<p>But before surface water becomes surface water, it is cleaned by sewage treatment. However, sewage treatment only focuses on cleaning organic compounds, neglecting the pharmaceuticals. An essay indicating which groups of compounds that get in the treatment and out is valuable information indicating the efficiency of the treatment. The ideal biosensor would be one that  can detect specific groups of compounds at once with a direct indication of concentration. With an indication of the toxic compound the search in the mass spectrometer is much easier. This is where our biosensor comes in.</p>
 
−
</br>
 
−
</section>
 
−
<section id = "part2">
 
−
<p>We will be using the chemotaxis pathway of the bacteria Escherichia coli. The chemotaxis pathway allows the bacterium to swim towards substances it needs to survive and is mediated by a highly conserved, specific, and well-studied pathway. It consists of a two-component system, a tumbling state, in which the bacteria awaits new stimuli, and a running state, in which it responds to a detected stimulus. When the receptor has no attractant bound, the chemotaxis pathway is constitutively active. In this case the Tar receptor activates the kinase CheA. CheA subsequently transfers its phosphoryl group to the response regulator CheY. Phosphorylated CheY (CheY-P) translocates to the flagellar motor, where it interacts with motor proteins FliM and FliN. This causes the flagellar motor to change its rotational direction, causing the bacterium to tumble. CheY-P is dephosphorylated by CheZ. Upon binding of an attractant, the Tar receptor becomes inactivated and the equilibrium of the pathway is set to low activity, causing the bacterium to switch to a running state.</p>
 
−
<p>We will perform multiple adjustments to make our biosensor as good as possible.</p>
 
−
<center><img src="https://static.igem.org/mediawiki/2018/5/53/T--Utrecht--2018--Chemotaxis_Pathway--Main002.png" alt="Chemotaxis_Pathway.png" width  = 50% height = auto></center>
 
−
<p> As a first step a light signal will be coupled to the binding of a substance with the receptor. A combination of LuxAB and eYFP is used to make BRET (Bioluminescence Resonance Energy Transfer).  In close proximity, luxAB will activate eYFP. EYFP activation results in a detectable light. LuxAB and eYFP proteins are coupled to cq. CheZ and CheY. When no substance is bound, CheY and CheZ bind, causing a light signal to appear.  If a substance binds, the light signal will disappear. The decrease in light signal is a method to detect whether a compound has bind or not.</p>
 
−
<center><img src="https://static.igem.org/mediawiki/2018/c/ce/T--Utrecht--2018--BRET_Assay--Main003.png" alt="BRET_Assay.png" width  = 60% height = auto></center>
 
−
<p>Secondly we will customize the sensory domain while the rest of the pathway remains intact. As new sensory domain, the adrenaline receptor is used. With this receptor we hope to detect adrenaline and adrenaline-like substances. This concept provides a more broad range of detection with one receptor. Later we hope to change the sensory domain to multiple receptors, allowing to detect more groups of contaminants in water. The ligand binding domains of the cytokinin receptor PcrK, and the epinephrine receptor QseC are similar to the intracellular domain of the E. coli Tar receptor. We opt to use three different fusion points for both receptors based on previously published successful recombinant chemotaxis receptors. We will modify these sensors so they can measure different concentrations of ligand by modifying the methyl accepting residues of the Tar methylation helixes, and expressing different levels of recombinant receptor.</p>
 
−
<p>Finally the sensory domain of the biosensor is methylated on 4 sites, resulting in a change in affinity of the receptor. This allows us to measure different concentrations. The methylations will be accomplished with SDM (site directed mutagenesis).</p>
 
−
</br>
 
−
<p>In conclusion, our biosensor is a cost-effective and durable method to measure emerging contaminants in drinking or surface water. This can be used to detect which contaminants are present and can function as a control step to check if the purification of  water succeeded. It will also provide an indication of the concentration level.</p>
 
−
</section>
 
−
<div class = "references" id = "ref">
 
−
<ul>
 
−
<li>ALS global. (2018). EnviroMail™ 120 - microtox toxicity test. Retrieved from <a href="https://www.alsglobal.com/myals/news/2018/02/enviromail-120-microtox-toxicity-test">https://www.alsglobal.com/myals/news/2018/02/enviromail-120-microtox-toxicity-test </a></li>
 
−
<li>Belfroid, A. C., Van der Horst, A., Vethaak, A. D., Schäfer, A. J., Rijs, G. B. J., Wegener, J., & Cofino, W. P. (1999). Analysis and occurrence of estrogenic hormones and their glucuronides in surface water and waste water in the netherlands. Science of the Total Environment, 225(1), 101-108. 10.1016/S0048-9697(98)00336-2 Retrieved from <a href="http://www.sciencedirect.com/science/article/pii/S0048969798003362">http://www.sciencedirect.com/science/article/pii/S0048969798003362</a></li>
 
−
<li>Epema, O. (2018). Analytical chemist, head of laboratory of inorganic analysis at rijkswaterstaat</li>
 
−
<li>Johnson, B. T. (2005). Microtox® acute toxicity test. In C. Blaise, & J. Férard (Eds.), Small-scale freshwater toxicity investigations: Volume 1 - toxicity test methods (pp. 69-105) Springer Netherlands. Retrieved from //ww.springer.com/la/book/9781402031199</li>
 
−
<li>Joost van Kasteren. (2016). 140.000 kilo medicijnresten per jaar, in ons water. hoe krijgen we die eruit? Retrieved from <a href ="https://www.nrc.nl/nieuws/2016/11/26/met-ozon-bubbel-je-slaappil-uit-het-water-5523164-a1533689">https://www.nrc.nl/nieuws/2016/11/26/met-ozon-bubbel-je-slaappil-uit-het-water-5523164-a1533689</a></li>
 
−
<li>Moermond, C. T. A., Smit, C. E., van Leerdam, R. C., van der Aa, N. G. F. M., & montforts, M. H. M. M. (2016). Geneesmiddelen en waterkwaliteit. ().</li>
 
−
<li>Nieuwenhuis, M. (2016). RIVM: Medicijnen maken het water ziek. Retrieved from <a href="https://www.ad.nl/binnenland/rivm-medicijnen-maken-het-water-ziek~a89fa38e"> https://www.ad.nl/binnenland/rivm-medicijnen-maken-het-water-ziek~a89fa38e</a></li>
 
−
</ul>
 
 
</div>
 
</div>
 +
 +
<div class="calenderContainer">
 +
<!-- Calender Interlab --------------------------------------------------------------
 +
------------------------------------------------------------------------------------>
 +
 +
<div id="monthHeaderI" class="monthHeader" style = "display: block">
 +
<div class="month" id = "monthIJ">
 +
    <div onclick="createMonth(31, 2, inactiveAugust, 'A');" class="next">&#10095;</div>
 +
    <div>July</div>
 +
</div> 
 
   
 
   
 +
<div class="month" id = "monthIA">
 +
    <div onclick="createMonth(31, 4, inactiveJuly, 'J');" class="prev">&#10094;</div>
 +
    <div onclick="createMonth(30, 5, inactiveSeptember, 'S');" class="next">&#10095;</div>
 +
    <div>August</div>
 
</div>
 
</div>
  
 +
<div class="month" id = "monthIS">
 +
    <div onclick="createMonth(31, 2, inactiveAugust, 'A');" class="prev">&#10094;</div>
 +
    <div>September</div>
 
</div>
 
</div>
  
 +
</div>
 +
 +
<!-- Calender Receptor Assay --------------------------------------------------------------
 +
--------------------------------------------------------------------------------------------->
 +
 +
<div id="monthHeaderR" class="monthHeader">
 +
<div class="month" id = "monthRJ" style ="display: block">
 +
    <div onclick="createMonth(31, 2, inactiveAugust, 'A');" class="next">&#10095;</div>
 +
    <div>July</div>
 +
</div> 
 +
 +
<div class="month" id = "monthRA">
 +
    <div onclick="createMonth(31, 4, inactiveJuly, 'J');" class="prev">&#10094;</div>
 +
    <div onclick="createMonth(30, 5, inactiveSeptember, 'S');" class="next">&#10095;</div>
 +
    <div>August</div>
 +
</div>
 +
 +
<div class="month" id = "monthRS">
 +
    <div onclick="createMonth(31, 2, inactiveAugust,'A');" class="prev">&#10094;</div>
 +
    <div>September</div>
 +
</div>
 +
 +
</div>
 +
 +
<!-- Calender BRET Assay ---------------------------------------------------------------------
 +
--------------------------------------------------------------------------------------------->
 +
 +
<div id="monthHeaderB" class="monthHeader">
 +
<div class="month" id = "monthBJ" style ="display: block">
 +
    <div onclick="createMonth(31, 2, inactiveAugust,'A');" class="next">&#10095;</div>
 +
    <div>July</div>
 +
</div> 
 +
 +
<div class="month" id = "monthBA">
 +
    <div onclick="createMonth(31, 4, inactiveJuly, 'J');" class="prev">&#10094;</div>
 +
    <div onclick="createMonth(30, 5, inactiveSeptember, 'S');" class="next">&#10095;</div>
 +
    <div>August</div>
 +
</div>
 +
 +
<div class="month" id = "monthBS">
 +
    <div onclick="createMonth(31, 2, inactiveAugust, 'A');" class="prev">&#10094;</div>
 +
    <div>September</div>
 +
</div>
 +
 +
</div>
 +
 +
 +
<!-- Calender Methylation Assay --------------------------------------------------------------
 +
--------------------------------------------------------------------------------------------->
 +
 +
<div id="monthHeaderM" class="monthHeader">
 +
<div class="month" id = "monthMJ" style ="display: block">
 +
    <div onclick="createMonth(31, 2, inactiveAugust, 'A');" class="next">&#10095;</div>
 +
    <div>July</div>
 +
</div> 
 +
 +
<div class="month" id = "monthMA">
 +
    <div onclick="createMonth(31, 4, inactiveJuly, 'J');" class="prev">&#10094;</div>
 +
    <div onclick="createMonth(30, 5, inactiveSeptember, 'S');" class="next">&#10095;</div>
 +
    <div>August</div>
 +
</div>
 +
 +
<div class="month" id = "monthMS">
 +
    <div onclick="createMonth(31, 2, inactiveAugust, 'A');" class="prev">&#10094;</div>
 +
    <div>September</div>
 +
</div>
 +
 +
</div>
 +
 +
<div class="weekdays">
 +
  <div class="weekday">Mo</div>
 +
  <div class="weekday">Tu</div>
 +
  <div class="weekday">We</div>
 +
  <div class="weekday">Th</div>
 +
  <div class="weekday">Fr</div>
 +
  <div class="weekday">Sa</div>
 +
  <div class="weekday">Su</div>
 +
</div>
 +
 +
<div class="monthContainer"></div>
 +
</div>
 +
 +
</div>
 +
 +
<!-- Notebook Interlab -----------------------------------------------------------------------
 +
--------------------------------------------------------------------------------------------->
 +
 +
<div class = "notebookContainer">
 +
 +
<div class="customelementM5B" id = "entrydayIJ1">
 +
ksjdfljslfkdjlkghjfglhkjflhgkjflhgjflghjflghkjflhj
 +
</div>
 +
 +
<div class="customelementM5B" id = "entrydayIJ2">
 +
lskdfjslkjgdlkdfjgldkjlakmflsvmclkxmfklmgdmlkcvmblcmkb
 +
</div>
 +
 +
</div>
 +
 +
<div class = "notebookContainer" id = "notebookReceptorAssay">
 +
 +
<!-- Notebook Receptor Assay --------------------------------------------------------------
 +
--------------------------------------------------------------------------------------------->
 +
 +
 +
 +
<div class="customelementM5B" id = "entryday27">
 +
ksjdfljslfkdjlkghjfglhkjflhgkjflhgjflghjflghkjflhj
 +
</div>
 +
 +
<div class="customelementM5B" id = "entryday2">
 +
lskdfjslkjgdlkdfjgldkjlakmflsvmclkxmfklmgdmlkcvmblcmkb
 +
</div>
 +
 +
 +
 +
<!-- Notebook BRET Assay ---------------------------------------------------------------------
 +
--------------------------------------------------------------------------------------------->
 +
 +
 +
 +
<div class="customelementM5B" id = "entrydayB177">
 +
ksjdfljslfkdjlkghjfglhkjflhgkjflhgjflghjflghkjflhj
 +
</div>
 +
 +
<div class="customelementM5B" id = "entrydayB27">
 +
lskdfjslkjgdlkdfjgldkjlakmflsvmclkxmfklmgdmlkcvmblcmkb
 +
</div>
 +
 +
 +
<!-- Notebook Methylation Assay --------------------------------------------------------------
 +
--------------------------------------------------------------------------------------------->
 +
 +
 +
<div class="customelementM5B" id = "entrydayM277">
 +
ksjdfljslfkdjlkghjfglhkjflhgkjflhgjflghjflghkjflhj
 +
</div>
 +
 +
<div class="customelementM5B" id = "entrydayM27">
 +
lskdfjslkjgdlkdfjgldkjlakmflsvmclkxmfklmgdmlkcvmblcmkb
 +
</div>
 +
 +
</div>
 
</body>
 
</body>
  

Revision as of 17:12, 6 October 2018

<!DOCTYPE html> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0"/> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <link rel = "stylesheet" href = "test.css"> <script src="jquery-latest.js"></script> <script src="jquery.hoverIntent.js"></script> <script src="MyFunctions.js"></script> </head>

PLACEHOLDER
July
August
September
July
August
September
July
August
September
July
August
September
Mo
Tu
We
Th
Fr
Sa
Su
ksjdfljslfkdjlkghjfglhkjflhgkjflhgjflghjflghkjflhj
lskdfjslkjgdlkdfjgldkjlakmflsvmclkxmfklmgdmlkcvmblcmkb
ksjdfljslfkdjlkghjfglhkjflhgkjflhgjflghjflghkjflhj
lskdfjslkjgdlkdfjgldkjlakmflsvmclkxmfklmgdmlkcvmblcmkb
ksjdfljslfkdjlkghjfglhkjflhgkjflhgjflghjflghkjflhj
lskdfjslkjgdlkdfjgldkjlakmflsvmclkxmfklmgdmlkcvmblcmkb
ksjdfljslfkdjlkghjfglhkjflhgkjflhgjflghjflghkjflhj
lskdfjslkjgdlkdfjgldkjlakmflsvmclkxmfklmgdmlkcvmblcmkb