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

 
(17 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();
Line 20: Line 19:
 
imagesArray[9] = {image:"https://static.igem.org/mediawiki/2017/6/68/Ratemygel_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:"https://static.igem.org/mediawiki/2017/b/b2/Ratemygel_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 87: Line 93:
  
 
.center, .row {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%; max-height: 300px; 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%; max-height: 300px; object-fit: contain" />
 
       <img  name="right" style="width:100%; max-height: 300px; object-fit: contain" />
Line 110: 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 156: Line 175:
 
</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=

%