Team:Harvard/ZF Binding Site Finder

From 2011.igem.org

(Difference between revisions)
 
(78 intermediate revisions not shown)
Line 1: Line 1:
 +
{{:Team:Harvard/Template:CSS}}
 +
{{:Team:Harvard/Template:TechBar}}
 +
{{:Team:Harvard/Template:TechGrayBar}}
 +
<html xmlns="http://www.w3.org/1999/xhtml">
<html xmlns="http://www.w3.org/1999/xhtml">
-
 
+
<head style="text-align:center">
-
<head>
+
-
 
+
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
-
 
+
<title>Zinc Finger Binding Site Finder</title>
-
<title>iGEM 2011 Zinc Finger Binding Site Finder</title>
+
-
 
+
-
 
+
-
 
+
<style type="text/css">
<style type="text/css">
-
 
-
 
.graytext
.graytext
 +
{
 +
color:#999999;
 +
        font-family:'Trebuchet MS', Arial, Helvetica, sans-serif;
 +
}
 +
.onfocus
{
{
 +
color:#000000;
 +
        font-family:'Trebuchet MS', Arial, Helvetica, sans-serif;
 +
}
-
color:#999999;
+
.firstHeading
 +
{
 +
display: none;
 +
}
 +
#sequence
 +
{
 +
        font-family:'Courier New', Courier, monospace;
}
}
 +
#result
 +
{
 +
    display: block;
 +
    margin-left: auto;
 +
    margin-right: auto;
 +
}
 +
#helpfile
 +
{
 +
        display: none;
 +
}
-
.onfocus
+
.bluetext
 +
{
 +
    color: blue;
 +
}
 +
.zfndiagram
{
{
 +
    display: block;
 +
    margin-left: auto;
 +
    margin-right: auto;
 +
}
-
color:#000000;
+
span#showhelp
 +
{
 +
    border-bottom: 1px dotted;
 +
}
 +
span#showhelp:hover
 +
{
 +
    border-bottom: 1px solid;
}
}
-
 
+
#filldna
 +
{
 +
    color: blue;
 +
}
#ui
#ui
-
 
{
{
-
 
     border-color: #FFFFFF;
     border-color: #FFFFFF;
-
 
     border-style: solid;
     border-style: solid;
-
 
     border-width: 0 0 1px 1px;
     border-width: 0 0 1px 1px;
-
 
     border-spacing: 0;
     border-spacing: 0;
-
 
     border-collapse: collapse;
     border-collapse: collapse;
-
 
}
}
-
 
-
 
#ui td
#ui td
-
 
{
{
-
 
     border-color: #FFFFFF;
     border-color: #FFFFFF;
-
 
     border-style: solid;
     border-style: solid;
-
 
     margin: 0;
     margin: 0;
-
 
+
     padding: 8px;
-
     padding: 4px;
+
-
 
+
     border-width: 1px 1px 0 0;
     border-width: 1px 1px 0 0;
-
 
     background-color: #FFFFFF;
     background-color: #FFFFFF;
-
 
     text-align: left;
     text-align: left;
-
 
+
    vertical-align: top;
}
}
-
 
-
 
table
table
-
 
{
{
-
 
     border-color: #999999;
     border-color: #999999;
-
 
     border-style: solid;
     border-style: solid;
-
 
     border-width: 0 0 1px 1px;
     border-width: 0 0 1px 1px;
-
 
     border-spacing: 0;
     border-spacing: 0;
-
 
     border-collapse: collapse;
     border-collapse: collapse;
-
 
}
}
-
 
-
 
td
td
-
 
{
{
-
 
     border-color: #999999;
     border-color: #999999;
-
 
     border-style: solid;
     border-style: solid;
-
 
     margin: 0;
     margin: 0;
-
 
     padding: 4px;
     padding: 4px;
-
 
     border-width: 1px 1px 0 0;
     border-width: 1px 1px 0 0;
-
 
     background-color: #EEEEEE;
     background-color: #EEEEEE;
-
 
     text-align: center;
     text-align: center;
-
 
}
}
-
 
-
 
</style>
</style>
-
 
+
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
-
 
+
<script type="text/javascript">
<script type="text/javascript">
 +
// begin jQuery
 +
