Difference between revisions of "Team:INSA-UPS France/test/description"

Line 82: Line 82:
 
   <div class="section_container">
 
   <div class="section_container">
  
    <section style="background: none;">
+
      <section style="background:none;padding:0px !important;z-index:100; ">
      <img src="https://static.igem.org/mediawiki/2017/7/78/T--INSA-UPS_France--Microbioworld_logo.png" alt="">
+
        <h1 style="font-size:5vw;letter-spacing: 1vw;z-index:120;text-align: center;">Model Interface</h1>
    </section>
+
       </section>
 
+
 
    <style>
+
      p.go-further{
+
        font-style:italic;
+
      }
+
      p.go-further.fr:before{
+
        content:'Pour aller plus loin : ';
+
        font-style:italic;
+
        font-weight: 700;
+
       }
+
    </style>
+
 
+
    <div class="booklet_fr">
+
 
       <section>
 
       <section>
        <h1>R&egrave;gles de base</h1>
 
        <h2>Contexte</h2>
 
 
         <p>
 
         <p>
           <i>MicroBioWorld</i> est un jeu de cartes consacr&eacute; &agrave; la microbiologie. Ce jeu, bas&eacute; sur les connaissances scientifiques actuelles, vous propose un voyage dans le monde des microorganismes afin de mieux appr&eacute;hender leur existence, leur diversit&eacute; et leur manipulation.
+
           Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laboriosam, ea? Ex animi rerum deserunt necessitatibus commodi, illum tempora soluta officia quam voluptatibus nostrum quos, ea debitis incidunt ad laborum perspiciatis aliquid est porro corrupti ducimus minima sed vel fugiat! Itaque, earum, dolorum. Consequuntur iste magni, atque! Inventore cum expedita quo ipsam quam, accusamus, neque adipisci. Consequatur itaque possimus porro nemo similique debitis nostrum. Impedit pariatur minus voluptate corporis aperiam delectus minima recusandae facilis, quod! Voluptates iure reiciendis, earum veritatis eveniet architecto alias nobis, magnam possimus veniam quisquam asperiores ullam vitae impedit dolor dolorem, officiis. Ipsa labore placeat culpa facilis temporibus.
        </p>
+
        <p>
+
          <i>MicroBioWorld</i> a &eacute;t&eacute; con&ccedil;u par des &eacute;tudiants dans le cadre de la comp&eacute;tition iGEM (= international Genetically Engineered Machine) et s&rsquo;adresse &agrave; tous, &agrave; partir de 10 ans, en famille ou entre amis.
+
        </p>
+
 
+
        <h2>But du jeu</h2>
+
        <p>
+
          Chaque joueur incarne une colonie bact&eacute;rienne (ensemble de bact&eacute;ries issues d&rsquo;une m&ecirc;me bact&eacute;rie m&egrave;re). Pour gagner, soyez le premier &agrave; constituer une colonie de 10 log, soit dix milliards de bact&eacute;ries! Pour cela, vous utiliserez les avantages conf&eacute;r&eacute;s par votre type de bact&eacute;rie et les am&eacute;liorations que vous lui aurez apport&eacute;es!
+
        </p>
+
 
+
        <h2>D&eacute;roulement d'un tour</h2>
+
        <h3>Pr&eacute;paration : </h3>
+
        <p>
+
          Chaque joueur re&ccedil;oit d&rsquo;abord une carte &ldquo;bact&eacute;rie&rdquo;. Tous les joueurs placent leur carte bact&eacute;rie face visible devant eux.
+
        </p>
+
        <p>
+
          Les cartes &ldquo;milieux&rdquo; permettent de mimer un environnement dans lequel les diff&eacute;rentes colonies vont &eacute;voluer pendant la partie (voir plus d&rsquo;explications dans le paragraphe &ldquo;milieux&rdquo;). La partie commence en milieu &ldquo;LB&rdquo;. M&eacute;langez toutes les autres cartes &ldquo;milieux&rdquo; et posez-les face cach&eacute;e sur la table.
+
        </p>
+
        <p>
+
          M&eacute;langez ensuite les cartes &ldquo;pioche&rdquo;. A partir de cette pioche, distribuez une main de 3 cartes &agrave; chaque joueur (ne pas prendre en compte l&rsquo;effet &ldquo;cette carte doit &ecirc;tre pos&eacute;e imm&eacute;diatement&rdquo;).
+
        </p>
+
        <p>
+
          Chaque joueur commence &agrave; 5 log de bact&eacute;ries, indiquez votre progression sur la carte gr&acirc;ce &agrave; un petit pointeur comme une pointe de stylo ou un morceau de papier triangulaire.
+
        </p>
+
 
+
        <h3>Tours : </h3>
+
        <p>
+
          A votre tour, vous pouvez d’abord jouer une carte de votre main. Effectuez ensuite une action parmi les trois proposées :
+
        </p>
+
        <ul>
+
          <li>Piocher une carte. Sauf indication contraire la main ne peut contenir que 3 cartes. Vous pouvez vous d&eacute;fausser d&rsquo;une carte pour piocher. </li>
+
          <li>Se diviser (gagner 1 log &agrave; la colonie)</li>
