Difference between revisions of "Team:UMaryland/education"

 
(48 intermediate revisions by 2 users not shown)
Line 18: Line 18:
 
<link href='http://sachinchoolur.github.io/lightGallery/lightgallery/css/lightgallery.css' rel='stylesheet' type='text/css'>
 
<link href='http://sachinchoolur.github.io/lightGallery/lightgallery/css/lightgallery.css' rel='stylesheet' type='text/css'>
 
<title>Building with Biology</title>
 
<title>Building with Biology</title>
 +
<style>
 +
/* Slider */ .slick-slider { position: relative; display: block; box-sizing: border-box; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; -webkit-touch-callout: none; -khtml-user-select: none; -ms-touch-action: pan-y; touch-action: pan-y; -webkit-tap-highlight-color: transparent; } .slick-list { position: relative; display: block; overflow: hidden; margin: 0; padding: 0; } .slick-list:focus { outline: none; } .slick-list.dragging { cursor: pointer; cursor: hand; } .slick-slider .slick-track, .slick-slider .slick-list { -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); -o-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } .slick-track { position: relative; top: 0; left: 0; display: block; } .slick-track:before, .slick-track:after { display: table; content: ''; } .slick-track:after { clear: both; } .slick-loading .slick-track { visibility: hidden; } .slick-slide { display: none; float: left; height: 100%; min-height: 1px; } [dir='rtl'] .slick-slide { float: right; } .slick-slide img { display: block; } .slick-slide.slick-loading img { display: none; } .slick-slide.dragging img { pointer-events: none; } .slick-initialized .slick-slide { display: block; } .slick-loading .slick-slide { visibility: hidden; } .slick-vertical .slick-slide { display: block; height: auto; border: 1px solid transparent; } .slick-arrow.slick-hidden { display: none; } .slick-arrow { background-color: #B0B0B0;}
 +
</style>
 +
<style>
 +
@charset 'UTF-8'; /* Slider */ .slick-loading .slick-list { background: #fff url('https://static.igem.org/mediawiki/2016/8/85/T--UMaryland--ajax-loader.gif') center center no-repeat; } /* Icons */ @font-face { font-family: 'slick'; font-weight: normal; font-style: normal; src: url('./fonts/slick.eot'); src: url('./fonts/slick.eot?#iefix') format('embedded-opentype'), url('https://static.igem.org/mediawiki/2016/a/a9/T--UMaryland--slick.woff') format('woff'), url('https://static.igem.org/mediawiki/2016/b/b8/T--UMaryland--slick.ttf') format('truetype'), url('./fonts/slick.svg#slick') format('svg'); } /* Arrows */ .slick-prev, .slick-next { font-size: 0; line-height: 0; position: absolute; top: 50%; display: block; width: 20px; height: 20px; padding: 0; -webkit-transform: translate(0, -50%); -ms-transform: translate(0, -50%); transform: translate(0, -50%); cursor: pointer; color: transparent; border: none; outline: none; background: transparent; } .slick-prev:hover, .slick-prev:focus, .slick-next:hover, .slick-next:focus { color: transparent; outline: none; background: transparent; } .slick-prev:hover:before, .slick-prev:focus:before, .slick-next:hover:before, .slick-next:focus:before { opacity: 1; } .slick-prev.slick-disabled:before, .slick-next.slick-disabled:before { opacity: .25; } .slick-prev:before, .slick-next:before { font-family: 'slick'; font-size: 25px; line-height: 1; opacity: .75; color: #808080; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .slick-prev { left: -25px; } [dir='rtl'] .slick-prev { right: -25px; left: auto; } .slick-prev:before { content: '←'; } [dir='rtl'] .slick-prev:before { content: '→'; } .slick-next { right: -25px; } [dir='rtl'] .slick-next { right: auto; left: -25px; } .slick-next:before { content: '→'; } [dir='rtl'] .slick-next:before { content: '←'; } /* Dots */ .slick-dotted.slick-slider { margin-bottom: 30px; } .slick-dots { position: absolute; bottom: -25px; display: block; width: 100%; padding: 0; margin: 0; list-style: none; text-align: center; } .slick-dots li { position: relative; display: inline-block; width: 20px; height: 20px; margin: 0 5px; padding: 0; cursor: pointer; } .slick-dots li button { font-size: 0; line-height: 0; display: block; width: 20px; height: 20px; padding: 5px; cursor: pointer; color: transparent; border: 0; outline: none; background: transparent; } .slick-dots li button:hover, .slick-dots li button:focus { outline: none; } .slick-dots li button:hover:before, .slick-dots li button:focus:before { opacity: 1; } .slick-dots li button:before { font-family: 'slick'; font-size: 6px; line-height: 20px; position: absolute; top: 0; left: 0; width: 20px; height: 20px; content: '•'; text-align: center; opacity: .25; color: black; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .slick-dots li.slick-active button:before { opacity: .75; color: black; }
 +
</style>
 +
<script src="https://static.igem.org/mediawiki/2016/d/d3/T--UMaryland--slick.txt" type="text/javascript">
 +
</script>
 
</head>
 
</head>
 
<body>
 
<body>
Line 256: Line 264:
  
 
         /* Title */
 
         /* Title */
         h1 {
+
         h1, h4 {
            font-size: 30pt;
+
 
             position: absolute;  
 
             position: absolute;  
 
             top: 372px;
 
             top: 372px;
Line 266: Line 273:
 
             font-family: 'Lora', serif;
 
             font-family: 'Lora', serif;
 
             font-weight: normal !important;
 
             font-weight: normal !important;
 +
            overflow: visible;
 +
        }
 +
 +
        h1 {
 
             background: rgb(0, 0, 0); /* fallback color */
 
             background: rgb(0, 0, 0); /* fallback color */
 
             background: rgba(0, 0, 0, 0.7);
 
             background: rgba(0, 0, 0, 0.7);
 
             padding-left: 10px;
 
             padding-left: 10px;
             padding-bottom: 22px;  
+
             padding-bottom: 14px;  
 
         }
 
         }
  
 
         h2, h3 {
 
         h2, h3 {
            font-size: 30pt;
 
 
             position: absolute;  
 
             position: absolute;  
 
             top: 281px;
 
             top: 281px;
Line 292: Line 302:
 
             padding-left: 10px;
 
             padding-left: 10px;
 
             padding-top: 1px;
 
             padding-top: 1px;
 +
            letter-spacing: -1px; 
 +
            background: rgb(0, 0, 0); /* fallback color */
 +
            background: rgba(0, 0, 0, 0.7);
 +
        }
 +
 +
        h4 span {
 +
            color: white;
 +
            padding-bottom: 4px;
 +
            padding-right: 10px;
 +
            padding-left: 10px;
 +
            padding-top: 6px;
 
             letter-spacing: -1px;   
 
             letter-spacing: -1px;   
 
             background: rgb(0, 0, 0); /* fallback color */
 
             background: rgb(0, 0, 0); /* fallback color */
Line 309: Line 330:
 
             max-width: 202px;
 
             max-width: 202px;
 
             min-width: 202px;
 
             min-width: 202px;
 +
            font-size: 30pt;
 
         }
 
         }
  
Line 314: Line 336:
 
             max-width: 702px;
 
             max-width: 702px;
 
             min-width: 702px;
 
             min-width: 702px;
 +
            font-size: 30pt;
 +
        }
 +
#h25 {
 +
            max-width: 420px;
 +
            min-width: 420px;
 +
            font-size: 30pt;
 +
        }
 +
 +
        h4 {
 +
            font-size: 24pt;
 +
            margin-top: -4px;
 +
        }
 +
 +
        h3 {
 +
            font-size: 24pt;
 +
            margin-top: -1px;
 
         }
 
         }
  
 
         /* Content */   
 
         /* Content */   
  
         #div-content img {
