Difference between revisions of "Team:Sydney Australia/Rate My Gel"

 
(22 intermediate revisions by 2 users not shown)
Line 6: Line 6:
  
 
   <link href="https://fonts.googleapis.com/css?family=Quicksand" rel="stylesheet">
 
   <link href="https://fonts.googleapis.com/css?family=Quicksand" rel="stylesheet">
−
 
 
<script>
 
<script>
 
var imagesArray = new Array();
 
var imagesArray = new Array();
−
imagesArray[0] = {image:"0.png", pulls:0, wins:0, score:0};
+
imagesArray[0] = {image:"https://static.igem.org/mediawiki/2017/0/05/0.png", pulls:0, wins:0, score:0};
−
imagesArray[1] = {image:"1.png", pulls:0, wins:0, score:0};
+
imagesArray[1] = {image:"https://static.igem.org/mediawiki/2017/f/f6/Ratemygel_1.png", pulls:0, wins:0, score:0};
−
imagesArray[2] = {image:"2.png", pulls:0, wins:0, score:0};
+
imagesArray[2] = {image:"https://static.igem.org/mediawiki/2017/b/b3/Ratemygel_2.png", pulls:0, wins:0, score:0};
−
imagesArray[3] = {image:"3.png", pulls:0, wins:0, score:0};
+
imagesArray[3] = {image:"https://static.igem.org/mediawiki/2017/f/ff/Ratemygel_3.png", pulls:0, wins:0, score:0};
−
imagesArray[4] = {image:"4.png", pulls:0, wins:0, score:0};
+
imagesArray[4] = {image:"https://static.igem.org/mediawiki/2017/9/97/Ratemygel_4.png", pulls:0, wins:0, score:0};
−
imagesArray[5] = {image:"5.png", pulls:0, wins:0, score:0};
+
imagesArray[5] = {image:"https://static.igem.org/mediawiki/2017/5/56/Ratemygel_5.png", pulls:0, wins:0, score:0};
−
imagesArray[6] = {image:"6.png", pulls:0, wins:0, score:0};
+
imagesArray[6] = {image:"https://static.igem.org/mediawiki/2017/9/9a/Ratemygel_6.png", pulls:0, wins:0, score:0};
−
imagesArray[7] = {image:"7.png", pulls:0, wins:0, score:0};
+
imagesArray[7] = {image:"https://static.igem.org/mediawiki/2017/a/ad/Ratemygel_7.png", pulls:0, wins:0, score:0};
−
imagesArray[8] = {image:"8.png", pulls:0, wins:0, score:0};
+
imagesArray[8] = {image:"https://static.igem.org/mediawiki/2017/8/88/Ratemygel_8.png", pulls:0, wins:0, score:0};
−
imagesArray[9] = {image:"9.png", pulls:0, wins:0, score:0};
+
imagesArray[9] = {image:"https://static.igem.org/mediawiki/2017/6/68/Ratemygel_9.png", pulls:0, wins:0, score:0};
−
imagesArray[10] = {image:"10.png", pulls:0, wins:0, score:0};
+
imagesArray[10] = {image:"https://static.igem.org/mediawiki/2017/b/b2/Ratemygel_10.png", pulls:0, wins:0, score:0};
 +
imagesArray[11] = {image:"https://static.igem.org/mediawiki/2017/d/da/T--Bristol--Rate_My_Gel_1.png", pulls:0, wins:0, score:0};
 +
imagesArray[12] = {image:"https://static.igem.org/mediawiki/2017/2/2f/T--Macquarie_Australia--finalgel.png", pulls:0, wins:0, score:0};
  
 
var numl;
 
var numl;
Line 25: Line 26:
  
 
function displayImage(){
 
function displayImage(){
 +
    document.getElementById("start-button").value="Which Gel's Better?";
 
     numl = Math.floor(Math.random() * imagesArray.length);
 
     numl = Math.floor(Math.random() * imagesArray.length);
 
     numr= Math.floor(Math.random() * imagesArray.length);
 
     numr= Math.floor(Math.random() * imagesArray.length);
Line 35: Line 37:
 
     document.left.src = imagesArray[numl].image;
 
     document.left.src = imagesArray[numl].image;
 
     document.right.src=imagesArray[numr].image;
 
     document.right.src=imagesArray[numr].image;
 +
 +
    $("#gel-boxL").show();
 +
    $("#gel-boxR").show();
 +
    $("#buttonL").show();
 +
    $("#buttonR").show();
 +
    $("#submit-button").show();
 
}
 
}
 
function winnerL() {
 
function winnerL() {
 
imagesArray[numl].wins ++;
 
imagesArray[numl].wins ++;
−
imagesArray[numr].wins --;
 
 
displayImage();
 
displayImage();
 
}
 
}
Line 44: Line 51:
 
function winnerR() {
 
function winnerR() {
 
imagesArray[numr].wins ++;
 
imagesArray[numr].wins ++;
−
    imagesArray[numl].wins --;
 
 
displayImage();
 
displayImage();
 
}
 
}
Line 54: Line 60:
 
copy.sort(function(a, b){return parseFloat(b.score)-parseFloat(a.score)});
 
copy.sort(function(a, b){return parseFloat(b.score)-parseFloat(a.score)});
 
document.first.src=copy[0].image;
 
document.first.src=copy[0].image;
 +
document.getElementById('first_score').innerHTML = copy[0].score * 100
 
document.second.src=copy[1].image;
 
document.second.src=copy[1].image;
 +
document.getElementById('second_score').innerHTML = copy[1].score *100
 
document.third.src=copy[2].image;
 
document.third.src=copy[2].image;
 +
