Difference between revisions of "Team:DLUT China B/experimentPage"

m
(初次布局。)
 
Line 1: Line 1:
−
{{DLUT_China_B/blank}}
+
<html lang="en">
−
<html>
+
 
<head>
 
<head>
 
     <meta charset="UTF-8">
 
     <meta charset="UTF-8">
 
     <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/slideshow.css&action=raw&ctype=text/css">
 +
   
 
     <script src="https://2018.igem.org/wiki/index.php?title=Template:DLUT_China_B/js/slideshow.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 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/typed.js&action=raw&ctype=text/javascript"></script>
 
</head>
 
</head>
 
<body>
 
<body>
−
<h3>导航栏</h3>
+
<div id="dlutb">
−
<ul class="menu">
+
    <div id="moduleHeader">
−
    <li>
+
        <div id="nav">
−
        <a href="#">Professional Services</a>
+
            <ul class="menu">
−
        <ul class="subMenu">
+
                <li>
−
            <li>
+
                    <a href="#">Professional Services</a>
−
                <a href="#">Professional Services</a>
+
                    <ul class="subMenu">
−
            </li>
+
                        <li>
−
            <li>
+
                            <a href="#">Professional Services</a>
−
                <a href="#">Partners</a>
+
                        </li>
−
            </li>
+
                        <li>
−
            <li>
+
                            <a href="#">Partners</a>
−
                <a href="#">Training</a>
+
                        </li>
−
            </li>
+
                        <li>
−
            <li>
+
                            <a href="#">Training</a>
−
                <a href="#">Technical Support</a>
+
                        </li>
−
            </li>
+
                        <li>
−
        </ul>
+
                            <a href="#">Technical Support</a>
−
    </li>
+
                        </li>
−
    <li>
+
                    </ul>
−
        <a href="#">Products</a>
+
                </li>
−
        <ul class="subMenu">
+
                <li>
−
            <li>
+
                    <a href="#">Products</a>
−
                <a href="#">Embedded Devices</a>
+
                    <ul class="subMenu">
−
            </li>
+
                        <li>
−
            <li>
+
                            <a href="#">Embedded Devices</a>
−
                <a href="#">Reference software stack & SDK</a>
+
                        </li>
−
            </li>
+
                        <li>
−
        </ul>
+
                            <a href="#">Reference software stack & SDK</a>
−
    </li>
+
                        </li>
−
    <li>
+
                    </ul>
−
        <a href="#">Solutions</a>
+
                </li>
−
        <ul class="subMenu">
+
                <li>
−
            <li>
+
                    <a href="#">Solutions</a>
−
                <a href="#">Automotive</a>
+
                    <ul class="subMenu">
−
            </li>
+
                        <li>
−
            <li>
+
                            <a href="#">Automotive</a>
−
                <a href="#">Automation</a>
+
                        </li>
−
            </li>
+
                        <li>
−
            <li>
+
                            <a href="#">Automation</a>
−
                <a href="#">Medical</a>
+
                        </li>
−
            </li>
+
                        <li>
−
            <li>
+
                            <a href="#">Medical</a>
−
                <a href="#">Libraries, Tools & IDE</a>
+
                        </li>
−
            </li>
+
                        <li>
−
            <li>
+
                            <a href="#">Libraries, Tools & IDE</a>
−
                <a href="#">UI design technologies</a>
+
                        </li>
−
            </li>
+
                        <li>
−
        </ul>
+
                            <a href="#">UI design technologies</a>
−
    </li>
+
                        </li>
−
    <li>
+
                    </ul>
−
        <a href="#">Professional Services</a>
+
                </li>
−
        <ul class="subMenu">
+
                <li>
−
            <li>
+
                    <a href="#">Professional Services</a>
−
                <a href="#">Professional Services</a>
+
                    <ul class="subMenu">
−
            </li>
+
                        <li>
−
            <li>
+
                            <a href="#">Professional Services</a>
−
                <a href="#">Partners</a>
+
                        </li>
−
            </li>
+
                        <li>
−
            <li>
+
                            <a href="#">Partners</a>
−
                <a href="#">Training</a>
+
                        </li>
−
            </li>
+
                        <li>
−
            <li>
+
                            <a href="#">Training</a>
−
                <a href="#">Technical Support</a>
+
                        </li>
−
            </li>
+
                        <li>
−
        </ul>
+
                            <a href="#">Technical Support</a>
