Difference between revisions of "Team:NCKU Tainan/Public Engagement"

 
(56 intermediate revisions by 4 users not shown)
Line 4: Line 4:
  
 
<head>
 
<head>
     <link rel="stylesheet" href="https://2018.igem.org/Template:NCKU_Tainan/css/HP_About_style?action=raw&ctype=text/css">
+
     <link rel="stylesheet" href="https://2018.igem.org/Template:NCKU_Tainan/css/HP_Integrated_Human_Practices_style?action=raw&ctype=text/css">
 +
    <link href="https://fonts.googleapis.com/css?family=Concert+One" rel="stylesheet">
 +
 
 
</head>
 
</head>
  
 
<body data-spy="scroll" data-target=".navbar-example">
 
<body data-spy="scroll" data-target=".navbar-example">
 
      <header>
 
          <div class="carousel-inner" role="listbox">
 
            <div class="carousel-item active" style="background-image: url('http://placehold.it/1900x1080')">
 
            </div>
 
      </div>
 
      </header>
 
  
 
     <div class="container content">
 
     <div class="container content">
        <h1 class="head">Integrated Human Practices</h1>
+
            <div class="headstyle">
 +
                <h1 class="head">Education & Public Engagement</h1>
 +
            </div>
 +
            <div class="righttitle">
 +
                <h7 class="subtitle">Impact  Inspire  Influence  </h7>
 +
            </div>
 
         <div class="navbar-example">
 
         <div class="navbar-example">
 
             <div class="row">
 
             <div class="row">
 
                 <div class="col-2 side">
 
                 <div class="col-2 side">
                     <div id="sidelist" class="list-Fgroup">
+
                     <div id="sidelist" class="list-group">
                        <a class="list-group-item list-group-item-action" href="#list-item-1">Professor(待訂)</a>
+
                         <a class="list-group-item list-group-item-action" href="#Education">Education</a>
                         <a class="list-group-item list-group-item-action" href="#list-item-2">Professor-activity list(待訂)</a>
+
                         <a class="list-group-item list-group-item-action" href="#Public_Engagement">Public Engagement</a>
                         <a class="list-group-item list-group-item-action" href="#list-item-3">Cooperation Vist(待訂)</a>
+
                        <a class="list-group-item list-group-item-action" href="#list-item-4">Cooperation Vist-activity list(待訂)</a>
+
                        <a class="list-group-item list-group-item-action" href="#list-item-5">Meet Up(待訂)</a>
+
                        <a class="list-group-item list-group-item-action" href="#list-item-6">Meet Up-activity list(待訂)</a>
+
 
                         <a class="list-group-item list-group-item-action" href="#"><i class="fa fa-arrow-up fa-1x"
 
                         <a class="list-group-item list-group-item-action" href="#"><i class="fa fa-arrow-up fa-1x"
 
                                 aria-hidden="true"></i></a>
 
                                 aria-hidden="true"></i></a>
Line 34: Line 30:
 
                 <div class="col-10">
 
                 <div class="col-10">
 
                     <div data-spy="scroll" data-target="#sidelist" data-offset="0" class="scrollspy-example">
 
                     <div data-spy="scroll" data-target="#sidelist" data-offset="0" class="scrollspy-example">
                         <div class="container">
+
 
                             <div id="list-item-1">
+
                         <div id="Education">
                                 <h3>Professor</h3>
+
                            <h3>Education</h3></br>
                                 <h10>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam in arcu tincidunt,
+
 
                                    finibus lectus sit amet, rhoncus erat. Nulla pretium eget est vel vehicula. In ut
+
                             <div class="card">
                                     urna
+
                                 <div class="thumbnail">
                                     elit. Donec bibendum urna non turpis cursus rhoncus. Quisque ac augue elit. Class
+
                                    <img src="https://static.igem.org/mediawiki/2018/3/3b/T--NCKU_Tainan--iGEM_Promotion_in_Hui-Wen_High-School.jpg"
                                    aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos
+
                                        class="left">
                                    himenaeos.
+
                                 </div>
                                    Vestibulum tempor elit at lacus placerat ullamcorper sit amet vitae ante. Phasellus
+
                                <div class="right">
                                     enim nisi, pellentesque in ligula non, consectetur congue elit. Class aptent taciti
+
                                     <h1>iGEM Promotion in Hui-Wen High-School</h1>
                                    sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Phasellus
+
                                     <div id="cardtext">
                                     congue dictum urna a volutpat. Aliquam a mi eget nisi cursus molestie nec sit amet
+
                                        NCKU Spring medical speech is an annual One-Day-camp for the high school
                                    felis.</h10>
+
                                        students who is interested in medical school in Taiwan. After the speech, many
 +
                                        students showed their interest on iGEM.
 +
                                     </div>
 +
                                </div>
 +
                                <h9>21</h9>
 +
                                <h6>MAY</h6>
 +
                                <div class="blue action-button" type="button" class="btn btn-primary" data-toggle="modal"
 +
                                     data-target="#HWHS"><a>Read
 +
                                        More</a></div>
 
                             </div>
 
                             </div>
  
                             <div id="list-item-2">
+
                            <!-- Modal -->
                              <div class="card">
+
                             <div class="modal fade" id="HWHS" tabindex="-1" role="dialog" aria-labelledby="exampleModalLongTitle"
                                     <div class="thumbnail">
+
                                aria-hidden="true">
                                         <img src="https://static.igem.org/mediawiki/2018/6/61/T--NCKU_Tainan--attribution_president.png" class="left">