+
         .div-content img {
 
             width: 457px;
 
             width: 457px;
 
             height: 305px;
 
             height: 305px;
 
         }
 
         }
  
         #div-content p {
+
         .div-content p {
 
             margin-left: 40px;
 
             margin-left: 40px;
 
             max-width: 500px;
 
             max-width: 500px;
Line 329: Line 367:
 
             line-height: 2;
 
             line-height: 2;
 
             font-weight: 400;
 
             font-weight: 400;
 +
            text-align: left;
 
         }
 
         }
  
Line 340: Line 379:
 
             margin-top: 100px;
 
             margin-top: 100px;
 
             margin-bottom: 30px;
 
             margin-bottom: 30px;
            margin-left: auto;
 
            margin-right: auto;
 
            width: 1028px;
 
 
         }
 
         }
  
Line 349: Line 385:
 
             text-align: center;  
 
             text-align: center;  
 
             width: 500px;
 
             width: 500px;
 +
height: 40px;
 
         }
 
         }
  
Line 361: Line 398:
 
         #table-selector1 th p {
 
         #table-selector1 th p {
 
             font-size: 24pt;
 
             font-size: 24pt;
             font-family: 'Lora', serif;
+
             font-family: 'Raleway', sans-serif;
 
             padding: 5px 0px 15px 0px;
 
             padding: 5px 0px 15px 0px;
 
         }
 
         }
