Difference between revisions of "Team:Jilin China/Part/Search Engine"

 
(37 intermediate revisions by 2 users not shown)
Line 6: Line 6:
 
<style>
 
<style>
 
.s1{
 
.s1{
  background: url(https://static.igem.org/mediawiki/2018/f/f3/T--Jilin_China--Description--Banner.jpeg) no-repeat top left;
+
  background: url(https://static.igem.org/mediawiki/2018/8/8f/T--Jilin_China--Achievement--Banner.jpeg) no-repeat center;
 
  background-size: cover;
 
  background-size: cover;
 
}
 
}
Line 40: Line 40:
 
  background: url(https://static.igem.org/mediawiki/2018/a/a7/T--Jilin_China--Common--Icons--Logo.svg) no-repeat left;
 
  background: url(https://static.igem.org/mediawiki/2018/a/a7/T--Jilin_China--Common--Icons--Logo.svg) no-repeat left;
 
  background-size:auto 3rem ;
 
  background-size:auto 3rem ;
 +
}
 +
.title_con p{
 +
text-shadow: 0.3rem 0.3rem 1rem rgba(0,0,0,0.3);
 
}
 
}
 
}
 
}
Line 52: Line 55:
 
   <p><span>SynRT</span><br>EXPLORER</p>
 
   <p><span>SynRT</span><br>EXPLORER</p>
 
   <br />
 
   <br />
  <table>
 
  <tr>
 
    <td><a href="#pragraph_1" class="clickwave">Promoters</a></td>
 
  </tr>
 
  </table>
 
 
   </div>
 
   </div>
 
    
 
    
Line 70: Line 68:
 
     <li class="pragraph_0 full-width" id="pragraph_0">
 
     <li class="pragraph_0 full-width" id="pragraph_0">
 
     <div>
 
     <div>
 
+
      <p>We develop a SynRT Toolkit search engine -- SynRT Explorer, which allows users to choose an appropriate thermosensor. Users can select the melting temperature, relative intensity and sensitivity of thermosensors, and the Explorer will give you the information of part number, part name, predicted secondary structure, features and fitted curve. The secondary structure is predicted by mfold software. The fitted curve is based on our experimental results, and then we compute these features. (Please try Chrome to view this page.)</p>
    </div>
+
      <p><b>Using SynRT Explorer to pick your thermosensors! </b></p>
    </li>
+
<form class="engine">
    <li class="pragraph_1 start" id="pragraph_1">
+
        <p style="display:none"></p>
    <div>
+
<p>Choose Temperature First:</p>
      <h2>Title</h2>
+
    </div>
+
    </li>
+
    <li class="pragraph_2" id="pragraph_2">
+
    <div>
+
      <h2>Title</h2>
+
<form>
+
<p>Temperature</p>
+
 
<select id="attr1" name="library">
 
<select id="attr1" name="library">
 
<option value="v1-0">Temperature</option>
 
<option value="v1-0">Temperature</option>
Line 92: Line 82:
 
<option value="v1-6">40+</option>
 
<option value="v1-6">40+</option>
 
     </select>
 
     </select>
<p>Intensity</p>
+
<p>Then is Intensity</p>
 
<select id="attr2" name="">
 
<select id="attr2" name="">
 
<option value="v2-0">Intensity</option>
 
<option value="v2-0">Intensity</option>
Line 100: Line 90:
 
<option value="v2-4">15+</option>
 
<option value="v2-4">15+</option>
 
     </select>
 
     </select>
<p>Sensitivity</p>
+
<p>Next is Sensitivity</p>
 
<select id="attr3" name="">
 
<select id="attr3" name="">
<option value="default">Sensitivity</option>
+
<option value="v3-0">Sensitivity</option>
 
         <option value="v3-1">1&lt;</option>
 
         <option value="v3-1">1&lt;</option>
 
         <option value="v3-2">1&gt;</option>
 
         <option value="v3-2">1&gt;</option>
 
     </select>
 
     </select>
 +
    <br clear="both">
 
<input type="button" value="Look Up!" onClick="findItem()" />
 
<input type="button" value="Look Up!" onClick="findItem()" />
<input type="reset" value="Reset" />
+
<input type="reset" value="Reset" onClick="resetItem()" />
 
</form>
 