+
                                <div class="modal-dialog" role="document">
 +
                                     <div class="modal-content">
 +
                                         <div class="modal-header">
 +
                                            <h5 class="modal-title" id="exampleModalLongTitle">iGEM Promotion in
 +
                                                Hui-Wen High-School</h5>
 +
                                            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
 +
                                                <span aria-hidden="true">&times;</span>
 +
                                            </button>
 +
                                        </div>
 +
 
 +
                                        <div class="modal-body">
 +
 
 +
                                            <p class="hpcontent">
 +
                                                May 2018, NCKU_Tainan team went to HWSH to promote synthetic biology
 +
                                                and our iGEM project. 20
 +
                                                students joined this program. Most of them enjoyed the interesting
 +
                                                experiment they had never tried before.
 +
                                            </p>
 +
 
 +
                                            <p class="hpcontent">
 +
                                                Why We Choose HWSH?
 +
                                            </p>
 +
 
 +
                                            <p class="hpcontent">
 +
                                                Taichung municipal Hui-Wen High school is a senior high school located
 +
                                                in central of Taiwan. The
 +
                                                student in HWSH is various to other high school,which embrace
 +
                                                astronomy,
 +
                                                biology, and science learning.
 +
                                                Their school educational program involves international exchange
 +
                                                programs, clubs, science fair,
 +
                                                which are flipped classrooms in Taiwanese education system.
 +
                                            </p>
 +
 
 +
                                            <p class="boldh5">
 +
                                                How We Proceed ?
 +
                                            </p>
 +
                                            <br>
 +
                                            <p class="hpcontent">
 +
                                                Before 5/21, we have contacted teachers in HWSH. Their teacher
 +
                                                scheduled our program into their
 +
                                                biology classes (08:00-10:00). Three of our members participated in
 +
                                                this program. We shared our
 +
                                                college life and demonstrated how our training from out major
 +
                                                contributed to our project in
 +
                                                the team at first. We then introduced iGEM and the job of four
 +
                                                compartments. We also went through
 +
                                                our the idea and the concept of our project. For the last session of
 +
                                                our program, we introduce some
 +
                                                basic concept of the biological experiment, several important model
 +
                                                organisms in synthetic biology,
 +
                                                and the concept of Gram stain. We also teach them how to handle pipette
 +
                                                precisely. In the final 40
 +
                                                minutes, it’s time for them to apply what they have learned to the
 +
                                                experiment! We prepared the
 +
                                                sealed slides of Escherichia coli, Clostridium difficile in our lab.
 +
                                                After connecting the optical
 +
                                                microscope with CCD camara , the live image was projected to the screen
 +
                                                and the whole class could
 +
                                                observed the morphology of the bacteria. Students are totally exciting
 +
                                                when they sucked liquid from
 +
                                                pipette successfully. They also asked us questions about our project
 +
                                                and gave us lots of useful
 +
                                                feedback! After this program, we received a message from a lovely
 +
                                                student, who was burned the
 +
                                                passion for synthetic biology and want to join iGEM when she enters the
 +
                                                college.
 +
                                            </p>
 +
 
 +
                                            <p class="boldh5">
 +
                                                Feedback
 +
                                            </p>
 +
                                            <br>
 +
                                            <p class="hpcontent">
 +
                                                This high school education program aims to share our project and the
 +
                                                basic knowledge of synthetic
 +
                                                biology with high school students. We want to spark light in their
 +
                                                minds that there are lots of
 +
                                                knowledge beyond textbooks, and maybe they can join iGEM next year.(Our
 +
                                                goal is to provoke their
 +
                                                interest in extracurricular learning and encourage them to participate
 +
                                                such activities as iGEM.)
 +
                                                From their feedback form, we find all of them enjoying this course, and
 +
                                                have more realized what is
 +
                                                synthetic Biology, OD meter, etc. Making more students understand and
 +
                                                like igem let us happy, which
 +
                                                also make us produce more motivation to go forward in igem competition.
 +
 
 +
                                            </p>
 +
 
 +
                                            <img class="contentimg col-12" src="https://static.igem.org/mediawiki/2018/4/40/T--NCKU_Tainan--home_DSC_1284_%281%29_%281%29.jpg">
 +
 
 +
                                        </div>
 +
 
 
                                     </div>
 
                                     </div>
                                     <div class="right">
+
                                </div>
                                        <h1>Meetup with Tec Chihuahua</h1>
+
                            </div>
                                        <div id="cardtext">We finished a video meeting with Tec-Monterry. Their project
+
 
                                            has two part.
+
                            <div class="card">
                                            The main part is E-coding, which use
+
                                <div class="thumbnail">
                                            bacteria to record the data. Another part is to sense the pollute in
+
                                     <img src="https://static.igem.org/mediawiki/2018/b/b6/T--NCKU_Tainan--home_IMG_9857_%281%29.jpg"
                                            Mexico. </div>
