Difference between revisions of "Team:Groningen/test"

 
(176 intermediate revisions by 3 users not shown)
Line 1: Line 1:
−
{{test}}
+
{{groningen}}
 
<html>
 
<html>
−
 
+
<body>
 
<style>
 
<style>
−
ul.left{
+
div.bar {
−
     text-align: left;
+
     background-color: #027ad0;
 +
    background-image: linear-gradient(#027ad0, #027ad0);
 
}
 
}
−
ul.left li{
+
ul.menu, ul.menu ul {
−
     text-align: left;
+
    margin: 0;
 +
    padding: 0;
 +
    list-style: none;
 +
}
 +
ul.menu {
 +
width: 960px;
 +
    width: -moz-fit-content;
 +
    width: -webkit-fit-content;
 +
    width: fit-content;
 +
    text-align: center;
 +
    /*white-space: nowrap;*/
 +
    margin: 0px auto;
 +
    border: 0px solid #222;
 +
    background-color: #027ad0;
 +
    background-image: linear-gradient(#027ad0, #027ad0);
 +
    border-radius: 0px;
 +
}
 +
ul.menu:before,ul.menu:after {
 +
    content: "";
 +
    display: block;
 +
}
 +
ul.menu:after {
 +
    clear: both;
 +
}
 +
ul.menu li {
 +
    float: left;
 +
    box-shadow: none;
 +
    position: relative;
 +
}
 +
ul.menu li.lilast {
 +
    border-right: none;
 +
}
 +
ul.menu a {
 +
    float: left;
 +
    padding: 12px 16px;
 +
    color: #FFFFFF;
 +
    font: 17px Arial, Helvetica;
 +
    text-decoration: none;
 +
    text-shadow: 0 1px 0 #000;
 +
}
 +
ul.menu ul {
 +
    margin: 20px 0 0 0;
 +
    _margin: 0; /*IE6 only*/
 +
    opacity: 0;
 +
    visibility: hidden;
 +
    position: absolute; 
 +
    /* spacing between the menu and the dropdown menu, ideally 28px, or 23px for bordered menu */
 +
    top: 45px;
 +
    left: 0;
 +
    z-index: 1;   
 +
    background: #027ad0; 
 +
    background: linear-gradient(#027ad0, #027ad0);
 +
    border-radius: 0px;
 +
    transition: all .2s ease-out;
 +
}
 +
ul.menu li:hover > ul {
 +
    opacity: 1;
 +
    visibility: visible;
 +
    margin: 0;
 +
}
 +
ul.menu ul ul {
 +
    top: 0;
 +
    left: 150px;
 +
    margin: 0 0 0 20px;
 +
    _margin: 0; /*IE6 only*/
 +
    box-shadow: -0px 0 0 rgba(255,255,255,.3);   
 +
}
 +
ul.menu ul li {
 +
    float: none;
 +
    display: block;
 +
    border: 0;
 +
    _line-height: 0; /*IE6 only*/
 +
    box-shadow: 0 0px 0 #111, 0 0px 0 #666;
 +
     text-align: left;
 +
}
 +
ul.menu ul li:last-child { 
 +
    box-shadow: none;   
 +
    border: 0;
 +
}
 +
ul.menu ul a {   
 +
    padding: 10px;
 +
    width: 150px;
 +
    _height: 10px; /*IE6 only*/
 +
    display: block;
 +
    white-space: nowrap;
 +
    float: none;
 +
    text-transform: none;
 +
}
 +
ul.menu ul a:hover {
 +
    background-color: #032c62;
 +
    background-image: linear-gradient(#032c62, #032c62);
 +
}
 +
ul.menu li a:hover {
 +
    background-color: #032c62;
 +
    background-image: linear-gradient(#032c62, #032c62);
 
}
 
}
−
</style>
 
  
−
<body>
+
/*div.bar li a {display: block;}*/
 +
div.bar li.icon {display: none;}
  
−
<div class="main-col">
+
@media screen and (max-width:800px) {
 +
ul.menu li a {
 +
position: relative;
 +
left: 0;
 +
top: 0;
 +
display: block;
 +
}
 +
div.bar li {display: none;}
 +
div.bar li.icon {
 +
    position: relative;
 +
    left: 0;
 +
    top: 0;
 +
    display: block;
 +
}
 +
ul.menu {
 +
  list-style-type: block;
 +
  margin: 0;
 +
  padding: 0;
 +
}
 +
ul.menu li a {
 +
  padding: 12px 14px;
 +
  text-decoration: none;
 +
  font-size: 15px;
 +
}
 +
ul.menu ul a {   
 +
    padding: 10px;
 +
    width: 120px;
 +
}
 +
}
  
−
<h1> Applied Design </h1>
+
  div.bar.res {position: relative;}
−
<h5> IMPACT Cartridge </h5>
+
  div.menu.res li.icon {
 +
    position: absolute;
 +
    left: 0;
 +
    top: 0;
 +
float: left;
 +
  }
 +
  div.bar.res li {
 +
    float: none;
 +
    display: block;
 +
  }
 +
  div.bar.res li a {
 +
    display: block;
 +
    text-align: left;
 +
  }
 +
ul.menu.res ul {
 +
    margin: 0px 0 0 0;
 +
    _margin: 0;
 +
    opacity: 1;
 +
    visibility: visible;
 +
    position: absolute; 
 +
    top: 42px;
 +
    left: 0;
 +
    z-index: 1;   
 +
    background: #027ad0; 
 +
    background: linear-gradient(#027ad0, #027ad0);
 +
    border-radius: 0px;
 +
    transition: all .2s ease-in-out;
 +
}
  
 +
ul.menu.res li {float: left;}
  
−
<img id="bannerimg" src="https://static.igem.org/mediawiki/2017/b/b5/Banner.jpg" usemap="#imagemap_sponsors" alt="" style="width:100%;"/>
 
−
<map name="imagemap_sponsors" id="imagemapbanner">
 
−
<area  alt="" title="" href="KIVI" shape="rect" coords="41,30,516,315" style="display:inline;outline: 1px solid red;" target="_self"    />
 
−
<area  alt="" title="" href="GATEBIOTECH" shape="rect" coords="34,464,517,716" style="border: 1px solid black;" target="_self"    />
 
−
<area  alt="" title="" href="BASECLEAR" shape="rect" coords="30,334,535,469" style="outline:none;" target="_self"    />
 
−
<area  alt="" title="" href="RIVM" shape="rect" coords="583,32,1251,343" style="outline:none;" target="_self"    />
 
−
<area  alt="" title="" href="GRUNIFONDS" shape="rect" coords="585,370,1436,429" style="outline:none;" target="_self"    />
 
−
<area  alt="" title="" href="CORBION" shape="rect" coords="557,469,913,693" style="outline:none;" target="_self"    />
 
−
<area  alt="" title="" href="DSM" shape="rect" coords="927,454,1441,722" style="outline:none;" target="_self"    />
 
−
<area  alt="" title="" href="UEF" shape="rect" coords="1274,28,1438,358" style="outline:none;" target="_self"    />
 
−
<area  alt="" title="" href="SCIENCELYNX" shape="rect" coords="1556,18,1903,204" style="outline:none;" target="_self"    />
 
−
<area  alt="" title="" href="GBB" shape="rect" coords="1491,234,1881,420" style="outline:none;" target="_self"    />
 
−
<area  alt="" title="" href="ARLA" shape="rect" coords="1476,419,1896,711" style="outline:none;" target="_self"    />
 
−
<area  alt="" title="" href="ENTEG" shape="rect" coords="1973,230,2327,384" style="outline:none;" target="_self"    />
 
−
<area  alt="" title="" href="BACKER" shape="rect" coords="1974,22,2328,226" style="outline:none;" target="_self"    />
 
−
<area  alt="" title="" href="QIAGEN" shape="rect" coords="1959,423,2313,733" style="outline:none;" target="_self"    />
 
−
<area  alt="" title="" href="BEBASIC" shape="rect" coords="2382,373,2736,729" style="outline:none;" target="_self"    />
 
−
<area  alt="" title="" href="EPPENDORF" shape="rect" coords="2753,416,3334,550" style="outline:none;" target="_self"    />
 
−
<area  alt="" title="" href="MAXGRUBER" shape="rect" coords="2755,551,3336,709" style="outline:none;" target="_self"    />
 
−
<area  alt="" title="" href="STRATINGH" shape="rect" coords="3348,407,3776,687" style="outline:none;" target="_self"    />
 
−
<area  alt="" title="" href="RUG" shape="rect" coords="2455,32,2966,192" style="outline:none;" target="_self"    />
 
−
<area  alt="" title="" href="MATHS" shape="rect" coords="2461,231,3062,360" style="outline:none;" target="_self"    />
 
−
<area  alt="" title="" href="AICOG" shape="rect" coords="3063,232,3528,358" style="outline:none;" target="_self"    />
 
−
<area  alt="" title="" href="ZIAM" shape="rect" coords="3385,60,3790,182" style="outline:none;" target="_self"    />
 
−
<area  alt="" title="" href="MOLDYN" shape="rect" coords="3530,222,3830,348" style="outline:none;" target="_self"    />
 
−
</map>
 
  
 +
</style>
  
 +
 +
  <section>
 +
  <div class="bar">
 +
<!-- Begin content block -->
 +
  <!--<ul id="menu"> -->
 +
  <ul class="menu">
 +
    <li class="icon"> <a href="javascript:void(0);" onclick="myFunction()">≡ Menu</a></li>
 +
  <li><a href="?page=home">Home</a></li>
 +
  <li><a href="#">Symposium</a>
 +
    <ul>
 +
    <li><a href="?page=program" onclick="">Program</a></li>
 +
    <li><a href="?page=daychair" onclick="">Day chair</a></li>
 +
    <li><a href="?page=speakers" onclick="">Speakers</a></li>
 +
    <li><a href="?page=guestspeaker" onclick="">Guest speaker</a></li>
 +
    <li><a href="?page=location" onclick="">Location</a></li>
 +
    </ul>
 +
  </li>
 +
<!--  <li><a href="?page=gallery">Gallery</a></li>-->
 +
  <li><a href="?page=sponsors">Sponsors</a></li>
 +
  <li><a href="#">About us</a>
 +
    <ul>
 +
    <li><a href="?page=nanoscience" onclick="">Nanoscience</a></li>
 +
    <li><a href="?page=topmaster" onclick="">Top Master</a></li>
 +
    <li><a href="?page=recom" onclick="">Recommendations</a></li>
 +
    </ul>
 +
  </li>
 +
  <li><a href="?page=contact">Contact</a></li>
 +
  <li class="lilast"><a href="?page=registration">Registration</a></li>
 +
  </ul>
 +
</div>
 +
</section>
  
 
<script>
 
<script>
−
//$(document).ready(function() {
+
function myFunction() {
−
//    var origWidth = 3850;
+
    document.getElementsByClassName("bar")[0].classList.toggle("res");
−
//    var origHeight = 770;
+
    document.getElementsByClassName("menu")[0].classList.toggle("res");
−
//   
+
−
//    var banner = $('#bannerimg');
+
−
//    var map = $('map[name^="imagemap_sponsors"]');
+
−
//   
+
−
//    var newWidth = banner.innerWidth();
+
−
//    var newHeight = banner.innerHeight();
+
−
//   
+
−
//    var dx = newWidth / origWidth;
+
−
//    var dy = newHeight / origHeight;
+
−
//   
+
−
//    map.find('area').each(function() {
+
−
//        var coords = $(this).attr('coords').split(',');
+
−
//        coords[0] = parseFloat(coords[0]) * dx;
+
−
//        coords[1] = parseFloat(coords[1]) * dy;
+
−
//        coords[2] = parseFloat(coords[2]) * dx;
+
−
//        coords[3] = parseFloat(coords[3]) * dy;
+
−
//        $(this).attr('coords', coords.join(','));
+
−
//    });
+
−
//});
+
−
</script>
+
−
<style>
+
−
area {
+
−
outline-style:solid;
+
 
}
 
}
−
</style>
+
</script>
  
−
<p class="left">The cartridge we designed is made to be very cheap to produce (just injection molded plastics and bacteria), and very easy to use. It does not require any extra expensive lab equipment nor would it need much training. This has clear advantages compared to more involved methods such as PCR analysis which need a well stocked lab with highly trained personnel.</p>
+
<div class="main-col">
  
−
<p class="left"><b>Operation</b></p>
+
<h2><a href="https://2017.igem.org/Team:Groningen/test1">back to test 1</a></h2>
−
<p class="left">The instructions are essentially printed on the cartridge itself, you simply turn the 3-way valve 45° for every step. The syringe is preloaded with a hydrogen peroxide solution (30%), and does not have to be loaded by the consumer.
+
−
<ul class="left">
+
−
  <li>Step 1: Put a syringe with the sample you wish to measure in the top (between 10-40ml).</li>
+
−
  <li>Step 2: Turn the valve to <i>Sample</i> and empty the syringe.</li>
+
−
  <li>Step 3: Turn the valve to <i>Close</i> and pull out the empty syringe.</li>
+
−
  <li>Step 4: Now the bacteria will be re-hydrated and start to grow. In this step you put the cartridge as a whole into an incubator and monitor it. After a set amount of time you can look through the window to see if phages have been detected.</li>
+
−
  <li>Step 5: After you're done measuring you can dispose of the bacteria by putting the valve to <i>Kill</i> and squeezing the syringe.</li>
+
−
  <li>Step 6: The syringe should now be empty and the valve can be set to safe.</li>
+
−
</ul></p>
+
  
−
<p class="left"><b>Cartridge Design</b></p>
+
<div>hicula risus et, congue mi. Praesent quis auctor enim. Aenean gravida, libero ut dignissim porta, elit nisi faucibus nisi, vitae faucibus lorem eros in augue. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. In ac varius diam. Mauris consectetur sed erat at dapibus. Fusce pulvinar est eu orci lacinia egestas.
−
<p class="left">We started out with a 2D blueprint for a box with slides that could be opened from the outside by the operator. In this idea the bacteria would be a freeze dried powder in the reaction chamber. To get the bacteria to grow a growth medium would first be added before the milk sample, and the whole box would go inside a incubator. Afterwards the whole thing would be autoclaved or incinerated. It was decided that the slides idea would be too hard to make waterproof, plus any leakage would be to the outside.</p>
+
  
−
<img class="imglab" style="width: 45%; display: inline-block;" src="https://static.igem.org/mediawiki/2017/1/1b/LACTIS_BOX_-_FRONT_VIEW.jpg" alt="First draft for our cartridge, front view.">
+
Phasellus facilisis nulla quis tortor adipiscing, eu blandit tortor pulvinar. In lacus purus, aliquet eu ante ut, tempor ultricies diam. Donec cursus neque neque, eget vehicula nisl commodo at. Fusce eu urna tempus, egestas ante id, facilisis dolor. Pellentesque venenatis ante convallis, ullamcorper erat at, malesuada elit. Interdum et malesuada fames ac ante ipsum primis in faucibus. Aliquam commodo lectus ut luctus malesuada. Donec leo nisl, dignissim et ullamcorper ut, porta id ante. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum eros felis, consequat sed augue non, semper eleifend nisi.
−
<img class="imglab" style="width: 45%; display: inline-block;" src="https://static.igem.org/mediawiki/2017/5/53/LACTIS_BOX_-_SIDE_VIEW.jpg" alt="First draft for our cartridge, from the side.">
+
  
−
<p class="left">We redesigned it to have as few components penetrating the cartridge as possible, to make it as safe as it can be. Furthermore we made it a lot safer already by putting the bacteria inside a semipermeable plastic, so even if anything leaked the bacteria would not be able to get out. This new plan was worked out in 3D and a prototype was printed using our <a href="https://static.igem.org/mediawiki/2017/0/00/3DprinterMegaPhage480speedFF.mp4">extruder 3D printer.</a> The problem with this design was immediately obvious as the fidelity of the racks and pinions (gears) was too low to work right. Plus we had doubts concerning the slides going sideways instead of smoothly to either side (the rollers would try to prevent this).</p>
+
Maecenas tincidunt, ante in ultricies porta, magna ipsum convallis augue, non ornare turpis orci ac risus. Duis non enim sit amet libero ultricies egestas. Duis bibendum felis est, nec feugiat erat imperdiet sed. Donec aliquet, velit ac semper fermentum, quam leo eleifend nisl, non rhoncus sapien nibh ac massa. Integer mattis arcu nec suscipit laoreet.
 +
Sub heading style
  
−
<img class="imgsize" src="https://static.igem.org/mediawiki/2017/9/9c/Cartv2.jpg" alt="A simple gear system inside would open the chambers.">
+
Nunc ut ornare odio. Proin massa turpis, porta at dolor non, tempus sagittis risus. Maecenas ornare, eros eget commodo sagittis, neque orci consectetur risus, sed convallis purus
 +
# First Name Last Name Username
 +
1 Mark Otto @mdo
 +
2 Jacob Thornton @fat
 +
3 Larry the Bird @twitter
 +
The Route
  
−
<p class="left">Making it watertight seemed daunting at this point. We had another insight that we did not need to add growth media separately, being <i>L. Lactis</i> they should already grow in a milk sample. To make them grow we would simply add freeze dried nutrients to the bacteria package, that way you would only need to add water (taken from the milk sample). A previous <a href="https://2012.igem.org/Team:Groningen/Sticker">Groningen team (2012)</a> has done something similar with a semipermeable package. We simplified the design by removing all the gears and went back to the sliders for a moment. In this new design we would not need a growth medium compartment but would add a compartment with a hydrogen peroxide solution instead. This solution would be added after the milk sample and the measurement was done to neutralize the bacteria and make it safe without needing an autoclave on hand. This idea we got from <a href="http://www.ufz.de/arsolux/">ARSOlux</a>, we became aware of them and their project in our skype call with <a href="Engagement">Wouter Ghering</a>. It sort of worked after printing and assembling, but it was very hard to keep it watertight at the sliders, and it was not as user friendly as you want it to be. Clearly we needed something more reliable.</p>
+
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut egestas consectetur ante a rhoncus. Praesent a sapien vulputate, vehicula risus et, congue mi. Praesent quis auctor enim. Aenean gravida, libero ut dignissim porta, elit nisi faucibus nisi, vitae faucibus lorem eros in augue. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. In ac varius diam. Mauris consectetur sed erat at dapibus. Fusce pulvinar est eu orci lacinia egestas.
 +
Hotel.
 +
795 Folsom Ave, Suite 600
 +
San Francisco, CA 94107
 +
P: (123) 456-7890
 +
Full Name
 +
first.last@example.com
  
−
<img class="imglab" src="https://static.igem.org/mediawiki/2017/0/0b/Cartv3.jpg" alt="Version 3 was back to sliders again.">
+
Phasellus facilisis nulla quis tortor adipiscing, eu blandit tortor pulvinar. In lacus purus, aliquet eu ante ut, tempor ultricies diam. Donec cursus neque neque, eget vehicula nisl commodo at. Fusce eu urna tempus, egestas ante id, facilisis dolor. Pellentesque venenatis ante convallis, ullamcorper erat at, malesuada elit. Interdum et malesuada fames ac ante ipsum primis in faucibus. Aliquam commodo lectus ut luctus malesuada. Donec leo nisl, dignissim et ullamcorper ut, porta id ante. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum eros felis, consequat sed augue non, semper eleifend nisi.
  
−
<p class="left">Finally we came up with using a simple IV three way valve. These are clearly build to a high standard, as well as extremely cheap. They have almost exactly the functionality of the earlier gear system, but then build into one part. Gluing it in required a special glue for polypropylene, but the whole thing works well. For demonstration purposes we added a small hole to let out the fluid in the reaction reservoir, and added a larger transparent back pane (clear PMMA). This was to be our final design.</p>
+
Maecenas tincidunt, ante in ultricies porta, magna ipsum convallis augue, non ornare turpis orci ac risus. Duis non enim sit amet libero ultricies egestas. Duis bibendum felis est, nec feugiat erat imperdiet sed. Donec aliquet, velit ac semper fermentum, quam leo eleifend nisl, non rhoncus sapien nibh ac massa. Integer mattis arcu nec suscipit laoreet. Cras nec libero leo. Nulla bibendum ligula ut nisi dictum, et interdum ipsum scelerisque. Nullam a volutpat tellus. Maecenas nisi est, ultricies in neque in, aliquet dictum odio. Etiam suscipit sapien purus, suscipit pharetra tellus lobortis ut. Maecenas commodo feugiat justo ac ullamcorper. In volutpat nec velit posuere placerat. Suspendisse rutrum dolor sed semper pharetra.
 +
The Bike
  
−
<img class="imglab" src="https://static.igem.org/mediawiki/2017/3/35/Cartv4.jpg" alt="Final design incorporating a medical 3-way valve.">
+
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut egestas consectetur ante a rhoncus. Praesent a sapien vulputate, vehicula risus et, congue mi. Praesent quis auctor enim. Aenean gravida, libero ut dignissim porta, elit nisi faucibus nisi, vitae faucibus lorem eros in augue. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. In ac varius diam. Mauris consectetur sed erat at dapibus. Fusce pulvinar est eu orci lacinia egestas.
  
−
<p class="left"><b>Semipermeable Plastic</b></p>
+
Phasellus facilisis nulla quis tortor adipiscing, eu blandit tortor pulvinar. In lacus purus, aliquet eu ante ut, tempor ultricies diam. Donec cursus neque neque, eget vehicula nisl commodo at. Fusce eu urna tempus, egestas ante id, facilisis dolor. Pellentesque venenatis ante convallis, ullamcorper erat at, malesuada elit. Interdum et malesuada fames ac ante ipsum primis in faucibus. Aliquam commodo lectus ut luctus malesuada. Donec leo nisl, dignissim et ullamcorper ut, porta id ante. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum eros felis, consequat sed augue non, semper eleifend nisi.
−
<p class="left">There are various semipermeable plastics. They work the same as semipermeable membranes in that they allow the passage of a certain size of particle. For our purposes we need a plastic with pores in it of around 100nm. That way they can let through the water and phage particles while retaining the bacteria. The most obvious plastics are Low density polyethylene or cellophane, both are in use as semipermeable plastics in other applications (dialysis membranes for example).</p>
+
  
−
<p class="left">The rest of the casing would be made out of injection molding polypropylene, which is the plastic normally used for lab and medical equipment. This plastic has a low surface energy and as such it is hydrophobic and lipophobic, for cleaner operation. The three way valve and syringe are both (medical grade) polypropylene as well, which is chemically resistant and cheap.</p>
+
Description lists
 +
    A description list is perfect for defining terms.
 +
Euismod
 +
    Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.
 +
    Donec id elit non mi porta gravida at eg</div>
  
 +
<div id="snavtest">
 +
<h3>THIS IS MY ID TARGET</h3>
 +
<a href="#snavtest">test this page</a><br>
 +
</div>
  
−
<h2> Educational Card Game </h2>
+
<div>faucibus nisi, vitae faucibus lorem eros in augue. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. In ac varius diam. Mauris consectetur sed erat at dapibus. Fusce pulvinar est eu orci lacinia egestas.
−
<h5> Outbreak ! </h5>
+
  
−
<p class="left"><b>Overview</b></p>
+
Phasellus facilisis nulla quis tortor adipiscing, eu blandit tortor pulvinar. In lacus purus, aliquet eu ante ut, tempor ultricies diam. Donec cursus neque neque, eget vehicula nisl commodo at. Fusce eu urna tempus, egestas ante id, facilisis dolor. Pellentesque venenatis ante convallis, ullamcorper erat at, malesuada elit. Interdum et malesuada fames ac ante ipsum primis in faucibus. Aliquam commodo lectus ut luctus malesuada. Donec leo nisl, dignissim et ullamcorper ut, porta id ante. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum eros felis, consequat sed augue non, semper eleifend nisi.
−
<p class="left">For our safety proposal for the <a href="https://2017.igem.org/Team:Groningen/Engagement">RIVM</a> we said we would make a card game. The game had to be fairly simple to explain and quick to play since few people would otherwise put in the time. Inspired by such games as Boonanza and Sushi Go we quickly made a game where you would play dairy products worth some points and infect the products of other players to make them worth less.</p>
+
  
−
<p class="left">It worked pretty well but it was deemed to be more fun than educational, especially after talking again to <a href="https://2017.igem.org/Team:Groningen/HP/Silver">Jaco Westra</a>. So we went looking for a different type of card game, a so called "serious game". First we had the idea to make an RPG style game more akin to Munchkin, where you would level up your "preparedness" to win and defeat synthetic biology inspired threats as a stakeholder. Preferably in a cooperative way, but making card or board games cooperative is a challenge in and of itself.</p>
+
Maecenas tincidunt, ante in ultricies porta, magna ipsum convallis augue, non ornare turpis orci ac risus. Duis non enim sit amet libero ultricies egestas. Duis bibendum felis est, nec feugiat erat imperdiet sed. Donec aliquet, velit ac semper fermentum, quam leo eleifend nisl, non rhoncus sapien nibh ac massa. Integer mattis arcu nec suscipit laoreet.
 +
Sub heading style
  
−
<p class="left">This proved to be way too much work and we needed help in design. We went to talk to <a href="https://2017.igem.org/Team:Groningen/Engagement">Ferdinand van der Graaf</a> who is a researcher and a teacher, and has incorporated games in his lessons to teach about evolution. This proved to be very fruitful and we talked at length about game mechanics and how they interact. The most important points he made were:
+
Nunc ut ornare odio. Proin massa turpis, porta at dolor non, tempus sagittis risus. Maecenas ornare, eros eget commodo sagittis, neque orci consectetur risus, sed convallis purus
 +
# First Name Last Name Username
 +
1 Mark Otto @mdo
 +
2 Jacob Thornton @fat
 +
3 Larry the Bird @twitter
 +
The Route
  
−
<ul class="left">
+
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut egestas consectetur ante a rhoncus. Praesent a sapien vulputate, vehicula risus et, congue mi. Praesent quis auctor enim. Aenean gravida, libero ut dignissim porta, elit nisi faucibus nisi, vitae faucibus lorem eros in augue. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. In ac varius diam. Mauris consectetur sed erat at dapibus. Fusce pulvinar est eu orci lacinia egestas.
−
  <li>Don't think too much about the "serious gaming" aspect, if a game isn't fun enough to play there's no point.</li>
+
Hotel.
−
  <li>Especially children read fluff (the little info text on cards) text and take it to heart.</li>
+
795 Folsom Ave, Suite 600
−
  <li>To make a game coop you must include some mechanism external to players (something we did not end up using).</li>
+
San Francisco, CA 94107
−
  <li>To keep as close as possible to an existing game, since those games are already fun and balanced.</li>
+
P: (123) 456-7890
−
  <li>To look at Machiavelli for inspiration, instead of a RPG game.</li>
+
Full Name
−
</ul></p>
+
first.last@example.com
  
−
<p class="left">With this information we went back to the drawing board and made a completely new game. In this game you have to think about which stakeholder you want to be before the round starts and which other players want. As a stakeholder you then can play cards in 3 different areas: Regulations, Opinions or Research. You win the game if you get more than a certain amount of these. The game can be played with 3 to 6 players, and takes about 30 minutes to explain and play in one setting</p>
+
Phasellus facilisis nulla quis tortor adipiscing, eu blandit tortor pulvinar. In lacus purus, aliquet eu ante ut, tempor ultricies diam. Donec cursus neque neque, eget vehicula nisl commodo at. Fusce eu urna tempus, egestas ante id, facilisis dolor. Pellentesque venenatis ante convallis, ullamcorper erat at, malesuada elit. Interdum et malesuada fames ac ante ipsum primis in faucibus. Aliquam commodo lectus ut luctus malesuada. Donec leo nisl, dignissim et ullamcorper ut, porta id ante. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum eros felis, consequat sed augue non, semper eleifend nisi.
  
−
<p class="left">The game as it is meshes quite well with the RIVM theme of "Think before you do", we presented this at the Kennisparade too. Of coarse we wanted to print it professionally, including fiches and instructions.</p>
+
Maecenas tincidunt, ante in ultricies porta, magna ipsum convallis augue, non ornare turpis orci ac risus. Duis non enim sit amet libero ultricies egestas. Duis bibendum felis est, nec feugiat erat imperdiet sed. Donec aliquet, velit ac semper fermentum, quam leo eleifend nisl, non rhoncus sapien nibh ac massa. Integer mattis arcu nec suscipit laoreet. Cras nec libero leo. Nulla bibendum ligula ut nisi dictum, et interdum ipsum scelerisque. Nullam a volutpat tellus. Maecenas nisi est, ultricies in neque in, aliquet dictum odio. Etiam suscipit sapien purus, suscipit pharetra tellus lobortis ut. Maecenas commodo feugiat justo ac ullamcorper. In volutpat nec velit posuere placerat. Suspendisse rutrum dolor sed semper pharetra.
 +
The Bike
  
−
https://static.igem.org/mediawiki/2017/8/89/Phagedesign.jpg
+
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut egestas consectetur ante a rhoncus. Praesent a sapien vulputate, vehicula risus et, congue mi. Praesent quis auctor enim. Aenean gravida, libero ut dignissim porta, elit nisi faucibus nisi, vitae faucibus lorem eros in augue. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. In ac varius diam. Mauris consectetur sed erat at dapibus. Fusce pulvinar est eu orci lacinia egestas.
  
−
</div>
+
Phasellus facilisis nulla quis tortor adipiscing, eu blandit tortor pulvinar. In lacus purus, aliquet eu ante ut, tempor ultricies diam. Donec cursus neque neque, eget vehicula nisl commodo at. Fusce eu urna tempus, egestas ante id, facilisis dolor. Pellentesque venenatis ante convallis, ullamcorper erat at, malesuada elit. Interdum et malesuada fames ac ante ipsum primis in faucibus. Aliquam commodo lectus ut luctus malesuada. Donec leo nisl, dignissim et ullamcorper ut, porta id ante. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum eros felis, consequat sed augue non, semper eleifend nisi.
  
−
<div class="footer">
+
Description lists
−
<img style="width: 100%;" src="https://static.igem.org/mediawiki/2017/b/b5/Banner.jpg" alt="Sponsors">
+
    A description list is perfect for defining terms.
−
</div>
+
Euismod
 +
    Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.
 +
    Donec id elit non mi porta gravida at eg</div>
  
−
</body>
 
  
−
<style>
+
</div> <!-- main-col -->
−
.imglab {
+
−
    display: block;
+
−
    max-width: 70%;
+
−
    margin: auto;
+
−
    text-align: center;
+
−
    border-radius: 15px 50px 15px 50px;
+
−
}
+
−
.imglab:hover {
+
−
  opacity: 0.85;
+
−
}
+
−
</style>
+
  
−
<script>
+
<div class="footer">
−
//modal trigger
+
<img id="bannerimg" usemap="#imagemap_sponsors" style="width: 100%;" src="https://static.igem.org/mediawiki/2017/b/b5/Banner.jpg" alt="Sponsors">
−
var modal = document.getElementById('myModal');
+
</div>
−
var images = document.getElementsByClassName("imglab");
+
</body>
−
for(var i = 0; i < images.length; i++){
+
<html>
−
    var img = images[i];
+
−
    var modalImg = document.getElementById("img01");
+
−
    var captionText = document.getElementById("caption");
+
−
    img.onclick = function(){
+
−
        modal.style.display = "block";
+
−
        modalImg.src = this.src;
+
−
        modalImg.alt = this.alt;
+
−
        captionText.innerHTML = this.alt;
+
−
    }
+
−
}
+
−
//Get click and close
+
−
modal.addEventListener('click',function(){
+
−
this.style.display="none";
+
−
})
+
−
</script>
+
−
 
+
−
</html>
+

Latest revision as of 19:33, 31 October 2017


back to test 1

hicula risus et, congue mi. Praesent quis auctor enim. Aenean gravida, libero ut dignissim porta, elit nisi faucibus nisi, vitae faucibus lorem eros in augue. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. In ac varius diam. Mauris consectetur sed erat at dapibus. Fusce pulvinar est eu orci lacinia egestas. Phasellus facilisis nulla quis tortor adipiscing, eu blandit tortor pulvinar. In lacus purus, aliquet eu ante ut, tempor ultricies diam. Donec cursus neque neque, eget vehicula nisl commodo at. Fusce eu urna tempus, egestas ante id, facilisis dolor. Pellentesque venenatis ante convallis, ullamcorper erat at, malesuada elit. Interdum et malesuada fames ac ante ipsum primis in faucibus. Aliquam commodo lectus ut luctus malesuada. Donec leo nisl, dignissim et ullamcorper ut, porta id ante. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum eros felis, consequat sed augue non, semper eleifend nisi. Maecenas tincidunt, ante in ultricies porta, magna ipsum convallis augue, non ornare turpis orci ac risus. Duis non enim sit amet libero ultricies egestas. Duis bibendum felis est, nec feugiat erat imperdiet sed. Donec aliquet, velit ac semper fermentum, quam leo eleifend nisl, non rhoncus sapien nibh ac massa. Integer mattis arcu nec suscipit laoreet. Sub heading style Nunc ut ornare odio. Proin massa turpis, porta at dolor non, tempus sagittis risus. Maecenas ornare, eros eget commodo sagittis, neque orci consectetur risus, sed convallis purus # First Name Last Name Username 1 Mark Otto @mdo 2 Jacob Thornton @fat 3 Larry the Bird @twitter The Route Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut egestas consectetur ante a rhoncus. Praesent a sapien vulputate, vehicula risus et, congue mi. Praesent quis auctor enim. Aenean gravida, libero ut dignissim porta, elit nisi faucibus nisi, vitae faucibus lorem eros in augue. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. In ac varius diam. Mauris consectetur sed erat at dapibus. Fusce pulvinar est eu orci lacinia egestas. Hotel. 795 Folsom Ave, Suite 600 San Francisco, CA 94107 P: (123) 456-7890 Full Name first.last@example.com Phasellus facilisis nulla quis tortor adipiscing, eu blandit tortor pulvinar. In lacus purus, aliquet eu ante ut, tempor ultricies diam. Donec cursus neque neque, eget vehicula nisl commodo at. Fusce eu urna tempus, egestas ante id, facilisis dolor. Pellentesque venenatis ante convallis, ullamcorper erat at, malesuada elit. Interdum et malesuada fames ac ante ipsum primis in faucibus. Aliquam commodo lectus ut luctus malesuada. Donec leo nisl, dignissim et ullamcorper ut, porta id ante. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum eros felis, consequat sed augue non, semper eleifend nisi. Maecenas tincidunt, ante in ultricies porta, magna ipsum convallis augue, non ornare turpis orci ac risus. Duis non enim sit amet libero ultricies egestas. Duis bibendum felis est, nec feugiat erat imperdiet sed. Donec aliquet, velit ac semper fermentum, quam leo eleifend nisl, non rhoncus sapien nibh ac massa. Integer mattis arcu nec suscipit laoreet. Cras nec libero leo. Nulla bibendum ligula ut nisi dictum, et interdum ipsum scelerisque. Nullam a volutpat tellus. Maecenas nisi est, ultricies in neque in, aliquet dictum odio. Etiam suscipit sapien purus, suscipit pharetra tellus lobortis ut. Maecenas commodo feugiat justo ac ullamcorper. In volutpat nec velit posuere placerat. Suspendisse rutrum dolor sed semper pharetra. The Bike Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut egestas consectetur ante a rhoncus. Praesent a sapien vulputate, vehicula risus et, congue mi. Praesent quis auctor enim. Aenean gravida, libero ut dignissim porta, elit nisi faucibus nisi, vitae faucibus lorem eros in augue. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. In ac varius diam. Mauris consectetur sed erat at dapibus. Fusce pulvinar est eu orci lacinia egestas. Phasellus facilisis nulla quis tortor adipiscing, eu blandit tortor pulvinar. In lacus purus, aliquet eu ante ut, tempor ultricies diam. Donec cursus neque neque, eget vehicula nisl commodo at. Fusce eu urna tempus, egestas ante id, facilisis dolor. Pellentesque venenatis ante convallis, ullamcorper erat at, malesuada elit. Interdum et malesuada fames ac ante ipsum primis in faucibus. Aliquam commodo lectus ut luctus malesuada. Donec leo nisl, dignissim et ullamcorper ut, porta id ante. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum eros felis, consequat sed augue non, semper eleifend nisi. Description lists A description list is perfect for defining terms. Euismod Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit. Donec id elit non mi porta gravida at eg

THIS IS MY ID TARGET

test this page
faucibus nisi, vitae faucibus lorem eros in augue. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. In ac varius diam. Mauris consectetur sed erat at dapibus. Fusce pulvinar est eu orci lacinia egestas. Phasellus facilisis nulla quis tortor adipiscing, eu blandit tortor pulvinar. In lacus purus, aliquet eu ante ut, tempor ultricies diam. Donec cursus neque neque, eget vehicula nisl commodo at. Fusce eu urna tempus, egestas ante id, facilisis dolor. Pellentesque venenatis ante convallis, ullamcorper erat at, malesuada elit. Interdum et malesuada fames ac ante ipsum primis in faucibus. Aliquam commodo lectus ut luctus malesuada. Donec leo nisl, dignissim et ullamcorper ut, porta id ante. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum eros felis, consequat sed augue non, semper eleifend nisi. Maecenas tincidunt, ante in ultricies porta, magna ipsum convallis augue, non ornare turpis orci ac risus. Duis non enim sit amet libero ultricies egestas. Duis bibendum felis est, nec feugiat erat imperdiet sed. Donec aliquet, velit ac semper fermentum, quam leo eleifend nisl, non rhoncus sapien nibh ac massa. Integer mattis arcu nec suscipit laoreet. Sub heading style Nunc ut ornare odio. Proin massa turpis, porta at dolor non, tempus sagittis risus. Maecenas ornare, eros eget commodo sagittis, neque orci consectetur risus, sed convallis purus # First Name Last Name Username 1 Mark Otto @mdo 2 Jacob Thornton @fat 3 Larry the Bird @twitter The Route Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut egestas consectetur ante a rhoncus. Praesent a sapien vulputate, vehicula risus et, congue mi. Praesent quis auctor enim. Aenean gravida, libero ut dignissim porta, elit nisi faucibus nisi, vitae faucibus lorem eros in augue. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. In ac varius diam. Mauris consectetur sed erat at dapibus. Fusce pulvinar est eu orci lacinia egestas. Hotel. 795 Folsom Ave, Suite 600 San Francisco, CA 94107 P: (123) 456-7890 Full Name first.last@example.com Phasellus facilisis nulla quis tortor adipiscing, eu blandit tortor pulvinar. In lacus purus, aliquet eu ante ut, tempor ultricies diam. Donec cursus neque neque, eget vehicula nisl commodo at. Fusce eu urna tempus, egestas ante id, facilisis dolor. Pellentesque venenatis ante convallis, ullamcorper erat at, malesuada elit. Interdum et malesuada fames ac ante ipsum primis in faucibus. Aliquam commodo lectus ut luctus malesuada. Donec leo nisl, dignissim et ullamcorper ut, porta id ante. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum eros felis, consequat sed augue non, semper eleifend nisi. Maecenas tincidunt, ante in ultricies porta, magna ipsum convallis augue, non ornare turpis orci ac risus. Duis non enim sit amet libero ultricies egestas. Duis bibendum felis est, nec feugiat erat imperdiet sed. Donec aliquet, velit ac semper fermentum, quam leo eleifend nisl, non rhoncus sapien nibh ac massa. Integer mattis arcu nec suscipit laoreet. Cras nec libero leo. Nulla bibendum ligula ut nisi dictum, et interdum ipsum scelerisque. Nullam a volutpat tellus. Maecenas nisi est, ultricies in neque in, aliquet dictum odio. Etiam suscipit sapien purus, suscipit pharetra tellus lobortis ut. Maecenas commodo feugiat justo ac ullamcorper. In volutpat nec velit posuere placerat. Suspendisse rutrum dolor sed semper pharetra. The Bike Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut egestas consectetur ante a rhoncus. Praesent a sapien vulputate, vehicula risus et, congue mi. Praesent quis auctor enim. Aenean gravida, libero ut dignissim porta, elit nisi faucibus nisi, vitae faucibus lorem eros in augue. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. In ac varius diam. Mauris consectetur sed erat at dapibus. Fusce pulvinar est eu orci lacinia egestas. Phasellus facilisis nulla quis tortor adipiscing, eu blandit tortor pulvinar. In lacus purus, aliquet eu ante ut, tempor ultricies diam. Donec cursus neque neque, eget vehicula nisl commodo at. Fusce eu urna tempus, egestas ante id, facilisis dolor. Pellentesque venenatis ante convallis, ullamcorper erat at, malesuada elit. Interdum et malesuada fames ac ante ipsum primis in faucibus. Aliquam commodo lectus ut luctus malesuada. Donec leo nisl, dignissim et ullamcorper ut, porta id ante. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum eros felis, consequat sed augue non, semper eleifend nisi. Description lists A description list is perfect for defining terms. Euismod Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit. Donec id elit non mi porta gravida at eg
Sponsors