+
        </ul>
+
 
+
        <p class="go-further fr">
+
          une colonie bact&eacute;rienne se d&eacute;veloppe en utilisant les ressources du milieu (carbone, azote, fer, etc). Au sein d&rsquo;une colonie, les bact&eacute;ries se multiplient en cr&eacute;ant un double d&rsquo;elles-m&ecirc;me : on dit qu&rsquo;elles se divisent. &nbsp;Ainsi, &agrave; chaque division, le nombre de bact&eacute;ries est multipli&eacute; par 2 dans la colonie. Dans le jeu, les &ldquo;log&rdquo; sont utilis&eacute;es pour d&eacute;crire la quantit&eacute; de bact&eacute;ries, qui peut atteindre des milliards d&rsquo;individus. Par exemple, dans le gros intestin, lieu de r&eacute;sidence de multiples bact&eacute;ries, il y a environ 14 log de bact&eacute;ries, soit cent mille milliards de bact&eacute;ries !
+
        </p>
+
 
+
        <ul>
+
          <li>Attaquer une colonie adverse (- 1 log à la colonie adverse)</li>
+
        </ul>
+
 
+
        <p class="go-further fr">
+
          Certaines bact&eacute;ries disposent de tout un arsenal pour limiter la croissance de leurs comp&eacute;titeurs (par exemple en pi&eacute;geant certaines ressources essentielles comme le fer), voire de les &eacute;liminer! ( par exemple en utilisant des toxines). Attention, si dans le jeu toutes les bact&eacute;ries sont capables de s&rsquo;attaquer entre elles, il en va autrement dans la nature car elles n&rsquo;ont pas toutes le m&ecirc;me environnement, et ne sont donc que rarement en comp&eacute;tition.
