Difference between revisions of "Team:NCKU Tainan/Software"

 
(43 intermediate revisions by 8 users not shown)
Line 1: Line 1:
 
{{NCKU_Tainan/header}} {{NCKU_Tainan/navbar}} {{NCKU_Tainan/style}}
 
{{NCKU_Tainan/header}} {{NCKU_Tainan/navbar}} {{NCKU_Tainan/style}}
 
<html>
 
<html>
    <head>
+
 
        <link rel="stylesheet" href="https://2018.igem.org/Template:NCKU_Tainan/css/software?action=raw&ctype=text/css">
+
<head>
    </head>
+
    <link rel="stylesheet" href="https://2018.igem.org/Template:NCKU_Tainan/css/software?action=raw&ctype=text/css">
    <body data-spy="scroll" data-target=".navbar-example">
+
</head>
        <div class="container content">
+
 
         <h1 class="head">Software</h1>
+
<body data-spy="scroll" data-target=".navbar-example">
             <div class="navbar-example">
+
    <div class="container content">
                <div class="row">
+
         <div class="headstyle">
                    <div class="col-2 side">      
+
            <h1 class="head">Software</h1>
                        <div id="sidelist" class="list-group">
+
        </div>
                            <a class="list-group-item list-group-item-action" href="#list-item-1">Arduino code</a>
+
        <div class="righttitle">
                            <a class="list-group-item list-group-item-action" href="#list-item-2">Temperature</a>
+
             <h6 class="subtitle">Behind The Screen</h6>
                            <a class="list-group-item list-group-item-action" href="#list-item-3">Database</a>
+
        </div>
                            <a class="list-group-item list-group-item-action" href="#list-item-4">App</a>
+
        <div class="navbar-example">
                            <a class="list-group-item list-group-item-action" href="#list-item-5">NCKU Bike Festival</a>
+
            <div class="row">
                            <a class="list-group-item list-group-item-action" href="#"><i class="fa fa-arrow-up fa-1x" aria-hidden="true"></i></a>
+
                <div class="col-2 side">
                        </div>
+
                    <div id="sidelist" class="list-group">
 +
                        <a class="list-group-item list-group-item-action" href="#IoT">IoT</a>
 +
                        <a class="list-group-item list-group-item-action" href="#Arduino_code">Arduino Code</a>
 +
                        <a class="list-group-item list-group-item-action" href="#Temperature">Temperature</a>
 +
                        <a class="list-group-item list-group-item-action" href="#Database">Database</a>
 +
                        <a class="list-group-item list-group-item-action" href="#App">App</a>
 +
                        <a class="list-group-item list-group-item-action" href="#NCKU_Bike_Festival">NCKU Bike Festival</a>
 +
                        <a class="list-group-item list-group-item-action" href="#"><i class="fa fa-arrow-up fa-1x"
 +
                                aria-hidden="true"></i></a>
 
                     </div>
 
                     </div>
                    <div class="col-10">
+
                </div>
                        <div data-spy="scroll" data-target="#sidelist" data-offset="0" class="scrollspy-example">
+
                <div class="col-10">
                            <div class="container">
+
                    <div data-spy="scroll" data-target="#sidelist" data-offset="0" class="scrollspy-example">
                                 <div id="list-item-1">
+
                        <div class="container">
                                     <h3>Arduino code</h3>
+
                            <div id="IoT">
                                    <p class="pcontent">We use temperature sensor(DS18B20)、pH meter and CO2 sensor(MG811) to monitor our device.  
+
                                <h3>IoT</h3>
                                        Besides, we use LCD to print datum and use Wi-Fi sensor(ESP8266) to upload our records to database as well.  
+
                                <p class="pcontent">
                                        (You can see more information about Arduino in <a class="link" href="https://2018.igem.org/Team:NCKU_Tainan/Hardware">hardware</a>)
+
                                    We implemented an IoT by Arduino, Firebase and Android Studio.
                                    </p>
