Difference between revisions of "Team:Hawaii/Game"

 
(11 intermediate revisions by the same user not shown)
Line 5: Line 5:
 
   <div id="outer-game-container">
 
   <div id="outer-game-container">
 
     <div id="initial-screen">
 
     <div id="initial-screen">
−
       <img src="imgs/biotyper.png" alt="">
+
       <img src="https://static.igem.org/mediawiki/2018/0/04/T--Hawaii--biotyper.png" alt="">
 
       <div id="initial-screen-intro">
 
       <div id="initial-screen-intro">
 
         <h1>BIOTYPER</h1>
 
         <h1>BIOTYPER</h1>
Line 53: Line 53:
 
}
 
}
 
#flashcard {
 
#flashcard {
−
   background-color: white;
+
   background-color: rgb(30,30,30);
 
   width: 90%;
 
   width: 90%;
−
   height: 80px;
+
   height: 300px;
 
   display: flex;
 
   display: flex;
 
   /* justify-content: space-around; */
 
   /* justify-content: space-around; */
 
   align-items: center;
 
   align-items: center;
 
   flex-wrap: wrap;
 
   flex-wrap: wrap;
−
   color: rgb(100,100,100);
+
   color: white;
 
   font-family: 'Lato', sans-serif;
 
   font-family: 'Lato', sans-serif;
−
  box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
 
 
   padding: 5%;
 
   padding: 5%;
 
}
 
}
Line 81: Line 80:
 
   background-color: rgb(220,220,220);
 
   background-color: rgb(220,220,220);
 
   font-weight: bold;
 
   font-weight: bold;
−
}
 
−
#flashcard p {
 
−
  min-width: 10px;
 
−
  min-height: 10px;
 
−
  margin-left: 4px;
 
−
  text-align: center;
 
 
}
 
}
 
