Difference between revisions of "Team:DLUT China B"

m
(剥离导航栏、加入对话气泡,改善至顶按钮,使用Font Awesome.)
Line 3: Line 3:
 
     <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">
 +
    <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/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>
Line 15: Line 17:
 
<div id="dlutb">
 
<div id="dlutb">
 
     <div id="header">
 
     <div id="header">
         <div id="nav">
+
         <div id="nav"></div>
            <ul class="menu">
+
                <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>
+
                <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>
+
 
         <br>
 
         <br>
 
         <div class="title" id="teamName">DLUT China B</div>
 
         <div class="title" id="teamName">DLUT China B</div>
Line 137: Line 23:
 
             <span id="slogan"></span>
 
             <span id="slogan"></span>
 
         </div>
 
         </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>
 
         <br>
 
         <a class="btn" id="start">Get Started</a>
 
         <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>
         <h2 class="title" id="meetUs">We are concerned about the world's largest potential group of chronic kidney disease</h2>
+
         <h2 class="title" id="meetUs">Chat Bubbles</h2>
 +
        <div id="chatBubbles">
 +
            <div id="chat"></div>
 +
        </div>
 +
    </div>
 +
 
 +
    <div id="fixed1"></div>
 +
 
 +
    <div>
 +
        <h2 class="title">We are concerned about the world's largest potential group of chronic kidney disease</h2>
 
         <div class="mainText">
 
         <div class="mainText">
 
             <p>According to statistics of the World Health Organization, about 1.2 million people died of kidney disease in
 
             <p>According to statistics of the World Health Organization, about 1.2 million people died of kidney disease in
Line 196: Line 75:
 
     </div>
 
     </div>
  
     <div id="fixed1"></div>
+
     <div id="fixed2"></div>
  
 
     <div>
 
     <div>
Line 222: Line 101:
 
     </div>
 
     </div>
  
     <div id="fixed2"></div>
+
     <div id="fixed3"></div>
  
 
     <div>
 
     <div>
Line 242: Line 121:
 
     </div>
 
     </div>
  
     <div id="fixed3"></div>
+
     <div id="fixed4"></div>
  
 
     <div>
 
     <div>
Line 275: Line 154:
 
     <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>
 +
        </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 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);
 
         });
 
         });
         document.onscroll=function () {
+
 
             if($('html').scrollTop()>600)
+
         /*对话气泡*/
                 document.getElementById("back").style.display="block";
+
        // conversation object stored in separate variable:
             else
+
        let convo = {
                 document.getElementById("back").style.display="none";
+
             // "ice" (as in "breaking the ice") is a required conversation object
 +
            // that maps the first thing the bot will say to the user
 +
            ice: {
 +
                // "says" defines an array of sequential bubbles
 +
                // that the bot will produce
 +
                says: [
 +
                    "Hello!",
 +
                    "Let's explore advanced chat flows with <em>chat-bubble</em>.",
 +
                    "In this example you'll see how this simple JavaScript framework can help you create advanced conversational sequences with GIFs!",
 +
                    "To begin, choose how you'd like this (example) conversation to proceed...",
 +
                    "...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: [
 +
                    {
 +
                        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
 +
                    }
 +
                ]
 +
            },
 +
 
 +
            // another side note
 +
            "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"
 +
                    }
 +
                ]
 +
            },
 +
 
 +
            // main conversation trunk
 +
            "chapter-one": {
 +
                says: [
 +
                    "Excellent!",
 +
                    "(This is the main topic of our chat.)",
 +
                    "Bananas and ice cream.",
 +
                    "Now, which do you prefer best?"
 +
                ],
 +
                reply: [
 +
                    {
 +
                        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
 +
                    }
 +
                ]
 +
            },
 +
 
 +
            // this chapter is skipped
 +
            "chapter-three": {
 +
                // we skip this in this example to show you can do that; use it if you want.
 +
                says: [
 +
                    "Go ahead to the next chapter."
 +
                ],
 +
                reply: [
 +
                    {
 +
                        question: "OK, I will.",
 +
                        answer: "chapter-four"
 +
                    }
 +
                ]
 +
             },
 +
 
 +
            // continue with main conversation trunk
 +
            "chapter-four": {
 +
                 says: [
 +
                    "Hey, you're awesome!",
 +
                    "More prompts?"
 +
                ],
 +
                reply: [
 +
                    {
 +
                        question: "Nope.",
 +
                        answer: "end"
 +
                    },
 +
                    {
 +
                        question: "Yes, more prompts!",
 +
                        answer: "chapter-five"
 +
                    }
 +
                ]
 +
            },
 +
            "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!",
 +
                        answer: "externalResourceFunction" // function name that will be executed
 +
                    }
 +
                ]
 +
            },
 +
            end: {
 +
                says: [
 +
                    "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: [
 +
                    {
 +
                        question: "Start over.",
 +
                        answer: "ice"
 +
                    }
 +
                ]
 +
            }
 +
        }; // end conversation object
 +
 
 +
        // initialize by constructing a named function...
 +
        let 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
 +
        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
 +
        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>
 
     </script>

Revision as of 08:56, 11 September 2018

2018 iGEM_DLUT_B

Chat Bubbles

We are concerned about the world's largest potential group of chronic kidney disease

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.

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:

  1. 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.
  2. 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.
  3. 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.

We use β2M for high sensitivity monitoring of the kidneys

In order to solve the problems in the above detection methods, we conducted a multi-study investigation to find a new type of indicator β2M which has higher sensitivity to early kidney damage. β2M 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 β2M in urine(U-β2M) is very small which is no more than 0.25mg/L. U-β2M excretion is increased in early urine of diabetic patients with stage I hypertension and diabetes. With the deepening of the renal damage, β2M accumulates in patients and continue increase. Therefore, the detection of U-β2M 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.

What kind of a work we want to complete?

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-β2M 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-β2M test. In addition, we can use mobile devices to conduct a brief analysis of the patient's renal function and give medical advice.

For U-β2M we developed a suitable detection method

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- β2M. Firstly, we use nanobody to specifically bind to β2M. 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 E. coli , 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.

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.