+
 
         </p>
 
         </p>
 
       </section>
 
       </section>
  
      <style>
 
        .card_container{
 
          margin-top:20px;
 
        }
 
        .cards_table td{
 
          position:relative;
 
          z-index:10;
 
          cursor:pointer;
 
        }
 
        .cards_table img{
 
          width:100%;
 
          text-align:center;
 
            -webkit-transition: all 0.5s ease;
 
            -moz-transition: all 0.5s ease;
 
            -o-transition: all 0.5s ease;
 
            -ms-transition: all 0.5s ease;
 
          transition: all 0.5s ease;
 
        }
 
        .cards_table td.active img, .cards_table td:hover img{
 
          width:130%;
 
          text-align:center;
 
          margin-left:-10%;   
 
        }
 
        .cards_table td.active, .cards_table td:hover{
 
          z-index:20;
 
        }
 
        .cards_descr{
 
          position:relative;
 
          width:70%;
 
          margin:20px 5% 50px auto;
 
          overflow: visible;
 
        }
 
        .card_container{
 
          display:none;
 
        }
 
        .card_container.active{
 
          display:table !important;
 
        }
 
        .card_img{
 
          display:table-cell;
 
          width:30%;
 
          vertical-align: middle;
 
 
        }
 
        .card_img img{
 
          width:100%;
 
        }
 
        .card_img{
 
          display:table-cell;
 
          width:30%;
 
          vertical-align: middle;
 
 
        }
 
        .card_img img{
 
          width:100%;
 
        }
 
        .card_expl{
 
          display:table-cell;
 
          width:70%;
 
          vertical-align: top;
 
          position:relative;
 
          height:100%;
 
        }
 
        .card_expl > div{
 
          margin-left:40px;
 
          background: rgba(255,255,255,0.2);
 
          height:100%;
 
          border-radius:20px;
 
        }
 
        .card_expl p{
 
          padding:10px 60px 10px 60px;
 
          text-align:justify;
 
        }
 
      </style>
 
 
      <section>
 
        <h1>Cartes Bact&eacute;ries</h1>
 
        <p class="go-further fr">
 
          Les bact&eacute;ries sont des organismes microscopiques (entre 0.2 et 2 &micro;m) et ne sont compos&eacute;s que d&rsquo;une simple cellule. Actuellement, on estime qu&rsquo;il existe &nbsp;des milliards &ldquo;d&rsquo;esp&egrave;ces&rdquo; bact&eacute;riennes, occupant la quasi-totalit&eacute; des environnements (des zones glac&eacute;es aux d&eacute;serts chauds, du syst&egrave;me digestif humain au confin des abysses marins&hellip;). <br />
 
          Les bact&eacute;ries ont des propri&eacute;t&eacute;s, des formes et des comportements tr&egrave;s divers. Certaines sont de forme allong&eacute;e (bacilles), d&rsquo;autres rondes (coques). <br />
 
          Les bact&eacute;ries prototrophes sont capables de se nourrir dans n&rsquo;importe quel environnement, alors que les auxotrophes ont besoin que leur environnement contienne tous les &eacute;l&eacute;ments nutritifs pour se d&eacute;velopper. <br />
 
          Certaines sont capables de provoquer des maladies chez l&rsquo;homme, ce sont les &nbsp;pathog&egrave;nes. <br />
 
          La communaut&eacute; scientifique a class&eacute; les bact&eacute;ries en fonction de leur capacit&eacute; &agrave; &ecirc;tre color&eacute;es par une technique appel&eacute; test de Gram (elles sont dites &agrave; Gram positif ou &agrave; Gram n&eacute;gatif), cette coloration d&eacute;pend de la composition de la membrane qui les entoure. <br />
 
          Sur milieu g&eacute;los&eacute;, une bact&eacute;rie qui se multiplie finit par former un petit point visible &agrave; l&rsquo;oeil nu (environ 8 log). Il s&rsquo;agit d&rsquo;une colonie bact&eacute;rienne, elle va continuer de s&rsquo;&eacute;tendre tant que les ressources nutritives sont suffisantes pour assurer son d&eacute;veloppement. La forme et la couleur de ces colonies d&eacute;pendent des bact&eacute;ries. <br />
 
        </p>
 
      </section>
 
 
      <table class="cards_table">
 
        <tr>
 
          <td id="img1"  data-target="img2" class="active">
 
            <img src="https://static.igem.org/mediawiki/2017/1/1b/T--INSA-UPS_France--Microbioworld_Cards_fr_Bsubtilis-min.png" alt="">
 
          </td>
 
          <td id="img2"  data-target="img3">
 
            <img src="https://static.igem.org/mediawiki/2017/5/5e/T--INSA-UPS_France--Microbioworld_Cards_fr_Dradiodurans-min.png" alt="">
 
          </td>
 
          <td id="img3"  data-target="img4">
 
            <img src="https://static.igem.org/mediawiki/2017/e/e8/T--INSA-UPS_France--Microbioworld_Cards_fr_Ecoli-min.png" alt="">
 
          </td>
 
          <td id="img4"  data-target="img5">
 
            <img src="https://static.igem.org/mediawiki/2017/6/65/T--INSA-UPS_France--Microbioworld_Cards_fr_Saureus-min.png" alt="">
 
          </td>
 
          <td id="img5"  data-target="img6">
 
            <img src="https://static.igem.org/mediawiki/2017/e/ef/T--INSA-UPS_France--Microbioworld_Cards_fr_Spneumoniae-min.png" alt="">
 
          </td>
 
          <td id="img6"  data-target="img1">
 
            <img src="https://static.igem.org/mediawiki/2017/3/34/T--INSA-UPS_France--Microbioworld_Cards_fr_Vcholerae-min.png" alt="">
 
          </td>
 
          <td></td>
 
        </tr>
 
      </table>
 
     
 
      <div class="card_container active" id="full_img1">
 
        <div class="card_img">
 
          <img src="https://static.igem.org/mediawiki/2017/f/f5/T--INSA-UPS_France--Microbioworld_Cards_fr_Bsubtilis.png" alt="">
 
        </div>
 
        <div class="card_expl">
 
          <div class="card_text">
 
            <p>
 
              <b>Effet :</b> Sporulation
 
            </p>
 
            <p>
 
              Une fois par partie, lorsque votre colonie subit des d&eacute;g&acirc;ts, <i>Bacillus subtilis</i> peut entrer en sporulation. Vous ne subissez aucun d&eacute;g&acirc;t ce tour-ci.
 
            </p>
 
            <p>
 
              <b>Cat&eacute;gories:</b>  type bacille, Gram positif, non-pathog&egrave;ne, prototrophe.
 
            </p>
 
            <p class="go-further fr">
 
              La sporulation est une propri&eacute;t&eacute; permettant &agrave; certains organismes de survivre &agrave; diff&eacute;rents stress. Pour cela, la bact&eacute;rie se met dans un &eacute;tat v&eacute;g&eacute;tatif appel&eacute; dormance, et s&rsquo;entoure d&rsquo;une paroi sp&eacute;ciale qui lui permet de r&eacute;sister aux agressions ext&eacute;rieures. Quand les conditions s&rsquo;am&eacute;liorent, la spore peut &ldquo;germer&rdquo; et la bact&eacute;rie reprendre sa croissance. On a ainsi pu faire germer des spores isol&eacute;es sur des momies &eacute;gyptiennes !
 
            </p>
 
          </div>
 
        </div>
 
      </div>
 
 
      <div class="card_container" id="full_img2">
 
        <div class="card_img">
 
          <img src="https://static.igem.org/mediawiki/2017/1/12/T--INSA-UPS_France--Microbioworld_Cards_fr_Dradiodurans.png" alt="">
 
        </div>
 
        <div class="card_expl">
 
          <div class="card_text">
 
            <p>
 
              <b>Effet :</b> Polyextr&ecirc;mophile
 
            </p>
 
            <p>
 
              La croissance de <i>Deinococcus radiodurans</i> n&rsquo;est pas affect&eacute;e par la temp&eacute;rature et les UV.
 
            </p>
 
            <p>
 
              <b>Cat&eacute;gories:</b>  type coque, Gram positif, non-pathog&egrave;ne, auxotrophe
 
            </p>
 
            <p class="go-further fr">
 
              <span style="font-style:normal;">Deinococcus radiodurans</span> est une bact&eacute;rie polyextr&ecirc;mophile capable de se diviser m&ecirc;me &agrave; des temp&eacute;ratures extr&ecirc;mes . Elle suscite un grand int&eacute;r&ecirc;t dans la communaut&eacute; scientifique en raison de son impressionnante capacit&eacute; de survie. Poss&eacute;dant plusieurs copies de son ADN, cette bact&eacute;rie est beaucoup moins sensibles aux mutations caus&eacute;es par l&rsquo;environnement.
 
            </p>
 
          </div>
 
        </div>
 
      </div>
 
 
      <div class="card_container" id="full_img3">
 
        <div class="card_img">
 
          <img src="https://static.igem.org/mediawiki/2017/a/ae/T--INSA-UPS_France--Microbioworld_Cards_fr_Ecoli.png" alt="">
 
        </div>
 
        <div class="card_expl">
 
          <div class="card_text">
 
            <p>
 
              <b>Effet :</b> Microbiote
 
            </p>
 
            <p>
 
              Une fois dans la partie, vous pouvez choisir un joueur : vous faites alors partie du m&ecirc;me microbiote. Vous ne pouvez plus attaquer ou &ecirc;tre attaqu&eacute; par ce joueur jusqu&rsquo;&agrave; la fin de la partie. Arrivez le premier &agrave; 10 log pour battre votre microbiote.
 
            </p>
 
            <p>
 
              <b>Cat&eacute;gories :</b> type bacille, Gram n&eacute;gatif, non-pathog&egrave;ne, prototrophe
 
            </p>
 
            <p class="go-further fr">
 
              <span style="font-style:normal;">Escherichia coli</span> est naturellement pr&eacute;sente dans le syst&egrave;me digestif de l&rsquo;homme. C&rsquo;est m&ecirc;me le premier microorganisme &agrave; coloniser cet environnement &agrave; la naissance du b&eacute;b&eacute;. De part sa grande souplesse d&rsquo;utilisation, c&rsquo;est le mod&egrave;le bact&eacute;rien le plus &eacute;tudi&eacute; en laboratoire et elle est aussi tr&egrave;s utilis&eacute;e dans les bioindustries pour produire diff&eacute;rents compos&eacute;s organiques.
 
            </p>
 
          </div>
 
        </div>
 
      </div>
 
  
      <div class="card_container" id="full_img4">
 
        <div class="card_img">
 
          <img src="https://static.igem.org/mediawiki/2017/d/d4/T--INSA-UPS_France--Microbioworld_Cards_fr_Saureus.png" alt="">
 
        </div>
 
        <div class="card_expl">
 
          <div class="card_text">
 
            <p>
 
              <b>Effet :</b> Multir&eacute;sistance
 
            </p>
 
            <p>
 
              <i>Staphylococcus aureus</i> MRSA est r&eacute;sistante au chloramph&eacute;nicol et &agrave; l&rsquo;ampicilline.
 
            </p>
 
            <p>
 
              <b>Cat&eacute;gories :</b> type coque, Gram positif, pathog&egrave;ne, auxotrophe
 
            </p>
 
            <p class="go-further fr">
 
              Son nom commun est staphylocoque dor&eacute;e en raison des pigments qu&rsquo;elle produit qui conf&egrave;rent une couleur dor&eacute;e &agrave; ses colonies. Chez l&rsquo;homme, elle est naturellement pr&eacute;sente sur la peau. Cette bact&eacute;rie est surtout c&eacute;l&egrave;bre pour son caract&egrave;re pathog&egrave;ne quand elle a l'opportunit&eacute; d'infecter son h&ocirc;te, &agrave; la suite d&rsquo;une coupure par exemple. Le variant MRSA (Multi Resistant <span style="font-style:normal;">Staphylococcus Aureus</span>) est plus tristement c&eacute;l&egrave;bre en raison de sa capacit&eacute; &agrave; r&eacute;sister &agrave; la plupart des antibiotiques. Dans les h&ocirc;pitaux, elle provoque des maladies nosocomiales.
 
            </p>
 
          </div>
 
        </div>
 
      </div>
 
  
      <div class="card_container" id="full_img5">
 
        <div class="card_img">
 
          <img src="https://static.igem.org/mediawiki/2017/b/bf/T--INSA-UPS_France--Microbioworld_Cards_fr_Spneumoniae.png" alt="">
 
        </div>
 
        <div class="card_expl">
 
          <div class="card_text">
 
            <p>
 
              <b>Effet :</b> Comp&eacute;tence
 
            </p>
 
            <p>
 
              Une fois dans la partie, lorsque vous attaquez une autre colonie ou qu&rsquo;une autre colonie vous attaque, vous pouvez lui voler une carte plasmide. Mettez ce plasmide dans votre main, vous pouvez alors avoir jusqu&rsquo;&agrave; 4 cartes en main.
 
            </p>
 
            <p>
 
              <b>Cat&eacute;gories :</b> type coque, Gram n&eacute;gatif, pathog&egrave;ne, prototrophe.
 
            </p>
 
            <p class="go-further fr">
 
              Cette bact&eacute;rie est un pathog&egrave;ne de l&rsquo;homme retrouv&eacute; dans diff&eacute;rentes infections (pneumonie, otites, m&eacute;ningite&hellip;). Le m&eacute;canisme de comp&eacute;tence de <span style="font-style:normal;">Streptococcus pneumoniae</span> lui permet d&rsquo;acqu&eacute;rir naturellement des plasmides d&rsquo;autres microorganismes (voir plus d&rsquo;explications dans le paragraphe &ldquo;Plasmides&rdquo;).
 
            </p>
 
          </div>
 
        </div>
 
      </div>
 
  
      <div class="card_container" id="full_img6">
 
        <div class="card_img">
 
          <img src="https://static.igem.org/mediawiki/2017/8/86/T--INSA-UPS_France--Microbioworld_Cards_fr_Vcholerae.png" alt="">
 
        </div>
 
        <div class="card_expl">
 
          <div class="card_text">
 
            <p>
 
              <b>Effet :</b>  Toxine chol&eacute;rique
 
            </p>
 
            <p>
 
              Si la colonie attaqu&eacute;e poss&egrave;de au moins 7 log, Vibrio cholerae peut lancer une division en plus de son attaque.
 
            </p>
 
            <p>
 
              <b>Cat&eacute;gories :</b> type bacille, Gram n&eacute;gatif, pathog&egrave;ne, auxotrophe.
 
            </p>
 
            <p class="go-further fr">
 
              <span style="font-style:normal;">Vibrio cholerae</span> est une bact&eacute;rie qui vit dans les eaux stagnantes, elle est responsable du chol&eacute;ra. Lorsqu&rsquo;elle est ing&eacute;r&eacute;e par l&rsquo;homme, elle perturbe le syst&egrave;me digestif et provoque des diarrh&eacute;es, elle rejoint alors d&rsquo;autres cours d&rsquo;eau, ce qui lui permet de coloniser de nouveaux environnements. Elle poss&egrave;de aussi un syst&egrave;me de perforation qui lui permet d&rsquo;attaquer d&rsquo;autres bact&eacute;ries pour exploiter leurs ressources.
 
            </p>
 
          </div>
 
        </div>
 
      </div>
 
  
  
 
       <section>
 
       <section>
        <h1>Cartes milieux </h1>
 
 
         <p>
 
         <p>
           Les cartes milieux permettent de mimer un environnement dans lequel les diff&eacute;rentes colonies vont &eacute;voluer pendant la partie. La carte &ldquo;repiquage&rdquo; permet de changer le milieu de culture : lorsqu&rsquo;elle est jou&eacute;e, retournez la premi&egrave;re carte de la pile milieux, elle devient le nouveau milieu commun.