$(document).ready(function(){
 +
// clearForm function
 +
$(".graytext").focus(function() {
-
function clearForm(formfield)
+
if($(this)[0].defaultValue==$(this).val())
-
 
+
-
{
+
-
 
+
-
if(formfield.defaultValue==formfield.value)
+
-
 
+
{
{
-
 
+
$(this).val("");
-
formfield.value = "";
+
$(this).removeClass("graytext").addClass("onfocus");
-
 
+
-
formfield.className = "onfocus";
+
-
 
+
}
}
-
}
+
});
-
 
+
-
 
+
 +
// reverse complement function
function reverseComplement(sequence)
function reverseComplement(sequence)
-
 
{
{
-
 
var output = "";
var output = "";
-
 
-
 
for(j=0;j<sequence.length;j++)
for(j=0;j<sequence.length;j++)
-
 
{
{
-
 
if(sequence.charAt(j) == "G")
if(sequence.charAt(j) == "G")
-
 
output = "C" + output;
output = "C" + output;
-
 
-
 
if(sequence.charAt(j) == "C")
if(sequence.charAt(j) == "C")
-
 
output = "G" + output;
output = "G" + output;
-
 
-
 
if(sequence.charAt(j) == "T")
if(sequence.charAt(j) == "T")
-
 
output = "A" + output;
output = "A" + output;
-
 
-
 
if(sequence.charAt(j) == "A")
if(sequence.charAt(j) == "A")
-
 
output = "T" + output;
output = "T" + output;
-
 
-
 
if(sequence.charAt(j) == "N")
if(sequence.charAt(j) == "N")
-
 
output = "N" + output;
output = "N" + output;
-
 
}
}
-
 
-
 
return output;
return output;
-
 
-
 
}
}
-
 
+
// findCustom function
-
 
+
$("#findcustom").click(function() {
-
function findSites()
+
-
 
+
-
{
+
//get DNA sequence
//get DNA sequence
-
 
+
var testseq = $("#sequence").val().toUpperCase();
-
var testseq = document.getElementById("sequence").value;
+
-
 
+
-
//to uppercase
+
-
 
+
-
testseq = testseq.toUpperCase();
+
-
 
+
-
 
+
//get zinc finger arrays for searching
//get zinc finger arrays for searching
-
 
+
var bottomzf = $("#bottominput").val().toUpperCase();
-
var zf11 = document.getElementById("11").value;
+
var topzf = $("#topinput").val().toUpperCase();
-
 
+
-
var zf12 = document.getElementById("12").value;
+
-
 
+
-
var zf13 = document.getElementById("13").value;
+
-
 
+
-
var zf21 = document.getElementById("21").value;
+
-
 
+
-
var zf22 = document.getElementById("22").value;
+
-
 
+
-
var zf23 = document.getElementById("23").value;
+
-
 
+
-
+
-
 
+
-
//start building regular expression from ZF fingers
+
-
 
+
-
var siteExp = "(" + zf23 + zf22 + zf21;
+
-
 
+
-
+
-
 
+
-
//add in x NTPs between first and second finger
+
-
 
+
-
var nucgap = document.getElementById("gap").value;
+
-
 
+
-
for(i=0;i<nucgap;i++){
+
-
 
+
-
siteExp = siteExp + "\\w";
+
-
 
+
-
}
+
-
 
+
-
 
+
-
 
+
-
//finish building regular expression
+
-
 
+
-
siteExp = siteExp + zf11 + zf12 + zf13 + "){1}";
+
-
 
+
-
 
+
-
 
+
-
//construct regular expression and find all instances of desired sequence in the test sequence
+
-
 
+
-
var array1 = new RegExp(siteExp, "gi");
+
-
 
+
-
var array2 = testseq.match(array1);
+
-
 
+
-
 
+
-
 
+
-
//error message if no sequences found
+
-
 
+
-
if(testseq.search(array1) == -1)
+
-
 
+
-
{
+
-
 
+
-
document.getElementById("results").innerHTML = "No results found.";
+
-
 
+
-
//if results are found, build table to display results
+
-
 
+
-
} else {
+
-
 
+
-
+
-
 
+
-
var revComp = "";
+
-
 
+
-
var seqtwo = "";
+
-
 
+
-
+
-
 
+
-
table = "<table><tr><td colspan='4'><b>Zinc Finger Binding Site Candidates</b></td></tr><td><b>Location</b></td><td><b>Bottom Sequence</b></td><td><b>Top Sequence</b></td><td><b>Entire Sequence (top strand perspective)</b></td>";
+
-
 
+
-
+
-
 
+
-
for(i=0;i<array2.length;i++)
+
-
 
+
-
{
+
-
 
+
-
array1.test(testseq);
+
-
 
+
-
 
+
-
 
+
-
table = table + "<tr>";
+
-
 
+
-
//subtract 18 nucleotides, nucgap inter-ZF nucleotides, +1 for index correction for location of binding site
+
-
 
+
-
table = table + "<td>" + (array1.lastIndex - 18 - nucgap) + "</td>";
+
-
 
+
-
seqbottom = reverseComplement(array2[i].substring(0,9));
+
-
 
+
-
table = table + "<td>" + seqbottom + "</td>";
+
-
 
+
-
table = table + "<td>" + array2[i].substring(array2[i].length - 9,array2[i].length) + "</td>";
+
-
 
+
-
table = table + "<td>" + array2[i] + "</td>";
+
-
 
+
-
table = table + "</tr>";
+
-
 
+
-
}
+
-
 
+
-
+
-
 
+
-
table = table + "</table><br /><br />"
+
-
 
+
-
+
-
 
+
-
document.getElementById("results").innerHTML = table;
+
-
 
+
-
}
+
-
 
+
-
}
+
-
 
+
-
 
+
-
 
+
-
function findCustom()
+
-
 
+
-
{
+
-
 
+
-
//get DNA sequence
+
-
 
+
-
var testseq = document.getElementById("sequence").value;
+
-
 
+
-
//to uppercase
+
-
 
+
-
testseq = testseq.toUpperCase();
+
-
 
+
-
 
+
-
 
+
-
//get zinc finger arrays for searching
+
-
 
+
-
var bottomzf = document.getElementById("bottom").value;
+
-
 
+
-
var topzf = document.getElementById("top").value;
+
-
 
+
-
//to uppercase
+
-
 
+
-
bottomzf = bottomzf.toUpperCase();
+
-
 
+
-
topzf = topzf.toUpperCase();
+
-
 
+
-
+
var ntpCheck = /[GCTAN]{9}/;
var ntpCheck = /[GCTAN]{9}/;
-
if (!(bottomzf.match(ntpCheck)&&
+
if (!(bottomzf.match(ntpCheck))||
-
 
+
  !(topzf.match(ntpCheck))||
-
  topzf.match(ntpCheck)&&
+
  !(bottomzf.length=="9")||
-
 
+
  !(topzf.length=="9")){
-
  (bottomzf.length=="9")&&
+
alert("You must enter a valid sequence of nine nucleotides containing G,T,C,A, or N for both zinc finger array binding sites (ex. GTAGGCANN).");
-
 
+
-
  (topzf.length=="9"))){
+
-
 
+
-
alert("You must enter a valid sequence of nine nucleotides containing G,T,C,A, or N.");
+
-
 
+
return;
return;
-
 
}
}
-
 
-
 
-
 
-
 
//transform bottom zf to reverse complement
//transform bottom zf to reverse complement
-
 
bottomzf = reverseComplement(bottomzf);
bottomzf = reverseComplement(bottomzf);
-
 
-
 
//start building regular expression from ZF fingers
//start building regular expression from ZF fingers
-
 
var siteExp = "(" + bottomzf.replace(/n/gi,"\\w");
var siteExp = "(" + bottomzf.replace(/n/gi,"\\w");
-
 
-
 
//add in x NTPs between first and second finger
//add in x NTPs between first and second finger
-
 
+
var nucgap = $("#gap").val();
-
var nucgap = document.getElementById("gap").value;
+
-
 
+
for(i=0;i<nucgap;i++){
for(i=0;i<nucgap;i++){
-
 
siteExp = siteExp + "\\w";
siteExp = siteExp + "\\w";
-
 
}
}
-
 
-
 
//finish building regular expression
//finish building regular expression
-
 
siteExp = siteExp + topzf.replace(/n/gi,"\\w") + "){1}";
siteExp = siteExp + topzf.replace(/n/gi,"\\w") + "){1}";
-
 
-
 
//construct regular expression and find all instances of desired sequence in the test sequence
//construct regular expression and find all instances of desired sequence in the test sequence
-
 
var array1 = new RegExp(siteExp, "gi");
var array1 = new RegExp(siteExp, "gi");
-
 
var array2 = testseq.match(array1);
var array2 = testseq.match(array1);
-
 
-
 
//error message if no sequences found
//error message if no sequences found
-
 
if(testseq.search(array1) == -1)
if(testseq.search(array1) == -1)
-
 
{
{
-
 
+
$("#result").html("No binding sites found.");
-
document.getElementById("results").innerHTML = "No results found.";
+
-
 
+
//if results are found, build table to display results
//if results are found, build table to display results
-
 
} else {
} else {
-
 
-
 
var revComp = "";
var revComp = "";
-
 
var seqtwo = "";
var seqtwo = "";
-
 
-
 
table = "<table><tr><td colspan='4'><b>Zinc Finger Binding Site Candidates</b></td></tr><td><b>Location</b></td><td><b>Bottom Sequence</b></td><td><b>Top Sequence</b></td><td><b>Entire Sequence (top strand perspective)</b></td>";
table = "<table><tr><td colspan='4'><b>Zinc Finger Binding Site Candidates</b></td></tr><td><b>Location</b></td><td><b>Bottom Sequence</b></td><td><b>Top Sequence</b></td><td><b>Entire Sequence (top strand perspective)</b></td>";
-
 
-
 
for(i=0;i<array2.length;i++)
for(i=0;i<array2.length;i++)
-
 
{
{
-
 
array1.test(testseq);
array1.test(testseq);
-
 
-
 
table = table + "<tr>";
table = table + "<tr>";
-
 
//subtract 18 nucleotides, nucgap inter-ZF nucleotides, +1 for index correction for location of binding site
//subtract 18 nucleotides, nucgap inter-ZF nucleotides, +1 for index correction for location of binding site
-
 
table = table + "<td>" + (array1.lastIndex - 18 - nucgap) + "</td>";
table = table + "<td>" + (array1.lastIndex - 18 - nucgap) + "</td>";
-
 
seqbottom = reverseComplement(array2[i].substring(0,9));
seqbottom = reverseComplement(array2[i].substring(0,9));
-
 
table = table + "<td>" + seqbottom + "</td>";
table = table + "<td>" + seqbottom + "</td>";
-
 
table = table + "<td>" + array2[i].substring(array2[i].length - 9,array2[i].length) + "</td>";
table = table + "<td>" + array2[i].substring(array2[i].length - 9,array2[i].length) + "</td>";
-
 
table = table + "<td>" + array2[i] + "</td>";
table = table + "<td>" + array2[i] + "</td>";
-
 
table = table + "</tr>";
table = table + "</tr>";
-
 
}
}
-
 
-
 
table = table + "</table><br /><br />"
table = table + "</table><br /><br />"
-
 
-
 
+
$("#result").html(table);
-
document.getElementById("results").innerHTML = table;
+
-
 
+
}
}
-
}
+
        $("#helpfile").hide("slow");
 +
});
-
 
+
// findAllSites function
-
function findAllSites()
+
$("#findallsites").click(function () {
-
 
+
-
{
+
//initialize check variable, if check != 0 then results were found, else no results found
//initialize check variable, if check != 0 then results were found, else no results found
-
 
var check = 0;
var check = 0;
-
 
-
 
//get test sequence
//get test sequence
-
 
+
var testseq = $("#sequence").val().toUpperCase();
-
var testseq = document.getElementById("sequence").value;
+
-
 
+
-
//to uppercase
+
-
 
+
-
testseq = testseq.toUpperCase();
+
-
 
+
-
 
//build array of nucleotides
//build array of nucleotides
-
 
var nucleotides = new Array("G", "C", "T", "A");
var nucleotides = new Array("G", "C", "T", "A");
-
 
-
 
//initialize table string to hold code for table
//initialize table string to hold code for table
-
 
var table = "";
var table = "";
-
 
-
 
//loop multidimensional array to iterate all possible zinc fingers, each array has 4 elements for 4 nucleotides
//loop multidimensional array to iterate all possible zinc fingers, each array has 4 elements for 4 nucleotides
-
 
var nest = new Array(4);
var nest = new Array(4);
-
 
for(var a=0; a<4; a++)
for(var a=0; a<4; a++)
-
 
{
{
-
 
nest[a] = new Array(4);
nest[a] = new Array(4);
-
 
for(var b=0; b<4; b++)
for(var b=0; b<4; b++)
-
 
{
{
-
 
nest[a][b] = new Array(4);
nest[a][b] = new Array(4);
-
 
for(var c=0; c<4; c++)
for(var c=0; c<4; c++)
-
 
{
{
-
 
nest[a][b][c] = new Array(4);
nest[a][b][c] = new Array(4);
-
 
for(var d=0; d<4; d++)
for(var d=0; d<4; d++)
-
 
{
{
-
 
nest[a][b][c][d] = new Array(4);
nest[a][b][c][d] = new Array(4);
-
 
for(var e=0; e<4; e++)
for(var e=0; e<4; e++)
-
 
{
{
-
 
nest[a][b][c][d][e] = new Array(4);
nest[a][b][c][d][e] = new Array(4);
-
 
for(var f=0; f<4; f++)
for(var f=0; f<4; f++)
-
 
{
{
-
 
//build regular expression for each nucleotide combination
//build regular expression for each nucleotide combination
-
 
nest[a][b][c][d][e][f] = "\\w\\w" + reverseComplement(nucleotides[c]) + "\\w\\w" + reverseComplement(nucleotides[b]) + "\\w\\w" + reverseComplement(nucleotides[a]);
nest[a][b][c][d][e][f] = "\\w\\w" + reverseComplement(nucleotides[c]) + "\\w\\w" + reverseComplement(nucleotides[b]) + "\\w\\w" + reverseComplement(nucleotides[a]);
-
 
-
 
//add in x NTPs between first and second finger
//add in x NTPs between first and second finger
-
 
+
var nucgap = $("#gap").val();
-
var nucgap = document.getElementById("gap").value;
+
-
 
+
-
 
for(i=0;i<nucgap;i++){
for(i=0;i<nucgap;i++){
-
 
nest[a][b][c][d][e][f] = nest[a][b][c][d][e][f] + "\\w";
nest[a][b][c][d][e][f] = nest[a][b][c][d][e][f] + "\\w";
-
 
}
}
-
 
-
 
//finish constructing dynamic regular expression
//finish constructing dynamic regular expression
-
 
nest[a][b][c][d][e][f] = nest[a][b][c][d][e][f] + nucleotides[d] + "\\w\\w" + nucleotides[e] + "\\w\\w" + nucleotides[f] + "\\w\\w";
nest[a][b][c][d][e][f] = nest[a][b][c][d][e][f] + nucleotides[d] + "\\w\\w" + nucleotides[e] + "\\w\\w" + nucleotides[f] + "\\w\\w";
-
 
-
 
//find all instances of current nucleotide combination
//find all instances of current nucleotide combination
-
 
var array1 = new RegExp(nest[a][b][c][d][e][f], "gi");
var array1 = new RegExp(nest[a][b][c][d][e][f], "gi");
-
 
var array2 = testseq.match(array1);
var array2 = testseq.match(array1);
-
 
-
 
//do nothing if no result found
//do nothing if no result found
-
 
if(testseq.search(array1) == -1)
if(testseq.search(array1) == -1)
-
 
{
{
-
 
} else {
} else {
-
 
//add table heading for each combo
//add table heading for each combo
-
 
table = table + "<tr><td colspan='4'><b>" + "Bottom finger: " + nucleotides[a] + nucleotides[b] + nucleotides[c] + " Top finger: " + nucleotides[d] + nucleotides[e] + nucleotides[f] + "</b></td></tr>";
table = table + "<tr><td colspan='4'><b>" + "Bottom finger: " + nucleotides[a] + nucleotides[b] + nucleotides[c] + " Top finger: " + nucleotides[d] + nucleotides[e] + nucleotides[f] + "</b></td></tr>";
-
 
-
 
var revComp = "";
var revComp = "";
-
 
var seqtwo = "";
var seqtwo = "";
-
 
var index = 0;
var index = 0;
-
 
-
 
for(i=0;i<array2.length;i++)
for(i=0;i<array2.length;i++)
-
 
{
{
-
 
array1.test(testseq);
array1.test(testseq);
-
 
-
 
table = table + "<tr>";
table = table + "<tr>";
-
 
//subtract 18 nucleotides, nucgap inter-ZF nucleotides, +1 for index correction for location of binding site
//subtract 18 nucleotides, nucgap inter-ZF nucleotides, +1 for index correction for location of binding site
-
 
table = table + "<td>" + (array1.lastIndex - 18 - nucgap) + "</td>";
table = table + "<td>" + (array1.lastIndex - 18 - nucgap) + "</td>";
-
 
seqbottom = reverseComplement(array2[i].substring(0,9));
seqbottom = reverseComplement(array2[i].substring(0,9));
-
 
table = table + "<td>" + seqbottom + "</td>";
table = table + "<td>" + seqbottom + "</td>";
-
 
table = table + "<td>" + array2[i].substring(array2[i].length - 9,array2[i].length) + "</td>";
table = table + "<td>" + array2[i].substring(array2[i].length - 9,array2[i].length) + "</td>";
-
 
table = table + "<td>" + array2[i] + "</td>";
table = table + "<td>" + array2[i] + "</td>";
-
 
table = table + "</tr>";
table = table + "</tr>";
-
 
}
}
-
 
-
 
check++;
check++;
-
 
-
 
}
}
-
 
}
}
-
 
}
}
-
 
}
}
-
 
}
}
-
 
}
}
-
 
}
}
-
 
-
 
//only build table if check is nonzero
//only build table if check is nonzero
-
 
if(check == 0)
if(check == 0)
-
 
{
{
-
 
+
$("#result").html("No binding sites found, unfortunately :(");
-
document.getElementById("results").innerHTML = "No binding sites found, unfortunately :(";
+
-
 
+
} else {
} else {
-
 
//add table preamble
//add table preamble
-
 
var table = "<table><tr><td colspan='4'><b>Zinc Finger Binding Site Candidates</b></td></tr><td><b>Location</b></td><td><b>Bottom Sequence</b></td><td><b>Top Sequence</b></td><td><b>Entire Sequence (top strand perspective)</b></td>" + table;
var table = "<table><tr><td colspan='4'><b>Zinc Finger Binding Site Candidates</b></td></tr><td><b>Location</b></td><td><b>Bottom Sequence</b></td><td><b>Top Sequence</b></td><td><b>Entire Sequence (top strand perspective)</b></td>" + table;
-
 
-
 
//add table tail
//add table tail
-
 
table = table + "</table><br /><br />"
table = table + "</table><br /><br />"
-
 
-
 
//write table to page
//write table to page
 +
$("#result").html(table);
 +
}
 +
});
-
document.getElementById("results").innerHTML = table;
+
// toggle help display
 +
$("#showhelp").click(function(){
 +
    $("#helpfile").toggle("slow");
 +
});
-
}
+
// fill dna test function
 +
$("#filldna").click(function(){
 +
    $(".graytext").removeClass("graytext").addClass("onfocus");
 +
    $("#sequence").val("TTTGGTAGAGATGGGGTGTCACTATGTTACCCAGGCTGGTCTCCAATACCTGGGCTCAATCGATTCTCCCACTTTAGCCTCCCAAAGTGCTGGGATTACAGTCGTGAGCCATTGGGCCCAGTCACAAATTCCTTATTTTCTTTGTCCTACGATATGAACAACCCAGTTGGAACATAATACGACGTGAGAAGAGAAGCCTGCCATGGGGAGGGGAGCACAGACCCAGCAGGCAGGCTCTCAATGGGAGGTTCAAGGCGAGTCCCCCTCCCACCCACCTGCTCCCAGCTGAGAGTCCATCTGGGCCTCCGGTGGGCAACGACAAAAAATTCCATTAGGTTGAGAAGACGTGACTGGCACTGGCTCAAAGCCAAACAAATACTTGGTGGGCCTGCTTGGAGTTTAGCTCACACTTTTTGATTTTCTATTCACTGAATTTCACTGCTGTAGGAACCTCATATAAATGGAATCAGATAGTTATTTTTTTTTATGACAGGCTTTGGGGGATATATCTTTTTGAAGGCTCTTTATAACTAAACAGTAAATAGTTTAATTACAGTGGAAATTCTCTGGACTAGATTGTAAAGGTGGATCAGATTTGGAAATAAGACTTTTTTCAAGTCAAAGAAGAAAAACCAATTTAAAAATACAAGGCAATGGCCGGGTGCGGTGGCTCACGCCTGTAATCCCAGCACCTTGGGAGGCCAAGGCAGGTGGATCAGCTGAGGTCAGGAATTCGAGACCAGCCTAGCCATCATGGTGAAACCCTGTCTCTACTAAAAATACAAAGAAAAAATTAGCCGGGCATGGTGGTGCATGCCTGTAGTCCCAGCTACTCAGGACACTGAGGCTGAGGAGAATTGCTTGAACCCGGGAGGCAGAGGTTGTAGTGAGCAAAGATCGCGCCACTGCACTCCAGCCTGGGCAACAGAGTGAGACTCCACGTCAAAAAAAAAAAAAAAAAAGACATGTCAGAAACAAAGAAAGAAAGACATGACAGGCTCAGAATCAATGTCAACCTGGGCAAAGGTCAGAAACGGAACAGGGACCCTTTCTTTGTGGGCAGGTTTGACATGAAAGGTTCAGCGACTTCAACTCTTCTGATTCTTTCTTCTTGAGCCCATTTTGGTAAGTTGTGTTTTCCTAAAAGTTTGTCCATTCCATCCAAATGTTCACATTAGTCAGGATCTGTGAAGGATGTCAATGGCTGTGAGGCGAGGGCCCCTTGCCAGTCCCCATGTTCGTTATTTATGGATGCCTGATGCCCACAACCTCGACTTCTCAGCTGAGGGCAACTCCTCCTGTCCTCTCGCTGCTTCCACCTAAGCCACCAGGAAATCCTGTTGACTCCACTTACAAAAGCTCTCCAGAGTCTGCTACCTCTTACCACCCTACTGTCGCCTCCCAGACCTGGTCTCCCCGCTTCTGCCCTGGCCCCTACAGCTCGCAGACAGCTGCCAGAGGAGTCCATCCGAATCAACTTCAGATTGCGTCACTTTTTCTTTCAAAATCCGACAAAGCTCCTCATTCCATTCAGAGTGAGAAGGGCCCCGCCATGCAGCCTTTCCTCCTCCTATTCACCAACCCCACTCTCGCTCCAGCCATCTTGATATCCTTGCTGGTCCTGGAGCAGGCCAGCCACGCTCTTGCCCCAGGGCCTTTGCACTTGCTGCCCCTCTCCTGTGATGCCCTCCTGGATCTCTGCATGGCTCCCTCCTGCCCTCCCTCCCTCGAGTCTTTGCTCACATGTCCCCTTCTCAGAGGGGCTCACCCTGGTGCCCTTCGAAAGTGGGCATCCACTCCCTTCCCACCCTGGCACCCGCACCCTCCTGTCTTCCTTTTTCTGTTCTCCATCCTACTCATCTCCCCCAACTAGAAAGGCAGCTGCAGCTGCGGAGCACGGGATCTCCATCTGCAGCTGCATCCCGGGACCTAGAACAGGTACAAAAGTACCTAATAAGTACCCACTGAATGAATAATTGGCTGAGTTTTCTGTACCAAAGACTGAGCTAAGACTCTTTAAAAGGATGATCTTATTTAAGCCTTACAGCAAGTAAATGTTATCCCCATCTTCCTGATGAGGACACAGTGACCACCACGCTCAAGGACACAGAGGGTGGACGTGCCACATTCACACTCTGTGACTTAGAGCGGCTGGACGGGCAGGGACTTAGGAGGCCTACAGCAGCCAGGGTGAGATTATGAGGCTGAGCTGAGAATATCAAGACTGTACCGAGTAGGGGGCCTTGGCAAGTGTGGAGAGCCCGGCAGCTGGGGCAGAGGGCGGAGTACGGTGTGCGTTTACGGACCTCTTCAAACGAGGTAGGAAGGTCAGAAGTCAAAAAGGGAACAAATGATGTTTAACCACACAAAAATGAAAATCCAATGGTTGGATATCCATTCCAAATACACAAAGGCAACGGATAAGTGATCCGGGCCAGGCACAGAAGGCCATGCACCCGTAGGATTGCACTCAGAGCTCCCAAATGCATAGGAATAGAAGGGTGGGTGCAGGAGGCTGAGGGGTGGGGAAAGGGCATGGGTGTTTCATGAGGACAGAGCTTCCGTTTCATGCAATGAAAAGAGTTTGGAGACGGATGGTGGTGACTGGACTATACACTTACACACGGTAGCGATGGTACACTTTGTATTATGTATATTTTACCACGATCTTTTTAAAGTGTCAAAGGCAAATGGCCAAATGGTTCCTTGTCCTATAGCTGTAGCAGCCATCGGCTGTTAGTGACAAAGCCCCTGAGTCAAGATGACAGCAGCCCCCATAACTCCTAATCGGCTCTCCCGCGTGGAGTCATTTAGGAGTAGTCGCATTAGAGACAAGTCCAACATCTAATCTTCCACCCTGGCCAGGGCCCCAGCTGGCAGCGAGGGTGGGAGACTCCGGGCAGAGCAGAGGGCGCTGACATTGGGGCCCGGCCTGGCTTGGGTCCCTCTGGCCTTTCCCCAGGGGCCCTCTTTCCTTGGGGCTTTCTTGGGCCGCCACTGCTCCCGCTCCTCTCCCCCCATCCCACCCCCTCACCCCCTCGTTCTTCATATCCTTCTCTAGTGCTCCCTCCACTTTCATCCACCCTTCTGCAAGAGTGTGGGACCACAAATGAGTTTTCACCTGGCCTGGGGACACACGTGCCCCCACAGGTGCTGAGTGACTTTCTAGGACAGTAATCTGCTTTAGGCTAAAATGGGACTTGATCTTCTGTTAGCCCTAATCATCAATTAGCAGAGCCGGTGAAGGTGCAGAACCTACCGCCTTTCCAGGCCTCCTCCCACCTCTGCCACCTCCACTCTCCTTCCTGGGATGTGGGGGCTGGCACACGTGTGGCCCAGGGCATTGGTGGGATTGCACTGAGCTGGGTCATTAGCGTAATCCTGGACAAGGGCAGACAGGGCGAGCGGAGGGCCAGCTCCGGGGCTCAGGCAAGGCTGGGGGCTTCCCCCAGACACCCCACTCCTCCTCTGCTGGACCCCCACTTCATAGGGCACTTCGTGTTCTCAAAGGGCTTCCAAATAGCATGGTGGCCTTGGATGCCCAGGGAAGCCTCAGAGTTGCTTATCTCCCTCTAGACAGAAGGGGAATCTCGGTCAAGAGGGAGAGGTCGCCCTGTTCAAGGCCACCCAGCCAGCTCATGGCGGTAATGGGACAAGGCTGGCCAGCCATCCCACCCTCAGAAGGGACCCGGTGGGGCAGGTGATCTCAGAGGAGGCTCACTTCTGGGTCTCACATTCTTGGATCCTCGGATCCTCTGACTCTGGTGGGGACAGGCAGACCAAGCTCTCTTGGACCCGGGAAGAGGGACCCTTGGAAGTCACTTGGGATTGAGTTCTAGAGTCTTGACACTGTTTCAGCAGATCTATACTTTGAACCCACCTCAGGCATCTCATCCACAGAACAGGGACAGTGACCATTCCATCTTGCCAAGGAGTGCGGGGCACACACCATGCTGCTGGCAGCCAGGGTGGAAAGTCAAGGGGTCCCAGCTGAAGCACT");
 +
    $("#bottominput").val("GNNGNNTNN");
 +
    $("#topinput").val("GNNGNNANN");
 +
    $("#helpfile").toggle("slow");
 +
});
-
}
+
// clear results table
 +
$("#clearresults").click(function(){
 +
    $("#result").html("");
 +
    $("#helpfile").hide("slow");
 +
});
 +
// end jQuery
 +
});
</script>
</script>
-
 
