Difference between revisions of "Team:Oxford/Software"

(Prototype team page)
 
Line 1: Line 1:
 
{{Oxford}}
 
{{Oxford}}
 
<html>
 
<html>
−
 
+
<style>
−
 
+
hr {
−
<div class="column full_size judges-will-not-evaluate">
+
    display: block;
−
<h3>★  ALERT! </h3>
+
    height: 1px;
−
<p>This page is used by the judges to evaluate your team for the <a href="https://2017.igem.org/Judging/Medals">medal criterion</a> or <a href="https://2017.igem.org/Judging/Awards"> award listed above</a>. </p>
+
    border: 0;
−
<p> Delete this box in order to be evaluated for this medal criterion and/or award. See more information at <a href="https://2017.igem.org/Judging/Pages_for_Awards"> Instructions for Pages for awards</a>.</p>
+
    border-top: 1px solid black;
−
</div>
+
    margin: 1em 0;
−
<div class="clear"></div>
+
    padding: 0;
−
 
+
}
−
 
+
</style>
−
<div class="column half_size">
+
<head>
−
<h1>Software</h1>
+
      <meta charset = "utf-8">
−
<h3>Best Software Tool Special Prize</h3>
+
      <title>jQuery UI Autocomplete functionality</title>
−
<p>Regardless of the topic, iGEM projects often create or adapt computational tools to move the project forward. Because they are born out of a direct practical need, these software tools (or new computational methods) can be surprisingly useful for other teams. Without necessarily being big or complex, they can make the crucial difference to a project's success. This award tries to find and honor such "nuggets" of computational work.
+
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel = "stylesheet">        
−
 
+
      <script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
−
 
+
      <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
−
<br><br>
+
      <script>
−
To compete for the <a href="https://2017.igem.org/Judging/Awards">Best Software Tool prize</a>, please describe your work on this page and also fill out the description on the <a href="https://2017.igem.org/Judging/Judging_Form">judging form</a>.
+
  $( function() {
−
<br><br>
+
    var suggestions = [
−
You must also delete the message box on the top of this page to be eligible for this prize.
+
   
−
</p>
+
{
−
 
+
      label:"Congenital Chagas disease",
−
 
+
      value:"item1",
−
</div>
+
    },
−
 
+
    {
−
<div class="column half_size">
+
            label:"Trypanosoma Cruzi",
−
<h5> Inspiration </h5>
+
            value:"item1",
−
<p>
+
          },
−
Here are a few examples from previous teams:
+
{           
−
</p>
+
            label:"Cruzipain",
−
<ul>
+
            value:"item1",
−
<li><a href="https://2016.igem.org/Team:BostonU_HW">2016 BostonU HW</a></li>
+
          },
−
<li><a href="https://2016.igem.org/Team:Valencia_UPV">2016 Valencia UPV</a></li>
+
          {
−
<li><a href="https://2014.igem.org/Team:Heidelberg/Software">2014 Heidelberg</a></li>
+
            label:"Sepsis",
−
<li><a href="https://2014.igem.org/Team:Aachen/Project/Measurement_Device#Software">2014 Aachen</a></li>
+
            value:"item2",
−
</ul>
+
          },
−
 
+
          {
 +
            label:"Pseudomonas aeruginosa",
 +
            value:"item2",
 +
          },
 +
          {
 +
            label:"LasA",
 +
            value:"item2",
 +
          },
 +
          {
 +
            label:"African Sleeping sickness",
 +
            value:"item3",
 +
          },
 +
          {
 +
            label:"Trypanosoma brucei",
 +
            value:"item3",
 +
          },
 +
          {
 +
            label:"Rhodesain",
 +
            value:"item3",
 +
          },
 +
          {
 +
            label:"Brucepain",
 +
            value:"item3",
 +
          },
 +
          {
 +
            label:"Schistosomiasis",
 +
            value:"item4",
 +
          },
 +
          {
 +
            label:"Schistosoma mansoni",
 +
            value:"item4",
 +
          },
 +
          {
 +
            label:"Cercarial elastase",
 +
            value:"item4",
 +
          },
 +
          {
 +
            label:"Congenital toxoplasmosis",
 +
            value:"item5",
 +
          },
 +
          {
 +
            label:"Toxoplasma gondii",
 +
            value:"item5",
 +
          },
 +
          {
 +
            label:"Cathepsin L",
 +
            value:"item5",
 +
          }
 +
    ];
 +
      $("#myInput" ).autocomplete({
 +
source: function( request, response ) { // function to start the terms with the letter typed. If need wildcard anywhere, use the suggestions directly.
 +
var matcher = new RegExp( "^" + $.ui.autocomplete.escapeRegex( request.term ), "i" );
 +
response( $.grep(suggestions, function( item ){
 +
              return matcher.test( item.label );
 +
            }) );
 +
          },
 +
minLength: 1,  // requires that the user enters at least one character
 +
select: function( event, ui ) { // Once the term is selected from the list
 +
$("tr[class^='item']").hide(); // hide all rows with class name starts with "item"
 +
          $("#myInput").val( ui.item.label ); // populate the selected term in the input box
 +
                   
 +
          $("#id_tbl tr.item0").show();           // show the header row and the selected item value.
 +
          $("#id_tbl tr."+ui.item.value).show();
 +
          return false;
 +
          }
 +
    });
 +
  } );
 +
  </script>
 +
