pairwise-alignment/index.html at develop · carlosesilva/pairwise-alignment · 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
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Home</title>
	<link href="plugins/jquery-ui-1.11.4/jquery-ui.css" rel="stylesheet">
	<link href="plugins/animatecss/animate.css" rel="stylesheet">
	<link rel="stylesheet" href="css/style.css" />
</head>
<body>
	<div id="intro">
		<div class="message">
			<h3>Welcome to Pairwise Alignment</h3>
			<h4>About the tool</h4>
			<p>This tool was created to help BioInformatics students learn about finding the optimal pairwise alignment between two sequences, protein or nucleotide.</p>
			<h4>How to use it</h4>
			<p>Start by entering the settings on the left panel and clicking start</p>
			<p>Enter the values for each cell and pick an arrow that represents the traceback information for said cell by clicking the little box situated at the top left corner of each cell.</p>
			<h4>Resources</h4>
			<ul>
				<li><a href="https://en.wikipedia.org/wiki/Needleman%E2%80%93Wunsch_algorithm">Needleman-Wunsch Algorithm</a></li>
				<li><a href="http://www.ebi.ac.uk/Tools/psa/">Great tool for actually finding alignments - The European Bioinformatics Institute</a></li>
			</ul>
		</div>
	</div>

	<div id="topBar">
		<h1>Pairwise Alignment</h1>
	</div>

	<div class="sidebar">

		<h2 class="sidebarTabHeader active"><a href="#">Settings</a></h2>
		<div id="settings" class="sidebarTabContent">
			Sequence 1:<br><input type="text" name="" id="sequence1" class="sequence" value="GAT"/><br>
			Sequence 2:<br><input type="text" name="" id="sequence2" class="sequence" value="GCA"/><br>
			Match score:<br><input type="text" name="" id="matchScore" value="1"/><br>
			Mismatch score:<br><input type="text" name="" id="mismatchScore" value="-1"/><br>
			Gap penalty:<br><input type="text" name="" id="gapPenalty" value="-1"/><br>
			Mode:
			<select name="" id="mode">
				<option value="global" selected>global</option>
				<option value="semi" >semi</option>
				<option value="local" >local</option>
			</select><br>
			Instant Feedback: <input type="checkbox" name="" id="instantFeedback" checked/><br>
			Guided Mode: <input type="checkbox" name="" id="guidedMode" checked/><br>
			<button id="process">Start</button>
			<br><br><br>
		</div>

		<h2 class="sidebarTabHeader"><a href="#">Help</a></h2>
		<div id="help" class="sidebarTabContent">
			You should complete <a href="#" class="stuckCellHover">this cell</a> next
			<div id="chatBubble"></div>
			<div id="stuck">
				<a href="#">Still stuck? Get a hint!</a><br/>
			</div>
			<a href="#" id="showTestingInfo"/><span>Show</span><span style="display:none;">Hide</span> Answers</a>
		</div>
	</div>

	<div id="wrapper">
		<h2>Input Matrix</h2>
		<p id="placeholderText"><br/>Please select settings on the left panel and press start<br/><br/></p>
		<div id="inputTableContainer" class=""></div>
		<h2>Input Alignment</h2>
		<div id="inputAlignmentContainer" class="">
			s1:<input type="text" id="alignmentInput1" class="alignmentInput"><br>
			s2:<input type="text" id="alignmentInput2" class="alignmentInput"><br>
			<button id="compareAlignment">Check Alignment</button>
		</div>
	</div>

	<div id="testing" class="right">
		<h2>Correct Matrix</h2>
		<div id="correctMatrix" class="dynamicProgrammingMatrixWrapper"></div>
		<!-- <button id="readMatrix">Read Matrix</button> -->
		<!-- <button id="compareMatrices">Compare Matrices</button> -->
		<br>
		<h2>Possible Alignments</h2>
		<div id="correctAlignment" class="alignmentContainer"></div>
	</div>

	<div class="clear"></div>
    <div id="tracebackSelectOptions">
    	<!-- <p><input type="checkbox" class="tracebackCheckbox"> Zero</p> -->
    	<p><input type="checkbox" class="tracebackCheckbox"> Left</p>
		<p><input type="checkbox" class="tracebackCheckbox"> Top</p>
		<p><input type="checkbox" class="tracebackCheckbox"> Diagonal</p>
    </div>
    <div id="tracebackSelectOptionsOverlay"></div>

<script src="js/jquery-1.11.1.min.js"></script>
<script src="plugins/jquery-ui-1.11.4/jquery-ui.js"></script>
<script src="js/vendor/solitaireVictory.js"></script>
<script src="js/create-array.js"></script>
<script src="js/compute-matrix.js"></script>
<script src="js/build-matrix.js"></script>
<script src="js/read-matrix.js"></script>
<script src="js/print-matrix.js"></script>
<script src="js/compare-matrices.js"></script>
<script src="js/display-feedback.js"></script>
<script src="js/traceback.js"></script>
<script src="js/scratch.js"></script>
</body>
</html>