+
           Officia repellendus ut harum totam quibusdam a minus in tempora voluptatum vero perferendis quae explicabo aut veritatis repudiandae non, necessitatibus magni ipsa quas doloribus suscipit, maxime. Atque repudiandae labore eius veritatis sit, illum officia. Error sit, nesciunt nulla! Molestiae nesciunt tempora similique voluptatum aperiam unde cumque necessitatibus quisquam modi dolorem est eligendi veritatis minus, ut non veniam praesentium adipisci voluptatem perspiciatis. Repudiandae temporibus eius saepe reprehenderit excepturi autem velit, eaque nostrum officiis iusto quisquam quod vero. Eum voluptate optio iure, alias vel ratione consectetur nostrum placeat, odit perspiciatis cum accusantium dignissimos illum sapiente quibusdam explicabo in eius similique? Architecto, a?
        </p>
+
        <p class="go-further fr">
+
          en laboratoire, les microorganismes sont cultiv&eacute;s sur des supports (appel&eacute;s milieux) qui fournissent les nutriments n&eacute;cessaires &agrave; leur croissance. Le milieu g&eacute;lifi&eacute; est conditionn&eacute; dans une bo&icirc;te de Petri, une petite bo&icirc;te en plastique transparent. Un milieu additionn&eacute; d&rsquo;un antibiotique est dit  s&eacute;lectif : seules les bact&eacute;ries r&eacute;sistantes &agrave; cet antibiotique pourront se d&eacute;velopper. Certains milieux sont dits diff&eacute;rentiels : ils permettent de colorer les bact&eacute;ries en fonction de leurs propri&eacute;t&eacute;s. 
