Difference between revisions of "Team:Marburg/Gameofcells"

 
(26 intermediate revisions by 2 users not shown)
Line 26: Line 26:
  
 
html, #bodyContent, body, #container {
 
html, #bodyContent, body, #container {
 +
                background-color: #fff;
 
        width:100%;
 
        width:100%;
 
        height:100%;
 
        height:100%;
Line 33: Line 34:
 
/* General Style */
 
/* General Style */
  
html, body, div, img, sub, sup, var, b, u, i, center, ol, ul, li, label, table, caption, tr, th, td, header, menu, nav {
+
html, body, img, sub, sup, var, center, label, caption, header, menu, nav{
 
margin: 0;
 
margin: 0;
 
padding: 0;
 
padding: 0;
 
border: 0;
 
border: 0;
font-size: 12px;
 
font-family: 'Open Sans', sans-serif;
 
 
vertical-align: baseline;
 
vertical-align: baseline;
 +
 
}
 
}
  
  
h1, h2, h3, h4, h5, h6, {
+
h3, h4, h5, h6, {
 
margin: 0;
 
margin: 0;
 
padding: 0;
 
padding: 0;
 
border: 0;
 
border: 0;
font-size: 12px;
 
 
vertical-align: baseline;
 
vertical-align: baseline;
 
}
 
}
Line 56: Line 55:
 
 
 
body {
 
body {
background:url(pattern.png) repeat scroll 0 0;
+
background-image:url('https://static.igem.org/mediawiki/2015/5/5c/MR_pic_bg_1.jpg');
}
+
}
 
 
 
/* Navigation */
 
/* Navigation */
 
ol, ul {
 
list-style: none; }
 
  
 
#nav {
 
#nav {
Line 206: Line 202:
 
}
 
}
  
/* Image center */
+
a {
 +
    text-decoration:none;
 +
    color: #FF6600;
 +
}
 +
a:visited {
 +
    color: #FF6600;
 +
}
 +
a:hover {
 +
    text-decoration: none;
 +
}
 +
 
 +
/* Fader */
  
#imgcenter {
+
#fader {position:relative;border:1px solid #D0D0D0;width:820px;}
    display: block;
+
#fader img {
    margin-left: auto;
+
position:absolute;
    margin-right: auto;
+
z-index:1;
 +
height:450px;
 +
padding:10px;
 +
opacity:0.0;
 
}
 
}
 +
#fader img.front {z-index:3;opacity:1.0;}
  
 
</style>
 
</style>
 +
  
 
<!--JS for Mailus-->
 
<!--JS for Mailus-->
Line 226: Line 238:
 
});
 
});
 
</script>
 
</script>
 +
  
 
<!--HTML-MENU-->
 
<!--HTML-MENU-->
  
<body style="height:100%;min-width:1280px;">
+
<body style="height:100%;min-width:100%;margin:0px; padding:0px;">
<div style="position:fixed;width:100%;height:70px;min-width:1280px;z-index:20;margin-top:0px;">
+
<div style="position:fixed;width:100%; min-width:100%; height:100%;min-height:100%; background-image: url('https://static.igem.org/mediawiki/2015/6/6f/MR_pic_bg6.jpg');background-repeat: no-repeat;
<div style="display:table;width:100%;height:100%;">
+
    background-attachment: fixed;-webkit-background-size: cover;
<div style="display:table-row;">
+
  -moz-background-size: cover;
<div style="display:table-cell;width:188px;background:white;">
+
  -o-background-size: cover;
<a href="https://2015.igem.org/Team:Marburg" style="text-align:center;">
+
  background-size: cover;
