bioinformatics/index_ver2.html at master · fifth/bioinformatics · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
		<link rel="stylesheet" type="text/css" href="main.css">
		<script type="text/javascript" src="jquery-2.1.1.js"></script>
		<script type="text/javascript" src="jquery.scrollTo.js"></script>
		<script type="text/javascript" src="main.js"></script>
		<style type="text/css">
			#back{
				text-wrap: none;
				/*opacity: 0;*/
				width: 150px;
				left: -95px;
			}
			#back:hover {
				opacity: 1;
				left: 0px;
			}
		</style>
	</head>
	<body>
		<div id="step_input" class="steps" style="top: 0%; background-color: #E893AA;">
			<p style="margin-top: 10%; margin-bottom: 5%;">
				This site is used to analyse the repeat of a certain DNA senquence and you can custom the parameters you want. Varieties of input and output format is supported(under developement).<br />
				The program uses an algorithm called MSATR. <a href="" onclick="window.open('http://cpfd.cnki.com.cn/Article/CPFDTOTAL-ZJSS200810002033.htm'); return false;">Here is the paper on cnki.</a><br />
				More definition and analyse algorithms will be avalible afterwards.
			</p>
			<p>
				Now, give me the DNA senquence you want to analyse or just <a href="" onclick="random_senquence(); return false;">produce a random(please less than 10000) senquence by program</a>.
			</p>
			<textarea placeholder="enter the senquences you wnat to analyse" id="senquence" style="margin-top: 1%; width: 80%; height: 30%; font-size:1.2em"></textarea><br />
			<input type="button" class="button" value="upload a file(unavalibe)" style="margin-left: 10%" onclick="scroll_to('1')" />
			<input type="button" class="button" value="next step: custom the parameters" onclick="scroll_to('1')" />
		</div>
		<div id="step_param" class="steps" style="top: 100%; background-color: #FFD2A2;">
			<p style="margin-top: 5%; margin-bottom: 5%;">
				Now you can custom parameters including minimun repeat length, maximun repeat length, least repeat times and threshold value.<br />
				The followings are defult value, if you want to change the pare, just change them.
				The following paras are:<br />
				min length of repeat senquence<br />
				max length of repeat senquence<br />
				least repeat<br />
				threshold value
			</p>
			<input type="text" id="min_len" class="text" placeholder="set the min length of repeat senquence" value="2" />
			<br />
			<input type="text" id="max_len" class="text" placeholder="set the max length of repeat senquence" value="50" />
			<br />
			<input type="text" id="repeat" class="text" placeholder="set the least repeat" value="2" />
			<br />
			<input type="text" id="r" class="text" placeholder="set the threshold value" value="0.5" />
			<br />
			<input type="button" class="button" value="former step: input the senquence" style="margin-left: 10%" onclick="scroll_to('0')" />
			<input type="button" class="button" value="next step: custom the output" onclick="scroll_to('2')" />
		</div>
		<div id="step_output" class="steps" style="top: 200%; background-color: #6A94A3;">
			<p style="margin-top: 5%; margin-bottom: 5%;">
				Here you can custom the output format you want.<br />
				Please enter the format in the following text block.<br />
				Remember, the customable positions are {repeat start position}, {repeat end position}, {number of repeat} and {length of the single repeat}<br />
				So you can change the order of {start}, {end}, {repeat} and {length}. What's more, you can change the other parts of the output string.<br />
				If you don't want it to show the other output, just delete them.(e.g. if you just want to get the repeat senquence, left {senquence} only)<br />
				REMEMBER, DO NOT CHANGE THESE 4 PARTS ABOVE.
			</p>
			<input type="text" id="format" class="text" value="[{start}]{senquence}[{end}]|{repeat}|{length}" />
			<p>And we use <input type="text" id="devide" class="text" value="," style="display: inline; width: 10%; margin-right: 0px; margin-left: 0px;" />to devide the repeats. If you don't want the senquence to be devided, just let it to be blank.</p>
			<input type="button" class="button" style="margin-left: 10%" value="former step: custom the parameters" onclick="scroll_to('1')" />
			<input type="button" class="button" value="next step: get the answer" onclick="send_quest(); scroll_to('3')" />
		</div>
		<div id="step_answer" class="steps" style="top: 300%; background-color: #B2E28F;">
			<input type="button" class="button" style="margin-left: 10%" value="export to file(unavalibe)" />
			<input type="button" class="button" value="back to first step" onclick="scroll_to('0')" />
			<p id="answer" style="margin-top: 5%; margin-bottom: 5%; word-break:break-all;"></p>
		</div>
		<div id="guide" class="guide">
			<div class="guide_step" id="guide1" onclick="scroll_to('0')">1</div>
			<div class="guide_step" id="guide2" onclick="scroll_to('1')">2</div>
			<div class="guide_step" id="guide3" onclick="scroll_to('2')">3</div>
			<div class="guide_step" id="guide4" onclick="scroll_to('3')">4</div>
		</div>
		<!--<a href="./index.html"><div id='back' style="height: 50px; background-color: white; position: fixed; top: 0px; line-height: 50px; text-align: center; color: #000000;">back to the index</div></a>-->
	</body>
</html>