Team:Toronto/Project/Elementss

From 2013.igem.org

(Difference between revisions)
Line 36: Line 36:
-
<script src="epopup.js" language="JavaScript" type="text/javascript"></script>
+
!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
-
<link rel="stylesheet" href="general.css" type="text/css" >
+
<html>
 +
<head>
 +
<link rel="icon" href="favicon.ico" type="image/x-icon">
 +
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
 +
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
 +
<title>JavaScript for Hiding and Expanding Blocks of Text</title>
 +
<meta name="AUTHOR" content="Dr P Curtis">
 +
<meta name="description" content="One of a series of Technical Howto Articles">
 +
<meta name="KEYWORDS" content="Javascript, Expand, Contract, Hide">
 +
<link rel="stylesheet" href="general.css" type="text/css">
 +
<script src="epopup.js" language="JavaScript" type="text/javascript">
 +
</script>
 +
<meta content="P D Curtis" name="author">
 +
</head>
 +
<body onunload="tidy()" style=
 +
"color: rgb(0, 0, 0); background-color: rgb(255, 255, 255); background-image: url(howto-std.jpg);"
 +
alink="#0000FF" link="#0000FF" vlink="#0080FF">
 +
<table border="0" cellpadding="2" cellspacing="0" width="100%">
 +
  <tbody>
 +
    <tr>
 +
      <td class="homebar" align="center" bgcolor="white" width="10%"><a class="homebar" href=
 +
        "homepage.htm">Home</a></td>
 +
      <td class="pemcbar" align="center" bgcolor="white" width="20%"><a class="pemcbar" href=
 +
        "pemc.htm">Pauline's&nbsp;Pages</a></td>
 +
      <td class="howtobar" align="center" bgcolor="white" width="20%"><a class="howtobar" href=
 +
        "howto.htm">Howto&nbsp;Articles</a></td>
 +
      <td class="unzbar" align="center" bgcolor="white" width="20%"><a class="unzbar" href=
 +
        "nzguide.htm">Uniquely&nbsp;NZ</a></td>
 +
      <td class="sfbar" align="center" bgcolor="white" width="20%"><a class="sfbar" href=
 +
        "enterprise.htm">Small&nbsp;Firms</a></td>
 +
      <td class="srchbar" align="center" bgcolor="white" width="10%"><a class="srchbar" href=
 +
        "site-search.htm">Search</a></td>
 +
    </tr>
 +
  </tbody>
 +
</table>
 +
<table border="0" cellpadding="0" cellspacing="0" width="100%">
 +
  <tbody>
 +
    <tr>
 +
      <td><img src="gallery/transdot.gif" alt="Height Padding" height="5" width="1"></td>
 +
    </tr>
 +
    <tr>
 +
      <td class="howtotitle" align="center">JavaScript for Hiding and Expanding Blocks of Text </td>
 +
    </tr>
 +
  </tbody>
 +
</table>
 +
<p>Readers of my <a href="howto.htm">Howto Technical Articles</a> and my support pages for <a href="enterprise.htm">Small Firms</a> will know that I try to avoid Java and Javascript as much as possible on web pages as the various browsers tend to be incompatible in their interpretation and some older browsers do not support it at all. Some users deliberately turn Java and Javascript off for security or to reduce intrusive adverts. Furthermore it reduces the chances of some Search Engines indexing the pages correctly, if at all. It is however very useful to be able to have popups and to be able to expand/hide blocks of text. Expanding and Hiding is useful in our case on pages where there is a 'How one did it Story' for concealing excessive details from dead ends and also on pages like the OU pages where the information for Tutors and Students may differ in emphasis. I therefore consider this is a valid use as it is difficult to do neatly and professionally without JavaScript and/or Cascading Style Sheets.
 +
<p>The following method is based on a method used on many professional web sites and has also been expounded in a number of threads on sites. In my version it involves three small JavaScript functions. It should work in all browsers that support the W3C DOM Core, javaScript and Cascading Style Sheets. It includes a test to prevent any hang ups on browsers which do not support W3C DOM and should dislay the text if CSS is not supported. </p>
 +
<p>The template I use for all my pages contains links to a standard JavaScript file called epopup.js (in the begining it just provided popups but now has lots of other functions hence the epopup.js) and a standard Cascading Style Sheet CSS file called general.css. The JavaScript functions are added to epopup.js and the styles for the 'expander' and the expanded text are added to general.css. You could place them in the head instead- with suitable wrapping - or just create some new .css and .js files with just the code snippets below. The links to my standard files use the following code which is already in the head of almost every page:</p>
 +
