Team:Paris Bettencourt/The Smell Game

From 2014.igem.org

(Difference between revisions)
 
(167 intermediate revisions not shown)
Line 4: Line 4:
<style>
<style>
body {
body {
-
        width : 100%;
+
        width : 100%;
 +
min-width: 1200px;
 +
text-align: justify;
}
}
-
.background {
+
body img { border : none; }
-
position : relative;
+
#topHeader {
-
background : rgb(255,0,99);
+
-
}
+
-
#topheader {
+
width : 100%;
width : 100%;
height : 300px;
height : 300px;
margin-top : 40px;
margin-top : 40px;
-
background-image : url("https://static.igem.org/mediawiki/2014/b/b4/Smellgame.png");
+
 
-
        background-size : cover;
+
background-image : url("https://static.igem.org/mediawiki/2014/6/68/PBsmellegamebanner.png");
-
background-color : transparent;
+
background-size : cover;
}
}
-
+
#topHeader img {
-
.separation {
+
display: block;
-
width : 100%;
+
width : 300px;
-
height : 300px;
+
margin-left: 80px;
 +
                padding-top: 50px;
background : transparent;
background : transparent;
 +
z-index : 60;
}
}
-
+
#contentCell {
-
h6 {
+
width: 90%;
-
font-family : Arial;
+
-
font-size : 22px;
+
-
font-weight : bold;
+
-
                margin-left : 5%;
+
-
}
+
-
#logorose {
+
-
position : absolute;
+
-
width : 100px;
+
-
height : 100px;
+
-
right : 0;
+
-
left : 0;
+
-
margin : auto;
+
-
margin-top : -50px;
+
-
background : transparent;
+
-
align : center;
+
-
z-index : 50;
+
-
display : block;
+
-
}
+
-
#tablelien {
+
-
width : 100%;
+
-
height : 60px;
+
-
text-align : center;
+
-
background-color : rgb(225,0,112);
+
-
}
+
-
#tablelien tr td {
+
-
width : 20%;
+
-
height : 60px;
+
-
color : rgb(193,185,184);
+
-
                font-size : 16px;
+
-
background-color : rgb(225,0,112);
+
-
}
+
-
p {
+
-
text-align : justify;
+
-
background-color : transparent;
+
-
}
+
-
        #fond {
+
-
                width : 100%
+
-
                height : 300px;
+
-
background : rgb(225,0,112);
+
-
}
+
-
#part1 {
+
-
width : 100%;
+
-
height : 500px;
+
-
display : inline-block;
+
-
}
+
-
#part1 .text1 {
+
-
display : inline-block;
+
-
vertical-align : middle;
+
-
position : relative;
+
-
width : 44%;
+
margin-left : 5%;
margin-left : 5%;
-
                font-size : 15px;
 
}
}
-
#part1 .text2 {
+
.cell {
-
position : absolute;
+
display: inline-block;
 +
vertical-align: top;
width : 44%;
width : 44%;
-
height : 250px;
+
margin-right: 4%;  
-
                left : 51%;
+
-
                margin-top : 60px;
+
                 font-size : 15px;
                 font-size : 15px;
 +
                margin-bottom : 40px;
}
}
-
#part2 {
+
        .cell2 {
-
width : 100%;
+
float : right;
-
height : 500px;
+
width : 43%;
-
display : inline-block;
+
                margin-right : 4%;
-
}
+
-
#part2 .text1 {
+
-
                position : absolute;
+
-
display : inline-block;
+
-
vertical-align : middle;
+
-
position : relative;
+
-
width : 44%;
+
-
margin-left : 5%;
+
                 font-size : 15px;
                 font-size : 15px;
-
}
+
vertical-align: top;
-
#part2 .text2 {
+
-
position : absolute;
+
-
width : 44%;
+
-
height : 250px;
+
-
                left : 51%;
+
-
                margin-top : 60px;
+
                 font-size : 15px;
                 font-size : 15px;
 +
                margin-bottom : 40px;
 +
        }
 +
 +
.cell h6 {
 +
font-family : Arial;
 +
font-size : 22px;
 +
font-weight : bold;
}
}
-
#part3 {
+
        .cell img {
-
width : 100%;
+
                width : 100%;
-
height : 350px;
+
        }
-
display : inline-block;
+
#description {
 +
width: 100%;
 +
margin-top: 62px;
 +
margin-bottom: 20px;
}
}
-
#part3 .text1 {
+
#description p {
-
                position : absolute;