+
 
         </p>
 
         </p>
 
       </section>
 
       </section>
 
      <table class="cards_table">
 
        <tr>
 
          <td id="img10" data-target="img11" class="active"><img src="https://static.igem.org/mediawiki/2017/a/a6/T--INSA-UPS_France--Microbioworld_Media_LB25-min.png" alt=""></td>
 
          <td id="img11" data-target="img12"><img src="https://static.igem.org/mediawiki/2017/4/48/T--INSA-UPS_France--Microbioworld_Media_LBUV-min.png" alt=""></td>
 
          <td id="img12" data-target="img13"><img src="https://static.igem.org/mediawiki/2017/e/ea/T--INSA-UPS_France--Microbioworld_Media_LB45-min.png" alt=""></td>
 
          <td id="img13" data-target="img14"><img src="https://static.igem.org/mediawiki/2017/f/f9/T--INSA-UPS_France--Microbioworld_Media_LBamp-min.png" alt=""></td>
 
          <td id="img14" data-target="img15"><img src="https://static.igem.org/mediawiki/2017/e/e3/T--INSA-UPS_France--Microbioworld_Media_LBchlo-min.png" alt=""></td>
 
          <td id="img15" data-target="img16"><img src="https://static.igem.org/mediawiki/2017/f/f9/T--INSA-UPS_France--Microbioworld_Media_LBconta-min.png" alt=""></td>
 
          <td id="img16" data-target="img17"><img src="https://static.igem.org/mediawiki/2017/3/36/T--INSA-UPS_France--Microbioworld_Media_chap-min.png" alt=""></td>
 
          <td id="img17" data-target="img18"><img src="https://static.igem.org/mediawiki/2017/5/51/T--INSA-UPS_France--Microbioworld_Media_mcc-min.png" alt=""></td>
 
          <td id="img18" data-target="img11"><img src="https://static.igem.org/mediawiki/2017/0/04/T--INSA-UPS_France--Microbioworld_Media_min-min.png" alt=""></td>
 
        </tr>
 
      </table>
 
     
 
      <div class="card_container active" id="full_img10">
 
        <div class="card_img">
 
          <img src="https://static.igem.org/mediawiki/2017/b/b4/T--INSA-UPS_France--Microbioworld_Media_LB25.png" alt="">
 
        </div>
 
        <div class="card_expl">
 
          <div class="card_text">
 
            <p>
 
              <b>Effet :</b> les bact&eacute;ries se divisent et attaquent normalement. C&rsquo;est le milieu de culture de d&eacute;part.
 
            </p>
 
            <p class="go-further fr">
 
            Il est compos&eacute; d&rsquo;extrait de levure, de peptone (m&eacute;lange de petites mol&eacute;cules prot&eacute;iques qui fournit notamment la mati&egrave;re azot&eacute;e), de sel et d&rsquo;eau.
 
            </p>
 
          </div>
 
        </div>
 
      </div>
 
 
      <div class="card_container" id="full_img11">
 
        <div class="card_img">
 
          <img src="https://static.igem.org/mediawiki/2017/9/93/T--INSA-UPS_France--Microbioworld_Media_LBUV.png" alt="">
 
        </div>
 
        <div class="card_expl">
 
          <div class="card_text">
 
            <p>
 
              <b>Effet :</b> au d&eacute;but de votre tour, vous perdez 1 log avant de pouvoir effectuer toute action.
 
            </p>
 
            <p class="go-further fr">
 
            Des mutations se produisent naturellement dans le g&eacute;nome mais elles sont tr&egrave;s ponctuelles. Le rayonnement Ultra-Violet est un agent mutag&egrave;ne : il favorise l'apparition d&rsquo;un grand nombre de mutations qui alt&egrave;rent l&rsquo;information de l&rsquo;ADN. S&rsquo;il y a trop de mutations, la bact&eacute;rie n&rsquo;est plus capable de maintenir toutes ses fonctions vitales.
 
            </p>
 
          </div>
 
        </div>
 
      </div>
 
 
      <div class="card_container" id="full_img12">
 
        <div class="card_img">
 
          <img src="https://static.igem.org/mediawiki/2017/0/02/T--INSA-UPS_France--Microbioworld_Media_LB45.png" alt="">
 
        </div>
 
        <div class="card_expl">
 
          <div class="card_text">
 
            <p>
 
              <b>Effet :</b> les bact&eacute;ries non thermophiles ne peuvent plus se diviser.
 
            </p>
 
            <p class="go-further fr">
 
            Les microorganismes thermophiles sont adapt&eacute;s pour vivre dans des milieux &agrave; tr&egrave;s haute temp&eacute;rature comme les volcans ou les sources chaudes. Une temp&eacute;rature &eacute;lev&eacute;e augmente la fluidit&eacute; de la membrane et inactive de nombreuses mol&eacute;cules chez les microorganismes. Les thermophiles utilisent des acides gras diff&eacute;rents pour maintenir l&rsquo;int&eacute;grit&eacute; de leur membrane. Ils pr&eacute;sentent aussi des prot&eacute;ines thermor&eacute;sistantes : elles ont une structure plus compacte et sont plus stables.
 
            </p>
 
          </div>
 
        </div>
 
      </div>
 
 
      <div class="card_container" id="full_img13">
 
        <div class="card_img">
 
          <img src="https://static.igem.org/mediawiki/2017/0/0b/T--INSA-UPS_France--Microbioworld_Media_LBamp.png" alt="">
 
        </div>
 
        <div class="card_expl">
 
          <div class="card_text">
 
            <p>
 
              <b>Effet :</b> toutes les bact&eacute;ries non r&eacute;sistantes &agrave; l&rsquo;ampicilline perdent 3 log.
 
            </p>
 
            <p class="go-further fr">
 
            L'ampicilline est un antibiotique de type bact&eacute;ricide : il tue les bact&eacute;ries. Il fait partie de la famille de la p&eacute;nicilline. Cet antibiotique emp&ecirc;che la production du peptidoglycane, un constituant de la paroi des bact&eacute;ries. Pour ce faire, il se fixe sur des enzymes qui participent &agrave; la formation de liaisons entre les mol&eacute;cules du peptidoglycane.
 
 
            </p>
 
          </div>
 
        </div>
 
      </div>
 
 
      <div class="card_container" id="full_img14">
 
        <div class="card_img">
 
          <img src="https://static.igem.org/mediawiki/2017/d/d5/T--INSA-UPS_France--Microbioworld_Media_LBchlo.png" alt="">
 
        </div>
 
        <div class="card_expl">
 
          <div class="card_text">
 
            <p>
 
              <b>Effet :</b> toutes les bact&eacute;ries non r&eacute;sistantes au chloramph&eacute;nicol ne peuvent plus se diviser.
 
            </p>
 
            <p class="go-further fr">
 
            Le chloramph&eacute;nicol est un antibiotique de type bact&eacute;riostatique : il emp&ecirc;che la division des bact&eacute;ries. Il bloque la production des prot&eacute;ines utilis&eacute;es pour la division.
 
            </p>
 
          </div>
 
        </div>
 
      </div>
 
 
      <div class="card_container" id="full_img15">
 
        <div class="card_img">
 
          <img src="https://static.igem.org/mediawiki/2017/6/69/T--INSA-UPS_France--Microbioworld_Media_LBconta.png" alt="">
 
        </div>
 
        <div class="card_expl">
 
          <div class="card_text">
 
            <p>
 
              <b>Effet :</b> Un champignon s&rsquo;est d&eacute;velopp&eacute; sur le milieu, il a une colonie de (nombre joueur +1) log. Il se divise &agrave; chaque tour de table. Les joueurs peuvent attaquer le champignon pendant leur phase d&rsquo;attaque. S&rsquo;il meurt, le milieu redevient un LB standard. S&rsquo;il atteint 10 log, il gagne la partie ! On ne peut plus changer le milieu de culture, les repiquages permettent de remettre le champignon &agrave; n joueur +1 log.
 
            </p>
 
            <p class="go-further fr">
 
            Les microorganismes sont pr&eacute;sents partout. Le travail du microbiologiste s&rsquo;effectue en condition st&eacute;rile pour &eacute;viter les contaminations non d&eacute;sir&eacute;es. Il arrive quand m&ecirc;me que des contaminants se d&eacute;veloppent sur les bo&icirc;tes de P&eacute;tri. Ces contaminants peuvent alors envahir le milieu.
 
            </p>
 
          </div>
 
        </div>
 
      </div>
 
 
      <div class="card_container" id="full_img16">
 
        <div class="card_img">
 
          <img src="https://static.igem.org/mediawiki/2017/9/9d/T--INSA-UPS_France--Microbioworld_Media_chap.png" alt="">
 
        </div>
 
        <div class="card_expl">
 
          <div class="card_text">
 
            <p>
 
              <b>Effet :</b> seules les bact&eacute;ries &agrave; Gram positif peuvent se diviser.
 
            </p>
 
            <p class="go-further fr">
 
            Le milieu Chapman est un milieu enrichi en sels utilis&eacute; pour l'isolement des bact&eacute;ries &agrave; Gram positif. Outre le fait que seules les bact&eacute;ries &agrave; Gram positif s&rsquo;y d&eacute;veloppent, il permet aussi de r&eacute;v&eacute;ler la pr&eacute;sence de colonies par un marquage color&eacute;. Le crit&egrave;re de diff&eacute;renciation est la fermentation du mannitol (un &eacute;dulcorant naturel qui est utilis&eacute; comme substrat nutritif) qui acidifie le milieu. L&rsquo;acidification est r&eacute;v&eacute;l&eacute;e gr&acirc;ce &agrave; un indicateur qui change de couleur (le rouge de ph&eacute;nol).
 
            </p>
 
          </div>
 
        </div>
 
      </div>
 
 
      <div class="card_container" id="full_img17">
 
        <div class="card_img">
 
          <img src="https://static.igem.org/mediawiki/2017/1/19/T--INSA-UPS_France--Microbioworld_Media_mcc.png" alt="">
 
        </div>
 
        <div class="card_expl">
 
          <div class="card_text">
 
            <p>
 
              <b>Effet :</b> seules les bact&eacute;ries &agrave; Gram n&eacute;gatif peuvent se diviser.
 
            </p>
 
            <p class="go-further fr">
 
            Le milieu McConkey est un milieu pour l'isolement des Gram n&eacute;gatifs. Il contient des agents (cristal violet et sels biliaires) qui freinent le d&eacute;veloppement des bact&eacute;ries &agrave; Gram positif. La fermentation du lactose par ces bact&eacute;ries permet d&rsquo;acidifier le milieu. L&rsquo;acidification est r&eacute;v&eacute;l&eacute;e gr&acirc;ce &agrave; un indicateur color&eacute; (le rouge de ph&eacute;nol) qui permet alors de faciliter de d&eacute;tecter les colonies.
 
            </p>
 
          </div>
 
        </div>
 
      </div>
 
 
      <div class="card_container" id="full_img18">
 
        <div class="card_img">
 
          <img src="https://static.igem.org/mediawiki/2017/b/bb/T--INSA-UPS_France--Microbioworld_Media_min.png" alt="">
 
        </div>
 
        <div class="card_expl">
 
          <div class="card_text">
 
            <p>
 
              <b>Effet :</b> les bact&eacute;ries auxotrophes (qui ne peuvent pas se nourrir sur un environnement pauvre en nutriments) ne se d&eacute;veloppent plus.
 
            </p>
 
            <p class="go-further fr">
 
              Les bact&eacute;ries auxotrophes ont besoin que leur environnement contienne tous les &eacute;l&eacute;ments nutritifs pour se d&eacute;velopper car elles ne sont pas capables de synth&eacute;tiser toutes les mol&eacute;cules qui lui permettent de se d&eacute;velopper. Il peut s&rsquo;agir par exemple de la synth&egrave;se d&rsquo;un acide amin&eacute; ou d&rsquo;un lipide essentiel. Il faut alors ajouter dans le milieu la mol&eacute;cule n&eacute;cessaire &agrave; la croissance.
 
            </p>
 
          </div>
 
        </div>
 
      </div>
 
 
     
 
    </div>
 
 
    <div class="booklet_en">
 
     
 
    </div>
 
  
  