<p><br>
 +
  <span class="terminaloutput">&lt;script src=&quot;epopup.js&quot; language=&quot;JavaScript&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;<br>
 +
&lt;link rel=&quot;stylesheet&quot; href=&quot;general.css&quot; type=&quot;text/css&quot; &gt;</span></p>
 +
<p>The new functions in epopup.js are: </p>
 +
<p><span class="scriptcode">/* Functions to expand and contract text in &lt;div&gt; blocks with an id */<br>
 +
  <br>
 +
  function ExpandOn(topicID){<br>
 +
  var expand=document.getElementById(topicID);<br>
 +
  if(!expand)return true;<br>
 +
  if(expand.style.display==&quot;none&quot;){<br>
 +
  expand.style.display=&quot;block&quot;<br>
 +
  } <br>
 +
  return true;<br>
 +
  }<br>
 +
  <br>
 +
  function ExpandOff(topicID){<br>
 +
  var expand=document.getElementById(topicID);<br>
 +
  if(!expand)return true;<br>
 +
  if(expand.style.display==&quot;block&quot;){<br>
 +
  expand.style.display=&quot;none&quot;<br>
 +
  }<br>
 +
  return true;<br>
 +
  } <br>
 +
  <br>
 +
  function ExpandToggle(topicID){<br>
 +
  var expand=document.getElementById(topicID);<br>
 +
  if(!expand)return true;<br>
 +
  if(expand.style.display==&quot;none&quot;){<br>
 +
  expand.style.display=&quot;block&quot;<br>
 +
  } else {<br>
 +
  expand.style.display=&quot;none&quot;<br>
 +
  }<br>
 +
  return true;<br>
 +
  }</span><br>
 +
  And the two new style for the 'expander' and to identify the expanded topic which I have added to general.css are: <br>
 +
  <br>
 +
  <span class="scriptcode">.expand {<br>
 +
  color: #000099;<br>
 +
  text-decoration: underline;<br>
 +
  font-style: italic; <br>
 +
  }<br>
 +
  .expandedblock {<br>
 +
  margin-left: 40px;<br>
 +
  margin-right: 2%;<br>
 +
  display: block;<br>
 +
  padding: 10px; <br>
 +
  background-color: #ffffff; <br>
 +
  } </span></p>
 +
<br>
 +
<a name="topicanchor1"></a>
 +
<p>You need to insert the following into the HTML to obtain the 'link' and how to wrap the 'topic' you want to be able to expand [ <span  title="Click to expand this topic or to contract a topic which has already been expanded" class="expand" onClick="return ExpandToggle('topic1')">Click to Expand and see my code to insert</span>&nbsp;] </p>
 +
<div id="topic1" class="expandedblock" style="display:none">
 +
  <p>The following is the code which was used to make the 'Expand Link' shown above </p>
 +
  <p class="scriptcode">[ &lt;span title=&quot;Click to expand this topic or to contract a topic which has already been expanded&quot; class=&quot;expand&quot; onClick=&quot;return ExpandToggle('topic1')&quot;&gt;Click to Expand and see the code to insert&lt;/span&gt;&amp;nbsp;] </p>
 +
  <p>and then you wrap all the text that you want to expand with code as below</p>
 +
  <p class="scriptcode">&lt;div id=&quot;topic1&quot; class=&quot;expandedblock&quot; style=&quot;display:none&quot;&gt; <br>
 +
    <br>
 +
&nbsp;&nbsp;Almost anything you like - I have been cautious about nesting more &lt;div&gt;s but have seen no adverse effects<br>
 +
    <br>
 +
    <b>&nbsp;&nbsp;You do however need to take care about having anchors within a hidden block of text as any links to it from, for example, an index will not work when it is hidden</b><br>
 +
    <br>
 +
