|
|
| (31 intermediate revisions by 5 users not shown) |
| Line 1: |
Line 1: |
| | {{Pasteur_Paris/MenuBlock}} | | {{Pasteur_Paris/MenuBlock}} |
| | + | {{Pasteur_Paris/Vignettes}} |
| | <html> | | <html> |
| | <style type="text/css"> | | <style type="text/css"> |
| | #runningchip { | | #runningchip { |
| − | left: 245px; | + | left: 605px; |
| | } | | } |
| | #labwork_small { | | #labwork_small { |
| | background-color: #292929; | | background-color: #292929; |
| − | }
| + | } |
| − | #banner {
| + | #bannerchanged{ |
| − | background-image: ;
| + | width: 100%; |
| − | }
| + | overflow: hidden; |
| − | @media screen and (max-width: 760px) {
| + | margin: 0 auto; |
| − | #banner {
| + | } |
| − | background-image: ;
| + | @media screen and (max-width: 760px) { |
| − | }
| + | /*#wrapper { |
| − | </style>
| + | width: 100%; |
| | + | overflow: hidden; |
| | + | } |
| | + | #container { |
| | + | width: 100%; |
| | + | margin: 0 auto; |
| | + | }*/ |
| | + | .banner-img { |
| | + | width: 100%; |
| | + | } |
| | + | } |
| | | | |
| − | <style>
| + | </style> |
| − | .vignette { /*element that contains ONE vignette*/
| + | |
| − | height:20em;
| + | |
| − | width:20em;
| + | |
| − | margin:0;
| + | |
| − | position:relative;
| + | |
| − | display: inline-block;
| + | |
| − | }
| + | |
| − | .vignette_for { /*foreground part of the vignettes, gets transparent*/
| + | |
| − | width: 15em;
| + | |
| − | height: 16em;
| + | |
| − | position:absolute;
| + | |
| − | left:2.5em;
| + | |
| − | top:2em;
| + | |
| | | | |
| − | z-index:2;
| + | <div id="bannerchanged"> |
| − | border: 1px solid #333;
| + | <img class="banner-img" src="https://static.igem.org/mediawiki/2018/3/3e/T--Pasteur_Paris--Banner_Protocols.jpg"> |
| − | border-radius:20px;
| + | </div> |
| − | background-image: url("https://static.igem.org/mediawiki/2018/c/cd/T--Pasteur_Paris--Logo-Neuronarch_gradient.jpg");
| + | <h1></h1> |
| − | background-size:100%;
| + | </div> |
| − | | + | |
| − | pointer-events:none;
| + | |
| − | | + | |
| − | -webkit-transition: opacity 0.7s;
| + | |
| − | -moz-transition: opacity 0.7s;
| + | |
| − | -o-transition: opacity 0.7s;
| + | |
| − | transition: opacity 0.7s;
| + | |
| − | }
| + | |
| − | #for_0000 {
| + | |
| − | background-image: url("https://static.igem.org/mediawiki/2018/a/aa/T--Pasteur_Paris--Logo-PDMS-Chips-Fabrication.jpg");
| + | |
| − | }
| + | |
| − | #for_0001 {
| + | |
| − | background-image: url("https://static.igem.org/mediawiki/2018/8/8a/T--Pasteur_Paris--Logo-PDMS-Chip-Demolding.jpg");
| + | |
| − | }
| + | |
| − | #for_0002 {
| + | |
| − | background-image: url("https://static.igem.org/mediawiki/2018/a/a9/T--Pasteur_Paris--Logo-PDMS-Chip-Bonding.jpg");
| + | |
| − | }
| + | |
| − | #for_0003 {
| + | |
| − | background-image: url("https://static.igem.org/mediawiki/2018/a/a1/T--Pasteur_Paris--Logo-PDMS-Chip-Treatment-Neuron.jpg");
| + | |
| − | }
| + | |
| − | #for_0100 {
| + | |
| − | background-image: url("https://static.igem.org/mediawiki/2018/6/68/T--Pasteur_Paris--Logo-PDMS-Well-Chip-Mold-Fabrication.jpg");
| + | |
| − | }
| + | |
| − | #for_0101 {
| + | |
| − | background-image: url("https://static.igem.org/mediawiki/2018/c/ce/T--Pasteur_Paris--Logo-PDMS-Well-Chip-Fabrication.jpg");
| + | |
| − | }
| + | |
| − | #for_0102 {
| + | |
| − | background-image: url("https://static.igem.org/mediawiki/2018/6/63/T--Pasteur_Paris--Logo-PDMS-Well-Chip-Conductivity.jpg");
| + | |
| − | }
| + | |
| − | #for_0200 {
| + | |
| − | background-image: url("https://static.igem.org/mediawiki/2018/2/2d/T--Pasteur_Paris--Logo-PDMS-Microchannel-Chip-Mold-Fabrication.jpg");
| + | |
| − | }
| + | |
| − | | + | |
| − | | + | |
| − | .vignette_back { /*background part of the vignettes, picture*/
| + | |
| − | width: 15em;
| + | |
| − | height: 16em;
| + | |
| − | position:absolute;
| + | |
| − | left:2.5em;
| + | |
| − | top:2em;
| + | |
| − | | + | |
| − | cursor:pointer;
| + | |
| − | | + | |
| − | z-index: 1;
| + | |
| − | border: 1px solid #333;
| + | |
| − | border-radius: 20px;
| + | |
| − | background-size:100%;
| + | |
| − | }
| + | |
| − | #back_0000 {
| + | |
| − | background-image:url("https://static.igem.org/mediawiki/2018/0/03/T--Pasteur_Paris--PDMS_prep.jpg");
| + | |
| − | }
| + | |
| − | #back_0001 {
| + | |
| − | background-image:url("https://static.igem.org/mediawiki/2018/8/8e/T--Pasteur_Paris--PDMS_chip_demolding.jpg");
| + | |
| − | }
| + | |
| − | #back_0002 {
| + | |
| − | background-image:url("https://static.igem.org/mediawiki/2018/e/e9/T--Pasteur_Paris--PDMS_chip_bonding.jpg");
| + | |
| − | }
| + | |
| − | .vignette_text { /*small panel that slides down on the vignettes*/
| + | |
| − | width: 17em;
| + | |
| − | height: 3em;
| + | |
| − | position:absolute;
| + | |
| − | top:4em;
| + | |
| − | left:1.5em;
| + | |
| − | | + | |
| − | display:flex;
| + | |
| − | | + | |
| − | z-index: 3;
| + | |
| − | border-radius:10px;
| + | |
| − | border: 1px solid #333;
| + | |
| − | background-color:white;
| + | |
| − | box-shadow: 2px 2px 3px grey;
| + | |
| − | opacity: 0.8;
| + | |
| − | | + | |
| − | pointer-events:none;
| + | |
| − | -webkit-transition: top 0.7s, opacity 0.7s;
| + | |
| − | -moz-transition: top 0.7s, opacity 0.7s;
| + | |
| − | -o-transition: top 0.7s, opacity 0.7s;
| + | |
| − | transition: top 0.7s, opacity 0.7s;
| + | |
| − | }
| + | |
| − | .panel {
| + | |
| − | width: 90%;
| + | |
| − | padding: 0px 18px;
| + | |
| − | background-color: white;
| + | |
| − | max-height: 0;
| + | |
| − | text-align:left;
| + | |
| − | overflow: hidden;
| + | |
| − | -webkit-transition: max-height 0.7s;
| + | |
| − | -moz-transition: max-height 0.7s ;
| + | |
| − | -o-transition: max-height 0.7s ;
| + | |
| − | transition: max-height 0.7s ;
| + | |
| − | }
| + | |
| − | .close_button {
| + | |
| − | width:3em;
| + | |
| − | height:3em;
| + | |
| − | z-index:6;
| + | |
| − | position:relative;
| + | |
| − | float: right;
| + | |
| − | margin-top: 1em;
| + | |
| − | background-image: url("https://static.igem.org/mediawiki/2018/d/d3/T--Pasteur_Paris--Cross.png");
| + | |
| − | background-size:100%;
| + | |
| − | opacity:0.3;
| + | |
| − | border-radius:4px;
| + | |
| − | | + | |
| − | cursor:pointer;
| + | |
| − | }
| + | |
| − | .close_button:hover {
| + | |
| − | opacity:1;
| + | |
| − | }
| + | |
| − | | + | |
| − | .close_button:active {
| + | |
| − | background-color:#3C519F;
| + | |
| − | opacity:0.2;
| + | |
| − | }
| + | |
| − | .protocol_box {
| + | |
| − | border: 0.2em solid #AF3D57;
| + | |
| − | width:15em;
| + | |
| − | | + | |
| − | </style> | + | |
| − | | + | |
| − | | + | |
| − | <div id="banner">
| + | |
| − | <h1>EXPERIMENTS</h1>
| + | |
| − | | + | |
| − | </div>
| + | |
| | | | |
| | <div id="GeneralContent"> | | <div id="GeneralContent"> |
| | <div id="MainContent"> | | <div id="MainContent"> |
| | | | |
| | + | <a href="https://2018.igem.org/Team:Pasteur_Paris/Protocols/CellBio"> |
| | + | <div class="block onglet"> |
| | + | <div class="ongletImg" style="background-image: url(https://static.igem.org/mediawiki/2018/c/c1/T--Pasteur_Paris--Logo-Big-Vignette-Cellular-Biology.png);"> |
| | + | </div> |
| | + | <div class= "textOnglet" style="background-color: #dedede;"> |
| | + | <h1>Microbiology</h1> |
| | + | </div> |
| | + | </div> |
| | + | </a> |
| | + | <a href="https://2018.igem.org/Team:Pasteur_Paris/Experiments/Microflu"> |
| | + | <div class="block onglet"> |
| | + | <div class="ongletImg" style="background-image: url(https://static.igem.org/mediawiki/2018/1/13/T--Pasteur_Paris--Logo-Big-Vignette-Microfluidics.png);"> |
| | + | </div> |
| | + | <div class= "textOnglet" style="background-color: #dedede;"> |
| | + | <h1>Microfluidics</h1> |
| | + | </div> |
| | + | </div> |
| | + | </a> |
| | + | <a href="https://2018.igem.org/Team:Pasteur_Paris/Protocols/CellBio2"> |
| | + | <div class="block onglet"> |
| | + | <div class="ongletImg" style="background-image: url(https://static.igem.org/mediawiki/2018/3/3c/T--Pasteur_Paris--Logo-Big-Vignette-Molecular-Biology.png);"> |
| | + | </div> |
| | + | <div class= "textOnglet" style="background-color: #dedede;"> |
| | + | <h1>Cellular Biology</h1> |
| | + | </div> |
| | + | </a> |
| | + | </div> |
| | | | |
| | | | |
| | + | <a href="https://2018.igem.org/Team:Pasteur_Paris/Technicals"> |
| | + | <div class="block onglet"> |
| | + | <div class="ongletImg" style="background-image: url(https://static.igem.org/mediawiki/2018/e/ed/T--Pasteur_Paris--Big-Vignette-Design.png);"> |
| | + | </div> |
| | + | <div class= "textOnglet" style="background-color: #dedede;"> |
| | + | <h1>Design*</h1> |
| | + | </div> |
| | + | </a> |
| | + | </div> |
| | | | |
| | | | |
| − | | + | <p> (*) There are not really protocols in design, but rather methodologies. You will be redirected to Product Design - Methodology. </p> |
| − | <div class="block title">
| + | |
| − | <p style="text-align:center;text-transform:uppercase"> Text written on this website is not intended for use as protocols, but to give an idea of the main steps and complexity of each experiment. Please follow the links to the full protocols at the bottom of each sliding panel. </p> | + | |
| − | </div>
| + | |
| − | | + | |
| − | | + | |
| − | | + | |
| − | | + | |
| − | | + | |
| − | | + | |
| − | | + | |
| − | | + | |
| − | | + | |
| − | | + | |
| − | | + | |
| − | | + | |
| − | | + | |
| − | | + | |
| − | | + | |
| − | | + | |
| − |
| + | |
| − | <div class="block separator-mark">
| + | |
| − | </div>
| + | |
| − |
| + | |
| − | <div class="block full" id="molbio_0" style="display:flex;flex-flow: row wrap;justify-content:center;margin:auto;">
| + | |
| − | | + | |
| − | <h2 style="order:1;">Molecular Biology: general protocols</h2>
| + | |
| − | | + | |
| − | <p style="text-indent:0px;order:2;margin:2em;">Here we present the basic molecular biology methods we used throughout the project to amplify our plasmids, linearized them and insert our sequences, retrieve them rom bacteria and express proteins. </p>
| + | |
| − | | + | |
| − | | + | |
| − | <div class="vignette" id="vign_1000">
| + | |
| − | <div class="vignette_for" id="for_1000">
| + | |
| − | </div>
| + | |
| − | | + | |
| − | <div class="vignette_back" id="back_1000">
| + | |
| − | </div>
| + | |
| − | | + | |
| − | <div class="vignette_text">
| + | |
| − | <p style="margin:auto; text-align:center;font-weight:bold;" >Bacteria transformation</p>
| + | |
| − | </div>
| + | |
| − | </div>
| + | |
| − | | + | |
| − | <div class="vignette" id="vign_1001">
| + | |
| − | <div class="vignette_for" id="for_1001">
| + | |
| − | </div>
| + | |
| − |
| + | |
| − | <div class="vignette_back" id="back_1001">
| + | |
| − | </div>
| + | |
| − |
| + | |
| − | <div class="vignette_text">
| + | |
| − | <p style="margin:auto; text-align:center;font-weight:bold;">Liquid culture</p>
| + | |
| − | </div>
| + | |
| − | </div>
| + | |
| − | | + | |
| − | <div class="vignette" id="vign_1002">
| + | |
| − | <div class="vignette_for" id="for_1002">
| + | |
| − | </div>
| + | |
| − |
| + | |
| − | <div class="vignette_back" id="back_1002">
| + | |
| − | </div>
| + | |
| − |
| + | |
| − | <div class="vignette_text">
| + | |
| − | <p style="margin:auto; text-align:center;font-weight:bold;">Bacterial stocks</p>
| + | |
| − | </div>
| + | |
| − | </div>
| + | |
| − | | + | |
| − | <div class="vignette" id="vign_1003">
| + | |
| − | <div class="vignette_for" id="for_1003">
| + | |
| − | </div>
| + | |
| − |
| + | |
| − | <div class="vignette_back" id="back_1003">
| + | |
| − | </div>
| + | |
| − |
| + | |
| − | <div class="vignette_text">
| + | |
| − | <p style="margin:auto; text-align:center;font-weight:bold;">DNA extraction from bacterial culture</p>
| + | |
| − | </div>
| + | |
| − | </div>
| + | |
| − | | + | |
| − | <div class="vignette" id="vign_1004">
| + | |
| − | <div class="vignette_for" id="for_1004">
| + | |
| − | </div>
| + | |
| − |
| + | |
| − | <div class="vignette_back" id="back_1004">
| + | |
| − | </div>
| + | |
| − |
| + | |
| − | <div class="vignette_text">
| + | |
| − | <p style="margin:auto; text-align:center;font-weight:bold;">Enzymatic digestion</p>
| + | |
| − | </div>
| + | |
| − | </div>
| + | |
| − | | + | |
| − | | + | |
| − | <div class="vignette" id="vign_1005">
| + | |
| − | <div class="vignette_for" id="for_1005">
| + | |
| − | </div>
| + | |
| − |
| + | |
| − | <div class="vignette_back" id="back_1005">
| + | |
| − | </div>
| + | |
| − |
| + | |
| − | <div class="vignette_text">
| + | |
| − | <p style="margin:auto; text-align:center;font-weight:bold;">Electrophoresis on agar gel</p>
| + | |
| − | </div>
| + | |
| − | </div>
| + | |
| − | | + | |
| − | | + | |
| − | <div class="vignette" id="vign_1006">
| + | |
| − | <div class="vignette_for" id="for_1006">
| + | |
| − | </div>
| + | |
| − |
| + | |
| − | <div class="vignette_back" id="back_1006">
| + | |
| − | </div>
| + | |
| − |
| + | |
| − | <div class="vignette_text">
| + | |
| − | <p style="margin:auto; text-align:center;font-weight:bold;">DNA Gel extraction</p>
| + | |
| − | </div>
| + | |
| − | </div>
| + | |
| − | | + | |
| − | <div class="vignette" id="vign_1007">
| + | |
| − | <div class="vignette_for" id="for_1007">
| + | |
| − | </div>
| + | |
| − |
| + | |
| − | <div class="vignette_back" id="back_1007">
| + | |
| − | </div>
| + | |
| − |
| + | |
| − | <div class="vignette_text">
| + | |
| − | <p style="margin:auto; text-align:center;font-weight:bold;">Ligation of plasmid with DNA insert</p>
| + | |
| − | </div>
| + | |
| − | </div>
| + | |
| − | | + | |
| − | | + | |
| − | | + | |
| − | | + | |
| − | | + | |
| − | <div class="panel" id="pan_1000" style="text-align:left;">
| + | |
| − | <div class="close_button">
| + | |
| − | </div>
| + | |
| − | <br>
| + | |
| − | <h3>Aim</h3>
| + | |
| − | <p>Insert a plasmid of interest into competent bacterial cells, in order to replicate them.</p>
| + | |
| − | <br>
| + | |
| − | </div>
| + | |
| − | | + | |
| − | <div class="panel" id="pan_1001" style="text-align:left;">
| + | |
| − | <div class="close_button">
| + | |
| − | </div>
| + | |
| − | <br>
| + | |
| − | <h3>Aim</h3>
| + | |
| − | <p>Grow a colony that have successfully been transformed with one or several plasmids in order to replicate plasmid or to express a protein.</p>
| + | |
| − | <br>
| + | |
| − | </div>
| + | |
| − | | + | |
| − | <div class="panel" id="pan_1002" style="text-align:left;">
| + | |
| − | <div class="close_button">
| + | |
| − | </div>
| + | |
| − | <br>
| + | |
| − | <h3>Aim</h3>
| + | |
| − | <p>Stock bacterial culture at -80 °C.</p>
| + | |
| − | <br>
| + | |
| − | <h3>Materials</h3>
| + | |
| − | <ul>
| + | |
| − | <li> Desired bacterial cultures on petri dish </li>
| + | |
| − | <li> Sterile LB media </li>
| + | |
| − | <li> chloramphenicol (25mg/mL) or carbenicilline(50mg/mL) </li>
| + | |
| − | <li> glycerol 50% </li>
| + | |
| − | </ul>
| + | |
| − | <br>
| + | |
| − | <h3>Procedure</h3>
| + | |
| − | <p>In advance:</p>
| + | |
| − | <ul>
| + | |
| − | <li> Prepare a stock solution of LB + desired antibiotic in 50 mL falcon tube depending on how many culture you would like to stock in glycerol. </li>
| + | |
| − | <li> Prepare a sterile stock solution of glycerol 50 %. </li>
| + | |
| − | </ul>
| + | |
| − | <ol>
| + | |
| − | <li> In 15 ml sterile falcon, add 5 mL of LB media </li>
| + | |
| − | <li> Vortex the stock solution of antibiotic and add 5 µL to the LB </li>
| + | |
| − | <li> Using an inoculation loop, touch gently a colony of transformed bacteria from the petri dish, plastic side facing you. </li>
| + | |
| − | <li> Immerse and dip the inoculation loop in the liquid media and stir. </li>
| + | |
| − | <li> Place the liquid culture in the incubator at 37˚C 180 rpm for 16h. </li>
| + | |
| − | <li> After 16 hours, centrifuge the tubes 5 minutes at 3000 rpm. </li>
| + | |
| − | <li> Discard supernatant. </li>
| + | |
| − | <li> Resuspend the pellet in 5mL of LB. </li>
| + | |
| − | <li> Discard supernatant. </li>
| + | |
| − | <li> Resuspend the pellet in 1 mL of LB + antibiotic. </li>
| + | |
| − | <li> In a 125 ml erlenmeyer, add 1 mL of bacterial culture in 24 mL of LB + antibiotic. </li>
| + | |
| − | <li> Incubate the culture at 37˚C 180 rpm. </li>
| + | |
| − | <li> Measure the OD every hour for the first 3 hours and then every 20 minutes. </li>
| + | |
| − | <li> When 0,6 < OD < 0,7, withdraw 5 mL of the bacterial liquid culture and add 5 mL of glycerol 50 %. </li>
| + | |
| − | <li> Vortex. </li>
| + | |
| − | <li> Aliquot the 10 mL into sterile cryotubes. </li>
| + | |
| − | <li> Place into dry ice and freeze at -80˚C. </li>
| + | |
| − | </ol>
| + | |
| − | <br>
| + | |
| − | <div class="protocol_box">
| + | |
| − | <p> <a href="" target="_blank">Get full protocol here</a> </p>
| + | |
| − | </div>
| + | |
| − | <br>
| + | |
| − | </div>
| + | |
| − | | + | |
| − | <div class="panel" id="pan_1003" style="text-align:left;">
| + | |
| − | <div class="close_button">
| + | |
| − | </div>
| + | |
| − | <br>
| + | |
| − | <h3>Aim</h3>
| + | |
| − | <p>Retrieve amplified plasmids from a liquid culture of transformed bacteria. According to the liquid culture volume, we used the QIAfilter Plasmid Purification kit (for 25 mL culture) or the QIAprep Spin Miniprep kit (for 5 mL culture) from Qiagen.</p>
| + | |
| − | <br>
| + | |
| − | </div>
| + | |
| − | | + | |
| − | <div class="panel" id="pan_1004" style="text-align:left;">
| + | |
| − | <div class="close_button">
| + | |
| − | </div>
| + | |
| − | <br>
| + | |
| − | <h3>Aim</h3>
| + | |
| − | <p>Perform restriction enzyme digestion in order to recover linear backbones of the plasmids, extract our inserts from commercial plasmid, or check the success of a ligation. </p>
| + | |
| − | <br>
| + | |
| − | </div>
| + | |
| − | | + | |
| − | <div class="panel" id="pan_1005" style="text-align:left;">
| + | |
| − | <div class="close_button">
| + | |
| − | </div>
| + | |
| − | <br>
| + | |
| − | <h3>Aim</h3>
| + | |
| − | <p>Separate DNA fragments according to their molecular weight after an enzymatic digestion, in order to purify inserts or to analyse a plasmid.</p>
| + | |
| − | <br>
| + | |
| − | </div>
| + | |
| − | | + | |
| − | <div class="panel" id="pan_1006" style="text-align:left;">
| + | |
| − | <div class="close_button">
| + | |
| − | </div>
| + | |
| − | <br>
| + | |
| − | <h3>Aim</h3>
| + | |
| − | <p>: Extract DNA from an agar gel after an electrophoresis. We used the QIAquick Gel Extraction Kit provided by Qiagen.</p>
| + | |
| − | <br>
| + | |
| − | </div>
| + | |
| − | | + | |
| − | <div class="panel" id="pan_1007" style="text-align:left;">
| + | |
| − | <div class="close_button">
| + | |
| − | </div>
| + | |
| − | <br>
| + | |
| − | <h3>Aim</h3>
| + | |
| − | <p>Insert a DNA fragment with appropriate overlaps into a linearized plasmid. We used the In-Fusion HD Cloning Plus provided by Ozyme. </p>
| + | |
| − | <br>
| + | |
| − | </div>
| + | |
| − |
| + | |
| − | | + | |
| − | <script>
| + | |
| − | var cont = document.getElementById("molbio_0");
| + | |
| − | var vign_back_lis = cont.getElementsByClassName("vignette_back");
| + | |
| − | var i;
| + | |
| − | | + | |
| − | for (i = 0; i < vign_back_lis.length; i++) {
| + | |
| − | vign_back_lis[i].addEventListener("click", function() {
| + | |
| − | var cont = document.getElementById("molbio_0");
| + | |
| − | var vign_back_lis = cont.getElementsByClassName("vignette_back");
| + | |
| − | var cont_index = "10";
| + | |
| − | /*get clicked element index*/
| + | |
| − | var index = String(this.id).substring(7,9);
| + | |
| − | | + | |
| − | /*locate elements to move*/
| + | |
| − | var panel = document.getElementById("pan_"+cont_index+index);
| + | |
| − | var vignFor = this.previousElementSibling;
| + | |
| − | var vignText = this.nextElementSibling;
| + | |
| − | /*move it*/
| + | |
| − | if (panel.style.maxHeight){
| + | |
| − | | + | |
| − | /*close it*/
| + | |
| − | panel.style.maxHeight = null;
| + | |
| − | vignFor.style.opacity = 1;
| + | |
| − | vignText.style.opacity = 0.8;
| + | |
| − | vignText.style.top = "4em";
| + | |
| − | }
| + | |
| − | else {
| + | |
| − |
| + | |
| − | /*find active element*/
| + | |
| − | var j;
| + | |
| − | var index_act = -1 ;
| + | |
| − | var el_foc;
| + | |
| − | for (j = 0; j < vign_back_lis.length; j++) {
| + | |
| − | if (j<10) {
| + | |
| − | el_foc=document.getElementById("pan_" + cont_index + "0" + j);
| + | |
| − | if (el_foc.style.maxHeight != 0) {
| + | |
| − | index_act="0"+j;
| + | |
| − | break;
| + | |
| − | }
| + | |
| − | } else {
| + | |
| − | el_foc=document.getElementById("pan_" + cont_index + j);
| + | |
| − | if (el_foc.style.maxHeight != 0) {
| + | |
| − | index_act=j;
| + | |
| − | break;
| + | |
| − | }
| + | |
| − | }
| + | |
| − | }
| + | |
| − | if (index_act != -1) {
| + | |
| − | /*close active element*/
| + | |
| − | var panel_act = document.getElementById("pan_"+cont_index+index_act);
| + | |
| − | var back_act = document.getElementById("back_"+cont_index+index_act);
| + | |
| − | var for_act=back_act.previousElementSibling;
| + | |
| − | var text_act=back_act.nextElementSibling;
| + | |
| − | panel_act.style.maxHeight = null;
| + | |
| − | for_act.style.opacity = 1;
| + | |
| − | text_act.style.opacity = 0.8;
| + | |
| − | text_act.style.top = "4em";
| + | |
| − | }
| + | |
| − | | + | |
| − | /*open clicked element*/
| + | |
| − | panel.style.maxHeight = panel.scrollHeight + "px";
| + | |
| − | vignFor.style.opacity = 0;
| + | |
| − | vignText.style.opacity = 1;
| + | |
| − | vignText.style.top = "15em";
| + | |
| − | }
| + | |
| − | });
| + | |
| − | }
| + | |
| − | | + | |
| − | </script>
| + | |
| − | | + | |
| − | </div>
| + | |
| − | | + | |
| − | | + | |
| − | | + | |
| − | | + | |
| − | | + | |
| − | | + | |
| − | | + | |
| − | | + | |
| − | | + | |
| − | | + | |
| − | | + | |
| − | | + | |
| − | | + | |
| − | | + | |
| − | | + | |
| − | | + | |
| − | | + | |
| − | | + | |
| − | | + | |
| − | | + | |
| − | | + | |
| − | | + | |
| − |
| + | |
| − | <div class="block separator-mark">
| + | |
| − | </div>
| + | |
| − |
| + | |
| − | <div class="block full" id="micro_0" style="display:flex;flex-flow: row wrap;justify-content:center;margin:auto;">
| + | |
| − | | + | |
| − | <h2 style="order:1;">Microfluidics: general protocols</h2>
| + | |
| − | | + | |
| − | <p style="text-indent:0px;order:2;margin:2em;">PDMS (Polydimethylsiloxane) is a widely used polymer in microfluidics, for its biocompatibility and transparence, among other qualities. Here we show how to prepare PDMS for microfluidic chips, as well as how to demold them, bond them to other surfaces and treat them for neuron growth. Also, we explain how our molds and chips were fabricated.</p>
| + | |
| − | | + | |
| − | | + | |
| − | <div class="vignette" id="vign_0000">
| + | |
| − | <div class="vignette_for" id="for_0000">
| + | |
| − | </div>
| + | |
| − | | + | |
| − | <div class="vignette_back" id="back_0000">
| + | |
| − | </div>
| + | |
| − | | + | |
| − | <div class="vignette_text">
| + | |
| − | <p style="margin:auto; text-align:center;font-weight:bold;" >PDMS Chip Fabrication</p>
| + | |
| − | </div>
| + | |
| − | </div>
| + | |
| − | | + | |
| − | <div class="vignette" id="vign_0001">
| + | |
| − | <div class="vignette_for" id="for_0001">
| + | |
| − | </div>
| + | |
| − |
| + | |
| − | <div class="vignette_back" id="back_0001">
| + | |
| − | </div>
| + | |
| − |
| + | |
| − | <div class="vignette_text">
| + | |
| − | <p style="margin:auto; text-align:center;font-weight:bold;">PDMS Chip Demolding</p>
| + | |
| − | </div>
| + | |
| − | </div>
| + | |
| − | | + | |
| − | <div class="vignette" id="vign_0002">
| + | |
| − | <div class="vignette_for" id="for_0002">
| + | |
| − | </div>
| + | |
| − |
| + | |
| − | <div class="vignette_back" id="back_0002">
| + | |
| − | </div>
| + | |
| − |
| + | |
| − | <div class="vignette_text">
| + | |
| − | <p style="margin:auto; text-align:center;font-weight:bold;">PDMS Chip Bonding</p>
| + | |
| − | </div>
| + | |
| − | </div>
| + | |
| − | | + | |
| − | <div class="vignette" id="vign_0003">
| + | |
| − | <div class="vignette_for" id="for_0003">
| + | |
| − | </div>
| + | |
| − |
| + | |
| − | <div class="vignette_back" id="back_0003">
| + | |
| − | </div>
| + | |
| − |
| + | |
| − | <div class="vignette_text">
| + | |
| − | <p style="margin:auto; text-align:center;font-weight:bold;">PDMS Chip Treatment for Nerve Growth</p>
| + | |
| − | </div>
| + | |
| − | </div>
| + | |
| − | | + | |
| − | | + | |
| − | | + | |
| − | | + | |
| − | <div class="panel" id="pan_0000" style="text-align:left;">
| + | |
| − | <div class="close_button">
| + | |
| − | </div>
| + | |
| − | <br>
| + | |
| − | <h3>Materials</h3>
| + | |
| − | <ul>
| + | |
| − | <li> Sylgard 184 Elastomer Kit </li>
| + | |
| − | <li> Vacuum pump unit </li>
| + | |
| − | <li> Stove </li>
| + | |
| − | </ul>
| + | |
| − | <br>
| + | |
| − | <h3>Protocol</h3>
| + | |
| − | <p>According to <a target="_blank" rel="noopener noreferrer" href="https://static.igem.org/mediawiki/2018/c/c3/T--Pasteur_Paris--Sylgard.pdf">manufacturer's instruction</a>. <br>
| + | |
| − | <ol>
| + | |
| − | <li> Mix monomer and curing agent (10:1 proportion) for 30 seconds. </li>
| + | |
| − | <li> Use a vacuum pump unit and a vacuum bell jar to extract air bubbles until the mixture is clear. </li>
| + | |
| − | <li> Pour mixture onto mold. </li>
| + | |
| − | <li> Put mixture+mold in stove at 70 degrees Celsius for 3 hours. </li>
| + | |
| − | </ol>
| + | |
| − | <br>
| + | |
| − | <div class="protocol_box">
| + | |
| − | <p> <a href="https://static.igem.org/mediawiki/2018/3/3d/T--Pasteur_Paris--Microfluidics-general-protocols.pdf" target="_blank">Get full protocol here</a> </p>
| + | |
| − | </div>
| + | |
| − | <br>
| + | |
| − | </div>
| + | |
| − | | + | |
| − | <div class="panel" id="pan_0001" style="text-align:left;">
| + | |
| − | <div class="close_button">
| + | |
| − | </div>
| + | |
| − | <br>
| + | |
| − | <h3>Materials</h3>
| + | |
| − | <ul>
| + | |
| − | <li> Razor blade </li>
| + | |
| − | <li> Biopsy puncher 4mm </li>
| + | |
| − | </ul>
| + | |
| − | <br>
| + | |
| − | <h3>Protocol</h3>
| + | |
| − | <br>
| + | |
| − | <ol>
| + | |
| − | <li> Cut the borders of the chip with the razor blade. </li>
| + | |
| − | <li> Extract the chip from its mold. </li>
| + | |
| − | <li> Drill input and output holes with the biopsy puncher. </li>
| + | |
| − | </ol>
| + | |
| − | <br>
| + | |
| − | <div class="protocol_box">
| + | |
| − | <p> <a href="https://static.igem.org/mediawiki/2018/3/3d/T--Pasteur_Paris--Microfluidics-general-protocols.pdf" target="_blank">Get full protocol here</a> </p>
| + | |
| − | </div>
| + | |
| − | <br>
| + | |
| − | </div>
| + | |
| − | | + | |
| − | <div class="panel" id="pan_0002" style="text-align:left;">
| + | |
| − | <div class="close_button">
| + | |
| − | </div>
| + | |
| − | <br>
| + | |
| − | <h3>Materials</h3>
| + | |
| − | <ul>
| + | |
| − | <li> Plasma cleaner </li>
| + | |
| − | <li> Distilled water </li>
| + | |
| − | <li> Isopropanol </li>
| + | |
| − | <li> Office duct tape </li>
| + | |
| − | <li> Fume hood </li>
| + | |
| − | </ul>
| + | |
| − | <br>
| + | |
| − | <h3>Protocol</h3>
| + | |
| − | <br>
| + | |
| − | <ol>
| + | |
| − | <li> Take chip and the surface it needs to be bonded to into the fume hood. </li>
| + | |
| − | <li> Clean chip with duct tape and isopropanol. </li>
| + | |
| − | <li> Put the chip and the surface into the plasma cleaner. </li>
| + | |
| − | <li> Expose chip and surface 30 seconds to plasma. </li>
| + | |
| − | <li> Take the chip and the surface back in the fume hood. </li>
| + | |
| − | <li> Press the microfluidic chip against the surface. </li>
| + | |
| − | </ol>
| + | |
| − | <br>
| + | |
| − | <div class="protocol_box">
| + | |
| − | <p> <a href="https://static.igem.org/mediawiki/2018/3/3d/T--Pasteur_Paris--Microfluidics-general-protocols.pdf" target="_blank">Get full protocol here</a> </p>
| + | |
| − | </div>
| + | |
| − | <br>
| + | |
| − | </div>
| + | |
| − | | + | |
| − | <div class="panel" id="pan_0003" style="text-align:left;">
| + | |
| − | <div class="close_button">
| + | |
| − | </div>
| + | |
| − | <br>
| + | |
| − | <h3>Materials</h3>
| + | |
| − | <ul>
| + | |
| − | <li> Poly-D-Lysine solution 1.0 mg/mL </li>
| + | |
| − | <li> Laminin </li>
| + | |
| − | </ul>
| + | |
| − | <br>
| + | |
| − | <h3>Protocol</h3>
| + | |
| − | <br>
| + | |
| − | | + | |
| − | <ol>
| + | |
| − | <li> Pour poly-D-lysine with concentration 10 &mu g/mL into the chip. </li>
| + | |
| − | <li> Incubate over night. </li>
| + | |
| − | <li> Pour laminine with concentration 4 &mu g/mL. </li>
| + | |
| − | <li> Incubate for a few hours.</li>
| + | |
| − | </ol>
| + | |
| − | <br>
| + | |
| − | <div class="protocol_box">
| + | |
| − | <p> <a href="https://static.igem.org/mediawiki/2018/3/3d/T--Pasteur_Paris--Microfluidics-general-protocols.pdf" target="_blank">Get full protocol here</a> </p>
| + | |
| − | </div>
| + | |
| − | <br>
| + | |
| − | </div>
| + | |
| − |
| + | |
| − | | + | |
| − | <script>
| + | |
| − | var cont = document.getElementById("micro_0");
| + | |
| − | var vign_back_lis = cont.getElementsByClassName("vignette_back");
| + | |
| − | var i;
| + | |
| − | | + | |
| − | for (i = 0; i < vign_back_lis.length; i++) {
| + | |
| − | vign_back_lis[i].addEventListener("click", function() {
| + | |
| − | var cont = document.getElementById("micro_0");
| + | |
| − | var vign_back_lis = cont.getElementsByClassName("vignette_back");
| + | |
| − | var cont_index = "00";
| + | |
| − | /*get clicked element index*/
| + | |
| − | var index = String(this.id).substring(7,9);
| + | |
| − | | + | |
| − | /*locate elements to move*/
| + | |
| − | var panel = document.getElementById("pan_"+cont_index+index);
| + | |
| − | var vignFor = this.previousElementSibling;
| + | |
| − | var vignText = this.nextElementSibling;
| + | |
| − | /*move it*/
| + | |
| − | if (panel.style.maxHeight){
| + | |
| − | | + | |
| − | /*close it*/
| + | |
| − | panel.style.maxHeight = null;
| + | |
| − | vignFor.style.opacity = 1;
| + | |
| − | vignText.style.opacity = 0.8;
| + | |
| − | vignText.style.top = "4em";
| + | |
| − | }
| + | |
| − | else {
| + | |
| − |
| + | |
| − | /*find active element*/
| + | |
| − | var j;
| + | |
| − | var index_act = -1 ;
| + | |
| − | var el_foc;
| + | |
| − | for (j = 0; j < vign_back_lis.length; j++) {
| + | |
| − | if (j<10) {
| + | |
| − | el_foc=document.getElementById("pan_" + cont_index + "0" + j);
| + | |
| − | if (el_foc.style.maxHeight != 0) {
| + | |
| − | index_act="0"+j;
| + | |
| − | break;
| + | |
| − | }
| + | |
| − | } else {
| + | |
| − | el_foc=document.getElementById("pan_" + cont_index + j);
| + | |
| − | if (el_foc.style.maxHeight != 0) {
| + | |
| − | index_act=j;
| + | |
| − | break;
| + | |
| − | }
| + | |
| − | }
| + | |
| − | }
| + | |
| − | if (index_act != -1) {
| + | |
| − | /*close active element*/
| + | |
| − | var panel_act = document.getElementById("pan_"+cont_index+index_act);
| + | |
| − | var back_act = document.getElementById("back_"+cont_index+index_act);
| + | |
| − | var for_act=back_act.previousElementSibling;
| + | |
| − | var text_act=back_act.nextElementSibling;
| + | |
| − | panel_act.style.maxHeight = null;
| + | |
| − | for_act.style.opacity = 1;
| + | |
| − | text_act.style.opacity = 0.8;
| + | |
| − | text_act.style.top = "4em";
| + | |
| − | }
| + | |
| − | | + | |
| − | /*open clicked element*/
| + | |
| − | panel.style.maxHeight = panel.scrollHeight + "px";
| + | |
| − | vignFor.style.opacity = 0;
| + | |
| − | vignText.style.opacity = 1;
| + | |
| − | vignText.style.top = "15em";
| + | |
| − | }
| + | |
| − | });
| + | |
| − | }
| + | |
| − | | + | |
| − | </script>
| + | |
| − | | + | |
| − | </div>
| + | |
| − | | + | |
| − | | + | |
| − | | + | |
| − | | + | |
| − | | + | |
| − | | + | |
| − | | + | |
| − | | + | |
| − | | + | |
| − | | + | |
| − | | + | |
| − | | + | |
| − | | + | |
| − | | + | |
| − | | + | |
| − | | + | |
| − | | + | |
| − | | + | |
| − | | + | |
| − | <div class="block separator-mark">
| + | |
| − | </div>
| + | |
| − | | + | |
| − | <div class="block full" id="micro_3" style="display:flex;flex-flow: row wrap;justify-content:center;margin:auto;">
| + | |
| − | | + | |
| − | <h2 style="order:1;width:100%">Microfluidics: membrane filters</h2>
| + | |
| − | | + | |
| − | <p style="text-indent:0px;order:2;margin:2em;width:100%"> Soon enough we realized that we would need something to confine the bacteria, so that it doesn't attack the neurons during our experiments. The solution came as a nanoporous membrane, that would also be used as the conductive element in our system to transmit to the neuron's impulse. </p>
| + | |
| − | | + | |
| − | <div class="vignette" id="vign_0300">
| + | |
| − | <div class="vignette_for" id="for_0300">
| + | |
| − | </div>
| + | |
| − |
| + | |
| − | <div class="vignette_back" id="back_0300">
| + | |
| − | </div>
| + | |
| − | | + | |
| − | <div class="vignette_text">
| + | |
| − | <p style="margin:auto; text-align:center;font-weight:bold;">Membrane PEDOT:PSS coating</p>
| + | |
| − | </div>
| + | |
| − | </div>
| + | |
| − | | + | |
| − | <div class="panel" id="pan_0300" style="text-align:left;">
| + | |
| − | <div class="close_button">
| + | |
| − | </div>
| + | |
| − | <br>
| + | |
| − | <br>
| + | |
| − | <br>
| + | |
| − | <p style="text-indent:0px;"> </p>
| + | |
| − | <br>
| + | |
| − | <br>
| + | |
| − | <br>
| + | |
| − | </div>
| + | |
| − | | + | |
| − | <script>
| + | |
| − | var cont = document.getElementById("micro_3");
| + | |
| − | var vign_back_lis = cont.getElementsByClassName("vignette_back");
| + | |
| − | var i;
| + | |
| − | | + | |
| − | for (i = 0; i < vign_back_lis.length; i++) {
| + | |
| − | vign_back_lis[i].addEventListener("click", function() {
| + | |
| − | var cont = document.getElementById("micro_3");
| + | |
| − | var vign_back_lis = cont.getElementsByClassName("vignette_back");
| + | |
| − | var cont_index = "03";
| + | |
| − | /*get clicked element index*/
| + | |
| − | var index = String(this.id).substring(7,9);
| + | |
| − | | + | |
| − | /*locate elements to move*/
| + | |
| − | var panel = document.getElementById("pan_"+cont_index+index);
| + | |
| − | var vignFor = this.previousElementSibling;
| + | |
| − | var vignText = this.nextElementSibling;
| + | |
| − | /*move it*/
| + | |
| − | if (panel.style.maxHeight){
| + | |
| − | | + | |
| − | /*close it*/
| + | |
| − | panel.style.maxHeight = null;
| + | |
| − | vignFor.style.opacity = 1;
| + | |
| − | vignText.style.opacity = 0.8;
| + | |
| − | vignText.style.top = "4em";
| + | |
| − | }
| + | |
| − | else {
| + | |
| − |
| + | |
| − | /*find active element*/
| + | |
| − | var j;
| + | |
| − | var index_act = -1 ;
| + | |
| − | var el_foc;
| + | |
| − | for (j = 0; j < vign_back_lis.length; j++) {
| + | |
| − | if (j<10) {
| + | |
| − | el_foc=document.getElementById("pan_" + cont_index + "0" + j);
| + | |
| − | if (el_foc.style.maxHeight != 0) {
| + | |
| − | index_act="0"+j;
| + | |
| − | break;
| + | |
| − | }
| + | |
| − | } else {
| + | |
| − | el_foc=document.getElementById("pan_" + cont_index + j);
| + | |
| − | if (el_foc.style.maxHeight != 0) {
| + | |
| − | index_act=j;
| + | |
| − | break;
| + | |
| − | }
| + | |
| − | }
| + | |
| − | }
| + | |
| − | if (index_act != -1) {
| + | |
| − | /*close active element*/
| + | |
| − | var panel_act = document.getElementById("pan_"+cont_index+index_act);
| + | |
| − | var back_act = document.getElementById("back_"+cont_index+index_act);
| + | |
| − | var for_act=back_act.previousElementSibling;
| + | |
| − | var text_act=back_act.nextElementSibling;
| + | |
| − | panel_act.style.maxHeight = null;
| + | |
| − | for_act.style.opacity = 1;
| + | |
| − | text_act.style.opacity = 0.8;
| + | |
| − | text_act.style.top = "4em";
| + | |
| − | }
| + | |
| − | | + | |
| − | /*open clicked element*/
| + | |
| − | panel.style.maxHeight = panel.scrollHeight + "px";
| + | |
| − | vignFor.style.opacity = 0;
| + | |
| − | vignText.style.opacity = 1;
| + | |
| − | vignText.style.top = "15em";
| + | |
| − | }
| + | |
| − | });
| + | |
| − | }
| + | |
| − | | + | |
| − | </script>
| + | |
| − | | + | |
| − | </div>
| + | |
| − | | + | |
| − | | + | |
| − | | + | |
| − | | + | |
| − | | + | |
| − | | + | |
| − | | + | |
| − | | + | |
| − | | + | |
| − | | + | |
| − | | + | |
| − | | + | |
| − | | + | |
| − | | + | |
| − | | + | |
| − | | + | |
| − | | + | |
| − | <div class="block separator-mark">
| + | |
| − | </div>
| + | |
| − | | + | |
| − | <div class="block full" id="micro_1" style="display:flex;flex-flow: row wrap;justify-content:center;margin:auto;">
| + | |
| − | | + | |
| − | <h2 style="order:1;width:100%">Microfluidics: well chip</h2>
| + | |
| − | | + | |
| − | <p style="text-indent:0px;order:2;margin:2em;width:100%"> The well chip was designed and assembled by our team. It was used to test the biocompatibility of our membranes, as well as the culture of bacteria in the presence of current. Here we show how the molds were made, how the chip itself was assembled, how well's conductivity was measured and how biofilm culture was performed on it. </p>
| + | |
| − | | + | |
| − | <div class="vignette" id="vign_0100">
| + | |
| − | <div class="vignette_for" id="for_0100">
| + | |
| − | </div>
| + | |
| − |
| + | |
| − | <div class="vignette_back" id="back_0100">
| + | |
| − | </div>
| + | |
| − |
| + | |
| − | <div class="vignette_text">
| + | |
| − | <p style="margin:auto; text-align:center;font-weight:bold;">PDMS Well Chip Mold Fabrication</p>
| + | |
| − | </div>
| + | |
| − | </div>
| + | |
| − | | + | |
| − | <div class="vignette" id="vign_0101">
| + | |
| − | <div class="vignette_for" id="for_0101">
| + | |
| − | </div>
| + | |
| − |
| + | |
| − | <div class="vignette_back" id="back_0101">
| + | |
| − | </div>
| + | |
| − |
| + | |
| − | <div class="vignette_text">
| + | |
| − | <p style="margin:auto; text-align:center;font-weight:bold;">PDMS Well Chip Fabrication</p>
| + | |
| − | </div>
| + | |
| − | </div>
| + | |
| − | | + | |
| − | <div class="vignette" id="vign_0102">
| + | |
| − | <div class="vignette_for" id="for_0102">
| + | |
| − | </div>
| + | |
| − |
| + | |
| − | <div class="vignette_back" id="back_0102">
| + | |
| − | </div>
| + | |
| − |
| + | |
| − | <div class="vignette_text">
| + | |
| − | <p style="margin:auto; text-align:center;font-weight:bold;">PDMS Well Chip Conductivity Measurement</p>
| + | |
| − | </div>
| + | |
| − | </div>
| + | |
| − | | + | |
| − | | + | |
| − | | + | |
| − | <div class="panel" id="pan_0100" style="text-align:left;">
| + | |
| − | <div class="close_button">
| + | |
| − | </div>
| + | |
| − | <br>
| + | |
| − | <br>
| + | |
| − | <br>
| + | |
| − | <p style="text-indent:0px;"> Molds were made of aluminium according to the following plans. Part 1 Mold's center cylinder part is detachable from the bottom to make the demolding ot PDMS easier. </p>
| + | |
| − | <br>
| + | |
| − | <div style="position:relative;left:13em;">
| + | |
| − | <img src="https://static.igem.org/mediawiki/2018/2/29/T--Pasteur_Paris--PDMS_well_chip_mold_plans.jpg" alt="PDMS Well Chip Mold Plans" style="width:60%;">
| + | |
| − | </div>
| + | |
| − | <br>
| + | |
| − | <br>
| + | |
| − | </div>
| + | |
| − | | + | |
| − | | + | |
| − | <div class="panel" id="pan_0101" style="text-align:left;">
| + | |
| − | <div class="close_button">
| + | |
| − | </div>
| + | |
| − | <br>
| + | |
| − | <h3>Materials</h3>
| + | |
| − | <ul>
| + | |
| − | <li> Molds </li>
| + | |
| − | <li> Syringe without needle </li>
| + | |
| − | <li> Platinum 24mm x 2 mm strip </li>
| + | |
| − | <li> Circular 13mm diameter membrane </li>
| + | |
| − | </ul>
| + | |
| − | <br>
| + | |
| − | <h3>Protocol</h3>
| + | |
| − | <br>
| + | |
| − | | + | |
| − | <ol>
| + | |
| − | <li> Prepare 15g of PDMS monomer using our protocol, section 1. Replace step 5 by : Fill the syringe with PDMS. Fill part 1 mold until it's full and part 2 mold until the PDMS layer is more or less 1 cm thick. </li>
| + | |
| − | <li> Demold the chip following our protocol, section 2. Ignore step 2. </li>
| + | |
| − | <li> Put membrane and platinum strip on PDMS part 1. </li>
| + | |
| − | <li> Refer to our protocol, section 3 to bond PDMS part 2 to the PDMS part prepared in the previous step.</li>
| + | |
| − | <li> Apply a small layer of PDMS with the syringe on the contact zone of the PDMS part 2 and the platinum strip. </li>
| + | |
| − | <li> Put the chip in the stove for 3 hours. </li>
| + | |
| − | </ol>
| + | |
| − | <br>
| + | |
| − | <div class="protocol_box">
| + | |
| − | <p> Get full protocol here </p>
| + | |
| − | </div>
| + | |
| − | <br>
| + | |
| − | </div>
| + | |
| − | | + | |
| − | | + | |
| − | <div class="panel" id="pan_0102" style="text-align:left;">
| + | |
| − | <div class="close_button">
| + | |
| − | </div>
| + | |
| − | <br>
| + | |
| − | <h3>Materials</h3>
| + | |
| − | <ul>
| + | |
| − | <li> Oscilloscope </li>
| + | |
| − | <li> Function generator </li>
| + | |
| − | <li> Solderless breadboard assembly </li>
| + | |
| − | <li> Electric wires with banana connectors </li>
| + | |
| − | <li> Coaxial cable </li>
| + | |
| − | <li> Male BCN to 2 female banana connectors converter </li>
| + | |
| − | <li> BNC Splitter </li>
| + | |
| − | <li> 1 kOhm resistor
| + | |
| − | </li>
| + | |
| − | </ul>
| + | |
| − | <br>
| + | |
| − | <h3>Protocol</h3>
| + | |
| − | <br>
| + | |
| − | | + | |
| − | <ol>
| + | |
| − | <li> Reproduce the following electric circuit. </li>
| + | |
| − | <br>
| + | |
| − | | + | |
| − | <div style="position:relative;left:13em;">
| + | |
| − | <img src="https://static.igem.org/mediawiki/2018/b/bb/T--Pasteur_Paris--Electrical_circuit_1.pdf" alt="Electric circuit 1" style="width:50%;">
| + | |
| − | </div>
| + | |
| − | <br>
| + | |
| − | <li> Set function generator on sine, no offset, 4.5 V amplitude. </li>
| + | |
| − | <li> Measure Y2 peak-to-peak amplitude and Y2's phase relative to Y1.</li>
| + | |
| − | | + | |
| − | </ol>
| + | |
| − | <br>
| + | |
| − | <div class="protocol_box">
| + | |
| − | <p> Get full protocol here </p>
| + | |
| − | </div>
| + | |
| − | <br>
| + | |
| − | </div>
| + | |
| − | | + | |
| − | | + | |
| − | | + | |
| − | <script>
| + | |
| − | var cont = document.getElementById("micro_1");
| + | |
| − | var vign_back_lis = cont.getElementsByClassName("vignette_back");
| + | |
| − | var i;
| + | |
| − | | + | |
| − | for (i = 0; i < vign_back_lis.length; i++) {
| + | |
| − | vign_back_lis[i].addEventListener("click", function() {
| + | |
| − | var cont = document.getElementById("micro_1");
| + | |
| − | var vign_back_lis = cont.getElementsByClassName("vignette_back");
| + | |
| − | var cont_index = "01";
| + | |
| − | /*get clicked element index*/
| + | |
| − | var index = String(this.id).substring(7,9);
| + | |
| − | | + | |
| − | /*locate elements to move*/
| + | |
| − | var panel = document.getElementById("pan_"+cont_index+index);
| + | |
| − | var vignFor = this.previousElementSibling;
| + | |
| − | var vignText = this.nextElementSibling;
| + | |
| − | /*move it*/
| + | |
| − | if (panel.style.maxHeight){
| + | |
| − | | + | |
| − | /*close it*/
| + | |
| − | panel.style.maxHeight = null;
| + | |
| − | vignFor.style.opacity = 1;
| + | |
| − | vignText.style.opacity = 0.8;
| + | |
| − | vignText.style.top = "4em";
| + | |
| − | }
| + | |
| − | else {
| + | |
| − |
| + | |
| − | /*find active element*/
| + | |
| − | var j;
| + | |
| − | var index_act = -1 ;
| + | |
| − | var el_foc;
| + | |
| − | for (j = 0; j < vign_back_lis.length; j++) {
| + | |
| − | if (j<10) {
| + | |
| − | el_foc=document.getElementById("pan_" + cont_index + "0" + j);
| + | |
| − | if (el_foc.style.maxHeight != 0) {
| + | |
| − | index_act="0"+j;
| + | |
| − | break;
| + | |
| − | }
| + | |
| − | } else {
| + | |
| − | el_foc=document.getElementById("pan_" + cont_index + j);
| + | |
| − | if (el_foc.style.maxHeight != 0) {
| + | |
| − | index_act=j;
| + | |
| − | break;
| + | |
| − | }
| + | |
| − | }
| + | |
| − | }
| + | |
| − | if (index_act != -1) {
| + | |
| − | /*close active element*/
| + | |
| − | var panel_act = document.getElementById("pan_"+cont_index+index_act);
| + | |
| − | var back_act = document.getElementById("back_"+cont_index+index_act);
| + | |
| − | var for_act=back_act.previousElementSibling;
| + | |
| − | var text_act=back_act.nextElementSibling;
| + | |
| − | panel_act.style.maxHeight = null;
| + | |
| − | for_act.style.opacity = 1;
| + | |
| − | text_act.style.opacity = 0.8;
| + | |
| − | text_act.style.top = "4em";
| + | |
| − | }
| + | |
| − | | + | |
| − | /*open clicked element*/
| + | |
| − | panel.style.maxHeight = panel.scrollHeight + "px";
| + | |
| − | vignFor.style.opacity = 0;
| + | |
| − | vignText.style.opacity = 1;
| + | |
| − | vignText.style.top = "15em";
| + | |
| − | }
| + | |
| − | });
| + | |
| − | }
| + | |
| − | | + | |
| − | </script>
| + | |
| − | | + | |
| − | </div>
| + | |
| − | | + | |
| − | | + | |
| − | | + | |
| − | | + | |
| − | | + | |
| − | | + | |
| − | | + | |
| − | | + | |
| − | | + | |
| − | | + | |
| − | | + | |
| − | | + | |
| − | | + | |
| − | | + | |
| − | | + | |
| − | | + | |
| − | <div class="block separator-mark">
| + | |
| − | </div>
| + | |
| − | | + | |
| − | <div class="block full" id="micro_2" style="display:flex;flex-flow: row wrap;justify-content:center;margin:auto;">
| + | |
| − | | + | |
| − | <h2 style="order:1;width:100%">Microfluidics: microchannel chip</h2>
| + | |
| − | | + | |
| − | <p style="text-indent:0px;order:2;margin:2em;width:100%"> We used the microchannel chip to test the effect of NGF on the neuron's growth. </p>
| + | |
| − | | + | |
| − | <div class="vignette" id="vign_0200">
| + | |
| − | <div class="vignette_for" id="for_0200">
| + | |
| − | </div>
| + | |
| − |
| + | |
| − | <div class="vignette_back" id="back_0200">
| + | |
| − | </div>
| + | |
| − | | + | |
| − | <div class="vignette_text">
| + | |
| − | <p style="margin:auto; text-align:center;font-weight:bold;">PDMS Microchannel Chip Mold Fabrication</p>
| + | |
| − | </div>
| + | |
| − | </div>
| + | |
| − | | + | |
| − | <div class="panel" id="pan_0200" style="text-align:left;">
| + | |
| − | <div class="close_button">
| + | |
| − | </div>
| + | |
| − | <br>
| + | |
| − | <br>
| + | |
| − | <br>
| + | |
| − | <p style="text-indent:0px;"> We were allowed to use the molds made by Institut Curie. We were not involved in the process of their fabrication. Here is a short video we made about how these molds were created. </p>
| + | |
| − | <br>
| + | |
| − | | + | |
| − | <iframe width="854" height="480" src="https://www.youtube.com/embed/3ivw0Yeeve4" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
| + | |
| − | <br>
| + | |
| − | <br>
| + | |
| − | </div>
| + | |
| − | | + | |
| − | <script>
| + | |
| − | var cont = document.getElementById("micro_2");
| + | |
| − | var vign_back_lis = cont.getElementsByClassName("vignette_back");
| + | |
| − | var i;
| + | |
| − | | + | |
| − | for (i = 0; i < vign_back_lis.length; i++) {
| + | |
| − | vign_back_lis[i].addEventListener("click", function() {
| + | |
| − | var cont = document.getElementById("micro_2");
| + | |
| − | var vign_back_lis = cont.getElementsByClassName("vignette_back");
| + | |
| − | var cont_index = "02";
| + | |
| − | /*get clicked element index*/
| + | |
| − | var index = String(this.id).substring(7,9);
| + | |
| − | | + | |
| − | /*locate elements to move*/
| + | |
| − | var panel = document.getElementById("pan_"+cont_index+index);
| + | |
| − | var vignFor = this.previousElementSibling;
| + | |
| − | var vignText = this.nextElementSibling;
| + | |
| − | /*move it*/
| + | |
| − | if (panel.style.maxHeight){
| + | |
| − | | + | |
| − | /*close it*/
| + | |
| − | panel.style.maxHeight = null;
| + | |
| − | vignFor.style.opacity = 1;
| + | |
| − | vignText.style.opacity = 0.8;
| + | |
| − | vignText.style.top = "4em";
| + | |
| − | }
| + | |
| − | else {
| + | |
| − |
| + | |
| − | /*find active element*/
| + | |
| − | var j;
| + | |
| − | var index_act = -1 ;
| + | |
| − | var el_foc;
| + | |
| − | for (j = 0; j < vign_back_lis.length; j++) {
| + | |
| − | if (j<10) {
| + | |
| − | el_foc=document.getElementById("pan_" + cont_index + "0" + j);
| + | |
| − | if (el_foc.style.maxHeight != 0) {
| + | |
| − | index_act="0"+j;
| + | |
| − | break;
| + | |
| − | }
| + | |
| − | } else {
| + | |
| − | el_foc=document.getElementById("pan_" + cont_index + j);
| + | |
| − | if (el_foc.style.maxHeight != 0) {
| + | |
| − | index_act=j;
| + | |
| − | break;
| + | |
| − | }
| + | |
| − | }
| + | |
| − | }
| + | |
| − | if (index_act != -1) {
| + | |
| − | /*close active element*/
| + | |
| − | var panel_act = document.getElementById("pan_"+cont_index+index_act);
| + | |
| − | var back_act = document.getElementById("back_"+cont_index+index_act);
| + | |
| − | var for_act=back_act.previousElementSibling;
| + | |
| − | var text_act=back_act.nextElementSibling;
| + | |
| − | panel_act.style.maxHeight = null;
| + | |
| − | for_act.style.opacity = 1;
| + | |
| − | text_act.style.opacity = 0.8;
| + | |
| − | text_act.style.top = "4em";
| + | |
| − | }
| + | |
| − | | + | |
| − | /*open clicked element*/
| + | |
| − | panel.style.maxHeight = panel.scrollHeight + "px";
| + | |
| − | vignFor.style.opacity = 0;
| + | |
| − | vignText.style.opacity = 1;
| + | |
| − | vignText.style.top = "15em";
| + | |
| − | }
| + | |
| − | });
| + | |
| − | }
| + | |
| − | | + | |
| − | </script>
| + | |
| − | | + | |
| − | </div>
| + | |
| − | | + | |
| − | | + | |
| − | | + | |
| − | | + | |
| − | | + | |
| − | | + | |
| − | | + | |
| − | | + | |
| − |
| + | |
| − | <script>
| + | |
| − | | + | |
| − | /*panels and vignettes flexbox automatic order*/
| + | |
| − | | + | |
| − | function redim() {
| + | |
| − | if("matchMedia" in window) {
| + | |
| − | var vign_lis = document.getElementsByClassName("vignette");
| + | |
| − | var pan_lis = document.getElementsByClassName("panel");
| + | |
| − | var i;
| + | |
| − | if(window.matchMedia("(min-width:850px)").matches) {
| + | |
| − | /*big*/
| + | |
| − | for (i = 0; i < vign_lis.length; i++) {
| + | |
| − | var act_vign = vign_lis[i];
| + | |
| − | var act_pan = pan_lis[i];
| + | |
| − | var index = String(act_vign.id).substring(7,9);
| + | |
| − | switch (index) {
| + | |
| − | case '00':
| + | |
| − | act_vign.style.order="3";
| + | |
| − | act_pan.style.order="6" ;
| + | |
| − | break;
| + | |
| − | case '01':
| + | |
| − | act_vign.style.order="4";
| + | |
| − | act_pan.style.order="7";
| + | |
| − | break;
| + | |
| − | case '02':
| + | |
| − | act_vign.style.order="5";
| + | |
| − | act_pan.style.order="8";
| + | |
| − | break;
| + | |
| − | case '03':
| + | |
| − | act_vign.style.order="9";
| + | |
| − | act_pan.style.order="12";
| + | |
| − | break;
| + | |
| − | case '04':
| + | |
| − | act_vign.style.order="10";
| + | |
| − | act_pan.style.order="13";
| + | |
| − | break;
| + | |
| − | case '05':
| + | |
| − | act_vign.style.order="11";
| + | |
| − | act_pan.style.order="14";
| + | |
| − | break;
| + | |
| − | case '06':
| + | |
| − | act_vign.style.order="15";
| + | |
| − | act_pan.style.order="18";
| + | |
| − | break;
| + | |
| − | case '07':
| + | |
| − | act_vign.style.order="16";
| + | |
| − | act_pan.style.order="19";
| + | |
| − | break;
| + | |
| − | }
| + | |
| − | }
| + | |
| − | } else if (window.matchMedia("(max-width:760px)").matches) {
| + | |
| − | /* very small*/
| + | |
| − | for (i = 0; i < vign_lis.length; i++) {
| + | |
| − | var act_vign = vign_lis[i];
| + | |
| − | var act_pan = pan_lis[i];
| + | |
| − | var index = String(act_vign.id).substring(7,9);
| + | |
| − | switch (index) {
| + | |
| − | case '00':
| + | |
| − | act_vign.style.order="3";
| + | |
| − | act_pan.style.order="4" ;
| + | |
| − | break;
| + | |
| − | case '01':
| + | |
| − | act_vign.style.order="5";
| + | |
| − | act_pan.style.order="6";
| + | |
| − | break;
| + | |
| − | case '02':
| + | |
| − | act_vign.style.order="7";
| + | |
| − | act_pan.style.order="8";
| + | |
| − | break;
| + | |
| − | case '03':
| + | |
| − | act_vign.style.order="9";
| + | |
| − | act_pan.style.order="10";
| + | |
| − | break;
| + | |
| − | case '04':
| + | |
| − | act_vign.style.order="11";
| + | |
| − | act_pan.style.order="12";
| + | |
| − | break;
| + | |
| − | case '05':
| + | |
| − | act_vign.style.order="12";
| + | |
| − | act_pan.style.order="13";
| + | |
| − | break;
| + | |
| − | case '06':
| + | |
| − | act_vign.style.order="14";
| + | |
| − | act_pan.style.order="15";
| + | |
| − | break;
| + | |
| − | case '07':
| + | |
| − | act_vign.style.order="16";
| + | |
| − | act_pan.style.order="17";
| + | |
| − | break;
| + | |
| − | }
| + | |
| − | }
| + | |
| − | } else {
| + | |
| − | /*small*/
| + | |
| − | for (i = 0; i < vign_lis.length; i++) {
| + | |
| − | var act_vign = vign_lis[i];
| + | |
| − | var act_pan = pan_lis[i];
| + | |
| − | var index = String(act_vign.id).substring(7,9);
| + | |
| − | switch (index) {
| + | |
| − | case '00':
| + | |
| − | act_vign.style.order="3";
| + | |
| − | act_pan.style.order="5" ;
| + | |
| − | break;
| + | |
| − | case '01':
| + | |
| − | act_vign.style.order="4";
| + | |
| − | act_pan.style.order="6";
| + | |
| − | break;
| + | |
| − | case '02':
| + | |
| − | act_vign.style.order="7";
| + | |
| − | act_pan.style.order="9";
| + | |
| − | break;
| + | |
| − | case '03':
| + | |
| − | act_vign.style.order="8";
| + | |
| − | act_pan.style.order="10";
| + | |
| − | break;
| + | |
| − | case '04':
| + | |
| − | act_vign.style.order="11";
| + | |
| − | act_pan.style.order="13";
| + | |
| − | break;
| + | |
| − | case '05':
| + | |
| − | act_vign.style.order="12";
| + | |
| − | act_pan.style.order="14";
| + | |
| − | break;
| + | |
| − | case '06':
| + | |
| − | act_vign.style.order="15";
| + | |
| − | act_pan.style.order="17";
| + | |
| − | break;
| + | |
| − | case '07':
| + | |
| − | act_vign.style.order="16";
| + | |
| − | act_pan.style.order="18";
| + | |
| − | break;
| + | |
| − | }
| + | |
| − | }
| + | |
| − | }
| + | |
| − | }
| + | |
| − | }
| + | |
| − | | + | |
| − | window.addEventListener('resize', redim, false);
| + | |
| − | | + | |
| − | redim();
| + | |
| − | | + | |
| − | </script>
| + | |
| − | | + | |
| − | | + | |
| − | | + | |
| − | | + | |
| − | | + | |
| − | | + | |
| − | | + | |
| − | | + | |
| − | | + | |
| − | | + | |
| − | <script>
| + | |
| − | | + | |
| − | /*close buttons*/
| + | |
| − | | + | |
| − | var acc = document.getElementsByClassName("close_button");
| + | |
| − | | + | |
| − | for (i = 0; i < acc.length; i++) {
| + | |
| − | acc[i].addEventListener("click", function() {
| + | |
| − | var panel = this.parentElement;
| + | |
| − | var index = String(panel.id).substring(4,8);
| + | |
| − | var vignBack = document.getElementById("back_"+index);
| + | |
| − | var vignFor = vignBack.previousElementSibling;
| + | |
| − | var vignText = vignBack.nextElementSibling;
| + | |
| − | panel.style.maxHeight = null;
| + | |
| − | vignFor.style.opacity = 1;
| + | |
| − | vignText.style.opacity = 0.8;
| + | |
| − | vignText.style.top = "4em";
| + | |
| − | });
| + | |
| − | }
| + | |
| − | | + | |
| − | | + | |
| − | </script>
| + | |
| − | | + | |
| − | | + | |
| − | <br>
| + | |
| − | <br>
| + | |
| − | <br>
| + | |
| − | <br>
| + | |
| | | | |
| | | | |