.block {
 
.block {
Line 217: Line 210:
 
</style>
 
</style>
 
<script>
 
<script>
−
 
+
window.onkeydown = function(e) {
 +
    return !(e.keyCode == 32);
 +
};
  
 
var note1 = {
 
var note1 = {
−
   description: "Image shows a metaphase spread revealing the 46 human chromosomes in blue with telomeres labeled",
+
   description: "Image shows a metaphase spread revealing the 46 human chromosomes in blue",
−
   imgSrc: "imgs/game_fig1.jpg",
+
   imgSrc: "https://static.igem.org/mediawiki/2018/e/e5/T--Hawaii--game_fig1.jpg",
 
   reference: 'Hesed Padilla-Nash, Thomas Ried (2011) CIL:228, Homo sapiens. CIL. Dataset. https://doi.org/doi:10.7295/W9CIL228'
 
   reference: 'Hesed Padilla-Nash, Thomas Ried (2011) CIL:228, Homo sapiens. CIL. Dataset. https://doi.org/doi:10.7295/W9CIL228'
 
}
 
}
  
 
var note2 = {
 
var note2 = {
−
   description: "High Voltage transmission electron micrograph of human female mitotic chromosomes from metaphase arrested cell swollen in hypotonic medium and recorded at 1 MeV",
+
   description: "High Voltage transmission electron micrograph of human female mitotic chromosomes from metaphase",
−
   imgSrc: "imgs/game_fig2.jpg",
+
   imgSrc: "https://static.igem.org/mediawiki/2018/archive/e/e7/20181017232915%21T--Hawaii--game_fig2.jpg",
 
   reference: 'Hans Ris (2011) CIL:35379, Homo sapiens, cevical carcinoma. CIL. Dataset. https://doi.org/doi:10.7295/W9CIL35379'
 
   reference: 'Hans Ris (2011) CIL:35379, Homo sapiens, cevical carcinoma. CIL. Dataset. https://doi.org/doi:10.7295/W9CIL35379'
 
}
 
}
Line 233: Line 228:
 
var note3 = {
 
var note3 = {
 
   description: "Unicellular alga Penium treated with the microtubule poison oryzalin",
 
   description: "Unicellular alga Penium treated with the microtubule poison oryzalin",
−
   imgSrc: "imgs/game_fig3.jpg",
+
   imgSrc: "https://static.igem.org/mediawiki/2018/a/a3/T--Hawaii--game_fig3.jpg",
 
   reference: 'David Domozych, 2009 Olympus BioScapes Digital Imaging Competition® (2012) CIL:41020, Penium. CIL. Dataset. https://doi.org/doi:10.7295/W9CIL41020'
 
   reference: 'David Domozych, 2009 Olympus BioScapes Digital Imaging Competition® (2012) CIL:41020, Penium. CIL. Dataset. https://doi.org/doi:10.7295/W9CIL41020'
 
}
 
}
  
 
var note4 = {
 
var note4 = {
−
   description: "Shown is a mitotic PtK2 cell at metaphase immunostained for microtubules in red and kinetochores in green with DNA stained blue",
+
   description: "Mitotic PtK2 cell at metaphase immunostained for microtubules in red and kinetochores in green with DNA stained blue",
−
   imgSrc: "imgs/game_fig4.jpg",
+
   imgSrc: "https://static.igem.org/mediawiki/2018/6/6f/T--Hawaii--game_fig4.jpg",
 
   reference: 'Jane Stout, Indiana University, Claire Walczak, Indiana University (2013) CIL:44601, Hypsiprymnodon moschatus, kidney epithelial cell. CIL. Dataset. https://doi.org/doi:10.7295/W9CIL44601'
 
   reference: 'Jane Stout, Indiana University, Claire Walczak, Indiana University (2013) CIL:44601, Hypsiprymnodon moschatus, kidney epithelial cell. CIL. Dataset. https://doi.org/doi:10.7295/W9CIL44601'
 
}
 
}
Line 245: Line 240:
 
var note5 = {
 
var note5 = {
 
   description: "Transmission electron micrograph illustrating the classic appearance of the nucleus in osmium tetroxide fixed material",
 
   description: "Transmission electron micrograph illustrating the classic appearance of the nucleus in osmium tetroxide fixed material",
−
   imgSrc: "imgs/game_fig5.jpg",
+
   imgSrc: "https://static.igem.org/mediawiki/2018/f/fb/T--Hawaii--game_fig5.jpg",
 
   reference: 'Don W. Fawcett (2011) CIL:10974, pancreatic acinar cell. CIL. Dataset. https://doi.org/doi:10.7295/W9CIL10974'
 
   reference: 'Don W. Fawcett (2011) CIL:10974, pancreatic acinar cell. CIL. Dataset. https://doi.org/doi:10.7295/W9CIL10974'
 
}
 
}
Line 251: Line 246:
 
var note6 = {
 
var note6 = {
 
   description: "Electron micrograph of rough endoplasmic reticulum in an acinar cell from the pancreas of the small brown bat Myotis lucifugus",
 
   description: "Electron micrograph of rough endoplasmic reticulum in an acinar cell from the pancreas of the small brown bat Myotis lucifugus",
−
   imgSrc: "imgs/game_fig6.jpg",
+
   imgSrc: "https://static.igem.org/mediawiki/2018/9/99/T--Hawaii--game_fig6.jpg",
 
   reference: 'Don W. Fawcett (2011) CIL:10763, Myotis lucifugus, acinar cell. CIL. Dataset. https://doi.org/doi:10.7295/W9CIL10763'
 
   reference: 'Don W. Fawcett (2011) CIL:10763, Myotis lucifugus, acinar cell. CIL. Dataset. https://doi.org/doi:10.7295/W9CIL10763'
 
}
 
}
Line 257: Line 252:
 
var note7 = {
 
var note7 = {
 
   description: "Pig epithelial cells undergoing mitosis",
 
   description: "Pig epithelial cells undergoing mitosis",
−
   imgSrc: "imgs/game_fig7.jpg",
+
   imgSrc: "https://static.igem.org/mediawiki/2018/d/dc/T--Hawaii--game_fig7.jpg",
 
   reference: 'Nasser Rusan, 2005 Olympus BioScapes Competition (2012) CIL:42513, Sus scrofa domestica, epithelial cell. CIL. Dataset. https://doi.org/doi:10.7295/W9CIL42513'
 
   reference: 'Nasser Rusan, 2005 Olympus BioScapes Competition (2012) CIL:42513, Sus scrofa domestica, epithelial cell. CIL. Dataset. https://doi.org/doi:10.7295/W9CIL42513'
 
}
 
}
Line 263: Line 258:
 
var note8 = {
 
var note8 = {
 
   description: "Fluorescence micrograph of a human epithelial cell in mitosis labeled for alpha tubulin in blue gamma tubulin in green and DNA in red",
 
   description: "Fluorescence micrograph of a human epithelial cell in mitosis labeled for alpha tubulin in blue gamma tubulin in green and DNA in red",
−
   imgSrc: "imgs/game_fig8.jpg",
+
   imgSrc: "https://static.igem.org/mediawiki/2018/1/19/T--Hawaii--game_fig8.jpg",
 
   reference: 'Joshua Nordberg, Christopher English, 2004 Olympus BioScapes Competition (2012) CIL:42515, Homo sapiens, epithelial cell. CIL. Dataset. https://doi.org/doi:10.7295/W9CIL42515'
 
   reference: 'Joshua Nordberg, Christopher English, 2004 Olympus BioScapes Competition (2012) CIL:42515, Homo sapiens, epithelial cell. CIL. Dataset. https://doi.org/doi:10.7295/W9CIL42515'
 
}
 
}
Line 269: Line 264:
 
var note9 = {
 
var note9 = {
 
   description: "Transmission electron micrograph of a budding yeast cell",
 
   description: "Transmission electron micrograph of a budding yeast cell",
−
   imgSrc: "imgs/game_fig9.jpg",
+
   imgSrc: "https://static.igem.org/mediawiki/2018/b/b9/T--Hawaii--game_fig9.jpg",
 
   reference: 'Ethan Perlstein, Daniel Korostyshevsky (2012) CIL:39690, Saccharomyces cerevisiae, BY4716. CIL. Dataset. https://doi.org/doi:10.7295/W9CIL39690'
 
   reference: 'Ethan Perlstein, Daniel Korostyshevsky (2012) CIL:39690, Saccharomyces cerevisiae, BY4716. CIL. Dataset. https://doi.org/doi:10.7295/W9CIL39690'
 
}
 
}
Line 346: Line 341:
 
     for (i=0; i<charArray.length; i++) {
 
     for (i=0; i<charArray.length; i++) {
 
       var p = document.createElement('P');
 
       var p = document.createElement('P');
 +
      p.className += "newP";
 
       var div = document.createElement('div');
 
       var div = document.createElement('div');
 
       div.className += " block";
 
       div.className += " block";
−
       var wh = generateRand(80,100);
+
       var wh = generateRand(50,80);
 
       div.style.width = wh + 'px';
 
       div.style.width = wh + 'px';
 
       div.style.height = wh + 'px';
 
       div.style.height = wh + 'px';
−
       div.style.top = generateRand(1,280) + 'px';
+
       div.style.top = generateRand(1,200) + 'px';
 
       div.style.left = generateRand(1,window.innerWidth) + 'px';
 
       div.style.left = generateRand(1,window.innerWidth) + 'px';
 
       picContainer.appendChild(div);
 
       picContainer.appendChild(div);
Line 365: Line 361:
  
 
     if (currentInput === currentKeyCode.toUpperCase()) {
 
     if (currentInput === currentKeyCode.toUpperCase()) {
−
       var pElements = document.querySelectorAll('p');
+
       var pElements = document.querySelectorAll('.newP');
−
       pElements[counter].className += "typed";
+
       pElements[counter].className += " typed";
 
       $('.block').first().remove();
 
       $('.block').first().remove();
  

Latest revision as of 23:36, 17 October 2018

BIOTYPER

Type each sentence fast and accurately to reveal an image from the Cell Image Library.

POINTS: 0
TIMER: 60
REFERENCE:
TOTAL POINTS:

Go to http://cellimagelibrary.org/home to view more cool biology images.