Line 376: Line 413:
  
 
         #table-selector1, #table-selector2 {
 
         #table-selector1, #table-selector2 {
 +
            width: 1028px;
 +
            margin-left: auto;
 +
            margin-right: auto;
 
             /* makes a single border between two cells rather than two */
 
             /* makes a single border between two cells rather than two */
 
             border-collapse: collapse;
 
             border-collapse: collapse;
Line 382: Line 422:
 
         #div-lowertable {
 
         #div-lowertable {
 
             margin-top: -31px;
 
             margin-top: -31px;
        }
+
min-height: 500px;
 
+
margin-bottom: 30px;
        #table-selector2 {
+
            max-width: 750px;
+
            margin-left: auto;
+
            margin-right: auto;
+
 
         }
 
         }
  
Line 416: Line 452:
 
         }
 
         }
  
         #div-content p {
+
         #th-building {
             text-align: left;
+
             padding-right: 13px;
 
         }
 
         }
  
Line 463: Line 499:
  
 
         .margin {
 
         .margin {
            min-width: 906px;
 
            max-width: 906px;
 
            margin-right: auto;
 
            margin-left: auto;
 
            padding-right: 270px;   
 
        }
 
 
        .margin2 {
 
 
             min-width: 1180px;
 
             min-width: 1180px;
 
             margin-right: auto;
 
             margin-right: auto;
 
             margin-left: auto;
 
             margin-left: auto;
             padding-left: 5px;
+
             padding-left: 5px  
 
         }
 
         }
  
Line 641: Line 669:
 
<div data-parallax="scroll" data-image-src="https://static.igem.org/mediawiki/2016/9/90/T--UMaryland--educationMain.jpg"id="img-education">
 
<div data-parallax="scroll" data-image-src="https://static.igem.org/mediawiki/2016/9/90/T--UMaryland--educationMain.jpg"id="img-education">
 
                 </div>
 
                 </div>
<h1 id="h1"><span>Education </span> </h1>
+
<h1 id="h1"><span>Education </span> </h1>
 +
        <h4><br/><br/><br/><span>Furthering the dialogue with the public about synthetic biology</span></h4>
 +
 
</div>
 
</div>
 
     <div class="image">
 
     <div class="image">
Line 650: Line 680:
 
     </div>
 
     </div>
 
     <div id="Info" class="centered">
 
     <div id="Info" class="centered">