&lt;/div&gt;</p>
 +
  <p>&nbsp;</p>
 +
  <p> In my implementation you also have a choice of a 'toggle' for the expansion or to make it permanent by using <b>ExpandOn(topicID)</b> instead of <b>ExpandToggle(topicID)</b> and you can also hide it by using <b>ExpandOff(topicID)</b>. </p>
 +
  <p>Note: that each block (topic) which is being expanded MUST have a different <b>id</b>. </p>
 +
  <p>The <b>class="expandedblock"</b> has indented the text and changed the background so that the extent is clearly defined.
 +
  <p><b>Tip:</b> While developing a page it is best to use style=&quot;display:block&quot; so the topic is always expanded so you can see what you are doing - you can still test as the 'expanders' will still toggle or change the state. At the end do a global replace.</p>
 +
  <p><b>Tip:</b> You do not have to use a <b>&lt;span&gt;</b> tag for the 'expander' any tag which supports <b>onclick</b> can be used. You can put the <b>onclick</b> into a link to an anchor within a hidden block to expand it before you jump to it from, for example, a table of contents. </p>
 +
  <p><b>Tip:</b>You also put it into a link to take you to the correct place when you contract a block from within itself but take care as these tricks may not be completely browser proof as they might depend on timing as well as support. The link should not have the same name as the 'id' otherwise it will not work <a href="#topicanchor1"  title="Click to hide a topic which has already been expanded"  class="expand"  onClick="return ExpandOff('topic1')">Click here to Hide it again and return to the start</a> </p>
 +
</div>
 +
<p>If you can not see the code you have not clicked the 'expander' above so try it out!
-
/* Functions to expand and contract text in <div> blocks with an id */
+
</p>  
-
function ExpandOn(topicID){
+
<h3 align="center"><a name="feedback" id="feedback"></a>Before You Leave</h3>
-
var expand=document.getElementById(topicID);
+
<center>
-
if(!expand)return true;
+
  <p align="left">I would be very pleased if visitors could spare a little time to give me some feedback - it is the only way I know who has visited, if it is useful and how I should develop it's content and the techniques used. I would be delighted if you could send comments or just let me know you have visited by <a href=
-
if(expand.style.display=="none"){
+
    "javascript:fbpopitup('contact_form.htm?Expand_and_Hide')">Sending a quick Message</a> to me.</p>
-
expand.style.display="block"
+
  <p align="center"> <a href="ubuntu.htm" title="The original page covering my experiences in making the transition from Microsoft Windows to Ubuntu Linux from which the specialist pages have been extracted">Fun with Ubuntu Linux </a>| <a href="roadtofreedom.htm" title="A progressive migration from Windows to Ubuntu for Safety, Security and Savings in Home Computing - Part 1: Preparation and securing Windows">The Road to Freedom - The Journey Starts</a> |<a href="ubuntu-basecamp.htm" title="A progressive migration from Windows to Ubuntu for Safety, Security and Savings in Home Computing - part 2: Reaching a firm foundation in Ubuntu">The Road to Freedom - Base Camp</a> | <a href="ubuntu-files.htm" title ="Mounting Drives, File Sharing between Computers running both Linux and Windows and secure access to remote machines - the prerequisites for the Backup and Synchronisation" >Ubuntu All Together - Sharing, Networking, Backup, Synchronisation and Encryption </a> | <a href="ubuntu-lookout.htm" title="Installing and setting up the main programs which interact with the outside world through the Internet along with details of sharing and synchronising between computers and PDAs">Ubuntu on the Lookout - Browsing, Email, Contacts, Calendars and Tasks</a>| <a href="ubuntu-mobile.htm" title="Using Ubuntu away from home and via mobile phones and broadband">Ubuntu on the Move </a> | <a href="ubuntu-take.htm" title="Handling Digital Photographs and Video Editing">Ubuntu on the Take </a> | <a href="wind.htm" title="How all the other work comes together to provide the ultimate in mobile communications">The MSI Wind U100 Netbook for Global Communications and Computing</a></p>
-
}
+
  <p><a href="homepage.htm">Home page</a> | <a href="pemc.htm">Pauline's Pages</a> | <a href=
-
return true;
+
    "howto.htm">Howto Articles</a> | <a href="nzguide.htm">Uniquely NZ</a> | <a href=
-
}
+
    "enterprise.htm">Small Firms</a> | <a href="site-search.htm">Search</a></p>
-
 
+
</center>
-
function ExpandOff(topicID){
+
<table border="0" cellpadding="0" cellspacing="0" width="100%">
-
var expand=document.getElementById(topicID);
+
  <tbody>
-
if(!expand)return true;
+
    <tr>
-
if(expand.style.display=="block"){
+
      <td class="howtofooter"><a class="howtobar" href="copyright.htm" title="Formal Copyright Information and guidelines on use of our text, pictures and JavaScript">Copyright</a> &copy; <a class="howtobar" href="javascript:fbpopitup('contact_form.htm')" title="Feedback and Contact Form with Email Link"> Peter and Pauline Curtis</a><br>
-
expand.style.display="none"
+
        Content revised: 6<sup>th</sup> December, 2010</td>
-
}
+
      <td class="howtofooter" align="right" valign="bottom" width="200"><a href=
-
return true;
+
        "http://validator.w3.org/check?uri=http://www.pcurtis.com/ubuntu-take.htm" target=
-
}
+
        "_blank"><img src="http://www.w3.org/Icons/valid-html401" alt="Valid HTML 4.01!" border=