+
                                        class="left">
 +
                                </div>
 +
                                <div class="right">
 +
                                    <h1> iGEM Promotion in NNKIEH Elementary-School</h1>
 +
                                    <div id="cardtext">NCKU x Tainan team went to the Affiliated Elementary School of
 +
                                        NNKIEH for education program.
 +
                                        There were seven students participated in this program.
 
                                     </div>
 
                                     </div>
                                    <h9>9</h9>
 
                                    <h6>JULY</h6>
 
                                    <div><a style="text-decoration: none; color: white;" href=# target="_blank" class="action-button shadow animate blue">Read
 
                                            More</a></div>
 
 
                                 </div>
 
                                 </div>
 +
                                <h9>12</h9>
 +
                                <h6>JUNE</h6>
 +
                                <div class="blue action-button" type="button" class="btn btn-primary" data-toggle="modal"
 +
                                    data-target="#NKPS"><a>Read
 +
                                        More</a></div>
 +
                            </div>
 +
 +
                            <!-- Modal -->
 +
                            <div class="modal fade" id="NKPS" tabindex="-1" role="dialog" aria-labelledby="exampleModalLongTitle"
 +
                                aria-hidden="true">
 +
                                <div class="modal-dialog" role="document">
 +
                                    <div class="modal-content">
 +
                                        <div class="modal-header">
 +
                                            <h5 class="modal-title" id="exampleModalLongTitle">iGEM Promotion in
 +
                                                Hui-Wen High-School</h5>
 +
                                            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
 +
                                                <span aria-hidden="true">&times;</span>
 +
                                            </button>
 +
                                        </div>
 +
 +
                                        <div class="modal-body">
 +
 +
                                            <p class="hpcontent">
 +
                                                May 2018, NCKU x Tainan team went to HWSH to promote synthetic biology
 +
                                                and our iGEM project. 20
 +
                                                students joined this program. They really enjoyed the experiment they
 +
                                                had never tried before.
 +
                                            </p>
 +
 +
                                            <p class="hpcontent">
 +
                                                Why We Choose the Affiliated Elementary School of NNKIEH?
 +
 +
                                            </p>
 +
 +
                                            <p class="hpcontent">
 +
                                                The Affiliated Elementary School of National Nanke International
 +
                                                Experimental High School is a
 +
                                                elementary school located in southern Taiwan and near the Southern
 +
                                                Taiwan Science Park. The student
 +
                                                here embrace multi-language environment and science education, which
 +
                                                vary from the other schools in
 +
                                                Taiwan.
 +
 +
                                            </p>
 +
 +
                                            <p class="hpcontent">
 +
                                                How We Proceed ?
 +
                                            </p>
 +
 +
                                            <p class="hpcontent">
 +
                                                Before 6/12, we have contacted teachers in the Affiliated Elementary
 +
                                                School of NNKIEH. Their
 +
                                                teacher scheduled our program into their science classes (09:00-11:00)
 +
                                                and we had one our to launch
 +
                                                our slide and the materials of the experiment. Three of our members
 +
                                                participated in this program.
 +
                                                First, we had twenty minutes for our lecture, which we introduced the
 +
                                                basic concept of the cell
 +
                                                included the structure of the cell and the level of the organism. Than,
 +
                                                the students observed the
 +
                                                different kinds of cells specimen under the microscope. After the
 +
                                                observation, we prepared an
 +
                                                experiment for them. We instructed them the step to extract their own
 +
                                                DNA by some materials in the
 +
                                                common life. After the program, we had ten minutes for review the
 +
                                                lecture and let them write it
 +
                                                down.
 +
 +
                                            </p>
 +
 +
                                            <p class="hpcontent">
 +
                                                Experimental Procedure:
 +
                                            </p>
 +
 +
                                            <p class="hpcontent">
 +
                                                Step 1: Add several drops of liquid dish soap and 2 tbsp of salt into
 +
                                                20ml of water. Set aside, you
 +
                                                will need it later.</br>
 +
                                                Step 2: Squeeze juice from pineapple! (Tips: You may squeeze it with a
 +
                                                towel)</br>
 +
                                                Step 3: Gargle with 20ml of drinking water for 1 minute. (Make sure you
 +
                                                do this step well to get
 +
                                                sufficient oral cells) After that, split it back into a tube/ clear
 +
                                                plastic cup.</br>
 +
                                                Step 4: Mix the solution you have prepared in step 1 with the oral cell
 +
                                                containing solution. Stir
 +
                                                it gently, avoid causing bubbles from the soap.</br>
 +
 +
                                            </p>
 +
 +
                                            <p class="hpcontent">
 +
                                                Feedback
 +
                                            </p>
 +
 +
                                            <p class="hpcontent">
 +
                                                This high school education program aims to share our project and the
 +
                                                basic knowledge of synthetic
 +
                                                biology with high school students. We want to spark light in their
 +
                                                minds that there are lots of
 +
                                                knowledge beyond textbooks, and maybe they can join iGEM next year.(Our
 +
                                                goal is to provoke their
 +
                                                interest in extracurricular learning and encourage them to participate
 +
                                                such activities as iGEM.)
 +
                                                From their feedback form, we find all of them enjoying this course, and
 +
                                                have more realized what is
 +
                                                synthetic Biology, OD meter, etc. Making more students understand and
 +
                                                like igem let us happy, which
 +
                                                also make us produce more motivation to go forward in igem competition.
 +
 +
                                            </p>
 +
                                            <img class="contentimg col-12" src="https://static.igem.org/mediawiki/2018/c/ce/T--NCKU_Tainan--home_IMG_9854_%281%29.jpg">
 +
 +
                                        </div>
  
                                <div class="card">
 
                                    <div class="thumbnail">
 
                                        <img src="https://static.igem.org/mediawiki/2018/6/61/T--NCKU_Tainan--attribution_president.png" class="left">
 
 
                                     </div>
 
                                     </div>
                                     <div class="right">
+
                                </div>
                                        <h1>Meetup with Tec Chihuahua</h1>
+
                            </div>
                                        <div id="cardtext">We finished a video meeting with Tec-Monterry. Their project
+
 
                                            has two part.
+
 
                                            The main part is E-coding, which use
+
 
                                            bacteria to record the data. Another part is to sense the pollute in
+
 
                                            Mexico. </div>
+
                        </div>
 +
 
 +
                        <div id="Public_Engagement">
 +
                            <h3>Public Engagement</h3></br>
 +
 
 +
                            <div class="card">
 +
                                <div class="thumbnail">
 +
                                     <img src="https://static.igem.org/mediawiki/2018/1/1d/T--NCKU_Tainan--home_IMG_6717%281%29.jpg"
 +
                                        class="left">
 +
                                </div>
 +
                                <div class="right">
 +
                                    <h1>Meeting with NCKU President
 +
                                    </h1>
 +
                                    <div id="cardtext">
 +
                                        “Not to always think about what medal you will get in the end,
 +
                                        the only thing you need to do is to make all-out effort to fulfill the project.
 +
                                        The most important thing is what you learn during the journey. ” president
 +
                                        said.
 
                                     </div>
 
                                     </div>
                                    <h9>9</h9>
 
                                    <h6>JULY</h6>
 
                                    <div><a style="text-decoration: none; color: white;" href=# target="_blank" class="action-button shadow animate blue">Read
 
                                            More</a></div>
 
 
                                 </div>
 
                                 </div>
                                 <div class="card">
+
                                 <div class="blue action-button" type="button" class="btn btn-primary" data-toggle="modal"
                                     <div class="thumbnail">
+
                                    data-target="#MUNCKU"><a>Read
                                         <img src="https://static.igem.org/mediawiki/2018/6/61/T--NCKU_Tainan--attribution_president.png" class="left">