Line 667: Line 200:
  
 
<!-- C O N T E N T -->
 
<!-- C O N T E N T -->
 
<script type="text/javascript">
 
 
  $(document).on("click",".step > div", function(){
 
    var target_str=$(this).data("target");
 
    var target=parseInt(target_str);
 
    // Descr
 
    $('.step-descr').removeClass('active-step');
 
    $("#step-"+target_str).addClass('active-step');
 
    // Step & path
 
    $('.step-path > div').removeClass('active-path');
 
    $('.step > div').removeClass('previous-step');
 
    $('.step > div').removeClass('selected-step');
 
    $(this).addClass('selected-step');
 
    for (i=1; i<=target; i++){
 
      $('#path-'+i).addClass('active-path');
 
      $('[data-target="'+(i-1)+'"]').addClass('previous-step');
 
    }
 
  });
 
</script>
 
 
<script type="text/javascript">
 
  $(document).ready(function(){
 
 
 
    // CAROUSEL
 
 
 
    /*$(".cards_table td").hover(function(){
 
      var id_go=$(this).attr('id');     
 
      $(this).siblings('td').each(function(){
 
        $(this).removeClass('active');
 
      });
 
      $(this).closest('table').siblings('.card_container').each(function(){
 
        console.log($(this).get());
 
        $(this).removeClass('active');
 
      });
 
      $("#"+id_go).addClass("active");
 
      $("#full_"+id_go).addClass("active");
 
    });*/
 
 
    $(document).on("click",".cards_table td", function(){
 
      var id_go=$(this).attr('id');     
 
      $(this).siblings('td').each(function(){
 
        $(this).removeClass('active');
 
      });
 
      $(this).closest('table').siblings('.card_container').each(function(){
 
        console.log($(this).get());
 
        $(this).removeClass('active');
 
      });
 
      $("#"+id_go).addClass("active");
 
      $("#full_"+id_go).addClass("active");
 
    });
 
 
    // LANGUAGE CHANGING
 
    $("#fr_flag").click(function(){
 
        $('body').removeClass('en');
 
        $('body').addClass('fr');
 
    });
 
    $("#en_flag").click(function(){
 
        $('body').removeClass('fr');
 
        $('body').addClass('en');
 
    });
 
 
    });
 
