Difference between revisions of "Team:Exeter/HP/Silver"

(Prototype team page)
 
 
(15 intermediate revisions by 3 users not shown)
Line 1: Line 1:
−
{{Exeter}}
 
 
<html>
 
<html>
 +
</div></div></div></div></div>
 +
  <meta charset="utf-8">
 +
  <meta name="viewport" content="width=device-width, initial-scale=1">
 +
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
 +
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
 +
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
 +
 
 +
 +
</head>
 +
 +
<body>
 +
<style type="text/css">
 +
  @media (max-width: 920px) {
 +
  .navbar-header {
 +
      float: none;
 +
  }
 +
  .navbar-left,.navbar-right {
 +
      float: none !important;
 +
  }
 +
  .navbar-toggle {
 +
      display: block;
 +
  }
 +
  .navbar-collapse {
 +
      box-shadow: inset 0 0 0 rgba(255,255,255,0.1);
 +
  }
 +
  .navbar-fixed-top {
 +
      top: 0;
 +
      border-width: 0 0 1px;
 +
  }
 +
  .navbar-collapse.collapse {
 +
      display: none!important;
 +
  }
 +
 
 +
  .navbar-nav {
 +
      float: none!important;
 +
      margin-top: 7.5px;
 +
  }
 +
  .navbar-nav>li {
 +
      float: none;
 +
  }
 +
  .navbar-nav>li>a {
 +
      padding-top: 10px;
 +
      padding-bottom: 10px;
 +
  }
 +
  .collapse.in{
 +
      display:block !important;
 +
  }
 +
  #soc_1, #soc_2, #soc_3{
 +
display:none;
 +
  }
 +
}
 +
#links{
 +
color:#47BCC2;
 +
/*font-size:20px;*/
 +
font-size:1.2vw;
 +
margin:0 0.9vw 0.5vh 0.9vw;
 +
padding:0;
 +
line-height:0px;
 +
padding-top:28px;
 +
}
 +
/*Fixes font size when nav-bar is collapsed*/
 +
@media (max-width: 920px) {
 +
#links{
 +
font-size:20px;
 +
}
 +
#links_drop{
 +
margin:0.9vw -0.4vw 0 -0.2vw;
 +
}
 +
}
 +
#links:hover{
 +
color:#339499;
 +
}
 +
#links:active{
 +
color:#339499;
 +
}
 +
.navbar{
 +
background-color:#e8e8e8;
 +
border-bottom:none;
 +
min-height:54px;
 +
    margin:4px 0 0 0;
 +
}
 +
.navbar-inverse .navbar-toggle .icon-bar {/*teal toggle */
 +
    background-color:#47BCC2;
 +
}
 +
.navbar-inverse .navbar-toggle { /*Removes toggle bobrder*/
 +
border:none;
 +
background-color:#e8e8e8;
 +
}
 +
.navbar-inverse .navbar-toggle{ /*Removes toggle bobrder*/
 +
border:none;
 +
background-color:#e8e8e8;
 +
}
 +
.navbar-inverse .navbar-toggle collapse{ /*Removes toggle bobrder*/
 +
border:none;
 +
background-color:#e8e8e8;
 +
}
 +
.navbar-inverse .navbar-toggle:hover {
 +
background-color:#47BCC2;
 +
}
 +
.navbar-inverse .navbar-toggle:focus, .navbar-inverse .navbar-toggle:hover {
 +
    background-color:#47BCC2;
 +
}
 +
.navbar-inverse .navbar-toggle:hover .icon-bar, .navbar-inverse .navbar-toggle:focus .icon-bar{
 +
background-color:#eeeeee;
 +
}
 +
/*soc classes controll css for media icons*/
 +
#soc{
 +
margin-top:-12px;
 +
margin-left:-15px;
 +
}
 +
.soc_1{
 +
margin-right:3px;
 +
}
 +
.soc_2{
 +
margin-right:3px;
 +
}
 +
.soc_3{
 +
margin-right:3px;
 +
}
  
 +
/*Navbar exgem logo styling*/
 +
#logo, #logo_inverse{
 +
margin-top:-12px;
 +
vertical-align:middle;
 +
width:48px;
 +
height:48px;
 +
/*Alligns logo with toggled list on thin screens*/
 +