<p class="pInfo"> We volunteered at the Building with Biology Event held at Port Discovery in Baltimore, Md to raise awareness about synthetic biology among children 8 and up. We manned six tables with different activities involving synthetic biology, which are described in more depth below. </p>
+
<p class="pInfo"> We volunteered at the Building with Biology Event held at Port Discovery in Baltimore, MD to raise awareness about synthetic biology among children 8 and up. We manned six tables with different activities involving synthetic biology, which are described in more depth below. </p>
 
     </div>
 
     </div>
     <div class="margin2">
+
     <div class="margin">
 
     <table id="table-selector1"> <!-- Table of navigational links -->
 
     <table id="table-selector1"> <!-- Table of navigational links -->
 
<thead>
 
<thead>
Line 676: Line 706:
 
             </table>
 
             </table>
 
             </div>
 
             </div>
           <div id="div-content">
+
           <div class="div-content">
 
                 <div id="div-super" class="profiles center clearfix float-my-children" style="display:block">
 
                 <div id="div-super" class="profiles center clearfix float-my-children" style="display:block">
 
                     <img src="https://static.igem.org/mediawiki/2016/1/10/T--UMaryland--superorganisms.jpg" id="img-super"/img>
 
                     <img src="https://static.igem.org/mediawiki/2016/1/10/T--UMaryland--superorganisms.jpg" id="img-super"/img>
                     <div><p> superhero station </p></div>
+
                     <div><p>At this station, visitors were introduced to two catastrophic situations that they needed to solve using their imaginations: 1) Their friend fell off of a skyscraper, and 2) Their friend caused a massive oil spill in the ocean. To tackle the first problem, kids designed a superhero that could shoot spiderwebs or fly to ultimately catch their friend. For the second problem, kids designed a super bacteria that could clean the ocean by detecting, degrading, or digesting oil. This activity served as a introduction of the possibilites of synthetic biology and genetic engineering.
 +
                        </p></div>
 
                 </div>
 
                 </div>
 
                 <div id="div-parts" class="profiles center clearfix float-my-children">
 
                 <div id="div-parts" class="profiles center clearfix float-my-children">
 
                     <img src="https://static.igem.org/mediawiki/2016/1/1f/T--UMaryland--kitofparts.jpg" id="img-parts"/img>
 
                     <img src="https://static.igem.org/mediawiki/2016/1/1f/T--UMaryland--kitofparts.jpg" id="img-parts"/img>
                     <div> <p> Visitors would learn about the concept of BioBricks and versatility of engineering cells to solve global issues. They were wooden model made of poles and color-coded parts that fit on the poles. Each color had a different function like red for production and blue for sensing. A visitor would pick a challenge card with an area of research on it ranging from making synthetic blood to treating malaria. On the back of the card was a description of a solution to the chosen problem using the parts given. </p> </div>
+
                     <div> <p> Visitors would learn about the concept of BioBricks and versatility of engineering cells to solve global issues. They used a cell model made of wooden poles and color-coded parts that fit on the poles. Each color had a different function like red for production and blue for sensing. A visitor would pick a challenge card with an area of research on it ranging from making synthetic blood to treating malaria. Then she would make a cell that would solve the problem using a solution description on the back of the card. </p> </div>
 
                 </div>
 
                 </div>
 
                 <div id="div-bistro" class="profiles center clearfix float-my-children">
 
                 <div id="div-bistro" class="profiles center clearfix float-my-children">
 
                     <img src="https://static.igem.org/mediawiki/2016/d/d2/T--UMaryland--biobistro.jpg" id="img-bistro"/img>
 
                     <img src="https://static.igem.org/mediawiki/2016/d/d2/T--UMaryland--biobistro.jpg" id="img-bistro"/img>
                     <div><p> bio bistro </p></div>
+
                     <div><p>Eat it? Think about it? No way? Visitors were introduced to a variety of engineered foods, both currently available and in development, and asked their opinion on consuming the goods. Items included vanilla flavoring, caffeine, and milk synthesized by yeast, a food pill that provided all daily nutrients, golden rice, and meat created in a lab. Participants were also introduced to different ways we have modified agriculture like selective breeding, genetic engineering, and synthetic biology.</p></div>
 
                 </div>
 
                 </div>
 
                 <div id="div-tech" class="profiles center clearfix float-my-children">
 
                 <div id="div-tech" class="profiles center clearfix float-my-children">
