Difference between revisions of "Team:Hong Kong UCCKE/Notebook"

 
(66 intermediate revisions by the same user not shown)
Line 1: Line 1:
−
{{Hong_Kong_UCCKE}}
+
{{Hong_Kong_UCCKE/CSS/reset.css}} {{Hong_Kong_UCCKE/CSS/bootstrap.css}} {{Hong_Kong_UCCKE/CSS/style.css}} {{Hong_Kong_UCCKE/CSS/latofonts.css}} {{Hong_Kong_UCCKE/CSS/font-awesome.css}} {{Hong_Kong_UCCKE/CSS/jcarousel.responsive.css}} {{Hong_Kong_UCCKE/CSS/bootstrap.toc.css}}
 
<html>
 
<html>
−
<script src="https://codyhouse.co/demo/horizontal-timeline/js/jquery-2.1.4.js"></script>
+
 
−
<script src="https://codyhouse.co/demo/horizontal-timeline/js/jquery.mobile.custom.min.js"></script>
+
−
<script src="https://codyhouse.co/demo/horizontal-timeline/js/main.js"></script>
+
−
<script async type="text/javascript" src="//cdn.carbonads.com/carbon.js?zoneid=1673&serve=C6AILKT&placement=codyhouseco" id="_carbonads_js"></script>
+
−
<link rel="stylesheet" href="https://codyhouse.co/demo/horizontal-timeline/css/reset.css"> <!-- CSS reset -->
+
−
<link rel="stylesheet" href="https://codyhouse.co/demo/horizontal-timeline/css/style.css"> <!-- Resource style -->
+
−
<script src="https://codyhouse.co/demo/horizontal-timeline/js/modernizr.js"></script> <!-- Modernizr -->
+
 
<style>
 
<style>
−
.cd-horizontal-timeline .events-content {
+
    h2 {
−
  position: relative;
+
        padding-top: 50px;
−
}
+
        margin-top: -30px;
−
.cd-horizontal-timeline .events-content li {
+
     }
−
  position: absolute;
+
−
  z-index: 1;
+
−
  width: 100%;
+
−
  left: 0;
+
−
  top: 0;
+
−
  transform: translateX(-100%);
+
−
  opacity: 0;
+
−
  animation-duration: 0.4s;
+
−
  animation-timing-function: ease-in-out;
+
−
}
+
−
.cd-horizontal-timeline .events-content li.selected {
+
−
  /* visible event content */
+
−
  position: relative;
+
−
  z-index: 2;
+
−
  opacity: 1;
+
−
  transform: translateX(0);
+
−
}
+
−
.cd-horizontal-timeline .events-content li.enter-right,
+
−
.cd-horizontal-timeline .events-content li.leave-right {
+
−
  animation-name: cd-enter-right;
+
−
}
+
−
.cd-horizontal-timeline .events-content li.enter-left,
+
−
.cd-horizontal-timeline .events-content li.leave-left {
+
−
  animation-name: cd-enter-left;
+
−
}
+
−
.cd-horizontal-timeline .events-content li.leave-right,
+
−
.cd-horizontal-timeline .events-content li.leave-left {
+
−
  animation-direction: reverse;
+
−
}
+
−
@keyframes cd-enter-right {
+
−
  0% {
+
−
     opacity: 0;
+
−
    transform: translateX(100%);
+
−
  }
+
−
  100% {
+
−
    opacity: 1;
+
−
    transform: translateX(0%);
+
−
  }
+
−
}
+
−
@keyframes cd-enter-left {
+
−
  0% {
+
−
    opacity: 0;
+
−
    transform: translateX(-100%);
+
−
  }
+
−
  100% {
+
−
    opacity: 1;
+
−
    transform: translateX(0%);
+
−
  }
+
−
}
+
 
</style>
 
</style>
  
