Difference between revisions of "Team:Marburg/Gameofcells"

(Created page with "<html style="height:100%;min-width:1280px;"> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script> <style type="text/c...")
 
 
(35 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, p {
+
h3, h4, h5, h6, {
 
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;
 
}
 
}
Line 57: 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 137: Line 132:
  
 
ul#navigation ul {
 
ul#navigation ul {
−
     top: 86px;
+
     top: 91px;
 
     left: 1px;
 
     left: 1px;
 
}
 
}
Line 196: Line 191:
  
 
#maillink {padding-right: 2px;}  
 
#maillink {padding-right: 2px;}  
 +
 +
/* Select-Style */
 +
 +
::selection {
 +
  background:  #FF8F45; /* WebKit/Blink Browsers */
 +
}
 +
 +
::-moz-selection {
 +
  background:  #FF8F45; /* Gecko Browsers */
 +
}
 +
 +
a {
 +
    text-decoration:none;
 +
    color: #FF6600;
 +
}
 +
a:visited {
 +
    color: #FF6600;
 +
}
 +
a:hover {
 +
    text-decoration: none;
 +
}
 +
 +
/* Fader */
 +
 +
#fader {position:relative;border:1px solid #D0D0D0;width:820px;}
 +
#fader img {
 +
position:absolute;
 +
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 209: 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;">
+
<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:4px;">
+
<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/Background">Background</a></li>
+
</a>
−
<li><a href="https://2015.igem.org/Team:Marburg/Overview">Overview</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</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>
−
</ul>
+
<li><a href="https://2015.igem.org/Team:Marburg/Measurement">Measurement Study</a></li>
−
</li>
+
</ul>
−
<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>
−
<ul>
+
<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/Parts">Parts</a></li>  
+
<ul>
−
<li><a href="https://2015.igem.org/Team:Marburg/Description">Description</a></li>
+
<li><a href="https://2015.igem.org/Team:Marburg/iGeneration">iGeneration</a></li>  
−
<li><a href="https://2015.igem.org/Team:Marburg/Results">Results</a></li>  
+
<li><a href="https://2015.igem.org/Team:Marburg/Hessentag">Hessentag</a></li>
−
<li><a href="https://2015.igem.org/Team:Marburg/Medal Fulfillment">Medal Fulfillment</a></li>  
+
<li><a href="https://2015.igem.org/Team:Marburg/Killswitch">KillSwitch Statistics</a></li>  
−
</ul>
+
</ul>
−
</li>
+
</li>
−
<li><a href="https://2015.igem.org/Team:Marburg/Collabortations" class="first"><img src="https://static.igem.org/mediawiki/2015/7/71/MR_pic_Collaborations.png" style="height:60px;"></a>
+
<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>
−
<ul>
+
<ul>
−
<li><a href="https://2015.igem.org/Team:Marburg/Meetup">MeetUp</a></li>  
+
<li><a href="https://2015.igem.org/Team:Marburg/Parts">Parts</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/Results">Results</a></li>  
−
</ul>
+
<li><a href="https://2015.igem.org/Team:Marburg/Medal Fulfillment">Medal Fulfillment</a></li>  
−
</li>
+
</ul>
−
<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>
−
<ul>
+
<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>
−
<li><a href="https://2015.igem.org/Team:Marburg/Labbook">Lab Book</a></li>  
+
<ul>
−
<li><a href="https://2015.igem.org/Team:Marburg/Protocols">Protocols</a></li>  
+
<li><a href="https://2015.igem.org/Team:Marburg/Meetup">MeetUp</a></li>  
−
<li><a href="https://2015.igem.org/Team:Marburg/Bibliography">Bibliography</a></li>  
+
<li><a href="https://2015.igem.org/Team:Marburg/Gameofcells">Game of Cells</a></li>
−
</ul>
+
</ul>
−
</li>
+
</li>
−
<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><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>
−
<ul>
+
<ul>
−
<li><a href="https://2015.igem.org/Team:Marburg/Members">Members</a></li>  
+
<li><a href="https://2015.igem.org/Team:Marburg/Labbook">Lab Book</a></li>  
−
<li><a href="https://2015.igem.org/Team:Marburg/Acknowledgement">Acknowledgement</a></li>  
+
<li><a href="https://2015.igem.org/Team:Marburg/Protocols">Protocols</a></li>  
−
<li><a href="https://2015.igem.org/Team:Marburg/Attributions">Attributions</a></li>  
+
<li><a href="https://2015.igem.org/Team:Marburg/Bibliography">Bibliography</a></li>  
−
<li><a href="https://2015.igem.org/Team:Marburg/Gallery">Gallery</a></li>  
+
</ul>
−
</ul>
+
</li>
−
</li>
+
<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><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>
−
<ul>
+
<li><a href="https://2015.igem.org/Team:Marburg/Members">Members</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/Acknowledgement">Acknowledgement</a></li>  
−
</ul>
+
<li><a href="https://2015.igem.org/Team:Marburg/Attributions">Attributions</a></li>  
−
</li>
+
<li><a href="https://2015.igem.org/Team:Marburg/Gallery">Gallery</a></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:194px;background:#E0E0E0;top:105px;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;z-index:1;background:none;scroll:scroll-y;left:220px;top:0;margin-top:132px;font-size:14pt;margin-right:100px;min-width:1280px;">
+
<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>
−
<h1>Game of Cells</h1>
+
<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;">
 +
