Difference between revisions of "Team:Marburg/Gameofcells"
(30 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 | + | html, body, img, sub, sup, var, center, label, caption, header, menu, nav{ |
margin: 0; | margin: 0; | ||
padding: 0; | padding: 0; | ||
border: 0; | border: 0; | ||
− | |||
− | |||
vertical-align: baseline; | vertical-align: baseline; | ||
+ | |||
} | } | ||
− | + | h3, h4, h5, h6, { | |
margin: 0; | margin: 0; | ||
padding: 0; | padding: 0; | ||
border: 0; | border: 0; | ||
− | |||
vertical-align: baseline; | vertical-align: baseline; | ||
} | } | ||
Line 56: | Line 55: | ||
body { | body { | ||
− | background:url( | + | background-image:url('https://static.igem.org/mediawiki/2015/5/5c/MR_pic_bg_1.jpg'); |
− | + | } | |
/* Navigation */ | /* Navigation */ | ||
− | |||
− | |||
− | |||
#nav { | #nav { | ||
Line 206: | Line 202: | ||
} | } | ||
− | /* | + | 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 226: | Line 238: | ||
}); | }); | ||
</script> | </script> | ||
+ | |||
<!--HTML-MENU--> | <!--HTML-MENU--> | ||
− | <body style="height:100%;min-width: | + | <body style="height:100%;min-width:100%;margin:0px; padding:0px;"> |
− | <div style="position:fixed;width:100%;height: | + | <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; |
− | + | background-attachment: fixed;-webkit-background-size: cover; | |
− | + | -moz-background-size: cover; | |
− | + | -o-background-size: cover; | |
− | + | background-size: cover; | |
− | + | margin:0px; padding:0px;"></div> | |
− | + | <div style="position:absolute;margin-left:-680px;left:50%;width:1360px;min-width:1360px;min-height:100%;background-color:white;padding-bottom:10px;"> | |
− | + | <div style="position:fixed;width:1360px;min-width:1360;height:70px;z-index:20;margin-top:0px;"> | |
− | + | <div style="display:table;min-width:1360px;height:100%;"> | |
− | + | <div style="display:table-row;"> | |
− | + | <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;"> |
− | + | <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/ | + | </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"> |
− | + | <ul id="navigation" style="margin-top:9px;"> | |
− | + | <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> | |
− | + | <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> |
− | + | <li><a href="https://2015.igem.org/Team:Marburg/Curli">NUTRInity - Pick up</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/Design">Future Application</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/Measurement">Measurement Study</a></li> | |
− | + | </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> | |
− | + | <li><a href="https://2015.igem.org/Team:Marburg/iGeneration">iGeneration</a></li> | |
− | + | <li><a href="https://2015.igem.org/Team:Marburg/Hessentag">Hessentag</a></li> | |
− | + | <li><a href="https://2015.igem.org/Team:Marburg/Killswitch">KillSwitch Statistics</a></li> | |
− | + | </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> |
− | + | <li><a href="https://2015.igem.org/Team:Marburg/Parts">Parts</a></li> | |
− | + | <li><a href="https://2015.igem.org/Team:Marburg/Results">Results</a></li> | |
− | + | <li><a href="https://2015.igem.org/Team:Marburg/Medal Fulfillment">Medal Fulfillment</a></li> | |
− | + | </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> | |
− | + | <li><a href="https://2015.igem.org/Team:Marburg/Meetup">MeetUp</a></li> | |
− | + | <li><a href="https://2015.igem.org/Team:Marburg/Gameofcells">Game of Cells</a></li> | |
− | + | </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> |
− | + | <li><a href="https://2015.igem.org/Team:Marburg/Labbook">Lab Book</a></li> | |
− | + | <li><a href="https://2015.igem.org/Team:Marburg/Protocols">Protocols</a></li> | |
− | + | <li><a href="https://2015.igem.org/Team:Marburg/Bibliography">Bibliography</a></li> | |
− | + | </ul> | |
− | + | </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> | + | <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> |
− | + | <li><a href="https://2015.igem.org/Team:Marburg/Acknowledgement">Acknowledgement</a></li> | |
− | + | <li><a href="https://2015.igem.org/Team:Marburg/Attributions">Attributions</a></li> | |
− | + | <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> | |
− | + | </nav> | |
− | + | </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"> | |
− | + | <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 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> | |
− | + | </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 | + | <div style="position:fixed;min-height:100%;height:100%;width:195px;background:#E0E0E0;top:115px;z-index:20;vertical-align:middle;"> |
− | + | <span style="margin:0px; padding:0px;display:inline-block;height:100%;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=" | + | <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> | + | <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> | ||
− | + | 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 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> | ||
− | < | + | <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> | ||
+ | </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> | </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.
If you are interested in a printable form of our game - Let us know!