Team:Freiburg/Project/modeling/crRNA/js

From 2013.igem.org

(Difference between revisions)
m
Line 1: Line 1:
 +
<html>
<html>
 +
<head>
 +
<title>CrispR</title>
 +
<link rel="stylesheet" type="text/css">
 +
<script type="text/javascript" src="script.js"></script>
<SCRIPT LANGUAGE="JavaScript">
<SCRIPT LANGUAGE="JavaScript">
-
function CrispR(form) {
+
function CrispR (form) {
var TestVar = form.Sequenz.value;
var TestVar = form.Sequenz.value;
   var length = TestVar.length;
   var length = TestVar.length;
Line 77: Line 82:
   var j = 0;
   var j = 0;
   for( var k=0; k<oligo2.length; k++ ) {
   for( var k=0; k<oligo2.length; k++ ) {
-
   TestVar = TestVar.substring(0,index[k]+30+j) + TestVar.substring(index[k]+30+j,index[k]+33+j).fontcolor("red") + TestVar.substring(index[k]+33+j,TestVar.length);
+
   TestVar = TestVar.substring(0,index[k]+30+j) + TestVar.substring(index[k]+30+j,index[k]+33+j).fontcolor("red") +  
 +
 
 +
TestVar.substring(index[k]+33+j,TestVar.length);
   j = j+25;
   j = j+25;
   }
   }
Line 127: Line 134:
   var j = 0;
   var j = 0;
   for( var k=0; k<oligo2.length; k++ ) {
   for( var k=0; k<oligo2.length; k++ ) {
-
   TestVar = TestVar.substring(0,index[k]+j) + TestVar.substring(index[k]+j,index[k]+3+j).fontcolor("red") + TestVar.substring(index[k]+3+j,TestVar.length);
+
   TestVar = TestVar.substring(0,index[k]+j) + TestVar.substring(index[k]+j,index[k]+3+j).fontcolor("red") + TestVar.substring
 +
 
 +
(index[k]+3+j,TestVar.length);
   j = j+25;
   j = j+25;
   }
   }
Line 135: Line 144:
   TestVar = TestVar.replace(/</g,"\n <");
   TestVar = TestVar.replace(/</g,"\n <");
  
  
-
  
+
   var w = window.open("blank.html", "blank", "height=50,width=300");
-
  document.open();
+
 
-
   document.writeln("<h2> The inserted sequence is: </h2>");
+
   w.document.writeln("<h2> The inserted sequence is: </h2>");
   
   
-
   document.writeln(TestVar);
+
   w.document.writeln(TestVar);
-
     document.writeln("<h1>possible crRNAs are:</h1><div>");
+
     w.document.writeln("<h1>possible crRNAs are:</h1><div>");
-
    document.writeln("<table>");
+
  w.document.writeln("<table>");
-
     document.writeln("<tr><td>");
+
     w.document.writeln("<tr><td>");
     for (i=0; i<oligo2.length; i++ ) {
     for (i=0; i<oligo2.length; i++ ) {
    
    
-
     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("<h3> Oligo number: " + (parseInt(i, 10) + parseInt(1, 10)) + " was found at position " +  
-
     document.writeln("<p>Oligo1: " + oligo1[i] + "</p><p>Oligo2: " + oligo2[i] + "</p>");
+
 
-
     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>");
+
(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>");
    
    
     }
     }
    
    
-
   document.writeln("</td>");
+
   w.document.writeln("</td>");
-
   document.writeln("<td>");
+
   w.document.writeln("<td>");
    
    
-
   document.writeln("</td></tr></table>");
+
   w.document.writeln("</td></tr></table>");
-
   document.writeln("</div>");
+
   w.document.writeln("</div>");
  
  
-
   document.close();
+
   w.document.close();
  
  
}
}
</SCRIPT>
</SCRIPT>
 +
<style type="text/css">
 +
body {
 +
margin:2cm;
 +
font-family: Arial;
 +
color: white;
 +
 +
background-color: #2E2E2E;
 +
}
 +
 +
h1 {
 +
text-align: center;
 +
font-family: Arial;
 +
text-decoration:underline;
 +
}
 +
 +
form {
 +
padding-top:60px;
 +
}
-
<html>
+
textarea {
 +
width: 40%;
 +
border: 5px solid #999999;
 +
}
 +
 +
fieldset {
 +
width:50%;
 +
float:right;
 +
border: 5px solid #999999;
 +
background-color: #cccccc;
 +
font-family: Arial;
 +
color: black;
 +
}
 +
 +
#h2 {
 +
font-weight: bold;
 +
text-decoration:underline;
 +
}
 +
 
 +
#explanation {
 +
float:left;
 +
font-family: Arial;
 +
}
 +
 
 +
 
 +
 
 +
</style>
 +
</head>
 +
<body>
 +
<h1>crRNA-Design</h1>
 +
<form action="" method="get">
 +
<legend>Enter Target Sequence</legend>
 +
<textarea name="Sequenz" type="text" rows="8" cols="40">
 +
</textarea>
 +
 +
 +
<fieldset>
 +
<p id="h2">Choose Program</p>
 +
<p>
 +
Which strand should be targeted?<br>
 +
<p>
 +
<input type="radio" name="rad" value="1"> non coding strand
 +
<input type="radio" name="rad" value="2"> coding strand
 +
</p>
 +
<p>
 +
<input type="submit" value="submit" name="ok" onClick="CrispR(this.form)" />
 +
<input type="reset" value="reset">
 +
</p>
 +
</fieldset>
 +
 +
</form>
 +
<div id="explanation">
 +
<p>This tool helps you to design a crRNA-insert for pX334a. The oligos contain overhangs which fit to
 +
the BbsI-overhangs by pX334a.</p>
 +
 +
<p>For repression of gene transcription by targeting the coding sequence
 +
it´s crucial to target the non template (= coding) DNA strand. <br> Therefore the oligos must be designed as
 +
follows:
 +
<ol>
 +
    <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 reverse complement.</li>
 +
    <li>Add AAAC at the 5' end and GT at the 3' end. This will be your fist oligo.</li>
 +
    <li>Take the sequence from step 2 and add TAAAAC at the 5' end. This will be your second oligo.</li>
 +
    </ol>
 +
</p>
 +
 +
 +
 +
</div>
 +
 +
</body>
 +
</html>

Revision as of 16:44, 26 September 2013

CrispR

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/crRNA/js"