−
<section class="cd-horizontal-timeline">
+
<link rel="stylesheet" href="https://2016.igem.org/Team:Leiden/libraries/font-awesome-4-6-3/css/font-awesome-min?action=raw&amp;ctype=text/css" type="text/css" />
−
<div class="timeline">
+
<meta name="viewport" content="width=device-width, initial-scale=1">
−
<div class="events-wrapper">
+
<div class="wholehead">
−
<div class="events">
+
−
<ol>
+
−
<li><a href="#0" data-date="16/01/2014" class="selected">16 Jan</a></li>
+
−
<li><a href="#0" data-date="28/02/2014">28 Feb</a></li>
+
−
<!-- other dates here -->
+
−
</ol>
+
−
+
−
<span class="filling-line" aria-hidden="true"></span>
+
−
</div> <!-- .events -->
+
−
</div> <!-- .events-wrapper -->
+
−
+
−
<ul class="cd-timeline-navigation">
+
−
<li><a href="#0" class="prev inactive">Prev</a></li>
+
−
<li><a href="#0" class="next">Next</a></li>
+
−
</ul> <!-- .cd-timeline-navigation -->
+
−
</div> <!-- .timeline -->
+
−
+
−
<div class="events-content">
+
−
<ol>
+
−
<li class="selected" data-date="16/01/2014">
+
−
<h2>Horizontal Timeline</h2>
+
−
<em>January 16th, 2014</em>
+
−
<p>
+
−
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illum praesentium officia, fugit recusandae ipsa, quia velit nulla adipisci? Consequuntur aspernatur at, eaque hic repellendus sit dicta consequatur quae, ut harum ipsam molestias maxime non nisi reiciendis eligendi! Doloremque quia pariatur harum ea amet quibusdam quisquam, quae, temporibus dolores porro doloribus.
+
−
</p>
+
−
</li>
+
−
+
−
<li data-date="28/02/2014">
+
−
<!-- event description here -->
+
−
</li>
+
−
+
−
<!-- other descriptions here -->
+
−
</ol>
+
−
</div> <!-- .events-content -->
+
−
</section>
+
  
 +
</html>
 +
{{Hong_Kong_UCCKE/crazyheader}}
 +
<html>
 +
<div class="header" id="header">
 +
    <div class="container">
  
 +
        <div class="row">
 +
            <div class="col-sm-12 page_header-text">
 +
                <div>
 +
                    <h1 data-toc-skip>UCCKE / Notebook</h1>
 +
                    <p>In this page, you can breifly know about the process of our project.</p>
 +
                </div>
 +
            </div>
 +
            <div class="col-sm-12" style="text-align:center;">
 +
                <a href="#normalsec" class="no-text-dec">
 +
                    <i class="fa fa-angle-down header-down" aria-hidden="true" style="font-size:40px; margin-bottom:10px;"></i>
 +
                </a>
 +
            </div>
 +
        </div>
  
 +
    </div>
 +
</div>
 +
</div>
 +
   
  
  
Line 116: Line 48:
  
  
 +
<div class="container" id="normalsec">
  