-
 
+
        "0" height="31" width="88"></a></td>
-
function ExpandToggle(topicID){
+
    </tr>
-
var expand=document.getElementById(topicID);
+
  </tbody>
-
if(!expand)return true;
+
</table>
-
if(expand.style.display=="none"){
+
</body>
-
expand.style.display="block"
+
</html>
-
} else {
+
-
expand.style.display="none"
+
-
}
+
-
return true;
+
-
}
+

Revision as of 01:43, 28 September 2013


!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> JavaScript for Hiding and Expanding Blocks of Text

Home Pauline's Pages Howto Articles Uniquely NZ Small Firms Search
Height Padding
JavaScript for Hiding and Expanding Blocks of Text

Readers of my Howto Technical Articles and my support pages for Small Firms will know that I try to avoid Java and Javascript as much as possible on web pages as the various browsers tend to be incompatible in their interpretation and some older browsers do not support it at all. Some users deliberately turn Java and Javascript off for security or to reduce intrusive adverts. Furthermore it reduces the chances of some Search Engines indexing the pages correctly, if at all. It is however very useful to be able to have popups and to be able to expand/hide blocks of text. Expanding and Hiding is useful in our case on pages where there is a 'How one did it Story' for concealing excessive details from dead ends and also on pages like the OU pages where the information for Tutors and Students may differ in emphasis. I therefore consider this is a valid use as it is difficult to do neatly and professionally without JavaScript and/or Cascading Style Sheets.

The following method is based on a method used on many professional web sites and has also been expounded in a number of threads on sites. In my version it involves three small JavaScript functions. It should work in all browsers that support the W3C DOM Core, javaScript and Cascading Style Sheets. It includes a test to prevent any hang ups on browsers which do not support W3C DOM and should dislay the text if CSS is not supported.

The template I use for all my pages contains links to a standard JavaScript file called epopup.js (in the begining it just provided popups but now has lots of other functions hence the epopup.js) and a standard Cascading Style Sheet CSS file called general.css. The JavaScript functions are added to epopup.js and the styles for the 'expander' and the expanded text are added to general.css. You could place them in the head instead- with suitable wrapping - or just create some new .css and .js files with just the code snippets below. The links to my standard files use the following code which is already in the head of almost every page:


<script src="epopup.js" language="JavaScript" type="text/javascript"></script>
<link rel="stylesheet" href="general.css" type="text/css" >

The new functions in epopup.js are:

/* Functions to expand and contract text in <div> blocks with an id */

function ExpandOn(topicID){
var expand=document.getElementById(topicID);
if(!expand)return true;
if(expand.style.display=="none"){
expand.style.display="block"
}
return true;
}

function ExpandOff(topicID){
var expand=document.getElementById(topicID);
if(!expand)return true;
if(expand.style.display=="block"){
expand.style.display="none"
}
return true;
}

function ExpandToggle(topicID){
var expand=document.getElementById(topicID);
if(!expand)return true;
if(expand.style.display=="none"){
expand.style.display="block"
} else {
expand.style.display="none"
}
return true;
}

And the two new style for the 'expander' and to identify the expanded topic which I have added to general.css are:

.expand {
color: #000099;
text-decoration: underline;
font-style: italic;
}
.expandedblock {
margin-left: 40px;
margin-right: 2%;
display: block;
padding: 10px;
background-color: #ffffff;
}


You need to insert the following into the HTML to obtain the 'link' and how to wrap the 'topic' you want to be able to expand [ Click to Expand and see my code to insert ]

If you can not see the code you have not clicked the 'expander' above so try it out!

Before You Leave

I would be very pleased if visitors could spare a little time to give me some feedback - it is the only way I know who has visited, if it is useful and how I should develop it's content and the techniques used. I would be delighted if you could send comments or just let me know you have visited by Sending a quick Message to me.

Fun with Ubuntu Linux | The Road to Freedom - The Journey Starts |The Road to Freedom - Base Camp | Ubuntu All Together - Sharing, Networking, Backup, Synchronisation and Encryption | Ubuntu on the Lookout - Browsing, Email, Contacts, Calendars and Tasks| Ubuntu on the Move | Ubuntu on the Take | The MSI Wind U100 Netbook for Global Communications and Computing

Home page | Pauline's Pages | Howto Articles | Uniquely NZ | Small Firms | Search