margin-left:13px;
 +
margin-right:-12px;
 +
}
 +
/*Logo is visable on page load by default*/
 +
#logo{
 +
display:block;
 +
}
 +
/*The inverse logo is not visable by default, but becomes visable*/
 +
/*when #logo_button is hovered over (found in jquery)*/
 +
#logo_inverse{
 +
display:none;
 +
}
  
 +
/*Displays brand inline with ExGem*/
 +
.navbar-brand > img {
 +
    display: inline;
 +
}
 +
.navbar-right a{
 +
height:50px;
 +
width:48px;
 +
}
 +
#Top_link.navbar-brand{/*Top link styling*/
 +
color:#47BCC2;
 +
font-size:25px;
 +
margin-bottom:5px;
 +
opacity:0.6
 +
}
 +
#topnav{
 +
padding-bottom:0px;
 +
position:fixed;
 +
}
 +
#topnav (max-width: 767px) {
 +
display:none;
 +
}
 +
#text{/*Top link text*/
 +
color:#47BCC2;
 +
}
 +
#myNavbar{
 +
border: none;
 +
}
 +
/*sticky footer*/
 +
.wrap {
 +
  min-height: 100%;
 +
  margin-bottom: -65px;  /* equal to footer height */
 +
}
 +
.wrap:after {
 +
  content: "";
 +
  display: block;
 +
}
 +
.footer, .wrap:after {
 +
  height: 60px;
 +
  padding-top:5px;
 +
}
 +
.flare .wrap:after{
 +
height:5px;
 +
}
 +
.flare{
 +
background-color:#8cd5d9; 
 +
padding-top:3px;
 +
position:relative;
 +
bottom:0px;
 +
width:100%;
 +
}
 +
.footer{
 +
background-color:#e8e8e8;
 +
}
 +
/*Hides igm logo and team name*/
 +
#sideMenu, #top_title {display:none;}
 +
#bodyContent h1, #bodyContent h2, #bodyContent h3, #bodyContent h4, #bodyContent h5 { margin-bottom: 0px;}
 +
#top_title{visibility: hidden; background:#eeeeee;}
 +
#bodyContent{background:#eeeeee;}
 +
#mw-content-text{background:#eeeeee;}
 +
#HQ_page{background:none; height:0px; width:0px;}
 +
#content{background:none;}
 +
#globalWrapper{height:0px;background:#eeeeee;}
 +
/*end of hacky css :) */
 +
/*There is a <p></p> at bottom of iGEM page. In order to keep footer*/
 +
/*On bottom of page we have styled <p> tags to have no margin or border*/
 +
/*Therefore on all of our paragraphs need to id "pp" to work properly*/
 +
p{
 +
        margin:0;
 +
        padding:0;
 +
        border-style:none;
 +
}
 +
#pp{
 +
padding-top:20px;
 +
padding-right:40px;
 +
padding-left:40px;
 +
font-size:150%;
 +
}
 +
.container ul, .container ol{
 +
font-size:140%;
 +
padding-right:40px;
 +
padding-left:60px;
 +
padding-top:10px;
 +
}
 +
/*Heading styles*/
 +
h1, h2, h3, h4, h5{
 +
text-align:center;
 +
color:#339499;
 +
font-weight:500;
 +
    padding-left: 40px;
 +
    padding-right: 40px;
 +
padding-top: 40px;
 +
padding-bottom:0;
 +
}
 +
h1{font-size:340%;}
 +
h2{font-size:320%;}
 +
h3{font-size:290%;}
 +
h4{font-size:260%;}
 +
h5{font-size:220%;}
 +
h6{
 +
color:#339499;
 +
font-weight:500;
 +
font-size:200%;
 +
padding-left:40px;
 +
padding-top: 20px;
 +
padding-bottom:-10px;
 +
}
 +
/*Italics for Quotes using i tag*/
 +
q{
 +
text-align:center;
 +
color:#339499;
 +
padding-left:10%;
 +
padding-right:10%;
 +
font-size:120%;
 +
font-style: italic;
 +
}
 +
/*Styling for links*/
 +
a{
 +
color:#339499;
 +
font-weight:550;
 +
}
 +
/**page content styling starts**/
 +
body{
 +
background-color:#eeeeee;
 +
}
 +
