Team:LMU-Munich/Primer Design/Design Primers

From 2011.igem.org

(Difference between revisions)
(mathias: javascript enzyme selector (it's not pretty, but it appears to work…))
(mathias: yet another form revamp)
Line 36: Line 36:
#content-full label {
#content-full label {
clear: both;
clear: both;
 +
}
 +
 +
.radios {
 +
clear: right;
 +
}
 +
 +
.radios div {
 +
width: 180px;
 +
float: right;
 +
}
 +
 +
.radios input {
 +
float: none;
 +
width: auto;
 +
}
 +
 +
.radios label {
 +
clear: none;
}
}
</style>
</style>
<form action="http://wrtlprnft.ath.cx/~igem/primer_designer/primer_designer.php" method="post" enctype="multipart/form-data" target="result">
<form action="http://wrtlprnft.ath.cx/~igem/primer_designer/primer_designer.php" method="post" enctype="multipart/form-data" target="result">
 +
<div class="rightbox" style="width: 290px;">
 +
<h2>Options</h2>
 +
<div class="radios">
 +
Mode:
 +
<div>
 +
  <label style="clear: none;">
 +
  <input type="radio" name="mode" value="coding" checked="checked" id="radio-coding" />Coding
 +
  </label>
 +
  <label style="clear: none;">
 +
  <input type="radio" name="mode" value="noncoding" id="radio-noncoding" />Non-Coding
 +
  </label>
 +
</div>
 +
</div>
 +
<div class="radios">
 +
Standard:
 +
<div>
 +
  <label style="clear: none;">
 +
  <input type="radio" name="standard" value="biobrick" checked="checked" />Classic Biobrick
 +
  </label>
 +
  <label style="clear: none;">
 +
  <input type="radio" name="standard" value="freiburg" />Freiburg
 +
  </label>
 +
</div>
 +
</div>
 +
<div class="radios">
 +
Check for restriction sites?
 +
<div>
 +
  <label style="clear: none;">
 +
  <input type="radio" name="restriction" value="yes" checked="checked" />Yes
 +
  </label>
 +
  <label style="clear: none;">
 +
  <input type="radio" name="restriction" value="only used for biobricks" checked="checked" />Only used for biobricks
 +
  </label>
 +
  <label style="clear: none;">
 +
  <input type="radio" name="restriction" value="no" checked="checked" />No
 +
  </label>
 +
</div>
 +
</div>
 +
<div class="radios">
 +
Melting point:
 +
<div>
 +
  <label style="clear: none;">
 +
  <input type="radio" name="melting" value="wallace" checked="checked" id="wallace" />Wallace
 +
  </label>
 +
  <label style="clear: none;">
 +
  <input type="radio" name="melting" value="entropy" id="entropy" />Entropy based
 +
  </label>
 +
</div>
 +
</div>
 +
<label>Na<sup>+</sup> concentration: <input type="text" name="na" id="na" value="0.8" /></label>
 +
</div>
 +
<div class="rightbox" style="width: 290px;">
 +
<input type="submit" style="width: 99%;" value="Submit" />
 +
</div>
 +
<div id="coding">
<div class="leftbox" style="width: 630px">
<div class="leftbox" style="width: 630px">
<input type="hidden" name="mode" value="primer" />
<input type="hidden" name="mode" value="primer" />
-
<p><label><h2>Before 5'</h2>
+
<p><label for="seq_n"><h2>Before 5'</h2></label>
-
<textarea name="seq_n" cols="40" rows="6" style="width: 98%; margin: 0; padding: 0;"></textarea></label></p>
+
<label>Primer Length: <input type="text" id="length_n" name="length_n" value="20" /></label>
 +
<textarea name="seq_n" id="seq_n" cols="40" rows="6" style="width: 98%; margin: 0; padding: 0;"></textarea></p>
<p><label>You can also upload a FASTA file: <input type="file" name="seq_n-file" /></label></p>
<p><label>You can also upload a FASTA file: <input type="file" name="seq_n-file" /></label></p>
-
</div>
 
-
<div class="rightbox" style="width: 290px;">
 
-
<h3>Options</h3>
 
