Difference between revisions of "Team:DLUT China B"

(初次布局。)
m
 
(22 intermediate revisions by the same user not shown)
Line 1: Line 1:
−
<!DOCTYPE html>
 
 
<html lang="en">
 
<html lang="en">
 
<head>
 
<head>
 
     <meta charset="UTF-8">
 
     <meta charset="UTF-8">
 +
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
 
     <title>2018 iGEM_DLUT_B</title>
 
     <title>2018 iGEM_DLUT_B</title>
 
     <link rel="stylesheet" href="https://2018.igem.org/wiki/index.php?title=Template:DLUT_China_B/css/style.css&action=raw&ctype=text/css">
 
     <link rel="stylesheet" href="https://2018.igem.org/wiki/index.php?title=Template:DLUT_China_B/css/style.css&action=raw&ctype=text/css">
 
     <link rel="stylesheet" href="https://2018.igem.org/wiki/index.php?title=Template:DLUT_China_B/css/nav.css&action=raw&ctype=text/css">
 
     <link rel="stylesheet" href="https://2018.igem.org/wiki/index.php?title=Template:DLUT_China_B/css/nav.css&action=raw&ctype=text/css">
 
     <link rel="stylesheet" href="https://2018.igem.org/wiki/index.php?title=Template:DLUT_China_B/css/bubbles.css&action=raw&ctype=text/css">
 
     <link rel="stylesheet" href="https://2018.igem.org/wiki/index.php?title=Template:DLUT_China_B/css/bubbles.css&action=raw&ctype=text/css">
−
     <link rel="stylesheet" href="https://2018.igem.org/wiki/index.php?title=Template:DLUT_China_B/css/slideshow.css&action=raw&ctype=text/css">
+
     <link rel="stylesheet" href="https://2018.igem.org/wiki/index.php?title=Template:DLUT_China_B/css/fontawesome.css&action=raw&ctype=text/css">
 +
    <script src="https://2018.igem.org/wiki/index.php?title=Template:DLUT_China_B/js/bubbles.js&action=raw&ctype=text/javascript"></script>
  
−
     <script src="https://2018.igem.org/wiki/index.php?title=Template:DLUT_China_B/js/slideshow.js&action=raw&ctype=javascript"></script>
+
     <script>
−
    <script src="https://2018.igem.org/wiki/index.php?title=Template:DLUT_China_B/js/bubbles.js&action=raw&ctype=javascript"></script>
+
        function check() {
−
    <script src="https://2018.igem.org/wiki/index.php?title=Template:DLUT_China_B/js/typed.js&action=raw&ctype=javascript"></script>
+
            let a = false, b = false;
 +
            if (navigator.userAgent.indexOf("compatible") > -1)
 +
                if (navigator.userAgent.indexOf("MSIE") > -1)
 +
                    a = true;
 +
            if (navigator.userAgent.indexOf('Trident') > -1)
 +
                if (navigator.userAgent.indexOf("rv:11.0") > -1)
 +
                    b = true;
 +
            if (a || b)
 +
                alert('We are sorry but Microsoft Internet Explorer may be too old to display this page correctly.\nIt is recommended to update your browser, otherwise your experience may suffer.');
 +
        }
 +
    </script>
 
</head>
 
</head>
−
<body>
+
<body onload="check()">
 
<div id="dlutb">
 
<div id="dlutb">
 
     <div id="header">
 
     <div id="header">
−
         <div id="nav">
+
         <div id="team">DLUT_China_B</div>
−
            <ul class="menu">
+
        <div id="nav"></div>
−
                <li>
+
        <div id="box">
−
                    <a href="#">Professional Services</a>
+
            <img src="https://static.igem.org/mediawiki/2018/4/47/T--DLUT_China_B--Top1.png">
−
                    <ul class="subMenu">
+
            <div>
−
                        <li>
+
                <h2>Dr. Familict</h2>
−
                            <a href="#">Professional Services</a>