</form>
 
<style>
 
<style>
Line 114: Line 105:
 
box-shadow: 0 0 3rem rgba(0,0,0,0.3);
 
box-shadow: 0 0 3rem rgba(0,0,0,0.3);
 
margin:1rem;
 
margin:1rem;
height:18rem;
 
width:24rem;
 
 
display: none;
 
display: none;
 
}
 
}
Line 122: Line 111:
 
height:3rem;
 
height:3rem;
 
margin:1rem;
 
margin:1rem;
 +
float:right !important;
 
}
 
}
 +
 
select:not(#attr1) option{
 
select:not(#attr1) option{
 
display:none;
 
display:none;
Line 128: Line 119:
 
select option{
 
select option{
 
height:3rem;
 
height:3rem;
 +
}
 +
select option[value="v2-0"],select option[value="v3-0"]{
 +
display: block !important;
 +
}
 +
.engine input{
 +
width:10rem;
 +
height: 3rem;
 +
margin:1rem;
 +
float:none;
 +
}
 +
.engine p{
 +
float:left;
 +
width:50% !important;
 
}
 
}
 
</style>
 
</style>
 
<div class="datas">
 
<div class="datas">
<div class="item v1-3 v2-1 v3-2">BBa_K2541001</div>
+
                <div class="item not-found">Not Found</div>
<div class="item v1-3 v2-1 v3-1">BBa_K2541002</div>
+
<div class="item v1-3 v2-1 v3-2">BBa_K2541001<img src="https://static.igem.org/mediawiki/2018/8/84/T--Jilin_China--KitRT1.png" /></div>
<div class="item v1-5 v2-3 v3-2">BBa_K2541003</div>
+
<div class="item v1-3 v2-1 v3-1">BBa_K2541002<img src="https://static.igem.org/mediawiki/2018/c/c1/T--Jilin_China--KitRT2.png" /></div>
<div class="item v1-2 v2-2 v3-2">BBa_K2541004</div>
+
<div class="item v1-5 v2-3 v3-2">BBa_K2541003<img src="https://static.igem.org/mediawiki/2018/d/da/T--Jilin_China--KitRT3.png" /></div>
<div class="item v1-3 v2-1 v3-2">BBa_K2541005</div>
+
<div class="item v1-2 v2-2 v3-2">BBa_K2541004<img src="https://static.igem.org/mediawiki/2018/d/d0/T--Jilin_China--KitRT4.png" /></div>
<div class="item v1-4 v2-1 v3-1">BBa_K2541006</div>
+
<div class="item v1-3 v2-1 v3-2">BBa_K2541005<img src="https://static.igem.org/mediawiki/2018/d/d4/T--Jilin_China--KitRT5.png" /></div>
<div class="item v1-5 v2-1 v3-1">BBa_K2541007</div>
+
<div class="item v1-4 v2-1 v3-1">BBa_K2541006<img src="https://static.igem.org/mediawiki/2018/5/50/T--Jilin_China--KitRT6.png" /></div>
<div class="item v1-4 v2-2 v3-2">BBa_K2541008</div>
+
<div class="item v1-5 v2-1 v3-1">BBa_K2541007<img src="https://static.igem.org/mediawiki/2018/5/51/T--Jilin_China--KitRT7.png" /></div>
<div class="item v1-2 v2-1 v3-2">BBa_K2541009</div>
+
<div class="item v1-4 v2-2 v3-2">BBa_K2541008<img src="https://static.igem.org/mediawiki/2018/a/a8/T--Jilin_China--KitRT8.png" /></div>
<div class="item v1-2 v2-2 v3-2">BBa_K2541010</div>
+
<div class="item v1-2 v2-1 v3-2">BBa_K2541009<img src="https://static.igem.org/mediawiki/2018/d/d1/T--Jilin_China--KitRT9.png" /></div>
 +
<div class="item v1-2 v2-2 v3-2">BBa_K2541010<img src="https://static.igem.org/mediawiki/2018/8/85/T--Jilin_China--KitRT10.png" /></div>
  
<div class="item v1-2 v2-2 v3-2">BBa_K2541011</div>
+
<div class="item v1-2 v2-2 v3-2">BBa_K2541011<img src="https://static.igem.org/mediawiki/2018/4/4f/T--Jilin_China--KitRT11.png" /></div>
<div class="item v1-2 v2-2 v3-2">BBa_K2541012</div>
+
<div class="item v1-2 v2-2 v3-2">BBa_K2541012<img src="https://static.igem.org/mediawiki/2018/a/a3/T--Jilin_China--KitRT12.png" /></div>
<div class="item v1-2 v2-2 v3-1">BBa_K2541013</div>
+
<div class="item v1-2 v2-2 v3-1">BBa_K2541013<img src="https://static.igem.org/mediawiki/2018/9/97/T--Jilin_China--KitRT13.png" /></div>
<div class="item v1-6 v2-1 v3-1">BBa_K2541014</div>
+
<div class="item v1-6 v2-1 v3-1">BBa_K2541014<img src="https://static.igem.org/mediawiki/2018/8/83/T--Jilin_China--KitRT14.png" /></div>
<div class="item v1-5 v2-3 v3-1">BBa_K2541015</div>
+
<div class="item v1-5 v2-3 v3-1">BBa_K2541015<img src="https://static.igem.org/mediawiki/2018/b/b6/T--Jilin_China--KitRT15.png" /></div>
<div class="item v1-3 v2-1 v3-1">BBa_K2541016</div>
+
<div class="item v1-3 v2-1 v3-1">BBa_K2541016<img src="https://static.igem.org/mediawiki/2018/2/2e/T--Jilin_China--KitRT16.png" /></div>
<div class="item v1-4 v2-2 v3-1">BBa_K2541017</div>
+
<div class="item v1-4 v2-2 v3-1">BBa_K2541017<img src="https://static.igem.org/mediawiki/2018/2/25/T--Jilin_China--KitRT17.png" /></div>
<div class="item v1-3 v2-3 v3-2">BBa_K2541018</div>
+
<div class="item v1-3 v2-3 v3-2">BBa_K2541018<img src="https://static.igem.org/mediawiki/2018/2/28/T--Jilin_China--KitRT18.png" /></div>
<div class="item v1-6 v2-4 v3-1">BBa_K2541019</div>
+
<div class="item v1-6 v2-4 v3-1">BBa_K2541019<img src="https://static.igem.org/mediawiki/2018/6/61/T--Jilin_China--KitRT19.png" /></div>
<div class="item v1-3 v2-2 v3-2">BBa_K2541020</div>
+
<div class="item v1-3 v2-2 v3-2">BBa_K2541020<img src="https://static.igem.org/mediawiki/2018/a/a5/T--Jilin_China--KitRT20.png" /></div>
  
<div class="item v1-3 v2-1 v3-2">BBa_K2541021</div>
+
<div class="item v1-3 v2-1 v3-2">BBa_K2541021<img src="https://static.igem.org/mediawiki/2018/e/ec/T--Jilin_China--KitRT21.png" /></div>
  
<!--div class="item v1-1 v2-1 v3-1">BBa_K2541022</div>
+
<!--div class="item v1-1 v2-1 v3-1">BBa_K2541022<img src="" /></div>
<div class="item v1-1 v2-1 v3-1">BBa_K2541023</div>
+
<!--div class="item v1-1 v2-1 v3-1">BBa_K2541023<img src="" /></div>
<div class="item v1-1 v2-1 v3-1">BBa_K2541024</div-->
+
<!--div class="item v1-1 v2-1 v3-1">BBa_K2541024<img src="" /></div-->
  
<div class="item v1-2 v2-1 v3-1">BBa_K2541025</div>
+
<div class="item v1-2 v2-1 v3-1">BBa_K2541025<img src="https://static.igem.org/mediawiki/2018/1/1d/T--Jilin_China--KitRT25.png" /></div>
<div class="item v1-2 v2-2 v3-2">BBa_K2541026</div>
+
<div class="item v1-2 v2-2 v3-2">BBa_K2541026<img src="https://static.igem.org/mediawiki/2018/3/3c/T--Jilin_China--KitRT26.png" /></div>
<div class="item v1-1 v2-2 v3-1">BBa_K2541027</div>
+
<div class="item v1-1 v2-2 v3-1">BBa_K2541027<img src="https://static.igem.org/mediawiki/2018/e/e0/T--Jilin_China--KitRT27.png" /></div>
<div class="item v1-4 v2-1 v3-2">BBa_K2541028</div>
+
<div class="item v1-4 v2-1 v3-2">BBa_K2541028<img src="https://static.igem.org/mediawiki/2018/7/74/T--Jilin_China--KitRT28.png" /></div>
<div class="item v1-2 v2-1 v3-1">BBa_K2541029</div>
+
<div class="item v1-2 v2-1 v3-1">BBa_K2541029<img src="https://static.igem.org/mediawiki/2018/b/b2/T--Jilin_China--KitRT29.png" /></div>
<div class="item v1-6 v2-4 v3-1">BBa_K2541030</div>
+
<div class="item v1-6 v2-4 v3-1">BBa_K2541030<img src="https://static.igem.org/mediawiki/2018/c/c0/T--Jilin_China--KitRT30.png" /></div>
  
<div class="item v1-6 v2-3 v3-1">BBa_K2541031</div>
+
<div class="item v1-6 v2-3 v3-1">BBa_K2541031<img src="https://static.igem.org/mediawiki/2018/1/15/T--Jilin_China--KitRT31.png" /></div>
<div class="item v1-4 v2-1 v3-1">BBa_K2541032</div>
+
<div class="item v1-4 v2-1 v3-1">BBa_K2541032<img src="https://static.igem.org/mediawiki/2018/b/b7/T--Jilin_China--KitRT32.png" /></div>
<div class="item v1-4 v2-3 v3-1">BBa_K2541033</div>
+
<div class="item v1-4 v2-3 v3-1">BBa_K2541033<img src="https://static.igem.org/mediawiki/2018/f/f9/T--Jilin_China--KitRT33.png" /></div>
<div class="item v1-4 v2-3 v3-1">BBa_K2541034</div>
+
<div class="item v1-4 v2-3 v3-1">BBa_K2541034<img src="https://static.igem.org/mediawiki/2018/c/c7/T--Jilin_China--KitRT34.png" /></div>
<div class="item v1-4 v2-3 v3-2">BBa_K2541035</div>
+
<div class="item v1-4 v2-3 v3-2">BBa_K2541035<img src="https://static.igem.org/mediawiki/2018/c/cf/T--Jilin_China--KitRT35.png" /></div>
<div class="item v1-1 v2-2 v3-2">BBa_K2541036</div>
+
<div class="item v1-1 v2-2 v3-2">BBa_K2541036<img src="https://static.igem.org/mediawiki/2018/5/5c/T--Jilin_China--KitRT36N.png" /></div>
<div class="item v1-3 v2-2 v3-1">BBa_K2541037</div>
+
<div class="item v1-3 v2-2 v3-1">BBa_K2541037<img src="https://static.igem.org/mediawiki/2018/e/e2/T--Jilin_China--KitRT37N.png" /></div>
<div class="item v1-2 v2-3 v3-2">BBa_K2541038</div>
+
<div class="item v1-2 v2-3 v3-2">BBa_K2541038<img src="https://static.igem.org/mediawiki/2018/4/4e/T--Jilin_China--KitRT38N.png" /></div>
<div class="item v1-2 v2-2 v3-2">BBa_K2541039</div>
+
<div class="item v1-2 v2-2 v3-2">BBa_K2541039<img src="https://static.igem.org/mediawiki/2018/e/ee/T--Jilin_China--KitRT39N.png" /></div>
<div class="item v1-2 v2-3 v3-2">BBa_K2541040</div>
+
<div class="item v1-2 v2-3 v3-2">BBa_K2541040<img src="https://static.igem.org/mediawiki/2018/3/33/T--Jilin_China--KitRT40N.png" /></div>
  
<div class="item v1-2 v2-2 v3-1">BBa_K2541041</div>
+
<div class="item v1-2 v2-2 v3-1">BBa_K2541041<img src="https://static.igem.org/mediawiki/2018/4/4b/T--Jilin_China--KitRT41N.png" /></div>
<div class="item v1-1 v2-2 v3-2">BBa_K2541042</div>
+
<div class="item v1-1 v2-2 v3-2">BBa_K2541042<img src="https://static.igem.org/mediawiki/2018/4/47/T--Jilin_China--KitRT42N.png" /></div>
<div class="item v1-2 v2-1 v3-2">BBa_K2541043</div>
+
<div class="item v1-2 v2-1 v3-2">BBa_K2541043<img src="https://static.igem.org/mediawiki/2018/5/5a/T--Jilin_China--KitRT43N.png" /></div>
<div class="item v1-2 v2-3 v3-2">BBa_K2541044</div>
+
<div class="item v1-2 v2-3 v3-2">BBa_K2541044<img src="https://static.igem.org/mediawiki/2018/1/15/T--Jilin_China--KitRT44N.png" /></div>
<div class="item v1-1 v2-2 v3-1">BBa_K2541045</div>
+
<div class="item v1-1 v2-2 v3-1">BBa_K2541045<img src="https://static.igem.org/mediawiki/2018/b/b3/T--Jilin_China--KitRT45N.png" /></div>
<div class="item v1-1 v2-2 v3-2">BBa_K2541046</div>
+
<div class="item v1-1 v2-2 v3-2">BBa_K2541046<img src="https://static.igem.org/mediawiki/2018/b/bb/T--Jilin_China--KitRT46N.png" /></div>
<div class="item v1-1 v2-1 v3-1">BBa_K2541047</div>
+
<div class="item v1-1 v2-1 v3-1">BBa_K2541047<img src="https://static.igem.org/mediawiki/2018/3/39/T--Jilin_China--KitRT47N.png" /></div>
<div class="item v1-1 v2-1 v3-1">BBa_K2541048</div>
+
<div class="item v1-1 v2-1 v3-1">BBa_K2541048<img src="https://static.igem.org/mediawiki/2018/1/13/T--Jilin_China--KitRT48N.png" /></div>
<div class="item v1-1 v2-2 v3-1">BBa_K2541049</div>
+
<div class="item v1-1 v2-2 v3-1">BBa_K2541049<img src="https://static.igem.org/mediawiki/2018/0/0b/T--Jilin_China--KitRT49N.png" /></div>
<div class="item v1-1 v2-1 v3-1">BBa_K2541050</div>
+
<div class="item v1-1 v2-1 v3-1">BBa_K2541050<img src="https://static.igem.org/mediawiki/2018/2/26/T--Jilin_China--KitRT50N.png" /></div>
  
<div class="item v1-1 v2-1 v3-2">BBa_K2541051</div>
+
<div class="item v1-1 v2-1 v3-2">BBa_K2541051<img src="https://static.igem.org/mediawiki/2018/a/a4/T--Jilin_China--KitRT51.png" /></div>
 
 
 
</div>
 
</div>
+
      <div><p></p><p>Tips: If the explorer don't show any thermosensors, it means that there is no appropriate thermosensors, you can also change the features to a similar value. </p></div>
  
 
<script>
 
<script>
 
$(document).ready(function(){
 
$(document).ready(function(){
 
var ca1,ca2,ca3;
 
var ca1,ca2,ca3;
 +
       
 
$("#attr1").change(function(){
 
$("#attr1").change(function(){
 
         $("select:not(#attr1) option").css("display","none");
 
         $("select:not(#attr1) option").css("display","none");
 +
$("select:not(#attr1) option").prop('disbled', true);
 
ca1 = $("#attr1 option:selected").val();
 
ca1 = $("#attr1 option:selected").val();
 
$("."+ca1).each(function(){
 
$("."+ca1).each(function(){
 
if($(this).hasClass("v2-1")){
 
if($(this).hasClass("v2-1")){
 
$("option[value=v2-1]").css("display","block");
 
$("option[value=v2-1]").css("display","block");
 +
$("option[value=v2-1]").prop('disbled', false);
 
}else if($(this).hasClass("v2-2")){
 
}else if($(this).hasClass("v2-2")){
 
$("option[value=v2-2]").css("display","block");
 
$("option[value=v2-2]").css("display","block");
 +
$("option[value=v2-2]").prop('disbled', false);
 
}else if($(this).hasClass("v2-3")){
 
}else if($(this).hasClass("v2-3")){
 
$("option[value=v2-3]").css("display","block");
 
$("option[value=v2-3]").css("display","block");
 +
$("option[value=v2-3]").prop('disbled', false);
 
}else if($(this).hasClass("v2-4")){
 
}else if($(this).hasClass("v2-4")){
 
$("option[value=v2-4]").css("display","block");
 
$("option[value=v2-4]").css("display","block");
 +
$("option[value=v2-4]").prop('disbled', false);
 
}
 
}
 
});
 
});
 
});
 
});
 
$("#attr2").change(function(){
 
$("#attr2").change(function(){
         $("select.attr3 option").css("display","none");
+
         $("select#attr3 option").css("display","none");
 +
$("select#attr3 option").prop('disbled', true);
 
ca2 = $("#attr2 option:selected").val();
 
ca2 = $("#attr2 option:selected").val();
 +
 
$("."+ca2).each(function(){
 
$("."+ca2).each(function(){
if($(this).hasClass("v3-1")){
+
if($(this).hasClass(ca1)){
$("option[value=v3-1]").css("display","block");
+
if($(this).hasClass("v3-1")){
}else if($(this).hasClass("v3-2")){
+
$("option[value=v3-1]").css("display","block");
$("option[value=v3-2]").css("display","block");
+
$("option[value=v3-1]").prop('disbled', false);
 +
}else if($(this).hasClass("v3-2")){
 +
$("option[value=v3-2]").css("display","block");
 +
$("option[value=v3-2]").prop('disbled', false);
 +
}
 
}
 
}
 +
 
});
 
});
 
});
 
});
Line 228: Line 246:
 
if($(this).hasClass(ca1) || $(this).hasClass("v1-0")){
 
if($(this).hasClass(ca1) || $(this).hasClass("v1-0")){
 
if($(this).hasClass(ca2) || $(this).hasClass("v2-0")){
 
if($(this).hasClass(ca2) || $(this).hasClass("v2-0")){
if($(this).hasClass(ca2) || $(this).hasClass("v2-0")){
+
if($(this).hasClass(ca3) || $(this).hasClass("v3-0")){
 
$(this).css("display","block");
 
$(this).css("display","block");
 
}
 
}
Line 248: Line 266:
 
}
 
}
 
}
 
}
});
+
});
 +
}
 +
function resetItem(){
 +
$(".datas > .item").css("display","none");
 
}
 
}
 
 
</script>
 
