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

(Prototype team page)
Line 1: Line 1:
−
{{TAS_Taipei}}
+
{{TAS Taipei/CSS}}
 
<html>
 
<html>
  
 +
<head>
 +
<title>Model - TAS Taipei iGEM Wiki</title>
 +
<style type='text/css'>
 +
      #top_title, #sideMenu{
 +
        display: none;
 +
      }
  
−
<div class="column full_size judges-will-not-evaluate">
+
      #content{
−
<h3>★  ALERT! </h3>
+
        width: 100%;
−
<p>This page is used by the judges to evaluate your team for the <a href="https://2016.igem.org/Judging/Medals">Attributions bronze criterion</a>. </p>
+
        margin: 0;
 +
        padding: 0;
 +
        background: #f3f4f4;}
  
 +
     
  
  
−
<p> Delete this box in order to be evaluated for this medal. See more information at <a href="https://2016.igem.org/Judging/Pages_for_Awards/Instructions"> Instructions for Pages for awards</a>.</p>
+
    </style>
−
</div>
+
</head>
  
 +
<body data-spy="scroll" data-target="#category_navbar">
 +
<link rel="shortcut icon" href="https://static.igem.org/mediawiki/2016/c/c6/T--TAS_Taipei--TAS_iGEM_Logo.png">
 +
<link href='http://fonts.googleapis.com/css?family=Lato' rel='stylesheet' type='text/css'>
  
 +
<link rel="stylesheet" href="https://2015.igem.org/Template:TAS_Taipei/css/bootstrap?action=raw&ctype=text/css">
  
  
  
 +
<script>localStorage.clear();</script>
 +
<script src="https://2015.igem.org/Template:TAS_Taipei/js/jquery?action=raw&ctype=text/javascript"></script>
 +
<script src='https://2015.igem.org/Template:TAS_Taipei/js/bootstrap?action=raw&ctype=text/javascript'></script>
 +
<script src="https://2015.igem.org/Template:TAS_Taipei/js/jquerySlides?action=raw&ctype=text/javascript"></script>
  
 +
<script type="text/javascript" async
 +
  src="https://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-MML-AM_CHTML">
 +
</script>
  
 +
<script type="text/x-mathjax-config">
 +
MathJax.Hub.Config({tex2jax: {inlineMath: [['$','$'], ['\\(','\\)']]}});
 +
</script>
  
−
<div class="column full_size">
+
<style type='text/css'>
 +
p{font-family: Lato !important; font-size:17px !important}
 +
h1{font-size:40-px !important;}
 +
body{font-family:Lato !important;}
 +