<h1>One game to teach them all!</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.  
+
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>
  
−
Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.  
+
<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/2/21/MR_pic_game2.jpg" alt="2" />
 +
<img src="https://static.igem.org/mediawiki/2015/6/6d/MR_pic_game3.jpg" alt="3" />
 +
<img src="https://static.igem.org/mediawiki/2015/7/73/MR_pic_game4.jpg" alt="4" />
 +
<img src="https://static.igem.org/mediawiki/2015/6/6b/MR_pic_game5.jpg" alt="5" />
 +
                <img src="https://static.igem.org/mediawiki/2015/c/c5/MR_pic_game6.jpg" alt="6" />
 +
<img src="https://static.igem.org/mediawiki/2015/0/0b/MR_pic_game7.jpg" alt="7" />
 +
<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/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>
  
−
Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.  
+
<script type="text/javascript">
 +
$.fn.initGallery = function() {
 +
//SCALE CONTAINER
 +
var fades = $('img',this);
 +
var maxwidth = 0;
 +
var maxheight = 0;
 +
fades.each(function() {
 +
maxwidth = ($(this).outerWidth() > maxwidth) ? $(this).outerWidth() : maxwidth;
 +
maxheight = ($(this).outerHeight() > maxheight) ? $(this).outerHeight() : maxheight;
 +
});
 +
this.height( maxheight );
 +
this.width( maxwidth );
 +
//FIX IMAGE POSITIONS
 +
fades.each(function() {
 +
if( $(this).outerWidth() < maxwidth-2)
 +
$(this).css('left',(maxwidth/2 - $(this).outerWidth()/2));
 +
if( $(this).outerHeight() < maxheight-2)
 +
$(this).css('top',(maxheight/2 - $(this).outerHeight()/2));
 +
});
 +
//SELECT RANDOM START ELEMENT
 +
if( fades.has('.front').length == 0)
 +
{
 +
var rand = Math.floor((Math.random() * (fades.length)));
 +
fades.eq( rand ).addClass('front');
 +
}
 +
return this;
 +
}
 +
$.fn.setFader = function(interval,fadetime) {
 +
//SET INTERVAL
 +
var interval_id = setInterval(
 +
function(frame) {
 +
//SELECT SLIDES
 +
var front = $('.front',frame);
 +
var next = (front.next().length > 0) ? front.next() : $('img:first',frame);
 +
next.css('z-index',2).fadeTo(fadetime,1.0);
 +
front.fadeTo(fadetime,0.0,function(){
 +
front.css('z-index',1).show().removeClass('front');
 +
next.css('z-index',3).addClass('front');
 +
});
 +
},
 +
interval,
 +
this
 +
);
 +
return interval_id;
 +
}
 +
var slideid = undefined;
 +
$(document).ready(function(){
 +
//$(FRAMEID).setFader(HOLDTIME,FADETIME);
 +
slideid = $('#fader').initGallery().setFader(3000,500);
 +
$('#fader').hover(function() {clearInterval(slideid);},function() {slideid = $(this).setFader(3000,500);});
 +
$('#fader img').click(function() {console.log("CLICK ON IMG: \"" + $(this).attr('alt') + "\"");});
 +
});
 +
</script>
  
−
Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. 
+
</div></div>
  
−
Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis. 
+
<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>
−
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, At accusam aliquyam diam diam dolore dolores duo eirmod eos erat, et nonumy sed tempor et et invidunt justo labore Stet clita ea et gubergren, kasd magna no rebum. sanctus sea sed takimata ut vero voluptua. 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. 
+
<span style="margin-right:60px;">
−
 
+
<img src="https://static.igem.org/mediawiki/2015/1/1d/MR_pic_syn.png" style="height:40px;padding:10px;"/>
−
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. 
+
</span>
−
 
+
<span>
−
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. 
+
<img src="https://static.igem.org/mediawiki/2015/5/58/MR_pic_mpii.png" style="height:40px;padding:10px;"/>
−
 
+
</span>
−
Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. 
+
<span style="margin-left:60px;">
−
 
+
<img src="https://static.igem.org/mediawiki/2015/f/f0/MR_pic_unii.png" style="height:40px;padding:10px;"/>
−
Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. 
+
</span>
 +
</div>
 +
    <span style="font-size:8pt; color:white;"> iGEM Marburg - ZSM Karl-von-Frisch-Straße 16, D - 35043 Marburg</span>
 +
</div>
 +
</div>
  
−
Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo
 
−
</p>
 
 
</div>
 
</div>
 
</body>
 
</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