Line 705: Line 736:
 
             </table>
 
             </table>
 
             </div>
 
             </div>
             <div id="div-content">
+
             <div class="div-content">
 
                 <div id="div-bacteria" class="profiles center clearfix float-my-children">
 
                 <div id="div-bacteria" class="profiles center clearfix float-my-children">
 
                     <img src="https://static.igem.org/mediawiki/2016/8/8b/T--UMaryland--buildyourownbacteria.jpg" id="img-super"/img>
 
                     <img src="https://static.igem.org/mediawiki/2016/8/8b/T--UMaryland--buildyourownbacteria.jpg" id="img-super"/img>
                     <div><p> build your own bacteria </p></div>
+
                     <div><p>This station combines science, art and play to present an analogy for synthetic biology. First, participants used legos to build their own plasmid, mixing and matching different parts. Different legos were used as an analogy for BioBricks, and contained pieces such as promoters and terminators. Visitors were able to pick what physical characteristics they wanted their bacteria to have, such as body color and number of legs, by picking the appropriate lego BioBricks. Then, participants were able to draw the bacteria they just built on our worksheet. </p></div>
 
                 </div>
 
                 </div>
 
                 <div id="div-broth" class="profiles center clearfix float-my-children">
 
                 <div id="div-broth" class="profiles center clearfix float-my-children">
 
                     <img src="https://static.igem.org/mediawiki/2016/d/d9/T--UMaryland--broth.jpg" id="img-super"/img>
 
                     <img src="https://static.igem.org/mediawiki/2016/d/d9/T--UMaryland--broth.jpg" id="img-super"/img>
                     <div><p> lemonade</p></div>
+
                     <div><p>How do scientists feed their bacteria? Visitors learned about LB broth and were able to make their own “imitation LB broth” by mixing lemonade powder and water. To make their mixture, participants weighed out the proper amount of powder using a scale and measured out the correct amount of water using beakers.</p></div>
 
                 </div>
 
                 </div>
 
                 <div id="div-color" class="profiles center clearfix float-my-children">
 
                 <div id="div-color" class="profiles center clearfix float-my-children">
 
                     <img src="https://static.igem.org/mediawiki/2016/3/3a/T--UMaryland--pipette.jpg" id="img-super"/img>
 
                     <img src="https://static.igem.org/mediawiki/2016/3/3a/T--UMaryland--pipette.jpg" id="img-super"/img>
                     <div><p>food color </p></div>
+
                     <div><p>Science is an art! Participants were able to try pipetting food coloring into test tubes with water, and then mix different shades to make their own colorful creations.</p></div>
 
                 </div>
 
                 </div>
 
             </div>
 
             </div>
 
         </div>
 
         </div>
 
     </div>
 
     </div>
 +
<div class="image">
 +
        <div data-parallax="scroll" data-image-src="https://static.igem.org/mediawiki/2016/1/10/T--UMaryland--highschool.jpeg" id="img-portdiscovery">
 +
                    </div>
 +
<h2 id="h25"><span>River Hill High School</span> </h2>
 +
        <h3><br/><br/><br/><span>June 6th, 2016</span></h3>
 +
    </div>
 +
<div id="div-riverHill">
 +
<div class="highSchool">
 +
<p>UMaryland iGEM visited two AP Biology classes at River Hill High School located in Howard County to present and discuss a variety of synthetic biology topics. We explained what synthetic biology is, how it works, applications of genetic engineering, benefits / misconceptions of GMOs, and what iGEM is.</p>
 +
<p><a href="https://static.igem.org/mediawiki/2016/3/32/T--UMaryland--RiverHillPowerpoint.pdf">Download the Powerpoint in PDF format</a></p>
 +
</div>
 +
<div id="div-slideshow">
 +
