Difference between revisions of "Team:DLUT China B"

(剥离导航栏、加入对话气泡，改善至顶按钮，使用Font Awesome.)
m
 
(19 intermediate revisions by the same user not shown)
Line 2: Line 2:
 
<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">
 
     <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=text/javascript"></script>
+
     <script>
−
    <script src="https://2018.igem.org/wiki/index.php?title=Template:DLUT_China_B/js/bubbles.js&action=raw&ctype=text/javascript"></script>
+
        function check() {
−
    <script src="https://2018.igem.org/wiki/index.php?title=Template:DLUT_China_B/js/typed.js&action=raw&ctype=text/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="team">DLUT_China_B</div>
 
         <div id="nav"></div>
 
         <div id="nav"></div>
−
        <br>
+
         <div id="box">
−
         <div class="title" id="teamName">DLUT China B</div>
+
            <img src="https://static.igem.org/mediawiki/2018/4/47/T--DLUT_China_B--Top1.png">
−
        <div id="typed">
+
            <div>
−
            <span id="slogan"></span>
+
                <h2>Dr. Familict</h2>
 +
                <p>Hello! I’m a lovely Kidney baby, an essential organ in your body. Can you see those sparkling items
 +
                    pointed by my hand? Right! This is a wonderful liquid crystal show caused by the combination of
 +
                    β<sub>2</sub>-MG and nanobodies. What’s more, the different concentrations of β<sub>2</sub>-MG make
 +
                    the different degree of brightness showed by liquid crystal. We can make use of this phenomenon to
 +
                    achieve early detection of CKD caused mostly by diabetes and high blood pressure according to the
 +
                    brightness displayed by the detector confidently. Such an amazing idea, right?</p>
 +
            </div>
 
         </div>
 
         </div>
 
         <br>
 
         <br>
−
        <a class="btn" id="start">Get Started</a>
 
 
     </div>
 
     </div>
  
−
     <div>
+
     <div id="circle">
−
         <h2 class="title" id="meetUs">Chat Bubbles</h2>
+
         <div class="tr">
−
        <div id="chatBubbles">
+
            <div class="td">
−
             <div id="chat"></div>
+
                <a href="https://2018.igem.org/Team:DLUT_China_B/Description">
 +
                    <img src="https://static.igem.org/mediawiki/2018/b/b8/T--DLUT_China_B--Circle1.png" width="250">
 +
                    <div>Project</div>
 +
                </a>
 +
            </div>
 +
            <div class="td">
 +
                <a href="https://2018.igem.org/Team:DLUT_China_B/Parts">
 +
                    <img src="https://static.igem.org/mediawiki/2018/f/f0/T--DLUT_China_B--Circle2.png" width="250">
 +
                    <div>Parts</div>
 +
                </a>
 +
             </div>
 +
            <div class="td">
 +
                <a href="https://2018.igem.org/Team:DLUT_China_B/GrayValueConcentrationModel">
 +
                    <img src="https://static.igem.org/mediawiki/2018/c/c6/T--DLUT_China_B--Circle3.png" width="250">
 +
                    <div>Model</div>
 +
                </a>
 +
            </div>
 
         </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 are concerned about the world's largest potential group of chronic kidney disease</h2>
+
                </a>
−
        <div class="mainText">
+
            </div>
−
            <p>According to statistics of the World Health Organization, about 1.2 million people died of kidney disease in
+
            <div class="td">
−
                2015
+
                <a href="https://2018.igem.org/Team:DLUT_China_B/Human_Practices">
−
                worldwide, which is 32% higher than that in 2005. Among them, diabetes and hypertensive patients are the
+
                    <img src="https://static.igem.org/mediawiki/2018/6/63/T--DLUT_China_B--Circle5.png" width="250">
−
                largest
+
                    <div id="humanPracticesCircle"><p>Human<br>Practices</p></div>
−
                potential victims of chronic kidney disease. Of the new ESRD patients in the United States in the past 10
+
                 </a>
−
                years, 58%
+
             </div>
−
                are from diabetes and hypertension patients. If we do not intervene in patients with early-stage
+
            <div class="td">
−
                hypertension or
+
                 <a href="https://2018.igem.org/Team:DLUT_China_B/TeamMembers">
−
                diabetes, it will cause a dramatic deterioration of renal function with a mortality rate up to 90%. However,
+
                    <img src="https://static.igem.org/mediawiki/2018/0/06/T--DLUT_China_B--Circle6.png" width="250">
−
                if the
+
                    <div>Team</div>
−
                patient's kidney status can be monitored at any time, with early detection and timely medical treatment, up
+
                 </a>
−
                to 70%
+
             </div>
−
                of the disease may be reversed. Therefore, it is of great social significance to monitor the renal status of
+
−
                patients with early-stage hypertension and diabetes.</p>
+
−
            <p>At this stage, the excretion rate of urinary microalbumin (mALB) is mainly used to diagnose diabetic
+
−
                nephropathy and
+
−
                hypertensive nephropathy. Although the detection method is relatively perfect, it has the following
+
−
                 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>
−
 
−
    <div id="fixed2"></div>
 
  
 
     <div>
 
     <div>
−
         <h2 class="title">We use β<sub>2</sub>M for high sensitivity monitoring of the kidneys</h2>
+
         <h2 class="title">Click bubbles to chat with me</h2>
−
        <div class="mainText">
+
         <div id="chatBubbles"></div>
−
            <p>In order to solve the problems in the above detection methods, we conducted a multi-study investigation to
+
−
                find a new
+
−
                type of indicator β<sub>2</sub>M which has higher sensitivity to early kidney damage. β<sub>2</sub>M is a
+
−
                small
+
−
                molecule globulin produced by lymphocytes, platelets, and polymorphonuclear leukocytes. It can be freely
+
−
                filtered
+
−
                from the glomerulus and is absorbed by the proximal tubular in 99.9% . Under normal condition, the excretion
+
−
                of
+
−
                β<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
+
−
                excretion
+
−
                is increased in early urine of diabetic patients with stage I hypertension and diabetes. With the deepening
+
−
                of the
+
−
                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 id="fixed3"></div>
+
−
 
+
−
    <div>
+
−
        <h2 class="title">What kind of a work we want to complete?</h2>
+
−
         <div class="mainText">
+
−
            <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="fixed4"></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>
  
Line 156: Line 96:
 
             <h3><i class="fas fa-map-marker-alt"></i> 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>
 
         <div id="follow">
 
         <div id="follow">
Line 178: Line 120:
 
     <script src="https://2018.igem.org/wiki/index.php?title=Template:DLUT_China_B/js/script.js&action=raw&ctype=text/javascript"></script>
 
     <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>
−
        /*口号*/
 
−
        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);
 