+
width: 90%;
-
display : inline-block;
+
height: 220px;
-
vertical-align : middle;
+
margin: none;
-
position : relative;
+
margin-bottom: 5px;
-
width : 44%;
+
background: #FF0063;
-
margin-left : 5%;
+
padding: 5%;
-
                 font-size : 15px;
+
color: white;
 +
                 font-size : 13px;
}
}
-
#part3 .text2 {
+
#description .portait {
-
position : absolute;
+
vertical-align: top;
-
width : 44%;
+
width: 120px;
-
height : 250px;
+
height: 130px;
-
                left : 51%;
+
margin: none;
-
                margin-top : 60px;
+
background-size: 120px 130px;
}
}
-
#part4 {
+
#arnaud, #florian, #jean, #lucas, #nathan { display: inline-block; }
-
width : 100%;
+
-
height : 350px;
+
#arnaudTextDescrip, #florianTextDescrip, #jeanTextDescrip, #lucasTextDescrip, #nathanTextDescrip  { display: none; }
-
display : inline-block;
+
 +
#arnaud { background-image: url('https://static.igem.org/mediawiki/2014/c/ce/ArnaudBpb.jpg'); }
 +
#florian { background-image: url('https://static.igem.org/mediawiki/2014/c/c4/FlorianBpb.jpg'); }
 +
#jean { background-image: url('https://static.igem.org/mediawiki/2014/d/da/JeanBpb.jpg'); }
 +
#lucas { background-image: url('https://static.igem.org/mediawiki/2014/4/46/LucasBpb.jpg'); }
 +
#nathan { background-image: url('https://static.igem.org/mediawiki/2014/c/c9/NathanBpb.jpg'); }
 +
 +
#arnaud:hover { background-image: url('https://static.igem.org/mediawiki/2014/5/5c/ArnaudApb.jpg'); }
 +
#florian:hover { background-image: url('https://static.igem.org/mediawiki/2014/9/99/FlorianApb.jpg'); }
 +
#jean:hover { background-image: url('https://static.igem.org/mediawiki/2014/e/ed/JeanApb.jpg'); }
 +
#lucas:hover { background-image: url('https://static.igem.org/mediawiki/2014/2/28/LucasApb.jpg'); }
 +
#nathan:hover { background-image: url('https://static.igem.org/mediawiki/2014/8/82/NathanApb.jpg'); }
 +
 +
#igemLogo {
 +
width: 160px;
 +
height: 140px;
 +
margin: none;
 +
vertical-align: top;
}
}
-
#part4 .text1 {
+
iframe {
-
                position : absolute;
+
width : 90%;
-
display : inline-block;
+
height : 700px;
-
vertical-align : middle;
+
min-width: 1200px;
-
position : relative;
+
-
width : 44%;
+
margin-left : 5%;
margin-left : 5%;
-
                 font-size : 15px;
+
                 margin-top : 50px;
}
}
-
#part4 .text2 {
+
        #pleinepage {
-
position : absolute;
+
                width : 90%;
-
width : 44%;
+
                margin-left : 5%;
-
height : 250px;
+
                margin-top : 50px;
-
                left : 51%;
+
        }
-
                 margin-top : 60px;
+
#headtable {
-
                 font-size : 15px;
+
width : 92.5%;
 +
height : 300px;
 +
background : rgb(255,0,99);
 +
                 margin-right : 3.75%;
 +
                 margin-left : 3.75%;
}
}
-
#top {
+
#headtable tr td {
-
position : fixed;
+
width : 50%;
-
right : 20px;
+
heigth : 100%;
-
bottom : 10px;
+
color : rgb(255,255,255);
-
                 width : 25px;
+
                 font-size : 14px;  
-
                 height : 25px;
+
                 align : justify;
-
z-index : 100;
+
}
}
-
         #top img {
+
         #fond {
-
                 width : 100%;
+
                 width : 100%
-
                 height : 100%;
+
                 height : 300px;
 +
background : rgb(255,0,99);
 +
        }
 +
        #headtable tr td b {
 +
              font-size : 18px;
         }
         }
-
.nameimg {
 
-
position : absolute;
 
-
width : 200px;
 
-
height : 200px;
 
-
margin-left : 10%;
 
-
background : transparent;
 
-
z-index : 60;
 
-
}
 
         .text1 {
         .text1 {
               text-align : justify;
               text-align : justify;
               margin-left : 5%;
               margin-left : 5%;
               margin-right : 5%;
               margin-right : 5%;
 +
        }
 +
        #image1 {
 +
              width : 30%;
 +
              margin-left : 57.5%;
 +
              margin-top : -400px;
 +
        }
</style>
</style>
 +
 +