−
    </li>
+
                        </li>
−
    <li>
+
                    </ul>
−
        <a href="#">Products</a>
+
                </li>
−
        <ul class="subMenu">
+
                <li>
−
            <li>
+
                    <a href="#">Products</a>
−
                <a href="#">Embedded Devices</a>
+
                    <ul class="subMenu">
−
            </li>
+
                        <li>
−
            <li>
+
                            <a href="#">Embedded Devices</a>
−
                <a href="#">Reference software stack & SDK</a>
+
                        </li>
−
            </li>
+
                        <li>
−
        </ul>
+
                            <a href="#">Reference software stack & SDK</a>
−
    </li>
+
                        </li>
−
    <li>
+
                    </ul>
−
        <a href="#">Solutions</a>
+
                </li>
−
        <ul class="subMenu">
+
                <li>
−
            <li>
+
                    <a href="#">Solutions</a>
−
                <a href="#">Automotive</a>
+
                    <ul class="subMenu">
−
            </li>
+
                        <li>
−
            <li>
+
                            <a href="#">Automotive</a>
−
                <a href="#">Automation</a>
+
                        </li>
−
            </li>
+
                        <li>
−
            <li>
+
                            <a href="#">Automation</a>
−
                <a href="#">Medical</a>
+
                        </li>
−
            </li>
+
                        <li>
−
            <li>
+
                            <a href="#">Medical</a>
−
                <a href="#">Libraries, Tools & IDE</a>
+
                        </li>
−
            </li>
+
                        <li>
−
            <li>
+
                            <a href="#">Libraries, Tools & IDE</a>
−
                <a href="#">UI design technologies</a>
+
                        </li>
−
            </li>
+
                        <li>
−
        </ul>
+
                            <a href="#">UI design technologies</a>
−
    </li>
+
                        </li>
−
    <li>
+
                    </ul>
−
        <a href="#">Professional Services</a>
+
                </li>
−
        <ul class="subMenu">
+
                <li>
−
            <li>
+
                    <a href="#">Professional Services</a>
−
                <a href="#">Professional Services</a>
+
                    <ul class="subMenu">
−
            </li>
+
                        <li>
−
            <li>
+
                            <a href="#">Professional Services</a>
−
                <a href="#">Partners</a>
+
                        </li>
−
            </li>
+
                        <li>
−
            <li>
+
                            <a href="#">Partners</a>
−
                <a href="#">Training</a>
+
                        </li>
−
            </li>
+
                        <li>
−
            <li>
+
                            <a href="#">Training</a>
−
                <a href="#">Technical Support</a>
+
                        </li>
−
            </li>
+
                        <li>
−
        </ul>
+
                            <a href="#">Technical Support</a>
−
    </li>
+
                        </li>
−
    <li>
+
                    </ul>
−
        <a href="#">Products</a>
+
                 </li>
−
        <ul class="subMenu">
+
             </ul>
−
            <li>
+
        </div>
−
                 <a href="#">Embedded Devices</a>
+
         <br>
−
            </li>
+
         <div class="moduleTitle">Module Name</div>
−
             <li>
+
         <div class="subModule">
−
                <a href="#">Reference software stack & SDK</a>
+
             <span>Sub Module Name</span>
−
            </li>
+
         </div>
−
         </ul>
+
     </div>
−
    </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>
+
−
</ul>
+
−
<br>
+
−
<h3>项目描述</h3>
+
−
<h4>We are concerned about the world's largest potential group of chronic kidney disease.</h4>
+
−
<p>According to statistics of the World Health Organization, about 1.2 million people died of kidney disease in 2015
+
−
    worldwide, which is 32% higher than that in 2005. Among them, diabetes and hypertensive patients are the largest
+
−
    potential victims of chronic kidney disease. Of the new ESRD patients in the United States in the past 10 years, 58%
+
−
    are from diabetes and hypertension patients. If we do not intervene in patients with early-stage hypertension or
+
−
    diabetes, it will cause a dramatic deterioration of renal function with a mortality rate up to 90%. However, if the
+
−
    patient's kidney status can be monitored at any time, with early detection and timely medical treatment, up to 70%
+
−
    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>
+
−
<h4>We use β<sub>2</sub>M for high sensitivity monitoring of the kidneys.</h4>
+
−
<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>
+
−
<h4>What kind of a work we want to complete?</h4>
+
−
<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>
+
−
<h4>For U-β<sub>2</sub>M we developed a suitable detection method</h4>
+
−
<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>
+
−
<br>
+
−
<h3>对话气泡</h3>
+
−
<div style="width:800px;height: 600px;">
+
−
     <!-- container element for chat window -->