+
                 <p>Hello! I’m a lovely Kidney baby, an essential organ in your body. Can you see those sparkling items
−
                        </li>
+
                     pointed by my hand? Right! This is a wonderful liquid crystal show caused by the combination of
−
                        <li>
+
                     β<sub>2</sub>-MG and nanobodies. What’s more, the different concentrations of β<sub>2</sub>-MG make
−
                            <a href="#">Partners</a>
+
                     the different degree of brightness showed by liquid crystal. We can make use of this phenomenon to
−
                        </li>
+
                     achieve early detection of CKD caused mostly by diabetes and high blood pressure according to the
−
                        <li>
+
                     brightness displayed by the detector confidently. Such an amazing idea, right?</p>
−
                            <a href="#">Training</a>
+
             </div>
−
                        </li>
+
−
                        <li>
+
−
                            <a href="#">Technical Support</a>
+
−
                        </li>
+
−
                    </ul>
+
−
                </li>
+
−
                <li>
+
−
                    <a href="#">Products</a>
+
−
                    <ul class="subMenu">
+
−
                        <li>
+
−
                            <a href="#">Embedded Devices</a>
+
−
                        </li>
+
−
                        <li>
+
−
                            <a href="#">Reference software stack & SDK</a>
+
−
                        </li>
+
−
                    </ul>
+
−
                 </li>
+
−
                <li>
+
−
                    <a href="#">Solutions</a>
+
−
                    <ul class="subMenu">
+
−
                        <li>
+
−
                            <a href="#">Automotive</a>
+
−
                        </li>
+
−
                        <li>
+
−
                            <a href="#">Automation</a>
+
−
                        </li>
+
−
                        <li>
+
−
                            <a href="#">Medical</a>
+
−
                        </li>
+
−
                        <li>
+
−
                            <a href="#">Libraries, Tools & IDE</a>
+
−
                        </li>
+
−
                        <li>
+
−
                            <a href="#">UI design technologies</a>
+
−
                        </li>
+
−
                     </ul>
+
−
                </li>
+
−
                <li>
+
−
                    <a href="#">Professional Services</a>
+
−
                     <ul class="subMenu">
+
−
                        <li>
+
−
                            <a href="#">Professional Services</a>
+
−
                        </li>
+
−
                        <li>
+
−
                            <a href="#">Partners</a>
+
−
                        </li>
+
−
                        <li>
+
−
                            <a href="#">Training</a>
+
−
                        </li>
+
−
                        <li>
+
−
                            <a href="#">Technical Support</a>
+
−
                        </li>
+
−
                     </ul>
+
−
                </li>
+
−
                <li>
+
−
                     <a href="#">Products</a>
+
−
                     <ul class="subMenu">
+
−
                        <li>
+
−
                            <a href="#">Embedded Devices</a>
+
−
                        </li>
+
−
                        <li>
+
−
                            <a href="#">Reference software stack & SDK</a>
+
−
                        </li>
+
−
                    </ul>
+
−
                </li>
+
−
                <li>
+
−
                    <a href="#">Solutions</a>
+
−
                    <ul class="subMenu">
+
−
                        <li>
+
−
                            <a href="#">Automotive</a>
+
−
                        </li>
+
−
                        <li>
+
−
                            <a href="#">Automation</a>
+
−
                        </li>
+
−
                        <li>
+
−
                            <a href="#">Medical</a>
+
−
                        </li>
+
−
                        <li>
+
−
                            <a href="#">Libraries, Tools & IDE</a>
+
−
                        </li>
+
−
                        <li>
+
−
                            <a href="#">UI design technologies</a>
+
−
                        </li>
+
−
                    </ul>
+
−
                </li>
+
−
                <li>
+
−
                    <a href="#">Professional Services</a>
+
−
                    <ul class="subMenu">
+
−
                        <li>
+
−
                            <a href="#">Professional Services</a>
+
−
                        </li>
+
−
                        <li>
+
−
                            <a href="#">Partners</a>