+
                                        More</a></div>
 +
                            </div>
 +
 
 +
                            <!-- Modal -->
 +
                            <div class="modal fade" id="MUNCKU" tabindex="-1" role="dialog" aria-labelledby="exampleModalLongTitle"
 +
                                aria-hidden="true">
 +
                                <div class="modal-dialog" role="document">
 +
                                     <div class="modal-content">
 +
                                         <div class="modal-header">
 +
                                            <h5 class="modal-title" id="exampleModalLongTitle">Meeting with
 +
                                                NCKU President
 +
                                            </h5>
 +
                                            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
 +
                                                <span aria-hidden="true">&times;</span>
 +
                                            </button>
 +
                                        </div>
 +
 
 +
                                        <div class="modal-body">
 +
 
 +
                                            <p class="hpcontent">
 +
                                                March 12, 2018
 +
                                            </p>
 +
 
 +
                                            <p class="hpcontent">
 +
                                                Today, we were so glad to have lunch with our president Dr.
 +
                                                Huey-Jen Jenny Su from NCKU. Our
 +
                                                meeting time was the day before our semester presentation,
 +
                                                so we were excited to tell the president
 +
                                                what we going to do. Since the president has been our
 +
                                                important support from the first year of
 +
                                                igem-NCKU three years ago, we had a great time about
 +
                                                introducing all the 2018 team members to
 +
                                                president. We mentioned about why we want to join the igem
 +
                                                competition and what we expect to do in
 +
                                                the following 6 months. After listening our background and
 +
                                                some challenges we may face, she showed
 +
                                                a lot of concerned and gave us a lot of advises which
 +
                                                really encourage us.
 +
                                            </p>
 +
 
 +
                                            <p class="hpcontent">
 +
                                                “Not to always think about what medal you will get in the
 +
                                                end, the only thing you need to do is to
 +
                                                make all-out effort to fulfill the project. The most
 +
                                                important thing is what you learn during the
 +
                                                journey. ” president said.It was a great lunch talk. All of
 +
                                                us will keep in mind what the president
 +
                                                told us.
 +
 
 +
                                            </p>
 +
 
 +
                                            <p class="hpcontent">
 +
                                                September 6, 2018
 +
                                            </p>
 +
 
 +
                                            <p class="hpcontent">
 +
                                                Through the 8 months passed, we have output some wet
 +
                                                results , constructed dry models and went
 +
                                                through some HP activities. In this meeting with NCKU
 +
                                                president, we reported our current schedule
 +
                                                for the president. Since our president Dr. Huey-Jen Jenny
 +
                                                Su from NCKU have research experience
 +
                                                which is related to our project content, she reminded us of
 +
                                                what we have more care about and where
 +
                                                we can do more well.
 +
                                            </p>
 +
 
 +
                                            <p class="hpcontent">
 +
                                                Dr. Huey-Jen Jenny Su from NCKU gave us many support about
 +
                                                the iGEM competition, which let us do
 +
                                                the project more smoothly. We appreciate everyone who helps
 +
                                                and gives us recommendations to improve
 +
                                                our project. With president's help and advice, we know more
 +
                                                about what we can do and work hard in
 +
                                                less than two months.
 +
                                            </p>
 +
 
 +
                                            <img class="contentimg col-12" src="https://static.igem.org/mediawiki/2018/f/f5/T--NCKU_Tainan--home_NCKU.jpg">
 +
 
 +
                                        </div>
 +
 
 
                                     </div>
 
                                     </div>
                                     <div class="right">
+
                                </div>
                                        <h1>Meetup with Tec Chihuahua</h1>
+
                            </div>
                                        <div id="cardtext">We finished a video meeting with Tec-Monterry. Their project
+
 
                                            has two part.
+
 
                                            The main part is E-coding, which use
+
 
                                            bacteria to record the data. Another part is to sense the pollute in
+
 
                                            Mexico. </div>
+
 
 +
 
 +
                            <div class="card">
 +
                                <div class="thumbnail">
 +
                                     <img src="https://static.igem.org/mediawiki/2018/3/31/T--NCKU_Tainan--home_IMG_8642_%281%29.jpg"
 +
                                        class="left">
 +
                                </div>
 +
                                <div class="right">
 +
                                    <h1>2018 NCKU Bike Festival</h1>
 +
                                    <div id="cardtext">
 +
                                        NCKU Bike Festival is a famous activity for NCKU to exhibit and introduce every
 +
                                        college department to south Taiwan senior high students. We seize this chance
 +
                                        to make an effort to expose iGEM to people.
 
                                     </div>
 
                                     </div>
                                    <h9>9</h9>
 
                                    <h6>JULY</h6>
 
                                    <div><a style="text-decoration: none; color: white;" href=# target="_blank" class="action-button shadow animate blue">Read
 
                                            More</a></div>
 
 
                                 </div>
 
                                 </div>
 +
                                <h9>3</h9>
 +
                                <h6>MAR</h6>
 +
                                <div class="blue action-button" type="button" class="btn btn-primary" data-toggle="modal"
 +
                                    data-target="#NBF"><a>Read
 +
                                        More</a></div>
 
                             </div>
 
                             </div>
  
                             <div id="list-item-3">
+
                            <!-- Modal -->
                                  
+
                             <div class="modal fade" id="NBF" tabindex="-1" role="dialog" aria-labelledby="exampleModalLongTitle"
 +
                                aria-hidden="true">
 +
                                 <div class="modal-dialog" role="document">
 +
                                    <div class="modal-content">
 +
                                        <div class="modal-header">
 +
                                            <h5 class="modal-title" id="exampleModalLongTitle">2018 NCKU
 +
                                                Bike Festival</h5>
 +
                                            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
 +
                                                <span aria-hidden="true">&times;</span>
 +
                                            </button>
 +
                                        </div>
 +
 
 +
                                        <div class="modal-body">
 +
 
 +
                                            <p class="hpcontent">
 +
                                                NCKU Bike Festival is a famous activity for NCKU to exhibit
 +
                                                and introduce every college department
 +
                                                to south Taiwan senior high students. We seized this chance
 +
                                                to make an effort to expose iGEM to
 +
                                                people.
 +
                                            </p>
 +
 
 +
                                            <p class="hpcontent">
 +
                                                What we done are as follows:
 +
                                            </p>
 +
 
 +
                                            <p class="hpcontent">Designing a synthetic biology – related game for them
 +
                                                to
 +
                                                play.</p>
 +
                                            <p class="hpcontent">Explaining what iGEM is for everyone.</p>
 +
                                            <p class="hpcontent">Using Facebook and intasgram for the lucky draw
 +
                                                on-the-spot
 +
                                                to enhance event delight.</p>
 +
                                            <p class="hpcontent">Inquiring people’s comments about our idea.</p>
 +
                                            <p class="hpcontent">designing biological-related game for students.</p>
 +
 
 +
                                            <p class="hpcontent">
 +
                                                We hope that we can use interesting games and community
 +
                                                interaction to let
 +
                                                students know what synthetic biology is. Also, it is a
 +
                                                great opportunity to let more NCKU students
 +
                                                and
 +
                                                high school student know there is such an awesome
 +
                                                competition in Boston. As for our team, we
 +
                                                enjoyed
 +
                                                all process during iGEM competition period!
 +
                                            </p>
 +
 
 +
                                            <img class="contentimg col-12" src="https://static.igem.org/mediawiki/2018/f/f3/T--NCKU_Tainan--nckubike.jpeg">
 +
 
 +
                                        </div>
 +
 
 +
                                    </div>
 +
                                </div>
 
                             </div>
 
                             </div>
  
  
                        </div>
