Team:Freiburg/Project/modeling

From 2013.igem.org

(Difference between revisions)
m
Line 1: Line 1:
-
{{:Template:Freiburg2013_Template1}}
 
-
 
-
 
<html>
<html>
<head>
<head>
Line 7: Line 4:
<title>CrispR</title>
<title>CrispR</title>
<link rel="stylesheet" type="text/css">
<link rel="stylesheet" type="text/css">
 +
<script type="text/javascript" src="script.js"></script>
-
<script language="JavaScript">
+
<SCRIPT LANGUAGE="JavaScript">
-
function CrispR (form) {
+
 
-
var TestVar = form.Sequenz.value;
+
jQuery(document).ready( function() {
-
  var length = TestVar.length;
+
    document.getElementById('button1').onclick = function()
 +
{
 +
 
 +
var TestVar = document.getElementById('form1').Sequenz.value;
 +
    var length = TestVar.length;
   TestVar = TestVar.trim();
   TestVar = TestVar.trim();
   TestVar = TestVar.toUpperCase();
   TestVar = TestVar.toUpperCase();
-
if(length < 32){alert("too short");return;}
+
if(length<32){alert("too short");return;}
var nonNuc = TestVar.search(/[^T|^A|^G|^C]/);
var nonNuc = TestVar.search(/[^T|^A|^G|^C]/);
-
if (nonNuc != -1){alert("There are non nucleotide signs in your sequence. Plese check your sequence!");return;}
+
if (nonNuc != -1){alert("There are non nucleotide signs in your sequence. Please check your sequence!");return;}
-
+
-
for (Count = 0; Count < 2; Count++) {
+
-
    if (form.rad[Count].checked)
+
-
      { break;}
+
-
  }
+
-
  if(Count != 0 && Count != 1){ alert("please check which strand you have inserted");return; }  
+
for (Count = 0; Count < 2; Count++) {
-
 
+
 
-
  if (Count==0) {
+
    if (document.getElementById('form1').rad[Count].checked){
 +
 
 +
 
 +
        break;}
 +
  }
 +
 
 +
 
 +
 
 +
if (Count==0) {
  
  
   var pattern = /.GG/g;
   var pattern = /.GG/g;
Line 32: Line 37:
   var index1 = [];
   var index1 = [];
   var k = 0;
   var k = 0;
-
 
+
 
-
  while (m = pattern.exec(TestVar)){
+
while (m = pattern.exec(TestVar)){
   oligo4.push(m);
   oligo4.push(m);
   index1.push(m.index);
   index1.push(m.index);
Line 89: Line 94:
   j = j+25;
   j = j+25;
   }
   }
-
  } else {
+
 
 +
 
 +
 
 +
 
 +
}else {
    
    
  var pattern = /CC./g;
  var pattern = /CC./g;
Line 142: Line 151:
   }
   }
   }
   }
-
 
+
 
-
 
+
var oligo2rev = oligo1.slice();
-
  TestVar = TestVar.replace(/</g,"\n <");
+
for( var k=0; k<oligo1.length; k++ ) {
 +
  oligo2rev[k] = oligo2[k].split("").reverse().join("");
 +
}
 +
 
 +
 
 +
TestVar = TestVar.replace(/</g,"\n <");
  
  
   var w = window.open("blank.html", "blank", "height=50,width=300");
   var w = window.open("blank.html", "blank", "height=50,width=300");
-
 
+
w.document.writeln("<h2> The inserted sequence is: </h2>");
-
  w.document.writeln("<h2> The inserted sequence is: </h2>");
+
w.document.writeln(TestVar);
-
+
-
  w.document.writeln(TestVar);
+
     w.document.writeln("<h1>possible crRNAs are:</h1><div>");
     w.document.writeln("<h1>possible crRNAs are:</h1><div>");
   w.document.writeln("<table>");
   w.document.writeln("<table>");
     w.document.writeln("<tr><td>");
     w.document.writeln("<tr><td>");
-
    for (i=0; i<oligo2.length; i++ ) {
+
  for (i=0; i<oligo2.length; i++ ) {
    
    
-
    w.document.writeln("<h3> Oligo number: " + (parseInt(i, 10) + parseInt(1, 10)) + " was found at position " +  
+
w.document.writeln("<h3> Oligo number: " + (parseInt(i, 10) + parseInt(1, 10)) + " was found at position " + (parseInt(index[i], 10) + parseInt(1, 10))  + "</h3>");
 +
    w.document.writeln("<p>Oligo1: " + oligo1[i] + "</p><p>Oligo2: " + oligo2[i] + "</p>");
 +
    w.document.writeln("<pre>Oligo1: " + oligo1[i] + "<br>            ||||||||||||||||||||||||||||||||<br>Oligo2:    " +  
-
(parseInt(index[i], 10) + parseInt(1, 10))  + "</h3>");
 
-
    w.document.writeln("<p>Oligo1: " + oligo1[i] + "</p><p>Oligo2: " + oligo2[i] + "</p>");
 
-
    w.document.writeln("<pre>Oligo1: " + oligo1[i] + "<br>"+"&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;||||||||||||||||||||||||||||||||<br>Oligo2: &nbsp;&nbsp;&nbsp;&nbsp;" +
 
-
oligo2[i].split().reverse().join() + "</pre>");
+
oligo2rev[i] + "</pre>");
    
    
     }
     }
-
   
+
w.document.writeln("</td>");
-
  w.document.writeln("</td>");
+
   w.document.writeln("<td>");
   w.document.writeln("<td>");
    
    
Line 173: Line 183:
   w.document.writeln("</div>");
   w.document.writeln("</div>");
  
  
-
   w.document.close();
+
   w.document.close();  
-
 
+
}
}
 +
} );
</script>
</script>
 +
