Difference between revisions of "Team:SYSU-MEDICINE/Engagement"

(Replaced content with "{{SYSU-MEDICINE}} <html> </html>")
Line 1: Line 1:
−
{{SYSU-MEDICINE}}
 
 
<html>
 
<html>
  
Line 5: Line 4:
  
  
 +
<head>
 +
    <meta charset="UTF-8">
 +
    <link rel="icon" type="image/png" href="https://static.igem.org/mediawiki/2016/2/2a/T--SYSU-MEDICINE--logo_32%2A32.png" sizes="16x16">
 +
    <link rel="icon" type="image/png" href="https://static.igem.org/mediawiki/2016/2/2a/T--SYSU-MEDICINE--logo_32%2A32.png" sizes="32x32">
 +
    <!-- Latest compiled and minified CSS -->
 +
    <!--<link href='//cdn.webfont.youziku.com/webfonts/nomal/92549/46882/57f3d7e1f629d81a5077d03f.css' rel='stylesheet' type='text/css' />-->
 +
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
 +
    <!--jQuery-->
 +
    <script  src="https://code.jquery.com/jquery-3.1.1.min.js"  integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="  crossorigin="anonymous"></script>
 +
    <!-- Latest compiled and minified JavaScript -->
 +
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
 +
    <style>
 +
        /*font*/
 +
        /*font*/
 +
        @font-face{font-family:"HelveticaNeueW02-45Ligh";src:url('//www.eyeem.com/css/fonts/88fcd49a-13c7-4d0c-86b1-ad1e258bd75d.eot?#iefix');src:url('//www.eyeem.com/css/fonts/88fcd49a-13c7-4d0c-86b1-ad1e258bd75d.eot?#iefix') format("eot"),url('//www.eyeem.com/css/fonts/9a2e4855-380f-477f-950e-d98e8db54eac.woff') format("woff"),url('//www.eyeem.com/css/fonts/fa82d0ee-4fbd-4cc9-bf9f-226ad1fcbae2.ttf') format("truetype"),url('//www.eyeem.com/css/fonts/48d599a6-92b5-4d43-a4ac-8959f6971853.svg#48d599a6-92b5-4d43-a4ac-8959f6971853') format("svg")}
 +
        *{
 +
            font-family:"HelveticaNeueW02-45Ligh","Arial",sans-serif;
 +
            letter-spacing: 0.4px;
 +
            line-height: 1.5em;
 +
        }
 +
        #HQ_page h1,#HQ_page h2,#HQ_page h3,#HQ_page h4,#HQ_page h5,#HQ_page p{
 +
            font-family:"HelveticaNeueW02-45Ligh","Arial",sans-serif;
 +
        }
 +
        #HQ_page p{
 +
            font-size: 20px;
 +
        }
 +
        #HQ_page td{
 +
            padding:0;
 +
            border:0;
 +
        }
 +
        #HQ_page table {
 +
            border:0;
 +
        }
 +
        /*override wiki*/
 +
        .menu_wrapper, #top_title, #sideMenu{display: none;}
 +
        #content {
 +
            width:100%;
 +
            padding:0;
 +
            margin: 16px auto;
 +
        }
 +
        #top_menu_under {
 +
            height: 0;
 +
        }
 +
        #top_menu_14 {
 +
            border-bottom: 0;
 +
        }
 +
        #globalWrapper {
 +
            font-size: 100%;
 +
            padding-bottom: 0;
 +
        }
 +
        #content {
 +
            margin-bottom: 0;
 +
        }
 +
        /*nav*/
 +
        .navbar {
 +
            border-radius: 0;
 +
            height: 50px;
 +
            margin-bottom:0;
 +
            z-index: 25;
 +
        }
 +
        .navbar-inverse .navbar-brand {
 +
            color: #fff;
 +
        }
 +
        .navbar-inverse .navbar-nav>.active>a, .navbar-inverse .navbar-nav>.active>a:focus, .navbar-inverse .navbar-nav>.active>a:hover {
 +
            background-color: rgba(0,0,0,0);
 +
            color: #999;
 +
            font-weight:600;
 +
        }
 +
        .navbar-inverse .navbar-nav>li>a {
 +
            color: #fff;
 +
            font-weight:600;
 +
        }
 +
        .navbar-inverse .navbar-nav>li>a:hover {
 +
            color: #999;
 +
            font-weight:600;
 +
        }
 +
        .navbar-nav>li{
 +
            top: -5px;
 +
        }
 +
        /*.mw-content-ltr ul, .mw-content-rtl .mw-content-ltr ul {*/
 +
        /*margin: 0 0.1;*/
 +
        /*}*/
 +
        .dropdown-menu>li>a {
 +
            font-weight: 600;
 +
        }
 +
        .third-level-list {
 +
            top: -10px;
 +
            left: 150px;
 +
        }
 +
        .jumbotron{
 +
            margin-bottom:0;
 +
            padding-top:10px;
 +
            padding-bottom:20px;
 +
        }
 +
        #jumbo-footer.jumbotron {
 +
            padding-top: 10px;
 +
            padding-bottom: 30px;
 +
            margin-bottom: 0;
 +
        }
 +
        #jumbo-footer.jumbotron>.footer-container{
 +
            width: 1170px;
 +
            margin: 20px auto;
 +
            font-size: 18px;
 +
            color: #888;
 +
            /*font-weight: bold;*/
 +
        }
 +
        #jumbo-footer.jumbotron>.footer-container .line{
 +
            height: 2px;
 +
            background-color: #bbb;
 +
            width: 100%;
 +
        }
 +
        #jumbo-footer.jumbotron>.footer-container .contact {
 +
            margin-top: 20px;
 +
            margin-left: 10px;
 +
            height: 140px;
 +
        }
 +
        #jumbo-footer.jumbotron>.footer-container .title{
 +
            font-weight: bold;
 +
        }
 +
        #jumbo-footer.jumbotron>.footer-container .contact ul{
 +
            list-style: none;
 +
            padding-left: 0;
 +
            margin-left: 0;
 +
        }
 +
        #jumbo-footer.jumbotron>.footer-container .contact ul.float-contact {
 +
            float:left;
 +
            width: 400px;
 +
        }
 +
        #jumbo-footer.jumbotron>.footer-container .contact ul li {
 +
            margin-top: 5px;
 +
            margin-bottom: 5px;
 +
        }
 +
        #jumbo-footer.jumbotron>.footer-container .contact ul li a img{
 +
            width: 30px;
 +
            height: 30px;
 +
        }
 +
        #jumbo-footer.jumbotron>.footer-container .contact ul li a {
 +
            color: #888;
 +
        }
 +
        #jumbo-footer.jumbotron>.footer-container .contact ul li a:hover, #jumbo-footer.jumbotron>.footer-container .contact ul li a:active, #jumbo-footer.jumbotron>.footer-container .contact ul li a:focus {
 +
            color: #888;
 +
            text-decoration: none;
 +
        }
 +
        #jumbo-footer.jumbotron>.footer-container .contact .float-contact-right {
 +
            float:right;
 +
        }
 +
        #jumbo-footer.jumbotron>.footer-container .copyright{
 +
            margin-top: 5px;
 +
        }
 +
        #jumbo-footer.jumbotron>.footer-container .copyright .text {
 +
            font-size: 16px;
 +
            float: left;
 +
        }
 +
        #jumbo-footer.jumbotron>.footer-container .copyright .icon{
 +
            float: right;
 +
        }
 +
        #jumbo-footer.jumbotron>.footer-container .copyright .icon img {
 +
            width: 25px;
 +
            height: 25px;
 +
        }
 +
        #wechatModal .modal-dialog{
 +
            width: 332px;
 +
            margin-top: 100px;
 +
            z-index: 2000;
 +
        }
 +
        /*content*/
 +
        .jumbotron .my-content{
 +
            margin: 0 auto;
 +
            width: 960px;
 +
        }
 +
        .jumbotron .my-content h2 {
 +
            text-align: center;
 +
            font-weight: bolder;
 +
            font-size: 40px;
 +
            margin-bottom:30px;
 +
        }
 +
        .jumbotron .my-content p {
 +
            line-height: 1.5em;
 +
            font-size: 20px;
 +
            color: #333;
 +
        }
 +
        .jumbotron#content{
 +
            background-color: #fff;
 +
        }
 +
        .jumbotron#content p a{
 +
            color: #333;
 +
            font-weight: bold;
 +
        }
 +
        .jumbotron#content img{
 +
            width: 90%;
 +
            margin: 10px auto;
 +
            display: block;
 +
        }
 +
        .jumbotron#content span.note{
 +
            width: 80%;
 +
            font-size: 16px;
 +
            color: #999;
 +
            margin: 0 auto;
 +
            display: block;
 +
        }
  
  
  
 +
    </style>
 +
    <script type="text/javascript">
 +
        $(document).ready(function() {
 +
//          wechat qr code
 +
            var canHide= true;
 +
            $('#wechatModal').on('show.bs.modal', function (e) {
 +
                // do something...
 +
                $("#wechatModal").after('<div class="modal-backdrop fade in"></div>');
 +
            });
 +
            $(".modal").click(function() {
 +
//                console.log("click");
 +
                //$(this).remove();
 +
                if (canHide) {
 +
                    $(".modal-backdrop").remove();
 +
                    $('#wechatModal').modal('hide');
 +
                }
 +
            });
 +
            $(".modal-dialog").click(function() {
 +
                canHide = false;
 +
            });
 +
            $(".modal").mousemove(function() {
 +
                canHide = true;
 +
            });
 +
            $(".third-level-list").css("left", "120px");
 +
//          third level menu on nav
 +
            $(".third-level-menu").mouseenter(function() {
 +
                console.log("mouse in");
 +
                $(this).addClass("open");
 +
 +
            });
 +
            $(".third-level-menu").mouseleave(function() {
 +
                console.log("mouse in");
 +
                $(this).removeClass("open");
 +
            });
 +
            $(".dropdown").mouseenter(function() {
 +
                $(this).addClass("open");
 +
            });
 +
            $(".dropdown").mouseleave(function() {
 +
                $(this).removeClass("open");
 +
            });
 +
        });
 +
    </script>
 +