+
                            <div class="card">
                    </div>
+
                                <div class="thumbnail">
                </div>
+
                                    <img src="https://static.igem.org/mediawiki/2018/9/95/T--NCKU_Tainan--clubfair.jpeg"
            </div>
+
                                        class="left">
        </div>
+
                                </div>
    </div>
+
                                <div class="right">
<style>
+
                                    <h1>2018 Club Fair</h1>
 +
                                    <div id="cardtext">
 +
                                        In the NCKU club fair, we went around to promote iGEM NCKU and explain our
 +
                                        research space presently such that more students get interest in what iGEM is.
 +
                                    </div>
 +
                                </div>
 +
                                <h9>7</h9>
 +
                                <h6>MAR</h6>
 +
                                <div class="blue action-button" type="button" class="btn btn-primary" data-toggle="modal"
 +
                                    data-target="#CF"><a>Read
 +
                                        More</a></div>
 +
                            </div>
  
/*header*/
+
                            <!-- Modal -->
.carousel-item {
+
                            <div class="modal fade" id="CF" tabindex="-1" role="dialog" aria-labelledby="exampleModalLongTitle"
    height: 100vh;
+
                                aria-hidden="true">
    min-height: 300px;
+
                                <div class="modal-dialog" role="document">
    background: no-repeat center center scroll;
+
                                    <div class="modal-content">
    -webkit-background-size: cover;
+
                                        <div class="modal-header">
    -moz-background-size: cover;
+
                                            <h5 class="modal-title" id="exampleModalLongTitle">2018 Club Fair</h5>
    -o-background-size: cover;
+
                                            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
    background-size: cover;
+
                                                <span aria-hidden="true">&times;</span>
  }
+
                                            </button>
 +
                                        </div>
  
 +
                                        <div class="modal-body">
  
  body {
+
                                            <p class="hpcontent">
    background-color: #272625;
+
                                                iGEM NCKU has applied for becoming a synthetic biology cub in NCKU. In
    font-family: 'Noto Sans',"微軟雅黑","Microsoft YaHei",Helvetica,sans-serif;
+
                                                this day, we went around to
  }
+
                                                promote iGEM NCKU and explain our research space presently such that
 +
                                                more students get interest in
 +
                                                what iGEM is.
  
  h3 {
+
                                            </p>
    color: white;
+
    font-size: 35px;
+
  }
+
  
  p {
+
                                            <p class="hpcontent">
    color: white;
+
                                                We have our stand where we displaying our poster to show what iGEM is
    font-size: 20px;
+
                                                to students. We left the
  }
+
                                                contact information to students who have interest in iGEM competition.
 +
                                                We also go around at random
 +
                                                greeting people and introducing iGEM to others passionately. Some
 +
                                                student inquired question about
 +
                                                iGEM and exclaimed in admiration to our explain. We made every effort
 +
                                                to explain iGEM-related
 +
                                                answer to them.
  
  /* Button */
+
                                            </p>
  .animate{
+
transition: all 0.1s;
+
-webkit-transition: all 0.1s;
+
  }
+
  
  .action-button{
+
                                            <p class="hpcontent">
    position: relative;
+
                                                We attracted students and aroused their curiosity successfully. All of
    padding: 10px 40px;
+
                                                our team enjoyed this Club
    margin: 0px 10px 10px 0px;
+
                                                Fair well and had more motivation to study our brainstorming.
    float: right;
+
    margin-right: 20px;
+
    margin-bottom: 20px;
+
    margin-bottom: 20px;
+
    margin-right: 20px;
+
border-radius: 10px;
+
font-family: 'Pacifico', cursive;
+
font-size: 25px;
+
color: #FFF;
+
text-decoration: none;
+
  }
+
  
  .blue:hover{
+
                                            </p>
  background-color: #46a3ff;
+
  }
+
  
 +
                                            <img class="contentimg col-12" src="https://static.igem.org/mediawiki/2018/7/7c/T--NCKU_Tainan--clubfair2.jpeg">
  
  .blue{
+
                                        </div>
background-color: #3498DB;
+
border-bottom: 5px solid #2980B9;
+
text-shadow: 0px -2px #2980B9;
+
  }
+
  
  /* The card */
+
                                    </div>
  .card {
+
                                </div>
    position: relative;
+
                            </div>
    height: 400px;
+
    width: 900px;
+
    margin: 200px auto;
+
    background-color: #FFF;
+
    -webkit-box-shadow: 10px 10px 93px 0px rgba(0, 0, 0, 0.75);
+
    -moz-box-shadow: 10px 10px 93px 0px rgba(0, 0, 0, 0.75);
+
    box-shadow: 10px 10px 93px 0px rgba(0, 0, 0, 0.75);
+
  }
+
 
+
  /* Image on the left side */
+
  .thumbnail {
+
    float: left;
+
    position: relative;
+
    left: 30px;
+
    top: -100px;
+
    height: 400px;
+
    width: 400px;
+
  }
+
 
+
  /*object-fit: cover; */
+
  /*object-position: center; */
