Team:Calgary/TestPage

From 2013.igem.org

(Difference between revisions)
 
(52 intermediate revisions not shown)
Line 1: Line 1:
-
<!DOCTYPE html>
+
{{Team:Calgary/Main}}
<html>
<html>
-
<head>
+
 
-
<title>Carousel</title>
+
<section id="Content">
-
+
 
-
<!-- Reset for BodyContent -->
+
<h1>Quantitative App</h1>
-
<style>
+
 
-
#content{
+
<h2>DNA binding to TALEs<h2>
-
width: 100%;
+
 
-
margin: 0;
+
<p>The positive DNA&#39;s are colored red, negative DNA is green, TALEs are black and after binding (i.e. saturation) they turn blue. The sliders under &quot;global settings&quot;€ are parameters needed before the simulation runs. Given that a simulation can take 30 seconds to complete, they should not be changed frequently as it will take longer to show the results. The sliders under &quot;€œdisplay settings&quot;€ are parameters needed after the simulation runs. Their responses are much faster and are best played by clicking on the plus sign to the right and hit &quot;€œPlay&quot;. If you only see a grey box, you may need to install the Mathematica CDF Player. The download link can be found <a href="http://www.wolfram.com/cdf-player/">here</a>. Otherwise, the data from our model, as well as images of the app we designed, can be found on the <a href="https://2013.igem.org/Team:Calgary/Project/OurSensor/Modelling/QuantitativeModelling">quantitative modelling page</a>.
-
padding: 0;
+
</p>
-
background-color:transparent;
+
 
-
border: none;
+
<img align="right" style="width:35%;" src="https://static.igem.org/mediawiki/2013/6/6b/UCalgary2013SWAgenModelInstruction.jpg" style="float: left; clear: both;"></img>
-
}
+
 