−
<div class="container">
+
<link rel="stylesheet" href="https://2016.igem.org/Template:Hong_Kong_UCCKE/NotebookCSS?action=raw&amp;ctype=text/css"> <!-- Resource style -->
−
<section class="main">
+
<script src="https://2016.igem.org/Template:Hong_Kong_UCCKE/NotebookOneJS?action=raw&amp;ctype=text/javascript"></script> <!-- Modernizr -->
−
<div class="custom-calendar-wrap">
+
<section id="cd-timeline" class="cd-container">
−
<div id="custom-inner" class="custom-inner">
+
<div class="cd-timeline-block">
−
<div class="custom-header clearfix">
+
<div class="cd-timeline-img cd-picture">
−
<nav>
+
<i class="fa fa-users timeline-icons" aria-hidden="true"></i>
−
<span id="custom-prev" class="custom-prev"></span>
+
−
<span id="custom-next" class="custom-next"></span>
+
</div> <!-- <img src="img/cd-icon-picture.svg" alt="Picture"> cd-timeline-img -->
−
</nav>
+
−
<h2 id="custom-month" class="custom-month"></h2>
+
−
<h3 id="custom-year" class="custom-year"></h3>
+
−
</div>
+
−
<div id="calendar" class="fc-calendar-container"></div>
+
−
</div>
+
−
</div>
+
−
</section>
+
−
</div><!-- /container -->
+
−
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
+
−
<script type="text/javascript" src="https://2016.igem.org/Template:Hong_Kong_UCCKE/JS/calendario?action=raw"></script>
+
−
<script type="text/javascript" src="https://2016.igem.org/Template:Hong_Kong_UCCKE/JS/calendariodata?action=raw"></script>
+
−
<script type="text/javascript">
+
−
$(function() {
+
−
+
−
var transEndEventNames = {
+
−
'WebkitTransition' : 'webkitTransitionEnd',
+
−
'MozTransition' : 'transitionend',
+
−
'OTransition' : 'oTransitionEnd',
+
−
'msTransition' : 'MSTransitionEnd',
+
−
'transition' : 'transitionend'
+
−
},
+
−
transEndEventName = transEndEventNames[ Modernizr.prefixed( 'transition' ) ],
+
−
$wrapper = $( '#custom-inner' ),
+
−
$calendar = $( '#calendar' ),
+
−
cal = $calendar.calendario( {
+
−
onDayClick : function( $el, $contentEl, dateProperties ) {
+
  
−
if( $contentEl.length > 0 ) {
+
<div class="cd-timeline-content">
−
showEvents( $contentEl, dateProperties );
+
<h2>Meeting with Team:HKU</h2>
−
}
+
<p style="text-align:left !important;">We have met the members from the Hong Kong University iGem team (known as the HKU iGem team), briefly introduce to them our interested area of study and the origin of the idea. By sharing our interested fields, we established a close bond in between. Thanks to the HKU iGem team, we can set our topic with more background knowledges provided.<br>
 +
<img src="https://static.igem.org/mediawiki/2016/6/6f/T--Hong_Kong_UCCKE--collabhku2.jpeg" style="width:100%; max-width:400px;">
 +
</p>
 +
 +
<span class="cd-date">Apr 20</span>
 +
</div> <!-- cd-timeline-content -->
 +
</div> <!-- cd-timeline-block -->
  
−
},
+
<div class="cd-timeline-block">
−
caldata : codropsEvents,
+
<div class="cd-timeline-img cd-movie">
−
displayWeekAbbr : true
+
<i class="fa fa-comment timeline-icons" aria-hidden="true"></i>
−
} ),
+
</div> <!-- cd-timeline-img -->
−
$month = $( '#custom-month' ).html( cal.getMonthName() ),
+
−
$year = $( '#custom-year' ).html( cal.getYear() );
+
  
−
$( '#custom-next' ).on( 'click', function() {
+
<div class="cd-timeline-content">
−
cal.gotoNextMonth( updateMonthYear );
+
<h2>Finalized project idea</h2>
−
} );
+
<p>We have finalized the area of investigation during our meeting after 3 weeks of researches and discussion subsequent to our meeting with HKU iGem team. We have eventually decided to investigate on C. elegans, a kind of well-studied roundworm which has a short life cycle and is easy to reproduce. </p>
−
$( '#custom-prev' ).on( 'click', function() {
+
−
cal.gotoPreviousMonth( updateMonthYear );
+
<span class="cd-date">May 9</span>
−
} );
+
</div> <!-- cd-timeline-content -->
 +
</div> <!-- cd-timeline-block -->
  
−
function updateMonthYear() {
+
<div class="cd-timeline-block">
−
$month.html( cal.getMonthName() );
+
<div class="cd-timeline-img cd-picture">
−
$year.html( cal.getYear() );
+
<i class="fa fa-users timeline-icons" aria-hidden="true"></i>
−
}
+
 +
</div> <!-- cd-timeline-img -->
  
−
// just an example..
+
<div class="cd-timeline-content">
−
function showEvents( $contentEl, dateProperties ) {
+
<h2>Meeting with Team:HKU</h2>
 +
<p>We have the second meeting with the HKU iGem team through video conference software to exchange our progress and discussed on the possibility of further development regarding our collaboration bond. </p>
 +
 +
<span class="cd-date">Jun 29</span>
 +
</div> <!-- cd-timeline-content -->
 +
</div> <!-- cd-timeline-block -->
  
−
hideEvents();
+
<div class="cd-timeline-block">
−
+
<div class="cd-timeline-img cd-location">
−
var $events = $( '<div id="custom-content-reveal" class="custom-content-reveal"><h4>Events for ' + dateProperties.monthname + ' ' + dateProperties.day + ', ' + dateProperties.year + '</h4></div>' ),
+
<img src="https://static.igem.org/mediawiki/2016/d/d5/T--Hong_Kong_UCCKE--notebookicon1.png" alt="Location">
−
$close = $( '<span class="custom-content-close"></span>' ).on( 'click', hideEvents );
+
</div> <!-- cd-timeline-img -->
  
−
$events.append( $contentEl.html() , $close ).insertAfter( $wrapper );
+
<div class="cd-timeline-content">
−
+
<h2>Um....</h2>
−
setTimeout( function() {
+
<p>Supposedly we should meet to kick off our experiments on our project, yet it was cancelled due to the bad weather. </p>
−
$events.css( 'top', '0%' );
+
−
}, 25 );
+
<span class="cd-date">Aug 10</span>
 +
</div> <!-- cd-timeline-content -->
 +
</div> <!-- cd-timeline-block -->
  
−
}
+
<div class="cd-timeline-block">
−
function hideEvents() {
+
<div class="cd-timeline-img cd-location">
 +
<img src="https://static.igem.org/mediawiki/2016/d/d5/T--Hong_Kong_UCCKE--notebookicon1.png" alt="Location">
 +
</div> <!-- cd-timeline-img -->
  
−
var $events = $( '#custom-content-reveal' );
+
<div class="cd-timeline-content">
−
if( $events.length > 0 ) {
+
<h2>Preperation for experiment</h2>
−
+
<p>Meeting in the laboratory, we are briefed by our co-workers on the characteristics of C. elegans before doing and hands on experiment in the morning. Meanwhile we started on preparing for the presentation in the Giant Jamboree. We started having practices on the experiment before the real one. </p>
−
$events.css( 'top', '100%' );
+
−
Modernizr.csstransitions ? $events.on( transEndEventName, function() { $( this ).remove(); } ) : $events.remove();
+
<span class="cd-date">Aug 11</span>
 +
</div> <!-- cd-timeline-content -->
 +
</div> <!-- cd-timeline-block -->
  
−
}
+
<div class="cd-timeline-block">
 +
<div class="cd-timeline-img cd-location">
 +
<img src="https://static.igem.org/mediawiki/2016/d/d5/T--Hong_Kong_UCCKE--notebookicon1.png" alt="Location">
 +
</div> <!-- cd-timeline-img -->
  
−
}
+
<div class="cd-timeline-content">
−
+
<h2>Experiment, collect data</h2>
−
});
+
<p>Laboratory work continues and the presentation preparation goes quite well. We started our real experiment today and a few chemicals were tested. The results are quite surprising as some of the results are completely different from our expectation. Data is being collected and inputted at the same time </p>
−
</script>
+
 +