</head>
 +
<body>
 +
<nav class="navbar navbar-inverse">
 +
    <div class="container-fluid">
 +
        <!-- Brand and toggle get grouped for better mobile display -->
 +
        <div class="navbar-header">
 +
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
 +
                <span class="sr-only">Toggle navigation</span>
 +
                <span class="icon-bar"></span>
 +
                <span class="icon-bar"></span>
 +
                <span class="icon-bar"></span>
 +
            </button>
 +
            <a class="navbar-brand" href="https://2016.igem.org/Team:SYSU-MEDICINE">
 +
                <img style="height: 40px; width: 40px; margin-top: -10px " src="https://2016.igem.org/wiki/skins/Igem/images/IGEM_white_letters.png">
 +
            </a>
 +
            <a class="navbar-brand" href="https://2016.igem.org/Team:SYSU-MEDICINE">SYSU-MEDICINE</a>
 +
        </div>
 +
 +
        <!-- Collect the nav links, forms, and other content for toggling -->
 +
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
 +
            <ul class="nav navbar-nav navbar-right">
 +
                <li><a href="https://2016.igem.org/Team:SYSU-MEDICINE">HOME</a></li>
 +
                <li class="dropdown">
 +
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">PROJECT<span class="caret"></span></a>
 +
                    <ul class="dropdown-menu">
 +
                        <li><a href="https://2016.igem.org/Team:SYSU-MEDICINE/Description">Description</a></li>
 +
                        <li><a href="https://2016.igem.org/Team:SYSU-MEDICINE/Results">Results</a></li>
 +
                        <li><a href="https://2016.igem.org/Team:SYSU-MEDICINE/Protocol">Protocol</a></li>
 +
                        <li><a href="https://2016.igem.org/Team:SYSU-MEDICINE/Notebook">Notebook</a></li>
 +
                        <li class="dropdown third-level-menu">
 +
                            <a href="#" class="dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">For Judgement <span class="glyphicon glyphicon-chevron-right"></span></a>
 +
                            <ul class="third-level-list dropdown-menu">
 +
                                <li><a href="https://2016.igem.org/Team:SYSU-MEDICINE/Proof">Proof of Concept</a></li>
 +
                                <li><a href="https://2016.igem.org/Team:SYSU-MEDICINE/Demonstrate">Demonstrate</a></li>
 +
                            </ul>
 +
                        </li>
 +
                    </ul>
 +
                </li>
 +
                <li class="dropdown active">
 +
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">HUMAN PRACTICES<span class="caret"></span></a>
 +
                    <ul class="dropdown-menu">
 +
                        <li><a href="https://2016.igem.org/Team:SYSU-MEDICINE/Our_Story">Our Story</a></li>
 +
                        <li><a href="https://2016.igem.org/Team:SYSU-MEDICINE/Interview">Interview</a></li>
 +
                        <li><a href="https://2016.igem.org/Team:SYSU-MEDICINE/Ethics">Ethics</a></li>
 +
                        <li><a href="https://2016.igem.org/Team:SYSU-MEDICINE/Legislation">Legislation</a></li>
 +
                        <li><a href="https://2016.igem.org/Team:SYSU-MEDICINE/Products">Products</a></li>
 +
                        <li class="dropdown third-level-menu">
 +
                            <a href="#" class="dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">For Judgement <span class="glyphicon glyphicon-chevron-right"></span></a>
 +
                            <ul class="third-level-list dropdown-menu">
 +
                                <li><a href="https://2016.igem.org/Team:SYSU-MEDICINE/HP/Silver">Silver</a></li>
 +
                                <li><a href="https://2016.igem.org/Team:SYSU-MEDICINE/HP/Gold">Gold</a></li>
 +
                                <li><a href="https://2016.igem.org/Team:SYSU-MEDICINE/Integrated_Practices">Integrated Practices</a></li>
 +
                                <li><a href="https://2016.igem.org/Team:SYSU-MEDICINE/Engagement">Engagement</a></li>
 +
                            </ul>
 +
                        </li>
 +
                    </ul>
 +
                </li>
 +
                <li><a href="https://2016.igem.org/Team:SYSU-MEDICINE/Modeling">MODELING</a></li>
 +
                <li class="dropdown">
 +
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">TEAM<span class="caret"></span></a>
 +
                    <ul class="dropdown-menu">
 +
                        <li><a href="https://2016.igem.org/Team:SYSU-MEDICINE/Team">Team</a></li>
 +
                        <li><a href="https://2016.igem.org/Team:SYSU-MEDICINE/Attributions">Attributions</a></li>
 +
                        <li><a href="https://2016.igem.org/Team:SYSU-MEDICINE/Collaborations">Collaborations</a></li>
 +
                    </ul>
 +
                </li>
 +
 +
                <li class="dropdown">
 +
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">PARTS<span class="caret"></span></a>
 +
                    <ul class="dropdown-menu">
 +
                        <li><a href="https://2016.igem.org/Team:SYSU-MEDICINE/Parts">Parts</a></li>
 +
                        <li><a href="https://2016.igem.org/Team:SYSU-MEDICINE/Basic_Part">Basic Parts</a></li>
 +
                        <li><a href="https://2016.igem.org/Team:SYSU-MEDICINE/Composite_Part">Composite Parts</a></li>
 +
                        <li><a href="https://2016.igem.org/Team:SYSU-MEDICINE/Part_Collection">Part Collection</a></li>
 +
                    </ul>
 +
                </li>
 +
                <li><a href="https://2016.igem.org/Team:SYSU-MEDICINE/Safety">SAFETY</a></li>
 +
                <li><a href="https://2016.igem.org/Team:SYSU-MEDICINE/Judging">JUDGING</a></li>
 +
            </ul>
 +
        </div><!-- /.navbar-collapse -->
 +
    </div><!-- /.container-fluid -->
 +
