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

(Undo revision 116961 by Zhangmanni2015 (talk))
Line 3: Line 3:
 
<!DOCTYPE html>
 
<!DOCTYPE html>
 
<!-- saved from url=(0028)http://www.whitefrontier.ch/ -->
 
<!-- saved from url=(0028)http://www.whitefrontier.ch/ -->
−
<html lang="en" class="js flexbox canvas canvastext webgl no-touch geolocation postmessage websqldatabase indexeddb hashchange history draganddrop websockets rgba hsla multiplebgs backgroundsize borderimage borderradius boxshadow textshadow opacity cssanimations csscolumns cssgradients cssreflections csstransforms csstransforms3d csstransitions fontface generatedcontent video audio localstorage sessionstorage webworkers applicationcache svg inlinesvg smil svgclippaths wf-brandongrotesque-i4-active wf-brandongrotesque-i7-active wf-brandongrotesque-n4-active wf-brandongrotesque-n7-active wf-dincondensedweb-n4-active wf-freightbigpro-i4-active wf-freightbigpro-i7-active wf-freightbigpro-n4-active wf-freightbigpro-n7-active wf-active">
+
<html lang="en" >
 
<head>
 
<head>
  
 
<link rel="stylesheet" href="https://2015.igem.org/Team:CHINA_CD_UESTC/Template:RightStyle.css?action=raw&ctype=text/css" type="text/css" />
 
<link rel="stylesheet" href="https://2015.igem.org/Team:CHINA_CD_UESTC/Template:RightStyle.css?action=raw&ctype=text/css" type="text/css" />
 
</head>
 
</head>
 +
 
<style type="text/css">
 
<style type="text/css">
 