+
  img.left {
+
    position: absolute;
+
    left: 50%;
+
    top: 50%;
+
    border-radius: 3px;
+
    height: 300px;
+
    width: 400px;
+
    -webkit-transform: translate(-50%, -50%);
+
    -ms-transform: translate(-50%, -50%);
+
    transform: translate(-50%, -50%);
+
  }
+
 
+
  /* Right side of the card */
+
  .right {
+
    margin-left: 450px;
+
    margin-right: 20px;
+
    margin-top: 20px;
+
    position: absolute;
+
  }
+
 
+
  #cardtext {
+
    text-align: justify;
+
    font-size: 1.3rem;
+
    line-height: 150%;
+
    color: #4B4B4B;
+
  }
+
  
 
+
                            <div class="card">
 
+
                                <div class="thumbnail">
  /* DATE of release */
+
                                    <img src="https://static.igem.org/mediawiki/2018/a/a1/T--NCKU_Tainan--home_IMG_8890_%281%29.jpg"
  h9 {
+
                                        class="left">
    position: absolute;
+
                                </div>
    left: 50px;
+
                                <div class="right">
    bottom: 90px;
+
                                    <h1>2018 The First Presentation</h1>
    font-size: 4.0rem;
+
                                    <div id="cardtext">
  }
+
                                        On March 13, we had our first presentation about our brainstorming. We
 
+
                                        presented our brainstorming in order to let people and professors to realize
  h6 {
+
                                        our idea and vote one of our idea to become our final project.
    position: absolute;
+
                                    </div>
    left: 32px;
+
                                </div>
    bottom: 10px;
+
                                <h9>13</h9>
    font-size: 2.2rem;
+
                                <h6>MAR</h6>
  }
+
                                <div class="blue action-button" type="button" class="btn btn-primary" data-toggle="modal"
 +
                                    data-target="#TFP"><a>Read
 +
                                        More</a></div>
 +
                            </div>
  
  /* paragraph content*/
+
                            <!-- Modal -->
  h10 {
+
                            <div class="modal fade" id="TFP" tabindex="-1" role="dialog" aria-labelledby="exampleModalLongTitle"
    color: white;
+
                                aria-hidden="true">
    font-size: 1.4rem;
+
                                <div class="modal-dialog" role="document">
    line-height: 150%;
+
                                    <div class="modal-content">
  }
+
                                        <div class="modal-header">
 
+
                                            <h5 class="modal-title" id="exampleModalLongTitle">2018 The
  .navbar {
+
                                                First Presentation</h5>
    padding-top: 10px;
+
                                            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
    margin-bottom: 0;
+
                                                <span aria-hidden="true">&times;</span>
  }
+
                                            </button>
  .navbar-brand {
+
                                        </div>
    font-size: 30px;
+
  }
+
  .nav-link {
+
    font-size: 20px;
+
  }
+
  a.dropdown-item {
+
    color: #4F7F52;
+
  }
+
  a.dropdown-item:active {
+
    background-color: #4F7F52;
+
  }
+
  .caret {
+
    display: inline-block;
+
    width: 0;
+
    height: 0;
+
    margin-left: 2px;
+
    vertical-align: middle;
+
    border-top: 4px solid;
+
    border-right: 4px solid transparent;
+
    border-left: 4px solid transparent;
+
  }
+
  /*滑到navbar就展開*/
+
  .dropdown-menu li:hover .sub-menu {visibility: visible;}
+
  .dropdown:hover .dropdown-menu {display: block;}
+
 
+
  .head {
+
    color: white;
+
    width: 60%;
+
    font-size: 50px;
+
    font-weight: 700;
+
    border-bottom: 10px solid #7ae26f !important;
+
    position: relative;
+
    margin-top: 100px;
+
  }
+
  .container.content {
+
    margin-top: 80px;
+
  
  }
+
                                        <div class="modal-body">
  
  @media (min-width: 992px) {
+
                                            <p class="hpcontent">
    .navbar {
+
                                                On March 13, we had our first presentation about our
      padding-left: 80px;
+
                                                brainstorming. We presented our brainstorming
      padding-right: 80px;
+
                                                in order to let people and professors to realize our idea
    }
+
                                                and vote one of our idea to become our
  }
+
                                                final project.
  @media (max-width: 768px) {
+
                                            </p>
    .navbar-right form {
+
      display: none;
+
    }
+
  }
+
  @media (max-width: 568px) {
+
    footer {
+
      text-align: center;
+
    }
+
    .list-group {
+
      display: none;
+
    }
+
  }
+
  
  /*folded-corner*/
+
                                            <p class="hpcontent">
  .post {
+
                                                We had three topics, including cleaning up oil spill,
    position: relative;
+
                                                detection of pathogens and carbon capture.
  }
+
                                                Each group had twenty minutes to present their idea, then
  .folded-corner {
+
                                                we entered the Q&A stage, which made each
    position: absolute;
+
                                                group more realize their problem and blind spot so that
    bottom: 0px; 
+
                                                they had do more work and brainstorming to
    right: 0px;
+
                                                solve these problem.
    border-width: 0;
+
                                            </p>
    border-style: solid;
+
    background: hsla(260,100%,100%,0.2);
+
    box-shadow: 0px -4px 0px rgba(0,0,0,0.3), -1px -4px 0px rgba(0,0,0,0.1);
+
    border-radius: 15px 0 0 0;
+
    border-color: transparent #B9DEBB transparent transparent;
+
    transition: border-width 0.2s ease-out;
+
  }
+
  .post:hover .folded-corner {
+
    border-width: 40px 40px 0 0;
+
  }
+
  .photo .folded-corner {
+
    background: hsla(260,5%,75%,0.5);
+
  }
+
  
  [class*="col-"] {
+
                                            <p class="hpcontent">
    float: left;
+
                                                After our presentation, we obtained lots of feedback. In
    padding: 13px;
+
                                                addition, we met NCTU iGEM team after our
  }
+
                                                semester presentation. We had our dinner together and
  a.list-group-item:visited {
+
                                                talked about our project. Since NCTU team and
    color: white;
+
                                                we hadn’t set our mind on solving specific problem, we made
  }
+
                                                some wide discussion about agricultural
  a:hover {
+
                                                and environmental issues in Taiwan. We also talked about
    background-color: transparent;
+
                                                our team composition the way how we
  }