Copyright © Peter and Pauline Curtis
Content revised: 6th December, 2010
Valid HTML 4.01!



</head>

<body>

<h7>

STRAINS (E. coli)



In order to assess biofilms as a system we were required to choose discrete elements, i.e. genes, to perturb from the wild type. Using the EcoCyc database as a reference we developed a regulatory map of any genes we could find related to biofilms. This map helped us identify key regulatory genes that we expected would affect the eventual phenotypic output of the biofilm; either by virtue of being a deletion strain or by the genetic element being overexpressed through our pEBS + {target gene} transformed strains. Listed below are the deletion and transformed strains we assayed along with their expected phenotypes.

BW25113 Wild Type

MG1655 Wild Type

BW25113 pEBS-csgD
The protein CsgD is a regulator of genes involved in curli assembly, induced in mid-exponential phase that are active in stationary phase. It positively controls σS expression; its deletion should in principle interfere with biofilm formation. [1]

BW25113 pEBS-fimB
The gene fimB mediates off to on switching of fim operon, while fimE mediates on to off switching of the fim operon. Its deletion should in principle repress the fim operon, while its overexpression should in principle encourage fimbriae formation. [2]

BW25113 pEBS-mlrA
MlrA stands for a merR-like regulator A, which regulates curli production. Its overexpression should in principle suppress curli formation, while its deletion should in principle encourage curli formation. [3]</br>
BW25113 pEBS-ompA
The protein OmpA influences cellulose production by repressing cellulose production with CpxRA stress response system; it is overexpressed in biofilm formation and repressed when cells are exposed to visible light. [4]</br>
BW25113 pEBS-ydeH
YdeH is a diguanylate cyclase, where its product regulates biofilm formation and motility. Its deletion has been shown to reduce surface attachment of the cell, its overexpression has been shown to reduce motility as well as flagella. [5]

BW25113 ΔfimA
FimA is the major subunit of E. coli type 1 (mannose sensitive) fimbriae, also known as pili. Pili are made of ~1000 units of FimA. Its deletion would remove the ability of a cell to produce fimbriae.[6]

BW25113 ΔompA
The protein OmpA influences cellulose production by repressing cellulose production with CpxRA stress response system; it is overexpressed in biofilm formation and repressed when cells are exposed to visible light.[4]

BW25113 ΔdosC
A heme-containing, oxygen-sensitive diguanylate cyclase. Its overexpression drives the cell to tend towards stationary phase physiology, leading to more biofilm and less motility. DosC expression is dependent on σS .[7]

BW25113 ΔompX
Adhesion of the cell on a surface represses ompX. Its deletion leads to increase in cell-surface contact in fimbriated E. coli, the opposite occurs in non-fimbriated E. coli.[8]

BW25113 ΔpgaB
PgaB is involved in the transport of PGA (an extra-membrane polysaccharide) across the outer membrane), which is involved in biofilm formation. Strains with mutant pgaB form less biofilm. Its expression is increased in environments with 1% ethanol or NaCl. [9]

BW25113 ΔrcsA
+ regulator of capsular polysaccharide synthesis. RcsA and RcsB form a DNA-binding transcriptional dual regulator. Deletion of this gene should in principle cause some repression of extracellular polysaccharides.[10]

BW25113 ΔfimH
FimH is the protein on the tip of fimbriae; they are the mannose sensitive subunit that in e coli mediate binding to receptor structures. [11]

BW25113 ΔcsgD
regulator of genes involved in curli assembly, induced in mid-exponential phase, csg-dependent genes active in stationary phase. [1]

BW25113 ΔompR
Function not clear. [12]

BW25113 ΔbcsA
Cellulose synthase, catalytic subunit. Its deletion should cause a lower cellulose content on the cell walls or an absence of cellulose, with a corresponding decrease in biofilm cell mass.[13]</br>
<p style = "font-size:35px;">WORKS CITED