</script>
 
     </div>
 
     </div>
 +
      <br clear="both">
 
     </li>
 
     </li>
 
   </ul>
 
   </ul>

Latest revision as of 02:55, 18 October 2018

SynRT
EXPLORER


Toolkits Design

  • We develop a SynRT Toolkit search engine -- SynRT Explorer, which allows users to choose an appropriate thermosensor. Users can select the melting temperature, relative intensity and sensitivity of thermosensors, and the Explorer will give you the information of part number, part name, predicted secondary structure, features and fitted curve. The secondary structure is predicted by mfold software. The fitted curve is based on our experimental results, and then we compute these features. (Please try Chrome to view this page.)

    Using SynRT Explorer to pick your thermosensors!

    Choose Temperature First:

    Then is Intensity

    Next is Sensitivity


    Not Found
    BBa_K2541001
    BBa_K2541002
    BBa_K2541003
    BBa_K2541004
    BBa_K2541005
    BBa_K2541006
    BBa_K2541007
    BBa_K2541008
    BBa_K2541009
    BBa_K2541010
    BBa_K2541011
    BBa_K2541012
    BBa_K2541013
    BBa_K2541014
    BBa_K2541015
    BBa_K2541016
    BBa_K2541017
    BBa_K2541018
    BBa_K2541019
    BBa_K2541020
    BBa_K2541021
    BBa_K2541025
    BBa_K2541026
    BBa_K2541027
    BBa_K2541028
    BBa_K2541029
    BBa_K2541030
    BBa_K2541031
    BBa_K2541032
    BBa_K2541033
    BBa_K2541034
    BBa_K2541035
    BBa_K2541036
    BBa_K2541037
    BBa_K2541038
    BBa_K2541039
    BBa_K2541040
    BBa_K2541041
    BBa_K2541042
    BBa_K2541043
    BBa_K2541044
    BBa_K2541045
    BBa_K2541046
    BBa_K2541047
    BBa_K2541048
    BBa_K2541049
    BBa_K2541050
    BBa_K2541051

    Tips: If the explorer don't show any thermosensors, it means that there is no appropriate thermosensors, you can also change the features to a similar value.