|
|
(14 intermediate revisions not shown) |
Line 4: |
Line 4: |
| <title>Notebook</title> | | <title>Notebook</title> |
| <script language="JavaScript"> | | <script language="JavaScript"> |
- | clickMenu = function(menu) {
| + | if (document.getElementById){ |
- | var getEls = document.getElementById(menu).getElementsByTagName("LI");
| + | document.write('<style type="text/css">\n') |
- | var getAgn = getEls;
| + | document.write('<!--\n') |
| + | document.write('.akoML{display: none;}\n') |
| + | document.write('-->\n') |
| + | document.write('</style>\n') } |
| + | function kirikae(akoO){ |
| + | if(document.getElementById){ |
| + | var baba = document.getElementById(akoO); |
| + | var obaba = document.getElementById("akoD").getElementsByTagName("span"); |
| + | if(baba.style.display != "block"){ |
| + | for (var kazu=0; kazu<obaba.length; kazu++){ |
| + | if (obaba[kazu].className=="akoML") |
| + | obaba[kazu].style.display = "none";} |
| + | baba.style.display = "block"; |
| + | }else{ |
| + | baba.style.display = "none";}}} |
| | | |
- | for (var i=0; i<getEls.length; i++) {
| + | if (document.images) { |
- | getEls[i].onclick=function() {
| + | image0 = new Image; |
- | for (var x=0; x<getAgn.length; x++) {
| + | image1 = new Image; |
- | if ((this.className.indexOf('default'))==-1) {
| + | image2 = new Image; |
- | getAgn[x].className=getAgn[x].className.replace("default", "off");
| + | image3 = new Image; |
- | }
| + | image4 = new Image; |
- | getAgn[x].className=getAgn[x].className.replace("unclick", "");
| + | image5 = new Image; |
- | getAgn[x].className=getAgn[x].className.replace("click", "unclick");
| + | image6 = new Image; |
- | }
| + | image7 = new Image; |
- | if ((this.className.indexOf('unclick'))!=-1) {
| + | image8 = new Image; |
- | for (var x=0; x<getAgn.length; x++) {
| + | image0.src = 'https://static.igem.org/mediawiki/2012/5/51/2012UT-T-S_Hanabi4.png'; |
- | getAgn[x].className=getAgn[x].className.replace("off", "default");
| + | image1.src = 'https://static.igem.org/mediawiki/2012/1/1e/2012UT-T-S_Fireworks.png'; |
- | }
| + | image2.src = 'https://static.igem.org/mediawiki/2012/6/63/2012UT-T-S_F_N.png'; |
- | this.className=this.className.replace("unclick", "");
| + | image3.src='https://static.igem.org/mediawiki/2012/6/6c/2012UT-T-S_Bro.png'; |
- | }
| + | image4.src='https://static.igem.org/mediawiki/2012/c/cd/2012UT-T-S_Furiko_ga.png'; |
- | else {
| + | image5.src='https://static.igem.org/mediawiki/2012/d/d7/2012UT-T-S_Maze.png'; |
- | this.className+=" click";
| + | image6.src='https://static.igem.org/mediawiki/2012/9/9c/2012UT-T-S_Pso.png'; |
- | }
| + | image7.src='https://static.igem.org/mediawiki/2012/f/fc/2012UT-T-S_Bz.png'; |
- | }
| + | image8.src='https://static.igem.org/mediawiki/2012/e/e0/2012UT-T-S_Voronoi.png'; |
- | }
| + | } else { |
- | }
| + | image0 = ''; |
| + | image1 = ''; |
| + | image2 = ''; |
| + | image3 = ''; |
| + | image4 = ''; |
| + | image5 = ''; |
| + | image6 = ''; |
| + | image7 = ''; |
| + | image8 = ''; |
| + | document.rollimg = ''; |
| + | } |
| </script> | | </script> |
| + | |
| <style type="text/css"> | | <style type="text/css"> |
- | #gallery {width:650px; height:500px; position:relative; border:1px solid #ddd; background:#fff;} | + | #gall{ |
- | #gallery ul {list-style:none; padding:5px; margin:0; width:120px; float:right; height:300px; overflow:auto;}
| + | width : 620px; |
- | #gallery ul li {display:inline; width:50px; height:50px; float:left; margin:0 4px 4px 0; border:1px solid #444; cursor:pointer;}
| + | height : 560px; |
- | #gallery ul li img {display:block; width:50px; height:50px;}
| + | margin: 0 0 0 50px; |
- | #gallery ul li span {display:none; position:absolute; left:520px; top:300px; width:120px;font-family:verdana, arial, sans-serif; color:#666; font-size:11px; line-height:15px; text-align:justify;}
| + | position : relative; |
- | #gallery ul li span b {color:#333;}
| + | border : 0px solid #ddd; |
| + | } |
| | | |
- | #gallery ul li.default {width:0; height:0; border:0;} | + | #gall ul { |
- | #gallery ul li.default i {position:absolute; left:0; top:0; width:545px; height:480px;}
| + | list-style-type:none; |
- | #gallery ul li.default i img {margin:5px auto 0 auto; width:400px; height:400px; border:1px solid #fff;}
| + | padding:5px; |
| + | margin:0; |
| + | width:120px; |
| + | height:550px; |
| + | float:right; |
| + | overflow:auto; |
| + | } |
| | | |
- | #gallery ul li.off {display:none;} | + | #gall ul li{ |
- | #gallery ul li.click {border-color:#EF4BB9; background:#fff; cursor:default;}
| + | padding:0 0 5px 0; |
- | #gallery ul li.click i {position:absolute; left:0; top:0; width:500px; height:480px;}
| + | margin:0; |
- | #gallery ul li.click i img {margin:5px auto 0 5px; width:auto; height:auto; border:1px solid black;}
| + | width:60px; |
| + | float:right; |
| + | overflow:auto; |
| + | } |
| | | |
- | #gallery ul li.default span, | + | #gall ul li img { |
- | #gallery ul li.click span {display:block;}
| + | display:block; |
| + | width:50px; |
| + | height:50px; |
| + | border:1px solid #666; |
| + | } |
| </style> | | </style> |
| </head> | | </head> |
Line 64: |
Line 103: |
| Some interesting and interactive programs are as follows.<br> | | Some interesting and interactive programs are as follows.<br> |
| Enjoy!<br> | | Enjoy!<br> |
| + | (Click a thumbnail and move to another page where the details are given. In that page, you can use the application by yourself on your browser!)<br> |
| <br> | | <br> |
- | <!--img must be under 480*480-->
| + | <div id="gall"> |
- | <div id="gallery"> | + | <ul> |
- | <ul> | + | <li> |
- | <li><i><img src="hanabi4.png"></i><span><b>Fire Works</b><br> | + | <span onmouseover="document.rollimg.src=image0.src;"> |
- | explanation<br>
| + | <a href="https://2012.igem.org/Team:UT-Tokyo-Software/Notebook/Applets/FireWorks1" target="_blank"> |
- | <a href="#URL">Link</a>
| + | <img src="https://static.igem.org/mediawiki/2012/5/51/2012UT-T-S_Hanabi4.png"> |
- | </span></li>
| + | </a> |
- | <li><i><img src="fireworks.png"></i><span><b>Fire Works 2</b><br>
| + | </span> |
- | explanation
| + | </li> |
- | <a href="#URL">Link</a>
| + | |
- | </span></li>
| + | <li> |
- | <li><i><img src="F_N.png"></i><span><b>FitzHugh-Nagumo</b><br>
| + | <span onmouseover="document.rollimg.src=image1.src;"> |
- | Model of the ニューロンの定性的な振る舞い
| + | <a href="https://2012.igem.org/Team:UT-Tokyo-Software/Notebook/Applets/FireWorks2" target="_blank"> |
- | </span></li>
| + | <img src="https://static.igem.org/mediawiki/2012/1/1e/2012UT-T-S_Fireworks.png"> |
- | <li><i><img src="bro.png"></i><span><b>Fractal</b><br>
| + | </a> |
- | Romanesco
| + | </span> |
- | </span></li>
| + | </li> |
- | <li><i><img src="furiko_ga.png"></i><span><b>Genetic Algorithm</b><br>
| + | |
- | explanation
| + | <li> |
- | </span></li>
| + | <span onmouseover="document.rollimg.src=image2.src;"> |
- | <li><i><img src="maze.png"></i><span><b>Maze</b><br>
| + | <a href="https://2012.igem.org/Team:UT-Tokyo-Software/Notebook/Applets/FN" target="_blank"> |
- | Auto-made Maze
| + | <img src="https://static.igem.org/mediawiki/2012/6/63/2012UT-T-S_F_N.png"> |
- | </span></li>
| + | </a> |
- | <li><i><img src="pso.png"></i><span><b>PSO</b><br>
| + | </span> |
- | Particle Swarm Optimization
| + | </li> |
- | </span></li>
| + | |
- | <li><i><img src="bz.png"></i><span><b>Reaction Diffusion</b><br>
| + | <li> |
- | BZ reaction
| + | <span onmouseover="document.rollimg.src=image3.src;"> |
- | </span></li>
| + | <a href="https://2012.igem.org/Team:UT-Tokyo-Software/Notebook/Applets/Fractal" target="_blank"> |
- | <li><i><img src="voronoi.png"></i><span><b>Voronoi Diagram</b><br>
| + | <img src="https://static.igem.org/mediawiki/2012/6/6c/2012UT-T-S_Bro.png"> |
- | explanation
| + | </a> |
- | </span></li>
| + | </span> |
- | <!--
| + | </li> |
- | <li class="default"><i><img src="../images/trees/t19.jpg" title="" alt="" /></i><span><b>Default text.</b><br />Iudico petentium ullamcorper mei id. Sed an illum sonet quando, ei inciderint signiferumque pri, te duo omnis malis aeterno.</span></li>
| + | |
- | -->
| + | <li> |
| + | <span onmouseover="document.rollimg.src=image4.src;"> |
| + | <a href="https://2012.igem.org/Team:UT-Tokyo-Software/Notebook/Applets/GA" target="_blank"> |
| + | <img src="https://static.igem.org/mediawiki/2012/c/cd/2012UT-T-S_Furiko_ga.png"> |
| + | </a> |
| + | </span> |
| + | </li> |
| + | |
| + | <li> |
| + | <span onmouseover="document.rollimg.src=image5.src;"> |
| + | <a href="https://2012.igem.org/Team:UT-Tokyo-Software/Notebook/Applets/Maze" target="_blank"> |
| + | <img src="https://static.igem.org/mediawiki/2012/d/d7/2012UT-T-S_Maze.png"> |
| + | </a> |
| + | </span> |
| + | </li> |
| + | |
| + | <li> |
| + | <span onmouseover="document.rollimg.src=image6.src;"> |
| + | <a href="https://2012.igem.org/Team:UT-Tokyo-Software/Notebook/Applets/PSO" target"_blank"> |
| + | <img src="https://static.igem.org/mediawiki/2012/9/9c/2012UT-T-S_Pso.png"> |
| + | </a> |
| + | </span> |
| + | </li> |
| + | |
| + | <li> |
| + | <span onmouseover="document.rollimg.src=image7.src;"> |
| + | <a href="https://2012.igem.org/Team:UT-Tokyo-Software/Notebook/Applets/ReactionDiffusion" target="_blank"> |
| + | <img src="https://static.igem.org/mediawiki/2012/f/fc/2012UT-T-S_Bz.png"> |
| + | </a> |
| + | </span> |
| + | </li> |
| + | |
| + | <li> |
| + | <span onmouseover="document.rollimg.src=image8.src;"> |
| + | <a href="https://2012.igem.org/Team:UT-Tokyo-Software/Notebook/Applets/Voronoi" target="_blank"> |
| + | <img src="https://static.igem.org/mediawiki/2012/e/e0/2012UT-T-S_Voronoi.png"> |
| + | </a> |
| + | </span> |
| + | </li> |
| + | </ul> |
| + | <img src="https://static.igem.org/mediawiki/2012/a/a0/2012UT-T-S_Load.png" alt="Larger version of one of the smaller images above" name="rollimg" style="border:solid 1px #000"/> |
| </div> | | </div> |
| <br> | | <br> |
Line 109: |
Line 189: |
| Gamification -- turn non-game concepts into game -- is our main theme, because | | Gamification -- turn non-game concepts into game -- is our main theme, because |
| we think it is important to attract people who are not interested in synthetic biology to enjoyable games!<br> | | we think it is important to attract people who are not interested in synthetic biology to enjoyable games!<br> |
- | And after discussions, we create the “Memory Game”. This game uses BioBrick-like materials.(-> you can play it <a href="#URL">here</a>)<br> | + | And after discussions, we create the “Memory Game”. This game uses BioBrick-like materials.(-> you can play it <a href="http://igem-ut.net/2012sw/humberger/" target="_blank">here</a>)<br> |
| This colorful game gathers visitors' attentions.<br> | | This colorful game gathers visitors' attentions.<br> |
| <h3>Jun - Jul : </h3> | | <h3>Jun - Jul : </h3> |