</nav>
 +
<!--content-->
 +
<div class="jumbotron">
 +
    <div class="my-content" style="width:1070px;">
 +
        <h1 align="center" style="font-size: 35px">Education and Public Engagement</h1>
 +
    </div>
 +
</div>
 +
<div class="jumbotron" id="content">
 +
    <div class="my-content">
 +
        <p>
 +
            <br/>
 +
            This year, the target audiences of SYSU-MEDICINE are high school students, college students and the ordinary citizens.<br/>
 +
            <br/>
 +
            For high school students, 21 students and 2 teachers were invited from middle school to attend this activity – “Have a Look at Your Genome”, which aims at sharing some basic knowledge of biology and synthetic biology and sharing what we were doing with iGEM.  We found that it was difficult for them to understand what are iGEM, synthetic biology and our project. So we made a brochure链接到小册子1 to introduce those definitions to the public. And for sustainability, we made a booklet to guide high school to build biological laboratory, which will make it easier and more interesting for high school students to learn about basic knowledge and experiments of synthetic biology. More 链接到"Have a Look at Your Genome"<br/>
 +
            <br/>
 +
            A major problem turn up during CCiC – most college students do not know MSCs treatment, much less majority of people in the world. Though we had made a brochure introducing iGEM, synthetic biology and our project, it proved that it was much less enough. As for college students, we held a speech called ‘MSC with GPS’ to explain what is MSCs therapy and how we can make it more effective. Additionally, questionnaires of lab safety were sent out for learning how well college students know and behave, after which a brochure introducing MSCs was made.<br/>
 +
            <br/>
 +
            As for ordinary citizens, we transform unintelligible knowledge of MSCs into popular and easy-to-understand stories for the public to learn, which are presented on the Internet. The questionnaires about acknowledgment of MSCs therapy and clinical trials, after finishing each question, we explained the misunderstanding part to the person who answers the questionnaire, helping them know more.<br/>
 +
            <br/>
 +
            For further understanding the methods of enhancing the chemotsxis of MSCs, we read a lot of literatures and wrote a review in Chinese, contributing to an academic journal. More.链接到综述<br/>
 +
        </p>
 +
 +
        <h2>Have a Look at Your Genome</h2>
 +
    </div>
 +