[1] " Escherichia coli K-12 substr. MG1655 Polypeptide: CsgD DNA-binding transcriptional dual regulator," 2013. [Online]. Available: http://www.ecocyc.org/ECOLI/NEW-IMAGE?type=GENE&object=G6546. [Accessed 27 Sept 2013].
[2] " Escherichia coli K-12 substr. MG1655 Polypeptide: regulator for fimA," [Online]. Available: http://www.ecocyc.org/ECOLI/NEW-IMAGE? type=GENE&object=EG10309. [Accessed 27 September 2013].
[3] " Escherichia coli K-12 substr. MG1655 Polypeptide: MlrA DNA binding transcriptional activator," [Online]. Available: http://www.ecocyc.org/ECOLI/NEW-IMAGE?type=GENE&object=EG12008. [Accessed 27 September 2013].
[4] " Escherichia coli K-12 substr. MG1655 Polypeptide: outer membrane protein 3a (II*;G;d)," [Online]. Available: http://www.ecocyc.org/ECOLI/NEW-IMAGE? type=GENE&object=EG10669. [Accessed 27 September 2013].
[5] " Escherichia coli K-12 substr. MG1655 Enzyme: diguanylate cyclase," [Online]. Available: http://www.ecocyc.org/ECOLI/NEW-IMAGE? type=GENE&object=EG11643. [Accessed 27 September 2013].
[6] "Escherichia coli K-12 substr. MG1655 Polypeptide: major type 1 subunit fimbrin (pilin)," [Online]. Available: http://www.ecocyc.org/ECOLI/NEW-IMAGE? type=GENE&object=EG10308. [Accessed 27 September 2013].
[7] " Escherichia coli K-12 substr. MG1655 Enzyme: diguanylate cyclase," [Online]. Available: http://www.ecocyc.org/ECOLI/NEW-IMAGE? type=GENE&object=G6784. [Accessed 27 September 2013].
[8] "Escherichia coli K-12 substr. MG1655 Polypeptide: outer membrane protein X," [Online]. Available: http://www.ecocyc.org/ECOLI/NEW-IMAGE? type=GENE&object=EG12117. [Accessed 27 September 2013].
[9] "Escherichia coli K-12 substr. MG1655 Enzyme: poly-β-1,6-N-acetyl-D-glucosamine N-deacetylase," [Online]. Available: http://www.ecocyc.org/ECOLI/NEW-IMAGE?type=GENE&object=G6530. [Accessed 27 September 2013].
[10] "Escherichia coli K-12 substr. MG1655 Polypeptide: positive DNA-binding transcriptional regulator of capsular polysaccharide synthesis, activates its own expression," [Online]. Available: http://www.ecocyc.org/ECOLI/NEW-IMAGE?type=GENE&object=EG10820. [Accessed 27 September 2013].
[11] "Escherichia coli K-12 substr. MG1655 Polypeptide: minor fimbrial subunit, D-mannose specific adhesin," [Online]. Available: http://www.ecocyc.org/ECOLI/NEW-IMAGE?type=GENE&object=EG10315. [Accessed 27 September 2013].
[12] "Escherichia coli K-12 substr. MG1655 Polypeptide: OmpR," [Online]. Available: http://www.ecocyc.org/ECOLI/NEW-IMAGE?type=GENE&object=EG10672. [Accessed 27 September 2013].
[13] " Escherichia coli K-12 substr. MG1655 Polypeptide: cellulose synthase, catalytic subunit," [Online]. Available: http://www.ecocyc.org/ECOLI/NEW-IMAGE? type=GENE&object=EG12260. [Accessed 27 September 2013].

STIMULI PROTOCOLS


