Difference between revisions of "Team:UCL/InterLab"

(Prototype team page)
 
Line 1: Line 1:
−
{{UCL}}
+
{{Team:UCL/CSS}}
−
<html>
+
  
 +
<!DOCTYPE html>
 +
<html lang="en">
 +
<head>
 +
    <script src="http://www.google.com/jsapi" type="text/javascript"></script>
  
−
<div class="column full_size judges-will-not-evaluate">
+
    <script type="text/javascript">google.load("jquery", "1.3.2");</script>
−
<h3>★  ALERT! </h3>
+
−
<p>This page is used by the judges to evaluate your team for the <a href="https://2017.igem.org/Judging/Medals">medal criterion</a> or <a href="https://2017.igem.org/Judging/Awards"> award listed above</a>. </p>
+
−
<p> Delete this box in order to be evaluated for this medal criterion and/or award. See more information at <a href="https://2017.igem.org/Judging/Pages_for_Awards"> Instructions for Pages for awards</a>.</p>
+
−
</div>
+
−
<div class="clear"></div>
+
  
−
<div class="column full_size">
+
    <meta charset="UTF-8">
−
<h1>InterLab</h1>
+
    <title>Interlab</title>
−
<h3>Bronze Medal Criterion #4</h3>
+
    <link rel="stylesheet" type="text/css" href="css/template.css">
−
<p><b>Standard Tracks:</b> Participate in the Interlab Measurement Study and/or improve the characterization of an existing BioBrick Part or Device and enter this information on that part's Main Page in the Registry. The part that you are characterizing must NOT be from a 2017 part number range.
+
 
−
<br><br>
+
    <!-- BOOTSTRAP -->
−
For teams participating in the <a href="https://2017.igem.org/Competition/InterLab_Study">InterLab study</a>, all work must be shown on this page.
+
    <!-- Latest compiled and minified CSS -->
 +
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
 +
 
 +
    <!-- jQuery library -->
 +
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
 +
 
 +
    <!-- Latest compiled JavaScript -->
 +
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
 +
 
 +
    <!-- a script that does the underlining for the side bar -->
 +
    <script>
 +
 
 +
        $(document).ready(function(){
 +
            //Take your div into one js variable
 +
            var s1 = $("#step1");
 +
            var s2 = $("#step2");
 +
            var s3 = $("#step3");
 +
 
 +
            //Take the current position (vertical position from top) of your div in the variable
 +
            var pos = s1.position();
 +
            var pos1 = s2.position();
 +
            var pos2 = s3.position();
 +
 
 +
            //Now when scroll event trigger do following
 +
            $(window).scroll(function () {
 +
 
 +
                scrollFunction()
 +
 
 +
                var windowpos = $(window).scrollTop();
 +
                //console.log(windowpos);
 +
 
 +
                //Now if you scroll more than 100 pixels vertically change the class to AfterScroll
 +
                if (windowpos >= (pos.top + 100)) {
 +
                    // div.addClass("AfterScroll");
 +
                    s2.removeClass("active-link");
 +
                    s1.addClass("active-link");
 +
                }
 +
 
 +
                if (windowpos >= (pos1.top + 750)) {
 +
                    // div1.addClass("AfterScroll");
 +
                    s1.removeClass("active-link");
 +
                    s3.removeClass("active-link");
 +
                    s2.addClass("active-link");
 +
 
 +
                }
 +
 
 +
                if (windowpos >= (pos2.top + 1100)) {
 +
                    //div2.addClass("AfterScroll");
 +
                    s2.removeClass("active-link");
 +
                    s3.addClass("active-link");
 +
                }
 +
 
 +
            });
 +
 
 +
            function scrollFunction() {
 +
                if (document.body.scrollTop > 50 || document.documentElement.scrollTop > 50) {
 +
                    document.getElementById("myBtn").style.display = "block";
 +
                } else {
 +
                    document.getElementById("myBtn").style.display = "none";
 +
                }
 +
            }
 +
 
 +
        });
 +
    </script>
 +
</head>
 +
 
 +
 
 +
<body data-spy="scroll" data-target="#side-index">
 +
 
 +
