Team:SJTU-Software/Requirement/HumanPractice

From 2014.igem.org

(Difference between revisions)
Line 216: Line 216:
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
-
<link type="text/css" rel="stylesheet" href="https://2014.igem.org/Team:SJTU-Software/default2.css%20?action=raw&ctype=text/css" media="screen" />
+
 
<link href="https://2014.igem.org/Team:SJTU-Software/slider.css%20?action=raw&ctype=text/css" rel="stylesheet" type="text/css" media="all"/>
<link href="https://2014.igem.org/Team:SJTU-Software/slider.css%20?action=raw&ctype=text/css" rel="stylesheet" type="text/css" media="all"/>
<script type="text/javascript" src="https://2014.igem.org/Team:SJTU-Software/min.js%20?action=raw&ctype=text/js"></script>
<script type="text/javascript" src="https://2014.igem.org/Team:SJTU-Software/min.js%20?action=raw&ctype=text/js"></script>
Line 274: Line 274:
         </div>
         </div>
 +
<div align="center" >
 +
    <div class="slider" style="width:71%; padding:4% 0 0 0 ">        
 +
<div class="fluid_container">
 +
        <div class="camera_wrap camera_azure_skin" id="camera_wrap_1" >
 +
            <div data-thumb="https://static.igem.org/mediawiki/2014/6/6a/Sjtu_software_test.jpg" data-src="https://static.igem.org/mediawiki/2014/6/6a/Sjtu_software_test.jpg">  </div>
 +
            <div data-thumb="https://static.igem.org/mediawiki/2014/6/6a/Sjtu_software_test.jpg" data-src="https://static.igem.org/mediawiki/2014/6/6a/Sjtu_software_test.jpg">  </div>
 +
          <div data-thumb="https://static.igem.org/mediawiki/2014/6/6a/Sjtu_software_test.jpg" data-src="https://static.igem.org/mediawiki/2014/6/6a/Sjtu_software_test.jpg">  </div>
 +
            <div data-thumb="https://static.igem.org/mediawiki/2014/6/6a/Sjtu_software_test.jpg" data-src="https://static.igem.org/mediawiki/2014/6/6a/Sjtu_software_test.jpg">  </div>
 +
        </div>
 +
      </div>
 +
        <div class="clear"></div>      
 +
    </div>
-
<div align=center>
+
 
-
   
+
-
<div id="container" style="height:800px;width:71%;background-color:#408080;margin:3% 0 0 0;">
+
-
+
-
+
-
+
-
+
 +
</div>
 +
 +
<div align=center>
 +
    <div class="container2" style="height:400px;width:71%;background-color:#408080;margin:35% 0 0 0;">
 +
<div align=left  >
 +
                          <br>
 +
                          <br>
 +
  <div  class="container2" style="margin:-4% 0 0 0;height:200px;width:28%;float:top; display:inline;" >
 +
                            <p class="text"  style="margin:0% 5% auto"><font face="Microsoft YaHei" size="5px"  color="#FFFFFF">EASY BBK</font></p>
 +
                         
 +
                          <p class="text"  style="margin:2% 5% auto"><font face="Microsoft YaHei" size="4px"  color="#FFFFFF">An EASY Biobrick Blueprint's pacKage</font></p>
 +
                            <p class="text"  style="margin:5% 5% auto"><font face="Microsoft YaHei" size="3px"  color="#FFFFFF">Confusing biobrick database and different ways of interpreting the bio-system remain to be two main problems in synthetic biology. Our team has created "Easy BBK" to help wet-lab users get neat information and evaluation of specific biobricks quickly and to display their bio-system easily. Users can input keywords of the biobrick they are interested in, and select special requirements of certain properties that are listed in the software, biobricks related will be listed, sorted by a score given to each biobrick, which takes into consideration the current status, user comments and reviews, times of citation in a publication and etc. Additionally, users could draw their bio-system easily with the standardized biobrick icons, and they can also look into the detailed information about the biobricks in the bio-system. Finally, before self-created biobricks are uploaded to the official database, users could first assess their biobricks in our software according to our assessment model.</font></p>
 +
                          </div>
 +
</div>
</div>
</div>
</div>
</div>
Line 347: Line 367:
     });
     });
</script>
</script>
-
<script src='https://2014.igem.org/Team:SJTU-Software/jq.js'></script>
 
-
<script src='https://2014.igem.org/Team:SJTU-Software/jcd.js'></script>
 
-
<script type="text/javascript">
 
-
//*
 
-
var imgs;
 
-
 