Prelude
We looked at the effect of various stimuli on the polysaccharides, proteins, and structures involved in the various stages of a biofilm. In particular, we looked at varying concentrations of nutrients, physical environments, and media.
For nutrients, we chose three levels of stimulation – zero stimulation, medium stimulation, and maximum stimulation. Their effects on the biofilm response were then observed and analysed through a battery of assays looking at the levels of biofilm components.
The stimuli were administered and the cell cultures were incubated for 48 (±3) hours at 23 degrees Celsius, which is the optimum temperature for biofilm growth (insert reference here). As bacteria turn their environment acidic as a result of anaerobic metabolism, buffered LB was used using the phosphate salts, potassium phosphate monobasic and potassium phosphate dibasic. pH 7 was adjusted for using 0.1 M concentration in Luria Broth. The E. coli cells were incubated in buffered LB to maintain pH 7 and eliminate the extraneous variable of acidity. The stock solutions for the stimuli were also created in buffered LB to prevent uneven nutrient levels; the phosphate salts are a systematic error across all inoculations and can thus be ignored.
In continuation with the project, we are planning to optimize results by combining the treatments which give the best results.
<p style = "font-size:18px;">Ethanol
Reasoning:</br> Given the large quantity of literature on the effect of ethanol on biofilm, it is a very important stimulus. The ethanol concentrations being tested in this experiment are 0.53% and 2%. Cegelskiet al. (2012) found that the level of some proteins involved in biofilm formation increases in the presence of ethanol. They also found UT189 strain colonies to be 55% larger (colony morphology assay). Cell viability is compromised at concentrations exceeding 4%.</br> Materials for Ethanol stimulus:</br> • Overnight cultures of E. coli
•40% EtOH solution prepared in phosphate buffered LB
• 96-well plate
<p style = "font-size:18px;">Protocol:
1. Grow overnight culture of E. coli in phosphate buffered media.
2. Inoculate 200 µL of 1:100 dilution of overnight culture along with 100 µL of 4%EtOH in buffered LB solution into a well in a 96-well plate to obtain a final EtOH concentration of 1%.
3. Inoculate 200 µL of 1:100 dilution of overnight culture along with 100 µL of 15%EtOH in buffered LB solution into a well in a 96-well plate to obtain a final concentration of 2%.
4. Incubate in darkness at 23 degrees C for 48 hours.
Lim et al. (2012) Dimethyl sulfoxide and ethanol elicit increased amyloid biogenesis and amyloid-integrated biofilm formation in Escherichia coli. Appl Environ Microbiol 78:3369-78. <p style = "text-align:center; font-size:18px;">Carbon Source
<p style = "font-size:18px;">Sucrose
Reasoning:
The concentrations of sucrose being tested are 0.5 M and 0.1 M. Hagiwara et al. (2009) found the growth curves to show optimum biofilm at a 0.1 M concentration. E.coli biofilm formation decreases at high osmolarity - sucrose is being used here to test osmolarity as a non-ionic solute.
Materials for Ethanol stimulus:
• Overnight cultures of E. coli
• 2 M sucrose stock solution prepared in phosphate buffered LB
• 96-well plate
Protocol:
1. Grow overnight cultures in phosphate buffered media.
2. Inoculate 200 µL of 1:100 dilution of overnight culture along with 100 µL of
0.3%sucrose solutionmade in buffered LB solution into a well in a 96-well plate to obtain a final concentration of 0.1 M.
3. Inoculate 200 µL of 1:100 dilution of overnight culture along with 100 µL of 1.5%sucrose in buffered LB solution into a well in a 96-well plate to obtain a final concentration of 0.5 M.
4. Incubate in darkness at 23 degrees C for 48 hours.
Kawarai et al. (2009) Biofilm formation by Escherichia coli in hypertonic sucrose media. J Biosci Bioeng 107:630-5.
<p style = "font-size:18px;">Indole
Reasoning:
Indole has a negative biofilm effect. The concentrations being tested are 500 micromolar and 300 micromolar.
Materials:
• 0.0009 M Indole in phosphate buffered LB
• Overnight culture diluted in a 1:100 ratio
Protocol:
1. 300 µM
  a. 1:100 dilution of overnight culture was inoculated in buffered LB.
  b. 200 µl of the dilution was added to the well.
  c. 100 µl of 0.0009 M indole was added to the well.
  d. The culture was incubated for 48 hours at 23 Celsius.
2. 500 µM
  a. 1:100 dilution of overnight culture was incubated in buffered LB.
  b. 200 µl of the dilution was added to the well.
  c. 100 µl of 0.0015 M was added to the well.
  d. The culture was incubated for 48 hours at 23 Celsius.
Bansal et al. (2007) Differential effects of epinephrine, norepinephrine, and indole on Escherichia coli O157:H7 chemotaxis, colonization, and gene expression. Infect Immun 75:4597-607. <p style = "font-size:18px;">DMSO
Reasoning:</br> Effects are similar to that of ethanol. The levels of certain proteins that regulate biofilm formation were 3-3.9 times higher than baseline, and there was an increase in curli (Lim et al., 2012). The concentrations being tested are 4% and 2%.
Materials list:
• Dimethyl sulfoxide in phosphate buffered LB
• Overnight culture diluted in a 1:100 ratio
Protocol:
1. 2%
  a. 1:100 dilution of overnight culture was incubated in buffered LB.
  b. 200 µl of the dilution was added to the well.
  c. 100 µl of 6% DMSO was added to the well.
  d. The culture was incubated for 48 hours at 23 Celsius.
2. 4%
  a. 1:100 dilution of overnight culture was incubated in buffered LB.
  b. 200 µl of the dilution was added to the well.
  c. 100 µl of 12% DMSO was added to the well.
  d. The culture was incubated for 48 hours at 23 degrees Celsius