<style type="text/css">
<style type="text/css">
-
body{width:1100px;}
+
body {  
-
 
+
margin:2cm;  
-
#h1 {
+
font-family: Arial;
-
text-align:center;
+
color: white;
-
font-weight:bold;  
+
-
font-size:30px;
+
background-color: #2E2E2E;
-
padding-top: 250px;
+
}
-
margin-bottom: 0px;
+
-
color:white;
+
h1 {
-
}
+
text-align: center;
-
 
+
font-family: Arial;
-
 
+
text-decoration:underline;
-
form {padding-top:60px;
+
}
-
background: #2E2E2E;
+
-
width:1000px;
+
form {
-
}
+
padding-top:60px;
 +
}
textarea {
textarea {
-
background: #2E2E2E;
+
width: 40%;
-
width: 60%;
+
border: 5px solid #999999;
-
color:white;
+
}
-
float:left;
+
-
overflow:auto;
+
fieldset {
-
margin-right:20px;
+
width:50%;
-
}
+
float:right;
 +
border: 5px solid #999999;
 +
background-color: #cccccc;
 +
font-family: Arial;
 +
color: black;
 +
}
 +
 +
#h2 {
 +
font-weight: bold;
 +
text-decoration:underline;
 +
}
-
legend {width:40%;
+
#explanation {
-
background: #2E2E2E;
+
float:left;
-
color:white;
+
font-family: Arial;
-
overflow:auto;
+
}
-
}
+
-
#fieldset1 {width:30%;
 
-
background: #2E2E2E;
 
-
color:white;
 
-
overflow:auto;
 
-
border: 1px solid white;
 
-
}
 
-
#explanation {float:left;
 
-
color:white;
 
-
background: #2E2E2E;
 
-
}
 
</style>
</style>
</head>
</head>
<body>
<body>
-
<p id="h1">crRNA-Design</p>
+
 
-
<form action="" method="get">
+
<div id="button1"> button </div>
 +
<h1>crRNA-Design</h1>
 +
<form id="form1" action="" method="get">
<legend>Enter Target Sequence</legend>
<legend>Enter Target Sequence</legend>
<textarea name="Sequenz" type="text" rows="8" cols="40">
<textarea name="Sequenz" type="text" rows="8" cols="40">
Line 233: Line 246:
-
<fieldset id="fieldset1">
+
<fieldset>
-
<legend>choose Program</legend>
+
<p id="h2">Choose Program</p>
<p>
<p>
Which strand should be targeted?<br>
Which strand should be targeted?<br>
Line 242: Line 255:
</p>
</p>
<p>
<p>
-
<input type="submit" value="submit" name="ok" onClick="CrispR(this.form)" />
+
<input id="button1" type="submit" value="submit" name="ok" />
<input type="reset" value="reset">
<input type="reset" value="reset">
</p>
</p>
Line 256: Line 269:
follows:  
follows:  
<ol>
<ol>
-
     <li>Search at your desired target sequenz for a CCN (reverse complement of the PAM sequence) at the coding strand.</li>
+
     <li>Search at your desired target sequence for a CCN (reverse complement of the PAM sequence) at the coding strand.</li>
   <li> Extract the following (3') 30 nucleotides.</li>
   <li> Extract the following (3') 30 nucleotides.</li>
   <li> Extract the reverse complement.</li>
   <li> Extract the reverse complement.</li>
Line 267: Line 280:
</div>
</div>
-
 
-
 
</body>
</body>
</html>
</html>

Revision as of 22:29, 26 September 2013

CrispR

button

crRNA-Design

Enter Target Sequence

Choose Program

Which strand should be targeted?

non coding strand coding strand

This tool helps you to design a crRNA-insert for pX334a. The oligos contain overhangs which fit to the BbsI-overhangs by pX334a.

For repression of gene transcription by targeting the coding sequence it´s crucial to target the non template (= coding) DNA strand.
Therefore the oligos must be designed as follows:

  1. Search at your desired target sequence for a CCN (reverse complement of the PAM sequence) at the coding strand.
  2. Extract the following (3') 30 nucleotides.
  3. Extract the reverse complement.
  4. Add AAAC at the 5' end and GT at the 3' end. This will be your fist oligo.
  5. Take the sequence from step 2 and add TAAAAC at the 5' end. This will be your second oligo.

Retrieved from "http://2013.igem.org/Team:Freiburg/Project/modeling"