h1{
 +
text-align:center;
 +
        border-style:none;
 +
}
 +
#Section_Link, #Section_Link:visited{
 +
display:block;
 +
margin:0 auto 10px auto;
 +
width:14px;
 +
}
 +
#Section_Link:hover{
  
−
<div class="column full_size judges-will-not-evaluate">
+
}
−
<h3>★  ALERT! </h3>
+
#sectionGap, #sectionGap:focus, #contentTitle{
−
<p>This page is used by the judges to evaluate your team for the <a href="https://2016.igem.org/Judging/Medals">human practices silver medal criterion</a>. </p>
+
min-width:100%;
 +
min-height:10vh;
 +
background:#e8e8e8;
 +
display:block;
 +
font-size:400%;
 +
text-align:center;
 +
color:#47BCC2;
 +
text-decoration:none;
 +
border-style:none none solid none;
 +
border-width:3px;
 +
border-color:#8cd5d9;
 +
}
 +
#sectionGap:hover, #sectionGap:active{
 +
color:#339499;
 +
}
 +
.container{
 +
min-width:100%;
 +
padding:0;
 +
}
 +
.div_vl{
 +
padding-top:2%;
 +
height:35vw;
 +
width:95vw;
 +
display:block;
 +
margin-left:auto;
 +
margin-right:auto;
 +
}
 +
.div_vl.backgroundimage{
 +
background-image: url('https://static.igem.org/mediawiki/2016/9/93/T--Exeter--Home_Background1.png');
 +
background-repeat:no-repeat;
 +
background-size: 100% auto;
 +
width:100%;
 +
height:88vh;
 +
}
 +
#title{
 +
style="font-family: 'Arial';
 +
color:#4e4e4e;
 +
text-align:center;
 +
margin-bottom:20px;
 +
font-size:400%;
 +
}
 +
.div_content{
 +
padding:0;
 +
min-height:100vh;
 +
width:100%;
 +
background:#eeeeee;
 +
}
  
 +
/*div_banner contains to links at the top of each page to link to*/
 +
/*each section of the page*/
 +
.div_banner{
 +
max-width:90vw;
 +
margin:12vh auto 5vh auto;
 +
display:block;
 +
height:8vh;
 +
}
  
−
<p> Delete this box in order to be evaluated for this medal. See more information at <a href="https://2016.igem.org/Judging/Pages_for_Awards/Instructions"> Instructions for Pages for awards</a>.</p>
+
/*Contains styling for the left and right pictures of the banner*/
−
</div>
+
.subdiv_banner{
 +
height:8vh;
 +
padding:0;
 +
margin:auto;
 +
position:relative;
 +
bottom:0;
 +
right:0;
 +
}
 +
.subdiv_banner.left{
 +
float:left;
 +
display:block;
 +
}
 +
.subdiv_banner.right{
 +
float:right;
 +
display:block;
 +
}
 +
.subdiv_banner.middle{
 +
height:100%;
 +
}
 +
/*Positions the images in correct place in the divs*/
 +
.subdiv_banner.left img, .subdiv_banner.right img{
 +
width:100%;
 +
position: relative;
 +
top: 38%;
 +
-ms-transform: translateY(-50%) /* IE 9 */
 +
    -webkit-transform: translateY(-50%) /* Chrome, Safari, Opera */
 +
    transform: translateY(-50%);
 +
}
 +
.banner_link,.banner_link:visited{
 +
position: relative;
 +
height:100%;
 +
padding:0, 2px!important;
 +
color:#47BCC2;
 +
text-align:center;
 +
font-size:1.5vw;
 +
/*Max font size where "section" and "1" don't appear on*/
 +
}
 +
.banner_link span.oneline{
 +
position: relative;
 +
top: 34.5%;
 +
-ms-transform: translateY(-50%) /* IE 9 */
 +
    -webkit-transform: translateY(-50%) /* Chrome, Safari, Opera */
 +
    transform: translateY(-50%);
 +
}
 +
.banner_link span.twoline{
 +
position: relative;
 +
top: 7.5%;
 +
-ms-transform: translateY(-50%) /* IE 9 */
 +
    -webkit-transform: translateY(-50%) /* Chrome, Safari, Opera */
 +
    transform: translateY(-50%);
 +
}
 +