+
                                    For Arduino, we use <a class="link" href="https://2018.igem.org/Team:NCKU_Tainan/Temperature">temperature
 +
                                        sensor (DS18B20)</a>、<a class="link" href="https://2018.igem.org/Team:NCKU_Tainan/pH_meter">pH
 +
                                        meter</a> and <a class="link" href="https://2018.igem.org/Team:NCKU_Tainan/CO2">CO<sub>2</sub>
 +
                                        sensor (MG811)</a> to monitor our device.
 +
                                    Also we use LCD to print data and use <a class="link" href="https://2018.igem.org/Team:NCKU_Tainan/wi_fi">Wi-Fi
 +
                                        sensor (NodeMcu)</a> to upload our records to database (Firebase) as well.
 +
                                    We use Wi-Fi sensor to get current time and we send it to the Arduino so that it
 +
                                    can print it out on Arduino.
 +
                                    Also we send the temperature, pH and temperature data, which is on the Arduino, to
 +
                                    the NodeMcu.
 +
                                    Then we use the NodeMcu to send the data to firebase.
 +
                                </p>
 +
                                 <div id="centerimg">
 +
                                    <img class="oneimg" src="https://static.igem.org/mediawiki/2018/3/3f/T--NCKU_Tainan--software_IoT.jpg">
 +
                                </div>
 +
                                <p class="pcontent">For user-friendly, user can read the data easily from the App.
 +
                                     When the data is abnormal, the App would have a caution to let the user know,
 +
                                    so that the user can adjust the device in time.
 +
                                </p>
 +
                            </div>
 +
                            <div id="Arduino_code">
 +
                                <h3>Arduino code</h3>
 +
                                <p class="pcontent">We use temperature sensor (DS18B20), pH meter and CO<sub>2</sub>
 +
                                    sensor (MG811) to monitor our device.
 +
                                    Besides, we use LCD to print datum and use Wi-Fi sensor (ESP8266) to upload our
 +
                                    records to database as well.
 +
                                    (You can see more information about Arduino in <a class="link" href="https://2018.igem.org/Team:NCKU_Tainan/Hardware">hardware</a>)
 +
                                </p>
 +
                                <div style="overflow: auto; width:100%; height:250px; background-color:#272625; border:3px solid #a6a6a6;">
 
                                     <script src="https://gist.github.com/yiiju/62d0249edc790f0cbb59bbc45060dc43.js"></script>
 
                                     <script src="https://gist.github.com/yiiju/62d0249edc790f0cbb59bbc45060dc43.js"></script>
 
                                 </div>
 
                                 </div>
                                <div id="list-item-2">
+
                            </div>
                                    <h3>Temperature experimental verification</h3>
+
                            <div id="Temperature">
                                    <h5 class="smalltitle">Data Fitting</h5>
+
                                <h3>Temperature experimental curve fitting</h3>
                                    <ol>
+
                                <h5 class="smalltitle">Data Fitting</h5>
                                     <li>Given a set of data (including input and output), create a mathematical model to approximate the input and output characteristics of this data.</li>
+
                                <ol>
                                     <li>If the data contains one-dimensional inputs and outputs, the mathematical model can be expressed as a curve, which in this case is also called curve fitting.</li>      
+
                                     <li class="licontent">Given a set of data (including input and output), create a
                                    </ol>
+
                                        mathematical model to approximate the input and output characteristics of this
                                    <p class="pcontent">Therefore, we use the temperature of the thermostat (incubation) on the market and the analog signal sensed by Arduino as the basis for the temperature calibration curve.</p>                                                                  
+
                                        data.</li>
                                    <br>
+
                                     <li class="licontent">If the data contains one-dimensional inputs and outputs, the
                                    <p class="pcontent">Since the error value of the temperature sensing device is not necessarily, we use multiple sampling methods, and then average the values measured in each temperature interval to reduce the error value without excessive error.
+
                                        mathematical model can be expressed as a curve, which in this case is also
                                        We use the above method to take 150 strokes as training data, and use the basic accessories of MATLAB to find the appropriate nine temperature model formulas.
+
                                        called curve fitting.</li>
                                    </p>
+
                                </ol>
                                    <img class="contentimg col-6" src="">
+
                                <p class="pcontent">Therefore, we use the temperature of the thermostat (incubation) on
                                    <img class="contentimg col-6" src="">
+
                                    the market and the analog signal sensed by Arduino as the basis for the temperature
                                    <img class="contentimg col-6" src="">