/*************************************************
 
/*************************************************
Line 129: Line 130:
 
</div>
 
</div>
  
 +
<div id="slideshow">
  
−
<div id="demo1">
+
<ul class="slides">
−
<div class="img_list">
+
    <li><img src="img/photos/1.jpg" width="620" height="320" alt="Marsa Alam underawter close up" /></li>
−
<ul>
+
        <li><img src="img/photos/2.jpg" width="620" height="320" alt="Turrimetta Beach - Dawn" /></li>
−
<li><img src="https://static.igem.org/mediawiki/2015/3/34/CHINA_CD_UESTC_HPbg.jpg" ></li>
+
        <li><img src="img/photos/3.jpg" width="620" height="320" alt="Power Station" /></li>
−
<li><img src="https://static.igem.org/mediawiki/2015/3/34/CHINA_CD_UESTC_HPbg.jpg" ></li>
+
        <li><img src="img/photos/4.jpg" width="620" height="320" alt="Colors of Nature" /></li>
−
<li><img src="https://static.igem.org/mediawiki/2015/3/34/CHINA_CD_UESTC_HPbg.jpg" ></li>
+
    </ul>
−
<li><img src="https://static.igem.org/mediawiki/2015/3/34/CHINA_CD_UESTC_HPbg.jpg" ></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>
+
  
 +
    <span class="arrow previous"></span>
 +
    <span class="arrow next"></span>
 
</div>
 
</div>
−
 
  
  
Line 155: Line 147:
 
</div>
 
</div>
 
</div>
 
</div>
 +
 +
<script type="text/javascript" src="https://2015.igem.org/Team:CHINA_CD_UESTC/homeJS.js?action=raw&ctype=text/js"></script>
 
<script type="text/javascript">
 
<script type="text/javascript">
−
var index = 0;
+
$(window).load(function(){
−
var timer = 0;
+
−
var ulist = $('.img_list ul');
+
// We are listening to the window.load event, so we can be sure
−
var blist = $('.btn_list ul');
+
// that the images in the slideshow are loaded properly.
−
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;
 
−
});
 
  
−
//初始化描述
+
// Testing wether the current browser supports the canvas element:
−
var text = ulist.find('li').eq(0).find('img').attr('alt');
+
var supportCanvas = 'getContext' in document.createElement('canvas');
−
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(){
+
// The canvas manipulations of the images are CPU intensive,
−
//定时器
+
// this is why we are using setTimeout to make them asynchronous
−
timer = setInterval("doMove('toRight')",3000);
+
// and improve the responsiveness of the page.
  
−
$('.img_list li, .btn_list li').hover(function() {
+
var slides = $('#slideshow li'),
−
clearInterval(timer);
+
current = 0,
−
}, function() {
+
slideshow = {width:0,height:0};
−
timer = setInterval("doMove('toRight')",3000);
+
−
});
+
−
}
+
  
−
function changeBtn(i){
+
setTimeout(function(){
−
blist.find('li').eq(i).addClass('on').siblings().removeClass('on');
+
−
var text = ulist.find('li').eq(i).find('img').attr('alt');
+
window.console && window.console.time && console.time('Generated In');
−
var link = ulist.find('li').eq(i).find('a').attr('href');
+
−
$('.img_intro .text a').text(text);
+
if(supportCanvas){
−
$('.img_intro .text a').attr('href',link);
+
$('#slideshow img').each(function(){
−
}
+
  
−
function addBtn (list){
+
if(!slideshow.width){
−
for (var i = 0; i < list.length; i++) {
+
// Taking the dimensions of the first image:
−
var imgsrc = $(list[i]).find('img').attr('src');          
+
slideshow.width = this.width;
−
var listCon = '<li><img src="'+imgsrc+'""></li>';       
+
slideshow.height = this.height;
−
$(listCon).appendTo(blist);
+
}
−
//隐藏button中的数字
+
−
//list.css('text-indent', '10000px');
+
// Rendering the modified versions of the images:
−
};
+
createCanvasOverlay(this);
−
blist.find('li').first().addClass('on');
+
});
−
blist.find('li').click(function(event) {
+
}
−
var _index = $(this).index();           
+
−
doMove(_index);
+
window.console && window.console.timeEnd && console.timeEnd('Generated In');
−
});
+
−
}
+
$('#slideshow .arrow').click(function(){
 +
var li = slides.eq(current),
 +
canvas = li.find('canvas'),
 +
nextIndex = 0;
  
−
function doMove(direction){
+
// Depending on whether this is the next or previous
−
//向右按钮
+
// arrow, calculate the index of the next slide accordingly.
−
if (direction =="toRight") {
+
−
index++;
+
if($(this).hasClass('next')){
−
if ( index< llength) {
+
nextIndex = current >= slides.length-1 ? 0 : current+1;
−
uwidth = lwidth *index;
+
}
−
ulist.css('left',-uwidth);
+
else {
−
//ulist.animate({left: -uwidth}, 1000);
+
nextIndex = current <= 0 ? slides.length-1 : current-1;
 +
}
  
−
}else{
+
var next = slides.eq(nextIndex);
−
ulist.css('left','0px');
+
−
index = 0;
+
if(supportCanvas){
−
};  
+
 
−
//向左按钮         
+
// This browser supports canvas, fade it into view:
−
}else if(direction =="toLeft"){
+
 
−
index--;
+
canvas.fadeIn(function(){
−
if ( index < 0) {
+
−
index = llength - 1;              
+
// Show the next slide below the current one:
 +
next.show();
 +
current = nextIndex;
 +
 +
// Fade the current slide out of view:
 +
li.fadeOut(function(){
 +
li.removeClass('slideActive');
 +
canvas.hide();
 +
next.addClass('slideActive');
 +
});
 +
});
 +
}
 +
else {
 +
 +
// This browser does not support canvas.
 +
// Use the plain version of the slideshow.
 +
 +
current=nextIndex;
 +
next.addClass('slideActive').show();
 +
li.removeClass('slideActive').hide();
 +
}
 +
});
 +
 +
},100);
 +
 
 +
// This function takes an image and renders
 +
// a version of it similar to the Overlay blending
 +
// mode in Photoshop.
 +
 +
function createCanvasOverlay(image){
 +
 
 +
var canvas = document.createElement('canvas'),
 +
canvasContext = canvas.getContext("2d");
 +
 +
// Make it the same size as the image
 +
canvas.width = slideshow.width;
 +
canvas.height = slideshow.height;
 +
 +
// Drawing the default version of the image on the canvas:
 +
canvasContext.drawImage(image,0,0);
 +
 +
 
 +
// Taking the image data and storing it in the imageData array:
 +
var imageData = canvasContext.getImageData(0,0,canvas.width,canvas.height),
 +
data = imageData.data;
 +
 +
// Loop through all the pixels in the imageData array, and modify
 +
// the red, green, and blue color values.
 +
 +
for(var i = 0,z=data.length;i<z;i++){
 +
 +
// The values for red, green and blue are consecutive elements
 +
// in the imageData array. We modify the three of them at once:
 +
 +
data[i] = ((data[i] < 128) ? (2*data[i]*data[i] / 255) : (255 - 2 * (255 - data[i]) * (255 - data[i]) / 255));
 +
data[++i] = ((data[i] < 128) ? (2*data[i]*data[i] / 255) : (255 - 2 * (255 - data[i]) * (255 - data[i]) / 255));
 +
data[++i] = ((data[i] < 128) ? (2*data[i]*data[i] / 255) : (255 - 2 * (255 - data[i]) * (255 - data[i]) / 255));
 +
 +
// After the RGB elements is the alpha value, but we leave it the same.
 +
++i;
 
}
 
}
−
uwidth = lwidth *index;
+
−
ulist.css('left',-uwidth);
+
// Putting the modified imageData back to the canvas.
−
//ulist.animate({left: -uwidth}, "slow");  
+
canvasContext.putImageData(imageData,0,0);
−
//点击数字跳转 
+
−
}else{
+
// Inserting the canvas in the DOM, before the image:
−
index = direction;
+
image.parentNode.insertBefore(canvas,image);
−
uwidth = lwidth *index;
+
}
−
ulist.css('left',-uwidth);
+
−
};
+
});
−
changeBtn(index);
+
−
}
+
−
init();
+
−
</script>
+
  
 +
</script>
 
</body>
 
</body>
 
</html>
 
</html>

Revision as of 08:07, 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 .

  • Marsa Alam underawter close up
  • Turrimetta Beach - Dawn
  • Power Station
  • Colors of Nature