.banner_link:hover{
 +
text-decoration:none;
 +
color:#339499;
 +
}
 +
.link_fix{
 +
display:block;
 +
position:relative;
 +
height:1px;
 +
top:-15px;
 +
}
 +
/*Mobile and small screen css*/
 +
@media (max-width: 767px){
 +
.link_fix{
 +
display:none;
 +
}
 +
.div_vl.backgroundimage{
 +
background-image: url('#');
 +
background:#ddd;
 +
}
 +
#title{
 +
font-size:260%;
 +
}
 +
.banner_link{
 +
font-size:22px;
 +
}
 +
.div_banner{
 +
margin-top:20px;
 +
}
 +
/*Makes side pictures on banner invisible on small screens*/
 +
/*as it clutters screen*/
 +
.subdiv_banner.left, .subdiv_banner.right{
 +
display:none;
 +
}
 +
}
 +
#dropdownMenu1{
 +
margin-top:-0.15vw;
 +
background:#e8e8e8;
 +
border-style:none;
 +
}
 +
@media (min-width: 767px){
 +
.dropdown-menu{
 +
margin-top:24px;
 +
left:-19px;
 +
border-radius:0px;
 +
padding:4px;
 +
}
 +
}
 +
/*Mobile and small screen css*/
 +
@media (max-width: 767px){
 +
.div_vl.backgroundimage{
 +
height:37vh;
 +
background-size: auto 200%;
 +
}
 +
.div_l{
 +
display:none;
 +
}
 +
#logo_Banner_Desktop{
 +
display:none;
 +
}
 +
#logo_Banner_Mobile{
 +
display:block;
 +
width:100%;
 +
max-width:200px;
 +
margin:auto;
 +
}
 +
#dropdownMenu1{
 +
padding:2.5% 0 2% 0;
 +
margin:-1.6% auto -1.4% 0.9%;
 +
}
 +
#links{
 +
padding:10px 0;
 +
margin-left:0.85vw;
 +
}
 +
}
 +
#links_drop{
 +
color:#47BCC2;
 +
/*font-size:20px;*/
 +
font-size:1.2vw;
 +
margin:8px 0.9vw 0.5vh 0.9vw;
 +
padding:0.06vw 0 0 0;
 +
line-height:0px;
 +
}
 +
@media (max-width: 920px){
 +
#links_drop{
 +
margin-left:0;
 +
padding-top:9px;
 +
margin-top:-4px;
 +
font-size:20px;
 +
}
 +
}
 +
button.dropdown-toggle{
 +
padding-top:21px; !important
 +
}
 +
@media (max-width: 767px){
 +
button.dropdown-toggle{
 +
padding-top:5px;
 +
}
 +
}
 +
#links_drop:hover span{
 +
color:#339499;
 +
}
 +
</style>
 +
<div id="top_page" class="link_fix"></div>
 +
<nav id="Top" class="navbar navbar-inverse navbar-static-top">
 +
  <div class="container-fluid">
 +
    <div class="navbar-header">
 +
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
 +
          <span class="icon-bar"></span>
 +
          <span class="icon-bar"></span>
 +
          <span class="icon-bar"></span>                       
 +
</button>
 +
      <a id="logo_button" class="navbar-brand" href="https://2016.igem.org/Team:Exeter">
 +
<img id="logo" src="https://static.igem.org/mediawiki/2016/7/75/T--Exeter--Template--Logo2.png"/>
 +
<img id="logo_inverse" src="https://static.igem.org/mediawiki/2016/2/23/T--Exeter--Template_Logo2_inverse.png"/>
 +
  </a>
 +
 
 +
    </div>
 +
    <div>
 +
        <div class="collapse navbar-collapse" id="myNavbar">
 +
<ul class="nav navbar-nav">
 +
<li><div id="links_drop" class="dropdown">
 +
  <button class="dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
 +
    <span style="margin-bottom:4px;">Lab</span>
 +
    <span class="caret"></span>
 +
  </button>
 +
  <ul class="dropdown-menu" style="background:#e8e8e8;margin-left:25px;" aria-labelledby="dropdownMenu1">
 +