<script>
 +
$(document).ready(function(){
 +
$('#arnaud').mouseover(function() {
 +
$('#arnaudTextDescrip').css('display','block');
 +
$('#defaultTextDescrip').css('display','none');
 +
}).mouseout(function(){
 +
$('#arnaudTextDescrip').css('display','none');
 +
$('#defaultTextDescrip').css('display','block');
 +
});
 +
 +
$('#florian').mouseover(function() {
 +
$('#florianTextDescrip').css('display','block');
 +
$('#defaultTextDescrip').css('display','none');
 +
}).mouseout(function(){
 +
$('#florianTextDescrip').css('display','none');
 +
$('#defaultTextDescrip').css('display','block');
 +
});
 +
 +
$('#jean').mouseover(function() {
 +
$('#jeanTextDescrip').css('display','block');
 +
$('#defaultTextDescrip').css('display','none');
 +
}).mouseout(function(){
 +
$('#jeanTextDescrip').css('display','none');
 +
$('#defaultTextDescrip').css('display','block');
 +
});
 +
 +
$('#lucas').mouseover(function() {
 +
$('#lucasTextDescrip').css('display','block');
 +
$('#defaultTextDescrip').css('display','none');
 +
}).mouseout(function(){
 +
$('#lucasTextDescrip').css('display','none');
 +
$('#defaultTextDescrip').css('display','block');
 +
});
 +
 +
$('#nathan').mouseover(function() {
 +
$('#nathanTextDescrip').css('display','block');
 +
$('#defaultTextDescrip').css('display','none');
 +
}).mouseout(function(){
 +
$('#nathanTextDescrip').css('display','none');
 +
$('#defaultTextDescrip').css('display','block');
 +
});
 +
 +
});
 +
</script>
 +
<body>
<body>
-
<p id=top><a href="#topheader"><img src="https://static.igem.org/mediawiki/2014/4/41/Arrow.png"></a></p>
+
<div id="topHeader">
-
<div id="topheader">
+
<img src="https://static.igem.org/mediawiki/2014/b/b4/PB14thesmellgame.png" />
-
<img src="https://static.igem.org/mediawiki/2014/b/b1/Smelltheroses.png" class=nameimg>
+
</div>
</div>
-
<div id=logo><img id=logorose src="https://static.igem.org/mediawiki/2014/2/28/Logorose.png"></div>
 
<div id=fond>
<div id=fond>
 +
        <table id=headtable>
 +
<tr>
 +
<td><b><center>AIMS</center></b></br><br>
 +
<p class=text1>This platform has three concrete aims: to Develop a game for people to characterize smell samples (sweat or artificial odor) with respect to intensity and pleasantness, to create a database that stores the results from game and connects those smell results to the pertinent information from people who give a sample of their own sweat.and to generate graphical results from all precedent data, updated dynamically from the database.</p></td>
 +
<td><b><center>ACHIEVEMENTS</center></b></br><br>
 +
<p class=text1><left> <p>The web platform continues to evolve, mostly thanks to the people who give their samples and play the game. At this time, users can give a sample of his own sweat, play with the samples of others and then obtain a position of their smell.The SmellGame project relies on a web platform available here : <br>
 +
<a target="blank" href='http://smellofus.synbio4all.org/'>http://smellofus.synbio4all.org</a>.</br>Join us and play!</left></li></ul></p></td>
 +
</tr>
</table>
</table>
         </div>
         </div>
 +
<div id="contentCell">
 +
<div class="cell">
 +
<br><br><br><h6>Introduction</h6><br/>
 +
<p>This year, five students from the MSc of BioInformatics & Genomics of the University of Rennes 1 tried to inaugurate the first iGEM team from their university. However, being the first is always fraught with challenges and ultimately, they were not able have their own team this year. The Rennes University students wanted to participate in iGEM to learn about synthetic biology. The team viewed synthetic biology as a scientific discipline with a lot of potential, but still in the nascent stage of development. So they were still determined still participate! These five students asked us (iGEM Paris-Bettencourt team) for advice and found that the Rennes students had computational skills that we lacked. Thus began a mutually beneficial collaboration, which lead to the development of the online program "SmellGame" within the <a href="https://2014.igem.org/Team:Paris_Bettencourt/Citizen_Science">Citizen Science</a> part of Human Practices of iGEM Bettencourt.</p>
 +
</div>
 +
                <div class=cell>
 +
<br><br><br><h6>Motivation</h6><br/>
 +