-
+
<script type="text/javascript" src="http://www.wolfram.com/cdf-player/plugin/v2.1/cdfplugin.js"></script>
-
#bodyContent{
+
<script type="text/javascript">
-
width: 100%;
+
var cdf = new cdfplugin();
-
margin: 0;
+
cdf.embed('http://igem.ucalgary.ca/misc/Deployed.cdf', 430, 800);
-
padding: 0;
+
-
background-color:transparent;
+
-
border: none;
+
-
}
+
-
</style>
+
-
+
-
<!-- Fonts -->
+
-
<link href='http://fonts.googleapis.com/css?family=Raleway:400,500,600' rel='stylesheet' type='text/css'>
+
-
<link href='http://fonts.googleapis.com/css?family=Antic+Slab' rel='stylesheet' type='text/css'>
+
-
+
-
<!-- CSS Stylesheets -->
+
-
<link href="https://2013.igem.org/Team:Calgary/StyleSheets/Reset?action=raw&ctype=text/css" rel="stylesheet">
+
-
<link href="https://2013.igem.org/Team:Calgary/TestPageCSS?action=raw&ctype=text/css" rel="stylesheet">
+
-
+
-
<!-- JavaScript & JQuery -->
+
-
<script>
+
-
$(document).ready(function() {
+
-
var TotalSlides = $('.Person').length
+
-
var CurrentSlide = 0;
+
-
+
-
$('#Carousel').css('display', 'block');
+
-
$('.Info').css('display', 'none');
+
-
$('#Bio' + ((CurrentSlide + TotalSlides + 2) % TotalSlides)).css('display', 'block');
+
-
+
-
if ($('body').width() < 990) {
+
-
$('.Slide0, .Slide4').css('display', 'none');
+
-
$('.Slide1').css('left', '90px');
+
-
$('.Slide2').css('left', '255px');
+
-
$('.Slide3').css('left', '420px');
+
-
$('#Carousel, #WriteUp').css('width', '675px');
+
-
}
+
-
if ($('body').width() < 675) {
+
-
$('#Carousel').css('display', 'none');
+
-
$('.Info').css('display', 'block');
+
-
$('#WriteUp').css('width', '100%');
+
-
}
+
-
+
-
$(window).resize(function() {
+
-
if ($('body').width() >= 990) {
+
-
$('.Slide0, .Slide4').css('display', 'block');
+
-
$('.Person').css('left', '');
+
-
$('#Carousel, #WriteUp').css('width', '990px');
+
-
$('#Carousel').css('display', 'block');
+
-
$('.Info').css('display', 'none');
+
-
$('#Bio' + ((CurrentSlide + TotalSlides + 2) % TotalSlides)).css('display', 'block');
+
-
}
+
-
if ($('body').width() < 990) {
+
-
$('.Slide0, .Slide4').css('display', 'none');
+
-
$('.Slide1').css('left', '90px');
+
-
$('.Slide2').css('left', '255px');
+
-
$('.Slide3').css('left', '420px');
+
-
$('#Carousel, #WriteUp').css('width', '675px');
+
-
$('#Carousel').css('display', 'block');
+
-
$('.Info').css('display', 'none');
+
-
$('#Bio' + ((CurrentSlide + TotalSlides + 2) % TotalSlides)).css('display', 'block');
+
-
}
+
-
if ($('body').width() < 675) {
+
-
$('#Carousel').css('display', 'none');
+
-
$('.Info').css('display', 'block');
+
-
$('#WriteUp').css('width', '100%');
+
-
}
+
-
});
+
-
+
-
$('#RightArrow').click(function() {
+
-
CurrentSlide = ++CurrentSlide % TotalSlides;
+
-
$('.Person').css('display', 'none');
+
-
var i = CurrentSlide;
+
-
+
-
for (var count = 0; count < 5; count++) {
+
-
if (i >= TotalSlides)
+
-
i = 0;
+
-
+
-
$('.Person').removeClass('Slide' + count);
+
-
+
-
SlideID = '#Person' + i;
+
-
$(SlideID).css('display', 'block').addClass('Slide' + count);
+
-
i++;
+
-
}
+
-
+
-
$('.Info').css('display', 'none');
+
-
$('#Bio' + ((CurrentSlide + TotalSlides + 2) % TotalSlides)).css('display', 'block');
+
-
+
-
if ($('body').width() < 990) {
+
-
$('.Slide0, .Slide4').css('display', 'none');
+
-
$('.Slide1').css('left', '90px');
+
-
$('.Slide2').css('left', '255px');
+
-
$('.Slide3').css('left', '420px');
+
-
$('#Carousel, #WriteUp').css('width', '675px');
+
-
}
+
-
});
+
-
+
-
$('#LeftArrow').click(function() {
+
-
CurrentSlide = (CurrentSlide + TotalSlides - 1) % TotalSlides;
+
-
$('.Person').css('display', 'none');
+
-
var i = CurrentSlide;
+
-
+
-
for (var count = 0; count < 5; count++) {
+
-
if (i >= TotalSlides)
+
-
i = 0;
+
-
+
-
$('.Person').removeClass('Slide' + count);
+
-
+
-
SlideID = '#Person' + i;
+
-
$(SlideID).css('display', 'block').addClass('Slide' + count);
+
-
i++;
+
-
}
+
-
+
-
$('.Info').css('display', 'none');
+
-
$('#Bio' + ((CurrentSlide + TotalSlides + 2) % TotalSlides)).css('display', 'block');
+
-
+
-
if ($('body').width() < 990) {
+
-
$('.Slide0, .Slide4').css('display', 'none');
+
-
$('.Slide1').css('left', '90px');
+
-
$('.Slide2').css('left', '255px');
+
-
$('.Slide3').css('left', '420px');
+
-
$('#Carousel, #WriteUp').css('width', '675px');
+
-
}
+
-
});
+
-
+
-
$('.Person').click(function() {
+
-
var ClickedPerson = $(this).attr('id');
+
-
CurrentSlide = ((parseInt(ClickedPerson.replace('Person', ''))) + TotalSlides - 2) % TotalSlides;
+
-
+
-
$('.Person').css('display', 'none');
+
-
var i = CurrentSlide;
+
-
+
-
for (var count = 0; count < 5; count++) {
+
-
if (i >= TotalSlides)
+
-
i = 0;
+
-
+
-
$('.Person').removeClass('Slide' + count);
+
-
+
-
SlideID = '#Person' + i;
+
-
$(SlideID).css('display', 'block').addClass('Slide' + count);
+
-
i++;
+
-
}
+
-
+
-
$('.Info').css('display', 'none');
+
-
$('#Bio' + ((CurrentSlide + TotalSlides + 2) % TotalSlides)).css('display', 'block');
+
-
+
-
if ($('body').width() < 990) {
+
-
$('.Slide0, .Slide4').css('display', 'none');
+
-
$('.Slide1').css('left', '90px');
+
-
$('.Slide2').css('left', '255px');
+
-
$('.Slide3').css('left', '420px');
+
-
$('#Carousel, #WriteUp').css('width', '675px');
+
-
}
+
-
});
+
-
});
+
</script>
</script>
-
</head>
 