<li><a id="links" style="margin:10px 0 30px 2px;padding:0;font-size:1.8vh;" href="https://2016.igem.org/Team:Exeter/Project">Lab Project</a></li>
 +
    <li><a id="links" style="margin:30px 0 10px 2px;padding:0;font-size:1.8vh;" href="https://2016.igem.org/Team:Exeter/Labbook">Lab Book</a></li>
 +
<li><a id="links" style="margin:30px 0 10px 2px;padding:0;font-size:1.8vh;" href="https://2016.igem.org/Team:Exeter/Safety">Safety</a></li>
  
 +
  </ul>
 +
</div></li>
 +
<li ><a id="links"href="https://2016.igem.org/Team:Exeter/Parts">Parts</a></li>
 +
<li ><a id="links"href="https://2016.igem.org/Team:Exeter/Team">Team</a></li>
 +
<li><a id="links" href="https://2016.igem.org/Team:Exeter/Interlab">InterLab</a></li>
 +
<li><div id="links_drop" class="dropdown">
 +
  <button class="dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
 +
    <span style="margin-bottom:4px;">Human Practices</span>
 +
    <span class="caret"></span>
 +
  </button>
 +
  <ul class="dropdown-menu" style="background:#e8e8e8;margin-left:25px;" aria-labelledby="dropdownMenu1"> 
 +
    <li><a id="links" style="margin:10px 0 10px 2px;padding:0;font-size:1.8vh;" href="https://2016.igem.org/Team:Exeter/Integrated_Practices">Integrated</a></li>
 +
<li><a id="links" style="background:none;line-height:0.7vh;margin:30px 0 10px 2px;padding:0;font-size:1.8vh;" href="https://2016.igem.org/Team:Exeter/Engagement">Public Engagement<br /><br /><br /> & Education</a></li><li><a id="links" style="margin:30px 0 10px 2px;padding:0;font-size:1.8vh;" href="https://2016.igem.org/Team:Exeter/Log">Log</a></li>
  
 +
  </ul>
 +
</div></li>
  
−
<div class="column full_size">
+
<li ><a id="links"href="https://2016.igem.org/Team:Exeter/Attributions">Attributions</a></li>
  
−
<p>iGEM teams are unique and leading the field because they "go beyond the lab" to imagine their projects in a social/environmental context, to better understand issues that might influence the design and use of their technologies.</p>
+
<li><div id="links_drop" class="dropdown">
−
<p>Teams work with students and advisors from the humanities and social sciences to explore topics concerning ethical, legal, social, economic, safety or security issues related to their work. Consideration of these Human Practices is crucial for building safe and sustainable projects that serve the public interest. </p>
+
  <button class="dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
−
<p>For more information, please see the <a href="https://2016.igem.org/Human_Practices">Human Practices Hub</a>.</p>
+
    <span style="margin-bottom:4px;">Awards</span>
 +
    <span class="caret"></span>
 +
  </button>
 +
  <ul class="dropdown-menu" style="background:#e8e8e8;margin-left:25px;" aria-labelledby="dropdownMenu1">
 +
 
 +
<li><a id="links" style="margin:10px 0 30px 2px;padding:0;font-size:1.8vh;" href="https://2016.igem.org/Team:Exeter/Awards">Awards</a></li>
 +
<li><span style="margin:10px 0 30px 2px;padding:0;"><u>Special pages</u></span></li>
 +
<li><a id="links" style="margin:30px 0 10px 2px;padding:0;font-size:1.8vh;" href="https://2016.igem.org/Team:Exeter/HP/Silver">HP Silver</a></li>
 +
<li><a id="links" style="margin:30px 0 10px 2px;padding:0;font-size:1.8vh;" href="https://2016.igem.org/Team:Exeter/HP/Gold">HP Gold</a></li>
 +
 
 +
  </ul>
 +
</div></li>
 +
<li ><a id="links"href="https://2016.igem.org/Team:Exeter/Model">Models</a></li>
 +
<li ><a id="links"href="https://2016.igem.org/Team:Exeter/Collaborations">Collaborations</a></li>
 +
 
 +
 
 +
 
 +
</ul>
 +
<ul class="nav navbar-nav navbar-right">
 +
<li style="height:50px;width:48px;"class="soc_1">
 +
<a href="https://www.youtube.com/channel/UC31qfG4hnm8gRHDCkrBtAiQ">
 +