-
<label>Restriction Enzyme: <input type="text" name="enzyme_n" id="enzyme_n" /></label>
 
-
<label>Primer Length: <input type="text" name="length_n" value="20" /></label>
 
</div>
</div>
<div class="leftbox" style="width: 630px">
<div class="leftbox" style="width: 630px">
-
<p><label><h2>After 3'</h2>
+
<p><label for="seq_c"><h2>After 3'</h2></label>
-
<textarea name="seq_c" cols="40" rows="6" style="width: 98%; margin: 0; padding: 0;"></textarea></label></p>
+
<label>Primer Length: <input type="text" id="length_c" name="length_c" value="20" /></label>
 +
<textarea name="seq_c" id="seq_c" cols="40" rows="6" style="width: 98%; margin: 0; padding: 0;"></textarea></p>
<p><label>You can also upload a FASTA file: <input type="file" name="seq_c-file" /></label></p>
<p><label>You can also upload a FASTA file: <input type="file" name="seq_c-file" /></label></p>
</div>
</div>
 +
<!--
<div class="rightbox" style="width: 290px;">
<div class="rightbox" style="width: 290px;">
<h3>Options</h3>
<h3>Options</h3>
-
<label>Restriction Enzyme: <input type="text" name="enzyme_c" id="enzyme_c" /></label>
+
<label>Restriction Enzyme: <input type="text" name="enzyme_n" id="enzyme_n" /></label>
-
<label>Primer Length: <input type="text" name="length_c" value="20" /></label>
+
<label>Primer Length: <input type="text" name="length_n" value="20" /></label>
 +
</div>
 +
-->
</div>
</div>
 +
<div id="noncoding">
<div class="leftbox" style="width: 630px">
<div class="leftbox" style="width: 630px">
<p><label><h2>Surrounding Region</h2>
<p><label><h2>Surrounding Region</h2>
Line 65: Line 139:
<p><label>You can also upload a FASTA file: <input type="file" name="seq-file" /></label></p>
<p><label>You can also upload a FASTA file: <input type="file" name="seq-file" /></label></p>
</div>
</div>
-
<div class="rightbox" style="width: 290px;">
+
</div>
-
<h2>Options</h2>
+
-
Melting point:<div style="width:150px; float:right"><label style="clear: none;"><input type="radio" name="melting" value="wallace" checked="checked" style="float: none; width: auto" id="wallace" />Wallace</label><label style="clear: none;"><input type="radio" name="melting" value="entropy" style="float: none; width: auto;" id="entropy" />Entropy based</label></div>
+
-
<label>Na<sup>+</sup> concentration: <input type="text" name="na" id="na" value="0.8" /></label>
+
<script type="text/javascript">
<script type="text/javascript">
document.getElementById('entropy').onclick = function() {
document.getElementById('entropy').onclick = function() {
Line 77: Line 148:
}
}
document.getElementById('na').disabled = true;
document.getElementById('na').disabled = true;
 +
 +
document.getElementById('radio-coding').onclick = function() {
 +
document.getElementById('coding').style.display = "block";
 +
document.getElementById('noncoding').style.display = "none";
 +
}
 +
document.getElementById('radio-noncoding').onclick = function() {
 +
document.getElementById('noncoding').style.display = "block";
 +
document.getElementById('coding').style.display = "none";
 +
}
 +
document.getElementById('noncoding').style.display = "none";
var enzymes = [
var enzymes = [
Line 108: Line 189:
};
};
-
populate(document.getElementById('enzyme_n'));
+
//populate(document.getElementById('enzyme_n'));
-
populate(document.getElementById('enzyme_c'));
+
//populate(document.getElementById('enzyme_c'));
</script>
</script>
-
</div>
 
-
<div class="rightbox" style="width: 290px;">
 
-
<input type="submit" style="width: 99%;" value="Submit" />
 
-
</div>
 
</form>
</form>

Revision as of 17:59, 16 September 2011


Options

Mode:
Standard:
Check for restriction sites?
Melting point:

Before 5'

After 3'

Surrounding Region


Retrieved from "http://2011.igem.org/Team:LMU-Munich/Primer_Design/Design_Primers"