</script>
 
  
  

Revision as of 15:48, 15 October 2017

Model Interface

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laboriosam, ea? Ex animi rerum deserunt necessitatibus commodi, illum tempora soluta officia quam voluptatibus nostrum quos, ea debitis incidunt ad laborum perspiciatis aliquid est porro corrupti ducimus minima sed vel fugiat! Itaque, earum, dolorum. Consequuntur iste magni, atque! Inventore cum expedita quo ipsam quam, accusamus, neque adipisci. Consequatur itaque possimus porro nemo similique debitis nostrum. Impedit pariatur minus voluptate corporis aperiam delectus minima recusandae facilis, quod! Voluptates iure reiciendis, earum veritatis eveniet architecto alias nobis, magnam possimus veniam quisquam asperiores ullam vitae impedit dolor dolorem, officiis. Ipsa labore placeat culpa facilis temporibus.

Officia repellendus ut harum totam quibusdam a minus in tempora voluptatum vero perferendis quae explicabo aut veritatis repudiandae non, necessitatibus magni ipsa quas doloribus suscipit, maxime. Atque repudiandae labore eius veritatis sit, illum officia. Error sit, nesciunt nulla! Molestiae nesciunt tempora similique voluptatum aperiam unde cumque necessitatibus quisquam modi dolorem est eligendi veritatis minus, ut non veniam praesentium adipisci voluptatem perspiciatis. Repudiandae temporibus eius saepe reprehenderit excepturi autem velit, eaque nostrum officiis iusto quisquam quod vero. Eum voluptate optio iure, alias vel ratione consectetur nostrum placeat, odit perspiciatis cum accusantium dignissimos illum sapiente quibusdam explicabo in eius similique? Architecto, a?