h3{font-size:25-px
 +
</style>
  
 +
<script>
 +
$(document).ready(function() {
 +
if(document.domain === "2016.igem.org")
 +
setTimeout(function() {
 +
$("style:eq(0)").remove();
 +
}, 500);
 +
});
 +
   
 +
   
 +
</script>
 +
   
  
−
<p> Each team must clearly attribute work done by the student team members on this page. The team must distinguish work done by the students from work done by others, including the host labs, advisors, instructors, and individuals not on the team roster. </p>
+
   
 +
<div class="container" style='z-index:10;position:relative;'>
 +
<div class="row center-block" style = "text-align: left;">
 +
<nav style='font-family:Lato;font-size:22px;background-color:#1C77C3;-webkit-transform: translateZ(0);z-index: 100;position: fixed;box-shadow: 0px 0px 10px black;'>
 +
<ul style='margin-left:0px'>
 +
<li class="dropdown">
 +
<a href="https://2016.igem.org/Team:TAS_Taipei/Description"><h4 class="dropdown-toggle disabled" data-toggle="dropdown"><b>PROJECT</b></h4></a>
 +
<div class="dropdown-menu">
 +
<div class='subcategories_container'>
 +
<div>
 +
<h5><a href="https://2016.igem.org/Team:TAS_Taipei/Description">Background</a></h5>
 +
</div>
 +
<div>
 +
<h5><a href="https://2016.igem.org/Team:TAS_Taipei/Achievements">Achievements</a></h5>
 +
</div>
 +
<div>
 +
<h5><a href="https://2016.igem.org/Team:TAS_Taipei/Collaborations">Collaborations</a></h5>
 +
</div>
 +
<div>
 +
<h5><a href="https://2016.igem.org/Team:TAS_Taipei/Parts">Parts</a></h5>
 +
</div>
 +
</div>
 +
<div style='height:140px;'>
 +
<img src="https://static.igem.org/mediawiki/2016/1/11/T--TAS_Taipei--TAS_Icon_Project.png">
 +
<h4><b>Cataracts</b> - the leading cause of blindness. Find out how we can non-invasively <b>treat</b> and <b>prevent</b> cataract formation.</b></h4>
 +
</div>
 +
 +
</div>
 +
</li>
 +
<li class="dropdown">
 +
<a href="https://2016.igem.org/Team:TAS_Taipei/Experimental_Summary"><h4 class='dropdown-toggle disabled' data-toggle="dropdown"><b>EXPERIMENTAL</b></h4></a>
 +
<div class="dropdown-menu">
 +
<div class='subcategories_container'>
 +
<div>
 +
<h5><a href="https://2016.igem.org/Team:TAS_Taipei/Experimental_Summary#lensmodel">Lens Cataract Model</a></h5>
 +
</div>
 +
<div>
 +
<h5><a href="https://2016.igem.org/Team:TAS_Taipei/Experimental_Summary#construct">Prevention and Treatment Constructs </a></h5>
 +
</div>
 +
<div>
 +
<h5><a href="https://2016.igem.org/Team:TAS_Taipei/Experimental_Summary#prototype">Delivery Prototype</a></h5>
 +
</div>
 +
<div>
 +
<h5><a href="https://2016.igem.org/Team:TAS_Taipei/Notebook">Notebook</a></h5>
 +
</div>
 +
</div>
 +
<div style='height:140px;'>
 +
<img src="https://static.igem.org/mediawiki/2016/b/b0/T--TAS_Taipei--TAS_Icon_Experiments.png">
 +
                        <h4>We build <b>constructs</b> to make our great ideas become reality. Follow along our discovery of exciting science!</h4>
 +
</div>
 +
</div>
 +
</li>
 +
<li class="dropdown">
 +
<a href="https://2016.igem.org/Team:TAS_Taipei/Model"><h4 class='dropdown-toggle disabled' data-toggle="dropdown"><b>MODEL</b></h4></a>
 +
<div class="dropdown-menu">
 +
<div class='subcategories_container'>
 +
<div>
 +
<h5><a href="https://2016.igem.org/Team:TAS_Taipei/Model#GSRFunc">GSR Function</a></h5>
 +
</div>
 +
<div>
 +
<h5><a href="https://2016.igem.org/Team:TAS_Taipei/Model#prototype">Prototype Delivery</a></h5>
 +
</div>
 +
<div>
 +
<h5><a href="https://2016.igem.org/Team:TAS_Taipei/Model#treatment">CH25H Treatment</a></h5>
 +
</div>
 +
<div>
 +
<h5><a href="https://2016.igem.org/Team:TAS_Taipei/Model#software">Calculator</a></h5>
 +
</div>
  
 +
</div>
 +
<div style='height:140px;'>
 +
<img src="https://static.igem.org/mediawiki/2016/c/ca/T--TAS_Taipei--TAS_Icon_Model.png">
 +
<h4><b>Computational Biology</b> provides us models that we cannot easily test experimentally. Click to find out the results of our modeling, and the math behind it!</h4>
 +
</div>
 +
</div>
 +
</li>
 +
<li class="dropdown">
 +
<a href="https://2016.igem.org/Team:TAS_Taipei/Human_Practices"><h4 class='dropdown-toggle disabled' data-toggle="dropdown"><b>HUMAN PRACTICE</b></h4></a>
 +
<div class="dropdown-menu">
 +
<div class='subcategories_container'>
 +
<div>
 +
<h5><a href="https://2016.igem.org/Team:TAS_Taipei/Human_Practices#research">Research</a></h5>
 +
</div>
 +
<div>
 +
<h5><a href="https://2016.igem.org/Team:TAS_Taipei/Human_Practices#outreach">Outreach</a></h5>
 +
</div>
 +
<div>
 +
<h5><a href="https://2016.igem.org/Team:TAS_Taipei/Human_Practices#impact">Impact</a></h5>
 +
</div>
 +
</div>
 +
<div style='height:140px;'>
 +
<img src="https://static.igem.org/mediawiki/2016/b/b9/T--TAS_Taipei--TAS_Icon_HP.png">
 +
<h4>We don't just grow cool bacteria. We make a <b>difference</b>. Find out how we tackled <b>social aspects</b> of this project.</h4>
 +
</div>
 +
</div>
 +
</li>
 +
<li class="dropdown">
 +
<a href="https://2016.igem.org/Team:TAS_Taipei/Safety"><h4 class='dropdown-toggle disabled' data-toggle="dropdown"><b>BIOSAFETY</b></h4></a>
 +
<div class="dropdown-menu">
 +
<div style='height:100px;'>
 +
<div class='subcategories_container'>
 +
<div>
 +
<h5><a href="https://2016.igem.org/Team:TAS_Taipei/Safety#overview">Overview</a></h5>
 +
</div>
 +
<div>
 +
<h5><a href="https://2016.igem.org/Team:TAS_Taipei/Safety#biosafety">Biosafety</a></h5>
 +
</div>
 +
<div>
 +
<h5><a href="https://2016.igem.org/Team:TAS_Taipei/Safety#riskreduction">Risk Reduction Methods</a></h5>
 +
</div>
 +
<div>
 +
<h5><a href="https://2016.igem.org/Team:TAS_Taipei/Safety#furtherquestion">Further Questions</a></h5>
 +
</div>
 +
</div>
 +
<img src="https://static.igem.org/mediawiki/2016/7/7e/T--TAS_Taipei--TAS_Icon_Safety.png">
 +
<h4><b>Safety first.</b> Especially in a lab. Here's how we maintained and investigated the integrity and security of our work environment.</h4>
 +
</div>
 +
</div>
 +
</li>
 +
<li class="dropdown">
 +
<a href="https://2016.igem.org/Team:TAS_Taipei/Team"><h4 class='dropdown-toggle disabled' data-toggle="dropdown"><b>TEAM</b></h4></a>
 +
<div class="dropdown-menu">
 +
<div class='subcategories_container'>
 +
<div>
 +
<h5><a href="https://2016.igem.org/Team:TAS_Taipei/Team#members">Members</a></h5>
 +
</div>
 +
<div>
 +
<h5><a href="https://2016.igem.org/Team:TAS_Taipei/Team#about">About</a></h5>
 +
</div>
 +
<div>
 +
<h5><a href="https://2016.igem.org/Team:TAS_Taipei/Attributions">Attributions</a></h5>
 +
</div>
 +
<div>
 +
<h5><a href="https://2016.igem.org/Team:TAS_Taipei/Wiki_Standard_Pages">Wiki Standard Pages</a></h5>
 +
</div>
 +
</div>
 +
<div style='height:140px;'>
 +
<img src="https://static.igem.org/mediawiki/2016/c/c6/T--TAS_Taipei--TAS_Icon_Team.png">
 +
<h4>Every iGEM project is the accumulation of an entire year's hard work by a group of cheerful students. <b>Meet the team!</b></h4>
 +
</div>
 +
</div>
 +
</li>
 +
</ul>
 +
</nav>
 
</div>
 
</div>
 +
<br>
 +
<br>
 +
<br>
 +
<div class="row center-block" style = "padding:10px;width:90%;background-color:#07BEB8;box-shadow:0px 0px 5px black">
 +
<div class="row" style = "text-align:center;">
 +
<div class="col-sm-2">
 +
<a href="https://2016.igem.org/Team:TAS_Taipei" style='text-decoration: none'><img src="https://static.igem.org/mediawiki/2016/c/c6/T--TAS_Taipei--TAS_iGEM_Logo.png
 +
" alt="" style="width: 100px;"></a>
 +
</div>
 +
<div class="col-sm-8" style='text-align:center;'>
 +
<a href="https://2016.igem.org/Team:TAS_Taipei" style='text-decoration: none;'>
 +
<h2 style="font-family:'Lato';letter-spacing:10px;color: white; font-size: 60px;  margin-top: 0;  margin-bottom: 0;"><b>
 +
C&#9678;UNTERACTS</b></h2>
 +
</a>
 +
</div>
 +
<div class="col-sm-2">
 +
<a href="https://igem.org/HS"><img src="https://static.igem.org/mediawiki/2016/6/6e/T--TAS_Taipei--TAS_Icon_Logo2.png" alt="" style="width: 100px;"></a>
 +
</div>
 +
</div>
 +
</div>
 +
<br>
 +
<div class="row card" id='bodycontainer' class='row'>
 +
<div class="col-sm-2" style='padding-left:8px;'>
 +
<div id="category_navbar">
 +
<ul class="nav nav-list" data-spy="affix" data-offset-top="160" style='-webkit-transform: translateZ(0);width:160px;margin-left:0' >
 +
<li><a href="#lensmodel">Lens Cataract Model</a></li>
 +
                        <ul>
 +
                            <li> <a href="#LensPrevention">Prevention</a></li>
 +
                            <li> <a href="#LensTreatment">Treatment</a></li>
 +
                        </ul>
 +
<li><a href="#construct">Construct</a></li>
 +
                        <ul>
 +
                            <li> <a href="#ConstructPrevention">Prevention</a></li>
 +
                            <li> <a href="#ConstructTreatment">Treatment</a></li>
 +
                        </ul>
 +
                        <li><a href="#prototype">Delivery Prototype</a></li>
 +
                        <ul>
 +
                            <li> <a href="#step1">Purification</a></li>
 +
                            <li> <a href="#step2">Nanoparticle</a></li>
 +
                            <li> <a href="#step2i">Encapsulation</a></li>
 +
                            <li> <a href="#step2ii">Release</a></li>
 +
                            <li> <a href="#step3">Application</a></li>
 +
                        </ul>
 +
</ul>
 +
</div>
 +
 +
</div>
 +
 +
 +
<div class="col-sm-10" style="padding-right:5%">
 +
<h1>Human Practice Summary</h1>
 +
                                   
 +
                  <div class = "row">
 +
              <div class="col-sm-12">
 +
        <h2 id = 'construct'>Research</h2>
 +
                            <div class="row">
 +
                               
 +
                                <div class="col-sm-12">
 +
                                <h3 id="ConstructPrevention"></h3>
 +
                                    <br>
 +
                                <h3>Professional Help</h3>
 +
                                <p>
 +
                                    In order to improve how we develop our prototype we needed to get in contact with experts in the fields of eye surgery and cataracts research. Our first step was to contact eye doctors to discuss any problems associated with current cataracts treatment. Finally, while developing our project we realized that cataracts is a major issue in pets and other animals as well as people. As a result, we contacted local veterinarians to discuss what pet owners do when their pets contract cataracts. As our project developed, we needed more specific information regarding our genes of interest, cataracts development, and our delivery mechanism. We contacted scientists doing research similar to our own to get their opinion on our projects progress.
 +
                                </p>
 +
                                </div>
 +
                               
 +
                            </div>
 +
                          <br><br>
 +
                            <div class="row">
 +
                                <div class="col-sm-12">
 +
                                    <h3 id="ConstructPrevention"></h3>
 +
                                        <br>
 +
                                    <h4>Contact with Eye Doctors</h4>
 +
                                    <p>
 +
                                        Eye doctors are on the front lines, delivering cataracts surgery, some privately and others for charity in organizations such as the Himalayan Cataracts Projects. We contacted local Taiwanese Eye Doctors to ask them about cataracts surgery. Here is a list of the doctors we contacted along with the information they provided:
 +
                                    </p>
 +
                                </div>
 +
                               
 +
                               
 +
                            </div>
 +
                            <div class="row">
 +
                                <div class="col-sm-6">
 +
                                    <h3 id="ConstructPrevention"></h3>
 +
                                        <br>
 +
                                    <p>
 +
                                        Dr. Wei-Chi Wu is a retina specialist and an associate professor at Chang Gung memorial hospital in Taiwan. According to Dr. Wu current cataracts surgery methods are efficient and effective, but are not without their issues. Besides the issue of price, there can also be several different post-surgery complications such as infection, hemorrhaging, or secondary glaucoma. In regards to our project, he said one of the biggest issues we would face is non-invasive delivery. Currently, injections and incisions are the only methods for delivery because all current potential methods of noninvasive delivery either lack efficiency or induce with side effects.
 +
                                    </p>
 +
                                </div>
 +
                                <figure class = "col-sm-6">
 +
        <img src="https://static.igem.org/mediawiki/2016/6/67/T--TAS_Taipei--GSR_Construct_Experimental.jpg">
 +
                                    <figcaption class='darkblue'><b>Figure X. </b>Full Construct.</figcaption>
 +
                                </figure>
 +
                               
 +
                               
 +
                            </div>
 +
                         
 +
                    </div>
 +
                </div>
 +
                    <br><br     
 +
               
 +
                    <div class = "row">
 +
  <div class="col-sm-12">
 +
<h3>Citations</h3>
 +
        <br> <br>  <br>  <br>  <br>  <br>  <br>  <br>           
 +
  </div>
 +
    </div>
 +
            </div>
 +
</div>
 +
    </div>
 +
 +
<br>
 +
<br><br>
 +
 +
<canvas id="canvas-container" style = "z-index:-1"></canvas>
 +
<script type="text/javascript" src='https://2016.igem.org/Template:TAS_Taipei/js/field?action=raw&ctype=text/javascript'></script>
 +
 +
</body>
 +
 +
  
  
−
<div class="clear"></div>
 
  
  
−
<div class="column half_size">
 
−
<h5> Why is this page needed? </h5>
 
−
<p>The Attribution requirement helps the judges know what you did yourselves and what you had help with. We don't mind if you get help with difficult or complex techniques, but you must report what work your team did and what work was done by others.</p>
 
−
<p>
 
−
For example, you might choose to work with an animal model during your project. Working with animals requires getting a license and applying far in advance to conduct certain experiments in many countries. This is difficult to achieve during the course of a summer, but much easier if you can work with a postdoc or PI who has the right licenses.</p>
 
−
</div>
 
  
  
−
<div class="column half_size">
+
<style type='text/css'>
−
<h5> What should this page have?</h5>
+
    #bg { position: fixed; top: 0; left: 0; }
 +
    .bgwidth { width: 100%; }
 +
    .bgheight { height: 100%; }
 +
</style>
  
−
<ul>
+
<div class="backgroundpic">
−
<li>General Support</li>
+
<img src="https://static.igem.org/mediawiki/2016/e/e5/T--TAS_Taipei--Taipei_Background_1.0.jpg" style="z-index:0" width="100%" height="100%" id="bg" alt="" >
−
<li>Project support and advice</li>
+
−
<li>Fundraising help and advice</li>
+
−
<li>Lab support</li>
+
−
<li>Difficult technique support</li>
+
−
<li>Project advisor support</li>
+
−
<li>Wiki support</li>
+
−
<li>Presentation coaching</li>
+
−
<li>Human Practices support</li>
+
−
<li> Thanks and acknowledgements for all other people involved in helping make a successful iGEM team</li>
+
−
</ul>
+
 
</div>
 
</div>
  
 +
<script>
 +
var nowRadius = 0
 +
$(function() {
 +
    if (screen.width < 1400)
 +
      document.body.style.zoom="72%"; // zoom in or out feature
 +
    else if (screen.width < 1500)
 +
      document.body.style.zoom = "77%";
 +
    else if (screen.width < 1600)
 +
      document.body.style.zoom="83%";
 +
    else if (screen.width < 1700)
 +
      document.body.style.zoom="90%";
 +
    else if (screen.width < 1800)
 +
      document.body.style.zoom="96%";
 +
    else document.body.style.zoom="100%";
 +
    $({blurRadius: 0}).animate({blurRadius: 10}, {
 +
        duration: 20000,
 +
        easing:'swing', // or "linear"
 +
                        // use jQuery UI or Easing plugin for more options
 +
        step: function() {
 +
            console.log(this.blurRadius);
 +
            if ($("#bluebutton").hasClass("isOn") ) {return;};
 +
            if($('#redbutton').hasClass("isOn") ) {return;}
 +
            $('.backgroundpic').css({
 +
                "-webkit-filter": "blur("+this.blurRadius+"px)",
 +
                "filter": "blur("+this.blurRadius+"px)"
  
−
<div class="clear"></div>
+
            });
 +
            nowRadius = this.blurRadius;
 +
        var LOCSnum = Math.round(nowRadius*6/9);
 +
        var NineLOCSnum = Math.round(nowRadius*6/9*10);
 +
        /**if (NineLOCSnum > 20) switchMessage("YELLOW","<b> Oh no! </b> Cataracts are forming! Click on the Eyedrop Tab and get <b>TREATMENT</b> eyedrops!", currentColor()=="GREEN");
 +
        if (NineLOCSnum == 55) $("#slideoutco").fadeOut(1000);
 +
        if (NineLOCSnum > 60) switchMessage("RED","Your cataracts are very severe. You need to get TREATMENT fast by clicking the Eyedrop Tab", currentColor()=="YELLOW");*/
 +
        if (LOCSnum > 6) {LOCSnum = "6+"; $('#LOCS').text(LOCSnum+"");}
 +
        else $('#LOCS').text(LOCSnum+"");
 +
       
 +
        if (LOCSnum ==0) document.getElementById('bluebutton').click();
 +
        }
 +
    });
  
−
<div class="column half_size">
+
});
  
−
<div class="highlight">
+
startBlur= function(speed) {
−
<h5> Can we base our project on a previous one? </h5>
+
    $({blurRadius: nowRadius}).animate({blurRadius: 10}, {
−
<p>Yes! You can have a project based on a previous team, or based on someone else's idea, <b>as long as you state this fact very clearly and give credit for the original project.</b> </p>
+
        duration: speed,
 +
        easing: 'swing', // or "linear"
 +
                        // use jQuery UI or Easing plugin for more options
 +
        step: function() {
 +
            console.log(this.blurRadius);
 +
            if ($("#bluebutton").hasClass("isOn") ) {return;};
 +
            if($('#redbutton').hasClass("isOn") ) {return;}
 +
 
 +
            $('.backgroundpic').css({
 +
                "-webkit-filter": "blur("+this.blurRadius+"px)",
 +
                "filter": "blur("+this.blurRadius+"px)"
 +
 
 +
            });
 +
 
 +
        nowRadius = this.blurRadius;
 +
        var LOCSnum = Math.round(nowRadius*6/9);
 +
        var NineLOCSnum = Math.round(nowRadius*6/9*10);
 +
        /**if (NineLOCSnum == 15) $("#slideoutco").fadeOut(400);
 +
        if (NineLOCSnum > 20) switchMessage("RED","<b>Cataracts</b> are creeping back again! Click the PREVENTION eyedrop to add GSR into your eyes!", currentColor()=="BLUE");*/
 +
        if (LOCSnum > 6) {LOCSnum = "6+"; $('#LOCS').text(LOCSnum+"");}
 +
        else $('#LOCS').text(LOCSnum+" ");
 +
       
 +
       
 +
        }
 +
    });
 +
};
 +
 
 +
stopBlur= function(speed) {
 +
 
 +
    $({blurRadius: nowRadius}).animate({blurRadius: 0}, {
 +
        duration: speed,
 +
        easing: 'swing', // or "linear"
 +
                        // use jQuery UI or Easing plugin for more options
 +
        step: function() {
 +
            console.log(this.blurRadius);
 +
        if ($("#redbutton").hasClass("isOn") ) {} else{return;};
 +
            $('.backgroundpic').css({
 +
                "-webkit-filter": "blur("+this.blurRadius+"px)",
 +
                "filter": "blur("+this.blurRadius+"px)"
 +
 
 +
            });
 +
        nowRadius = this.blurRadius;
 +
        var LOCSnum = Math.round(nowRadius*6/9);
 +
        var NineLOCSnum = Math.round(nowRadius*6/9*10);
 +
         
 +
        /**if (NineLOCSnum < 68){ if (NineLOCSnum > 10) if(currentColor()=="RED" ||  currentColor() == "BLUE") $("#slideoutco").fadeOut(0); switchMessage("YELLOW","<b> Treating</b> your cataract with <b>25HC Eyedrops </b>", currentColor()=="RED");
 +
                              }
 +
        if (NineLOCSnum == 9) $("#slideoutco").fadeOut(0);
 +
       
 +
           
 +
        if (NineLOCSnum < 5) {
 +
            if ($("#bluebutton").hasClass("isOn")){
 +
                   
 +
                switchMessage("GREEN","<b>Your eyes are <i>pernamently</i> crystal clear!</b> Treatment is not needed, so don't forget to turn it off!. Click the question mark to learn more.", currentColor()=="BLUE")
 +
            }
 +
            else switchMessage("BLUE","Your eyes are crystal clear! To avoid waste, please turn off the <b>TREATMENT</b> eyedrop.", currentColor()=="YELLOW");
 +
        }*/
 +
        if (LOCSnum > 6) LOCSnum = "6+";
 +
        else LOCSnum = LOCSnum +" ";
 +
        $('#LOCS').text(LOCSnum+"");   
 +
       
 +
        }
 +
    });
 +
   
 +
   
 +
};
 +
 
 +
function chooseBlur() {
 +
  if ($("#redbutton").hasClass("isOn") )
 +
      {
 +
      stopBlur(4500);
 +
 
 +
            }
 +
 
 +
    else {
 +
            if($("#bluebutton").hasClass("isOn") ) {}
 +
            else {startBlur(12000);}
 +
          }
 +
    /**if (!$("#redbutton").hasClass("isOn"))
 +
        if ($("#bluebutton").hasClass("isOn"))
 +
            {
 +
                $("#slideoutco").fadeOut(0);
 +
                switchMessage("BLUE","Great! Furthur cataract formation is prevented with GSR Eyedrops. Now use <b>TREATMENT</b> eyedrops one last time.", currentColor()=="RED")
 +
            }*/
 +
};
 +
 
 +
 
 +
</script>
 +
 
 +
<script>
 +
 
 +
function switchToggleB() {
 +
    if ( $("#bluebutton").hasClass("isOn") ) {
 +
        $("#bluebutton").removeClass("isOn"); }
 +
  else { $("#bluebutton").addClass("isOn"); }
 +
};
 +
function switchToggleR() {
 +
    if ( $("#redbutton").hasClass("isOn") ) {
 +
        $("#redbutton").removeClass("isOn"); }
 +
  else { $("#redbutton").addClass("isOn"); }
 +
};
 +
   
 +
function currentColor() {
 +
    if ($("#slidecontenttext").hasClass("alert-danger"))
 +
        return "RED";
 +
    if ($("#slidecontenttext").hasClass("alert-warning"))
 +
        return "YELLOW";
 +
    if ($("#slidecontenttext").hasClass("alert-info"))
 +
        return "BLUE";
 +
    if ($("#slidecontenttext").hasClass("alert-success"))
 +
        return "GREEN";
 +
    else return "NONE"
 +
};
 +
function switchMessage(color, textInside, refresh) {
 +
    var entirebox = document.getElementById("slideoutco");
 +
 
 +
    if (refresh)
 +
    {$(entirebox).fadeOut(100);
 +
    if ($("#slidecontenttext").hasClass("alert-danger"))
 +
        $("#slidecontenttext").removeClass("alert-danger");
 +
    if ($("#slidecontenttext").hasClass("alert-warning"))
 +
        $("#slidecontenttext").removeClass("alert-warning");
 +
    if ($("#slidecontenttext").hasClass("alert-info"))
 +
        $("#slidecontenttext").removeClass("alert-info");
 +
    if ($("#slidecontenttext").hasClass("alert-success"))
 +
        $("#slidecontenttext").removeClass("alert-success");
 +
    if (color == "RED")
 +
        $("#slidecontenttext").addClass("alert-danger");
 +
    if (color == "YELLOW")
 +
        $("#slidecontenttext").addClass("alert-warning");
 +
    if (color == "BLUE")
 +
        $("#slidecontenttext").addClass("alert-info");
 +
    if (color == "GREEN")
 +
        $("#slidecontenttext").addClass("alert-success");
 +
   
 +
   
 +
    $("#slidecontenttext").html(textInside);
 +
    $(entirebox).fadeIn(500);
 +
    }
 +
   
 +
};
 +
 
 +
 
 +
</script>
 +
 
 +
 
 +
 
 +
 
 +
 
 +
 
 +
<canvas id="canvas-container" style = "z-index:-1" hidden></canvas>
 +
<script type="text/javascript" src='https://2015.igem.org/Template:TAS_Taipei/js/field?action=raw&ctype=text/javascript' hidden></script/>
 +
 
 +
 
 +
 
 +
<script type="text/javascript">
 +
/* Toggle between adding and removing the "active" and "show" classes when the user clicks on one of the "Section" buttons. The "active" class is used to add a background color to the current button when its belonging panel is open. The "show" class is used to open the specific accordion panel */
 +
var acc = document.getElementsByClassName("accordion");
 +
var i;
 +
 
 +
for (i = 0; i < acc.length; i++) {
 +
    acc[i].onclick = function(){
 +
        this.classList.toggle("active");
 +
        this.nextElementSibling.classList.toggle("show");
 +
    }
 +
}
 +
</script>
 +
 
 +
<script type="text/javascript">
 +
$("#category_navbar a").on('click', function(event) {
 +
    // Make sure this.hash has a value before overriding default behavior
 +
    if (this.hash !== "") {
 +
      // Prevent default anchor click behavior
 +
      event.preventDefault();
 +
 
 +
      // Store hash0
 +
      var hash = this.hash;
 +
 
 +
      // Using jQuery's animate() method to add smooth page scroll
 +
      // The optional number (800) specifies the number of milliseconds it takes to scroll to the specified area
 +
      $('html, body').animate({
 +
        scrollTop: $(hash).offset().top
 +
      }, 800, function(){
 +
 
 +
        // Add hash (#) to URL when done scrolling (default click behavior)
 +
        window.location.hash = hash;
 +
      });
 +
    }  // End if
 +
  });
 +
 
 +
 
 +
</script>
 +
 
 +
<div id="slideout">
 +
    <div id="slidecontent">
 +
        <h3>Prevention</h3>
 +
        <h5>GSR Eyedrop</h5>
 +
        <label class="switch">
 +
            <input id="bluebutton" onClick="switchToggleB(); chooseBlur()" type="checkbox">
 +
            <div class="slider round bluecolorbutton"></div>
 +
        </label>
 +
<br>
 +
 
 +
        <h3>Treatment</h3>
 +
        <h5>25HC Eyedrop</h5>
 +
        <label class="switch">
 +
            <input id="redbutton" onClick="switchToggleR(); chooseBlur()" type="checkbox">
 +
            <div class="slider round redcolorbutton"></div>
 +
        </label>
 +
        <h4><b> LOCS: <span id="LOCS">0 &#160;</span></b> &#160; &#160; <a href="https://2016.igem.org/Team:TAS_Taipei/Wiki_Standard_Pages#Animation"><button  type="button" class="btn btn-danger btn-md">?</button> </a>
 +
 
 +
    </div>
 +
    <div id="clickme">
 +
    <h2 class="vertical-text" style="Lato" !important>
 +
            <br> Eyedrops
 +
    </h2>
 +
        <br><br><br>
 +
       
 +
    </div>
 
</div>
 
</div>
 +
 +
<div id="slideoutco">
 +
    <div id="slidecontentco">
 +
        <div id="slidecontenttext" class="alert alert-danger">
 +
            <p style="font-size:14px !important"> <a href="#" class="close" data-dismiss="alert" style="font:18px">&times;</a>
 +
                <strong>The tutorial is disabled.</strong> &#160; &#160; &#160; &#160; &#160;<a href="https://2016.igem.org/Team:TAS_Taipei/Wiki_Standard_Pages#Animation"><button  type="button" class="btn btn-danger btn-sm">?</button> </a><span style="font-size:14px"><br>Turn off prevention eyedrops to activate the animation. For a full tutorial, click the question mark. </span></p>
 +
           
 +
        </div>
 +
    </div>
 
</div>
 
</div>
  
 +
<javascript>
 +
   
 +
</javascript>
  
−
<div class="column half_size">
+
<style type='text/css'>
  
−
<h5>Inspiration</h5>
+
#slideout {
−
<p>Take a look at what other teams have done:</p>
+
    background: #FFD700;
−
<ul>
+
    position: fixed;
−
<li><a href="https://2011.igem.org/Team:Imperial_College_London/Team">2011 Imperial College London</a> (scroll to the bottom)</li>
+
    height: 300px;
−
<li><a href="https://2014.igem.org/Team:Exeter/Attributions">2014 Exeter </a></li>
+
    width: 200px;
−
<li><a href="https://2014.igem.org/Team:Melbourne/Attributions">2014 Melbourne </a></li>
+
    top: 30%;
−
<li><a href="https://2014.igem.org/Team:Valencia_Biocampus/Attributions">2014 Valencia Biocampus</a></li>
+
    right:-150px;
−
</ul>
+
    padding-left: 60px;
 +
    z-index:30;
 +
    border-radius: 25px;
  
−
</div>
 
  
−
<div class="clear"></div>
+
}
 +
   
 +
