|
|
| (72 intermediate revisions by 5 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.6vw;
| |
| − | 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%;
| |
| − | }
| |
| − | /*Heading styles*/
| |
| − | h1, h2, h3, h4, h5{
| |
| − | text-align:center;
| |
| − | color:#339499;
| |
| − | font-weight:500;
| |
| − | padding-left: 40px;
| |
| − | padding-right: 40px;
| |
| − | }
| |
| − | 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;
| |
| − | }
| |
| − |
| |
| − | /*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:60vh;
| |
| − | }
| |
| − | #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>
| |
| − | </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-3"><span class="oneline">Introduction</span></a>
| |
| − | <a href="#section_2" class="banner_link col-xs-6 col-sm-3"><span class="oneline">BioMech</span></a>
| |
| − | <a href="#section_3" class="banner_link col-xs-6 col-sm-3"><span class="oneline">Higher Education</span></a>
| |
| − | <a href="#section_4" class="banner_link col-xs-6 col-sm-3"><span class="twoline">Public Engagement</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: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_1" class="link_fix"></div>
| |
| − | <div id="contentTitle">
| |
| − | Introduction </div>
| |
| − |
| |
| − |
| |
| − |
| |
| − | <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>
| |
| − |
| |
| − |
| |
| − |
| |
| − | <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>
| |
| − |
| |
| − | <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 focussed 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.
| |
| − |
| |
| − | <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>
| |
| − |
| |
| − |
| |
| − |
| |
| − | <p id="pp" ><center><img src="https://static.igem.org/mediawiki/2016/e/ea/T--Exeter--Home_Humanpractices.png"
| |
| − | style="float:right; width:22vw; height:44vh;"><img src="https://static.igem.org/mediawiki/2016/e/ea/T--Exeter--Home_Humanpractices.png"
| |
| − | style="width:22vw; height:44vh;"> <img src="https://static.igem.org/mediawiki/2016/e/ea/T--Exeter--Home_Humanpractices.png"
| |
| − | style="float:left; width:22vw; height:44vh;"></center></p>
| |
| − |
| |
| − |
| |
| − | <h4><strong>Initial testing at The Judd School (July 2016)</strong></h4>
| |
| − | <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>
| |
| − |
| |
| − | <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>
| |
| − |
| |
| − | <h5><q><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>
| |
| − |
| |
| − | <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>
| |
| − |
| |
| − | <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>
| |
| − |
| |
| − | <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>
| |
| − | </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>
| |