+
                                    calibration curve.</p>
                                    <img class="contentimg col-6" src="">
+
                                <br>
                                    <img class="contentimg col-6" src="">
+
                                <p class="pcontent">Since the error value of the temperature sensing device is not
                                    <img class="contentimg col-6" src="">
+
                                    necessarily, we use multiple sampling methods, and then average the values measured
                                    <img class="contentimg col-6" src="">
+
                                    in each temperature interval to reduce the error value without excessive error.
                                    <img class="contentimg col-6" src="">
+
                                    We use the above method to take 150 strokes as training data, and use the basic
                                    <img class="contentimg" src="picture/temperature9.jpg">
+
                                    accessories of MATLAB to find the appropriate nine temperature model formulas.
                                    <p class="pcontent">From the graph we can see that the more parameters the model contains,  
+
                                </p>
                                        the smaller the square error will be. Therefore, if the number of parameters is equal to the number of data points,  
+
                                <img class="contentimg col-6" src="https://static.igem.org/mediawiki/2018/0/0b/T--NCKU_Tainan--software_temperature1.png">
                                        the squared error will be equal to zero, but this does not mean that the prediction will be the most accurate,  
+
                                <img class="contentimg col-6" src="https://static.igem.org/mediawiki/2018/9/95/T--NCKU_Tainan--software_temperature2.png">
                                        because the data points contain noise. The model that completely matches the data also means that the model is most affected by noise.  
+
                                <img class="contentimg col-6" src="https://static.igem.org/mediawiki/2018/e/e3/T--NCKU_Tainan--software_temperature4.png">
                                        The accuracy will also be poor. In addition, the more model parameters, the higher the time complexity,  
+
                                <img class="contentimg col-6" src="https://static.igem.org/mediawiki/2018/2/2f/T--NCKU_Tainan--software_temperature5.png">
                                        so we use the third image as the curve of analog signal and temperature conversion.
+
                                <img class="contentimg col-6" src="https://static.igem.org/mediawiki/2018/6/63/T--NCKU_Tainan--software_temperature6.png">
                                     </p>                                                            
+
                                <img class="contentimg col-6" src="https://static.igem.org/mediawiki/2018/4/4d/T--NCKU_Tainan--software_temperature9.png">
                                </div>
+
                                <img class="trueimg" src="https://static.igem.org/mediawiki/2018/b/b8/T--NCKU_Tainan--software_temperature3.png">
                                <div id="list-item-3">
+
                                <p class="pcontent">From the graph we can see that the more parameters the model
                                    <h3>Database</h3>
+
                                    contains,
                                    <h5>Why we need to use database?</h5>
+
                                    the smaller the square error will be. Therefore, if the number of parameters is
                                    <p class="pcontent">Save data from our device, including carbon dioxide concentration,  
+
                                    equal to the number of data points,
                                        pH value and temperature obtained by sensors in our device. Besides,  
+
                                    the squared error will be equal to zero, but this does not mean that the prediction
                                        the app can fetch the information from our database.
+
                                    will be the most accurate,
                                    </p>      
+
                                    because the data points contain noise. The model that completely matches the data
                                    <h5>What database we use?</h5>
+
                                    also means that the model is most affected by noise.
                                    <p class="pcontent">We use Firebase to be our database.  
+
                                    The accuracy will also be poor. In addition, the more model parameters, the higher
 +
                                    the time complexity,
 +
                                    so we use the last image (cubic) as the curve of analog signal and temperature
 +
                                    conversion. Because the instantaneous temperature does not only contain the exact
 +
                                     value of the time complexity can not be too high.
 +
                                </p>
 +
                            </div>
 +
                            <div id="Database">
 +
                                <h3>Database</h3>
 +
                                <h5>Why we need to use database?</h5>
 +
                                <p class="pcontent">Save data from our device, including carbon dioxide concentration,
 +
                                    pH value and temperature obtained by sensors in our device. Besides,
 +
                                    the App can fetch the information from our database.
 +
                                </p>
 +
                                <h5>What database we use?</h5>
 +
                                <p class="pcontent">We use Firebase to be our database.
 
                                     Because it is a realtime database and a 3rd party Authentication
 
                                     Because it is a realtime database and a 3rd party Authentication
                                     (Google Signin,Facebook Login,Github,Twitter).Last but not least,  