</head>
</head>
-
 
-
 
<body>
<body>
-
 
+
<div class="whitebox">
-
<h2>iGEM 2011 Zinc Finger Binding Site Finder</h2>
+
<h1>Zinc Finger Binding Site Finder</h1>
-
 
+
<h4>by Justin Chew</h4>
-
Justin Chew<br />
+
-
 
+
-
<br />
+
-
 
+
<form>
<form>
-
 
<table id="ui">
<table id="ui">
-
 
<tr><td colspan="3">
<tr><td colspan="3">
-
 
+
   <textarea id="sequence" rows="8" cols="60" class="graytext">Insert target DNA sequence here</textarea>
-
   <textarea id="sequence" rows="8" cols="80" class="graytext" onClick="clearForm(this);">Insert DNA sequence here</textarea>
+
-
 
+
</td></tr>
</td></tr>
-
 
<tr>
<tr>
-
 
<td width="40%">
<td width="40%">
-
 
Bottom Zinc Finger Array:<br />
Bottom Zinc Finger Array:<br />
-
 
+
5'-<input type="text" id="bottominput" value="Input 9-bp site here" class="graytext" />-3'
-
<select id="21">
+
-
 
+
-
<option value="\w\wC">GNN</option>
+
-
 
+
-
    <option value="\w\wG">CNN</option>
