Difference between revisions of "Team:Lubbock TTU/HP/Silver"

Line 47: Line 47:
 
<style>
 
<style>
 
.mySlides {display:none;}
 
.mySlides {display:none;}
 +
 +
<!-- Slideshow 3 -->
 +
body {
 +
  margin: 0;
 +
  padding: 0;
 +
  background: #111;
 +
  height: 100%;
 +
}
 +
.diy-slideshow{
 +
  position: relative;
 +
  display: block;
 +
  overflow: hidden;
 +
}
 +
figure{
 +
  position: absolute;
 +
  opacity: 0;
 +
  transition: 1s opacity;
 +
}
 +
figcaption{
 +
  position: absolute;
 +
  font-family: sans-serif;
 +
  font-size: .8em;
 +
  bottom: .75em;
 +
  right: .35em;
 +
  padding: .25em;
 +
  color: #fff;
 +
  background: rgba(0,0,0, .25);
 +
  border-radius: 2px;
 +
}
 +
figcaption a{
 +
  color: #fff;
 +
}
 +
figure.show{
 +
  opacity: 1;
 +
  position: static;
 +
  transition: 1s opacity;
 +
}
 +
.next, .prev{
 +
  color: #fff;
 +
  position: absolute;
 +
  background: rgba(0,0,0, .6);
 +
  top: 50%;
 +
  z-index: 1;
 +
  font-size: 2em;
 +
  margin-top: -.75em;
 +
  opacity: .3;
 +
  user-select: none;
 +
}
 +
.next:hover, .prev:hover{
 +
  cursor: pointer;
 +
  opacity: 1;
 +
}
 +
.next{
 +
  right: 0;
 +
  padding: 10px 5px 15px 10px;
 +
  border-top-left-radius: 3px;
 +
  border-bottom-left-radius: 3px;
 +
}
 +
.prev{
 +
  left: 0;
 +
  padding: 10px 10px 15px 5px;
 +
  border-top-right-radius: 3px;
 +
  border-bottom-right-radius: 3px;
 +
}
  
 
</style>
 
</style>
Line 143: Line 207:
 
             <div class="col-md-1"></div>
 
             <div class="col-md-1"></div>
 
             <div class="col-md-4">
 
             <div class="col-md-4">
−
<!-- Image Code Here -->
+
 
 +
<div class="diy-slideshow">
 +
    <figure class="show">
 +
        <img src="" width="100%" /><figcaption>Caption 1</figcaption>
 +
    </figure>
 +
 
 +
    <figure class="show">
 +
        <img src="" width="100%" /><figcaption>Caption 2</figcaption>
 +
    </figure>
 +
 
 +
    <figure class="show">
 +
        <img src="" width="100%" /><figcaption>Caption 3</figcaption>
 +
    </figure>
 +
 
 +
    <figure class="show">
 +
        <img src="" width="100%" /><figcaption>Caption 4</figcaption>
 +
    </figure>
 +
 
 +
    <figure class="show">
 +
        <img src="" width="100%" /><figcaption>Caption 5</figcaption>
 +
    </figure>
 +
 
 +
    <figure class="show">
 +
        <img src="" width="100%" /><figcaption>Caption 6</figcaption>
 +
    </figure>
 +
 
 +
    <figure class="show">
 +
        <img src="" width="100%" /><figcaption>Caption 7</figcaption>
 +
    </figure>
 +
 
 +
    <figure class="show">
 +
        <img src="" width="100%" /><figcaption>Caption 8</figcaption>
 +
    </figure>
 +
  <span class="prev">&laquo;</span>
 +
  <span class="next">&raquo;</span>
 +
</div>
 +
 
 
             </div><!-- End of col-md-4 -->
 
             </div><!-- End of col-md-4 -->
 
</div><!-- End of div class="row" -->
 
</div><!-- End of div class="row" -->
Line 197: Line 297:
 
     setTimeout(carousel, 2000); // Change image every 2 seconds
 
     setTimeout(carousel, 2000); // Change image every 2 seconds
 
}
 
}
 +
</script>
 +
 +
<!-- Slideshow 3 -->
 +
<script>
 +