<div><img src="https://static.igem.org/mediawiki/2016/9/9e/T--UMaryland--slide1.jpg" /></div>
 +
<div><img data-lazy="https://static.igem.org/mediawiki/2016/2/28/T--UMaryland--slide2.png" /></div>
 +
<div><img data-lazy="https://static.igem.org/mediawiki/2016/7/74/T--UMaryland--slide3.png"></div>
 +
<div> <img data-lazy="https://static.igem.org/mediawiki/2016/e/eb/T--UMaryland--slide4.png"></div>
 +
<div><img data-lazy="https://static.igem.org/mediawiki/2016/2/27/T--UMaryland--slide5.png"></div>
 +
<div> <img data-lazy="https://static.igem.org/mediawiki/2016/1/12/T--UMaryland--slide6.png"></div>
 +
<div><img data-lazy="https://static.igem.org/mediawiki/2016/c/ca/T--UMaryland--slide7.png"></div>
 +
<div><img data-lazy="https://static.igem.org/mediawiki/2016/c/cb/T--UMaryland--slide8.png"></div>
 +
<div> <img data-lazy="https://static.igem.org/mediawiki/2016/c/c0/T--UMaryland--slide9.png"></div>
 +
<div> <img data-lazy="https://static.igem.org/mediawiki/2016/4/4d/T--UMaryland--slide10.png"></div>
 +
<div> <img data-lazy="https://static.igem.org/mediawiki/2016/4/4d/T--UMaryland--slide11.png"></div>
 +
<div> <img data-lazy="https://static.igem.org/mediawiki/2016/f/fb/T--UMaryland--slide12.png"></div>
 +
<div> <img data-lazy="https://static.igem.org/mediawiki/2016/c/c1/T--UMaryland--slide13.png"></div>
 +
<div> <img data-lazy="https://static.igem.org/mediawiki/2016/3/38/T--UMaryland--slide14.png"></div>
 +
<div> <img data-lazy="https://static.igem.org/mediawiki/2016/8/85/T--UMaryland--slide15.png"></div>
 +
<div> <img data-lazy="https://static.igem.org/mediawiki/2016/1/1e/T--UMaryland--slide16.png"></div>
 +
<div> <img data-lazy="https://static.igem.org/mediawiki/2016/e/ef/T--UMaryland--slide17.png"></div>
 +
<div> <img data-lazy="https://static.igem.org/mediawiki/2016/e/e0/T--UMaryland--slide18.png"></div>
 +
<div> <img data-lazy="https://static.igem.org/mediawiki/2016/b/bf/T--UMaryland--slide19.png"></div>
 +
<div> <img data-lazy="https://static.igem.org/mediawiki/2016/7/7e/T--UMaryland--slide20.png"></div>
 +
<div> <img data-lazy="https://static.igem.org/mediawiki/2016/0/0d/T--UMaryland--slide21.png"></div>
 +
<div> <img data-lazy="https://static.igem.org/mediawiki/2016/4/4b/T--UMaryland--slide22.png"></div>
 +
<div> <img data-lazy="https://static.igem.org/mediawiki/2016/f/ff/T--UMaryland--slide23.png"></div>
 +
<div> <img data-lazy="https://static.igem.org/mediawiki/2016/4/41/T--UMaryland--slide24.png"></div>
 +
<div> <img data-lazy="https://static.igem.org/mediawiki/2016/c/c8/T--UMaryland--slide25.png"></div>
 +
<div> <img data-lazy="https://static.igem.org/mediawiki/2016/e/e9/T--UMaryland--slide26.png"></div>
 +
<div> <img data-lazy="https://static.igem.org/mediawiki/2016/0/0c/T--UMaryland--slide27.png"></div>
 +
<div> <img data-lazy="https://static.igem.org/mediawiki/2016/3/3a/T--UMaryland--slide28.png"></div>
 +
<div> <img data-lazy="https://static.igem.org/mediawiki/2016/d/d5/T--UMaryland--slide29.png"></div>
 +