-
<body>
+
<h2>Enzyme kinetics of horseradish peroxidase</h2>
-
<div id="TeamMembers">
+
 
-
<div id="Carousel">
+
<script type="text/javascript" src="http://www.wolfram.com/cdf-player/plugin/v2.1/cdfplugin.js"></script>
-
<div id="LeftArrow" class="Arrow"></div>
+
<script type="text/javascript">
-
<div id="Person0" class="Person Slide0"></div>
+
var cdf = new cdfplugin();
-
<div id="Person1" class="Person Slide1"></div>
+
cdf.embed('http://igem.ucalgary.ca/misc/HorseradishPeroxidase.cdf', 350, 360);
-
<div id="Person2" class="Person Slide2"></div>
+
</script>
-
<div id="Person3" class="Person Slide3"></div>
+
 
-
<div id="Person4" class="Person Slide4"></div>
+
<h2>Enzyme kinetics of beta-galactosidase</h2>
-
<div id="Person5" class="Person"></div>
+
 
-
<div id="Person6" class="Person"></div>
+
<script type="text/javascript" src="http://www.wolfram.com/cdf-player/plugin/v2.1/cdfplugin.js"></script>
-
<div id="Person7" class="Person"></div>
+
<script type="text/javascript">
-
<div id="Person8" class="Person"></div>
+
var cdf = new cdfplugin();
-
<div id="Person9" class="Person"></div>
+
cdf.embed('http://igem.ucalgary.ca/misc/Beta-Galactosidase.cdf', 350, 330);
-
<div id="RightArrow" class="Arrow"></div>
+
</script>
-
</div>
+
 
-
+
<h2>Frequently Asked Questions
-
<div id="WriteUp">
+
</h2>
-
<div id="Bio0" class="Info">
+
 
-
<div class="InfoImg"><img src="BigPic2.jpg"></div>
+
<h3>1. Can I see your code?
-
<div class="Text">
+
</h3>
-
<h2>Bio 0 Person</h2>
+
<p>Sure! Here are <a href="https://static.igem.org/mediawiki/2013/3/3a/UCalgary2013SWTheCode.txt" target="_blank">DNA binding to TALEs agent based model</a>,
-
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam non dui rutrum, ultrices turpis ut, dignissim lectus. Aenean ac viverra urna. Praesent tempor rhoncus scelerisque. Pellentesque volutpat elementum tristique. Maecenas iaculis quam nunc, vel venenatis sapien pretium id. Nulla facilisi. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Maecenas adipiscing congue augue, at sagittis lorem pretium eu. Nullam sit amet lacinia neque, et luctus diam. Vestibulum porta adipiscing venenatis.</p>
+
<a href="https://static.igem.org/mediawiki/2013/b/b5/UCalgary2013SWHorseradishPeroxidaseCode.txt" target="_blank">horseradish peroxidase kinetic model</a>, and
-
</div>
+
<a href="https://static.igem.org/mediawiki/2013/0/08/UCalgary2013SWBeta-GalactosidaseCode.txt " target="_blank">beta-galactosidase kinetic model</a>.
-
</div>
+
</p>
-
<div id="Bio1" class="Info">
+
 