Lim et al. (2012) Dimethyl sulfoxide and ethanol elicit increased amyloid biogenesis and amyloid-integrated biofilm formation in Escherichia coli. Appl Environ Microbiol 78:3369-78.
<p style = "text-align:center; font-size:18px;">Media
<p style = "font-size:18px;">NaCl stimulus
Reasoning:
The concentrations being tested are 0.3 M and 0.5 M. NaCl is being tested as an ionic solute. Park et al. (2012) found NaCl-free to increase attachment and the capacity of biofilm formation under salt (0.1-0.3 M) was similar to that of the control. Zogaj et al. (2001) says that the bcs genes were expressed under 0.5 M - it is unclear whether that is similar to the levels found in the wild type strain.
Materials:
• Phosphate buffered LB without NaCl
• Overnight culture diluted in a 1:100 ratio
Protocol:
1. Sodium chloride free Luria Broth
  a. 275 µl of NaCl-free LB was added to the well.
  b. 25 µl of overnight culture was added to the well.
  c. The culture was incubated for 48 hours at 23 degrees Celsius.
Yeom et al. (2012) Effects of non-ionic solute stresses on biofilm formation and lipopolysaccharide production in Escherichia coli O157:H7. Res Microbiol 163:258-67
<p style = "font-size:18px;">Terrific Broth (TB)
Reasoning:
Verma et al. (2010) found the least amount of biofilm to be produced at 37 degrees in TB.</br> Materials:
• 1:100 dilution of overnight culture grown in phosphate buffered media</br> Protocol:
1. Prepare Terrific Broth media by autoclaving a 900 mL solution of double distilled water containing 12 g tryptone, 24 g of yeast extract and 4 mL of glycerol.
2. Add 100 mL of a sterile solution containing a final concentration of 0.17 M KH2PO4, 0.72 M K2HPO4.
3. Autoclave again.. Add 275 µl of Terrific Broth to the well.
5. Add 25 µl of overnight culture to the well.
6. Incubate the culture for 48 hours at 23 degrees.
Prüss et al. (2010) Environmental and genetic factors that contribute to Escherichia coli K-12 biofilm formation. Arch Microbiol 192:715-28.
<p style = "font-size:18px;">Tryptone Soy Broth
Reasoning:
Verma et al. (2010) found most biofilm to be produced at 37 degrees in TSB media.
Materials:
• TSB media
• Overnight culture
Protocol:
1. To 900 mL of double distilled water, add 17 g Tryptone, 3 g peptone-B, 2.5 g glucose, 5 g NaCl and 2.5 g of K2HPO4 to prepare TSB media.
2. 275 µl of Tryptic Soy Broth was added to the well.
3. 25 µl of overnight culture was added to the well.
4. The culture was incubated for 48 hours at 23 degrees.
<p style = "font-size:18px;">Phosphate buffered Luria Broth
Reasoning:
To prevent fluctuations in pH as cell growth progresses, phosphate buffered Luria Broth media is used in place of regular LB.
Materials:
• Phosphate buffered LB
• overnight culture
Protocol:
1. 275 µl of buffered Luria Broth was added to the well.
2. 25 µl of overnight culture was added to the well.
3. The culture was incubated for 48 hours at 23 degrees.
<p style = "font-size:18px;">Unbuffered Luria Broth
Reasoning:
The regular recipe for LB was used and this was used to establish a baseline to compare all other media.
Materials:
• LB
  o 10 g NaCl/L ddH2O
  o 5 g yeast extract/L ddH2O
  o 10 Tryptone/L ddH2O
• Overnight culture
Protocol:
1. 275 µl of unbuffered Luria Broth was added to the well.
2. 25 µl of overnight culture was added to the well.
3. The culture was incubated for 48 hours at 23 degrees
<p style = "font-size:18px;">Acidic Luria Broth (0.5 M potassium phosphate monobasic)
Reasoning:
Acidic conditions are one set of stimuli that increase levels of a protein that normally increases motility and decreases the biofilm response.
Materials:
• Acidic buffered LB
  o 0.5 M Potassium Phosphate Monobasic
• Overnight culture
Protocol:
1. 275 µl of acidic LB was added to the well.
2. 25 µl of overnight culture was added to the well.
3. The culture was incubated for 48 hours at 23 degrees.
<p style = "text-align:center; font-size:35px;">INOCULATION SERIES


In order to complete our stimuli and assays most efficiently we combined our protocols into a master protocol which is described in the pdfs. found
<a href= "https://static.igem.org/mediawiki/2013/2/24/Inoculation_Series_%28Top%29.pdf"> Here</a> and <a href= "https://static.igem.org/mediawiki/2013/8/8b/Inoculation_Series_%28Bottom%29.pdf">here</a>

</h7> </div>





















































</html>