<img src="https://static.igem.org/mediawiki/2015/1/14/MR_pic_Home.png" style="height:66px;margin:5px 8px;">
+
margin:0px; padding:0px;"></div>
</a>
+
<div style="position:absolute;margin-left:-680px;left:50%;width:1360px;min-width:1360px;min-height:100%;background-color:white;padding-bottom:10px;">
</div>
+
<div style="position:fixed;width:1360px;min-width:1360;height:70px;z-index:20;margin-top:0px;">
<div style="display:table-cell;background:#E0E0E0;padding-left:20px;">
+
<div style="display:table;min-width:1360px;height:100%;">
<nav id="nav">
+
<div style="display:table-row;">
<ul id="navigation" style="margin-top:9px;">
+
<div style="display:table-cell;width:188px;background:white;">
<li><a href="https://2015.igem.org/Team:Marburg/Projects" class="first"><img src="https://static.igem.org/mediawiki/2015/5/56/MR_pic_Projects.png" style="height:60px;text-align:center;"></a>
+
<a href="https://2015.igem.org/Team:Marburg" style="text-align:center;">
<ul>
+
<img src="https://static.igem.org/mediawiki/2015/1/14/MR_pic_Home.png" style="position:relative;height:66px;padding-bottom:11px;padding-left:8px;padding-right:8px;">
<li><a href="https://2015.igem.org/Team:Marburg/Overview">Overview</a></li>  
+
</a>
<li><a href="https://2015.igem.org/Team:Marburg/Background">Fact Sheets</a></li>
+
</div>
<li><a href="https://2015.igem.org/Team:Marburg/Minicells">NUTRInity - Provide</a></li>
+
<div style="display:table-cell;background:#E0E0E0;padding-left:20px;">
<li><a href="https://2015.igem.org/Team:Marburg/Curli">NUTRInity - Pick up</a></li>  
+
<nav id="nav">
<li><a href="https://2015.igem.org/Team:Marburg/CDI">NUTRInity - Cut off</a></li>  
+
<ul id="navigation" style="margin-top:9px;">
<li><a href="https://2015.igem.org/Team:Marburg/InterLab">InterLab Study</a></li>
+
<li><a href="https://2015.igem.org/Team:Marburg/Projects" class="first"><img src="https://static.igem.org/mediawiki/2015/5/56/MR_pic_Projects.png" style="height:60px;text-align:center;"></a>
<li><a href="https://2015.igem.org/Team:Marburg/Measurement">Measurement Study</a></li>
+
<ul>
</ul>
+
<li><a href="https://2015.igem.org/Team:Marburg/Description">Overview</a></li>
</li>
+
                                                                <li><a href="https://2015.igem.org/Team:Marburg/Background">Fact Sheets</a></li>
<li><a href="https://2015.igem.org/Team:Marburg/Practices" class="first"><img src="https://static.igem.org/mediawiki/2015/3/3a/MR_pic_HP.png" style="height:60px;"></a>
+
<li><a href="https://2015.igem.org/Team:Marburg/Minicells">NUTRInity - Provide</a></li>
<ul>
+
<li><a href="https://2015.igem.org/Team:Marburg/Curli">NUTRInity - Pick up</a></li>  
<li><a href="https://2015.igem.org/Team:Marburg/iGeneration">iGeneration</a></li>  
+
<li><a href="https://2015.igem.org/Team:Marburg/CDI">NUTRInity - Cut off</a></li>  
<li><a href="https://2015.igem.org/Team:Marburg/Hessentag">Hessentag</a></li>
+
<li><a href="https://2015.igem.org/Team:Marburg/Design">Future Application</a></li>
<li><a href="https://2015.igem.org/Team:Marburg/Killswitch">KillSwitch Statistics</a></li>  
+
<li><a href="https://2015.igem.org/Team:Marburg/InterLab">InterLab Study</a></li>
        <li><a href="https://2015.igem.org/Team:Marburg/FutureApplication">Future Application</a></li>
+
<li><a href="https://2015.igem.org/Team:Marburg/Measurement">Measurement Study</a></li>
</ul>
+
</ul>
</li>
+
</li>
<li><a href="https://2015.igem.org/Team:Marburg/Achievements" class="first"><img src="https://static.igem.org/mediawiki/2015/b/ba/MR_pic_Achievements.png" style="height:60px;"></a>
+
<li><a href="https://2015.igem.org/Team:Marburg/Practices" class="first"><img src="https://static.igem.org/mediawiki/2015/3/3a/MR_pic_HP.png" style="height:60px;"></a>
<ul>
+
<ul>
<li><a href="https://2015.igem.org/Team:Marburg/Parts">Parts</a></li>  
+
<li><a href="https://2015.igem.org/Team:Marburg/iGeneration">iGeneration</a></li>  
        <li><a href="https://2015.igem.org/Team:Marburg/Description">Description</a></li>