-
<div class="InfoImg"><img src="BigPic2.jpg"></div>
+
<h3>2. I see a block of text with red background. What should I do?
-
<div class="Text">
+
</h3>
-
<h2>Bio 1 Person</h2>
+
<p>Don&#39;t worry, everything is under control. For the DNA binding to TALEs agent based model, wait for at least 30 seconds. If the problem persists, reset the current time to 1. For the kinetic models, use the plus/minus sign to change the parameters, or simply hit auto-run on the upper-right corner.
-
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam non dui rutrum, ultrices turpis ut, dignissim lectus. Aenean ac viverra urna. Praesent tempor rhoncus scelerisque. Pellentesque volutpat elementum tristique. Maecenas iaculis quam nunc, vel venenatis sapien pretium id. Nulla facilisi. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Maecenas adipiscing congue augue, at sagittis lorem pretium eu. Nullam sit amet lacinia neque, et luctus diam. Vestibulum porta adipiscing venenatis.</p>
+
</p>
-
</div>
+
 
-
</div>
+
</section>
-
<div id="Bio2" class="Info">
+
-
<div class="InfoImg"><img src="BigPic2.jpg"></div>
+
-
<div class="Text">
+
-
<h2>Wm. Keith van der Meulen</h2>
+
-
<h3>Electrical &#38; Computer Engineering (2nd Year)</h3>
+
-
<p>This summer, I have been responsible for building the physical prototypes for our system and designing and coding this website. I am pursuing a career in aeronautical robotics R&D, so I have found my time working in a research setting with iGEM this year very valuable. Besides staying up until 2 a.m. coding, I also spend my time running <a href="http://www.fosterbikes.com" target="_blank">Foster Bikes</a>, a non-profit, Seattle-based company I co-founded. In my free time, I enjoy hiking, backpacking , skiing, and trying to have this weird thing non-engineers call a &#34;social life&#34;.</p>
+
-
<h3><a href="http://www.linkedin.com/in/wkeithvan" target="_blank">Click Here To View My LinkedIn Profile</a></h3>
+
-
</div>
+
-
</div>
+
-
<div id="Bio3" class="Info">
+
-
<div class="InfoImg"><img src="BigPic2.jpg"></div>
+
-
<div class="Text">
+
-
<h2>Bio 3 Person</h2>
+
-
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam non dui rutrum, ultrices turpis ut, dignissim lectus. Aenean ac viverra urna. Praesent tempor rhoncus scelerisque. Pellentesque volutpat elementum tristique. Maecenas iaculis quam nunc, vel venenatis sapien pretium id. Nulla facilisi. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Maecenas adipiscing congue augue, at sagittis lorem pretium eu. Nullam sit amet lacinia neque, et luctus diam. Vestibulum porta adipiscing venenatis.</p>
+
-
</div>
+
-
</div>
+
-
<div id="Bio4" class="Info">
+
-
<div class="InfoImg"><img src="BigPic2.jpg"></div>
+
-
<div class="Text">
+
-
<h2>Bio 4 Person</h2>
+
-
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam non dui rutrum, ultrices turpis ut, dignissim lectus. Aenean ac viverra urna. Praesent tempor rhoncus scelerisque. Pellentesque volutpat elementum tristique. Maecenas iaculis quam nunc, vel venenatis sapien pretium id. Nulla facilisi. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Maecenas adipiscing congue augue, at sagittis lorem pretium eu. Nullam sit amet lacinia neque, et luctus diam. Vestibulum porta adipiscing venenatis.</p>
+
-
</div>
+
-
</div>
+
-
<div id="Bio5" class="Info">
+
-
<div class="InfoImg"><img src="BigPic2.jpg"></div>
+
-
<div class="Text">
+
-
<h2>Bio 5 Person</h2>
+
-
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam non dui rutrum, ultrices turpis ut, dignissim lectus. Aenean ac viverra urna. Praesent tempor rhoncus scelerisque. Pellentesque volutpat elementum tristique. Maecenas iaculis quam nunc, vel venenatis sapien pretium id. Nulla facilisi. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Maecenas adipiscing congue augue, at sagittis lorem pretium eu. Nullam sit amet lacinia neque, et luctus diam. Vestibulum porta adipiscing venenatis.</p>
+
-
</div>
+
-
</div>
+
-
<div id="Bio6" class="Info">
+
-
<div class="InfoImg"><img src="BigPic2.jpg"></div>
+
-
<div class="Text">
+
-
<h2>Bio 6 Person</h2>
+
-
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam non dui rutrum, ultrices turpis ut, dignissim lectus. Aenean ac viverra urna. Praesent tempor rhoncus scelerisque. Pellentesque volutpat elementum tristique. Maecenas iaculis quam nunc, vel venenatis sapien pretium id. Nulla facilisi. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Maecenas adipiscing congue augue, at sagittis lorem pretium eu. Nullam sit amet lacinia neque, et luctus diam. Vestibulum porta adipiscing venenatis.</p>
+
-
</div>
+
-
</div>
+
-
<div id="Bio7" class="Info">
+
-
<div class="InfoImg"><img src="BigPic2.jpg"></div>
+
-
<div class="Text">
+
-
<h2>Bio 7 Person</h2>
+
-
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam non dui rutrum, ultrices turpis ut, dignissim lectus. Aenean ac viverra urna. Praesent tempor rhoncus scelerisque. Pellentesque volutpat elementum tristique. Maecenas iaculis quam nunc, vel venenatis sapien pretium id. Nulla facilisi. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Maecenas adipiscing congue augue, at sagittis lorem pretium eu. Nullam sit amet lacinia neque, et luctus diam. Vestibulum porta adipiscing venenatis.</p>
+
-
</div>
+
-
</div>
+
-
<div id="Bio8" class="Info">
+
-
<div class="InfoImg"><img src="BigPic2.jpg"></div>
+
-
<div class="Text">
+
-
<h2>Bio 8 Person</h2>
+
-
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam non dui rutrum, ultrices turpis ut, dignissim lectus. Aenean ac viverra urna. Praesent tempor rhoncus scelerisque. Pellentesque volutpat elementum tristique. Maecenas iaculis quam nunc, vel venenatis sapien pretium id. Nulla facilisi. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Maecenas adipiscing congue augue, at sagittis lorem pretium eu. Nullam sit amet lacinia neque, et luctus diam. Vestibulum porta adipiscing venenatis.</p>
+
-
</div>
+
-
</div>
+
-
<div id="Bio9" class="Info">
+
-
<div class="InfoImg"><img src="BigPic2.jpg"></div>
+
-
<div class="Text">
+
-
<h2>Bio 9 Person</h2>
+
-
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam non dui rutrum, ultrices turpis ut, dignissim lectus. Aenean ac viverra urna. Praesent tempor rhoncus scelerisque. Pellentesque volutpat elementum tristique. Maecenas iaculis quam nunc, vel venenatis sapien pretium id. Nulla facilisi. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Maecenas adipiscing congue augue, at sagittis lorem pretium eu. Nullam sit amet lacinia neque, et luctus diam. Vestibulum porta adipiscing venenatis.</p>
+
-
</div>
+
-
</div>
+
-
</div>
+
-
</div>
+
-
</body>
+
</html>
</html>

