Difference between revisions of "Team:TAS Taipei/Model"

(Blanked the page)
Line 1: Line 1:
{{TAS Taipei/CSS2}} {{TAS Taipei/Bootstrap}} {{TAS Taipei/BootstrapJS}}
 
<html lang="en">
 
  
<head>
 
    <meta charset="UTF-8">
 
    <title>About Us</title>
 
    <link href='http://fonts.googleapis.com/css?family=Lato' rel='stylesheet' type='text/css'>
 
    <style type='text/css'>
 
        #top_title,
 
        #sideMenu {
 
            display: none !important;
 
        }
 
 
        #content {
 
            width: 100%;
 
            margin: 0;
 
            padding: 0;
 
            background: #f3f4f4;
 
        }
 
 
        .cv {
 
            box-shadow: 100px 0px 0 0px #fc9d9a;
 
        }
 
 
        .this_border {
 
            background-color: #fc9d9a;
 
        }
 
 
    </style>
 
</head>
 
 
<body>
 
    <div class="return">
 
        <h1>X</h1>
 
    </div>
 
    <div class="yellow">
 
        <div class="box right">
 
            <div class="box2 right project" href="https://2017.igem.org/Team:TAS_Taipei/Background">
 
                <img src="https://static.igem.org/mediawiki/2017/0/00/T--TAS_Taipei--Project_C.png" id="dna">
 
                <h6 class="navCap">Project</h6>
 
            </div>
 
            <div class="box2 right experiment" href="https://2017.igem.org/Team:TAS_Taipei/Experimental_Summary">
 
                <img src="https://static.igem.org/mediawiki/2017/b/b0/T--TAS_Taipei--Exp_C.png" id="dna">
 
                <h6 class="navCap">Experiments</h6>
 
            </div>
 
            <div class="box2 right modeling" href="https://2017.igem.org/Team:TAS_Taipei/Model">
 
                <img src="https://static.igem.org/mediawiki/2017/b/be/T--TAS_Taipei--Modeling_C.png" id="dna">
 
                <h6 class="navCap">Modeling</h6>
 
            </div>
 
            <div class="box2 right prototype" href="https://2017.igem.org/Team:TAS_Taipei/Applied_Design">
 
                <img src="https://static.igem.org/mediawiki/2017/2/2e/T--TAS_Taipei--Prototype_C.png" id="dna">
 
                <h6 class="navCap">Prototype</h6>
 
            </div>
 
            <div class="box2 right policy" href="https://2017.igem.org/Team:TAS_Taipei/Human_Practices">
 
                <img src="https://static.igem.org/mediawiki/2017/4/42/T--TAS_Taipei--HP2_C.png" id="dna">
 
                <h6 class="navCap">Human Practices</h6>
 
            </div>
 
            <div class="box2 right biosafety" href="https://2017.igem.org/Team:TAS_Taipei/Safety">
 
                <img src="https://static.igem.org/mediawiki/2017/b/b8/T--TAS_Taipei--Biosafety_C.png" id="dna">
 
                <h6 class="navCap">Safety</h6>
 
            </div>
 
            <div class="box2 right about" href="https://2017.igem.org/Team:TAS_Taipei/Team">
 
                <img src="https://static.igem.org/mediawiki/2017/1/1a/T--TAS_Taipei--About_Us_C.png" id="dna">
 
                <h6 class="navCap">About Us</h6>
 
            </div>
 
            <div class="box2 right acknowledgments" href="https://2017.igem.org/Team:TAS_Taipei/Attributions">
 
                <img src="https://static.igem.org/mediawiki/2017/5/52/T--TAS_Taipei--Attributions_C.png" id="dna">
 
                <h6 class="navCap">Attributions</h6>
 
            </div>
 
        </div>
 
        <div class="blue">
 
            <div class="box3 left project" href="https://2017.igem.org/Team:TAS_Taipei/Background">
 
                <h1>Project</h1>
 
            </div>
 
            <div class="box3 left experiment" href="https://2017.igem.org/Team:TAS_Taipei/Experimental_Summary">
 
                <h1>Experiment</h1>
 
            </div>
 
            <div class="box3 left modeling" href="https://2017.igem.org/Team:TAS_Taipei/Model">
 
                <h1>Modeling</h1>
 
            </div>
 
            <div class="box3 left prototype" href="https://2017.igem.org/Team:TAS_Taipei/Applied_Design">
 
                <h1>Prototype</h1>
 
            </div>
 
            <div class="box3 left policy" href="https://2017.igem.org/Team:TAS_Taipei/Human_Practices">
 
                <h1>Human Practice</h1>
 
            </div>
 
            <div class="box3 left biosafety" href="https://2017.igem.org/Team:TAS_Taipei/Safety">
 
                <h1>Safety</h1>
 
            </div>
 
            <div class="box3 left about" href="https://2017.igem.org/Team:TAS_Taipei/Team">
 
                <h1>About Us</h1>
 
            </div>
 
            <div class="box3 left acknowledgments" href="https://2017.igem.org/Team:TAS_Taipei/Attributions">
 
                <h1>Attributions</h1>
 
            </div>
 
        </div>
 
    </div>
 
    <box class="home">
 
        <img src="https://static.igem.org/mediawiki/2017/2/2b/T--TAS_Taipei--3home.svg" alt="Home" id="home" onclick="location.href='https://2017.igem.org/Team:TAS_Taipei';" style="cursor: pointer;">
 
    </box>
 
    <!--全版面大型看板開始-->
 
    <div class="jumbotron" id="modeling-jumbo">
 
        <div class="container">
 
            <h1>Modeling</h1>
 
            <h4>Computational Biology provides us insight on how to apply experimental data to real world applications!</h4>
 
        </div>
 
        <a href="#cv"><img src="https://static.igem.org/mediawiki/2017/4/4a/T--TAS_Taipei--Chevron_500px_200ppi.png" alt="test" id="chevron"></a>
 
    </div>
 
    <!--全版面大型看板結尾-->
 
    <div class="cv" id="cv">
 
        <div class="row">
 
            <nav class="pageNav col-lg-1" id="navbar">
 
                <ul class="nav">
 
                    <li>
 
                        <a href="#Intro" class="pageNavBig">INTRODUCTION</a>
 
                    </li>
 
                    <li>
 
                        <a href="#PR" class="pageNavBig">PROTEORHODOPSIN TRAPPING MODEL</a>
 
                    </li>
 
                    <li>
 
                        <a href="#LRI" class="pageNavSm">Ligand-receptor interaction</a>
 
                    </li>
 
                    <li>
 
                        <a href="#bind" class="pageNavSm">Binding Constants</a>
 
                    </li>
 
                    <li>
 
                        <a href="#app" class="pageNavSm">Example Application</a>
 
                    </li>
 
                    <li>
 
                        <a href="#calc" class="pageNavSm">Calculations</a>
 
                    </li>
 
                    <li>
 
                        <a href="#bio" class="pageNavBig">BIOFILM TRAPPING MODEL</a>
 
                    </li>
 
                    <li>
 
                        <a href="#TR" class="pageNavSm">Biofilm/NP Trapping</a>
 
                    </li>
 
                    <li>
 
                        <a href="#sig" class="pageNavSm">Trapping Capacity</a>
 
                    </li>
 
                    <li>
 
                        <a href="#SAdet" class="pageNavSm">Trapping efficiency</a>
 
                    </li>
 
                    <li>
 
                        <a href="#BioResults" class="pageNavSm">Example Application</a>
 
                    </li>
 
                    <li>
 
                        <a href="#Ref" class="pageNavBig">REFERENCES</a>
 
                    </li>
 
                </ul>
 
            </nav>
 
            <div class="white col-lg-2">
 
                hi
 
            </div>
 
            <div class="col-lg-10">
 
                <!-- header -->
 
                <header>
 
                    <div class="row">
 
                        <h1 class="name col-lg-12">MODELING</h1>
 
                    </div>
 
                    <div class="row">
 
                        <h4 class="para col-lg-12">
 
                            Our model aims to facilitate the implementation of our proteorhodopsin (PR)-expressing bacteria and biofilm prototype in wastewater treatment plants (WWTPs). Using variables which are specific to any WWTP (such as flow rate and water retention time in each tank), we can determine the amount of bacteria or surface area of biofilm needed to reduce nanoparticle concentration in the treated effluent.
 
                        </h4>
 
                    </div>
 
                    <div class="this_border row"></div>
 
                </header>
 
                <section class="main">
 
                    <div class="row" id="Intro">
 
                        <h1 class="col-lg-12 title2">INTRODUCTION</h1>
 
                    </div>
 
                    <div class="row">
 
                        <h4 class="para col-lg-12">
 
                            filler text
 
                        </h4>
 
                    </div>
 
                    <div class="row" id="PR">
 
                        <h1 class="title2 col-lg-12">PROTEORHODOPSIN TRAPPING MODEL</h1>
 
                    </div>
 
                    <div class="row" id="LRI">
 
                        <h1 class="section-title col-lg-12">Proteorhodopsin and citrate binding modeled as a ligand-receptor interaction</h1>
 
                    </div>
 
                    <div class="row" id="bind">
 
                        <h1 class="section-title col-lg-12">Determining NP binding rate (kon) and dissociation rate (koff) constants using experimental data</h1>
 
                    </div>
 
                    <div class="row" id="app">
 
                        <h1 class="section-title col-lg-12">Example Application of Completed Model</h1>
 
                    </div>
 
                    <div class="row">
 
                        <h4 class="para col-lg-12">
 
                                <table>
 
                                    <tbody>
 
                                        <tr>
 
                                            <td>Initial NP Concentration (micromolar)</td>
 
                                            <td><input type="number" id="L" value="0"></td>
 
                                        </tr>
 
                                        <tr>
 
                                            <td>Initial Bacteria Concentration (# of cells/microliter)</td>
 
                                            <td><input type="number" id="R" value="0"></td>
 
                                        </tr>
 
                                        <tr>
 
                                            <td>Initial NP-PR complex concentration (usually 0 at the start, micromolar)</td>
 
                                            <td><input type="number" id="C" value="0"></td>
 
                                        </tr>
 
                                        <tr>
 
                                            <td>Amount of time that can be used for the process (hours)</td>
 
                                            <td><input type="number" id="t" value="0"></td>
 
                                        </tr>
 
                                        <tr>
 
                                            <td><button onclick = "calculate2()">Calculate!</button></td>
 
                                        </tr>
 
                                        <tr><td colspan=2>Resulting NP Concentration (micromolar): <span id="NPResultConc">&nbsp;&nbsp;&nbsp;</span>
 
                                        </tr>
 
                                    </tbody>
 
                                </table>
 
                            </form>
 
                        </h4>
 
                    </div>
 
                    <div class="row">
 
                        <h4 class="para col-lg-12">
 
                                <table>
 
                                    <tbody>
 
                                        <tr>
 
                                            <td>Initial NP Concentration (micromolar)</td>
 
                                            <td><input type="number" id="Ltwo" value="0"></td>
 
                                        </tr>
 
                                        <tr>
 
                                            <td>Target NP Concentration (micromolar)</td>
 
                                            <td><input type="number" id="targetL" value="0"></td>
 
                                        </tr>
 
                                        <tr>
 
                                            <td>Initial NP-PR complex concentration (usually 0 at the start, micromolar)</td>
 
                                            <td><input type="number" id="Ctwo" value="0"></td>
 
                                        </tr>
 
                                        <tr>
 
                                            <td>Retention Time (the amount of time water stays in the tank, hours)</td>
 
                                            <td><input type="number" id="ttwo" value="0"></td>
 
                                        </tr>
 
                                        <tr>
 
                                            <td><button onclick = "calculate3()">Calculate!</button></td>
 
                                        </tr>
 
                                        <tr><td colspan=2>Initial Bacteria Concentration Needed (# of bacteria/microliter):
 
<span id="BacteriaResultConc">&nbsp;&nbsp;&nbsp;</span>
 
                                        </tr>
 
                                    </tbody>
 
                                </table>
 
                            </form>
 
                        </h4>
 
                    </div>
 
                    <div class="row" id="calc">
 
                        <h1 class="section-title col-lg-12">Calculations</h1>
 
                    </div>
 
                    <div class="row" id="bio">
 
                        <h1 class="title2 col-lg-12">BIOFILM TRAPPING MODEL</h1>
 
                    </div>
 
                    <div class="row" id="TR">
 
                        <h1 class="section-title col-lg-12">Evaluating the trapping rate through the change in substrate concentration and volumetric flow rate</h1>
 
                    </div>
 
                    <div class="row" id="sig">
 
                        <h1 class="section-title col-lg-12">Determining the significance of different factors</h1>
 
                    </div>
 
                    <div class="row" id="SAdet">
 
                        <h1 class="section-title col-lg-12">Surface Area</h1>
 
                    </div>
 
                    <div class="row" id="BioResults">
 
                        <h1 class="section-title col-lg-12">Example Application</h1>
 
                    </div>
 
                    <div class="row">
 
                        <h4 class="para col-lg-12">
 
                                <table>
 
                                    <tbody>
 
                                        <tr>
 
                                            <td>Initial volume of clarifier tank (L)</td>
 
                                            <td><input type="number" id="vol_i" value="0"></td>
 
                                        </tr>
 
                                        <tr>
 
                                            <td>Final volume of clarifier tank (L)</td>
 
                                            <td><input type="number" id="vol_f" value="0"></td>
 
                                        </tr>
 
                                        <tr>
 
                                            <td>Initial concentration of NP in tank (micromolar)</td>
 
                                            <td><input type="number" id="conc_i" value="0"></td>
 
                                        </tr>
 
                                        <tr>
 
                                            <td>Targeted final concentration on NP in tank (micromolar)</td>
 
                                            <td><input type="number" id="conc_f" value="0"></td>
 
                                        </tr>
 
                                        <tr>
 
                                            <td>Vertical velocity of water (or velocity of water in contact with biofilm, cm/min)</td>
 
                                            <td><input type="number" id="v" value="0"></td>
 
                                        </tr>
 
                                        <tr>
 
                                            <td>Time for biofilm to be in contact with NP solution (minutes)</td>
 
                                            <td><input type="number" id="time" value="0"></td>
 
                                        </tr>
 
                                        <tr>
 
                                            <td><button onclick = "calculate()">Calculate!</button></td>
 
                                        </tr>
 
                                        <tr><td colspan=2>Surface area of biofilm needed (cm<sup>2</sup>): <span id="SA">&nbsp;&nbsp;&nbsp;</span>
 
                                        </tr>
 
                                    </tbody>
 
                                </table>
 
                            </form>
 
                        </h4>
 
                    </div>
 
                    <div class="row" id="Ref">
 
                        <h1 class="title2 col-lg-12">REFERENCES</h1>
 
                    </div>
 
                    <div class="row">
 
                        <h4 class="para col-lg-12">
 
                            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Est sit odit dolorum illum nemo harum voluptatem sapiente consequuntur hic, earum quos facilis ea magnam, laudantium ipsam. Inventore labore non, accusantium nemo? Similique optio praesentium ad aliquam illo, ipsum, accusantium explicabo architecto molestias fugiat maiores. Optio pariatur, aliquam quia commodi dignissimos?
 
                        </h4>
 
                    </div>
 
                </section>
 
            </div>
 
        </div>
 
    </div>
 
    <script>
 
        $("a").on('click', function(event) {
 
            if (this.hash !== "") {
 
                event.preventDefault();
 
                var hash = this.hash;
 
                $('html, body').animate({
 
                    scrollTop: $(hash).offset().top
 
                }, 300, function() {
 
                    // Add hash (#) to URL when done scrolling (default click behavior)
 
                    window.location.hash = hash;
 
                });
 
            }
 
        });
 
        calculate = function(){
 
            var vol_i = document.getElementById("vol_i").value;
 
            var vol_f = document.getElementById("vol_f").value;
 
            var conc_i = document.getElementById("conc_i").value;
 
            var conc_f = document.getElementById("conc_f").value;
 
            var v = document.getElementById("v").value;
 
            var t = document.getElementById("time").value;
 
            var C_eff = 0.000190954;
 
            alert(C_eff);
 
            var test = 1000*((vol_i*conc_i)-(conc_f*vol_f))/(v*conc_i*C_eff*t);
 
            alert(test);
 
            document.getElementById("SA").innerHTML = test;
 
        }
 
        calculate2 = function(){
 
            var L = document.getElementById("L").value;
 
            var R = document.getElementById("R").value;
 
            var C = document.getElementById("C").value;
 
            var t = document.getElementById("t").value;
 
            var tStep = 0.1;
 
            var kOn = 0.00000035;
 
            var kOff = 0.32;
 
            var dcdt = kOn*L*R - kOff*C;
 
 
            for(var i = 0; i<(t/tStep); i++){
 
                dcdt = Math.round(((kOn*L*R)-(kOff*C))*10000000)/10000000;
 
                L = Math.round((L-(tStep*dcdt))*10000000)/10000000;
 
                R = Math.round((R-(tStep*dcdt))*10000000)/10000000;
 
                C = Math.round((C+(tStep*dcdt))*10000000)/10000000;
 
            }
 
 
            document.getElementById("NPResultConc").innerHTML = L;
 
        }
 
        calculate3 = function(){
 
            var L = 0;
 
            var StartL = document.getElementById("Ltwo").value;
 
            var targetL = document.getElementById("targetL").value;
 
            var StartR = 20000*L;
 
            var C = document.getElementById("Ctwo").value;
 
            var t = document.getElementById("ttwo").value;
 
            var tStep = 0.1;
 
            var kOn = 0.00000035;
 
            var kOff = 0.32;
 
            var dcdt = kOn*L*R - kOff*C;
 
            var R = 0;
 
 
            while(true){
 
                R = StartR;
 
                L = StartL;
 
                for(var i = 0; i<(t/tStep); i++){
 
                    dcdt = Math.round(((kOn*L*R)-(kOff*C))*10000000)/10000000;
 
                    L = Math.round((L-(tStep*dcdt))*10000000)/10000000;
 
                    R = Math.round((R-(tStep*dcdt))*10000000)/10000000;
 
                    C = Math.round((C+(tStep*dcdt))*10000000)/10000000;
 
                }
 
                if(Math.abs(L-targetL)>=0.0001){
 
                    if((L-targetL)>0){
 
                        StartR += 100;
 
                    }else{
 
                        StartR -= 100;
 
                    }
 
                }else{
 
                    break;
 
                }
 
            }
 
            document.getElementById("BacteriaResultConc").innerHTML = StartR;
 
        }
 
        $(function() {
 
            $('.yellow').removeClass('active');
 
            $('.yellow').mouseenter(function() {
 
                var windowsize = $(window).width();
 
                if (windowsize > 1020) {
 
                    //if the window is greater than 1020px wide then hover
 
                    $('.yellow').addClass('active');
 
                }
 
                $('.navCap').addClass('deactive');
 
            });
 
 
            $('.yellow').mouseleave(function() {
 
                var windowsize = $(window).width();
 
                if (windowsize > 1020) {
 
                    //if the window is greater than 1020px wide then hover
 
                    $('.yellow').removeClass('active');
 
                }
 
                $('.navCap').removeClass('deactive');
 
            });
 
 
            $('.box2').click(function() {
 
                var windowsize = $(window).width();
 
                if (windowsize < 1020) {
 
                    //if the window is less than 1020px wide then turn on click for mobile.
 
                    if ($('.yellow').hasClass('active')) {
 
                        window.location = $(this).attr('href');
 
                    } else {
 
                        $('.yellow').addClass('active');
 
                        $('.return').addClass('active');
 
                        $('.home').addClass('deactive');
 
                    }
 
                } else {
 
                    window.location = $(this).attr('href');
 
                }
 
 
            })
 
 
            $('.box3').click(function() {
 
                var windowsize = $(window).width();
 
                if (windowsize < 1020) {
 
                    //if the window is less than 1020px wide then turn on click for mobile.
 
                    if ($('.yellow').hasClass('active')) {
 
                        window.location = $(this).attr('href');
 
                    } else {
 
                        $('.yellow').addClass('active');
 
                        $('.return').addClass('active');
 
                        $('.home').addClass('deactive');
 
                    }
 
                } else {
 
                    window.location = $(this).attr('href');
 
                }
 
            })
 
 
            $('.return').click(function() {
 
                $('.yellow').removeClass('active');
 
                $('.return').removeClass('active');
 
                $('.home').removeClass('deactive');
 
            })
 
 
            $('.cv').click(function() {
 
                $('.yellow').removeClass('active');
 
                $('.return').removeClass('active');
 
                $('.home').removeClass('deactive');
 
            })
 
            $('.jumbotron').mouseenter(function() {
 
                $('.project').removeClass('active');
 
                $('.experiment').removeClass('active');
 
                $('.modeling').removeClass('active');
 
                $('.prototype').removeClass('active');
 
                $('.biosafety').removeClass('active');
 
                $('.about').removeClass('active');
 
                $('.policy').removeClass('active');
 
                $('.acknowledgments').removeClass('active');
 
            });
 
 
            $('.cv').mouseenter(function() {
 
                $('.project').removeClass('active');
 
                $('.experiment').removeClass('active');
 
                $('.modeling').removeClass('active');
 
                $('.prototype').removeClass('active');
 
                $('.biosafety').removeClass('active');
 
                $('.about').removeClass('active');
 
                $('.policy').removeClass('active');
 
                $('.acknowledgments').removeClass('active');
 
            });
 
 
            $('.project').mouseenter(function() {
 
                $('.project').addClass('active');
 
                $('.experiment').removeClass('active');
 
                $('.modeling').removeClass('active');
 
                $('.prototype').removeClass('active');
 
                $('.biosafety').removeClass('active');
 
                $('.about').removeClass('active');
 
                $('.policy').removeClass('active');
 
                $('.acknowledgments').removeClass('active');
 
            });
 
 
            $('.experiment').mouseenter(function() {
 
                $('.project').removeClass('active');
 
                $('.experiment').addClass('active');
 
                $('.modeling').removeClass('active');
 
                $('.prototype').removeClass('active');
 
                $('.biosafety').removeClass('active');
 
                $('.about').removeClass('active');
 
                $('.policy').removeClass('active');
 
                $('.acknowledgments').removeClass('active');
 
            });
 
 
            $('.modeling').mouseenter(function() {
 
                $('.project').removeClass('active');
 
                $('.experiment').removeClass('active');
 
                $('.modeling').addClass('active');
 
                $('.prototype').removeClass('active');
 
                $('.biosafety').removeClass('active');
 
                $('.about').removeClass('active');
 
                $('.policy').removeClass('active');
 
                $('.acknowledgments').removeClass('active');
 
            });
 
 
            $('.prototype').mouseenter(function() {
 
                $('.project').removeClass('active');
 
                $('.experiment').removeClass('active');
 
                $('.modeling').removeClass('active');
 
                $('.prototype').addClass('active');
 
                $('.biosafety').removeClass('active');
 
                $('.about').removeClass('active');
 
                $('.policy').removeClass('active');
 
                $('.acknowledgments').removeClass('active');
 
            });
 
 
            $('.biosafety').mouseenter(function() {
 
                $('.project').removeClass('active');
 
                $('.experiment').removeClass('active');
 
                $('.modeling').removeClass('active');
 
                $('.prototype').removeClass('active');
 
                $('.biosafety').addClass('active');
 
                $('.about').removeClass('active');
 
                $('.policy').removeClass('active');
 
                $('.acknowledgments').removeClass('active');
 
            });
 
 
            $('.about').mouseenter(function() {
 
                $('.project').removeClass('active');
 
                $('.experiment').removeClass('active');
 
                $('.modeling').removeClass('active');
 
                $('.prototype').removeClass('active');
 
                $('.biosafety').removeClass('active');
 
                $('.about').addClass('active');
 
                $('.policy').removeClass('active');
 
                $('.acknowledgments').removeClass('active');
 
            });
 
 
            $('.policy').mouseenter(function() {
 
                $('.project').removeClass('active');
 
                $('.experiment').removeClass('active');
 
                $('.modeling').removeClass('active');
 
                $('.prototype').removeClass('active');
 
                $('.biosafety').removeClass('active');
 
                $('.about').removeClass('active');
 
                $('.policy').addClass('active');
 
                $('.acknowledgments').removeClass('active');
 
            });
 
 
            $('.acknowledgments').mouseenter(function() {
 
                $('.project').removeClass('active');
 
                $('.experiment').removeClass('active');
 
                $('.modeling').removeClass('active');
 
                $('.prototype').removeClass('active');
 
                $('.biosafety').removeClass('active');
 
                $('.about').removeClass('active');
 
                $('.policy').removeClass('active');
 
                $('.acknowledgments').addClass('active');
 
            });
 
 
        })
 
 
    </script>
 
</body>
 
 
</html>
 

Revision as of 03:59, 30 October 2017