</div>
 +
 +
<!--footer-->
 +
<div class="jumbotron" id="jumbo-footer">
 +
    <div class="footer-container">
 +
        <div class="title">
 +
            Contact us
 +
        </div>
 +
        <div class="line"></div>
 +
        <div class="contact">
 +
            <ul class="float-contact">
 +
                <li>
 +
                    <a href="http://weibo.com/u/5999650333">
 +
                        <img style="height: 32px; width: 32px" src="https://static.igem.org/mediawiki/2016/0/06/T--SYSU-MEDICINE--weibo.png">
 +
                        iGEMxSYSU-MEDICINE
 +
                    </a>
 +
                </li>
 +
                <li>
 +
                    <a href="https://www.facebook.com/IGEM-SYSU-Medicine">
 +
                        <img style="height: 27px; width: 27px; margin-left: 2px;margin-right:2px;" src="https://static.igem.org/mediawiki/2016/a/a1/T--SYSU-MEDICINE--facebook.png">
 +
                        IGEM SYSU-Medicine
 +
                    </a>
 +
                </li>
 +
                <li>
 +
                    <a href="#">
 +
                        <img src="https://static.igem.org/mediawiki/2016/4/43/T--SYSU-MEDICINE--email.png">
 +
                        SYSU_MEDICINE@163.com
 +
                    </a>
 +
                </li>
 +
            </ul>
 +
            <ul class="float-contact">
 +
                <li>
 +
                    <a href="#" data-toggle="modal" data-target="#wechatModal">
 +
                        <img src="https://static.igem.org/mediawiki/2016/6/6e/T--SYSU-MEDICINE--wechat.png">
 +
                        SYSU-MEDICINE
 +
                    </a>
 +
                </li>
 +
                <li>
 +
                    <a href="https://twitter.com/IgemSysu">
 +
                        <img src="https://static.igem.org/mediawiki/2016/1/1c/T--SYSU-MEDICINE--twitter.png">
 +
                        iGEM SYSU-MEDICINE
 +
                    </a>
 +
                </li>
 +
 +
            </ul>
 +
            <div class="float-contact-right">
 +
                <img style="width: 140px" src="https://static.igem.org/mediawiki/2016/5/5e/T--SYSU-MEDICINE--Igemlogo_banner.png">
 +
                <img style="height: 100px" src="https://static.igem.org/mediawiki/2016/d/df/T--SYSU-MEDICINE--SYSU-MEDICINE.png">
 +
            </div>
 +
        </div>
 +
        <div class="line"></div>
 +
        <div class="copyright">
 +
            <div class="text">
 +
                &copy; 2016 SYSU-MEDICINE. All Rights Reserved.
 +
            </div>
 +
            <div class="icon" >
 +
                <img src="https://static.igem.org/mediawiki/2016/f/f5/T--SYSU-MEDICINE--china_2x.png">
 +
                <img src="https://static.igem.org/mediawiki/2016/a/a9/T--SYSU-MEDICINE--SYSU.png">
 +
            </div>
 +
        </div>
 +
    </div>
 +
 +