(function(){
 +
 
 +
var counter = 0, // to keep track of current slide
 +
    $items = document.querySelectorAll('.diy-slideshow figure'), // a collection of all of the slides, caching for performance
 +
    numItems = $items.length; // total number of slides
 +
 +
// this function is what cycles the slides, showing the next or previous slide and hiding all the others
 +
var showCurrent = function(){
 +
  var itemToShow = Math.abs(counter%numItems);// uses remainder (aka modulo) operator to get the actual index of the element to show 
 +
 
 +
  // remove .show from whichever element currently has it
 +
  // http://stackoverflow.com/a/16053538/2006057
 +
  [].forEach.call( $items, function(el){
 +
    el.classList.remove('show');
 +
  });
 +
 
 +
  // add .show to the one item that's supposed to have it
 +
  $items[itemToShow].classList.add('show');   
 +
};
 +
 +
// add click events to prev & next buttons
 +
document.querySelector('.next').addEventListener('click', function() {
 +
    counter++;
 +
    showCurrent();
 +
  }, false);
 +
 +
document.querySelector('.prev').addEventListener('click', function() {
 +
    counter--;
 +
    showCurrent();
 +
  }, false);
 +
 
 +
})(); 
 
</script>
 
</script>
  
 
</html>
 
</html>

Revision as of 19:57, 19 October 2016





Human Practices Silver

As part of our human practices endeavor, we focused our activities on creating a sustainable impact on the Lubbock community by engaging with all age groups and starting a community bio-hacking space. The focuses of our outreach activities are summarized below.

  Community
  - ULabs Bio-hackerspace
  Outreach for Children
  - Building with Biology
  - Finding Coli (Children's book)
  Outreach for Adults
  - AMSA Workshop
  - Microbial Fuel Cell Workshop
  Conferences
  - SynBioBeta
  - NIWeek
  Survey

Outreach for Community Engagement

To provide the Lubbock community with the necessary equipment, training, and expertise to allow for members to safely explore the world of biology we decided to start the first community bio-hacking space. We worked closely with a local community lab known as ULabs, which just recently opened earlier this year. ULabs generously supported our mission and knocked down several walls to create a space for the wet lab. In our bio-hacking space, we have pushed for community members to come and“tinker” with biology. We have also given seminars in which we taught a workshop over the principles of synthetic biology to kids, adults, and even teachers from local middle school. We have outfitted our community lab with over $15,000 of equipment graciously donated by Mr. DNA Lab, a local DNA sequencing lab. This equipment includes a CO2 incubator, a laminar flow hood, thermal cyclers, and more. We are currently in the process of recruiting members to join the community lab, and envision a future in which anyone from the community can come to the lab to learn and innovate with biology.

Outreach for Children Engagement

To engage children, we held an event at a local science museum, the Science Spectrum, in which we inspired children by working with the “Building with Biology Program,”a platform designed to teach synthetic biology to children. At this event, we helped children to think critically about the principles of synthetic biology, allowing them to approach the discipline with an open mind. As well as using the engagement activities from Building with Biology, we used fluorescent bacteria to show children bioart and give a brief introduction to the concept of transformation.

We also decided to write and illustrate a children's book, Finding Coli, inspired by the story of Finding Nemo. In this book, we help children conceptualize the idea of bacterial gene transfer and synthetic biology. This medium makes otherwise dense scientific topics easy enough for anyone to understand, and the illustrations help to engage otherwise disinterested children.

Click here to download your own copy of Finding Coli!



Outreach for Adult Engagement

In addition, to engage adults, we held many events, targeting college-age students through senior citizens. In particular, we held a workshop for the American Medical Student Association, AMSA, in which we talked about synthetic biology, the mission of iGEM, how to get involved, and our wound dressing project. We also held an event with ULabs where we taught Mackenzie Middle School teachers the fundamentals of synthetic biology and helped them build a microbial fuel cell. The microbial fuel cell workshop taught the teachers the basics of metabolic pathways and gave them some context of the possibilities that syntehtic biology can bring for current and future biotechnology. By targeting teachers, we hoped to indirectly reach their students and promote a lasting education in the community about GMOs and synthetic biology.
Caption 1
Caption 2
Caption 3
Caption 4
Caption 5
Caption 6
Caption 7
Caption 8
« »


Survey

We were very interested in gauging public perceptions of synthetic biology, so we decided to create a survey to glean information about public views. From this survey we were able to see trends in political affiliation, religion, income, education and opinion of application of GMOs as well as the ethical dilemmas that come with it. A document with the survey results can be viewed here.