|
|
| (33 intermediate revisions by 3 users not shown) |
| Line 1: |
Line 1: |
| − | {{Fudan-TSI}} | + | {{Fudan-TSI}}<!-- jquery loaded by HQ 1.12.4 --> |
| − | <html> | + | <html></p></div></div></div><meta name="viewport" content="width=device-width, initial-scale=1"><meta charset="UTF-8"> |
| − | | + | <link rel="stylesheet" href="https://2019.igem.org/wiki/index.php?title=Template:Fudan-TSI/materialize.css&action=raw&ctype=text/css"> |
| − | | + | <link rel="stylesheet" href="https://2019.igem.org/wiki/index.php?title=Template:Fudan-TSI/Fudan-font-awesome.css&action=raw&ctype=text/css" /> |
| − | <script> | + | <link rel="stylesheet" type="text/css" href="https://2019.igem.org/wiki/index.php?title=Template:Fudan-TSI/Fudan-css.css&action=raw&ctype=text/css" /> |
| − | //////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// | + | |
| − | | + | |
| − | $(document).ready(function() {
| + | |
| − | | + | |
| − | //remove the HQ_page id
| + | |
| − | $("#HQ_page").attr('id','');
| + | |
| − |
| + | |
| − | | + | |
| − | //highlight current page on the menu
| + | |
| − | highlight_current_page_menu();
| + | |
| − |
| + | |
| − | //accessing submenus
| + | |
| − | $(".menu_item").click(function(){
| + | |
| − | $(".submenu_control_icon", this).toggleClass("open");
| + | |
| − | $(this).next(".submenu").fadeToggle(400);
| + | |
| − | });
| + | |
| − |
| + | |
| − | //mobile menu access
| + | |
| − | $(".igem_2019_team_mobile_bar").click(function(){
| + | |
| − | $(this).next().toggleClass("displaying_menu");
| + | |
| − | });
| + | |
| − |
| + | |
| − | });
| + | |
| − | | + | |
| − | | + | |
| − | function highlight_current_page_menu() {
| + | |
| − |
| + | |
| − | var page_url="https://2019.igem.org/";
| + | |
| − | page_url = page_url + wgPageName;
| + | |
| − | $("a[href$='"+ page_url +"']").children().addClass("current_page");
| + | |
| − |
| + | |
| − | //if the page is in a submenu, open the submenu and make the appropiate changes
| + | |
| − | if( $( ".current_page" ).hasClass( "submenu_item" )){
| + | |
| − |
| + | |
| − | $(".current_page").parent().parent().fadeToggle(400);
| + | |
| − | $(".current_page").parent().parent().prev().addClass("current_page");
| + | |
| − | $(".menu_item.current_page > .submenu_control_icon").toggleClass("open");
| + | |
| − |
| + | |
| − | }
| + | |
| − | }
| + | |
| − | | + | |
| − | | + | |
| − | //////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// | + | |
| − | </script>
| + | |
| − | | + | |
| − | | + | |
| | <style> | | <style> |
| − | /**************************************************************************************************************************************************************************************************/ | + | /*****************************************************************************/ |
| − | | + | |
| − | | + | |
| − | | + | |
| − | /**************************************************************************************************************************************************************************************************/
| + | |
| | /* DEFAULT WIKI SETTINGS */ | | /* DEFAULT WIKI SETTINGS */ |
| − | /**************************************************************************************************************************************************************************************************/ | + | /*****************************************************************************/ |
| | + | #home_logo, #sideMenu { display:none; } |
| | + | #sideMenu, #top_title, .patrollink { display:none; } |
| | + | #content { margin-left: 0; padding:0px; width:100%; } |
| | + | .judges-will-not-evaluate { border: 4px solid #e4dede; padding: 2% !important; width: 92%!important; } |
| | + | /* css clean * */ |
| | + | .Off {display:none !important} |
| | + | #FudanTSIBody li { list-style: none; } |
| | + | </style> |
| | + | <title>Software | 2019 iGEM Team:Fudan-TSI</title> |
| | + | </head> |
| | + | <body> |
| | + | <div id="FudanTSIdivWrapper"><div id="FudanTSIBody"> |
| | + | <header> |
| | + | <div id="emptyBar" style="position:relative;width: 100%;"></div><nav id="topNav" class="black z-depth-0_5"><div class="nav-wrapper"><div id="teamLogo" class="brand-logo"> <a href="/Team:Fudan-TSI" target="_self"><img alt="2019 team logo" src="https://static.igem.org/mediawiki/2019/d/d3/T--Fudan-TSI--HomepageLogo.gif"></a></div><ul id="nav-mobile" class="right"> |
| | + | <li class="hide-on-med-and-down"><a class="dropdown-trigger" data-target="dropdown1">Project</a></li><li class="hide-on-med-and-down"><a class="dropdown-trigger" data-target="dropdown2">Results</a></li><li class="hide-on-med-and-down"><a class="dropdown-trigger" data-target="dropdown3">Model</a></li><li class="hide-on-med-and-down"><a class="dropdown-trigger" data-target="dropdown4">Parts</a></li><li class="hide-on-med-and-down"><a class="dropdown-trigger" data-target="dropdown5">Human practices</a></li><li class="hide-on-med-and-down"><a class="dropdown-trigger" data-target="dropdown6">Team</a></li> |
| | + | <li class="hide-on-med-and-down"><a href="/Team:Fudan-TSI/Judging">Judging</a></li> |
| | + | <li> <a id="navList" data-target="slide-out" class="waves-effect waves-light sidenav-trigger right"> <i class="fa fa-navicon" style="font-size: 24px"></i> </a></li></ul></div> </nav> |
| | + | <!-- Dropdown and List elements in navigation bar --> |
| | + | <ul id="dropdown1" class="dropdown-content"> |
| | + | <li><a href="/Team:Fudan-TSI/Description">Background</a></li> |
| | + | <li><a href="/Team:Fudan-TSI/Design">Design</a></li> |
| | + | <li><a href="/Team:Fudan-TSI/Experiments">Experiments</a></li> |
| | + | <li><a href="/Team:Fudan-TSI/Applied_Design">Applied design</a></li> |
| | + | </ul> |
| | + | <ul id="dropdown2" class="dropdown-content"> |
| | + | <li><a href="/Team:Fudan-TSI/Demonstrate#ReverseTranscription">Reverse transcription</a></li> |
| | + | <li><a href="/Team:Fudan-TSI/Demonstrate#Recombination">Recombination</a></li> |
| | + | <li><a href="/Team:Fudan-TSI/Demonstrate">Demonstration</a></li> |
| | + | <li><a href="/Team:Fudan-TSI/Measurement">Measurement</a></li> |
| | + | <li><a href="/Team:Fudan-TSI/Notebook">Notebook</a></li> |
| | + | </ul> |
| | + | <ul id="dropdown3" class="dropdown-content"> |
| | + | <li><a href="/Team:Fudan-TSI/Model">Modeling</a></li> |
| | + | <li><a href="/Team:Fudan-TSI/Software">Software</a></li> |
| | + | <li><a href="/Team:Fudan-TSI/Hardware">Hardware</a></li> |
| | + | </ul> |
| | + | <ul id="dropdown4" class="dropdown-content"> |
| | + | <li><a href="/Team:Fudan-TSI/Basic_Part">Basic parts</a></li> |
| | + | <li><a href="/Team:Fudan-TSI/Composite_Part">Composite parts</a></li> |
| | + | <li><a href="/Team:Fudan-TSI/Improve">Part improvement</a></li> |
| | + | <li><a href="/Team:Fudan-TSI/Part_Collection">Part collection</a></li> |
| | + | </ul> |
| | + | <ul id="dropdown5" class="dropdown-content"> |
| | + | <li><a href="/Team:Fudan-TSI/Public_Engagement">Public engagement</a></li> |
| | + | <li><a href="/Team:Fudan-TSI/Human_Practices#IntegratedHumanPractice">Integrated HP</a></li> |
| | + | <li><a href="/Team:Fudan-TSI/Collaborations">Collaborations</a></li> |
| | + | <li><a href="/Team:Fudan-TSI/Safety">Safety</a></li> |
| | + | </ul> |
| | + | <ul id="dropdown6" class="dropdown-content"> |
| | + | <li><a href="/Team:Fudan-TSI/Team">Members</a></li> |
| | + | <li><a href="/Team:Fudan-TSI/Attributions">Attributions</a></li> |
| | + | <li><a href="/Team:Fudan-TSI/Team#Acknowledge">Acknowledge</a></li> |
| | + | <li><a href="/Team:Fudan-TSI/Heritage">Heritage</a></li> |
| | + | </ul> |
| | | | |
| | | | |
| − | #home_logo, #sideMenu { display:none; }
| + | <ul id="slide-out" class="sidenav"> |
| − | #sideMenu, #top_title, .patrollink {display:none;}
| + | <li style="padding: 0"><div class="sidenavBanner"> |
| − | #content { margin-left:0px; margin-top:-7px; padding:0px; width:100%;}
| + | <div class="background"></div> |
| − | #bodyContent h1, #bodyContent h2, #bodyContent h3, #bodyContent h4, #bodyContent h5 { margin-bottom: 0px; }
| + | <p class="flow-text" style="width:100%;text-align:center"><span class="white-text">Software</span></p> |
| − | #bodyContent a[href ^="https://"], .link-https { padding-right:0px;}
| + | </div></li> |
| − |
| + | <li> |
| − |
| + | <ul class="collapsible expandable"> |
| | + | <li class="onThisPageNav"><span>On this page</span></li> |
| | + | <li class="onThisPageNav"><a href="#section1">Motivation</a></li> |
| | + | <li class="onThisPageNav"><a href="#section2">Theoretical basis</a></li> |
| | + | <li class="onThisPageNav"><a href="#section3">User guidelines</a></li> |
| | + | <li class="onThisPageNav"><a href="#section4">References</a></li> |
| | + | <li class="onThisPageNav"><a href="#section5">Demo</a></li> |
| | | | |
| | + | <li><span class="pageSidebar">Team: Fudan-TSI</span></li><li><div class="collapsible-header"><span class="pageSidebar">Project</span></div><div class="collapsible-body"><ul><li><a class="pageSidebar" href="/Team:Fudan-TSI/Description">Background</a></li><li><a class="pageSidebar" href="/Team:Fudan-TSI/Design">Design</a></li><li><a class="pageSidebar" href="/Team:Fudan-TSI/Experiments">Experiments</a></li><li><a class="pageSidebar" href="/Team:Fudan-TSI/Applied_Design">Applied design</a></li><li><a class="pageSidebar" href="/Team:Fudan-TSI/Judging">Judging</a></li></ul></div></li><li><div class="collapsible-header"><span class="pageSidebar">Results</span></div><div class="collapsible-body"><ul><li><a class="pageSidebar" href="/Team:Fudan-TSI/Demonstrate#ReverseTranscription">Reverse transcription</a></li><li><a class="pageSidebar" href="/Team:Fudan-TSI/Demonstrate#Recombination">Recombination</a></li><li><a class="pageSidebar" href="/Team:Fudan-TSI/Demonstrate">Demonstration</a></li><li><a class="pageSidebar" href="/Team:Fudan-TSI/Measurement">Measurement</a></li><li><a class="pageSidebar" href="/Team:Fudan-TSI/Notebook">Notebook</a></li></ul></div></li><li><div class="collapsible-header active"><span class="pageSidebar">Model</span></div><div class="collapsible-body"><ul><li><a class="pageSidebar" href="/Team:Fudan-TSI/Model">Modeling</a></li><li><a class="pageSidebar" href="/Team:Fudan-TSI/Software">Software</a></li><li><a class="pageSidebar" href="/Team:Fudan-TSI/Hardware">Hardware</a></li></ul></div></li><li><div class="collapsible-header"><span class="pageSidebar">Parts</span></div><div class="collapsible-body"><ul><li><a class="pageSidebar" href="/Team:Fudan-TSI/Basic_Part">Basic parts</a></li><li><a class="pageSidebar" href="/Team:Fudan-TSI/Composite_Part">Composite parts</a></li><li><a class="pageSidebar" href="/Team:Fudan-TSI/Improve">Part improvement</a></li><li><a class="pageSidebar" href="/Team:Fudan-TSI/Part_Collection">Part collection</a></li></ul></div></li><li><div class="collapsible-header"><span class="pageSidebar">Human practices</span></div><div class="collapsible-body"><ul><li><a class="pageSidebar" href="/Team:Fudan-TSI/Public_Engagement">Public engagement</a></li><li><a class="pageSidebar" href="/Team:Fudan-TSI/Human_Practices#IntegratedHumanPractice">Integrated HP</a></li><li><a class="pageSidebar" href="/Team:Fudan-TSI/Collaborations">Collaborations</a></li><li><a class="pageSidebar" href="/Team:Fudan-TSI/Safety">Safety</a></li></ul></div></li><li><div class="collapsible-header"><span class="pageSidebar">Team</span></div><div class="collapsible-body"><ul><li><a class="pageSidebar" href="/Team:Fudan-TSI/Team">Members</a></li><li><a class="pageSidebar" href="/Team:Fudan-TSI/Attributions">Attributions</a></li><li><a class="pageSidebar" href="/Team:Fudan-TSI/Heritage">Heritage</a></li></ul></div></li> |
| | + | </ul><!-- .expandable --> |
| | + | </li> |
| | + | <li><div class="placeHolder"></div></li> |
| | + | </ul> |
| | + | </header> |
| | | | |
| − | /**************************************************************************************************************************************************************************************************/ | + | <div id="pageContent"> |
| − | /* MENU */ | + | <div id="contentBanner" class="figureBanner"> |
| − | /**************************************************************************************************************************************************************************************************/ | + | <div class="row"> |
| | + | <div class="col s12 hide-on-med-and-up"> |
| | + | <h1><br/>Software</h1> |
| | + | <p class="flow-text">Our software simplifies the primer design process for target-specific mutagenesis via reverse transcriptase (RT). We called it tRNA primer designer. Users could design their tRNA primers even for eukaryotic experiments. In addition, we calculate and output the tRNA acceptor stem annealing temperature, as this might be used as an indicator for likelihood to success.</p> |
| | + | </div> |
| | + | </div> |
| | + | <div class="hide-on-small-only"> |
| | + | <style> |
| | + | #demo {width:100%;height:100%;position:relative;z-index:-100;} |
| | + | #demo svg {width:100%;height:100%;position:fixed;} |
| | + | #demo svg g {mix-blend-mode:lighten;} |
| | + | #demo svg polygon {stroke:none;fill:white;} |
| | + | </style> |
| | + | <div id="pageCover"> |
| | + | <svg id="demo" viewBox="0 0 1600 600" preserveAspectRatio="xMidYMid slice"> |
| | + | <defs> |
| | + | <linearGradient id="grad1" x1="0" y1="0" x2="1" y2="0" color-interpolation="sRGB"> |
| | + | <stop id="stop1a" offset="0%" stop-color="#12a3b4"></stop> |
| | + | <stop id="stop1b" offset="100%" stop-color="#ff509e"></stop> |
| | + | </linearGradient> |
| | + | <linearGradient id="grad2" x1="0" y1="0" x2="1" y2="0" color-interpolation="sRGB"> |
| | + | <stop id="stop2a" offset="0%" stop-color="#e3bc13"></stop> |
| | + | <stop id="stop2b" offset="100%" stop-color="#00a78f"></stop> |
| | + | </linearGradient> |
| | + | </defs> |
| | + | <rect id="rect1" x="0" y="0" width="1600" height="600" stroke="none" fill="url(#grad1)"></rect> |
| | + | <rect id="rect2" x="0" y="0" width="1600" height="600" stroke="none" fill="url(#grad2)"></rect> |
| | + | </svg> |
| | + | </div><!-- #pageCover --> |
| | + | <script src="https://2019.igem.org/wiki/index.php?title=Template:Fudan-TSI/bkg&action=raw&ctype=text/javascript"></script> |
| | + | <script> |
| | + | ////////////////////////////// |
| | + | // Demo Functions |
| | + | ////////////////////////////// |
| | + | function bkgFunction(showStats) { |
| | + | // stats |
| | + | if (showStats) { |
| | + | var stats = new Stats(); |
| | + | stats.domElement.style.position = 'absolute'; |
| | + | stats.domElement.style.left = '0'; |
| | + | stats.domElement.style.top = '0'; |
| | + | document.body.appendChild(stats.domElement); |
| | + | requestAnimationFrame(function updateStats(){ |
| | + | stats.update(); |
| | + | requestAnimationFrame(updateStats); |
| | + | }); |
| | + | } |
| | + | // init |
| | + | var svg = document.getElementById('demo'); |
| | + | tesselation.setup(svg); |
| | + | gradients.setup(); |
| | + | var lastTransitionAt, transitionDelay = 10000, transitionDuration = 3000; |
| | + | function playNextTransition() { |
| | + | tesselation.next(transitionDuration); |
| | + | gradients.next(transitionDuration); |
| | + | }; |
| | + | function tick(time) { |
| | + | if (!lastTransitionAt || time - lastTransitionAt > transitionDelay) { |
| | + | lastTransitionAt = time; |
| | + | playNextTransition(); |
| | + | } |
| | + | window.requestAnimationFrame(tick); |
| | + | } |
| | + | window.requestAnimationFrame(tick); |
| | + | } |
| | + | ////////////////////////////// |
| | + | // Delaunay Triangulation |
| | + | ////////////////////////////// |
| | + | var calcDelaunayTriangulation = (function() { |
| | + | var EPSILON = 1.0 / 1048576.0; |
| | + | function getSuperT(vertices) { |
| | + | var xMin = Number.POSITIVE_INFINITY, yMin = Number.POSITIVE_INFINITY, |
| | + | xMax = Number.NEGATIVE_INFINITY, yMax = Number.NEGATIVE_INFINITY, |
| | + | i, xDiff, yDiff, maxDiff, xCenter, yCenter; |
| | + | for(i = vertices.length; i--; ) { |
| | + | if(vertices[i][0] < xMin) xMin = vertices[i][0]; |
| | + | if(vertices[i][0] > xMax) xMax = vertices[i][0]; |
| | + | if(vertices[i][1] < yMin) yMin = vertices[i][1]; |
| | + | if(vertices[i][1] > yMax) yMax = vertices[i][1]; |
| | + | } |
| | + | xDiff = xMax - xMin; |
| | + | yDiff = yMax - yMin; |
| | + | maxDiff = Math.max(xDiff, yDiff); |
| | + | xCenter = xMin + xDiff * 0.5; |
| | + | yCenter = yMin + yDiff * 0.5; |
| | + | return [ |
| | + | [xCenter - 20 * maxDiff, yCenter - maxDiff], |
| | + | [xCenter, yCenter + 20 * maxDiff], |
| | + | [xCenter + 20 * maxDiff, yCenter - maxDiff] |
| | + | ]; |
| | + | } |
| | + | function circumcircle(vertices, i, j, k) { |
| | + | var xI = vertices[i][0], yI = vertices[i][1], |
| | + | xJ = vertices[j][0], yJ = vertices[j][1], |
| | + | xK = vertices[k][0], yK = vertices[k][1], |
| | + | yDiffIJ = Math.abs(yI - yJ), yDiffJK = Math.abs(yJ - yK), |
| | + | xCenter, yCenter, m1, m2, xMidIJ, xMidJK, yMidIJ, yMidJK, xDiff, yDiff; |
| | + | // bail condition |
| | + | if(yDiffIJ < EPSILON){ |
| | + | if (yDiffJK < EPSILON){ |
| | + | throw new Error("Can't get circumcircle since all 3 points are y-aligned"); |
| | + | } |
| | + | } |
| | | | |
| − | /*wrapping for the menu*/
| |
| − | .igem_2019_team_menu {
| |
| − | background-color:#cecece;
| |
| − | border-left: 1px solid #635d5d;
| |
| − | float:right;
| |
| − | height:100vh;
| |
| − | max-width: 270px;
| |
| − | overflow-y: auto;
| |
| − | overflow-x: hidden;
| |
| − | padding:0px;
| |
| − | position:fixed;
| |
| − | right:0%;
| |
| − | text-align:left;
| |
| − | width: 15%;
| |
| − | }
| |
| | | | |
| − | /*controlling menu visibility*/
| + | // calc circumcircle center x/y, radius |
| − | .igem_2019_team_menu.displaying_menu{
| + | m1 = -((xJ - xI) / (yJ - yI)); |
| − | display:block;
| + | m2 = -((xK - xJ) / (yK - yJ)); |
| − | }
| + | xMidIJ = (xI + xJ) / 2.0; |
| | + | xMidJK = (xJ + xK) / 2.0; |
| | + | yMidIJ = (yI + yJ) / 2.0; |
| | + | yMidJK = (yJ + yK) / 2.0; |
| | + | xCenter = (yDiffIJ < EPSILON) ? xMidIJ : |
| | + | (yDiffJK < EPSILON) ? xMidJK : |
| | + | (m1 * xMidIJ - m2 * xMidJK + yMidJK - yMidIJ) / (m1 - m2); |
| | + | yCenter = (yDiffIJ > yDiffJK) ? |
| | + | m1 * (xCenter - xMidIJ) + yMidIJ : |
| | + | m2 * (xCenter - xMidJK) + yMidJK; |
| | + | xDiff = xJ - xCenter; |
| | + | yDiff = yJ - yCenter; |
| | + | // return |
| | + | return {i: i, j: j, k: k, x: xCenter, y: yCenter, r: xDiff * xDiff + yDiff * yDiff}; |
| | + | } |
| | + | function dedupeEdges(edges) { |
| | + | var i, j, a, b, m, n; |
| | + | for(j = edges.length; j; ) { |
| | + | b = edges[--j]; a = edges[--j]; |
| | + | for(i = j; i; ) { |
| | + | n = edges[--i]; m = edges[--i]; |
| | + | if(a === m){ |
| | + | if (b===n){ |
| | + | edges.splice(j, 2); edges.splice(i, 2); |
| | + | break; |
| | + | } |
| | + | } |
| | + | if(a === n){ |
| | + | if (b===m){ |
| | + | edges.splice(j, 2); edges.splice(i, 2); |
| | + | break; |
| | + | } |
| | + | } |
| | + | } |
| | + | } |
| | + | } |
| | + | return function(vertices) { |
| | + | var n = vertices.length, |
| | + | i, j, indices, st, candidates, locked, edges, dx, dy, a, b, c; |
| | + | // bail if too few / too many verts |
| | + | if(n < 3 || n > 2000) |
| | + | return []; |
| | + | // copy verts and sort indices by x-position |
| | + | vertices = vertices.slice(0); |
| | + | indices = new Array(n); |
| | + | for(i = n; i--; ) |
| | + | indices[i] = i; |
| | + | indices.sort(function(i, j) { |
| | + | return vertices[j][0] - vertices[i][0]; |
| | + | }); |
| | + | // supertriangle |
| | + | st = getSuperT(vertices); |
| | + | vertices.push(st[0], st[1], st[2]); |
| | + | // init candidates/locked tris list |
| | + | candidates = [circumcircle(vertices, n + 0, n + 1, n + 2)]; |
| | + | locked = []; |
| | + | edges = []; |
| | + | // scan left to right |
| | + | for(i = indices.length; i--; edges.length = 0) { |
| | + | c = indices[i]; |
| | + | // check candidates tris against point |
| | + | for(j = candidates.length; j--; ) { |
| | + | // lock tri if point to right of circumcirc |
| | + | dx = vertices[c][0] - candidates[j].x; |
| | + | if (dx > 0.0){ |
| | + | if(dx * dx > candidates[j].r){ |
| | + | locked.push(candidates[j]); |
| | + | candidates.splice(j, 1); |
| | + | continue; |
| | + | } |
| | + | } |
| | | | |
| − | /*links in the menu*/
| |
| − | .igem_2019_team_menu a {
| |
| − | color: #484848;
| |
| − | text-decoration:none;
| |
| − | }
| |
| | | | |
| − | /*images in the menu*/
| + | // point outside circumcirc = leave candidates |
| − | .igem_2019_team_menu img {
| + | dy = vertices[c][1] - candidates[j].y; |
| − | width:100%;
| + | if(dx * dx + dy * dy - candidates[j].r > EPSILON) |
| − | }
| + | continue; |
| | + | // point inside circumcirc = break apart, save edges |
| | + | edges.push( |
| | + | candidates[j].i, candidates[j].j, |
| | + | candidates[j].j, candidates[j].k, |
| | + | candidates[j].k, candidates[j].i |
| | + | ); |
| | + | candidates.splice(j, 1); |
| | + | } |
| | + | // new candidates from broken edges |
| | + | dedupeEdges(edges); |
| | + | for(j = edges.length; j; ) { |
| | + | b = edges[--j]; |
| | + | a = edges[--j]; |
| | + | candidates.push(circumcircle(vertices, a, b, c)); |
| | + | } |
| | + | } |
| | + | // close candidates tris, remove tris touching supertri verts |
| | + | for(i = candidates.length; i--; ) |
| | + | locked.push(candidates[i]); |
| | + | candidates.length = 0; |
| | + | for(i = locked.length; i--; ) |
| | + | if(locked[i].i < n){ |
| | + | if(locked[i].j < n){ |
| | + | if(locked[i].k < n){ |
| | + | candidates.push(locked[i].i, locked[i].j, locked[i].k); |
| | + | } |
| | + | } |
| | + | } |
| | | | |
| − | /*level 1 menu items*/
| |
| − | .igem_2019_team_menu .menu_item {
| |
| − | background-color: #cecece;
| |
| − | border-bottom: 1px solid #635d5d;
| |
| − | clear: both;
| |
| − | color: #484848;
| |
| − | cursor: pointer;
| |
| − | float: left;
| |
| − | font-size: 120%;
| |
| − | font-weight: bold;
| |
| − | padding: 15px 0px 15px 5%;
| |
| − | width: 100%;
| |
| − | }
| |
| | | | |
| − | /*level 1 menu items without submenus*/
| + | // done |
| − | .igem_2019_team_menu .menu_item.direct_link {
| + | return candidates; |
| − | color: #484848;
| + | }; |
| − | padding-left: 15%;
| + | })(); |
| − | }
| + | var tesselation = (function() { |
| | + | var svg, svgW, svgH, prevGroup; |
| | + | function createRandomTesselation() { |
| | + | var wW = window.innerWidth; |
| | + | var wH = window.innerHeight; |
| | + | var gridSpacing = 250, scatterAmount = 0.75; |
| | + | var gridSize, i, x, y; |
| | + | if (wW / wH > svgW / svgH) { // window wider than svg = use width for gridSize |
| | + | gridSize = gridSpacing * svgW / wW; |
| | + | } else { // window taller than svg = use height for gridSize |
| | + | gridSize = gridSpacing * svgH / wH; |
| | + | } |
| | + | var vertices = []; |
| | + | var xOffset = (svgW % gridSize) / 2, yOffset = (svgH % gridSize) / 2; |
| | + | for (x = Math.floor(svgW/gridSize) + 1; x >= -1; x--) { |
| | + | for (y = Math.floor(svgH/gridSize) + 1; y >= -1; y--) { |
| | + | vertices.push( |
| | + | [ |
| | + | xOffset + gridSize * (x + scatterAmount * (Math.random() - 0.5)), |
| | + | yOffset + gridSize * (y + scatterAmount * (Math.random() - 0.5)) |
| | + | ] |
| | + | ); |
| | + | } |
| | + | } |
| | + | var triangles = calcDelaunayTriangulation(vertices); |
| | + | var group = document.createElementNS('http://www.w3.org/2000/svg','g'); |
| | + | var polygon; |
| | + | for(i = triangles.length; i; ) { |
| | + | polygon = document.createElementNS('http://www.w3.org/2000/svg','polygon'); |
| | + | polygon.setAttribute('points', |
| | + | vertices[triangles[--i]][0] + ',' + vertices[triangles[i]][1] + ' ' + |
| | + | vertices[triangles[--i]][0] + ',' + vertices[triangles[i]][1] + ' ' + |
| | + | vertices[triangles[--i]][0] + ',' + vertices[triangles[i]][1] |
| | + | ); |
| | + | group.appendChild(polygon); |
| | + | } |
| | + | return group; |
| | + | } |
| | + | return { |
| | + | setup: function(svgElement) { |
| | + | svg = svgElement; |
| | + | var vb = svg.getAttribute('viewBox').split(/\D/g); |
| | + | svgW = vb[2]; |
| | + | svgH = vb[3]; |
| | + | }, |
| | + | next: function(t) { |
| | + | var toRemove, i, n; |
| | + | t /= 1000; |
| | + | if(prevGroup){ |
| | + | if(prevGroup.children){ |
| | + | if(prevGroup.children.length){ |
| | + | toRemove = prevGroup; |
| | + | n = toRemove.children.length; |
| | + | for (i = n; i--; ) { |
| | + | TweenMax.to(toRemove.children[i], t*0.4, {opacity: 0, delay: t*(0.3*i/n)}); |
| | + | } |
| | + | TweenMax.delayedCall(t * (0.7 + 0.05), function(group) { svg.removeChild(group); }, [toRemove], this); |
| | + | } |
| | + | } |
| | + | } |
| | | | |
| − |
| + | var g = createRandomTesselation(); |
| − | /*level 1 menu items on hover*/
| + | n = g.children.length; |
| − | .igem_2019_team_menu .menu_item:hover {
| + | for (i = n; i--; ) { |
| − | background-color: #ecb656 !important;
| + | TweenMax.fromTo(g.children[i], t*0.4, {opacity: 0}, {opacity: 0.3 + 0.25 * Math.random(), delay: t*(0.3*i/n + 0.3), ease: Back.easeOut}); |
| − | }
| + | } |
| | + | svg.appendChild(g); |
| | + | prevGroup = g; |
| | + | } |
| | + | } |
| | + | })(); |
| | + | ////////////////////////////// |
| | + | // Gradients |
| | + | ////////////////////////////// |
| | + | var gradients = (function() { |
| | + | var grad1, grad2, showingGrad1; |
| | + | // using colors from IBM Design Colors this time |
| | + | var colors = [ // 14 colors - use 3-5 span |
| | + | '#3c6df0', // ultramarine50 |
| | + | '#12a3b4', // aqua40 |
| | + | '#00a78f', // teal40 |
| | + | '#00aa5e', // green40 |
| | + | '#81b532', // lime30 |
| | + | '#e3bc13', // yellow20 |
| | + | '#ffb000', // gold20 |
| | + | '#fe8500', // orange30 |
| | + | '#fe6100', // peach40 |
| | + | '#e62325', // red50 |
| | + | '#dc267f', // magenta50 |
| | + | '#c22dd5', // purple50 |
| | + | '#9753e1', // violet50 |
| | + | '#5a3ec8' // indigo60 |
| | + | ]; |
| | + | function assignRandomColors(gradObj) { |
| | + | var rA = Math.floor(colors.length * Math.random()); |
| | + | var rB = Math.floor(Math.random() * 3) + 3; // [3 - 5] |
| | + | rB = (rA + (rB * (Math.random() < 0.5 ? -1 : 1)) + colors.length) % colors.length; |
| | + | gradObj.stopA.setAttribute('stop-color', colors[rA]); |
| | + | gradObj.stopB.setAttribute('stop-color', colors[rB]); |
| | + | } |
| | + | return { |
| | + | setup: function() { |
| | + | showingGrad1 = false; |
| | + | grad1 = { |
| | + | stopA: document.getElementById('stop1a'), |
| | + | stopB: document.getElementById('stop1b'), |
| | + | rect: document.getElementById('rect1') |
| | + | }; |
| | + | grad2 = { |
| | + | stopA: document.getElementById('stop2a'), |
| | + | stopB: document.getElementById('stop2b'), |
| | + | rect: document.getElementById('rect2') |
| | + | }; |
| | + | grad1.rect.style.opacity = 0; |
| | + | grad2.rect.style.opacity = 0; |
| | + | }, |
| | + | next: function(t) { |
| | + | t /= 1000; |
| | + | var show, hide; |
| | + | if (showingGrad1) { |
| | + | hide = grad1; |
| | + | show = grad2; |
| | + | } else { |
| | + | hide = grad2; |
| | + | show = grad1; |
| | + | } |
| | + | showingGrad1 = !showingGrad1; |
| | + | TweenMax.to(hide.rect, 0.55*t, {opacity: 0, delay: 0.2*t, ease: Sine.easeOut}); |
| | + | assignRandomColors(show); |
| | + | TweenMax.to(show.rect, 0.65*t, {opacity: 1, ease: Sine.easeIn}); |
| | + | } |
| | + | }; |
| | + | })(); |
| | + | ////////////////////////////// |
| | + | // Start |
| | + | ////////////////////////////// |
| | + | bkgFunction(); |
| | + | </script> |
| | + | <div style="position:absolute;top:100px;left:9%"><center><img style="height:120px;width:auto" alt="cover gif 1st added" src="https://static.igem.org/mediawiki/2019/6/6f/T--Fudan-TSI--coverSoftware.gif" /></center></div> |
| | + | </div> |
| | + | </div> |
| | | | |
| − | /*icon for expanding and collapsing level 1 menut items*/
| + | <!--//////////////////////////////////////////////////// |
| − | .igem_2019_team_menu .menu_item .submenu_control_icon {
| + | do not edit above, if must BE CAREFUL |
| − | color: #484848;
| + | //////////////////////////////////////////////////////--> |
| − | float: left;
| + | <div class="container"> |
| − | width: 10%;
| + | <!-- side navigator of page content --> |
| − | }
| + | <ul id="pageContentNav" class="hide-on-med-and-down z-depth-0"> |
| | + | <li class="onThisPageNav"><a href="#section1">Motivation</a></li> |
| | + | <li class="onThisPageNav"><a href="#section2">Theoretical basis</a></li> |
| | + | <li class="onThisPageNav"><a href="#section3">User guidelines</a></li> |
| | + | <li class="onThisPageNav"><a href="#section4">References</a></li> |
| | + | <li class="onThisPageNav"><a href="#section5">Demo</a></li> |
| | + | </ul> |
| | + | <!-- main content of the page --> |
| | + | <main><article> |
| | | | |
| − | /* submenu icon "-"*/
| + | <div id="section1" class="section container scrolSpy"> |
| − | .igem_2019_team_menu .menu_item .submenu_control_icon::before {
| + | <p class="flow-text">Our software simplifies the primer design process for target-specific mutagenesis via reverse transcriptase (RT). We called it tRNA primer designer. Studies have shown that tRNA functions as the primer for <i>in vivo</i> reverse transcription initiation: the 5' end of the tRNA interacts with RT, and the 3' end matches with the mRNA encoding the target. The software consists of 4 parts: reverse transcriptase selection, target sequence input, designed-tRNA visualization, and primer output. Although we only test MMLV-RT experimentally, the software can adjust its designing method based on the properties of well-studied RT from 3 species, MMLV, HIV-1 and RSV. Users could design their tRNA primers even for eukaryotic experiments. In addition, we calculate and output the tRNA acceptor stem annealing temperature, as this might be used as an indicator for likelihood to success.</p> |
| − | content: "+";
| + | |
| − | }
| + | |
| | | | |
| − | /* submenu icon "-"*/
| + | <h2>Motivation</h2> |
| − | .igem_2019_team_menu .menu_item .submenu_control_icon.open::before {
| + | <p class="flow-text">Previous studies have shown that a tRNA primer is required for the initiation of reverse transcription <a href="#Ref1">(Dahlberg et al.)</a>. In our system, we express the tRNA primer in <i>E. coli</i> by cloning it onto the plasmid that is used for generating the tools for mutation, i.e. P_mutant. However, designing the primer sequence according to different target sequences is time-consuming and needs many adjustments to find the perfect match. This motivates us to build a software for tRNA primer designing.</p> |
| − | content: "-";
| + | </div> |
| − | }
| + | |
| | | | |
| − |
| + | <div id="section2" class="section container scrolSpy"> |
| − | /*level 2 menu (submenu) wrapper*/
| + | <h2>Theoretical basis</h2> |
| − | .igem_2019_team_menu .submenu{
| + | <p class="flow-text">Previous studies have reported that the interactions between tRNA primer and mRNA template as well as the reverse transcriptase are crucial in directing subsequent cDNA synthesis <a href="#Ref1">(James E. Dahlberg et al.)</a>. Specifically, according to the model for reverse transcription proposed by <a href="#Ref2">Kulpa et al.</a>, reverse transcription includes 5 steps <a href="#Fig1">(Figure 1)</a>, in which the annealing of tRNA primer to the primer binding site (PBS) region on mRNA template is crucial for the synthesis of minus strand strong stop DNA (–ssDNA) and the following cDNA synthesis process.</p> |
| − | background-color: #ececec;
| + | |
| − | clear:both;
| + | |
| − | display:none;
| + | |
| − | float: left;
| + | |
| − | width:100%;
| + | |
| − | }
| + | |
| | | | |
| − | /*level 2 menu (submenu) item*/
| + | <div class="figureHolder" id="Fig1"> |
| − | .igem_2019_team_menu .submenu .submenu_item {
| + | <img class="responsive-img" src="https://static.igem.org/mediawiki/2019/e/e9/T--Fudan-TSI--SFig1.gif" /> |
| − | border-bottom: 1px solid #cecece;
| + | <p>Figure 1. Model for the whole process of reverse transcription.</p> |
| − | color: #635d5d;
| + | </div> |
| − | height: 30px;
| + | |
| − | float: left;
| + | |
| − | font-size: 110%;
| + | |
| − | font-weight: bold;
| + | |
| − | padding: 12px 0px 0px 15%;
| + | |
| − | width: 100%;
| + | |
| − | }
| + | |
| | | | |
| − | /*level 2 menu (submenu) items on hover*/
| + | <p class="flow-text">Many researchers have studied the reverse transcription process in viruses, from which we find two critical properties in the annealing process of tRNA primer and PBS that should be taken into consideration when building the tRNA primer designer.</p> |
| − | .igem_2019_team_menu .submenu .submenu_item:hover {
| + | <p class="flow-text">The first property is that the 3'-terminal of the tRNA primer should be complementary to the PBS on mRNA template <a href="#Ref2">(Kosloff et al.)</a>. The second one is that different viruses prefer specific type of tRNA primer for reverse transcription <a>(Kulpa et al.,</a><a> Kosloff et al.)</a>. What should also be noted is that for different viruses, the lengths of PBS as well as the types of tRNA primer are different. The PBS lengths and the preferred tRNA types of 3 most well-studied retroviruses are listed in Table 1.</p> |
| − | background-color: #ecb656 !important;
| + | |
| − | }
| + | |
| | | | |
| − | /*color for highlighting current page on the wiki*/
| + | <div class="tableHolder"> |
| − | .igem_2019_team_menu .submenu .submenu_item.current_page,
| + | <table> |
| − | .igem_2019_team_menu .menu_item.current_page,
| + | <tr> |
| − | .igem_2019_team_menu .menu_item.direct_link.current_page {
| + | <th>Name of retrovirus</th> |
| − | background-color:#a2d3d0;
| + | <th>Length of PBS</th> |
| − | }
| + | <th>Preferred tRNA</th> |
| | + | </tr> |
| | + | <tr> |
| | + | <td>Moloney murine leukemia virus (MMLV)</td> |
| | + | <td>18</td> |
| | + | <td>tRNA<sup>Pro</sup></td> |
| | + | </tr> |
| | + | <tr> |
| | + | <td>Human immunodeficiency virus type 1(HIV-1)</td> |
| | + | <td>18</td> |
| | + | <td>tRNA<sup>Lys</sup></td> |
| | + | </tr> |
| | + | <tr> |
| | + | <td>Rous sarcoma virus (RSV)</td> |
| | + | <td>17</td> |
| | + | <td>tRNA<sup>Trp</sup></td> |
| | + | </tr> |
| | + | </table> |
| | + | <p>Table 1. PBS length and preferred tRNA types of well-studied retroviruses.</p> |
| | + | </div> |
| | | | |
| | + | <p class="flow-text">These discoveries serve as the theoretical basis for our tRNA primer designer. So basically, the function of our tRNA primer designer is to change the tRNA template in order to suit the basic properties of the reverse transcriptase (MMLV RT / HIV-1 RT / RSV RT) selected by the user as well as to replace several nucleotides (17 or 18) on 3'-terminal of the tRNA templates to match with nucleotides at the 5'-terminal of the GOI which users input. Also, to make sure that the RNA sequence is a tRNA sequence, the secondary structure should be revealed. We achieve this goal by using the similar tRNA secondary structure prediction scheme as the one implemented in the opensource software tRNAfinder <a>(Kurokawa et al.)</a>.</p> |
| | + | <p class="flow-text">Studies have shown that the primary factor guiding the selection of tRNA primer for MMLV-RT is the PBS sequence instead of the inherent nature of reverse transcriptase <a>(A. H. Lund et al.,</a><a> S. P. Goff et al.)</a>. So, by making mutations on both the PBS and tRNA sequence, the researchers have found that reverse transcription could still successfully take place while the virus’ titer is not greatly affected. Also, after several cycles of replication, the mutated sequence is not changed back to its original version <a>(Pedersen et al., 1997)</a>. Even though it is found that the primer is not stringent for MMLV, studies have revealed that the tRNA-like structure is necessary. A study that the inclusion of one single non-Watson-Crick base pair between PBS and tRNA primer would improve the replication efficiency (F. S. Pedersen et al., 1993), but we didn’t adopt this construct as the one base pair mismatch would often be changed to the full-complementary version after the first cycle of replication <a>(Pedersen et al., 1997)</a>, making this addition unnecessary.</p> |
| | + | </div> |
| | | | |
| − | /*mobile menu bar styling*/
| |
| − | /**************************************************************************************************************************************************************************************************/
| |
| | | | |
| − | /*mobile bar that controls the menu*/
| + | <div id="section3" class="section container scrolSpy"> |
| − | .igem_2019_team_mobile_bar {
| + | <h2>User guidelines</h2> |
| − | background-color:#ececec;
| + | <p class="flow-text">Our tRNA primer designer is <a href="http://9.cail.cn/tRNA_primer" target=_blank>a web tool</a> for potential users of our mutagenesis system to design their own tRNA primers according to their experimental setups. Here we provide a step-by-step guide to using this software.</p> |
| − | border-bottom: 1px solid #cecece;
| + | <p class="flow-text">Step 1. Select the type of reverse transcriptase (RT) that you want to use based on your experimental design, as shown in the figure below. Note that this software only allows you to choose from MMLV RT / HIV-1 RT / RSV RT.</p> |
| − | cursor:pointer;
| + | |
| − | display:none;
| + | |
| − | float:left;
| + | |
| − | margin-top: 0;
| + | |
| − | padding: 5px 0;
| + | |
| − | position:fixed;
| + | |
| − | width:100%;
| + | |
| − | }
| + | |
| − |
| + | |
| − | /*mobile logo*/
| + | |
| − | .igem_logo_mobile {
| + | |
| − | float:left;
| + | |
| − | padding-left: 5%;
| + | |
| − | width: 30%;
| + | |
| − | }
| + | |
| | | | |
| − | /*image within the mobile logo*/
| + | <div class="figureHolder" id="Fig2"> |
| − | .igem_logo_mobile img {
| + | <img class="responsive-img" src="https://static.igem.org/mediawiki/2019/archive/5/53/20191020091814%21T--Fudan-TSI--SFig2.gif" /> |
| − | width:70px;
| + | </div> |
| − | }
| + | |
| − |
| + | |
| − | /*mobile expand collapse button*/
| + | |
| − | .igem_menu_control_mobile {
| + | |
| − | float:right;
| + | |
| − | padding-right:5%;
| + | |
| − | padding-top:5px;
| + | |
| − | text-align:right;
| + | |
| − | width: 30%;
| + | |
| − | }
| + | |
| | | | |
| − | /*image for mobile expand collapse button*/
| + | <p class="flow-text">Step 2. Input a DNA sequence that you want to mutate, as shown in the figure below (upper panel). You can find a demo for it if you click on the icon on the right side of the web page, as shown in the figure below (lower panel). The last 17/18 nucleotides (nt) of the sequence are selected to be PBS, depending on the type of RT that you have chosen in <a href="#Fig2">Step 1</a>. The length of PBS is 18nt if MMLV RT / HIV-1 RT is selected, and is 17nt if RSV RT is selected.</p> |
| − | .igem_menu_control_mobile img {
| + | |
| − | width:25px;
| + | |
| − | }
| + | |
| | | | |
| | + | <div class="figureHolder" id="Fig3"> |
| | + | <img class="responsive-img" src="https://static.igem.org/mediawiki/2019/archive/2/29/20191020091155%21T--Fudan-TSI--SFig3.gif" /> |
| | + | </div> |
| | | | |
| − | /*add extra padding to the menu to improve mobile scrolling*/
| + | <p class="flow-text">Note that the target sequence should be longer than 17 or 18 nucleotides based on your selected RT. Besides, it shouldn't contain any characters other than A/T/C/G. If any occurs, there will be an error message.</p> |
| − | .menu_padding{
| + | |
| − | float:left;
| + | |
| − | height:100px;
| + | |
| − | }
| + | |
| | | | |
| | + | <p class="flow-text">Step 3. Click on the "submit" button and see the result, as shown in the figure below (upper panel). The result is composed of two parts. The first part shows you the secondary structure of the template tRNA that you will be using as well as the designed tRNA primer. The fragment that can be annealed to PBS of the input DNA sequence is shown in red. The second part will give you the DNA sequence encoding the tRNA primer that satisfies your need. You can just copy it and use it elsewhere. These two parts are demonstrated in the figure below (lower panel).</p> |
| | | | |
| − | /**************************************************************************************************************************************************************************************************/ | + | <div class="figureHolder" id="Fig4"> |
| − | /* CONTENT OF THE PAGE */ | + | <img class="responsive-img" src="https://static.igem.org/mediawiki/2019/2/2d/T--Fudan-TSI--SFig_end.gif" /> |
| − | /**************************************************************************************************************************************************************************************************/ | + | </div> |
| | + | </div> |
| | | | |
| − | /* general wrapper for the content */
| + | <div id="section4" class="section container scrolSpy"> |
| − | .igem_2019_team_content {
| + | <h2>References</h2> |
| − | background-color:white;
| + | <ol id="ref" style="margin: 23px 0 0 0;"> |
| − | display:block;
| + | <li id="Ref1">[1]. Peters G , Dahlberg J E . RNA-directed DNA synthesis in Moloney murine leukemia virus: interaction between the primer tRNA and the genome RNA.[J]. Journal of Virology, 1979, 31(2):398-407.</li> |
| − | width: 87%;
| + | <li id="Ref2">[2]. Kulpa, D. Determination of the site of first strand transfer during Moloney murine leukemia virus reverse transcription and identification of strand transfer-associated reverse transcriptase errors[J]. EMBO (European Molecular Biology Organization) Journal, 1997, 16(4):856-865.</li> |
| − | }
| + | <li id="Ref3">[3]. Palmer M T , Kirkman R , Kosloff B R , et al. tRNA Isoacceptor Preference prior to Retrovirus Gag-Pol Junction Links Primer Selection and Viral Translation[J]. Journal of Virology, 2007, 81(9):4397-4404.</li> |
| | + | <li id="Ref4">[4]. Kinouchi M , Kurokawa K . [Special Issue: Fact Databases and Freewares] tRNAfinder: A Software System To Find All tRNA Genes in the DNA Sequence Based on the Cloverleaf Secondary Structure[J]. Journal of Computer Aided Chemistry, 2006, 7:116-124.</li> |
| | + | <li id="Ref5">[5]. Lund, Anders H. et al. “Mutated primer binding sites interacting with different tRNAs allow efficient murine leukemia virus replication.” Journal of virology, 67 12 (1993): 7125-30.</li> |
| | + | </ol> |
| | + | </div> |
| | | | |
| − | /* subwrapper to center content */
| + | <div id="section5" class="section container scrolSpy"> |
| − | .igem_2019_team_content .igem_2019_team_column_wrapper {
| + | <h2>tRNA primer</h2> |
| − | margin:auto;
| + | <p class="flow-text">A demonstration of our software is embeded below. And, we have a beautified version running on <a href="http://9.cail.cn/tRNA_primer" target=_blank>Amazon EC2</a>.</p> |
| − | max-width: 1400px;
| + | </div> |
| − | width:90%;
| + | |
| − | }
| + | |
| | | | |
| | + | <div style="background-color:white;padding:2%"> |
| | + | <p id="p_rev" style="color:black"> |
| | + | <em>Please input the type of reverse transcriptase (RT) that you want to use:</em><br/> |
| | + | <label for="rev_MMLV"><input type="radio" name="rev" value="MMLV" id="rev_MMLV" checked /><span>MMLV</span></label><br/> |
| | + | <label for="rev_HIV1"><input type="radio" name="rev" value="HIV1" id="rev_HIV1" /><span>HIV1</span></label><br/> |
| | + | <label for="rev_RSV"><input type="radio" name="rev" value="RSV" id="rev_RSV" /><span>RSV</span></label> |
| | + | </p> |
| | + | <p id="p_target" style="color:black"> |
| | + | <em>Please input a sequence that you want to mutate:</em><br/> |
| | + | <textarea style="width:80%;resize:none;border:0;border-bottom:1px #ccc solid;" rows="2" id="target_seq"></textarea> |
| | + | </p> |
| | + | <p> |
| | + | <input style="padding:4px 12px" type="submit" value="submit" id="submit" /> |
| | + | <input style="padding:4px 12px" type="submit" value="clear" id="clear" /> |
| | + | <input style="padding:4px 12px" type="submit" value="demo" id="demoBtn" style="float:right" /> |
| | + | </p> |
| | + | <p id="progress" style="background:yellow;font-size:0.75em;line-height:11pt;text-indent:-10px;padding-left:15px;color:black"></p> |
| | + | <div><table id="table_result" style="color:black"></table></div> |
| | + | <div id="graph_result"></div> |
| | + | <hr/> |
| | + | <p id="p_primer" style="color:green" class="Off"> |
| | + | <em>Your tRNA primer (complement to <u>Your tRNA</u>):</em><br/> |
| | + | 3'-<span id="primer_seq"></span>-5' |
| | + | </p> |
| | + | <script> |
| | + | var DEBUG = false, |
| | + | PBS_len = 18; |
| | | | |
| | + | function getQueryStringArgs() { |
| | + | var qs = location.search.length > 0 ? location.search.substring(1) : '', |
| | + | args = {}, |
| | + | items = qs.length ? qs.split('&') : [], |
| | + | item = null, |
| | + | name = null, |
| | + | value = null, |
| | + | i = 0, |
| | + | len = items.length; |
| | + | for (i = 0; i < len; i += 1) { |
| | + | item = items[i].split('='); |
| | + | name = decodeURIComponent(item[0]); |
| | + | value = decodeURIComponent(item[1]); |
| | + | if (name.length) { |
| | + | args[name] = value; |
| | + | } |
| | + | } |
| | + | return args; |
| | + | } |
| | | | |
| − | /*general styling*/
| + | function cumsum(myarray) { |
| − | /**************************************************************************************************************************************************************************************************/
| + | var new_array = []; |
| | + | myarray.reduce(function(a,b,i) { return new_array[i] = a+b; }, 0); |
| | + | return new_array; |
| | + | } |
| | | | |
| − | /*size for title h tags*/
| + | function complement(ele) { |
| − | .igem_2019_team_content .igem_2019_team_column_wrapper h1 { font-size: 210%;}
| + | if (ele === 'A') { |
| − | .igem_2019_team_content .igem_2019_team_column_wrapper h2 { font-size: 190%;}
| + | return 'U'; |
| − | .igem_2019_team_content .igem_2019_team_column_wrapper h3 { font-size: 170%;}
| + | } else if (ele === 'U' || ele === 'T') { |
| − | .igem_2019_team_content .igem_2019_team_column_wrapper h4 { font-size: 150%;}
| + | return 'A'; |
| − | .igem_2019_team_content .igem_2019_team_column_wrapper h5 { font-size: 140%;}
| + | } else if (ele === 'G') { |
| − | .igem_2019_team_content .igem_2019_team_column_wrapper h6 { font-size: 130%;}
| + | return 'C'; |
| | + | } else if (ele === 'C') { |
| | + | return 'G'; |
| | + | } |
| | + | return 'N'; |
| | + | } |
| | + | function complement_dna(ele) { |
| | + | if (ele === 'A') { |
| | + | return 'T'; |
| | + | } else if (ele === 'T' || ele === 'U') { |
| | + | return 'A'; |
| | + | } else if (ele === 'G') { |
| | + | return 'C'; |
| | + | } else if (ele === 'C') { |
| | + | return 'G'; |
| | + | } |
| | + | return 'N'; |
| | + | } |
| | | | |
| | + | function isComplement(Base1, Base2, drawMode, alignMode) { |
| | + | if (!drawMode) { drawMode = 'none'; } |
| | + | if (!alignMode) { alignMode = 'none'; } |
| | + | if (Base1 == complement(Base2)) { |
| | + | if (alignMode === 'vertical') { |
| | + | return 3; |
| | + | } else { |
| | + | return 1; |
| | + | } |
| | + | } else if ( (Base1+Base2 === 'GU') || |
| | + | (Base1+Base2 === 'UG') ) { |
| | + | if (drawMode === 'draw') { |
| | + | return 2; |
| | + | } else { |
| | + | return 1; |
| | + | } |
| | + | } else { |
| | + | return 0; |
| | + | } |
| | + | } |
| | | | |
| − | /*titles h1, h2*/
| + | function anti_parallel(t) { |
| − | .igem_2019_team_content .igem_2019_team_column_wrapper h1, .igem_2019_team_content .igem_2019_team_column_wrapper h2 {
| + | var apt_list = [], |
| − | border-bottom:0px;
| + | t_list = t.split(''); |
| − | color: white;
| + | $.each(t_list, function (iV, ele) { |
| − | font-family: "Arial Black", Gadget, sans-serif;
| + | if (ele === 'A') { |
| − | padding: 10px 0px;
| + | apt_list.unshift( 'U' ); |
| − | }
| + | } else if (ele === 'T' || ele === 'U') { |
| | + | apt_list.unshift( 'A' ); |
| | + | } else if (ele === 'G') { |
| | + | apt_list.unshift( 'C' ); |
| | + | } else if (ele === 'C') { |
| | + | apt_list.unshift( 'G' ); |
| | + | } |
| | + | }); |
| | + | return apt_list.join(''); |
| | + | } |
| | | | |
| − | /*titles h3, h3, h5, h6 */
| + | function complementSeq(t) { |
| − | .igem_2019_team_content .igem_2019_team_column_wrapper h3,
| + | var cs_list = [], |
| − | .igem_2019_team_content .igem_2019_team_column_wrapper h4,
| + | t_list = t.split(''); |
| − | .igem_2019_team_content .igem_2019_team_column_wrapper h5,
| + | $.each(t_list, function (iV, ele) { |
| − | .igem_2019_team_content .igem_2019_team_column_wrapper h6 {
| + | cs_list.push( complement(ele) ); |
| − | border-bottom:0px;
| + | }); |
| − | color: white;
| + | return cs_list.join(''); |
| − | font-family: "Arial Black", Gadget, sans-serif;
| + | } |
| − | padding: 5px 0px;
| + | function complementSeq_dna(t) { |
| − | }
| + | var cs_list = [], |
| | + | t_list = t.split(''); |
| | + | $.each(t_list, function (iV, ele) { |
| | + | cs_list.push( complement_dna(ele) ); |
| | + | }); |
| | + | return cs_list.join(''); |
| | + | } |
| | | | |
| − | /* text p tag*/
| + | function reverseAB(t, A, B) { |
| − | .igem_2019_team_content .igem_2019_team_column_wrapper p {
| + | if (A <= B || A >= t.length) { return ''; } |
| − | font-size: 130%;
| + | var tt = ''; |
| − | font-family: Arial, Helvetica, sans-serif;
| + | for (let step = A; step > B; step--) { |
| − | padding: 5px 0px;
| + | tt += t.substr(step, 1); |
| − | text-align: left;
| + | } |
| − | color: white;
| + | return tt; |
| − | }
| + | } |
| | | | |
| − | /* Links a tag*/
| + | function findRegion(seq, L) { |
| − | .igem_2019_team_content .igem_2019_team_column_wrapper a {
| + | var new_s = {}, |
| − | color: #00a19b;
| + | Max_Mismatch = 2; |
| − | font-weight: bold;
| + | // return the basic components of tRNA (e.g. TArm, TLoop, etc.) for subsequent plotting step |
| − | text-decoration: underline;
| + | var S, Base1, Base2, mismatch1, mismatch2, mismatch3, MisMatch_total, |
| − | text-decoration-color:#00a19b;
| + | AcptStemStart, AcptStemEnd, AcptStemLen, |
| − | transition: all 0.4s ease;
| + | DLoopStart, DLoopEnd, DLoopLen, |
| − | -webkit-transition: all 0.4s ease;
| + | AtCLoopEnd, AtCLoopStart, AtCLoopStemLen, |
| − | -moz-transition: all 0.4s ease;
| + | TArmSiteStart, TArmSiteEnd, TArmStemLen; |
| − | -ms-transition: all 0.4s ease;
| + | for (let n = 0; n < L; n++) { |
| − | -o-transition: all 0.4s ease;
| + | for (let interval = 69; interval < 94; interval++) { |
| − | }
| + | AcptStemStart = n; |
| | + | AcptStemEnd = n + interval; |
| | + | AcptStemLen = 7; |
| | + | MisMatch_total = 0; |
| | + | if (AcptStemEnd >= L) { continue; } |
| | + | mismatch1 = 0; |
| | + | S = 0; |
| | + | for (let i = 0; i < AcptStemLen; i++) { |
| | + | Base1 = seq.substr(AcptStemStart+i, 1); |
| | + | Base2 = seq.substr(AcptStemEnd-i, 1); |
| | + | S += isComplement(Base1, Base2); |
| | + | } |
| | + | mismatch1 += (AcptStemLen - S); |
| | + | if (S < AcptStemLen-Max_Mismatch || mismatch1 > Max_Mismatch) { continue; } |
| | + | TArmSiteEnd = n + interval - AcptStemLen; |
| | + | TArmSiteStart = TArmSiteEnd - 16; |
| | + | TArmStemLen = 5; |
| | + | S = 0; |
| | + | for (let i = 0; i < TArmStemLen; i++) { |
| | + | Base1 = seq.substr(TArmSiteStart+i, 1); |
| | + | Base2 = seq.substr(TArmSiteEnd-i, 1); |
| | + | S += isComplement(Base1, Base2); |
| | + | } |
| | + | mismatch1 += (TArmStemLen - S); |
| | + | MisMatch_total = mismatch1; |
| | + | if (S < 4 || MisMatch_total > Max_Mismatch) { continue; } |
| | + | for (let DLoopLen = 14; DLoopLen < 19; DLoopLen++) { |
| | + | MisMatch_total = mismatch1; |
| | + | DLoopStart = n + 9; |
| | + | DLoopEnd = DLoopStart + DLoopLen; |
| | + | S = 0; |
| | + | if (DLoopLen < 17) { DLoopStemLen = 3; } |
| | + | else { DLoopStemLen = 4; } |
| | + | for (let i = 0; i < DLoopStemLen; i++) { |
| | + | Base1 = seq.substr(DLoopStart+i, 1); |
| | + | Base2 = seq.substr(DLoopEnd-i, 1); |
| | + | S += isComplement(Base1, Base2); |
| | + | } |
| | + | mismatch2 = DLoopStemLen - S; |
| | + | MisMatch_total += mismatch2; |
| | + | if (MisMatch_total <= Max_Mismatch) { |
| | + | AtCLoopStart = DLoopEnd + 2; |
| | + | AtCLoopStemLen = 5; |
| | + | for (let AtCLoopEnd = Math.max(AtCLoopStart+16, AcptStemEnd-54); |
| | + | AtCLoopEnd <= Math.min(AtCLoopStart+16, AcptStemEnd-28); AtCLoopEnd++) { |
| | + | S = 0; |
| | + | MisMatch_total = mismatch1 + mismatch2; |
| | + | for (let i = 0; i < AtCLoopStemLen; i++) { |
| | + | Base1 = seq.substr(AtCLoopStart+i, 1); |
| | + | Base2 = seq.substr(AtCLoopEnd-i, 1); |
| | + | S += isComplement(Base1, Base2); |
| | + | } |
| | + | mismatch3 = AtCLoopStemLen - S; |
| | + | MisMatch_total += mismatch3; |
| | + | if (MisMatch_total <= Max_Mismatch) { |
| | + | $('#progress').append('<br/>'+(AcptStemStart+1)+'..'+(AcptStemEnd+1+1)+'    '); |
| | + | $('#progress').append('mismatch='+MisMatch_total); |
| | + | GroupNum = [AcptStemStart, AcptStemLen, 2, 4, DLoopLen-2*4+1, 4, 1, AtCLoopStemLen, |
| | + | AtCLoopEnd-AtCLoopStart-2*AtCLoopStemLen+1, AtCLoopStemLen, |
| | + | TArmSiteStart-AtCLoopEnd-1, TArmStemLen, 16-2*TArmStemLen+1, |
| | + | TArmStemLen, AcptStemLen, seq.length-AcptStemLen]; |
| | + | GroupNum = cumsum(GroupNum); |
| | + | new_s = { |
| | + | AcceptArm: '', |
| | + | Interval1: '', |
| | + | DArm: '', |
| | + | DLoop: '', |
| | + | DArmComp: '', |
| | + | Interval2: '', |
| | + | AnticodonArm: '', |
| | + | AnticodonLoop: '', |
| | + | AnticodonArmComp: '', |
| | + | VariableLoop: '', |
| | + | TArm: '', |
| | + | TLoop: '', |
| | + | TArmComp: '', |
| | + | AcceptArmComp: '', |
| | + | Redundance:'' |
| | + | }; |
| | + | OutputName = [ |
| | + | 'AcceptArm', |
| | + | 'Interval1', |
| | + | 'DArm', |
| | + | 'DLoop', |
| | + | 'DArmComp', |
| | + | 'Interval2', |
| | + | 'AnticodonArm', |
| | + | 'AnticodonLoop', |
| | + | 'AnticodonArmComp', |
| | + | 'VariableLoop', |
| | + | 'TArm', |
| | + | 'TLoop', |
| | + | 'TArmComp', |
| | + | 'AcceptArmComp', |
| | + | 'Redundance' |
| | + | ]; |
| | + | for (let i = AcptStemStart; i < L; i++) { |
| | + | for (let j = 0; j < 15; j++) { |
| | + | if (i >= GroupNum[j]) { |
| | + | if (i < GroupNum[j+1]) { |
| | + | new_s[OutputName[j]] += seq.substr(i, 1); |
| | + | } |
| | + | } |
| | + | } |
| | + | } |
| | + | return new_s; |
| | + | } |
| | + | } // for AtCLoopEnd |
| | + | } |
| | + | } // for DLoopLen |
| | + | } // for interval |
| | + | } // for n |
| | + | $('#progress').append('<br/>!! not a tRNA, failed to draw'); |
| | + | return new_s; |
| | + | } |
| | | | |
| − | /* hover for the links */
| + | function linkerDtm(seq1, seq2, mode) { |
| − | .igem_2019_team_content .igem_2019_team_column_wrapper a:hover {
| + | var linkSymbol = [' ', '-', '+', '|'], |
| − | color: #085156;
| + | L1 = seq1.length, |
| − | text-decoration:none;
| + | L2 = seq2.length, L, linkerSeq = ''; |
| − | }
| + | if (L1 != L2) { |
| | + | return 0; |
| | + | } else { |
| | + | L = L1; |
| | + | } |
| | + | for (let i = 0; i < L; i++){ |
| | + | Base1 = seq1.substr(i, 1); |
| | + | Base2 = seq2.substr(L-1-i, 1); |
| | + | linkerSeq += linkSymbol[ isComplement(Base1, Base2, 'draw', mode) ]; |
| | + | } |
| | + | return linkerSeq; |
| | + | } |
| | | | |
| | + | function TmCal67(seq) { |
| | + | /* Tm= (wA+xT)*2 + (yG+zC)*4 - 16.6*log10(0.050) + 16.6*log10([Na+]) |
| | + | return 58.1+(58.4*c/a)+(11.8*(c/a)*(c/a))-(820/a) |
| | + | Tm= (wA+xT)*2 + (yG+zC)*4 +21.597-19.487 |
| | + | return b*2+c*4+2.11 */ |
| | + | if (!seq) { return 0; } |
| | + | var a = seq.length, b, c; |
| | + | b = (seq.split('A').length - 1) + (seq.split('U').length - 1); |
| | + | c = (seq.split('G').length - 1) + (seq.split('C').length - 1); |
| | + | return b*2+c*4+2.1 |
| | + | } |
| | | | |
| − | /* Table tag*/
| + | function draw_tRNA(ForDraw, Type_RT, preId) { |
| − | .igem_2019_team_content .igem_2019_team_column_wrapper table {
| + | var linker = {}, pre; |
| − | border: 1px solid #635d5d;
| + | if (ForDraw.DLoop.length < 9) { |
| − | border-collapse: collapse;
| + | for (let i = 0; i < (9 - ForDraw.DLoop.length); i++) { |
| − | font-size: 130%;
| + | ForDraw.DLoop += ' '; |
| − | width: 100%;
| + | } |
| − | }
| + | } |
| | + | linker['AcceptorArmLink'] = linkerDtm(ForDraw.AcceptArm, ForDraw.AcceptArmComp) |
| | + | linker['DArmLink'] = linkerDtm(ForDraw.DArmComp,ForDraw.DArm, 'vertical') |
| | + | linker['AnticodonArmLink'] = linkerDtm(ForDraw.AnticodonArm, ForDraw.AnticodonArmComp) |
| | + | linker['TArmLink'] = linkerDtm(ForDraw.TArm, ForDraw.TArmComp, 'vertical') |
| | + | pre = ' ' + ForDraw.Redundance + '-3\n'; |
| | + | pre += ' 5-' + ForDraw.AcceptArm[0] + |
| | + | ' ' + linker.AcceptorArmLink[0] + ' ' + |
| | + | ForDraw.AcceptArmComp[ForDraw.AcceptArm.length-1]+'\n'; |
| | + | for (let i = 1; i < ForDraw.AcceptArm.length-1; i++) { |
| | + | pre += ' ' + ForDraw.AcceptArm[i] + |
| | + | ' ' + linker.AcceptorArmLink[i] + ' ' + |
| | + | ForDraw.AcceptArmComp[ForDraw.AcceptArm.length-1-i]+'\n'; |
| | + | } |
| | + | pre += ' ' + ForDraw.AcceptArm[ForDraw.AcceptArm.length-1] + |
| | + | ' ' + linker.AcceptorArmLink[ForDraw.AcceptArm.length-1] + |
| | + | ' ' + ForDraw.AcceptArmComp[0] + |
| | + | ' ' + ForDraw.TLoop[6] + ' ' + ForDraw.TLoop[5]+'\n'; |
| | + | pre += ' ' + ForDraw.Interval1[0] + ' ' + |
| | + | ForDraw.TArmComp[4] + ' ' + |
| | + | ForDraw.TArmComp[3] + ' ' + |
| | + | ForDraw.TArmComp[2] + ' ' + |
| | + | ForDraw.TArmComp[1] + ' ' + |
| | + | ForDraw.TArmComp[0] + ' ' + ForDraw.TLoop[4]+'\n'; |
| | + | pre += ' ' + ForDraw.DLoop[1] + ' ' + ForDraw.DLoop[0] + |
| | + | ' ' + ForDraw.Interval1[1] + |
| | + | ' ' + linker.TArmLink[0] + ' ' + |
| | + | linker.TArmLink[1] + ' ' + |
| | + | linker.TArmLink[2] + ' ' + |
| | + | linker.TArmLink[3] + ' ' + |
| | + | linker.TArmLink[4] + ' ' + ForDraw.TLoop[3]+'\n'; |
| | + | pre += ' ' + ForDraw.DLoop[2] + ' ' + |
| | + | ForDraw.DArm[3] + ' ' + |
| | + | ForDraw.DArm[2] + ' ' + |
| | + | ForDraw.DArm[1] + ' ' + |
| | + | ForDraw.DArm[0] + ' ' + |
| | + | ForDraw.TArm[0] + ' ' + |
| | + | ForDraw.TArm[1] + ' ' + |
| | + | ForDraw.TArm[2] + ' ' + |
| | + | ForDraw.TArm[3] + ' ' + |
| | + | ForDraw.TArm[4] + ' ' + ForDraw.TLoop[2]+'\n'; |
| | + | pre += ' ' + ForDraw.DLoop[3] + ' ' + |
| | + | linker.DArmLink[0] + ' ' + |
| | + | linker.DArmLink[1] + ' ' + |
| | + | linker.DArmLink[2] + ' ' + |
| | + | linker.DArmLink[3] + ' ' + |
| | + | ForDraw.VariableLoop[4] + ' ' + |
| | + | ForDraw.TLoop[1] + ' ' + ForDraw.TLoop[0]+'\n'; |
| | + | if (Type_RT === 'HIV1') { |
| | + | pre += ' ' + ForDraw.DLoop[4] + ' ' + |
| | + | ForDraw.DArmComp[0] + ' ' + |
| | + | ForDraw.DArmComp[1] + ' ' + |
| | + | ForDraw.DArmComp[2] + ' ' + |
| | + | ForDraw.DArmComp[3] + ' ' + |
| | + | ForDraw.VariableLoop[4] + ' \n'; |
| | + | pre += ' ' + ForDraw.DLoop[6] + ' ' + ForDraw.DLoop[7] + |
| | + | ' ' + ForDraw.Interval2 + |
| | + | ' ' + ForDraw.VariableLoop[0] + |
| | + | ' ' + ForDraw.VariableLoop[1] + |
| | + | ' ' + ForDraw.VariableLoop[2]+'\n'; |
| | + | } else { |
| | + | pre += ' ' + ForDraw.DLoop[4] + ' ' + |
| | + | ForDraw.DLoop[6] + ' ' + |
| | + | ForDraw.DArmComp[0] + ' ' + |
| | + | ForDraw.DArmComp[1] + ' ' + |
| | + | ForDraw.DArmComp[2] + ' ' + |
| | + | ForDraw.DArmComp[3] + ' ' + |
| | + | ForDraw.VariableLoop[3] + '\n'; |
| | + | pre += ' ' + ForDraw.Interval2 + |
| | + | ' ' + ForDraw.VariableLoop[0] + |
| | + | ' ' + ForDraw.VariableLoop[1] + |
| | + | ' ' + ForDraw.VariableLoop[2]+'\n'; |
| | + | } |
| | + | for (let i = 0; i < ForDraw.AnticodonArm.length; i++) { |
| | + | pre += ' ' + ForDraw.AnticodonArm[i] + |
| | + | ' ' + linker.AnticodonArmLink[i] + ' ' + |
| | + | ForDraw.AnticodonArmComp[ForDraw.AnticodonArm.length-1-i]+'\n'; |
| | + | } |
| | + | pre += ' ' + ForDraw.AnticodonLoop[0] + ' ' + ForDraw.AnticodonLoop[6]+'\n'; |
| | + | pre += ' ' + ForDraw.AnticodonLoop[1] + ' ' + ForDraw.AnticodonLoop[5]+'\n'; |
| | + | pre += ' ' + ForDraw.AnticodonLoop[2] + |
| | + | ' ' + ForDraw.AnticodonLoop[3] + ' ' + ForDraw.AnticodonLoop[4]; |
| | + | $('#'+preId).text(pre); |
| | + | } |
| | | | |
| − | /* table cells */
| + | function tRNA_primer(std_q) { |
| − | .igem_2019_team_content .igem_2019_team_column_wrapper td {
| + | var PBS = reverseAB(std_q, std_q.length-1, std_q.length-PBS_len-1); |
| − | border: 1px solid #cecece;
| + | var Primerseq = complementSeq(PBS); |
| − | border-collapse: collapse;
| + | var temp_seq = '', |
| − | font-size: 105%;
| + | Type_RT = $('input[name="rev"]:checked').val(); |
| − | padding: 10px;
| + | if (Type_RT === 'MMLV') { |
| − | vertical-align: text-top;
| + | temp_seq = 'GGCUCGUUGGUCUAGGGGUAUGAUUCUCGCUUAGGGUGCGAGAGGUCCCGGGUUCAAAUCCCGGACGAGCCCCCA'; |
| − | }
| + | } else if (Type_RT === 'HIV1') { |
| | + | temp_seq = 'GCCCGGCUAGCUCAGUCGGUAGAGCAUCAGACUUUUAAUCUGAGGGUCCAGGGTUCAAGUCCCUGUUCGGGCGCCA'; |
| | + | } else if (Type_RT === 'RSV') { |
| | + | temp_seq = 'GACCUCGUGGCGCAACGGUAGCGCGUCUGACUCCAGAUCAGAAGGCUGCGUGUUCGAAUCACGUCGGGGUCACCA'; |
| | + | } |
| | + | var temp = findRegion( temp_seq.replace('T','U'), temp_seq.length ); |
| | + | if (temp) { |
| | + | // tRNA_Pro for MMLV RT, tRNA_Lys for HIV-1 RT, tRNA_Trp for RSV RT |
| | + | $('#table_result').html('<tr><th>For ' + Type_RT + ' RT<br/>template tRNA ' + |
| | + | '(Tm<sup>stem</sup> <span id="TmT"></span>)</th><th>Your tRNA ' + |
| | + | '(Tm<sup>stem</sup> <span id="TmY"></span>)</th></tr>' + |
| | + | '<tr><td><pre id="preLeft"></pre></td><td><pre id="preRight"></pre></td></tr>'); |
| | + | draw_tRNA(temp, Type_RT, 'preLeft'); |
| | + | $('#TmT').text( TmCal67(temp.AcceptArm) ); |
| | + | var qT = temp; |
| | + | qT.Redundance = reverseAB(Primerseq, qT.Redundance.length-1, -1); |
| | + | qT.AcceptArmComp = reverseAB(Primerseq, |
| | + | qT.Redundance.length+qT.AcceptArmComp.length-1, qT.Redundance.length-1); |
| | + | qT.AcceptArm = anti_parallel(qT.AcceptArmComp); |
| | + | qT.TArmComp = reverseAB(Primerseq.substr(qT.Redundance.length+qT.AcceptArmComp.length, 5), 4, -1); |
| | + | qT.TArm = anti_parallel(qT.TArmComp); |
| | + | var remainNotR = Primerseq.substr(qT.TArmComp.length+qT.Redundance.length+qT.AcceptArmComp.length); |
| | + | qT.TLoop = qT.TLoop.substr(0, qT.TLoop.length-remainNotR.length) + reverseAB(remainNotR, remainNotR.length-1, -1); |
| | + | draw_tRNA(qT, Type_RT, 'preRight'); |
| | + | $('#TmY').text( TmCal67(qT.AcceptArm) ); |
| | + | return complementSeq_dna( qT.AcceptArm + qT.Interval1 + qT.DArm + qT.DArmComp + qT.Interval2 + |
| | + | qT.AnticodonArm + qT.AnticodonLoop + qT.VariableLoop + qT.TArm + |
| | + | qT.TLoop + qT.TArmComp + qT.AcceptArmComp + qT.Redundance ); |
| | + | } else { |
| | + | return 'ERROR' |
| | + | } |
| | + | } |
| | | | |
| − | /* table headers */
| + | function clean_results() { |
| − | .igem_2019_team_content .igem_2019_team_column_wrapper th {
| + | $('#progress').text(''); |
| − | background-color:#cecece;
| + | $('#table_result').html(''); |
| − | border: 1px solid #635d5d;
| + | $('#graph_result').html(''); |
| − | border-collapse: collapse;
| + | $('#primer_seq').text(''); |
| − | font-size: 110%;
| + | $('#p_primer').addClass('Off'); |
| − | padding: 10px;
| + | |
| − | vertical-align: text-top;
| + | |
| − | }
| + | |
| − | | + | |
| − | | + | |
| − | | + | |
| − | /* non numbered lists */
| + | |
| − | .igem_2019_team_content .igem_2019_team_column_wrapper ul, .igem_2019_team_content .igem_2019_team_column_wrapper ol {
| + | |
| − | font-size: 130%;
| + | |
| − | font-family: Arial, Helvetica, sans-serif;
| + | |
| − | padding:0px 20px;
| + | |
| − | }
| + | |
| − | | + | |
| − | | + | |
| − | /*font sizing within list nesting*/
| + | |
| − | .igem_2019_team_content .igem_2019_team_column_wrapper ul ul li, .igem_2019_team_content .igem_2019_team_column_wrapper ul ul ul li,
| + | |
| − | .igem_2019_team_content .igem_2019_team_column_wrapper ul ol li, .igem_2019_team_content .igem_2019_team_column_wrapper ul ul ol li,
| + | |
| − | .igem_2019_team_content .igem_2019_team_column_wrapper ol ol li, .igem_2019_team_content .igem_2019_team_column_wrapper ul ol ul li,
| + | |
| − | .igem_2019_team_content .igem_2019_team_column_wrapper ol ul li, .igem_2019_team_content .igem_2019_team_column_wrapper ul ol ol li,
| + | |
| − | .igem_2019_team_content .igem_2019_team_column_wrapper ol ul ul li, .igem_2019_team_content .igem_2019_team_column_wrapper ol ol ul li,
| + | |
| − | .igem_2019_team_content .igem_2019_team_column_wrapper ol ol ol li, .igem_2019_team_content .igem_2019_team_column_wrapper ol ul ol li{ font-size: 76%; }
| + | |
| − | | + | |
| − | | + | |
| − | | + | |
| − | /*layout classes*/
| + | |
| − | /**************************************************************************************************************************************************************************************************/
| + | |
| − | | + | |
| − | /*main layout class */
| + | |
| − | .igem_2019_team_content .igem_2019_team_column_wrapper .column {
| + | |
| − | float:left;
| + | |
| − | margin: 1% 2%;
| + | |
| − | padding: 0px;
| + | |
| − | }
| + | |
| − | | + | |
| − | /* 100% */
| + | |
| − | .igem_2019_team_content .igem_2019_team_column_wrapper .column.full_size { width:96%; }
| + | |
| − | | + | |
| − | /* 66% */
| + | |
| − | .igem_2019_team_content .igem_2019_team_column_wrapper .column.two_thirds_size { width: 62.6%; }
| + | |
| − | | + | |
| − | /* 33% */
| + | |
| − | .igem_2019_team_content .igem_2019_team_column_wrapper .column.third_size { width: 29.3%; }
| + | |
| − | | + | |
| − | | + | |
| − | | + | |
| − | | + | |
| − | /*all images*/
| + | |
| − | .igem_2019_team_content .igem_2019_team_column_wrapper .column.full_size img,
| + | |
| − | .igem_2019_team_content .igem_2019_team_column_wrapper .column.two_thirds_size img,
| + | |
| − | .igem_2019_team_content .igem_2019_team_column_wrapper .column.third_size img {
| + | |
| − | margin-bottom: 15px;
| + | |
| − | width: 100%;
| + | |
| − | }
| + | |
| − | | + | |
| − | | + | |
| − | /* page break */
| + | |
| − | .igem_2019_team_content .igem_2019_team_column_wrapper .clear {
| + | |
| − | clear:both;
| + | |
| − | }
| + | |
| − | /*add extra space to page break with clear class*/
| + | |
| − | .igem_2019_team_content .igem_2019_team_column_wrapper .clear.extra_space {
| + | |
| − | height: 30px;
| + | |
| − | }
| + | |
| − | | + | |
| − | /* horizontal line to divide the page*/
| + | |
| − | .igem_2019_team_content .igem_2019_team_column_wrapper .line_divider {
| + | |
| − | border-top: 1px solid #cecece;
| + | |
| − | margin: auto;
| + | |
| − | width: 98%;
| + | |
| − | }
| + | |
| − | | + | |
| − | | + | |
| − | | + | |
| − |
| + | |
| − | /*support classes*/
| + | |
| − | /**************************************************************************************************************************************************************************************************/
| + | |
| − | | + | |
| − | | + | |
| − | /*Button */
| + | |
| − | /************************************************/
| + | |
| − | .igem_2019_team_content .igem_2019_team_column_wrapper .button_link {
| + | |
| − | font-size: 130%;
| + | |
| − | margin: 30px auto;
| + | |
| − | text-align: center;
| + | |
| − | }
| + | |
| − | | + | |
| − | .igem_2019_team_content .igem_2019_team_column_wrapper .button_link a {
| + | |
| − | background-color: #00a19bad !important;
| + | |
| − | color: #000 !important;
| + | |
| − | font-weight: bold;
| + | |
| − | margin: auto;
| + | |
| − | text-decoration: none !important;
| + | |
| − | padding: 10px 15px !important;
| + | |
| − | }
| + | |
| − | | + | |
| − | .igem_2019_team_content .igem_2019_team_column_wrapper .button_link a:hover {
| + | |
| − | background-color: #ffb819 !important;
| + | |
| − | }
| + | |
| − | | + | |
| − |
| + | |
| − | | + | |
| − | /*highlight */
| + | |
| − | /************************************************/
| + | |
| − | .igem_2019_team_content .igem_2019_team_column_wrapper .highlight {
| + | |
| − | padding: 15px 20px;
| + | |
| − | }
| + | |
| − | | + | |
| − | | + | |
| − | .igem_2019_team_content .igem_2019_team_column_wrapper .highlight p,
| + | |
| − | .igem_2019_team_content .igem_2019_team_column_wrapper .highlight h1,
| + | |
| − | .igem_2019_team_content .igem_2019_team_column_wrapper .highlight h2,
| + | |
| − | .igem_2019_team_content .igem_2019_team_column_wrapper .highlight h3,
| + | |
| − | .igem_2019_team_content .igem_2019_team_column_wrapper .highlight h4,
| + | |
| − | .igem_2019_team_content .igem_2019_team_column_wrapper .highlight h5,
| + | |
| − | .igem_2019_team_content .igem_2019_team_column_wrapper .highlight h6 {
| + | |
| − | padding: 5px 15px;
| + | |
| − | }
| + | |
| − | | + | |
| − | .igem_2019_team_content .igem_2019_team_column_wrapper .highlight.decoration_background {
| + | |
| − | background-color: #ececec;
| + | |
| − | }
| + | |
| − | | + | |
| − | .igem_2019_team_content .igem_2019_team_column_wrapper .highlight.decoration_A_top {
| + | |
| − | border-top: 4px solid #00a19bad;
| + | |
| − | }
| + | |
| − | | + | |
| − | | + | |
| − | .igem_2019_team_content .igem_2019_team_column_wrapper .highlight.decoration_A_full {
| + | |
| − | border: 4px solid #00a19bad;
| + | |
| − | }
| + | |
| − | | + | |
| − | .igem_2019_team_content .igem_2019_team_column_wrapper .highlight.decoration_B_top {
| + | |
| − | border-top: 4px solid #ffb819
| + | |
| − | }
| + | |
| − | | + | |
| − | | + | |
| − | .igem_2019_team_content .igem_2019_team_column_wrapper .highlight.decoration_B_full {
| + | |
| − | border: 4px solid #ffb819;
| + | |
| − | }
| + | |
| − | | + | |
| − | | + | |
| − | | + | |
| − | | + | |
| − | /*mobile*/
| + | |
| − | /**************************************************************************************************************************************************************************************************/
| + | |
| − | | + | |
| − | | + | |
| − | /* 1800px */
| + | |
| − | /************************************************/
| + | |
| − | @media only screen and (max-width: 1800px) {
| + | |
| − | .igem_2019_team_content { width: 85%;}
| + | |
| − | .igem_2019_team_menu {display:block;}
| + | |
| − |
| + | |
| | } | | } |
| | | | |
| − | /* 1400px */
| |
| − | /************************************************/
| |
| − | @media only screen and (max-width: 1400px) {
| |
| − | .igem_2019_team_menu .menu_item { font-size:100%;}
| |
| − | .igem_2019_team_menu .submenu .submenu_item { font-size:90%;}
| |
| − | .igem_2019_team_menu {display:block;}
| |
| − | }
| |
| − |
| |
| − |
| |
| − | /* 1100px */
| |
| − | /************************************************/
| |
| − | @media only screen and (max-width: 1100px) {
| |
| − | .igem_2019_team_content {width:100%; margin-left:0px;}
| |
| − |
| |
| − | .igem_2019_team_menu {display:none;float:right;margin-top:47px;max-width:100%;position:fixed;width:25%;}
| |
| − |
| |
| − | .igem_2019_team_mobile_bar {display:block;}
| |
| − |
| |
| − | .igem_2019_team_content .igem_2019_team_column_wrapper .column.full_size, .igem_2019_team_content .igem_2019_team_column_wrapper .column.two_thirds_size,.igem_2019_team_content .igem_2019_team_column_wrapper .column.third_size {width:96%; }
| |
| − |
| |
| − | }
| |
| − |
| |
| − | /* 850px */
| |
| − | /************************************************/
| |
| − | @media only screen and (max-width: 850px) {
| |
| − | .igem_2019_team_menu {width:40%;}
| |
| − | }
| |
| − |
| |
| − | /*500px */
| |
| − | /************************************************/
| |
| − | @media only screen and (max-width: 500px) {
| |
| − | .igem_2019_team_menu {min-width:100%;width:100%;}
| |
| − | }
| |
| − |
| |
| − |
| |
| − | /**************************************************************************************************************************************************************************************************/
| |
| − |
| |
| − |
| |
| − |
| |
| − |
| |
| − |
| |
| − | </style>
| |
| − |
| |
| − |
| |
| − | <!------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------->
| |
| − | <!--- THIS IS WHERE THE HTML BEGINS --->
| |
| − | <!------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------->
| |
| − |
| |
| − | <head>
| |
| − |
| |
| − | <!-- This tells the browser that your page is responsive -->
| |
| − | <meta name="viewport" content="width=device-width, initial-scale=1">
| |
| − |
| |
| − | <script type="text/javascript" src="https://2019.igem.org/wiki/index.php?title=Template:Fudan-TSI/jQuery&action=raw&ctype=text/javascript"></script>
| |
| − |
| |
| − |
| |
| − |
| |
| − | </head>
| |
| − |
| |
| − | <link rel="stylesheet" href="https://2019.igem.org/wiki/index.php?title=Template:Fudan-TSI/Fudan-font-awesome.css&action=raw&ctype=text/css" />
| |
| − |
| |
| − | <!------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------->
| |
| − | <!--- Menu --->
| |
| − | <!------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------->
| |
| − |
| |
| − |
| |
| − | <style>
| |
| − |
| |
| − | *{margin: 0;padding: 0;list-style: none;}
| |
| − | /* via: https://blog.csdn.net/weixin_41014370/article/details/79523637 */
| |
| − |
| |
| − | /** 清除内外边距 **/
| |
| − | body, h1, h3, h3, h4, h5, h6, hr, p, blockquote, /* structural elements 结构元素 */
| |
| − | dl, dt, dd, ul, ol, li, /* list elements 列表元素 */
| |
| − | pre, /* text formatting elements 文本格式元素 */
| |
| − | form, fieldset, legend, button, input, textarea, /* form elements 表单元素 */
| |
| − | th, td /* table elements 表格元素 */ {
| |
| − | margin: 0;
| |
| − | padding: 0;
| |
| − | }
| |
| − |
| |
| − | /** 设置默认字体 **/
| |
| − |
| |
| − | /* @@@@ h1, h3, h3, h4, h5, h6 { font-size: 100%; }*/
| |
| − | address, cite, dfn, em, var { font-style: normal; } /* 将斜体扶正 */
| |
| − | code, kbd, pre, samp { font-family: courier new, courier, monospace; } /* 统一等宽字体 */
| |
| − | /* @@@@ small { font-size: 12px; } /* 小于 12px 的中文很难阅读，让 small 正常化 */
| |
| − |
| |
| − | /** 重置列表元素 **/
| |
| − | ul, ol { list-style: none; }
| |
| − |
| |
| − | /** 重置文本格式元素 **/
| |
| − | a { text-decoration: none; }
| |
| − | a:hover { text-decoration: underline; }
| |
| − |
| |
| − |
| |
| − | /** 重置表单元素 **/
| |
| − | legend { color: #000; } /* for ie6 */
| |
| − | fieldset, img { border: 0; } /* img 搭车：让链接里的 img 无边框 */
| |
| − | button, input, select, textarea { font-size: 100%; } /* 使得表单元素在 ie 下能继承字体大小 */
| |
| − | /* 注：optgroup 无法扶正 */
| |
| − |
| |
| − | /** 重置表格元素 **/
| |
| − | table { border-collapse: collapse; border-spacing: 0; }
| |
| − |
| |
| − | </style>
| |
| − |
| |
| − |
| |
| − |
| |
| − |
| |
| − | <!------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- Content begins --------------------------------------------------------------------------------------------------------------------------------->
| |
| − | <!---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------->
| |
| − |
| |
| − |
| |
| − |
| |
| − |
| |
| − |
| |
| − |
| |
| − | <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
| |
| − | <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
| |
| − |
| |
| − |
| |
| − | <link rel="stylesheet" href="https://2019.igem.org/wiki/index.php?title=Template:Fudan-TSI/materialize.css&action=raw&ctype=text/css">
| |
| − |
| |
| − | <style>
| |
| − |
| |
| − | body{
| |
| − | margin:0;
| |
| − | padding:0;
| |
| − | background-color:#08273a;
| |
| − | }
| |
| − | a{
| |
| − | text-decoration:none;
| |
| − | }
| |
| − | #global_wrapper{
| |
| − | width:100%;
| |
| − | height:auto;
| |
| − | margin:0;
| |
| − | position:absolute;
| |
| − | }
| |
| − | #navUl{
| |
| − | width:100%;
| |
| − | height:110px;
| |
| − | padding:40px 0 0 0;
| |
| − | overflow:visible;
| |
| − | position:fixed;
| |
| − | list-style:none;
| |
| − | z-index:999;
| |
| − | background-color:#08273a;
| |
| − | margin:0;
| |
| − | top:0;
| |
| − | }
| |
| − | #mobileNav{
| |
| − | width:100%;
| |
| − | height:80px;
| |
| − | padding:20px 0 0 0;
| |
| − | top:0;
| |
| − | background-color:#001d2a;
| |
| − | position:fixed;
| |
| − | display:none;
| |
| − | text-align:center;
| |
| − | z-index:999;
| |
| − | }
| |
| − | #mobileNav img{
| |
| − | display:none;
| |
| − | margin:0;
| |
| − | padding:0;
| |
| − | }
| |
| − | #mobileLogo{
| |
| − | display:inline-block;
| |
| − | }
| |
| − | #mobileControl{
| |
| − | float:right;
| |
| − | display:inline-block;
| |
| − | margin-right:15px;
| |
| − | margin-top:3px;
| |
| − | }
| |
| − | #mobileCtrl{
| |
| − | height:25px;
| |
| − | }
| |
| − | #mobileTeamName{
| |
| − | display:inline-block;
| |
| − | }
| |
| − | #navImg{
| |
| − | display:inline-block;
| |
| − | float:left;
| |
| − | height:70px;
| |
| − | width:auto;
| |
| − | position:relative;
| |
| − | margin-left:4%;
| |
| − | margin-top:0;
| |
| − | }
| |
| − | .logo{
| |
| − | height:55px;
| |
| − | width:auto;
| |
| − | margin-top:1.3%;
| |
| − | }
| |
| − | .teamname{
| |
| − | height:28px;
| |
| − | }
| |
| − |
| |
| − | #navBar{
| |
| − | float:right;
| |
| − | position:relative;
| |
| − | width:auto;
| |
| − | display:inline-block;
| |
| − | margin-right:4%;
| |
| − | }
| |
| − | .navLi{
| |
| − | float:left;
| |
| − | display:inline-block;
| |
| − | margin-top:3%;
| |
| − | color:white;
| |
| − | font-size:20px;
| |
| − | position:relative;
| |
| − | margin-left:18px;
| |
| − | text-align:center;
| |
| − | font-family:"Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", Verdana, "sans-serif";
| |
| − | text-decoration:none;
| |
| − | }
| |
| − | .navA{
| |
| − | display:block;
| |
| − | text-align:center;
| |
| − | color:white;
| |
| − | text-decoration:none;
| |
| − | }
| |
| − | .navA2{
| |
| − | display:block;
| |
| − | overflow:visible;
| |
| − | color:white;
| |
| − | height:auto;
| |
| − | }
| |
| − | .ul2{
| |
| − | list-style:none;
| |
| − | position:absolute;
| |
| − | display:none;
| |
| − | overflow:hidden;
| |
| − | padding:10px 0 0 0 !important;
| |
| − | margin:0 !important;
| |
| − | font-size:17px;
| |
| − | left:50%;
| |
| − | transform:translateX(-50%);
| |
| − | border-bottom-left-radius: 10px;
| |
| − | border-bottom-right-radius: 10px;
| |
| − | background:linear-gradient(#08273a,rgba(0,138,201,1));
| |
| − | }
| |
| − | .li2{
| |
| − | padding:0;
| |
| − | margin:10px 20px;
| |
| − | text-align:center;
| |
| − | display:block;
| |
| − | }
| |
| − | .navA:link,.navA2:link{
| |
| − | text-decoration:none;
| |
| − | }
| |
| − | .navA:visited{
| |
| − | color:white;
| |
| − | }
| |
| − | .navA2:visited,.navA2:active{
| |
| − | color:white;
| |
| − | }
| |
| − | .navA:hover{
| |
| − | color:#7dded4;
| |
| − | }
| |
| − | .navA2:hover{
| |
| − | color:#7dded4;
| |
| − | }
| |
| − | .jqhover{
| |
| − | color:#7dded4;
| |
| − | }
| |
| − | .navA:hover{
| |
| − | text-decoration:none;
| |
| − | }
| |
| − | .navA:active{
| |
| − | text-decoration:none;
| |
| − | color:white;
| |
| − | }
| |
| − |
| |
| − | </style>
| |
| − |
| |
| − | <style type="text/css">
| |
| − | .tRNA_table{
| |
| − | border-collapse:collapse;
| |
| − | border:0px solid white;
| |
| − | border="1";
| |
| − | width="600";
| |
| − | frame="hsides";
| |
| − | rules = "groups"
| |
| − | text-align="center";!important
| |
| − | } /* 按需修改border宽度 */
| |
| − | .tRNA_table td{
| |
| − | border:2px solid white;
| |
| − | align="center";
| |
| − | } /* 按需修改border宽度 */
| |
| − | </style>
| |
| − |
| |
| − |
| |
| − | <style>
| |
| − |
| |
| − | #pageContent{
| |
| − | margin:100px 0 0 0;
| |
| − | text-align:center;
| |
| − | }
| |
| − |
| |
| − | .row{
| |
| − | clear:both!important;
| |
| − | }
| |
| − |
| |
| − | .title1{
| |
| − | font-size:2.3rem;
| |
| − | text-align:center;
| |
| − | color:white;
| |
| − | display:block;
| |
| − | margin-top:10%;
| |
| − | margin-bottom:7%;
| |
| − | line-height:110%;
| |
| − | }
| |
| − | .title2{
| |
| − | color:white;
| |
| − | text-align:left;
| |
| − | font-size:2rem;
| |
| − | line-height:130%;
| |
| − | display:block;
| |
| − | width:100%;
| |
| − | }
| |
| − | .title3{
| |
| − | font-size:1.4rem;
| |
| − | color:white;
| |
| − | text-align:left !important;
| |
| − | display:block;
| |
| − | width:100%;
| |
| − | line-height:110%;
| |
| − | padding-left:2%;
| |
| − | }
| |
| − | .para1{
| |
| − | color:white;
| |
| − | text-align:justify !important;
| |
| − | align-items:flex-start;
| |
| − | line-height:140%;
| |
| − | font-size:1.3rem;
| |
| − | margin-bottom:50px !important;
| |
| − | width:100%;
| |
| − | margin:auto 0;
| |
| − | }
| |
| − | .para1 a{
| |
| − | text-decoration:underline !important;
| |
| − | color:white;
| |
| − | }
| |
| − | .para1 a:visited, .para1 a:active{
| |
| − | color:white;
| |
| − | }
| |
| − | .para1 a:hover{
| |
| − | color:rgba(96,255,249,1.00)!important;
| |
| − | }
| |
| − | .content1{
| |
| − | margin:7% auto;
| |
| − | }
| |
| − | .pic2{
| |
| − | width:150%;
| |
| − | }
| |
| − | .reverseDiv{
| |
| − | position:relative !important;
| |
| − | float:right !important;
| |
| − | }
| |
| − |
| |
| − |
| |
| − | .paraUl{
| |
| − | list-style-type:decimal !important;
| |
| − | list-style-position:outside;
| |
| − | padding-left:auto;
| |
| − | font-size:1rem;
| |
| − | }
| |
| − | .paraUl li{
| |
| − | padding-right:4% ;
| |
| − | }
| |
| − |
| |
| − |
| |
| − | #containerWithLeftNav{
| |
| − | display:block;
| |
| − | margin-left:25%;
| |
| − | }
| |
| − | .legend{
| |
| − | color:white;
| |
| − | text-align:center;
| |
| − | }
| |
| − | .legend>div{
| |
| − | width:100%;
| |
| − | text-align:center!important;
| |
| − | font-size:1.1rem;
| |
| − | }
| |
| − | .legends{
| |
| − | margin:auto 15%;
| |
| − | }
| |
| − |
| |
| − |
| |
| − | </style>
| |
| − |
| |
| − | <style>
| |
| − |
| |
| − | @media only screen and (max-width:1200px){
| |
| − | #mobileBar{
| |
| − | margin-left:4%;
| |
| − | }
| |
| − | .navLi{
| |
| − | font-size:18px;
| |
| − | margin-top:3.5%;
| |
| − | }
| |
| − | }
| |
| − |
| |
| − |
| |
| − | @media only screen and (max-width:1100px){
| |
| − |
| |
| − | #navUl{
| |
| − | display:block;
| |
| − | float:right;
| |
| − | margin-top:0;
| |
| − | top:80px;
| |
| − | right:0;
| |
| − | background-color:rgba(0,0,0,0);
| |
| − | padding:0;
| |
| − | }
| |
| − |
| |
| − | #mobileNav{
| |
| − | display:block;
| |
| − | }
| |
| − |
| |
| − | #navImg{
| |
| − | display:none;
| |
| − | }
| |
| − |
| |
| − |
| |
| − | #navBar{
| |
| − | margin:0 1% 0 0;
| |
| − | padding-right:2%;
| |
| − | padding-left:1%;
| |
| − | position:relative;
| |
| − | display:none;
| |
| − | }
| |
| − |
| |
| − | #mobileNav img{
| |
| − | display:inline-block;
| |
| − | margin:5px 0;
| |
| − | padding:0;
| |
| − | }
| |
| − | #mobileControl{
| |
| − | margin-top:8px;
| |
| − | }
| |
| − |
| |
| − | .logo{
| |
| − | height:45px;
| |
| − | margin-top:7px;
| |
| − | }
| |
| − | .navLi{
| |
| − | display:block;
| |
| − | position:relative;
| |
| − | float:right;
| |
| − | clear:both;
| |
| − | white-space:nowrap;
| |
| − | text-align:right;
| |
| − | margin:0;
| |
| − | height:60px;
| |
| − | width:100%;
| |
| − | background-color:#00324a;
| |
| − | }
| |
| − | .navA{
| |
| − | display:block;
| |
| − | text-align:right;
| |
| − | position:relative;
| |
| − | float:right;
| |
| − | padding:20px 20px !important;
| |
| − | }
| |
| − | .n2{
| |
| − | display:none;
| |
| − | width:0;
| |
| − | position:relative;
| |
| − | float:left;
| |
| − | text-align:right;
| |
| − | }
| |
| − | .ul2{
| |
| − | background:none;
| |
| − | padding-top:0;
| |
| − | background-color:#00557b;
| |
| − | text-align:right;
| |
| − | display:block;
| |
| − | position:relative;
| |
| − | float:right;
| |
| − | right:100%;
| |
| − | transform:translateX(0%);
| |
| − | top:0;
| |
| − | transform:translateY(1%);
| |
| − | border-radius:0 0 0 10px;
| |
| − | }
| |
| − | .open{
| |
| − | display:block;
| |
| − | }
| |
| − |
| |
| − | .title2{
| |
| − | font-size:1.8rem;
| |
| − | line-height:140%;
| |
| − | }
| |
| − | .para1{
| |
| − | font-size:1.3rem;
| |
| − | }
| |
| − | .pic2{
| |
| − | width:120%;
| |
| − | }
| |
| − |
| |
| − | .highlightIcon{
| |
| − | margin:20% auto 10% auto;
| |
| − | }
| |
| − | .highlightTitle{
| |
| − | margin-bottom:15%;
| |
| − | }
| |
| − |
| |
| − |
| |
| − | }
| |
| − |
| |
| − |
| |
| − | @media only screen and (max-width:992px){
| |
| − |
| |
| − | #navUl{
| |
| − | display:block;
| |
| − | float:right;
| |
| − | margin:0;
| |
| − | top:80px;
| |
| − | right:0;
| |
| − | }
| |
| − |
| |
| − | #mobileNav{
| |
| − | display:block;
| |
| − | }
| |
| − |
| |
| − | #navImg{
| |
| − | display:none;
| |
| − | }
| |
| − |
| |
| − | #navTeamName{
| |
| − | display:none;
| |
| − | }
| |
| − |
| |
| − | #navBar{
| |
| − | margin:0 1% 0 0 ;
| |
| − | margin-right:2%;
| |
| − | padding-right:1%;
| |
| − | padding-left:1%;
| |
| − | position:relative;
| |
| − | display:none;
| |
| − | }
| |
| − | #mobileControl{
| |
| − | margin-top:10px;
| |
| − | }
| |
| − | #mobileNav img{
| |
| − | display:inline-block;
| |
| − | margin:5px 0;
| |
| − | padding:0;
| |
| − | }
| |
| − | .logo{
| |
| − | height:40px;
| |
| − | }
| |
| − | .navLi{
| |
| − | display:block;
| |
| − | position:relative;
| |
| − | float:right;
| |
| − | clear:both;
| |
| − | white-space:nowrap;
| |
| − | text-align:right;
| |
| − | height:60px;
| |
| − | width:100%;
| |
| − | }
| |
| − | .navA{
| |
| − | display:block;
| |
| − | text-align:right;
| |
| − | position:relative;
| |
| − | float:right;
| |
| − | font-size:15px;
| |
| − | }
| |
| − | .n2{
| |
| − | display:none;
| |
| − | width:0;
| |
| − | position:relative;
| |
| − | float:left;
| |
| − | }
| |
| − | .ul2{
| |
| − | font-size:13px;
| |
| − | }
| |
| − | .open{
| |
| − | display:block;
| |
| − | }
| |
| − |
| |
| − |
| |
| − |
| |
| − | #animation_container{
| |
| − | display:none;
| |
| − | }
| |
| − | #teamLogo{
| |
| − | display:block;
| |
| − | }
| |
| − |
| |
| − |
| |
| − | .title2{
| |
| − | font-size:1.5rem;
| |
| − | }
| |
| − | .para1{
| |
| − | font-size:1.2rem;
| |
| − | }
| |
| − | .pic2{
| |
| − | width:100%;
| |
| − | }
| |
| − |
| |
| − |
| |
| − | }
| |
| − |
| |
| − |
| |
| − | @media only screen and (max-width:768px){
| |
| − | .col-md-4{
| |
| − | clear:both;
| |
| − | }
| |
| − | .col-md-8{
| |
| − | clear:both;
| |
| − | }
| |
| − | .pic2{
| |
| − | margin-bottom:10%;
| |
| − | width:80%;
| |
| − | }
| |
| − | .title2{
| |
| − | font-size:1.2rem;
| |
| − | }
| |
| − | .para1{
| |
| − | font-size:1rem;
| |
| − | }
| |
| − | .pic2{
| |
| − | width:80%;
| |
| − | }
| |
| − | #sponser img {
| |
| − | width:60%;
| |
| − | }
| |
| − |
| |
| − | #containerWithLeftNav{
| |
| − | margin-left:auto;
| |
| − | }
| |
| − |
| |
| − | }
| |
| − |
| |
| − | </style>
| |
| − |
| |
| − |
| |
| − |
| |
| − |
| |
| − |
| |
| − |
| |
| − | <style>
| |
| − | #footContainer{
| |
| − | width:90%;
| |
| − | }
| |
| − | #FudanFooter{
| |
| − | margin:auto 0;
| |
| − | width:100%;
| |
| − | padding:3% 0;
| |
| − | }
| |
| − | #FudanFooter #usefulLinks {
| |
| − | color: #cacaca;
| |
| − | padding-left: 1rem;
| |
| − | }
| |
| − |
| |
| − | #FudanFooter #usefulLinks ul {
| |
| − | font-size: 13px;
| |
| − | line-height: 14px;
| |
| − | border-top: solid 2px;
| |
| − | color: inherit;
| |
| − | text-decoration: none;
| |
| − | padding-top: 5px;
| |
| − | margin:0;
| |
| − | }
| |
| − |
| |
| − | #FudanFooter #usefulLinks div {
| |
| − | color: #cacaca;
| |
| − | }
| |
| − |
| |
| − | #FudanFooter #usefulLinks div:hover {
| |
| − | color: white;
| |
| − | }
| |
| − |
| |
| − | #FudanFooter #usefulLinks a {
| |
| − | color: inherit;
| |
| − | }
| |
| − |
| |
| − | #FudanFooter #usefulLinks a:hover {
| |
| − | text-decoration: underline;
| |
| − | }
| |
| − |
| |
| − | #FudanFooter #usefulLinks div.active,
| |
| − | #FudanFooter #usefulLinks div.active a {
| |
| − | color: white;
| |
| − | }
| |
| − |
| |
| − | #FudanFooter #usefulLinks div.active ul {
| |
| − | border-top: solid white 2px;
| |
| − | }
| |
| − |
| |
| − | #FudanFooter #usefulLinks li {
| |
| − | padding: 3px 0 6px 3px;
| |
| − | list-style:none;
| |
| − | }
| |
| − |
| |
| − | #usefulLinks span {
| |
| − | font-size: 20px;
| |
| − | }
| |
| − |
| |
| − |
| |
| − | #FudanFooter div.footer-copyright {
| |
| − | font-size: 13px;
| |
| − | line-height: 15px;
| |
| − | }
| |
| − | .footerUl{
| |
| − | margin:2% 4%;
| |
| − | }
| |
| − | </style>
| |
| − |
| |
| − | <script>
| |
| − |
| |
| − | $(document).ready(function(){
| |
| − |
| |
| − |
| |
| − | var winWidth=$(window).width();
| |
| − |
| |
| − | if (winWidth>1100){
| |
| − | $(".navA").mouseenter(function(){
| |
| − | $(this).parent().find(".ul2").stop().fadeIn(400);
| |
| − | });
| |
| − | $(".navLi").mouseleave(function(){
| |
| − | $(this).find(".ul2").stop().fadeOut(400);
| |
| − | });
| |
| − |
| |
| − |
| |
| − | }
| |
| − | else{
| |
| − | $(".navA:not(.noSubmenu)").removeAttr("href");
| |
| − | $("#mobileNav").click(function(){
| |
| − | $("#navBar").toggle();
| |
| − | });
| |
| − | $(document).click(function(event){
| |
| − | var m = $("#mobileNav,#navBar");
| |
| − | if (!m.is(event.target)){
| |
| − | if (m.has(event.target).length===0){
| |
| − | $("#navBar").hide();
| |
| − | $(".open").parent().find(".navA").css("color","white");
| |
| − | $(".open").removeClass("open");
| |
| − | }
| |
| − |
| |
| − | }
| |
| − | });
| |
| − | $(".navLi").click(function(){
| |
| − | if ($(this).find(".n2").hasClass("open")){
| |
| − | $(".open").parent().find(".navA").css("color","white");
| |
| − | $(this).find(".n2").removeClass("open");
| |
| − | }
| |
| − | else{
| |
| − | $(".open").parent().find(".navA").css("color","white");
| |
| − | $(".open").removeClass("open");
| |
| − | $(this).find(".n2").addClass("open");
| |
| − | $(this).find(".navA").css("color","#7dded4");
| |
| − | }
| |
| − | });
| |
| − | }
| |
| − |
| |
| − |
| |
| − |
| |
| − |
| |
| − |
| |
| − |
| |
| − | });
| |
| − |
| |
| − |
| |
| − | </script>
| |
| − |
| |
| − |
| |
| − |
| |
| − | <div id="global_wrapper">
| |
| − | <div id="mobileNav">
| |
| − |
| |
| − | <div id="mobileLogo"><img src="https://static.igem.org/mediawiki/2019/d/d3/T--Fudan-TSI--HomepageLogo.gif" class="logo"></div>
| |
| − | <div id="mobileControl"><img src="https://static.igem.org/mediawiki/2019/thumb/a/ae/T--Fudan-TSI--mobileCtrl.gif/683px-T--Fudan-TSI--mobileCtrl.gif" id="mobileCtrl"></div>
| |
| − |
| |
| − | </div>
| |
| − |
| |
| − | <ul id="navUl">
| |
| − |
| |
| − | <li id="navImg">
| |
| − | <img src="https://static.igem.org/mediawiki/2019/d/d3/T--Fudan-TSI--HomepageLogo.gif" class="logo">
| |
| − |
| |
| − | </li>
| |
| − |
| |
| − |
| |
| − | <ul id="navBar">
| |
| − |
| |
| − | <li class="navLi"><a class="navA noSubmenu" href="https://2019.igem.org/Team:Fudan-TSI">Home</a></li>
| |
| − |
| |
| − | <li class="navLi">
| |
| − | <a class="navA" href="https://2019.igem.org/Team:Fudan-TSI/Description">Project</a>
| |
| − | <div class="n2">
| |
| − | <ul class="ul2">
| |
| − | <li class="li2"><a class="navA2" href="https://2019.igem.org/Team:Fudan-TSI/Description">Description</a></li>
| |
| − | <li class="li2"><a class="navA2" href="https://2019.igem.org/Team:Fudan-TSI/Design">Design</a></li>
| |
| − | <li class="li2"><a class="navA2" href="https://2019.igem.org/Team:Fudan-TSI/Design" style="white-space:nowrap">Applied Design</a></li>
| |
| − | <li class="li2"><a class="navA2" href="https://2019.igem.org/Team:Fudan-TSI/Experiment">Experiment</a></li>
| |
| − | </ul>
| |
| − | </div>
| |
| − | </li>
| |
| − |
| |
| − | <li class="navLi">
| |
| − | <a class="navA" href="https://2019.igem.org/Team:Fudan-TSI/Results">Results</a>
| |
| − | <div class="n2">
| |
| − | <ul class="ul2">
| |
| − | <li class="li2"><a class="navA2" href="https://2019.igem.org/Team:Fudan-TSI/Results/Reverse_Transcription">Reverse Transcription</a></li>
| |
| − | <li class="li2"><a class="navA2" href="https://2019.igem.org/Team:Fudan-TSI/Results/Recombination">Recombination</a></li>
| |
| − | <li class="li2"><a class="navA2" href="https://2019.igem.org/Team:Fudan-TSI/Demonstrate">Demonstration</a></li>
| |
| − | <li class="li2"><a class="navA2" href="https://2019.igem.org/Team:Fudan-TSI/Measurement">Measurement</a></li>
| |
| − | <li class="li2"><a class="navA2" href="https://2019.igem.org/Team:Fudan-TSI/Notebook">Notebook</a></li>
| |
| − | </ul>
| |
| − | </div>
| |
| − | </li>
| |
| − |
| |
| − | <li class="navLi">
| |
| − | <a class="navA" href="https://2019.igem.org/Team:Fudan-TSI/Model_Software">Model</a>
| |
| − | <div class="n2">
| |
| − | <ul class="ul2">
| |
| − | <li class="li2"><a class="navA2" href="https://2019.igem.org/Team:Fudan-TSI/Model">Modeling</a></li>
| |
| − | <li class="li2"><a class="navA2" href="https://2019.igem.org/Team:Fudan-TSI/Software">Software</a></li>
| |
| − | </ul>
| |
| − | </div>
| |
| − | </li>
| |
| − |
| |
| − | <li class="navLi">
| |
| − | <a class="navA" href="https://2019.igem.org/Team:Fudan-TSI/Parts">Parts</a>
| |
| − | <div class="n2">
| |
| − | <ul class="ul2">
| |
| − | <li class="li2"><a class="navA2" style="white-space:nowrap;" href="https://2019.igem.org/Team:Fudan-TSI/Basic_Part">Basic Parts</a></li>
| |
| − | <li class="li2"><a class="navA2" style="white-space:nowrap;" href="https://2019.igem.org/Team:Fudan-TSI/Composite_Part">Composite Parts</a></li>
| |
| − | <li class="li2"><a class="navA2" style="white-space:nowrap;" href="https://2019.igem.org/Team:Fudan-TSI/Improve">Improved Parts</a></li>
| |
| − | <li class="li2"><a class="navA2" style="white-space:nowrap;" href="https://2019.igem.org/Team:Fudan-TSI/Part_Collection">Part Collection</a></li>
| |
| − | </ul>
| |
| − | </div>
| |
| − | </li>
| |
| − |
| |
| − | <li class="navLi">
| |
| − | <a class="navA" href="https://2019.igem.org/Team:Fudan-TSI/Human_Practices">Human Practices</a>
| |
| − | <div class="n2">
| |
| − | <ul class="ul2">
| |
| − | <li class="li2"><a class="navA2" style="white-space:nowrap;" href="https://2019.igem.org/Team:Fudan-TSI/Public_Engagement">Education & <br />Public Engagement</a></li>
| |
| − | <li class="li2"><a class="navA2" style="white-space:nowrap;" href="https://2019.igem.org/Team:Fudan-TSI/Integrated_Human_Practice">Integrated <br />Human Practice</a></li>
| |
| − | <li class="li2"><a class="navA2" href="https://2019.igem.org/Team:Fudan-TSI/Collaborations">Collaboration</a></li>
| |
| − | <li class="li2"><a class="navA2" href="https://2019.igem.org/Team:Fudan-TSI/Safety">Safety</a></li>
| |
| − | </ul>
| |
| − | </div>
| |
| − | </li>
| |
| − |
| |
| − | <li class="navLi">
| |
| − | <a class="navA" href="https://2019.igem.org/Team:Fudan-TSI/Team">Team</a>
| |
| − | <div class="n2">
| |
| − | <ul class="ul2">
| |
| − | <li class="li2"><a class="navA2" style="white-space:nowrap;" href="https://2019.igem.org/Team:Fudan-TSI/Team">Team Members</a></li>
| |
| − | <li class="li2"><a class="navA2" href="https://2019.igem.org/Team:Fudan-TSI/Team/Attribution">Attribution</a></li>
| |
| − | </ul>
| |
| − | </div>
| |
| − | </li>
| |
| − |
| |
| − | <li class="navLi"><a class="navA noSubmenu" href="https://2019.igem.org/Team:Fudan-TSI/Awards">Awards</a></li>
| |
| − |
| |
| − | </ul>
| |
| − |
| |
| − |
| |
| − | </ul>
| |
| − |
| |
| − | <!----------------------------------------------------------------------------------------------------------------------------------------->
| |
| − | <!---- Cover ---->
| |
| − | <!----------------------------------------------------------------------------------------------------------------------------------------->
| |
| − |
| |
| − | <div id="pageCover">
| |
| − |
| |
| − | <script type="text/javascript" src="https://2019.igem.org/wiki/index.php?title=Template:Fudan-TSI/bkg&action=raw&ctype=text/javascript"></script>
| |
| − | <script>
| |
| − | $(document).ready(function($){
| |
| − | var $root = $('html, body');
| |
| − | $('a[href^="#"]').click(function() {
| |
| − | var href = $.attr(this, 'href');
| |
| − | $root.animate({
| |
| − | scrollTop: $(href).offset().top
| |
| − | }, 1000, function () {
| |
| − | window.location.hash = href;
| |
| − | });
| |
| − | return false;
| |
| − | });
| |
| − | })
| |
| − | </script>
| |
| − |
| |
| − | <svg id="demo" viewBox="0 0 1600 600" preserveAspectRatio="xMidYMid slice" style="z-index: -100;">
| |
| − | <defs>
| |
| − | <linearGradient id="grad1" x1="0" y1="0" x2="1" y2="0" color-interpolation="sRGB">
| |
| − | <stop id="stop1a" offset="0%" stop-color="#12a3b4"></stop>
| |
| − | <stop id="stop1b" offset="100%" stop-color="#ff509e"></stop>
| |
| − | </linearGradient>
| |
| − | <linearGradient id="grad2" x1="0" y1="0" x2="1" y2="0" color-interpolation="sRGB">
| |
| − | <stop id="stop2a" offset="0%" stop-color="#e3bc13"></stop>
| |
| − | <stop id="stop2b" offset="100%" stop-color="#00a78f"></stop>
| |
| − | </linearGradient>
| |
| − | </defs>
| |
| − | <rect id="rect1" x="0" y="0" width="1600" height="600" stroke="none" fill="url(#grad1)"></rect>
| |
| − | <rect id="rect2" x="0" y="0" width="1600" height="600" stroke="none" fill="url(#grad2)"></rect>
| |
| − | </svg>
| |
| − | <div id="demoCover"><img id="coverPic" src="https://static.igem.org/mediawiki/2019/6/6f/T--Fudan-TSI--coverSoftware.gif"></div>
| |
| − | </div>
| |
| − | <style>
| |
| − | #pageCover{
| |
| − | width:100%;
| |
| − | margin:0;
| |
| − | padding-top:80px;
| |
| − | }
| |
| − | #demoCover{
| |
| − | width:100vw;
| |
| − | height:60vh;
| |
| − | position:absolute;
| |
| − | background-color:rgba(8,39,58,0.5);
| |
| − | top:80px;
| |
| − | left:0;
| |
| − | text-align:center;
| |
| − | }
| |
| − | #coverPic{
| |
| − | width:550px;
| |
| − | margin:15vh auto;
| |
| − | }
| |
| − | #demo{
| |
| − | width:100vw;
| |
| − | height:60vh;
| |
| − | position:relative;
| |
| − | }
| |
| − | #demo svg {
| |
| − | width: 100%;
| |
| − | height: 100%;
| |
| − | position: fixed;
| |
| − | }
| |
| − | #demo svg g {
| |
| − | mix-blend-mode: lighten;
| |
| − | }
| |
| − | #demo svg polygon {
| |
| − | stroke: none;
| |
| − | fill: white;
| |
| − | }
| |
| − |
| |
| − | @media only screen and (max-width:1100px){
| |
| − | #pageCover{
| |
| − | padding-top:55px;
| |
| − | }
| |
| − | #demoCover{
| |
| − | top:55px;
| |
| − | }
| |
| − | #demo{
| |
| − | height:30vh;
| |
| − | }
| |
| − | #coverPic{
| |
| − | width:500px;
| |
| − | margin:7vh auto;
| |
| − | }
| |
| − | }
| |
| − | @media only screen and (max-width:992px){
| |
| − | #pageCover{
| |
| − | padding-top:55px;
| |
| − | }
| |
| − | #demoCover{
| |
| − | top:55px;
| |
| − | }
| |
| − | #coverPic{
| |
| − | width:500px;
| |
| − | margin:6vh auto;
| |
| − | }
| |
| − | }
| |
| − | @media only screen and (max-width:768px){
| |
| − | #pageCover{
| |
| − | padding-top:55px;
| |
| − | }
| |
| − | #demoCover{
| |
| − | top:55px;
| |
| − | }
| |
| − | #coverPic{
| |
| − | width:400px;
| |
| − | margin:8vh auto;
| |
| − | }
| |
| − | }
| |
| − | @media only screen and (max-width:500px){
| |
| − | #coverPic{
| |
| − | width:200px;
| |
| − | margin:8vh auto;
| |
| − | }
| |
| − | }
| |
| − | </style>
| |
| − | <script>
| |
| − | //////////////////////////////
| |
| − | // Demo Functions
| |
| − | //////////////////////////////
| |
| − | function bkgFunction(showStats) {
| |
| − | // stats
| |
| − | if (showStats) {
| |
| − | var stats = new Stats();
| |
| − | stats.domElement.style.position = 'absolute';
| |
| − | stats.domElement.style.left = '0';
| |
| − | stats.domElement.style.top = '0';
| |
| − | document.body.appendChild(stats.domElement);
| |
| − | requestAnimationFrame(function updateStats(){
| |
| − | stats.update();
| |
| − | requestAnimationFrame(updateStats);
| |
| − | });
| |
| − | }
| |
| − | // init
| |
| − | var svg = document.getElementById('demo');
| |
| − | tesselation.setup(svg);
| |
| − | gradients.setup();
| |
| − | var lastTransitionAt, transitionDelay = 10000, transitionDuration = 3000;
| |
| − | function playNextTransition() {
| |
| − | tesselation.next(transitionDuration);
| |
| − | gradients.next(transitionDuration);
| |
| − | };
| |
| − | function tick(time) {
| |
| − | if (!lastTransitionAt || time - lastTransitionAt > transitionDelay) {
| |
| − | lastTransitionAt = time;
| |
| − | playNextTransition();
| |
| − | }
| |
| − | window.requestAnimationFrame(tick);
| |
| − | }
| |
| − | window.requestAnimationFrame(tick);
| |
| − | }
| |
| − | //////////////////////////////
| |
| − | // Delaunay Triangulation
| |
| − | //////////////////////////////
| |
| − | var calcDelaunayTriangulation = (function() {
| |
| − | var EPSILON = 1.0 / 1048576.0;
| |
| − | function getSuperT(vertices) {
| |
| − | var xMin = Number.POSITIVE_INFINITY, yMin = Number.POSITIVE_INFINITY,
| |
| − | xMax = Number.NEGATIVE_INFINITY, yMax = Number.NEGATIVE_INFINITY,
| |
| − | i, xDiff, yDiff, maxDiff, xCenter, yCenter;
| |
| − | for(i = vertices.length; i--; ) {
| |
| − | if(vertices[i][0] < xMin) xMin = vertices[i][0];
| |
| − | if(vertices[i][0] > xMax) xMax = vertices[i][0];
| |
| − | if(vertices[i][1] < yMin) yMin = vertices[i][1];
| |
| − | if(vertices[i][1] > yMax) yMax = vertices[i][1];
| |
| − | }
| |
| − | xDiff = xMax - xMin;
| |
| − | yDiff = yMax - yMin;
| |
| − | maxDiff = Math.max(xDiff, yDiff);
| |
| − | xCenter = xMin + xDiff * 0.5;
| |
| − | yCenter = yMin + yDiff * 0.5;
| |
| − | return [
| |
| − | [xCenter - 20 * maxDiff, yCenter - maxDiff],
| |
| − | [xCenter, yCenter + 20 * maxDiff],
| |
| − | [xCenter + 20 * maxDiff, yCenter - maxDiff]
| |
| − | ];
| |
| − | }
| |
| − | function circumcircle(vertices, i, j, k) {
| |
| − | var xI = vertices[i][0], yI = vertices[i][1],
| |
| − | xJ = vertices[j][0], yJ = vertices[j][1],
| |
| − | xK = vertices[k][0], yK = vertices[k][1],
| |
| − | yDiffIJ = Math.abs(yI - yJ), yDiffJK = Math.abs(yJ - yK),
| |
| − | xCenter, yCenter, m1, m2, xMidIJ, xMidJK, yMidIJ, yMidJK, xDiff, yDiff;
| |
| − | // bail condition
| |
| − | if(yDiffIJ < EPSILON){
| |
| − | if (yDiffJK < EPSILON){
| |
| − | throw new Error("Can't get circumcircle since all 3 points are y-aligned");
| |
| − | }
| |
| − | }
| |
| − |
| |
| − |
| |
| − | // calc circumcircle center x/y, radius
| |
| − | m1 = -((xJ - xI) / (yJ - yI));
| |
| − | m2 = -((xK - xJ) / (yK - yJ));
| |
| − | xMidIJ = (xI + xJ) / 2.0;
| |
| − | xMidJK = (xJ + xK) / 2.0;
| |
| − | yMidIJ = (yI + yJ) / 2.0;
| |
| − | yMidJK = (yJ + yK) / 2.0;
| |
| − | xCenter = (yDiffIJ < EPSILON) ? xMidIJ :
| |
| − | (yDiffJK < EPSILON) ? xMidJK :
| |
| − | (m1 * xMidIJ - m2 * xMidJK + yMidJK - yMidIJ) / (m1 - m2);
| |
| − | yCenter = (yDiffIJ > yDiffJK) ?
| |
| − | m1 * (xCenter - xMidIJ) + yMidIJ :
| |
| − | m2 * (xCenter - xMidJK) + yMidJK;
| |
| − | xDiff = xJ - xCenter;
| |
| − | yDiff = yJ - yCenter;
| |
| − | // return
| |
| − | return {i: i, j: j, k: k, x: xCenter, y: yCenter, r: xDiff * xDiff + yDiff * yDiff};
| |
| − | }
| |
| − | function dedupeEdges(edges) {
| |
| − | var i, j, a, b, m, n;
| |
| − | for(j = edges.length; j; ) {
| |
| − | b = edges[--j]; a = edges[--j];
| |
| − | for(i = j; i; ) {
| |
| − | n = edges[--i]; m = edges[--i];
| |
| − | if(a === m){
| |
| − | if (b===n){
| |
| − | edges.splice(j, 2); edges.splice(i, 2);
| |
| − | break;
| |
| − | }
| |
| − | }
| |
| − | if(a === n){
| |
| − | if (b===m){
| |
| − | edges.splice(j, 2); edges.splice(i, 2);
| |
| − | break;
| |
| − | }
| |
| − | }
| |
| − | }
| |
| − | }
| |
| − | }
| |
| − | return function(vertices) {
| |
| − | var n = vertices.length,
| |
| − | i, j, indices, st, candidates, locked, edges, dx, dy, a, b, c;
| |
| − | // bail if too few / too many verts
| |
| − | if(n < 3 || n > 2000)
| |
| − | return [];
| |
| − | // copy verts and sort indices by x-position
| |
| − | vertices = vertices.slice(0);
| |
| − | indices = new Array(n);
| |
| − | for(i = n; i--; )
| |
| − | indices[i] = i;
| |
| − | indices.sort(function(i, j) {
| |
| − | return vertices[j][0] - vertices[i][0];
| |
| − | });
| |
| − | // supertriangle
| |
| − | st = getSuperT(vertices);
| |
| − | vertices.push(st[0], st[1], st[2]);
| |
| − | // init candidates/locked tris list
| |
| − | candidates = [circumcircle(vertices, n + 0, n + 1, n + 2)];
| |
| − | locked = [];
| |
| − | edges = [];
| |
| − | // scan left to right
| |
| − | for(i = indices.length; i--; edges.length = 0) {
| |
| − | c = indices[i];
| |
| − | // check candidates tris against point
| |
| − | for(j = candidates.length; j--; ) {
| |
| − | // lock tri if point to right of circumcirc
| |
| − | dx = vertices[c][0] - candidates[j].x;
| |
| − | if (dx > 0.0){
| |
| − | if(dx * dx > candidates[j].r){
| |
| − | locked.push(candidates[j]);
| |
| − | candidates.splice(j, 1);
| |
| − | continue;
| |
| − | }
| |
| − | }
| |
| − |
| |
| − |
| |
| − | // point outside circumcirc = leave candidates
| |
| − | dy = vertices[c][1] - candidates[j].y;
| |
| − | if(dx * dx + dy * dy - candidates[j].r > EPSILON)
| |
| − | continue;
| |
| − | // point inside circumcirc = break apart, save edges
| |
| − | edges.push(
| |
| − | candidates[j].i, candidates[j].j,
| |
| − | candidates[j].j, candidates[j].k,
| |
| − | candidates[j].k, candidates[j].i
| |
| − | );
| |
| − | candidates.splice(j, 1);
| |
| − | }
| |
| − | // new candidates from broken edges
| |
| − | dedupeEdges(edges);
| |
| − | for(j = edges.length; j; ) {
| |
| − | b = edges[--j];
| |
| − | a = edges[--j];
| |
| − | candidates.push(circumcircle(vertices, a, b, c));
| |
| − | }
| |
| − | }
| |
| − | // close candidates tris, remove tris touching supertri verts
| |
| − | for(i = candidates.length; i--; )
| |
| − | locked.push(candidates[i]);
| |
| − | candidates.length = 0;
| |
| − | for(i = locked.length; i--; )
| |
| − | if(locked[i].i < n){
| |
| − | if(locked[i].j < n){
| |
| − | if(locked[i].k < n){
| |
| − | candidates.push(locked[i].i, locked[i].j, locked[i].k);
| |
| − | }
| |
| − | }
| |
| − | }
| |
| − |
| |
| − |
| |
| − | // done
| |
| − | return candidates;
| |
| − | };
| |
| − | })();
| |
| − | var tesselation = (function() {
| |
| − | var svg, svgW, svgH, prevGroup;
| |
| − | function createRandomTesselation() {
| |
| − | var wW = window.innerWidth;
| |
| − | var wH = window.innerHeight;
| |
| − | var gridSpacing = 250, scatterAmount = 0.75;
| |
| − | var gridSize, i, x, y;
| |
| − | if (wW / wH > svgW / svgH) { // window wider than svg = use width for gridSize
| |
| − | gridSize = gridSpacing * svgW / wW;
| |
| − | } else { // window taller than svg = use height for gridSize
| |
| − | gridSize = gridSpacing * svgH / wH;
| |
| − | }
| |
| − | var vertices = [];
| |
| − | var xOffset = (svgW % gridSize) / 2, yOffset = (svgH % gridSize) / 2;
| |
| − | for (x = Math.floor(svgW/gridSize) + 1; x >= -1; x--) {
| |
| − | for (y = Math.floor(svgH/gridSize) + 1; y >= -1; y--) {
| |
| − | vertices.push(
| |
| − | [
| |
| − | xOffset + gridSize * (x + scatterAmount * (Math.random() - 0.5)),
| |
| − | yOffset + gridSize * (y + scatterAmount * (Math.random() - 0.5))
| |
| − | ]
| |
| − | );
| |
| − | }
| |
| − | }
| |
| − | var triangles = calcDelaunayTriangulation(vertices);
| |
| − | var group = document.createElementNS('http://www.w3.org/2000/svg','g');
| |
| − | var polygon;
| |
| − | for(i = triangles.length; i; ) {
| |
| − | polygon = document.createElementNS('http://www.w3.org/2000/svg','polygon');
| |
| − | polygon.setAttribute('points',
| |
| − | vertices[triangles[--i]][0] + ',' + vertices[triangles[i]][1] + ' ' +
| |
| − | vertices[triangles[--i]][0] + ',' + vertices[triangles[i]][1] + ' ' +
| |
| − | vertices[triangles[--i]][0] + ',' + vertices[triangles[i]][1]
| |
| − | );
| |
| − | group.appendChild(polygon);
| |
| − | }
| |
| − | return group;
| |
| − | }
| |
| − | return {
| |
| − | setup: function(svgElement) {
| |
| − | svg = svgElement;
| |
| − | var vb = svg.getAttribute('viewBox').split(/\D/g);
| |
| − | svgW = vb[2];
| |
| − | svgH = vb[3];
| |
| − | },
| |
| − | next: function(t) {
| |
| − | var toRemove, i, n;
| |
| − | t /= 1000;
| |
| − | if(prevGroup){
| |
| − | if(prevGroup.children){
| |
| − | if(prevGroup.children.length){
| |
| − | toRemove = prevGroup;
| |
| − | n = toRemove.children.length;
| |
| − | for (i = n; i--; ) {
| |
| − | TweenMax.to(toRemove.children[i], t*0.4, {opacity: 0, delay: t*(0.3*i/n)});
| |
| − | }
| |
| − | TweenMax.delayedCall(t * (0.7 + 0.05), function(group) { svg.removeChild(group); }, [toRemove], this);
| |
| − | }
| |
| − | }
| |
| − | }
| |
| − |
| |
| − | var g = createRandomTesselation();
| |
| − | n = g.children.length;
| |
| − | for (i = n; i--; ) {
| |
| − | TweenMax.fromTo(g.children[i], t*0.4, {opacity: 0}, {opacity: 0.3 + 0.25 * Math.random(), delay: t*(0.3*i/n + 0.3), ease: Back.easeOut});
| |
| − | }
| |
| − | svg.appendChild(g);
| |
| − | prevGroup = g;
| |
| − | }
| |
| − | }
| |
| − | })();
| |
| − | //////////////////////////////
| |
| − | // Gradients
| |
| − | //////////////////////////////
| |
| − | var gradients = (function() {
| |
| − | var grad1, grad2, showingGrad1;
| |
| − | // using colors from IBM Design Colors this time
| |
| − | var colors = [ // 14 colors - use 3-5 span
| |
| − | '#3c6df0', // ultramarine50
| |
| − | '#12a3b4', // aqua40
| |
| − | '#00a78f', // teal40
| |
| − | '#00aa5e', // green40
| |
| − | '#81b532', // lime30
| |
| − | '#e3bc13', // yellow20
| |
| − | '#ffb000', // gold20
| |
| − | '#fe8500', // orange30
| |
| − | '#fe6100', // peach40
| |
| − | '#e62325', // red50
| |
| − | '#dc267f', // magenta50
| |
| − | '#c22dd5', // purple50
| |
| − | '#9753e1', // violet50
| |
| − | '#5a3ec8' // indigo60
| |
| − | ];
| |
| − | function assignRandomColors(gradObj) {
| |
| − | var rA = Math.floor(colors.length * Math.random());
| |
| − | var rB = Math.floor(Math.random() * 3) + 3; // [3 - 5]
| |
| − | rB = (rA + (rB * (Math.random() < 0.5 ? -1 : 1)) + colors.length) % colors.length;
| |
| − | gradObj.stopA.setAttribute('stop-color', colors[rA]);
| |
| − | gradObj.stopB.setAttribute('stop-color', colors[rB]);
| |
| − | }
| |
| − | return {
| |
| − | setup: function() {
| |
| − | showingGrad1 = false;
| |
| − | grad1 = {
| |
| − | stopA: document.getElementById('stop1a'),
| |
| − | stopB: document.getElementById('stop1b'),
| |
| − | rect: document.getElementById('rect1')
| |
| − | };
| |
| − | grad2 = {
| |
| − | stopA: document.getElementById('stop2a'),
| |
| − | stopB: document.getElementById('stop2b'),
| |
| − | rect: document.getElementById('rect2')
| |
| − | };
| |
| − | grad1.rect.style.opacity = 0;
| |
| − | grad2.rect.style.opacity = 0;
| |
| − | },
| |
| − | next: function(t) {
| |
| − | t /= 1000;
| |
| − | var show, hide;
| |
| − | if (showingGrad1) {
| |
| − | hide = grad1;
| |
| − | show = grad2;
| |
| − | } else {
| |
| − | hide = grad2;
| |
| − | show = grad1;
| |
| − | }
| |
| − | showingGrad1 = !showingGrad1;
| |
| − | TweenMax.to(hide.rect, 0.55*t, {opacity: 0, delay: 0.2*t, ease: Sine.easeOut});
| |
| − | assignRandomColors(show);
| |
| − | TweenMax.to(show.rect, 0.65*t, {opacity: 1, ease: Sine.easeIn});
| |
| − | }
| |
| − | };
| |
| − | })();
| |
| − | //////////////////////////////
| |
| − | // Start
| |
| − | //////////////////////////////
| |
| − | bkgFunction();
| |
| − | </script>
| |
| − |
| |
| − |
| |
| − |
| |
| − | <!----------------------------------------------------------------------------------------------------------------------------------------->
| |
| − | <!---- Left Navigator ---->
| |
| − | <!----------------------------------------------------------------------------------------------------------------------------------------->
| |
| − | <ul class="leftNav" style="margin:0;padding:0;">
| |
| − | <li class="leftNavLi"><a class="leftNavA" href="#mainTitle0">Overview</a></li>
| |
| − | <li class="leftNavLi"><a class="leftNavA" href="#mainTitle1">Motivation</a></li>
| |
| − | <li class="leftNavLi"><a class="leftNavA" href="#mainTitle2">Theoretical basis</a></li>
| |
| − | <li class="leftNavLi"><a class="leftNavA" href="#mainTitle3">User guidelines</a></li>
| |
| − | <li class="leftNavLi"><a class="leftNavA" href="#mainTitle4">References</a></li>
| |
| − | </ul>
| |
| − |
| |
| − | <style>
| |
| − | .leftNav{
| |
| − | position: absolute;
| |
| − | top:20vw;
| |
| − | left:4%;
| |
| − | list-style: none;
| |
| − | z-index: 3;
| |
| − | text-align:left !important;
| |
| − | width:15vw;
| |
| − | }
| |
| − | .leftNav .leftNavA2{
| |
| − | position: relative;
| |
| − | }
| |
| − | .leftNav .leftNavA2:before {
| |
| − | content: "";
| |
| − | display: inline-block;
| |
| − | width: 5px;
| |
| − | height: 5px;
| |
| − | background-color: rgba(55,55,62,0.7);
| |
| − | border-radius: 50%;
| |
| − | position: absolute;
| |
| − | left: 0.3vw;
| |
| − | top:50%;
| |
| − | margin: 0;
| |
| − | padding: 0;
| |
| − | transform: translateY(-50%);
| |
| − | }
| |
| − | .leftNavUl2{
| |
| − | list-style: none;
| |
| − | }
| |
| − | .leftNavA{
| |
| − | display: block;
| |
| − | font-size: 1.1vw;
| |
| − | font-family: Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif";
| |
| − | padding: 0.2vw 0.8vw;
| |
| − | color:#4CA198;
| |
| − | text-decoration: none;
| |
| − | }
| |
| − | .leftNavLi2{
| |
| − | width: 13vw;
| |
| − | margin:0.3vw 0;
| |
| − | line-height: 17px;
| |
| − | }
| |
| − | .leftNavA:visited{
| |
| − | text-decoration: none;
| |
| − | color:#4CA198;
| |
| − | }
| |
| − | .leftNavA:focus{
| |
| − | text-decoration: none;
| |
| − | color:#4CA198;
| |
| − | }
| |
| − | .leftNavA:hover,.leftNavA:active{
| |
| − | text-decoration: none;
| |
| − | color: #B0EBE4;
| |
| − | }
| |
| − |
| |
| − | .leftNavA2{
| |
| − | display: block;
| |
| − | font-size: 1vw;
| |
| − | font-family:Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, "sans-serif";
| |
| − | padding: 0.1vw 1.5vw;
| |
| − | color:rgba(168,168,168,1);
| |
| − | text-decoration: none;
| |
| − | }
| |
| − | .leftNavA2:visited{
| |
| − | text-decoration: none;
| |
| − | color:rgba(168,168,168,1);
| |
| − | }
| |
| − | .leftNavA2:focus{
| |
| − | text-decoration: none;
| |
| − | color:rgba(168,168,168,1);
| |
| − | }
| |
| − | .leftNavA2:hover,.leftNavA2:active{
| |
| − | text-decoration: none;
| |
| − | color: white;
| |
| − | }
| |
| − | .menu-active,.menu-active:focus{
| |
| − | text-decoration: none;
| |
| − | color: white;
| |
| − | }
| |
| − | .menu-active2,.menu-active2:focus{
| |
| − | text-decoration:none;
| |
| − | color:#B0EBE4;
| |
| − | }
| |
| − |
| |
| − |
| |
| − | @media only screen and (max-width:768px){
| |
| − | .leftNav{
| |
| − | display:none;
| |
| − | }
| |
| − | }
| |
| − | </style>
| |
| − |
| |
| − |
| |
| − |
| |
| − | <div id="pageContent">
| |
| − | <!----------------------------------------------------------------------------------------------------------------------------------------->
| |
| − | <!---- Content ---->
| |
| − | <!----------------------------------------------------------------------------------------------------------------------------------------->
| |
| − |
| |
| − | <div class="container" id="containerWithLeftNav">
| |
| − | <div class="row">
| |
| − |
| |
| − | <div class="row title2" id="mainTitle0">
| |
| − | <div class="col">Overview</div>
| |
| − | </div>
| |
| − |
| |
| − | <div class="row para1">
| |
| − | <div class="row">
| |
| − | <div class="col">
| |
| − | Our software simplifies the primer design process for target-specific mutagenesis via reverse transcriptase (RT). We called it tRNA primer designer because 5' end of the tRNA was used for the RT initiation, and the 3' end must match the mRNA encoding the target. The software consists of 4 parts: the reverse transcriptase selection, target sequence input, designed-tRNA visualization and primer output. Although, we only test MMLV RT experimentally, the software is highly flexible as it can adjust its designing method based on the properties of 3 well-studied RT, MMLV, HIV1 or RSV, which makes it possible for users to design their tRNA primers even for eukaryotic experiments. In addition, we calculate the acceptor stem annealing temperature, which could be used as an indicator for likelihood to success.
| |
| − | </div>
| |
| − | </div>
| |
| − | </div>
| |
| − |
| |
| − | <div class="row title2" id="mainTitle1">
| |
| − | <div class="col">Motivation</div>
| |
| − | </div>
| |
| − |
| |
| − | <div class="row para1">
| |
| − | <div class="row">
| |
| − | <div class="col">
| |
| − | Previous studies have shown that a tRNA primer is required for the initiation of reverse transcription (<a href="#Ref1">Dahlberg et al.</a>). In our system, we express the tRNA primer in E.coli by cloning it onto the plasmid that is used for generating the tools for mutation, i.e. P<sub>mutant</sub>. However, designing the primer sequence according to different target sequences is time-consuming and needs many adjustments to find the perfect match. This motivates us to build a software for tRNA primer designing.
| |
| − | </div>
| |
| − | </div>
| |
| − | </div>
| |
| − |
| |
| − | <div class="row title2" id="mainTitle2">
| |
| − | <div class="col"><i>Theoretical basis</i></div>
| |
| − | </div>
| |
| − |
| |
| − | <div class="row para1">
| |
| − | <div class="row">
| |
| − | <div class="col">
| |
| − | Previous studies have reported that the interactions between tRNA primer and mRNA template as well as the reverse transcriptase are crucial in directing subsequent cDNA synthesis (<a href="#Ref1">James E. Dahlberg et al.</a>). Specifically, according to the model for reverse transcription proposed by <a href="#Ref2">Kulpa et al.</a>, reverse transcription includes 5 steps (<a href="#Fig1">Fig. 1</a>), in which the annealing of tRNA primer to the primer binding site (PBS) region on mRNA template is crucial for the synthesis of minus strand strong stop DNA (–ssDNA) and the following cDNA synthesis process.
| |
| − | </div>
| |
| − | </div>
| |
| − | </div>
| |
| − |
| |
| − | <div class="row legend">
| |
| − | <div class="row">
| |
| − | <a name="Fig1"><img src="https://static.igem.org/mediawiki/2019/e/e9/T--Fudan-TSI--SFig1.gif" style="width:50%; margin:0 auto;"></a>
| |
| − | </div>
| |
| − | <div class="row legends">
| |
| − | <b>Figure 1. Model for the whole process of reverse transcription.</b><br /><br />
| |
| − | </div>
| |
| − | </div>
| |
| − |
| |
| − | <div class="row para1">
| |
| − | <div class="row">
| |
| − | <div class="col">
| |
| − | Many researchers have studied the reverse transcription process in viruses, from which we find two critical properties in the annealing process of tRNA primer and PBS that should be taken into consideration when building the tRNA primer designer. <br /><br />
| |
| − | The first property is that the 3'-terminal of the tRNA primer should be complementary to the PBS on mRNA template (<a href="#Ref3">Kosloff et al.</a>). The second one is that different viruses prefer specific type of tRNA primer for reverse transcription (<a href="#Ref2">Kulpa et al.</a>, <a href="#Ref3">Kosloff et al.</a>). What should also be noted is that for different viruses, the lengths of PBS as well as the types of tRNA primer are different. The PBS lengths and the preferred tRNA types of 3 most well-studied retroviruses are listed in Table I.<br /><br />
| |
| − |
| |
| − | <div>
| |
| − | <table class="tRNA_table" style="color:white;">
| |
| − | <caption style="color:white;text-align:center;">Table I. PBS length and preferred tRNA types of well-studied retroviruses</caption>
| |
| − | <colgroup span="1" width="400"></colgroup>
| |
| − | <colgroup span="3" width="300"></colgroup>
| |
| − | <thead>
| |
| − | <tr>
| |
| − | <td style="text-align:left;">Name of retrovirus</td>
| |
| − | <td style="text-align:center;">Length of PBS</td>
| |
| − | <td style="text-align:center;">Preferred tRNA type</td>
| |
| − | <td style="text-align:center;">Reference</td>
| |
| − | </tr>
| |
| − | </thead>
| |
| − | <tbody>
| |
| − | <tr>
| |
| − | <td style="text-align:left;">Moloney murine leukemia virus (MMLV)</td>
| |
| − | <td style="text-align:center;">18</td>
| |
| − | <td style="text-align:center;">tRNA<sup>Pro</sup></td>
| |
| − | <td style="text-align:center;"><a href="#Ref3">Kosloff et al.</a></td>
| |
| − | </tr>
| |
| − | <tr>
| |
| − | <td style="text-align:left;">Human immunodeficiency virus type 1(HIV-1)</td>
| |
| − | <td style="text-align:center;">18</td>
| |
| − | <td style="text-align:center;">tRNA<sup>Lys</sup></td>
| |
| − | <td style="text-align:center;""><a href="#Ref3">Kosloff et al.</a></td>
| |
| − | </tr>
| |
| − | <tr>
| |
| − | <td style="text-align:left;">Rous sarcoma virus (RSV)</td>
| |
| − | <td style="text-align:center;">17</td>
| |
| − | <td style="text-align:center;">tRNA<sup>Trp</sup></td>
| |
| − | <td style="text-align:center;"><a href="#Ref2">Kulpa et al.</a></td>
| |
| − | </tr>
| |
| − | </tbody>
| |
| − | </table>
| |
| − |
| |
| − | </div>
| |
| − |
| |
| − | These discoveries serve as the theoretical basis for our tRNA primer designer. So basically, the function of our tRNA primer designer is to change the tRNA template in order to suit the basic properties of the reverse transcriptase (MMLV RT/ HIV-1 RT/ RSV RT) selected by the user as well as to replace several nucleotides (17 or 18) on 3'-terminal of the tRNA templates to match with nucleotides at the 5'-terminal of the GOI which users input. Also, to make sure that the RNA sequence is a tRNA sequence, the secondary structure should be revealed. We achieve this goal by using the similar tRNA secondary structure prediction scheme as the one implemented in the opensource software tRNAfinder (<a href="#Ref4">Kurokawa et al.</a>).<br /><br />
| |
| − | Studies have shown that the primary factor guiding the selection of tRNA primer for MMLV RT is the PBS sequence instead of the inherent nature of reverse transcriptase (<a href="#Ref5">A. H. Lund et al.</a>, <a href="#Ref6">S. P. Goff et al.</a>). So, by making mutations on both the PBS and tRNA sequence, the researchers have found that reverse transcription could still successfully take place while the virus’ titer is not greatly affected. Also, after several cycles of replication, the mutated sequence is not changed back to its original version (<a href="#Ref7">Pedersen et al., 1997</a>). Even though it is found that the primer is not stringent for MMLV, studies have revealed that the tRNA-like structure is necessary. A study that the inclusion of one single non-Watson-Crick base pair between PBS and tRNA primer would improve the replication efficiency (<a href="#Ref8">F. S. Pedersen et al., 1993</a>), but we didn’t adopt this construct as the one base pair mismatch would often be changed to the full-complementary version after the first cycle of replication (<a href="#Ref7">Pedersen et al., 1997</a>), making this addition unnecessary.
| |
| − |
| |
| − | </div>
| |
| − | </div>
| |
| − | </div>
| |
| − |
| |
| − | <div class="row title2" id="mainTitle3">
| |
| − | <div class="col"><i>User guidelines</i></div>
| |
| − | </div>
| |
| − |
| |
| − | <div class="row para1">
| |
| − | <div class="row">
| |
| − | <div class="col">
| |
| − | Our tRNA primer designer is a web tool for potential users of our mutagenesis system to design their own tRNA primers according to their experimental setups. Here we provide a step-by-step guide to using this software.<br /><br />
| |
| − | Step 1. Select the type of reverse transcriptase (RT) that you want to use based on your experimental design, as shown in the figure below. Note that this software only allows you to choose from MMLV RT/ HIV-1 RT/ RSV RT.
| |
| − | </div>
| |
| − | </div>
| |
| − | </div>
| |
| − |
| |
| − | <div class="row legend">
| |
| − | <div class="row">
| |
| − | <img src="https://static.igem.org/mediawiki/2019/archive/5/53/20191020091814%21T--Fudan-TSI--SFig2.gif" style="width:80%; margin:auto;">
| |
| − | </div>
| |
| − | </div>
| |
| − |
| |
| − | <div class="row para1">
| |
| − | <div class="row">
| |
| − | <div class="col">
| |
| − | Step 2. Input a DNA sequence that you want to mutate, as shown in the figure below (upper panel). You can find a demo for it if you click on the icon on the right side of the web page, as shown in the figure below (lower panel). The last 17/18 nucleotides (nt) of the sequence are selected to be PBS, depending on the type of RT that you have chosen in <b><i>Step 1</i></b>. The length of PBS is 18nt if MMLV RT/ HIV-1 RT is selected, and is 17nt if RSV RT is selected. Note that this sequence should be longer than 17/18 nucleotides based on your selected RT. Besides, it shouldn't contain any characters other than A/T/C/G.
| |
| − | </div>
| |
| − | </div>
| |
| − | </div>
| |
| − |
| |
| − | <div class="row legend">
| |
| − | <div class="row">
| |
| − | <img src="https://static.igem.org/mediawiki/2019/archive/2/29/20191020091155%21T--Fudan-TSI--SFig3.gif" style="width:80%; margin:auto;">
| |
| − | </div>
| |
| − | </div>
| |
| − |
| |
| − | <div class="row para1">
| |
| − | <div class="row">
| |
| − | <div class="col">
| |
| − | Step3. Click on the "submit" button and see the result, as shown in the figure below (upper panel). The result is composed of two parts. The first part shows you the secondary structure of the template tRNA that you will be using as well as the designed tRNA primer. The second part will give you the DNA sequence encoding the tRNA primer that satisfies your need. The acceptor stem annealing temperature which is used as an indicator for likelihood to success is also shown here. The fragment that can be annealed to PBS of the input DNA sequence is shown in red. You can just copy it and use it elsewhere. These two parts are demonstrated in the figure below (lower panel).
| |
| − | </div>
| |
| − | </div>
| |
| − | </div>
| |
| − |
| |
| − | <div class="row legend">
| |
| − | <div class="row">
| |
| − | <img src="https://static.igem.org/mediawiki/2019/archive/1/13/20191020091334%21T--Fudan-TSI--SFig4.gif" style="width:80%; margin:auto;">
| |
| − | </div>
| |
| − | </div>
| |
| − |
| |
| − | <div class="row legend">
| |
| − | <div class="row">
| |
| − | <img src="https://static.igem.org/mediawiki/2019/archive/9/91/20191020091514%21T--Fudan-TSI--SFig5.gif" style="width:80%; margin:auto;">
| |
| − | </div>
| |
| − | </div>
| |
| − |
| |
| − | <div class="row title2" id="mainTitle4">
| |
| − | <div class="col"><i>References</i></div>
| |
| − | </div>
| |
| − |
| |
| − | <div class="row para1">
| |
| − | <div class="row">
| |
| − | <div class="col">
| |
| − | <ul class="paraUl" style="list-style:none;">
| |
| − | <li><a name="Ref1">[1]. Peters G , Dahlberg J E . “RNA-directed DNA synthesis in Moloney murine leukemia virus: interaction between the primer tRNA and the genome RNA”. Journal of Virology, 1979, 31(2):398-407.</a></li>
| |
| − | <li><a name="Ref2">[2]. Kulpa, D. “Determination of the site of first strand transfer during Moloney murine leukemia virus reverse transcription and identification of strand transfer-associated reverse transcriptase errors”. EMBO (European Molecular Biology Organization) Journal, 1997, 16(4):856-865.</a></li>
| |
| − | <li><a name="Ref3">[3]. Palmer M T , Kirkman R , Kosloff B R , et al. “tRNA Isoacceptor Preference prior to Retrovirus Gag-Pol Junction Links Primer Selection and Viral Translation”. Journal of Virology, 2007, 81(9):4397-4404. </a></li>
| |
| − | <li><a name="Ref4">[4]. Kinouchi M , Kurokawa K . “tRNAfinder: A Software System To Find All tRNA Genes in the DNA Sequence Based on the Cloverleaf Secondary Structure”. Journal of Computer Aided Chemistry, 2006, 7:116-124.</a></li>
| |
| − | <li><a name="Ref5">[5]. Lund, Anders H. et al. “Mutated primer binding sites interacting with different tRNAs allow efficient murine leukemia virus replication.” Journal of virology, 67 12 (1993): 7125-30.</a></li>
| |
| − | <li><a name="Ref6">[6]. J. Colicelli, S. P. Goff. “Isolation of a recombinant murine leukemia virus utilizing a new primer tRNA.” Journal of virology, 57 1 (1986): 37</a></li>
| |
| − | <li><a name="Ref7">[7]. A. H. Lund, M. Duch, J. Lovmand, P. Jørgensen, F. S. Pedersen. “Complementation of a primer binding site-impaired murine leukemia virus-derived retroviral vector by a genetically engineered tRNA-like primer.” Journal of virology. 71 2 (1997): 1191</a></li>
| |
| − | <li><a name="Ref8">[8]. Lund, A. H., M. Duch, J. Lovmand, P. Jørgensen, and F. S. Pedersen. Mutated primer binding sites interacting with different tRNAs allow efficient murine leukemia replication. J. Virol. 1993, 67:7125–7130.</a></li>
| |
| − | </ul>
| |
| − | </div>
| |
| − | </div>
| |
| − | </div>
| |
| − |
| |
| − |
| |
| − | </div>
| |
| − |
| |
| − |
| |
| − |
| |
| − | </div>
| |
| − |
| |
| − |
| |
| − |
| |
| − | </div>
| |
| − |
| |
| − |
| |
| − | <!----------------------------------------------------------------------------------------------------------------------------------------->
| |
| − | <!---- Foot ---->
| |
| − | <!----------------------------------------------------------------------------------------------------------------------------------------->
| |
| − |
| |
| − | <footer id="FudanFooter" class="page-footer grey">
| |
| − |
| |
| − | <div class="container" id="footContainer">
| |
| − | <div class="row">
| |
| − | <div class="col-md-4" id="sponser" style="padding-top:3%;">
| |
| − | <div class="row">
| |
| − | <div class="col-sm-6" style="padding:0;">
| |
| − | <div class="row align-items-center">
| |
| − | <div class="col">
| |
| − | <img class="img-fluid" alt="Team Fudan-TSI" src="https://static.igem.org/mediawiki/2019/0/0f/T--Fudan-TSI--LogoGrey.gif" />
| |
| − | </div>
| |
| − | <div class="col">
| |
| − | <img class="img-fluid" alt="Fudan University" src="https://static.igem.org/mediawiki/2018/f/f7/T--Fudan--schoolLogo.png" />
| |
| − | </div>
| |
| − | </div>
| |
| − | </div>
| |
| − | <div class="col-sm-6" style="padding:0;">
| |
| − | <div class="row align-items-center">
| |
| − | <div class="col">
| |
| − | <img class="img-fluid" alt="School of Life Sciences, Fudan University" src="https://static.igem.org/mediawiki/2018/1/1d/T--Fudan--schoolOfLifeSciencesIcon.png" />
| |
| − | </div>
| |
| − | <div class="col">
| |
| − | <img class="img-fluid" alt="Yunfeng Capital" src="https://static.igem.org/mediawiki/2018/e/e2/T--Fudan--yunfengLogo.png" />
| |
| − | </div>
| |
| − | </div>
| |
| − | </div>
| |
| − | </div>
| |
| − | <div class="row">
| |
| − | <h3 class="col s12" style="text-align: left; color: rgba(255, 255, 255, 0.8); font-size:12.5px; margin-top:5px;">R-Evolution: an <i>in vivo</i> sequence-specific toolbox for continuous mutagenesis</h3>
| |
| − | </div>
| |
| − | </div>
| |
| − |
| |
| − | <div class="col-md-8" id="usefulLinks">
| |
| − | <div class="row">
| |
| − | <div class="col-lg-6" style="padding:0;">
| |
| − | <div class="row">
| |
| − |
| |
| − | <div class="col-sm-4">
| |
| − | <div class="footerUl align-items-center">
| |
| − | <span><a href="/Team:Fudan-TSI/Description" style="text-decoration:none;">Project</a></span>
| |
| − | <ul>
| |
| − | <li><a href="/Team:Fudan-TSI/Description">Background</a></li>
| |
| − | <li><a href="/Team:Fudan-TSI/Design">Design</a></li>
| |
| − | <li><a href="/Team:Fudan-TSI/Applied_Design">Applied Design</a></li>
| |
| − | <li><a href="/Team:Fudan-TSI/Experiments">Experiments</a></li>
| |
| − | <li><a href="/Team:Fudan-TSI/Judging">Judging</a></li>
| |
| − | </ul>
| |
| − | </div>
| |
| − | </div>
| |
| − |
| |
| − | <div class="col-sm-4">
| |
| − | <div class="footerUl align-items-center">
| |
| − | <span><a href="/Team:Fudan-TSI/Results" style="text-decoration:none;">Results</a></span>
| |
| − | <ul>
| |
| − | <li><a href="/Team:Fudan-TSI/Results#ReverseTranscription">Reverse Transcription</a></li>
| |
| − | <li><a href="/Team:Fudan-TSI/Results#Recombination">Recombination</a></li>
| |
| − | <li><a href="/Team:Fudan-TSI/Demonstrate">Demonstration</a></li>
| |
| − | <li><a href="/Team:Fudan-TSI/Measurement">Measurement</a></li>
| |
| − | <li><a href="/Team:Fudan-TSI/Notebook">Notebook</a></li>
| |
| − | </ul>
| |
| − | </div>
| |
| − | </div>
| |
| − |
| |
| − | <div class="col-sm-4">
| |
| − | <div class="footerUl align-items-center active">
| |
| − | <span style="text-decoration:none;">Model</span>
| |
| − | <ul>
| |
| − | <li><a href="/Team:Fudan-TSI/Model">Modeling</a></li>
| |
| − | <li><a href="/Team:Fudan-TSI/Software">Software</a></li>
| |
| − | <li><a href="/Team:Fudan-TSI/Hardware">Hardware</a></li>
| |
| − | </ul>
| |
| − | </div>
| |
| − | </div>
| |
| − |
| |
| − | </div>
| |
| − | </div>
| |
| − | <div class="col-lg-6" style="padding:0;">
| |
| − | <div class="row">
| |
| − |
| |
| − | <div class="col-sm-4">
| |
| − | <div class="footerUl align-items-center">
| |
| − | <span><a href="/Team:Fudan-TSI/Parts" style="text-decoration:none;">Parts</a></span>
| |
| − | <ul>
| |
| − | <li><a href="/Team:Fudan-TSI/Basic_Part">Basic parts</a></li>
| |
| − | <li><a href="/Team:Fudan-TSI/Composite_Part">Composite parts</a></li>
| |
| − | <li><a href="/Team:Fudan-TSI/Improve">Improved parts</a></li>
| |
| − | <li><a href="/Team:Fudan-TSI/Part_Collection">Part collection</a></li>
| |
| − | </ul>
| |
| − | </div>
| |
| − | </div>
| |
| − |
| |
| − | <div class="col-sm-4">
| |
| − | <div class="footerUl align-items-center">
| |
| − | <span><a href="/Team:Fudan-TSI/Human_Practices" style="text-decoration:none;">Outreach</a></span>
| |
| − | <ul>
| |
| − | <li><a href="/Team:Fudan-TSI/Public_Engagement">Education & Public engagement</a></li>
| |
| − | <li><a href="/Team:Fudan-TSI/Integrated_Human_Practice">Integrated human practice</a></li>
| |
| − | <li><a href="/Team:Fudan-TSI/Collaborations">Collaborations</a></li>
| |
| − | <li><a href="/Team:Fudan-TSI/Safety">Safety</a></li>
| |
| − | </ul>
| |
| − | </div>
| |
| − | </div>
| |
| − |
| |
| − | <div class="col-sm-4">
| |
| − | <div class="footerUl align-items-center">
| |
| − | <span><a href="/Team:Fudan-TSI/Team" style="text-decoration:none;">Team</a></span>
| |
| − | <ul>
| |
| − | <li><a href="/Team:Fudan-TSI/Team">Members</a></li>
| |
| − | <li><a href="/Team:Fudan-TSI/Attributions">Attributions</a></li>
| |
| − | <li><a href="https://2018.igem.org/Team:Fudan/Heritage" target=_blank>Heritage</a></li>
| |
| − | <li><a href="/Team:Fudan-TSI">© 2019</a></li>
| |
| − | </ul>
| |
| − | </div>
| |
| − | </div>
| |
| − |
| |
| − | </div>
| |
| − | </div>
| |
| − |
| |
| − |
| |
| − | </div>
| |
| − | </div>
| |
| − | </div>
| |
| − | </div>
| |
| − |
| |
| − | <div class="footer-copyright">
| |
| − | <div class="container" style="width:90%;">
| |
| − | <div class="contactUS row">
| |
| − | <div class="col s12 m6 l6"><i class="fa fa-location-arrow"></i> Life Sci Bldg, 2005 Songhu Rd, Shanghai
| |
| − | </div>
| |
| − | <div class="col s12 m6 l2"><i class="fa fa-fax"></i> +86-21-31246727
| |
| − | </div>
| |
| − | <div class="col s12 m6 l2"><i class="fa fa-envelope-o"></i> igem@fudan.edu.cn
| |
| − | </div>
| |
| − | <div class="col s12 m6 l2"><i class="fa fa-twitter"></i> <i class="fa fa-wechat"></i> Fudan_iGEM
| |
| − | </div>
| |
| − | </div>
| |
| − | </div>
| |
| − | </div>
| |
| − | </footer>
| |
| − |
| |
| − |
| |
| − |
| |
| − | </div>
| |
| − |
| |
| − |
| |
| − |
| |
| − | <script>
| |
| − |
| |
| − | var winHeight=$(window).height();
| |
| − | var winWidth=$(window).width();
| |
| − | var pagePosition=$("#pageContent").offset().top;
| |
| − | var navHeight=$(".leftNav").height();
| |
| − | var footerHeight=$("#FudanFooter").height();
| |
| − | var maxTopDistance=$("#pageContent").height();
| |
| − | $(".leftNav").css({"position":"absolute","top":pagePosition});
| |
| − | $(window).resize(function(){
| |
| − | var winHeight=$(window).height();
| |
| − | var winWidth=$(window).width();
| |
| − | var topDistance=$(window).scrollTop();
| |
| − | var navHeight=$(".leftNav").height();
| |
| − | var footerHeight=$("#FudanFooter").height();
| |
| − | var maxTopDistance=$("#pageContent").height();
| |
| − | var leftNavFromTop=pagePosition-$(window).scrollTop();
| |
| − | if (leftNavFromTop<0.1*winWidth){
| |
| − | if(topDistance<maxTopDistance){
| |
| − | $(".leftNav").css({"position":"fixed","top":0.1*winWidth+$("#top_menu_14").height()});
| |
| − | }
| |
| − | else{
| |
| − | $(".leftNav").css({"position":"absolute","top":maxTopDistance});
| |
| − | }
| |
| − | }
| |
| − | else{
| |
| − | $(".leftNav").css({"position":"absolute","top":pagePosition});
| |
| − | }
| |
| − | });
| |
| − |
| |
| − | $(window).scroll(function(){
| |
| − | var winHeight=$(window).height();
| |
| − | var winWidth=$(window).width();
| |
| − | var leftNavFromTop=pagePosition-$(window).scrollTop();
| |
| − | var topDistance=$(window).scrollTop();
| |
| − | if (leftNavFromTop<0.1*winWidth){
| |
| − | if(topDistance<maxTopDistance){
| |
| − | $(".leftNav").css({"position":"fixed","top":0.1*winWidth+$("#top_menu_14").height()});
| |
| − | }
| |
| − | else{
| |
| − | $(".leftNav").css({"position":"absolute","top":maxTopDistance});
| |
| − | };
| |
| − | }
| |
| − | else{
| |
| − | $(".leftNav").css({"position":"absolute","top":pagePosition});
| |
| − | }
| |
| − | });
| |
| − |
| |
| − | $(".leftNav a").click(function () {
| |
| − | $('html, body').animate({
| |
| − | scrollTop: $($.attr(this, 'href')).offset().top-$("#navUl").height()-50
| |
| − | }, 500);
| |
| − | return false;
| |
| − | });
| |
| | | | |
| | + | $(document).ready(function () { |
| | + | $('#submit').on('click', function (event) { |
| | + | clean_results(); |
| | + | var q = $('#target_seq').val(); |
| | + | if (q) { |
| | + | std_q = q.replace(/[^atgc]/gi, '').toUpperCase(); |
| | + | if (std_q.length >= PBS_len) { |
| | + | //$('#primer_seq').text(tRNA_primer( std_q )); |
| | + | var targetprimer = tRNA_primer(std_q); |
| | + | $('#primer_seq').html(targetprimer.substr(0,targetprimer.length-PBS_len)+ |
| | + | '<span style="color:blue">'+targetprimer.substr(targetprimer.length-PBS_len,PBS_len)+'</span>'); |
| | + | $('#p_primer').removeClass('Off'); |
| | + | $('#progress').addClass('Off'); |
| | + | } else { |
| | + | $('#progress').text('!! the sequence should be longer'); |
| | + | $('#target_seq').focus(); |
| | + | } |
| | + | } else { |
| | + | $('#progress').text('!! please input something'); |
| | + | $('#target_seq').focus(); |
| | + | } |
| | + | event.preventDefault(); |
| | + | }); |
| | | | |
| − | $(window).scroll(function(){
| + | var r = getQueryStringArgs(); |
| − |
| + | if (r.seq) { |
| − | var currentScroll=$(this).scrollTop();
| + | var q = r.seq; |
| − | var firstHeight=$("#pageCover").height();
| + | $('#target_seq').val(r.seq); |
| − | var footerFromTop=$("#FudanFooter").offset().top;
| + | std_q = t.replace(/[^atgc]/gi, '').toUpperCase(); |
| − | var $currentSection=null;
| + | //plus_strand_search(s, std_q); |
| − | $(".leftNavA").each(function(){
| + | } |
| − | $('.leftNavA').removeClass('menu-active');
| + | |
| − | var hePoint=$($(this).attr("href"));
| + | |
| − | var divPosition=hePoint.offset().top-$("#navUl").height()-50;
| + | |
| − | if (divPosition-1<currentScroll){
| + | |
| − | $currentSection=$(this);
| + | |
| − | }
| + | |
| − | if (currentScroll>firstHeight){
| + | |
| − | $(".leftNavA").removeClass("menu-active");
| + | |
| − | $currentSection.addClass("menu-active");
| + | |
| − | }
| + | |
| − | });
| + | |
| − |
| + | |
| − | var $currentSection2;
| + | |
| − | $('.leftNavA2').each(function(){
| + | |
| − | $('.leftNavA2').removeClass('menu-active2');
| + | |
| − | var hePoint2=$($(this).attr("href"));
| + | |
| − | var divPosition2=hePoint2.offset().top-$("#navUl").height()-50;
| + | |
| − | if (divPosition2-1<currentScroll){
| + | |
| − | $currentSection2=$(this);
| + | |
| − | }
| + | |
| − | if (currentScroll>firstHeight){
| + | |
| − | $('.leftNavA2').removeClass('menu-active2');
| + | |
| − | $currentSection2.addClass('menu-active2');
| + | |
| − | }
| + | |
| − | });
| + | |
| − | });
| + | |
| | | | |
| − | </script>
| + | $('#clear').on('click', function (event) { |
| − |
| + | clean_results(); |
| | + | $('#target_seq').val(''); |
| | + | $('#rev_MMLV').prop('checked', true); |
| | + | PBS_len = 18; |
| | + | $('#target_seq').focus(); |
| | + | event.preventDefault(); |
| | + | }); |
| | | | |
| − |
| + | $('#demoBtn').on('click', function (event) { |
| − | <script src="https://2019.igem.org/wiki/index.php?title=Template:Fudan-TSI/popper.min.js&action=raw&ctype=text/javascript" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
| + | clean_results(); |
| − | <script src="https://2019.igem.org/wiki/index.php?title=Template:Fudan-TSI/bootstrap.js&action=raw&ctype=text/javascript" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
| + | var q = 'CGATGATCGATCAGCTAGCTAGTCGATCGATCGATC'; |
| | + | $('#target_seq').val(q); |
| | + | //$('#primer_seq').text(tRNA_primer( q )); |
| | + | var demoprimer = tRNA_primer(q); |
| | + | $('#primer_seq').html(demoprimer.substr(0,demoprimer.length-PBS_len)+ |
| | + | '<span style="color:blue">'+demoprimer.substr(demoprimer.length-PBS_len,PBS_len)+'</span>'); |
| | + | $('#p_primer').removeClass('Off'); |
| | + | $('#progress').addClass('Off'); |
| | + | event.preventDefault(); |
| | + | }); |
| | | | |
| | + | $('input[name="rev"]').on('change', function () { |
| | + | if (this.checked) { |
| | + | clean_results(); |
| | + | if (this.value === 'MMLV') { |
| | + | PBS_len = 18; |
| | + | } else if (this.value === 'HIV1') { |
| | + | PBS_len = 18; |
| | + | } else if (this.value === 'RSV') { |
| | + | PBS_len = 17; |
| | + | } else { |
| | + | $('#progress').text('This type of reverse transcriptase is not supported.'); |
| | + | } |
| | + | } |
| | + | }); |
| | + | }); |
| | + | </script> |
| | + | </div> |
| | | | |
| | + | <p><br/><br/></p> |
| | | | |
| − |
| + | <!--//////////////////////////////////////////////////// |
| − |
| + | do not edit below, if must BE CAREFUL |
| − |
| + | //////////////////////////////////////////////////////--> |
| − |
| + | </article></main></div><!-- end of side navigator and main of the page --> |
| − |
| + | |
| − |
| + | |
| − |
| + | |
| | | | |
| − | <!------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- Content ends ---------------------------------------------------------------------------------------------------------------------------------> | + | <!-- Floating Btns, Footer with sponsors --> |
| − | <!----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------> | + | <div class="floatingBtn"> <a href="#FudanTSIdivWrapper" class="btn"> <i class="fa fa-angle-up" style="font-size:48px;line-height:45px"></i> </a></div> <footer id="FudanTSIfooter" class="page-footer blue-grey darken-1"><div class="container"><div class="row"><div id="sponsor" class="col m3 s12 row"> <a href="https://2019.igem.org/Team:Fudan-TSI"><img alt="2019 Team:Fudan-TSI logo white" class="col s3 m6 l3" style="position:relative; padding: 0.45em 0.3rem; margin:-0.15rem 0; left: -0.45rem;" src="https://static.igem.org/mediawiki/2019/0/0f/T--Fudan-TSI--LogoGrey.gif"> </a><a href="http://www.fudan.edu.cn/en/" target="_blank"><img class="col s3 m6 l3" alt="Fudan University" src="https://static.igem.org/mediawiki/2018/f/f7/T--Fudan--schoolLogo.png"> </a><a href="http://life.fudan.edu.cn/" target="_blank"><img class="col s3 m6 l3" style="margin-bottom: 4%;/* fig should be smaller, 2018 ht */" alt="School of Life Sciences, Fudan University" src="https://static.igem.org/mediawiki/2018/1/1d/T--Fudan--schoolOfLifeSciencesIcon.png"> </a><a href="http://www.yfc.cn/en/" target="_blank"><img class="col s3 m6 l3" style="padding: 0.15rem 0.9rem;" alt="Yunfeng Capital" src="https://static.igem.org/mediawiki/2018/e/e2/T--Fudan--yunfengLogo.png"> </a><h3 class="col s12" style="text-align:left;font-size:12.5px">R-Evolution: an <i>in vivo</i> sequence-specific toolbox for continuous mutagenesis</h3></div><div id="footerNavList" class="col m9 s12 row"><div class="col s12 l6 row"><div class="col s12 m4"> <span><a href="/Team:Fudan-TSI/Description">Project</a></span><ul><li><a href="/Team:Fudan-TSI/Description">Background</a></li><li><a href="/Team:Fudan-TSI/Design">Design</a></li><li><a href="/Team:Fudan-TSI/Experiments">Experiments</a></li><li><a href="/Team:Fudan-TSI/Applied_Design">Applied design</a></li><li><a href="/Team:Fudan-TSI/Judging">Judging</a></li></ul></div><div class="col s12 m4"> <span><a href="/Team:Fudan-TSI/Demonstrate">Results</a></span><ul><li><a href="/Team:Fudan-TSI/Demonstrate#ReverseTranscription">Reverse transcription</a></li><li><a href="/Team:Fudan-TSI/Demonstrate#Recombination">Recombination</a></li><li><a href="/Team:Fudan-TSI/Demonstrate">Demonstration</a></li><li><a href="/Team:Fudan-TSI/Measurement">Measurement</a></li><li><a href="/Team:Fudan-TSI/Notebook">Notebook</a></li></ul></div><div class="col s12 m4 active"> <span><a href="/Team:Fudan-TSI/Model">Model</a></span><ul><li><a href="/Team:Fudan-TSI/Model">Modeling</a></li><li><a href="/Team:Fudan-TSI/Software">Software</a></li><li><a href="/Team:Fudan-TSI/Hardware">Hardware</a></li></ul></div></div><div class="col s12 l6 row"><div class="col s12 m4"> <span><a href="/Team:Fudan-TSI/Parts">Parts</a></span><ul><li><a href="/Team:Fudan-TSI/Basic_Part">Basic parts</a></li><li><a href="/Team:Fudan-TSI/Composite_Part">Composite parts</a></li><li><a href="/Team:Fudan-TSI/Improve">Part improvement</a></li><li><a href="/Team:Fudan-TSI/Part_Collection">Part collection</a></li></ul></div><div class="col s12 m4"> <span><a href="/Team:Fudan-TSI/Human_Practices">Outreach</a></span><ul><li><a href="/Team:Fudan-TSI/Public_Engagement">Public engagement</a></li><li><a href="/Team:Fudan-TSI/Human_Practices#IntegratedHumanPractice">Integrated HP</a></li><li><a href="/Team:Fudan-TSI/Collaborations">Collaborations</a></li><li><a href="/Team:Fudan-TSI/Safety">Safety</a></li></ul></div><div class="col s12 m4"> <span><a href="/Team:Fudan-TSI/Team">Team</a></span><ul><li><a href="/Team:Fudan-TSI/Team">Members</a></li><li><a href="/Team:Fudan-TSI/Attributions">Attributions</a></li><li><a href="/Team:Fudan-TSI/Team#Acknowledge">Acknowledge</a></li><li><a href="/Team:Fudan-TSI/Heritage">Heritage</a></li></ul></div><div class="col s12 m4"> </div></div></div></div></div><div class="footer-copyright"><div class="container"><div class="contactUS row"><div class="col s12 m6 l4"><i class="fa fa-location-arrow"></i> Life Sci Bldg, 2005 Songhu Rd, Shanghai</div><div class="col s12 m6 l2"><i class="fa fa-fax"></i> +86-21-31246727</div><div class="col s12 m6 l2"><i class="fa fa-envelope-o"></i> igem@fudan.edu.cn</div><div class="col s12 m6 l4"><i class="fa fa-twitter"></i> <i class="fa fa-wechat"></i> Fudan_iGEM</div></div></div></div> </footer> |
| | + | </div></div></div><!-- #pageContent #FudanTSIBody #FudanTSIdivWrapper --> |
| | | | |
| | + | <script src="https://2019.igem.org/wiki/index.php?title=Template:Fudan-TSI/materialize.js&action=raw&ctype=text/javascript"></script><!-- Materialize 1.0.0-rc.2 --> |
| | + | <script src="https://2019.igem.org/wiki/index.php?title=Template:Fudan-TSI/Fudan-js.js&action=raw&ctype=text/javascript"></script> |
| | + | </body> |
| | </html> | | </html> |