</head> 
 +
<body>
 +
<div class="container">
 +
<div style="margin-top: 100px"></div>
 +
    <h1 class="text-center">Software Tool</h1>
 +
    <input type="text" id="myInput" placeholder="Search">   
 +
    <table id="id_tbl" class="table table-hover">
 +
<thead>
 +
        <tr class="item0" style="display:none">
 +
            <th width="8%" align="left">Disease</th>
 +
            <th width="8%" align="left">Parasite</th>
 +
            <th width="8%" align="left">Specific Protease</th>
 +
            <th width="16%" align="left">DNA Sequence of Cleavage Site</th>
 +
            <th width="20%" align="left">Protease Cleavage Sequence</th>
 +
            <th width="8%" align="left">Medium of Test</th>
 +
            <th width="8%" align="left">Final Output</th>
 +
            <th width="8%" align="left">Positive Result</th>
 +
        </tr>
 +
      </thead>
 +
      <tbody>
 +
<tr class="item1" style="display:none">
 +
            <td><span>Congenital Chagas Disease</span></td>                                     
 +
            <td><span><i>Trypanosoma Cruzi</i></span></td>            
 +
            <td><span>Cruzipain</span></td>
 +
            <td><span>AAAAAAGTTAAAGCTAAAAAA</span></td>
 +
            <td><span>K/K/L/KR-A/KS/K/RQ</span></td>
 +
            <td><span>Blood</span></td>
 +
            <td><span>Hirudin</span></td>
 +
            <td><span>No blood clotting</span></td>
 +
</tr>
 +
<tr class="item2" style="display:none">
 +
            <td><span>Sepsis</span></td>
 +
            <td><span><i>Pseudomonas aeruginosa</i></span></td>
 +
            <td><span>LasA</span></td>
 +
            <td><span></span></td>
 +
            <td><span>After Gly-Gly (e.g. PGVGG - elastin) or between Lys-Ile (e.g. NKKIEKFQ(S-P) - beta=casein)</span></td>
 +
            <td><span>Blood</span></td>
 +
            <td><span>Hirudin</span></td>
 +
            <td><span>No blood clotting</span></td>
 +
</tr>                                      
 +
<tr class="item3" style="display:none">
 +
            <td><span>African Sleeping sickness</span></td>
 +
            <td><span><i>Trypanosoma brucei</i></span></td>
 +
            <td><span>Rhodesain/Brucepain</span></td>
 +
            <td><span>TCCGCGCCGAAATCCCTGATTGGC/ TCCGCGCCGCGTTCCCTGATTGGC</span></td>
 +
            <td><span>S/A/P/R-K/S/L/I/G</span></td>
 +
            <td><span>Blood</span></td>
 +
            <td><span>Hirudin</span></td>
 +
            <td><span>No blood clotting</span></td>
 +
</tr>
 +
<tr class="item4" style="display:none">
 +
            <td><span>Schistosomiasis</span></td>
 +
            <td><span><i>Schistosoma mansoni</i></span></td>
 +
            <td><span>Cercarial elastase</span></td>
 +
            <td><span>AGCTGGCCGCTG</span></td>
 +
            <td><span>SWPL</span></td>
 +
            <td><span>Blood</span></td>
 +
            <td><span>Hirudin</span></td>
 +
            <td><span>No blood clotting</span></td>
 +
</tr>
 +
<tr class="item5" style="display:none">
 +
            <td><span>Congenital toxoplasmosis</span></td>
 +
            <td><span><i>Toxoplasma gondii</i></span></td>
 +
            <td><span>Cathepsin L</span></td>
 +
            <td><span></span></td>
 +
            <td><span>KQKLR</span></td>
 +
            <td><span>Amniotic fluid</span></td>
 +
            <td><span></span></td>
 +
            <td><span></span></td>
 +
</tr>
 +
</tbody>
 +
    </table>
 
</div>
 
</div>
  
 +
</body>
 
</html>
 
</html>

Revision as of 05:59, 31 October 2017

jQuery UI Autocomplete functionality

Software Tool