-
$(document).ready(function () {
 
-
var drag = {};
 
-
$('h1').remove();
 
-
$('#images').append('<li id="instructions"><h4>Toss the images around; if you see one you like, click on it!</h4></li>');
 
-
 
-
imgs = $("#images li");
 
-
imgs.draggable({
 
-
stack : { group : '#images li', min : 1},
 
-
start : function () {
 
-
$this = $(this);
 
-
if($this.attr('id') === 'instructions') { $this.fadeOut().remove(); }
 
-
 
-
imgs.each(function () {
 
-
var $this = $(this);
 
-
if($this.width() !== 256) {
 
-
$this.stop().animate({width : 256 }).removeClass('top');
 
-
}
 
-
});
 
-
 
-
drag.startTime = new Date();
 
-
drag.startPos = $this.position();
 
-
},
 
-
stop : function () {
 
-
var $this = $(this), top, left, time;
 
-
drag.endTime = new Date();
 
-
drag.endPos = $this.position();
 
-
drag.leftOffset = drag.endPos.left - drag.startPos.left;
 
-
drag.topOffset  = drag.endPos.top  - drag.startPos.top;
 
-
 
-
time = (drag.endTime.getTime() - drag.startTime.getTime()) /60;
 
-
 
-
top  = (drag.topOffset / time).toString();
 
-
left = (drag.leftOffset / time).toString();
 
-
 
-
$this.animate({
 
-
top : '+=' + top,
 
-
left: '+=' + left
 
-
});
 
-
}
 
-
});
 
-
 
-
imgs.click(function () {
 
-
var $this = $(this);
 
-
 
-
if ($this.attr('id') == 'instructions') {
 
-
$this.fadeOut().remove();
 
-
}
 
-
else {
 
-
if($this.width() !== 256) {
 
-
$this.stop().animate({width : 256 }).removeClass('top');
 
-
}
 
-
else {
 
-
if (!($this.find('.info').length)) {
 
-
$.ajax({
 
-
url : $this.find('a').attr('href'),
 
-
dataType : 'html',
 
-
success : function (data) {
 
-
var $d = $(data),
 
-
head = $d.filter('h1'),
 
-
para = $d.filter('p');
 
-
 
-
$this.children('div').append('<div class="info"></div>').find(".info").append(head, para);
 
-
},
 
-
error : function () {
 
-
var msg = '<h1>Oops!</h1><p>It looks like there been a problem; we can\'t get this info right now.</p>';
 
-
$this.children('div').append('<div class="info"></div>').find(".info").html(msg);
 
-
}
 
-
});
 
-
}
 
-
$this.css({'zIndex' :8 })
 
-
.stop()
 
-
.animate({ width : 512})
 
-
.addClass('top')
 
-
.siblings().removeClass('top')
 
-
  .stop()
 
-
  .animate({width : 256})
 
-
.filter(function () { return $(this).css('zIndex') >= '8' }).css({'zIndex' : 7});
 
-
}
 
-
}
 
-
return false;
 
-
});
 
-
 
-
});
 
-
 
-
$(window).load(function () {
 
-
$w = $(window);
 
-
imgs.css({
 
-
position : 'absolute',
 
-
left : $w.width() / 2 - imgs.width(),
 
-
top  : $w.height() / 2- imgs.height()
 
-
});
 
-
for(var i = 0; imgs[i]; i++ ) {
 
-
$(imgs[i]).animate({
 
-
left : '+=' + Math.random()*150,
 
-
top  : '+=' + Math.random()*150
 
-
});
 
-
}
 
-
});//*/
 
-
</script>
 
</body>
</body>
</html>
</html>

Revision as of 08:08, 16 October 2014




EASY BBK

An EASY Biobrick Blueprint's pacKage

Confusing biobrick database and different ways of interpreting the bio-system remain to be two main problems in synthetic biology. Our team has created "Easy BBK" to help wet-lab users get neat information and evaluation of specific biobricks quickly and to display their bio-system easily. Users can input keywords of the biobrick they are interested in, and select special requirements of certain properties that are listed in the software, biobricks related will be listed, sorted by a score given to each biobrick, which takes into consideration the current status, user comments and reviews, times of citation in a publication and etc. Additionally, users could draw their bio-system easily with the standardized biobrick icons, and they can also look into the detailed information about the biobricks in the bio-system. Finally, before self-created biobricks are uploaded to the official database, users could first assess their biobricks in our software according to our assessment model.



SJTU-Software

Shanghai Jiao Tong University

800, Dongchuan Road

200240 Shanghai, China

back to top

Retrieved from "http://2014.igem.org/Team:SJTU-Software/Requirement/HumanPractice"