#slideoutco {
 +
    position: fixed;
 +
    height: 200px;
 +
    width: 300px;
 +
    top: 78%;
 +
    right:1%;
 +
    padding-left: 10px;
 +
    padding-right: 10px;
 +
    border-radius: 10px;
 +
    z-index:30;
 +
}
 +
   
 +
#clickme {
 +
    position: absolute;
 +
    top: 0; left: 0;
 +
    height: 300px;
 +
    width: 50px;
 +
    background: #FFBA49;
 +
    z-index:30;
 +
    border-radius: 25px 5px 5px 25px;
 +
}
  
−
<div class="column half_size">
+
#slidecontent {
 +
    float:left;
 +
}
 +
   
 +
#slidecontentco {
 +
    float:left;
 +
}
  
−
<h5>Team training and Project start</h5>
+
.vertical-text {
−
<p>Tell us if your institution teaches an iGEM or synthetic biology class and when you started your project:</p>
+
transform: rotate(90deg);
−
<ul>
+
transform-origin: left bottom 0;
−
<li>Does your institution teach an iGEM or synthetic biology course?</li>
+
  float: left;
−
<li>When did you start this course?</li>
+
}
−
<li>Are the syllabus and course materials freely available online?</li>
+
/* The switch - the box around the slider */
−
<li>When did you start your brainstorming?</li>
+
.switch {
−
<li>When did you start in the lab?</li>
+
  position: relative;
−
<li>When did you start working on  your project?</li>
+
  display: inline-block;
 +
  width: 60px;
 +
  height: 34px;
 +
}
  
