Team:Paris Bettencourt/The Smell Game

From 2014.igem.org

(Difference between revisions)
 
(170 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/ba/Smell_of_roses.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;
+
margin-left : 5%;
-
font-size : 22px;
+
-
font-weight : bold;
+
-
                margin-left : 5%;
+
}
}
-
#logo:hover #logoblanc {
+
.cell {
-
}
+
display: inline-block;
-
#logo:hover #logorose {
+
vertical-align: top;
-
}
+
-
#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 : 350px;
+
-
display : inline-block;
+
-
}
+
-
#part1 p {
+
-
display : inline-block;
+
-
vertical-align : middle;
+
-
position : relative;
+
width : 44%;
width : 44%;
-
margin-left : 5%;
+
margin-right: 4%;  
                 font-size : 15px;
                 font-size : 15px;
 +
                margin-bottom : 40px;
}
}
-
#part1 img {
+
        .cell2 {
-
position : absolute;
+
float : right;
-
width : 44%;
+
width : 43%;
-
height : 250px;
+
                 margin-right : 4%;
-
                 left : 51%;
+
-
background-color : rgb(197,192,193);
+
-
}
+
-
#part2 {
+
-
width : 100%;
+
-
height : 350px;
+
-
display : inline-block;
+
-
}
+
-
#part2 p {
+
-
display : inline-block;
+
-
vertical-align : middle;
+
-
position : relative;
+
-
width : 44%;
+
-
margin-left : 5%;
+
                 font-size : 15px;
                 font-size : 15px;
 +
vertical-align: top;
 +
                font-size : 15px;
 +
                margin-bottom : 40px;
 +
        }
 +
.cell h6 {
 +
font-family : Arial;
 +
font-size : 22px;
 +
font-weight : bold;
}
}
-
#part2 img {
+
        .cell img {
-
position : absolute;
+
                width : 100%;
-
width : 44%;
+
        }
-
height : 250px;
+
#description {
-
                left : 51%;
+
width: 100%;
-
background-color : rgb(197,192,193);
+
margin-top: 62px;
 +
margin-bottom: 20px;
}
}
-
#part3 {
+
#description p {
-
width : 100%;
+
width: 90%;
-
height : 350px;
+
height: 220px;
-
display : inline-block;
+
margin: none;
 +
margin-bottom: 5px;
 +
background: #FF0063;
 +
padding: 5%;
 +
color: white;
 +
                font-size : 13px;
}
}
-
#part3 p {
+
#description .portait {
-
display : inline-block;
+
vertical-align: top;
-
vertical-align : middle;
+
width: 120px;
-
position : relative;
+
height: 130px;
-
width : 44%;
+
margin: none;
-
margin-left : 5%;
+
background-size: 120px 130px;
-
                font-size : 15px;
+
}
}
-
#part3 img {
+
#arnaud, #florian, #jean, #lucas, #nathan { display: inline-block; }
-
position : absolute;
+
-
width : 44%;
+
#arnaudTextDescrip, #florianTextDescrip, #jeanTextDescrip, #lucasTextDescrip, #nathanTextDescrip  { display: none; }
-
height : 250px;
+
-
                left : 51%;
+
#arnaud { background-image: url('https://static.igem.org/mediawiki/2014/c/ce/ArnaudBpb.jpg'); }
-
background-color : rgb(197,192,193);
+
#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 {
+
iframe {
-
width : 100%;
+
width : 90%;
-
height : 350px;
+
height : 700px;
-
display : inline-block;
+
min-width: 1200px;
-
}
+
-
#part4 p {
+
-
display : inline-block;
+
-
vertical-align : middle;
+
-
position : relative;
+
-
width : 44%;
+
margin-left : 5%;
margin-left : 5%;
-
                 font-size : 15px;
+
                 margin-top : 50px;
}
}
-
#part4 img {
+
        #pleinepage {
-
position : absolute;
+
                width : 90%;
-
width : 44%;
+
                margin-left : 5%;
-
height : 250px;
+
                margin-top : 50px;
-
                left : 51%;
+
        }
-
background-color : rgb(197,192,193);
+
#headtable {
 +
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=""></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>
+
-
<h6>The smell game</h6><br>
+
-
<p>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>
+
-
<img src="">
+
-
</div>
+
-
<div id=part2>
+
-
<h6>Part: BBa</h6><br>
+
-
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam bibendum purus eu neque finibus, eget pellentesque sapien viverra. Vestibulum ultrices posuere tempor. Maecenas ultrices sodales magna ac placerat. Sed a ex dignissim, ornare metus non, malesuada arcu. Etiam ullamcorper odio leo, at molestie eros sollicitudin in. Morbi aliquam scelerisque facilisis. Aenean tincidunt aliquam erat, quis ullamcorper nulla accumsan ac. Proin interdum nibh quam, in lacinia ipsum dignissim at. Nunc elementum lacus sed purus pharetra tincidunt. Sed ac velit vel turpis pulvinar accumsan ut in mauris. Praesent ac dapibus dui. Nullam finibus turpis et turpis sagittis congue. </p>
+
-
<img src="">
+
-
</div>
+
-
<div id=part3>
+
-
<h6>Part: BBa</h6><br>
+
-
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sit amet laoreet metus, ac viverra dolor. Sed et orci imperdiet sem vulputate ultricies. Aliquam erat volutpat. Cras semper ex non odio aliquet, eget feugiat eros tempor. Integer hendrerit odio et bibendum maximus. Duis scelerisque lacus in odio faucibus fringilla. Nulla eleifend aliquet molestie. Morbi aliquam rhoncus efficitur. Proin consectetur augue aliquam risus convallis egestas. Nunc viverra felis non nibh consequat, nec faucibus ipsum rutrum. Proin placerat faucibus libero vitae dapibus. </p>
+
-
<img src="">
+
-
</div>
+
-
<div id=part4>
+
-
<h6>Part: BBa</h6><br>
+
-
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam eu justo a dolor efficitur laoreet ut at lorem. Fusce dapibus lobortis nisi vehicula porttitor. In volutpat mauris et aliquam pellentesque. Vestibulum fringilla lacus metus, ac ullamcorper lectus sagittis sed. Suspendisse congue magna sed risus molestie aliquam. Sed placerat sagittis volutpat. Phasellus id erat neque. Quisque bibendum iaculis ante et feugiat. In hac habitasse platea dictumst. Fusce placerat lorem vel felis tincidunt, in elementum odio condimentum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec tincidunt bibendum lacus non viverra. Nulla mattis, ante vitae faucibus auctor, mi purus consequat dolor, non malesuada nulla lorem ac odio. </p>
+
-
<img src="">
+
-
</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"