<p>The Rennes team was motivated to create a web platform to generate, store, and analyze data for the following reasons:    </br>               
 +
                                        - The project idea is at the intersection of citizen science and big data: it is a perfect case study in the context of the current concerns in Bioinformatics.</br>
 +
- Enhanced the teams ability to develop web platforms.</br>
 +
- Opportunity to learn new web development tools and professional competencies (Python & Django, JavaScript, Git/GitHub, …).</br>
 +
- The ability to create web tools to analyze data that are fully embedded in the project.</br>
 +
</p>
 +
</div>
 +
<div class="cell">
 +
<h6>Design of the Platform</h6><br />
 +
<p>We designed an app for analyzing body odor samples from the public.<br><br>
 +
The body odor wheel was the starting point of our design. It references the main note of the different types of body odors. We worked on the interface to make the test user-friendly. It is based on analogies: "if this odor was a … what would it be?". After entering their age and gender, testers have to judge the intensity of the odor, attribute a humor, a note, a name, a title, and finally their appreciation of it. We wanted the results to be both digital and visual. Digital so it is usable data for scientist, visual so it is directly understandable for testers. At the end of each analysis the tester can see what other people thought of the odor they just judged. </li>
 +
</ul>
 +
</p>
 +
</div>
 +
                </br>
 +
<div class="cell">
 +
<p>
 +
<a target="blank" href='http://smellofus.synbio4all.org/'>http://smellofus.synbio4all.org</a>.</br>Join us and play!
 +
</p>
 +
</div>
 +
          <img id=image1 src="https://static.igem.org/mediawiki/2014/0/00/BO_WHEEL.png">
 +
</div>
 +
<img id=pleinepage src="https://static.igem.org/mediawiki/2014/4/4f/KITcds.png">
 +
<iframe id=website src="http://smellofus.synbio4all.org/smellguess/home/"></iframe>
 +
<br/><br/>
 +
<img id=pleinepage src="https://static.igem.org/mediawiki/2014/9/9a/RENNES.png"><br><br><br><br><br>
-
<br><br><br>
+
-
<div id=part1>
+
-
<p class=text2></p>
+
-
<h6>Introduction</h6><br>
+
-
<p class=text1>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut imperdiet diam eget quam imperdiet imperdiet. Mauris dapibus risus felis, sed ornare diam accumsan aliquet. Sed eu turpis porta, porttitor tortor et, condimentum augue. Curabitur a maximus nisi. Vivamus vitae magna ex. Donec congue auctor odio vitae tempus. In a gravida neque, et tristique tortor. Phasellus a odio sit amet enim ornare lobortis. Morbi sodales, diam non rutrum aliquam, ligula mauris consectetur urna, sed interdum quam risus sit amet enim. Aenean euismod enim magna, id pretium eros molestie non. Proin rutrum lobortis leo, sit amet congue erat. Nulla congue pellentesque augue porta dignissim. Pellentesque quis ex sollicitudin, condimentum risus varius, aliquet ipsum. Ut pulvinar aliquet maximus. Praesent imperdiet interdum commodo. </p>
+
-
</div>
+
-
<div id=part2>
+
-
<p class=text2></p>
+
-
<h6>Aims</h6><br>
+
-
<p class=text1>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut imperdiet diam eget quam imperdiet imperdiet. Mauris dapibus risus felis, sed ornare diam accumsan aliquet. Sed eu turpis porta, porttitor tortor et, condimentum augue. Curabitur a maximus nisi. Vivamus vitae magna ex. Donec congue auctor odio vitae tempus. In a gravida neque, et tristique tortor. Phasellus a odio sit amet enim ornare lobortis. Morbi sodales, diam non rutrum aliquam, ligula mauris consectetur urna, sed interdum quam risus sit amet enim. Aenean euismod enim magna, id pretium eros molestie non. Proin rutrum lobortis leo, sit amet congue erat. Nulla congue pellentesque augue porta dignissim. Pellentesque quis ex sollicitudin, condimentum risus varius, aliquet ipsum. Ut pulvinar aliquet maximus. Praesent imperdiet interdum commodo. </p>
+
-
</div>
+
-
<div id=part3>
+
-
<p class=text2></p>
+
-
<h6>Results</h6><br>
+
-
<p class=text1>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut imperdiet diam eget quam imperdiet imperdiet. Mauris dapibus risus felis, sed ornare diam accumsan aliquet. Sed eu turpis porta, porttitor tortor et, condimentum augue. Curabitur a maximus nisi. Vivamus vitae magna ex. Donec congue auctor odio vitae tempus. In a gravida neque, et tristique tortor. Phasellus a odio sit amet enim ornare lobortis. Morbi sodales, diam non rutrum aliquam, ligula mauris consectetur urna, sed interdum quam risus sit amet enim. Aenean euismod enim magna, id pretium eros molestie non. Proin rutrum lobortis leo, sit amet congue erat. Nulla congue pellentesque augue porta dignissim. Pellentesque quis ex sollicitudin, condimentum risus varius, aliquet ipsum. Ut pulvinar aliquet maximus. Praesent imperdiet interdum commodo. </p>
+
-
</div>
+
-
<div id=part4>
+
-
<p class=text2></p>
+
-
<h6>Motivation</h6><br>
+
-
<p class=text1>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut imperdiet diam eget quam imperdiet imperdiet. Mauris dapibus risus felis, sed ornare diam accumsan aliquet. Sed eu turpis porta, porttitor tortor et, condimentum augue. Curabitur a maximus nisi. Vivamus vitae magna ex. Donec congue auctor odio vitae tempus. In a gravida neque, et tristique tortor. Phasellus a odio sit amet enim ornare lobortis. Morbi sodales, diam non rutrum aliquam, ligula mauris consectetur urna, sed interdum quam risus sit amet enim. Aenean euismod enim magna, id pretium eros molestie non. Proin rutrum lobortis leo, sit amet congue erat. Nulla congue pellentesque augue porta dignissim. Pellentesque quis ex sollicitudin, condimentum risus varius, aliquet ipsum. Ut pulvinar aliquet maximus. Praesent imperdiet interdum commodo. </p>
+
-
</div>
+
</body>
</body>
</html>
</html>
{{:Team:Paris_Bettencourt/Footer}}
{{:Team:Paris_Bettencourt/Footer}}