<span class="cd-date">Aug 12</span>
 +
</div> <!-- cd-timeline-content -->
 +
</div> <!-- cd-timeline-block -->
  
 +
<div class="cd-timeline-block">
 +
<div class="cd-timeline-img cd-location">
 +
<img src="https://static.igem.org/mediawiki/2016/d/d5/T--Hong_Kong_UCCKE--notebookicon1.png" alt="Location">
 +
</div> <!-- cd-timeline-img -->
  
 +
<div class="cd-timeline-content">
 +
<h2>Experiment, collect data</h2>
 +
<p>This is the last day we planned to carry out our experiments. The presentation preparation is mostly done and the results of the experiment are all inputted.</p>
 +
 +
<span class="cd-date">Aug 15</span>
 +
</div> <!-- cd-timeline-content -->
 +
</div> <!-- cd-timeline-block -->
  
 +
<div class="cd-timeline-block">
 +
<div class="cd-timeline-img cd-picture">
 +
<i class="fa fa-users timeline-icons" aria-hidden="true"></i>
 +
 +
</div> <!-- cd-timeline-img -->
  
 +
<div class="cd-timeline-content">
 +
<h2>Meeting with Team:HKU</h2>
 +
<p style="text-align:left !important;">We had our third meeting with the HKU iGem team to update each other with our progress thus to confirm some details of an extra collaborative activity. Simultaneously we have finished analyzing the data extracted from the experiment carried out previously. <br>
 +
<img src="https://static.igem.org/mediawiki/2016/5/59/T--Hong_Kong_UCCKE--collabhku5.jpeg" style="width:100%; max-width:400px;">
 +
</p>
 +
<span class="cd-date">Aug 19</span>
 +
</div> <!-- cd-timeline-content -->
 +
</div> <!-- cd-timeline-block -->
 +
</section> <!-- cd-timeline -->
 +
<script src="https://2016.igem.org/Template:Hong_Kong_UCCKE/NotebookTwoJS?action=raw&amp;ctype=text/javascript"></script>
 +
</div>
  
  
  
−
<div id="onClick-placeholder"></div>
 
  
  
  
−
<div class="column full_size">
 
  
−
<p> Document the dates you worked on your project.</p>
+
<style>
 +
.cd-timeline-content {
 +
    background-color: rgba(241, 241, 241, 0.7) !important;
 +
}
 +
.cd-timeline-content h2 {
 +
    font-size:25px !important;
 +
}
 +
.cd-timeline-content .cd-read-more, .cd-timeline-content .cd-date {
 +
    font-size:19px !important;
 +
}
 +
.timeline-icons {
 +
    font-size: 20px;
 +
    color: #fff;
 +
    margin-left: 10px;
 +
    margin-top: 10px;
 +
}
 +
@media only screen and (min-width: 1170px) {
 +
.timeline-icons {
 +
    font-size: 20px;
 +
    color: #fff;
 +
    margin-left: 20px;
 +
    margin-top: 20px;
 +
}
 +
}
 +
</style>
  