+
-
 
+
-
    <option value="\w\wA">TNN</option>
+
-
 
+
-
    <option value="\w\wT">ANN</option>
+
-
 
+
-
    <option value="\w\w\w">NNN</option>
+
-
 
+
-
</select>
+
-
 
+
-
<select id="22">
+
-
 
+
-
<option value="\w\wC">GNN</option>
+
-
 
+
-
    <option value="\w\wG">CNN</option>
+
-
 
+
-
    <option value="\w\wA">TNN</option>
+
-
 
+
-
    <option value="\w\wT">ANN</option>
+
-
 
+
-
    <option value="\w\w\w">NNN</option>
+
-
 
+
-
</select>
+
-
 
+
-
<select id="23">
+
-
 
+
-
<option value="\w\wC">GNN</option>
+
-
 
+
-
    <option value="\w\wG">CNN</option>
+
-
 
+
-
    <option value="\w\wA">TNN</option>
+
-
 
+
-
    <option value="\w\wT">ANN</option>
+
-
 
+
-
    <option value="\w\w\w">NNN</option>
+
-
 
+
-
</select><br />
+
-
 
+
-
<input type="text" id="bottom" value="Input NTPs here" class="graytext" onClick="clearForm(this);" />
+
-
 
+
</td>
</td>
-
 