+
                                     (Google Signin, Facebook Login, Github, Twitter). Last but not least,
                                     its cloud messaging can send push messages to any device, so we can easily send it to our app.  
+
                                     its cloud messaging can send push messages to any device, so we can easily send it
 +
                                    to our App.
 
                                     Based on above reason, we choose Firebase.</p>
 
                                     Based on above reason, we choose Firebase.</p>
                                    <h5>How to create a Firebase?</h5>
+
                                <h5>How to create a Firebase?</h5>
                                    <p class="pcontent">We divide the following instructions into two parts,  
+
                                <p class="pcontent">We divide the following instructions into two parts,
 
                                     register firebase and create Firebase project.</p>
 
                                     register firebase and create Firebase project.</p>
                                    <h5>Register firebase</h5>
+
                                <h5>Register firebase</h5>
                                    <ol>
+
                                <ol>
                                        <li>The quickest way to use Firebase is to sign in with your old Google Account and get started.  
+
                                    <li class="licontent">The quickest way to use Firebase is to sign in with your old
                                            Sign up and then go to the website.
+
                                        Google Account and get started.
                                            <br>
+
                                        Sign up and then go to the website.
                                            Register Firebase account
+
                                        <br>
                                            <br>
+
                                        Register Firebase account
                                            Go to the Firebase homepage: http://firebase.google.com and find the "Login" link registered with Google as shown below in the homepage.
+
                                        <br>
                                        </li>
+
                                        Go to the Firebase homepage: http://firebase.google.com and find the "Login"
                                        <li>After signing in to your Google Account, you will be prompted to confirm your permissions.  
+
                                        link registered with Google as shown below in the homepage.
                                            Click "Allow" to complete the registration of Firebase,  
+
                                    </li>
                                            then click "GET STARTED" on the page to start using Firebase, as shown below:</li>
+
                                    <li class="licontent">After signing in to your Google Account, you will be prompted
                                    </ol>
+
                                        to confirm your permissions.
                                    <img class="contentimg" src="https://static.igem.org/mediawiki/2018/c/ca/T--NCKU_Tainan--software_firebase1.png">
+
                                        Click "Allow" to complete the registration of Firebase,
                                    <h5>Create Firebase project</h5>
+
                                        then click "GET STARTED" on the page to start using Firebase, as shown below:</li>
                                    <ol>
+
                                </ol>
                                        <li>The first thing to enter the Firebase console is to create a Firebase project and try out the free program.  
+
                                <img class="contentimg" src="https://static.igem.org/mediawiki/2018/c/ca/T--NCKU_Tainan--software_firebase1.png">
                                            After entering the console, please click on “Add Project” to create a new project, as shown below:
+
                                <h5>Create Firebase project</h5>
                                        </li>
+
                                <ol>
                                        <img class="smallimg" src="https://static.igem.org/mediawiki/2018/7/7c/T--NCKU_Tainan--software_firebase2.png">
+
                                    <li class="licontent">The first thing to enter the Firebase console is to create a
                                        <li>Enter the project name of the APP, such as “project”,  
+
                                        Firebase project and try out the free program.
                                            and then select the country/region, then click “Create Project” as shown below:
+
                                        After entering the console, please click on “Add Project” to create a new
                                        </li>
+
                                        project, as shown below:
                                        <img class="smallimg" src="https://static.igem.org/mediawiki/2018/1/1f/T--NCKU_Tainan--software_firebase3.png">
+
                                    </li>
                                        <p class="pcontent">Finally, you can wait for Arduino to send data by wi-fi to the database.</p>
+
                                    <img class="smallimg" src="https://static.igem.org/mediawiki/2018/7/7c/T--NCKU_Tainan--software_firebase2.png">
                                    </ol>
