Difference between revisions of "Team:CHINA CD UESTC/hp education"

Line 30: Line 30:
  
 
}
 
}
 +
/***************gallery***/
 +
#demo1{
 +
    position: relative;   
 +
    margin: 50px auto;
 +
    width: 700px;   
 +
    border:1px solid #ccc;
 +
}
 +
#demo1 .img_list{overflow: hidden; position: relative; height: 260px;}
 +
/* 根据图片的张数来设定ul的宽度 */
 +
.img_list ul{ width: 3500px; position: absolute; height: 260px; left: 0px;}
 +
.img_list li{ float: left; width: 700px;}
 +
.img_list img{ margin: 1px; width: 698px; height: 258px;}
 +
 +
/* 图片对应的按钮样式 */
 +
.btn_list ul{ position: absolute; right: 20px; bottom: 35px; }
 +
.btn_list li{ float: left; margin-right: 10px; color: #999; border: 1px solid #ccc; }
 +
.btn_list li:hover,.btn_list li.on{ cursor: pointer; border: 1px solid #E204A4;}
 +
.btn_list li img{ width: 30px; height: 15px; display: block;}
 +
/* 左右点击的按钮样式 */
 +
#demo1 .toLeft,#demo1 .toRight{
 +
    display: none;
 +
    position: absolute;
 +
    width: 20px;
 +
    height: 30px;   
 +
    top: 110px;   
 +
    background: url(image/zbbg_24.png) no-repeat 0 -150px;
 +
}
 +
 +
/* 图片对应的说明*/
 +
.img_intro{
 +
    position: absolute;
 +
    bottom: 0;
 +
    left: 0;
 +
    width: 100%;
 +
    height: 25px;
 +
}
 +
.img_intro .img_intro_bg,.img_intro .text{
 +
    position: absolute;
 +
    left: 0;
 +
    top: 0;
 +
    width: 100%;
 +
    height: 100%;
 +
}
 +
.img_intro .img_intro_bg{
 +
    background: #000;   
 +
    opacity: .3;
 +
    z-index: 999;
 +
}
 +
.img_intro .text{
 +
    padding: 5px 10px;
 +
    z-index: 1000;
 +
    color: #999;
 +
}
 +
#demo1 .toLeft{
 +
    left: -40px;
 +
}
 +
#demo1 .toRight{
 +
    right: -40px;
 +
    background-position: -50px -150px;
 +
}
 +
 +
/*****************************/
  
 
</style>
 
</style>
Line 80: Line 142:
 
 
 
</div>
 
</div>
 +
</div>
 +
 +
 +
<div id="demo1">
 +
<div class="img_list">
 +
<ul>
 +
<li><a href="http://sc.chinaz.com/" target="_blank"><img src="image/gsh_banner1.jpg" alt="寻花故事"></a></li>
 +
<li><a href="http://sc.chinaz.com/" target="_blank"><img src="image/gsh_banner2.jpg" alt="金瓶梅"></a></li>
 +
<li><a href="http://sc.chinaz.com/" target="_blank"><img src="image/gsh_banner3.jpg" alt="视频听书"></a></li>
 +
<li><a href="http://sc.chinaz.com/" target="_blank"><img src="image/gsh_banner4.jpg" alt="盗墓故事"></a></li>
 +
</ul>
 +
</div>
 +
<div class="btn_list">
 +
<ul>
 +
</ul>
 +
</div>
 +
<div class="img_intro">
 +
<div class="text"><a href="#" target="_blank"></a></div>
 +
<div class="img_intro_bg"></div>           
 +
</div>
 +
<a href="#" id="toLeft" class="link toLeft"></a>
 +
<a href="#" id="toRight" class="link toRight"></a>
 
</div>
 
</div>
  
Line 87: Line 171:
 
</div>
 
</div>
 
</div>
 
</div>
 +
<script type="text/javascript">
 +
var index = 0;
 +
var timer = 0;
 +
var ulist = $('.img_list ul');
 +
var blist = $('.btn_list ul');
 +
var list = ulist.find('li');
 +
var llength = list.length;//li的个数，用来做边缘判断
 +
var lwidth = $(list[0]).width();//每个li的长度，ul每次移动的距离
 +
var uwidth = llength * lwidth;//ul的总宽度
 +
 +
function init(){
 +
//生成按钮(可以隐藏)
 +
addBtn(list);
 +
//显示隐藏左右点击开关
 +
$('.link').css('display', 'block');
 +
$('.link').bind('click', function(event) {
 +
var elm = $(event.target);
 +
doMove(elm.attr('id'));
 +
return false;
 +
});
 +
 +
//初始化描述
 +
var text = ulist.find('li').eq(0).find('img').attr('alt');
 +
var link = ulist.find('li').eq(0).find('a').attr('href');
 +
$('.img_intro .text a').text(text);
 +
$('.img_intro .text a').attr('href',link);
 +
auto();
 +
}
 +
 +
