|
|
| (43 intermediate revisions by 4 users not shown) |
| Line 1: |
Line 1: |
| − | <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{
| |
| − | display:none;
| |
| − | }
| |
| − | }
| |
| − | #links{
| |
| − | color:#47BCC2;
| |
| − | /*font-size:20px;*/
| |
| − | font-size:1.55vw;
| |
| − | 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: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{
| |
| − | 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{
| |
| − |
| |
| − | }
| |
| − | #sectionGap, #sectionGap:focus, #contentTitle{
| |
| − | 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;
| |
| − | }
| |
| − | #sectionGap, #sectionGap:focus, #contentTitle{
| |
| − | 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;
| |
| − | }
| |
| − |
| |
| − | /*Contains styling for the left and right pictures of the banner*/
| |
| − | .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:150%;
| |
| − | }
| |
| − | /*Makes side pictures on banner invisible on small screens*/
| |
| − | /*as it clutters screen*/
| |
| − | .subdiv_banner.left, .subdiv_banner.right{
| |
| − | display:none;
| |
| − | }
| |
| − | }
| |
| − | }
| |
| − | </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 ><a id="links"href="https://2016.igem.org/Team:Exeter/Project">Project</a></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/Human_Practices">Human Practices</a></li>
| |
| − | <li ><a id="links"href="https://2016.igem.org/Team:Exeter/Attributions">Attributions</a></li>
| |
| − | <li ><a id="links"href="https://2016.igem.org/Team:Exeter/Awards">Awards</a></li>
| |
| − | <li ><a id="links"href="https://2016.igem.org/Team:Exeter/Log">Log</a></li>
| |
| − | <li ><a id="links"href="https://2016.igem.org/Team:Exeter/Collaborations">Collaborations</a></li>
| |
| − | <li ><a id="links"href="https://2016.igem.org/Team:Exeter/Interlab">InterLab</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">
| |
| − | <div class="div_vl backgroundimage">
| |
| − | <h1 id="title">Human Practices</h1>
| |
| − | <!--Contains links to sections on page-->
| |
| − | <div class="div_banner">
| |
| − | <!--Right picture (the teal line on right)-->
| |
| − | <div class="col-sm-2 subdiv_banner left">
| |
| − | <img src="https://static.igem.org/mediawiki/2016/8/8a/T--Exeter--Template_Banner_left.png">
| |
| − | </div>
| |
| − | <!--Contains all information of banner in the middle-->
| |
| − | <!--of the two outer images-->
| |
| − | <div class="col-xs-12 col-sm-8 subdiv_banner middle">
| |
| − | <!--Writing that is two lines long gets span class "twoline"-->
| |
| − | <a href="#section_1" class="banner_link col-xs-6 col-sm-2"><span class="oneline">Introduction</span></a>
| |
| − | <a href="#section_2" class="banner_link col-xs-6 col-sm-2"><span class="oneline">BioMech</span></a>
| |
| − | <a href="#section_3" class="banner_link col-xs-6 col-sm-2"><span class="oneline">Higher Education</span></a>
| |
| − | <a href="#section_4" class="banner_link col-xs-6 col-sm-2"><span class="oneline">Public Engagement</span></a>
| |
| − | <a href="#section_5" class="banner_link col-xs-6 col-sm-3"><span class="oneline">Equality and Diversity</span></a> </div>
| |
| − | <!--Left picture (the teal line on left)-->
| |
| − | <div class="col-sm-2 subdiv_banner right">
| |
| − | <img src="https://static.igem.org/mediawiki/2016/5/56/T--Exeter--Template_Banner_right.png">
| |
| − | </div>
| |
| − | </div>
| |
| − | <div>
| |
| − | <a id="Section_link" href="#section_1" style="display:block;margin:34vh auto 0 auto;width:14px;"><span style="color:#47BCC2;font-size: 25px;" class="glyphicon glyphicon-menu-down" aria-hidden="true"></span></a>
| |
| − | </div>
| |
| − | </div>
| |
| − | <div class="col-xs-12 div_content">
| |
| − | <div id="section_1" class="link_fix"></div>
| |
| − | <div id="contentTitle">
| |
| − | Introduction </div>
| |
| − |
| |
| − | <br>
| |
| − |
| |
| − | <p id="pp">Our Human Practices is centred around improving
| |
| − | public engagement and tackling the lack of education of synthetic biology
| |
| − | in the UK and overseas. In particular we are targeting education at a
| |
| − | secondary school and university level, focusing on the interdisciplinary
| |
| − | nature of the subject and assessing diversity. We want to highlight the
| |
| − | benefits and potential applications of this new scientific field, as well
| |
| − | as trying to uncover the reasons why synthetic biology doesn’t get as much
| |
| − | positive attention as it should have.</p>
| |
| − |
| |
| − | <p id="pp">We are working hard to introduce a new synthetic biology
| |
| − | module to The University of Exeter’s curriculum, which will be available
| |
| − | to students as soon as September 2017. For school children we have created
| |
| − | a board game, BioMech, which educates students in key synthetic biology
| |
| − | concepts in an easy to understand and engaging way. Furthermore, we have
| |
| − | visited school and fairs, giving talks and running workshops where we aim
| |
| − | to give children an introduction to what synthetic biology is and how it
| |
| − | already affects their lives for the better.</p>
| |
| − |
| |
| − | <p id="pp">By interviewing researchers, academics and other
| |
| − | professionals within the scientific community and presenting
| |
| − | their opinions in a fun and educational way, we hope to have
| |
| − | made synthetic biology a more attractive discipline to the general public.</p>
| |
| − | </p>
| |
| − |
| |
| − |
| |
| − |
| |
| − | <div>
| |
| − | <a id="Section_link" href="#section_2" style="display:block;margin:20px auto 0 auto;width:14px;"><span style="color:#47BCC2;font-size: 25px;" class="glyphicon glyphicon-menu-down" aria-hidden="true"></span></a>
| |
| − | </div>
| |
| − | </div>
| |
| − | <div class="col-xs-12 div_content">
| |
| − | <div id="section_2" class="link_fix"></div>
| |
| − | <div id="contentTitle">
| |
| − | Education: BioMech </div>
| |
| − | <div>
| |
| − |
| |
| − |
| |
| − | <h5><a target="_blank" href="https://2016.igem.org/Team:Exeter/BioMechDownload">Download BioMech</a></h5>
| |
| − | <p id="pp"> We initially had the idea of an educational
| |
| − | synthetic biology board game named BioMech early on
| |
| − | in the summer when we discovered the shocking lack of
| |
| − | synthetic biology education in the United Kingdom. The
| |
| − | aim of BioMech is to introduce secondary and sixth form
| |
| − | students to scientific field in a fun and interactive way.
| |
| − | The game teaches students to plasmid construction, biological
| |
| − | parts and other essential biological concepts like mutation.</p>
| |
| − |
| |
| − | <br>
| |
| − |
| |
| − | <h6>Why did we decide to create a board game?</h6>
| |
| − | <p id="pp">After researching synthetic biology education in the UK,
| |
| − | we discovered that there is a limited number of cheap and nationally
| |
| − | available educational resources for biology, with many teachers needing
| |
| − | to create their own material to inspire students. Furthermore, there is
| |
| − | also no education in synthetic biology for secondary school or A level students.</p>
| |
| − |
| |
| − | <p id="pp">In response to this we decided to get into contact with Edexcel,
| |
| − | a GCSE and A Level exam board, and enquired the possibility of introducing
| |
| − | synthetic biology in the syllabus. They responded with “iGEM could produce
| |
| − | support resources, for the existing A level, which introduced ideas of
| |
| − | synthetic biology and which could be used as ‘stretch and challenge’
| |
| − | materials by teachers”. At this point we focused our efforts on making
| |
| − | BioMech an easily accessible educational tool that can be used alongside
| |
| − | the current syllabus, building on the cellular biology and genetics that
| |
| − | are currently taught at GCSE and A-Level biology. ></p>
| |
| − | <br>
| |
| − |
| |
| − | <h6>The aim of the game</h6>
| |
| − | <p id="pp">The game teaches students about plasmid construction,
| |
| − | biological parts and other essential biological concepts like
| |
| − | mutation. The game starts with 10 BioBrick cards for each player
| |
| − | who places 5 cards on the board to construct their plasmid. The
| |
| − | winner of the round is the player that designed the plasmid that
| |
| − | will be most useful in a randomly chosen scenario, the most appropriate
| |
| − | plasmid is determined by card scores and player discussion. After a round,
| |
| − | 5 more cards are dealt and the game continues, the winner is the person that
| |
| − | wins the most rounds.</p>
| |
| − |
| |
| − | <br>
| |
| − | <br>
| |
| − |
| |
| − |
| |
| − |
| |
| − |
| |
| − | <center><img src="https://static.igem.org/mediawiki/2016/3/37/T--Exeter--Home_Lab1.jpeg" style= "margin-left:250px;width:22vw; height:44vh;margin: 0px 20px;">
| |
| − |
| |
| − | <img src="https://static.igem.org/mediawiki/2016/7/74/T--Exeter--Home_KillerRed.jpeg" style="width:22vw;height:44vh;margin: 0px 100px;">
| |
| − |
| |
| − | <img src="https://static.igem.org/mediawiki/2016/e/ea/T--Exeter--Home_Humanpractices.png" style=" margin-right:40px; width:22vw; height:44vh;margin: 0px 70pxr;"></center>
| |
| − |
| |
| − | <br>
| |
| − | <br>
| |
| − | <h4><strong>Initial testing at The Judd School (July 2016)</strong></h4>
| |
| − | <br>
| |
| − | <h6>Playing the game</h6>
| |
| − | <p id="pp">After making an initial prototype the team took the game
| |
| − | to <a href=’#’>The Judd School</a>, a secondary school in Tonbridge,
| |
| − | United Kingdom, to be tested by a group of GCSE students. We started
| |
| − | off the day by introducing the iGEM project as well as explaining
| |
| − | a few fundamental synthetic biology terms such as BioBricks and
| |
| − | plasmids. After forming two groups, the students began to play
| |
| − | the game under our supervision and quickly grasped the rules.
| |
| − | All of the students got involved with the game, often reacting
| |
| − | enthusiastically whenever a mutation occurred in a cell.</p>
| |
| − |
| |
| − | <br>
| |
| − | <br>
| |
| − |
| |
| − | <h6>Interviews and Feedback</h6>
| |
| − | <p id="pp">Even though the game was a hit with the students,
| |
| − | we still wanted to determine if the game was a viable option
| |
| − | as an education resource; the game needed to be able to educate
| |
| − | and inspire students. After the session we conducted a number
| |
| − | of interviews with some of the students, with a few saying that
| |
| − | they were much more likely to study biology after playing the game.</p>
| |
| − |
| |
| − | <br>
| |
| − |
| |
| − | <h5><q style="margin:auto;display:block;"><i>I barely knew about any of this before today, I’m definitely
| |
| − | much more likely to take Biology for A-Level.</i></q></h5>
| |
| − |
| |
| − | <br>
| |
| − |
| |
| − | <p id="pp">We interviewed two teachers at The Judd School to ask if they would
| |
| − | consider using a learning resource such as our own in their lessons
| |
| − | and if they thought the board game would prepare their students for
| |
| − | entering iGEM in the coming years. The head of key stage 3, Dr Courel,
| |
| − | thought that as the game enables students to consider real life applications
| |
| − | for genetically modified organism, and that this would aid the students when
| |
| − | thinking about their own iGEM project. The head of biology at Judd School,
| |
| − | Mrs Andrew’s thought our game would make a great intermediate step between
| |
| − | theory in the classroom, and introducing students to the wet lab.</p>>
| |
| − |
| |
| − | <br>
| |
| − | <br>
| |
| − |
| |
| − |
| |
| − | <h6>Improvements</h6>
| |
| − | <p id="pp">The Judd School visit was both a successful and productive,
| |
| − | as we got plenty of high quality feedback from both students and teachers
| |
| − | on how we could improve the game to educate more effectively and reach out
| |
| − | to more schools.</p>
| |
| − |
| |
| − | <p id="pp">The students suggested a number of minor improvements to
| |
| − | the gameplay through a short survey, the results of this can be found
| |
| − | <a href=’#’>here</a>. The largest change to our game came after Mrs Andrew’s
| |
| − | asked if she could keep a copy of the game herself. We knew that we could not
| |
| − | afford to give board games out too everyone, so we came up with a new way to
| |
| − | distribute our game at no cost. Our board game BioMech is now online to download
| |
| − | for free on our wiki <a href=’#’>here</a>, with full printing instructions.
| |
| − | This meant that our original target of making our game accessible to all UK
| |
| − | students was a lot more realistic.</p>
| |
| − |
| |
| − | <br>
| |
| − | <br>
| |
| − |
| |
| − | <h4><strong>Production</strong></h4>
| |
| − | <p id="pp">After testing the game at a couple of science conventions
| |
| − | such as the <a href=’#’>Big Bang Fair South West</a> and <a href=’#’>Britain Needs
| |
| − | Scientists</a>, we were give feedback to help us make some minor improvements.
| |
| − | After this was complete, we began manufacturing the game.
| |
| − | The unboxing of BioMech can be seen below:<p/>
| |
| − |
| |
| − | <p id="pp">This new version of the game was played by students from
| |
| − | <a href=’#’>Colyton Grammar School</a>. As part of our initiative
| |
| − | to make BioMech accessible to as many GCSE students as possible
| |
| − | we have began leaving copies of the game at schools free of charge,
| |
| − | in order to benefit the education of synthetic biology for GCSE and
| |
| − | A level students.</p>
| |
| − |
| |
| − |
| |
| − |
| |
| − |
| |
| − | <a id="Section_link" href="#section_3" style="display:block;margin:20px auto 0 auto;width:14px;"><span style="color:#47BCC2;font-size: 25px;" class="glyphicon glyphicon-menu-down" aria-hidden="true"></span></a>
| |
| − | </div>
| |
| − | </div>
| |
| − | <div class="col-xs-12 div_content">
| |
| − | <div id="section_3" class="link_fix"></div>
| |
| − | <div id="contentTitle">
| |
| − | Higher Education
| |
| − | </div>
| |
| − | <p id="pp">Despite the possible applications of synthetic biology
| |
| − | and, as shown by the number of iGEM teams entering each year into
| |
| − | the competition, the interest of both undergraduates, overgraduates
| |
| − | and high school students for the subject is growing, there is very
| |
| − | little synthetic biology education in the UK.</p>
| |
| − |
| |
| − | <p id="pp">Currently there is no education of
| |
| − | synthetic biology at the University of Exeter and
| |
| − | there are very few synthetic biology courses
| |
| − | and modules across the United Kingdom. However, we
| |
| − | want to target this gap in education of synthetic biology
| |
| − | at a university level.</p>
| |
| − |
| |
| − | <p id="pp">In response to this, we have decided to
| |
| − | create two new synthetic biology module for 2nd and
| |
| − | 3rd year students at our university. In these modules
| |
| − | we will give the students an introduction into
| |
| − | the fundamentals of synthetic biology, covering topics
| |
| − | such as plasmid design and construction, analytical techniques
| |
| − | and DNA constructs and genome integration. We are having a
| |
| − | large focus on biosafety and kill switches since we think this
| |
| − | is a major issue in the field. Furthermore, we want to help
| |
| − | the students to improve their research skills through a student
| |
| − | led journal club that will be run by former iGEM students.</p>
| |
| − |
| |
| − |
| |
| − |
| |
| − |
| |
| − |
| |
| − | <div>
| |
| − | <a id="Section_link" href="#section_4" style="display:block;margin:20px auto 0 auto;width:14px;"><span style="color:#47BCC2;font-size: 25px;" class="glyphicon glyphicon-menu-down" aria-hidden="true"></span></a>
| |
| − | </div>
| |
| − | </div>
| |
| − | <div class="col-xs-12 div_content">
| |
| − | <div id="section_4" class="link_fix"></div>
| |
| − | <div id="contentTitle">
| |
| − | Public Engagement
| |
| − | </div>
| |
| − |
| |
| − |
| |
| − | <h4>Desert Island Science</h4>
| |
| − | <p id="pp">Over the summer we created a series of podcasts in the style
| |
| − | of the BBC radio 4 programme ‘Desert Island Disks’. In this series we we
| |
| − | interview academics and key public science figures, such as Prof. Jim Al-khalili,
| |
| − | Prof, Richard Kitney, Dr. Lynn Rothschild and Prof. John Love, about synthetic biology
| |
| − | and public engagement.</p>
| |
| − | <br>
| |
| − |
| |
| − |
| |
| − |
| |
| − |
| |
| − | <p id="pp"><strong>During the interview we ask <i> 'if you were
| |
| − | stuck on a desert island what...'</i></strong></p>
| |
| − |
| |
| − | <br>
| |
| − |
| |
| − | <ul id="pp">
| |
| − | <img src="https://static.igem.org/mediawiki/2016/e/ea/T--Exeter--Home_Humanpractices.png"
| |
| − | style="margin-right:50px; margin-left:40px; float:left; width:22vw; height:44vh;">
| |
| − | <li style="margin-left: 40px">2 songs would you take to listen to</li>
| |
| − | <br>
| |
| − | <li style="margin-left: 40px">1 piece of science equipment would you take</li>
| |
| − | <br>
| |
| − | <li style="margin-left: 40px">1 luxury item would you take</li>
| |
| − | <br>
| |
| − | <li style="margin-left: 40px">1 book to read</li>
| |
| − | <br>
| |
| − | <li style="margin-left: 40px">You also have acess to a solar powered beto lab,
| |
| − | and a copy of the iGEM registry with full access to all
| |
| − | the parts</li>
| |
| − | </ul>
| |
| − |
| |
| − | <br>
| |
| − | <p id="pp">We also ask questions involving synethtic biology, scientific
| |
| − | outreach, edcuation and about their work.</p>
| |
| − |
| |
| − | <p id="pp">These podcasts aim to be entertaining,
| |
| − | educational and easily accessible. Podcasts are a
| |
| − | great way to reach a wider audience to educate them about
| |
| − | synthetic biology and change any negative views of the topic.
| |
| − | By featuring public science figures from a variety of disciplines,
| |
| − | it will highlight the importance of different subjects in the
| |
| − | interdisciplinary topic of synthetic biology. We hope
| |
| − | this will inspire people from a range of backgrounds
| |
| − | to learn about the subject. The podcasts are available
| |
| − | to listen to on Youtube and SoundCloud for free for everyone. </p>
| |
| − |
| |
| − |
| |
| − | <br>
| |
| − | <br>
| |
| − |
| |
| − | <h4>Diversity</h4>
| |
| − | <h6>Background</h6>
| |
| − | <p id="pp">
| |
| − | Background:
| |
| − | The fundamental reason for targeting equality
| |
| − | and diversity within science, is that synthetic
| |
| − | biology has the chance to be hierarchically and
| |
| − | systematically equal from the beginning. If those
| |
| − | working in the field can encourage the importance
| |
| − | of diversity to the younger generations, then when
| |
| − | synthetic biology becomes a well established and publicly
| |
| − | recognised field of science, it has the possibility of being
| |
| − | recognised for its progressive nature towards a gender, racial
| |
| − | and socio-economical equality.</p>
| |
| − |
| |
| − | <p id="pp">Using statistics gained from the Equality and Diversity
| |
| − | office at the University of Exeter, and further statistics
| |
| − | on gender inequality within the College of Life and Environmental
| |
| − | Sciences (CLES) and the College of Engineering Mathematics and
| |
| − | Physical Sciences (CEMPS) provided by Athena Swan, we want
| |
| − | to highlight the problem with inequality and diversity to a wider audience.
| |
| − | </p>
| |
| − |
| |
| − | <br>
| |
| − | <br>
| |
| − | <h6>How we will achieve this</h6>
| |
| − | <p id="pp">We aim to achieve this by focusing on three distinct areas:</p>
| |
| − |
| |
| − |
| |
| − | <ol id="pp">
| |
| − | <li style="margin-left: 40px" >Firstly, the initial reaction of students and academics to the
| |
| − | concept of sexism and diversity within science. With this we hope
| |
| − | to gauge whether sexism in science is a widely recognised across
| |
| − | the UK in higher education or if not enough is being done to publicise
| |
| − | the problem. We also want to understand how the definition of diversity
| |
| − | changes across the world.</li>
| |
| − |
| |
| − | <br>
| |
| − |
| |
| − | <li style="margin-left: 40px">Secondly, the work that is being done by academics at the University
| |
| − | of Exeter to both publicise and change the problem of inequality within
| |
| − | science. We want to use the statistics provided by the University Equality,
| |
| − | Diversity and Inclusivity group and the Athena Swan group to understand how
| |
| − | equality and diversity within science has changed over time. Furthermore we
| |
| − | want to begin the discussion of what more can be done.</li>
| |
| − |
| |
| − | <br>
| |
| − |
| |
| − | <li style="margin-left: 40px">Thirdly, the role that students can have in promoted equality and
| |
| − | diversity within various fields. We want to speak to student leaders
| |
| − | about how they view the situation and what they think can be done to
| |
| − | promote not just gender diversity but also diversity in terms of
| |
| − | religion, ethnicity, disability and socio-economic background.</li></ol>
| |
| − | </p>
| |
| − |
| |
| − | <br>
| |
| − | <br>
| |
| − |
| |
| − | <h4>Westminister iGEM UK meet-up 2016</h4>
| |
| − |
| |
| − | <p id="pp">In August we travelled to Westminster for the
| |
| − | iGEM UK annual meet-up, an opportunity to meet other UK teams,
| |
| − | discuss our ideas and projects and have a chance to practise our
| |
| − | presentation in front of students and academics. Although our
| |
| − | presentation was well received we were also given very important
| |
| − | feedback, such as why we hadn’t incorporated biosafety into our
| |
| − | game and our module. Since then we have rectified these issues.</p>
| |
| − |
| |
| − | <p id="pp"> Furthermore, we were given talks about
| |
| − | the fundamentals of synthetic biology and also about
| |
| − | conducting reliable surveys for our outreach.
| |
| − | We also had the chance to set up a collaboration with Glasgow,
| |
| − | and help out Warwick by directing them to schools and teams that
| |
| − | they could collaborate with or mentor. </p>
| |
| − |
| |
| − | <br>
| |
| − |
| |
| − | <h4>Science fairs and work experience students</h4>
| |
| − |
| |
| − | <br>
| |
| − |
| |
| − |
| |
| − | <h6>Big Bang South West</h6>
| |
| − |
| |
| − | <p id="pp">The Big Bang South West Science Fair was one of the first places we tested BioMech.
| |
| − | Our stall at the fair focussed on introducing students and teachers to synthetic biology and
| |
| − | gathering information on how people perceive synthetic biology. Students were aged between 8
| |
| − | and 18, and teachers from a large variety of schools from across the South West.</p>
| |
| − |
| |
| − | <p id="pp">For the fair, we wanted to show visitors the disciplinary nature of synthetic biology.
| |
| − | We displayed and discussed how physics, chemistry, biology and engineering can be used in synthetic
| |
| − | biology. We created two leaflets: one which explained the basics of Synthetic Biology, and one which
| |
| − | explained the iGEM competition. We created two companion powerpoint presentations to the leaflets
| |
| − | which went in more depth, and played them on loop on two iPads on the stand. As well as this we
| |
| − | premiered a very basic form of BioMech for students and teachers try out. One student told us:</p>
| |
| − |
| |
| − | <br> <br>
| |
| − |
| |
| − | <h5><q style="margin:auto;display:block;"><i>BioMech is more fun than the card games I played at a
| |
| − | card game convention in Birmingham</i></q></h5>
| |
| − |
| |
| − | <br><br>
| |
| − |
| |
| − | <p id="pp">We also drew inspiration from the ‘Activities Booklet’ created by the William and Mary
| |
| − | iGEM 2015 team. The sweetie DNA construction activity proved incredibly popular amongst the
| |
| − | younger students and gave us an opportunity to talk to them about basic genetics as well as some synthetic biology ideas.</p>
| |
| − |
| |
| − | <br>
| |
| − |
| |
| − | <h6>Britain Needs Scientists</h6>
| |
| − |
| |
| − | <p id="pp">The second science fair was Britain Needs Scientists, hosted at the University of Exeter.
| |
| − | This fair was aimed at students aged 16-18 who were interested in STEM careers. Here we focused on
| |
| − | tying the STEM subjects into Synthetic Biology and were able to discuss more complex aspects of synthetic biology</p>
| |
| − |
| |
| − | </div>
| |
| − | <div>
| |
| − | <a id="Section_link" href="#section_5" style="display:block;margin:20px auto 0 auto;width:14px;"><span style="color:#47BCC2;font-size: 25px;" class="glyphicon glyphicon-menu-down" aria-hidden="true"></span></a>
| |
| − | </div>
| |
| − | <div class="col-xs-12 div_content">
| |
| − | <div id="section_5" class="link_fix"></div>
| |
| − | <div id="contentTitle">
| |
| − | Equality and Diversity
| |
| − | </div>
| |
| − | </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>
| |
