Difference between revisions of "Team:UNOTT/Results"

Line 59: Line 59:
 
     background-color: #ffffff;
 
     background-color: #ffffff;
 
}
 
}
 +
 +
.wrapper
 +
  margin: 40px auto
 +
  width: 400px
 +
  display: block
 +
  text-align: center
 +
  transition: 0.15s ease
 +
  &.active
 +
    .arrow
 +
      transform: rotate(45deg) translate(-5px,-5px)
 +
      &:before
 +
        transform: translate(10px,0)
 +
      &:after
 +
        transform: rotate(90deg) translate(10px,0)
 +
    ul
 +
      opacity: 0.3
 +
      height: 108px
 +
     
 +
.wrapper2
 +
  ul
 +
    border: 1px solid rgba(255, 255, 255, 0.5)
 +
  li
 +
    &:first-child
 +
      margin-top: 16px
 +
    &:last-child
 +
      margin-bottom: 3px
 +
  &.active
 +
    ul
 +
      margin-top: 12px
 +
    .arrow
 +
      transform: rotate(45deg) translate(38px,38px)
 +
      opacity: 0.6
 +
      &:before
 +
        transform: translate(5px,0)
 +
      &:after
 +
        transform: rotate(90deg) translate(5px,0)
 +
 +
.wrapper3
 +
  .arrow
 +
    transform: rotate(0)
 +
    left: 0
 +
    &:before, &:after
 +
      background-color: transparent
 +
      width: 3px
 +
      height: 10px
 +
      display: inline-block
 +
      position: absolute
 +
      border-bottom: 12px solid white
 +
      top: 0
 +
      left: 0
 +
      transform: rotate(0)
 +
    &:before
 +
      transform: rotate(-135deg)
 +
    &:after
 +
      transform: rotate(135deg)
 +
     
 +
  &.active
 +
    .arrow
 +
      transform: rotate(0)
 +
      transform: translate(0, -6px)
 +
      &:before
 +
        transform: rotate(-45deg)
 +
      &:after
 +
        transform: rotate(45deg)
 +
     
 +
 
 +
 +
.arrow
 +
  width: 13px
 +
  height: 13px
 +
  display: inline-block
 +
  position: relative
 +
  bottom: -5px
 +
  left: -10px
 +
  transition: 0.4s ease
 +
  margin-top: 2px
 +
  text-align: left
 +
  transform: rotate(45deg)
 +
  float: right
 +
  &:before, &:after
 +
    position: absolute
 +
    content: ''
 +
    display: inline-block
 +
    width: 12px
 +
    height: 3px
 +
    background-color: #fff
 +
    transition: 0.4s ease
 +
  &:after
 +
    position: absolute
 +
    transform: rotate(90deg)
 +
    top: -5px
 +
    left: 5px
 +
 
 +
.click-text
 +
  display: block
 +
  text-align: left
 +
  padding: 0 12px 16px
 +
  margin: 0
 +
  cursor: pointer
 +
  color: rgba(255, 255, 255, 0.3)
 +
  border-bottom: 1px solid rgba(255, 255, 255, 0.2)
 +
  transition: 0.15s ease
 +
  &:hover
 +
    color: rgba(255, 255, 255, 0.6)
 +
    border-bottom-color: rgba(255, 255, 255, 0.4)
 +
 
 +
ul
 +
  padding: 0
 +
  margin: 0
 +
  height: 0
 +
  overflow: hidden
 +
  opacity: 0
 +
  transition: 0.4s ease
 +
  border-bottom: 1px solid rgba(255, 255, 255, 0.5)
 +
 +
li
 +
  list-style-type: none
 +
  margin: 0 auto
 +
  padding: 4px 12px
 +
  text-align: left
 +
  cursor: pointer
 +
  &:first-child
 +
    margin-top: 12px
 +
  &:last-child
 +
    margin-bottom: 12px
 +
 +
 +
 
 
</style>
 
</style>
  
Line 117: Line 245:
 
</div>  
 
</div>  
  
−
 
 
  
 +
<div class="wrapper wrapper1"  id="wrapper">
 +
  <p class="click-text">
 +
    What does Marsellus Wallace not look like? <span class="arrow"></span>
 +
  </p>
 +
  <ul>
 +
    <li>Black</li>
 +
    <li>Bald</li>
 +
    <li>A Bitch</li>
 +
  </ul> 
 +
</div>
 +
 +
<div class="wrapper wrapper2"  id="wrapper2">
 +
  <p class="click-text">
 +
    Malkovich malkovich? <span class="arrow"></span>
 +
  </p>
 +
  <ul>
 +
    <li>Malkovich</li>
 +
    <li>Malkovich</li>
 +
    <li>Malkovich</li>
 +
  </ul> 
 +
</div>
 +
 +
<div class="wrapper wrapper3"  id="wrapper3">
 +
  <p class="click-text">
 +
    What is your favourite colour? <span class="arrow"></span>
 +
  </p>
 +
  <ul>
 +
    <li>Blue</li>
 +
    <li>Yellow</li>
 +
    <li>Not Sure</li>
 +
  </ul> 
 +
</div> 
 +
 +
<script>
 +
document.getElementById('wrapper').onclick = function() {
 +
 +
    var className = ' ' + wrapper.className + ' ';
 +
 +
    this.className = ~className.indexOf(' active ') ?
 +
                        className.replace(' active ', ' ') :
 +
                        this.className + ' active';
 +
};
 +
 +
document.getElementById('wrapper2').onclick = function() {
 +
 +
    var className = ' ' + wrapper2.className + ' ';
 +
 +
    this.className = ~className.indexOf(' active ') ?
 +
                        className.replace(' active ', ' ') :
 +
                        this.className + ' active';
 +
}
 +
 +
document.getElementById('wrapper3').onclick = function() {
 +
 +
    var className = ' ' + wrapper3.className + ' ';
 +
 +
    this.className = ~className.indexOf(' active ') ?
 +
                        className.replace(' active ', ' ') :
 +
                        this.className + ' active';
 +
}
 +
</script>
 
</body>
 
</body>
 
</html>
 
</html>

Revision as of 19:46, 29 October 2017





RESULTS:

STEP 1: Create guideRNA Plasmid

STEP 2: Create Reporter Plasmid

STEP 3: Create Promoter Library

STEP 4: Random Ligations

STEP 5: Freeze drying & Revivial

STEP 6: CRISPRi & guideRNA efficiency

This picture shows our gRNAs working visually, but the graphs show the results of RFP detection using a microplate reader on cultures containing each of the dCas9 plasmids with one promoter-RFP-terminator brick, with its corresponding gRNA plasmid, or with a non-targeting gRNA plasmid.

What does Marsellus Wallace not look like?

  • Black
  • Bald
  • A Bitch

Malkovich malkovich?

  • Malkovich
  • Malkovich
  • Malkovich

What is your favourite colour?

  • Blue
  • Yellow
  • Not Sure