<div> <img data-lazy="https://static.igem.org/mediawiki/2016/c/c4/T--UMaryland--slide30.png"></div>
 +
<div> <img data-lazy="https://static.igem.org/mediawiki/2016/d/db/T--UMaryland--slide31.png"></div>
 +
<div> <img data-lazy="https://static.igem.org/mediawiki/2016/7/7e/T--UMaryland--slide32.png"></div>
 +
<div> <img data-lazy="https://static.igem.org/mediawiki/2016/c/c8/T--UMaryland--slide33.png"></div>
 +
<div> <img data-lazy="https://static.igem.org/mediawiki/2016/4/41/T--UMaryland--slide.png"></div>
 +
<div> <img data-lazy="https://static.igem.org/mediawiki/2016/2/22/T--UMaryland--slide35.png"></div>
 +
</div>
 +
<div id="div-dots">
 +
</div>
 +
<!--<iframe src="https://docs.google.com/presentation/d/1nN-25htBR3C1IcBxILX60d61Amxk698q5ddcnOM04H8/embed?start=false&loop=false&delayms=3000" frameborder="0" width="960" height="569" allowfullscreen="true" mozallowfullscreen="true" webkitallowfullscreen="true"></iframe>-->
 +
 +
</div>
 +
<style>
 +
 +
.slick-dots {
 +
position: relative;
 +
}
 +
 +
#div-slideshowNav {
 +
margin-left: auto;
 +
margin-right: auto;
 +
width: 850px;
 +
}
 +
 +
#div-dots {
 +
height: 100px;
 +
}
 +
 +
#div-slideshow, #div-slideshow img, #div-dots
 +
{
 +
margin-left: auto;
 +
margin-right: auto;
 +
width: 850px;
 +
}
 +
 +
#div-riverHill iframe {
 +
width: 960px;
 +
margin-left: auto;
 +
margin-right: auto;
 +
display: block;
 +
margin-top: 50px;
 +
}
 +
 +
#div-riverHill p {
 +
text-align: center;
 +
width: 900px;
 +
margin-left: auto;
 +
margin-right: auto;
 +
line-height: 2em;
 +
}
 +
 +
#div-riverHill {
 +
width: 1175px;
 +
margin-left: auto;
 +
margin-right: auto;
 +
font-size: 15pt;
 +
margin-top: 50px;
 +
margin-bottom: 100px;
 +
}
 +
</style>
 
     <div id="bot-nav">
 
     <div id="bot-nav">
 
         <div id="container">
 
         <div id="container">
Line 728: Line 860:
 
             <div class="pull-right">
 
             <div class="pull-right">
 
                 <ul id="social-media">
 
                 <ul id="social-media">
                     <li> <a href="https://www.facebook.com/UMarylandiGEM/"> <img src="https://static.igem.org/mediawiki/2016/2/2c/T--UMaryland--FBlogo.png"/> </a> </li>
+
                     <li> <a href="https://www.facebook.com/UMarylandiGEM/"> <img src="https://static.igem.org/mediawiki/2016/9/9f/T--UMaryland--fbLogo.jpeg"/> </a> </li>
                     <li> <a href="https://www.instagram.com/umarylandigem/"> <img src="https://static.igem.org/mediawiki/2016/b/bc/T--UMaryland--Instalogo.png"/> </a> </li>
+
                     <li> <a href="https://www.instagram.com/umarylandigem/"> <img src="https://static.igem.org/mediawiki/2016/c/ca/T--UMaryland--instalogo.jpg"/> </a> </li>
 
                 </ul>
 
                 </ul>
 
             </div>
 
             </div>
Line 740: Line 872:
 
         <!-- For nav bar scrolling + hovering + window resize effects-->
 
         <!-- For nav bar scrolling + hovering + window resize effects-->
 
<script>
 