<img id = "soc" src="https://static.igem.org/mediawiki/2016/2/23/You.png"/></a>
 +
</li>
 +
<li style="height:50px;width:48px;"class="soc_2">
 +
<a href="https://www.facebook.com/ExeteriGEM2016/?ref=aymt_homepage_panel">
 +
<img id = "soc" src="https://static.igem.org/mediawiki/2016/5/51/Fb.png"/></a>
 +
</li>
 +
<li style="height:50px;width:48px;"class="soc_3">
 +
<a href="https://twitter.com/exeter_igem">
 +
<img id = "soc" src="https://static.igem.org/mediawiki/2016/7/76/Twit.jpg"/></a>
 +
</li>
 +
</ul>
 +
    </div>
 +
    </div>
 +
  </div>
 +
</nav>
 +
<div style="height:3px; background-color:#8cd5d9; margin-top:0px;" ></div>
 +
<!--div below contains a rolling counter for scrolling position-->
 +
<div id="scrollPosition" style="display:none;">0</div>
 +
<script>
 +
$(document).ready(function(){
 +
//topnav script
 +
var width = document.documentElement.clientWidth;
 +
console.log(width, "Hello, world!");
 +
if (width > 539){
 +
$( window ).scroll(function(){
 +
//id scrollPosition links to a hidden div at top of html that
 +
//constantly counts the pixels you have scrolled down.
 +
//Any other solution only worked when page is refreshed.
 +
$('#scrollPosition').html($( window ).scrollTop());
 +
//Handles #topnav at bottom of page
 +
var distHeight = $( document ).height() - $('#scrollPosition').html() - window.innerHeight;
 +
var boxHeight = $("#topnav").height();
 +
var manualPaddingbot = 5;
 +
var padding = boxHeight - distHeight + manualPaddingbot;
 +
//Causes #topnav to be a variable height from bottom when
 +
//footer is in view, and a fixed position on screen when
 +
//footer is out of view
 +
if (distHeight <= boxHeight){
 +
$("#topnav").css("bottom",(padding + manualPaddingbot));
 +
}
 +
if (distHeight > boxHeight){
 +
$("#topnav").css("bottom",manualPaddingbot);
 +
}
 +
})
 +
}
 +
//Causes the navbar logo to switch between the default and
 +
//inverse versions when the <a> with #logo_button is hovered over
 +
$('#logo_button').hover(function(){
 +
$('#logo').toggle();
 +
$('#logo_inverse').toggle();
 +
});
 +
});
 +
</script>
 +
<!--Counter and topnav ends-->
 +
<!--Content begins-->
 +
<div class="container">
 +
<h1>Human Practices - Silver Award</h1>
 +
<h5>Education</h5>
 +
<h6>BioMech</h6>
 +
<p id="pp">Synthetic Biology is severely under-taught at all stages of education, occasionally certain syllabi will lightly touch on certain concepts, but only to briefly move on without any real depth into the topic. One of the aims of our human practises is to address this by providing easily accessible synthetic biology learning resources such as a board game, open to teachers and students alike. This lack of focus on synthetic biology is not only seen in lower levels of education, but further up the age ladder at university. Very few universities offer modules in specifically synthetic biology which is why we have taken steps to implement a module in our own university. </p>
 +
 +
<p id="pp">BioMech is an educational synthetic biology board game, designed by the 2016 Exeter iGEM team for students aged 14-18. The concept of the board game was developed early on in the project, with the design informed by a year 10 work experience student. The board game was then tested with GCSE students from two schools, the feedback from which was used to tailor the game around the current knowledge of year 10 students. The intention is to introduce the concept of synthetic biology to a younger age group in a fun and engaging manner. In order to make the game widely accessible despite needing a physical copy BioMech has been uploaded to our wiki, and is able to download with printing instructions for free. We hope that BioMech will inspire students to further their own education independently given that there is currently very little taught on the topic prior to university level.</p>
 +
 
 +
<p id="pp">You can read more about BioMech <a href="https://2016.igem.org/Team:Exeter/Engagement#section_1">here.</a></p>
 +
<h6>Synthetic Biology Module</h6>
 +