<td width="40%">
<td width="40%">
-
 
Top Zinc Finger Array:<br />
Top Zinc Finger Array:<br />
-
 
+
5'-<input type="text" id="topinput" value="Input 9-bp site here" class="graytext" />-3'
-
<select id="11">
+
-
 
+
-
<option value="G\w\w">GNN</option>
+
-
 
+
-
    <option value="C\w\w">CNN</option>
+
-
 
+
-
    <option value="T\w\w">TNN</option>
+
-
 
+
-
    <option value="A\w\w">ANN</option>
+
-
 
+
-
    <option value="\w\w\w">NNN</option>
+
-
 
+
-
</select>
+
-
 
+
-
<select id="12">
+
-
 
+
-
<option value="G\w\w">GNN</option>
+
-
 
+
-
    <option value="C\w\w">CNN</option>
+
-
 
+
-
    <option value="T\w\w">TNN</option>
+
-
 
+
-
    <option value="A\w\w">ANN</option>
+
-
 
+
-
    <option value="\w\w\w">NNN</option>
+
-
 
+
-
</select>
+
-
 
+
-
<select id="13">
+
-
 
+
-
<option value="G\w\w">GNN</option>
+
-
 
+
-
    <option value="C\w\w">CNN</option>
+
-
 
+
-
    <option value="T\w\w">TNN</option>