+
−
                        </li>
+
−
                        <li>
+
−
                            <a href="#">Training</a>
+
−
                        </li>
+
−
                        <li>
+
−
                            <a href="#">Technical Support</a>
+
−
                        </li>
+
−
                    </ul>
+
−
                </li>
+
−
             </ul>
+
 
         </div>
 
         </div>
 
         <br>
 
         <br>
−
        <div class="title" id="teamName">DLUT China B</div>
 
−
        <div id="typed">
 
−
            <span id="slogan"></span>
 
−
        </div>
 
−
 
−
        <script>
 
−
            let options = {
 
−
                strings: ["We can put our slogan here", "Or other things to be said"],
 
−
                typeSpeed: 100,
 
−
                loop: true,
 
−
                startDelay: 100,
 
−
                backSpeed: 50
 
−
            };
 
−
            let typed = new Typed("#slogan", options);
 
−
        </script>
 
−
        <br>
 
−
        <a class="btn" id="start">Get Started</a>
 
−
        <script>
 
−
            $('#start').click(function () {
 
−
                $('html,body').animate({scrollTop: $('#meetUs').offset().top-60}, 500);
 
−
            });
 
−
        </script>
 
 
     </div>
 
     </div>
  
−
     <div>
+
     <div id="circle">
−
        <h2 class="title" id="meetUs">We are concerned about the world's largest potential group of chronic kidney disease</h2>
+
         <div class="tr">
−
         <div class="mainText">
+
             <div class="td">
−
             <p>According to statistics of the World Health Organization, about 1.2 million people died of kidney disease in
+
                 <a href="https://2018.igem.org/Team:DLUT_China_B/Description">
−
                 2015
+
                    <img src="https://static.igem.org/mediawiki/2018/b/b8/T--DLUT_China_B--Circle1.png" width="250">
−
                worldwide, which is 32% higher than that in 2005. Among them, diabetes and hypertensive patients are the
+
                    <div>Project</div>
−
                largest
+
                 </a>
−
                potential victims of chronic kidney disease. Of the new ESRD patients in the United States in the past 10
+
            </div>
−
                years, 58%
+
             <div class="td">
−
                are from diabetes and hypertension patients. If we do not intervene in patients with early-stage
+
                 <a href="https://2018.igem.org/Team:DLUT_China_B/Parts">
−
                hypertension or
+
                    <img src="https://static.igem.org/mediawiki/2018/f/f0/T--DLUT_China_B--Circle2.png" width="250">
−
                 diabetes, it will cause a dramatic deterioration of renal function with a mortality rate up to 90%. However,
+
                    <div>Parts</div>
−
                if the
+
                 </a>
−
                patient's kidney status can be monitored at any time, with early detection and timely medical treatment, up
+
            </div>
−
                to 70%
+
            <div class="td">
−
                of the disease may be reversed. Therefore, it is of great social significance to monitor the renal status of
+
                 <a href="https://2018.igem.org/Team:DLUT_China_B/GrayValueConcentrationModel">
−
                patients with early-stage hypertension and diabetes.</p>
+
                    <img src="https://static.igem.org/mediawiki/2018/c/c6/T--DLUT_China_B--Circle3.png" width="250">
−
             <p>At this stage, the excretion rate of urinary microalbumin (mALB) is mainly used to diagnose diabetic
+
                     <div>Model</div>
−
                 nephropathy and
+
                 </a>
−
                hypertensive nephropathy. Although the detection method is relatively perfect, it has the following
+
             </div>
−
                disadvantages:</p>
+
−
            <ol>
+
−
                 <li>The accuracy and specificity of mALB in diagnosing DN are not high, and urinary tract infection and
+
−
                    other
+
−
                    factors can increase the excretion rate of urinary albumin, resulting in high misdiagnosis and missed
+
−
                    diagnosis.
+
−
                </li>
+
−
                <li>When the mALB is abnormal, DN has progressed to Phase III. It is not sufficient to use this indicator to