+
−
    <div id="chat"></div>
+
  
−
     <!-- import the JavaScript file -->
+
     <div>
−
    <script src="https://2018.igem.org/wiki/index.php?title=Template:DLUT_China_B/js/bubbles.js&action=raw&ctype=text/javascript"></script>
+
        <h2 class="title">Chat Bubbles</h2>
−
    <script>
+
        <div id="chatBubbles">
−
        // conversation object stored in separate variable:
+
            <!-- container element for chat window -->
−
        var convo = {
+
            <div id="chat"></div>
−
            // "ice" (as in "breaking the ice") is a required conversation object
+
            <!--<script src="https://2018.igem.org/wiki/index.php?title=Template:DLUT_China_B/js/bubbles.js&action=raw&ctype=text/javascript"></script>-->
−
            // that maps the first thing the bot will say to the user
+
            <script>
−
            ice: {
+
                // conversation object stored in separate variable:
−
                // "says" defines an array of sequential bubbles
+
                var convo = {
−
                // that the bot will produce
+
                    // "ice" (as in "breaking the ice") is a required conversation object
−
                says: [
+
                    // that maps the first thing the bot will say to the user
−
                    "Hello!",
+
                    ice: {
−
                    "Let's explore advanced chat flows with <em>chat-bubble</em>.",
+
                        // "says" defines an array of sequential bubbles
−
                    "In this example you'll see how this simple JavaScript framework can help you create advanced conversational sequences with GIFs!",
+
                        // that the bot will produce
−
                    "To begin, choose how you'd like this (example) conversation to proceed...",
+
                        says: [
−
                    "...We can either talk about <strong>bananas and ice cream</strong> or <strong>other special things</strong>. Which one shall it be?"
+
                            "Hello!",
−
                ],
+
                            "Let's explore advanced chat flows with <em>chat-bubble</em>.",
−
                // "reply" is an array of possible options the user can pick from
+
                            "In this example you'll see how this simple JavaScript framework can help you create advanced conversational sequences with GIFs!",
−
                // as a reply
+
                            "To begin, choose how you'd like this (example) conversation to proceed...",
−
                reply: [
+
                            "...We can either talk about <strong>bananas and ice cream</strong> or <strong>other special things</strong>. Which one shall it be?"
−
                    {
+
                        ],
−
                        question: "Bananas and ice cream!", // label for the reply option
+
                        // "reply" is an array of possible options the user can pick from
−
                        answer: "chapter-one" // key for the next conversation object
+
                        // as a reply
 +
                        reply: [
 +
                            {
 +
                                question: "Bananas and ice cream!", // label for the reply option
 +
                                answer: "chapter-one" // key for the next conversation object
 +
                            },
 +
                            {
 +
                                question: "No, thanks.", // label for the reply option
 +
                                answer: "end" // key for an "escape valve"; we refer to this whenever a reply signals the end of the convo
 +
                            },
 +
                            {
 +
                                question: "What “other special things?”", // label for the reply option
 +
                                answer: "sidetrack" // key for a "side note" we can reference from multiple points in the chat
 +
                            }
 +
                        ]
 +
                    }, // end required "ice" conversation object
 +
 
 +
                    // side note
 +
                    sidetrack: {
 +
                        says: [
 +
                            "Things which go way beyond a single topic of conversation!",
 +
                            "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.",
 +
                            "This could be a useful way provide more instructions or context."
 +
                        ],
 +
                        reply: [
 +
                            {
 +
                                question: "Tell me more.",
 +
                                answer: "intro-context" // key for another side note; in this instance, we're using it to contextualize the Q&A we're heading into
 +
                            },
 +
                            {
 +
                                question: "Got it: on with the chat!",
 +
                                answer: "chapter-one" // no further sidetrack required, returning to the main conversation tree
 +
                            }
 +
                        ]
 
                     },
 
                     },
−
                     {
+
 
−
                         question: "No, thanks.", // label for the reply option
+
                     // another side note
−
                         answer: "end" // key for an "escape valve"; we refer to this whenever a reply signals the end of the convo
+
                    "intro-context": {
 +
                         says: [
 +
                            "This is an example of further instructions...",
 +
                            "...Context and side-notes...",
 +
                            "...With a way to return back to the main trunk of the conversation, like so:"
 +
                         ],
 +
                        reply: [
 +
                            {
 +
                                question: "To the main topic, bananas and ice cream!",
 +
                                answer: "chapter-one"
 +
                            }
 +
                        ]
 
                     },
 
                     },
−
                    {
 
−
                        question: "What “other special things?”", // label for the reply option
 
−
                        answer: "sidetrack" // key for a "side note" we can reference from multiple points in the chat
 
−
                    }
 
−
                ]
 
−
            }, // end required "ice" conversation object
 
  
−
            // side note
+
                    // main conversation trunk
−
            sidetrack: {
+
                    "chapter-one": {
−
                says: [
+
                        says: [
−
                    "Things which go way beyond a single topic of conversation!",
+
                            "Excellent!",
−
                    "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.",
+
                            "(This is the main topic of our chat.)",
−
                    "This could be a useful way provide more instructions or context."
+
                            "Bananas and ice cream.",
−
                ],
+
                            "Now, which do you prefer best?"
−
                reply: [
+
                        ],
−
                    {
+
                        reply: [
−
                        question: "Tell me more.",
+
                            {
−
                        answer: "intro-context" // key for another side note; in this instance, we're using it to contextualize the Q&A we're heading into
+
                                question: "Bananas!",
 +
                                answer: "chapter-two" // here both replies send people onto the same next chapter
 +
                            },
 +
                            {
 +
                                question: "Ice cream!", // both replies send people onto the same next chapter
 +
                                answer: "chapter-two"
 +
                            },
 +
                            {
 +
                                question: "What’s this button?",
 +
                                answer: "intro-context"
 +
                            }
 +
                        ]
 +
                    },
 +
                    "chapter-two": {
 +
                        says: [
 +
                            "Both <strong>bananas</strong> and <strong>ice cream</strong> take you here.",
 +
                            "Your next answer will take you to another prompt...",
 +
                            "...Or to the end of the chat, an “escape valve” we can use to end the chat if you want."
 +
                        ],
 +
                        reply: [
 +
                            {
 +
                                question: "Give me another prompt.",
 +
                                answer: "chapter-four"
 +
                            },
 +
                            {
 +
                                question: "End the chat.",
 +
                                answer: "end" // an example of using the Escape Valve for ineligible, Not Applicable participants
 +
                            }
 +
                        ]
 
                     },
 
                     },
−
                    {
 
−
                        question: "Got it: on with the chat!",
 
−
                        answer: "chapter-one" // no further sidetrack required, returning to the main conversation tree
 
−
                    }
 
−
                ]
 
−
            },
 
  
−
            // another side note
+
                    // this chapter is skipped
−
            "intro-context": {
+
                    "chapter-three": {
−
                says: [
+
                        // we skip this in this example to show you can do that; use it if you want.
−
                    "This is an example of further instructions...",
+
                        says: [
−
                    "...Context and side-notes...",
+
                            "Go ahead to the next chapter."
−
                    "...With a way to return back to the main trunk of the conversation, like so:"
+
                        ],
−
                ],
+
                        reply: [
−
                reply: [
+
                            {
−
                    {
+
                                question: "OK, I will.",
−
                        question: "To the main topic, bananas and ice cream!",
+
                                answer: "chapter-four"
−
                        answer: "chapter-one"
+
                            }
−
                    }
+
                        ]
−
                ]
+
                    },
−
            },
+
  
−
            // main conversation trunk
+
                    // continue with main conversation trunk
−
            "chapter-one": {
+
                    "chapter-four": {
−
                says: [
+
                        says: [
−
                    "Excellent!",
+
                            "Hey, you're awesome!",
−
                    "(This is the main topic of our chat.)",
+
                            "More prompts?"
−
                    "Bananas and ice cream.",
+
                        ],
−
                    "Now, which do you prefer best?"
+
                        reply: [
−
                ],
+
                            {
−
                reply: [
+
                                question: "Nope.",
−
                    {
+
                                answer: "end"
−
                        question: "Bananas!",
+
                            },
−
                        answer: "chapter-two" // here both replies send people onto the same next chapter
+
                            {
 +
                                question: "Yes, more prompts!",
 +
                                answer: "chapter-five"
 +
                            }
 +
                        ]
 
                     },
 
                     },
−
                     {
+
                     "chapter-five": {
−
                         question: "Ice cream!", // both replies send people onto the same next chapter
+
                         says: [
−
                         answer: "chapter-two"
+
                            "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
 +
                            "...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: [
 +
                            {
 +
                                question: "Not interested.",
 +
                                answer: "end"
 +
                            },
 +
                            {
 +
                                question: "Yes!",
 +
                                answer: "externalResourceFunction" // function name that will be executed
 +
                            }
 +
                        ]
 
                     },
 
                     },
−
                     {
+
                     end: {
−
                         question: "What’s this button?",
+
                         says: [
−
                        answer: "intro-context"
+
                            "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."
−
                ]
+
                        ],
−
            },
+
                        reply: [
−
            "chapter-two": {
+
                            {
−
                says: [
+
                                question: "Start over.",
−
                    "Both <strong>bananas</strong> and <strong>ice cream</strong> take you here.",
+
                                answer: "ice"
−
                    "Your next answer will take you to another prompt...",
+
                            }
−
                    "...Or to the end of the chat, an “escape valve” we can use to end the chat if you want."
+
                         ]
−
                ],
+
−
                reply: [
+
−
                    {
+
−
                        question: "Give me another prompt.",
+
−
                        answer: "chapter-four"
+
−
                    },
+
−
                    {
+
−
                         question: "End the chat.",
+
−
                        answer: "end" // an example of using the Escape Valve for ineligible, Not Applicable participants
+
 
                     }
 
                     }
−
                 ]
+
                 }; // end conversation object
−
            },
+
  
−
            // this chapter is skipped
+
                // initialize by constructing a named function...
−
            "chapter-three": {
+
                var chatWindow = new Bubbles(
−
                 // we skip this in this example to show you can do that; use it if you want.
+
                    document.getElementById("chat"), // ...passing HTML container element...
−
                 says: [
+
                    "chatWindow" // ...and name of the function as a parameter
−
                     "Go ahead to the next chapter."
+
                );
−
                ],
+
 
−
                reply: [
+
                 // `.talk()` will get your bot to begin the conversation
−
                     {
+
                chatWindow.talk(
−
                         question: "OK, I will.",
+
                    // pass your JSON/JavaScript object to `.talk()` function where
−
                         answer: "chapter-four"
+
                    // 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
 +
                externalResourceFunction = function () {
 +
                     // together with the function we'll restart the conversation starting from "capther-four"
 +
                    // to make sure the user isn't left hanging after the function below has been executed
 +
                    chatWindow.talk(convo, "chapter-four");
 +
 
 +
                    // function that opens external window
 +
                     window.open(
 +
                         "https://meanbusiness.com/wp-content/uploads/2018/04/IceCream-BananaSkis.gif",
 +
                        "_blank",
 +
                         "toolbar=no,scrollbars=no,menubar=no,resizable=no,location=no,titlebar=no,width=300,height=600"
 +
                     )
 +
                 }
 +
             </script>
 +
        </div>
 +
    </div>
 +
 
 +
    <div id="fixed1"></div>
  
−
             // continue with main conversation trunk
+
    <div>
−
             "chapter-four": {
+
        <h2 class="title">Slide Show</h2>
−
                 says: [
+
        <div id="box">
−
                    "Hey, you're awesome!",
+
             <div id="box_img">
−
                    "More prompts?"
+
                <ul></ul>
−
                 ],
+
            </div>
−
                 reply: [
+
             <div id="word">
 +
                 <ul></ul>
 +
            </div>
 +
            <div id="controller">
 +
                <div id="backward"></div>
 +
                 <div id="forward"></div>
 +
            </div>
 +
            <script>
 +
                 let data = [
 
                     {
 
                     {
−
                         question: "Nope.",
+
                         "src": "https://static.igem.org/mediawiki/2018/2/29/T--DLUT_China_B--logo.png",
−
                         answer: "end"
+
                         "title": "DLUT China B Logo",
 +
                        "description": "DLUT China B Logo",
 +
                        "link": "#"
 
                     },
 
                     },
 
                     {
 
                     {
−
                         question: "Yes, more prompts!",
+
                         "src": "https://static.igem.org/mediawiki/2018/9/96/T--DLUT_China_B--laboratory.jpg",
−
                        answer: "chapter-five"
+
                        "title": "Laboratory",
−
                    }
+
                         "description": "Laboratory.",
−
                ]
+
                         "link": "#"
−
            },
+
−
            "chapter-five": {
+
−
                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
+
−
                    "...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: [
+
−
                    {
+
−
                         question: "Not interested.",
+
−
                         answer: "end"
+
 
                     },
 
                     },
 
                     {
 
                     {
−
                         question: "Yes!",
+
                         "src": "https://static.igem.org/mediawiki/2018/b/b6/T--DLUT_China_B--Clean_Bench.jpg",
−
                         answer: "externalResourceFunction" // function name that will be executed
+
                         "title": "Clean Bench",
 +
                        "description": "Clean Bench.",
 +
                        "link": "#"
 
                     }
 
                     }
−
                 ]
+
                 ];
−
            },
+
                 $(document).ready(slideshow(data));
−
            end: {
+
            </script>
−
                 says: [
+
        </div>
−
                    "Thanks for your time and attention.",
+
        <br>
−
                    "The chat is over, but you can <strong>start over</strong> to see how this conversation could have gone differently."
+
    </div>
−
                ],
+
−
                reply: [
+
−
                    {
+
−
                        question: "Start over.",
+
−
                        answer: "ice"
+
−
                    }
+
−
                ]
+
−
            }
+
−
        }; // end conversation object
+
  
−
        // initialize by constructing a named function...
+
    <div id="fixed2"></div>
−
        var chatWindow = new Bubbles(
+
−
            document.getElementById("chat"), // ...passing HTML container element...
+
−
            "chatWindow" // ...and name of the function as a parameter
+
−
        );
+
  
−
         // `.talk()` will get your bot to begin the conversation
+
    <div>
−
         chatWindow.talk(
+
         <h2 class="title">Chart</h2>
−
            // pass your JSON/JavaScript object to `.talk()` function where
+
         <p class="mainText"><a href="http://www.chartjs.org/samples/latest/">http://www.chartjs.org/samples/latest/</a></p>
−
            // you define how the conversation between the bot and user will go
+
    </div>
−
            convo
+
−
        );
+
  
−
        // this function is called when user clicks "Yes!" in the "chapter-four" dialogue
+
    <div id="fixed3"></div>
−
        externalResourceFunction = function () {
+
−
            // together with the function we'll restart the conversation starting from "capther-four"
+
−
            // to make sure the user isn't left hanging after the function below has been executed
+
−
            chatWindow.talk(convo, "chapter-four");
+
  
−
            // function that opens external window
+
     <div>
−
            window.open(
+
        <h2 class="title">To Be Completed</h2>
−
                "https://meanbusiness.com/wp-content/uploads/2018/04/IceCream-BananaSkis.gif",
+
        <p class="mainText">There is nothing here at the moment.</p>
−
                "_blank",
+
−
                "toolbar=no,scrollbars=no,menubar=no,resizable=no,location=no,titlebar=no,width=300,height=600"
+
−
            )
+
−
        }
+
−
     </script>
+
−
</div>
+
−
<br>
+
−
<h3>图表</h3>
+
−
<a href="http://www.chartjs.org/samples/latest/">http://www.chartjs.org/samples/latest/</a>
+
−
<br>
+
−
<h3>轮播图</h3>
+
−
<div id="box">
+
−
    <div id="box_img">
+
−
        <ul></ul>
+
 
     </div>
 
     </div>
−
     <div id="word">
+
 
−
         <ul></ul>
+
     <div id="footer">
−
    </div>
+
         <div id="address">
−
    <div id="controller">
+
            <h3>Address</h3>
−
        <div id="backward"></div>
+
            <p>No.2 Linggong Road, Ganjingzi District, Dalian City, Liaoning Province, P.R.C., 116024</p>
−
        <div id="forward"></div>
+
        </div>
 
     </div>
 
     </div>
 +
 +
    <div id="back" class="btn"></div>
 +
    <script>
 +
        $('#back').click(function () {
 +
            $('html').animate( {scrollTop: 0}, 500);
 +
        });
 +
        document.onscroll=function () {
 +
            if($('html').scrollTop()>600)
 +
                document.getElementById("back").style.display="block";
 +
            else
 +
                document.getElementById("back").style.display="none";
 +
        };
 +
    </script>
 
</div>
 
</div>
 
</body>
 
</body>
 
</html>
 
</html>

Latest revision as of 07:45, 7 September 2018

2018 iGEM_DLUT_B

Chat Bubbles

Slide Show


      To Be Completed

      There is nothing here at the moment.