document.getElementById('third_score').innerHTML = copy[2].score *100
 
     $("#results").show();
 
     $("#results").show();
 
}
 
}
Line 83: Line 92:
 
     }
 
     }
  
−
.center, .row, .col-xs-6 {background: #e2e2e2;}
+
.center, .row {background: #e2e2e2;}
−
#results {display:none;}
+
#results, #gel-boxL, #gel-boxR, #buttonL, #buttonR, #submit-button {display:none;}
 +
 
 +
#buttonL, #buttonR, #start-button, #submit-button {
 +
/*MAKE THE BUTTONS PRETTY*/
 +
}
 +
 
 
</style>
 
</style>
 
</head>
 
</head>
 
<body>
 
<body>
−
<div class="center" style="margin-top:80px">
+
<div class="container-fluid">
−
       <img src="https://static.igem.org/mediawiki/2017/f/fe/T--Sydney_Australia--rate_my_gel_banner.png" class="banner img-center" width="100%" />
+
<div class="row" style="margin-top:60px;padding: 0 0 20px 0;">
 +
       <img class="img-center center-block" src="https://static.igem.org/mediawiki/2017/b/b7/T--Sydney_Australia--rate_banner.png" class="banner img-center" width="65%" />
 
</div>
 
</div>
 
<form name="imageForm">
 
<form name="imageForm">
 
<div class="row">
 
<div class="row">
 
<div class="col-xs-6">
 
<div class="col-xs-6">
−
<div class="gel center-block">
+
<div class="gel center-block" id="gel-boxL">
−
       <img  name="left" style="width:100%; height: 100%; object-fit: contain" />
+
       <img  name="left" style="width:100%; max-height: 300px; object-fit: contain" />
 
</div>
 
</div>
 
</div>
 
</div>
−
<div class="col-xs-6">
+
<div class="col-xs-6" id="gel-boxR">
 
<div class="gel center-block">
 
<div class="gel center-block">
−
       <img  name="right" style="width:100%; height: 100%; object-fit: contain" />
+
       <img  name="right" style="width:100%; max-height: 300px; object-fit: contain" />
 
</div>
 
</div>
 
</div>
 
</div>
Line 107: Line 122:
 
<div class="col-xs-1">
 
<div class="col-xs-1">
 
</div>
 
</div>
−
<div class="col-xs-3">
+
<div class="col-xs-3" >
−
<input onclick="winnerL();" type=button value="This one!" style="width:100%; object-fit: contain" class="center">
+
<input id="buttonL" onclick="winnerL();" type=button value="This one!" style="width:100%; object-fit: contain" class="center">
 
</div>
 
</div>
 
<div class="col-xs-4">
 
<div class="col-xs-4">
−
      <input onclick="displayImage();" type=button value="Which gel's better?" style="width:100%; object-fit: contain">
 
 
</div>
 
</div>
−
<div class="col-xs-3">
+
<div class="col-xs-3" >
−
<input onclick="winnerR();" type=button value="This one!" style="width:100%; object-fit: contain">
+
<input id="buttonR" onclick="winnerR();" type=button value="This one!" style="width:100%; object-fit: contain">
 
</div>
 
</div>
 
<div class="col-xs-1">
 
<div class="col-xs-1">
 
</div>
 
</div>
−
<div  
+
</div></form>
−
</div>
+
 
<div class="row">
 
<div class="row">
−
<div class="col-xs-12">
+
<div class="col-xs-4">
−
<input onclick="submitting();" type=button value="Submit My Ratings" style="width:100%; object-fit: contain;" class="center">
+
</div>
 +
<div class="col-xs-4">
 +
      <input id="start-button" onclick="displayImage();" type=button value="Let's Play!" style="width:100%; object-fit: contain">
 +
</div>
 +
<div class="col-xs-4">
 +
</div>
 +
</div>
 +
<div class="row" >
 +
<div class="col-xs-12" >
 +
<input id="submit-button" onclick="submitting();" type=button value="Submit My Ratings" style="width:100%; object-fit: contain;" class="center">
 
</div>
 
</div>
 
</div>
 
</div>
Line 134: Line 156:
 
<p>First Place:</p>
 
<p>First Place:</p>
 
<hr />
 
<hr />
−
<img name="first" style="width:100%; height: 100%; object-fit: contain" />
+
<img name="first" style="width:100%; max-height: 300px; object-fit: contain" />
 +
<br>
 +
<p> score=</p><p id="first_score"></p><p>%</p>
 
<ht />
 
<ht />
 
<p>Second Place:</p>
 
<p>Second Place:</p>
 
<hr />
 
<hr />
−
<img name="second" style="width:100%; height: 100%; object-fit: contain" />
+
<img name="second" style="width:100%; max-height: 300px; object-fit: contain" />
 +
<br>
 +
<p> score=</p><p id="second_score"></p><p>%</p>
 
<ht />
 
<ht />
 
<p>Third Place:</p>
 
<p>Third Place:</p>
 
<hr />
 
<hr />
−
<img name="third" style="width:100%; height: 100%; object-fit: contain" />
+
<img name="third" style="width:100%; max-height: 300px; object-fit: contain" />
 +
<br>
 +
<p> score=</p><p id="third_score"></p><p>%</p>
 
</div>
 
</div>
 
</div>
 
</div>
 
</div>
 
</div>
 
</div>
 
</div>
−
 
+
<div class="row" style="height:10vw;">
 +
</div>
 +
</div>
  
 
</body>
 
</body>
 
</html>
 
</html>

Latest revision as of 13:35, 1 November 2017

Results

First Place:


score=

%

Second Place:


score=

%

Third Place:


score=

%