−
</ul>
+
/* Hide default HTML checkbox */
 +
.switch input {display:none;}
  
−
</div>
+
/* The slider */
 +
.slider {
 +
  position: absolute;
 +
  cursor: pointer;
 +
  top: 0;
 +
  left: 0;
 +
  right: 0;
 +
  bottom: 0;
 +
  background-color: #ccc;
 +
  -webkit-transition: .4s;
 +
  transition: .4s;
 +
}
  
  
 +
.slider:before {
 +
  position: absolute;
 +
  content: "";
 +
  height: 26px;
 +
  width: 26px;
 +
  left: 4px;
 +
  bottom: 4px;
 +
  background-color: white;
 +
  -webkit-transition: .4s;
 +
  transition: .4s;
 +
}
  
 +
input:checked + .slider.bluecolorbutton {
 +
  background-color: #2196F3;
 +
}
 +
 +
input:focus + .slider.bluecolorbutton {
 +
  box-shadow: 0 0 1px #2196F3;
 +
}
 +
 +
input:checked + .slider.redcolorbutton {
 +
  background-color: #FF0000;
 +
}
 +
 +
input:focus + .slider.redcolorbutton {
 +
  box-shadow: 0 0 1px #FF0000;
 +
}
 +
 +
 +
 +
input:checked + .slider:before {
 +
  -webkit-transform: translateX(26px);
 +
  -ms-transform: translateX(26px);
 +
  transform: translateX(26px);
 +
}
 +
 +