+
                                                recruit our team members.
  .list-group {
+
                                            </p>
    margin-top: 100px;
+
  }
+
  .col-2.side {
+
    padding: 0;
+
  }
+
  .list-group-item {
+
    padding: .55rem .35rem;
+
    background-color: #272625;
+
    color: white;
+
    border: none;
+
    font-size: 19px;
+
  }
+
  a.list-group-item.list-group-item-action {
+
    background-color: transparent;
+
  }
+
  a.list-group-item.list-group-item-action:hover {
+
    color: #98CC9B;
+
  }
+
  a.list-group-item.list-group-item-action.active {
+
    background-color: transparent;
+
    color: #7ae26f;
+
  }
+
  .scrollspy-example h4{
+
    font-size: 2rem;
+
  }
+
  
 
+
                                            <p class="hpcontent">
 +
                                                We had a pleasant time exchanging our ideas and chatting
 +
                                                with each other. We believed that we could
 +
                                                build up cooperation relationship in the iGEM competition.
 +
                                            </p>
  
  img.contentimg {
+
                                            <img class="contentimg col-12" src="https://static.igem.org/mediawiki/2018/8/83/T--NCKU_Tainan--home_IMG_8718_%281%29.jpg">
      width: 100%;
+
      margin: 20px 0;
+
  }
+
  a.link {
+
      font-size: 30px;
+
      color: #4F7F52;
+
  }
+
  #list-item-1 {
+
      padding-top: 0px;
+
  }
+
  #list-item-2 {
+
      padding-top: 0px;
+
  }
+
  #list-item-3 {
+
    padding-top: 0px;
+
  }
+
  #list-item-4 {
+
    padding-top: 0px;
+
  }
+
  #list-item-5 {
+
    padding-top: 0px;
+
  }
+
  a.reference {
+
    color: #4F7F52;
+
  }
+
 
+
</style>
+
  
<script>
+
                                        </div>
  
$(document).ready(function() {
+
                                    </div>
    $(window).scroll(function() {
+
                                </div>
      if ($(this).scrollTop() >= 750) {
+
                            </div>
        var position = $("#sidelist").position();
+
        if(position == undefined){}
+
        else{
+
          $('#sidelist').css({"position": "fixed", "top": "145px", "margin-top": "0px"});
+
        }
+
      } else {
+
        $('#sidelist').removeAttr('style');
+
      }
+
    });
+
    $(function(){
+
      $('i.fa-arrow-up').click(function(){
+
        $('html, body').animate({scrollTop:0},600);
+
        return false;
+
      });
+
    });
+
});
+
  
    </script>
 
  
    <script src="https://2017.igem.org/Team:NCKU_Tainan/js/frame/T--NCKU_Tainan--jquery-1_12_4_min_js?action=raw&amp;ctype=text/javascript"></script>
+
                            <div class="card">
    <script src="https://2018.igem.org/Template:NCKU_Tainan/js/bootstrap_min_js?action=raw&amp;ctype=text/javascript"></script>