+
-
 
+
-
    <option value="A\w\w">ANN</option>
+
-
 
+
-
    <option value="\w\w\w">NNN</option>
+
-
 
+
-
</select><br />
+
-
 
+
-
<input type="text" id="top" value="Input NTPs here" class="graytext" onClick="alert('hi');"/>
+
-
 
+
</td>
</td>
-
 
<td width="20%">
<td width="20%">
-
 
Nucleotide Gap:<br />
Nucleotide Gap:<br />
-
 
<select id="gap">
<select id="gap">
-
 
<option value="5">5</option>
<option value="5">5</option>
-
 
     <option value="6">6</option>
     <option value="6">6</option>
-
 
<option value="7">7</option>
<option value="7">7</option>
-
 
+
</select>
-
</select><br />&nbsp;
+
-
 
+
</td>
</td>
-
 
</tr>
</tr>
-
 
<tr><td colspan="3">
<tr><td colspan="3">
-
 
+
<input type="button" id="findcustom" value="Find binding sites" />
-
<input type="button" value="Test (drop down menu)" onClick="findSites();" />
+
<input type="button" id="clearresults" value="Clear results" />
-
 
+
-
<input type="button" value="Test custom input" onClick="findCustom();" />
+
-
 
+
-
<input type="button" value="Show me ALL binding sites!" onClick="findAllSites();" id="allsites"/>
+
-
 