<div style="margin:0 !important; padding:0 !important" class="container-fluid">
 +
    <div id="top" class="row">
 +
 
 +
 
 +
        <img src="assets/logo-navbar.png" class="logo-top">
 +
 
 +
        <ul class="navy">
 +
            <li id="drop1" class="navy-link"><a href="#">PROJECT</a>
 +
                <ul class="navy-hidden">
 +
                    <li><a href="#" class="dropped">Description</a></li>
 +
                    <li><a href="#" class="dropped">Results</a></li>
 +
                    <li><a href="#" class="dropped">Parts</a></li>
 +
                    <li><a href="#" class="dropped">Gold Criteria</a></li>
 +
                    <li><a href="#" class="dropped">Interlab</a></li>
 +
 
 +
                </ul>
 +
            </li>
 +
 
 +
            <li id="drop" class="navy-link"><a href="#">HUMAN PRACTICES</a>
 +
                <ul class="navy-hidden">
 +
                    <li><a href="#" class="dropped">Overview</a></li>
 +
                    <li><a href="#" class="dropped">Public Engagement</a></li>
 +
                    <li><a href="#" class="dropped">Integrated Practices</a></li>
 +
                </ul>
 +
            </li>
 +
 
 +
            <li id="drop5" class="navy-link"><a href="#">MODELLING</a>
 +
                <ul class="navy-hidden">
 +
                    <li><a href="#" class="dropped">Overview</a></li>
 +
                    <li><a href="#" class="dropped">Barchitecture</a></li>
 +
                    <li><a href="#" class="dropped">Game of LIT</a></li>
 +
                    <li><a href="#" class="dropped">Mammalian</a></li>
 +
                    <li><a href="#" class="dropped">Light Bulb</a></li>
 +
                    <li><a href="#" class="dropped">Glossary</a></li>
 +
                </ul>
 +
            </li>
 +
 
 +
            <li id="drop3" class="navy-link"><a href="#">ENTREPRENEURSHIP</a>
 +
                <ul class="navy-hidden">
 +
                    <li><a href="#" class="dropped">Overview</a></li>
 +
                    <li><a href="#" class="dropped">Product</a></li>
 +
                    <li><a href="#" class="dropped">IP</a></li>
 +
                    <li><a href="#" class="dropped">Business Environment</a></li>
 +
                    <li><a href="#" class="dropped">Marketing</a></li>
 +
                    <li><a href="#" class="dropped">Management</a></li>
 +
                    <li><a href="#" class="dropped">Economic Appraisal</a></li>
 +
                </ul>
 +
            </li>
 +
 
 +
 
 +
            <li id="drop2" class="navy-link"><a href="#about">MEDALS</a>
 +
                <ul class="navy-hidden">
 +
                    <li><a href="#" class="dropped">Bronze</a></li>
 +
                    <li><a href="#" class="dropped">Silver</a></li>
 +
                    <li><a href="#" class="dropped">Gold</a></li>
 +
                </ul>
 +
            </li>
 +
 
 +
            <li id="drop6" class="navy-link"><a href="#about">PEOPLE</a>
 +
                <ul class="navy-hidden">
 +
                    <li><a href="#" class="dropped">Team</a></li>
 +
                    <li><a href="#" class="dropped">Collaborations</a></li>
 +
                    <li><a href="#" class="dropped">Attributions</a></li>
 +
                </ul></li>
 +
 
 +
            <li id="drop4" class="navy-link"><a href="#">NOTE BOOK</a>
 +
                <ul class="navy-hidden">
 +
                    <li><a href="#" class="dropped">Protocols</a></li>
 +
                    <li><a href="#" class="dropped">Safety</a></li>
 +
                    <li><a href="#" class="dropped">Stuff</a></li>
 +
                </ul>
 +
            </li>
 +
 
 +
        </ul>
 +
 
 +
    </div>
  
−
</p>
 
 
</div>
 
</div>
  
 +
<div class="container-fluid">
 +
    <div class="row">
  
 +
        <!-- The side navbar -->
 +
        <nav id="side-index" class="col-sm-2">
 +
            <ul class="nav nav-stacked" data-spy="affix" data-offset-top="205">
 +
                <li id="step1" class="navy-link side-link"><a href="#section1">Why bother?</a></li>
 +
                <li id="step2" class="navy-link side-link"><a href="#section2">Results</a></li>
 +
                <li id="step3" class="navy-link side-link"><a href="#section3">Something something</a></li>
 +
            </ul>
 +
        </nav>
  
  
 +
        <div style="float: right !important" class="col-sm-10">
  
 +
            <div style="margin-top: 20px" class="text-section">
 +
 +
                <h1 class="title">Interlab</h1>
 +
 +
                <h2 class="subtitle">Why bother?</h2>
 +
 +
                <p class="text-content">To us, the interlab experiments represented a key principle to our project: reproducibility. The multipurpose applications of our light-induced technologies require every user to think about how reliable these light switches are, the methods that we use to measure their effectiveness and their intended purposes.</p>
 +
 +
                <p class="text-content">To standardize GFP (green fluorescent protein) measurements is one of the first steps towards transforming synthetic biology into a discipline more similar to engineering. We have fully enjoyed participating in iGEM’s interlab and hope to have successfully contributed to this global endeavour. </p>
 +
 +
                <p class="text-content">As iGEM provided all the methods and the protocols, here are graphs of our GFP measurement results.</p>
 +
 +
            </div>
 +
 +
 +
            <div class="text-section">
 +
                <h1 class="title">Results</h1>
 +
            </div>
 +
 +
        </div>
 +
 +
        <a href="#" id="myBtn" title="Go to top">Back to Top</a>
 +
 +
    </div>
 +
</div>
  
 +
</body>
  
 
</html>
 
</html>

Revision as of 22:46, 16 October 2017

<!DOCTYPE html> Interlab

Interlab

Why bother?

To us, the interlab experiments represented a key principle to our project: reproducibility. The multipurpose applications of our light-induced technologies require every user to think about how reliable these light switches are, the methods that we use to measure their effectiveness and their intended purposes.

To standardize GFP (green fluorescent protein) measurements is one of the first steps towards transforming synthetic biology into a discipline more similar to engineering. We have fully enjoyed participating in iGEM’s interlab and hope to have successfully contributed to this global endeavour.

As iGEM provided all the methods and the protocols, here are graphs of our GFP measurement results.

Results

Back to Top