+
<li><a href="https://2015.igem.org/Team:Marburg/Hessentag">Hessentag</a></li>
<li><a href="https://2015.igem.org/Team:Marburg/Results">Results</a></li>  
+
<li><a href="https://2015.igem.org/Team:Marburg/Killswitch">KillSwitch Statistics</a></li>  
<li><a href="https://2015.igem.org/Team:Marburg/Medal Fulfillment">Medal Fulfillment</a></li>  
+
</ul>
</ul>
+
</li>
</li>
+
<li><a href="https://2015.igem.org/Team:Marburg/Achievements" class="first"><img src="https://static.igem.org/mediawiki/2015/b/ba/MR_pic_Achievements.png" style="height:60px;"></a>
<li><a href="https://2015.igem.org/Team:Marburg/Collaborations" class="first"><img src="https://static.igem.org/mediawiki/2015/7/71/MR_pic_Collaborations.png" style="height:60px;"></a>
+
<ul>
<ul>
+
<li><a href="https://2015.igem.org/Team:Marburg/Parts">Parts</a></li>  
<li><a href="https://2015.igem.org/Team:Marburg/Meetup">MeetUp</a></li>  
+
<li><a href="https://2015.igem.org/Team:Marburg/Results">Results</a></li>  
<li><a href="https://2015.igem.org/Team:Marburg/Gameofcells">Game of Cells</a></li>
+
<li><a href="https://2015.igem.org/Team:Marburg/Medal Fulfillment">Medal Fulfillment</a></li>  
</ul>
+
</ul>
</li>
+
</li>
<li><a href="https://2015.igem.org/Team:Marburg/Notebook" class="first"><img src="https://static.igem.org/mediawiki/2015/5/53/MR_pic_Notebook.png" style="height:60px;"></a>
+
<li><a href="https://2015.igem.org/Team:Marburg/Collaborations" class="first"><img src="https://static.igem.org/mediawiki/2015/7/71/MR_pic_Collaborations.png" style="height:60px;"></a>
<ul>
+
<ul>
<li><a href="https://2015.igem.org/Team:Marburg/Labbook">Lab Book</a></li>  
+
<li><a href="https://2015.igem.org/Team:Marburg/Meetup">MeetUp</a></li>  
<li><a href="https://2015.igem.org/Team:Marburg/Protocols">Protocols</a></li>  
+
<li><a href="https://2015.igem.org/Team:Marburg/Gameofcells">Game of Cells</a></li>
<li><a href="https://2015.igem.org/Team:Marburg/Bibliography">Bibliography</a></li>  
+
</ul>
</ul>
+
</li>
</li>
+
<li><a href="https://2015.igem.org/Team:Marburg/Notebook" class="first"><img src="https://static.igem.org/mediawiki/2015/5/53/MR_pic_Notebook.png" style="height:60px;"></a>
<li><a href="https://2015.igem.org/Team:Marburg/Team" class="first"><img src="https://static.igem.org/mediawiki/2015/1/1d/MR_pic_Team.png" style="height:60px;"></a>
+
<ul>
<ul>
+
<li><a href="https://2015.igem.org/Team:Marburg/Labbook">Lab Book</a></li>  
<li><a href="https://2015.igem.org/Team:Marburg/Members">Members</a></li>  
+
<li><a href="https://2015.igem.org/Team:Marburg/Protocols">Protocols</a></li>  
<li><a href="https://2015.igem.org/Team:Marburg/Acknowledgement">Acknowledgement</a></li>  
+
<li><a href="https://2015.igem.org/Team:Marburg/Bibliography">Bibliography</a></li>  
<li><a href="https://2015.igem.org/Team:Marburg/Attributions">Attributions</a></li>  
+
</ul>
<li><a href="https://2015.igem.org/Team:Marburg/Gallery">Gallery</a></li>  
+
</li>
</ul>
+
<li><a href="https://2015.igem.org/Team:Marburg/Team" class="first"><img src="https://static.igem.org/mediawiki/2015/1/1d/MR_pic_Team.png" style="height:60px;"></a>
</li>
+
<ul>
<li><a href="https://2015.igem.org/Team:Marburg/Safety" class="first"><img src="https://static.igem.org/mediawiki/2015/6/6a/MR_pic_Safety.png" style="height:60px;"></a>
+
<li><a href="https://2015.igem.org/Team:Marburg/Members">Members</a></li>  
<ul>
+
<li><a href="https://2015.igem.org/Team:Marburg/Acknowledgement">Acknowledgement</a></li>  
<li><a href="https://2015.igem.org/Team:Marburg/Killswitch">KillSwitch Statistics</a></li>  
+
<li><a href="https://2015.igem.org/Team:Marburg/Attributions">Attributions</a></li>  
</ul>
+
<li><a href="https://2015.igem.org/Team:Marburg/Gallery">Gallery</a></li>  
</li>
+
</ul>
 +