Latest revision as of 03:22, 18 October 2014

AIMS


This platform has three concrete aims: to Develop a game for people to characterize smell samples (sweat or artificial odor) with respect to intensity and pleasantness, to create a database that stores the results from game and connects those smell results to the pertinent information from people who give a sample of their own sweat.and to generate graphical results from all precedent data, updated dynamically from the database.
ACHIEVEMENTS


The web platform continues to evolve, mostly thanks to the people who give their samples and play the game. At this time, users can give a sample of his own sweat, play with the samples of others and then obtain a position of their smell.The SmellGame project relies on a web platform available here :
http://smellofus.synbio4all.org.
Join us and play!



Introduction

This year, five students from the MSc of BioInformatics & Genomics of the University of Rennes 1 tried to inaugurate the first iGEM team from their university. However, being the first is always fraught with challenges and ultimately, they were not able have their own team this year. The Rennes University students wanted to participate in iGEM to learn about synthetic biology. The team viewed synthetic biology as a scientific discipline with a lot of potential, but still in the nascent stage of development. So they were still determined still participate! These five students asked us (iGEM Paris-Bettencourt team) for advice and found that the Rennes students had computational skills that we lacked. Thus began a mutually beneficial collaboration, which lead to the development of the online program "SmellGame" within the Citizen Science part of Human Practices of iGEM Bettencourt.




Motivation

The Rennes team was motivated to create a web platform to generate, store, and analyze data for the following reasons:
- The project idea is at the intersection of citizen science and big data: it is a perfect case study in the context of the current concerns in Bioinformatics.
- Enhanced the teams ability to develop web platforms.
- Opportunity to learn new web development tools and professional competencies (Python & Django, JavaScript, Git/GitHub, …).
- The ability to create web tools to analyze data that are fully embedded in the project.

Design of the Platform

We designed an app for analyzing body odor samples from the public.

The body odor wheel was the starting point of our design. It references the main note of the different types of body odors. We worked on the interface to make the test user-friendly. It is based on analogies: "if this odor was a … what would it be?". After entering their age and gender, testers have to judge the intensity of the odor, attribute a humor, a note, a name, a title, and finally their appreciation of it. We wanted the results to be both digital and visual. Digital so it is usable data for scientist, visual so it is directly understandable for testers. At the end of each analysis the tester can see what other people thought of the odor they just judged.


http://smellofus.synbio4all.org.
Join us and play!








Centre for Research and Interdisciplinarity (CRI)
Faculty of Medicine Cochin Port-Royal, South wing, 2nd floor
Paris Descartes University
24, rue du Faubourg Saint Jacques
75014 Paris, France
+33 1 44 41 25 22/25
paris-bettencourt-igem@googlegroups.com
Copyright (c) 2014 igem.org. All rights reserved.

Retrieved from "http://2014.igem.org/Team:Paris_Bettencourt/The_Smell_Game"