Edwinlawisan (Talk | contribs) |
|||
(92 intermediate revisions by 4 users not shown) | |||
Line 1: | Line 1: | ||
{{Template:UI_Indonesia/css}} | {{Template:UI_Indonesia/css}} | ||
− | |||
<html lang="en"> | <html lang="en"> | ||
Line 10: | Line 9: | ||
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Lato"> | <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Lato"> | ||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> | <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> | ||
+ | <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> | ||
</head> | </head> | ||
Line 22: | Line 22: | ||
color: white; | color: white; | ||
} | } | ||
+ | |||
+ | img { | ||
+ | display: block; | ||
+ | margin-left: auto; | ||
+ | margin-right: auto; | ||
+ | } | ||
.mySlides {display: none} | .mySlides {display: none} | ||
− | .bgimg-3, .bgimg-4, .bgimg-5 { | + | .bgimg-1, .bgimg-2, .bgimg-3, .bgimg-4, .bgimg-5 { |
background-attachment: fixed; | background-attachment: fixed; | ||
background-position: center; | background-position: center; | ||
background-repeat: no-repeat; | background-repeat: no-repeat; | ||
background-size: cover; | background-size: cover; | ||
+ | } | ||
+ | |||
+ | .bgimg-1 { | ||
+ | background-image: url("https://static.igem.org/mediawiki/2018/0/07/T--UI_Indonesia--bacteria.jpg"); | ||
+ | min-height: 400px; | ||
+ | } | ||
+ | |||
+ | .bgimg-2 { | ||
+ | background-image: url("https://static.igem.org/mediawiki/2018/0/07/T--UI_Indonesia--bacteria.jpg"); | ||
+ | min-height: 400px; | ||
} | } | ||
Line 38: | Line 54: | ||
.bgimg-4 { | .bgimg-4 { | ||
− | background-image: url("https://static.igem.org/mediawiki/2018/ | + | background-image: url("https://static.igem.org/mediawiki/2018/0/07/T--UI_Indonesia--bacteria.jpg"); |
min-height: 400px; | min-height: 400px; | ||
} | } | ||
.bgimg-5 { | .bgimg-5 { | ||
− | background-image: url(""); | + | background-image: url("https://static.igem.org/mediawiki/2018/0/07/T--UI_Indonesia--bacteria.jpg"); |
min-height: 400px; | min-height: 400px; | ||
} | } | ||
@media only screen and (max-device-width: 1024px) { | @media only screen and (max-device-width: 1024px) { | ||
− | .bgimg- | + | .bgimg-3, .bgimg-4, .bgimg-5 { |
background-attachment: scroll; | background-attachment: scroll; | ||
} | } | ||
} | } | ||
− | . | + | .container { |
− | + | position: relative; | |
− | position: | + | display: block; |
− | + | margin-left: auto; | |
− | + | margin-right: auto; | |
− | + | ||
} | } | ||
− | . | + | .image { |
− | + | display: block; | |
− | + | width: 40%; | |
− | + | height: auto; | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
} | } | ||
− | . | + | .overlay { |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
position: absolute; | position: absolute; | ||
− | + | top: 0; | |
− | + | bottom: 0; | |
− | + | left: 0; | |
− | + | right: 0; | |
− | + | height: auto; | |
− | + | width: 40%; | |
− | + | opacity: 0; | |
− | + | transition: .5s ease; | |
− | + | background-color: #4CAF50; | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
display: block; | display: block; | ||
− | + | margin-left: auto; | |
+ | margin-right: auto; | ||
} | } | ||
− | . | + | .container:hover .overlay { |
− | + | opacity: 0.8; | |
} | } | ||
− | . | + | .text { |
− | + | color: white; | |
− | position: | + | font-size: 20px; |
+ | position: absolute; | ||
+ | top: 50%; | ||
+ | left: 50%; | ||
+ | -webkit-transform: translate(-50%, -50%); | ||
+ | -ms-transform: translate(-50%, -50%); | ||
+ | transform: translate(-50%, -50%); | ||
+ | text-align: center; | ||
} | } | ||
+ | <!---- MT NAVBAR ---> | ||
+ | .sidebar-nav { | ||
+ | padding: 9px 0; | ||
+ | } | ||
− | + | .dropdown-menu .sub-menu { | |
+ | left: 100%; | ||
+ | position: absolute; | ||
+ | top: 0; | ||
+ | visibility: hidden; | ||
+ | margin-top: -1px; | ||
+ | } | ||
− | + | .dropdown-menu li:hover .sub-menu { | |
− | + | visibility: visible; | |
− | + | } | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | .dropdown:hover .dropdown-menu { | |
− | + | display: block; | |
− | + | } | |
− | + | ||
− | + | ||
− | + | ||
− | + | .nav-tabs .dropdown-menu, | |
− | + | .nav-pills .dropdown-menu, | |
− | + | .navbar .dropdown-menu { | |
− | + | margin-top: 0; | |
− | + | } | |
− | + | ||
− | + | ||
− | + | ||
− | + | .navbar .sub-menu:before { | |
− | + | border-bottom: 7px solid transparent; | |
− | + | border-left: none; | |
− | + | border-right: 7px solid rgba(0, 0, 0, 0.2); | |
− | + | border-top: 7px solid transparent; | |
− | + | left: -7px; | |
− | + | top: 10px; | |
− | + | } | |
− | + | ||
− | + | ||
− | + | .navbar .sub-menu:after { | |
− | + | border-top: 6px solid transparent; | |
− | + | border-left: none; | |
− | + | border-right: 6px solid #fff; | |
− | + | border-bottom: 6px solid transparent; | |
− | + | left: 10px; | |
− | + | top: 11px; | |
− | + | left: -6px; | |
− | + | } | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | .dropdown>ul{ | |
− | + | background-color:#ddffdd; | |
− | + | } | |
− | + | .dropdown:hover{ | |
− | + | background-color:#9ff99f; | |
+ | } | ||
+ | .navbar-header:hover{ | ||
+ | background-color:#4CAF50; | ||
+ | } | ||
+ | .dropdown-menu>li>a:hover{ | ||
+ | background-color:#4CAF50; | ||
+ | } | ||
+ | .navbar-nav>li:hover{ | ||
+ | background-color:#4CAF50; | ||
+ | } | ||
− | + | .navbar-default{ | |
+ | background-color:#1F2421} | ||
+ | border-color:none; | ||
+ | } | ||
+ | .navbar-default .navbar-brand:focus, .navbar-default .navbar-brand:hover{ | ||
+ | color:white;} | ||
+ | .navbar-default .navbar-brand{ | ||
+ | color:white;} | ||
+ | .navbar-default .navbar-nav>li>a{ | ||
+ | color:white; | ||
+ | } | ||
− | + | .dropdown-menu{ | |
+ | background-color:#ddffdd; | ||
+ | } | ||
+ | .current{ | ||
+ | background-color:#4CAF50; | ||
+ | } | ||
+ | .navbar{ | ||
+ | margin:0px;border:0px;} | ||
+ | #myBtn { | ||
+ | display: none; | ||
+ | position: fixed; | ||
+ | bottom: 20px; | ||
+ | right: 30px; | ||
+ | z-index: 99; | ||
+ | font-size: 18px; | ||
+ | border: none; | ||
+ | outline: none; | ||
+ | background-color:transparent; | ||
+ | color: white; | ||
+ | cursor: pointer; | ||
+ | padding: 15px; | ||
+ | border-radius: 4px; | ||
+ | } | ||
− | + | #myBtn:hover { | |
+ | background-color: #555; | ||
+ | } | ||
+ | </style> | ||
+ | <body> | ||
+ | <button onclick="topFunction()" id="myBtn" title="Go to top"><img src="https://image.flaticon.com/icons/png/512/14/14747.png" style="width:50px;height:50px;"></button> | ||
+ | <!-- Navbar --> | ||
+ | <nav class="navbar navbar-default"> | ||
+ | <div class="navbar-inner"> | ||
+ | <div class="container-fluid"> | ||
+ | <div class="navbar-header"> | ||
+ | <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar"> | ||
+ | <span class="icon-bar"></span> | ||
+ | <span class="icon-bar"></span> | ||
+ | <span class="icon-bar"></span> | ||
+ | </button> | ||
+ | <a class="navbar-brand" href="https://2018.igem.org/Team:UI_Indonesia">Home</a> | ||
+ | </div> | ||
+ | <div class="collapse navbar-collapse" id="myNavbar"> | ||
+ | <ul class="nav navbar-nav navbar-right"> | ||
+ | <li class="dropdown navbar-project"> | ||
+ | <a href="https://2018.igem.org/Team:UI_Indonesia/Project">Project<span class="caret"></span></a> | ||
+ | <ul class="dropdown-menu"> | ||
+ | <li><a href="https://2018.igem.org/Team:UI_Indonesia/Project#">Overview</a></li> | ||
+ | <li><a href="https://2018.igem.org/Team:UI_Indonesia/Project#ourproject">Our Project</a></li> | ||
+ | <li><a href="https://2018.igem.org/Team:UI_Indonesia/Project#resultsanddiscuccions">Results and Discussions</a></li> | ||
+ | </ul> | ||
+ | </li> | ||
+ | <li class="navbar-parts"><a href="https://2018.igem.org/Team:UI_Indonesia/Parts">Parts</a></li> | ||
+ | <li class="navbar-safety"><a href="https://2018.igem.org/Team:UI_Indonesia/Safety">Safety</a></li> | ||
+ | <li class="dropdown navbar-interlab current"> | ||
+ | <a href="https://2018.igem.org/Team:UI_Indonesia/InterLab">InterLab<span class="caret"></span></a> | ||
+ | <ul class="dropdown-menu"> | ||
+ | <li><a href="https://2018.igem.org/Team:UI_Indonesia/InterLab#intro">Introduction</a></li> | ||
+ | <li><a href="https://2018.igem.org/Team:UI_Indonesia/InterLab#materials">Materials and Equipment</a></li> | ||
+ | <li><a href="https://2018.igem.org/Team:UI_Indonesia/InterLab#methods">Methods</a></li> | ||
+ | <li><a href="https://2018.igem.org/Team:UI_Indonesia/InterLab#results">Results and Discussions</a></li> | ||
+ | <li><a href="https://2018.igem.org/Team:UI_Indonesia/InterLab#conclusions">Conclusions</a></li> | ||
+ | </ul> | ||
+ | </li> | ||
+ | <li class="navbar-model"><a href="https://2018.igem.org/Team:UI_Indonesia/Model">Model</a></li> | ||
+ | <li class="dropdown navbar-humanpractice"> | ||
+ | <a href="https://2018.igem.org/Team:UI_Indonesia/Human_Practices">Human Practices<span class="caret"></span></a> | ||
+ | <ul class="dropdown-menu"> | ||
+ | <li><a href="https://2018.igem.org/Team:UI_Indonesia/Human_Practices">Integrated Human Practice</a></li> | ||
+ | <li><a href="https://2018.igem.org/Team:UI_Indonesia/Public_Engagement">Education and Public Engagement</a></li> | ||
+ | <li><a href="https://2018.igem.org/Team:UI_Indonesia/Human_Practices#catalogue">Human Practice Catalogue</a></li> | ||
+ | </ul> | ||
+ | </li> | ||
+ | <li class="navbar-improve"><a href="https://2018.igem.org/Team:UI_Indonesia/Improve">Improve</a></li> | ||
+ | <li class="navbar-team"><a href="https://2018.igem.org/Team:UI_Indonesia/Team">Team</a></li> | ||
+ | <li class="navbar-collaborations"><a href="https://2018.igem.org/Team:UI_Indonesia/Collaborations">Collaborations</a></li> | ||
+ | <li class="dropdown navbar-attributions"> | ||
+ | <a href="https://2018.igem.org/Team:UI_Indonesia/Attributions">Attributions<span class="caret"></span></a> | ||
+ | <ul class="dropdown-menu"> | ||
+ | <li><a href="https://2018.igem.org/Team:UI_Indonesia/MedalCriteria">Medal Criteria</a></li> | ||
+ | </ul> | ||
+ | </li> | ||
+ | </ul> | ||
+ | </div> | ||
+ | </div> | ||
+ | </div> | ||
+ | </nav> | ||
− | < | + | <!-- Container (Introduction Section) --> |
− | + | ||
− | < | + | <!-------------------------TEST-------------------------------------------> |
− | < | + | <style> |
− | + | .headerTest{ | |
− | + | text-align: right !important; | |
− | + | font-size: 100px !important; | |
− | + | line-height: 100px !important; | |
− | + | text-transform: uppercase; | |
− | + | font-family: sans-serif !important; | |
− | + | font-weight: 700 !important; | |
− | + | color:#4CAF50; | |
+ | } | ||
+ | .header2ndTest{ | ||
+ | text-align: right !important; | ||
+ | font-size: 50px !important; | ||
+ | line-height: 50px !important; | ||
+ | text-transform: uppercase; | ||
+ | font-family: sans-serif !important; | ||
+ | font-weight: 700 !important; | ||
+ | color:#216869; | ||
+ | } | ||
+ | @media only screen and (max-width: 600px) and (min-width: 100px){ | ||
+ | .headerTest{ | ||
+ | font-size: 50px !important; | ||
+ | line-height: 50px !important; | ||
+ | } | ||
+ | .header2ndTest{ | ||
+ | font-size: 30px !important; | ||
+ | line-height: 30px !important; | ||
+ | color:#9CC5A1; | ||
+ | } | ||
+ | } | ||
+ | .panel-default{ | ||
+ | border:none; | ||
+ | background-color:white; | ||
+ | border-left:4px solid #9CC5A1; | ||
+ | } | ||
+ | .panel-default>.panel-heading{ | ||
+ | background-color:white; | ||
+ | } | ||
+ | .panel-group .panel-heading+.panel-collapse>.list-group, .panel-group .panel-heading+.panel-collapse>.panel-body{ | ||
+ | border:none; | ||
+ | } | ||
+ | .panel-title{ | ||
+ | text-align: center !important; | ||
+ | font-size: 30px !important; | ||
+ | line-height: 30px !important; | ||
+ | text-transform: uppercase; | ||
+ | font-family: sans-serif !important; | ||
+ | font-weight: 700 !important; | ||
+ | color:#4CAF50; | ||
+ | } | ||
− | + | h5{ | |
− | + | font-size:18px; | |
− | + | } | |
− | + | </style> | |
− | </ | + | <!----------------HEADER----------> |
− | + | <div class="w3-content w3-container w3-padding-48"></div> | |
− | <!-- | + | <div class="w3-content w3-container w3-padding-64" style="border-right:4px solid #9CC5A1;border-bottom:4px solid #9CC5A1;"> |
− | <div class=" | + | <div class="headerTest">Interlab</div> |
− | <div class="w3- | + | <div class="header2ndTest">Overview</div> |
− | < | + | |
</div> | </div> | ||
− | </div> | + | |
+ | <!-------------------Accordion---> | ||
+ | |||
+ | <div class="w3-content w3-container" style="padding:0px;"> | ||
+ | <div class="panel-group" id="accordion"> | ||
+ | <div class="panel panel-default"> | ||
+ | <div class="panel-heading"> | ||
+ | <h4 class="panel-title"> | ||
+ | <a data-toggle="collapse" data-parent="#accordion" href="#collapse1">Introduction</a> | ||
+ | </h4> | ||
+ | </div> | ||
+ | <div id="collapse1" class="panel-collapse collapse"> | ||
+ | <div class="panel-body"> | ||
+ | <h5>In the field of engineering, repeatable and reproducible measurements are important to obtain valid and reliable results. For past several years, iGEM Measurement Committee has been working on this issue by encouraging registered iGEM 2018 teams to participate in annual InterLab study. | ||
+ | InterLab study is mainly focused on fluorescence measurements as one of widely utilized protocols in synthetic biology studies. | ||
+ | <br> | ||
+ | Therefore, in this year’s InterLab study, participating 2018 iGEM teams are encouraged to help iGEM Measurement Committee in investigating whether more direct method in expressing total cell number for fluorescence calculation, such as absolute cell count or colony-forming units (CFUs), are better than OD to reduce variability in bulk measurement. We proudly announce our participation in 5<sup>th</sup> InterLab study for the first time ever, in the hope that our results may contribute to the improvements in synthetic biology. Our members contributing in this InterLab study are shown in <b>Figure 1</b>.</h5> | ||
− | <div class="w3- | + | <br> |
− | + | <div class="w3-row w3-center"> | |
− | </div> | + | <img src="https://static.igem.org/mediawiki/2018/0/0d/T--UI_Indonesia--Figure1Interlab.jpeg" class="w3-image" width="500"> |
− | + | <h6><b>Figure 1.</b> iGEM UI 2018 team members contributing in 5<sup>th</sup> InterLab study: (<b>top row, left to right</b>) Valdi Ven Japranata, Andrea Laurentius, Ihya Fakhrurizal Amin; (<b>bottom row, left to right</b>) Muhammad Ikhsan, Luthfian Aby Nurachman, Muhammad Iqbal Adi Pratama.</h6></div> | |
− | < | + | </div> |
− | <div class=" | + | </div> |
− | + | </div> | |
− | + | <div class="panel panel-default"> | |
+ | <div class="panel-heading"> | ||
+ | <h4 class="panel-title"> | ||
+ | <a data-toggle="collapse" data-parent="#accordion" href="#collapse2">Materials and Equipment</a> | ||
+ | </h4> | ||
+ | </div> | ||
+ | <div id="collapse2" class="panel-collapse collapse"> | ||
+ | <div class="panel-body"> | ||
+ | <h5>Some of the materials for this study are obtained from 2018 DNA Distribution Kit. Other materials and equipment are provided by Institute of Human Virology and Cancer Biology (IHVCB), UI.<br> | ||
+ | <br> | ||
+ | <b><i>Materials from 2018 DNA Distribution Kit</i></b> | ||
+ | <ul> | ||
+ | <li>LUDOX CL-X (45% colloidal silica suspension) stock</li> | ||
+ | <li>Microspheres (silica beads suspension) stock ~ 4.7 x 10<sup>8</sup> microspheres</li> | ||
+ | <li>Sodium fluorescein stock</li> | ||
+ | <li>Devices (parts in pSB1C3 plasmid backbone, all dried in Distribution Kit Plate): negative control, positive control, test device 1, test device 2, test device 3, test device 4, test device 5, and test device 6.</li></ul> | ||
+ | <br><b><i>Materials and equipment provided by IHVCB, UI</i></b> | ||
+ | <ul> | ||
+ | <li>ddH<sub>2</sub>O</li> | ||
+ | <li>1x phosphate buffered saline (PBS), pH 7.4-7.6</li> | ||
+ | <li>96-well plate (clear plate with flat bottom)</li> | ||
+ | <li>96-well plate reader (<b>GloMax<sup>®</sup>– Multi Detection System</b>, <b>Figure 2</b>). <b>Specifications</b>: can measure both absorbance and fluorescence, no settings for pathlength correction and temperature adjustment, has four installed filters and two customizable filter holders in six-position filter wheel, reads the samples from top of the plate</li> | ||
+ | <li>Competent cells of <i>Escherichia coli</i> strain DH5α</li> | ||
+ | <li>Luria-Bertani (LB) media, liquid and agar</li> | ||
+ | <li>Chloramphenicol (dissolved in absolute ethanol at concentration of 25 mg/mL, when added into LB media it should be at ratio 1:1000)</li> | ||
+ | <li>50 ml centrifuge tubes</li> | ||
+ | <li>Incubator (set at 37<sup>o</sup>C)</li> | ||
+ | <li>1.5 ml microtubes</li> | ||
+ | <li>Bucket with ice</li> | ||
+ | <li>Micropipettes and tips</li><ul> | ||
+ | <br></h5> | ||
+ | <div class="w3-row w3-center"> | ||
+ | <img src="https://static.igem.org/mediawiki/2018/d/d3/T--UI_Indonesia--Figure2Interlab.jpeg" class="w3-image" width="350"> | ||
+ | <h6><b>Figure 2.</b> Our 96-well plate reader (GloMax<sup>®</sup>- Multi Detection System).</h6></div> | ||
+ | </div> | ||
+ | </div> | ||
+ | </div> | ||
+ | <div class="panel panel-default"> | ||
+ | <div class="panel-heading"> | ||
+ | <h4 class="panel-title"> | ||
+ | <a data-toggle="collapse" data-parent="#accordion" href="#collapse3">Methods</a> | ||
+ | </h4> | ||
+ | </div> | ||
+ | <div id="collapse3" class="panel-collapse collapse"> | ||
+ | <div class="panel-body"> | ||
+ | <h5><b><i>Safety Precautions</i></b></h5> | ||
+ | <br> | ||
+ | <div class="w3-row w3-center"> | ||
+ | <img src="https://static.igem.org/mediawiki/2018/6/60/T--UI_Indonesia--Figure3Interlab.jpeg" class="w3-image" width="500"> | ||
+ | <h6><b>Figure 3.</b> (<b>left</b>) Fully-worn personal protective equipment (PPE) and (<b>right</b>) biosafety cabinet (BSC) used in our laboratory.</h6></div> | ||
+ | <h5>During laboratory works, we took extra precautions to minimize potential harm. We wore personal protective equipment (PPE) such as laboratory safety gowns with head cover, masks, and gloves (<b>Figure 3, left</b>). For procedures that require aseptic technique such as bacterial inoculation, we conducted the experiments in biosafety cabinet (BSC) to prevent contamination (<b>Figure 3, right</b>). We also managed every infectious waste according to our laboratory’s standard operating procedures, such as decontaminating all media used for bacterial growth with 10% sodium hypochlorite overnight before being thrown into appropriate container and autoclaving them (121<sup>o</sup>C, 20 minutes) along with other infectious wastes. In addition, to ensure validity of our results, we used same instrument settings, 96-well plates, and volumes of sample added to the plates in entire protocol whenever possible.</h5> | ||
+ | <br> | ||
+ | <h5><b><i>Part I: Calibration</i></b></h5> | ||
+ | <h5>Before we proceeded to Part II and III of the protocol, we had made three calibrations as follows: | ||
+ | <ul><li><b>Calibration #1</b>: this calibration is aimed to obtain a <b>conversion factor</b> to transform absorbance at 600 nm wavelength (Abs<sub>600</sub> data from plate reader into comparable OD<sub>600</sub> as would be measured with spectrophotometer due to Abs<sub>600</sub> data are volume dependent). First, we made four replicates of LUDOX CL-X and ddH<sub>2</sub>O in 96-well plate (each well contains 100 uL volume). We then measured Abs<sub>600</sub> of the samples and recorded them. The Abs<sub>600</sub> data were calculated for their respective mean and then subtracted each other to obtain corrected Abs<sub>600</sub>. OD<sub>600</sub> measured with spectrophotometer (from reference) was divided with corrected Abs<sub>600</sub> to get the conversion factor.</li></ul></h5> | ||
+ | <br> | ||
+ | <div class="w3-row w3-center"> | ||
+ | <img src="https://static.igem.org/mediawiki/2018/9/92/T--UI_Indonesia--figure4.png" class="w3-image" width="700"> | ||
+ | <h6><b>Figure 4.</b> Calibration #2 workflow. (Source: iGEM 2018 InterLab Protocol)</h6></div> | ||
+ | <h5><ul><li><b>Calibration #2</b>: this calibration is aimed to obtain <b>particle</b> (i.e. microspheres with similar properties to cells) <b>standard curve</b> so it can be used to estimate the cells number in given samples from their Abs<sub>600</sub>. First, we made microspheres stock solution by adding 904 uL ddH<sub>2</sub>O to vortexed 96 uL microspheres with known concentration. We prepared 100 uL ddH<sub>2</sub>O in each well from second until twelfth column, first until fourth row of 96-well plate. We also created four replicates from microspheres stock solution in the first column (each well contains 200 uL solution). We then made a serial dilution for each replicate by transferring 100 uL from first into second column, mixing it thoroughly, and so on until we discarded 100 uL from eleventh column (i.e. twelfth column only contain pure ddH<sub>2</sub>O). As soon as each well had been remixed, Abs<sub>600</sub> of the samples were measured and recorded in Excel. (<b>Figure 4</b>)</li></ul></h5> | ||
+ | <br> | ||
+ | <div class="w3-row w3-center"> | ||
+ | <img src="https://static.igem.org/mediawiki/2018/7/78/T--UI_Indonesia--figure5.png" class="w3-image" width="700"> | ||
+ | <h6><b>Figure 5.</b> Calibration #3 workflow. (Source: iGEM 2018 InterLab Protocol)</h6></div> | ||
+ | <h5><ul><li><b>Calibration #3</b>: this calibration is aimed to obtain <b>fluorescence</b> (i.e. fluorescein with similar properties to GFP) <b>standard curve</b> so it can be used to estimate fluorescence of cell-based measurements (in Part II) from equivalent fluorescein concentration. First, we made 1x fluorescein stock solution (10 uM) by diluting spun-down fluorescein in 1x PBS with appropriate volume. We then created four replicates of 1x fluorescein stock solution and serial dilution in 96-well plate similar with Calibration #2 protocol. Fluorescence for each sample were measured with “BLUE” settings in our plate reader: 490 nm excitation, and 510-570 nm emission. The data obtained were recorded in Excel. (<b>Figure 5</b>)</li></ul></h5> | ||
+ | <br> | ||
+ | <h5><b><i>Part II: Cell Measurements</i></b></h5> | ||
+ | <h5>This part of protocol is aimed to measure Abs<sub>600</sub> and fluorescence of transformed <i>Escherichia coli</i> strain DH5α with devices provided from 2018 DNA Distribution Kit Plate. All devices are in plasmid pSB1C3, which carries a gene for chloramphenicol resistance. iGEM Registry of Standard Biological Parts (<a href="http://parts.igem.org">link</a>) provides detailed information about devices being transformed in this study (<b>Figure 6</b>).</h5> | ||
+ | <br> | ||
+ | <div class="w3-row w3-center"> | ||
+ | <img src="https://static.igem.org/mediawiki/2018/c/c2/T--UI_Indonesia--Figure6Interlab.jpeg" class="w3-image" width="700"> | ||
+ | <h6><b>Figure 6.</b> Details about devices used in 2018 InterLab Study: (<b>top row, left to right</b>) positive control, negative control; (<b>middle row, left to right</b>) Test Device 1-3; (<b>bottom row, left to right</b>) Test Device 4-6. (Source: parts.igem.org) </h6></div> | ||
+ | <h5><ul><li>Positive control contains promoter J23151 with GFP construct (part number: BBa_I20270).</li> | ||
+ | <li>Negative control only contains TetR repressible promoter without GFP construct (part number: BBa_R0040).</li> | ||
+ | <li>Test device 1 contains promoter J23101 with GFP construct (part number: BBa_J364000).</li> | ||
+ | <li>Test device 2 contains promoter J23106 with GFP construct (part number: BBa_J364001).</li> | ||
+ | <li>Test device 3 contains promoter J23117 with GFP construct (part number: BBa_J364002).</li> | ||
+ | <li>Test device 4 contains promoter J23100 with GFP construct (part number: BBa_J364007).</li> | ||
+ | <li>Test device 5 contains promoter J23104 with GFP construct (part number: BBa_J364008).</li> | ||
+ | <li>Test device 6 contains promoter J23116 with GFP construct (part number: BBa_J364009).</li> | ||
+ | </h5> | ||
+ | <br> | ||
+ | <div class="w3-row w3-center"> | ||
+ | <img src="https://static.igem.org/mediawiki/2018/c/cb/T--UI_Indonesia--figure7.png" class="w3-image" width="700"> | ||
+ | <h6><b>Figure 7.</b> Cell measurements workflow. (Source: iGEM 2018 InterLab Protocol)</h6></div> | ||
+ | <br> | ||
+ | <h5>The workflow for this part is shown in <b>Figure 7</b>. First, we transformed each device into <i>Escherichia coli</i> strain DH5α according to our laboratory’s protocol (full version please refer to this <a href="https://static.igem.org/mediawiki/2018/8/81/T--UI_Indonesia--InterLabCompleteProtocolforCellTransformation.pdf" style="color:blue">file</a>) and subsequently plated into different LB agar with chloramphenicol (Cam). After overnight incubation at 37<sup>o</sup>C, two colonies from each transformation plates were inoculated in 10 mL LB liquid medium + Cam and let to be grown overnight at 37<sup>o</sup>C and 220 rotations per minute (rpm). On the next day, we diluted 0.5 mL of each culture in 4.5 mL LB + Cam (ratio 1:10) and measured for their respective Abs<sub>600</sub>, along with Abs<sub>600</sub> of LB + Cam (we created two replicates to be measured for each sample). Using obtained Abs<sub>600</sub> data, the cultures were further diluted to target Abs<sub>600</sub> 0.02 in final volume of 12 mL LB + Cam in different 50 mL centrifuge tubes covered with foil. From each centrifuge tube, 500 uL diluted cultures were sampled and measured for Abs<sub>600</sub> and fluorescence, while the rest of diluted cultures were incubated at 37<sup>o</sup>C, 220 rpm until next six hours to be sampled and measured again. Samples for Abs<sub>600</sub> and fluorescence measurements were put in 96-well plates (each well contains 100 uL volume) according to layout shown in <b>Figure 8</b>, under same conditions as previous calibration in Part I of the protocol.</h5> | ||
+ | <br> | ||
+ | <div class="w3-row w3-center"> | ||
+ | <img src="https://static.igem.org/mediawiki/2018/5/56/T--UI_Indonesia--figure8.png" class="w3-image" width="600"> | ||
+ | <h6><b>Figure 8.</b> Layout for Abs<sub>600</sub> and fluorescence measurement. (Source: iGEM 2018 InterLab Protocol)</h6></div> | ||
+ | <br> | ||
+ | <h5><b><i>Part III: Colony Forming Units (CFUs)</i></b></h5> | ||
+ | <h5>This last part of protocol is aimed to convert OD<sub>600</sub> (obtained after transformation of Abs<sub>600</sub> from Part II with conversion factor from Part I) into CFUs. The significance of this part is that CFU counts are directly correlated with cell concentration in given volume of culture (i.e. viable cell counts per mL). In this part, we used two colonies from each positive and negative control (four in total). This part consists of three steps as follows:</h5> | ||
+ | <br> | ||
+ | <div class="w3-row w3-center"> | ||
+ | <img src="https://static.igem.org/mediawiki/2018/4/4f/T--UI_Indonesia--figure9.png" class="w3-image" width="700"> | ||
+ | <h6><b>Figure 9.</b> Layout of 96-well plate used for starting sample preparation. (Source: iGEM 2018 InterLab Protocol)</h6></div> | ||
+ | <br> | ||
+ | <h5><ul><li><b>Step #1: Preparation of starting sample</b>. First, we sampled 25 uL of each positive and negative overnight cultures and diluted them with 175 uL fresh LB + Cam (eight-fold dilution). We then measured their respective Abs<sub>600</sub> along with blank LB + Cam according to layout shown in <b>Figure 9, red inset</b>. Using this data, their OD<sub>600</sub> were calculated by multiplying each of them with conversion factor (obtained from Part I). The overnight cultures were further diluted to target OD<sub>600</sub> 0.1 using previous calculated OD<sub>600</sub> data in final volume of 1 mL LB + Cam (these are “starting samples”). We then created triplicates of each starting sample (twelve in total) and checked for their OD<sub>600</sub> if they were 0.1, using measurement with same 96-well plate (<b>Figure 9, green inset</b>).</li></ul></h5> | ||
+ | <br> | ||
+ | <div class="w3-row w3-center"> | ||
+ | <img src="https://static.igem.org/mediawiki/2018/c/c6/T--UI_Indonesia--Figure10Interlab.jpeg" class="w3-image" width="700"> | ||
+ | <h6><b>Figure 10.</b> Suggested workflow for serial dilution of starting sample. (Source: iGEM 2018 InterLab Protocol).</h6></div> | ||
+ | <br> | ||
+ | <h5><ul><li><b> Step #2: Serial dilution of starting sample</b>. Originally, we wanted to conduct exact workflow as shown in <b>Figure 10</b>. However, we realized the maximum capacity of our microtubes was 1.5 mL so we could not aliquot 1.9 mL LB + Cam in the tubes. Therefore, to compensate that issue, we first prepared 36 microtubes with 950 uL LB + Cam each, 24 microtubes with 900 uL LB + Cam each, and 36 LB agar + Cam. For first three dilutions, we halved the volume of LB + Cam in “Dilution 1” until “Dilution 3” tubes and the added volume of starting sample (50 uL into next 950 uL LB + Cam) so the net dilution factor would be the same (20-fold). Finally, we took 100 uL from each last three dilutions to be spread on different LB agar plate + Cam. The plates were then incubated overnight at 37<sup>o</sup>C and the colonies formed on each plate were counted after 18-20 hours of growth.</li></ul></h5> | ||
+ | <br> | ||
+ | <h5><ul><li><b>Step #3: Calculation of CFU/mL for OD<sub>600<sub> 0.1</b>. This calculation assumes that one bacterial cell gives rise to one colony. For OD<sub>600</sub> 0.1, CFU/mL culture can be calculated by multiplying number of colonies (we used plates with less than 300 colonies in Step #2) with their respective final dilution factors.</li></ul></h5> | ||
+ | </div> | ||
+ | </div> | ||
+ | </div> | ||
+ | <div class="panel panel-default"> | ||
+ | <div class="panel-heading"> | ||
+ | <h4 class="panel-title"> | ||
+ | <a data-toggle="collapse" data-parent="#accordion" href="#collapse4">Results and Discussions</a> | ||
+ | </h4> | ||
+ | </div> | ||
+ | <div id="collapse4" class="panel-collapse collapse"> | ||
+ | <div class="panel-body"> | ||
+ | <h5> For complete raw data of calibrations (in Part I) and Abs<sub>600</sub> and fluorescence measurement (in Part II), please refer to our Excel file attached <a href="https://static.igem.org/mediawiki/2018/5/5d/T--UI_Indonesia--InterLab.xlsx" style="color:blue">here</a>.</h5> | ||
+ | <br> | ||
+ | <h5><b><i>Part I: Calibration</i></b></h5> | ||
+ | <div class="w3-row w3-center"> | ||
+ | <h6><b>Table 1.</b> OD<sub>600</sub> reference point results.</h6> | ||
+ | <img src="https://static.igem.org/mediawiki/2018/5/5c/T--UI_Indonesia--Table1Interlab.jpeg" class="w3-image" width="350"> | ||
+ | </div> | ||
+ | <br> | ||
+ | <h5>When measured with our plate reader, mean Abs<sub>600</sub> of LUDOX CL-X was 0.156 and mean Abs<sub>600</sub> of ddH<sub>2</sub>O was 0.096 (Calibration #1). By subtracting the means, we obtained the corrected Abs<sub>600</sub> value was 0.059. After dividing the reference OD<sub>600</sub> (0.063, provided in Excel file) with corrected Abs<sub>600</sub>, we found that the conversion factor was 1.059 (<b>Table 1</b>). In other words, when we wanted to transform Abs<sub>600</sub> value measured by our plate reader into OD<sub>600</sub>, we must multiply the Abs<sub>600</sub> data with 1.059.</h5> | ||
+ | <br> | ||
+ | <div class="w3-row w3-center"> | ||
+ | <img src="https://static.igem.org/mediawiki/2018/4/4a/T--UI_Indonesia--Figure11aInterlab.jpeg" class="w3-image" width="700"> | ||
+ | <img src="https://static.igem.org/mediawiki/2018/e/e5/T--UI_Indonesia--Figure11bInterlab.jpeg" class="w3-image" width="700"> | ||
+ | <h6><b>Figure 11.</b> Particle standard curve results.</h6> | ||
+ | </div> | ||
+ | <br> | ||
+ | <h5> Particle standard curves we obtained after conducting Calibration #2 are shown in <b>Figure 11</b>. The equation for <b>particle standard curve</b> was <b>y = 3*10<sup>-9</sup>x + 0.078 (R<sup>2</sup> = 0.9945)</b> and for <b>particle standard curve in log scale</b> was <b>y = 6*10<sup>-4</sup>x<sup>0.3536</sup></b> <b>(R<sup>2</sup> = 0.8819)</b>, with x is particle count per 100 uL sample and y is Abs<sub>600</sub>. As shown in the graphs, the values measured form a straight line and the slope is close to 1:1 until it saturates at low concentration of microspheres.</h5> | ||
+ | <h5>At medium-high concentrations of microspheres (i.e. from 7.35*10<sup>6</sup> until 1.18*10<sup>8</sup> particles/100 uL), we found the <b>mean particle concentration after divided by their respective Abs<sub>600</sub></b> was <b>2.08*10<sup>8</sup> particles/100 uL sample</b>. We would later use this value to estimate molecules of equivalent fluorescein (MEFL) per particle in Part II (i.e. in this case, the particles were bacterium cells, and microspheres were used as a representation of the cells). We used medium-high concentrations value because they are less likely to be affected by pipetting error or saturation (the same principle applies to fluorescein which will be discussed later).</h5> | ||
+ | <br> | ||
+ | <div class="w3-row w3-center"> | ||
+ | <img src="https://static.igem.org/mediawiki/2018/7/7d/T--UI_Indonesia--figure12.png" class="w3-image" width="700"> | ||
+ | <img src="https://static.igem.org/mediawiki/2018/1/1d/T--UI_Indonesia--Figure12bInterlab.jpeg" class="w3-image" width="700"> | ||
+ | <h6><b>Figure 12.</b> Fluorescein standard curve results.</h6> | ||
+ | </div> | ||
+ | <br> | ||
+ | <h5>Our results for fluorescein standard curve after conducting Calibration #3 are shown in <b>Figure 12</b>. The equation for <b>fluorescein standard curve</b> was <b>y = 139561x + 18723</b> <b>(R<sup>2</sup> = 0.9957)</b> and for <b>fluorescein standard curve in log scale</b> was <b>y = 176245x<sup>0.8822</sup></b> <b>(R<sup>2</sup> = 0.9985)</b>, with x is fluorescein concentration in uM and y is fluorescence in arbitrary units (a.u.). As shown in the graphs, the values measured also form straight line and the slope is close to 1:1.</h5> | ||
+ | <h5>At medium-high fluorescein concentrations of fluorescein (i.e. from 0.31 until 5 uM), we found the <b>mean concentration of fluorescein after divided by their respective fluorescence level</b> was <b>5.84*10<sup>-6</sup> uM/a.u.</b> When this mean value was converted into MEFL (MEFL/uM fluorescein value is 6.02*10<sup>12</sup>, provided in the Excel), we found that <b>MEFL per arbitrary unit</b> was <b>3.52*10<sup>7</sup></b>. We would later use these values to convert raw data obtained in Part II into fluorescence per OD (uM fluorescein/OD) and fluorescence per particle (MEFL/particle).</h5> | ||
+ | <br> | ||
+ | <h5><b><i> Part II: Cell Measurements</i></b></h5> | ||
+ | <div class="w3-row w3-center"> | ||
+ | <h6><b>Table 2</b>. Mean Abs<sub>600</sub> for 1:10 diluted transformed devices. *= calculated by 240/(∆Abs<sub>600</sub>*10) where 240 is target Abs<sub>600</sub>*target volume (12mL) and 10 is dilution factor used. TD = test device</h6> | ||
+ | <img src="https://static.igem.org/mediawiki/2018/6/63/T--UI_Indonesia--Table2Interlab.jpeg" class="w3-image" width="700"> | ||
+ | </div> | ||
+ | <br> | ||
+ | <h5>First, we created samples of 1:10 dilution from each transformed device and checked for their respective Abs<sub>600</sub> by creating two replicates from each diluted sample. The absorbance result is shown in <b>Table 2, second column</b>. Using the dilution formula, we obtained volume of each initial culture to be added into fresh LB + Cam to target Abs<sub>600</sub> approximately 0.02 and final volume of 12 mL (<b>Table 2, fourth and fifth column</b>). To ensure Abs<sub>600</sub> of the newly-made dilutions were about 0.02, we performed Abs<sub>600</sub> measurement along with their fluorescence at t = 0 hour. The rest of dilutions were then incubated and after 6 hours, their Abs<sub>600</sub> and fluorescence were measured again.</h5> | ||
+ | <br> | ||
+ | <div class="w3-row w3-center"> | ||
+ | <img src="https://static.igem.org/mediawiki/2018/5/56/T--UI_Indonesia--Figure13Interlab.jpeg" class="w3-image" width="700"> | ||
+ | <h6><b>Figure 13</b>. Fluorescence per OD result.</h6> | ||
+ | </div> | ||
+ | <br> | ||
+ | <div class="w3-row w3-center"> | ||
+ | <img src="https://static.igem.org/mediawiki/2018/7/75/T--UI_Indonesia--Figure14Interlab.jpeg" class="w3-image" width="700"> | ||
+ | <h6><b>Figure 14</b>. Fluorescence per particle result.</h6> | ||
+ | </div> | ||
+ | <br> | ||
+ | <h5>Results of fluorescence per OD and per bacterium cell particle are shown in <b>Figure 13</b> and <b>Figure 14</b>, respectively. When compared, both graphs look similar in pattern, however fluorescence of tested devices were differed from each other. Therefore, it can be implied that some promoters may have different activity in expressing its downstream genes (in this case, GFP). The data at t = 0 hour suggested that promoter J23101 (Test Device 1), J23100 (Test Device 4), and J23104 (Test Device 5) have higher activity in expressing GFP, resulting in higher fluorescence per OD and per particle compared to positive control. Furthermore, fluorescence observed in Test Device 2 and 6 were comparable with positive control, implying that promoter J23106 (Test Device 2) and J23116 (Test Device 6) have similar activity in expressing GFP with promoter J23151 (positive control). On the other hand, there was no fluorescence observed in Test Device 3 (similar with negative control that does not have GFP construct). It is likely that promoter J23117 (Test Device 3) failed to initiate GFP expression.</h5> | ||
+ | <h5>At t = 6 hour, declines in fluorescence per OD and per particle were observed in positive control, Test Device 2, Test Device 4, and Test Device 6, compared with t = 0 hour. A probable explanation for this phenomenon is that GFP expression mediated by promoters carried by these devices is limited by cell density (i.e. no additional GFP expression when cells in a sample has reached a certain density), or cells in the culture underwent cessation. Therefore, when total fluorescence was divided by the cell number in given sample, fluorescence per OD and per particle will be decreased. Exception for Test Device 1 and 5, increase in fluorescence per OD and per particle were observed, suggesting that promoter J23101 and J23104 may be strong promoters that actively express their downstream genes despite high density of cells.</h5> | ||
+ | <br> | ||
+ | <h5><b><i> Part III: Colony Forming Units (CFUs)</i></b></h5> | ||
+ | <div class="w3-row w3-center"> | ||
+ | <h6><b>Table 3</b>. Mean Abs<sub>600</sub> for 1:8 diluted transformed devices. * = calculated by 100/(∆OD<sub>600</sub>*8) (in uL), where 100 is target OD<sub>600</sub> (0.1)*target volume (1 mL) and 8 is dilution factor used.</h6> | ||
+ | <img src="https://static.igem.org/mediawiki/2018/f/f5/T--UI_Indonesia--Table3Interlab.jpeg" class="w3-image" width="700"> | ||
+ | </div> | ||
+ | <br> | ||
+ | <div class="w3-row w3-center"> | ||
+ | <h6><b>Table 4</b>. OD<sub>600</sub> measurement from starting samples.</h6> | ||
+ | <img src="https://static.igem.org/mediawiki/2018/d/d2/T--UI_Indonesia--Table4Interlab.jpeg" class="w3-image" width="700"> | ||
+ | </div> | ||
+ | <br> | ||
+ | <h5>We created 1:8 dilution from two positive control samples and two negative control samples (obtained after overnight incubation in Part II) and measured for their Abs<sub>600</sub> (<b>Table 3, second column</b>). Next, we converted Abs<sub>600</sub> data into OD<sub>600</sub> by multiplying them with 1.059 (i.e. conversion factor obtained from Part I). From this, we calculated for overnight culture volume to be added into fresh LB + Cam to target OD<sub>600</sub> 0.1 and final volume 1 mL using dilution formula (<b>Table 3, fifth and sixth column</b>). We then checked Abs<sub>600</sub> from newly-made dilutions whether their OD<sub>600</sub> were around 0.1 after subtracted by blank. The results is shown in <b>Table 4</b>.</h5> | ||
+ | <br> | ||
+ | <div class="w3-row w3-center"> | ||
+ | <img src="https://static.igem.org/mediawiki/2018/9/9f/T--UI_Indonesia--Figure15Interlab.jpeg" class="w3-image" width="700"> | ||
+ | <h6><b>Figure 15</b>. Representation of dilutions grown in LB + Cam agar. (<b>Top row, from left to right</b>) 8 x 10<sup>4</sup>, 8 x 10<sup>5</sup>, and 8 x 10<sup>6</sup> dilution of positive control. (<b>Bottom row, from left to right</b>) 8 x 10<sup>4</sup>, 8 x 10<sup>5</sup>, and 8 x 10<sup>6</sup> dilution of negative control.</h6> | ||
+ | </div> | ||
+ | <br> | ||
+ | <div class="w3-row w3-center"> | ||
+ | <h6><b>Table 5.</b> Colony count results. TNTC = too numerous to count (>300 colonies). N/A = not calculated due to out of optimal 50-200 colony count range.</h6> | ||
+ | <img src="https://static.igem.org/mediawiki/2018/f/f3/T--UI_Indonesia--Table5Interlab.jpeg" class="w3-image" width="700"> | ||
+ | </div> | ||
+ | <br> | ||
+ | <h5>We performed serial dilution as suggested in iGEM 2018 InterLab Protocol from the dilutions and the results is shown in <b>Figure 15</b> and <b>Table 5</b>. Based on plates with optimal colony count (i.e. 50-200 colonies), we found that estimated CFU concentration per 0.1 OD<sub>600</sub> of positive control culture 1, positive control culture 2, negative control culture 1, and negative control culture 2 were approximately 1.05 x 10<sup>8</sup>, 1.25 x 10<sup>8</sup>, 6.16 x 10<sup>7</sup>, and 6.69 x 10<sup>7</sup> CFUs/mL, respectively (<b>Table 5, eighth column</b>).</h5> | ||
+ | </div> | ||
+ | </div> | ||
+ | </div> | ||
+ | <div class="panel panel-default"> | ||
+ | <div class="panel-heading"> | ||
+ | <h4 class="panel-title"> | ||
+ | <a data-toggle="collapse" data-parent="#accordion" href="#collapse5">Conclusions</a> | ||
+ | </h4> | ||
+ | </div> | ||
+ | <div id="collapse5" class="panel-collapse collapse"> | ||
+ | <div class="panel-body"> | ||
+ | <div class="w3-row w3-center"> | ||
+ | <h6><b>Table 6.</b> Manual conversion of fluorescence per OD into fluorescence per CFU, compared with fluorescence per particle.</h6> | ||
+ | <img src="https://static.igem.org/mediawiki/2018/d/d0/T--UI_Indonesia--Table6Interlab.jpeg" class="w3-image" width="700"> | ||
+ | </div> | ||
+ | <br> | ||
+ | <h5>Finally, we tried to manually convert our obtained fluorescence per OD (in Part II) into fluorescence per CFU using estimated CFU concentration per 0.1 OD<sub>600</sub> (in Part III), and compared them with our obtained fluorescence per particle (in Part II). The analysis for t = 0 hour can be seen in <b>Table 6</b> (detail calculation can be found in our Excel file). We found that our calculated fluorescence per CFU were different with fluorescence per particle. Therefore, our results suggested that the benefit of using direct method in expressing total cell number such as colony forming units (CFUs) than OD in reporting fluorescence per cell remains doubtful. However, to validate our findings, additional data from another teams are necessary.</h5> | ||
+ | </div> | ||
+ | </div> | ||
+ | </div> | ||
+ | </div> | ||
</div> | </div> | ||
− | |||
− | < | + | <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> |
− | < | + | <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> |
− | </ | + | <script> |
+ | // When the user scrolls down 20px from the top of the document, show the button | ||
+ | window.onscroll = function() {scrollFunction()}; | ||
+ | |||
+ | function scrollFunction() { | ||
+ | if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) { | ||
+ | document.getElementById("myBtn").style.display = "block"; | ||
+ | } else { | ||
+ | document.getElementById("myBtn").style.display = "none"; | ||
+ | } | ||
+ | } | ||
+ | // When the user clicks on the button, scroll to the top of the document | ||
+ | function topFunction() { | ||
+ | document.body.scrollTop = 0; | ||
+ | document.documentElement.scrollTop = 0; | ||
+ | } | ||
+ | </script> | ||
+ | <!-------------------------TEST-------------------------------------------> | ||
<!-- Footer --> | <!-- Footer --> | ||
<footer class="w3-center w3-green w3-padding-64 w3-opacity w3-hover-opacity-off"> | <footer class="w3-center w3-green w3-padding-64 w3-opacity w3-hover-opacity-off"> |
Latest revision as of 08:13, 17 October 2018
Interlab
Overview