/* Rounded sliders */
 +
.slider.round {
 +
  border-radius: 34px;
 +
}
 +
 +
.slider.round:before {
 +
  border-radius: 50%;
 +
}
 +
input[type=text] {
 +
    width: 100%;
 +
    padding: 12px 20px;
 +
    margin: 8px 0;
 +
    box-sizing: border-box;
 +
    border: 3px solid #ccc;
 +
    -webkit-transition: 0.5s;
 +
    transition: 0.5s;
 +
    outline: none;
 +
}
 +
input[type=text]:focus {
 +
    border: 3px solid #555;
 +
}
 +
</style>
 +
<script>
 +
$(function () {
 +
    var rightVal = -150;
 +
   
 +
        $("#clickme").click(function () {
 +
       
 +
        rightVal = (rightVal * -1) - 150;
 +
        $(this).parent().animate({right: rightVal + 'px'}, {queue: false, duration: 500});
 +
    });
 +
   
 +
});
 +
 +
 +
 +
</script>
 +
 +
 +
</body>
  
−
</div>
 
 
</html>
 
</html>

Revision as of 08:20, 14 October 2016

Model - TAS Taipei iGEM Wiki




C◎UNTERACTS

Human Practice Summary

Research


Professional Help

In order to improve how we develop our prototype we needed to get in contact with experts in the fields of eye surgery and cataracts research. Our first step was to contact eye doctors to discuss any problems associated with current cataracts treatment. Finally, while developing our project we realized that cataracts is a major issue in pets and other animals as well as people. As a result, we contacted local veterinarians to discuss what pet owners do when their pets contract cataracts. As our project developed, we needed more specific information regarding our genes of interest, cataracts development, and our delivery mechanism. We contacted scientists doing research similar to our own to get their opinion on our projects progress.




Contact with Eye Doctors

Eye doctors are on the front lines, delivering cataracts surgery, some privately and others for charity in organizations such as the Himalayan Cataracts Projects. We contacted local Taiwanese Eye Doctors to ask them about cataracts surgery. Here is a list of the doctors we contacted along with the information they provided:


Dr. Wei-Chi Wu is a retina specialist and an associate professor at Chang Gung memorial hospital in Taiwan. According to Dr. Wu current cataracts surgery methods are efficient and effective, but are not without their issues. Besides the issue of price, there can also be several different post-surgery complications such as infection, hemorrhaging, or secondary glaucoma. In regards to our project, he said one of the biggest issues we would face is non-invasive delivery. Currently, injections and incisions are the only methods for delivery because all current potential methods of noninvasive delivery either lack efficiency or induce with side effects.

Figure X. Full Construct.


Citations












Prevention

GSR Eyedrop

Treatment

25HC Eyedrop

LOCS: 0      


Eyedrops




× The tutorial is disabled.          
Turn off prevention eyedrops to activate the animation. For a full tutorial, click the question mark.