−
 
−
        /*开始*/
 
−
        $('#start').click(function () {
 
−
            $('html,body').animate({scrollTop: $('#meetUs').offset().top-60}, 500);
 
−
        });
 
−
 
 
         /*对话气泡*/
 
         /*对话气泡*/
−
         // conversation object stored in separate variable:
+
         let conversation = {
−
        let convo = {
+
−
            // "ice" (as in "breaking the ice") is a required conversation object
+
−
            // that maps the first thing the bot will say to the user
+
 
             ice: {
 
             ice: {
−
                 // "says" defines an array of sequential bubbles
+
                 says: ["Hey, friend! Long time no see! You can click bubbles to chat with me."],
−
                 // that the bot will produce
+
                 reply: [
 +
                    {
 +
                        question: "mmm O (*￣▽￣*) O. Long time no see.",
 +
                        answer: "ice1"
 +
                    }
 +
                ]
 +
            },
 +
            "ice1": {
 
                 says: [
 
                 says: [
−
                     "Hello!",
+
                     "We have a lot of significant updates.（Of course we cannot make it as cool as  the Apple launch update)",
−
                     "Let's explore advanced chat flows with <em>chat-bubble</em>.",
+
                     "As an old friend, let me open the VIP channel for you.",
−
                     "In this example you'll see how this simple JavaScript framework can help you create advanced conversational sequences with GIFs!",
+
                     'Click "Skip", then you will skip the Project Introduction section.',
−
                    "To begin, choose how you'd like this (example) conversation to proceed...",
+
                     'Click "Listen", then you will acknowledge more details about our story.'
−
                     "...We can either talk about <strong>bananas and ice cream</strong> or <strong>other special things</strong>. Which one shall it be?"
+
 
                 ],
 
                 ],
−
                // "reply" is an array of possible options the user can pick from
 
−
                // as a reply
 
 
                 reply: [
 
                 reply: [
 
                     {
 
                     {
−
                         question: "Bananas and ice cream!", // label for the reply option
+
                         question: "Skip",
−
                         answer: "chapter-one" // key for the next conversation object
+
                         answer: "dest"
 
                     },
 
                     },
 
                     {
 
                     {
−
                         question: "No, thanks.", // label for the reply option
+
                         question: "Listen",
−
                         answer: "end" // key for an "escape valve"; we refer to this whenever a reply signals the end of the convo
+
                         answer: "listen1"
 +
                    }
 +
                ]
 +
            },
 +
            "dest": {
 +
                says: ["Please select the destination you want to go to."],
 +
                reply: [
 +
                    {
 +
                        question: "No, thank you.",
 +
                        answer: "end"
 
                     },
 
                     },
 
                     {
 
                     {
−
                         question: "What “other special things?”", // label for the reply option
+
                         question: "Project Introduction",
−
                         answer: "sidetrack" // key for a "side note" we can reference from multiple points in the chat
+
                         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"
 
                     }
 
                     }
 
                 ]
 
                 ]
−
             }, // end required "ice" conversation object
+
             },
−
 
+
            "listen1": {
−
            // side note
+
−
            sidetrack: {
+
 
                 says: [
 
                 says: [
−
                     "Things which go way beyond a single topic of conversation!",
+
                     "Here is iGEM_DLUT_China_B.",
−
                     "As in this case we are branching out from the main topic of “bananas and ice cream” into another series of prompts and possible replies.",
+
                     "I`ll introduce our project to you.",
−
                     "This could be a useful way provide more instructions or context."
+
                    "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: [
 
                 reply: [
 
                     {
 
                     {
−
                         question: "Tell me more.",
+
                         question: "And then?",
−
                         answer: "intro-context" // key for another side note; in this instance, we're using it to contextualize the Q&A we're heading into
+
                         answer: "listen2"
−
                     },
+
                     }
 +
                ]
 +
            },
 +
            "listen2": {
 +
                says: ["The second step is to monitor regularly to intervene the occurrence and development of diseases timely."],
 +
                reply: [
 
                     {
 
                     {
−
                         question: "Got it: on with the chat!",
+
                         question: "Yes, it makes sense. But how can it be achieved?",
−
                         answer: "chapter-one" // no further sidetrack required, returning to the main conversation tree
+
                         answer: "listen3"
 
                     }
 
                     }
 
                 ]
 
                 ]
 
             },
 
             },
−
 
+
             "listen3": {
−
            // another side note
+
−
             "intro-context": {
+
 
                 says: [
 
                 says: [
−
                     "This is an example of further instructions...",
+
                     "You may not believe that",
−
                     "...Context and side-notes...",
+
                     "we can know our current physical condition through urine.",
−
                     "...With a way to return back to the main trunk of the conversation, like so:"
+
                     "Urine is considered to be \"gold mine\" for the identification of disease markers."
 
                 ],
 
                 ],
 
                 reply: [
 
                 reply: [
 
                     {
 
                     {
−
                         question: "To the main topic, bananas and ice cream!",
+
                         question: "Is that true?",
−
                         answer: "chapter-one"
+
                         answer: "listen4"
 
                     }
 
                     }
 
                 ]
 
                 ]
 
             },
 
             },
−
 
+
             "listen4": {
−
            // main conversation trunk
+
−
             "chapter-one": {
+
 
                 says: [
 
                 says: [
−
                     "Excellent!",
+
                     "Absolutely. It`s like a mirror that reflects one`s health.",
−
                     "(This is the main topic of our chat.)",
+
                     "In the early stages of a disease, we can use the protein markers in the urine to screen the disease."
−
                    "Bananas and ice cream.",
+
−
                    "Now, which do you prefer best?"
+
 
                 ],
 
                 ],
 
                 reply: [
 
                 reply: [
 
                     {
 
                     {
−
                         question: "Bananas!",
+
                         question: "But how do you screen it?",
−
                         answer: "chapter-two" // here both replies send people onto the same next chapter
+
                         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: "Ice cream!", // both replies send people onto the same next chapter
+
                         question: "Project Introduction",
−
                         answer: "chapter-two"
+
                         answer: "projectIntroduction"
 
                     },
 
                     },
 
                     {
 
                     {
−
                         question: "What’s this button?",
+
                         question: "Parts",
−
                         answer: "intro-context"
+
                         answer: "parts"
 +
                    },
 +
                    {
 +
                        question: "Model",
 +
                        answer: "model"
 +
                    },
 +
                    {
 +
                        question: "Awards",
 +
                        answer: "awards"
 +
                    },
 +
                    {
 +
                        question: "Human Practices",
 +
                        answer: "humanPractices"
 +
                    },
 +
                    {
 +
                        question: "Teamwork and Cooperation",
 +
                        answer: "teamworkAndCooperation"
 
                     }
 
                     }
 
                 ]
 
                 ]
 
             },
 
             },
−
             "chapter-two": {
+
             "projectIntroduction": {
 
                 says: [
 
                 says: [
−
                     "Both <strong>bananas</strong> and <strong>ice cream</strong> take you here.",
+
                     "Wow, you selected Project as the destination.",
−
                     "Your next answer will take you to another prompt...",
+
                     "Are you ready to go?"
−
                    "...Or to the end of the chat, an “escape valve” we can use to end the chat if you want."
+
 
                 ],
 
                 ],
 
                 reply: [
 
                 reply: [
 
                     {
 
                     {
−
                         question: "Give me another prompt.",
+
                         question: "Yes.",
−
                         answer: "chapter-four"
+
                         answer: "goProjectIntroduction"
 
                     },
 
                     },
 
                     {
 
                     {
−
                         question: "End the chat.",
+
                         question: "Wait a second.",
−
                         answer: "end" // an example of using the Escape Valve for ineligible, Not Applicable participants
+
                         answer: "dest"
 
                     }
 
                     }
 
                 ]
 
                 ]
 
             },
 
             },
−
 
+
             "parts": {
−
            // this chapter is skipped
+
−
             "chapter-three": {
+
−
                // we skip this in this example to show you can do that; use it if you want.
+
 
                 says: [
 
                 says: [
−
                     "Go ahead to the next chapter."
+
                     "Didi, you are about to reach Parts.",
 +
                    "You will learn about the main components we use such as messages."
 
                 ],
 
                 ],
 
                 reply: [
 
                 reply: [
 
                     {
 
                     {
−
                         question: "OK, I will.",
+
                         question: "OK, let`s go.",
−
                         answer: "chapter-four"
+
                         answer: "goParts"
 +
                    },
 +
                    {
 +
                        question: "Wait a second.",
 +
                        answer: "dest"
 
                     }
 
                     }
 
                 ]
 
                 ]
 
             },
 
             },
−
 
+
             "model": {
−
            // continue with main conversation trunk
+
−
             "chapter-four": {
+
 
                 says: [
 
                 says: [
−
                     "Hey, you're awesome!",
+
                     "Have you decided to make Model as your destination?",
−
                     "More prompts?"
+
                     "Project optimization and results will be exhibited here."
 
                 ],
 
                 ],
 
                 reply: [
 
                 reply: [
 
                     {
 
                     {
−
                         question: "Nope.",
+
                         question: "Go and visit.",
−
                         answer: "end"
+
                         answer: "goModel"
 
                     },
 
                     },
 
                     {
 
                     {
−
                         question: "Yes, more prompts!",
+
                         question: "I want another destination.",
−
                         answer: "chapter-five"
+
                         answer: "dest"
 
                     }
 
                     }
 
                 ]
 
                 ]
 
             },
 
             },
−
             "chapter-five": {
+
             "awards": {
 
                 says: [
 
                 says: [
−
                     "Answering 'Yes' here will open a new window with a page from another site...", // call a function to an external resource / application outside of chat-bubble's purview
+
                     "You will find the treasures of application design at Awards office."
−
                    "...And confirm that you're awesome, again.",
+
−
                    "Answering 'Not interested' will end the chat." // call a function to an external resource / application outside of chat-bubble's purview
+
 
                 ],
 
                 ],
 
                 reply: [
 
                 reply: [
 
                     {
 
                     {
−
                         question: "Not interested.",
+
                         question: "Go. (￣) ￣) ↗",
−
                         answer: "end"
+
                         answer: "goAwards"
 
                     },
 
                     },
 
                     {
 
                     {
−
                         question: "Yes!",
+
                         question: "I`m not interested in treasure hunt.",
−
                         answer: "externalResourceFunction" // function name that will be executed
+
                         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"
 
                     }
 
                     }
 
                 ]
 
                 ]
Line 352: Line 405:
 
                 says: [
 
                 says: [
 
                     "Thanks for your time and attention.",
 
                     "Thanks for your time and attention.",
−
                     "The chat is over, but you can <strong>start over</strong> to see how this conversation could have gone differently."
+
                     "The chat is over, but you can start over to go through other options."
 
                 ],
 
                 ],
 
                 reply: [
 
                 reply: [
 
                     {
 
                     {
−
                         question: "Start over.",
+
                         question: "Start over",
 
                         answer: "ice"
 
                         answer: "ice"
 
                     }
 
                     }
 
                 ]
 
                 ]
 
             }
 
             }
−
         }; // end conversation object
+
         };
 +
        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";
 +
        };
  