+
                                    <li class="licontent">Enter the project name of the App, such as “project”,
 +
                                        and then select the country/region, then click “Create Project” as shown below:
 +
                                    </li>
 +
                                    <img class="smallimg" src="https://static.igem.org/mediawiki/2018/1/1f/T--NCKU_Tainan--software_firebase3.png">
 +
                                    <p class="pcontent">Finally, you can wait for Arduino to send data by Wi-Fi to the
 +
                                        database.</p>
 +
                                </ol>
 +
                            </div>
 +
                            <div id="App">
 +
                                <h3>App</h3>
 +
                                <p class="pcontent">To make our device more user-friendly, we designed an App to get
 +
                                    data from our database. The manager of the factory can easily see the data
 +
                                    immediately. Besides, we set up a notification system. As long as users connect
 +
                                    their smart phone to the internet, they can immediately get the warning
 +
                                    notification from the device if the data goes wrong.</p>
 +
                                <div class="row">
 +
                                    <div class="col-md-6 col-md-push-6">
 +
                                        <p class="pcontent" style="margin-top: 200px">This is our homepage, with our
 +
                                            lovely logo.
 +
                                            You can click “START” button to start monitor the CO<sub>2</sub>, pH and
 +
                                            temperature data.
 +
                                            Also, you can click “SWITCH” button to control the input of the collection
 +
                                            tank or
 +
                                            output of medium tank. Furthermore, you can click “ABOUT US” button to
 +
                                            learn more about our project. Last but not least,
 +
                                            clicking the footprint, you can visit our wiki.
 +
                                        </p>
 +
                                    </div>
 +
                                    <div class="col-md-6 col-md-pull-6 appdiv">
 +
                                        <img class="appimg" src="https://static.igem.org/mediawiki/2018/8/85/T--NCKU_Tainan--software_app1.png">
 +
                                    </div>
 
                                 </div>
 
                                 </div>
                                 <div id="list-item-4">
+
                                 <div class="row">
                                    <h3>App</h3>
+
                                     <div class="col-md-6">
                                    <p class="pcontent">To make our device more user-friendly, we designed an app to get data from our database. The manager of the factory can easily see the data immediately. Besides, we set up a notification system. As long as users connect their smart phone to the internet, they can immediately get the warning notification from the device if the data goes wrong.</p>
+
                                        <p class="pcontent">This is the picture when you click ” START”. There are
                                     <div class="row">
+
                                            three buttons,
                                        <div class="col-md-6 col-md-push-6">
+
                                             which is CO<sub>2</sub>, pH and temperature respectively.
                                            <p class="pcontent" style="margin-top: 200px">This is our homepage, with our lovely logo.
+
                                            You can click any of the buttons to look at the changes with line chart
                                                You can click “START” button to start monitor the CO2, pH and temperature data.
+
                                             within ten hours.
                                                Also, you can click “ABOUT US” button to learn more about our project. Last but not least,
+
                                         </p>
                                                clicking the footprint, you can visit our wiki.
+
                                             </p>
+
                                        </div>
+
                                        <div class="col-md-6 col-md-pull-6 appdiv">
+
                                             <img class="appimg" src="https://static.igem.org/mediawiki/2018/8/85/T--NCKU_Tainan--software_app1.png">
+
                                         </div>
+
 
                                     </div>
 
                                     </div>
                                     <div class="row">
+
                                     <div class="col-md-6">
                                        <div class="col-md-6">
+
                                         <p class="pcontent">This is the picture when you press “ABOUT US”. It is a
                                            <p class="pcontent">This is the picture when you click ” START”. There are three buttons,
+
                                            brief description about our project.
                                                which is CO2, pH and temperature respectively.
+
                                            You can choose whether you want to receive an exception warning
                                                You can click any of the buttons to look at the changes with line chart within ten hours.
+
                                            notification or not.
                                            </p>
+
                                            Also, you can click the green arrow to go back to the main page.
                                         </div>
+
                                        </p>
                                        <div class="col-md-6">
+
                                            <p class="pcontent">This is the picture when you press “ABOUT US”. It is a brief description about our project.  
+
                                                You can choose whether you want to receive an exception warning notification or not.
+
                                                Also, you can click the green arrow to go back to the main page.
+
                                            </p>
+
                                        </div>
+
 
                                     </div>
 
                                     </div>
                                    <div class="row">
+
                                </div>
                                        <div class="col-md-6 appdiv">