+
</td></tr>
</td></tr>
-
 
</table>
</table>
-
 
</form>
</form>
-
 
+
<h5><span id="showhelp">How do I use this tool? (Click to toggle help)</span></h5>
 +
<div id="helpfile">
 +
<h2>Background</h2>
 +
<p>This tool is designed specifically to find binding sites for zinc finger nucleases (ZFNs) in order to create double stranded breaks in DNA.  Ultimately, through these double stranded breaks, ZFNs allow genome editing with the insertion or deletion of genes at very specific target DNA sites.  Each ZFN recognizes and binds to a specific 9-bp DNA sequence that is unique to each ZFN, and the binding sites are arranged such that two ZFNs flank the cut site on opposite strands of DNA, as pictured below:</p>
 +
<br />
 +
<p><img class="zfndiagram" src="https://static.igem.org/mediawiki/2011/7/7f/ZFN_diagram.jpeg" width="50%" height="40%"></p>
<br />
<br />
 +
<p>Given two 9-bp DNA sequences, this program will search a string of DNA to find a configuration such that these two 9-bp sequences are located on opposite strands with a short gap in between them (5-7 bp long), where the double stranded break will occur.  This is useful due to the fact that we currently do not have a library of ZFNs that spans the space of all 9-bp recognition sites.  Therefore, if the 9-bp binding sites for two zinc fingers are known and well-characterized, this program will search for a site in which these two known zinc fingers can be used to make a cut for gene insertion or deletion.</p>
-
<div id="results"></div>
+
<h2>Tool Usage</h2>
 +