+
−
                    monitor
+
−
                    the occurrence and development of DN.
+
−
                 </li>
+
−
                <li>Renal impairment in hypertension occurs first in the renal tubules, and then in the glomerulus. Urine
+
−
                     microalbumin mainly reflects glomerular filtration impairment and is not sensitive to renal tubular
+
−
                    injury.
+
−
                 </li>
+
−
             </ol>
+
 
         </div>
 
         </div>
−
    </div>
+
        <div class="tr">
−
 
+
            <div class="td">
−
    <div id="fixed1"></div>
+
                <a href="https://2018.igem.org/Team:DLUT_China_B/Applied_Design">
−
 
+
                    <img src="https://static.igem.org/mediawiki/2018/7/71/T--DLUT_China_B--Circle4.png" width="250">
−
    <div>
+
                    <div>Awards</div>
−
        <h2 class="title">We use β<sub>2</sub>M for high sensitivity monitoring of the kidneys</h2>
+
                </a>
−
        <div class="mainText">
+
            </div>
−
            <p>In order to solve the problems in the above detection methods, we conducted a multi-study investigation to
+
            <div class="td">
−
                find a new
+
                <a href="https://2018.igem.org/Team:DLUT_China_B/Human_Practices">
−
                type of indicator β<sub>2</sub>M which has higher sensitivity to early kidney damage. β<sub>2</sub>M is a
+
                    <img src="https://static.igem.org/mediawiki/2018/6/63/T--DLUT_China_B--Circle5.png" width="250">
−
                 small
+
                    <div id="humanPracticesCircle"><p>Human<br>Practices</p></div>
−
                molecule globulin produced by lymphocytes, platelets, and polymorphonuclear leukocytes. It can be freely
+
                 </a>
−
                filtered
+
            </div>
−
                from the glomerulus and is absorbed by the proximal tubular in 99.9% . Under normal condition, the excretion
+
            <div class="td">
−
                of
+
                <a href="https://2018.igem.org/Team:DLUT_China_B/TeamMembers">
−
                β<sub>2</sub>M in urine(U-β<sub>2</sub>M) is very small which is no more than 0.25mg/L. U-β<sub>2</sub>M
+
                    <img src="https://static.igem.org/mediawiki/2018/0/06/T--DLUT_China_B--Circle6.png" width="250">
−
                excretion
+
                    <div>Team</div>
−
                is increased in early urine of diabetic patients with stage I hypertension and diabetes. With the deepening
+
                 </a>
−
                of the
+
            </div>
−
                renal damage, β<sub>2</sub>M accumulates in patients and continue increase. Therefore, the detection of
+
−
                 U-β<sub>2</sub>M in patients with a risk of kidney disease, such as diabetes and hypertension, can achieve
+
−
                real-time
+
−
                monitoring of the condition of the kidneys, as well as the discovery of early nephropathy to prevent
+
−
                irreversible
+
−
                damage to the kidneys.</p>
+
 
         </div>
 
         </div>
 
     </div>
 
     </div>
−
 
−
    <div id="fixed2"></div>
 
  
 
     <div>
 
     <div>
−
         <h2 class="title">What kind of a work we want to complete?</h2>
+
         <h2 class="title">Click bubbles to chat with me</h2>
−
         <div class="mainText">
+
         <div id="chatBubbles"></div>
−
            <p>Patients with diabetes for about 5 years or those with Hypertension for 5 to 10 years are at high risk of
+
−
                chronic
+
−
                kidney disease and are at risk of renal impairment at any time. Since diabetics and hypertensives are
+
−
                usually
+
−
                treated at home in early stages , routine blood and urine tests are rarely performed and the U-β<sub>2</sub>M
+
−
                indicator is unknown. This has led many patients to miss the opportunity for early intervention and control.
+
−
                Our
+
−
                work enables these patients to easily monitor their own renal function status at home through the
+
−
                U-β<sub>2</sub>M