+
                                <div class="row">
                                            <img class="appimg" src="https://static.igem.org/mediawiki/2018/2/29/T--NCKU_Tainan--software_app2.png">
+
                                    <div class="col-md-6 appdiv">
                                        </div>
+
                                        <img class="appimg" src="https://static.igem.org/mediawiki/2018/2/29/T--NCKU_Tainan--software_app2.png">
                                        <div class="col-md-6 appdiv">
+
                                            <img class="appimg" src="https://static.igem.org/mediawiki/2018/8/86/T--NCKU_Tainan--software_app3.png">
+
                                        </div>
+
 
                                     </div>
 
                                     </div>
                                     <div class="row">
+
                                     <div class="col-md-6 appdiv">
                                        <div class="col-md-6">
+
                                        <img class="appimg" src="https://static.igem.org/mediawiki/2018/8/86/T--NCKU_Tainan--software_app3.png">
                                            <p class="pcontent">Take the pH value for instance, the current value will be displayed above,
+
                                                and the line chart will display the last ten hours of data, which fetching data from the database.
+
                                            </p>
+
                                        </div>
+
                                        <div class="col-md-6">
+
                                            <p class="pcontent">When the data is abnormal, it will give a warning notice to let the user knows.</p>
+
                                        </div>
+
 
                                     </div>
 
                                     </div>
                                    <div class="row">
+
                                </div>
                                        <div class="col-md-6 appdiv">
+
 
                                            <img class="appimg" src="https://static.igem.org/mediawiki/2018/4/41/T--NCKU_Tainan--software_app4.png">
+
 
                                        </div>
+
                                <div class="row">
                                        <div class="col-md-6 appdiv">
+
                                    <div class="col-md-6">
                                            <img class="appimg" src="https://static.igem.org/mediawiki/2018/c/cf/T--NCKU_Tainan--software_app5.png">
+
                                        <p class="pcontent">Take the pH value for instance, the current value will be
                                        </div>
+
                                            displayed above,
 +
                                            and the line chart will display the last ten hours of data, which fetching
 +
                                            data from the database.
 +
                                        </p>
 +
                                    </div>
 +
                                    <div class="col-md-6">
 +
                                        <p class="pcontent">When the data is abnormal, it will give a warning notice to
 +
                                            let the user knows.</p>
 
                                     </div>
 
                                     </div>
                                    <p class="pcontent">See the code on <a class="link" href="https://github.com/yiiju/CO2_Detection" target="_blank">Github</a></p>
 
 
                                 </div>
 
                                 </div>
                                 <div id="list-item-5">
+
                                 <div class="row">
                                     <h3>NCKU Bike Festival interactive game</h3>
+
                                    <div class="col-md-6 appdiv">
                                     <p class="pcontent"><a class="link" href="">NCKU Bike Festival</a> is a famous activity for NCKU to exhibit and introduce every college department to south Taiwan senior high students.
+
                                        <img class="appimg" src="https://static.igem.org/mediawiki/2018/4/41/T--NCKU_Tainan--software_app4.png">
                                         We take this opportunity to promote synthetic biology,  
+
                                    </div>
                                         promote iGEM and introduce our three candidate topics, hoping to get different opinions.  
+
                                    <div class="col-md-6 appdiv">
                                         We designed a bio-related game quiz about synthetic biology, iGEM, and high school basic biology.  
+
                                        <img class="appimg" src="https://static.igem.org/mediawiki/2018/c/cf/T--NCKU_Tainan--software_app5.png">
                                         The system will randomly generate five questions. After the answer, the questions will be displayed correctly and incorrectly.  
+
                                    </div>
                                         At this time, we will tell them why they made a mistake. After the explanation, they can choose “re-challenge” or “all know” to enter the next step.  
+
                                </div>
                                         Before the end of the game, there will be a vote for our three candidate projects,  
+
                                <div class="row">
                                         which will be used to calculate which topics are generally of high interest to high school students.