−
</div>
 
  
−
<div class="column half_size">
+
<style>
−
<h5>What should this page have?</h5>
+
.wholehead, .teaminnumbercont, .mainfooter, .tourbefore {
−
<ul>
+
    background-color: #d0b153 !important;
−
<li>Chronological notes of what your team is doing.</li>
+
}
−
<li> Brief descriptions of daily important events.</li>
+
nav[data-toggle='toc'] .nav > .active > a, nav[data-toggle='toc'] .nav > .active:hover > a, nav[data-toggle='toc'] .nav > .active:focus > a {
−
<li>Pictures of your progress. </li>
+
    border-left: 1px solid #d0b153 !important;
−
<li>Mention who participated in what task.</li>
+
    color: #d0b153 !important;
−
</ul>
+
}
−
 
+
nav[data-toggle='toc'] .nav > li > a:hover, nav[data-toggle='toc'] .nav > li > a:focus {
−
</div>
+
    border-left: #d09153 !important;
−
 
+
    color: #d0b153 !important;
−
<div class="column half_size">
+
}
−
<h5>Inspiration</h5>
+
.label-primary {
−
<p>You can see what others teams have done to organize their notes:</p>
+
    background-color: #b79634 !important;
−
 
+
}
−
<ul>
+
.header-down:hover {
−
<li><a href="https://2014.igem.org/Team:ATOMS-Turkiye/Notebook">2014 ATOMS-Turkiye</a></li>
+
    color: #7b6523 !important;
−
<li><a href="https://2014.igem.org/Team:Tec-Monterrey/ITESM14_project.html#tab_notebook">2014 Tec Monterrey</a></li>
+
}
−
<li><a href="https://2014.igem.org/Team:Kyoto/Notebook/Magnetosome_Formation#title">2014 Kyoto</a></li>
+
.copyrightfooter {
−
<li><a href="https://2014.igem.org/Team:Cornell/notebook">2014 Cornell</a></li>
+
    background-color: #a48b41 !important;
−
</ul>
+
}
−
 
+
#return-to-top {
−
</div>
+
    background: rgba(208, 177, 83, 0.8) !important;
 +
}
 +
#return-to-top:hover {
 +
    background: rgb(208, 177, 83) !important;
 +
}
 +
.mainfooter .fa:hover {
 +
    color: #cdbd8e !important;
 +
}
 +
.tourbefore:hover {
 +
    background-color: #a68d42 !important;
 +
}
 +
#normalsec a {
 +
    color: #d0b153 !important;
 +
}
 +
</style>
 +
<center style="margin-left:5px; margin-right:5px;">
 
</html>
 
</html>
 +
{{Hong_Kong_UCCKE/tourbefore|Results|Results|Parts|Parts}}
 +
<html>
 +
</center>
 +
</html>
 +
 +
{{Hong_Kong_UCCKE/heyfooter}}
 +
{{Hong_Kong_UCCKE/illbeback}}

Latest revision as of 16:24, 19 October 2016

Meeting with Team:HKU

We have met the members from the Hong Kong University iGem team (known as the HKU iGem team), briefly introduce to them our interested area of study and the origin of the idea. By sharing our interested fields, we established a close bond in between. Thanks to the HKU iGem team, we can set our topic with more background knowledges provided.

Apr 20

Finalized project idea

We have finalized the area of investigation during our meeting after 3 weeks of researches and discussion subsequent to our meeting with HKU iGem team. We have eventually decided to investigate on C. elegans, a kind of well-studied roundworm which has a short life cycle and is easy to reproduce.

May 9

Meeting with Team:HKU

We have the second meeting with the HKU iGem team through video conference software to exchange our progress and discussed on the possibility of further development regarding our collaboration bond.

Jun 29
Location

Um....

Supposedly we should meet to kick off our experiments on our project, yet it was cancelled due to the bad weather.

Aug 10
Location

Preperation for experiment

Meeting in the laboratory, we are briefed by our co-workers on the characteristics of C. elegans before doing and hands on experiment in the morning. Meanwhile we started on preparing for the presentation in the Giant Jamboree. We started having practices on the experiment before the real one.

Aug 11
Location

Experiment, collect data

Laboratory work continues and the presentation preparation goes quite well. We started our real experiment today and a few chemicals were tested. The results are quite surprising as some of the results are completely different from our expectation. Data is being collected and inputted at the same time

Aug 12
Location

Experiment, collect data

This is the last day we planned to carry out our experiments. The presentation preparation is mostly done and the results of the experiment are all inputted.

Aug 15

Meeting with Team:HKU

We had our third meeting with the HKU iGem team to update each other with our progress thus to confirm some details of an extra collaborative activity. Simultaneously we have finished analyzing the data extracted from the experiment carried out previously.

Aug 19