+
−
                test. In addition, we can use mobile devices to conduct a brief analysis of the patient's renal function and
+
−
                give
+
−
                medical advice.</p>
+
−
        </div>
+
−
    </div>
+
−
 
+
−
    <div id="fixed3"></div>
+
−
 
+
−
    <div>
+
−
        <h2 class="title">For U-β<sub>2</sub>M we developed a suitable detection method</h2>
+
−
        <div class="mainText">
+
−
            <p>In this project, we combined strongly specific nanobodies with high-sensitivity liquid crystal detection to
+
−
                develop a
+
−
                visual detection method, thereby enabling accurate quantification or semiquantification of microgram-levelU-
+
−
                β<sub>2</sub>M. Firstly, we use nanobody to specifically bind to β<sub>2</sub>M. Compared with conventional
+
−
                antibodies, nanobody is a smaller molecular,less susceptible to denaturation, but still has intact antigen
+
−
                binding
+
−
                properties. In addition, nanobodies can be expressed by <i>E. coli</i> , which make the cost of production
+
−
                is
+
−
                greatly reduced. What's more, we use the birefringence of liquid crystal molecules. The liquid crystal
+
−
                application
+
−
                that we are familiar with is liquid crystal display, but this is to change the arrangement of the liquid
+
−
                crystal
+
−
                molecules through the electric current, thus show different light signals. Here, we modify the liquid
+
−
                crystal cell
+
−
                substrate with antibodies. After combining antigens, the micro-environment of the liquid crystal cell
+
−
                platform
+
−
                changes, resulting in a significant difference in color or brightness , the visualization of detection is
+
−
                achieved.
+
−
            </p>
+
−
            <p>This project will propose a low-cost, portable and visible method for monitoring early renal injury and
+
−
                provide
+
−
                medical advice for patients with hypertension and diabetes.
+
−
            </p>
+
−
        </div>
+
 
     </div>
 
     </div>
  
 
     <div id="footer">
 
     <div id="footer">
 
         <div id="address">
 
         <div id="address">
−
             <h3>Address</h3>
+
             <h3><i class="fas fa-map-marker-alt"></i> Address</h3>
 
             <p>No.2 Linggong Road, Ganjingzi District, Dalian City, Liaoning Province, P.R.C., 116024</p>
 
             <p>No.2 Linggong Road, Ganjingzi District, Dalian City, Liaoning Province, P.R.C., 116024</p>
 +
            <h3><i class="fas fa-at"></i> E-mail</h3>
 +
            <p>igem_dlut_china_B#163.com (Please replace # with @)</p>
 +
        </div>
 +
        <div id="follow">
 +
            <h3>Follow Us</h3>
 +
            <div id="platformName">
 +
                <p><i class="fab fa-weixin"></i> WeChat</p>
 +
                <p></p>
 +
                <p><i class="fab fa-weibo"></i> Weibo</p>
 +
            </div>
 +
            <div id="qrCode">
 +
                <div><img src="https://static.igem.org/mediawiki/2018/c/c6/T--DLUT_China_B--wechat.png" width="100"></div>
 +
                <div></div>
 +
                <div><img src="https://static.igem.org/mediawiki/2018/6/6b/T--DLUT_China_B--weibo.png" width="100"></div>
 +
            </div>
 
         </div>
 
         </div>
 
     </div>
 
     </div>
  
−
     <div id="back" class="btn"></div>
+
     <div id="back" class="btn">
 +
        <i class="fas fa-angle-up"></i>
 +
    </div>
 +
 
 +
    <script src="https://2018.igem.org/wiki/index.php?title=Template:DLUT_China_B/js/script.js&action=raw&ctype=text/javascript"></script>
 
     <script>
 
     <script>