</li>
 +
<li><a href="https://2015.igem.org/Team:Marburg/Safety" class="first"><img src="https://static.igem.org/mediawiki/2015/6/6a/MR_pic_Safety.png" style="height:60px;"></a>
 +
<ul>
 +
                        <li><a href="https://2015.igem.org/Team:Marburg/Killswitch">KillSwitch Statistics</a></li>  
 +
</ul>
 +
</li>
  
</ul>
+
</ul>
</nav>
+
</nav>
</div>
+
</div>
<div id="socialmedia" style="display:table-cell;background:#E0E0E0;text-align:right;padding-right:5px;vertical-align:middle;">
+
<div id="socialmedia" style="display:table-cell;background:#E0E0E0;text-align:right;padding-right:5px;vertical-align:middle;">
<span id="smbuttons">
+
<span id="smbuttons">
<a href="https://www.facebook.com/igemmarburg" class="second" style="padding:5px;"><img src="https://static.igem.org/mediawiki/2015/7/71/MR_pic_Facebook.png" style="width:30px;"></a>
+
<a href="https://www.facebook.com/igemmarburg" class="second" style="padding:5px;"><img src="https://static.igem.org/mediawiki/2015/7/71/MR_pic_Facebook.png" style="width:30px;"></a>
<a href="https://twitter.com/igem_marburg" class="second" style="padding:5px;"><img src="https://static.igem.org/mediawiki/2015/7/75/MR_pic_Twitter.png" style="width:30px;"></a>
+
<a href="https://twitter.com/igem_marburg" class="second" style="padding:5px;"><img src="https://static.igem.org/mediawiki/2015/7/75/MR_pic_Twitter.png" style="width:30px;"></a>
<a id="maillink" href="#" style="padding:5px;" class="second"><img src="https://static.igem.org/mediawiki/2015/a/a0/MR_pic_Mailus.png" style="width:30px;" alt="submit"></a>
+
<a id="maillink" href="#" style="padding:5px;" class="second"><img src="https://static.igem.org/mediawiki/2015/a/a0/MR_pic_Mailus.png" style="width:30px;" alt="submit"></a>
<a href="https://2015.igem.org/Main_Page" class="second" style="padding:5px;"><img src="https://static.igem.org/mediawiki/2015/9/9b/MR_pic_Igem.png" style="width:30px;"></a>
+
<a href="https://2015.igem.org/Main_Page" class="second" style="padding:5px;"><img src="https://static.igem.org/mediawiki/2015/9/9b/MR_pic_Igem.png" style="width:30px;"></a>
</span>
+
</span>
</div><!-- cell -->
+
</div><!-- cell -->
</div>
+
</div>
</div>
+
</div>
</div><!-- row -->
+
</div><!-- row -->
 
 
<div style="position:fixed;height:100%;width:195px;background:#E0E0E0;top:115px;z-index:20;vertical-align:middle;white-space:nowrap;">
+
<div style="position:fixed;min-height:100%;height:100%;width:195px;background:#E0E0E0;top:115px;z-index:20;vertical-align:middle;">
<span style="display:inline-block;height:100%;vertical-align:middle;"></span>
+
<span style="margin:0px; padding:0px;display:inline-block;height:100%;vertical-align:middle;">
<img src="https://static.igem.org/mediawiki/2015/9/9c/MR_pic_Sidebanner_Collaborations.png" style="width:184px;vertical-align:middle;">
+
</span>
</div>
+
<img src="https://static.igem.org/mediawiki/2015/1/1c/MR_pic_Sidebanner_Home.png" style="width:184px;vertical-align:middle;">
 +