function auto(){
 +
//定时器
 +
timer = setInterval("doMove('toRight')",3000);
 +
 +
$('.img_list li, .btn_list li').hover(function() {
 +
clearInterval(timer);
 +
}, function() {
 +
timer = setInterval("doMove('toRight')",3000);
 +
});
 +
}
 +
 +
function changeBtn(i){
 +
blist.find('li').eq(i).addClass('on').siblings().removeClass('on');
 +
var text = ulist.find('li').eq(i).find('img').attr('alt');
 +
var link = ulist.find('li').eq(i).find('a').attr('href');
 +
$('.img_intro .text a').text(text);
 +
$('.img_intro .text a').attr('href',link);
 +
}
 +
 +
function addBtn (list){
 +
for (var i = 0; i < list.length; i++) {
 +
var imgsrc = $(list[i]).find('img').attr('src');           
 +
var listCon = '<li><img src="'+imgsrc+'""></li>';       
 +
$(listCon).appendTo(blist);
 +
//隐藏button中的数字
 +
//list.css('text-indent', '10000px');
 +
};
 +
blist.find('li').first().addClass('on');
 +
blist.find('li').click(function(event) {
 +
var _index = $(this).index();           
 +
doMove(_index);
 +
});
 +
}
 +
 +
function doMove(direction){
 +
//向右按钮
 +
if (direction =="toRight") {
 +
index++;
 +
if ( index< llength) {
 +
uwidth = lwidth *index;
 +
ulist.css('left',-uwidth);
 +
//ulist.animate({left: -uwidth}, 1000);
 +
 +
}else{
 +
ulist.css('left','0px');
 +
index = 0;
 +
};
 +
//向左按钮         
 +
}else if(direction =="toLeft"){
 +
index--;
 +
if ( index < 0) {
 +
index = llength - 1;               
 +
}
 +
uwidth = lwidth *index;
 +
ulist.css('left',-uwidth);
 +
//ulist.animate({left: -uwidth}, "slow");   
 +
//点击数字跳转 
 +
}else{
 +
index = direction;
 +
uwidth = lwidth *index;
 +
ulist.css('left',-uwidth);
 +
};
 +
changeBtn(index);
 +
}
 +
init();
 +
</script>
  
 
</body>
 
</body>
 
</html>
 
</html>

Revision as of 07:33, 21 August 2015

<!DOCTYPE html>

EDUCATION

  We conducted interviews with the professor of the Hong Kong University Medicine School. Professor Zhaoyi Hu gave us many precious advice from the perspective of the safety.In the end, our members also get the chance to learn the general processes of sample treatment in medical research as well as separation and preservation methods of some bacteria strains.

iGEM and biology promogation

Purpose:

As we were alarmed to learn that most of Chinese believe that synthetic biology is harmful to human health. To combat this problem, we developed a dual-focus, comprehensive educational program targeting students. We thought that educate students is the most effective way to correct people’s conceptions. The team planned and carried out a series of iGEM educational lectures for aged 5-13 years old as part of the University of Electronic Science and Technology’s Education programs event.

1: we went to kindergarten to teach the children some biological knowledge by way of science course.
2: we held an interesting biology lecture on the experimental primary school of UESTC.
3: we extended iGEM to the village schools in order to spread iGEM to remote areas which is low-education. We wanted to teach them more things they do not understand. Viewed from another aspect, we would like to propagation iGEM to wherever our capacity allows.




On May 8th 2015




Members of the Hong Kong University Medicine School visited UESTC Life Science and Technology School. We iGEM experiment team took the opportunity to talk about our project with Professor Zhaoyi Hu. Knowing the main processes of our project, Prof.Hu said, "It seems that the competition not only requires you players have a certain professional basis and innovation capability, but also is a test of students' learning and thinking comprehensive ability." Then he put forward his concerns especially in biosafety aspects, namely, whether the bacteria source itself is safe or pathogenic, and if gene modified organisms are safe.


In the aspect of biosafety, our project have achieved three aspects as following:
1. The safety of bacteria source: DH5α and BL21 (DE3) we use are common bacterial strains;
2. The safety of transgenosis: The genes we will transfer are nonpathogenic and nonpolluting. There are little adverse impacts on environment and rare probability of transgene escape.
3. The safety of experimental operation: We players have formed a strict operation habit, such as sterilization of transgenosis bacterias, protection of experimenters.


In the end, Prof.Hu told us the general processes of sample treatment in medical research as well as separation and preservation methods of some bacteria strains.




Professor Zhaoyi Hu is head of Microbiology Department of Hong Kong University Medicine School, Infection and Immunity Joint Research Center of Hong Kong University. Their results research have a broad impact on international academic circles, especially the medical community .

  • 寻花故事
  • 金瓶梅
  • 视频听书
  • 盗墓故事