+
                                    <div class="col-md-6 col-md-push-6">
 +
                                        <p class="pcontent" style="margin-top: 200px">We aim to simulate the situation
 +
                                            in the factory. First of all, we put the electromagnetic valves to the
 +
                                            input of collection tank and output of medium tank, so that we can control
 +
                                            the switches easier by app. In reality, they can be controlled
 +
                                            automatically. Therefore, this is what we want to achieve.
 +
                                        </p>
 +
                                    </div>
 +
                                    <div class="col-md-6 col-md-pull-6 appdiv">
 +
                                        <img class="appimg" src="https://static.igem.org/mediawiki/2018/1/1d/T--NCKU_Tainan--Electromagnetic_valve.jpg">
 +
                                    </div>
 +
 
 +
                                    <p class="pcontent">See the code on <a class="link" href="https://github.com/yiiju/CO2_Detection"
 +
                                            target="_blank">Github</a></p>
 +
                                </div>
 +
                                <div id="NCKU_Bike_Festival">
 +
                                     <h3>NCKU Bike Festival Interactive Game</h3>
 +
                                     <p class="pcontent"><a class="link" href="">NCKU Bike Festival</a> is a famous
 +
                                        activity for NCKU to exhibit and introduce every college department to south
 +
                                        Taiwan senior high students.
 +
                                         We take this opportunity to promote synthetic biology,
 +
                                         promote iGEM and introduce our three candidate topics, hoping to get different
 +
                                        opinions.
 +
                                         We designed a bio-related game quiz about synthetic biology, iGEM, and high
 +
                                        school basic biology.
 +
                                         The system will randomly generate five questions. After the answer, the
 +
                                        questions will be displayed correctly and incorrectly.
 +
                                         At this time, we will tell them why they made a mistake. After the explanation,
 +
                                        they can choose “re-challenge” or “all know” to enter the next step.
 +
                                         Before the end of the game, there will be a vote for our three candidate
 +
                                        projects,
 +
                                         which will be used to calculate which topics are generally of high interest to
 +
                                        high school students.
 
                                     </p>
 
                                     </p>
 
                                     <div class="row">
 
                                     <div class="row">
 
                                         <div class="col-md-6">
 
                                         <div class="col-md-6">
                                             <p class="pcontent">Click “start” to start playing the game.</p>
+
                                             <p class="pcontent" style="margin-top: 110px; margin-left: 50px;">Click
 +
                                                “start” to start playing the game.</p>
 
                                         </div>
 
                                         </div>
 
                                         <div class="col-md-6 appdiv">
 
                                         <div class="col-md-6 appdiv">
                                             <img class="appimg" src="">
+
                                             <img class="bikeimg" src="https://static.igem.org/mediawiki/2018/f/f2/T--NCKU_Tainan--software_festival1.png">
 
                                         </div>
 
                                         </div>
 
                                     </div>
 
                                     </div>
 
                                     <div class="row">
 
                                     <div class="row">
 
                                         <div class="col-md-6">
 
                                         <div class="col-md-6">
                                             <p class="pcontent">There are five questions about synthetic biology and iGEM.  
+
                                             <p class="pcontent" style="margin-top: 110px; margin-left: 50px;">There are
                                                 After finishing the five questions, click “finish” to see where’s wrong.</p>
+
                                                five questions about synthetic biology and iGEM.
 +
                                                 After finishing the five questions, click “finish” to see where’s
 +
                                                wrong.</p>
 
                                         </div>
 
                                         </div>
 
                                         <div class="col-md-6 appdiv">
 
                                         <div class="col-md-6 appdiv">
                                             <img class="appimg" src="">
+
                                             <img class="bikeimg" src="https://static.igem.org/mediawiki/2018/a/a6/T--NCKU_Tainan--software_festival2.png">
 
                                         </div>
 
                                         </div>
 
                                     </div>
 
                                     </div>
 
                                     <div class="row">
 
                                     <div class="row">
 
                                         <div class="col-md-6">
 
                                         <div class="col-md-6">
                                             <p class="pcontent">Click “re-challenge” to go back to the main page and start again,  
+
                                             <p class="pcontent" style="margin-top: 110px; margin-left: 50px;">Click
 +
                                                “re-challenge” to go back to the main page and start again,
 
                                                 or click “all know” to go to vote for our three candidate projects.</p>
 
                                                 or click “all know” to go to vote for our three candidate projects.</p>
 
                                         </div>
 
                                         </div>
 
                                         <div class="col-md-6 appdiv">
 
                                         <div class="col-md-6 appdiv">
                                             <img class="appimg" src="">