</div>
 +
<div style="position:fixed;margin-left:640px;height:100%;min-height:100%;min-width:40px; width:40px; top:115px;background:#E0E0E0; left:50%;z-index:2;"></div>
  
 +
<div>
 +
<div style="position:relative;text-align:justify;z-index:1;background:white;font-size:13pt;line-height:150%;min-width:100%;max-width:100%;padding-top:132px; padding-left:235px; padding-right:80px;padding-bottom:70px;box-sizing: border-box;">
  
<div style="position:absolute;text-align:justify;z-index:1;background:none;scroll:scroll-y;left:280px;top:0;margin-top:132px;font-size:13pt;line-height:150%;margin-right:100px;max-width:950px;">
+
<div style="z-index:1;text-align:center;padding-bottom:40px;"><img src="https://static.igem.org/mediawiki/2015/3/3f/MR_pic_Button_Gameofcells.png" style="height:60px;"/></div>
 
+
<div style="position:relative;display:inline-block;padding:15px;background:#F8F8F8;border-style:solid;border-color:#FF8F45;border-width:2px;border-radius:10px;text-align:justify;font-size:13pt;line-height:150%;margin:10px;">
<div style="left:10px;z-index:1;text-align:left;padding-bottom:40px;"><img src="https://static.igem.org/mediawiki/2015/3/3f/MR_pic_Button_Gameofcells.png" style="height:70px;"/></div>
+
<h1>One game to teach them all!</h1>
 
+
<h1>TEXT</h1>
+
  
 
<p>
 
<p>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.<br>  
+
As fulfillment of our iGeneration campaign, we want to reach a wide variety of demographic ages. Informing young people about synthetic biology is an integral part of our holistic Human Practices approach.<br>
 
+
Therefore, we planned an educational board game named "Game of Cells". As the development process required several time-consuming steps, we established a collaboration with the iGEM Team of Erlangen, Germany. The design of the game will give children the opportunity to learn about biology in a playful manner. Due to divergent educational standards, the texts are always based on examples, which can be interpreted by children 10 years of age and above. To gain the interest of the specified target audience, our approach aimed to give basic knowledge of the cell structure and their function via several game mechanisms like collecting items, challenge, cooperation and a bit of luck. For example action cards give a specific task based on a biological background. The lactose field forces the player to move three steps backwards, if not having a lactose tolerance card.<br>
 +
Game of Cells will be provided as PDF-file for self-printing and therefore, can easily be shared with the interested community.</p>
 +
<figure style="text-align:center;">
 +
<img src="https://static.igem.org/mediawiki/2015/3/33/MR_pic_Game.jpg" width="600px"/>
 +
</figure>
 +
<a href="https://static.igem.org/mediawiki/2015/3/33/MR_pic_Game.jpg">Click here for a fullscreen version. </a>
 +
<p>If you are interested in a printable form of our game - Let us know!</p>
 +
</div>
  
<div id="fader">
+
<div style="position:relative;display:inline-block;padding:15px;background:#F8F8F8;border-style:solid;border-color:#FF8F45;border-width:2px;border-radius:10px;text-align:justify;font-size:13pt;line-height:150%;margin:10px;width:991px;margin-bottom:30px;">
 +
<h1>Gallery</h1>
 +
<div id="fader" style="margin-left:100px;margin-bottom:30px;">
 