−
         // initialize by constructing a named function...
+
         function isShow($el) {
−
        let chatWindow = new Bubbles(
+
            let winH = $(window).height(), /*获取窗口高度*/
−
            document.getElementById("chat"), // ...passing HTML container element...
+
                scrollH = $(window).scrollTop(), /*获取窗口滚动高度*/
−
            "chatWindow" // ...and name of the function as a parameter
+
                top = $el.offsetTop; /*获取元素距离窗口顶部偏移高度*/
−
        );
+
            return top < scrollH + winH;
 +
        }
  
−
         // `.talk()` will get your bot to begin the conversation
+
         let chatWindow;
−
        chatWindow.talk(
+
−
            // pass your JSON/JavaScript object to `.talk()` function where
+
−
            // you define how the conversation between the bot and user will go
+
−
            convo
+
−
        );
+
  
−
         // this function is called when user clicks "Yes!" in the "chapter-four" dialogue
+
         function lazyLoad() {
−
        externalResourceFunction = function () {
+
            if (document.getElementById("chat") == null)
−
            // together with the function we'll restart the conversation starting from "capther-four"
+
                if (isShow(document.getElementById("chatBubbles"))) {
−
            // to make sure the user isn't left hanging after the function below has been executed
+
                    let chat = document.createElement("div");
−
            chatWindow.talk(convo, "chapter-four");
+
                    chat.setAttribute("id", "chat");
 +
                    document.getElementById("chatBubbles").appendChild(chat);
 +
                    chatWindow = new Bubbles(document.getElementById("chat"), "chatWindow");
 +
                    chatWindow.talk(conversation);
 +
                }
 +
        }
  
−
            // function that opens external window
+
        $(document).ready(function () {
−
             window.open(
+
             $(window).scroll(function () {
−
                 "https://meanbusiness.com/wp-content/uploads/2018/04/IceCream-BananaSkis.gif",
+
                 topToggle();
−
                 "_blank",
+
            });
−
                "toolbar=no,scrollbars=no,menubar=no,resizable=no,location=no,titlebar=no,width=300,height=600"
+
            $(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