Latest revision as of 03:19, 28 September 2013

Quantitative App

DNA binding to TALEs

The positive DNA's are colored red, negative DNA is green, TALEs are black and after binding (i.e. saturation) they turn blue. The sliders under "global settings"€ are parameters needed before the simulation runs. Given that a simulation can take 30 seconds to complete, they should not be changed frequently as it will take longer to show the results. The sliders under "€œdisplay settings"€ are parameters needed after the simulation runs. Their responses are much faster and are best played by clicking on the plus sign to the right and hit "€œPlay". If you only see a grey box, you may need to install the Mathematica CDF Player. The download link can be found here. Otherwise, the data from our model, as well as images of the app we designed, can be found on the quantitative modelling page.

Enzyme kinetics of horseradish peroxidase

Enzyme kinetics of beta-galactosidase

Frequently Asked Questions

1. Can I see your code?

Sure! Here are DNA binding to TALEs agent based model, horseradish peroxidase kinetic model, and beta-galactosidase kinetic model.

2. I see a block of text with red background. What should I do?

Don't worry, everything is under control. For the DNA binding to TALEs agent based model, wait for at least 30 seconds. If the problem persists, reset the current time to 1. For the kinetic models, use the plus/minus sign to change the parameters, or simply hit auto-run on the upper-right corner.

Retrieved from "http://2013.igem.org/Team:Calgary/TestPage"