<img src="https://static.igem.org/mediawiki/2015/d/d0/MR_pic_game1.jpg" alt="1" />
 
<img src="https://static.igem.org/mediawiki/2015/d/d0/MR_pic_game1.jpg" alt="1" />
 
<img src="https://static.igem.org/mediawiki/2015/2/21/MR_pic_game2.jpg" alt="2" />
 
<img src="https://static.igem.org/mediawiki/2015/2/21/MR_pic_game2.jpg" alt="2" />
Line 336: Line 366:
 
<img src="https://static.igem.org/mediawiki/2015/8/80/MR_pic_game8.jpg" alt="8" />
 
<img src="https://static.igem.org/mediawiki/2015/8/80/MR_pic_game8.jpg" alt="8" />
 
<img src="https://static.igem.org/mediawiki/2015/1/1b/MR_pic_game9.jpg" alt="9" />
 
<img src="https://static.igem.org/mediawiki/2015/1/1b/MR_pic_game9.jpg" alt="9" />
 +
<img src="https://static.igem.org/mediawiki/2015/b/b4/MR_pic_Col11.jpg" alt="7" />
 +
<img src="https://static.igem.org/mediawiki/2015/2/2c/MR_pic_Col12.jpg" alt="8" />
 
</div>
 
</div>
  
Line 391: Line 423:
 
});
 
});
 
</script>
 
</script>
</p>
 
</div>
 
</body>
 
  
<div style="position:fixed;height:100%;width:40px;background:#E0E0E0;top:105px;right:0px;z-index:0;vertical-align:middle;white-space:nowrap;">
+
</div></div>
  
 +
<div style="position:absolute;text-align:center;z-index:2;background:#e0e0e0;line-height:150%;bottom:0px;padding-top:3px;margin-bottom:0px; padding-left:235px; padding-right:80px;min-height:60px;min-width:100%;max-width:100%;box-sizing:border-box;clear:both;"><!---->
 +
<div>
 +
<span style="margin-right:60px;">
 +
<img src="https://static.igem.org/mediawiki/2015/1/1d/MR_pic_syn.png" style="height:40px;padding:10px;"/>
 +
</span>
 +
<span>
 +
<img src="https://static.igem.org/mediawiki/2015/5/58/MR_pic_mpii.png" style="height:40px;padding:10px;"/>
 +
</span>
 +
<span style="margin-left:60px;">
 +
<img src="https://static.igem.org/mediawiki/2015/f/f0/MR_pic_unii.png" style="height:40px;padding:10px;"/>
 +
</span>
 +
</div>
 +
    <span style="font-size:8pt; color:white;"> iGEM Marburg - ZSM Karl-von-Frisch-Straße 16, D - 35043 Marburg</span>
 +
</div>
 +
</div>
 +
 +
</div>
 +
</body>
 
</html>
 
</html>

Latest revision as of 12:59, 18 September 2015

One game to teach them all!

As fulfillment of our iGeneration campaign, we want to reach a wide variety of demographic ages. Informing young people about synthetic biology is an integral part of our holistic Human Practices approach.
Therefore, we planned an educational board game named "Game of Cells". As the development process required several time-consuming steps, we established a collaboration with the iGEM Team of Erlangen, Germany. The design of the game will give children the opportunity to learn about biology in a playful manner. Due to divergent educational standards, the texts are always based on examples, which can be interpreted by children 10 years of age and above. To gain the interest of the specified target audience, our approach aimed to give basic knowledge of the cell structure and their function via several game mechanisms like collecting items, challenge, cooperation and a bit of luck. For example action cards give a specific task based on a biological background. The lactose field forces the player to move three steps backwards, if not having a lactose tolerance card.
Game of Cells will be provided as PDF-file for self-printing and therefore, can easily be shared with the interested community.

Click here for a fullscreen version.

If you are interested in a printable form of our game - Let us know!

Gallery

1 2 3 4 5 6 7 8 9 7 8
iGEM Marburg - ZSM Karl-von-Frisch-Straße 16, D - 35043 Marburg