<script>
 +
 +
 +
 +
  $('#div-slideshow').slick({
 +
lazyLoad: 'ondemand',
 +
slidesToShow: 1,
 +
slidesToScroll: 1,
 +
  dots: true,
 +
appendDots: $("#div-dots"),
 +
infinite: false
 +
 
 +
  });
 +
 +
if ( self !== top ) {
 +
$('#top_menu_under, #top_menu_14, #top_menu_inside, nav').remove();
 +
$('#overruled nav').remove();
 +
}
 
// Animation over top nav bar when mouse hovers
 
// Animation over top nav bar when mouse hovers
 
$('nav').mouseover(
 
$('nav').mouseover(
Line 866: Line 1,015:
 
                 $('#div-' + lastAct).css('display','none');
 
                 $('#div-' + lastAct).css('display','none');
 
             }
 
             }
             $('#div-content').css('margin-left', '60px') // slighly shifts right all text to set up for animation
+
             $('.div-content').css('margin-left', '60px') // slighly shifts right all text to set up for animation
 
             $('#div-' + selected).css('display','block'); // the div containing the text that is selected is displayed
 
             $('#div-' + selected).css('display','block'); // the div containing the text that is selected is displayed
             $('#div-content').animate({ marginLeft: '0px'}, 200); // the text is animated to quickly move left
+
             $('.div-content').animate({ marginLeft: '0px'}, 200); // the text is animated to quickly move left
 
             current = selected; // sets the current display
 
             current = selected; // sets the current display
 
             if (currentTop == 'building') {
 
             if (currentTop == 'building') {

Latest revision as of 20:06, 28 September 2016

</div></div> Building with Biology

Education




Furthering the dialogue with the public about synthetic biology

Building with Biology: Port Discovery




July 30th, 2016

We volunteered at the Building with Biology Event held at Port Discovery in Baltimore, MD to raise awareness about synthetic biology among children 8 and up. We manned six tables with different activities involving synthetic biology, which are described in more depth below.

Building with Biology Activities

Our Activities

Super Organisms!

Kit of Parts

Bio Bistro

Tech Tokens

At this station, visitors were introduced to two catastrophic situations that they needed to solve using their imaginations: 1) Their friend fell off of a skyscraper, and 2) Their friend caused a massive oil spill in the ocean. To tackle the first problem, kids designed a superhero that could shoot spiderwebs or fly to ultimately catch their friend. For the second problem, kids designed a super bacteria that could clean the ocean by detecting, degrading, or digesting oil. This activity served as a introduction of the possibilites of synthetic biology and genetic engineering.

Visitors would learn about the concept of BioBricks and versatility of engineering cells to solve global issues. They used a cell model made of wooden poles and color-coded parts that fit on the poles. Each color had a different function like red for production and blue for sensing. A visitor would pick a challenge card with an area of research on it ranging from making synthetic blood to treating malaria. Then she would make a cell that would solve the problem using a solution description on the back of the card.

Eat it? Think about it? No way? Visitors were introduced to a variety of engineered foods, both currently available and in development, and asked their opinion on consuming the goods. Items included vanilla flavoring, caffeine, and milk synthesized by yeast, a food pill that provided all daily nutrients, golden rice, and meat created in a lab. Participants were also introduced to different ways we have modified agriculture like selective breeding, genetic engineering, and synthetic biology.

Visitors would be introduced to a wide range of applications for synthetic biology to start a conversation among the visitors on the level of importance of each application. Each visitor at the table was given a stack of colored coins to represent their opinion. They would place all their coins on the application(s) most important to them and then we would all discuss their choices and reasoning. An additional activity was to give each person at the table a character card with occupations ranging from president of the U.S. to Canadian college student. They would repeat the process of placing coins, but this time in the mindset of the occupation they were given.

River Hill High School




June 6th, 2016

UMaryland iGEM visited two AP Biology classes at River Hill High School located in Howard County to present and discuss a variety of synthetic biology topics. We explained what synthetic biology is, how it works, applications of genetic engineering, benefits / misconceptions of GMOs, and what iGEM is.

Download the Powerpoint in PDF format