</div>
 +
 +
<!-- Wechat QRCode Modal -->
 +
<div class="modal fade" id="wechatModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" data-backdrop="false">
 +
    <div class="modal-dialog" role="document">
 +
        <div class="modal-content">
 +
 +
            <div class="modal-body">
 +
                <img style="height: 300px;width: 300px;" src="https://static.igem.org/mediawiki/2016/0/07/T--SYSU-MEDICINE--wechat-qrcode.png">
 +
            </div>
 +
 +
        </div>
 +
    </div>
 +
</div>
 +
</body>
 
</html>
 
</html>

Revision as of 10:27, 19 October 2016

Education and Public Engagement


This year, the target audiences of SYSU-MEDICINE are high school students, college students and the ordinary citizens.

For high school students, 21 students and 2 teachers were invited from middle school to attend this activity – “Have a Look at Your Genome”, which aims at sharing some basic knowledge of biology and synthetic biology and sharing what we were doing with iGEM. We found that it was difficult for them to understand what are iGEM, synthetic biology and our project. So we made a brochure链接到小册子1 to introduce those definitions to the public. And for sustainability, we made a booklet to guide high school to build biological laboratory, which will make it easier and more interesting for high school students to learn about basic knowledge and experiments of synthetic biology. More 链接到"Have a Look at Your Genome"

A major problem turn up during CCiC – most college students do not know MSCs treatment, much less majority of people in the world. Though we had made a brochure introducing iGEM, synthetic biology and our project, it proved that it was much less enough. As for college students, we held a speech called ‘MSC with GPS’ to explain what is MSCs therapy and how we can make it more effective. Additionally, questionnaires of lab safety were sent out for learning how well college students know and behave, after which a brochure introducing MSCs was made.

As for ordinary citizens, we transform unintelligible knowledge of MSCs into popular and easy-to-understand stories for the public to learn, which are presented on the Internet. The questionnaires about acknowledgment of MSCs therapy and clinical trials, after finishing each question, we explained the misunderstanding part to the person who answers the questionnaire, helping them know more.

For further understanding the methods of enhancing the chemotsxis of MSCs, we read a lot of literatures and wrote a review in Chinese, contributing to an academic journal. More.链接到综述

Have a Look at Your Genome