<p>The "bottom" ZFN binds to the bottom strand of DNA, while the "top" ZFN binds to the top strand.  To use the tool, input a 9-bp DNA sequence into the text boxes for both bottom and top ZFNs, and then click "Find binding sites".  Input must be a 9-bp DNA sequence (you may use "N" for an unspecified nucleotide).  The results will be listed in a table which shows:
 +
<ol>
 +
<li>The relative position of the binding site within the input DNA string</li>
 +
<li>The binding sequence for the bottom ZFN, 5' to 3'</li>
 +
<li>The binding sequence for the top ZFN, 5' to 3'</li>
 +
<li>The entire binding sequence, including the 5-7 bp nucleotide gap, from 5' to 3' on the top strand</li>
 +
</ol>
 +
</p>
-
</body>
+
<h2>Tool Demo</h2>
 +
<p>If you would like to try out an example, you can test the tool out with a DNA sequence that we used to search for a suitable target site for our colorblindness target, in which we tried to search for a site upstream of the red opsin gene to insert a copy of the green opsin gene.  This DNA sequence is a stretch of the human X chromosome just upstream of red opsin, and the two zinc fingers we would like to search for have the form of GNNGNNTNN for the bottom finger and GNNGNNANN for the top finger.</p>
 +
<p>Click <span id="filldna">here</span> to test the tool using these sequences (this is actually how we located our colorblindness targets on the genome).</p>
 +
</div><br />
 +
<div id="result"></div>
 +
</div>
 +
</body>
</html>
</html>

Latest revision as of 03:42, 29 September 2011

bar

Zinc Finger Binding Site Finder

Zinc Finger Binding Site Finder

by Justin Chew

Bottom Zinc Finger Array:
5'--3'
Top Zinc Finger Array:
5'--3'
Nucleotide Gap:
How do I use this tool? (Click to toggle help)

Background

This tool is designed specifically to find binding sites for zinc finger nucleases (ZFNs) in order to create double stranded breaks in DNA. Ultimately, through these double stranded breaks, ZFNs allow genome editing with the insertion or deletion of genes at very specific target DNA sites. Each ZFN recognizes and binds to a specific 9-bp DNA sequence that is unique to each ZFN, and the binding sites are arranged such that two ZFNs flank the cut site on opposite strands of DNA, as pictured below:



Given two 9-bp DNA sequences, this program will search a string of DNA to find a configuration such that these two 9-bp sequences are located on opposite strands with a short gap in between them (5-7 bp long), where the double stranded break will occur. This is useful due to the fact that we currently do not have a library of ZFNs that spans the space of all 9-bp recognition sites. Therefore, if the 9-bp binding sites for two zinc fingers are known and well-characterized, this program will search for a site in which these two known zinc fingers can be used to make a cut for gene insertion or deletion.

Tool Usage

The "bottom" ZFN binds to the bottom strand of DNA, while the "top" ZFN binds to the top strand. To use the tool, input a 9-bp DNA sequence into the text boxes for both bottom and top ZFNs, and then click "Find binding sites". Input must be a 9-bp DNA sequence (you may use "N" for an unspecified nucleotide). The results will be listed in a table which shows:

  1. The relative position of the binding site within the input DNA string
  2. The binding sequence for the bottom ZFN, 5' to 3'
  3. The binding sequence for the top ZFN, 5' to 3'
  4. The entire binding sequence, including the 5-7 bp nucleotide gap, from 5' to 3' on the top strand

Tool Demo

If you would like to try out an example, you can test the tool out with a DNA sequence that we used to search for a suitable target site for our colorblindness target, in which we tried to search for a site upstream of the red opsin gene to insert a copy of the green opsin gene. This DNA sequence is a stretch of the human X chromosome just upstream of red opsin, and the two zinc fingers we would like to search for have the form of GNNGNNTNN for the bottom finger and GNNGNNANN for the top finger.

Click here to test the tool using these sequences (this is actually how we located our colorblindness targets on the genome).