<p id="pp">Continuing with the theme of responding to a lack of education in synthetic biology, we also looked at university level education. Due to the lack of any type of formal synthetic biology teaching here at the University of Exeter, we have created a second year synthetic biology module to implement in the Biosciences department. During the design process we managed to talk to multiple academics about their thoughts on the process of implementing new modules into the syllabus, and how it could be made more efficient in the future. It will be available for second year Biosciences and Natural Sciences students to take from September 2017.</p>
 +
<p id="pp">You can read more about the module <a href="https://2016.igem.org/Team:Exeter/Engagement#section_2">here.</a></p>
 +
<br />
 +
<h5>Public Perception</h5>
 +
<h6>Desert Island... Science?</h6>
 +
<p id="pp">‘Desert Island… Science?’ is an interview series hosted on our YouTube channel and wiki, in which we spoke to a variety of academics and leading figures in science, and often more specifically, in synthetic biology. It is inspired by the similarly named ‘Desert Island Discs’ on BBC channel 4, and mixes fun, light questions with more interesting, complicated enquiries into their work, their opinions on topics like equality in science and need for education, etc.</p>
 +
<p id="pp">The intention of ‘Desert Island… Science?’ is to humanise academics and experts to the public in light of the current anti-expert sentiment, and make the work of scientist more accessible and engaging to people not involved in the field. Whilst we recognise the perception of synthetic biology has improved greatly since several years ago, there is often still negativity and confusion associated with the general perception of the field, which is something we hope to negate by showing the positive impacts and implications of synthetic through our interviews.</p>
 +
 
 +
<p id="pp">You can read more about ‘Desert Island… Science?’ <a href="https://2016.igem.org/Team:Exeter/Engagement#section_3">here.</a></p>
 +
<br />
 +
<h5>Public Outreach</h5>
 +
<p id="pp">The Big Bang South West science fair was the first science fair we attended, falling on 29th June 2016. It was aimed towards students of all ages, teachers and parents, and allowed to get a range of feedback on our board game, BioMech, which first premiered there. We also engaged students present with activities from William and Mary’s 2015 activities booklet, using the gene bracelet and sweetie DNA activities to grab attention and open dialogue, both of which worked effectively. We believed that the activities booklet supplemented our intentions of presenting synthetic biology in a friendly manner perfectly.</p>
 +
<p id="pp">The Britain Needs Scientists fair was a much smaller fair we attended on 6th July 2016, aimed primarily at A Level students looking at doing a degree in a science. Our primary focus here was highlighting synthetic biology as a multi-disciplinary subject, and engage in more challenging conversations with interested students. Due to the name; synthetic biology an assumption is quickly made that it is heavily biology based, when in fact is contains aspect of all STEM subjects.</p>
 +
 
 +
<p id="pp">You can read more about our science fair visits <a href="https://2016.igem.org/Team:Exeter/Engagement#section_5">here.</a></p>
 +
<br />
 
</div>
 
</div>
  
 +
 +
<!--Content Ends-->
 +
<nav id="topnav" class="nav-navbar" style="right:2px;">
 +
  <div class="container-fluid">
 +
    <div class="navbar-header">
 +
      <a class="navbar-brand" id="Top_link" href="#top_page">
 +
<span class="glyphicon glyphicon-menu-up" aria-hidden="true" style="max-width:1%;"></span>
 +
  </a>
 +
    </div>
 +
  </div>
 +
</nav>
 +
<div class="flare"></div>
 +
<footer class="footer">
 +
<a style="margin-left:3%" href="https://www.youtube.com/channel/UC31qfG4hnm8gRHDCkrBtAiQ">
 +
<img  src="https://static.igem.org/mediawiki/2016/2/23/You.png"/>
 +
</a>
 +
<a href="https://www.facebook.com/ExeteriGEM2016/?ref=aymt_homepage_panel">
 +
<img src="https://static.igem.org/mediawiki/2016/5/51/Fb.png"/>
 +
</a>
 +
<a href="https://twitter.com/exeter_igem">
 +
<img src="https://static.igem.org/mediawiki/2016/7/76/Twit.jpg"/>
 +
</a>
 +
</footer>
 +
<!--numbr 1:  i cant get your toplink to show number 2: weird grey bar on toggle menue-->
 +
</body>
  
 
</html>
 
</html>

Latest revision as of 20:41, 19 October 2016