+
                                             <img class="bikeimg" src="https://static.igem.org/mediawiki/2018/d/da/T--NCKU_Tainan--software_festival3.png">
 
                                         </div>
 
                                         </div>
 
                                     </div>
 
                                     </div>
 
                                     <div class="row">
 
                                     <div class="row">
 
                                         <div class="col-md-6">
 
                                         <div class="col-md-6">
                                             <p class="pcontent">This is our three candidate projects. After choosing it, click “finish” to go back to the main page.</p>
+
                                             <p class="pcontent" style="margin-top: 110px; margin-left: 50px;">This is
 +
                                                our three candidate projects. After choosing it, click “finish” to go
 +
                                                back to the main page.</p>
 
                                         </div>
 
                                         </div>
 
                                         <div class="col-md-6 appdiv">
 
                                         <div class="col-md-6 appdiv">
                                             <img calss="appimg" src="">
+
                                             <img class="bikeimg" src="https://static.igem.org/mediawiki/2018/9/99/T--NCKU_Tainan--software_festival4.png">
 
                                         </div>
 
                                         </div>
 
                                     </div>
 
                                     </div>
                                     <p class="pcontent">See the code on the <a class="link" href="https://github.com/elieen840626/iGEM_Game-for-NCKU-BIKE-FESTIVAL">Github</a></p>
+
                                     <p class="pcontent">See the code on the <a class="link" href="https://github.com/elieen840626/iGEM_Game-for-NCKU-BIKE-FESTIVAL"
 +
                                            target="_blank">Github</a></p>
 
                                 </div>
 
                                 </div>
 
                             </div>
 
                             </div>
Line 212: Line 317:
 
             </div>
 
             </div>
 
         </div>
 
         </div>
        <script>
+
    </div>
         $(document).ready(function() {
+
 
          $(window).scroll(function() {
+
    <script>
            if ($(this).scrollTop() >= 50) {
+
         $(document).ready(function () {
            var position = $("#sidelist").position();
+
            $(window).scroll(function () {
              if(position == undefined){}
+
                var scrollPercentage = (document.documentElement.scrollTop + document.body.scrollTop) /
              else{
+
                    (document.documentElement.scrollHeight - document.documentElement.clientHeight);
                $('#sidelist').css({"position": "fixed", "top": "145px", "margin-top": "0px"});
+
                if (scrollPercentage >= 0.97) {
              }
+
                    var position = $("#sidelist").position();
            } else {
+
                    if (position == undefined) {} else {
              $('#sidelist').removeAttr('style');
+
                        $('#sidelist').css({
            }
+
                            "position": "fixed",
          });
+
                            "top": "105px"
          $(function(){
+
                        });
            $('i.fa-arrow-up').click(function(){
+
                    }
            $('html, body').animate({scrollTop:0},600);
+
                } else {
              return false;
+
                    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;
 +
                });
 +
            });
 +
            $(".contentimg").click(function () {
 +
                if (this.classList.contains('clicked')) {
 +
                    $('img').removeClass("clicked");
 +
                    this.classList.remove('clicked');
 +
                } else {
 +
                    $('img').removeClass("clicked");
 +
                    this.classList.add('clicked');
 +
                }
 
             });
 
             });
          });
 
          $(".contentimg").click(function(){
 
            if (this.classList.contains('clicked')) {
 
              $('img').removeClass("clicked");
 
              this.classList.remove('clicked');
 
            } else {
 
              $('img').removeClass("clicked");
 
              this.classList.add('clicked');
 
            }
 
          });
 
 
         });
 
         });
        </script>
+
    </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>
+
    <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>
    </body>
+
    <script src="https://2018.igem.org/Template:NCKU_Tainan/js/bootstrap_min_js?action=raw&amp;ctype=text/javascript"></script>
 +
 
 +
</body>
 +
 
 
</html>
 
</html>
 
{{NCKU_Tainan/footer}}
 
{{NCKU_Tainan/footer}}

Latest revision as of 13:49, 3 November 2018

Software

Behind The Screen
Follow us

Contact us

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