−
         $('#back').click(function () {
+
         /*对话气泡*/
−
             $('html').animate( {scrollTop: 0}, 500);
+
        let conversation = {
−
        });
+
            ice: {
−
        document.onscroll=function () {
+
                says: ["Hey, friend! Long time no see! You can click bubbles to chat with me."],
−
             if($('html').scrollTop()>600)
+
                reply: [
−
                 document.getElementById("back").style.display="block";
+
                    {
−
             else
+
                        question: "mmm O (*￣▽￣*) O. Long time no see.",
−
                 document.getElementById("back").style.display="none";
+
                        answer: "ice1"
 +
                    }
 +
                ]
 +
             },
 +
            "ice1": {
 +
                says: [
 +
                    "We have a lot of significant updates.（Of course we cannot make it as cool as  the Apple launch update)",
 +
                    "As an old friend, let me open the VIP channel for you.",
 +
                    'Click "Skip", then you will skip the Project Introduction section.',
 +
                    'Click "Listen", then you will acknowledge more details about our story.'
 +
                ],
 +
                reply: [
 +
                    {
 +
                        question: "Skip",
 +
                        answer: "dest"
 +
                    },
 +
                    {
 +
                        question: "Listen",
 +
                        answer: "listen1"
 +
                    }
 +
                ]
 +
            },
 +
            "dest": {
 +
                says: ["Please select the destination you want to go to."],
 +
                reply: [
 +
                    {
 +
                        question: "No, thank you.",
 +
                        answer: "end"
 +
                    },
 +
                    {
 +
                        question: "Project Introduction",
 +
                        answer: "projectIntroduction"
 +
                    },
 +
                    {
 +
                        question: "Parts",
 +
                        answer: "parts"
 +
                    },
 +
                    {
 +
                        question: "Model",
 +
                        answer: "model"
 +
                    },
 +
                    {
 +
                        question: "Awards",
 +
                        answer: "awards"
 +
                    },
 +
                    {
 +
                        question: "Human Practices",
 +
                        answer: "humanPractices"
 +
                    },
 +
                    {
 +
                        question: "Teamwork and Cooperation",
 +
                        answer: "teamworkAndCooperation"
 +
                    }
 +
                ]
 +
             },
 +
            "listen1": {
 +
                says: [
 +
                    "Here is iGEM_DLUT_China_B.",
 +
                    "I`ll introduce our project to you.",
 +
                    "Many diseases in the world severely threaten human health, but some of them can be predicted and cured.",
 +
                    "The first step to prevent disease is to figure out what kind of population may face higher risk.",
 +
                    "For example, diabetic and hypertensive patients are more likely to suffer from chronic kidney disease.",
 +
                    "People older than 60 are more likely to develop Alzheimer`s disease."
 +
                ],
 +
                reply: [
 +
                    {
 +
                        question: "And then?",
 +
                        answer: "listen2"
 +
                    }
 +
                ]
 +
            },
 +
            "listen2": {
 +
                says: ["The second step is to monitor regularly to intervene the occurrence and development of diseases timely."],
 +
                reply: [
 +
                    {
 +
                        question: "Yes, it makes sense. But how can it be achieved?",
 +
                        answer: "listen3"
 +
                    }
 +
                ]
 +
            },
 +
            "listen3": {
 +
                says: [
 +
                    "You may not believe that",
 +
                    "we can know our current physical condition through urine.",
 +
                    "Urine is considered to be \"gold mine\" for the identification of disease markers."
 +
                ],
 +
                reply: [
 +
                    {
 +
                        question: "Is that true?",
 +
                        answer: "listen4"
 +
                    }
 +
                ]
 +
            },
 +
            "listen4": {
 +
                says: [
 +
                    "Absolutely. It`s like a mirror that reflects one`s health.",
 +
                    "In the early stages of a disease, we can use the protein markers in the urine to screen the disease."
 +
                ],
 +
                reply: [
 +
                    {
 +
                        question: "But how do you screen it?",
 +
                        answer: "listen5"
 +
                    }
 +
                ]
 +
            },
 +
            "listen5": {
 +
                says: ["We use nano-antibody combining with liquid crystal sensor to show the results for us."],
 +
                reply: [
 +
                    {
 +
                        question: "Liquid crystal? How?",
 +
                        answer: "listen6"
 +
                    }
 +
                ]
 +
            },
 +
            "listen6": {
 +
                says: [
 +
                    "In our daily life, we usually find the LCD screen black. However, it becomes colorful when it works.",
 +
                    "Our products are similar to it in principle.",
 +
                    "The combination of the nano-antibody and the marked protein in urine will result in a slight change in the liquid crystalline substrate.",
 +
                    "It also causes changes in the brightness and color of the liquid crystal film.",
 +
                    "So the liquid crystal brightness can reflect the antigen concentration directly."
 +
                ],
 +
                reply: [
 +
                    {
 +
                        question: "That means we can know whether we are sick and what extent the disease has progressed to.",
 +
                        answer: "listen7"
 +
                    }
 +
                ]
 +
            },
 +
            "listen7": {
 +
                says: [
 +
                    "Yes, but we need to do a more accurate quantitative analysis.",
 +
                    "We take photos, then perform greyscale processing and analyze the average greyscale.",
 +
                    "In contrast to the concentration-gray curve we have obtained, we can obtain the concentration of the antigen accurately."
 +
                ],
 +
                reply: [
 +
                    {
 +
                        question: "You guys did something amazing!",
 +
                        answer: "last"
 +
                    }
 +
                ]
 +
            },
 +
            "last": {
 +
                says: [
 +
                    "Summary has ended, the following is for each plate specific content.",
 +
                    "Please select the destination you want to go to."
 +
                ],
 +
                reply: [
 +
                    {
 +
                        question: "No, thank you.",
 +
                        answer: "end"
 +
                    },
 +
                    {
 +
                        question: "Project Introduction",
 +
                        answer: "projectIntroduction"
 +
                    },
 +
                    {
 +
                        question: "Parts",
 +
                        answer: "parts"
 +
                    },
 +
                    {
 +
                        question: "Model",
 +
                        answer: "model"
 +
                    },
 +
                    {
 +
                        question: "Awards",
 +
                        answer: "awards"
 +
                    },
 +
                    {
 +
                        question: "Human Practices",
 +
                        answer: "humanPractices"
 +
                    },
 +
                    {
 +
                        question: "Teamwork and Cooperation",
 +
                        answer: "teamworkAndCooperation"
 +
                    }
 +
                ]
 +
            },
 +
            "projectIntroduction": {
 +
                says: [
 +
                    "Wow, you selected Project as the destination.",
 +
                    "Are you ready to go?"
 +
                ],
 +
                reply: [
 +
                    {
 +
                        question: "Yes.",
 +
                        answer: "goProjectIntroduction"
 +
                    },
 +
                    {
 +
                        question: "Wait a second.",
 +
                        answer: "dest"
 +
                    }
 +
                ]
 +
            },
 +
            "parts": {
 +
                says: [
 +
                    "Didi, you are about to reach Parts.",
 +
                    "You will learn about the main components we use such as messages."
 +
                ],
 +
                reply: [
 +
                    {
 +
                        question: "OK, let`s go.",
 +
                        answer: "goParts"
 +
                    },
 +
                    {
 +
                        question: "Wait a second.",
 +
                        answer: "dest"
 +
                    }
 +
                ]
 +
            },
 +
            "model": {
 +
                says: [
 +
                    "Have you decided to make Model as your destination?",
 +
                    "Project optimization and results will be exhibited here."
 +
                ],
 +
                reply: [
 +
                    {
 +
                        question: "Go and visit.",
 +
                        answer: "goModel"
 +
                    },
 +
                    {
 +
                        question: "I want another destination.",
 +
                        answer: "dest"
 +
                    }
 +
                ]
 +
            },
 +
            "awards": {
 +
                says: [
 +
                    "You will find the treasures of application design at Awards office."
 +
                ],
 +
                reply: [
 +
                    {
 +
                        question: "Go. (￣) ￣) ↗",
 +
                        answer: "goAwards"
 +
                    },
 +
                    {
 +
                        question: "I`m not interested in treasure hunt.",
 +
                        answer: "dest"
 +
                    }
 +
                 ]
 +
            },
 +
            "humanPractices": {
 +
                says: [
 +
                    "We are committed to education and publicity.",
 +
                    "Choose \"Learn more\" and you will arrive at Human Practices.",
 +
                    "Choose \"Back\", the destination will be reset."
 +
                ],
 +
                reply: [
 +
                    {
 +
                        question: "Learn more",
 +
                        answer: "goHumanPractices"
 +
                    },
 +
                    {
 +
                        question: "Back",
 +
                        answer: "dest"
 +
                    }
 +
                ]
 +
             },
 +
            "teamworkAndCooperation": {
 +
                 says: [
 +
                    "Choose \"Learn more\", you will arrive at Team Introduction,",
 +
                    "and learn about our team members and our collaborations with other teams.",
 +
                    "Choose \"Back\", the destination will be reset."
 +
                ],
 +
                reply: [
 +
                    {
 +
                        question: "Learn more",
 +
                        answer: "goTeamworkAndCooperation"
 +
                    },
 +
                    {
 +
                        question: "Back",
 +
                        answer: "dest"
 +
                    }
 +
                ]
 +
            },
 +
            end: {
 +
                says: [
 +
                    "Thanks for your time and attention.",
 +
                    "The chat is over, but you can start over to go through other options."
 +
                ],
 +
                reply: [
 +
                    {
 +
                        question: "Start over",
 +
                        answer: "ice"
 +
                    }
 +
                ]
 +
            }
 
         };
 
         };
 +
        goProjectIntroduction = function () {
 +
            window.location.href = "https://2018.igem.org/Team:DLUT_China_B/Description";
 +
        };
 +
        goParts = function () {
 +
            window.location.href = "https://2018.igem.org/Team:DLUT_China_B/Parts";
 +
        };
 +
        goModel = function () {
 +
            window.location.href = "https://2018.igem.org/Team:DLUT_China_B/GrayValueConcentrationModel";
 +
        };
 +
        goAwards = function () {
 +
            window.location.href = "https://2018.igem.org/Team:DLUT_China_B/Applied_Design";
 +
        };
 +
        goHumanPractices = function () {
 +
            window.location.href = "https://2018.igem.org/Team:DLUT_China_B/Human_Practices";
 +
        };
 +
        goTeamworkAndCooperation = function () {
 +
            window.location.href = "https://2018.igem.org/Team:DLUT_China_B/TeamMembers";
 +
        };
 +
 +
        function isShow($el) {
 +
            let winH = $(window).height(), /*获取窗口高度*/
 +
                scrollH = $(window).scrollTop(), /*获取窗口滚动高度*/
 +
                top = $el.offsetTop; /*获取元素距离窗口顶部偏移高度*/
 +
            return top < scrollH + winH;
 +
        }
 +
 +
        let chatWindow;
 +
 +
        function lazyLoad() {
 +
            if (document.getElementById("chat") == null)
 +
                if (isShow(document.getElementById("chatBubbles"))) {
 +
                    let chat = document.createElement("div");
 +
                    chat.setAttribute("id", "chat");
 +
                    document.getElementById("chatBubbles").appendChild(chat);
 +
                    chatWindow = new Bubbles(document.getElementById("chat"), "chatWindow");
 +
                    chatWindow.talk(conversation);
 +
                }
 +
        }
 +
 +
        $(document).ready(function () {
 +
            $(window).scroll(function () {
 +
                topToggle();
 +
            });
 +
            $(window).scroll(function () {
 +
                lazyLoad();
 +
            });
 +
        })
 
     </script>
 
     </script>
 
</div>
 
</div>
 
</body>
 
</body>
 
</html>
 
</html>

Latest revision as of 02:42, 18 October 2018

2018 iGEM_DLUT_B

Click bubbles to chat with me