+
                                <div class="thumbnail">
 +
                                    <img src="https://static.igem.org/mediawiki/2018/2/28/T--NCKU_Tainan--home_DSC02764.JPG"
 +
                                        class="left">
 +
                                </div>
 +
                                <div class="right">
 +
                                    <h1>iGEM Promotion in NCKU</h1>
 +
                                    <div id="cardtext">NCKU igem team were invited by department of medicine
 +
                                        and Department of Medical Laboratory Science and Biotechnology to share our
 +
                                        experience in iGEM
 +
                                        competition.</div>
 +
                                </div>
 +
                                <h9>27</h9>
 +
                                <h6>MAY</h6>
 +
                                <div class="blue action-button" type="button" class="btn btn-primary" data-toggle="modal"
 +
                                    data-target="#IGEMP"><a>Read
 +
                                        More</a></div>
 +
                            </div>
  
 +
                            <!-- Modal -->
 +
                            <div class="modal fade" id="IGEMP" tabindex="-1" role="dialog" aria-labelledby="exampleModalLongTitle"
 +
                                aria-hidden="true">
 +
                                <div class="modal-dialog" role="document">
 +
                                    <div class="modal-content">
 +
                                        <div class="modal-header">
 +
                                            <h5 class="modal-title" id="exampleModalLongTitle">iGEM Promotion in NCKU
 +
                                                Spring medical speech</h5>
 +
                                            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
 +
                                                <span aria-hidden="true">&times;</span>
 +
                                            </button>
 +
                                        </div>
 +
 +
                                        <div class="modal-body">
 +
                                            <p class="hpcontent">
 +
                                                NCKU Spring medical speech is an annual One-Day-camp for the high
 +
                                                school students who is interested
 +
                                                in medical school in Taiwan. Through this camp, high school students
 +
                                                have opportunities to closely
 +
                                                contact with all kinds of departments related to medical. Since the
 +
                                                first year of NCKU igem team
 +
                                                establish, NCKU college of medicine have given a lot of support and
 +
                                                many students in college of
 +
                                                medicine joined iGEN competition. Therefore, NCKU igem team were
 +
                                                invited by department of medicine
 +
                                                and Department of Medical Laboratory Science and Biotechnology to share
 +
                                                our experience in iGEM
 +
                                                competition. Through this speech, we could spread our passion in iGEM
 +
                                                to all the high school
 +
                                                students.
 +
                                            </p>
 +
 +
                                            <p class="hpcontent">
 +
                                                2016 iGEM_NCKU “UNO” designed a non-invasive blood glucosemeter in
 +
                                                synthetic biological way. The
 +
                                                next year, 2017 iGEM_NCKU "NO problem" made an nitrate sensor boat to
 +
                                                deal with the aquaculture
 +
                                                problem. This year, 2018 iGEM_NCKU aim to change the sequence of E.
 +
                                                coli gene to run a more
 +
                                                efficiency method in biological carbon capture. We gave some basic
 +
                                                knowledge about synthetic
 +
                                                biology to high school students, and what we learn during paper review
 +
                                                in iGEM competition,
 +
                                                synthetic biology, and whole CO2 problem. In addition, interdeparmental
 +
                                                collaboration is a key
 +
                                                feature of NCKU. Through iGEM, medical student can have more
 +
                                                communication with other students came
 +
                                                from different departments. Besides, we all gain a great sense of
 +
                                                achievement after we finish the
 +
                                                whole project which is not only a result of research, but a complete
 +
                                                final product that we can show
 +
                                                all the audiences.
 +
                                            </p>
 +
 +
                                            <p class="hpcontent">
 +
                                                After the speech, many students showed their interest on iGEM. We also
 +
                                                received recognition for
 +
                                                giving a briefly introduction from chairmen of department of medicine
 +
                                                and Department of Medical
 +
                                                Laboratory Science and Biotechnology who invited us.
 +
                                            </p>
 +
 +
                                            <img class="contentimg col-12" src="https://static.igem.org/mediawiki/2018/d/dd/T--NCKU_Tainan--home_DSC02767.JPG">
 +
 +
                                        </div>
 +
 +
 +
 +
                                    </div>
 +
                                </div>
 +
                            </div>
 +
 +
                            <div class="card">
 +
                                <div class="thumbnail">
 +
                                    <img src="https://static.igem.org/mediawiki/2018/0/02/T--NCKU_Tainan--ITRI.png" class="left">
 +
                                </div>
 +
                                <div class="right">
 +
                                    <h1>Visit Biotechnology Green Energy Expo</h1>
 +
                                    <div id="cardtext">
 +
                                        We participated in the Biotechnology Green Energy Expo.There are many stands
 +
                                        about the biotechnology product. After this visit, we realize that we have to
 +
                                        more understand our product strengths, potential client and other resources
 +
                                        which benefit our idea.
 +
                                    </div>
 +
                                </div>
 +
                                <h9>6</h9>
 +
                                <h6>OCT</h6>
 +
                                <div class="blue action-button" type="button" class="btn btn-primary" data-toggle="modal"
 +
                                    data-target="#IGEM"><a>Read
 +
                                        More</a></div>
 +
                            </div>
 +
 +
                            <!-- Modal -->
 +
                            <div class="modal fade" id="IGEM" tabindex="-1" role="dialog" aria-labelledby="exampleModalLongTitle"
 +
                                aria-hidden="true">
 +
                                <div class="modal-dialog" role="document">
 +
                                    <div class="modal-content">
 +
                                        <div class="modal-header">
 +
                                            <h5 class="modal-title" id="exampleModalLongTitle">Visit Biotechnology
 +
                                                Green Energy Expo</h5>
 +
                                            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
 +
                                                <span aria-hidden="true">&times;</span>
 +
                                            </button>
 +
                                        </div>
 +
 +
                                        <div class="modal-body">
 +
                                            <p class="hpcontent">
 +
                                                On October, 6 Our team participated in the Biotechnology Green Energy
 +
                                                Expo. There are many stands which could be divided into Biotechnology,
 +
                                                Green energy and Innovative production. In addition, we also joined the
 +
                                                NEP-II Technology Workshop and Matchmaking Conference.
 +
                                            </p>
 +
 +
                                            <p class="hpcontent">
 +
                                                We chose Multi-fuel pure oxygen combustion reduction and Advanced
 +
                                                carbon capture combustion technology which have closely related to our
 +
                                                project. Interestingly, we found that in the such business matchmaking
 +
                                                conference involved in many vendor, most of them focused more on what
 +
                                                benefit they create rather than the detailed technology process.
 +
                                            </p>
 +
 +
                                            <p class="hpcontent">
 +
                                                It is important that when we want to apply our projects in practice, we
 +
                                                have to understand our product strengths, potential client and other
 +
                                                resources which benefit our idea. Besides, using the government
 +
                                                resources to receive subsidies also can make our research go more well
 +
                                                , and improve our product visibility at the same time.
 +
                                            </p>
 +
 +
                                            <img class="contentimg col-12" src="https://static.igem.org/mediawiki/2018/8/85/T--NCKU_Tainan--ITRI2.png">
 +
                                        </div>
 +
                                    </div>
 +
                                </div>
 +
                            </div>
 +
                        </div>
 +
                    </div>
 +
                </div>
 +
            </div>
 +
        </div>
 +
 +
 +
        <style>
 +
            .head {
 +
                width: 80% !important;
 +
            }
 +
 +
            h3 {
 +
                line-height: 50px !important;
 +
            }
 +
 +
            .list-group {
 +
                margin-top: 100px;
 +
            }
 +
 +
            .list-group-item {
 +
                margin: 10px 0 !important;
 +
            }
 +
        </style>
 +
 +
        <script>
 +
            $(document).ready(function () {
 +
                $(window).scroll(function () {
 +
                    if ($(this).scrollTop() >= 500) {
 +
                        var position = $("#sidelist").position();
 +
                        if (position == undefined) {} else {
 +
                            $('#sidelist').css({
 +
                                "position": "fixed",
 +
                                "top": "145px",
 +
                                "margin-top": "0px"
 +
                            });
 +
                        }
 +
                    } else {
 +
                        $('#sidelist').removeAttr('style');
 +
                    }
 +
                });
 +
                $(function () {
 +
                    $('i.fa-arrow-up').click(function () {
 +
                        $('html, body').animate({
 +
                            scrollTop: 0
 +
                        }, 600);
 +
                        return false;
 +
                    });
 +
                });
 +
            });
 +
        </script>
 +
 +
        <script src="https://2018.igem.org/Team:NCKU_Tainan/js/frame/T--NCKU_Tainan--jquery-1_12_4_min_js?action=raw&amp;ctype=text/javascript"></script>
 +
        <script src="https://2018.igem.org/Template:NCKU_Tainan/js/bootstrap_min_js?action=raw&amp;ctype=text/javascript"></script>
 +
    </div>
 
</body>
 
</body>
  
 
</html>
 
</html>
 
{{NCKU_Tainan/footer}}
 
{{NCKU_Tainan/footer}}

Latest revision as of 00:07, 18 October 2018

Education & Public Engagement

Impact Inspire Influence
Follow us

Contact us

igem.ncku.tainan@gmail.com
No.1, Daxue Rd., East Dist., Tainan City 701, Taiwan (R.O.C.)